@godxjp/ui-mcp 0.9.0 → 0.11.0

package/dist/index.js

@@ -191,6 +191,75 @@ import { Button } from "@godxjp/ui/general";
     storyPath: "layout/Inline.stories.tsx",
     rules: [2]
   },
+  {
+    name: "Flex",
+    group: "layout",
+    tagline: "Token-spaced flex primitive with explicit direction, alignment, justification, and wrapping controls.",
+    props: [
+      {
+        name: "direction",
+        type: '"row" | "col"',
+        defaultValue: '"col"',
+        description: "Main axis direction. Use row for horizontal runs, col for vertical stacks."
+      },
+      {
+        name: "gap",
+        type: '"xs" | "sm" | "md" | "lg" | "xl"',
+        defaultValue: '"md"',
+        description: "Token gap between children, shared with Stack and Inline."
+      },
+      {
+        name: "align",
+        type: '"start" | "center" | "end" | "stretch" | "baseline"',
+        description: "Cross-axis alignment, emitted as a data attribute for the layout CSS."
+      },
+      {
+        name: "justify",
+        type: '"start" | "center" | "end" | "between" | "around" | "evenly"',
+        description: "Main-axis distribution, emitted as a data attribute for the layout CSS."
+      },
+      {
+        name: "wrap",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Allows children to wrap onto additional flex lines."
+      }
+    ],
+    usage: [
+      'DO import from `@godxjp/ui/layout` and reach for Flex when the axis, alignment, justification, or wrap behavior is part of the component contract: `import { Flex } from "@godxjp/ui/layout"`.',
+      "DO keep spacing on the `gap` prop instead of raw `gap-*`, `space-*`, or padding utilities. Flex uses the same token scale as Stack and Inline, so spacing remains tied to the design system.",
+      'DO use `direction="row"` with `wrap` for responsive control rows, chip clusters, and action groups that need more control than Inline exposes.',
+      'DO use `direction="col"` for vertical groupings that need explicit `align` or `justify` behavior. If all you need is a vertical gap, Stack is the thinner alias.',
+      "DON'T override the axis with `className` after choosing a direction prop. Keep the layout intent in props so catalog guidance and data attributes stay accurate.",
+      "Flex is a plain div with React.HTMLAttributes<HTMLDivElement>; pass `id`, `role`, `aria-*`, `data-*`, and structural className values as needed, but do not use it as a semantic form or button wrapper."
+    ],
+    useCases: [
+      "Toolbar internals where controls should sit in a row, wrap on narrow widths, and stay vertically centered.",
+      "Card headers that need title content on the left and actions on the right via `justify='between'` without hand-rolling flex utility classes.",
+      "Empty-state or loading blocks that center content on both axes using `align='center'` and `justify='center'`.",
+      "Form sub-sections where a vertical group needs stretched children or centered helper content beyond what Stack exposes.",
+      "Badge, chip, or tag clusters where wrapping is required but the caller also needs a larger token gap than Inline's default.",
+      "Low-level layout composition inside custom components where Stack and Inline are too opinionated but raw flex classes would duplicate the primitive."
+    ],
+    related: [
+      "Stack \u2014 thin `direction='col'` alias of Flex. Use Stack for ordinary vertical block spacing; use Flex when you need align, justify, or wrap control.",
+      "Inline \u2014 thin `direction='row'` alias of Flex with wrapping and centered alignment. Use Inline for simple horizontal groups; use Flex for explicit axis/distribution control.",
+      "ResponsiveGrid \u2014 use for equal-width, multi-column tile layouts. Flex arranges children on one flex axis and does not provide column-count behavior.",
+      "PageContainer \u2014 page scaffold and padding context. Flex is an inner layout primitive used inside page sections, cards, dialogs, and toolbars."
+    ],
+    example: `import { Flex } from "@godxjp/ui/layout";
+import { Button } from "@godxjp/ui/general";
+
+<Flex direction="row" gap="sm" align="center" justify="between" wrap>
+  <SearchSummary />
+  <Flex direction="row" gap="xs" align="center" wrap>
+    <Button variant="outline">\u30EA\u30BB\u30C3\u30C8</Button>
+    <Button>\u9069\u7528</Button>
+  </Flex>
+</Flex>`,
+    storyPath: "layout/Flex.stories.tsx",
+    rules: [2, 40]
+  },
   {
     name: "ResponsiveGrid",
     group: "layout",
@@ -811,7 +880,7 @@ function MyShell({ children }: { content: React.ReactNode }) {
     ],
     useCases: [
       'Primary form submission in a Dialog or Sheet (e.g. `<Button type="submit" disabled={form.processing}>\u4FDD\u5B58</Button>`) \u2014 the `disabled` prop greys it out and blocks pointer events, preventing double-submit during async operations.',
-      'Destructive confirmation inside a Dialog \u2014 pair `variant="destructive"` Button as the confirm action and `variant="outline"` as Cancel; never use `variant="default"` for a delete action.',
+      'Destructive confirmation inside a Dialog \u2014 pair `tone="destructive"` Button as the confirm action and `variant="outline"` as Cancel; never use `variant="default"` for a delete action.',
       'Icon-only toolbar actions in a DataTable column (edit, delete, copy) using `size="icon-sm"` + `variant="ghost"` + a Lucide icon child \u2014 gives equal-width square targets that don\'t distort the row.',
       "Navigation links styled as buttons (e.g. 'New Invoice', 'Back to list') using `asChild` + Inertia `<Link>` \u2014 preserves SPA navigation while using the button's visual treatment.",
       "Async mutation trigger in an accounting workflow (e.g. 'Sync from MF', 'Export CSV') \u2014 disable on processing state; pair with `MutationFeedback` for error/retry UI rather than inline `try/catch` alerts.",
@@ -1212,7 +1281,11 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
         type: "React.ComponentType<{ className?: string }> | null",
         description: "Leading icon override. Pass null to suppress the auto status icon."
       },
-      { name: "children", type: "ReactNode", description: "Badge label. When omitted with status, Badge renders the translated lifecycle label or raw status." }
+      {
+        name: "children",
+        type: "ReactNode",
+        description: "Badge label. When omitted with status, Badge renders the translated lifecycle label or raw status."
+      }
     ],
     usage: [
       "DO pick the correct variant semantically: `success` (approved/paid), `warning` (pending/overdue), `destructive` (rejected/error), `secondary` (neutral category), `outline` (subtle label), `default` (primary accent). Never force a colour just for aesthetics \u2014 agents and screen readers read the variant as intent.",
@@ -1224,7 +1297,7 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
     ],
     useCases: [
       'Category or tier labels on table rows \u2014 e.g. plan tier (`<Badge variant="secondary">Pro</Badge>`), document type (`<Badge variant="outline">Invoice</Badge>`), or locale tag (`<Badge variant="secondary">EN</Badge>`).',
-      'Approval or review state in an accounting list where the value is not a lifecycle key in Badge\'s STATUS_MAP \u2014 e.g. a custom approval tier like `<Badge variant="success">\u627F\u8A8D\u6E08</Badge>` or `<Badge variant="warning">\u8981\u78BA\u8A8D</Badge>`.',
+      'Approval or review state in an accounting list where the value is not a lifecycle key in Badge\'s STATUS_MAP \u2014 e.g. a custom approval tier like `<Badge tone="success">\u627F\u8A8D\u6E08</Badge>` or `<Badge tone="warning">\u8981\u78BA\u8A8D</Badge>`.',
       "Inline count or highlight next to a heading or nav item \u2014 e.g. `<Badge variant=\"destructive\">3</Badge>` beside 'Overdue invoices' to draw attention to a non-zero count.",
       'Feature flags or experiment variant labels on admin records \u2014 e.g. `<Badge variant="outline">A/B</Badge>` alongside a campaign row to indicate it is in a split test.',
       "Read-only metadata chips inside a Descriptions.Item or Card header where a lifecycle icon would be visually heavy \u2014 e.g. currency code, payment method, or region tag."
@@ -1236,7 +1309,7 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
 
 <Badge variant="secondary">A/B</Badge>
 <Badge status="active">\u516C\u958B\u4E2D</Badge>
-<Badge status="\u30D7\u30EC\u30DF\u30A2\u30E0" variant="success" icon={null}>\u30D7\u30EC\u30DF\u30A2\u30E0</Badge>`,
+<Badge status="\u30D7\u30EC\u30DF\u30A2\u30E0" tone="success" icon={null}>\u30D7\u30EC\u30DF\u30A2\u30E0</Badge>`,
     storyPath: "data-display/Badge.stories.tsx",
     rules: [35]
   },
@@ -1356,7 +1429,7 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
       "DON'T use Progress for editable numeric input or range selection \u2014 it has no callbacks, no interactivity, and no form `name` prop. Use Slider (bounded range input) or Input (free-form number) for data-entry scenarios."
     ],
     useCases: [
-      'Budget utilisation in an accounting dashboard \u2014 show how much of a monthly budget has been consumed, switching to `variant="warning"` when the figure crosses 80%.',
+      'Budget utilisation in an accounting dashboard \u2014 show how much of a monthly budget has been consumed, switching to `tone="warning"` when the figure crosses 80%.',
       'Invoice payment progress \u2014 display the proportion of an invoice total that has been settled (e.g. partial payments), with a label like `"\xA545,000 / \xA560,000 \u652F\u6255\u6E08"` computed before passing `value`.',
       "Storage or quota indicator in an admin panel \u2014 visualise disk usage, API quota, or seat licence consumption against a fixed limit.",
       "Sync / import job completion feedback \u2014 surface the completion percentage of a long-running background job (polling the server) without giving the user an interactive control.",
@@ -1675,7 +1748,7 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
     example: `import { FormField, Input } from "@godxjp/ui/data-entry";
 
 <FormField id="coupon-name" label="\u30AF\u30FC\u30DD\u30F3\u540D" required error={errors.name} helper="\u6700\u592750\u6587\u5B57">
-  <Input id="coupon-name" placeholder="\u6625\u306E\u82B1\u7C89\u75C7\u5BFE\u7B5615%OFF" value={name} onChange={(e) => setName(e.target.value)} />
+  <Input id="coupon-name" placeholder="\u6625\u306E\u82B1\u7C89\u75C7\u5BFE\u7B5615%OFF" value={name} onValueChange={(e) => setName(e.target.value)} />
 </FormField>`,
     storyPath: "data-entry/FormField.stories.tsx",
     rules: [23]
@@ -1718,7 +1791,7 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
     ],
     example: `import { Input } from "@godxjp/ui/data-entry";
 
-<Input id="qty" type="number" placeholder="\u4F8B: 500" value={value} onChange={(e) => setValue(e.target.value)} />`,
+<Input id="qty" type="number" placeholder="\u4F8B: 500" value={value} onValueChange={(e) => setValue(e.target.value)} />`,
     storyPath: "data-entry/Input.stories.tsx",
     rules: []
   },
@@ -1916,7 +1989,7 @@ export function StatusSelect({ value, onChange }) {
   return (
     <Select
       value={value}
-      onChange={onChange}
+      onValueChange={onChange}
       options={[
         { value: "draft",    label: "Draft" },
         { value: "sent",     label: "Sent" },
@@ -1935,7 +2008,7 @@ export function CurrencySelect({ value, onChange }) {
   return (
     <Select
       value={value}
-      onChange={onChange}
+      onValueChange={onChange}
       showSearch
       options={[
         { value: "JPY", label: "Japanese Yen",  group: "Asia" },
@@ -1961,7 +2034,7 @@ export function AccountSelect({ value, onChange, selectedLabel }) {
   return (
     <Select
       value={value}
-      onChange={onChange}
+      onValueChange={onChange}
       loadOptions={loadOptions}
       selectedLabel={selectedLabel}
       placeholder="Search accounts\u2026"
@@ -2084,7 +2157,7 @@ export function PrioritySelect({ value, onValueChange }) {
     ],
     example: `import { Textarea } from "@godxjp/ui/data-entry";
 
-<Textarea id="notes" rows={4} placeholder="\u81EA\u7531\u8A18\u8FF0" value={notes} onChange={(e) => setNotes(e.target.value)} />`,
+<Textarea id="notes" rows={4} placeholder="\u81EA\u7531\u8A18\u8FF0" value={notes} onValueChange={(e) => setNotes(e.target.value)} />`,
     storyPath: "data-entry/Textarea.stories.tsx",
     rules: []
   },
@@ -2320,7 +2393,7 @@ export function InvoiceDueDateField() {
         id="due-date"
         name="due_date"
         value={dueDate}
-        onChange={setDueDate}
+        onValueChange={setDueDate}
         fromDate={new Date()}
         placeholder="yyyy-mm-dd"
       />
@@ -2465,7 +2538,7 @@ import { Button } from "@godxjp/ui/general";
       }
     ],
     usage: [
-      'DO compose with sub-parts in order: wrap text content in `<Alert.Content>` (or bare `<AlertContent>`), then `<Alert.Title>` + `<Alert.Description>` inside it, then `<Alert.Actions>` for any retry/CTA buttons. Example: `<Alert variant="destructive"><Alert.Content><Alert.Title>Error</Alert.Title><Alert.Description>{msg}</Alert.Description></Alert.Content><Alert.Actions><Button \u2026/></Alert.Actions></Alert>`.',
+      'DO compose with sub-parts in order: wrap text content in `<Alert.Content>` (or bare `<AlertContent>`), then `<Alert.Title>` + `<Alert.Description>` inside it, then `<Alert.Actions>` for any retry/CTA buttons. Example: `<Alert tone="destructive"><Alert.Content><Alert.Title>Error</Alert.Title><Alert.Description>{msg}</Alert.Description></Alert.Content><Alert.Actions><Button \u2026/></Alert.Actions></Alert>`.',
       "DO use `Alert.QueryError` (alias `AlertQueryError`) for TanStack Query / API failure surfaces \u2014 it already renders humanError(error), an i18n title, and an optional Retry button. Never hand-roll that pattern.",
       'DON\'T pass raw action elements directly as top-level children of `<Alert>` without wrapping them in `<Alert.Actions>` \u2014 the layout slot only activates correctly via the `data-slot="alert-actions"` wrapper.',
       'DON\'T hand-roll a dismiss \u2715 button \u2014 pass `onDismiss` to `<Alert>` and the component renders its own accessible dismiss button with `aria-label="Dismiss"`. The `onDismiss` handler may return a Promise.',
@@ -2473,12 +2546,12 @@ import { Button } from "@godxjp/ui/general";
       "DO NOT use `Alert` for transient ephemeral feedback (e.g. 'saved successfully'). Use `toast()` from sonner + `<Toaster>` for that. `Alert` is for persistent, page-scoped banners that stay visible until the user acts or dismisses."
     ],
     useCases: [
-      'Page-level error banner after a form submission fails server-side validation \u2014 `variant="destructive"` with `Alert.Title` summarising the error and `Alert.Description` listing field issues, paired with `onDismiss` so the user can clear it.',
+      'Page-level error banner after a form submission fails server-side validation \u2014 `tone="destructive"` with `Alert.Title` summarising the error and `Alert.Description` listing field issues, paired with `onDismiss` so the user can clear it.',
       "Inline warning at the top of an accounting invoice list when the OAuth token for the MF sync is about to expire \u2014 `variant=\"warning\"` with an `Alert.Actions` containing a 'Reconnect' Button.",
-      'Success confirmation banner rendered after a bulk-import job completes and the user returns to the list page \u2014 `variant="success"` with `Alert.Description` showing the record count imported.',
+      'Success confirmation banner rendered after a bulk-import job completes and the user returns to the list page \u2014 `tone="success"` with `Alert.Description` showing the record count imported.',
       "TanStack Query data-fetch failure inside a Card body \u2014 use `<Alert.QueryError error={error} onRetry={refetch} />` instead of writing a custom error state.",
       "Informational notice at the top of a settings page when a feature is in beta or requires a plan upgrade \u2014 `variant=\"default\"` (Info icon) with a short description and an `Alert.Actions` 'Learn more' link.",
-      'Dismissible billing-overdue notice at the top of the dashboard \u2014 `variant="destructive"` with `onDismiss` that sets a session flag so it does not reappear until the next login.'
+      'Dismissible billing-overdue notice at the top of the dashboard \u2014 `tone="destructive"` with `onDismiss` that sets a session flag so it does not reappear until the next login.'
     ],
     related: [
       "Toaster \u2014 use for transient, auto-dismissing feedback ('Record saved', 'Deleted'). Alert is for persistent page-scoped banners; Toaster is for fire-and-forget notifications triggered by toast() from sonner.",
@@ -2488,7 +2561,7 @@ import { Button } from "@godxjp/ui/general";
     ],
     example: `import { Alert, AlertTitle, AlertDescription } from "@godxjp/ui/feedback";
 
-<Alert variant="warning">
+<Alert tone="warning">
   <AlertTitle>3 \u4EF6\u306E\u6253\u523B\u6F0F\u308C\u304C\u3042\u308A\u307E\u3059</AlertTitle>
   <AlertDescription>\u672C\u65E5\u4E2D\u306B\u78BA\u8A8D\u3057\u3066\u304F\u3060\u3055\u3044\u3002</AlertDescription>
 </Alert>`,
@@ -2809,7 +2882,7 @@ import { SearchInput, Select, SelectTrigger, SelectValue, SelectContent, SelectI
     ],
     example: `import { Pagination } from "@godxjp/ui/navigation";
 
-<Pagination current={page} total={filtered.length} pageSize={10} showTotal onChange={(p) => setPage(p)} />`,
+<Pagination current={page} total={filtered.length} pageSize={10} showTotal onValueChange={(p) => setPage(p)} />`,
     storyPath: "navigation/Pagination.stories.tsx",
     rules: [40]
   },
@@ -2855,7 +2928,7 @@ import { Button } from "@godxjp/ui/general";
   <DropdownMenuContent>
     <DropdownMenuItem>\u7DE8\u96C6</DropdownMenuItem>
     <DropdownMenuSeparator />
-    <DropdownMenuItem variant="destructive">\u524A\u9664</DropdownMenuItem>
+    <DropdownMenuItem tone="destructive">\u524A\u9664</DropdownMenuItem>
   </DropdownMenuContent>
 </DropdownMenu>`,
     storyPath: "navigation/DropdownMenu.stories.tsx",
@@ -3110,7 +3183,7 @@ export function ShiftStartField() {
         id="shift-start"
         name="shift_start"
         value={startTime}
-        onChange={setStartTime}
+        onValueChange={setStartTime}
         minuteStep={15}
         className="w-36"
       />
@@ -3230,7 +3303,7 @@ export function InvoicePeriodFilter() {
         id="invoice-period"
         name="period"
         value={range}
-        onChange={setRange}
+        onValueChange={setRange}
         fromDate={new Date(2020, 0, 1)}
         toDate={new Date(2030, 11, 31)}
       />
@@ -3386,7 +3459,7 @@ function RegionPicker() {
     <Cascader
       options={REGIONS}
       value={path}
-      onChange={(v) => setPath(v as string[])}
+      onValueChange={(v) => setPath(v as string[])}
       showSearch
       placeholder="Select region\u2026"
     />
@@ -3402,7 +3475,7 @@ function MultiRegionPicker() {
       options={REGIONS}
       multiple
       value={paths}
-      onChange={(v) => setPaths(v as string[][])}
+      onValueChange={(v) => setPaths(v as string[][])}
       showSearch
     />
   );
@@ -3419,7 +3492,7 @@ function MultiRegionPicker() {
 <Cascader
   options={REGIONS}
   changeOnSelect
-  onChange={(v) => console.log("path", v)}
+  onValueChange={(v) => console.log("path", v)}
 />
 \`}`,
     storyPath: "data-entry/Cascader.stories.tsx",
@@ -3582,7 +3655,7 @@ export function AccountPicker() {
         id="account-picker"
         treeData={accountTree}
         value={account}
-        onChange={(v) => setAccount(v as string | undefined)}
+        onValueChange={(v) => setAccount(v as string | undefined)}
         showSearch
         treeDefaultExpandAll
         placeholder="Select account\u2026"
@@ -3600,7 +3673,7 @@ export function DepartmentFilter() {
       id="dept-filter"
       treeData={accountTree}
       value={selected}
-      onChange={(v) => setSelected(v as string[])}
+      onValueChange={(v) => setSelected(v as string[])}
       treeCheckable
       showCheckedStrategy={TreeSelect.SHOW_PARENT}
       showSearch
@@ -3673,7 +3746,7 @@ export function DepartmentFilter() {
       }
     ],
     usage: [
-      "DO own `targetKeys` in state and update it inside `onChange`: `const [targetKeys, setTargetKeys] = useState<string[]>([]); onChange={(next) => setTargetKeys(next)}`.",
+      "DO own `targetKeys` in state and update it inside `onChange`: `const [targetKeys, setTargetKeys] = useState<string[]>([]); onValueChange={(next) => setTargetKeys(next)}`.",
       "DO NOT hand-roll a two-panel checkbox picker \u2014 Transfer ships the full shuttle UX (select-all header, indeterminate state, search, move buttons, empty state) out of the box.",
       "DO enable `showSearch` for lists longer than ~10 items; the built-in SearchInput filters by both `title` and `description` text content, including ReactNode content via `reactNodeText`.",
       "DO use `oneWay={true}` for append-only flows (e.g. adding permissions to a role) where items must never be moved back.",
@@ -3712,7 +3785,7 @@ export function AccountMapping() {
     <Transfer
       dataSource={ALL_ACCOUNTS}
       targetKeys={targetKeys}
-      onChange={(nextKeys) => setTargetKeys(nextKeys)}
+      onValueChange={(nextKeys) => setTargetKeys(nextKeys)}
       titles={["Available Accounts", "Mapped Accounts"]}
       showSearch
     />
@@ -3842,7 +3915,7 @@ export function AvatarUploadForm() {
       <Upload
         variant="avatar-crop"
         value={items}
-        onChange={setItems}
+        onValueChange={setItems}
         onUpload={handleUpload}
         maxSizeBytes={5 * 1024 * 1024}
       />
@@ -3859,7 +3932,7 @@ export function DocumentUploadDropzone() {
     <Upload
       variant="dropzone"
       value={items}
-      onChange={setItems}
+      onValueChange={setItems}
       accept=".pdf,.xlsx"
       maxCount={10}
       maxSizeBytes={20 * 1024 * 1024}
@@ -3948,7 +4021,7 @@ export function AvatarField() {
 
   return (
     <>
-      <input type="file" accept="image/*" onChange={handleFileChange} />
+      <input type="file" accept="image/*" onValueChange={handleFileChange} />
       <UploadCropDialog
         open={cropFile !== null}
         onOpenChange={(open) => { if (!open) setCropFile(null); }}
@@ -4004,7 +4077,7 @@ export function AvatarField() {
       }
     ],
     usage: [
-      "DO wrap in FormField when a label or validation message is needed \u2014 pass the same id to both FormField and ColorPicker so htmlFor wires up correctly: `<FormField id='brand' label='Brand color'><ColorPicker id='brand' value={v} onChange={setV} /></FormField>`.",
+      "DO wrap in FormField when a label or validation message is needed \u2014 pass the same id to both FormField and ColorPicker so htmlFor wires up correctly: `<FormField id='brand' label='Brand color'><ColorPicker id='brand' value={v} onValueChange={setV} /></FormField>`.",
       "DO use controlled mode (value + onChange) \u2014 there is no defaultValue/uncontrolled path; always supply value.",
       "DON'T pass an invalid or empty string to value \u2014 the component will flash the invalid color on the preview swatch. Always initialize state to a valid 3- or 6-digit hex (e.g. '#2563eb').",
       "The hex Input is a live draft field \u2014 onChange is NOT called until the user presses Enter or blurs; only then is the value validated and the parent notified. Do not rely on onChange firing on every keystroke.",
@@ -4034,7 +4107,7 @@ export function BrandColorField() {
       <ColorPicker
         id="brand-color"
         value={color}
-        onChange={setColor}
+        onValueChange={setColor}
       />
     </FormField>
   );
@@ -4043,7 +4116,7 @@ export function BrandColorField() {
 // Compact swatch-only variant (no hex input)
 export function SwatchOnly() {
   const [color, setColor] = useState("#16a34a");
-  return <ColorPicker value={color} onChange={setColor} showHexInput={false} />;
+  return <ColorPicker value={color} onValueChange={setColor} showHexInput={false} />;
 }
 
 // Disabled state
@@ -4976,7 +5049,7 @@ export function ControlledExample() {
       name="permissions"
       options={PERMISSIONS}
       value={selected}
-      onChange={setSelected}
+      onValueChange={setSelected}
     />
   );
 }`,
@@ -5213,7 +5286,7 @@ function LegacyAccountPicker({ value, onChange }) {
   return (
     <SearchSelect
       value={value}
-      onChange={onChange}
+      onValueChange={onChange}
       options={[
         { value: "acc-001", label: "Cash", sublabel: "Current assets", group: "Assets" },
         { value: "acc-002", label: "Accounts Receivable", group: "Assets" },
@@ -5237,7 +5310,7 @@ function LegacyVendorPicker({ value, currentVendorName, onChange }) {
   return (
     <SearchSelect
       value={value}
-      onChange={onChange}
+      onValueChange={onChange}
       loadOptions={fetchVendors}
       selectedLabel={currentVendorName}
       placeholder="Select vendor"
@@ -5326,7 +5399,7 @@ import { Autocomplete } from "@godxjp/ui/data-entry";
 
 // \u2705 Replace with:
 // import { Select } from "@godxjp/ui/data-entry";
-// <Select options={options} showSearch placeholder="Search\u2026" onChange={setValue} value={value} />
+// <Select options={options} showSearch placeholder="Search\u2026" onValueChange={setValue} value={value} />
 
 // Legacy usage (backward compat only):
 import { Autocomplete } from "@godxjp/ui/data-entry";
@@ -5840,10 +5913,10 @@ export function LegacyInvoiceHeader() {
     ],
     useCases: [
       "App shell / top-nav language switcher that persists the user's locale preference via AppProvider and localStorage without any extra state.",
-      "Settings page 'Language' field where locale is part of a form submitted to the backend \u2014 use controlled mode: value={form.locale} onChange={(v) => form.setLocale(v)}.",
+      "Settings page 'Language' field where locale is part of a form submitted to the backend \u2014 use controlled mode: value={form.locale} onValueChange={(v) => form.setLocale(v)}.",
       "Onboarding wizard step that lets the user pick their language before the rest of the app is configured \u2014 mount with AppProvider persist={false} and a controlled value to keep state local to the wizard.",
       "Admin user-profile form where locale is one of several preferences (alongside timezone and date/time format) \u2014 pair with TimezonePicker, DateFormatPicker, TimeFormatPicker under the same AppProvider.",
-      "Storybook / test harness where AppProvider is not present \u2014 render in fully controlled mode: <LocalePicker value='en' onChange={fn} />.",
+      "Storybook / test harness where AppProvider is not present \u2014 render in fully controlled mode: <LocalePicker value='en' onValueChange={fn} />.",
       "Localization QA tool that cycles through locales programmatically \u2014 drive via controlled value to switch the UI language without user interaction."
     ],
     related: [
@@ -5875,7 +5948,7 @@ export function LocaleField() {
   return (
     <div className="flex flex-col gap-1.5">
       <label htmlFor="locale-picker">Language</label>
-      <LocalePicker id="locale-picker" value={locale} onChange={setLocale} />
+      <LocalePicker id="locale-picker" value={locale} onValueChange={setLocale} />
     </div>
   );
 }\`}`,
@@ -5916,7 +5989,7 @@ export function LocaleField() {
     ],
     usage: [
       "DO: Wrap with <AppProvider> and omit value/onChange \u2014 the picker reads and writes context automatically. This is the canonical zero-prop usage: <TimezonePicker />.",
-      "DO: Pass value + onChange for fully controlled standalone usage (e.g. a form field that posts the timezone string): <TimezonePicker value={tz} onChange={setTz} />. AppProvider is not required in this mode.",
+      "DO: Pass value + onChange for fully controlled standalone usage (e.g. a form field that posts the timezone string): <TimezonePicker value={tz} onValueChange={setTz} />. AppProvider is not required in this mode.",
       "DON'T: Omit BOTH AppProvider context AND controlled props \u2014 the component throws at runtime: 'TimezonePicker requires <AppProvider> or controlled value + onChange'.",
       "DO: Pass options={['Asia/Tokyo', 'UTC']} to restrict the list. The current value is automatically prepended if it is missing from the list, so the picker never shows an empty/invalid selection.",
       "DON'T: Hand-roll a timezone <select> or a custom combobox \u2014 TimezonePicker already handles locale-aware labels (translated city + GMT offset), the full IANA list, and ARIA semantics.",
@@ -5945,7 +6018,7 @@ export function TimezoneField() {
   return (
     <TimezonePicker
       value={tz}
-      onChange={setTz}
+      onValueChange={setTz}
       options={["Asia/Tokyo", "Asia/Ho_Chi_Minh", "UTC"]}
     />
   );
@@ -6053,7 +6126,7 @@ export function ExportDialog() {
   return (
     <div className="flex items-center gap-2">
       <label htmlFor="export-fmt">Export date format</label>
-      <DateFormatPicker id="export-fmt" value={fmt} onChange={setFmt} />
+      <DateFormatPicker id="export-fmt" value={fmt} onValueChange={setFmt} />
     </div>
   );
 }\`}`,
@@ -6093,7 +6166,7 @@ export function ExportDialog() {
     ],
     usage: [
       "DO use inside <AppProvider> with no extra props to let it read/write the global time-format automatically: <AppProvider defaultTimeFormat='24h'><TimeFormatPicker /></AppProvider>",
-      "DO switch to fully controlled mode when you need to manage the value yourself \u2014 supply BOTH value and onChange, or the component will throw: <TimeFormatPicker value={fmt} onChange={setFmt} />",
+      "DO switch to fully controlled mode when you need to manage the value yourself \u2014 supply BOTH value and onChange, or the component will throw: <TimeFormatPicker value={fmt} onValueChange={setFmt} />",
       "DON'T omit both AppProvider and controlled props \u2014 the component throws an Error at render time: 'TimeFormatPicker requires <AppProvider> or controlled value + onChange'. There is no silent fallback.",
       "DON'T hand-roll a time-format <select> \u2014 the locale-aware labels (e.g. '24 gi\u1EDD' for vi, '24-hour' for en) are generated internally from the i18n layer; reinventing this loses those translations.",
       "DO wire a <label htmlFor={id}> when using the id prop for accessibility; the SelectTrigger already sets aria-label from i18n but a visible label improves discoverability.",
@@ -6136,7 +6209,7 @@ export function SettingsForm() {
   return (
     <div>
       <label htmlFor="time-fmt">Time format</label>
-      <TimeFormatPicker id="time-fmt" value={fmt} onChange={setFmt} />
+      <TimeFormatPicker id="time-fmt" value={fmt} onValueChange={setFmt} />
     </div>
   );
 }\`}
@@ -6449,7 +6522,11 @@ export function InvoiceListHeader() {
     group: "data-display",
     tagline: "Radix Avatar wrapper with image and fallback slots for users, teams, and entities.",
     props: [
-      { name: "children", type: "ReactNode", description: "Compose AvatarImage and AvatarFallback." },
+      {
+        name: "children",
+        type: "ReactNode",
+        description: "Compose AvatarImage and AvatarFallback."
+      },
       { name: "className", type: "string", description: "Extra classes on the avatar root." }
     ],
     usage: [
@@ -6472,11 +6549,28 @@ export function InvoiceListHeader() {
     group: "layout",
     tagline: "Radix Separator wrapper for tokenized horizontal or vertical dividers.",
     props: [
-      { name: "orientation", type: '"horizontal" | "vertical"', defaultValue: '"horizontal"', description: "Divider direction." },
-      { name: "decorative", type: "boolean", defaultValue: "true", description: "Whether the separator is decorative for assistive tech." }
+      {
+        name: "orientation",
+        type: '"horizontal" | "vertical"',
+        defaultValue: '"horizontal"',
+        description: "Divider direction."
+      },
+      {
+        name: "decorative",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Whether the separator is decorative for assistive tech."
+      }
+    ],
+    usage: [
+      "DO use Separator for section dividers instead of raw border divs.",
+      "DO set orientation='vertical' only when the parent gives it a stable height."
+    ],
+    useCases: [
+      "Separating toolbar groups",
+      "Dividing stacked page sections",
+      "Vertical split between metadata groups"
     ],
-    usage: ["DO use Separator for section dividers instead of raw border divs.", "DO set orientation='vertical' only when the parent gives it a stable height."],
-    useCases: ["Separating toolbar groups", "Dividing stacked page sections", "Vertical split between metadata groups"],
     related: ["Stack \u2014 use for vertical spacing without a visible rule."],
     example: `import { Separator } from "@godxjp/ui/layout";
 
@@ -6491,8 +6585,15 @@ export function InvoiceListHeader() {
     props: [
       { name: "className", type: "string", description: "Size and layout classes for the block." }
     ],
-    usage: ["DO use Skeleton for a custom block when SkeletonRows/Table/Card do not match the final layout.", "DON'T use a spinner overlay for skeletonable page content."],
-    useCases: ["Single loading line", "Custom card media placeholder", "Inline metadata placeholder"],
+    usage: [
+      "DO use Skeleton for a custom block when SkeletonRows/Table/Card do not match the final layout.",
+      "DON'T use a spinner overlay for skeletonable page content."
+    ],
+    useCases: [
+      "Single loading line",
+      "Custom card media placeholder",
+      "Inline metadata placeholder"
+    ],
     related: ["SkeletonRows", "SkeletonTable", "SkeletonCard"],
     example: `import { Skeleton } from "@godxjp/ui/feedback";
 
@@ -6506,11 +6607,28 @@ export function InvoiceListHeader() {
     tagline: "Radix Toggle wrapper with default/outline variants and tokenized sizes.",
     props: [
       { name: "pressed", type: "boolean", description: "Controlled pressed state." },
-      { name: "onPressedChange", type: "(pressed: boolean) => void", description: "Pressed-state callback." },
-      { name: "variant", type: '"default" | "outline"', defaultValue: '"default"', description: "Visual style." },
-      { name: "size", type: '"sm" | "default" | "lg"', defaultValue: '"default"', description: "Control size." }
+      {
+        name: "onPressedChange",
+        type: "(pressed: boolean) => void",
+        description: "Pressed-state callback."
+      },
+      {
+        name: "variant",
+        type: '"default" | "outline"',
+        defaultValue: '"default"',
+        description: "Visual style."
+      },
+      {
+        name: "size",
+        type: '"sm" | "default" | "lg"',
+        defaultValue: '"default"',
+        description: "Control size."
+      }
+    ],
+    usage: [
+      "DO provide an accessible label when the toggle only contains an icon.",
+      "DON'T use Toggle for multi-option selection; use ToggleGroup."
     ],
-    usage: ["DO provide an accessible label when the toggle only contains an icon.", "DON'T use Toggle for multi-option selection; use ToggleGroup."],
     useCases: ["Bold/italic toolbar buttons", "Pinned filter toggles", "Compact view mode buttons"],
     related: ["ToggleGroup", "Button"],
     example: `import { Toggle } from "@godxjp/ui/data-entry";
@@ -6524,11 +6642,23 @@ export function InvoiceListHeader() {
     group: "data-entry",
     tagline: "Radix ToggleGroup wrapper for single or multiple toggle selection.",
     props: [
-      { name: "type", type: '"single" | "multiple"', required: true, description: "Selection mode." },
+      {
+        name: "type",
+        type: '"single" | "multiple"',
+        required: true,
+        description: "Selection mode."
+      },
       { name: "value", type: "string | string[]", description: "Controlled selected value(s)." },
-      { name: "onValueChange", type: "(value: string | string[]) => void", description: "Selection callback." }
+      {
+        name: "onValueChange",
+        type: "(value: string | string[]) => void",
+        description: "Selection callback."
+      }
+    ],
+    usage: [
+      "DO choose type='single' for mutually exclusive toolbar modes.",
+      "DO choose type='multiple' for independent formatting toggles."
     ],
-    usage: ["DO choose type='single' for mutually exclusive toolbar modes.", "DO choose type='multiple' for independent formatting toggles."],
     useCases: ["Text alignment selector", "Formatting toolbar", "View density switcher"],
     related: ["Toggle", "RadioGroup"],
     example: `import { ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
@@ -6544,10 +6674,18 @@ export function InvoiceListHeader() {
     group: "layout",
     tagline: "Radix AspectRatio wrapper for stable media and preview frames.",
     props: [
-      { name: "ratio", type: "number", defaultValue: "16 / 9", description: "Width divided by height." },
+      {
+        name: "ratio",
+        type: "number",
+        defaultValue: "16 / 9",
+        description: "Width divided by height."
+      },
       { name: "children", type: "ReactNode", description: "Content constrained to the ratio." }
     ],
-    usage: ["DO use AspectRatio for media, maps, charts, or previews that must not jump during load.", "DON'T use it for unconstrained text content."],
+    usage: [
+      "DO use AspectRatio for media, maps, charts, or previews that must not jump during load.",
+      "DON'T use it for unconstrained text content."
+    ],
     useCases: ["Video embed frame", "Image preview slot", "Dashboard chart placeholder"],
     related: ["CardCover", "Skeleton"],
     example: `import { AspectRatio } from "@godxjp/ui/layout";
@@ -6555,6 +6693,229 @@ export function InvoiceListHeader() {
 <AspectRatio ratio={16 / 9}>...</AspectRatio>`,
     storyPath: "layout/AspectRatio.stories.tsx",
     rules: [2, 3]
+  },
+  {
+    name: "Accordion",
+    group: "data-display",
+    tagline: "Radix accordion \u2014 vertically stacked, collapsible sections. Compose Accordion > AccordionItem > AccordionTrigger + AccordionContent.",
+    props: [
+      {
+        name: "type",
+        type: '"single" | "multiple"',
+        required: true,
+        description: "single = one open at a time; multiple = independent."
+      },
+      {
+        name: "collapsible",
+        type: "boolean",
+        description: "When type=single, allow closing the open item."
+      },
+      { name: "value", type: "string | string[]", description: "Controlled open item(s)." },
+      {
+        name: "defaultValue",
+        type: "string | string[]",
+        description: "Uncontrolled initial open item(s)."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: string | string[]) => void",
+        description: "Open-state callback."
+      }
+    ],
+    usage: [
+      'DO compose the full set: <Accordion type="single" collapsible><AccordionItem value="a"><AccordionTrigger/><AccordionContent/></AccordionItem></Accordion>.',
+      "DO give each AccordionItem a unique `value`.",
+      "DON'T use it for primary navigation \u2014 that's Sidebar/Tabs. Accordion is for collapsible content/FAQ."
+    ],
+    useCases: [
+      "FAQ lists",
+      "Grouped settings sections",
+      "Collapsible detail panels on a record page",
+      "Filter facet groups in a sidebar"
+    ],
+    related: [
+      "Collapsible (single open/close region, no item set)",
+      "Tabs (mutually-exclusive views, always one visible)"
+    ],
+    example: `import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@godxjp/ui/data-display";
+
+<Accordion type="single" collapsible>
+  <AccordionItem value="ship">
+    <AccordionTrigger>\u914D\u9001\u306B\u3064\u3044\u3066</AccordionTrigger>
+    <AccordionContent>3\u301C5\u55B6\u696D\u65E5\u3067\u304A\u5C4A\u3051\u3057\u307E\u3059\u3002</AccordionContent>
+  </AccordionItem>
+</Accordion>`,
+    storyPath: "data-display/Accordion.stories.tsx",
+    rules: [3, 6]
+  },
+  {
+    name: "HoverCard",
+    group: "data-display",
+    tagline: "Radix hover card \u2014 a rich popover shown on hover/focus of a trigger (for sighted-pointer affordances; not a replacement for Tooltip's short text).",
+    props: [
+      {
+        name: "openDelay",
+        type: "number",
+        defaultValue: "700",
+        description: "ms before opening on hover."
+      },
+      {
+        name: "closeDelay",
+        type: "number",
+        defaultValue: "300",
+        description: "ms before closing."
+      },
+      { name: "open", type: "boolean", description: "Controlled open state." },
+      {
+        name: "onOpenChange",
+        type: "(open: boolean) => void",
+        description: "Open-state callback."
+      }
+    ],
+    usage: [
+      "DO compose HoverCard > HoverCardTrigger > HoverCardContent.",
+      "DO use for RICH preview content (a card, avatar + bio); for short plain-text hints use Tooltip.",
+      "DON'T rely on it for essential info \u2014 hover isn't available on touch; provide the same content on click/tap elsewhere."
+    ],
+    useCases: [
+      "User/profile preview on @mention hover",
+      "Entity preview (customer/account) on a table cell",
+      "Glossary term definitions",
+      "Commit/PR preview links"
+    ],
+    related: [
+      "Tooltip (short text label, not rich content)",
+      "Popover (click-triggered, interactive content)"
+    ],
+    example: `import { HoverCard, HoverCardTrigger, HoverCardContent } from "@godxjp/ui/data-display";
+
+<HoverCard>
+  <HoverCardTrigger>@yamada</HoverCardTrigger>
+  <HoverCardContent>\u5C71\u7530\u592A\u90CE \u2014 \u7D4C\u7406\u90E8</HoverCardContent>
+</HoverCard>`,
+    storyPath: "data-display/HoverCard.stories.tsx",
+    rules: [3, 6]
+  },
+  {
+    name: "PasswordInput",
+    group: "data-entry",
+    tagline: "Input for passwords with a built-in show/hide eye toggle. Accepts all Input props except `type`.",
+    props: [
+      {
+        name: "value",
+        type: "string",
+        description: "Controlled value (or use defaultValue/uncontrolled)."
+      },
+      { name: "name", type: "string", description: "Form field name for native submission." },
+      { name: "placeholder", type: "string", description: "Placeholder text." },
+      { name: "disabled", type: "boolean", description: "Disables the field + toggle." }
+    ],
+    usage: [
+      'DO use for any password / secret field instead of `<Input type="password">` so users get the show/hide affordance.',
+      'DO pass `name` + `autoComplete="current-password"|"new-password"` for correct form/password-manager behavior.',
+      "DON'T add your own eye button \u2014 it's built in (and excluded from the tab order)."
+    ],
+    useCases: [
+      "Login password field",
+      "Sign-up / change-password forms (new-password)",
+      "API key / secret entry in settings"
+    ],
+    related: [
+      "Input (the base text field this wraps)",
+      "FormField (label + error wrapper around it)"
+    ],
+    example: `import { PasswordInput } from "@godxjp/ui/data-entry";
+
+<PasswordInput name="password" autoComplete="current-password" placeholder="\u30D1\u30B9\u30EF\u30FC\u30C9" />`,
+    storyPath: "data-entry/PasswordInput.stories.tsx",
+    rules: [3, 6]
+  },
+  {
+    name: "Drawer",
+    group: "feedback",
+    tagline: "Bottom-sheet (vaul) \u2014 a draggable sheet that slides up from the screen edge. DISTINCT from Sheet (the side panel); use Drawer for mobile/touch bottom sheets.",
+    props: [
+      { name: "open", type: "boolean", description: "Controlled open state." },
+      {
+        name: "onOpenChange",
+        type: "(open: boolean) => void",
+        description: "Open-state callback."
+      },
+      {
+        name: "shouldScaleBackground",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Scale the page behind the sheet (iOS-style)."
+      }
+    ],
+    usage: [
+      "DO compose Drawer > DrawerTrigger > DrawerContent (> DrawerHeader/DrawerTitle + body + DrawerFooter).",
+      "DO use Drawer for mobile/touch bottom sheets; use Sheet for a desktop side panel and Dialog for a centered modal.",
+      "DON'T confuse with Sheet \u2014 Sheet slides from a side edge, Drawer is the draggable bottom sheet."
+    ],
+    useCases: [
+      "Mobile action sheet / menu",
+      "Filter panel on small screens",
+      "Quick-create form on touch",
+      "Detail peek that drags up"
+    ],
+    related: [
+      "Sheet (side panel, same Radix Dialog base, different placement)",
+      "Dialog (centered modal)"
+    ],
+    example: `import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle } from "@godxjp/ui/feedback";
+
+<Drawer>
+  <DrawerTrigger>\u7D5E\u308A\u8FBC\u307F</DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader><DrawerTitle>\u7D5E\u308A\u8FBC\u307F</DrawerTitle></DrawerHeader>
+    {/* filters */}
+  </DrawerContent>
+</Drawer>`,
+    storyPath: "feedback/Drawer.stories.tsx",
+    rules: [3, 6, 24]
+  },
+  {
+    name: "InputOTP",
+    group: "data-entry",
+    tagline: "One-time-code / 2FA input (input-otp) \u2014 N single-character slots that behave as one field. Compose InputOTP > InputOTPGroup > InputOTPSlot.",
+    props: [
+      {
+        name: "maxLength",
+        type: "number",
+        required: true,
+        description: "Number of slots (e.g. 6)."
+      },
+      { name: "value", type: "string", description: "Controlled value." },
+      {
+        name: "onChange",
+        type: "(value: string) => void",
+        description: "Value callback (this is a true text input \u2014 onChange is the DOM-style value handler here)."
+      },
+      { name: "pattern", type: "string", description: "Allowed-char regex (e.g. digits only)." }
+    ],
+    usage: [
+      "DO set `maxLength` to the code length and render that many InputOTPSlot with sequential `index`.",
+      "DO wrap slots in InputOTPGroup; use InputOTPSeparator between groups (e.g. 3 + 3).",
+      "DON'T build N separate Inputs \u2014 this is ONE field with paste, arrow-key, and caret handling built in."
+    ],
+    useCases: [
+      "2FA / OTP verification code",
+      "Email / SMS confirmation code",
+      "PIN entry",
+      "Invite / redemption code"
+    ],
+    related: ["Input (a normal single text field)", "PasswordInput (masked secret field)"],
+    example: `import { InputOTP, InputOTPGroup, InputOTPSlot } from "@godxjp/ui/data-entry";
+
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} /><InputOTPSlot index={1} /><InputOTPSlot index={2} />
+    <InputOTPSlot index={3} /><InputOTPSlot index={4} /><InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>`,
+    storyPath: "data-entry/InputOTP.stories.tsx",
+    rules: [3, 6]
   }
 ];
 function findComponent(name) {
@@ -6568,194 +6929,85 @@ function componentsByGroup(group) {
 // src/data/prop-vocabulary.ts
 var PROP_VOCABULARY = [
   {
-    name: "SizeProp",
-    concept: "Dimensional scale for most primitives.",
-    values: ["small", "default", "large"],
-    usedBy: [
-      "InputSize",
-      "CheckboxGroupSize",
-      "ColorPickerSize",
-      "MediaUploadSize",
-      "ProgressSize",
-      "RadioGroupSize",
-      "RateSize",
-      "TransferSize",
-      "SegmentedControlSize (subset)",
-      "SpaceSize (+ number)",
-      "FlexGap (+ number)",
-      "GridGap (+ number)",
-      "MasonryGap (+ number)"
-    ]
-  },
-  {
-    name: "SizeWithXSProp",
-    concept: 'Extension of `SizeProp` with `"x-small"` for compact icon-bar / table-row contexts.',
-    values: ["x-small", "small", "default", "large"],
-    usedBy: ["ButtonSize"]
+    name: "ValueProp<T = string>",
+    concept: "Abstract controlled value.",
+    values: ["generic"],
+    usedBy: ["CheckboxGroup", "Upload", "Cascader", "TreeSelect", "Tabs", "SearchSelect"]
   },
   {
-    name: "IconSizeProp",
-    concept: "Icon-symbol shaped primitives (visual axis = glyph size, not height).",
-    values: ["sm", "md", "lg"],
-    usedBy: ["SpinnerSize", "IconButtonSize"]
+    name: "DefaultValueProp<T = string>",
+    concept: "Abstract uncontrolled initial value.",
+    values: ["generic"],
+    usedBy: ["CheckboxGroup", "Upload", "Cascader", "TreeSelect", "Tabs"]
   },
   {
-    name: "StatusProp",
-    concept: "Form-field validation state.",
-    values: ["default", "error", "warning", "success"],
-    usedBy: ["InputStatus"],
-    notes: 'Form errors use `"error"` (not `"destructive"`) \u2014 different concern from destructive actions.'
+    name: "OnValueChangeProp<T = string>",
+    concept: "Callback for abstract value changes. DOM events continue to use onChange.",
+    values: ["(value: T) => void"],
+    usedBy: ["CheckboxGroup", "Upload", "Cascader", "TreeSelect", "Transfer", "settings pickers"]
   },
   {
-    name: "ToneProp",
-    concept: "Same values as StatusProp \u2014 name chosen when describing surface colouring rather than validation.",
-    values: ["default", "error", "warning", "success"],
-    usedBy: ["(alias of StatusProp)"]
-  },
-  {
-    name: "HelpToneProp",
-    concept: "Help-line / Alert colour ladder. Adds `info` + `warn` to StatusProp.",
-    values: ["default", "info", "warn", "error", "success"],
-    usedBy: ["FieldHelpTone"]
-  },
-  {
-    name: "OrientationProp",
-    concept: "Layout axis.",
-    values: ["horizontal", "vertical"],
-    usedBy: [
-      "AnchorOrientation",
-      "MenuOrientation",
-      "RadioGroupOrientation",
-      "CheckboxGroupOrientation",
-      "SegmentedControlOrientation",
-      "StepsOrientation",
-      "TabsOrientation"
-    ]
+    name: "OpenProp / DefaultOpenProp / OnOpenChangeProp",
+    concept: "Disclosure state.",
+    values: ["boolean", "(open: boolean) => void"],
+    usedBy: ["Dialog", "Sheet", "Popover"]
   },
   {
-    name: "DensityProp",
-    concept: "Internal row-height / padding scale (distinct from SizeProp \u2014 density rescales chrome, size rescales the primitive's own visual axis).",
-    values: ["compact", "default", "comfortable"],
-    usedBy: ["TreeDensity", "TableDensity"]
-  },
-  {
-    name: "SideProp",
-    concept: "Edge a floating panel docks against.",
-    values: ["top", "right", "bottom", "left"],
-    usedBy: ["SheetSide", "TabsPlacement", "TableStickySide (subset)"]
-  },
-  {
-    name: "PlacementProp",
-    concept: "Extension of SideProp with a centred anchor (Tabs placement, Tour spotlight).",
-    values: ["top", "right", "bottom", "left", "center"],
-    usedBy: ["TourPlacement"]
-  },
-  {
-    name: "PaddingProp",
-    concept: "Outer gutter scale for surface containers.",
-    values: ["tight", "default", "cozy", "none"],
-    usedBy: ["CardPadding", "PageHeaderPadding", "PageContentPadding"]
+    name: "SizeProp",
+    concept: "Shared public size names.",
+    values: ["xs", "sm", "md", "lg"],
+    usedBy: ["Button", "Steps", "Switch"],
+    notes: "Component-specific subsets must be documented. Old alias small is sm."
   },
   {
-    name: "AlignProp",
-    concept: "CSS-flexbox cross-axis alignment ladder.",
-    values: ["start", "end", "center", "stretch", "baseline"],
-    usedBy: ["FlexAlign"]
+    name: "ToneProp",
+    concept: "Semantic status/color intent.",
+    values: ["default", "success", "warning", "destructive", "info", "muted", "neutral"],
+    usedBy: ["Badge", "Alert"],
+    notes: "Status values belong in tone, not variant."
   },
   {
-    name: "ColorProp",
-    concept: "Full semantic palette \u2014 every CSS variable slot.",
-    values: ["default", "info", "success", "warning", "destructive", "attention", "primary", "secondary"],
-    usedBy: ["TagPresetColor (\u2212 secondary)", "TimelineColor (\u2212 secondary)", "SpinnerTone (+ muted)"],
-    notes: "Each value maps 1:1 to a CSS variable (`--info`, `--success`, `--warning`, `--destructive`, `--attention`, `--primary`, `--secondary`). The `data-accent` axis rebinds `--primary`'s hue without renaming the slot."
+    name: "GapProp",
+    concept: "Shared layout gap scale.",
+    values: ["xs", "sm", "md", "lg", "xl"],
+    usedBy: ["Stack", "Inline"],
+    notes: "Inline uses an Exclude<GapProp, 'xl'> subset."
   },
   {
-    name: "FeedbackColorProp",
-    concept: "Subset of ColorProp accepted by feedback primitives (no brand `primary` since they are themselves informational).",
-    values: ["default", "info", "success", "warning", "destructive"],
-    usedBy: ["AlertColor", "ResultColor", "ProgressColor"]
+    name: "TitleProp",
+    concept: "Primary heading text.",
+    values: ["React.ReactNode"],
+    usedBy: ["PageContainer", "PageHeader", "EmptyState", "Dialog"]
   },
   {
-    name: "LoadingProp",
-    concept: "Loading-state union \u2014 shared across Form / FormField / data-entry primitives.",
-    values: ["true", "false", '{ kind: "spinner" }', '{ kind: "skeleton" }', "{ kind, label }"],
-    usedBy: ["FormProps.loading", "FormFieldProps.loading"],
-    notes: 'Cascade: `<Form loading>` sets a default for every nested `<FormField>`. Per-field `loading` overrides Form\'s. `true` \u2192 spinner (default). `{ kind: "skeleton" }` \u2192 use for INITIAL fetch state. UX nuance: skeleton on init, spinner on save.'
+    name: "DensityProp",
+    concept: "Page/subtree density.",
+    values: ["compact", "default", "comfortable"],
+    usedBy: ["PageContainer"]
   }
 ];
 function findVocab(name) {
-  const normalized = name.trim().toLowerCase().replace(/prop$/i, "");
-  return PROP_VOCABULARY.find(
-    (v) => v.name.toLowerCase().replace(/prop$/i, "") === normalized
-  );
+  const normalized = name.trim().toLowerCase().replace(/prop(?:<.*>)?$/i, "");
+  return PROP_VOCABULARY.find((v) => v.name.toLowerCase().replace(/prop(?:<.*>)?$/i, "") === normalized);
 }
 
 // src/data/tokens.ts
 var TOKENS = [
-  // Color — semantic slots (rebound by `data-theme` + `data-accent`)
-  { name: "--background", category: "color", role: "Base surface", axis: "data-theme" },
-  { name: "--foreground", category: "color", role: "Base text", axis: "data-theme" },
-  { name: "--card", category: "color", role: "Card surface", axis: "data-theme" },
-  { name: "--popover", category: "color", role: "Popover / dropdown surface", axis: "data-theme" },
-  { name: "--popover-foreground", category: "color", role: "Popover text", axis: "data-theme" },
-  { name: "--primary", category: "color", role: "Brand accent (Buttons, links)", axis: "data-accent" },
-  { name: "--primary-foreground", category: "color", role: "Text on primary surface", axis: "data-accent" },
-  { name: "--secondary", category: "color", role: "Secondary surface / text dimming", axis: "data-theme" },
-  { name: "--accent", category: "color", role: "Hover / focus tint" },
-  { name: "--muted", category: "color", role: "Muted surface" },
-  { name: "--muted-foreground", category: "color", role: "Muted text" },
-  { name: "--border", category: "color", role: "Default border color", axis: "data-theme" },
-  { name: "--input", category: "color", role: "Input field border" },
-  { name: "--ring", category: "color", role: "Focus ring", axis: "data-accent" },
-  { name: "--success", category: "color", role: "Success semantic slot" },
-  { name: "--warning", category: "color", role: "Warning semantic slot" },
-  { name: "--destructive", category: "color", role: "Danger / destructive action slot" },
-  { name: "--info", category: "color", role: "Info / neutral notice slot" },
-  { name: "--attention", category: "color", role: "Attention / non-destructive alert slot" },
-  // Spacing — fixed scale
-  { name: "--spacing-1", category: "spacing", role: "4px", value: "0.25rem" },
-  { name: "--spacing-2", category: "spacing", role: "8px", value: "0.5rem" },
-  { name: "--spacing-3", category: "spacing", role: "12px", value: "0.75rem" },
-  { name: "--spacing-4", category: "spacing", role: "16px", value: "1rem" },
-  { name: "--spacing-5", category: "spacing", role: "20px", value: "1.25rem" },
-  { name: "--spacing-6", category: "spacing", role: "24px", value: "1.5rem" },
-  { name: "--spacing-8", category: "spacing", role: "32px", value: "2rem" },
-  // Typography — fixed scale
-  { name: "--text-2xs", category: "typography", role: "10px", value: "0.625rem" },
-  { name: "--text-xs", category: "typography", role: "12px", value: "0.75rem" },
-  { name: "--text-sm", category: "typography", role: "14px", value: "0.875rem" },
-  { name: "--text-base", category: "typography", role: "16px", value: "1rem" },
-  { name: "--text-lg", category: "typography", role: "18px", value: "1.125rem" },
-  { name: "--text-xl", category: "typography", role: "20px", value: "1.25rem" },
-  { name: "--text-2xl", category: "typography", role: "24px", value: "1.5rem" },
-  { name: "--font-mono", category: "typography", role: "Monospace stack" },
-  // Radius — fixed scale
-  { name: "--radius-sm", category: "radius", role: "Small (chips, inputs)", value: "0.25rem" },
-  { name: "--radius-md", category: "radius", role: "Medium (cards)", value: "0.5rem" },
-  { name: "--radius-lg", category: "radius", role: "Large (dialogs)", value: "0.75rem" },
-  { name: "--radius-full", category: "radius", role: "Pill / circle", value: "9999px" },
-  // Breakpoints — mobile-first min-widths
-  { name: "--breakpoint-xs", category: "breakpoint", role: "Mobile-first base (\u22650px)", value: "0" },
-  { name: "--breakpoint-sm", category: "breakpoint", role: "Phone landscape / tablet portrait", value: "640px" },
-  { name: "--breakpoint-md", category: "breakpoint", role: "Tablet landscape", value: "768px" },
-  { name: "--breakpoint-lg", category: "breakpoint", role: "Laptop", value: "1024px" },
-  { name: "--breakpoint-xl", category: "breakpoint", role: "Desktop", value: "1280px" },
-  { name: "--breakpoint-xxl", category: "breakpoint", role: "Wide desktop", value: "1536px" },
-  // Density — rebound by `data-density`
-  { name: "--density-element", category: "density", role: "Element height (Input/Button)", axis: "data-density" },
-  { name: "--density-element-sm", category: "density", role: "Small element", axis: "data-density" },
-  { name: "--density-element-lg", category: "density", role: "Large element", axis: "data-density" },
-  { name: "--density-card", category: "density", role: "Card padding", axis: "data-density" },
-  { name: "--density-page", category: "density", role: "Page (PageContent) padding", axis: "data-density" },
-  { name: "--density-section", category: "density", role: "Section padding (cozy variant)", axis: "data-density" },
-  { name: "--header-height", category: "density", role: "Topbar height", axis: "data-density" },
-  { name: "--sidebar-width", category: "density", role: "Sidebar width (expanded)", axis: "data-density" },
-  { name: "--sidebar-width-collapsed", category: "density", role: "Sidebar icon-only width", axis: "data-density" },
-  { name: "--touch-target-min", category: "density", role: "Mobile touch target (does NOT scale)", value: "44px" },
-  // Motion — fixed timings
-  { name: "--transition-base", category: "motion", role: "Standard transition duration", value: "200ms" },
-  { name: "--ease-out", category: "motion", role: "Out easing curve", value: "cubic-bezier(0, 0, 0.2, 1)" },
-  { name: "--ease-in-out", category: "motion", role: "In-out easing", value: "cubic-bezier(0.4, 0, 0.2, 1)" }
+  { name: "--wa-*", category: "primitive", tier: "primitive", role: "Neutral decorative Japanese accent primitives for charts/tags/decoration only." },
+  { name: "--chart-1..6", category: "primitive", tier: "primitive", role: "Neutral decorative chart primitives; @theme chart colors reference these tokens." },
+  { name: "--space-0..12", category: "primitive", tier: "primitive", role: "Raw spacing scale." },
+  { name: "--font-size-*", category: "primitive", tier: "primitive", role: "Raw typography scale." },
+  { name: "--primary", category: "semantic", tier: "semantic", role: "Brand/action color role." },
+  { name: "--success", category: "semantic", tier: "semantic", role: "Success status role." },
+  { name: "--warning", category: "semantic", tier: "semantic", role: "Warning status role." },
+  { name: "--destructive", category: "semantic", tier: "semantic", role: "Destructive/error status role." },
+  { name: "--info", category: "semantic", tier: "semantic", role: "Information status role." },
+  { name: "--attention", category: "semantic", tier: "semantic", role: "Attention status role." },
+  { name: "--badge-space-*", category: "component", tier: "component", role: "Badge spacing." },
+  { name: "--card-*", category: "component", tier: "component", role: "Card surface, border, spacing, and typography." },
+  { name: "--control-*", category: "component", tier: "component", role: "Shared form control heights, padding, icons, and focus chrome." },
+  { name: "--table-*", category: "component", tier: "component", role: "Table row/cell sizing." },
+  { name: "--dialog-* / --alert-* / --skeleton-*", category: "component", tier: "component", role: "Feedback component sizing and spacing." }
 ];
 function tokensByCategory(category) {
   return TOKENS.filter((t) => t.category === category);
@@ -6839,7 +7091,7 @@ var PATTERNS = [
 // 2) Badge renders grey with a \u25CB (no colour) for localized/tier labels
 //    Cause: it auto-maps only English lifecycle keys. (@godxjp/ui >= 6.1)
 // \u274C  <Badge status="\u30D7\u30EC\u30DF\u30A2\u30E0" />
-// \u2705  <Badge status="\u30D7\u30EC\u30DF\u30A2\u30E0" variant="success" icon={null} />   // tier \u2192 pill, no icon
+// \u2705  <Badge status="\u30D7\u30EC\u30DF\u30A2\u30E0" tone="success" icon={null} />   // tier \u2192 pill, no icon
 // \u2705  <Badge status="active">\u516C\u958B\u4E2D</Badge>                   // lifecycle \u2192 keep icon
 
 // 3) Table text collapses to one char per line, or a chip wraps
@@ -6990,11 +7242,11 @@ export function DeleteProjectDialog({ open, onOpenChange, slug }: { open: boolea
           <DialogDescription>\u3053\u306E\u64CD\u4F5C\u306F\u53D6\u308A\u6D88\u305B\u307E\u305B\u3093\u3002\u78BA\u8A8D\u306E\u305F\u3081\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u540D "{slug}" \u3068\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002</DialogDescription>
         </DialogHeader>
         <Stack gap="md">
-          <Input value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder={slug} />
+          <Input value={confirm} onValueChange={(e) => setConfirm(e.target.value)} placeholder={slug} />
         </Stack>
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>\u30AD\u30E3\u30F3\u30BB\u30EB</Button>
-          <Button variant="destructive" disabled={confirm !== slug} onClick={() => { toast.success("\u524A\u9664\u3057\u307E\u3057\u305F"); onOpenChange(false); }}>\u5B8C\u5168\u306B\u524A\u9664</Button>
+          <Button tone="destructive" disabled={confirm !== slug} onClick={() => { toast.success("\u524A\u9664\u3057\u307E\u3057\u305F"); onOpenChange(false); }}>\u5B8C\u5168\u306B\u524A\u9664</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -7060,7 +7312,7 @@ function Coupons({ coupons }: { coupons: Coupon[] }) {
   // ColumnDef = { key, header, render?, align?: "left"|"center"|"right", sortable?, width? }
   const columns: ColumnDef<Coupon>[] = [
     { key: "name", header: "\u30AF\u30FC\u30DD\u30F3\u540D", render: (c) => <span className="font-medium">{c.name}</span> },
-    { key: "scope", header: "\u30B9\u30B3\u30FC\u30D7", render: (c) => <Badge status={c.scope} variant="info" icon={null} /> },
+    { key: "scope", header: "\u30B9\u30B3\u30FC\u30D7", render: (c) => <Badge status={c.scope} tone="info" icon={null} /> },
     { key: "status", header: "\u30B9\u30C6\u30FC\u30BF\u30B9", render: (c) => <Badge status={c.status} /> },
     { key: "valid", header: "\u6709\u52B9\u671F\u9593", render: (c) => \`\${formatDate(c.validFrom)} \u301C \${formatDate(c.validTo)}\` },
     { key: "usage", header: "\u5229\u7528\u6570", align: "right", render: (c) => c.usage.toLocaleString() },
@@ -7102,7 +7354,7 @@ function Coupons({ coupons }: { coupons: Coupon[] }) {
           </Card>
 
           {filtered.length > PAGE_SIZE && (
-            <Pagination current={page} total={filtered.length} pageSize={PAGE_SIZE} showTotal onChange={(p) => setPage(p)} />
+            <Pagination current={page} total={filtered.length} pageSize={PAGE_SIZE} showTotal onValueChange={(p) => setPage(p)} />
           )}
         </Stack>
       </PageContainer>
@@ -7158,7 +7410,7 @@ function MemberShow({ id }: { id: string }) {
               {/* Descriptions is COMPOUND \u2014 value goes in children, not a prop */}
               <Descriptions columns={2}>
                 <Descriptions.Item label="\u6C0F\u540D">{member.name}</Descriptions.Item>
-                <Descriptions.Item label="\u30E9\u30F3\u30AF"><Badge status={member.rank} variant="info" icon={null} /></Descriptions.Item>
+                <Descriptions.Item label="\u30E9\u30F3\u30AF"><Badge status={member.rank} tone="info" icon={null} /></Descriptions.Item>
                 <Descriptions.Item label="\u30B9\u30C6\u30FC\u30BF\u30B9"><Badge status={member.status} /></Descriptions.Item>
                 <Descriptions.Item label="\u767B\u9332\u65E5">{formatDate(member.registeredAt)}</Descriptions.Item>
               </Descriptions>
@@ -7221,12 +7473,12 @@ const seeded = (n: number) => { const x = Math.sin((n + 1) * 99.71) * 1e4; retur
 <Badge status="active">\u516C\u958B\u4E2D</Badge>        // green \u2713 \u516C\u958B\u4E2D
 
 // 2) Unknown label \u2014 set tone explicitly (no icon, since the key is unknown):
-<Badge status="\u516C\u958B\u4E2D" variant="success" />
+<Badge status="\u516C\u958B\u4E2D" tone="success" />
 
 // 3) Tier / category \u2014 coloured pill, drop the misleading glyph with icon={null}:
-<Badge status="\u30D7\u30EC\u30DF\u30A2\u30E0" variant="success" icon={null} />
-<Badge status="\u30B4\u30FC\u30EB\u30C9"   variant="warning" icon={null} />
-<Badge status="\u6CD5\u4EBA\u5171\u901A"   variant="info"    icon={null} />
+<Badge status="\u30D7\u30EC\u30DF\u30A2\u30E0" tone="success" icon={null} />
+<Badge status="\u30B4\u30FC\u30EB\u30C9"   tone="warning" icon={null} />
+<Badge status="\u6CD5\u4EBA\u5171\u901A"   tone="info"    icon={null} />
 
 // tone: "success" | "warning" | "destructive" | "info" | "neutral"  (import type BadgeTone)
 // RULE: a chip never wraps \u2014 it is pinned white-space: nowrap, so it stays one line in
@@ -9075,11 +9327,10 @@ function getTokens(cat) {
   for (const [c, items] of Object.entries(grouped)) {
     out += `## ${c}
 
-| Name | Role | Value | Axis |
-|---|---|---|---|
+| Name | Role | Tier |
+|---|---|---|
 `;
-    for (const t of items)
-      out += `| \`${t.name}\` | ${t.role} | ${t.value ?? "\u2014"} | ${t.axis ?? "\u2014"} |
+    for (const t of items) out += `| \`${t.name}\` | ${t.role} | ${t.tier} |
 `;
     out += "\n";
   }