{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bg-pattern",
  "title": "Bg Pattern",
  "author": "Poyraz Avsever",
  "description": "Poyraz Soft Glass bg-pattern component.",
  "dependencies": [],
  "registryDependencies": [
    "@poyraz/poyraz-utils",
    "@poyraz/poyraz-theme"
  ],
  "files": [
    {
      "path": "registry/poyraz/ui/phase5/atoms/bg-pattern.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ================================================================== */\n/*  BG PATTERNS — Soft, minimal, customizable background patterns      */\n/* ================================================================== */\n\nexport interface BgPatternProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Pattern color — any valid CSS color */\n  color?: string;\n  /** Pattern opacity (0-1) */\n  opacity?: number;\n  /** Pattern size / spacing in px */\n  size?: number;\n  /** Whether the pattern covers its parent absolutely */\n  overlay?: boolean;\n}\n\nconst baseClass = \"pointer-events-none select-none\";\nconst overlayClass = \"absolute inset-0 z-0\";\n\nfunction patternWrapper(overlay: boolean | undefined, className: string | undefined) {\n  return cn(baseClass, overlay && overlayClass, className);\n}\n\n/* ── 1. Dots ──────────────────────────────────────────────────────── */\n\nexport const PatternDots = React.forwardRef<HTMLDivElement, BgPatternProps>(\n  (\n    { color = \"currentColor\", opacity = 0.08, size = 24, overlay, className, style, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n\n      data-slot=\"background-pattern\"\n\n      data-pattern=\"dots\"\n      className={patternWrapper(overlay, className)}\n      style={{\n        backgroundImage: `radial-gradient(${color} 1px, transparent 1px)`,\n        backgroundSize: `${size}px ${size}px`,\n        opacity,\n        ...style,\n      }}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  ),\n);\nPatternDots.displayName = \"PatternDots\";\n\n/* ── 2. Grid / Boxes ──────────────────────────────────────────────── */\n\nexport const PatternGrid = React.forwardRef<HTMLDivElement, BgPatternProps>(\n  (\n    { color = \"currentColor\", opacity = 0.06, size = 40, overlay, className, style, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n\n      data-slot=\"background-pattern\"\n\n      data-pattern=\"grid\"\n      className={patternWrapper(overlay, className)}\n      style={{\n        backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,\n        backgroundSize: `${size}px ${size}px`,\n        opacity,\n        ...style,\n      }}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  ),\n);\nPatternGrid.displayName = \"PatternGrid\";\n\n/* ── 3. Lines (Horizontal) ────────────────────────────────────────── */\n\nexport const PatternLines = React.forwardRef<HTMLDivElement, BgPatternProps>(\n  (\n    { color = \"currentColor\", opacity = 0.06, size = 20, overlay, className, style, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n\n      data-slot=\"background-pattern\"\n\n      data-pattern=\"lines\"\n      className={patternWrapper(overlay, className)}\n      style={{\n        backgroundImage: `linear-gradient(${color} 1px, transparent 1px)`,\n        backgroundSize: `100% ${size}px`,\n        opacity,\n        ...style,\n      }}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  ),\n);\nPatternLines.displayName = \"PatternLines\";\n\n/* ── 4. Diagonal Lines ────────────────────────────────────────────── */\n\nexport const PatternDiagonal = React.forwardRef<HTMLDivElement, BgPatternProps>(\n  (\n    { color = \"currentColor\", opacity = 0.06, size = 16, overlay, className, style, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n\n      data-slot=\"background-pattern\"\n\n      data-pattern=\"diagonal\"\n      className={patternWrapper(overlay, className)}\n      style={{\n        backgroundImage: `repeating-linear-gradient(\n          45deg,\n          transparent,\n          transparent ${size - 1}px,\n          ${color} ${size - 1}px,\n          ${color} ${size}px\n        )`,\n        opacity,\n        ...style,\n      }}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  ),\n);\nPatternDiagonal.displayName = \"PatternDiagonal\";\n\n/* ── 5. Cross / Plus ──────────────────────────────────────────────── */\n\nexport const PatternCross = React.forwardRef<HTMLDivElement, BgPatternProps>(\n  (\n    { color = \"currentColor\", opacity = 0.07, size = 32, overlay, className, style, ...props },\n    ref,\n  ) => {\n    const half = size / 2;\n    return (\n      <div\n        ref={ref}\n\n        data-slot=\"background-pattern\"\n\n        data-pattern=\"cross\"\n        className={patternWrapper(overlay, className)}\n        style={{\n          backgroundImage: `\n            linear-gradient(${color} 1px, transparent 1px),\n            linear-gradient(90deg, ${color} 1px, transparent 1px)\n          `,\n          backgroundSize: `${size}px ${size}px`,\n          backgroundPosition: `${half}px ${half}px`,\n          opacity,\n          ...style,\n        }}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  },\n);\nPatternCross.displayName = \"PatternCross\";\n\n/* ── 6. Checkerboard ──────────────────────────────────────────────── */\n\nexport const PatternCheckerboard = React.forwardRef<HTMLDivElement, BgPatternProps>(\n  (\n    { color = \"currentColor\", opacity = 0.04, size = 32, overlay, className, style, ...props },\n    ref,\n  ) => {\n    const half = size / 2;\n    return (\n      <div\n        ref={ref}\n\n        data-slot=\"background-pattern\"\n\n        data-pattern=\"checkerboard\"\n        className={patternWrapper(overlay, className)}\n        style={{\n          backgroundImage: `\n            linear-gradient(45deg, ${color} 25%, transparent 25%, transparent 75%, ${color} 75%),\n            linear-gradient(45deg, ${color} 25%, transparent 25%, transparent 75%, ${color} 75%)\n          `,\n          backgroundSize: `${size}px ${size}px`,\n          backgroundPosition: `0 0, ${half}px ${half}px`,\n          opacity,\n          ...style,\n        }}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  },\n);\nPatternCheckerboard.displayName = \"PatternCheckerboard\";\n\n/* ── 7. Diamond ───────────────────────────────────────────────────── */\n\nexport const PatternDiamond = React.forwardRef<HTMLDivElement, BgPatternProps>(\n  (\n    { color = \"currentColor\", opacity = 0.05, size = 28, overlay, className, style, ...props },\n    ref,\n  ) => {\n    const half = size / 2;\n    return (\n      <div\n        ref={ref}\n\n        data-slot=\"background-pattern\"\n\n        data-pattern=\"diamond\"\n        className={patternWrapper(overlay, className)}\n        style={{\n          backgroundImage: `\n            linear-gradient(45deg, ${color} 12.5%, transparent 12.5%, transparent 87.5%, ${color} 87.5%),\n            linear-gradient(135deg, ${color} 12.5%, transparent 12.5%, transparent 87.5%, ${color} 87.5%)\n          `,\n          backgroundSize: `${size}px ${size}px`,\n          backgroundPosition: `0 0, ${half}px 0`,\n          opacity,\n          ...style,\n        }}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  },\n);\nPatternDiamond.displayName = \"PatternDiamond\";\n\n/* ── 8. Zigzag ────────────────────────────────────────────────────── */\n\nexport const PatternZigzag = React.forwardRef<HTMLDivElement, BgPatternProps>(\n  (\n    { color = \"currentColor\", opacity = 0.06, size = 20, overlay, className, style, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n\n      data-slot=\"background-pattern\"\n\n      data-pattern=\"zigzag\"\n      className={patternWrapper(overlay, className)}\n      style={{\n        backgroundImage: `\n          linear-gradient(135deg, ${color} 25%, transparent 25%),\n          linear-gradient(225deg, ${color} 25%, transparent 25%),\n          linear-gradient(315deg, ${color} 25%, transparent 25%),\n          linear-gradient(45deg, ${color} 25%, transparent 25%)\n        `,\n        backgroundSize: `${size}px ${size / 2}px`,\n        backgroundPosition: `0 0, ${size / 2}px 0, ${size / 2}px -${size / 4}px, 0 ${size / 4}px`,\n        opacity,\n        ...style,\n      }}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  ),\n);\nPatternZigzag.displayName = \"PatternZigzag\";\n\n/* ── 9. Dashed Grid ───────────────────────────────────────────────── */\n\nexport const PatternDashedGrid = React.forwardRef<HTMLDivElement, BgPatternProps>(\n  (\n    { color = \"currentColor\", opacity = 0.08, size = 48, overlay, className, style, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n\n      data-slot=\"background-pattern\"\n\n      data-pattern=\"dashed-grid\"\n      className={patternWrapper(overlay, className)}\n      style={{\n        backgroundImage: `\n          repeating-linear-gradient(\n            0deg,\n            transparent,\n            transparent 4px,\n            ${color} 4px,\n            ${color} 5px,\n            transparent 5px,\n            transparent ${size}px\n          ),\n          repeating-linear-gradient(\n            90deg,\n            transparent,\n            transparent 4px,\n            ${color} 4px,\n            ${color} 5px,\n            transparent 5px,\n            transparent ${size}px\n          )\n        `,\n        opacity,\n        ...style,\n      }}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  ),\n);\nPatternDashedGrid.displayName = \"PatternDashedGrid\";\n\n/* ── 10. Radial Gradient ──────────────────────────────────────────── */\n\nexport interface PatternRadialProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Center color */\n  from?: string;\n  /** Edge color */\n  to?: string;\n  /** Overall opacity */\n  opacity?: number;\n  /** Cover parent absolutely */\n  overlay?: boolean;\n}\n\nexport const PatternRadial = React.forwardRef<HTMLDivElement, PatternRadialProps>(\n  (\n    {\n      from = \"rgba(220,38,38,0.08)\",\n      to = \"transparent\",\n      opacity = 1,\n      overlay,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n\n      data-slot=\"background-pattern\"\n\n      data-pattern=\"radial\"\n      className={patternWrapper(overlay, className)}\n      style={{\n        backgroundImage: `radial-gradient(ellipse at center, ${from}, ${to})`,\n        opacity,\n        ...style,\n      }}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  ),\n);\nPatternRadial.displayName = \"PatternRadial\";\n",
      "type": "registry:ui",
      "target": "@ui/atoms/bg-pattern.tsx"
    }
  ],
  "meta": {
    "category": "phase-5-foundation",
    "phase": "beta"
  },
  "type": "registry:ui"
}