{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"separator","type":"registry:ui","title":"Separator","description":"A 1px divider in the toolbar's own hairline, with a labelled form for “or continue with email”. Decoration unless you say otherwise.","dependencies":["clsx","tailwind-merge"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/lib/cn.ts","type":"registry:ui","target":"components/ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"},{"path":"ui/separator.tsx","type":"registry:ui","target":"components/ui/separator.tsx","content":"import type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./separator.css\";\n\nexport type SeparatorProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Decoration only: hidden from assistive technology. Set false when the line divides regions people navigate between. */\n  decorative?: boolean;\n  /** A darker line, for dividing unrelated areas. */\n  strong?: boolean;\n  /** Indents a horizontal line from both edges, to sit between rows of a list. */\n  inset?: boolean;\n  /** Text in the line, such as \"or continue with email\". Horizontal only. */\n  label?: ReactNode;\n};\n\n/**\n * A 1px divider in the same hairline the toolbar and dock draw. It is decoration by\n * default, so screen readers are not told about it; a labelled one is a real separator\n * with that text as its name.\n */\nexport function Separator({\n  orientation = \"horizontal\",\n  decorative = true,\n  strong,\n  inset,\n  label,\n  className,\n  ...props\n}: SeparatorProps) {\n  if (label !== undefined && orientation === \"horizontal\") {\n    return (\n      <div\n        data-slot=\"separator-labelled\"\n        role=\"separator\"\n        aria-orientation=\"horizontal\"\n        className={className}\n        {...props}\n      >\n        {label}\n      </div>\n    );\n  }\n  return (\n    <div\n      data-slot=\"separator\"\n      data-orientation={orientation}\n      data-strong={strong || undefined}\n      data-inset={inset || undefined}\n      role={decorative ? \"none\" : \"separator\"}\n      aria-orientation={decorative ? undefined : orientation}\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n"},{"path":"ui/separator.css","type":"registry:file","target":"components/ui/separator.css","content":"/* separator.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  /* Separator: the toolbar's 1px hairline, standalone. */\n  [data-slot=\"separator\"] { flex: none; background: var(--border); }\n  [data-slot=\"separator\"][data-orientation=\"horizontal\"] { width: 100%; height: 1px; }\n  [data-slot=\"separator\"][data-orientation=\"vertical\"] { align-self: stretch; width: 1px; min-height: 16px; }\n  [data-slot=\"separator\"][data-strong] { background: var(--border-strong); }\n  [data-slot=\"separator\"][data-inset] { width: auto; margin-inline: 16px; }\n  [data-slot=\"separator-labelled\"] { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--muted-foreground); font-size: 12px; line-height: 18px; }\n  [data-slot=\"separator-labelled\"]::before, [data-slot=\"separator-labelled\"]::after { content: \"\"; flex: 1; height: 1px; background: var(--border); }\n}\n"}],"categories":["actions"],"meta":{"tier":"free","license":"MIT","family":"actions","docs":"/docs/components/separator"}}