{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "css-background-pattern",
  "title": "Css Background Pattern",
  "description": "The nx-ui Css Background Pattern component.",
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/css-background-pattern.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * CssBackgroundPattern — pure-CSS full-bleed patterned backdrops for hero,\n * section and card surfaces. No SVG: each variant is a `position: absolute\n * inset-0` layer built from repeating gradients, optionally radially masked so\n * it fades toward an edge or the centre.\n *\n * Every line is drawn with `--pattern-line` (defaulting to the theme's\n * `--color-border-tertiary`), so the whole family flips correctly in dark mode.\n * Ported from Untitled UI's css-background-patterns, framework-agnostic.\n *\n * Paint-behind contract (shared with `glow` and `background-pattern`): the\n * layer is `pointer-events-none` and `-z-10`, so it stacks behind sibling\n * content with no z-index on the content. The wrapping element MUST be\n * `relative isolate` — the `isolate` creates the stacking context that `-z-10`\n * resolves against; without it the layer escapes to an ancestor stacking\n * context and paints behind the wrapper's own background (i.e. it silently\n * disappears). `inset-0` means it never outgrows the wrapper — everything it\n * overlaps is inside the wrapper, so the wrapper is always the right isolate\n * boundary. Keep `overflow-hidden` on rounded containers so the corners stay\n * clipped.\n *\n * @example\n * <div className=\"relative isolate overflow-hidden\">\n *   <CssBackgroundPattern variant=\"bottom-fade-grid\" />\n *   …content…\n * </div>\n */\n\ntype CssPatternVariant =\n  | \"basic-grid\"\n  | \"diagonal-cross-grid\"\n  | \"center-fade-diagonal-cross-grid\"\n  | \"bottom-fade-grid\"\n  | \"top-right-fade-grid\"\n  | \"bottom-right-fade-diagonal-cross-grid\"\n  | \"top-fade-dashed-grid\"\n\nconst PATTERN_LINE = \"var(--color-border-tertiary)\"\n\nconst diagonalCross = `\n  repeating-linear-gradient(45deg, transparent, transparent 32px, ${PATTERN_LINE} 32px, ${PATTERN_LINE} 33px),\n  repeating-linear-gradient(135deg, transparent, transparent 32px, ${PATTERN_LINE} 32px, ${PATTERN_LINE} 33px)\n`\n\nconst dashedMask = `\n  repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px),\n  repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px),\n  radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)\n`\n\nfunction variantStyle(variant: CssPatternVariant): React.CSSProperties {\n  switch (variant) {\n    case \"diagonal-cross-grid\":\n      return { backgroundImage: diagonalCross }\n    case \"center-fade-diagonal-cross-grid\":\n      return {\n        backgroundImage: diagonalCross,\n        maskImage:\n          \"radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)\",\n        WebkitMaskImage:\n          \"radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)\",\n      }\n    case \"bottom-fade-grid\":\n      return {\n        maskImage:\n          \"radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)\",\n        WebkitMaskImage:\n          \"radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)\",\n      }\n    case \"top-right-fade-grid\":\n      return {\n        maskImage:\n          \"radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)\",\n        WebkitMaskImage:\n          \"radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)\",\n      }\n    case \"bottom-right-fade-diagonal-cross-grid\":\n      return {\n        backgroundImage: diagonalCross,\n        maskImage:\n          \"radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)\",\n        WebkitMaskImage:\n          \"radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)\",\n      }\n    case \"top-fade-dashed-grid\":\n      return {\n        backgroundImage: `\n          linear-gradient(to right, ${PATTERN_LINE} 1px, transparent 1px),\n          linear-gradient(to bottom, ${PATTERN_LINE} 1px, transparent 1px)\n        `,\n        backgroundSize: \"20px 20px\",\n        backgroundPosition: \"0 0, 0 0\",\n        maskImage: dashedMask,\n        WebkitMaskImage: dashedMask,\n        maskComposite: \"intersect\",\n        WebkitMaskComposite: \"source-in\",\n      }\n    case \"basic-grid\":\n    default:\n      return {}\n  }\n}\n\n/** Grid variants use a Tailwind bg utility; cross/dashed variants use inline `backgroundImage`. */\nconst gridBgClass =\n  \"bg-[linear-gradient(to_right,_var(--pattern-line)_1px,transparent_1px),linear-gradient(to_bottom,_var(--pattern-line)_1px,transparent_1px)]\"\n\nfunction CssBackgroundPattern({\n  variant = \"basic-grid\",\n  className,\n  style,\n  ...props\n}: React.ComponentProps<\"div\"> & { variant?: CssPatternVariant }) {\n  const isGrid =\n    variant === \"basic-grid\" ||\n    variant === \"bottom-fade-grid\" ||\n    variant === \"top-right-fade-grid\"\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"css-background-pattern\"\n      data-variant={variant}\n      className={cn(\n        \"pointer-events-none absolute inset-0 -z-10\",\n        isGrid && gridBgClass,\n        variant === \"basic-grid\" && \"bg-[length:40px_40px]\",\n        (variant === \"bottom-fade-grid\" || variant === \"top-right-fade-grid\") &&\n          \"bg-[length:32px_32px]\",\n        className\n      )}\n      style={{\n        [\"--pattern-line\" as string]: PATTERN_LINE,\n        ...variantStyle(variant),\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { CssBackgroundPattern }\nexport type { CssPatternVariant }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}