{"slug":"empty-state","name":"EmptyState","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"Show something purposeful instead of a blank screen when a list, search, or feed has nothing to render.","importPath":"@liquidify/react/empty-state","sourcePath":"packages/@liquidify/react/src/components/empty-state/empty-state.tsx","specPath":"packages/@liquidify/react/src/components/empty-state/spec.md","docsPath":"../liquidify-page/content/component-source/empty-state.md","documentationStatus":"draft","storyIds":["presentational-empty-state--default"],"additionalExports":[],"anatomy":[{"name":"Title","description":"Title — the accessible name; a heading-level (h2) node bearing the"},{"name":"Description (optional)","description":"Description (optional) — secondary explanatory copy, a string or a"}],"props":[{"name":"children","type":"ReactNode","required":false,"description":"Freeform slot the caller composes their own content into (SwiftUI `actions: () -> Actions`) — typically `<Button>`s, e.g. `variant=\"borderedProminent\"` for the primary action. Rendered as a direct flex child so it respects the root's column alignment; EmptyState enforces no structure on it.","declaredIn":"packages/@liquidify/react/src/components/empty-state/empty-state.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":"description","type":"ReactNode","required":false,"description":"Secondary explanatory copy (SwiftUI `description: () -> Text?`). A string/number renders through the component's own token-styled text element; a `ReactNode` passes through unwrapped.","declaredIn":"packages/@liquidify/react/src/components/empty-state/empty-state.tsx"},{"name":"icon","type":"ReactNode","required":false,"description":"Decorative glyph, e.g. `<Icon name=\"bookmark\" />` (SwiftUI `systemImage:` / `image:`). Always `aria-hidden` regardless of what the supplied node itself sets.","declaredIn":"packages/@liquidify/react/src/components/empty-state/empty-state.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":"title","type":"string","required":true,"description":"The accessible name — required; rendered as the heading-level title.","declaredIn":"packages/@liquidify/react/src/components/empty-state/empty-state.tsx"}],"swiftUIMap":[{"swiftUI":"`init(_ title:, systemImage:, description:)`","react":"`title: string` + `icon?: ReactNode` + `description?: ReactNode`","notes":"`systemImage:` → `icon` accepts a `ReactNode` (e.g. `<Icon name=\"bookmark\" />`), never a raw SF-Symbol string — no Apple glyph vectors ship in this package (`icon.tsx`, SF Symbols License).","relationship":"direct"},{"swiftUI":"`init(_ title:, image:, description:)`","react":"same as above","notes":"The `Image` overload collapses into the same `icon` `ReactNode` slot.","relationship":"renamed"},{"swiftUI":"`init(label:, description:, actions:)`","react":"`title` + `icon` (in place of the raw `label:` ViewBuilder) + `description` + `children`","notes":"Full builder. SwiftUI's icon+title `Label` is modelled as the idiomatic `title`+`icon` pair; **no raw `label` escape hatch** (see Out of scope).","relationship":"direct"},{"swiftUI":"`description: () -> Text?`","react":"`description?: ReactNode`","notes":"Secondary copy. A string/number renders through the component's own token-styled text element (`--lq-font-size-body`, secondary label colour); a `ReactNode` passes through unwrapped.","relationship":"direct"},{"swiftUI":"`actions: () -> Actions` (ViewBuilder of `Button`s)","react":"`children?: ReactNode`","notes":"A generic children slot — mirrors the SwiftUI ViewBuilder's flexibility. The caller composes its own `<Button>`s (e.g. `variant=\"borderedProminent\"` for the primary, `variant=\"plain\"` for the secondary); EmptyState does **not** enforce a structured `primaryAction`/`secondaryAction` pair.","relationship":"direct"},{"swiftUI":"`static func search(text:)`","react":"`title` + `icon={<Icon name=\"search\" />}` + `description`","notes":"No dedicated preset — the caller supplies the localized \"No Results for …\" title and copy directly.","relationship":"direct"}],"tokens":["--lq-color-label-primary-","--lq-color-label-secondary-","--lq-color-label-secondary-dark","--lq-color-label-secondary-light","--lq-empty-state-gap","--lq-empty-state-group-gap","--lq-empty-state-icon-size","--lq-empty-state-pad","--lq-empty-state-track-h","--lq-font-size-body","--lq-font-size-title2","--lq-font-weight-bold","--lq-glass-","--lq-space-"],"keyboard":[],"variants":[],"variantPages":[]}