{"slug":"labeled-content","name":"LabeledContent","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"Show a label/value pair on one line — \"Version … 2.6.0\", \"Wi-Fi … Liquid-5G\" — without inventing a bespoke flex-row per screen.","importPath":"@liquidify/react/labeled-content","sourcePath":"packages/@liquidify/react/src/components/labeled-content/labeled-content.tsx","specPath":"packages/@liquidify/react/src/components/labeled-content/spec.md","docsPath":"../liquidify-page/content/component-source/labeled-content.md","documentationStatus":"draft","storyIds":["presentational-labeled-content--default"],"additionalExports":["ControlProps","LabeledContentAlign"],"anatomy":[],"props":[{"name":"align","type":"LabeledContentAlign | undefined","required":false,"description":"Cross-axis alignment of the label against the trailing slot. Leave `\"baseline\"` (the default) for a text \"key: value\" row; pass `\"center\"` to seat a control (Toggle/Slider/Picker) — taller than one text line — against its label, the settings-row posture absorbed from the removed `Form.Body.Row`.","defaultValue":"`\"baseline\"`","declaredIn":"packages/@liquidify/react/src/components/labeled-content/labeled-content.tsx"},{"name":"children","type":"ReactNode","required":false,"description":"The trailing value, as rich/formatted content (SwiftUI `@ViewBuilder content:`) — a styled `Text`, a formatted date, or any other node. A bare `string | number` child is wrapped `color=\"secondary\"` (overridable via {@link LabeledContentProps.valueProps}) via `TextLabel`, same as {@link LabeledContentProps.value}; any other `ReactNode` passes through unchanged and ignores `valueProps`. Mutually exclusive with `value` (see `value` for the both-supplied dev-warning contract). children role: `content` (charter §8) — the free-form value slot.","declaredIn":"packages/@liquidify/react/src/components/labeled-content/labeled-content.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":true,"description":"The leading descriptor (SwiftUI `titleKey:` / `label:`) — the accessible name source. A `string | number` renders through the `TextLabel` guard into an internal `Text` (default `color=\"primary\"`, overridable via {@link LabeledContentProps.labelProps}); any other `ReactNode` (e.g. an icon+text composite) passes through unwrapped — `labelProps` is ignored — so the caller keeps ownership of its own typography and icon.","declaredIn":"packages/@liquidify/react/src/components/labeled-content/labeled-content.tsx"},{"name":"labelProps","type":"LabelProps | undefined","required":false,"description":"Per-instance typography override for the leading label — the web-only seam for SwiftUI's `.font(_:)` / `.foregroundStyle(_:)` on the label (ADR-0028). Spread **last** into the label `TextLabel`, so an explicit value here wins over the component's `color=\"primary\"` default. Applies only when {@link LabeledContentProps.label} is a `string | number`; a composite `ReactNode` label ignores this prop entirely.","declaredIn":"packages/@liquidify/react/src/components/labeled-content/labeled-content.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"},{"name":"value","type":"string | undefined","required":false,"description":"The trailing value, as a plain string (SwiftUI `init(_:value:)`). Routed through `TextLabel` (default `color=\"secondary\"`, overridable via {@link LabeledContentProps.valueProps}). Mutually exclusive with {@link LabeledContentProps.children} — supply exactly one per instance; when both are supplied, `value` wins (the `value !== undefined` gate is retained, so a legitimate empty-string `value` still wins), and a dev build additionally fires a `console.error` (charter §8; audit §7 P2).","declaredIn":"packages/@liquidify/react/src/components/labeled-content/labeled-content.tsx"},{"name":"valueProps","type":"LabelProps | undefined","required":false,"description":"Per-instance typography override for the trailing value — the web-only seam for SwiftUI's `.font(_:)` / `.foregroundStyle(_:)` on the value content (ADR-0028). Spread **last** into the value `TextLabel`, so an explicit value here wins over the component's `color=\"secondary\"` default. Applies only to a `string | number` {@link LabeledContentProps.value} or a bare `string | number` {@link LabeledContentProps.children}; a `ReactNode` child ignores this prop entirely.","declaredIn":"packages/@liquidify/react/src/components/labeled-content/labeled-content.tsx"}],"swiftUIMap":[{"swiftUI":"`init(_ titleKey: LocalizedStringKey/String, value: V)` (`V: Text`)","react":"✅","notes":"`<LabeledContent label=\"Version\" value=\"2.6.0\" />` — string `label` + string `value`","relationship":"direct"},{"swiftUI":"`init(_ titleKey:, @ViewBuilder content:)`","react":"✅","notes":"`<LabeledContent label=\"Storage\">128 GB</LabeledContent>` — `children` = the value slot","relationship":"direct"},{"swiftUI":"`init(@ViewBuilder content:, @ViewBuilder label:)`","react":"✅","notes":"`label` accepts an arbitrary `ReactNode` (icon+text composite) + `children` = the value slot","relationship":"direct"},{"swiftUI":"`init(_ titleKey:, value: V, format: FormatStyle)`","react":"~ (via `Text(Date(), format:)` inside a `content:` closure)","notes":"Folds into the `children` path — React's value slot accepts any formatted/rich node, not only plain strings; no dedicated `format` prop.","relationship":"direct"},{"swiftUI":"`init(_ configuration: LabeledContentStyleConfiguration)`","react":"✗","notes":"Style-plumbing internal; not a public React prop.","relationship":"direct"},{"swiftUI":"`.labeledContentStyle(_:)`","react":"✗ (no custom style used in the demo)","notes":"Not surfaced; only the default/automatic layout ships in v1 (see Out of scope).","relationship":"direct"},{"swiftUI":"`Label(_:, systemImage:)` in the `label` slot","react":"✅","notes":"`label` is a plain `ReactNode` — the caller composes its own icon+text node (e.g. `<><Icon name=\"wifi\" />Bluetooth</>`); no dedicated `icon` prop in v1 (see Out of scope).","relationship":"direct"},{"swiftUI":"`.foregroundStyle(.secondary)` on value content","react":"✅ (explicit on \"Storage\", matching the automatic default)","notes":"`value`/`children` default to `color=\"secondary\"` via the internal `TextLabel` routing — overridable via `valueProps` below, never opted out entirely.","relationship":"direct"},{"swiftUI":"`.font(_:)` / `.foregroundStyle(_:)` on the label","react":"~ (web-only seam, ADR-0028)","notes":"`labelProps?: LabelProps` — the shared `Pick<TextProps, …>` from `shared/text-label`, spread last into the label `TextLabel`. Applies only to a `string | number` label; a composite `ReactNode` label bypasses it.","relationship":"direct"},{"swiftUI":"`.font(_:)` / `.foregroundStyle(_:)` on value content","react":"~ (web-only seam, ADR-0028)","notes":"`valueProps?: LabelProps` — same shared `Pick`, spread last into the value `TextLabel`. Applies only to a `string | number` `value` or bare `string | number` `children`; a `ReactNode` child bypasses it.","relationship":"direct"},{"swiftUI":"`.glassEffect(in: .rect(cornerRadius: 20))` on a row container","react":"✅","notes":"Not a LabeledContent prop — glass belongs to the surrounding container, an external composition (see Out of scope).","relationship":"direct"},{"swiftUI":"`Divider()` between stacked rows","react":"✅","notes":"Not a LabeledContent primitive — external composition (see Out of scope).","relationship":"direct"}],"tokens":["--lq-color-label-primary","--lq-color-label-secondary","--lq-glass-","--lq-labeled-content-gap","--lq-labeled-content-hpad","--lq-labeled-content-pad","--lq-labeled-content-thumb-h","--lq-labeled-content-track-h","--lq-space-"],"keyboard":[],"variants":[],"variantPages":[]}