{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dot-pattern",
  "title": "Dot Pattern",
  "description": "Decorative dotted background pattern built from token colors.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/dot-pattern/dot-pattern.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link DotPattern}. */\nexport type DotPatternProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Dot radius in pixels. Defaults to `1`. */\n  dotRadius?: number;\n  /** Fade the pattern toward the edges with a radial mask. Defaults to `true`. */\n  fade?: boolean;\n  /** Grid spacing between dots in pixels. Defaults to `16`. */\n  spacing?: number;\n};\n\nconst fadeMask = \"radial-gradient(ellipse at center, black, transparent 75%)\";\n\n/**\n * Static dotted background painted with a repeating radial gradient.\n *\n * @example\n * ```tsx\n * <DotPattern spacing={24} />\n * ```\n */\nexport const DotPattern = ({\n  className,\n  dotRadius = 1,\n  fade = true,\n  ref,\n  spacing = 16,\n  style,\n  ...props\n}: DotPatternProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 text-muted-foreground/40\",\n        className,\n      )}\n      ref={ref}\n      style={{\n        backgroundImage: `radial-gradient(currentColor ${dotRadius}px, transparent ${dotRadius}px)`,\n        backgroundSize: `${spacing}px ${spacing}px`,\n        maskImage: fade ? fadeMask : undefined,\n        WebkitMaskImage: fade ? fadeMask : undefined,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n};\nDotPattern.displayName = \"DotPattern\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}