{"slug":"text","name":"Text","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"Render styled body, heading, caption, and label text with SwiftUI-grade typographic fidelity.","importPath":"@liquidify/react/text","sourcePath":"packages/@liquidify/react/src/components/text/text.tsx","specPath":"packages/@liquidify/react/src/components/text/spec.md","docsPath":"../liquidify-page/content/component-source/text.md","documentationStatus":"draft","storyIds":["presentational-text--default"],"additionalExports":["ControlProps","HTMLElementFor","LiquidColor","TextColor","TextElement","TextLineHeight","TextStyle","TextTracking","TextTransform","TextWeight","TextWrap"],"anatomy":[],"props":[{"name":"as","type":"As | undefined","required":false,"description":"The rendered HTML element — polymorphic over the inline/block typographic set, so Text carries the right semantics (`<p>`, `<strong>`, `<code>`, …). Drives the {@link TextProps.ref} target type: `<Text as=\"p\">` narrows `ref` to `Ref<HTMLParagraphElement>`, not a bare `Ref<HTMLElement>`.","defaultValue":"`\"span\"`","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"children","type":"ReactNode","required":false,"description":"The content to render with the resolved typography.","declaredIn":"packages/@liquidify/react/src/components/text/text.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":"color","type":"TextColor | undefined","required":false,"description":"Apple label-colour hierarchy — `\"primary\"` (default), `\"secondary\"`, `\"tertiary\"`, or `\"quaternary\"` (increasing de-emphasis) — or `\"inherit\"` to take the colour of the surrounding host. Theme-aware via `light-dark()`; the `-ic` increased-contrast variants apply automatically through the token cascade. Ignored when {@link TextProps.tint} is set. `\"inherit\"` is the seam for a Text nested inside a colour-bearing element (an accent picker trigger, a state-recoloured toggle-button label): it emits `data-color=\"inherit\"` so the type inherits the host's colour instead of forcing a label-hierarchy colour (ADR-0028).","defaultValue":"`\"primary\"`","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"italic","type":"boolean | undefined","required":false,"description":"Italic styling (SwiftUI `.italic()`) — `font-style: italic` via `data-italic`.","defaultValue":"`false`","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"lineHeight","type":"TextLineHeight | undefined","required":false,"description":"Line height — a named leading scale (the SwiftUI `.lineSpacing(_:)` analogue). Overrides the variant's baked line-height via `data-leading` → `--lq-line-height-*`. When omitted, the variant's own leading applies.","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"ref","type":"Ref<HTMLElementFor<As>> | undefined","required":false,"description":"Forwarded ref to the rendered element — its type is conditional on {@link TextProps.as} via {@link HTMLElementFor}: `HTMLSpanElement` by default, `HTMLParagraphElement` for `as=\"p\"`, `HTMLPreElement` for `as=\"pre\"`, `HTMLDivElement` for `as=\"div\"`, and `HTMLElement` for the remaining inline tags (`b · strong · i · em · code · sup · sub`) — never a bare `Ref<HTMLElement>` (charter §4).","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"tint","type":"\"red\" | \"orange\" | \"yellow\" | \"green\" | \"mint\" | \"teal\" | \"cyan\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"brown\" | \"gray\" | undefined","required":false,"description":"Optional system-colour text — the SwiftUI `.foregroundStyle(Color.<hue>)` analogue, drawn from the restricted thirteen-hue {@link LiquidColor} palette and resolved via the shared `[data-tint]` → `--lq-tint-current` map. When set, it overrides {@link TextProps.color}.","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"tracking","type":"TextTracking | undefined","required":false,"description":"Letter-spacing — a named tracking scale (the SwiftUI `.tracking(_:)` analogue). Overrides the variant's baked tracking via `data-tracking` → `--lq-letter-spacing-*`. When omitted, the variant's own tracking applies.","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"transform","type":"TextTransform | undefined","required":false,"description":"Text case — the SwiftUI `.textCase(_:)` analogue; CSS `text-transform` via `data-transform`. When omitted, the text renders as authored.","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"variant","type":"TextStyle | undefined","required":false,"description":"The Apple Dynamic Type style — the primary typographic axis (SwiftUI `Font.TextStyle`). Resolves size + line-height + letter-spacing together via the `data-variant` selector.","defaultValue":"`\"body\"`","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"weight","type":"TextWeight | undefined","required":false,"description":"Font weight (SwiftUI `Font.Weight`), resolved to `--lq-font-weight-*` via `data-weight`. When omitted, the weight baked into {@link TextProps.variant} applies (e.g. `headline` is semibold); an explicit value overrides it.","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"},{"name":"wrap","type":"TextWrap | undefined","required":false,"description":"Wrapping behaviour via `data-wrap`: `\"nowrap\"` (single line), `\"balance\"` / `\"pretty\"` (CSS `text-wrap`), or `\"breakWord\"` (break long unbreakable strings). When omitted, text wraps normally.","declaredIn":"packages/@liquidify/react/src/components/text/text.tsx"}],"swiftUIMap":[{"swiftUI":"`Font.TextStyle` / `.font(_:)`","react":"`variant`","notes":"Charter §6 canonical — the primary typographic axis; KEEP.","relationship":"direct"},{"swiftUI":"`Font.Weight` / `.fontWeight(_:)`","react":"`weight`","notes":"KEEP.","relationship":"direct"},{"swiftUI":"`.foregroundStyle(.secondary)` (hierarchical)","react":"`color`","notes":"Idiomatic; KEEP (Phase 3 fixes only the exported `TextColor` type to include `inherit`, already emitted at runtime).","relationship":"direct"},{"swiftUI":"`.foregroundStyle(Color.<hue>)`","react":"`tint`","notes":"Catalog-consistent system-hue name; KEEP.","relationship":"direct"},{"swiftUI":"`.italic()`","react":"`italic`","notes":"KEEP.","relationship":"direct"},{"swiftUI":"`.lineSpacing(_:)`","react":"`lineHeight`","notes":"Kept as the idiomatic React/CSS name — SwiftUI `.lineSpacing` is additive point spacing, semantically distinct; `lineHeight` is more truthful to the CSS mechanic. KEEP.","relationship":"direct"},{"swiftUI":"`.tracking(_:)`","react":"`tracking`","notes":"`tracking` IS Apple's term; KEEP.","relationship":"direct"},{"swiftUI":"`.textCase(_:)`","react":"`transform`","notes":"Deliberately NOT renamed to `textCase`: the value set (`uppercase|lowercase|capitalize`) is broader than SwiftUI's two-value `.textCase`, so no clean 1:1 mapping exists; `transform` maps to the CSS `text-transform` mechanic it drives. KEEP.","relationship":"renamed"},{"swiftUI":"`.lineLimit` / `.truncationMode`","react":"`wrap`","notes":"No clean SwiftUI noun; kept as the CSS `text-wrap` idiom. KEEP.","relationship":"direct"},{"swiftUI":"*(no analogue — web-only)*","react":"`as`","notes":"Element polymorphism; idiomatic React. KEEP.","relationship":"web-only"},{"swiftUI":"*(no analogue — web-only)*","react":"`children` / `className`","notes":"KEEP.","relationship":"web-only"}],"tokens":["--lq-color-label-","--lq-font-family-sans","--lq-font-size-","--lq-font-weight-","--lq-font-weight-regular","--lq-font-weight-semibold","--lq-glass-","--lq-letter-spacing-","--lq-line-height-","--lq-tint-current"],"keyboard":[],"variants":["body","callout","caption","caption2","footnote","headline","largeTitle","subheadline","title","title2","title3"],"variantPages":[]}