@godxjp/ui 7.0.0 → 8.1.0

package/dist/styles/layout.css

@@ -1,6 +1,6 @@
 /*
- * LAYOUT — Stack / Inline / Page shell / EmptyState.
- * Apps: <Stack gap> · <Inline gap> · <PageContainer> — never ui-stack-* or Tailwind gap-*.
+ * LAYOUT — Flex / Page shell / EmptyState.
+ * Apps: <Flex gap> · <PageContainer> — never ui-flex-* or Tailwind gap-*.
  */
 
 @layer components {
@@ -23,26 +23,102 @@
     overflow: hidden;
   }
 
+  .ui-flex,
   .ui-stack-xs {
     display: flex;
+  }
+
+  .ui-flex[data-direction="row"] {
+    flex-direction: row;
+  }
+
+  .ui-flex[data-direction="col"] {
     flex-direction: column;
+  }
+
+  .ui-flex[data-wrap="true"] {
+    flex-wrap: wrap;
+  }
+
+  .ui-flex[data-align="start"] {
+    align-items: flex-start;
+  }
+
+  .ui-flex[data-align="center"] {
+    align-items: center;
+  }
+
+  .ui-flex[data-align="end"] {
+    align-items: flex-end;
+  }
+
+  .ui-flex[data-align="stretch"] {
+    align-items: stretch;
+  }
+
+  .ui-flex[data-align="baseline"] {
+    align-items: baseline;
+  }
+
+  .ui-flex[data-justify="start"] {
+    justify-content: flex-start;
+  }
+
+  .ui-flex[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .ui-flex[data-justify="end"] {
+    justify-content: flex-end;
+  }
+
+  .ui-flex[data-justify="between"] {
+    justify-content: space-between;
+  }
+
+  .ui-flex[data-justify="around"] {
+    justify-content: space-around;
+  }
+
+  .ui-flex[data-justify="evenly"] {
+    justify-content: space-evenly;
+  }
+
+  .ui-flex-gap-xs,
+  .ui-stack-xs {
     gap: var(--space-stack-xs);
   }
+  .ui-flex-gap-sm {
+    gap: var(--space-stack-sm);
+  }
+
   .ui-stack-sm {
     display: flex;
     flex-direction: column;
     gap: var(--space-stack-sm);
   }
+  .ui-flex-gap-md {
+    gap: var(--space-stack-md);
+  }
+
   .ui-stack-md {
     display: flex;
     flex-direction: column;
     gap: var(--space-stack-md);
   }
+  .ui-flex-gap-lg {
+    gap: var(--space-stack-lg);
+  }
+
   .ui-stack-lg {
     display: flex;
     flex-direction: column;
     gap: var(--space-stack-lg);
   }
+  .ui-flex-gap-xl {
+    gap: var(--space-stack-xl);
+  }
+
   .ui-stack-xl {
     display: flex;
     flex-direction: column;
@@ -85,23 +161,20 @@
   }
 
   @container (min-width: 640px) {
-    .ui-responsive-grid[data-columns="2"] {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+    .ui-responsive-grid {
+      grid-template-columns: repeat(var(--responsive-grid-sm, 2), minmax(0, 1fr));
     }
+  }
 
-    .ui-responsive-grid[data-columns="3"],
-    .ui-responsive-grid[data-columns="4"] {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+  @container (min-width: 768px) {
+    .ui-responsive-grid {
+      grid-template-columns: repeat(var(--responsive-grid-md, 3), minmax(0, 1fr));
     }
   }
 
   @container (min-width: 1024px) {
-    .ui-responsive-grid[data-columns="3"] {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .ui-responsive-grid[data-columns="4"] {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+    .ui-responsive-grid {
+      grid-template-columns: repeat(var(--responsive-grid-lg, 4), minmax(0, 1fr));
     }
   }
 
@@ -149,6 +222,7 @@
     padding-right: var(--space-page-active-x);
   }
 
+  .ui-page-container-inset,
   .ui-page-inset {
     padding-left: var(--space-page-active-x);
     padding-right: var(--space-page-active-x);
@@ -306,7 +380,7 @@
     align-items: center;
     gap: var(--space-stack-md);
     text-align: center;
-    padding: var(--space-empty-state-y) var(--space-empty-state-x);
+    padding: var(--empty-state-space-y) var(--empty-state-space-x);
   }
 
   .ui-empty-state-title {
@@ -378,6 +452,7 @@
     font-variant-numeric: tabular-nums;
   }
 
+  .ui-toolbar,
   .ui-filter-bar {
     display: flex;
     flex-direction: column;
@@ -386,34 +461,40 @@
   }
 
   @media (min-width: 640px) {
+    .ui-toolbar,
     .ui-filter-bar {
       flex-flow: row wrap;
       align-items: flex-end;
     }
   }
 
+  .ui-toolbar-clear,
   .ui-filter-clear {
     width: 100%;
   }
 
   @media (min-width: 640px) {
+    .ui-toolbar-clear,
     .ui-filter-clear {
       width: auto;
       margin-left: auto;
     }
   }
 
+  .ui-toolbar-group,
   .ui-filter-group {
     min-width: 0;
     width: 100%;
   }
 
   @media (min-width: 640px) {
+    .ui-toolbar-group,
     .ui-filter-group {
       width: auto;
     }
   }
 
+  .ui-toolbar-label,
   .ui-filter-label {
     color: hsl(var(--muted-foreground));
     font-size: var(--filter-label-font-size);

package/dist/styles/table-layout.css

@@ -5,7 +5,7 @@
 @layer components {
   [data-slot="table-head"] {
     height: var(--table-row-height);
-    padding: var(--table-cell-padding-y) var(--space-table-cell-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
     text-align: left;
     vertical-align: middle;
     background: hsl(var(--secondary));
@@ -27,7 +27,7 @@
   }
 
   [data-slot="table-cell"] {
-    padding: var(--table-cell-padding-y) var(--space-table-cell-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
     vertical-align: middle;
     /* Don't let a narrow column crush cell text — in CJK this collapses to one
      * character per line. Keep each cell on one line; the scroll container
@@ -91,7 +91,7 @@
   }
 
   [data-slot="card-content"][data-flush] .ui-data-table-toolbar {
-    border-bottom: 1px solid hsl(var(--card-border-token));
+    border-bottom: 1px solid hsl(var(--card-border));
     padding: var(--card-space-header-y) var(--card-space-inset);
   }
 

package/dist/theme/example.service.css

@@ -19,11 +19,6 @@
   /* --info: 223 42% 50%; */
   /* --attention: 24 99% 46%; */
 
-  /* Tracking-code identity (optional — do not reuse for status): */
-  /* --tracking-internal: 211 73% 15%; */
-  /* --tracking-seller: 44 5% 42%; */
-  /* --tracking-yamato: 24 99% 46%; */
-
   /* Layout density (optional): */
   /* --space-page-x: var(--space-8); */
 

package/dist/tokens/base.css

@@ -4,10 +4,10 @@
  */
 
 @import "./foundation.css";
-@import "./primitives/layout.css";
-@import "./primitives/control.css";
-@import "./primitives/card.css";
-@import "./primitives/table.css";
-@import "./primitives/feedback.css";
-@import "./primitives/badge.css";
-@import "./primitives/navigation.css";
+@import "./semantic/layout.css";
+@import "./components/control.css";
+@import "./components/card.css";
+@import "./components/table.css";
+@import "./components/feedback.css";
+@import "./components/badge.css";
+@import "./components/navigation.css";

package/dist/tokens/components/badge.css

@@ -0,0 +1,7 @@
+/* Badge component tokens. */
+
+:root {
+  --badge-space-gap: var(--space-inline-xs);
+  --badge-space-x: var(--space-2);
+  --badge-space-y: var(--space-1);
+}

package/dist/tokens/{primitives → components}/card.css

@@ -1,4 +1,4 @@
-/* Card primitive tokens: card chrome derives from foundation + layout primitives. */
+/* Card component tokens: card chrome derives from semantic layout tokens. */
 
 :root {
   --card-space-inset: var(--space-section-active);
@@ -12,8 +12,7 @@
   --card-description-font-size: var(--font-size-sm);
   --card-description-line-height: var(--line-height-normal);
   --card-background: var(--card);
-  --card-foreground-token: var(--card-foreground);
-  --card-border-token: var(--border);
+  --card-border: var(--border);
   --card-header-background: var(--muted);
   --card-header-background-alpha: 0.55;
   --card-radius: var(--radius);

package/dist/tokens/{primitives → components}/control.css

@@ -24,6 +24,8 @@
   --control-focus-ring-width: 2px;
 
   --checkbox-size: 1rem;
+  --checkbox-size-compact: 0.875rem;
+  --checkbox-size-comfortable: 1.125rem;
   --choice-gap: var(--space-inline-sm);
   --choice-group-gap-x: var(--space-6);
   --choice-group-gap-y: var(--space-3);
@@ -31,9 +33,17 @@
   --choice-control-offset: 0.125rem;
 
   --switch-width: 2.25rem;
+  --switch-width-compact: 2rem;
+  --switch-width-comfortable: 2.5rem;
   --switch-height: 1.25rem;
+  --switch-height-compact: 1.125rem;
+  --switch-height-comfortable: 1.375rem;
   --switch-thumb-size: 1rem;
+  --switch-thumb-size-compact: 0.875rem;
+  --switch-thumb-size-comfortable: 1.125rem;
   --switch-thumb-translate: 1rem;
+  --switch-thumb-translate-compact: 0.875rem;
+  --switch-thumb-translate-comfortable: 1.125rem;
 
   --slider-track-height: 0.375rem;
   --slider-thumb-size: 1rem;

package/dist/tokens/components/feedback.css

@@ -0,0 +1,17 @@
+/* Feedback primitive tokens: dialog, alert, empty state. */
+
+:root {
+  --dialog-space-inset: var(--space-5);
+  --dialog-space-gap: var(--space-stack-md);
+  --dialog-close-space-offset: var(--space-4);
+  --alert-space-inset: var(--space-section-active);
+  --alert-space-gap: var(--space-inline-md);
+  --alert-inner-space-gap: var(--space-stack-sm);
+  --alert-dismiss-space-offset: var(--space-3);
+  --empty-state-space-y: var(--space-10);
+  --empty-state-space-x: var(--space-6);
+  --skeleton-row-gap: var(--space-stack-sm);
+  --skeleton-cell-gap: var(--space-inline-lg);
+  --skeleton-card-inset: var(--space-section-active);
+  --skeleton-radius: var(--radius);
+}

package/dist/tokens/{primitives → components}/table.css

@@ -1,4 +1,4 @@
-/* Table primitive tokens: row height, cell padding. */
+/* Table component tokens: row height, cell padding. */
 
 :root {
   --table-row-height-compact: 1.75rem;
@@ -6,5 +6,5 @@
   --table-row-height-comfortable: 2.75rem;
   --table-row-height: var(--table-row-height-default);
   --table-cell-padding-y: var(--space-2);
-  --space-table-cell-x: var(--control-padding-x);
+  --table-cell-space-x: var(--control-padding-x);
 }

package/dist/tokens/foundation.css

@@ -30,9 +30,6 @@
   --info-foreground: 60 33% 99%;
   --attention: 25 99% 46%; /* 朱 #eb6101 */
   --attention-foreground: 60 33% 99%;
-  --tracking-internal: 204 100% 39%;
-  --tracking-seller: 44 5% 42%;
-  --tracking-yamato: 25 99% 46%;
 
   /* 和色 (wa-iro) — traditional Japanese accent palette for charts, tags,
    * decoration. Decorative hex (NOT semantic): never remap a wa-iro to a
@@ -51,22 +48,13 @@
   --wa-sumi: #595857; /* 墨   warm ink */
   --wa-nezu: #949495; /* 鼠   mouse-grey */
 
-  /* Neutral + blue ramps (data viz, fine UI shading). */
-  --gray-50: #f9fafb;
-  --gray-100: #f3f4f6;
-  --gray-200: #e5e7eb;
-  --gray-300: #d1d5db;
-  --gray-400: #9ca3af;
-  --gray-500: #6b7280;
-  --gray-600: #4b5563;
-  --gray-700: #374151;
-  --gray-800: #1f2937;
-  --gray-900: #111827;
-  --blue-50: #eff6ff;
-  --blue-100: #dbeafe;
-  --blue-500: #3b82f6;
-  --blue-600: #2563eb;
-  --blue-700: #1d4ed8;
+  /* Chart accents are neutral decorative primitives, not business semantics. */
+  --chart-1: #0077c7;
+  --chart-2: #006e54;
+  --chart-3: #f8b500;
+  --chart-4: #b7282e;
+  --chart-5: #4c6cb3;
+  --chart-6: #eb6101;
 
   /* Shape and elevation */
   --radius: 0.375rem;
@@ -145,7 +133,4 @@
   --info-foreground: 48 9% 9%;
   --attention: 25 95% 56%;
   --attention-foreground: 48 9% 9%;
-  --tracking-internal: 204 90% 60%;
-  --tracking-seller: 44 6% 64%;
-  --tracking-yamato: 25 95% 56%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "7.0.0",
+  "version": "8.1.0",
   "type": "module",
   "description": "@godxjp/ui — shared React UI framework (shadcn + Radix + Tailwind v4).",
   "files": [
@@ -235,10 +235,12 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
-    "verify:release": "pnpm typecheck && pnpm lint && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm build && pnpm test",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
+    "verify:release": "pnpm typecheck && pnpm lint && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm build && pnpm test",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
+    "check:prop-vocabulary": "node scripts/check-prop-vocabulary.mjs",
+    "check:token-tiers": "node scripts/check-token-tiers.mjs",
     "release": "node scripts/release.mjs",
     "preview": "node preview/scripts/kill-port.mjs && vite --config preview/vite.config.ts --port 6008 --strictPort",
     "preview:build": "vite build --config preview/vite.config.ts",
@@ -260,6 +262,7 @@
   "dependencies": {
     "@date-fns/tz": "^1.5.0",
     "@fontsource/m-plus-2": "^5.2.9",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.11",
@@ -268,6 +271,7 @@
     "@radix-ui/react-context": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-radio-group": "^1.3.8",
@@ -285,11 +289,13 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "input-otp": "^1.4.2",
     "lucide-react": "^1.14.0",
     "react-day-picker": "^10.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",

package/scripts/ui-audit.mjs

@@ -48,6 +48,28 @@ const RULES = [
     message:
       "Use semantic tokens (bg-primary, text-muted-foreground…), not raw palette colors (rules §4).",
   },
+  {
+    id: "status-tone-not-variant",
+    severity: "error",
+    test: /\bvariant=["'](?:success|warning|destructive|info|neutral)["']/,
+    message:
+      "Status/color intent uses tone, not variant. Use tone='success|warning|destructive|info|neutral'.",
+  },
+  {
+    id: "no-domain-tracking-token",
+    severity: "error",
+    test: /--(?:color-)?tracking-|--(?:tracking|color-tracking)-(?:internal|seller|yamato)/,
+    message:
+      "Package tracking/domain tokens are forbidden. Use semantic tokens or app-local theme overrides.",
+  },
+  {
+    id: "value-callback-on-value-change",
+    severity: "error",
+    test:
+      /<(?:Checkbox\.Group|Upload|Cascader|TreeSelect|Transfer|SearchSelect|DatePicker|DateRangePicker|TimePicker|ColorPicker|LocalePicker|TimezonePicker|DateFormatPicker|TimeFormatPicker)\b[^>]*\bonChange=/,
+    message:
+      "Abstract value components use onValueChange, not onChange. Reserve onChange for DOM events.",
+  },
   {
     id: "no-arbitrary-hex",
     severity: "error",

package/dist/chunk-S66TJXJU.js

@@ -1,33 +0,0 @@
-import { cn } from './chunk-U7N2A7A3.js';
-import { jsx } from 'react/jsx-runtime';
-
-// src/lib/variants.ts
-var densityClass = {
-  compact: "ui-density-compact",
-  default: "ui-density-default",
-  comfortable: "ui-density-comfortable"
-};
-var pageContainerVariantClass = {
-  default: void 0,
-  narrow: "ui-page-container--narrow",
-  flush: "ui-page-container--flush",
-  ghost: "ui-page-container--ghost"
-};
-var stackGapClass = {
-  xs: "ui-stack-xs",
-  sm: "ui-stack-sm",
-  md: "ui-stack-md",
-  lg: "ui-stack-lg",
-  xl: "ui-stack-xl"
-};
-var inlineGapClass = {
-  xs: "ui-inline-xs",
-  sm: "ui-inline-sm",
-  md: "ui-inline-md",
-  lg: "ui-inline-lg"
-};
-function Inline({ gap = "sm", className, children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(inlineGapClass[gap], className), ...props, children });
-}
-
-export { Inline, densityClass, pageContainerVariantClass, stackGapClass };

package/dist/filter-bar-zSKz7YCR.d.ts

@@ -1,10 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as PageHeaderProp } from './layout.prop-MwHm4-Zl.js';
-import { F as FilterBarProp, a as FilterGroupProp } from './navigation.prop-DAH4ysXj.js';
-
-declare function PageHeader({ title, description, breadcrumb, actions, className }: PageHeaderProp): react_jsx_runtime.JSX.Element;
-
-declare function FilterBar({ onClear, hasActiveFilters, className, children, }: FilterBarProp): react_jsx_runtime.JSX.Element;
-declare function FilterGroup({ label, className, children }: FilterGroupProp): react_jsx_runtime.JSX.Element;
-
-export { FilterBar as F, PageHeader as P, FilterGroup as a };

package/dist/inline-CV3A46np.d.ts

@@ -1,10 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PageContainerProp, f as StackProp, I as InlineProp } from './layout.prop-MwHm4-Zl.js';
-
-declare function PageContainer({ title, subtitle, extra, footer, breadcrumb, density, variant, stickyFooter, children, className, }: PageContainerProp): react_jsx_runtime.JSX.Element;
-
-declare function Stack({ gap, className, children, ...props }: StackProp): react_jsx_runtime.JSX.Element;
-
-declare function Inline({ gap, className, children, ...props }: InlineProp): react_jsx_runtime.JSX.Element;
-
-export { Inline as I, PageContainer as P, Stack as S };

package/dist/layout.prop-4TCNvyQZ.d.ts

@@ -1,20 +0,0 @@
-/**
- * Layout & spacing prop types.
- * @see docs/PROPS-VOCABULARY.md#layout--density
- */
-/** Page-level density — affects padding, control heights across PageContainer subtree. */
-type PageDensityProp = "compact" | "default" | "comfortable";
-/** Page shell layout — orthogonal to PageDensityProp. */
-type PageContainerVariantProp = "default" | "narrow" | "flush" | "ghost";
-/** Vertical stack gap between block-level children. */
-type StackGapProp = "xs" | "sm" | "md" | "lg" | "xl";
-/** Horizontal inline gap between row items. */
-type InlineGapProp = "xs" | "sm" | "md" | "lg";
-/** DataTable row density — NOT the same as PageDensityProp. */
-type TableDensityProp = "compact" | "comfortable";
-/** @deprecated Alias — use PageDensityProp. Kept for lib/variants compat. */
-type DensityProp = PageDensityProp;
-/** @deprecated Alias — use StackGapProp. */
-type GapProp = StackGapProp;
-
-export type { DensityProp as D, GapProp as G, InlineGapProp as I, PageContainerVariantProp as P, StackGapProp as S, TableDensityProp as T, PageDensityProp as a };

package/dist/tokens/primitives/badge.css

@@ -1,13 +0,0 @@
-/* Badge primitive tokens. */
-
-:root {
-  --space-badge-gap: var(--space-inline-xs);
-  --space-badge-x: var(--space-2);
-  --space-badge-y: var(--space-1);
-  --code-badge-height: 1.75rem;
-  --code-badge-gap: var(--space-inline-sm);
-  --code-badge-padding-x: var(--space-2);
-  --code-badge-bg-alpha: 0.055;
-  --code-badge-border-alpha: 0.28;
-  --code-badge-separator-alpha: 0.22;
-}

package/dist/tokens/primitives/feedback.css

@@ -1,17 +0,0 @@
-/* Feedback primitive tokens: dialog, alert, empty state. */
-
-:root {
-  --space-dialog-inset: var(--space-5);
-  --space-dialog-gap: var(--space-stack-md);
-  --space-dialog-close-offset: var(--space-4);
-  --space-alert-inset: var(--space-section-active);
-  --space-alert-gap: var(--space-inline-md);
-  --space-alert-inner-gap: var(--space-stack-sm);
-  --space-alert-dismiss-offset: var(--space-3);
-  --space-empty-state-y: var(--space-10);
-  --space-empty-state-x: var(--space-6);
-  --skeleton-row-gap: var(--space-stack-sm);
-  --skeleton-cell-gap: var(--space-inline-lg);
-  --skeleton-card-inset: var(--space-section-active);
-  --skeleton-radius: var(--radius);
-}