{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator-tone",
  "title": "Tone separator",
  "description": "Styled separator: the Tone set. 5 decorative separator variations (InfoSeparator, SuccessSeparator, WarningSeparator, DangerSeparator, MutedSeparator) 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-tone.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Tone separator family: 5 decorative horizontal separators. The skeleton is the\n   same in every variant; the whole difference is the SEMANTIC TONE family: info,\n   success, warning, danger and the neutral muted. The line is a tone gradient\n   fading to transparent at both ends, with a soft glow of the same tone in the\n   middle. Color comes ONLY from tokens, via alpha color-mix. size controls the\n   thickness (sm..xl). Note: the BASE separator has no tone (the Axis Contract);\n   this is a separate component in the STYLED layer, so the base matrix stays clean.\n   No motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport type SeparatorTone = \"info\" | \"success\" | \"warning\" | \"danger\" | \"muted\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\nconst thickness: Record<StyledSize, string> = {\n  sm: \"h-px\",\n  md: \"h-0.5\",\n  lg: \"h-1\",\n  xl: \"h-1.5\",\n}\n\n/* The gradient mid colour plus the glow shadow per tone. The classes are written statically, because Tailwind cannot see dynamically concatenated classes. */\nconst toneClass: Record<SeparatorTone, string> = {\n  info: \"via-info shadow-[0_0_10px_-2px_color-mix(in_oklab,var(--color-info)_70%,transparent)]\",\n  success:\n    \"via-success shadow-[0_0_10px_-2px_color-mix(in_oklab,var(--color-success)_70%,transparent)]\",\n  warning:\n    \"via-warning shadow-[0_0_10px_-2px_color-mix(in_oklab,var(--color-warning)_70%,transparent)]\",\n  danger:\n    \"via-danger shadow-[0_0_10px_-2px_color-mix(in_oklab,var(--color-danger)_70%,transparent)]\",\n  muted:\n    \"via-[color-mix(in_oklab,var(--color-muted-foreground)_55%,transparent)]\",\n}\n\n/* Shared shell: the only difference is the tone class and data-tone. */\nfunction ToneRule({\n  tone,\n  className,\n  size = \"md\",\n  ...props\n}: Props & { tone: SeparatorTone }) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      data-tone={tone}\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\n        \"w-full rounded-full bg-gradient-to-r from-transparent to-transparent\",\n        toneClass[tone],\n        thickness[size],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Info: bilgi tonunda ayirac. */\nexport function InfoSeparator(props: Props) {\n  return <ToneRule tone=\"info\" {...props} />\n}\n\n/* Success: basari tonunda ayirac. */\nexport function SuccessSeparator(props: Props) {\n  return <ToneRule tone=\"success\" {...props} />\n}\n\n/* Warning: uyari tonunda ayirac. */\nexport function WarningSeparator(props: Props) {\n  return <ToneRule tone=\"warning\" {...props} />\n}\n\n/* Danger: tehlike tonunda ayirac. */\nexport function DangerSeparator(props: Props) {\n  return <ToneRule tone=\"danger\" {...props} />\n}\n\n/* Muted: notr, geri cekilmis ton. */\nexport function MutedSeparator(props: Props) {\n  return <ToneRule tone=\"muted\" {...props} />\n}\n",
      "type": "registry:component",
      "target": "components/ui/separator-tone.tsx"
    }
  ],
  "categories": [
    "styled",
    "separator"
  ],
  "type": "registry:component"
}