{
"absorbed": [
"Paragraph",
"Typography"
],
"example": "import { Text } from \"@godxjp/ui/general\";\n\n補助テキスト\n¥1,240,000\nRC-204881\n\n// A link in running content — the affordance, composed onto a router link.\nログイン画面の余白",
"group": "general",
"importPath": "@godxjp/ui/general",
"name": "Text",
"props": [
{
"description": "Text decoration, including deleted Markdown content.",
"name": "decoration",
"type": "\"none\" | \"underline\" | \"line-through\""
},
{
"description": "Inline code chip: compose Text as=\"code\" chip without Prose wrapper.",
"name": "chip",
"type": "boolean"
},
{
"defaultValue": "\"sm\"",
"description": "Type-scale step. NEVER an arbitrary px (`text-[13px]` is banned) — pick the nearest step. Ten steps in two ramps: 2xs…2xl is the golden-ratio UI ramp (≈11…22px, the dense enterprise scale); 3xl…5xl is the DISPLAY ramp (≈28/42/54px, derived from --font-size-display) for a marketing hero, CTA headline or stat figure. The same ladder `Heading size` reads, so a headline and the figure beside it are one step name apart.",
"name": "size",
"type": "\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\""
},
{
"defaultValue": "\"default\"",
"description": "Semantic foreground colour. Replaces `text-muted-foreground` etc. on a raw span.",
"name": "tone",
"type": "\"default\" | \"muted\" | \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"info\" | \"inherit\""
},
{
"defaultValue": "\"regular\"",
"description": "Font weight — the 3-weight canon: regular 400 (body), medium 500 (label), bold 700 (emphasis). `semibold` is an alias that renders at the canon's 500 (there is no 600 face), so code written in the common Tailwind vocabulary type-checks without a fourth weight.",
"name": "weight",
"type": "\"regular\" | \"medium\" | \"semibold\" | \"bold\""
},
{
"description": "Logical text alignment.",
"name": "align",
"type": "\"start\" | \"center\" | \"end\""
},
{
"description": "Single-line ellipsis. Mutually exclusive with `clamp` (`clamp` wins).",
"name": "truncate",
"type": "boolean"
},
{
"description": "Multi-line clamp — max rendered lines (integer ≥ 1); overflow ends in an ellipsis. Visual-only — the full text stays in the DOM / accessible name. Mutually exclusive with `truncate` (`clamp` wins; dev builds warn).",
"name": "clamp",
"type": "number"
},
{
"defaultValue": "\"normal\"",
"description": "Whitespace handling. 'normal' is CSS's own behaviour (newlines and space runs collapse) and stays the default; passed explicitly it also releases a `nowrap` the text inherits (a table cell's, gh#1083). 'pre-wrap' is for text a PERSON typed — a plain-text note, an issue description, a pasted log — where the line breaks and the indentation are CONTENT: it keeps both, still wraps long lines at the container edge, and breaks an over-long unbroken token (a URL, an id) instead of overflowing. Use it INSTEAD of `className=\"whitespace-pre-wrap\"`. Precedence is explicit: `truncate` is a single-line contract and wins (dev builds warn); `clamp` COMPOSES with it, showing the first N preserved lines. Not for rendered Markdown/HTML — that is `Prose`, which styles rendered elements and does nothing to whitespace.",
"name": "whitespace",
"type": "\"normal\" | \"pre-wrap\""
},
{
"defaultValue": "\"normal\"",
"description": "Where an over-long unbroken token may break. THE prop for a machine identifier — an email address, a coupon code, a login id, a template key — in a DataTable/TableCell or a Descriptions value: `break=\"anywhere\"` emits `overflow-wrap: anywhere` (and releases a table cell's inherited `nowrap`), so the column shrinks to the viewport instead of scrolling the page. Use it INSTEAD of `className=\"[overflow-wrap:anywhere] break-words whitespace-normal\"`. NOT `whitespace=\"pre-wrap\"`: that is for typed line breaks, and its `break-word` does not lower min-content, so in a table cell it breaks nothing (measured: a 71-char token holds a 320px table at 630px with pre-wrap, 320px with break=\"anywhere\"). `break=\"phrase\"` is THE prop for Japanese PROSE in a narrow measure — a trainee's katakana name, an organisation, a status in a DataTable cell: it breaks between phrases (`word-break: auto-phrase`, Chrome 119+) instead of between any two characters, never starts a line with a small kana or 「ー」 (`line-break: strict`), adds `text-wrap: pretty`, and releases the cell's `nowrap` (measured in a 974px 8-column table: 「チャン・ヴァ｜ン・ミン」 → 「チャン・｜ヴァン・｜ミン」, 4 mid-katakana breaks → 0). It keeps every phrase whole, so the column is as wide as its longest phrase: a 20+ character katakana compound scrolls the table rather than being cut. Browsers without `auto-phrase` keep their own CJK breaking. Independent of `whitespace` (both may be set); `truncate` wins (dev builds warn); `clamp` composes.",
"name": "break",
"type": "\"normal\" | \"anywhere\" | \"phrase\""
},
{
"description": "Tabular figures for aligned numbers.",
"name": "tabular",
"type": "boolean"
},
{
"description": "Monospace family for codes / ids.",
"name": "mono",
"type": "boolean"
},
{
"defaultValue": "\"span\"",
"description": "Rendered element. `code`/`kbd` are monospace by default.",
"name": "as",
"type": "\"span\" | \"p\" | \"div\" | \"a\" | \"label\" | \"strong\" | \"em\" | \"small\" | \"code\" | \"kbd\" | \"dt\" | \"dd\" | \"caption\" | \"abbr\""
},
{
"description": "This text IS a link: underline on hover AND on keyboard focus at --text-link-underline-offset, plus the focus mark every other interactive element draws. An AFFORDANCE, not a colour — `tone` still owns the colour and merely defaults to `primary` here, so `link tone=\"destructive\"` reads destructive and still underlines.",
"name": "link",
"type": "boolean"
},
{
"defaultValue": "false",
"description": "Render the typography ONTO the child instead of emitting an element — the shape a router link takes (`…`). The child owns the element and its navigation; Text owns the type step, tone, weight and truncation.",
"name": "asChild",
"type": "boolean"
},
{
"description": "When set, Text renders as a `