{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator-styled",
  "title": "Separator essentials",
  "description": "Styled separator: the essentials set. 5 decorative separator variations (GradientSeparator, DashedSeparator, LabelSeparator, IconSeparator, GlowSeparator) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2",
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/separator-styled.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { Asterisk } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Separator family: 5 decorative horizontal separators. Colour comes ONLY from tokens (alpha via color-mix), and size controls the thickness (sm..xl). framer-motion is used only for the Dashed march; it stops under reduced-motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\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\nconst labelText: Record<StyledSize, string> = {\n  sm: \"text-xs\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n  xl: \"text-sm\",\n}\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\n/* Gradient: a token line fading to transparent at both ends. */\nexport function GradientSeparator({ 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-gradient-to-r from-transparent via-border to-transparent\",\n        thickness[size],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Dashed: a dashed token line; a slow march outside reduced-motion. */\nexport function DashedSeparator({ className, size = \"md\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn(\"w-full overflow-hidden\", thickness[size], className)}\n      {...props}\n    >\n      {reduce ? (\n        <div className=\"size-full [background-image:repeating-linear-gradient(90deg,var(--color-border)_0,var(--color-border)_8px,transparent_8px,transparent_14px)]\" />\n      ) : (\n        <motion.div\n          className=\"h-full w-[calc(100%+14px)] [background-image:repeating-linear-gradient(90deg,var(--color-border)_0,var(--color-border)_8px,transparent_8px,transparent_14px)]\"\n          animate={{ x: [0, -14] }}\n          transition={{ duration: 1.2, ease: \"linear\", repeat: Infinity }}\n        />\n      )}\n    </div>\n  )\n}\n\n/* Label: a line with a label inside a token chip in the middle. */\nexport function LabelSeparator({ className, size = \"md\", children, ...props }: Props) {\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\", className)}\n      {...props}\n    >\n      <span className={cn(\"flex-1 bg-border\", thickness[size])} />\n      <span\n        className={cn(\n          \"shrink-0 rounded-full border border-border bg-secondary px-2.5 py-0.5 font-medium text-secondary-foreground\",\n          labelText[size]\n        )}\n      >\n        {children}\n      </span>\n      <span className={cn(\"flex-1 bg-border\", thickness[size])} />\n    </div>\n  )\n}\n\n/* Icon: a line with a token icon in the middle (an asterisk by default). */\nexport function IconSeparator({\n  className,\n  size = \"md\",\n  icon,\n  ...props\n}: Props & { icon?: React.ReactNode }) {\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 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\",\n        labelText[size],\n        className\n      )}\n      {...props}\n    >\n      <span className={cn(\"flex-1 bg-border\", thickness[size])} />\n      <span className=\"inline-flex shrink-0 items-center justify-center\">\n        {icon ?? <Asterisk />}\n      </span>\n      <span className={cn(\"flex-1 bg-border\", thickness[size])} />\n    </div>\n  )\n}\n\n/* Glow: a token line with a soft glow shadow. */\nexport function GlowSeparator({ 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-border shadow-[0_0_10px_-1px_var(--color-border)]\",\n        thickness[size],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/separator-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "separator"
  ],
  "type": "registry:component"
}