{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"separator","type":"registry:component","title":"Separator","description":"A hairline between groups, horizontal or vertical; hidden from screen readers unless it carries meaning.","categories":["layout"],"dependencies":["@radix-ui/react-direction@1.1.4","@radix-ui/react-separator@1.1.15","clsx@^2.1.1","tailwind-merge@^3.7.0"],"registryDependencies":["https://beamline.io/registry/look-prism.json"],"files":[{"path":"beamline/components/separator/separator.tsx","type":"registry:file","target":"src/ui/beamline/components/separator/separator.tsx","content":"\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport * as RadixSeparator from \"@radix-ui/react-separator\";\nimport { cn } from \"../../lib/utils\";\n\n/** A hairline between groups. Decorative by default (hidden from assistive tech); decorative={false} when the line\n *  separates meaningful groups. */\nexport function Separator({\n  orientation = \"horizontal\",\n  decorative = true,\n  className,\n  ...props\n}: ComponentProps<typeof RadixSeparator.Root>) {\n  return (\n    <RadixSeparator.Root\n      data-slot=\"separator\"\n      orientation={orientation}\n      decorative={decorative}\n      {...props}\n      className={cn(\n        \"shrink-0 bg-line\",\n        orientation === \"vertical\" ? \"h-full w-px self-stretch\" : \"h-px w-full\",\n        className,\n      )}\n    />\n  );\n}\n\nexport default Separator;\n"},{"path":"beamline/lib/utils.ts","type":"registry:file","target":"src/ui/beamline/lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/* The type roles (utilities.css) and the 2xs step are sizes, not text colours: without this, tailwind-merge reads\n   `text-overline` as a colour and drops it next to `text-ink-3`. A role and a size step still replace each other.\n   Likewise `font-title` is the look's title weight, not a family: read as a family it dropped `font-display` beside it,\n   and every merged page title lost the look's display face. */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-weight\": [{ font: [\"title\"] }],\n      \"font-family\": [{ font: [\"display\", \"numeric\", \"figure\"] }],\n      \"font-size\": [\n        {\n          text: [\n            \"2xs\",\n            \"display\",\n            \"title\",\n            \"heading\",\n            \"subheading\",\n            \"body\",\n            \"body-sm\",\n            \"reading\",\n            \"label\",\n            \"caption\",\n            \"overline\",\n            \"numeric\",\n            \"code\",\n          ],\n        },\n      ],\n    },\n  },\n});\n\n/** Merge class names, letting later Tailwind utilities win over earlier ones. */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/** A small seeded random generator (LCG): the same seed gives the same sequence, for stable sample data and jitter. */\nexport function rng(seed = 1) {\n  let s = seed >>> 0 || 1;\n  return () => (s = (s * 1664525 + 1013904223) >>> 0) / 2 ** 32;\n}\n\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n"}],"docs":"Separator is in src/ui/beamline/components/separator/separator.tsx. The source is in src/ui/beamline (ui/beamline in a project without src/). After Tailwind, import its styles/beamline.css once, then styles/look-prism.css in your app stylesheet (use relative paths). Keep the shared base before all chosen looks. Wrap your app in <UIRoot preset={prism}> with UIRoot from its runtime/appearance and prism from its looks/prism.  shadcn replaces files when asked; use the Beamline managed-source CLI from the start for three-way upgrades that preserve edits.","meta":{"free":true,"version":"0.2.0-rc.42","library":"https://beamline.io/components/separator"}}