{"slug":"sidebar","name":"Sidebar","packageName":"@liquidify/react","category":"controls","maturity":"experimental","summary":"A reusable single-selection navigation sidebar, preserving the visual language of liquidify-page's docs sidebar without depending on Fumadocs or a router.","importPath":"@liquidify/react/sidebar","sourcePath":"packages/@liquidify/react/src/components/sidebar/sidebar.tsx","specPath":"packages/@liquidify/react/src/components/sidebar/spec.md","documentationStatus":"missing","storyIds":["controls-sidebar--controlled","controls-sidebar--default","controls-sidebar--rtl-and-long-labels"],"additionalExports":["SidebarFooter","SidebarFooterProps","SidebarGroup","SidebarGroupProps","SidebarHeader","SidebarHeaderProps","SidebarItem","SidebarItemProps","SidebarLinkItemProps","SidebarSection","SidebarSectionProps","SidebarSelectionItemProps"],"anatomy":[],"props":[{"name":"children","type":"ReactNode","required":false,"description":"Navigation content and optional direct Header/Footer slots.","defaultValue":"undefined","declaredIn":"packages/@liquidify/react/src/components/sidebar/sidebar.tsx"},{"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":"defaultValue","type":"string | null | undefined","required":false,"description":"Initial uncontrolled selection.","defaultValue":"null","declaredIn":"packages/@liquidify/react/src/components/sidebar/sidebar.tsx"},{"name":"dir","type":"\"auto\" | \"ltr\" | \"rtl\" | undefined","required":false,"description":"Text direction, inherited from the host when omitted.","defaultValue":"undefined","declaredIn":"packages/@liquidify/react/src/components/sidebar/sidebar.tsx"},{"name":"id","type":"string | undefined","required":false,"description":"Native root id.","defaultValue":"undefined","declaredIn":"packages/@liquidify/react/src/components/sidebar/sidebar.tsx"},{"name":"onChange","type":"((value: string | null) => void) | undefined","required":false,"description":"Requests the next selection in either mode; unchanged requests are suppressed.","defaultValue":"undefined","declaredIn":"packages/@liquidify/react/src/components/sidebar/sidebar.tsx"},{"name":"ref","type":"Ref<HTMLElement> | 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"},{"name":"tint","type":"LiquidTintValue | undefined","required":false,"description":"System-accent of the control — drawn from the RESTRICTED {@link LIQUID_COLORS} palette (the thirteen Apple system colours). **Orthogonal to a component's `variant`**: it recolours the accent the surface draws from (focus ring, tinted fill, selection) without changing its variant. Resolved via `data-tint` attribute selectors in CSS (tokens-only, ADR-0003).","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"value","type":"string | null | undefined","required":false,"description":"Controlled selected identity; null explicitly means no selection.","defaultValue":"undefined","declaredIn":"packages/@liquidify/react/src/components/sidebar/sidebar.tsx"}],"swiftUIMap":[{"swiftUI":"List(selection:)","react":"value / defaultValue / onChange","notes":"string or null; controlled/uncontrolled selection","relationship":"direct"},{"swiftUI":"Row tag and label","react":"Sidebar.Item value / children","notes":"Stable identity independent of visible text","relationship":"direct"},{"swiftUI":"Navigation destination","react":"Sidebar.Item href","notes":"Native router-neutral anchor","relationship":"direct"},{"swiftUI":"Section header","react":"Sidebar.Section label / children","notes":"Static grouping","relationship":"direct"},{"swiftUI":"DisclosureGroup isExpanded","react":"Sidebar.Group expanded / defaultExpanded / onExpandedChange","notes":"Independent presentation state","relationship":"direct"},{"swiftUI":"Label image","react":"icon","notes":"Optional decorative ReactNode","relationship":"direct"},{"swiftUI":"tint modifier","react":"inherited tint","notes":"System accent by default","relationship":"direct"},{"swiftUI":"Header/footer content","react":"Sidebar.Header / Sidebar.Footer","notes":"Optional composition slots","relationship":"direct"}],"tokens":[],"keyboard":[],"variants":[],"variantPages":[]}