@acronis-platform/ui-react 0.56.0 → 0.56.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n  table: Table<TData>;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  pageSizeOptions = [10, 20, 30, 40, 50],\n}: DataTablePaginationProps<TData>) {\n  return (\n    <div className=\"flex items-center justify-between px-2\">\n      <div className=\"flex-1 text-sm text-muted-foreground\">\n        {table.getFilteredSelectedRowModel().rows.length} of{' '}\n        {table.getFilteredRowModel().rows.length} row(s) selected.\n      </div>\n      <div className=\"flex items-center gap-6 lg:gap-8\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-sm font-medium\">Rows per page</p>\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => table.setPageSize(Number(value))}\n          >\n            <SelectTrigger aria-label=\"Rows per page\" className=\"h-8 w-[70px]\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizeOptions.map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n          Page {table.getState().pagination.pageIndex + 1} of{' '}\n          {table.getPageCount()}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to first page\"\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(0)}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronFirstIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to previous page\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronLeftIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to next page\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronRightIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to last page\"\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronLastIcon />\n          </ButtonIcon>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","jsxs","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":";;;;AAuBO,SAASA,EAA2B;AAAA,EACzC,OAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AACvC,GAAoC;AAClC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,wCACZ,UAAA;AAAA,MAAAF,EAAM,8BAA8B,KAAK;AAAA,MAAO;AAAA,MAAI;AAAA,MACpDA,EAAM,sBAAsB,KAAK;AAAA,MAAO;AAAA,IAAA,GAC3C;AAAA,IACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBAAsB,UAAA,iBAAa;AAAA,QAChD,gBAAAD;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,OAAO,GAAGJ,EAAM,SAAA,EAAW,WAAW,QAAQ;AAAA,YAC9C,eAAe,CAACK,MAAUL,EAAM,YAAY,OAAOK,CAAK,CAAC;AAAA,YAEzD,UAAA;AAAA,cAAA,gBAAAF,EAACG,KAAc,cAAW,iBAAgB,WAAU,gBAClD,UAAA,gBAAAH,EAACI,KAAY,EAAA,CACf;AAAA,cACA,gBAAAJ,EAACK,GAAA,EACE,UAAAP,EAAgB,IAAI,CAACQ,MACpB,gBAAAN,EAACO,GAAA,EAA0B,OAAO,GAAGD,CAAQ,IAC1C,UAAAA,EAAA,GADcA,CAEjB,CACD,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MACA,gBAAAP,EAAC,OAAA,EAAI,WAAU,kEAAiE,UAAA;AAAA,QAAA;AAAA,QACxEF,EAAM,SAAA,EAAW,WAAW,YAAY;AAAA,QAAE;AAAA,QAAI;AAAA,QACnDA,EAAM,aAAA;AAAA,MAAa,GACtB;AAAA,MACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAa,CAAC;AAAA,YACnC,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACY,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAT;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,aAAA;AAAA,YACrB,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACa,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnB,gBAAAV;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,SAAA;AAAA,YACrB,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACc,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAX;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAaA,EAAM,aAAA,IAAiB,CAAC;AAAA,YAC1D,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACe,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,81 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { TimesIcon as C } from "@acronis-platform/icons-react/stroke-mono";
+import { DataTableViewOptions as v } from "./data-table-view-options.js";
+import { FilterSearch as S, FilterSearchFilters as T, FilterSearchActions as x, FilterSearchAppliedFilters as V } from "../filter-search/filter-search.js";
+import { InputSearch as j } from "../input-search/input-search.js";
+import { Button as N } from "../button/button.js";
+function O(t, l) {
+  return Object.fromEntries(
+    t.filter((e) => e.id !== l).map((e) => [e.id, e.value])
+  );
+}
+function R(t) {
+  return Object.entries(t).map(([l, e]) => ({ id: l, value: e }));
+}
+function k({
+  table: t,
+  leading: l,
+  searchKey: e,
+  searchPlaceholder: c = "Filter…",
+  children: m,
+  filtersLabel: p = "Filters",
+  getFilterChipLabel: d
+}) {
+  var f;
+  const o = t.getState().columnFilters, n = !!m, g = o.length > 0, u = O(o, e), F = (a) => {
+    const i = e ? o.filter((h) => h.id === e) : [];
+    t.setColumnFilters([...i, ...R(a)]);
+  };
+  return /* @__PURE__ */ s("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ s(S, { children: [
+      l,
+      e && /* @__PURE__ */ r(
+        j,
+        {
+          placeholder: c,
+          "aria-label": c,
+          value: ((f = t.getColumn(e)) == null ? void 0 : f.getFilterValue()) ?? "",
+          onChange: (a) => {
+            var i;
+            return (i = t.getColumn(e)) == null ? void 0 : i.setFilterValue(a.target.value);
+          },
+          className: "w-56"
+        }
+      ),
+      n && /* @__PURE__ */ r(
+        T,
+        {
+          value: u,
+          onValueChange: F,
+          label: p,
+          children: m
+        }
+      ),
+      !n && g && /* @__PURE__ */ s(
+        N,
+        {
+          variant: "ghost",
+          onClick: () => t.resetColumnFilters(),
+          className: "h-8 gap-2",
+          children: [
+            "Reset",
+            /* @__PURE__ */ r(C, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(v, { table: t }) })
+    ] }),
+    n && /* @__PURE__ */ r(
+      V,
+      {
+        filters: u,
+        onValueChange: F,
+        getFilterChipLabel: d
+      }
+    )
+  ] });
+}
+export {
+  k as DataTableToolbar
+};
+//# sourceMappingURL=data-table-toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/ui/data-table/data-table-toolbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n  FilterSearch,\n  FilterSearchActions,\n  FilterSearchAppliedFilters,\n  FilterSearchFilters,\n} from '../filter-search';\nimport { InputSearch } from '../input-search';\nimport { DataTableViewOptions } from './data-table-view-options';\n\n// Convert between TanStack's `ColumnFiltersState` (an array of `{ id, value }`,\n// keyed by column id) and `FilterSearchFilters`'s `Record<string, unknown>`\n// (keyed by the same column id). The plain text search filter (`searchKey`) is a\n// separate concern and is excluded from the per-column filter record.\nfunction filtersToRecord(\n  columnFilters: ColumnFiltersState,\n  excludeKey?: string\n): Record<string, unknown> {\n  return Object.fromEntries(\n    columnFilters\n      .filter((filter) => filter.id !== excludeKey)\n      .map((filter) => [filter.id, filter.value])\n  );\n}\n\nfunction recordToFilters(\n  record: Record<string, unknown>\n): ColumnFiltersState {\n  return Object.entries(record).map(([id, value]) => ({ id, value }));\n}\n\ninterface DataTableToolbarProps<TData> {\n  table: Table<TData>;\n  /**\n   * Rendered as the leading element of the toolbar row, before the search\n   * box — e.g. a tenant/scope `Select` (matches the Figma \"FilterSearch\"\n   * anatomy, which places a scope switcher ahead of search).\n   */\n  leading?: ReactNode;\n  /** Column id to wire the search box to (client-side text filter). */\n  searchKey?: string;\n  searchPlaceholder?: string;\n  /**\n   * Filter field children rendered inside the `FilterSearchFilters` popover.\n   * Wire each field to a column via `useFilterSearchFilters()` keyed by column\n   * id. When provided, the toolbar renders the filter popover + an applied-filter\n   * chip row below it.\n   */\n  children?: ReactNode;\n  /** Label for the filters trigger button. */\n  filtersLabel?: ReactNode;\n  /** Format an applied-filter chip's label (defaults to `\"<id>: <value>\"`). */\n  getFilterChipLabel?: (key: string, value: unknown) => ReactNode;\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  leading,\n  searchKey,\n  searchPlaceholder = 'Filter…',\n  children,\n  filtersLabel = 'Filters',\n  getFilterChipLabel,\n}: DataTableToolbarProps<TData>) {\n  const columnFilters = table.getState().columnFilters;\n  const hasFilterFields = Boolean(children);\n  const isFiltered = columnFilters.length > 0;\n\n  const filterRecord = filtersToRecord(columnFilters, searchKey);\n\n  // Commit the per-column filter record back to TanStack, preserving the\n  // separate text-search filter (`searchKey`) untouched.\n  const handleFiltersChange = (next: Record<string, unknown>) => {\n    const searchFilter = searchKey\n      ? columnFilters.filter((filter) => filter.id === searchKey)\n      : [];\n    table.setColumnFilters([...searchFilter, ...recordToFilters(next)]);\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <FilterSearch>\n        {leading}\n        {searchKey && (\n          <InputSearch\n            placeholder={searchPlaceholder}\n            aria-label={searchPlaceholder}\n            value={\n              (table.getColumn(searchKey)?.getFilterValue() as string) ?? ''\n            }\n            onChange={(event) =>\n              table.getColumn(searchKey)?.setFilterValue(event.target.value)\n            }\n            className=\"w-56\"\n          />\n        )}\n        {hasFilterFields && (\n          <FilterSearchFilters\n            value={filterRecord}\n            onValueChange={handleFiltersChange}\n            label={filtersLabel}\n          >\n            {children}\n          </FilterSearchFilters>\n        )}\n        {!hasFilterFields && isFiltered && (\n          <Button\n            variant=\"ghost\"\n            onClick={() => table.resetColumnFilters()}\n            className=\"h-8 gap-2\"\n          >\n            Reset\n            <TimesIcon />\n          </Button>\n        )}\n        <FilterSearchActions>\n          <DataTableViewOptions table={table} />\n        </FilterSearchActions>\n      </FilterSearch>\n      {hasFilterFields && (\n        <FilterSearchAppliedFilters\n          filters={filterRecord}\n          onValueChange={handleFiltersChange}\n          getFilterChipLabel={getFilterChipLabel}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["filtersToRecord","columnFilters","excludeKey","filter","recordToFilters","record","id","value","DataTableToolbar","table","leading","searchKey","searchPlaceholder","children","filtersLabel","getFilterChipLabel","hasFilterFields","isFiltered","filterRecord","handleFiltersChange","next","searchFilter","jsxs","FilterSearch","jsx","InputSearch","_a","event","FilterSearchFilters","Button","TimesIcon","FilterSearchActions","DataTableViewOptions","FilterSearchAppliedFilters"],"mappings":";;;;;;AAkBA,SAASA,EACPC,GACAC,GACyB;AACzB,SAAO,OAAO;AAAA,IACZD,EACG,OAAO,CAACE,MAAWA,EAAO,OAAOD,CAAU,EAC3C,IAAI,CAACC,MAAW,CAACA,EAAO,IAAIA,EAAO,KAAK,CAAC;AAAA,EAAA;AAEhD;AAEA,SAASC,EACPC,GACoB;AACpB,SAAO,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,GAAIC,CAAK,OAAO,EAAE,IAAAD,GAAI,OAAAC,IAAQ;AACpE;AA0BO,SAASC,EAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AACF,GAAiC;;AAC/B,QAAMd,IAAgBQ,EAAM,SAAA,EAAW,eACjCO,IAAkB,EAAQH,GAC1BI,IAAahB,EAAc,SAAS,GAEpCiB,IAAelB,EAAgBC,GAAeU,CAAS,GAIvDQ,IAAsB,CAACC,MAAkC;AAC7D,UAAMC,IAAeV,IACjBV,EAAc,OAAO,CAACE,MAAWA,EAAO,OAAOQ,CAAS,IACxD,CAAA;AACJ,IAAAF,EAAM,iBAAiB,CAAC,GAAGY,GAAc,GAAGjB,EAAgBgB,CAAI,CAAC,CAAC;AAAA,EACpE;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAA,EAACC,GAAA,EACE,UAAA;AAAA,MAAAb;AAAA,MACAC,KACC,gBAAAa;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAab;AAAA,UACb,cAAYA;AAAA,UACZ,SACGc,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,qBAA+B;AAAA,UAE9D,UAAU,CAACC,MAAA;;AACT,oBAAAD,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,eAAeC,EAAM,OAAO;AAAA;AAAA,UAE1D,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGbX,KACC,gBAAAQ;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOV;AAAA,UACP,eAAeC;AAAA,UACf,OAAOL;AAAA,UAEN,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,CAACG,KAAmBC,KACnB,gBAAAK;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAMpB,EAAM,mBAAA;AAAA,UACrB,WAAU;AAAA,UACX,UAAA;AAAA,YAAA;AAAA,8BAEEqB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGf,gBAAAN,EAACO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EAAqB,OAAAvB,GAAc,EAAA,CACtC;AAAA,IAAA,GACF;AAAA,IACCO,KACC,gBAAAQ;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,SAASf;AAAA,QACT,eAAeC;AAAA,QACf,oBAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}

package/dist/components/ui/data-table/data-table-view-options.js

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import { TableViewOptions as n } from "../table/table-view-options.js";
+function r({
+  table: t
+}) {
+  const o = t.getAllColumns().filter(
+    (e) => typeof e.accessorFn < "u" && e.getCanHide()
+  ).map((e) => ({
+    id: e.id,
+    label: e.id,
+    hidden: !e.getIsVisible()
+  }));
+  return /* @__PURE__ */ s(
+    n,
+    {
+      columns: o,
+      onToggle: (e) => {
+        const i = t.getColumn(e);
+        i == null || i.toggleVisibility(!i.getIsVisible());
+      }
+    }
+  );
+}
+export {
+  r as DataTableViewOptions
+};
+//# sourceMappingURL=data-table-view-options.js.map

package/dist/components/ui/data-table/data-table-view-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\nimport { TableViewOptions } from '../table';\n\ninterface DataTableViewOptionsProps<TData> {\n  table: Table<TData>;\n}\n\n// Thin TanStack adapter over the primitive-only `TableViewOptions`: maps\n// `table.getAllColumns()` onto the plain `{ id, label, hidden }[]` shape and\n// routes `onToggle` back through `column.toggleVisibility()`.\nexport function DataTableViewOptions<TData>({\n  table,\n}: DataTableViewOptionsProps<TData>) {\n  const columns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        typeof column.accessorFn !== 'undefined' && column.getCanHide()\n    )\n    .map((column) => ({\n      id: column.id,\n      label: column.id,\n      hidden: !column.getIsVisible(),\n    }));\n\n  return (\n    <TableViewOptions\n      columns={columns}\n      onToggle={(id) => {\n        const column = table.getColumn(id);\n        column?.toggleVisibility(!column.getIsVisible());\n      }}\n    />\n  );\n}\n"],"names":["DataTableViewOptions","table","columns","column","jsx","TableViewOptions","id"],"mappings":";;AAWO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AACF,GAAqC;AACnC,QAAMC,IAAUD,EACb,cAAA,EACA;AAAA,IACC,CAACE,MACC,OAAOA,EAAO,aAAe,OAAeA,EAAO,WAAA;AAAA,EAAW,EAEjE,IAAI,CAACA,OAAY;AAAA,IAChB,IAAIA,EAAO;AAAA,IACX,OAAOA,EAAO;AAAA,IACd,QAAQ,CAACA,EAAO,aAAA;AAAA,EAAa,EAC7B;AAEJ,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,UAAU,CAACI,MAAO;AAChB,cAAMH,IAASF,EAAM,UAAUK,CAAE;AACjC,QAAAH,KAAA,QAAAA,EAAQ,iBAAiB,CAACA,EAAO,aAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,212 @@
+import { jsx as n, jsxs as M } from "react/jsx-runtime";
+import { useState as u, useEffect as ee, Fragment as oe } from "react";
+import { useReactTable as te, flexRender as z } from "../../../node_modules/.pnpm/@tanstack_react-table@8.21.3_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@tanstack/react-table/build/lib/index.js";
+import { cn as b } from "../../../lib/utils.js";
+import { Table as le, TableHeader as ne, TableRow as f, TableHead as ie, TableBody as re, TableCell as S } from "../table/table.js";
+import { getFilteredRowModel as ae, getSortedRowModel as ce, getPaginationRowModel as se, getExpandedRowModel as de, getCoreRowModel as ue } from "../../../node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js";
+function N(t) {
+  const l = t.getIsPinned();
+  if (l)
+    return {
+      position: "sticky",
+      left: l === "left" ? t.getStart("left") : void 0,
+      right: l === "right" ? t.getAfter("right") : void 0,
+      zIndex: 1,
+      // Derived from the same border token every other table divider uses (not a
+      // hardcoded color), so the separator theme-adapts automatically.
+      boxShadow: l === "left" ? "4px 0 4px -4px var(--ui-table-global-cell-border-color)" : "-4px 0 4px -4px var(--ui-table-global-cell-border-color)"
+    };
+}
+function I(t, l) {
+  if (l || t.columnDef.size !== void 0)
+    return t.getSize();
+}
+function me(t, l) {
+  const a = N(t.column), i = I(t.column, l);
+  if (!(!a && i === void 0))
+    return { ...a, width: i };
+}
+function ge(t, l) {
+  const a = N(t.column), i = I(t.column, l);
+  if (!(!a && i === void 0))
+    return { ...a, width: i };
+}
+const D = 20, C = Number.MAX_SAFE_INTEGER;
+function be(t, l, { shiftKey: a, min: i, max: m }) {
+  const p = a ? 50 : 10;
+  if (t === "ArrowLeft") return Math.min(m, Math.max(i, l - p));
+  if (t === "ArrowRight") return Math.max(i, Math.min(m, l + p));
+}
+function xe({
+  columns: t,
+  data: l,
+  getRowCanExpand: a,
+  renderExpandedRow: i,
+  striped: m = !1,
+  bordered: p = !1,
+  highlightCurrentRow: y = !1,
+  skeleton: E = !1,
+  skeletonRows: T = 5,
+  enableColumnResizing: g = !1,
+  onColumnSizingChange: x,
+  columnVisibility: _,
+  onColumnVisibilityChange: w
+}) {
+  const [A, P] = u([]), [F, k] = u([]), [K, L] = u({}), H = _ ?? K, [V, U] = u({}), [B, j] = u({}), [O, X] = u({}), [Z, G] = u(), W = (e) => {
+    X(e), x == null || x(e);
+  }, $ = (e) => {
+    L(e), w == null || w(e);
+  }, d = te({
+    data: l,
+    columns: t,
+    enableColumnResizing: g,
+    columnResizeMode: "onChange",
+    getCoreRowModel: ue(),
+    getExpandedRowModel: de(),
+    getPaginationRowModel: se(),
+    getRowCanExpand: a,
+    onExpandedChange: j,
+    onSortingChange: P,
+    getSortedRowModel: ce(),
+    onColumnFiltersChange: k,
+    getFilteredRowModel: ae(),
+    onColumnVisibilityChange: $,
+    onRowSelectionChange: U,
+    onColumnSizingChange: W,
+    state: {
+      sorting: A,
+      columnFilters: F,
+      columnVisibility: H,
+      rowSelection: V,
+      expanded: B,
+      columnSizing: O
+    }
+  }), q = (e, o) => {
+    if (e.ctrlKey || e.altKey || e.metaKey) return;
+    const r = be(e.key, o.column.getSize(), {
+      shiftKey: e.shiftKey,
+      min: o.column.columnDef.minSize ?? D,
+      max: o.column.columnDef.maxSize ?? C
+    });
+    r !== void 0 && (e.preventDefault(), d.setColumnSizing((c) => ({ ...c, [o.column.id]: r })));
+  };
+  ee(() => {
+    d.getAllLeafColumns().forEach((e) => {
+      var o;
+      e.pin(((o = e.columnDef.meta) == null ? void 0 : o.pin) ?? !1);
+    });
+  }, [d, t]);
+  const v = d.getRowModel().rows, J = p ? "[&_th:not(:last-child)]:border-e [&_td:not(:last-child)]:border-e [&_th]:border-[var(--ui-table-global-cell-border-color)] [&_td]:border-[var(--ui-table-global-cell-border-color)]" : void 0, Q = "bg-background";
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: b(
+        "rounded-md border border-[var(--ui-table-global-cell-border-color)]",
+        J
+      ),
+      children: /* @__PURE__ */ M(
+        le,
+        {
+          style: g ? { width: d.getCenterTotalSize() } : void 0,
+          children: [
+            /* @__PURE__ */ n(ne, { children: d.getHeaderGroups().map((e) => /* @__PURE__ */ n(f, { children: e.headers.map((o) => {
+              var h;
+              const r = o.column.getIsPinned(), c = g && o.column.getCanResize();
+              return /* @__PURE__ */ M(
+                ie,
+                {
+                  wrap: (h = o.column.columnDef.meta) == null ? void 0 : h.wrap,
+                  style: me(o, g),
+                  className: b(
+                    c && "relative",
+                    r && Q
+                  ),
+                  children: [
+                    o.isPlaceholder ? null : z(
+                      o.column.columnDef.header,
+                      o.getContext()
+                    ),
+                    c && /* @__PURE__ */ n(
+                      "div",
+                      {
+                        role: "separator",
+                        "aria-orientation": "vertical",
+                        "aria-label": "Resize column",
+                        "aria-valuenow": o.column.getSize(),
+                        "aria-valuemin": o.column.columnDef.minSize ?? D,
+                        "aria-valuemax": o.column.columnDef.maxSize ?? C,
+                        tabIndex: 0,
+                        onMouseDown: o.getResizeHandler(),
+                        onTouchStart: o.getResizeHandler(),
+                        onKeyDown: (s) => q(s, o),
+                        className: b(
+                          "absolute end-0 top-0 h-full w-1 cursor-(--ui-resizable-cursor) touch-none select-none bg-[var(--ui-table-global-cell-border-color)] opacity-0 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-(--ui-focus-primary)",
+                          o.column.getIsResizing() && "opacity-100"
+                        )
+                      }
+                    )
+                  ]
+                },
+                o.id
+              );
+            }) }, e.id)) }),
+            /* @__PURE__ */ n(re, { children: E ? Array.from({ length: T }).map((e, o) => /* @__PURE__ */ n(f, { className: "hover:bg-transparent", children: d.getVisibleLeafColumns().map((r) => /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n("div", { className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]" }) }, r.id)) }, `skeleton-${o}`)) : v != null && v.length ? v.map((e, o) => {
+              const r = e.getIsSelected(), c = y && Z === e.id, h = r || c ? "bg-[var(--ui-table-global-row-color-active)]" : m && o % 2 === 1 ? "bg-[var(--ui-background-surface-secondary)]" : "bg-background";
+              return /* @__PURE__ */ M(oe, { children: [
+                /* @__PURE__ */ n(
+                  f,
+                  {
+                    selected: r,
+                    onClick: y ? () => G(e.id) : void 0,
+                    className: b(
+                      y && "cursor-pointer",
+                      m && o % 2 === 1 && !r && !c && "bg-[var(--ui-background-surface-secondary)]",
+                      c && !r && "bg-[var(--ui-table-global-row-color-active)]"
+                    ),
+                    children: e.getVisibleCells().map((s) => {
+                      var R;
+                      const Y = s.column.getIsPinned();
+                      return /* @__PURE__ */ n(
+                        S,
+                        {
+                          wrap: (R = s.column.columnDef.meta) == null ? void 0 : R.wrap,
+                          style: ge(s, g),
+                          className: b(Y && h),
+                          children: z(
+                            s.column.columnDef.cell,
+                            s.getContext()
+                          )
+                        },
+                        s.id
+                      );
+                    })
+                  }
+                ),
+                i && e.getIsExpanded() && /* @__PURE__ */ n(f, { className: "hover:bg-transparent", children: /* @__PURE__ */ n(
+                  S,
+                  {
+                    className: "h-auto py-3",
+                    colSpan: e.getVisibleCells().length,
+                    children: i(e)
+                  }
+                ) })
+              ] }, e.id);
+            }) : /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(
+              S,
+              {
+                colSpan: t.length,
+                className: "h-24 text-center text-[var(--ui-table-data-value-color-disabled)]",
+                children: "No results."
+              }
+            ) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  xe as DataTable,
+  be as getResizeKeyboardStep
+};
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sources":["../../../../src/components/ui/data-table/data-table.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  Fragment,\n  type KeyboardEvent,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  type Cell,\n  type Column,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type ColumnSizingState,\n  type ExpandedState,\n  type Header,\n  type OnChangeFn,\n  type Row,\n  type RowData,\n  type SortingState,\n  type VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { cn } from '@/lib/utils';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `data-table`\n// (packages/ui-legacy/src/components/ui/data-table/). A TanStack-react-table v8\n// data grid composed over the ui-react Table primitives — sorting, filtering,\n// column visibility, row selection, pagination, and optional row expansion. The\n// presentational flags (`striped`, `bordered`, `skeleton`, `highlightCurrentRow`)\n// are borrowed from the Vue `AvTable`; behavioral features come from TanStack.\n// Pair with DataTableToolbar / DataTablePagination / DataTableColumnHeader, which\n// take the `table` instance returned to column cells via TanStack context.\n// The grid cells/rows/headers are themed by the Table primitives' `--ui-table-*`\n// tier; DataTable's own chrome reuses that tier too — the wrapper border matches\n// the cell borders (`--ui-table-global-cell-border-color`), the empty-state uses\n// the muted table-value color, the current row the active-row color, and stripes\n// the secondary surface.\n//\n// Advanced-grid opt-ins built on native TanStack features:\n//   • Column resizing  -> `enableColumnResizing` + `columnResizing` state, with a\n//     drag handle rendered from `header.getResizeHandler()`.\n//   • Sticky columns   -> `ColumnDef.meta.pin: 'left' | 'right'` drives TanStack's\n//     native column-pinning API (`column.pin()` / `getStart()` / `getAfter()`),\n//     surfaced as `position: sticky` cells with an opaque row-token background.\n\n// Extend TanStack's per-column `meta` with the flags DataTable reads. Augmenting\n// the module keeps `ColumnDef.meta.pin` type-safe at the call site.\ndeclare module '@tanstack/react-table' {\n  // Type params must match TanStack's `ColumnMeta<TData, TValue>` arity/names for\n  // declaration merging, even though this augmentation doesn't reference them.\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /** Pin the column to a table edge (sticky while the grid scrolls horizontally). */\n    pin?: 'left' | 'right';\n    /**\n     * Let the column's header + cells wrap onto multiple lines (drops the fixed\n     * row height); mirrors the `Table` primitives' `wrap` prop on TableHead/TableCell.\n     */\n    wrap?: boolean;\n  }\n}\n\n// Sticky offset + stacking for a pinned column, computed from TanStack's own\n// pinning geometry rather than hand-rolled CSS math. A subtle edge shadow (facing\n// the scrollable columns) separates the pinned column from content sliding\n// underneath it — the opaque background that actually hides that content lives\n// in the caller's className (see `headerPinnedBg`/`rowBg` below), not here.\nfunction getPinnedStyle<TData>(\n  column: Column<TData, unknown>\n): CSSProperties | undefined {\n  const pinned = column.getIsPinned();\n  if (!pinned) return undefined;\n  return {\n    position: 'sticky',\n    left: pinned === 'left' ? column.getStart('left') : undefined,\n    right: pinned === 'right' ? column.getAfter('right') : undefined,\n    zIndex: 1,\n    // Derived from the same border token every other table divider uses (not a\n    // hardcoded color), so the separator theme-adapts automatically.\n    boxShadow:\n      pinned === 'left'\n        ? '4px 0 4px -4px var(--ui-table-global-cell-border-color)'\n        : '-4px 0 4px -4px var(--ui-table-global-cell-border-color)',\n  };\n}\n\n// A column's rendered width tracks TanStack's size model once the consumer has\n// opted in — either explicitly (a `size` set on the `ColumnDef`) or implicitly\n// (column resizing enabled, which needs every column's width to be deterministic\n// for the drag math to work). Without either, columns stay in native `<table>`\n// auto-layout so `size`'s internal default (TanStack falls back to 150) never\n// forces every untouched column to a fixed width.\nfunction getColumnWidth<TData>(\n  column: Column<TData, unknown>,\n  enableColumnResizing: boolean\n): number | undefined {\n  if (enableColumnResizing || column.columnDef.size !== undefined) {\n    return column.getSize();\n  }\n  return undefined;\n}\n\nfunction getHeaderStyle<TData>(\n  header: Header<TData, unknown>,\n  enableColumnResizing: boolean\n): CSSProperties | undefined {\n  const pin = getPinnedStyle(header.column);\n  const width = getColumnWidth(header.column, enableColumnResizing);\n  if (!pin && width === undefined) return undefined;\n  return { ...pin, width };\n}\n\nfunction getCellStyle<TData>(\n  cell: Cell<TData, unknown>,\n  enableColumnResizing: boolean\n): CSSProperties | undefined {\n  const pin = getPinnedStyle(cell.column);\n  const width = getColumnWidth(cell.column, enableColumnResizing);\n  if (!pin && width === undefined) return undefined;\n  return { ...pin, width };\n}\n\n// Matches TanStack's own `defaultColumnSizing` fallback bounds — the same\n// range `column.getSize()` already clamps to internally when a column\n// doesn't set its own `minSize`/`maxSize`.\nconst DEFAULT_MIN_COLUMN_SIZE = 20;\nconst DEFAULT_MAX_COLUMN_SIZE = Number.MAX_SAFE_INTEGER;\n\n/**\n * Computes the next column width for an Arrow-key resize step (Shift = larger\n * step), clamped to `[min, max]` regardless of which bound `currentSize`\n * started outside of. Returns `undefined` for any other key, so the caller\n * knows not to `preventDefault()`/resize.\n */\nexport function getResizeKeyboardStep(\n  key: string,\n  currentSize: number,\n  { shiftKey, min, max }: { shiftKey: boolean; min: number; max: number }\n): number | undefined {\n  const step = shiftKey ? 50 : 10;\n  if (key === 'ArrowLeft') return Math.min(max, Math.max(min, currentSize - step));\n  if (key === 'ArrowRight') return Math.max(min, Math.min(max, currentSize + step));\n  return undefined;\n}\n\nexport interface DataTableProps<TData, TValue> {\n  columns: ColumnDef<TData, TValue>[];\n  data: TData[];\n  /** Enables row expansion for rows that return true. Pair with `renderExpandedRow`. */\n  getRowCanExpand?: (row: Row<TData>) => boolean;\n  /**\n   * Renders expanded content for an expanded row. Used together with\n   * `getRowCanExpand`.\n   */\n  renderExpandedRow?: (row: Row<TData>) => ReactNode;\n  /** Alternating row backgrounds. */\n  striped?: boolean;\n  /** Vertical borders between columns (rows already have horizontal borders). */\n  bordered?: boolean;\n  /** Highlight the row the user last clicked (the \"current\" row). */\n  highlightCurrentRow?: boolean;\n  /** Render placeholder skeleton rows instead of data (loading state). */\n  skeleton?: boolean;\n  /** Number of skeleton rows to render when `skeleton` is set. */\n  skeletonRows?: number;\n  /**\n   * Opt in to interactive column resizing. Renders a drag handle at the trailing\n   * edge of each resizable header cell (TanStack's native `columnResizing`).\n   */\n  enableColumnResizing?: boolean;\n  /** Passthrough for the `columnSizing` state so a consumer can persist widths. */\n  onColumnSizingChange?: OnChangeFn<ColumnSizingState>;\n  /**\n   * Controlled column-visibility state — pass this (with\n   * `onColumnVisibilityChange`) to share one visibility state with an\n   * external `useReactTable` instance (e.g. a composed toolbar). Uncontrolled\n   * (internal state) when omitted.\n   */\n  columnVisibility?: VisibilityState;\n  /** Passthrough for the `columnVisibility` state; pairs with `columnVisibility`. */\n  onColumnVisibilityChange?: OnChangeFn<VisibilityState>;\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  getRowCanExpand,\n  renderExpandedRow,\n  striped = false,\n  bordered = false,\n  highlightCurrentRow = false,\n  skeleton = false,\n  skeletonRows = 5,\n  enableColumnResizing = false,\n  onColumnSizingChange,\n  columnVisibility: controlledColumnVisibility,\n  onColumnVisibilityChange,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [internalColumnVisibility, setInternalColumnVisibility] =\n    useState<VisibilityState>({});\n  const columnVisibility = controlledColumnVisibility ?? internalColumnVisibility;\n  const [rowSelection, setRowSelection] = useState({});\n  const [expanded, setExpanded] = useState<ExpandedState>({});\n  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});\n  const [currentRowId, setCurrentRowId] = useState<string>();\n\n  const handleColumnSizingChange: OnChangeFn<ColumnSizingState> = (updater) => {\n    setColumnSizing(updater);\n    onColumnSizingChange?.(updater);\n  };\n\n  const handleColumnVisibilityChange: OnChangeFn<VisibilityState> = (updater) => {\n    setInternalColumnVisibility(updater);\n    onColumnVisibilityChange?.(updater);\n  };\n\n  const table = useReactTable({\n    data,\n    columns,\n    enableColumnResizing,\n    columnResizeMode: 'onChange',\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getRowCanExpand,\n    onExpandedChange: setExpanded,\n    onSortingChange: setSorting,\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onRowSelectionChange: setRowSelection,\n    onColumnSizingChange: handleColumnSizingChange,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  // Arrow-key resize on the drag handle (see `canResize` below). Ignores any\n  // modifier besides Shift so it doesn't hijack browser/OS shortcuts bound to\n  // Ctrl/Alt/Cmd+Arrow (e.g. back navigation) while the handle has focus.\n  const handleResizeKeyDown = (\n    event: KeyboardEvent<HTMLDivElement>,\n    header: Header<TData, unknown>\n  ) => {\n    if (event.ctrlKey || event.altKey || event.metaKey) return;\n    const nextSize = getResizeKeyboardStep(event.key, header.column.getSize(), {\n      shiftKey: event.shiftKey,\n      min: header.column.columnDef.minSize ?? DEFAULT_MIN_COLUMN_SIZE,\n      max: header.column.columnDef.maxSize ?? DEFAULT_MAX_COLUMN_SIZE,\n    });\n    if (nextSize === undefined) return;\n    event.preventDefault();\n    table.setColumnSizing((old) => ({ ...old, [header.column.id]: nextSize }));\n  };\n\n  // Read each column's `meta.pin` and drive TanStack's native pinning state.\n  // Always calls `pin()` (rather than only when truthy) so a column whose\n  // `meta.pin` is removed dynamically actually un-pins.\n  useEffect(() => {\n    table.getAllLeafColumns().forEach((column) => {\n      column.pin(column.columnDef.meta?.pin ?? false);\n    });\n  }, [table, columns]);\n\n  const rows = table.getRowModel().rows;\n  // Vertical borders are opt-in; a trailing border on the last cell would\n  // double up with the wrapper, so suppress it.\n  const borderedClass = bordered\n    ? '[&_th:not(:last-child)]:border-e [&_td:not(:last-child)]:border-e [&_th]:border-[var(--ui-table-global-cell-border-color)] [&_td]:border-[var(--ui-table-global-cell-border-color)]'\n    : undefined;\n\n  // A pinned header/body cell must be opaque so the cells scrolling under it\n  // (same row) aren't visible. `--ui-table-global-row-color-idle` is\n  // *transparent by design* (an idle row shows the page/card surface through\n  // it), so it can't be reused here — pinned idle cells need the actual\n  // resolved surface color instead (`--ui-background-surface-primary`, bridged\n  // to `bg-background`). Non-idle states (selected/current/striped) already use\n  // real opaque tokens and are safe to mirror as-is (see `rowBg` below).\n  const headerPinnedBg = 'bg-background';\n\n  return (\n    <div\n      className={cn(\n        'rounded-md border border-[var(--ui-table-global-cell-border-color)]',\n        borderedClass\n      )}\n    >\n      <Table\n        style={\n          enableColumnResizing\n            ? { width: table.getCenterTotalSize() }\n            : undefined\n        }\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const isPinned = header.column.getIsPinned();\n                const canResize =\n                  enableColumnResizing && header.column.getCanResize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    wrap={header.column.columnDef.meta?.wrap}\n                    style={getHeaderStyle(header, enableColumnResizing)}\n                    className={cn(\n                      canResize && 'relative',\n                      isPinned && headerPinnedBg\n                    )}\n                  >\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                    {canResize && (\n                      <div\n                        role=\"separator\"\n                        aria-orientation=\"vertical\"\n                        aria-label=\"Resize column\"\n                        aria-valuenow={header.column.getSize()}\n                        aria-valuemin={\n                          header.column.columnDef.minSize ?? DEFAULT_MIN_COLUMN_SIZE\n                        }\n                        aria-valuemax={\n                          header.column.columnDef.maxSize ?? DEFAULT_MAX_COLUMN_SIZE\n                        }\n                        tabIndex={0}\n                        onMouseDown={header.getResizeHandler()}\n                        onTouchStart={header.getResizeHandler()}\n                        onKeyDown={(event) => handleResizeKeyDown(event, header)}\n                        className={cn(\n                          'absolute end-0 top-0 h-full w-1 cursor-(--ui-resizable-cursor) touch-none select-none bg-[var(--ui-table-global-cell-border-color)] opacity-0 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-(--ui-focus-primary)',\n                          header.column.getIsResizing() && 'opacity-100'\n                        )}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {skeleton ? (\n            Array.from({ length: skeletonRows }).map((_, rowIndex) => (\n              <TableRow key={`skeleton-${rowIndex}`} className=\"hover:bg-transparent\">\n                {table.getVisibleLeafColumns().map((column) => (\n                  <TableCell key={column.id}>\n                    <div className=\"h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]\" />\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : rows?.length ? (\n            rows.map((row, rowIndex) => {\n              const isSelected = row.getIsSelected();\n              const isCurrent = highlightCurrentRow && currentRowId === row.id;\n              // Opaque background applied to pinned cells so sibling cells don't\n              // show through while the grid scrolls horizontally. Mirrors the\n              // row's own resolved background across selection/current/stripe —\n              // the idle case falls back to the real surface color\n              // (`bg-background`) since the row's own idle token is transparent\n              // by design (see `headerPinnedBg` above).\n              const rowBg =\n                isSelected || isCurrent\n                  ? 'bg-[var(--ui-table-global-row-color-active)]'\n                  : striped && rowIndex % 2 === 1\n                    ? 'bg-[var(--ui-background-surface-secondary)]'\n                    : 'bg-background';\n              return (\n                <Fragment key={row.id}>\n                  <TableRow\n                    selected={isSelected}\n                    onClick={\n                      highlightCurrentRow\n                        ? () => setCurrentRowId(row.id)\n                        : undefined\n                    }\n                    className={cn(\n                      highlightCurrentRow && 'cursor-pointer',\n                      striped &&\n                        rowIndex % 2 === 1 &&\n                        !isSelected &&\n                        !isCurrent &&\n                        'bg-[var(--ui-background-surface-secondary)]',\n                      isCurrent &&\n                        !isSelected &&\n                        'bg-[var(--ui-table-global-row-color-active)]'\n                    )}\n                  >\n                    {row.getVisibleCells().map((cell) => {\n                      const isPinned = cell.column.getIsPinned();\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          wrap={cell.column.columnDef.meta?.wrap}\n                          style={getCellStyle(cell, enableColumnResizing)}\n                          className={cn(isPinned && rowBg)}\n                        >\n                          {flexRender(\n                            cell.column.columnDef.cell,\n                            cell.getContext()\n                          )}\n                        </TableCell>\n                      );\n                    })}\n                  </TableRow>\n                  {renderExpandedRow && row.getIsExpanded() && (\n                    <TableRow className=\"hover:bg-transparent\">\n                      <TableCell\n                        className=\"h-auto py-3\"\n                        colSpan={row.getVisibleCells().length}\n                      >\n                        {renderExpandedRow(row)}\n                      </TableCell>\n                    </TableRow>\n                  )}\n                </Fragment>\n              );\n            })\n          ) : (\n            <TableRow>\n              <TableCell\n                colSpan={columns.length}\n                className=\"h-24 text-center text-[var(--ui-table-data-value-color-disabled)]\"\n              >\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n"],"names":["getPinnedStyle","column","pinned","getColumnWidth","enableColumnResizing","getHeaderStyle","header","pin","width","getCellStyle","cell","DEFAULT_MIN_COLUMN_SIZE","DEFAULT_MAX_COLUMN_SIZE","getResizeKeyboardStep","key","currentSize","shiftKey","min","max","step","DataTable","columns","data","getRowCanExpand","renderExpandedRow","striped","bordered","highlightCurrentRow","skeleton","skeletonRows","onColumnSizingChange","controlledColumnVisibility","onColumnVisibilityChange","sorting","setSorting","useState","columnFilters","setColumnFilters","internalColumnVisibility","setInternalColumnVisibility","columnVisibility","rowSelection","setRowSelection","expanded","setExpanded","columnSizing","setColumnSizing","currentRowId","setCurrentRowId","handleColumnSizingChange","updater","handleColumnVisibilityChange","table","useReactTable","getCoreRowModel","getExpandedRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","handleResizeKeyDown","event","nextSize","old","useEffect","_a","rows","borderedClass","headerPinnedBg","jsx","cn","jsxs","Table","TableHeader","headerGroup","TableRow","isPinned","canResize","TableHead","flexRender","TableBody","_","rowIndex","TableCell","row","isSelected","isCurrent","rowBg","Fragment"],"mappings":"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"}

package/dist/components/ui/date-range-picker/date-range-picker-utils.js

@@ -0,0 +1,28 @@
+import { isValid as n } from "../../../node_modules/.pnpm/date-fns@4.3.0/node_modules/date-fns/isValid.js";
+import { format as a } from "../../../node_modules/.pnpm/date-fns@4.3.0/node_modules/date-fns/format.js";
+import { parse as u } from "../../../node_modules/.pnpm/date-fns@4.3.0/node_modules/date-fns/parse.js";
+import { startOfDay as s } from "../../../node_modules/.pnpm/date-fns@4.3.0/node_modules/date-fns/startOfDay.js";
+const f = "MMM d, yyyy";
+function y(t) {
+  return t && n(t) ? a(t, f) : "";
+}
+function D(t) {
+  const r = u(t.trim(), f, /* @__PURE__ */ new Date());
+  return n(r) ? s(r) : void 0;
+}
+function M(t, r) {
+  var o, e, m, i;
+  return ((o = t.from) == null ? void 0 : o.getTime()) === ((e = r.from) == null ? void 0 : e.getTime()) && ((m = t.to) == null ? void 0 : m.getTime()) === ((i = r.to) == null ? void 0 : i.getTime());
+}
+function l(t) {
+  const { from: r, to: o } = t;
+  return r && o && r.getTime() > o.getTime() ? { from: o, to: r } : t;
+}
+export {
+  f as DISPLAY_FORMAT,
+  y as formatDate,
+  l as normalizeRange,
+  D as parseDate,
+  M as rangesEqual
+};
+//# sourceMappingURL=date-range-picker-utils.js.map

package/dist/components/ui/date-range-picker/date-range-picker-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-utils.js","sources":["../../../../src/components/ui/date-range-picker/date-range-picker-utils.ts"],"sourcesContent":["import { format, isValid, parse, startOfDay } from 'date-fns';\n\n/** A start/end date range. Both ends are optional (a partial range while editing). */\nexport interface DateRange {\n  from?: Date;\n  to?: Date;\n}\n\n/** The date display / parse pattern used by the trigger and the editable fields. */\nexport const DISPLAY_FORMAT = 'MMM d, yyyy';\n\n/**\n * Format a date with {@link DISPLAY_FORMAT}, returning `''` for a missing or\n * invalid `Date`. `date-fns`' `format` throws a `RangeError` on an invalid\n * `Date` (e.g. `new Date('garbage')`), so the `isValid` guard is load-bearing —\n * a truthy-but-invalid `Date` must not reach `format`.\n */\nexport function formatDate(date: Date | undefined): string {\n  return date && isValid(date) ? format(date, DISPLAY_FORMAT) : '';\n}\n\n/**\n * Parse a {@link DISPLAY_FORMAT} string into a `Date`, or `undefined` when the\n * text is empty, partial (mid-type), or not a real calendar date\n * (e.g. `\"Feb 30, 2026\"`). The result is normalized to the start of the day so\n * it round-trips with {@link formatDate} — `date-fns`' `parse` fills the unspecified\n * time-of-day from its reference date, which would otherwise leave a \"now\" time\n * on the value and break equality with the midnight dates the calendar emits.\n *\n * NOTE: the pattern is locale-fixed (US-style `MMM d, yyyy`), matching the\n * `InputDatePicker` trigger. Locale-aware parsing is not yet supported — a\n * known limitation to revisit once the design tier lands.\n */\nexport function parseDate(text: string): Date | undefined {\n  const parsed = parse(text.trim(), DISPLAY_FORMAT, new Date());\n  return isValid(parsed) ? startOfDay(parsed) : undefined;\n}\n\n/** Structural equality of two ranges by their endpoints' timestamps. */\nexport function rangesEqual(a: DateRange, b: DateRange): boolean {\n  return (\n    a.from?.getTime() === b.from?.getTime() &&\n    a.to?.getTime() === b.to?.getTime()\n  );\n}\n\n/**\n * Return a range whose `from` is never after its `to`. When both ends are set\n * and inverted (e.g. the user typed an end date earlier than the start), the two\n * are swapped; a partial range (one end unset) is returned unchanged. Used to\n * keep the calendar highlight and the committed value chronologically ordered.\n */\nexport function normalizeRange(range: DateRange): DateRange {\n  const { from, to } = range;\n  if (from && to && from.getTime() > to.getTime()) {\n    return { from: to, to: from };\n  }\n  return range;\n}\n"],"names":["DISPLAY_FORMAT","formatDate","date","isValid","format","parseDate","text","parsed","parse","startOfDay","rangesEqual","a","b","_a","_b","_c","_d","normalizeRange","range","from","to"],"mappings":";;;;AASO,MAAMA,IAAiB;AAQvB,SAASC,EAAWC,GAAgC;AACzD,SAAOA,KAAQC,EAAQD,CAAI,IAAIE,EAAOF,GAAMF,CAAc,IAAI;AAChE;AAcO,SAASK,EAAUC,GAAgC;AACxD,QAAMC,IAASC,EAAMF,EAAK,KAAA,GAAQN,GAAgB,oBAAI,MAAM;AAC5D,SAAOG,EAAQI,CAAM,IAAIE,EAAWF,CAAM,IAAI;AAChD;AAGO,SAASG,EAAYC,GAAcC,GAAuB;;AAC/D,WACEC,IAAAF,EAAE,SAAF,gBAAAE,EAAQ,iBAAcC,IAAAF,EAAE,SAAF,gBAAAE,EAAQ,gBAC9BC,IAAAJ,EAAE,OAAF,gBAAAI,EAAM,iBAAcC,IAAAJ,EAAE,OAAF,gBAAAI,EAAM;AAE9B;AAQO,SAASC,EAAeC,GAA6B;AAC1D,QAAM,EAAE,MAAAC,GAAM,IAAAC,EAAA,IAAOF;AACrB,SAAIC,KAAQC,KAAMD,EAAK,YAAYC,EAAG,YAC7B,EAAE,MAAMA,GAAI,IAAID,EAAA,IAElBD;AACT;"}

package/dist/components/ui/date-range-picker/date-range-picker.js

@@ -0,0 +1,151 @@
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import * as s from "react";
+import { formatDate as a, normalizeRange as P, rangesEqual as g, DISPLAY_FORMAT as _, parseDate as G } from "./date-range-picker-utils.js";
+import { Popover as H, PopoverTrigger as J, PopoverContent as K } from "../popover/popover.js";
+import { InputDatePicker as Q } from "../input-date-picker/input-date-picker.js";
+import { Calendar as U } from "../calendar/calendar.js";
+import { Button as C } from "../button/button.js";
+import { InputText as W } from "../input-text/input-text.js";
+function k({
+  label: p,
+  text: d,
+  onTextChange: i,
+  onParsedChange: f
+}) {
+  return /* @__PURE__ */ o(
+    W,
+    {
+      "aria-label": p,
+      value: d,
+      placeholder: _,
+      onChange: (h) => {
+        const l = h.target.value;
+        if (i(l), l.trim() === "") {
+          f(void 0);
+          return;
+        }
+        const x = G(l);
+        x && f(x);
+      }
+    }
+  );
+}
+const X = s.forwardRef(
+  ({
+    value: p,
+    defaultValue: d,
+    onValueChange: i,
+    label: f,
+    description: h,
+    error: l,
+    placeholder: x,
+    disabled: A,
+    required: N,
+    className: F
+  }, O) => {
+    const T = p !== void 0, [I, M] = s.useState(
+      d ?? {}
+    ), e = T ? p : I, [v, R] = s.useState(!1), [c, m] = s.useState(e), [j, S] = s.useState(a(e.from)), [w, y] = s.useState(a(e.to)), u = (t) => {
+      S(a(t.from)), y(a(t.to));
+    }, z = (t) => {
+      m(e), u(e), R(t);
+    }, E = () => {
+      const t = d ?? {};
+      m(t), u(t);
+    }, q = () => {
+      const t = P(c);
+      T || M(t), i == null || i(t), R(!1);
+    }, r = P(c);
+    let D;
+    r.from ? D = { from: r.from, to: r.to } : r.to && (D = { from: r.to, to: r.to });
+    const B = (t) => {
+      const n = { from: t == null ? void 0 : t.from, to: t == null ? void 0 : t.to };
+      m(n), u(n);
+    }, L = g(c, e), Y = g(c, d ?? {});
+    return /* @__PURE__ */ b(H, { open: v, onOpenChange: z, children: [
+      /* @__PURE__ */ o(
+        J,
+        {
+          render: /* @__PURE__ */ o(
+            Q,
+            {
+              ref: O,
+              pickerType: "dateRange",
+              label: f,
+              description: h,
+              error: l,
+              placeholder: x,
+              disabled: A,
+              required: N,
+              startDate: a(e.from),
+              endDate: a(e.to),
+              open: v,
+              className: F
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ b(K, { align: "start", className: "w-auto p-0", children: [
+        /* @__PURE__ */ o(
+          U,
+          {
+            mode: "range",
+            numberOfMonths: 2,
+            selected: D,
+            onSelect: B,
+            defaultMonth: c.from ?? e.from
+          }
+        ),
+        /* @__PURE__ */ b("div", { className: "flex items-end gap-2 border-t border-border p-3", children: [
+          /* @__PURE__ */ o(
+            k,
+            {
+              label: "Start date",
+              text: j,
+              onTextChange: S,
+              onParsedChange: (t) => m((n) => ({ ...n, from: t }))
+            }
+          ),
+          /* @__PURE__ */ o("span", { className: "pb-2 text-muted-foreground", children: "–" }),
+          /* @__PURE__ */ o(
+            k,
+            {
+              label: "End date",
+              text: w,
+              onTextChange: y,
+              onParsedChange: (t) => m((n) => ({ ...n, to: t }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ b("div", { className: "flex items-center gap-2 border-t border-border p-3", children: [
+          /* @__PURE__ */ o(
+            C,
+            {
+              type: "button",
+              variant: "ghost",
+              disabled: Y,
+              onClick: E,
+              children: "Reset to default"
+            }
+          ),
+          /* @__PURE__ */ o(
+            C,
+            {
+              type: "button",
+              variant: "default",
+              className: "ms-auto",
+              disabled: L,
+              onClick: q,
+              children: "Apply"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+X.displayName = "DateRangePicker";
+export {
+  X as DateRangePicker
+};
+//# sourceMappingURL=date-range-picker.js.map