{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"separator","title":"Separator","description":"Base UI separator with horizontal and vertical orientation.","dependencies":["@base-ui/react@1.7.0"],"registryDependencies":["@siteplane/base"],"files":[{"path":"packages/ui/src/components/separator/separator.tsx","content":"import { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\nimport type React from \"react\";\n\nimport { cn, type WithStringClassName } from \"../../system/utils/cn\";\nimport { baseClass, slotClass } from \"../../system/utils/slot-class\";\nimport type { KitSeparatorProps } from \"./separator-internal\";\n\nexport function Separator(\n  separatorProps: WithStringClassName<SeparatorPrimitive.Props>,\n): React.ReactElement {\n  // Group and ToggleGroup pass their internal profiles through KitSeparator\n  // (separator-internal.ts), the same function.\n  const {\n    className,\n    orientation = \"horizontal\",\n    profile = \"default\",\n    role = \"separator\",\n    ...props\n  } = separatorProps as KitSeparatorProps;\n  // The line's colour, thickness and length come from design-rework.css, where\n  // the separator, Toolbar and OTP Field rules refine them.\n  return (\n    <SeparatorPrimitive\n      className={cn(\n        slotClass(\"separator\", props),\n        baseClass(\"separator\", props),\n        \"shrink-0\",\n        profile === \"toggle-group\" &&\n          \"pointer-events-none relative before:absolute before:inset-0 dark:before:bg-input/32 dark:has-[+[data-foundation=toggle]:hover]:before:bg-input/64 dark:has-[+[data-foundation=toggle][data-pressed]]:before:bg-input dark:[[data-foundation=toggle]:hover+&]:before:bg-input/64 dark:[[data-foundation=toggle][data-pressed]+&]:before:bg-input\",\n        className,\n      )}\n      data-foundation=\"separator\"\n      data-profile={profile}\n      data-slot=\"separator\"\n      orientation={orientation}\n      {...props}\n      role={role}\n      aria-orientation={\n        role === \"presentation\" || role === \"none\"\n          ? undefined\n          : (props[\"aria-orientation\"] ?? orientation)\n      }\n    />\n  );\n}\n\nexport { SeparatorPrimitive };\n","type":"registry:ui","target":"~/src/siteplane/components/separator/separator.tsx"},{"path":"packages/ui/src/components/separator/separator-internal.ts","content":"import type { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\nimport type * as React from \"react\";\n\nimport type { WithStringClassName } from \"../../system/utils/cn\";\nimport { Separator } from \"./separator\";\n\n/*\n * Kit-internal Separator. Not public API: the separator index does not export\n * this module, and its names and profiles may change in any release. Group and\n * ToggleGroup render their dividers with these composition profiles.\n */\nexport type SeparatorProfile = \"default\" | \"group\" | \"toggle-group\";\n\nexport type KitSeparatorProps =\n  WithStringClassName<SeparatorPrimitive.Props> & {\n    profile?: SeparatorProfile;\n  };\n\n/** Separator with the kit's composition profiles; the same component. */\nexport const KitSeparator = Separator as (\n  props: KitSeparatorProps,\n) => React.ReactElement;\n","type":"registry:ui","target":"~/src/siteplane/components/separator/separator-internal.ts"},{"path":"packages/ui/src/components/separator/index.ts","content":"export * from \"./separator\";\n","type":"registry:ui","target":"~/src/siteplane/components/separator/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/separator.md","categories":["Layout & utilities"],"meta":{"avoidWhen":["Avoid as the only structure of a page; name content groups with headings.","Avoid for spacing alone; use gap or margin."],"description":"Base UI separator with horizontal and vertical orientation.","knownLimitations":[],"providerNotes":[],"releaseStatus":"stable","searchTerms":["separator"],"useWhen":["Use to divide related sections or controls with a horizontal or vertical line."]}}