@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/data-table-pagination.js

@@ -1,84 +1,71 @@
 "use client";
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { IconChevronLeft as c, IconChevronRight as l } from "@tabler/icons-react";
-import { Icon as o } from "./icon.js";
-import { cn as t } from "./lib/utils.js";
-function f({
-  table: e,
-  totalRowCount: d,
-  useServerPagination: n,
-  pageSizeOptions: i
-}) {
-  return /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-ds-03 py-ds-04 border-t border-surface-border", children: [
-    /* @__PURE__ */ s("span", { className: "text-ds-sm text-surface-fg-muted", children: [
-      d,
-      " total rows"
-    ] }),
-    /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
-      !n && /* @__PURE__ */ a(
-        "select",
-        {
-          value: e.getState().pagination.pageSize,
-          onChange: (r) => {
-            e.setPageSize(Number(r.target.value));
-          },
-          "aria-label": "Rows per page",
-          className: t(
-            "h-ds-sm rounded-ds-md",
-            "border border-surface-border-strong bg-surface-raised-hover",
-            "px-ds-03 text-ds-sm",
-            "text-surface-fg"
-          ),
-          children: (i ?? [10, 20, 50, 100]).map((r) => /* @__PURE__ */ s("option", { value: r, children: [
-            r,
-            " rows"
-          ] }, r))
-        }
-      ),
-      /* @__PURE__ */ a(
-        "button",
-        {
-          type: "button",
-          disabled: !e.getCanPreviousPage(),
-          onClick: () => e.previousPage(),
-          "aria-label": "Previous page",
-          className: t(
-            "h-ds-sm w-ds-sm flex items-center justify-center",
-            "rounded-ds-md border border-surface-border-strong",
-            "enabled:hover:bg-surface-raised",
-            "disabled:opacity-action-disabled disabled:cursor-not-allowed",
-            "transition-colors"
-          ),
-          children: /* @__PURE__ */ a(o, { icon: c, size: "sm" })
-        }
-      ),
-      /* @__PURE__ */ s("span", { className: "text-ds-sm text-surface-fg-muted", children: [
-        "Page ",
-        e.getState().pagination.pageIndex + 1,
-        " of",
-        " ",
-        e.getPageCount()
-      ] }),
-      /* @__PURE__ */ a(
-        "button",
-        {
-          type: "button",
-          disabled: !e.getCanNextPage(),
-          onClick: () => e.nextPage(),
-          "aria-label": "Next page",
-          className: t(
-            "h-ds-sm w-ds-sm flex items-center justify-center",
-            "rounded-ds-md border border-surface-border-strong",
-            "enabled:hover:bg-surface-raised",
-            "disabled:opacity-action-disabled disabled:cursor-not-allowed",
-            "transition-colors"
-          ),
-          children: /* @__PURE__ */ a(o, { icon: l, size: "sm" })
-        }
-      )
-    ] })
-  ] });
+import { cn as e } from "./lib/utils.js";
+import { Icon as t } from "./icon.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { IconChevronLeft as i, IconChevronRight as a } from "@tabler/icons-react";
+//#region src/ui/data-table-pagination.tsx
+function o({ table: o, totalRowCount: s, useServerPagination: c, pageSizeOptions: l }) {
+	return /* @__PURE__ */ r("div", {
+		className: "flex items-center justify-between px-ds-03 py-ds-04 border-t border-surface-border",
+		children: [/* @__PURE__ */ r("span", {
+			className: "text-ds-sm text-surface-fg-muted",
+			children: [s, " total rows"]
+		}), /* @__PURE__ */ r("div", {
+			className: "flex items-center gap-ds-03",
+			children: [
+				!c && /* @__PURE__ */ n("select", {
+					value: o.getState().pagination.pageSize,
+					onChange: (e) => {
+						o.setPageSize(Number(e.target.value));
+					},
+					"aria-label": "Rows per page",
+					className: e("h-ds-sm rounded-ds-md", "border border-surface-border-strong bg-surface-raised-hover", "px-ds-03 text-ds-sm", "text-surface-fg"),
+					children: (l ?? [
+						10,
+						20,
+						50,
+						100
+					]).map((e) => /* @__PURE__ */ r("option", {
+						value: e,
+						children: [e, " rows"]
+					}, e))
+				}),
+				/* @__PURE__ */ n("button", {
+					type: "button",
+					disabled: !o.getCanPreviousPage(),
+					onClick: () => o.previousPage(),
+					"aria-label": "Previous page",
+					className: e("h-ds-sm w-ds-sm flex items-center justify-center", "rounded-ds-md border border-surface-border-strong", "enabled:hover:bg-surface-raised", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
+					children: /* @__PURE__ */ n(t, {
+						icon: i,
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ r("span", {
+					className: "text-ds-sm text-surface-fg-muted",
+					children: [
+						"Page ",
+						o.getState().pagination.pageIndex + 1,
+						" of",
+						" ",
+						o.getPageCount()
+					]
+				}),
+				/* @__PURE__ */ n("button", {
+					type: "button",
+					disabled: !o.getCanNextPage(),
+					onClick: () => o.nextPage(),
+					"aria-label": "Next page",
+					className: e("h-ds-sm w-ds-sm flex items-center justify-center", "rounded-ds-md border border-surface-border-strong", "enabled:hover:bg-surface-raised", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
+					children: /* @__PURE__ */ n(t, {
+						icon: a,
+						size: "sm"
+					})
+				})
+			]
+		})]
+	});
 }
-export {
-  f as DataTablePagination
-};
+//#endregion
+export { o as DataTablePagination };

package/dist/ui/data-table-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","names":[],"sources":["../../src/ui/data-table-pagination.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { type Table } from '@tanstack/react-table'\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'\n\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n/**\n * Pagination controls: page size selector, prev/next buttons, page info.\n * Internal — not exported to consumers.\n */\nexport function DataTablePagination<TData>({\n  table,\n  totalRowCount,\n  useServerPagination,\n  pageSizeOptions,\n}: {\n  table: Table<TData>\n  totalRowCount: number\n  useServerPagination: boolean\n  pageSizeOptions?: number[]\n}) {\n  return (\n    <div className=\"flex items-center justify-between px-ds-03 py-ds-04 border-t border-surface-border\">\n      <span className=\"text-ds-sm text-surface-fg-muted\">\n        {totalRowCount} total rows\n      </span>\n      <div className=\"flex items-center gap-ds-03\">\n        {/* Page size selector */}\n        {!useServerPagination && (\n          <select\n            value={table.getState().pagination.pageSize}\n            onChange={(e) => {\n              table.setPageSize(Number(e.target.value))\n            }}\n            aria-label=\"Rows per page\"\n            className={cn(\n              'h-ds-sm rounded-ds-md',\n              'border border-surface-border-strong bg-surface-raised-hover',\n              'px-ds-03 text-ds-sm',\n              'text-surface-fg',\n            )}\n          >\n            {(pageSizeOptions ?? [10, 20, 50, 100]).map((size) => (\n              <option key={size} value={size}>\n                {size} rows\n              </option>\n            ))}\n          </select>\n        )}\n\n        {/* Previous page button */}\n        <button\n          type=\"button\"\n          disabled={!table.getCanPreviousPage()}\n          onClick={() => table.previousPage()}\n          aria-label=\"Previous page\"\n          className={cn(\n            'h-ds-sm w-ds-sm flex items-center justify-center',\n            'rounded-ds-md border border-surface-border-strong',\n            'enabled:hover:bg-surface-raised',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            'transition-colors',\n          )}\n        >\n          <Icon icon={IconChevronLeft} size=\"sm\" />\n        </button>\n\n        {/* Page info */}\n        <span className=\"text-ds-sm text-surface-fg-muted\">\n          Page {table.getState().pagination.pageIndex + 1} of{' '}\n          {table.getPageCount()}\n        </span>\n\n        {/* Next page button */}\n        <button\n          type=\"button\"\n          disabled={!table.getCanNextPage()}\n          onClick={() => table.nextPage()}\n          aria-label=\"Next page\"\n          className={cn(\n            'h-ds-sm w-ds-sm flex items-center justify-center',\n            'rounded-ds-md border border-surface-border-strong',\n            'enabled:hover:bg-surface-raised',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            'transition-colors',\n          )}\n        >\n          <Icon icon={IconChevronRight} size=\"sm\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,EAA2B,EACzC,UACA,kBACA,wBACA,sBAMC;AACD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,GAAc,cACV;MACP,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEG,CAAC,KACA,kBAAC,UAAD;KACE,OAAO,EAAM,UAAU,CAAC,WAAW;KACnC,WAAW,MAAM;AACf,QAAM,YAAY,OAAO,EAAE,OAAO,MAAM,CAAC;;KAE3C,cAAW;KACX,WAAW,EACT,yBACA,+DACA,uBACA,kBACD;gBAEC,KAAmB;MAAC;MAAI;MAAI;MAAI;MAAI,EAAE,KAAK,MAC3C,kBAAC,UAAD;MAAmB,OAAO;gBAA1B,CACG,GAAK,QACC;QAFI,EAEJ,CACT;KACK,CAAA;IAIX,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,oBAAoB;KACrC,eAAe,EAAM,cAAc;KACnC,cAAW;KACX,WAAW,EACT,oDACA,qDACA,mCACA,gEACA,oBACD;eAED,kBAAC,GAAD;MAAM,MAAM;MAAiB,MAAK;MAAO,CAAA;KAClC,CAAA;IAGT,kBAAC,QAAD;KAAM,WAAU;eAAhB;MAAmD;MAC3C,EAAM,UAAU,CAAC,WAAW,YAAY;MAAE;MAAI;MACnD,EAAM,cAAc;MAChB;;IAGP,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,gBAAgB;KACjC,eAAe,EAAM,UAAU;KAC/B,cAAW;KACX,WAAW,EACT,oDACA,qDACA,mCACA,gEACA,oBACD;eAED,kBAAC,GAAD;MAAM,MAAM;MAAkB,MAAK;MAAO,CAAA;KACnC,CAAA;IACL;KACF"}

package/dist/ui/data-table-toolbar.js

@@ -1,133 +1,107 @@
 "use client";
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { IconSearch as w, IconColumns3 as D, IconTextResize as N, IconDownload as y } from "@tabler/icons-react";
-import { DropdownMenu as I, DropdownMenuTrigger as T, DropdownMenuContent as k, DropdownMenuLabel as L, DropdownMenuSeparator as j, DropdownMenuCheckboxItem as M } from "./dropdown-menu.js";
-import { cn as h } from "./lib/utils.js";
-import { Icon as d } from "./icon.js";
-const f = {
-  compact: "Compact",
-  standard: "Standard",
-  comfortable: "Comfortable"
-}, S = {
-  compact: "standard",
-  standard: "comfortable",
-  comfortable: "compact"
-}, g = h(
-  "h-ds-sm px-ds-03 rounded-ds-md",
-  "border border-surface-border-strong",
-  "hover:bg-surface-raised",
-  "text-ds-sm flex items-center gap-ds-02 transition-colors"
-), m = "text-surface-fg-subtle";
-function R(n) {
-  const u = n.getAllLeafColumns().filter((t) => t.getIsVisible() && t.id !== "_select").map((t) => {
-    const o = t.columnDef.header;
-    return typeof o == "string" ? o : t.id;
-  }), p = n.getFilteredRowModel().rows.map(
-    (t) => n.getAllLeafColumns().filter((o) => o.getIsVisible() && o.id !== "_select").map((o) => {
-      const i = t.getValue(o.id), e = String(i ?? "");
-      return e.includes(",") || e.includes('"') || e.includes(`
-`) ? `"${e.replace(/"/g, '""')}"` : e;
-    })
-  ), b = [u.join(","), ...p.map((t) => t.join(","))].join(
-    `
-`
-  ), l = new Blob([b], { type: "text/csv;charset=utf-8;" }), c = URL.createObjectURL(l), r = document.createElement("a");
-  r.href = c, r.download = "table-export.csv", r.click(), URL.revokeObjectURL(c);
+import { cn as e } from "./lib/utils.js";
+import { Icon as t } from "./icon.js";
+import { DropdownMenu as n, DropdownMenuCheckboxItem as r, DropdownMenuContent as i, DropdownMenuLabel as a, DropdownMenuSeparator as o, DropdownMenuTrigger as s } from "./dropdown-menu.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { IconColumns3 as u, IconDownload as d, IconSearch as f, IconTextResize as p } from "@tabler/icons-react";
+//#region src/ui/data-table-toolbar.tsx
+var m = {
+	compact: "Compact",
+	standard: "Standard",
+	comfortable: "Comfortable"
+}, h = {
+	compact: "standard",
+	standard: "comfortable",
+	comfortable: "compact"
+}, g = e("h-ds-sm px-ds-03 rounded-ds-md", "border border-surface-border-strong", "hover:bg-surface-raised", "text-ds-sm flex items-center gap-ds-02 transition-colors"), _ = "text-surface-fg-subtle";
+function v(e) {
+	let t = e.getAllLeafColumns().filter((e) => e.getIsVisible() && e.id !== "_select").map((e) => {
+		let t = e.columnDef.header;
+		return typeof t == "string" ? t : e.id;
+	}), n = e.getFilteredRowModel().rows.map((t) => e.getAllLeafColumns().filter((e) => e.getIsVisible() && e.id !== "_select").map((e) => {
+		let n = t.getValue(e.id), r = String(n ?? "");
+		return r.includes(",") || r.includes("\"") || r.includes("\n") ? `"${r.replace(/"/g, "\"\"")}"` : r;
+	})), r = [t.join(","), ...n.map((e) => e.join(","))].join("\n"), i = new Blob([r], { type: "text/csv;charset=utf-8;" }), a = URL.createObjectURL(i), o = document.createElement("a");
+	o.href = a, o.download = "table-export.csv", o.click(), URL.revokeObjectURL(a);
 }
-function V({
-  table: n,
-  globalFilter: u = !1,
-  globalFilterValue: p,
-  onGlobalFilterChange: b,
-  density: l,
-  onDensityChange: c,
-  enableExport: r = !0,
-  className: t,
-  ...o
-}) {
-  const i = n.getAllColumns().filter((e) => e.getCanHide() && e.id !== "_select");
-  return /* @__PURE__ */ a("div", { className: h("flex items-center gap-ds-03 pb-ds-04", t), ...o, children: [
-    u && /* @__PURE__ */ a("div", { className: "flex flex-1 items-center gap-ds-02", children: [
-      /* @__PURE__ */ s(d, { icon: w, size: "sm", className: m }),
-      /* @__PURE__ */ s(
-        "input",
-        {
-          type: "text",
-          value: p,
-          onChange: (e) => b(e.target.value),
-          placeholder: "Search all columns...",
-          "aria-label": "Search all columns",
-          className: h(
-            "flex-1 bg-transparent text-ds-md",
-            "text-surface-fg placeholder:text-surface-fg-subtle",
-            "outline-hidden",
-            "h-ds-sm"
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ a("div", { className: "ml-auto flex items-center gap-ds-03", children: [
-      i.length > 0 && /* @__PURE__ */ a(I, { children: [
-        /* @__PURE__ */ s(T, { asChild: !0, children: /* @__PURE__ */ a(
-          "button",
-          {
-            type: "button",
-            className: g,
-            "aria-label": "Toggle column visibility",
-            children: [
-              /* @__PURE__ */ s(d, { icon: D, size: "sm", className: m }),
-              "Columns"
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ a(k, { align: "end", className: "w-40", children: [
-          /* @__PURE__ */ s(L, { children: "Toggle columns" }),
-          /* @__PURE__ */ s(j, {}),
-          i.map((e) => {
-            const C = e.columnDef.header, x = typeof C == "string" ? C : e.id;
-            return /* @__PURE__ */ s(
-              M,
-              {
-                checked: e.getIsVisible(),
-                onCheckedChange: (v) => e.toggleVisibility(!!v),
-                children: x
-              },
-              e.id
-            );
-          })
-        ] })
-      ] }),
-      /* @__PURE__ */ a(
-        "button",
-        {
-          type: "button",
-          className: g,
-          onClick: () => c(S[l]),
-          "aria-label": `Table density: ${f[l]}. Click to change.`,
-          title: `Density: ${f[l]}`,
-          children: [
-            /* @__PURE__ */ s(d, { icon: N, size: "sm", className: m }),
-            f[l]
-          ]
-        }
-      ),
-      r && /* @__PURE__ */ a(
-        "button",
-        {
-          type: "button",
-          className: g,
-          onClick: () => R(n),
-          "aria-label": "Export table as CSV",
-          children: [
-            /* @__PURE__ */ s(d, { icon: y, size: "sm", className: m }),
-            "Export"
-          ]
-        }
-      )
-    ] })
-  ] });
+function y({ table: y, globalFilter: b = !1, globalFilterValue: x, onGlobalFilterChange: S, density: C, onDensityChange: w, enableExport: T = !0, className: E, ...D }) {
+	let O = y.getAllColumns().filter((e) => e.getCanHide() && e.id !== "_select");
+	return /* @__PURE__ */ l("div", {
+		className: e("flex items-center gap-ds-03 pb-ds-04", E),
+		...D,
+		children: [b && /* @__PURE__ */ l("div", {
+			className: "flex flex-1 items-center gap-ds-02",
+			children: [/* @__PURE__ */ c(t, {
+				icon: f,
+				size: "sm",
+				className: _
+			}), /* @__PURE__ */ c("input", {
+				type: "text",
+				value: x,
+				onChange: (e) => S(e.target.value),
+				placeholder: "Search all columns...",
+				"aria-label": "Search all columns",
+				className: e("flex-1 bg-transparent text-ds-md", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden", "h-ds-sm")
+			})]
+		}), /* @__PURE__ */ l("div", {
+			className: "ml-auto flex items-center gap-ds-03",
+			children: [
+				O.length > 0 && /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ c(s, {
+					asChild: !0,
+					children: /* @__PURE__ */ l("button", {
+						type: "button",
+						className: g,
+						"aria-label": "Toggle column visibility",
+						children: [/* @__PURE__ */ c(t, {
+							icon: u,
+							size: "sm",
+							className: _
+						}), "Columns"]
+					})
+				}), /* @__PURE__ */ l(i, {
+					align: "end",
+					className: "w-40",
+					children: [
+						/* @__PURE__ */ c(a, { children: "Toggle columns" }),
+						/* @__PURE__ */ c(o, {}),
+						O.map((e) => {
+							let t = e.columnDef.header, n = typeof t == "string" ? t : e.id;
+							return /* @__PURE__ */ c(r, {
+								checked: e.getIsVisible(),
+								onCheckedChange: (t) => e.toggleVisibility(!!t),
+								children: n
+							}, e.id);
+						})
+					]
+				})] }),
+				/* @__PURE__ */ l("button", {
+					type: "button",
+					className: g,
+					onClick: () => w(h[C]),
+					"aria-label": `Table density: ${m[C]}. Click to change.`,
+					title: `Density: ${m[C]}`,
+					children: [/* @__PURE__ */ c(t, {
+						icon: p,
+						size: "sm",
+						className: _
+					}), m[C]]
+				}),
+				T && /* @__PURE__ */ l("button", {
+					type: "button",
+					className: g,
+					onClick: () => v(y),
+					"aria-label": "Export table as CSV",
+					children: [/* @__PURE__ */ c(t, {
+						icon: d,
+						size: "sm",
+						className: _
+					}), "Export"]
+				})
+			]
+		})]
+	});
 }
-V.displayName = "DataTableToolbar";
-export {
-  V as DataTableToolbar
-};
+y.displayName = "DataTableToolbar";
+//#endregion
+export { y as DataTableToolbar };

package/dist/ui/data-table-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-toolbar.js","names":[],"sources":["../../src/ui/data-table-toolbar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { type Table } from '@tanstack/react-table'\nimport {\n  IconSearch,\n  IconColumns3,\n  IconTextResize,\n  IconDownload,\n} from '@tabler/icons-react'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuCheckboxItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n} from './dropdown-menu'\nimport { cn } from './lib/utils'\nimport { Icon } from './icon'\n\nexport type Density = 'compact' | 'standard' | 'comfortable'\n\nconst densityLabels: Record<Density, string> = {\n  compact: 'Compact',\n  standard: 'Standard',\n  comfortable: 'Comfortable',\n}\n\nconst densityCycle: Record<Density, Density> = {\n  compact: 'standard',\n  standard: 'comfortable',\n  comfortable: 'compact',\n}\n\nexport interface DataTableToolbarProps<TData> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  table: Table<TData>\n  globalFilter?: boolean\n  globalFilterValue: string\n  onGlobalFilterChange: (value: string) => void\n  density: Density\n  onDensityChange: (density: Density) => void\n  enableExport?: boolean\n}\n\nconst toolbarButtonClass = cn(\n  'h-ds-sm px-ds-03 rounded-ds-md',\n  'border border-surface-border-strong',\n  'hover:bg-surface-raised',\n  'text-ds-sm flex items-center gap-ds-02 transition-colors',\n)\n\nconst toolbarIconClass = 'text-surface-fg-subtle'\n\nfunction exportToCsv<TData>(table: Table<TData>) {\n  const headers = table\n    .getAllLeafColumns()\n    .filter((col) => col.getIsVisible() && col.id !== '_select')\n    .map((col) => {\n      const header = col.columnDef.header\n      return typeof header === 'string' ? header : col.id\n    })\n\n  const rows = table.getFilteredRowModel().rows.map((row) =>\n    table\n      .getAllLeafColumns()\n      .filter((col) => col.getIsVisible() && col.id !== '_select')\n      .map((col) => {\n        const value = row.getValue(col.id)\n        const str = String(value ?? '')\n        // Escape CSV: wrap in quotes if it contains comma, quote, or newline\n        if (str.includes(',') || str.includes('\"') || str.includes('\\n')) {\n          return `\"${str.replace(/\"/g, '\"\"')}\"`\n        }\n        return str\n      }),\n  )\n\n  const csvContent = [headers.join(','), ...rows.map((r) => r.join(','))].join(\n    '\\n',\n  )\n\n  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })\n  const url = URL.createObjectURL(blob)\n  const link = document.createElement('a')\n  link.href = url\n  link.download = 'table-export.csv'\n  link.click()\n  URL.revokeObjectURL(url)\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  globalFilter = false,\n  globalFilterValue,\n  onGlobalFilterChange,\n  density,\n  onDensityChange,\n  enableExport = true,\n  className,\n  ...props\n}: DataTableToolbarProps<TData>) {\n  const toggleableColumns = table\n    .getAllColumns()\n    .filter((col) => col.getCanHide() && col.id !== '_select')\n\n  return (\n    <div className={cn('flex items-center gap-ds-03 pb-ds-04', className)} {...props}>\n      {/* Global search */}\n      {globalFilter && (\n        <div className=\"flex flex-1 items-center gap-ds-02\">\n          <Icon icon={IconSearch} size=\"sm\" className={toolbarIconClass} />\n          <input\n            type=\"text\"\n            value={globalFilterValue}\n            onChange={(e) => onGlobalFilterChange(e.target.value)}\n            placeholder=\"Search all columns...\"\n            aria-label=\"Search all columns\"\n            className={cn(\n              'flex-1 bg-transparent text-ds-md',\n              'text-surface-fg placeholder:text-surface-fg-subtle',\n              'outline-hidden',\n              'h-ds-sm',\n            )}\n          />\n        </div>\n      )}\n\n      <div className=\"ml-auto flex items-center gap-ds-03\">\n        {/* Column visibility dropdown */}\n        {toggleableColumns.length > 0 && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <button\n                type=\"button\"\n                className={toolbarButtonClass}\n                aria-label=\"Toggle column visibility\"\n              >\n                <Icon icon={IconColumns3} size=\"sm\" className={toolbarIconClass} />\n                Columns\n              </button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-40\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              {toggleableColumns.map((column) => {\n                const headerDef = column.columnDef.header\n                const label =\n                  typeof headerDef === 'string' ? headerDef : column.id\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {label}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n\n        {/* Density toggle */}\n        <button\n          type=\"button\"\n          className={toolbarButtonClass}\n          onClick={() => onDensityChange(densityCycle[density])}\n          aria-label={`Table density: ${densityLabels[density]}. Click to change.`}\n          title={`Density: ${densityLabels[density]}`}\n        >\n          <Icon icon={IconTextResize} size=\"sm\" className={toolbarIconClass} />\n          {densityLabels[density]}\n        </button>\n\n        {/* CSV Export */}\n        {enableExport && (\n          <button\n            type=\"button\"\n            className={toolbarButtonClass}\n            onClick={() => exportToCsv(table)}\n            aria-label=\"Export table as CSV\"\n          >\n            <Icon icon={IconDownload} size=\"sm\" className={toolbarIconClass} />\n            Export\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\nDataTableToolbar.displayName = 'DataTableToolbar'\n"],"mappings":"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"}