@acronis-platform/ui-react 0.57.0 → 0.57.1

package/dist/components/ui/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A searchable single/multi-select built on Base UI's Combobox primitive. The\n// legacy `combobox` was only a hardcoded Popover + cmdk demo; this is a real,\n// reusable component. There is no `--ui-combobox-*` tier, so it reuses the\n// `--ui-input-select-*` tokens (already imported) — the field box, dropdown\n// container, and items match InputSelect, the non-searchable sibling. The Root\n// auto-extracts `{ value, label }` items and filters them by the input value.\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>\n) {\n  return <ComboboxPrimitive.Root {...props} />;\n}\nCombobox.displayName = 'Combobox';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>,\n    'className'\n  > {\n  className?: string;\n  /** Wrapper (box) className. */\n  containerClassName?: string;\n  /** Show a clear (✕) button while the field has a value. */\n  clearable?: boolean;\n}\n\n// The field box: a typeable input + a clear button (optional) + a chevron trigger.\nconst ComboboxInput = React.forwardRef<\n  HTMLInputElement,\n  ComboboxInputProps\n>(({ className, containerClassName, clearable, ...props }, ref) => (\n  // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to\n  // the box's left edge rather than to the bare input inside the box padding.\n  <ComboboxPrimitive.InputGroup\n    className={cn(\n      'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 transition-colors',\n      'not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n      'has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n      'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]',\n      'has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n      containerClassName\n    )}\n  >\n    <ComboboxPrimitive.Input\n      ref={ref}\n      className={cn(\n        'min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n    {clearable && (\n      <ComboboxPrimitive.Clear\n        aria-label=\"Clear\"\n        className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden\"\n      >\n        <TimesIcon size={16} />\n      </ComboboxPrimitive.Clear>\n    )}\n    <ComboboxPrimitive.Trigger\n      aria-label=\"Toggle\"\n      className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\"\n    >\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-has-[input[aria-expanded=true]]:rotate-180\"\n      />\n    </ComboboxPrimitive.Trigger>\n  </ComboboxPrimitive.InputGroup>\n));\nComboboxInput.displayName = 'ComboboxInput';\n\nexport interface ComboboxContentProps\n  extends React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup> {\n  sideOffset?: number;\n  align?: ComboboxPrimitive.Positioner.Props['align'];\n  side?: ComboboxPrimitive.Positioner.Props['side'];\n  /** Container to portal into (e.g. a shadow root, so the popup inherits styles). */\n  portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nconst ComboboxContent = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Popup>,\n  ComboboxContentProps\n>(\n  (\n    { className, children, sideOffset = 4, align = 'start', side = 'bottom', portalContainer, ...props },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <ComboboxPrimitive.Portal container={resolvedContainer}>\n      <ComboboxPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        className=\"z-50 outline-none\"\n      >\n        <ComboboxPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n    );\n  }\n);\nComboboxContent.displayName = 'ComboboxContent';\n\nconst ComboboxList = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.List\n    ref={ref}\n    className={cn('flex flex-col', className)}\n    {...props}\n  />\n));\nComboboxList.displayName = 'ComboboxList';\n\nconst ComboboxItem = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <ComboboxPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n      'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n      'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n      'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n    <ComboboxPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]\">\n      <CheckIcon size={16} />\n    </ComboboxPrimitive.ItemIndicator>\n  </ComboboxPrimitive.Item>\n));\nComboboxItem.displayName = 'ComboboxItem';\n\nconst ComboboxEmpty = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.Empty\n    ref={ref}\n    className={cn(\n      'px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0',\n      className\n    )}\n    {...props}\n  />\n));\nComboboxEmpty.displayName = 'ComboboxEmpty';\n\nconst ComboboxGroup = ComboboxPrimitive.Group;\n\nconst ComboboxGroupLabel = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nComboboxGroupLabel.displayName = 'ComboboxGroupLabel';\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n};\n"],"names":["Combobox","props","jsx","ComboboxPrimitive","ComboboxInput","React","className","containerClassName","clearable","ref","jsxs","cn","TimesIcon","ChevronDownIcon","ComboboxContent","children","sideOffset","align","side","portalContainer","ctxContainer","usePortalContainer","resolvedContainer","ComboboxList","ComboboxItem","CheckIcon","ComboboxEmpty","ComboboxGroup","ComboboxGroupLabel"],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { ArrowUpIcon as c, ArrowDownIcon as l, ArrowsDownUpIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as s } from "../../../lib/utils.js";
+function m({
+  column: r,
+  title: o,
+  className: t,
+  ...a
+}) {
+  if (!r.getCanSort())
+    return /* @__PURE__ */ e("div", { className: s(t), children: o });
+  const i = r.getIsSorted();
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: () => r.toggleSorting(),
+      "aria-label": `Sort by ${o}`,
+      className: s(
+        // -ms-2 px-2 keeps the label flush at the cell padding while giving the
+        // toggle a comfortable click/hover target.
+        "-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0",
+        t
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ e("span", { children: o }),
+        i === "asc" ? /* @__PURE__ */ e(c, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : i === "desc" ? /* @__PURE__ */ e(l, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : /* @__PURE__ */ e(u, { className: "text-[var(--ui-table-header-sort-icon-color-inactive)]" })
+      ]
+    }
+  );
+}
+export {
+  m as DataTableColumnHeader
+};
+//# sourceMappingURL=data-table-column-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n  ArrowDownIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  column: Column<TData, TValue>;\n  title: string;\n}\n\n// Single-click sortable column header — matches the Table primitive's sortable\n// `TableHead`: one click toggles the sort (ascending → descending → unsorted) via\n// TanStack's `column.toggleSorting()`. The trailing icon shows the state with the\n// same `--ui-table-header-sort-icon-*` tokens — an up arrow (ascending) or down\n// arrow (descending) in the active blue, or the muted up/down arrows when\n// unsorted. (Column hiding lives in the toolbar's `DataTableViewOptions`, not a\n// per-header menu, so sorting is a single click.)\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n  ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  if (!column.getCanSort()) {\n    return <div className={cn(className)}>{title}</div>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => column.toggleSorting()}\n      aria-label={`Sort by ${title}`}\n      className={cn(\n        // -ms-2 px-2 keeps the label flush at the cell padding while giving the\n        // toggle a comfortable click/hover target.\n        '-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <span>{title}</span>\n      {sorted === 'asc' ? (\n        <ArrowUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n      ) : sorted === 'desc' ? (\n        <ArrowDownIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n      ) : (\n        <ArrowsDownUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-inactive)]\" />\n      )}\n    </button>\n  );\n}\n"],"names":["DataTableColumnHeader","column","title","className","props","cn","sorted","jsxs","jsx","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon"],"mappings":";;;AAuBO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAA8C;AAC5C,MAAI,CAACH,EAAO;AACV,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAD,GAAM;AAG/C,QAAMI,IAASL,EAAO,YAAA;AAEtB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMN,EAAO,cAAA;AAAA,MACtB,cAAY,WAAWC,CAAK;AAAA,MAC5B,WAAWG;AAAA;AAAA;AAAA,QAGT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAM,UAAAN,EAAA,CAAM;AAAA,QACZI,MAAW,QACV,gBAAAE,EAACC,GAAA,EAAY,WAAU,wDAAuD,IAC5EH,MAAW,SACb,gBAAAE,EAACE,KAAc,WAAU,uDAAA,CAAuD,IAEhF,gBAAAF,EAACG,GAAA,EAAiB,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI7F;"}

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

@@ -0,0 +1,39 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as l from "react";
+import { ChevronDownIcon as s } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as o } from "../../../lib/utils.js";
+function c({ row: e, className: t, ...n }, i) {
+  if (!e.getCanExpand()) return null;
+  const r = e.getIsExpanded();
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      ref: i,
+      type: "button",
+      onClick: e.getToggleExpandedHandler(),
+      "aria-label": r ? "Collapse row" : "Expand row",
+      "aria-expanded": r,
+      className: o(
+        "inline-flex size-6 cursor-pointer items-center justify-center rounded text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
+        t
+      ),
+      ...n,
+      children: /* @__PURE__ */ a(
+        s,
+        {
+          className: o(
+            "transition-transform",
+            !r && "ltr:-rotate-90 rtl:rotate-90"
+          )
+        }
+      )
+    }
+  );
+}
+const f = l.forwardRef(
+  c
+);
+export {
+  f as DataTableExpandTrigger
+};
+//# sourceMappingURL=data-table-expand-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-expand-trigger.js","sources":["../../../../src/components/ui/data-table/data-table-expand-trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Row } from '@tanstack/react-table';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableExpandTriggerProps<TData>\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** The row this trigger toggles. */\n  row: Row<TData>;\n}\n\n// A chevron toggle button wired to a row's expansion state, meant to live inside\n// a column's `cell` render function so the expand affordance sits in a real\n// column (like the Vue2 `type=\"expand\"` column) instead of requiring a\n// whole-row click. Reads the row's own `getCanExpand`/`getIsExpanded` and calls\n// `toggleExpanded()` — the underlying expand state model is unchanged. Renders\n// nothing when the row can't expand.\nfunction DataTableExpandTriggerImpl<TData>(\n  { row, className, ...props }: DataTableExpandTriggerProps<TData>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  if (!row.getCanExpand()) return null;\n\n  const expanded = row.getIsExpanded();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={row.getToggleExpandedHandler()}\n      aria-label={expanded ? 'Collapse row' : 'Expand row'}\n      aria-expanded={expanded}\n      className={cn(\n        'inline-flex size-6 cursor-pointer items-center justify-center rounded text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n        className={cn(\n          'transition-transform',\n          !expanded && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      />\n    </button>\n  );\n}\n\n// `forwardRef` erases the generic; re-cast so callers keep `DataTableExpandTrigger<TData>`.\nexport const DataTableExpandTrigger = React.forwardRef(\n  DataTableExpandTriggerImpl\n) as <TData>(\n  props: DataTableExpandTriggerProps<TData> & {\n    ref?: React.Ref<HTMLButtonElement>;\n  }\n) => React.ReactElement | null;\n"],"names":["DataTableExpandTriggerImpl","row","className","props","ref","expanded","jsx","cn","ChevronDownIcon","DataTableExpandTrigger","React"],"mappings":";;;;AAkBA,SAASA,EACP,EAAE,KAAAC,GAAK,WAAAC,GAAW,GAAGC,EAAA,GACrBC,GACA;AACA,MAAI,CAACH,EAAI,aAAA,EAAgB,QAAO;AAEhC,QAAMI,IAAWJ,EAAI,cAAA;AAErB,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,SAASH,EAAI,yBAAA;AAAA,MACb,cAAYI,IAAW,iBAAiB;AAAA,MACxC,iBAAeA;AAAA,MACf,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA,CAACF,KAAY;AAAA,UAAA;AAAA,QACf;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAGO,MAAMI,IAAyBC,EAAM;AAAA,EAC1CV;AACF;"}

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

@@ -0,0 +1,89 @@
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { ChevronFirstIcon as o, ChevronLeftIcon as l, ChevronRightIcon as s, ChevronLastIcon as c } from "@acronis-platform/icons-react/stroke-mono";
+import { InputSelect as d, InputSelectTrigger as g, InputSelectValue as m, InputSelectContent as p, InputSelectItem as h } from "../input-select/input-select.js";
+import { ButtonIcon as i } from "../button-icon/button-icon.js";
+function C({
+  table: e,
+  pageSizeOptions: r = [10, 20, 30, 40, 50]
+}) {
+  return /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-2", children: [
+    /* @__PURE__ */ a("div", { className: "flex-1 text-sm text-muted-foreground", children: [
+      e.getFilteredSelectedRowModel().rows.length,
+      " of",
+      " ",
+      e.getFilteredRowModel().rows.length,
+      " row(s) selected."
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-6 lg:gap-8", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ n("p", { className: "text-sm font-medium", children: "Rows per page" }),
+        /* @__PURE__ */ a(
+          d,
+          {
+            value: `${e.getState().pagination.pageSize}`,
+            onValueChange: (t) => e.setPageSize(Number(t)),
+            children: [
+              /* @__PURE__ */ n(g, { "aria-label": "Rows per page", className: "h-8 w-[70px]", children: /* @__PURE__ */ n(m, {}) }),
+              /* @__PURE__ */ n(p, { children: r.map((t) => /* @__PURE__ */ n(h, { value: `${t}`, children: t }, t)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
+        "Page ",
+        e.getState().pagination.pageIndex + 1,
+        " of",
+        " ",
+        e.getPageCount()
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ n(
+          i,
+          {
+            variant: "secondary",
+            "aria-label": "Go to first page",
+            className: "hidden lg:inline-flex",
+            onClick: () => e.setPageIndex(0),
+            disabled: !e.getCanPreviousPage(),
+            children: /* @__PURE__ */ n(o, {})
+          }
+        ),
+        /* @__PURE__ */ n(
+          i,
+          {
+            variant: "secondary",
+            "aria-label": "Go to previous page",
+            onClick: () => e.previousPage(),
+            disabled: !e.getCanPreviousPage(),
+            children: /* @__PURE__ */ n(l, {})
+          }
+        ),
+        /* @__PURE__ */ n(
+          i,
+          {
+            variant: "secondary",
+            "aria-label": "Go to next page",
+            onClick: () => e.nextPage(),
+            disabled: !e.getCanNextPage(),
+            children: /* @__PURE__ */ n(s, {})
+          }
+        ),
+        /* @__PURE__ */ n(
+          i,
+          {
+            variant: "secondary",
+            "aria-label": "Go to last page",
+            className: "hidden lg:inline-flex",
+            onClick: () => e.setPageIndex(e.getPageCount() - 1),
+            disabled: !e.getCanNextPage(),
+            children: /* @__PURE__ */ n(c, {})
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  C as DataTablePagination
+};
+//# sourceMappingURL=data-table-pagination.js.map

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,280 @@
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import { useState as m, useEffect as ve, Fragment as K } from "react";
+import { useReactTable as Se, flexRender as k } 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 h } from "../../../lib/utils.js";
+import { useIntersectionObserver as ye } from "../../../hooks/use-intersection-observer.js";
+import { Table as we, TableHeader as Re, TableRow as u, TableHead as xe, TableBody as ze, TableCell as g } from "../table/table.js";
+import { getFilteredRowModel as Ne, getSortedRowModel as Ce, getPaginationRowModel as De, getExpandedRowModel as Ie, getCoreRowModel as Me } from "../../../node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js";
+function U(o) {
+  const l = o.getIsPinned();
+  if (l)
+    return {
+      position: "sticky",
+      left: l === "left" ? o.getStart("left") : void 0,
+      right: l === "right" ? o.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-row-border-color)" : "-4px 0 4px -4px var(--ui-table-global-row-border-color)"
+    };
+}
+function B(o, l) {
+  if (l || o.columnDef.size !== void 0)
+    return o.getSize();
+}
+function Ee(o, l) {
+  const i = U(o.column), s = B(o.column, l);
+  if (!(!i && s === void 0))
+    return { ...i, width: s };
+}
+function _e(o, l) {
+  const i = U(o.column), s = B(o.column, l);
+  if (!(!i && s === void 0))
+    return { ...i, width: s };
+}
+const L = 20, H = Number.MAX_SAFE_INTEGER;
+function Fe(o, l, { shiftKey: i, min: s, max: b }) {
+  const p = i ? 50 : 10;
+  if (o === "ArrowLeft")
+    return Math.min(b, Math.max(s, l - p));
+  if (o === "ArrowRight")
+    return Math.max(s, Math.min(b, l + p));
+}
+function He({
+  columns: o = [],
+  data: l = [],
+  table: i,
+  getRowCanExpand: s,
+  renderExpandedRow: b,
+  striped: p = !1,
+  bordered: O = !1,
+  highlightCurrentRow: w = !1,
+  skeleton: R = !1,
+  skeletonRows: j = 5,
+  enableColumnResizing: I = !1,
+  onColumnSizingChange: x,
+  columnVisibility: X,
+  onColumnVisibilityChange: z,
+  manualSorting: M = !1,
+  sorting: E,
+  onSortingChange: N,
+  renderRow: _,
+  renderEmptyState: F,
+  paginationMode: A = "page",
+  onLoadMore: C,
+  loadMoreRootMargin: Z,
+  hasNextPage: T = !1,
+  isLoadingMore: P = !1
+}) {
+  const [G, W] = m([]), $ = E ?? G, [q, J] = m([]), [Q, Y] = m({}), ee = X ?? Q, [te, ne] = m({}), [oe, le] = m({}), [ie, re] = m({}), [ae, se] = m(), ce = (e) => {
+    re(e), x == null || x(e);
+  }, de = (e) => {
+    Y(e), z == null || z(e);
+  }, ue = (e) => {
+    E === void 0 && W(e), N == null || N(e);
+  }, me = Se({
+    data: l,
+    columns: o,
+    enableColumnResizing: I,
+    columnResizeMode: "onChange",
+    getCoreRowModel: Me(),
+    getExpandedRowModel: Ie(),
+    ...A === "page" ? { getPaginationRowModel: De() } : {},
+    getRowCanExpand: s,
+    onExpandedChange: le,
+    manualSorting: M,
+    onSortingChange: ue,
+    ...M ? {} : { getSortedRowModel: Ce() },
+    onColumnFiltersChange: J,
+    getFilteredRowModel: Ne(),
+    onColumnVisibilityChange: de,
+    onRowSelectionChange: ne,
+    onColumnSizingChange: ce,
+    state: {
+      sorting: $,
+      columnFilters: q,
+      columnVisibility: ee,
+      rowSelection: te,
+      expanded: oe,
+      columnSizing: ie
+    }
+  }), r = i ?? me, D = !i && A === "infinite", v = I && !i, ge = ye({
+    onIntersect: () => C == null ? void 0 : C(),
+    disabled: !D || !T || P,
+    rootMargin: Z
+  }), fe = (e, t) => {
+    if (e.ctrlKey || e.altKey || e.metaKey) return;
+    const a = Fe(e.key, t.column.getSize(), {
+      shiftKey: e.shiftKey,
+      min: t.column.columnDef.minSize ?? L,
+      max: t.column.columnDef.maxSize ?? H
+    });
+    a !== void 0 && (e.preventDefault(), r.setColumnSizing((c) => ({ ...c, [t.column.id]: a })));
+  };
+  ve(() => {
+    i || r.getAllLeafColumns().forEach((e) => {
+      var t;
+      e.pin(((t = e.columnDef.meta) == null ? void 0 : t.pin) ?? !1);
+    });
+  }, [r, o, i]);
+  const f = r.getRowModel().rows, be = O ? "[&_th:not(:last-child)]:border-e [&_td:not(:last-child)]:border-e [&_th]:border-[var(--ui-table-global-row-border-color)] [&_td]:border-[var(--ui-table-global-row-border-color)]" : void 0, pe = "bg-background";
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: h(
+        "rounded-md border border-[var(--ui-table-global-row-border-color)]",
+        be
+      ),
+      children: /* @__PURE__ */ y(
+        we,
+        {
+          style: v ? { width: r.getCenterTotalSize() } : void 0,
+          children: [
+            /* @__PURE__ */ n(Re, { children: r.getHeaderGroups().map((e) => /* @__PURE__ */ n(u, { children: e.headers.map((t) => {
+              var S;
+              const a = t.column.getIsPinned(), c = v && t.column.getCanResize();
+              return /* @__PURE__ */ y(
+                xe,
+                {
+                  wrap: (S = t.column.columnDef.meta) == null ? void 0 : S.wrap,
+                  style: Ee(t, v),
+                  className: h(
+                    c && "relative",
+                    a && pe
+                  ),
+                  children: [
+                    t.isPlaceholder ? null : k(
+                      t.column.columnDef.header,
+                      t.getContext()
+                    ),
+                    c && /* @__PURE__ */ n(
+                      "div",
+                      {
+                        role: "separator",
+                        "aria-orientation": "vertical",
+                        "aria-label": "Resize column",
+                        "aria-valuenow": t.column.getSize(),
+                        "aria-valuemin": t.column.columnDef.minSize ?? L,
+                        "aria-valuemax": t.column.columnDef.maxSize ?? H,
+                        tabIndex: 0,
+                        onMouseDown: t.getResizeHandler(),
+                        onTouchStart: t.getResizeHandler(),
+                        onKeyDown: (d) => fe(d, t),
+                        className: h(
+                          "absolute end-0 top-0 h-full w-1 cursor-(--ui-resizable-cursor) touch-none select-none bg-[var(--ui-table-global-row-border-color)] opacity-0 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-(--ui-focus-primary)",
+                          t.column.getIsResizing() && "opacity-100"
+                        )
+                      }
+                    )
+                  ]
+                },
+                t.id
+              );
+            }) }, e.id)) }),
+            /* @__PURE__ */ y(ze, { children: [
+              R ? Array.from({ length: j }).map((e, t) => /* @__PURE__ */ n(
+                u,
+                {
+                  className: "hover:bg-transparent",
+                  children: r.getVisibleLeafColumns().map((a) => /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n("div", { className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]" }) }, a.id))
+                },
+                `skeleton-${t}`
+              )) : f != null && f.length ? f.map((e, t) => {
+                if (_)
+                  return /* @__PURE__ */ n(K, { children: _(e, t) }, e.id);
+                const a = e.getIsSelected(), c = w && ae === e.id, S = a || c ? "bg-[var(--ui-table-data-row-color-active)]" : p && t % 2 === 1 ? "bg-[var(--ui-background-surface-secondary)]" : "bg-background";
+                return /* @__PURE__ */ y(K, { children: [
+                  /* @__PURE__ */ n(
+                    u,
+                    {
+                      selected: a,
+                      onClick: w ? () => se(e.id) : void 0,
+                      className: h(
+                        w && "cursor-pointer",
+                        p && t % 2 === 1 && !a && !c && "bg-[var(--ui-background-surface-secondary)]",
+                        c && !a && "bg-[var(--ui-table-data-row-color-active)]"
+                      ),
+                      children: e.getVisibleCells().map((d) => {
+                        var V;
+                        const he = d.column.getIsPinned();
+                        return /* @__PURE__ */ n(
+                          g,
+                          {
+                            wrap: (V = d.column.columnDef.meta) == null ? void 0 : V.wrap,
+                            style: _e(d, v),
+                            className: h(he && S),
+                            children: k(
+                              d.column.columnDef.cell,
+                              d.getContext()
+                            )
+                          },
+                          d.id
+                        );
+                      })
+                    }
+                  ),
+                  b && e.getIsExpanded() && /* @__PURE__ */ n(u, { className: "hover:bg-transparent", children: /* @__PURE__ */ n(
+                    g,
+                    {
+                      className: "h-auto py-3",
+                      colSpan: e.getVisibleCells().length,
+                      children: b(e)
+                    }
+                  ) })
+                ] }, e.id);
+              }) : F ? /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(
+                g,
+                {
+                  colSpan: r.getVisibleLeafColumns().length,
+                  className: "h-24 text-center",
+                  children: F({
+                    hasFilters: r.getState().columnFilters.length > 0
+                  })
+                }
+              ) }) : /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(
+                g,
+                {
+                  colSpan: r.getVisibleLeafColumns().length,
+                  className: "h-24 text-center text-[var(--ui-table-data-value-color-disabled)]",
+                  children: "No results."
+                }
+              ) }),
+              D && !R && f.length > 0 && T && /* @__PURE__ */ n(
+                u,
+                {
+                  ref: ge,
+                  "aria-hidden": !0,
+                  className: "hover:bg-transparent",
+                  children: /* @__PURE__ */ n(
+                    g,
+                    {
+                      colSpan: r.getVisibleLeafColumns().length,
+                      className: "h-1 p-0"
+                    }
+                  )
+                }
+              ),
+              D && !R && f.length > 0 && P && /* @__PURE__ */ n(u, { className: "hover:bg-transparent", children: /* @__PURE__ */ n(g, { colSpan: r.getVisibleLeafColumns().length, children: /* @__PURE__ */ n(
+                "div",
+                {
+                  role: "status",
+                  "aria-live": "polite",
+                  className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]",
+                  children: /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading more rows…" })
+                }
+              ) }) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  He as DataTable,
+  _e as getCellStyle,
+  B as getColumnWidth,
+  U as getPinnedStyle,
+  Fe as getResizeKeyboardStep
+};
+//# sourceMappingURL=data-table.js.map