@godxjp/ui 14.0.0 → 15.0.0

package/README.md

@@ -67,7 +67,7 @@ Components emit `data-slot` / `data-*`; the look lives in `styles/*-layout.css`.
 
 | Group              | Import                    | Examples                                                                                                                                                                                                                                |
 | ------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Layout**         | `@godxjp/ui/layout`       | `Flex`, `PageContainer`, `ResponsiveGrid`, `AppShell`, `Sidebar`, `Separator`, `AspectRatio`, `Resizable`                                                                                                          |
+| **Layout**         | `@godxjp/ui/layout`       | `Flex`, `PageContainer`, `ResponsiveGrid`, `AppShell`, `Sidebar`, `Separator`, `AspectRatio`, `Resizable`                                                                                                                               |
 | **General**        | `@godxjp/ui/general`      | `Button`                                                                                                                                                                                                                                |
 | **Data Entry**     | `@godxjp/ui/data-entry`   | `Input`, `Select`, `FormField`, `Field`, `DatePicker`, `TimePicker`, `Combobox`, `Switch`, `Toggle`, `Upload`, `Cascader`, `TreeSelect`, `ColorPicker`, `Slider`, `PasswordInput`, `PasswordStrength`, `InputOTP`, `Rating`, `TagInput` |
 | **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                                                       |
@@ -92,26 +92,29 @@ The v11 line dropped the deprecated compatibility aliases entirely — they are
 at runtime, and their leftover `*Prop` types and README references have now been removed too (issue
 #99). Replace these at the call site:
 
-| Removed / renamed (≤ v8)         | Replacement (v11)                                  |
-| -------------------------------- | -------------------------------------------------- |
-| `Stack`                          | `Flex direction="col"` (the default direction)     |
-| `Inline`                         | `Flex direction="row"`                             |
-| `Autocomplete`                   | `Select` with `showSearch` + `options`             |
-| `CountrySelect`                  | `AppSettingPicker kind="country"`                  |
-| `LocalePicker`                   | `AppSettingPicker kind="language"`                 |
-| `CountryOptionLabel`             | `Intl.DisplayNames` (ISO 3166-1 α-2) — no component |
-| `SwitchField`                    | `Field` + `Switch`                                 |
-| `CardStat`                       | `StatCard`                                          |
-| `KeyValueGrid`                   | `Descriptions`                                      |
-| `ProgressMeter`                  | `Progress`                                          |
-| `FilterBar`                      | `Toolbar`                                           |
-| `ChoiceField`                    | `Field`                                             |
-| `SkeletonCard`                   | `SkeletonStat`                                      |
-| `StatusBadge`                    | `Badge` (`status` / `tone`)                         |
-| `DialogConfirm` / `Dialog mode="confirm"` | `AlertDialog`                             |
-
-For the full feature data grid (sort / search / column visibility / paging) see
-`@godxjp/ui/data-grid` (`DataGrid`); the lean server-driven list stays `DataTable`.
+| Removed / renamed (≤ v8)                  | Replacement (v11)                                   |
+| ----------------------------------------- | --------------------------------------------------- |
+| `Stack`                                   | `Flex direction="col"` (the default direction)      |
+| `Inline`                                  | `Flex direction="row"`                              |
+| `Autocomplete`                            | `Select` with `showSearch` + `options`              |
+| `CountrySelect`                           | `AppSettingPicker kind="country"`                   |
+| `LocalePicker`                            | `AppSettingPicker kind="language"`                  |
+| `CountryOptionLabel`                      | `Intl.DisplayNames` (ISO 3166-1 α-2) — no component |
+| `SwitchField`                             | `Field` + `Switch`                                  |
+| `CardStat`                                | `StatCard`                                          |
+| `KeyValueGrid`                            | `Descriptions`                                      |
+| `ProgressMeter`                           | `Progress`                                          |
+| `FilterBar`                               | `Toolbar`                                           |
+| `ChoiceField`                             | `Field`                                             |
+| `SkeletonCard`                            | `SkeletonStat`                                      |
+| `StatusBadge`                             | `Badge` (`status` / `tone`)                         |
+| `DialogConfirm` / `Dialog mode="confirm"` | `AlertDialog`                                       |
+
+The full data-grid feature set (sort / search / column visibility / paging) is now
+built into the one `DataTable` (`@godxjp/ui/data-display`) — TanStack-powered, with
+the lean `data` + `columns` API for the common case and the compound parts
+(`DataTable.Search` / `.ViewOptions` / `.Pagination` …) for the rich chrome. The
+separate `@godxjp/ui/data-grid` (`DataGrid`) subpath has been merged in and removed.
 
 ---
 
@@ -154,12 +157,12 @@ One token `--phi-unit` drives page/section/card spacing; micro control gaps use
 4px grid. Density (`compact` | `default` | `comfortable`) retunes `--phi-unit` with
 control + table heights together.
 
-| App API                          | φ level             |
-| -------------------------------- | ------------------- |
-| `<Flex direction="col" gap="md">`| φ⁰ (default)        |
-| `<Flex direction="col" gap="lg">`| φ¹                  |
-| `<Flex direction="col" gap="xl">`| φ²                  |
-| Card shell / footer              | base × φ / base ÷ φ |
+| App API                           | φ level             |
+| --------------------------------- | ------------------- |
+| `<Flex direction="col" gap="md">` | φ⁰ (default)        |
+| `<Flex direction="col" gap="lg">` | φ¹                  |
+| `<Flex direction="col" gap="xl">` | φ²                  |
+| Card shell / footer               | base × φ / base ÷ φ |
 
 ---
 

package/dist/components/admin/index.d.ts

@@ -18,8 +18,6 @@ export { Transfer } from "../data-entry/transfer";
 export { Pagination, Steps, Tabs, TabsContent, TabsList, TabsTrigger } from "../navigation";
 export { Toolbar, ToolbarGroup } from "../navigation/filter-bar";
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, AlertDialog, } from "../feedback/dialog";
-export { DataTable } from "../data-display/data-table";
-export type { ColumnDef, Density } from "../data-display/data-table";
 export { Toaster } from "../feedback/sonner";
 export { toast } from "../feedback/use-toast";
 export { useDebouncedValue, useTimeoutFlag } from "../../lib/hooks";

package/dist/components/admin/index.js

@@ -36,7 +36,6 @@ import {
   DialogDescription,
   AlertDialog
 } from "../feedback/dialog";
-import { DataTable } from "../data-display/data-table";
 import { Toaster } from "../feedback/sonner";
 import { toast } from "../feedback/use-toast";
 import { useDebouncedValue, useTimeoutFlag } from "../../lib/hooks";
@@ -51,7 +50,6 @@ export {
   AlertTitle,
   Badge,
   Cascader,
-  DataTable,
   Descriptions,
   Dialog,
   DialogContent,

package/dist/components/data-display/data-table.d.ts

@@ -1,7 +1,19 @@
 import * as React from "react";
+import { flexRender, type OnChangeFn, type PaginationState, type RowData, type VisibilityState } from "@tanstack/react-table";
 import type { ColumnDefProp, DensityProp, SortStateProp } from "../../props/vocabulary";
 export type Density = DensityProp;
+/**
+ * Lean column definition — the simple, common-case column API. `render` shapes
+ * a cell; `sortable` opts the column into the sort cycle; `align` / `width` /
+ * `pin` / `hiddenOnMobile` tune layout; `enableHiding` (default true) lists the
+ * column in DataTable.ViewOptions. Adapted to a TanStack column internally.
+ */
 export type ColumnDef<T> = ColumnDefProp<T>;
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        lean?: ColumnDef<TData>;
+    }
+}
 interface DataTableProps<T> {
     data: T[];
     columns: ColumnDef<T>[];
@@ -13,8 +25,29 @@ interface DataTableProps<T> {
     onRowClick?: (row: T) => void;
     density?: Density;
     onDensityChange?: (d: Density) => void;
+    /** Active sort state (lean surface). Pair with onSortChange for server sort. */
     sort?: SortStateProp;
     onSortChange?: (sort: SortStateProp | undefined) => void;
+    /** Global search term, surfaced by DataTable.Search. */
+    globalFilter?: string;
+    onGlobalFilterChange?: (next: string) => void;
+    /** Numbered-pagination state, surfaced by DataTable.Pagination. */
+    pagination?: PaginationState;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    /** Total server row count (manual pagination) — drives the page count. */
+    rowCount?: number;
+    /** Column show/hide state, surfaced by DataTable.ViewOptions. */
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    /**
+     * Manual (server) flags. Default `false` so the simple `data`+`columns` case
+     * sorts / filters / paginates in-browser with no extra wiring. Set the
+     * relevant flag `true` and drive the matching state from your query for
+     * server-side sort / filter / pagination.
+     */
+    manualSorting?: boolean;
+    manualFiltering?: boolean;
+    manualPagination?: boolean;
     /** Show a loading row instead of data. */
     loading?: boolean;
     /** Custom empty content when `data` is empty; defaults to a built-in EmptyState. */
@@ -34,32 +67,52 @@ interface DataTableProps<T> {
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, loading, empty, striped, hoverable, stickyHeader, rowClassName, className, children, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: controlledPagination, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, striped, hoverable, stickyHeader, rowClassName, className, children, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;
         className?: string;
     }) => import("react/jsx-runtime").JSX.Element;
+    var Search: ({ placeholder, className, }: {
+        placeholder?: string;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var ViewOptions: ({ className }: {
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     var SelectAll: () => import("react/jsx-runtime").JSX.Element | null;
     var BulkActions: ({ count, children, className, }: BulkActionsProps) => import("react/jsx-runtime").JSX.Element | null;
     var DensityToggle: () => import("react/jsx-runtime").JSX.Element;
     var Content: () => import("react/jsx-runtime").JSX.Element;
-    var Pagination: ({ cursor, hasMore, onChange, className, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+    var Pagination: (props: PaginationProps) => import("react/jsx-runtime").JSX.Element;
     var RowActions: ({ ariaLabel, children }: RowActionsProps) => import("react/jsx-runtime").JSX.Element;
 }
 interface BulkActionsProps {
     count?: number;
-    children?: React.ReactNode;
+    /**
+     * Render-prop form receives the selected count; plain ReactNode children read
+     * the count from selection state and render the built-in "N selected" status.
+     */
+    children?: React.ReactNode | ((count: number) => React.ReactNode);
     className?: string;
 }
-interface PaginationProps {
+interface CursorPaginationProps {
     cursor?: string;
     hasMore: boolean;
     onChange: (cursor: string | undefined) => void;
     className?: string;
+    pageSizeOptions?: never;
+}
+interface NumberedPaginationProps {
+    pageSizeOptions?: number[];
+    className?: string;
+    cursor?: never;
+    hasMore?: never;
+    onChange?: never;
 }
+type PaginationProps = CursorPaginationProps | NumberedPaginationProps;
 interface RowActionsProps {
     ariaLabel?: string;
     children: React.ReactNode;
 }
-export {};
+export { flexRender };