{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator-thick",
  "title": "Thick separator",
  "description": "Styled separator: the Thick set. 5 decorative separator variations (BarSeparator, RuleSeparator, DoubleSeparator, InsetSeparator, ShadowSeparator) 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-thick.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Thick separator family: 5 decorative HEAVY horizontal separators. The shared idea is thickness: not a hairline but a visible mass. Bar is a solid rod with rounded ends, Rule is flat and sharp, Double is a two-layer double line, Inset is pulled in from the edges, and Shadow is a rod leaving a shadow beneath it. Colour comes ONLY from tokens, alpha via color-mix. size grows the thickness one further step (sm..xl). No motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\n/* Heavy scale: starts one step above the base separator. */\nconst thickness: Record<StyledSize, string> = {\n  sm: \"h-1\",\n  md: \"h-1.5\",\n  lg: \"h-2\",\n  xl: \"h-3\",\n}\n\n/* Double: the thickness of each line and the gap between them. */\nconst line: Record<StyledSize, string> = {\n  sm: \"h-0.5\",\n  md: \"h-1\",\n  lg: \"h-1\",\n  xl: \"h-1.5\",\n}\n\nconst lineGap: Record<StyledSize, string> = {\n  sm: \"gap-1\",\n  md: \"gap-1.5\",\n  lg: \"gap-2\",\n  xl: \"gap-2.5\",\n}\n\n/* Bar: yuvarlak uclu, dolu token cubuk. */\nexport function BarSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\"w-full rounded-full bg-border\", thickness[size], className)}\n      {...props}\n    />\n  )\n}\n\n/* Rule: keskin koseli, daha koyu ve duz bir kural cizgisi. */\nexport function RuleSeparator({ 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        \"w-full bg-[color-mix(in_oklab,var(--color-foreground)_30%,transparent)]\",\n        thickness[size],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Double: a two-layer double line, thick on top and thin below. */\nexport function DoubleSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\"flex w-full flex-col\", lineGap[size], className)}\n      {...props}\n    >\n      <span className={cn(\"w-full rounded-full bg-border\", line[size])} />\n      <span\n        className={cn(\n          \"w-full rounded-full bg-[color-mix(in_oklab,var(--color-border)_60%,transparent)]\",\n          line[size]\n        )}\n      />\n    </div>\n  )\n}\n\n/* Inset: iki kenardan iceri cekilmis, ortalanmis kalin cubuk. */\nexport function InsetSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\"flex w-full justify-center px-8\", className)}\n      {...props}\n    >\n      <span\n        className={cn(\"w-full rounded-full bg-border\", thickness[size])}\n      />\n    </div>\n  )\n}\n\n/* Shadow: a thick bar casting a soft shadow beneath it. */\nexport function ShadowSeparator({ 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        \"w-full rounded-full bg-border shadow-[0_3px_6px_-2px_color-mix(in_oklab,var(--color-foreground)_35%,transparent)]\",\n        thickness[size],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/separator-thick.tsx"
    }
  ],
  "categories": [
    "styled",
    "separator"
  ],
  "type": "registry:component"
}