@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0

package/dist/components/ui/data-table/data-table-filter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter.cjs","sources":["../../../../src/components/ui/data-table/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Operator metadata\n// ---------------------------------------------------------------------------\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains:     \"contains\",\n  equals:       \"equals\",\n  not_equals:   \"not equals\",\n  starts_with:  \"starts with\",\n  ends_with:    \"ends with\",\n  is_empty:     \"is empty\",\n  is_not_empty: \"is not empty\",\n}\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"]\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n]\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n\n  col: any,\n): string {\n  return (\n    columnLabels[colId] ??\n    (col?.columnDef?.meta as { label?: string } | undefined)?.label ??\n    (typeof col?.columnDef?.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\nfunction makeCondition(\n  columnId: string,\n  allowedOperators?: FilterOperator[],\n): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\"\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" }\n}\n\n// ---------------------------------------------------------------------------\n// DataTableFilter\n// ---------------------------------------------------------------------------\n\ninterface DataTableFilterProps {\n  className?: string\n}\n\nfunction DataTableFilter({ className }: DataTableFilterProps) {\n  const { table, columnLabels, filters, setFilters, filterConfig, enableFiltering } =\n    useDataTable()\n\n  if (!enableFiltering) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns: FilterColumnConfig[] =\n    filterConfig.length > 0\n      ? filterConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id }))\n\n  const firstColumn = resolvedColumns[0]\n  const firstColumnId = firstColumn?.columnId ?? \"\"\n\n  function addFilter() {\n    setFilters([...filters, makeCondition(firstColumnId, firstColumn?.operators)])\n  }\n\n  function removeFilter(id: string) {\n    setFilters(filters.filter((f) => f.id !== id))\n  }\n\n  function updateFilter(id: string, patch: Partial<FilterCondition>) {\n    setFilters(filters.map((f) => (f.id === id ? { ...f, ...patch } : f)))\n  }\n\n  function clearAll() {\n    setFilters([])\n  }\n\n  const activeCount = filters.length\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `Filter (${activeCount} active)` : \"Filter\"}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          Filter\n          {activeCount > 0 && (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-filter-panel\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = resolvedColumns.find((c) => c.columnId === condition.columnId)\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator)\n\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  {/* Column selector */}\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(v) => {\n                      const nextConfig = resolvedColumns.find((c) => c.columnId === v)\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\")\n                      updateFilter(condition.id, {\n                        columnId: v,\n                        operator: nextOperator,\n                        value: \"\",\n                      })\n                    }}\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {resolvedColumns.map((c) => {\n                        const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                        return (\n                          <SelectItem key={c.columnId} value={c.columnId}>\n                            {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                          </SelectItem>\n                        )\n                      })}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Operator selector */}\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(v) =>\n                      updateFilter(condition.id, {\n                        operator: v as FilterOperator,\n                        value: \"\",\n                      })\n                    }\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Value input — hidden for value-free operators */}\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(e) => updateFilter(condition.id, { value: e.target.value })}\n                    />\n                  )}\n\n                  {/* Remove button */}\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              )\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={resolvedColumns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableFilter.displayName = \"DataTableFilter\"\n\nexport { DataTableFilter }\nexport type { DataTableFilterProps }\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","getColumnLabel","colId","columnLabels","col","makeCondition","columnId","allowedOperators","operator","DataTableFilter","className","table","filters","setFilters","filterConfig","enableFiltering","useDataTable","allLeafColumns","resolvedColumns","firstColumn","firstColumnId","addFilter","removeFilter","id","f","updateFilter","patch","clearAll","activeCount","jsxs","Popover","jsx","Button","cn","ListFilterIcon","condition","operators","c","isValueFree","Select","v","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","lc","SelectItem","op","Input","e","XIcon","PlusIcon"],"mappings":"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"}
+{"version":3,"file":"data-table-filter.cjs","sources":["../../../../src/components/ui/data-table/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Operator metadata\n// ---------------------------------------------------------------------------\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains:     \"contains\",\n  equals:       \"equals\",\n  not_equals:   \"not equals\",\n  starts_with:  \"starts with\",\n  ends_with:    \"ends with\",\n  is_empty:     \"is empty\",\n  is_not_empty: \"is not empty\",\n}\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"]\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n]\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n\n  col: any,\n): string {\n  return (\n    columnLabels[colId] ??\n    (col?.columnDef?.meta as { label?: string } | undefined)?.label ??\n    (typeof col?.columnDef?.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\nfunction makeCondition(\n  columnId: string,\n  allowedOperators?: FilterOperator[],\n): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\"\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" }\n}\n\n// ---------------------------------------------------------------------------\n// DataTableFilter\n// ---------------------------------------------------------------------------\n\ninterface DataTableFilterProps {\n  className?: string\n}\n\nfunction DataTableFilter({ className }: DataTableFilterProps) {\n  const { table, columnLabels, filters, setFilters, filterConfig, enableFiltering } =\n    useDataTable()\n\n  if (!enableFiltering) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns: FilterColumnConfig[] =\n    filterConfig.length > 0\n      ? filterConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id }))\n\n  const firstColumn = resolvedColumns[0]\n  const firstColumnId = firstColumn?.columnId ?? \"\"\n\n  function addFilter() {\n    setFilters([...filters, makeCondition(firstColumnId, firstColumn?.operators)])\n  }\n\n  function removeFilter(id: string) {\n    setFilters(filters.filter((f) => f.id !== id))\n  }\n\n  function updateFilter(id: string, patch: Partial<FilterCondition>) {\n    setFilters(filters.map((f) => (f.id === id ? { ...f, ...patch } : f)))\n  }\n\n  function clearAll() {\n    setFilters([])\n  }\n\n  const activeCount = filters.length\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `Filter (${activeCount} active)` : \"Filter\"}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          Filter\n          {activeCount > 0 && (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-filter-panel\"\n          aria-label=\"Filter conditions\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-elevation-4 outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = resolvedColumns.find((c) => c.columnId === condition.columnId)\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator)\n\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  {/* Column selector */}\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(v) => {\n                      const nextConfig = resolvedColumns.find((c) => c.columnId === v)\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\")\n                      updateFilter(condition.id, {\n                        columnId: v,\n                        operator: nextOperator,\n                        value: \"\",\n                      })\n                    }}\n                  >\n                    <SelectTrigger aria-label=\"Filter column\" size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {resolvedColumns.map((c) => {\n                        const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                        return (\n                          <SelectItem key={c.columnId} value={c.columnId}>\n                            {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                          </SelectItem>\n                        )\n                      })}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Operator selector */}\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(v) =>\n                      updateFilter(condition.id, {\n                        operator: v as FilterOperator,\n                        value: \"\",\n                      })\n                    }\n                  >\n                    <SelectTrigger aria-label=\"Filter operator\" size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Value input — hidden for value-free operators */}\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(e) => updateFilter(condition.id, { value: e.target.value })}\n                    />\n                  )}\n\n                  {/* Remove button */}\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              )\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={resolvedColumns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableFilter.displayName = \"DataTableFilter\"\n\nexport { DataTableFilter }\nexport type { DataTableFilterProps }\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","getColumnLabel","colId","columnLabels","col","makeCondition","columnId","allowedOperators","operator","DataTableFilter","className","table","filters","setFilters","filterConfig","enableFiltering","useDataTable","allLeafColumns","resolvedColumns","firstColumn","firstColumnId","addFilter","removeFilter","id","f","updateFilter","patch","clearAll","activeCount","jsxs","Popover","jsx","Button","cn","ListFilterIcon","condition","operators","c","isValueFree","Select","v","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","lc","SelectItem","op","Input","e","XIcon","PlusIcon"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-filter.d.ts

@@ -0,0 +1,9 @@
+interface DataTableFilterProps {
+    className?: string;
+}
+declare function DataTableFilter({ className }: DataTableFilterProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DataTableFilter {
+    var displayName: string;
+}
+export { DataTableFilter };
+export type { DataTableFilterProps };

package/dist/components/ui/data-table/data-table-filter.js

@@ -2,9 +2,9 @@ import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import { ListFilterIcon as q, XIcon as P, PlusIcon as V } from "lucide-react";
 import { Popover as f } from "radix-ui";
 import { useDataTable as k } from "./data-table.js";
-import { Button as h } from "../button.js";
-import { Input as U } from "../input.js";
-import { Select as y, SelectTrigger as _, SelectValue as I, SelectContent as N, SelectItem as F } from "../select.js";
+import { Button as h } from "../../../ui/button.js";
+import { Input as U } from "../../../ui/input.js";
+import { Select as y, SelectTrigger as _, SelectValue as F, SelectContent as I, SelectItem as N } from "../../../ui/select.js";
 import { cn as z } from "../../../lib/utils.js";
 const j = {
   contains: "contains",
@@ -23,30 +23,30 @@ const j = {
   "is_empty",
   "is_not_empty"
 ];
-function K(o, s, n) {
-  return s[o] ?? n?.columnDef?.meta?.label ?? (typeof n?.columnDef?.header == "string" ? n.columnDef.header : void 0) ?? o;
+function K(o, i, n) {
+  return i[o] ?? n?.columnDef?.meta?.label ?? (typeof n?.columnDef?.header == "string" ? n.columnDef.header : void 0) ?? o;
 }
-function X(o, s) {
-  const n = s?.[0] ?? "contains";
+function X(o, i) {
+  const n = i?.[0] ?? "contains";
   return { id: crypto.randomUUID(), columnId: o, operator: n, value: "" };
 }
 function $({ className: o }) {
-  const { table: s, columnLabels: n, filters: r, setFilters: m, filterConfig: v, enableFiltering: D } = k();
+  const { table: i, columnLabels: n, filters: r, setFilters: d, filterConfig: v, enableFiltering: D } = k();
   if (!D) return null;
-  const b = s.getAllLeafColumns(), i = v.length > 0 ? v : b.filter((e) => "accessorKey" in e.columnDef || "accessorFn" in e.columnDef).map((e) => ({ columnId: e.id })), C = i[0], A = C?.columnId ?? "";
+  const b = i.getAllLeafColumns(), s = v.length > 0 ? v : b.filter((e) => "accessorKey" in e.columnDef || "accessorFn" in e.columnDef).map((e) => ({ columnId: e.id })), C = s[0], A = C?.columnId ?? "";
   function L() {
-    m([...r, X(A, C?.operators)]);
+    d([...r, X(A, C?.operators)]);
   }
   function O(e) {
-    m(r.filter((u) => u.id !== e));
+    d(r.filter((u) => u.id !== e));
   }
   function g(e, u) {
-    m(r.map((d) => d.id === e ? { ...d, ...u } : d));
+    d(r.map((c) => c.id === e ? { ...c, ...u } : c));
   }
   function R() {
-    m([]);
+    d([]);
   }
-  const c = r.length;
+  const m = r.length;
   return /* @__PURE__ */ l(f.Root, { children: [
     /* @__PURE__ */ t(f.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
       h,
@@ -56,11 +56,11 @@ function $({ className: o }) {
         size: "sm",
         "data-slot": "data-table-filter",
         className: z(o),
-        "aria-label": c > 0 ? `Filter (${c} active)` : "Filter",
+        "aria-label": m > 0 ? `Filter (${m} active)` : "Filter",
         children: [
           /* @__PURE__ */ t(q, { className: "size-3.5" }),
           "Filter",
-          c > 0 && /* @__PURE__ */ t("span", { className: "flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground", children: c })
+          m > 0 && /* @__PURE__ */ t("span", { className: "flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground", children: m })
         ]
       }
     ) }),
@@ -68,10 +68,11 @@ function $({ className: o }) {
       f.Content,
       {
         "data-slot": "data-table-filter-panel",
+        "aria-label": "Filter conditions",
         align: "end",
         sideOffset: 4,
         className: z(
-          "z-50 min-w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none",
+          "z-50 min-w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-elevation-4 outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -79,14 +80,14 @@ function $({ className: o }) {
         ),
         children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
           r.map((e) => {
-            const d = i.find((a) => a.columnId === e.columnId)?.operators ?? w, T = B.includes(e.operator);
+            const c = s.find((a) => a.columnId === e.columnId)?.operators ?? w, T = B.includes(e.operator);
             return /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ l(
                 y,
                 {
                   value: e.columnId,
                   onValueChange: (a) => {
-                    const p = i.find((S) => S.columnId === a)?.operators ?? w, E = p.includes(e.operator) ? e.operator : p[0] ?? "contains";
+                    const p = s.find((S) => S.columnId === a)?.operators ?? w, E = p.includes(e.operator) ? e.operator : p[0] ?? "contains";
                     g(e.id, {
                       columnId: a,
                       operator: E,
@@ -94,10 +95,10 @@ function $({ className: o }) {
                     });
                   },
                   children: [
-                    /* @__PURE__ */ t(_, { size: "sm", className: "w-36", children: /* @__PURE__ */ t(I, {}) }),
-                    /* @__PURE__ */ t(N, { children: i.map((a) => {
+                    /* @__PURE__ */ t(_, { "aria-label": "Filter column", size: "sm", className: "w-36", children: /* @__PURE__ */ t(F, {}) }),
+                    /* @__PURE__ */ t(I, { children: s.map((a) => {
                       const x = b.find((p) => p.id === a.columnId);
-                      return /* @__PURE__ */ t(F, { value: a.columnId, children: a.label ?? K(a.columnId, n, x) }, a.columnId);
+                      return /* @__PURE__ */ t(N, { value: a.columnId, children: a.label ?? K(a.columnId, n, x) }, a.columnId);
                     }) })
                   ]
                 }
@@ -111,8 +112,8 @@ function $({ className: o }) {
                     value: ""
                   }),
                   children: [
-                    /* @__PURE__ */ t(_, { size: "sm", className: "w-32", children: /* @__PURE__ */ t(I, {}) }),
-                    /* @__PURE__ */ t(N, { children: d.map((a) => /* @__PURE__ */ t(F, { value: a, children: j[a] }, a)) })
+                    /* @__PURE__ */ t(_, { "aria-label": "Filter operator", size: "sm", className: "w-32", children: /* @__PURE__ */ t(F, {}) }),
+                    /* @__PURE__ */ t(I, { children: c.map((a) => /* @__PURE__ */ t(N, { value: a, children: j[a] }, a)) })
                   ]
                 }
               ),
@@ -147,7 +148,7 @@ function $({ className: o }) {
                 variant: "outline",
                 size: "sm",
                 onClick: L,
-                disabled: i.length === 0,
+                disabled: s.length === 0,
                 children: [
                   /* @__PURE__ */ t(V, { className: "size-3.5" }),
                   "Add filter"

package/dist/components/ui/data-table/data-table-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter.js","sources":["../../../../src/components/ui/data-table/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Operator metadata\n// ---------------------------------------------------------------------------\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains:     \"contains\",\n  equals:       \"equals\",\n  not_equals:   \"not equals\",\n  starts_with:  \"starts with\",\n  ends_with:    \"ends with\",\n  is_empty:     \"is empty\",\n  is_not_empty: \"is not empty\",\n}\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"]\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n]\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n\n  col: any,\n): string {\n  return (\n    columnLabels[colId] ??\n    (col?.columnDef?.meta as { label?: string } | undefined)?.label ??\n    (typeof col?.columnDef?.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\nfunction makeCondition(\n  columnId: string,\n  allowedOperators?: FilterOperator[],\n): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\"\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" }\n}\n\n// ---------------------------------------------------------------------------\n// DataTableFilter\n// ---------------------------------------------------------------------------\n\ninterface DataTableFilterProps {\n  className?: string\n}\n\nfunction DataTableFilter({ className }: DataTableFilterProps) {\n  const { table, columnLabels, filters, setFilters, filterConfig, enableFiltering } =\n    useDataTable()\n\n  if (!enableFiltering) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns: FilterColumnConfig[] =\n    filterConfig.length > 0\n      ? filterConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id }))\n\n  const firstColumn = resolvedColumns[0]\n  const firstColumnId = firstColumn?.columnId ?? \"\"\n\n  function addFilter() {\n    setFilters([...filters, makeCondition(firstColumnId, firstColumn?.operators)])\n  }\n\n  function removeFilter(id: string) {\n    setFilters(filters.filter((f) => f.id !== id))\n  }\n\n  function updateFilter(id: string, patch: Partial<FilterCondition>) {\n    setFilters(filters.map((f) => (f.id === id ? { ...f, ...patch } : f)))\n  }\n\n  function clearAll() {\n    setFilters([])\n  }\n\n  const activeCount = filters.length\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `Filter (${activeCount} active)` : \"Filter\"}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          Filter\n          {activeCount > 0 && (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-filter-panel\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = resolvedColumns.find((c) => c.columnId === condition.columnId)\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator)\n\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  {/* Column selector */}\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(v) => {\n                      const nextConfig = resolvedColumns.find((c) => c.columnId === v)\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\")\n                      updateFilter(condition.id, {\n                        columnId: v,\n                        operator: nextOperator,\n                        value: \"\",\n                      })\n                    }}\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {resolvedColumns.map((c) => {\n                        const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                        return (\n                          <SelectItem key={c.columnId} value={c.columnId}>\n                            {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                          </SelectItem>\n                        )\n                      })}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Operator selector */}\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(v) =>\n                      updateFilter(condition.id, {\n                        operator: v as FilterOperator,\n                        value: \"\",\n                      })\n                    }\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Value input — hidden for value-free operators */}\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(e) => updateFilter(condition.id, { value: e.target.value })}\n                    />\n                  )}\n\n                  {/* Remove button */}\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              )\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={resolvedColumns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableFilter.displayName = \"DataTableFilter\"\n\nexport { DataTableFilter }\nexport type { DataTableFilterProps }\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","getColumnLabel","colId","columnLabels","col","makeCondition","columnId","allowedOperators","operator","DataTableFilter","className","table","filters","setFilters","filterConfig","enableFiltering","useDataTable","allLeafColumns","resolvedColumns","firstColumn","firstColumnId","addFilter","removeFilter","id","f","updateFilter","patch","clearAll","activeCount","jsxs","Popover","jsx","Button","cn","ListFilterIcon","condition","operators","c","isValueFree","Select","v","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","lc","SelectItem","op","Input","e","XIcon","PlusIcon"],"mappings":"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"}
+{"version":3,"file":"data-table-filter.js","sources":["../../../../src/components/ui/data-table/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Operator metadata\n// ---------------------------------------------------------------------------\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains:     \"contains\",\n  equals:       \"equals\",\n  not_equals:   \"not equals\",\n  starts_with:  \"starts with\",\n  ends_with:    \"ends with\",\n  is_empty:     \"is empty\",\n  is_not_empty: \"is not empty\",\n}\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"]\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n]\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n\n  col: any,\n): string {\n  return (\n    columnLabels[colId] ??\n    (col?.columnDef?.meta as { label?: string } | undefined)?.label ??\n    (typeof col?.columnDef?.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\nfunction makeCondition(\n  columnId: string,\n  allowedOperators?: FilterOperator[],\n): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\"\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" }\n}\n\n// ---------------------------------------------------------------------------\n// DataTableFilter\n// ---------------------------------------------------------------------------\n\ninterface DataTableFilterProps {\n  className?: string\n}\n\nfunction DataTableFilter({ className }: DataTableFilterProps) {\n  const { table, columnLabels, filters, setFilters, filterConfig, enableFiltering } =\n    useDataTable()\n\n  if (!enableFiltering) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns: FilterColumnConfig[] =\n    filterConfig.length > 0\n      ? filterConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id }))\n\n  const firstColumn = resolvedColumns[0]\n  const firstColumnId = firstColumn?.columnId ?? \"\"\n\n  function addFilter() {\n    setFilters([...filters, makeCondition(firstColumnId, firstColumn?.operators)])\n  }\n\n  function removeFilter(id: string) {\n    setFilters(filters.filter((f) => f.id !== id))\n  }\n\n  function updateFilter(id: string, patch: Partial<FilterCondition>) {\n    setFilters(filters.map((f) => (f.id === id ? { ...f, ...patch } : f)))\n  }\n\n  function clearAll() {\n    setFilters([])\n  }\n\n  const activeCount = filters.length\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `Filter (${activeCount} active)` : \"Filter\"}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          Filter\n          {activeCount > 0 && (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-filter-panel\"\n          aria-label=\"Filter conditions\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-elevation-4 outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = resolvedColumns.find((c) => c.columnId === condition.columnId)\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator)\n\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  {/* Column selector */}\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(v) => {\n                      const nextConfig = resolvedColumns.find((c) => c.columnId === v)\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\")\n                      updateFilter(condition.id, {\n                        columnId: v,\n                        operator: nextOperator,\n                        value: \"\",\n                      })\n                    }}\n                  >\n                    <SelectTrigger aria-label=\"Filter column\" size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {resolvedColumns.map((c) => {\n                        const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                        return (\n                          <SelectItem key={c.columnId} value={c.columnId}>\n                            {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                          </SelectItem>\n                        )\n                      })}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Operator selector */}\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(v) =>\n                      updateFilter(condition.id, {\n                        operator: v as FilterOperator,\n                        value: \"\",\n                      })\n                    }\n                  >\n                    <SelectTrigger aria-label=\"Filter operator\" size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Value input — hidden for value-free operators */}\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(e) => updateFilter(condition.id, { value: e.target.value })}\n                    />\n                  )}\n\n                  {/* Remove button */}\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              )\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={resolvedColumns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableFilter.displayName = \"DataTableFilter\"\n\nexport { DataTableFilter }\nexport type { DataTableFilterProps }\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","getColumnLabel","colId","columnLabels","col","makeCondition","columnId","allowedOperators","operator","DataTableFilter","className","table","filters","setFilters","filterConfig","enableFiltering","useDataTable","allLeafColumns","resolvedColumns","firstColumn","firstColumnId","addFilter","removeFilter","id","f","updateFilter","patch","clearAll","activeCount","jsxs","Popover","jsx","Button","cn","ListFilterIcon","condition","operators","c","isValueFree","Select","v","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","lc","SelectItem","op","Input","e","XIcon","PlusIcon"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-group.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("lucide-react"),d=require("radix-ui"),C=require("react"),G=require("./data-table.cjs"),f=require("../button.cjs"),o=require("../select.cjs"),h=require("../../../lib/utils.cjs");function j(l,s,n){const r=n?.columnDef.meta;return s[l]??r?.label??(typeof n?.columnDef.header=="string"?n.columnDef.header:void 0)??l}const m="__none__";function v({className:l}){const s=C.useId(),{table:n,columnLabels:r,grouping:a,setGrouping:p,groupConfig:g,enableGrouping:I}=G.useDataTable();if(!I)return null;const c=n.getAllLeafColumns(),x=g.length>0?g:c.filter(t=>"accessorKey"in t.columnDef||"accessorFn"in t.columnDef).map(t=>({columnId:t.id,label:void 0})),i=a?x.find(t=>t.columnId===a)??{columnId:a}:null,u=i?i.label??j(i.columnId,r,c.find(t=>t.id===i.columnId)):null;return e.jsxs(d.Popover.Root,{children:[e.jsx(d.Popover.Trigger,{asChild:!0,children:e.jsxs(f.Button,{type:"button",variant:"outline",size:"sm","data-slot":"data-table-group",className:h.cn(l),"aria-label":u?`Grouped by ${u}`:"Group by",children:[e.jsx(b.GroupIcon,{className:"size-3.5"}),u?e.jsxs(e.Fragment,{children:["Grouped by",e.jsx("span",{className:"rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground",children:u})]}):"Group"]})}),e.jsx(d.Popover.Portal,{children:e.jsx(d.Popover.Content,{"data-slot":"data-table-group-panel",align:"end",sideOffset:4,className:h.cn("z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2"),children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx("label",{className:"text-xs font-medium text-muted-foreground",htmlFor:s,children:"Group rows by"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(o.Select,{value:a??m,onValueChange:t=>p(t===m?null:t),children:[e.jsx(o.SelectTrigger,{id:s,size:"sm",className:"w-44",children:e.jsx(o.SelectValue,{placeholder:"Select column"})}),e.jsxs(o.SelectContent,{children:[e.jsx(o.SelectItem,{value:m,children:"None"}),x.map(t=>{const N=c.find(y=>y.id===t.columnId);return e.jsx(o.SelectItem,{value:t.columnId,children:t.label??j(t.columnId,r,N)},t.columnId)})]})]}),a&&e.jsx(f.Button,{type:"button",variant:"ghost",size:"icon",className:"size-8 shrink-0 text-muted-foreground hover:text-foreground",onClick:()=>p(null),"aria-label":"Clear grouping",children:e.jsx(b.XIcon,{className:"size-3.5"})})]})]})})})]})}v.displayName="DataTableGroup";exports.DataTableGroup=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("lucide-react"),d=require("radix-ui"),N=require("react"),C=require("./data-table.cjs"),f=require("../../../ui/button.cjs"),o=require("../../../ui/select.cjs"),h=require("../../../lib/utils.cjs");function j(l,s,n){const r=n?.columnDef.meta;return s[l]??r?.label??(typeof n?.columnDef.header=="string"?n.columnDef.header:void 0)??l}const m="__none__";function v({className:l}){const s=N.useId(),{table:n,columnLabels:r,grouping:a,setGrouping:p,groupConfig:b,enableGrouping:I}=C.useDataTable();if(!I)return null;const c=n.getAllLeafColumns(),g=b.length>0?b:c.filter(t=>"accessorKey"in t.columnDef||"accessorFn"in t.columnDef).map(t=>({columnId:t.id,label:void 0})),i=a?g.find(t=>t.columnId===a)??{columnId:a}:null,u=i?i.label??j(i.columnId,r,c.find(t=>t.id===i.columnId)):null;return e.jsxs(d.Popover.Root,{children:[e.jsx(d.Popover.Trigger,{asChild:!0,children:e.jsxs(f.Button,{type:"button",variant:"outline",size:"sm","data-slot":"data-table-group",className:h.cn(l),"aria-label":u?`Grouped by ${u}`:"Group by",children:[e.jsx(x.GroupIcon,{className:"size-3.5"}),u?e.jsxs(e.Fragment,{children:["Grouped by",e.jsx("span",{className:"rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground",children:u})]}):"Group"]})}),e.jsx(d.Popover.Portal,{children:e.jsx(d.Popover.Content,{"data-slot":"data-table-group-panel","aria-label":"Group rows by",align:"end",sideOffset:4,className:h.cn("z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-elevation-4 outline-none","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2"),children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx("label",{className:"text-xs font-medium text-muted-foreground",htmlFor:s,children:"Group rows by"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(o.Select,{value:a??m,onValueChange:t=>p(t===m?null:t),children:[e.jsx(o.SelectTrigger,{id:s,size:"sm",className:"w-44",children:e.jsx(o.SelectValue,{placeholder:"Select column"})}),e.jsxs(o.SelectContent,{children:[e.jsx(o.SelectItem,{value:m,children:"None"}),g.map(t=>{const y=c.find(G=>G.id===t.columnId);return e.jsx(o.SelectItem,{value:t.columnId,children:t.label??j(t.columnId,r,y)},t.columnId)})]})]}),a&&e.jsx(f.Button,{type:"button",variant:"ghost",size:"icon",className:"size-8 shrink-0 text-muted-foreground hover:text-foreground",onClick:()=>p(null),"aria-label":"Clear grouping",children:e.jsx(x.XIcon,{className:"size-3.5"})})]})]})})})]})}v.displayName="DataTableGroup";exports.DataTableGroup=v;
 //# sourceMappingURL=data-table-group.cjs.map

package/dist/components/ui/data-table/data-table-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-group.cjs","sources":["../../../../src/components/ui/data-table/data-table-group.tsx"],"sourcesContent":["\"use client\"\n\nimport { GroupIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\nimport { useId } from \"react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { Column } from \"@tanstack/react-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n  col: Column<unknown, unknown> | undefined,\n): string {\n  const meta = col?.columnDef.meta as { label?: string } | undefined\n  return (\n    columnLabels[colId] ??\n    meta?.label ??\n    (typeof col?.columnDef.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\n// ---------------------------------------------------------------------------\n// DataTableGroup\n// ---------------------------------------------------------------------------\n\nconst NO_GROUPING = \"__none__\"\n\ninterface DataTableGroupProps {\n  className?: string\n}\n\nfunction DataTableGroup({ className }: DataTableGroupProps) {\n  const selectId = useId()\n  const {\n    table,\n    columnLabels,\n    grouping,\n    setGrouping,\n    groupConfig,\n    enableGrouping,\n  } = useDataTable()\n\n  if (!enableGrouping) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns =\n    groupConfig.length > 0\n      ? groupConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id, label: undefined as string | undefined }))\n\n  const activeColumn = grouping\n    ? resolvedColumns.find((c) => c.columnId === grouping) ?? { columnId: grouping }\n    : null\n\n  const activeColumnLabel = activeColumn\n    ? activeColumn.label ??\n      getColumnLabel(\n        activeColumn.columnId,\n        columnLabels,\n        allLeafColumns.find((lc) => lc.id === activeColumn.columnId),\n      )\n    : null\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-group\"\n          className={cn(className)}\n          aria-label={\n            activeColumnLabel ? `Grouped by ${activeColumnLabel}` : \"Group by\"\n          }\n        >\n          <GroupIcon className=\"size-3.5\" />\n          {activeColumnLabel ? (\n            <>\n              Grouped by\n              <span className=\"rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground\">\n                {activeColumnLabel}\n              </span>\n            </>\n          ) : (\n            \"Group\"\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-group-panel\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            <label\n              className=\"text-xs font-medium text-muted-foreground\"\n              htmlFor={selectId}\n            >\n              Group rows by\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <Select\n                value={grouping ?? NO_GROUPING}\n                onValueChange={(v) => setGrouping(v === NO_GROUPING ? null : v)}\n              >\n                <SelectTrigger\n                  id={selectId}\n                  size=\"sm\"\n                  className=\"w-44\"\n                >\n                  <SelectValue placeholder=\"Select column\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value={NO_GROUPING}>None</SelectItem>\n                  {resolvedColumns.map((c) => {\n                    const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                    return (\n                      <SelectItem key={c.columnId} value={c.columnId}>\n                        {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                      </SelectItem>\n                    )\n                  })}\n                </SelectContent>\n              </Select>\n              {grouping && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                  onClick={() => setGrouping(null)}\n                  aria-label=\"Clear grouping\"\n                >\n                  <XIcon className=\"size-3.5\" />\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableGroup.displayName = \"DataTableGroup\"\n\nexport { DataTableGroup }\nexport type { DataTableGroupProps }\n"],"names":["getColumnLabel","colId","columnLabels","col","meta","NO_GROUPING","DataTableGroup","className","selectId","useId","table","grouping","setGrouping","groupConfig","enableGrouping","useDataTable","allLeafColumns","resolvedColumns","activeColumn","c","activeColumnLabel","lc","jsxs","Popover","jsx","Button","cn","GroupIcon","Fragment","Select","v","SelectTrigger","SelectValue","SelectContent","SelectItem","XIcon"],"mappings":"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"}
+{"version":3,"file":"data-table-group.cjs","sources":["../../../../src/components/ui/data-table/data-table-group.tsx"],"sourcesContent":["\"use client\"\n\nimport { GroupIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\nimport { useId } from \"react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { Column } from \"@tanstack/react-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n  col: Column<unknown, unknown> | undefined,\n): string {\n  const meta = col?.columnDef.meta as { label?: string } | undefined\n  return (\n    columnLabels[colId] ??\n    meta?.label ??\n    (typeof col?.columnDef.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\n// ---------------------------------------------------------------------------\n// DataTableGroup\n// ---------------------------------------------------------------------------\n\nconst NO_GROUPING = \"__none__\"\n\ninterface DataTableGroupProps {\n  className?: string\n}\n\nfunction DataTableGroup({ className }: DataTableGroupProps) {\n  const selectId = useId()\n  const {\n    table,\n    columnLabels,\n    grouping,\n    setGrouping,\n    groupConfig,\n    enableGrouping,\n  } = useDataTable()\n\n  if (!enableGrouping) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns =\n    groupConfig.length > 0\n      ? groupConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id, label: undefined as string | undefined }))\n\n  const activeColumn = grouping\n    ? resolvedColumns.find((c) => c.columnId === grouping) ?? { columnId: grouping }\n    : null\n\n  const activeColumnLabel = activeColumn\n    ? activeColumn.label ??\n      getColumnLabel(\n        activeColumn.columnId,\n        columnLabels,\n        allLeafColumns.find((lc) => lc.id === activeColumn.columnId),\n      )\n    : null\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-group\"\n          className={cn(className)}\n          aria-label={\n            activeColumnLabel ? `Grouped by ${activeColumnLabel}` : \"Group by\"\n          }\n        >\n          <GroupIcon className=\"size-3.5\" />\n          {activeColumnLabel ? (\n            <>\n              Grouped by\n              <span className=\"rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground\">\n                {activeColumnLabel}\n              </span>\n            </>\n          ) : (\n            \"Group\"\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-group-panel\"\n          aria-label=\"Group rows by\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-elevation-4 outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            <label\n              className=\"text-xs font-medium text-muted-foreground\"\n              htmlFor={selectId}\n            >\n              Group rows by\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <Select\n                value={grouping ?? NO_GROUPING}\n                onValueChange={(v) => setGrouping(v === NO_GROUPING ? null : v)}\n              >\n                <SelectTrigger\n                  id={selectId}\n                  size=\"sm\"\n                  className=\"w-44\"\n                >\n                  <SelectValue placeholder=\"Select column\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value={NO_GROUPING}>None</SelectItem>\n                  {resolvedColumns.map((c) => {\n                    const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                    return (\n                      <SelectItem key={c.columnId} value={c.columnId}>\n                        {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                      </SelectItem>\n                    )\n                  })}\n                </SelectContent>\n              </Select>\n              {grouping && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                  onClick={() => setGrouping(null)}\n                  aria-label=\"Clear grouping\"\n                >\n                  <XIcon className=\"size-3.5\" />\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableGroup.displayName = \"DataTableGroup\"\n\nexport { DataTableGroup }\nexport type { DataTableGroupProps }\n"],"names":["getColumnLabel","colId","columnLabels","col","meta","NO_GROUPING","DataTableGroup","className","selectId","useId","table","grouping","setGrouping","groupConfig","enableGrouping","useDataTable","allLeafColumns","resolvedColumns","activeColumn","c","activeColumnLabel","lc","jsxs","Popover","jsx","Button","cn","GroupIcon","Fragment","Select","v","SelectTrigger","SelectValue","SelectContent","SelectItem","XIcon"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-group.d.ts

@@ -0,0 +1,9 @@
+interface DataTableGroupProps {
+    className?: string;
+}
+declare function DataTableGroup({ className }: DataTableGroupProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DataTableGroup {
+    var displayName: string;
+}
+export { DataTableGroup };
+export type { DataTableGroupProps };

package/dist/components/ui/data-table/data-table-group.js

@@ -3,17 +3,17 @@ import { GroupIcon as y, XIcon as z } from "lucide-react";
 import { Popover as m } from "radix-ui";
 import { useId as D } from "react";
 import { useDataTable as S } from "./data-table.js";
-import { Button as b } from "../button.js";
-import { Select as L, SelectTrigger as T, SelectValue as _, SelectContent as w, SelectItem as h } from "../select.js";
-import { cn as x } from "../../../lib/utils.js";
-function v(a, r, n) {
-  const i = n?.columnDef.meta;
-  return r[a] ?? i?.label ?? (typeof n?.columnDef.header == "string" ? n.columnDef.header : void 0) ?? a;
+import { Button as b } from "../../../ui/button.js";
+import { Select as w, SelectTrigger as L, SelectValue as T, SelectContent as _, SelectItem as h } from "../../../ui/select.js";
+import { cn as v } from "../../../lib/utils.js";
+function x(n, r, a) {
+  const i = a?.columnDef.meta;
+  return r[n] ?? i?.label ?? (typeof a?.columnDef.header == "string" ? a.columnDef.header : void 0) ?? n;
 }
 const c = "__none__";
-function F({ className: a }) {
+function F({ className: n }) {
   const r = D(), {
-    table: n,
+    table: a,
     columnLabels: i,
     grouping: l,
     setGrouping: p,
@@ -21,7 +21,7 @@ function F({ className: a }) {
     enableGrouping: I
   } = S();
   if (!I) return null;
-  const u = n.getAllLeafColumns(), g = f.length > 0 ? f : u.filter((e) => "accessorKey" in e.columnDef || "accessorFn" in e.columnDef).map((e) => ({ columnId: e.id, label: void 0 })), d = l ? g.find((e) => e.columnId === l) ?? { columnId: l } : null, s = d ? d.label ?? v(
+  const u = a.getAllLeafColumns(), g = f.length > 0 ? f : u.filter((e) => "accessorKey" in e.columnDef || "accessorFn" in e.columnDef).map((e) => ({ columnId: e.id, label: void 0 })), d = l ? g.find((e) => e.columnId === l) ?? { columnId: l } : null, s = d ? d.label ?? x(
     d.columnId,
     i,
     u.find((e) => e.id === d.columnId)
@@ -34,7 +34,7 @@ function F({ className: a }) {
         variant: "outline",
         size: "sm",
         "data-slot": "data-table-group",
-        className: x(a),
+        className: v(n),
         "aria-label": s ? `Grouped by ${s}` : "Group by",
         children: [
           /* @__PURE__ */ o(y, { className: "size-3.5" }),
@@ -49,10 +49,11 @@ function F({ className: a }) {
       m.Content,
       {
         "data-slot": "data-table-group-panel",
+        "aria-label": "Group rows by",
         align: "end",
         sideOffset: 4,
-        className: x(
-          "z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none",
+        className: v(
+          "z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-elevation-4 outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -69,25 +70,25 @@ function F({ className: a }) {
           ),
           /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ t(
-              L,
+              w,
               {
                 value: l ?? c,
                 onValueChange: (e) => p(e === c ? null : e),
                 children: [
                   /* @__PURE__ */ o(
-                    T,
+                    L,
                     {
                       id: r,
                       size: "sm",
                       className: "w-44",
-                      children: /* @__PURE__ */ o(_, { placeholder: "Select column" })
+                      children: /* @__PURE__ */ o(T, { placeholder: "Select column" })
                     }
                   ),
-                  /* @__PURE__ */ t(w, { children: [
+                  /* @__PURE__ */ t(_, { children: [
                     /* @__PURE__ */ o(h, { value: c, children: "None" }),
                     g.map((e) => {
                       const N = u.find((C) => C.id === e.columnId);
-                      return /* @__PURE__ */ o(h, { value: e.columnId, children: e.label ?? v(e.columnId, i, N) }, e.columnId);
+                      return /* @__PURE__ */ o(h, { value: e.columnId, children: e.label ?? x(e.columnId, i, N) }, e.columnId);
                     })
                   ] })
                 ]

package/dist/components/ui/data-table/data-table-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-group.js","sources":["../../../../src/components/ui/data-table/data-table-group.tsx"],"sourcesContent":["\"use client\"\n\nimport { GroupIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\nimport { useId } from \"react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { Column } from \"@tanstack/react-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n  col: Column<unknown, unknown> | undefined,\n): string {\n  const meta = col?.columnDef.meta as { label?: string } | undefined\n  return (\n    columnLabels[colId] ??\n    meta?.label ??\n    (typeof col?.columnDef.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\n// ---------------------------------------------------------------------------\n// DataTableGroup\n// ---------------------------------------------------------------------------\n\nconst NO_GROUPING = \"__none__\"\n\ninterface DataTableGroupProps {\n  className?: string\n}\n\nfunction DataTableGroup({ className }: DataTableGroupProps) {\n  const selectId = useId()\n  const {\n    table,\n    columnLabels,\n    grouping,\n    setGrouping,\n    groupConfig,\n    enableGrouping,\n  } = useDataTable()\n\n  if (!enableGrouping) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns =\n    groupConfig.length > 0\n      ? groupConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id, label: undefined as string | undefined }))\n\n  const activeColumn = grouping\n    ? resolvedColumns.find((c) => c.columnId === grouping) ?? { columnId: grouping }\n    : null\n\n  const activeColumnLabel = activeColumn\n    ? activeColumn.label ??\n      getColumnLabel(\n        activeColumn.columnId,\n        columnLabels,\n        allLeafColumns.find((lc) => lc.id === activeColumn.columnId),\n      )\n    : null\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-group\"\n          className={cn(className)}\n          aria-label={\n            activeColumnLabel ? `Grouped by ${activeColumnLabel}` : \"Group by\"\n          }\n        >\n          <GroupIcon className=\"size-3.5\" />\n          {activeColumnLabel ? (\n            <>\n              Grouped by\n              <span className=\"rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground\">\n                {activeColumnLabel}\n              </span>\n            </>\n          ) : (\n            \"Group\"\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-group-panel\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            <label\n              className=\"text-xs font-medium text-muted-foreground\"\n              htmlFor={selectId}\n            >\n              Group rows by\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <Select\n                value={grouping ?? NO_GROUPING}\n                onValueChange={(v) => setGrouping(v === NO_GROUPING ? null : v)}\n              >\n                <SelectTrigger\n                  id={selectId}\n                  size=\"sm\"\n                  className=\"w-44\"\n                >\n                  <SelectValue placeholder=\"Select column\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value={NO_GROUPING}>None</SelectItem>\n                  {resolvedColumns.map((c) => {\n                    const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                    return (\n                      <SelectItem key={c.columnId} value={c.columnId}>\n                        {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                      </SelectItem>\n                    )\n                  })}\n                </SelectContent>\n              </Select>\n              {grouping && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                  onClick={() => setGrouping(null)}\n                  aria-label=\"Clear grouping\"\n                >\n                  <XIcon className=\"size-3.5\" />\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableGroup.displayName = \"DataTableGroup\"\n\nexport { DataTableGroup }\nexport type { DataTableGroupProps }\n"],"names":["getColumnLabel","colId","columnLabels","col","meta","NO_GROUPING","DataTableGroup","className","selectId","useId","table","grouping","setGrouping","groupConfig","enableGrouping","useDataTable","allLeafColumns","resolvedColumns","activeColumn","c","activeColumnLabel","lc","jsxs","Popover","jsx","Button","cn","GroupIcon","Fragment","Select","v","SelectTrigger","SelectValue","SelectContent","SelectItem","XIcon"],"mappings":"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"}
+{"version":3,"file":"data-table-group.js","sources":["../../../../src/components/ui/data-table/data-table-group.tsx"],"sourcesContent":["\"use client\"\n\nimport { GroupIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\nimport { useId } from \"react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { Column } from \"@tanstack/react-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n  col: Column<unknown, unknown> | undefined,\n): string {\n  const meta = col?.columnDef.meta as { label?: string } | undefined\n  return (\n    columnLabels[colId] ??\n    meta?.label ??\n    (typeof col?.columnDef.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\n// ---------------------------------------------------------------------------\n// DataTableGroup\n// ---------------------------------------------------------------------------\n\nconst NO_GROUPING = \"__none__\"\n\ninterface DataTableGroupProps {\n  className?: string\n}\n\nfunction DataTableGroup({ className }: DataTableGroupProps) {\n  const selectId = useId()\n  const {\n    table,\n    columnLabels,\n    grouping,\n    setGrouping,\n    groupConfig,\n    enableGrouping,\n  } = useDataTable()\n\n  if (!enableGrouping) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns =\n    groupConfig.length > 0\n      ? groupConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id, label: undefined as string | undefined }))\n\n  const activeColumn = grouping\n    ? resolvedColumns.find((c) => c.columnId === grouping) ?? { columnId: grouping }\n    : null\n\n  const activeColumnLabel = activeColumn\n    ? activeColumn.label ??\n      getColumnLabel(\n        activeColumn.columnId,\n        columnLabels,\n        allLeafColumns.find((lc) => lc.id === activeColumn.columnId),\n      )\n    : null\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-group\"\n          className={cn(className)}\n          aria-label={\n            activeColumnLabel ? `Grouped by ${activeColumnLabel}` : \"Group by\"\n          }\n        >\n          <GroupIcon className=\"size-3.5\" />\n          {activeColumnLabel ? (\n            <>\n              Grouped by\n              <span className=\"rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground\">\n                {activeColumnLabel}\n              </span>\n            </>\n          ) : (\n            \"Group\"\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-group-panel\"\n          aria-label=\"Group rows by\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-elevation-4 outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            <label\n              className=\"text-xs font-medium text-muted-foreground\"\n              htmlFor={selectId}\n            >\n              Group rows by\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <Select\n                value={grouping ?? NO_GROUPING}\n                onValueChange={(v) => setGrouping(v === NO_GROUPING ? null : v)}\n              >\n                <SelectTrigger\n                  id={selectId}\n                  size=\"sm\"\n                  className=\"w-44\"\n                >\n                  <SelectValue placeholder=\"Select column\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value={NO_GROUPING}>None</SelectItem>\n                  {resolvedColumns.map((c) => {\n                    const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                    return (\n                      <SelectItem key={c.columnId} value={c.columnId}>\n                        {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                      </SelectItem>\n                    )\n                  })}\n                </SelectContent>\n              </Select>\n              {grouping && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                  onClick={() => setGrouping(null)}\n                  aria-label=\"Clear grouping\"\n                >\n                  <XIcon className=\"size-3.5\" />\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableGroup.displayName = \"DataTableGroup\"\n\nexport { DataTableGroup }\nexport type { DataTableGroupProps }\n"],"names":["getColumnLabel","colId","columnLabels","col","meta","NO_GROUPING","DataTableGroup","className","selectId","useId","table","grouping","setGrouping","groupConfig","enableGrouping","useDataTable","allLeafColumns","resolvedColumns","activeColumn","c","activeColumnLabel","lc","jsxs","Popover","jsx","Button","cn","GroupIcon","Fragment","Select","v","SelectTrigger","SelectValue","SelectContent","SelectItem","XIcon"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-pagination.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("lucide-react"),b=require("./data-table.cjs"),o=require("../button.cjs"),s=require("../select.cjs"),j=require("../../../lib/utils.cjs"),P=5,S=10,v=25;function f({pageSizeOptions:u=[P,S,v],className:d}){const{table:t,grouping:x,enableGrouping:h}=b.useDataTable(),c=t.getPageCount(),{pageIndex:i,pageSize:r}=t.getState().pagination,l=t.getFilteredRowModel().rows.length;if(l===0||h&&x)return null;const p=i*r+1,m=Math.min((i+1)*r,l);return e.jsxs("div",{"data-slot":"data-table-pagination",className:j.cn("flex items-center justify-between gap-4 text-sm text-muted-foreground",d),children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"whitespace-nowrap",children:"Rows per page:"}),e.jsxs(s.Select,{value:String(r),onValueChange:a=>t.setPageSize(Number(a)),children:[e.jsx(s.SelectTrigger,{className:"h-7 w-16",children:e.jsx(s.SelectValue,{})}),e.jsx(s.SelectContent,{children:u.map(a=>e.jsx(s.SelectItem,{value:String(a),children:a},a))})]}),e.jsxs("span",{className:"whitespace-nowrap tabular-nums",children:[p,"–",m," of ",l]})]}),c>1&&e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx(o.Button,{variant:"ghost",size:"icon-sm",onClick:()=>t.previousPage(),disabled:!t.getCanPreviousPage(),"aria-label":"Previous page",children:e.jsx(g.ChevronLeftIcon,{})}),Array.from({length:c},(a,n)=>e.jsx(o.Button,{variant:n===i?"default":"link",size:"icon-xs",onClick:()=>t.setPageIndex(n),"aria-label":`Page ${n+1}`,"aria-current":n===i?"page":void 0,children:n+1},n)),e.jsx(o.Button,{variant:"ghost",size:"icon-sm",onClick:()=>t.nextPage(),disabled:!t.getCanNextPage(),"aria-label":"Next page",children:e.jsx(g.ChevronRightIcon,{})})]})]})}exports.DataTablePagination=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("lucide-react"),b=require("./data-table.cjs"),o=require("../../../ui/button.cjs"),s=require("../../../ui/select.cjs"),j=require("../../../lib/utils.cjs"),P=5,S=10,v=25;function f({pageSizeOptions:u=[P,S,v],className:d}){const{table:t,grouping:x,enableGrouping:p}=b.useDataTable(),c=t.getPageCount(),{pageIndex:i,pageSize:r}=t.getState().pagination,l=t.getFilteredRowModel().rows.length;if(l===0||p&&x)return null;const h=i*r+1,m=Math.min((i+1)*r,l);return e.jsxs("div",{"data-slot":"data-table-pagination",className:j.cn("flex items-center justify-between gap-4 text-sm text-muted-foreground",d),children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"whitespace-nowrap",children:"Rows per page:"}),e.jsxs(s.Select,{value:String(r),onValueChange:a=>t.setPageSize(Number(a)),children:[e.jsx(s.SelectTrigger,{"aria-label":"Rows per page",className:"h-7 w-16",children:e.jsx(s.SelectValue,{})}),e.jsx(s.SelectContent,{children:u.map(a=>e.jsx(s.SelectItem,{value:String(a),children:a},a))})]}),e.jsxs("span",{className:"whitespace-nowrap tabular-nums",children:[h,"–",m," of ",l]})]}),c>1&&e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx(o.Button,{variant:"ghost",size:"icon-sm",onClick:()=>t.previousPage(),disabled:!t.getCanPreviousPage(),"aria-label":"Previous page",children:e.jsx(g.ChevronLeftIcon,{})}),Array.from({length:c},(a,n)=>e.jsx(o.Button,{variant:n===i?"default":"link",size:"icon-xs",onClick:()=>t.setPageIndex(n),"aria-label":`Page ${n+1}`,"aria-current":n===i?"page":void 0,children:n+1},n)),e.jsx(o.Button,{variant:"ghost",size:"icon-sm",onClick:()=>t.nextPage(),disabled:!t.getCanNextPage(),"aria-label":"Next page",children:e.jsx(g.ChevronRightIcon,{})})]})]})}exports.DataTablePagination=f;
 //# sourceMappingURL=data-table-pagination.cjs.map

package/dist/components/ui/data-table/data-table-pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-pagination.cjs","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\ninterface DataTablePaginationProps {\n  pageSizeOptions?: number[]\n  className?: string\n}\n\nconst DEFAULT_PAGE_SIZE_SMALL = 5\nconst DEFAULT_PAGE_SIZE_MEDIUM = 10\nconst DEFAULT_PAGE_SIZE_LARGE = 25\n\nfunction DataTablePagination({\n  pageSizeOptions = [DEFAULT_PAGE_SIZE_SMALL, DEFAULT_PAGE_SIZE_MEDIUM, DEFAULT_PAGE_SIZE_LARGE],\n  className,\n}: DataTablePaginationProps) {\n  const { table, grouping, enableGrouping } = useDataTable()\n\n  const pageCount = table.getPageCount()\n  const { pageIndex, pageSize } = table.getState().pagination\n  const totalRows = table.getFilteredRowModel().rows.length\n\n  if (totalRows === 0) return null\n  if (enableGrouping && grouping) return null\n\n  const start = pageIndex * pageSize + 1\n  const end = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n  return (\n    <div\n      data-slot=\"data-table-pagination\"\n      className={cn(\n        \"flex items-center justify-between gap-4 text-sm text-muted-foreground\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span className=\"whitespace-nowrap\">Rows per page:</span>\n        <Select\n          value={String(pageSize)}\n          onValueChange={(value) => table.setPageSize(Number(value))}\n        >\n          <SelectTrigger className=\"h-7 w-16\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {pageSizeOptions.map((size) => (\n              <SelectItem key={size} value={String(size)}>\n                {size}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <span className=\"whitespace-nowrap tabular-nums\">\n          {start}&ndash;{end} of {totalRows}\n        </span>\n      </div>\n\n      {pageCount > 1 && (\n        <div className=\"flex items-center gap-1\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n            aria-label=\"Previous page\"\n          >\n            <ChevronLeftIcon />\n          </Button>\n\n          {Array.from({ length: pageCount }, (_, i) => (\n            <Button\n              key={i}\n              variant={i === pageIndex ? \"default\" : \"link\"}\n              size=\"icon-xs\"\n              onClick={() => table.setPageIndex(i)}\n              aria-label={`Page ${i + 1}`}\n              aria-current={i === pageIndex ? \"page\" : undefined}\n            >\n              {i + 1}\n            </Button>\n          ))}\n\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n            aria-label=\"Next page\"\n          >\n            <ChevronRightIcon />\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],"names":["DEFAULT_PAGE_SIZE_SMALL","DEFAULT_PAGE_SIZE_MEDIUM","DEFAULT_PAGE_SIZE_LARGE","DataTablePagination","pageSizeOptions","className","table","grouping","enableGrouping","useDataTable","pageCount","pageIndex","pageSize","totalRows","start","end","jsxs","cn","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","size","SelectItem","Button","ChevronLeftIcon","_","i","ChevronRightIcon"],"mappings":"uQAqBMA,EAA0B,EAC1BC,EAA2B,GAC3BC,EAA0B,GAEhC,SAASC,EAAoB,CAC3B,gBAAAC,EAAkB,CAACJ,EAAyBC,EAA0BC,CAAuB,EAC7F,UAAAG,CACF,EAA6B,CAC3B,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,eAAAC,CAAA,EAAmBC,EAAAA,aAAA,EAEtCC,EAAYJ,EAAM,aAAA,EAClB,CAAE,UAAAK,EAAW,SAAAC,CAAA,EAAaN,EAAM,WAAW,WAC3CO,EAAYP,EAAM,oBAAA,EAAsB,KAAK,OAGnD,GADIO,IAAc,GACdL,GAAkBD,EAAU,OAAO,KAEvC,MAAMO,EAAQH,EAAYC,EAAW,EAC/BG,EAAM,KAAK,KAAKJ,EAAY,GAAKC,EAAUC,CAAS,EAE1D,OACEG,EAAAA,KAAC,MAAA,CACC,YAAU,wBACV,UAAWC,EAAAA,GACT,wEACAZ,CAAA,EAGF,SAAA,CAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAE,EAAAA,IAAC,OAAA,CAAK,UAAU,oBAAoB,SAAA,iBAAc,EAClDF,EAAAA,KAACG,EAAAA,OAAA,CACC,MAAO,OAAOP,CAAQ,EACtB,cAAgBQ,GAAUd,EAAM,YAAY,OAAOc,CAAK,CAAC,EAEzD,SAAA,CAAAF,MAACG,EAAAA,cAAA,CAAc,UAAU,WACvB,SAAAH,MAACI,EAAAA,cAAY,EACf,EACAJ,EAAAA,IAACK,EAAAA,cAAA,CACE,SAAAnB,EAAgB,IAAKoB,GACpBN,MAACO,EAAAA,WAAA,CAAsB,MAAO,OAAOD,CAAI,EACtC,SAAAA,CAAA,EADcA,CAEjB,CACD,CAAA,CACH,CAAA,CAAA,CAAA,EAEFR,EAAAA,KAAC,OAAA,CAAK,UAAU,iCACb,SAAA,CAAAF,EAAM,IAAQC,EAAI,OAAKF,CAAA,CAAA,CAC1B,CAAA,EACF,EAECH,EAAY,GACXM,OAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAE,EAAAA,IAACQ,EAAAA,OAAA,CACC,QAAQ,QACR,KAAK,UACL,QAAS,IAAMpB,EAAM,aAAA,EACrB,SAAU,CAACA,EAAM,mBAAA,EACjB,aAAW,gBAEX,eAACqB,EAAAA,gBAAA,CAAA,CAAgB,CAAA,CAAA,EAGlB,MAAM,KAAK,CAAE,OAAQjB,GAAa,CAACkB,EAAGC,IACrCX,EAAAA,IAACQ,EAAAA,OAAA,CAEC,QAASG,IAAMlB,EAAY,UAAY,OACvC,KAAK,UACL,QAAS,IAAML,EAAM,aAAauB,CAAC,EACnC,aAAY,QAAQA,EAAI,CAAC,GACzB,eAAcA,IAAMlB,EAAY,OAAS,OAExC,SAAAkB,EAAI,CAAA,EAPAA,CAAA,CASR,EAEDX,EAAAA,IAACQ,EAAAA,OAAA,CACC,QAAQ,QACR,KAAK,UACL,QAAS,IAAMpB,EAAM,SAAA,EACrB,SAAU,CAACA,EAAM,eAAA,EACjB,aAAW,YAEX,eAACwB,EAAAA,iBAAA,CAAA,CAAiB,CAAA,CAAA,CACpB,CAAA,CACF,CAAA,CAAA,CAAA,CAIR"}
+{"version":3,"file":"data-table-pagination.cjs","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\ninterface DataTablePaginationProps {\n  pageSizeOptions?: number[]\n  className?: string\n}\n\nconst DEFAULT_PAGE_SIZE_SMALL = 5\nconst DEFAULT_PAGE_SIZE_MEDIUM = 10\nconst DEFAULT_PAGE_SIZE_LARGE = 25\n\nfunction DataTablePagination({\n  pageSizeOptions = [DEFAULT_PAGE_SIZE_SMALL, DEFAULT_PAGE_SIZE_MEDIUM, DEFAULT_PAGE_SIZE_LARGE],\n  className,\n}: DataTablePaginationProps) {\n  const { table, grouping, enableGrouping } = useDataTable()\n\n  const pageCount = table.getPageCount()\n  const { pageIndex, pageSize } = table.getState().pagination\n  const totalRows = table.getFilteredRowModel().rows.length\n\n  if (totalRows === 0) return null\n  if (enableGrouping && grouping) return null\n\n  const start = pageIndex * pageSize + 1\n  const end = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n  return (\n    <div\n      data-slot=\"data-table-pagination\"\n      className={cn(\n        \"flex items-center justify-between gap-4 text-sm text-muted-foreground\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span className=\"whitespace-nowrap\">Rows per page:</span>\n        <Select\n          value={String(pageSize)}\n          onValueChange={(value) => table.setPageSize(Number(value))}\n        >\n          <SelectTrigger aria-label=\"Rows per page\" className=\"h-7 w-16\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {pageSizeOptions.map((size) => (\n              <SelectItem key={size} value={String(size)}>\n                {size}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <span className=\"whitespace-nowrap tabular-nums\">\n          {start}&ndash;{end} of {totalRows}\n        </span>\n      </div>\n\n      {pageCount > 1 && (\n        <div className=\"flex items-center gap-1\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n            aria-label=\"Previous page\"\n          >\n            <ChevronLeftIcon />\n          </Button>\n\n          {Array.from({ length: pageCount }, (_, i) => (\n            <Button\n              key={i}\n              variant={i === pageIndex ? \"default\" : \"link\"}\n              size=\"icon-xs\"\n              onClick={() => table.setPageIndex(i)}\n              aria-label={`Page ${i + 1}`}\n              aria-current={i === pageIndex ? \"page\" : undefined}\n            >\n              {i + 1}\n            </Button>\n          ))}\n\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n            aria-label=\"Next page\"\n          >\n            <ChevronRightIcon />\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],"names":["DEFAULT_PAGE_SIZE_SMALL","DEFAULT_PAGE_SIZE_MEDIUM","DEFAULT_PAGE_SIZE_LARGE","DataTablePagination","pageSizeOptions","className","table","grouping","enableGrouping","useDataTable","pageCount","pageIndex","pageSize","totalRows","start","end","jsxs","cn","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","size","SelectItem","Button","ChevronLeftIcon","_","i","ChevronRightIcon"],"mappings":"yRAqBMA,EAA0B,EAC1BC,EAA2B,GAC3BC,EAA0B,GAEhC,SAASC,EAAoB,CAC3B,gBAAAC,EAAkB,CAACJ,EAAyBC,EAA0BC,CAAuB,EAC7F,UAAAG,CACF,EAA6B,CAC3B,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,eAAAC,CAAA,EAAmBC,EAAAA,aAAA,EAEtCC,EAAYJ,EAAM,aAAA,EAClB,CAAE,UAAAK,EAAW,SAAAC,CAAA,EAAaN,EAAM,WAAW,WAC3CO,EAAYP,EAAM,oBAAA,EAAsB,KAAK,OAGnD,GADIO,IAAc,GACdL,GAAkBD,EAAU,OAAO,KAEvC,MAAMO,EAAQH,EAAYC,EAAW,EAC/BG,EAAM,KAAK,KAAKJ,EAAY,GAAKC,EAAUC,CAAS,EAE1D,OACEG,EAAAA,KAAC,MAAA,CACC,YAAU,wBACV,UAAWC,EAAAA,GACT,wEACAZ,CAAA,EAGF,SAAA,CAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAE,EAAAA,IAAC,OAAA,CAAK,UAAU,oBAAoB,SAAA,iBAAc,EAClDF,EAAAA,KAACG,EAAAA,OAAA,CACC,MAAO,OAAOP,CAAQ,EACtB,cAAgBQ,GAAUd,EAAM,YAAY,OAAOc,CAAK,CAAC,EAEzD,SAAA,CAAAF,EAAAA,IAACG,EAAAA,eAAc,aAAW,gBAAgB,UAAU,WAClD,SAAAH,EAAAA,IAACI,gBAAY,CAAA,CACf,EACAJ,EAAAA,IAACK,EAAAA,cAAA,CACE,SAAAnB,EAAgB,IAAKoB,GACpBN,MAACO,EAAAA,WAAA,CAAsB,MAAO,OAAOD,CAAI,EACtC,SAAAA,CAAA,EADcA,CAEjB,CACD,CAAA,CACH,CAAA,CAAA,CAAA,EAEFR,EAAAA,KAAC,OAAA,CAAK,UAAU,iCACb,SAAA,CAAAF,EAAM,IAAQC,EAAI,OAAKF,CAAA,CAAA,CAC1B,CAAA,EACF,EAECH,EAAY,GACXM,OAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAE,EAAAA,IAACQ,EAAAA,OAAA,CACC,QAAQ,QACR,KAAK,UACL,QAAS,IAAMpB,EAAM,aAAA,EACrB,SAAU,CAACA,EAAM,mBAAA,EACjB,aAAW,gBAEX,eAACqB,EAAAA,gBAAA,CAAA,CAAgB,CAAA,CAAA,EAGlB,MAAM,KAAK,CAAE,OAAQjB,GAAa,CAACkB,EAAGC,IACrCX,EAAAA,IAACQ,EAAAA,OAAA,CAEC,QAASG,IAAMlB,EAAY,UAAY,OACvC,KAAK,UACL,QAAS,IAAML,EAAM,aAAauB,CAAC,EACnC,aAAY,QAAQA,EAAI,CAAC,GACzB,eAAcA,IAAMlB,EAAY,OAAS,OAExC,SAAAkB,EAAI,CAAA,EAPAA,CAAA,CASR,EAEDX,EAAAA,IAACQ,EAAAA,OAAA,CACC,QAAQ,QACR,KAAK,UACL,QAAS,IAAMpB,EAAM,SAAA,EACrB,SAAU,CAACA,EAAM,eAAA,EACjB,aAAW,YAEX,eAACwB,EAAAA,iBAAA,CAAA,CAAiB,CAAA,CAAA,CACpB,CAAA,CACF,CAAA,CAAA,CAAA,CAIR"}

package/dist/components/ui/data-table/data-table-pagination.d.ts

@@ -0,0 +1,7 @@
+interface DataTablePaginationProps {
+    pageSizeOptions?: number[];
+    className?: string;
+}
+declare function DataTablePagination({ pageSizeOptions, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element | null;
+export { DataTablePagination };
+export type { DataTablePaginationProps };