{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"separator","type":"registry:ui","title":"Separator","description":"Horizontal or vertical divider with an optional centered label, a primary gradient variant and a draw-in animation that grows outward from the label.","dependencies":[],"registryDependencies":["utils"],"files":[{"path":"registry/ui/separator.tsx","type":"registry:ui","content":"\"use client\";\n\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// Draw-in: each line scales from 0 along its axis. With a label the two halves grow\n// outward from the label, which fades up once the lines are underway.\nconst css = `\n@keyframes ui-sep-x{from{scale:0 1}}\n@keyframes ui-sep-y{from{scale:1 0}}\n@keyframes ui-sep-label{from{opacity:0;filter:blur(4px);translate:0 3px}}\n.ui-sep-draw [data-line]{animation:ui-sep-x .9s cubic-bezier(.65,0,.2,1) both}\n.ui-sep-draw[data-orientation=vertical] [data-line]{animation-name:ui-sep-y}\n.ui-sep-draw [data-label]{animation:ui-sep-label .5s .35s ease-out both}\n@media (prefers-reduced-motion:reduce){.ui-sep-draw [data-line],.ui-sep-draw [data-label]{animation:none}}\n`;\n\nexport type SeparatorVariant = \"solid\" | \"dashed\" | \"gradient\";\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Text or node centered on the line, e.g. \"OR\". */\n  label?: ReactNode;\n  /** `gradient` fades the line out at its ends in the primary color. */\n  variant?: SeparatorVariant;\n  /** Draw the line in from the center (or outward from the label) on mount. */\n  animated?: boolean;\n  /** Purely visual (role=\"none\"). Set false when it separates meaningful sections. */\n  decorative?: boolean;\n}\n\nexport function Separator({\n  orientation = \"horizontal\",\n  label,\n  variant = \"solid\",\n  animated = false,\n  decorative = true,\n  className,\n  ...props\n}: SeparatorProps) {\n  const h = orientation === \"horizontal\";\n  const hasLabel = label !== undefined && label !== null && label !== \"\";\n\n  // side: which half of a labelled separator this is (grows away from the label).\n  const line = (side?: \"start\" | \"end\") => (\n    <span\n      data-line=\"\"\n      aria-hidden\n      className={cn(\n        \"block flex-1\",\n        h ? \"h-px min-w-4\" : \"w-px min-h-4\",\n        variant === \"solid\" && \"bg-border\",\n        variant === \"dashed\" &&\n          (h ? \"h-0 border-t border-dashed border-border\" : \"w-0 border-l border-dashed border-border\"),\n        variant === \"gradient\" &&\n          (side === \"start\"\n            ? h ? \"bg-linear-to-r from-transparent to-primary/70\" : \"bg-linear-to-b from-transparent to-primary/70\"\n            : side === \"end\"\n              ? h ? \"bg-linear-to-l from-transparent to-primary/70\" : \"bg-linear-to-t from-transparent to-primary/70\"\n              : h ? \"bg-linear-to-r from-transparent via-primary/70 to-transparent\" : \"bg-linear-to-b from-transparent via-primary/70 to-transparent\"),\n        side === \"start\" ? (h ? \"origin-right\" : \"origin-bottom\") : side === \"end\" ? (h ? \"origin-left\" : \"origin-top\") : \"origin-center\",\n      )}\n    />\n  );\n\n  return (\n    <div\n      {...props}\n      role={decorative ? \"none\" : \"separator\"}\n      aria-orientation={!decorative && !h ? \"vertical\" : undefined}\n      data-orientation={orientation}\n      className={cn(\n        \"flex shrink-0 items-center\",\n        h ? \"w-full\" : \"h-full min-h-4 flex-col self-stretch\",\n        hasLabel && \"gap-3\",\n        animated && \"ui-sep-draw\",\n        className,\n      )}\n    >\n      {animated && (\n        <style href=\"ui-separator\" precedence=\"default\">\n          {css}\n        </style>\n      )}\n      {hasLabel ? (\n        <>\n          {line(\"start\")}\n          <span\n            data-label=\"\"\n            className=\"shrink-0 text-xs font-medium tracking-wide text-muted-foreground uppercase\"\n          >\n            {label}\n          </span>\n          {line(\"end\")}\n        </>\n      ) : (\n        line()\n      )}\n    </div>\n  );\n}\n"}]}