{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator-dotted",
  "title": "Dotted separator",
  "description": "Styled separator: the Dotted set. 5 decorative separator variations (DotSeparator, DottedSeparator, BeadsSeparator, SpacedSeparator, FadeDotSeparator) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/separator-dotted.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Dotted separator family: 5 decorative horizontal separators. The shared idea is the DOT: repeating radial-gradient dots instead of a line (Beads uses real bead spans). Colour comes ONLY from tokens, alpha via color-mix. size grows the dot diameter and spacing (sm..xl). No motion, entirely static and deterministic. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\n/* Dot: standart nokta cizgisi (orta sikilik). */\nconst dot: Record<StyledSize, string> = {\n  sm: \"h-1 [background-image:radial-gradient(circle,var(--color-border)_1px,transparent_1px)] [background-size:6px_6px]\",\n  md: \"h-1.5 [background-image:radial-gradient(circle,var(--color-border)_1.5px,transparent_1.5px)] [background-size:8px_8px]\",\n  lg: \"h-2 [background-image:radial-gradient(circle,var(--color-border)_2px,transparent_2px)] [background-size:10px_10px]\",\n  xl: \"h-2.5 [background-image:radial-gradient(circle,var(--color-border)_2.5px,transparent_2.5px)] [background-size:12px_12px]\",\n}\n\n/* Dotted: sik ve ince nokta dizisi. */\nconst dotted: Record<StyledSize, string> = {\n  sm: \"h-0.5 [background-image:radial-gradient(circle,var(--color-border)_0.5px,transparent_0.5px)] [background-size:3px_3px]\",\n  md: \"h-1 [background-image:radial-gradient(circle,var(--color-border)_1px,transparent_1px)] [background-size:4px_4px]\",\n  lg: \"h-1.5 [background-image:radial-gradient(circle,var(--color-border)_1.5px,transparent_1.5px)] [background-size:5px_5px]\",\n  xl: \"h-2 [background-image:radial-gradient(circle,var(--color-border)_2px,transparent_2px)] [background-size:6px_6px]\",\n}\n\n/* Spaced: seyrek yerlesimli nokta dizisi. */\nconst spaced: Record<StyledSize, string> = {\n  sm: \"h-1 [background-image:radial-gradient(circle,var(--color-border)_1px,transparent_1px)] [background-size:14px_14px]\",\n  md: \"h-1.5 [background-image:radial-gradient(circle,var(--color-border)_1.5px,transparent_1.5px)] [background-size:18px_18px]\",\n  lg: \"h-2 [background-image:radial-gradient(circle,var(--color-border)_2px,transparent_2px)] [background-size:22px_22px]\",\n  xl: \"h-2.5 [background-image:radial-gradient(circle,var(--color-border)_2.5px,transparent_2.5px)] [background-size:26px_26px]\",\n}\n\n/* Bead diameter: for the necklace row made of real spans. */\nconst bead: Record<StyledSize, string> = {\n  sm: \"size-1\",\n  md: \"size-1.5\",\n  lg: \"size-2\",\n  xl: \"size-2.5\",\n}\n\nconst beadGap: Record<StyledSize, string> = {\n  sm: \"gap-1.5\",\n  md: \"gap-2\",\n  lg: \"gap-2.5\",\n  xl: \"gap-3\",\n}\n\n/* Sabit bead sayisi: Math.random yok, deterministik. */\nconst BEAD_COUNT = 12\nconst beadKeys = Array.from({ length: BEAD_COUNT }, (_, i) => `bead-${i}`)\n\nconst patternBase =\n  \"w-full [background-repeat:repeat-x] [background-position:center]\"\n\n/* Dot: esit araliklarla tekrar eden token noktalari. */\nexport function DotSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(patternBase, dot[size], className)}\n      {...props}\n    />\n  )\n}\n\n/* Dotted: the classic dotted line look, tight and thin. */\nexport function DottedSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(patternBase, dotted[size], className)}\n      {...props}\n    />\n  )\n}\n\n/* Beads: kolye gibi dizilmis, kenarlikli dolu bead'ler. */\nexport function BeadsSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\n        \"flex w-full items-center justify-center overflow-hidden\",\n        beadGap[size],\n        className\n      )}\n      {...props}\n    >\n      {beadKeys.map((key) => (\n        <span\n          key={key}\n          aria-hidden=\"true\"\n          className={cn(\n            \"shrink-0 rounded-full border border-border bg-secondary\",\n            bead[size]\n          )}\n        />\n      ))}\n    </div>\n  )\n}\n\n/* Spaced: nefes alan, genis aralikli nokta ritmi. */\nexport function SpacedSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(patternBase, spaced[size], className)}\n      {...props}\n    />\n  )\n}\n\n/* FadeDot: iki uctan saydama solan nokta dizisi (token mask). */\nexport function FadeDotSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\n        patternBase,\n        dot[size],\n        \"[mask-image:linear-gradient(to_right,transparent,var(--color-foreground)_25%,var(--color-foreground)_75%,transparent)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/separator-dotted.tsx"
    }
  ],
  "categories": [
    "styled",
    "separator"
  ],
  "type": "registry:component"
}