@godxjp/ui 14.0.0 → 15.0.0

package/dist/components/layout/topbar.d.ts

@@ -4,12 +4,12 @@ export type { TopbarProp, TopbarProp as TopbarProps } from "../../props/componen
  * Topbar — a PURE SLOT bar. It positions three clusters (`start` / `center` / `end`) and owns the
  * bar's flex layout; it does NOT bake any chrome. There is no built-in product switcher, search
  * box, notification bell, or language picker — the CONSUMER composes those from real primitives
- * (brand `Logo`, a `Button` search trigger, `AppSettingPicker` for locale/theme, a `DropdownMenu`
- * user menu) and drops them into a slot. Whether a control is icon-only, labelled, bordered, etc.
- * is that control's OWN configuration — never the shell's to dictate.
+ * (a brand mark `Avatar`, a `Button` search trigger, `AppSettingPicker` for locale/theme, a
+ * `DropdownMenu` user menu) and drops them into a slot. Whether a control is icon-only, labelled,
+ * bordered, etc. is that control's OWN configuration — never the shell's to dictate.
  *
  *   <Topbar
- *     start={<><SidebarToggle /><Logo label="…" /></>}
+ *     start={<><SidebarToggle /><Avatar className="rounded-md"><AvatarFallback>C</AvatarFallback></Avatar></>}
  *     center={<Button variant="outline" onClick={openSearch}><Search />検索</Button>}
  *     end={<><AppSettingPicker kind="locale" /><UserMenu /></>}
  *   />

package/dist/props/components/layout.prop.d.ts

@@ -105,13 +105,13 @@ export type SidebarProp = {
 };
 /**
  * @see Topbar — a PURE SLOT bar (no baked chrome). The library only positions three clusters; the
- * CONSUMER decides what goes in each (brand `Logo`, sidebar toggle, nav, a search trigger, settings
+ * CONSUMER decides what goes in each (a brand mark `Avatar`, sidebar toggle, nav, a search trigger, settings
  * pickers like `AppSettingPicker`, a notification button, a user menu). The shell never forces a
  * product switcher, a search box, or a language picker — those are the consumer's components,
  * configured via THEIR own props and dropped into a slot.
  */
 export type TopbarProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    /** Inline-start cluster — typically the sidebar toggle + brand `Logo` + primary nav. */
+    /** Inline-start cluster — typically the sidebar toggle + a brand mark (`Avatar`) + primary nav. */
     start?: ReactNode;
     /** Center cluster — optional (e.g. a search trigger or a page/entity switcher). */
     center?: ReactNode;

package/dist/props/vocabulary/data.prop.d.ts

@@ -18,6 +18,12 @@ export type ColumnDefProp<T> = {
     width?: string;
     align?: ColumnAlignProp;
     hiddenOnMobile?: boolean;
+    /**
+     * List this column in DataTable.ViewOptions (the column show/hide "set view"
+     * menu). Defaults to true; set false to keep a column always visible (e.g. a
+     * primary key or a pinned actions column).
+     */
+    enableHiding?: boolean;
     /**
      * Pin the column to the inline-end edge so it stays visible while the rest of
      * the table scrolls horizontally — the standard home for a row-actions column.

package/dist/styles/density.css

@@ -29,3 +29,65 @@
 :root[data-density="comfortable"] {
   --scaling: 1.08;
 }
+
+/*
+ * A DESCENDANT density scope (`.ui-density-*` from `<PageContainer density>`) must
+ * RE-DERIVE every --scaling-tied token, not just flip --scaling. CSS substitutes
+ * `var(--scaling)` at the element that DECLARES a token, so the size tokens declared
+ * at `:root` (foundation/control/table) are baked with the ROOT --scaling and inherit
+ * as fixed values — a subtree that only sets a new --scaling can't retune them. (Same
+ * reason `.ui-scale-fixed` re-declares the whole list.) Mirror that list here, scaled
+ * by the LOCAL --scaling, so controls/spacing in the subtree actually resize. The
+ * `:root[data-density]` selectors above need ONLY --scaling: they re-declare on the
+ * same element as the :root token formulas, so those re-resolve there.
+ *
+ * density.css is a registered tier-definition file (check-control-sizing), so the
+ * `calc(var(--control-height) ± …)` tier offsets are permitted here.
+ */
+.ui-density-compact,
+.ui-density-default,
+.ui-density-comfortable {
+  --space-1: calc(0.25rem * var(--scaling));
+  --space-2: calc(0.5rem * var(--scaling));
+  --space-3: calc(0.75rem * var(--scaling));
+  --space-4: calc(1rem * var(--scaling));
+  --space-5: calc(1.25rem * var(--scaling));
+  --space-6: calc(1.5rem * var(--scaling));
+  --space-8: calc(2rem * var(--scaling));
+  --space-10: calc(2.5rem * var(--scaling));
+  --space-12: calc(3rem * var(--scaling));
+  --radius: calc(0.375rem * var(--scaling));
+  --control-height: calc(var(--control-height-default) * var(--scaling));
+  --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
+  --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
+  --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
+  --control-icon-size: calc(1rem * var(--scaling));
+  --control-icon-size-sm: calc(0.875rem * var(--scaling));
+  --control-padding-x: var(--space-3);
+  --control-gap: var(--space-2);
+  --control-gap-sm: var(--space-1);
+  --checkbox-size: calc(1rem * var(--scaling));
+  --switch-width: calc(2.25rem * var(--scaling));
+  --switch-height: calc(1.25rem * var(--scaling));
+  --switch-thumb-size: calc(1rem * var(--scaling));
+  --switch-thumb-translate: calc(1rem * var(--scaling));
+  --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
+  --table-cell-padding-y: var(--space-2);
+  --phi-unit: var(--space-4);
+  --space-page-x: var(--space-6);
+  --space-page-y: var(--space-6);
+  --space-section: var(--space-4);
+  --space-stack-xs: var(--space-1);
+  --space-stack-sm: var(--space-2);
+  --space-stack-md: var(--space-4);
+  --space-stack-lg: var(--space-6);
+  --space-stack-xl: var(--space-10);
+  --space-inline-xs: var(--space-1);
+  --space-inline-sm: var(--space-2);
+  --space-inline-md: var(--space-3);
+  --space-inline-lg: var(--space-4);
+  --space-chrome-x: var(--space-6);
+  --space-chrome-y: var(--space-4);
+  --space-chrome-gap: var(--space-2);
+  --field-label-gap: var(--space-2);
+}

package/dist/tokens/base.css

@@ -15,6 +15,5 @@
 @import "./components/navigation.css";
 @import "./components/data-display.css";
 @import "./components/list-row.css";
-@import "./components/logo.css";
 @import "./components/data-entry.css";
 @import "./components/shell.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,
@@ -54,10 +54,6 @@
       "types": "./dist/components/query/index.d.ts",
       "import": "./dist/components/query/index.js"
     },
-    "./data-grid": {
-      "types": "./dist/components/data-grid/index.d.ts",
-      "import": "./dist/components/data-grid/index.js"
-    },
     "./charts": {
       "types": "./dist/components/charts/index.d.ts",
       "import": "./dist/components/charts/index.js"
@@ -269,6 +265,7 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit -p tsconfig.json",
+    "typecheck:docs": "tsc --noEmit -p tsconfig.docs.json",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --check .",
@@ -278,7 +275,7 @@
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
     "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm test",
-    "verify:release": "pnpm typecheck && pnpm lint && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
+    "verify:release": "pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
@@ -295,6 +292,7 @@
     "preview:build": "vite build --config preview/vite.config.ts",
     "docs:sync-primitives": "node preview/scripts/sync-primitive-docs.mjs && prettier --write \"docs/primitives/**/*.tsx\"",
     "audit": "node scripts/ui-audit.mjs",
+    "audit:examples": "node scripts/ui-audit.mjs docs",
     "build": "tsup && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs",
     "dev": "node scripts/dev.mjs",
     "prepublishOnly": "pnpm run build",
@@ -306,7 +304,6 @@
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.0",
     "@tanstack/react-query": ">=5.0.0",
-    "@tanstack/react-table": ">=8.0.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-hook-form": "^7.76.0",
@@ -319,9 +316,6 @@
     "axe-core": "*"
   },
   "peerDependenciesMeta": {
-    "@tanstack/react-table": {
-      "optional": true
-    },
     "recharts": {
       "optional": true
     },
@@ -337,6 +331,7 @@
   },
   "dependencies": {
     "@date-fns/tz": "^1.5.0",
+    "@tanstack/react-table": "^8.21.3",
     "@fontsource/m-plus-2": "^5.2.9",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -384,7 +379,6 @@
     "@hookform/resolvers": "^5.2.2",
     "@tailwindcss/vite": "^4.2.4",
     "@tanstack/react-query": "^5.100.9",
-    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

package/scripts/ui-audit.mjs

@@ -387,8 +387,13 @@ function walk(dir, acc = []) {
     const full = join(dir, name);
     const st = statSync(full);
     if (st.isDirectory()) {
+      // Test/story dirs are not product UI — never hold them to the UI-standardization rules.
+      if (name === "__tests__" || name === "node_modules") continue;
       walk(full, acc);
-    } else if (name.endsWith(".tsx") || name.endsWith(".ts")) {
+    } else if (
+      (name.endsWith(".tsx") || name.endsWith(".ts")) &&
+      !/\.(test|spec|stories)\.tsx?$/.test(name)
+    ) {
       acc.push(full);
     }
   }

package/dist/components/data-grid/data-grid.d.ts

@@ -1,67 +0,0 @@
-import * as React from "react";
-import { type ColumnDef, type ColumnFiltersState, type OnChangeFn, type PaginationState, type RowSelectionState, type RowData, type SortingState, type VisibilityState } from "@tanstack/react-table";
-import type { TableDensityProp } from "../../props/vocabulary";
-export type DataGridDensity = TableDensityProp;
-export type { ColumnDef } from "@tanstack/react-table";
-declare module "@tanstack/react-table" {
-    interface ColumnMeta<TData extends RowData, TValue> {
-        label?: React.ReactNode;
-    }
-}
-export interface DataGridProps<T> {
-    columns: ColumnDef<T, unknown>[];
-    data: T[];
-    getRowId?: (row: T) => string;
-    /** Stable id key when getRowId is omitted (defaults to "id"). */
-    rowIdKey?: keyof T & string;
-    sorting?: SortingState;
-    onSortingChange?: OnChangeFn<SortingState>;
-    columnFilters?: ColumnFiltersState;
-    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
-    globalFilter?: string;
-    onGlobalFilterChange?: OnChangeFn<string>;
-    pagination?: PaginationState;
-    onPaginationChange?: OnChangeFn<PaginationState>;
-    /** Total server row count (manual pagination) — drives the page count. */
-    rowCount?: number;
-    rowSelection?: RowSelectionState;
-    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
-    enableRowSelection?: boolean;
-    columnVisibility?: VisibilityState;
-    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
-    manualSorting?: boolean;
-    manualFiltering?: boolean;
-    manualPagination?: boolean;
-    density?: DataGridDensity;
-    onDensityChange?: (d: DataGridDensity) => void;
-    loading?: boolean;
-    empty?: React.ReactNode;
-    onRowClick?: (row: T) => void;
-    className?: string;
-    children?: React.ReactNode;
-}
-interface DataGridComponent {
-    <T>(props: DataGridProps<T>): React.ReactElement;
-    Toolbar: React.FC<{
-        children?: React.ReactNode;
-        className?: string;
-    }>;
-    Search: React.FC<{
-        placeholder?: string;
-        className?: string;
-    }>;
-    ViewOptions: React.FC<{
-        className?: string;
-    }>;
-    BulkActions: React.FC<{
-        children: (count: number) => React.ReactNode;
-    }>;
-    DensityToggle: React.FC;
-    Content: React.FC;
-    Pagination: React.FC<{
-        pageSizeOptions?: number[];
-        className?: string;
-    }>;
-    displayName?: string;
-}
-export declare const DataGrid: DataGridComponent;