@zuilib/data-grid 0.3.0 → 0.4.0

package/dist/index.js

@@ -2,14 +2,14 @@
 
 // src/data-grid.tsx
 import { useMemo as useMemo3 } from "react";
-import { cn as cn8 } from "@zuilib/components/lib/cn";
+import { cn as cn8 } from "@zuilib/primitives/lib/cn";
 
 // src/column-manager.tsx
 import { Fragment } from "react";
-import Button2 from "@zuilib/components/button";
-import Checkbox2 from "@zuilib/components/checkbox";
-import Popover from "@zuilib/components/popover";
-import { cn as cn2 } from "@zuilib/components/lib/cn";
+import Button2 from "@zuilib/primitives/button";
+import Checkbox2 from "@zuilib/primitives/checkbox";
+import Popover from "@zuilib/primitives/popover";
+import { cn as cn2 } from "@zuilib/primitives/lib/cn";
 
 // src/column-extras.ts
 function columnExtras(column) {
@@ -39,9 +39,9 @@ function useDataGridContext(part) {
 }
 
 // src/expand-column.tsx
-import Button from "@zuilib/components/button";
-import { cn } from "@zuilib/components/lib/cn";
-import { ChevronDownIcon } from "@zuilib/components/lib/icons";
+import Button from "@zuilib/primitives/button";
+import { cn } from "@zuilib/primitives/lib/cn";
+import { ChevronDownIcon } from "@zuilib/primitives/lib/icons";
 import { jsx } from "react/jsx-runtime";
 var EXPAND_COLUMN_ID = "__expand";
 function ExpandToggle({ row }) {
@@ -95,7 +95,7 @@ function createExpandColumn() {
 }
 
 // src/select-column.tsx
-import Checkbox from "@zuilib/components/checkbox";
+import Checkbox from "@zuilib/primitives/checkbox";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var SELECT_COLUMN_ID = "__select";
 function SelectAll({ table }) {
@@ -195,6 +195,7 @@ function fillLabel(template, values) {
 // src/column-manager.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var FIXED_COLUMN_IDS = [SELECT_COLUMN_ID, EXPAND_COLUMN_ID];
+var rowButtonClasses = "size-7 p-0 pointer-coarse:size-11";
 function ColumnsIcon({ className }) {
   return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: cn2("size-[1em] shrink-0", className), children: /* @__PURE__ */ jsx3("path", { d: "M14 17h2.75A2.25 2.25 0 0 0 19 14.75v-9.5A2.25 2.25 0 0 0 16.75 3H14v14ZM12.5 3h-5v14h5V3ZM3.25 3H6v14H3.25A2.25 2.25 0 0 1 1 14.75v-9.5A2.25 2.25 0 0 1 3.25 3Z" }) });
 }
@@ -205,7 +206,7 @@ function DataGridColumnManagerRow({ column, index, count, onMove }) {
   const pinned = column.getIsPinned();
   const setPin = (position) => column.pin(pinned === position ? false : position);
   return /* @__PURE__ */ jsxs("li", { "data-slot": "data-grid-column-manager-row", "data-column": column.id, className: "flex items-center gap-2 py-1", children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx3(
       Checkbox2,
       {
         size: "sm",
@@ -214,10 +215,10 @@ function DataGridColumnManagerRow({ column, index, count, onMove }) {
         disabled: !column.getCanHide(),
         onCheckedChange: (checked) => column.toggleVisibility(checked)
       }
-    ),
-    /* @__PURE__ */ jsxs("span", { className: "ms-auto inline-flex items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "sm", "aria-label": fillLabel(labels.moveUp, { column: label }), disabled: index === 0, onClick: () => onMove(column, -1), className: "size-7 p-0", children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2191" }) }),
-      /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "sm", "aria-label": fillLabel(labels.moveDown, { column: label }), disabled: index === count - 1, onClick: () => onMove(column, 1), className: "size-7 p-0", children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2193" }) }),
+    ) }),
+    /* @__PURE__ */ jsxs("span", { className: "ms-auto inline-flex shrink-0 items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "sm", "aria-label": fillLabel(labels.moveUp, { column: label }), disabled: index === 0, onClick: () => onMove(column, -1), className: rowButtonClasses, children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2191" }) }),
+      /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "sm", "aria-label": fillLabel(labels.moveDown, { column: label }), disabled: index === count - 1, onClick: () => onMove(column, 1), className: rowButtonClasses, children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2193" }) }),
       ["left", "right"].map((side) => /* @__PURE__ */ jsx3(
         Button2,
         {
@@ -226,7 +227,7 @@ function DataGridColumnManagerRow({ column, index, count, onMove }) {
           "aria-label": pinned === side ? `${labels.unpin} ${label}` : `${pinLabels[side]}: ${label}`,
           "aria-pressed": pinned === side,
           onClick: () => setPin(side),
-          className: cn2("size-7 p-0 text-xs", pinned === side && "text-primary"),
+          className: cn2(rowButtonClasses, "text-xs", pinned === side && "text-primary"),
           children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: side === "left" ? "\u21E4" : "\u21E5" })
         },
         side
@@ -249,9 +250,9 @@ function DataGridColumnManager({ label: labelProp, className, addable, onAddColu
     table.setColumnOrder([...FIXED_COLUMN_IDS.filter((id) => present.has(id)), ...order]);
   };
   return /* @__PURE__ */ jsxs(Popover, { "data-slot": "data-grid-column-manager", className: cn2("inline-flex", className), children: [
-    /* @__PURE__ */ jsx3(Popover.Button, { as: Fragment, children: /* @__PURE__ */ jsx3(Button2, { variant: "outline", size: "sm", leadingIcon: /* @__PURE__ */ jsx3(ColumnsIcon, {}), "data-slot": "data-grid-column-manager-button", children: label }) }),
-    /* @__PURE__ */ jsxs(Popover.Panel, { "data-slot": "data-grid-column-manager-panel", anchor: "bottom end", className: "min-w-64", children: [
-      /* @__PURE__ */ jsx3("ul", { "data-slot": "data-grid-column-manager-list", "aria-label": label, className: "m-0 flex list-none flex-col p-0", children: columns.map((column, index) => /* @__PURE__ */ jsx3(DataGridColumnManagerRow, { column, index, count: columns.length, onMove: move }, column.id)) }),
+    /* @__PURE__ */ jsx3(Popover.Button, { as: Fragment, children: /* @__PURE__ */ jsx3(Button2, { variant: "outline", size: "sm", leadingIcon: /* @__PURE__ */ jsx3(ColumnsIcon, {}), "data-slot": "data-grid-column-manager-button", children: /* @__PURE__ */ jsx3("span", { className: "sr-only @sm:not-sr-only", children: label }) }) }),
+    /* @__PURE__ */ jsxs(Popover.Panel, { "data-slot": "data-grid-column-manager-panel", anchor: "bottom end", className: "min-w-[min(16rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)]", children: [
+      /* @__PURE__ */ jsx3("ul", { "data-slot": "data-grid-column-manager-list", "aria-label": label, className: "m-0 flex max-h-[min(60dvh,24rem)] list-none flex-col overflow-y-auto p-0", children: columns.map((column, index) => /* @__PURE__ */ jsx3(DataGridColumnManagerRow, { column, index, count: columns.length, onMove: move }, column.id)) }),
       onAddColumn && addable && addable.length > 0 ? /* @__PURE__ */ jsxs("div", { "data-slot": "data-grid-column-manager-add", className: "mt-2 border-t border-border pt-2", children: [
         /* @__PURE__ */ jsx3("p", { className: "m-0 pb-1 text-xs font-medium text-muted-foreground", children: labels.addColumnSection }),
         /* @__PURE__ */ jsx3("ul", { "aria-label": labels.addColumnSection, className: "m-0 flex list-none flex-col p-0", children: addable.map((field) => /* @__PURE__ */ jsx3("li", { "data-slot": "data-grid-column-manager-add-row", "data-column": field.id, className: "flex items-center gap-2 py-0.5", children: /* @__PURE__ */ jsxs(
@@ -275,14 +276,15 @@ function DataGridColumnManager({ label: labelProp, className, addable, onAddColu
 
 // src/data-grid-body.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import { Fragment as Fragment2, useEffect, useRef as useRef2, useState as useState3 } from "react";
-import Alert from "@zuilib/components/alert";
-import EmptyState from "@zuilib/components/empty-state";
-import Skeleton from "@zuilib/components/skeleton";
-import Table from "@zuilib/components/table";
-import { cn as cn4 } from "@zuilib/components/lib/cn";
-import { focusOutlineInsetClasses, focusRingInsetClasses } from "@zuilib/components/lib/focus";
-import { nativeControlResetClasses } from "@zuilib/components/lib/reset";
+import { Fragment as Fragment3, useEffect, useRef as useRef2, useState as useState3 } from "react";
+import Alert from "@zuilib/primitives/alert";
+import EmptyState from "@zuilib/primitives/empty-state";
+import Skeleton from "@zuilib/primitives/skeleton";
+import Table from "@zuilib/primitives/table";
+import { cn as cn4 } from "@zuilib/primitives/lib/cn";
+import { focusOutlineInsetClasses, focusRingInsetClasses } from "@zuilib/primitives/lib/focus";
+import { nativeControlResetClasses } from "@zuilib/primitives/lib/reset";
+import { touchTargetClasses } from "@zuilib/primitives/lib/sizes";
 
 // src/dev.ts
 function isDev() {
@@ -302,7 +304,7 @@ function warnOnce(key, message) {
 // src/editable-cell.tsx
 import { flexRender } from "@tanstack/react-table";
 import { useRef, useState } from "react";
-import Input from "@zuilib/components/input";
+import Input from "@zuilib/primitives/input";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function EditableCell({ cell, editing, onEditEnd, commitOnBlur, onCellCommit, labels }) {
   const value = cell.getValue();
@@ -357,12 +359,13 @@ function EditableCell({ cell, editing, onEditEnd, commitOnBlur, onCellCommit, la
 
 // src/filter-popover.tsx
 import { useState as useState2 } from "react";
-import Button3 from "@zuilib/components/button";
-import Checkbox3 from "@zuilib/components/checkbox";
-import Input2 from "@zuilib/components/input";
-import Popover2 from "@zuilib/components/popover";
-import { cn as cn3 } from "@zuilib/components/lib/cn";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import Button3 from "@zuilib/primitives/button";
+import Checkbox3 from "@zuilib/primitives/checkbox";
+import Input2 from "@zuilib/primitives/input";
+import Popover2 from "@zuilib/primitives/popover";
+import { cn as cn3 } from "@zuilib/primitives/lib/cn";
+import { touchHitAreaClasses } from "@zuilib/primitives/lib/sizes";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function FilterIcon({ className }) {
   return /* @__PURE__ */ jsx5(
     "svg",
@@ -447,7 +450,7 @@ function SelectFilterForm({ filter, value, labels, onApply, onClear }) {
         onApply(draft);
       },
       children: [
-        /* @__PURE__ */ jsx5("div", { role: "group", "aria-label": labels.filterOptions, className: "flex max-h-60 flex-col gap-2 overflow-auto", children: filter.options.map((option) => /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx5("div", { role: "group", "aria-label": labels.filterOptions, className: "flex max-h-[min(50dvh,15rem)] flex-col gap-2 overflow-auto", children: filter.options.map((option) => /* @__PURE__ */ jsx5(
           Checkbox3,
           {
             size: "sm",
@@ -511,7 +514,7 @@ function FilterPopover({ column, filter }) {
     };
     return filter.control === "text" ? /* @__PURE__ */ jsx5(TextFilterForm, { filter, value, labels, onApply: apply, onClear: clear }) : filter.control === "select" ? /* @__PURE__ */ jsx5(SelectFilterForm, { filter, value, labels, onApply: apply, onClear: clear }) : /* @__PURE__ */ jsx5(DateRangeFilterForm, { filter, value, labels, onApply: apply, onClear: clear });
   };
-  return /* @__PURE__ */ jsxs2(Popover2, { "data-slot": "data-grid-filter", className: "inline-flex shrink-0", children: [
+  return /* @__PURE__ */ jsx5(Popover2, { "data-slot": "data-grid-filter", className: "inline-flex shrink-0", children: ({ close }) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx5(
       Popover2.Button,
       {
@@ -521,17 +524,20 @@ function FilterPopover({ column, filter }) {
         className: cn3(
           "inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground",
           "transition-colors duration-(--duration-fast) hover:bg-accent hover:text-accent-foreground",
-          "data-[active]:text-primary data-[open]:bg-accent"
+          "data-[active]:text-primary data-[open]:bg-accent",
+          /* A Base UI button, not the Button primitive, so it positions itself for the overlay. */
+          "relative",
+          touchHitAreaClasses
         ),
         children: /* @__PURE__ */ jsx5(FilterIcon, { className: "size-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx5(Popover2.Panel, { "data-slot": "data-grid-filter-panel", anchor: "bottom start", className: "min-w-56", children: ({ close }) => form(close) })
-  ] });
+    /* @__PURE__ */ jsx5(Popover2.Panel, { "data-slot": "data-grid-filter-panel", anchor: "bottom start", className: "min-w-[min(14rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)]", children: form(close) })
+  ] }) });
 }
 
 // src/data-grid-body.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var densityToSize = { compact: "sm", comfortable: "md" };
 function pinnedSide(column) {
   const pinned = column.getIsPinned();
@@ -677,7 +683,7 @@ function HeaderCell({ header, stickyHeader, active, onFocus }) {
         activate: sortable ? () => column.toggleSorting(void 0, column.getCanMultiSort()) : void 0
       }),
       children: [
-        /* @__PURE__ */ jsxs3("div", { "data-slot": "data-grid-header-content", className: cn4("flex items-center gap-1", extras.align === "end" && "flex-row-reverse"), children: [
+        /* @__PURE__ */ jsxs3("div", { "data-slot": "data-grid-header-content", className: cn4("flex items-center gap-1", touchTargetClasses, extras.align === "end" && "flex-row-reverse"), children: [
           sortable ? /* @__PURE__ */ jsxs3(
             "button",
             {
@@ -688,6 +694,7 @@ function HeaderCell({ header, stickyHeader, active, onFocus }) {
               className: cn4(
                 nativeControlResetClasses,
                 "flex min-w-0 flex-1 cursor-pointer items-center gap-1 px-(--table-cell-px) py-(--table-cell-py)",
+                touchTargetClasses,
                 "transition-colors duration-(--duration-fast) motion-reduce:transition-none",
                 "hover:text-foreground data-[sort=ascending]:text-foreground data-[sort=descending]:text-foreground",
                 focusRingInsetClasses,
@@ -732,7 +739,9 @@ function HeaderCell({ header, stickyHeader, active, onFocus }) {
               "absolute top-0 end-0 h-full w-1.5 cursor-col-resize touch-none select-none",
               "opacity-0 transition-opacity duration-(--duration-fast) group-hover/head:opacity-100 focus-visible:opacity-100",
               "bg-border hover:bg-primary focus-visible:bg-primary focus:outline-none",
-              column.getIsResizing() && "bg-primary opacity-100"
+              /* No hover on a touch screen: the handle is a visible 1px divider with a 12px grip. */
+              "pointer-coarse:w-3 pointer-coarse:border-e pointer-coarse:border-border pointer-coarse:bg-transparent pointer-coarse:opacity-100",
+              column.getIsResizing() && "bg-primary opacity-100 pointer-coarse:bg-primary"
             )
           }
         ) : null
@@ -800,7 +809,7 @@ function DataRow({ row, ariaRowIndex, activeCol, onFocus, onRowClick }) {
   const expanded = expandable && row.getIsExpanded();
   const ref = useRef2(null);
   const cells = row.getVisibleCells();
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsx6(
       Table.Row,
       {
@@ -836,7 +845,7 @@ function DataRow({ row, ariaRowIndex, activeCol, onFocus, onRowClick }) {
   ] });
 }
 function SkeletonRows({ count, columnCount }) {
-  return /* @__PURE__ */ jsx6(Fragment3, { children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsx6(Table.Row, { "data-slot": "data-grid-skeleton-row", "aria-hidden": "true", children: Array.from({ length: columnCount }, (_2, cellIndex) => /* @__PURE__ */ jsx6(Table.Cell, { "data-slot": "data-grid-cell", children: /* @__PURE__ */ jsx6(Skeleton, { shape: "text", width: `${55 + (rowIndex * 7 + cellIndex * 13) % 40}%` }) }, cellIndex)) }, rowIndex)) });
+  return /* @__PURE__ */ jsx6(Fragment4, { children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsx6(Table.Row, { "data-slot": "data-grid-skeleton-row", "aria-hidden": "true", children: Array.from({ length: columnCount }, (_2, cellIndex) => /* @__PURE__ */ jsx6(Table.Cell, { "data-slot": "data-grid-cell", children: /* @__PURE__ */ jsx6(Skeleton, { shape: "text", width: `${55 + (rowIndex * 7 + cellIndex * 13) % 40}%` }) }, cellIndex)) }, rowIndex)) });
 }
 function DataGridBody({
   stickyHeader = false,
@@ -876,7 +885,7 @@ function DataGridBody({
       stickyHeader,
       fullWidth: true,
       className: cn4("table-fixed", className),
-      scrollAreaClassName: cn4("rounded-md border border-border", scrollAreaClassName),
+      scrollAreaClassName: cn4("min-w-0 overscroll-x-contain rounded-md border border-border", scrollAreaClassName),
       style: { width: table.getTotalSize(), minWidth: "100%" },
       ...aria,
       children: [
@@ -920,10 +929,12 @@ function DataGridBody({
 
 // src/pagination.tsx
 import { useMemo } from "react";
-import Button4 from "@zuilib/components/button";
-import NativeSelect from "@zuilib/components/native-select";
-import { cn as cn5 } from "@zuilib/components/lib/cn";
+import Button4 from "@zuilib/primitives/button";
+import NativeSelect from "@zuilib/primitives/native-select";
+import { cn as cn5 } from "@zuilib/primitives/lib/cn";
+import { touchSquareTargetClasses } from "@zuilib/primitives/lib/sizes";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var wideOnlyButtonClasses = "hidden @sm:inline-flex";
 function useNumberFormat(locale) {
   return useMemo(() => {
     try {
@@ -956,7 +967,7 @@ function DataGridPagination({ locale: localeProp, className, ...props }) {
       ...props,
       children: [
         /* @__PURE__ */ jsxs4("label", { "data-slot": "data-grid-page-size", className: "flex items-center gap-2", children: [
-          labels.rowsPerPage,
+          /* @__PURE__ */ jsx7("span", { className: "sr-only @sm:not-sr-only", children: labels.rowsPerPage }),
           /* @__PURE__ */ jsx7(
             NativeSelect,
             {
@@ -967,17 +978,17 @@ function DataGridPagination({ locale: localeProp, className, ...props }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx7("p", { "data-slot": "data-grid-range", "aria-live": "polite", className: "m-0 ms-auto tabular-nums", children: loading ? labels.loading : fillLabel(labels.range, { first: numberFormat.format(first), last: numberFormat.format(last), total: numberFormat.format(rowCount) }) }),
+        /* @__PURE__ */ jsx7("p", { "data-slot": "data-grid-range", "aria-live": "polite", className: "m-0 ms-auto whitespace-nowrap tabular-nums", children: loading ? labels.loading : fillLabel(labels.range, { first: numberFormat.format(first), last: numberFormat.format(last), total: numberFormat.format(rowCount) }) }),
         /* @__PURE__ */ jsxs4("div", { "data-slot": "data-grid-page-buttons", className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.firstPage, disabled: !canPrevious, onClick: () => table.setPageIndex(0), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xAB" }) }),
-          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.previousPage, disabled: !canPrevious, onClick: () => table.previousPage(), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2039" }) }),
-          /* @__PURE__ */ jsxs4("span", { "data-slot": "data-grid-page-indicator", className: "px-1 tabular-nums", children: [
+          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.firstPage, disabled: !canPrevious, onClick: () => table.setPageIndex(0), className: cn5(touchSquareTargetClasses, wideOnlyButtonClasses), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xAB" }) }),
+          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.previousPage, disabled: !canPrevious, onClick: () => table.previousPage(), className: touchSquareTargetClasses, children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2039" }) }),
+          /* @__PURE__ */ jsxs4("span", { "data-slot": "data-grid-page-indicator", className: "hidden px-1 tabular-nums @sm:inline", children: [
             pageIndex + 1,
             " / ",
             pageCount
           ] }),
-          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.nextPage, disabled: !canNext, onClick: () => table.nextPage(), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u203A" }) }),
-          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.lastPage, disabled: !canNext, onClick: () => table.setPageIndex(pageCount - 1), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xBB" }) })
+          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.nextPage, disabled: !canNext, onClick: () => table.nextPage(), className: touchSquareTargetClasses, children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u203A" }) }),
+          /* @__PURE__ */ jsx7(Button4, { variant: "ghost", size: "sm", "aria-label": labels.lastPage, disabled: !canNext, onClick: () => table.setPageIndex(pageCount - 1), className: cn5(touchSquareTargetClasses, wideOnlyButtonClasses), children: /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xBB" }) })
         ] })
       ]
     }
@@ -986,8 +997,8 @@ function DataGridPagination({ locale: localeProp, className, ...props }) {
 
 // src/selection-bar.tsx
 import { useEffect as useEffect2 } from "react";
-import Button5 from "@zuilib/components/button";
-import { cn as cn6 } from "@zuilib/components/lib/cn";
+import Button5 from "@zuilib/primitives/button";
+import { cn as cn6 } from "@zuilib/primitives/lib/cn";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function DataGridSelectionBar({ className, ...props }) {
   const { table, state, setState, selectionActions, rowCount, labels, locale, selectAllMatching } = useDataGridContext("SelectionBar");
@@ -1029,7 +1040,7 @@ function DataGridSelectionBar({ className, ...props }) {
             children: fillLabel(labels.selectAllMatching, { count: numberFormat.format(rowCount) })
           }
         ) : null,
-        /* @__PURE__ */ jsx8("span", { className: "flex flex-wrap items-center gap-1", children: selectionActions.map((action) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx8("span", { "data-slot": "data-grid-selection-actions", className: "flex min-w-0 flex-wrap items-center gap-1", children: selectionActions.map((action) => /* @__PURE__ */ jsx8(
           Button5,
           {
             "data-slot": "data-grid-selection-action",
@@ -1050,9 +1061,9 @@ function DataGridSelectionBar({ className, ...props }) {
 
 // src/toolbar.tsx
 import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
-import Badge from "@zuilib/components/badge";
-import SearchInput from "@zuilib/components/search-input";
-import { cn as cn7 } from "@zuilib/components/lib/cn";
+import Badge from "@zuilib/primitives/badge";
+import SearchInput from "@zuilib/primitives/search-input";
+import { cn as cn7 } from "@zuilib/primitives/lib/cn";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function DataGridToolbar({
   showSearch = true,
@@ -1101,7 +1112,7 @@ function DataGridToolbar({
             value: draft,
             onChange: (event) => changeSearch(event.target.value),
             onSubmit: commitSearch,
-            className: "w-64 max-w-full"
+            className: "w-full max-w-full @sm:w-64"
           }
         ) : null,
         showFilterChips && activeFilters.length > 0 ? /* @__PURE__ */ jsx9("ul", { "data-slot": "data-grid-filter-chips", "aria-label": labels.activeFilters, className: "m-0 flex list-none flex-wrap items-center gap-1 p-0", children: activeFilters.map((filter) => {
@@ -1514,7 +1525,7 @@ function DataGridRoot({
       "data-slot": "data-grid",
       "data-density": density,
       "data-loading": loading ? "" : void 0,
-      className: cn8("flex flex-col gap-3 text-foreground", className),
+      className: cn8("@container flex w-full min-w-0 flex-col gap-3 text-foreground", className),
       ...props,
       children: [
         children,
@@ -1548,7 +1559,7 @@ DataGrid.Pagination = DataGridPagination;
 var data_grid_default = DataGrid;
 
 // src/cells.tsx
-import { cn as cn9 } from "@zuilib/components/lib/cn";
+import { cn as cn9 } from "@zuilib/primitives/lib/cn";
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function toDate(value) {
   if (value === null || value === void 0 || value === "") return null;

package/dist/server-adapter.d.ts

@@ -1,6 +1,6 @@
-import { e as DataGridState } from './state-9r5WYKo_.js';
+import { e as DataGridState } from './state-BK7izXrC.js';
 import '@tanstack/react-table';
-import '@zuilib/components/button';
+import '@zuilib/primitives/button';
 
 /**
  * The grid state as a plain request object: what most list endpoints take.

package/dist/{state-9r5WYKo_.d.ts → state-BK7izXrC.d.ts}

@@ -1,5 +1,5 @@
 import { PaginationState, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, RowSelectionState, ExpandedState, ColumnSizingState } from '@tanstack/react-table';
-import { ButtonVariant, ButtonTone } from '@zuilib/components/button';
+import { ButtonVariant, ButtonTone } from '@zuilib/primitives/button';
 
 /**
  * Which columns stick to each edge. Logical directions: `start` is the

package/dist/tailwind.css

@@ -0,0 +1,2 @@
+/** Tailwind v4 source registration for @zuilib/data-grid. */
+@source "./**/*.js";

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

@@ -1,7 +1,7 @@
 import { Row, TableOptions, Table, Updater } from '@tanstack/react-table';
 import { b as DataGridColumnDef } from './columns-Def2RYjD.js';
-import { e as DataGridState } from './state-9r5WYKo_.js';
-import '@zuilib/components/button';
+import { e as DataGridState } from './state-BK7izXrC.js';
+import '@zuilib/primitives/button';
 
 /** Called with the whole next state on every interaction; see `onStateChange`. */
 type DataGridStateChangeHandler = (state: DataGridState) => void;

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@zuilib/data-grid",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "ZUI — an enterprise, server-driven data grid on TanStack Table, styled through ZUI tokens",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -28,21 +30,18 @@
       "types": "./dist/cells.d.ts",
       "import": "./dist/cells.js"
     },
+    "./tailwind.css": "./dist/tailwind.css",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@headlessui/react": "^2.2.0",
-    "@tanstack/react-table": "^8.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "@zuilib/tokens": "^0.2.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@zuilib/components": "^0.2.0"
+    "@tanstack/react-table": "^8.0.0",
+    "@zuilib/primitives": "^0.3.0"
   },
   "devDependencies": {
-    "@headlessui/react": "^2.2.9",
-    "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
@@ -54,8 +53,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^6.0.2",
-    "vitest": "^4.1.11",
-    "@zuilib/tokens": "^0.2.0"
+    "vitest": "^4.1.11"
   },
   "keywords": [
     "data-grid",

package/dist/types-B00kY3c9.d.ts

@@ -1,97 +0,0 @@
-import { ColumnDef, PaginationState, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ColumnPinningState, RowSelectionState, ExpandedState, ColumnSizingState } from '@tanstack/react-table';
-
-/**
- * Everything the grid can change. The consumer owns it: every interaction
- * calls `onStateChange` with the whole next state, and the grid renders
- * whatever comes back (a server round-trip in between is the point).
- */
-interface DataGridState {
-    pagination: PaginationState;
-    sorting: SortingState;
-    columnFilters: ColumnFiltersState;
-    globalFilter: string;
-    columnVisibility: VisibilityState;
-    columnOrder: ColumnOrderState;
-    columnPinning: ColumnPinningState;
-    rowSelection: RowSelectionState;
-    /** Expanded rows, keyed by row id. UI-only: `toQuery` leaves it out. */
-    expanded: ExpandedState;
-    /**
-     * Column widths in px, keyed by column id. Optional: left out, the grid
-     * keeps the widths itself; passed (even `{}`), resizes go out through
-     * `onStateChange` so they can be persisted. UI-only: `toQuery` leaves it out.
-     */
-    columnSizing?: ColumnSizingState;
-}
-declare const DEFAULT_PAGE_SIZE = 25;
-declare const defaultDataGridState: DataGridState;
-/** Fills the keys a consumer left out, so the grid always sees a full state. */
-declare function resolveDataGridState(state: Partial<DataGridState> | undefined): DataGridState;
-type DataGridAlign = 'start' | 'center' | 'end';
-/** A text filter: one string, matched however the server matches it. */
-interface DataGridTextFilter {
-    type: 'text';
-    placeholder?: string;
-}
-/** A facet filter: a list of options, of which any number may be picked. */
-interface DataGridSelectFilter {
-    type: 'select';
-    options: readonly {
-        value: string;
-        label?: string;
-    }[];
-}
-/** A date range: ISO `YYYY-MM-DD` bounds, either side optional. */
-interface DataGridDateRangeFilter {
-    type: 'date-range';
-}
-type DataGridFilter = DataGridTextFilter | DataGridSelectFilter | DataGridDateRangeFilter;
-interface DataGridDateRange {
-    from?: string;
-    to?: string;
-}
-/** The ZUI extras on a TanStack column definition. */
-interface DataGridColumnExtras {
-    /** Double-click or Enter on a cell turns it into an input; see `onCellEdit`. */
-    enableInlineEdit?: boolean;
-    /** Horizontal alignment of the head and the cells; `end` for numbers. */
-    align?: DataGridAlign;
-    /** Initial width in px (TanStack `size`); the user can resize from there. */
-    width?: number;
-    /** Declares the column's filter popover. */
-    filter?: DataGridFilter;
-}
-type DataGridColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue> & DataGridColumnExtras;
-/** The extras may also be declared on `meta` (the TanStack way of extending a column). */
-interface DataGridColumnMeta extends DataGridColumnExtras {
-    /** The column's name in the column manager, the filter chips and the pin labels, when `header` is not a string. */
-    label?: string;
-}
-/** The grid's own strings, overridable for another language. */
-interface DataGridLabels {
-    /** @default 'Pin left' */
-    pinLeft: string;
-    /** @default 'Pin right' */
-    pinRight: string;
-    /** @default 'Unpin' */
-    unpin: string;
-    /** @default 'Expand row' */
-    expandRow: string;
-    /** @default 'Collapse row' */
-    collapseRow: string;
-}
-declare const defaultDataGridLabels: DataGridLabels;
-interface DataGridCellEdit {
-    rowId: string;
-    columnId: string;
-    value: string;
-}
-interface DataGridBulkAction {
-    id: string;
-    label: string;
-    variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
-    onAction: (selectedIds: string[]) => void;
-}
-type DataGridDensity = 'compact' | 'comfortable';
-
-export { type DataGridState as D, type DataGridDensity as a, type DataGridCellEdit as b, type DataGridBulkAction as c, type DataGridLabels as d, DEFAULT_PAGE_SIZE as e, type DataGridAlign as f, type DataGridColumnDef as g, type DataGridColumnExtras as h, type DataGridColumnMeta as i, type DataGridDateRange as j, type DataGridDateRangeFilter as k, type DataGridFilter as l, type DataGridSelectFilter as m, type DataGridTextFilter as n, defaultDataGridLabels as o, defaultDataGridState as p, resolveDataGridState as r };