{"slug":"group-box","name":"GroupBox","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"Wrap a related cluster of content — account details, a terms toggle, a storage meter — behind one titled, visually-distinct card, so a screen reads as sections rather than an undifferentiated list.","importPath":"@liquidify/react/group-box","sourcePath":"packages/@liquidify/react/src/components/group-box/group-box.tsx","specPath":"packages/@liquidify/react/src/components/group-box/spec.md","docsPath":"../liquidify-page/content/component-source/group-box.md","documentationStatus":"draft","storyIds":["presentational-group-box--default"],"additionalExports":["ControlProps"],"anatomy":[],"props":[{"name":"children","type":"ReactNode","required":true,"description":"The grouped content (SwiftUI `{ … }` content closure, children role: `content`) — content-agnostic: hosts `LabeledContent` rows, a `Toggle`, a `ProgressIndicator`, or a nested `GroupBox`.","declaredIn":"packages/@liquidify/react/src/components/group-box/group-box.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":"label","type":"ReactNode","required":false,"description":"The card's title (SwiftUI `GroupBox(_:content:)` / `GroupBox(content:label:)`). A `string` routes through the `TextLabel` guard into an internal `Text` (`variant=\"headline\"`, `weight=\"semibold\"`, `color=\"secondary\"` by default, overridable per-instance via `labelProps`) carrying the id the root's `aria-labelledby` targets. A `ReactNode` (e.g. an icon+text composite) passes through unwrapped so the caller keeps ownership of its own typography and icon (`labelProps` has no effect on this shape). Omitted, or supplied as a non-renderable value (`false` / `null` / `true` / `\"\"`), renders no label region and no `aria-labelledby` — an intentionally unnamed group.","declaredIn":"packages/@liquidify/react/src/components/group-box/group-box.tsx"},{"name":"labelProps","type":"LabelProps | undefined","required":false,"description":"Per-instance typography override for a `string` `label` (ADR-0028, charter §2) — spread last onto the internal `Text` so an explicit value wins over the `headline`/`semibold`/`secondary` default. No effect when `label` is a `ReactNode` (passes through `TextLabel` unwrapped) or omitted/non-renderable.","declaredIn":"packages/@liquidify/react/src/components/group-box/group-box.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":"`GroupBox(_:content:)` — `String`/`LocalizedStringKey` title","react":"`label?: string`","notes":"Routed through the `TextLabel` guard into an internal `Text` (ADR-0028).","relationship":"direct"},{"swiftUI":"`GroupBox(content:label:)` — custom `label` view","react":"`label?: ReactNode`","notes":"Same `label` prop, union `string | ReactNode`; a node label renders verbatim — the caller composes its own icon+text pairing.","relationship":"direct"},{"swiftUI":"`GroupBox(content:)` — label-less","react":"`label` omitted (or `false`/`null`/`true`/`\"\"`)","notes":"No label region emitted; `children` is the only slot.","relationship":"direct"},{"swiftUI":"`GroupBox(label:content:)` (deprecated)","react":"—","notes":"Not surfaced; superseded by `content:label:` in the demo and in SwiftUI's own docs.","relationship":"direct"},{"swiftUI":"`{ … }` content closure","react":"`children: ReactNode` (required, children role: `content`)","notes":"Content slot, content-agnostic — hosts `LabeledContent`, `VStack`-equivalent layout, `Toggle`, `ProgressView`, or a nested `GroupBox`.","relationship":"direct"},{"swiftUI":"`init(_ configuration: GroupBoxStyleConfiguration)` / `.groupBoxStyle(_:)` / `GroupBoxStyle` protocol","react":"— (Out of scope v1)","notes":"Only the default (`.automatic`/`DefaultGroupBoxStyle`) is exercised by the demo; no custom-style plumbing ships in v1.","relationship":"direct"},{"swiftUI":"`controlSize`","react":"—","notes":"Non-sizable; no size prop (see Sizes).","relationship":"direct"},{"swiftUI":"`.tint(_:)`","react":"—","notes":"GroupBox has no tint surface; no `tint` prop.","relationship":"direct"},{"swiftUI":"`.font(_:)` / `.foregroundStyle(_:)` on a `string` title","react":"`labelProps?: LabelProps`","notes":"Per-instance typography override seam (ADR-0028, charter §2), spread **last** onto the string-`label` path's internal `Text` so an explicit consumer value wins over the `headline`/`semibold`/`secondary` default. No effect when `label` is a `ReactNode` (passes through `TextLabel` unwrapped) or omitted/non-renderable.","relationship":"direct"},{"swiftUI":"*(no analogue — web-only)*","react":"`ref?: Ref<HTMLDivElement>`","notes":"`GroupBoxProps extends ControlProps<HTMLDivElement>` (charter §4) — forwarded to the concrete `role=\"group\"` root `<div>` (the shared `Card` primitive's rendered element), not a bare `Ref<HTMLElement>`.","relationship":"web-only"}],"tokens":["--lq-color-bg-primary","--lq-color-bg-secondary","--lq-color-bg-secondary-","--lq-color-bg-tertiary-","--lq-color-label-","--lq-color-label-secondary","--lq-color-system-gray-4-default-dark","--lq-color-system-gray-5-default-dark","--lq-glass-","--lq-group-box-label-gap","--lq-group-box-pad","--lq-group-box-track-h","--lq-radius-14","--lq-space-"],"keyboard":[],"variants":[],"variantPages":[]}