@godxjp/ui 7.0.0 → 8.0.0

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.0.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",

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);
-}