@godxjp/ui-mcp 0.9.0 → 0.10.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.",
@@ -1224,7 +1293,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 +1305,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 +1425,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 +1744,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 +1787,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 +1985,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 +2004,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 +2030,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 +2153,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 +2389,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 +2534,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 +2542,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 +2557,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 +2878,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 +2924,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 +3179,7 @@ export function ShiftStartField() {
         id="shift-start"
         name="shift_start"
         value={startTime}
-        onChange={setStartTime}
+        onValueChange={setStartTime}
         minuteStep={15}
         className="w-36"
       />
@@ -3230,7 +3299,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 +3455,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 +3471,7 @@ function MultiRegionPicker() {
       options={REGIONS}
       multiple
       value={paths}
-      onChange={(v) => setPaths(v as string[][])}
+      onValueChange={(v) => setPaths(v as string[][])}
       showSearch
     />
   );
@@ -3419,7 +3488,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 +3651,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 +3669,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 +3742,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 +3781,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 +3911,7 @@ export function AvatarUploadForm() {
       <Upload
         variant="avatar-crop"
         value={items}
-        onChange={setItems}
+        onValueChange={setItems}
         onUpload={handleUpload}
         maxSizeBytes={5 * 1024 * 1024}
       />
@@ -3859,7 +3928,7 @@ export function DocumentUploadDropzone() {
     <Upload
       variant="dropzone"
       value={items}
-      onChange={setItems}
+      onValueChange={setItems}
       accept=".pdf,.xlsx"
       maxCount={10}
       maxSizeBytes={20 * 1024 * 1024}
@@ -3948,7 +4017,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 +4073,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 +4103,7 @@ export function BrandColorField() {
       <ColorPicker
         id="brand-color"
         value={color}
-        onChange={setColor}
+        onValueChange={setColor}
       />
     </FormField>
   );
@@ -4043,7 +4112,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 +5045,7 @@ export function ControlledExample() {
       name="permissions"
       options={PERMISSIONS}
       value={selected}
-      onChange={setSelected}
+      onValueChange={setSelected}
     />
   );
 }`,
@@ -5213,7 +5282,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 +5306,7 @@ function LegacyVendorPicker({ value, currentVendorName, onChange }) {
   return (
     <SearchSelect
       value={value}
-      onChange={onChange}
+      onValueChange={onChange}
       loadOptions={fetchVendors}
       selectedLabel={currentVendorName}
       placeholder="Select vendor"
@@ -5326,7 +5395,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 +5909,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 +5944,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 +5985,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 +6014,7 @@ export function TimezoneField() {
   return (
     <TimezonePicker
       value={tz}
-      onChange={setTz}
+      onValueChange={setTz}
       options={["Asia/Tokyo", "Asia/Ho_Chi_Minh", "UTC"]}
     />
   );
@@ -6053,7 +6122,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 +6162,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 +6205,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>
   );
 }\`}
@@ -6568,194 +6637,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 +6799,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 +6950,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 +7020,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 +7062,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 +7118,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 +7181,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