@k8ordo/ui 1.0.0 → 2.0.0

package/docs/GUIDE.md

@@ -1,18 +1,18 @@
-# k8ordo UI Design Guide
+# @k8ordo/ui Design Guide
 
-`@k8ordo/ui` デザインシステムを使って UI を作るためのガイド。
+How to build UI with the `@k8ordo/ui` design system.
 
-## セットアップ
+## Setup
 
 ```bash
 npm install @k8ordo/ui
 ```
 
 ```tsx
-// 1. スタイルシートを読み込む（エントリポイントで1回）
+// 1. Load the stylesheet (once, at your entry point)
 import '@k8ordo/ui/styles.css';
 
-// 2. Provider でアプリを囲む
+// 2. Wrap the app in the provider
 import { UIProvider } from '@k8ordo/ui';
 
 function App() {
@@ -23,30 +23,40 @@ function App() {
   );
 }
 
-// 3. コンポーネントを使う
+// 3. Use components
 import { Button, Card } from '@k8ordo/ui';
 ```
 
-### スタイルシートの選び方
+### Choosing a stylesheet
 
-CSS のエントリは2つある。プロジェクトの CSS 環境で選ぶ：
+There are two CSS entries. Pick the one that matches your project:
 
-- **`styles.css`（既定）** — ビルド済み CSS。Tailwind を持たないプロジェクト（CSS Modules・素の CSS）はこちら。import 1行で完結し、Tailwind のセットアップは不要。ライブラリのルールはすべて `@layer` 内にあるため、レイヤー外にある利用側の CSS がカスケードで優先される（唯一の例外は preflight の `[hidden] { display: none !important }`）。デザイントークンは `:root` / `.dark` の CSS カスタムプロパティとしてそのまま参照できる（`var(--fg-mute)` など）。
-- **`tailwind.css`** — Tailwind ソース版。Tailwind CSS 4 を使うプロジェクトはこちらを import すると、デザイントークン（`bg-bg-base` など）を自分のマークアップの Tailwind クラスとしても使える。内部で `@import 'tailwindcss'` を含むため、プロジェクトの CSS は次の1行でよい：
+- **`styles.css` (default)** — prebuilt CSS. Use it if your project has no Tailwind (CSS Modules, plain CSS). A single import is all it takes, and no Tailwind setup is needed. Every library rule sits inside `@layer`, so your own unlayered CSS wins the cascade (the one exception is preflight's `[hidden] { display: none !important }`). Design tokens are readable as CSS custom properties on `:root` / `.dark` (`var(--fg-mute)`, …).
+- **`tailwind.css`** — the Tailwind source entry. Import this in a Tailwind CSS 4 project and the design tokens become usable as Tailwind classes (`bg-bg-base`, …) in your own markup too. It contains `@import 'tailwindcss'` internally, so one line is enough for your project's CSS:
 
 ```css
 @import '@k8ordo/ui/tailwind.css';
 ```
 
-どちらのエントリも文書全体にベーススタイルを適用する点に注意。Tailwind の preflight（見出し・リスト・余白のリセット等）に加え、ライブラリの base レイヤーが `b` / `strong` の太字や `i` / `em` の斜体を解除し、`body` のタイポグラフィ既定（`font-size` / `overflow-wrap: anywhere` / `scrollbar-gutter: stable` など）を設定する。既存アプリに後付けする場合はコンポーネント以外の見た目にも影響する。
+Note that either entry applies base styles document-wide. On top of Tailwind's
+preflight (resets for headings, lists, and margins), the library's base layer
+unsets bold on `b` / `strong` and italics on `i` / `em`, and sets `body`
+typography defaults (`font-size`, `overflow-wrap: anywhere`,
+`scrollbar-gutter: stable`, …). Adding it to an existing app restyles more than
+the library's own components.
 
-例外がもう1つ: `@k8ordo/ui/ai/response`（`Response`）だけは streamdown のクラスを利用側の Tailwind ビルドで生成する必要があるため、ビルド済み `styles.css` では表示が完成しない。`Response` を使うなら `tailwind.css` + `@source` 設定（[ai-chat](references/ai-chat.md)）が前提。
+One more exception: `@k8ordo/ui/ai/response` (`Response`) needs streamdown's
+classes to be generated by _your_ Tailwind build, so the prebuilt `styles.css`
+alone will not render it completely. Using `Response` requires `tailwind.css`
+plus a `@source` entry — see [ai-chat](references/ai-chat.md).
 
-### 文言の言語（i18n）
+### Wording language (i18n)
 
-コンポーネントが内部で持つ文言（「閉じる」「必須」「読み込み中」など）は**既定で日本語**。Provider を置かなくても、`messages` を渡さなくても日本語で動くので、日本語のアプリでは何も設定しなくてよい。
+The wording components own internally ("close", "required", "loading", …)
+**defaults to Japanese**. It works without a provider and without passing
+`messages`, so a Japanese app needs no setup at all.
 
-英語にするときは `@k8ordo/ui/i18n` の `en` を渡す。
+To switch to English, pass `en` from `@k8ordo/ui/i18n`.
 
 ```tsx
 import { UIProvider } from '@k8ordo/ui';
@@ -57,7 +67,7 @@ import { en } from '@k8ordo/ui/i18n';
 </UIProvider>;
 ```
 
-一部だけ差し替えたいときは辞書をスプレッドして上書きする。
+To replace only some of it, spread the dictionary and override those keys.
 
 ```tsx
 <UIProvider messages={{ ...en, close: 'Dismiss' }}>
@@ -65,161 +75,164 @@ import { en } from '@k8ordo/ui/i18n';
 </UIProvider>
 ```
 
-優先順位は **コンポーネントの prop > Provider の辞書 > 既定（日本語）**。`Spinner` の `label` のように個別の文言 prop を持つコンポーネントでは、その prop が辞書より優先される。
+Resolution order is **component prop > provider dictionary > built-in default
+(Japanese)**. For a component with a wording prop of its own, such as
+`Spinner`'s `label`, that prop wins over the dictionary.
 
-> [キー一覧・詳細](references/components.md)（「i18n（文言辞書）」の節）
+> [Full key list and details](references/components.md) (the "i18n (message dictionary)" section)
 
-## デザインの方向性
+## Design direction
 
-### コアコンセプト
+### Core concept
 
-**「触れるものは柔らかく、読むものは端正に」**
+**"Soft where you touch, precise where you read."**
+(触れるものは柔らかく、読むものは端正に)
 
-- **空間と形が主役**: 色ではなく、余白のゆとりと形の柔らかさがこのデザインの個性
-- **要素の性格で使い分ける**: 触れる要素（フォーム、ボタン）は柔らかく、情報を示す要素（Alert、Badge）は端正に
-- **余白で語る**: 詰め込まず、空間にゆとりを持たせる
-- **静かな変化**: アニメーションは控えめに、繊細なフィードバック
-- **穏やかな色**: OKLCH ベースのパレット、セマンティックトークンで抑えたトーンに
+- **Space and shape lead**: the character of this design comes from generous spacing and soft shapes, not from color
+- **Vary by the element's role**: things you touch (forms, buttons) are soft; things that inform (Alert, Badge) are precise
+- **Let the spacing speak**: do not pack things in; leave room
+- **Quiet motion**: restrained animation, subtle feedback
+- **Calm color**: an OKLCH-based palette kept low-key through semantic tokens
 
-すべてを同じトーンにしない。要素の性格ごとに柔らかさを変える。
+Do not give everything the same tone. Soften in proportion to the element's role.
 
-| 要素                                    | 方向性                                                   |
-| --------------------------------------- | -------------------------------------------------------- |
-| フォーム（TextField, Textarea, Button） | 柔らかい（大きな角丸、ピル型ボタン、ゆったりパディング） |
-| カード・コンテナ                        | 柔らかい（`rounded-xl`〜`rounded-2xl`、ふんわり影）      |
-| Alert, Badge                            | 端正（情報の明確さを優先）                               |
-| Tabs, Breadcrumb                        | シャープ（構造を示す要素は端正に）                       |
+| Element                             | Direction                                            |
+| ----------------------------------- | ---------------------------------------------------- |
+| Forms (TextField, Textarea, Button) | Soft (large radii, pill buttons, generous padding)   |
+| Cards and containers                | Soft (`rounded-xl`–`rounded-2xl`, gentle shadow)     |
+| Alert, Badge                        | Precise (clarity of information comes first)         |
+| Tabs, Breadcrumb                    | Sharp (elements that express structure stay precise) |
 
-### トーン
+### Tone
 
-柔らかな余白と静かな洗練。空間と形の柔らかさで魅せる。
+Soft spacing and quiet refinement. The appeal is in space and shape.
 
-## 美学ガイドライン
+## Aesthetic guidelines
 
-### ページ構造
+### Page structure
 
 **DO:**
 
-- ページ背景は `bg-bg-subtle`（薄いグレー）
-- コンテンツは白いカードで浮かせる
-- カード間に十分な余白（`gap-6`〜`gap-10`）
+- Use `bg-bg-subtle` (a light grey) for the page background
+- Float content on white cards
+- Leave enough room between cards (`gap-6`–`gap-10`)
 
 **DON'T:**
 
-- 純白背景にカードをフラットに置く
-- すべてを Card に入れる
-- Card を入れ子にする（Card in Card）
+- Lay flat cards on a pure white background
+- Put everything in a Card
+- Nest cards (Card in Card)
 
-### タイポグラフィ
+### Typography
 
 **DO:**
 
-- 日本語フォント（Noto Sans JP, M PLUS 2）を使う
-- フォントウェイトは 3種類まで（`font-normal`, `font-medium`, `font-bold`）
-- `font-medium` が 450（一般的な 500 より軽い）であることを活かした繊細な強調
+- Use the Japanese fonts (Noto Sans JP, M PLUS 2)
+- Keep to three font weights at most (`font-normal`, `font-medium`, `font-bold`)
+- Lean on `font-medium` being 450 — lighter than the usual 500 — for delicate emphasis
 
 **DON'T:**
 
-- Inter / Roboto / Open Sans を使う
-- 4種類以上のフォントサイズを1画面で使う
-- テキストにグラデーションをかける
+- Use Inter / Roboto / Open Sans
+- Use four or more font sizes on one screen
+- Apply gradients to text
 
-> [タイポグラフィ詳細](references/typography.md)
+> [Typography details](references/typography.md)
 
-### カラー
+### Color
 
 **DO:**
 
-- 60-30-10 ルール（ニュートラル60%, サポート30%, アクセント10%）
-- セマンティックカラートークンを使う（`bg-bg-subtle`, `text-fg-mute` 等）
-- ダークモードを独立したトーンで設計する
-- 色は穏やかに、空間と形で魅せる
+- Follow the 60-30-10 rule (60% neutral, 30% supporting, 10% accent)
+- Use semantic color tokens (`bg-bg-subtle`, `text-fg-mute`, …)
+- Design dark mode as its own tone, not a derivative
+- Keep color calm; let space and shape carry the design
 
 **DON'T:**
 
-- グラデーション背景
-- ホバーに `bg-primary-bg` — `bg-bg-mute` を使う
-- 透明度(`/90`)で状態表現 — 専用トークンを使う
-- 鮮やかな色を広範囲に使う
-- 生のパレット色（`bg-teal-500`）— セマンティックトークン（`bg-primary-bg`）を使う
+- Use gradient backgrounds
+- Use `bg-primary-bg` on hover — use `bg-bg-mute`
+- Express state with opacity (`/90`) — use the dedicated token
+- Spread vivid color over large areas
+- Use raw palette colors (`bg-teal-500`) — use semantic tokens (`bg-primary-bg`)
 
-> [カラー詳細](references/color.md)
+> [Color details](references/color.md)
 
-### スペーシング
+### Spacing
 
 **DO:**
 
-- `p-8` を標準パディングとする（フォーム・カード内）
-- 余白の差で関連度を表す（`mt-2` 近い、`mt-4` 標準、`mt-8` セクション間）
-- Separator でセクションを区切る
+- Treat `p-8` as the standard padding (inside forms and cards)
+- Express relatedness through the size of the gap (`mt-2` close, `mt-4` standard, `mt-8` between sections)
+- Separate sections with Separator
 
 **DON'T:**
 
-- すべてを Card に入れる
-- Card を入れ子にする（Card in Card）
-- `gap-1` のような極端に狭いスペーシング
+- Put everything in a Card
+- Nest cards (Card in Card)
+- Use extremely tight spacing such as `gap-1`
 
-> [スペーシング詳細](references/spatial-design.md)
+> [Spacing details](references/spatial-design.md)
 
-### インタラクション
+### Interaction
 
 **DO:**
 
-- `transition-colors` を基本にする
-- `focus-visible:ring-2 focus-visible:ring-border-info` でフォーカス表現
-- `hover:bg-bg-mute` で穏やかなホバー
+- Start from `transition-colors`
+- Express focus with `focus-visible:ring-2 focus-visible:ring-border-info`
+- Keep hover gentle with `hover:bg-bg-mute`
 
 **DON'T:**
 
-- bounce / spring 系のイージング
-- 300ms を超えるアニメーション
-- ホバーに強い原色を使う
+- Use bounce or spring easing
+- Animate for longer than 300ms
+- Use a strong primary color on hover
 
-> [インタラクション詳細](references/interaction-design.md)
+> [Interaction details](references/interaction-design.md)
 
-## コンポーネント使用の原則
+## Component usage principles
 
 ### Button
 
-`color` と `variant` で統一されたスタイル。ピル型（`rounded-full`）。
+Styling is unified through `color` and `variant`. Pill-shaped (`rounded-full`).
 
 ```tsx
 import { Button } from '@k8ordo/ui';
 
-// プライマリアクション
-<Button color="primary" variant="solid">保存する</Button>
+// Primary action
+<Button color="primary" variant="solid">Save</Button>
 
-// セカンダリアクション
-<Button color="base" variant="outline">キャンセル</Button>
+// Secondary action
+<Button color="base" variant="outline">Cancel</Button>
 
-// テキストのみ
-<Button variant="skeleton">詳細を見る</Button>
+// Text only
+<Button variant="skeleton">View details</Button>
 
-// リンクとしてレンダーする（renderItem prop）
+// Render as a link (renderItem prop)
 <Button
   color="base"
   renderItem={({ className, children }) => (
     <a className={className} href="/settings">{children}</a>
   )}
 >
-  設定へ
+  Settings
 </Button>
 ```
 
 ### IconButton
 
-`color` prop でスタイルを制御（`variant` ではない）。`label` は必須。
+Styling is controlled by `color` (not `variant`). `label` is required.
 
 ```tsx
 import { IconButton } from '@k8ordo/ui';
 
-<IconButton color="transparent" label="コピー"><CopyIcon /></IconButton>
-<IconButton color="primary" label="送信"><SendIcon /></IconButton>
+<IconButton color="transparent" label="Copy"><CopyIcon /></IconButton>
+<IconButton color="primary" label="Send"><SendIcon /></IconButton>
 
-// リンクとしてレンダーする（renderItem prop）
+// Render as a link (renderItem prop)
 <IconButton
   color="base"
-  label="ホーム"
+  label="Home"
   renderItem={({ className, children, 'aria-label': ariaLabel, triggerProps }) => (
     <a aria-label={ariaLabel} className={className} href="/home" {...triggerProps}>
       {children}
@@ -232,25 +245,25 @@ import { IconButton } from '@k8ordo/ui';
 
 ### Card
 
-シャドウで浮かせるのが基本。ページ背景 `bg-subtle` の上に白カード。
+Floating on a shadow is the default: a white card over a `bg-subtle` page.
 
 ```tsx
 import { Card } from '@k8ordo/ui';
 
-// 静的カード（シャドウで浮かせる）
+// Static card (floated with a shadow)
 <Card variant="shadow">
-  <div className="p-8">カードのコンテンツ</div>
+  <div className="p-8">Card content</div>
 </Card>
 
-// クリック可能なカード（interactive でホバー時にスケールアップ）
+// Clickable card (interactive scales it up on hover)
 <Card variant="shadow" interactive>
-  <div className="p-8">コンテンツ</div>
+  <div className="p-8">Content</div>
 </Card>
 ```
 
-### フォーム
+### Forms
 
-`FormControl` + 各フォームコンポーネントの `renderInput` パターン。
+`FormControl` plus each form component's `renderInput` pattern.
 
 ```tsx
 import {
@@ -261,14 +274,14 @@ import {
   TextField,
 } from '@k8ordo/ui';
 
-<FormControl label="メール" required renderInput={(props) => (
+<FormControl label="Email" required renderInput={(props) => (
   <TextField {...props} placeholder="example@mail.com" />
 )} />
 
-<FormControl label="カテゴリ" renderInput={(props) => (
+<FormControl label="Category" renderInput={(props) => (
   <Select
     {...props}
-    options={[{ value: '1', label: 'オプション1' }]}
+    options={[{ value: '1', label: 'Option 1' }]}
     value={value}
     onChange={onChange}
   />
@@ -277,48 +290,50 @@ import {
 <FileField.Root accept="image/*" multiple>
   <FileField.Trigger
     renderItem={({ onClick, disabled }) => (
-      <Button disabled={disabled} onClick={onClick}>ファイルを選択</Button>
+      <Button disabled={disabled} onClick={onClick}>Choose files</Button>
     )}
   />
   <FileField.ItemList />
 </FileField.Root>
 ```
 
-## アンチパターン: 「AI スロップ」を避ける
+## Anti-patterns: avoiding "AI slop"
 
-AI が生成したと一目でわかるUIの特徴を避ける。
+Avoid the traits that make a UI recognizably AI-generated at a glance.
 
-| アンチパターン                 | k8ordo UI での代替                                 |
-| ------------------------------ | -------------------------------------------------- |
-| パープルグラデーション         | Teal/Cyan のフラットカラー                         |
-| Card in Card（入れ子カード）   | Separator + 余白で区切り                           |
-| グレー背景にグレーテキスト     | `text-fg-base` / `text-fg-mute` のコントラスト確保 |
-| bounce / spring アニメーション | `transition-colors duration-150 ease-out`          |
-| Inter フォント                 | Noto Sans JP / M PLUS 2                            |
-| 過剰な glassmorphism           | border + subtle な背景色                           |
-| 情報の詰め込み                 | 余白を活かした疎な配置                             |
+| Anti-pattern               | The @k8ordo/ui alternative                         |
+| -------------------------- | -------------------------------------------------- |
+| Purple gradients           | Flat teal/cyan color                               |
+| Card in Card               | A Separator and spacing instead                    |
+| Grey text on a grey ground | Hold contrast with `text-fg-base` / `text-fg-mute` |
+| Bounce / spring animation  | `transition-colors duration-150 ease-out`          |
+| The Inter typeface         | Noto Sans JP / M PLUS 2                            |
+| Heavy glassmorphism        | A border plus a subtle background color            |
+| Cramming information in    | Sparse placement that lets the space breathe       |
 
-### AI スロップテスト
+### The AI slop test
 
-> このUIを誰かに見せて「AIが作った」と言ったら、すぐに信じるだろうか？
-> もし「はい」なら、それが問題だ。
+> Show this UI to someone and tell them an AI made it. Would they believe it
+> immediately? If yes, that is the problem.
 
-## 実装の原則
+## Implementation principles
 
-- **既存コンポーネントを使う**: カスタムUIの前にまず k8ordo UI コンポーネントを探す
-- **セマンティックトークンを使う**: 生のカラー値（`bg-teal-500`）ではなくトークン（`bg-primary-bg`）
-- **空間と形で魅せる**: 色の華やかさではなく、余白と角丸の柔らかさで個性を出す
-- **ダークモードを忘れない**: セマンティックトークンを使えば自動対応
-- **アクセシビリティ**: `aria-label`, キーボードナビゲーション, カラーだけに頼らない状態表現
+- **Use the existing components**: look for a @k8ordo/ui component before building custom UI
+- **Render from Server Components**: every component, compound ones included (`Dialog.Root`, `Tabs.Root`, …), can be placed in a Server Component; only the interactive parts are client modules
+- **Keep placed state in `@k8ordo/state`**: state that lives in the URL, a history entry, localStorage, or memory is `defineLocalState` and friends, not a hook from this package
+- **Use semantic tokens**: tokens (`bg-primary-bg`), never raw color values (`bg-teal-500`)
+- **Let space and shape carry it**: character comes from spacing and soft radii, not from vivid color
+- **Do not forget dark mode**: semantic tokens handle it for you
+- **Accessibility**: `aria-label`, keyboard navigation, and state that does not rely on color alone
 
-## 詳細リファレンス
+## Detailed reference
 
-- タイポグラフィ: [references/typography.md](references/typography.md)
-- カラーシステム: [references/color.md](references/color.md)
-- スペーシング・レイアウト: [references/spatial-design.md](references/spatial-design.md)
-- インタラクション: [references/interaction-design.md](references/interaction-design.md)
-- コンポーネント一覧: [references/components.md](references/components.md)
+- Typography: [references/typography.md](references/typography.md)
+- Color system: [references/color.md](references/color.md)
+- Spacing and layout: [references/spatial-design.md](references/spatial-design.md)
+- Interaction: [references/interaction-design.md](references/interaction-design.md)
+- Component catalog: [references/components.md](references/components.md)
 - Hooks: [references/hooks.md](references/hooks.md)
-- ヘルパー・型: [references/helpers.md](references/helpers.md)
-- AI チャット（Conversation / Message / PromptInput など）: [references/ai-chat.md](references/ai-chat.md)
-- 生成 UI（json-render / OpenUI で LLM に UI を生成させる）: [references/generative-ui.md](references/generative-ui.md)
+- Helpers and types: [references/helpers.md](references/helpers.md)
+- AI chat (Conversation / Message / PromptInput, …): [references/ai-chat.md](references/ai-chat.md)
+- Generative UI (having an LLM generate UI via json-render / OpenUI): [references/generative-ui.md](references/generative-ui.md)

package/docs/llms.txt

@@ -1,9 +1,13 @@
 # @k8ordo/ui
 
-> k8o's React UI library (React 19, TypeScript, Tailwind CSS 4) with semantic design
-> tokens, dark mode, AI chat components, and official generative UI adapters
-> (json-render & OpenUI) that let an LLM generate, validate, and render on-brand UIs
-> from these components.
+> React components from k8ordo, with semantic design tokens, dark mode,
+> built-in Japanese/English wording, AI chat components, and official generative UI
+> adapters (json-render & OpenUI) that let an LLM generate, validate, and render
+> on-brand UIs from these components.
+>
+> Like every k8ordo package it assumes React 19 and Server Components, uses only
+> what has reached Baseline, and ships no polyfills or legacy fallbacks — so
+> nothing here branches for a browser or a framework it does not support.
 
 When installed via npm, these docs live under `node_modules/@k8ordo/ui/docs/`.
 Start with GUIDE.md, then follow the reference most relevant to the task.
@@ -14,12 +18,12 @@ Start with GUIDE.md, then follow the reference most relevant to the task.
 
 ## References
 
-- [Components](references/components.md): full component list, import paths, props, and i18n — component wording comes from a dictionary that defaults to Japanese; `@k8ordo/ui/i18n` exports `ja` / `en` / the `Messages` type for `<UIProvider messages={...}>` (per-component wording props win over the dictionary).
+- [Components](references/components.md): full component list, import paths, props, and i18n — every component, compound ones included (`Dialog.Root`, `Tabs.Root`, …), renders from a Server Component — component wording comes from a dictionary that defaults to Japanese; `@k8ordo/ui/i18n` exports `ja` / `en` / the `Messages` type for `<UIProvider messages={...}>` (per-component wording props win over the dictionary).
 - [AI chat](references/ai-chat.md): AI chat components from `@k8ordo/ui/ai` (Conversation / Message / PromptInput / Reasoning / Suggestion / ToolInvocation), streaming Markdown `Response` from `@k8ordo/ui/ai/response` (optional peer `streamdown`), and `mapMessageParts` from `@k8ordo/ui/ai-sdk` to render AI SDK `UIMessage.parts` (optional peer `ai`).
 - [Generative UI](references/generative-ui.md): use json-render / OpenUI to make an LLM generate UIs — `catalog.prompt()` (server-safe), `<JsonRenderUI spec={spec} />` (client), `validateGeneratedSpec()` (validate/repair LLM output), `satisfies UISpec` (typed specs), and `@k8ordo/ui/openui/prompt`.
 - [Typography](references/typography.md): type scale and usage.
 - [Color](references/color.md): semantic token system and dark mode.
 - [Spacing & layout](references/spatial-design.md): spacing scale and layout patterns.
 - [Interaction](references/interaction-design.md): motion and interaction guidelines.
-- [Hooks](references/hooks.md): custom hooks.
-- [Helpers & types](references/helpers.md): helper functions and types.
+- [Hooks](references/hooks.md): custom hooks for UI mechanics (disclosure, timing, DOM observation). State that lives in a place (URL, history, localStorage, memory) belongs to `@k8ordo/state`, not to a hook here.
+- [Helpers & types](references/helpers.md): the five helper functions (`chain` / `cn` / `createSafeContext` / `mergeProps` / `mergeRefs`) and the public types (`Status` / `Direction` / `Placement` / `ModalSide` / `DrawerSide` / `Option`).

package/docs/props.generated.json

@@ -562,6 +562,12 @@
           "defaultValue": null,
           "required": false
         },
+        {
+          "name": "invalid",
+          "types": ["boolean"],
+          "defaultValue": "false",
+          "required": false
+        },
         {
           "name": "itemValue",
           "types": ["string"],
@@ -654,6 +660,12 @@
           "defaultValue": null,
           "required": false
         },
+        {
+          "name": "invalid",
+          "types": ["boolean"],
+          "defaultValue": "false",
+          "required": false
+        },
         {
           "name": "itemValue",
           "types": ["string"],
@@ -2434,6 +2446,12 @@
           "defaultValue": "false",
           "required": false
         },
+        {
+          "name": "invalid",
+          "types": ["boolean"],
+          "defaultValue": "false",
+          "required": false
+        },
         {
           "name": "name",
           "types": ["string"],