{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator-decorative",
  "title": "Decorative separator",
  "description": "Styled separator: the Decorative set. 5 decorative separator variations (ZigzagSeparator, WaveSeparator, ChevronSeparator, DiamondSeparator, StarSeparator) 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-decorative.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Decorative separator family: 5 ornamented horizontal separators. The shared idea\n   is INLINE SVG: zigzag, wave and chevron spread across the full width with a\n   repeating SVG pattern; diamond and star break the line with an ornament in the\n   middle. The SVG colors come ONLY through currentColor, and the color is decided\n   by the token class on the root element (text-border / text-muted-foreground). The\n   pattern ids are unique per instance via React.useId: with 25 examples side by\n   side on the same page an id collision would lead to the wrong pattern reference.\n   No motion, entirely static and deterministic. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\n/* SVG serit yuksekligi (px): sus ne kadar iri cizilecek. */\nconst band: Record<StyledSize, number> = { sm: 6, md: 8, lg: 10, xl: 12 }\n\n/* Cizgi kalinligi (px). */\nconst stroke: Record<StyledSize, number> = { sm: 1, md: 1.25, lg: 1.5, xl: 2 }\n\n/* Diamond/Star gibi orta suslerin capi (px). */\nconst glyph: Record<StyledSize, number> = { sm: 8, md: 10, lg: 12, xl: 14 }\n\n/* Diamond/Star kenar cizgisinin kalinligi. */\nconst rail: Record<StyledSize, string> = {\n  sm: \"h-px\",\n  md: \"h-px\",\n  lg: \"h-0.5\",\n  xl: \"h-0.5\",\n}\n\n/* useId contains \":\"; it is stripped for the url(#...) reference. */\nfunction usePatternId(prefix: string) {\n  const raw = React.useId()\n  return `${prefix}-${raw.replace(/:/g, \"\")}`\n}\n\n/* A shared SVG shell that spreads the repeating pattern across the full width. */\nfunction PatternRule({\n  id,\n  height,\n  tileWidth,\n  children,\n}: {\n  id: string\n  height: number\n  tileWidth: number\n  children: React.ReactNode\n}) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      width=\"100%\"\n      height={height}\n      className=\"block w-full\"\n    >\n      <defs>\n        <pattern\n          id={id}\n          patternUnits=\"userSpaceOnUse\"\n          width={tileWidth}\n          height={height}\n        >\n          {children}\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height={height} fill={`url(#${id})`} />\n    </svg>\n  )\n}\n\n/* Zigzag: a broken line in a sawtooth rhythm. */\nexport function ZigzagSeparator({ className, size = \"md\", ...props }: Props) {\n  const id = usePatternId(\"zigzag\")\n  const h = band[size]\n  const s = stroke[size]\n  const w = h * 2\n  const top = s\n  const bottom = h - s\n  const d = `M0 ${bottom} L ${w / 4} ${top} L ${w / 2} ${bottom} L ${(w * 3) / 4} ${top} L ${w} ${bottom}`\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\"w-full text-border\", className)}\n      {...props}\n    >\n      <PatternRule id={id} height={h} tileWidth={w}>\n        <path d={d} fill=\"none\" stroke=\"currentColor\" strokeWidth={s} />\n      </PatternRule>\n    </div>\n  )\n}\n\n/* Wave: yumusak sinus dalgasi. */\nexport function WaveSeparator({ className, size = \"md\", ...props }: Props) {\n  const id = usePatternId(\"wave\")\n  const h = band[size]\n  const s = stroke[size]\n  const w = h * 3\n  const mid = h / 2\n  const d = `M0 ${mid} Q ${w / 4} ${s}, ${w / 2} ${mid} T ${w} ${mid}`\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\"w-full text-border\", className)}\n      {...props}\n    >\n      <PatternRule id={id} height={h} tileWidth={w}>\n        <path d={d} fill=\"none\" stroke=\"currentColor\" strokeWidth={s} />\n      </PatternRule>\n    </div>\n  )\n}\n\n/* Chevron: saga bakan ok ucu dizisi. */\nexport function ChevronSeparator({ className, size = \"md\", ...props }: Props) {\n  const id = usePatternId(\"chevron\")\n  const h = band[size]\n  const s = stroke[size]\n  const w = h\n  const top = s\n  const bottom = h - s\n  const d = `M ${s} ${top} L ${w - s} ${h / 2} L ${s} ${bottom}`\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\"w-full text-border\", className)}\n      {...props}\n    >\n      <PatternRule id={id} height={h} tileWidth={w}>\n        <path\n          d={d}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={s}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </PatternRule>\n    </div>\n  )\n}\n\n/* Diamond: a line broken in the middle by a solid diamond. */\nexport function DiamondSeparator({ className, size = \"md\", ...props }: Props) {\n  const d = glyph[size]\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\"flex w-full items-center gap-3 text-border\", className)}\n      {...props}\n    >\n      <span className={cn(\"flex-1 bg-border\", rail[size])} />\n      <svg\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        width={d}\n        height={d}\n        viewBox=\"0 0 10 10\"\n        className=\"shrink-0\"\n      >\n        <polygon points=\"5,0 10,5 5,10 0,5\" fill=\"currentColor\" />\n      </svg>\n      <span className={cn(\"flex-1 bg-border\", rail[size])} />\n    </div>\n  )\n}\n\n/* Star: a line broken in the middle by a five-pointed star. */\nexport function StarSeparator({ className, size = \"md\", ...props }: Props) {\n  const d = glyph[size] + 2\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 gap-3 text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <span className={cn(\"flex-1 bg-border\", rail[size])} />\n      <svg\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        width={d}\n        height={d}\n        viewBox=\"0 0 24 24\"\n        className=\"shrink-0\"\n      >\n        <polygon\n          points=\"12,1 15,8.9 23.4,9.4 16.9,14.8 19,23 12,18.4 5,23 7.1,14.8 0.6,9.4 9,8.9\"\n          fill=\"currentColor\"\n        />\n      </svg>\n      <span className={cn(\"flex-1 bg-border\", rail[size])} />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/separator-decorative.tsx"
    }
  ],
  "categories": [
    "styled",
    "separator"
  ],
  "type": "registry:component"
}