@acronis-platform/ui-react 1.0.0 → 3.0.0

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

@@ -1,88 +1,95 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import * as b from "react";
-import { ChevronFirstIcon as x, ChevronLeftIcon as g, ChevronRightIcon as y, ChevronLastIcon as $ } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as S } from "../../../lib/utils.js";
-import { InputSelect as j, InputSelectTrigger as k, InputSelectValue as w, InputSelectContent as C, InputSelectItem as G } from "../input-select/input-select.js";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import * as S from "react";
+import { ChevronFirstIcon as j, ChevronLeftIcon as k, ChevronRightIcon as G, ChevronLastIcon as I } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as R } from "../../../lib/utils.js";
+import { InputSelect as T, InputSelectTrigger as V, InputSelectValue as B, InputSelectContent as F, InputSelectItem as L } from "../input-select/input-select.js";
 import { ButtonIcon as c } from "../button-icon/button-icon.js";
-const I = b.forwardRef(
+const q = S.forwardRef(
   ({
     className: d,
-    pageIndex: l,
-    pageCount: i,
+    pageIndex: i,
+    pageCount: s,
     pageSize: f,
     pageSizeOptions: p = [10, 20, 30, 40, 50],
-    totalRows: n,
-    selectedRows: s,
-    onPageIndexChange: t,
+    totalRows: o,
+    selectedRows: h,
+    onPageIndexChange: n,
     onPageSizeChange: u,
-    ...h
-  }, v) => {
-    const o = l > 0, m = l < i - 1, N = s != null && n != null ? `${s} of ${n} row(s) selected.` : n != null ? `${n} row(s).` : null;
-    return /* @__PURE__ */ r(
+    rowsPerPageLabel: m = "Rows per page",
+    firstPageLabel: v = "Go to first page",
+    previousPageLabel: N = "Go to previous page",
+    nextPageLabel: x = "Go to next page",
+    lastPageLabel: b = "Go to last page",
+    pageLabel: g = (a, l) => l === 0 ? "No pages" : `Page ${a} of ${l}`,
+    summaryLabel: y = (a, l) => a != null ? `${a} of ${l} row(s) selected.` : `${l} row(s).`,
+    ...$
+  }, w) => {
+    const a = i > 0, l = i < s - 1, C = o != null ? y(h, o) : null;
+    return /* @__PURE__ */ t(
       "div",
       {
-        ref: v,
-        className: S("flex items-center justify-between px-2", d),
-        ...h,
+        ref: w,
+        className: R("flex items-center justify-between px-2", d),
+        ...$,
         children: [
-          /* @__PURE__ */ e("div", { className: "flex-1 text-sm text-muted-foreground", children: N }),
-          /* @__PURE__ */ r("div", { className: "flex items-center gap-6 lg:gap-8", children: [
-            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e("p", { className: "text-sm font-medium", children: "Rows per page" }),
-              /* @__PURE__ */ r(
-                j,
+          /* @__PURE__ */ e("div", { className: "flex-1 text-sm text-muted-foreground", children: C }),
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-6 lg:gap-8", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e("p", { className: "text-sm font-medium", children: m }),
+              /* @__PURE__ */ t(
+                T,
                 {
                   value: `${f}`,
-                  onValueChange: (a) => u(Number(a)),
+                  onValueChange: (r) => u(Number(r)),
                   children: [
-                    /* @__PURE__ */ e(k, { "aria-label": "Rows per page", className: "h-8 w-[70px]", children: /* @__PURE__ */ e(w, {}) }),
-                    /* @__PURE__ */ e(C, { children: p.map((a) => /* @__PURE__ */ e(G, { value: `${a}`, children: a }, a)) })
+                    /* @__PURE__ */ e(V, { "aria-label": m, className: "h-8 w-[70px]", children: /* @__PURE__ */ e(B, {}) }),
+                    /* @__PURE__ */ e(F, { children: p.map((r) => /* @__PURE__ */ e(L, { value: `${r}`, children: r }, r)) })
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: i === 0 ? "No pages" : `Page ${l + 1} of ${i}` }),
-            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: g(i + 1, s) }),
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ e(
                 c,
                 {
                   variant: "secondary",
-                  "aria-label": "Go to first page",
+                  "aria-label": v,
                   className: "hidden lg:inline-flex",
-                  onClick: () => t(0),
-                  disabled: !o,
-                  children: /* @__PURE__ */ e(x, {})
+                  onClick: () => n(0),
+                  disabled: !a,
+                  children: /* @__PURE__ */ e(j, {})
                 }
               ),
               /* @__PURE__ */ e(
                 c,
                 {
                   variant: "secondary",
-                  "aria-label": "Go to previous page",
-                  onClick: () => t(l - 1),
-                  disabled: !o,
-                  children: /* @__PURE__ */ e(g, {})
+                  "aria-label": N,
+                  onClick: () => n(i - 1),
+                  disabled: !a,
+                  children: /* @__PURE__ */ e(k, {})
                 }
               ),
               /* @__PURE__ */ e(
                 c,
                 {
                   variant: "secondary",
-                  "aria-label": "Go to next page",
-                  onClick: () => t(l + 1),
-                  disabled: !m,
-                  children: /* @__PURE__ */ e(y, {})
+                  "aria-label": x,
+                  onClick: () => n(i + 1),
+                  disabled: !l,
+                  children: /* @__PURE__ */ e(G, {})
                 }
               ),
               /* @__PURE__ */ e(
                 c,
                 {
                   variant: "secondary",
-                  "aria-label": "Go to last page",
+                  "aria-label": b,
                   className: "hidden lg:inline-flex",
-                  onClick: () => t(i - 1),
-                  disabled: !m,
-                  children: /* @__PURE__ */ e($, {})
+                  onClick: () => n(s - 1),
+                  disabled: !l,
+                  children: /* @__PURE__ */ e(I, {})
                 }
               )
             ] })
@@ -92,8 +99,8 @@ const I = b.forwardRef(
     );
   }
 );
-I.displayName = "TablePagination";
+q.displayName = "TablePagination";
 export {
-  I as TablePagination
+  q as TablePagination
 };
 //# sourceMappingURL=table-pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-pagination.js","sources":["../../../../src/components/ui/table/table-pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\nexport interface TablePaginationProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Zero-based index of the current page. */\n  pageIndex: number;\n  /** Total number of pages. */\n  pageCount: number;\n  /** Number of rows shown per page. */\n  pageSize: number;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n  /** Total number of rows across all pages (drives the summary text). */\n  totalRows?: number;\n  /** Number of currently selected rows (drives the selection summary text). */\n  selectedRows?: number;\n  /** Invoked with the next zero-based page index. */\n  onPageIndexChange: (pageIndex: number) => void;\n  /** Invoked with the next page size. */\n  onPageSizeChange: (pageSize: number) => void;\n}\n\n// TanStack-independent twin of `DataTablePagination` — same visual design\n// (first/prev/next/last + rows-per-page select + page-count text, no numbered\n// button window) driven by plain props so it can pair with the `Table`\n// primitives without pulling in `@tanstack/react-table`.\nconst TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(\n  (\n    {\n      className,\n      pageIndex,\n      pageCount,\n      pageSize,\n      pageSizeOptions = [10, 20, 30, 40, 50],\n      totalRows,\n      selectedRows,\n      onPageIndexChange,\n      onPageSizeChange,\n      ...props\n    },\n    ref\n  ) => {\n    const canPrevious = pageIndex > 0;\n    const canNext = pageIndex < pageCount - 1;\n\n    const summary =\n      selectedRows != null && totalRows != null\n        ? `${selectedRows} of ${totalRows} row(s) selected.`\n        : totalRows != null\n          ? `${totalRows} row(s).`\n          : null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex items-center justify-between px-2', className)}\n        {...props}\n      >\n        <div className=\"flex-1 text-sm text-muted-foreground\">{summary}</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={`${pageSize}`}\n              onValueChange={(value) => onPageSizeChange(Number(value))}\n            >\n              <SelectTrigger aria-label=\"Rows per page\" className=\"h-8 w-[70px]\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {pageSizeOptions.map((option) => (\n                  <SelectItem key={option} value={`${option}`}>\n                    {option}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n          <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n            {pageCount === 0 ? 'No pages' : `Page ${pageIndex + 1} of ${pageCount}`}\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={() => onPageIndexChange(0)}\n              disabled={!canPrevious}\n            >\n              <ChevronFirstIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label=\"Go to previous page\"\n              onClick={() => onPageIndexChange(pageIndex - 1)}\n              disabled={!canPrevious}\n            >\n              <ChevronLeftIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label=\"Go to next page\"\n              onClick={() => onPageIndexChange(pageIndex + 1)}\n              disabled={!canNext}\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={() => onPageIndexChange(pageCount - 1)}\n              disabled={!canNext}\n            >\n              <ChevronLastIcon />\n            </ButtonIcon>\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nTablePagination.displayName = 'TablePagination';\n\nexport { TablePagination };\n"],"names":["TablePagination","React","className","pageIndex","pageCount","pageSize","pageSizeOptions","totalRows","selectedRows","onPageIndexChange","onPageSizeChange","props","ref","canPrevious","canNext","summary","jsxs","cn","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","option","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":"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"}
+{"version":3,"file":"table-pagination.js","sources":["../../../../src/components/ui/table/table-pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\nexport interface TablePaginationProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Zero-based index of the current page. */\n  pageIndex: number;\n  /** Total number of pages. */\n  pageCount: number;\n  /** Number of rows shown per page. */\n  pageSize: number;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n  /** Total number of rows across all pages (drives the summary text). */\n  totalRows?: number;\n  /** Number of currently selected rows (drives the selection summary text). */\n  selectedRows?: number;\n  /** Invoked with the next zero-based page index. */\n  onPageIndexChange: (pageIndex: number) => void;\n  /** Invoked with the next page size. */\n  onPageSizeChange: (pageSize: number) => void;\n  /** Label of the rows-per-page select (also its accessible name). */\n  rowsPerPageLabel?: string;\n  /** Accessible name of the first-page control. */\n  firstPageLabel?: string;\n  /** Accessible name of the previous-page control. */\n  previousPageLabel?: string;\n  /** Accessible name of the next-page control. */\n  nextPageLabel?: string;\n  /** Accessible name of the last-page control. */\n  lastPageLabel?: string;\n  /**\n   * Builds the page indicator. Receives the 1-based page number and the total\n   * page count; `pageCount === 0` means there are no pages.\n   */\n  pageLabel?: (page: number, pageCount: number) => string;\n  /**\n   * Builds the leading row summary. Receives the selected-row count (or\n   * `undefined` when selection isn't tracked) and the total row count. Return\n   * `null` for no summary.\n   */\n  summaryLabel?: (\n    selectedRows: number | undefined,\n    totalRows: number\n  ) => string | null;\n}\n\n// TanStack-independent twin of `DataTablePagination` — same visual design\n// (first/prev/next/last + rows-per-page select + page-count text, no numbered\n// button window) driven by plain props so it can pair with the `Table`\n// primitives without pulling in `@tanstack/react-table`.\nconst TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(\n  (\n    {\n      className,\n      pageIndex,\n      pageCount,\n      pageSize,\n      pageSizeOptions = [10, 20, 30, 40, 50],\n      totalRows,\n      selectedRows,\n      onPageIndexChange,\n      onPageSizeChange,\n      rowsPerPageLabel = 'Rows per page',\n      firstPageLabel = 'Go to first page',\n      previousPageLabel = 'Go to previous page',\n      nextPageLabel = 'Go to next page',\n      lastPageLabel = 'Go to last page',\n      pageLabel = (page, count) =>\n        count === 0 ? 'No pages' : `Page ${page} of ${count}`,\n      summaryLabel = (selected, total) =>\n        selected != null\n          ? `${selected} of ${total} row(s) selected.`\n          : `${total} row(s).`,\n      ...props\n    },\n    ref\n  ) => {\n    const canPrevious = pageIndex > 0;\n    const canNext = pageIndex < pageCount - 1;\n\n    const summary =\n      totalRows != null ? summaryLabel(selectedRows, totalRows) : null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex items-center justify-between px-2', className)}\n        {...props}\n      >\n        <div className=\"flex-1 text-sm text-muted-foreground\">{summary}</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\">{rowsPerPageLabel}</p>\n            <Select\n              value={`${pageSize}`}\n              onValueChange={(value) => onPageSizeChange(Number(value))}\n            >\n              <SelectTrigger aria-label={rowsPerPageLabel} className=\"h-8 w-[70px]\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {pageSizeOptions.map((option) => (\n                  <SelectItem key={option} value={`${option}`}>\n                    {option}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n          <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n            {pageLabel(pageIndex + 1, pageCount)}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label={firstPageLabel}\n              className=\"hidden lg:inline-flex\"\n              onClick={() => onPageIndexChange(0)}\n              disabled={!canPrevious}\n            >\n              <ChevronFirstIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label={previousPageLabel}\n              onClick={() => onPageIndexChange(pageIndex - 1)}\n              disabled={!canPrevious}\n            >\n              <ChevronLeftIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label={nextPageLabel}\n              onClick={() => onPageIndexChange(pageIndex + 1)}\n              disabled={!canNext}\n            >\n              <ChevronRightIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label={lastPageLabel}\n              className=\"hidden lg:inline-flex\"\n              onClick={() => onPageIndexChange(pageCount - 1)}\n              disabled={!canNext}\n            >\n              <ChevronLastIcon />\n            </ButtonIcon>\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nTablePagination.displayName = 'TablePagination';\n\nexport { TablePagination };\n"],"names":["TablePagination","React","className","pageIndex","pageCount","pageSize","pageSizeOptions","totalRows","selectedRows","onPageIndexChange","onPageSizeChange","rowsPerPageLabel","firstPageLabel","previousPageLabel","nextPageLabel","lastPageLabel","pageLabel","page","count","summaryLabel","selected","total","props","ref","canPrevious","canNext","summary","jsxs","cn","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","option","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":"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"}

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

@@ -1,41 +1,54 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { CogIcon as d, CheckIcon as t } from "@acronis-platform/icons-react/stroke-mono";
-import { DropdownMenu as p, DropdownMenuTrigger as s, DropdownMenuContent as c, DropdownMenuGroup as l, DropdownMenuItem as h } from "../dropdown-menu/dropdown-menu.js";
-import { Button as m } from "../button/button.js";
-function w({
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { CogIcon as s } from "@acronis-platform/icons-react/stroke-mono";
+import { DropdownMenu as p, DropdownMenuTrigger as c, DropdownMenuContent as l, DropdownMenuGroup as m, DropdownMenuItem as h } from "../dropdown-menu/dropdown-menu.js";
+import { ButtonIcon as f } from "../button-icon/button-icon.js";
+import { Button as u } from "../button/button.js";
+import { Checkbox as w } from "../checkbox/checkbox.js";
+function b({
   columns: i,
-  onToggle: o,
-  triggerLabel: a = "View"
+  onToggle: a,
+  triggerLabel: t = "View",
+  iconOnly: o = !1,
+  triggerAriaLabel: d = "Column settings"
 }) {
   return /* @__PURE__ */ r(p, { children: [
     /* @__PURE__ */ r(
-      s,
+      c,
       {
-        render: /* @__PURE__ */ n(m, { variant: "secondary", className: "h-8 shrink-0 gap-2" }),
+        render: o ? /* @__PURE__ */ e(f, { "aria-label": d }) : /* @__PURE__ */ e(u, { variant: "secondary", className: "h-8 shrink-0 gap-2" }),
         children: [
-          /* @__PURE__ */ n(d, {}),
-          a
+          /* @__PURE__ */ e(s, {}),
+          !o && t
         ]
       }
     ),
-    /* @__PURE__ */ n(c, { align: "end", className: "w-[150px]", children: /* @__PURE__ */ n(l, { children: i.map((e) => /* @__PURE__ */ r(
+    /* @__PURE__ */ e(l, { align: "end", className: "w-[150px]", children: /* @__PURE__ */ e(m, { children: i.map((n) => /* @__PURE__ */ r(
       h,
       {
         role: "menuitemcheckbox",
-        "aria-checked": !e.hidden,
+        "aria-checked": !n.hidden,
         closeOnClick: !1,
-        onClick: () => o(e.id),
+        onClick: () => a(n.id),
+        className: "items-center",
         children: [
-          e.label,
-          !e.hidden && /* @__PURE__ */ n(t, { className: "ms-auto", "aria-hidden": !0 })
+          /* @__PURE__ */ e(
+            w,
+            {
+              checked: !n.hidden,
+              "aria-hidden": !0,
+              tabIndex: -1,
+              className: "pointer-events-none"
+            }
+          ),
+          n.label
         ]
       },
-      e.id
+      n.id
     )) }) })
   ] });
 }
-w.displayName = "TableViewOptions";
+b.displayName = "TableViewOptions";
 export {
-  w as TableViewOptions
+  b as TableViewOptions
 };
 //# sourceMappingURL=table-view-options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-view-options.js","sources":["../../../../src/components/ui/table/table-view-options.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckIcon, CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\nexport interface TableColumnVisibility {\n  /** Stable column identifier. */\n  id: string;\n  /** Human-readable label shown in the menu. */\n  label: string;\n  /** Whether the column is currently hidden. */\n  hidden: boolean;\n}\n\nexport interface TableViewOptionsProps {\n  /** The toggleable columns and their current visibility. */\n  columns: TableColumnVisibility[];\n  /** Invoked with the column id whose visibility was toggled. */\n  onToggle: (id: string) => void;\n  /** Trigger label. Defaults to `View`. */\n  triggerLabel?: React.ReactNode;\n}\n\n// TanStack-independent show/hide-columns dropdown extracted from\n// `DataTableViewOptions`'s UI. Driven by a plain `{ id, label, hidden }[]` +\n// `onToggle`, so it pairs with the `Table` primitives; `DataTableViewOptions`\n// can later become a thin TanStack adapter over this part.\nfunction TableViewOptions({\n  columns,\n  onToggle,\n  triggerLabel = 'View',\n}: TableViewOptionsProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={<Button variant=\"secondary\" className=\"h-8 shrink-0 gap-2\" />}\n      >\n        <CogIcon />\n        {triggerLabel}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n        <DropdownMenuGroup>\n          {columns.map((column) => (\n            <DropdownMenuItem\n              key={column.id}\n              role=\"menuitemcheckbox\"\n              aria-checked={!column.hidden}\n              closeOnClick={false}\n              onClick={() => onToggle(column.id)}\n            >\n              {column.label}\n              {!column.hidden && <CheckIcon className=\"ms-auto\" aria-hidden />}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\nTableViewOptions.displayName = 'TableViewOptions';\n\nexport { TableViewOptions };\n"],"names":["TableViewOptions","columns","onToggle","triggerLabel","DropdownMenu","jsxs","DropdownMenuTrigger","jsx","Button","CogIcon","DropdownMenuContent","DropdownMenuGroup","column","DropdownMenuItem","CheckIcon"],"mappings":";;;;AAkCA,SAASA,EAAiB;AAAA,EACxB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,GAA0B;AACxB,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QAAQ,gBAAAC,EAACC,GAAA,EAAO,SAAQ,aAAY,WAAU,sBAAqB;AAAA,QAEnE,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAA,EAAQ;AAAA,UACRN;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAI,EAACG,GAAA,EAAoB,OAAM,OAAM,WAAU,aACzC,UAAA,gBAAAH,EAACI,GAAA,EACE,UAAAV,EAAQ,IAAI,CAACW,MACZ,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,gBAAc,CAACD,EAAO;AAAA,QACtB,cAAc;AAAA,QACd,SAAS,MAAMV,EAASU,EAAO,EAAE;AAAA,QAEhC,UAAA;AAAA,UAAAA,EAAO;AAAA,UACP,CAACA,EAAO,UAAU,gBAAAL,EAACO,KAAU,WAAU,WAAU,eAAW,GAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAPzDF,EAAO;AAAA,IAAA,CASf,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AACAZ,EAAiB,cAAc;"}
+{"version":3,"file":"table-view-options.js","sources":["../../../../src/components/ui/table/table-view-options.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Checkbox } from '../checkbox';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\nexport interface TableColumnVisibility {\n  /** Stable column identifier. */\n  id: string;\n  /** Human-readable label shown in the menu. */\n  label: string;\n  /** Whether the column is currently hidden. */\n  hidden: boolean;\n}\n\nexport interface TableViewOptionsProps {\n  /** The toggleable columns and their current visibility. */\n  columns: TableColumnVisibility[];\n  /** Invoked with the column id whose visibility was toggled. */\n  onToggle: (id: string) => void;\n  /** Trigger label. Defaults to `View`. Ignored when `iconOnly`. */\n  triggerLabel?: React.ReactNode;\n  /**\n   * Render the trigger as a cog-only icon button instead of a labelled\n   * `Button` — the shape that fits the 48px `TableSettingsCell` column.\n   */\n  iconOnly?: boolean;\n  /** Accessible name of the `iconOnly` trigger. Override to localize. */\n  triggerAriaLabel?: string;\n}\n\n// TanStack-independent show/hide-columns dropdown extracted from\n// `DataTableViewOptions`'s UI. Driven by a plain `{ id, label, hidden }[]` +\n// `onToggle`, so it pairs with the `Table` primitives; `DataTableViewOptions`\n// can later become a thin TanStack adapter over this part.\n//\n// Each row shows a real `Checkbox` box beside the column name, per the design.\n// That box is presentation only (`aria-hidden`, not focusable, click-through):\n// the accessible control is the `menuitemcheckbox` row itself, which carries\n// `aria-checked` and the click handler.\nfunction TableViewOptions({\n  columns,\n  onToggle,\n  triggerLabel = 'View',\n  iconOnly = false,\n  triggerAriaLabel = 'Column settings',\n}: TableViewOptionsProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={\n          iconOnly ? (\n            <ButtonIcon aria-label={triggerAriaLabel} />\n          ) : (\n            <Button variant=\"secondary\" className=\"h-8 shrink-0 gap-2\" />\n          )\n        }\n      >\n        <CogIcon />\n        {!iconOnly && triggerLabel}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n        <DropdownMenuGroup>\n          {columns.map((column) => (\n            <DropdownMenuItem\n              key={column.id}\n              role=\"menuitemcheckbox\"\n              aria-checked={!column.hidden}\n              closeOnClick={false}\n              onClick={() => onToggle(column.id)}\n              className=\"items-center\"\n            >\n              <Checkbox\n                checked={!column.hidden}\n                aria-hidden\n                tabIndex={-1}\n                className=\"pointer-events-none\"\n              />\n              {column.label}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\nTableViewOptions.displayName = 'TableViewOptions';\n\nexport { TableViewOptions };\n"],"names":["TableViewOptions","columns","onToggle","triggerLabel","iconOnly","triggerAriaLabel","DropdownMenu","jsxs","DropdownMenuTrigger","jsx","ButtonIcon","Button","CogIcon","DropdownMenuContent","DropdownMenuGroup","column","DropdownMenuItem","Checkbox"],"mappings":";;;;;;AAgDA,SAASA,EAAiB;AAAA,EACxB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AACrB,GAA0B;AACxB,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QACEJ,IACE,gBAAAK,EAACC,GAAA,EAAW,cAAYL,EAAA,CAAkB,IAE1C,gBAAAI,EAACE,GAAA,EAAO,SAAQ,aAAY,WAAU,qBAAA,CAAqB;AAAA,QAI/D,UAAA;AAAA,UAAA,gBAAAF,EAACG,GAAA,EAAQ;AAAA,UACR,CAACR,KAAYD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhB,gBAAAM,EAACI,GAAA,EAAoB,OAAM,OAAM,WAAU,aACzC,UAAA,gBAAAJ,EAACK,GAAA,EACE,UAAAb,EAAQ,IAAI,CAACc,MACZ,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,gBAAc,CAACD,EAAO;AAAA,QACtB,cAAc;AAAA,QACd,SAAS,MAAMb,EAASa,EAAO,EAAE;AAAA,QACjC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAN;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,SAAS,CAACF,EAAO;AAAA,cACjB,eAAW;AAAA,cACX,UAAU;AAAA,cACV,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEXA,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAbHA,EAAO;AAAA,IAAA,CAef,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AACAf,EAAiB,cAAc;"}

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

@@ -1,129 +1,178 @@
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import * as t from "react";
-import { ArrowUpIcon as m, ArrowDownIcon as p, ArrowsDownUpIcon as u } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as l } from "../../../lib/utils.js";
-const f = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ r(
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import * as i from "react";
+import { ArrowUpIcon as u, ArrowDownIcon as v, ArrowsDownUpIcon as g } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as r } from "../../../lib/utils.js";
+const m = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ o(
   "table",
   {
-    ref: o,
-    className: l(
+    ref: l,
+    className: r(
       "w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]",
       a
     ),
     ...e
   }
 ) }));
-f.displayName = "Table";
-const v = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r("thead", { ref: o, className: l(a), ...e }));
-v.displayName = "TableHeader";
-const w = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r(
+m.displayName = "Table";
+const h = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o("thead", { ref: l, className: r(a), ...e }));
+h.displayName = "TableHeader";
+const p = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o(
   "tbody",
   {
-    ref: o,
-    className: l("[&_tr:last-child]:border-0", a),
+    ref: l,
+    className: r("[&_tr:last-child]:border-0", a),
     ...e
   }
 ));
-w.displayName = "TableBody";
-const h = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r(
+p.displayName = "TableBody";
+const f = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o(
   "tfoot",
   {
-    ref: o,
-    className: l(
-      "border-t border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0",
+    ref: l,
+    className: r(
+      "border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0",
       a
     ),
     ...e
   }
 ));
-h.displayName = "TableFooter";
-const x = t.forwardRef(
-  ({ className: a, selected: e, ...o }, s) => /* @__PURE__ */ r(
+f.displayName = "TableFooter";
+const w = i.forwardRef(
+  ({ className: a, selected: e, ...l }, t) => /* @__PURE__ */ o(
     "tr",
     {
-      ref: s,
+      ref: t,
       "data-state": e ? "selected" : void 0,
-      className: l(
-        "border-b border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]",
+      className: r(
+        "border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]",
+        // The design documents a keyboard-nav focus state on the row itself
+        // (a ring spanning the full row). Rows aren't focusable by default, so
+        // this only paints once a consumer makes them focusable (`tabIndex`).
+        "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]",
         a
       ),
-      ...o
+      ...l
     }
   )
 );
-x.displayName = "TableRow";
-function g({ direction: a }) {
+w.displayName = "TableRow";
+function x({ direction: a }) {
   const e = "size-[var(--ui-table-header-sort-icon-size)]";
-  return a === "asc" ? /* @__PURE__ */ r(m, { className: l(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ r(p, { className: l(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ r(u, { className: l(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
+  return a === "asc" ? /* @__PURE__ */ o(u, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ o(v, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ o(g, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
 }
-const N = t.forwardRef(
+const y = i.forwardRef(
   ({
     className: a,
     children: e,
-    sortable: o,
-    sortDirection: s = !1,
-    onSort: i,
+    sortable: l,
+    sortDirection: t = !1,
+    onSort: s,
     wrap: c,
     ...d
-  }, n) => /* @__PURE__ */ r(
+  }, b) => /* @__PURE__ */ o(
     "th",
     {
-      ref: n,
-      "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : o ? "none" : void 0,
-      className: l(
-        "px-[var(--ui-table-global-cell-padding-x)] text-start align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pe-0",
-        c ? "whitespace-normal" : "h-10",
+      ref: b,
+      "aria-sort": t === "asc" ? "ascending" : t === "desc" ? "descending" : l ? "none" : void 0,
+      className: r(
+        "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0",
+        c ? "whitespace-normal" : "h-[var(--ui-table-global-cell-min-height)]",
+        // Per the design, a sortable header tints the whole cell on hover/press
+        // and draws the focus ring on the cell, not on the inner control.
+        l && "cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]",
         a
       ),
       ...d,
-      children: o ? /* @__PURE__ */ b(
+      children: l ? /* @__PURE__ */ n(
         "button",
         {
           type: "button",
-          onClick: i,
-          className: "-mx-1 inline-flex cursor-pointer items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
+          onClick: s,
+          className: "flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none",
           children: [
             e,
-            /* @__PURE__ */ r(g, { direction: s })
+            /* @__PURE__ */ o(x, { direction: t })
           ]
         }
       ) : e
     }
   )
 );
-N.displayName = "TableHead";
-const T = t.forwardRef(
-  ({ className: a, wrap: e, ...o }, s) => /* @__PURE__ */ r(
+y.displayName = "TableHead";
+const N = i.forwardRef(
+  ({ className: a, wrap: e, ...l }, t) => /* @__PURE__ */ o(
     "td",
     {
-      ref: s,
-      className: l(
-        "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pe-0",
-        e ? "whitespace-normal" : "h-10",
+      ref: t,
+      className: r(
+        "px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] transition-colors [&:has([role=checkbox])]:pe-0",
+        e ? "whitespace-normal" : "h-[var(--ui-table-global-cell-min-height)]",
         a
       ),
-      ...o
+      ...l
     }
   )
 );
-T.displayName = "TableCell";
-const y = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ r(
+N.displayName = "TableCell";
+const T = i.forwardRef(({ className: a, header: e, ...l }, t) => /* @__PURE__ */ o(
+  e ? "th" : "td",
+  {
+    ref: t,
+    className: r(
+      "w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle transition-colors",
+      e ? "bg-[var(--ui-table-header-cell-color-idle)]" : "bg-[var(--ui-table-data-cell-color-idle)]",
+      a
+    ),
+    ...l
+  }
+));
+T.displayName = "TableSelectCell";
+const R = i.forwardRef(({ className: a, bulkSelectionActive: e, children: l, ...t }, s) => /* @__PURE__ */ o(
+  "td",
+  {
+    ref: s,
+    className: r(
+      "w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]",
+      !e && "rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]",
+      a
+    ),
+    ...t,
+    children: e ? null : l
+  }
+));
+R.displayName = "TableActionsCell";
+const C = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o(
+  "th",
+  {
+    ref: l,
+    className: r(
+      "w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]",
+      a
+    ),
+    ...e
+  }
+));
+C.displayName = "TableSettingsCell";
+const A = i.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ o(
   "caption",
   {
-    ref: o,
-    className: l("mt-4 text-sm text-muted-foreground", a),
+    ref: l,
+    className: r("mt-4 text-sm text-muted-foreground", a),
     ...e
   }
 ));
-y.displayName = "TableCaption";
+A.displayName = "TableCaption";
 export {
-  f as Table,
-  w as TableBody,
-  y as TableCaption,
-  T as TableCell,
-  h as TableFooter,
-  N as TableHead,
-  v as TableHeader,
-  x as TableRow
+  m as Table,
+  R as TableActionsCell,
+  p as TableBody,
+  A as TableCaption,
+  N as TableCell,
+  f as TableFooter,
+  y as TableHead,
+  h as TableHeader,
+  w as TableRow,
+  T as TableSelectCell,
+  C as TableSettingsCell
 };
 //# sourceMappingURL=table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives ported from `@acronis-platform/shadcn-uikit`'s\n// `table` (packages/ui-legacy/src/components/ui/table.tsx) and informed by the\n// \"pre-release\" Table design in the shadcn-uikit Figma (node 2948-2416). Unlike\n// Card/Dialog, a `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell   -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row    -> --ui-table-global-row-border-color, --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • header -> --ui-table-header-{label-color,cell-color-hover,gap}\n//   • sort   -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • data   -> --ui-table-data-value-color-{idle,disabled}\n// The design's row checkboxes, tags, links and the column-settings button are\n// consumer composition (use Checkbox / Tag / Link / ButtonIcon in cells). A\n// TanStack-backed `DataTable` (sorting/selection logic over these primitives) is\n// a planned follow-up, mirroring legacy's separate `data-table`. Reconcile with\n// `/figma-component Table <url> --update` once the design is ready for dev.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] text-start align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pe-0',\n        wrap ? 'whitespace-normal' : 'h-10',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"-mx-1 inline-flex cursor-pointer items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pe-0',\n        wrap ? 'whitespace-normal' : 'h-10',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","wrap","jsxs","TableCell","TableCaption"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives, reconciled against the Table design in the\n// ui-react Figma (canvas 2948-2416; assembled example 4567-6801, part state\n// matrices TableHeaderCell 3427-207 / TableDataCell 4536-97 / TableDataRow\n// 4536-699 / TableSettings 3698-497 / TableActions 4536-414 / TableCheckbox\n// 3698-746). A `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell     -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row      -> --ui-table-global-row-{border-color,border-width,border-style},\n//                 --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • head     -> --ui-table-header-{label-color,gap}, --ui-table-header-cell-color-{idle,hover,active}\n//   • data     -> --ui-table-data-cell-color-{idle,hover,active}, --ui-table-data-value-color-{idle,disabled}\n//   • sort     -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • focus    -> --ui-focus-primary (the kit-wide 3px focus ring, radius/radius-4)\n// Per the design, the header/settings/actions cells tint on hover and press at\n// the *cell* level (not on an inner control), so the interaction tokens sit on\n// the `<th>`/`<td>` and the focus ring is drawn on the cell via `has-[…]`.\n//\n// The design's cell content (tags, status dots, links) stays consumer\n// composition — `--ui-table-global-cell-{tag,icon}-margin-y` and\n// --ui-table-data-gap describe that content's own insets, not a part contract,\n// so no wrapper part is invented for them here.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        // The design documents a keyboard-nav focus state on the row itself\n        // (a ring spanning the full row). Rows aren't focusable by default, so\n        // this only paints once a consumer makes them focusable (`tabIndex`).\n        'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        // Per the design, a sortable header tints the whole cell on hover/press\n        // and draws the focus ring on the cell, not on the inner control.\n        sortable &&\n          'cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] transition-colors [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nexport interface TableSelectCellProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the select-all cell of the header row (`<th>`) instead of a row's\n   * selection cell (`<td>`).\n   */\n  header?: boolean;\n}\n\n/**\n * The row-selection cell (design part `TableCheckbox`) — a fixed 32px column\n * holding a label-less `Checkbox`. Only the leading padding is applied, matching\n * the design (16px padding + a 16px box), so the checkbox sits flush against the\n * first data cell.\n */\nconst TableSelectCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableSelectCellProps\n>(({ className, header, ...props }, ref) => {\n  const Comp = header ? 'th' : 'td';\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle transition-colors',\n        header\n          ? 'bg-[var(--ui-table-header-cell-color-idle)]'\n          : 'bg-[var(--ui-table-data-cell-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableSelectCell.displayName = 'TableSelectCell';\n\nexport interface TableActionsCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Suppress this row's actions because a selection is in play — the cell\n   * still reserves its 48px column (so the grid doesn't reflow) but renders no\n   * children and no hover/press tint. Per the design, that means any row is\n   * selected, including exactly one. Pass `isBulkSelectionActive(table)` (from\n   * the data-table part) rather than re-deriving the threshold.\n   */\n  bulkSelectionActive?: boolean;\n}\n\n/**\n * The trailing row-actions cell (design part `TableActions`) — a fixed 48px\n * column, end-aligned, holding the consumer's overflow trigger (e.g. a\n * `ButtonIcon` with `EllipsisIcon` opening a `DropdownMenu`). The cell itself\n * carries the hover/press tint and the focus ring, per the design.\n */\nconst TableActionsCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableActionsCellProps\n>(({ className, bulkSelectionActive, children, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]',\n      !bulkSelectionActive &&\n        'rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  >\n    {bulkSelectionActive ? null : children}\n  </td>\n));\nTableActionsCell.displayName = 'TableActionsCell';\n\n/**\n * The trailing header cell holding the column-settings trigger (design part\n * `TableSettings`) — a fixed 48px column, end-aligned, holding the consumer's\n * gear trigger (e.g. a `ButtonIcon` with `CogIcon`). Visual states only; what\n * the trigger opens (a column-visibility menu) is the consumer's choice —\n * `TableViewOptions` is the ready-made one.\n */\nconst TableSettingsCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTableSettingsCell.displayName = 'TableSettingsCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableSelectCell,\n  TableActionsCell,\n  TableSettingsCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","wrap","jsxs","TableCell","TableSelectCell","header","TableActionsCell","bulkSelectionActive","TableSettingsCell","TableCaption"],"mappings":"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"}