{"slug":"divider","name":"Divider","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"Draw a thin rule that separates adjacent content — the boundary between two rows in a settings list, two labelled values, or two sections of a card.","importPath":"@liquidify/react/divider","sourcePath":"packages/@liquidify/react/src/components/divider/divider.tsx","specPath":"packages/@liquidify/react/src/components/divider/spec.md","docsPath":"../liquidify-page/content/component-source/divider.md","documentationStatus":"draft","storyIds":["presentational-divider--default"],"additionalExports":["ControlProps"],"anatomy":[],"props":[{"name":"className","type":"string | undefined","required":false,"description":"Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"orientation","type":"\"horizontal\" | \"vertical\" | undefined","required":false,"description":"The rule's axis — the web analogue of SwiftUI inferring orientation from the enclosing stack (`VStack` ⇒ horizontal, `HStack` ⇒ vertical). Drives both the visual geometry and `aria-orientation` in one.","defaultValue":"`\"horizontal\"`","declaredIn":"packages/@liquidify/react/src/components/divider/divider.tsx"},{"name":"ref","type":"Ref<HTMLDivElement> | undefined","required":false,"description":"Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"}],"swiftUIMap":[{"swiftUI":"`Divider()` inside `VStack` (minor-axis = horizontal)","react":"`<Divider />` / `<Divider orientation=\"horizontal\" />`","notes":"Default. SwiftUI infers this from the parent stack's axis; the web has no implicit container axis, so orientation is promoted to an explicit prop.","relationship":"direct"},{"swiftUI":"`Divider()` inside `HStack` (minor-axis = vertical)","react":"`<Divider orientation=\"vertical\" />`","notes":"Web analogue of placing the rule inside a row; the caller opts in explicitly (no auto-detection of a flex parent's axis).","relationship":"direct"},{"swiftUI":"implicit thickness (OS 1-device-pixel hairline)","react":"*(no prop)*","notes":"Fixed via `--lq-space-1` (see Tokens); not exposed — no `Divider()` call in the demo sets a custom `.frame(height:/width:)`.","relationship":"direct"},{"swiftUI":"implicit colour (`separator` role)","react":"*(no prop)*","notes":"Fixed via the scheme-aware `light-dark()` over `system-gray-3` (light `#C7C7CC` / dark `#48484A`); no `tint`/`.foregroundColor`/`.overlay` anywhere in the demo or this component.","relationship":"direct"},{"swiftUI":"container length / default margin","react":"*(no prop)*","notes":"Full inline-/block-size to the parent, plus a default `--lq-space-8` margin on the rule's minor axis so adjacent content never abuts the hairline. A caller-tunable `inset`/`margin` prop is deferred (see Out of scope).","relationship":"direct"},{"swiftUI":"`.glassEffect(...)` on the *container*","react":"*(no prop — not part of `Divider`)*","notes":"Glass belongs to whatever wraps the Divider; the Divider itself never carries `material`/`perf`.","relationship":"direct"}],"tokens":["--lq-color-separator","--lq-color-system-gray-3-default-dark","--lq-color-system-gray-3-default-light","--lq-divider-pad","--lq-glass-","--lq-radius-pill","--lq-space-1","--lq-space-2","--lq-space-8"],"keyboard":[],"variants":[],"variantPages":[]}