{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dot-pattern",
  "title": "Dot Pattern",
  "description": "A dot background that fills its container.",
  "dependencies": [
    "cn@0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "packages/ui/src/components/patterns/dot-pattern/dot-pattern.astro",
      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"cn\"\n\n/**\n * Dot background.\n *\n * The pattern fills its nearest positioned parent.\n * Each dot is one tile of a radial-gradient background.\n */\ntype Props = HTMLAttributes<\"div\"> & {\n  /**\n   * Radius of each dot, in pixels.\n   * @default 1\n   */\n  dotSize?: number\n  /**\n   * Distance from one dot to the next, in pixels.\n   * The tile is square, so this sets both axes.\n   * @default 16\n   */\n  dotSpace?: number\n  /**\n   * CSS color of each dot.\n   * @default muted foreground mixed to 18% opacity\n   */\n  dotColor?: string\n  /**\n   * CSS color behind the dots.\n   * @default \"transparent\"\n   */\n  dotBg?: string\n}\n\nconst {\n  dotSize = 1,\n  dotSpace = 16,\n  dotColor = \"color-mix(in srgb, var(--color-muted-foreground) 18%, transparent)\",\n  dotBg = \"transparent\",\n  class: className,\n  style,\n  ...props\n} = Astro.props\n\n/**\n * Accept the string style from Astro markup and a style object from callers\n * that pass camelCase or custom properties.\n */\nfunction styleText(value: Props[\"style\"]): string | undefined {\n  if (typeof value === \"string\") return value\n  if (!value || typeof value !== \"object\") return undefined\n  return Object.entries(value)\n    .filter((entry): entry is [string, string | number] => entry[1] != null)\n    .map(([property, item]) => `${property}: ${item}`)\n    .join(\"; \")\n}\n\n/** Caller styles come last so they replace the pattern defaults. */\nconst resolvedStyle = [\n  `--dot-pattern-dot-color: ${dotColor}`,\n  `background-color: ${dotBg}`,\n  `background-image: radial-gradient(circle, var(--dot-pattern-dot-color) ${dotSize}px, transparent ${dotSize}px)`,\n  `background-size: ${dotSpace}px ${dotSpace}px`,\n  \"background-position: center\",\n  styleText(style),\n]\n  .filter(Boolean)\n  .join(\"; \")\n---\n\n<div\n  aria-hidden=\"true\"\n  data-slot=\"dot-pattern\"\n  class={cn(\"pointer-events-none absolute inset-0 size-full\", className)}\n  style={resolvedStyle}\n  {...props}\n></div>\n",
      "type": "registry:file",
      "target": "~/src/components/patterns/dot-pattern/dot-pattern.astro"
    },
    {
      "path": "packages/ui/src/components/patterns/dot-pattern/index.ts",
      "content": "export { default as DotPattern } from './dot-pattern.astro'\n",
      "type": "registry:file",
      "target": "~/src/components/patterns/dot-pattern/index.ts"
    }
  ],
  "meta": {
    "framework": "astro",
    "source": "@gnosticai/ui"
  },
  "docs": "https://ui.gnosticai.com/patterns/dot-pattern",
  "categories": [
    "patterns"
  ],
  "type": "registry:component"
}