@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/switch/switch.js

@@ -1,41 +1,27 @@
-import { jsx as o, jsxs as b } from "react/jsx-runtime";
-import * as r from "react";
-import { Switch as t } from "@base-ui/react/switch";
-import { cn as i } from "../../../lib/utils.js";
-const u = i(
-  "group inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors",
-  "data-[unchecked]:bg-[var(--ui-switch-off-box-color-idle)] data-[checked]:bg-[var(--ui-switch-on-box-color-idle)]",
-  "focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
-  "data-[disabled]:cursor-not-allowed data-[disabled]:data-[unchecked]:bg-[var(--ui-switch-off-box-color-disabled)] data-[disabled]:data-[checked]:bg-[var(--ui-switch-on-box-color-disabled)] data-[disabled]:shadow-[inset_0_0_0_1px_var(--ui-switch-global-box-border-color-disabled)]"
-), h = i(
-  "block size-3 rounded-full bg-[var(--ui-switch-global-tick-color-idle)] transition-transform",
-  "ltr:data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4",
-  "group-data-[disabled]:bg-[var(--ui-switch-global-tick-color-disabled)]"
-), m = r.forwardRef(({ className: s, label: a, ...c }, d) => {
-  const n = r.useId(), e = a != null ? `${n}-label` : void 0, l = /* @__PURE__ */ o(
-    t.Root,
-    {
-      ref: d,
-      "aria-labelledby": e,
-      className: i(u, s),
-      ...c,
-      children: /* @__PURE__ */ o(t.Thumb, { className: h })
-    }
-  );
-  return a == null ? l : /* @__PURE__ */ b("label", { className: "inline-flex cursor-pointer items-center gap-[var(--ui-switch-global-container-gap)]", children: [
-    l,
-    /* @__PURE__ */ o(
-      "span",
-      {
-        id: e,
-        className: "text-sm leading-6 font-normal text-[var(--ui-switch-global-label-color)]",
-        children: a
-      }
-    )
-  ] });
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Switch as i } from "@base-ui/react/switch";
+//#region src/components/ui/switch/switch.tsx
+var a = e("group inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors", "data-[unchecked]:bg-[var(--ui-switch-off-box-color-idle)] data-[checked]:bg-[var(--ui-switch-on-box-color-idle)]", "focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]", "data-[disabled]:cursor-not-allowed data-[disabled]:data-[unchecked]:bg-[var(--ui-switch-off-box-color-disabled)] data-[disabled]:data-[checked]:bg-[var(--ui-switch-on-box-color-disabled)] data-[disabled]:shadow-[inset_0_0_0_1px_var(--ui-switch-global-box-border-color-disabled)]"), o = e("block size-3 rounded-full bg-[var(--ui-switch-global-tick-color-idle)] transition-transform", "ltr:data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4", "group-data-[disabled]:bg-[var(--ui-switch-global-tick-color-disabled)]"), s = t.forwardRef(({ className: s, label: c, ...l }, u) => {
+	let d = t.useId(), f = c == null ? void 0 : `${d}-label`, p = /* @__PURE__ */ n(i.Root, {
+		ref: u,
+		"aria-labelledby": f,
+		className: e(a, s),
+		...l,
+		children: /* @__PURE__ */ n(i.Thumb, { className: o })
+	});
+	return c == null ? p : /* @__PURE__ */ r("label", {
+		className: "inline-flex cursor-pointer items-center gap-[var(--ui-switch-global-container-gap)]",
+		children: [p, /* @__PURE__ */ n("span", {
+			id: f,
+			className: "text-sm leading-6 font-normal text-[var(--ui-switch-global-label-color)]",
+			children: c
+		})]
+	});
 });
-m.displayName = "Switch";
-export {
-  m as Switch
-};
-//# sourceMappingURL=switch.js.map
+s.displayName = "Switch";
+//#endregion
+export { s as Switch };
+
+//# sourceMappingURL=switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { cn } from '@/lib/utils';\n\n// A binary on/off toggle: a Base UI Switch themed with the next-gen `--ui-switch-*`\n// `box`/`tick` token tier. A 32×16 track with a 12px thumb; the track fill is wired\n// per checked-state — off (`--ui-switch-off-box-color-idle`) / on\n// (`--ui-switch-on-box-color-idle`, green) — and disabled swaps to the muted box\n// fill + a light `tick`, plus a 1px inset border\n// (`--ui-switch-global-box-border-color-disabled`). Keyboard focus paints a 3px\n// `--ui-focus-primary` ring. The design has no hover/active color change (those token\n// stops equal idle). The disabled border is an inset box-shadow so it doesn't shrink\n// the 12px thumb's box (the Figma stroke is drawn inside).\n//\n// An optional `label` composes the full Figma field: the toggle plus its label in a\n// clickable `<label>` row (a Base UI switch renders a labelable <button>, so clicking\n// the text toggles it), wired via aria-labelledby and tinted with\n// `--ui-switch-global-label-color`. With no label, the bare toggle renders — name it\n// with `aria-label`.\nconst trackClasses = cn(\n  'group inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors',\n  'data-[unchecked]:bg-[var(--ui-switch-off-box-color-idle)] data-[checked]:bg-[var(--ui-switch-on-box-color-idle)]',\n  'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:data-[unchecked]:bg-[var(--ui-switch-off-box-color-disabled)] data-[disabled]:data-[checked]:bg-[var(--ui-switch-on-box-color-disabled)] data-[disabled]:shadow-[inset_0_0_0_1px_var(--ui-switch-global-box-border-color-disabled)]'\n);\n\nconst thumbClasses = cn(\n  'block size-3 rounded-full bg-[var(--ui-switch-global-tick-color-idle)] transition-transform',\n  'ltr:data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4',\n  'group-data-[disabled]:bg-[var(--ui-switch-global-tick-color-disabled)]'\n);\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {\n  /** Optional label rendered beside the toggle; names the control. */\n  label?: React.ReactNode;\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, label, ...props }, ref) => {\n  const reactId = React.useId();\n  const labelId = label != null ? `${reactId}-label` : undefined;\n\n  const root = (\n    <SwitchPrimitive.Root\n      ref={ref}\n      aria-labelledby={labelId}\n      className={cn(trackClasses, className)}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb className={thumbClasses} />\n    </SwitchPrimitive.Root>\n  );\n\n  if (label == null) return root;\n\n  return (\n    <label className=\"inline-flex cursor-pointer items-center gap-[var(--ui-switch-global-container-gap)]\">\n      {root}\n      <span\n        id={labelId}\n        className=\"text-sm leading-6 font-normal text-[var(--ui-switch-global-label-color)]\"\n      >\n        {label}\n      </span>\n    </label>\n  );\n});\nSwitch.displayName = 'Switch';\n\nexport { Switch };\n"],"names":["trackClasses","cn","thumbClasses","Switch","React","className","label","props","ref","reactId","labelId","root","jsx","SwitchPrimitive","jsxs"],"mappings":";;;;AAoBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAAeD;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAQME,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAAQ;AACzC,QAAMC,IAAUL,EAAM,MAAA,GAChBM,IAAUJ,KAAS,OAAO,GAAGG,CAAO,WAAW,QAE/CE,IACJ,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAL;AAAA,MACA,mBAAiBE;AAAA,MACjB,WAAWT,EAAGD,GAAcK,CAAS;AAAA,MACpC,GAAGE;AAAA,MAEJ,UAAA,gBAAAK,EAACC,EAAgB,OAAhB,EAAsB,WAAWX,EAAA,CAAc;AAAA,IAAA;AAAA,EAAA;AAIpD,SAAII,KAAS,OAAaK,IAGxB,gBAAAG,EAAC,SAAA,EAAM,WAAU,uFACd,UAAA;AAAA,IAAAH;AAAA,IACD,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIF;AAAA,QACJ,WAAU;AAAA,QAET,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACDH,EAAO,cAAc;"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { cn } from '@/lib/utils';\n\n// A binary on/off toggle: a Base UI Switch themed with the next-gen `--ui-switch-*`\n// `box`/`tick` token tier. A 32×16 track with a 12px thumb; the track fill is wired\n// per checked-state — off (`--ui-switch-off-box-color-idle`) / on\n// (`--ui-switch-on-box-color-idle`, green) — and disabled swaps to the muted box\n// fill + a light `tick`, plus a 1px inset border\n// (`--ui-switch-global-box-border-color-disabled`). Keyboard focus paints a 3px\n// `--ui-focus-primary` ring. The design has no hover/active color change (those token\n// stops equal idle). The disabled border is an inset box-shadow so it doesn't shrink\n// the 12px thumb's box (the Figma stroke is drawn inside).\n//\n// An optional `label` composes the full Figma field: the toggle plus its label in a\n// clickable `<label>` row (a Base UI switch renders a labelable <button>, so clicking\n// the text toggles it), wired via aria-labelledby and tinted with\n// `--ui-switch-global-label-color`. With no label, the bare toggle renders — name it\n// with `aria-label`.\nconst trackClasses = cn(\n  'group inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors',\n  'data-[unchecked]:bg-[var(--ui-switch-off-box-color-idle)] data-[checked]:bg-[var(--ui-switch-on-box-color-idle)]',\n  'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:data-[unchecked]:bg-[var(--ui-switch-off-box-color-disabled)] data-[disabled]:data-[checked]:bg-[var(--ui-switch-on-box-color-disabled)] data-[disabled]:shadow-[inset_0_0_0_1px_var(--ui-switch-global-box-border-color-disabled)]'\n);\n\nconst thumbClasses = cn(\n  'block size-3 rounded-full bg-[var(--ui-switch-global-tick-color-idle)] transition-transform',\n  'ltr:data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4',\n  'group-data-[disabled]:bg-[var(--ui-switch-global-tick-color-disabled)]'\n);\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {\n  /** Optional label rendered beside the toggle; names the control. */\n  label?: React.ReactNode;\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, label, ...props }, ref) => {\n  const reactId = React.useId();\n  const labelId = label != null ? `${reactId}-label` : undefined;\n\n  const root = (\n    <SwitchPrimitive.Root\n      ref={ref}\n      aria-labelledby={labelId}\n      className={cn(trackClasses, className)}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb className={thumbClasses} />\n    </SwitchPrimitive.Root>\n  );\n\n  if (label == null) return root;\n\n  return (\n    <label className=\"inline-flex cursor-pointer items-center gap-[var(--ui-switch-global-container-gap)]\">\n      {root}\n      <span\n        id={labelId}\n        className=\"text-sm leading-6 font-normal text-[var(--ui-switch-global-label-color)]\"\n      >\n        {label}\n      </span>\n    </label>\n  );\n});\nSwitch.displayName = 'Switch';\n\nexport { Switch };\n"],"mappings":";;;;;AAoBA,IAAM,IAAe,EACnB,oHACA,oHACA,yEACA,wRACF,GAEM,IAAe,EACnB,+FACA,sEACA,wEACF,GAQM,IAAS,EAAM,YAGlB,EAAE,cAAW,UAAO,GAAG,KAAS,MAAQ;CACzC,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAS,OAA4B,KAAA,IAArB,GAAG,EAAQ,SAErC,IACJ,kBAAC,EAAgB,MAAjB;EACO;EACL,mBAAiB;EACjB,WAAW,EAAG,GAAc,CAAS;EACrC,GAAI;EAEJ,UAAA,kBAAC,EAAgB,OAAjB,EAAuB,WAAW,EAAe,CAAA;CAC7B,CAAA;CAKxB,OAFI,KAAS,OAAa,IAGxB,kBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA,CACG,GACD,kBAAC,QAAD;GACE,IAAI;GACJ,WAAU;GAET,UAAA;EACG,CAAA,CACD;;AAEX,CAAC;AACD,EAAO,cAAc"}

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

@@ -1,106 +1,91 @@
-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 q = S.forwardRef(
-  ({
-    className: d,
-    pageIndex: i,
-    pageCount: s,
-    pageSize: f,
-    pageSizeOptions: p = [10, 20, 30, 40, 50],
-    totalRows: o,
-    selectedRows: h,
-    onPageIndexChange: n,
-    onPageSizeChange: u,
-    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: w,
-        className: R("flex items-center justify-between px-2", d),
-        ...$,
-        children: [
-          /* @__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: (r) => u(Number(r)),
-                  children: [
-                    /* @__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: g(i + 1, s) }),
-            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(
-                c,
-                {
-                  variant: "secondary",
-                  "aria-label": v,
-                  className: "hidden lg:inline-flex",
-                  onClick: () => n(0),
-                  disabled: !a,
-                  children: /* @__PURE__ */ e(j, {})
-                }
-              ),
-              /* @__PURE__ */ e(
-                c,
-                {
-                  variant: "secondary",
-                  "aria-label": N,
-                  onClick: () => n(i - 1),
-                  disabled: !a,
-                  children: /* @__PURE__ */ e(k, {})
-                }
-              ),
-              /* @__PURE__ */ e(
-                c,
-                {
-                  variant: "secondary",
-                  "aria-label": x,
-                  onClick: () => n(i + 1),
-                  disabled: !l,
-                  children: /* @__PURE__ */ e(G, {})
-                }
-              ),
-              /* @__PURE__ */ e(
-                c,
-                {
-                  variant: "secondary",
-                  "aria-label": b,
-                  className: "hidden lg:inline-flex",
-                  onClick: () => n(s - 1),
-                  disabled: !l,
-                  children: /* @__PURE__ */ e(I, {})
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-);
-q.displayName = "TablePagination";
-export {
-  q as TablePagination
-};
-//# sourceMappingURL=table-pagination.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { ButtonIcon as t } from "../button-icon/button-icon.js";
+import { InputSelect as n, InputSelectContent as r, InputSelectItem as i, InputSelectTrigger as a, InputSelectValue as o } from "../input-select/input-select.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ChevronFirstIcon as u, ChevronLastIcon as d, ChevronLeftIcon as f, ChevronRightIcon as p } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/table/table-pagination.tsx
+var m = s.forwardRef(({ className: s, pageIndex: m, pageCount: h, pageSize: g, pageSizeOptions: _ = [
+	10,
+	20,
+	30,
+	40,
+	50
+], totalRows: v, selectedRows: y, onPageIndexChange: b, onPageSizeChange: x, rowsPerPageLabel: S = "Rows per page", firstPageLabel: C = "Go to first page", previousPageLabel: w = "Go to previous page", nextPageLabel: T = "Go to next page", lastPageLabel: E = "Go to last page", pageLabel: D = (e, t) => t === 0 ? "No pages" : `Page ${e} of ${t}`, summaryLabel: O = (e, t) => e == null ? `${t} row(s).` : `${e} of ${t} row(s) selected.`, ...k }, A) => {
+	let j = m > 0, M = m < h - 1, N = v == null ? null : O(y, v);
+	return /* @__PURE__ */ l("div", {
+		ref: A,
+		className: e("flex items-center justify-between px-2", s),
+		...k,
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex-1 text-sm text-muted-foreground",
+			children: N
+		}), /* @__PURE__ */ l("div", {
+			className: "flex items-center gap-6 lg:gap-8",
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ c("p", {
+						className: "text-sm font-medium",
+						children: S
+					}), /* @__PURE__ */ l(n, {
+						value: `${g}`,
+						onValueChange: (e) => x(Number(e)),
+						children: [/* @__PURE__ */ c(a, {
+							"aria-label": S,
+							className: "h-8 w-[70px]",
+							children: /* @__PURE__ */ c(o, {})
+						}), /* @__PURE__ */ c(r, { children: _.map((e) => /* @__PURE__ */ c(i, {
+							value: `${e}`,
+							children: e
+						}, e)) })]
+					})]
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "flex w-[100px] items-center justify-center text-sm font-medium",
+					children: D(m + 1, h)
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ c(t, {
+							variant: "secondary",
+							"aria-label": C,
+							className: "hidden lg:inline-flex",
+							onClick: () => b(0),
+							disabled: !j,
+							children: /* @__PURE__ */ c(u, {})
+						}),
+						/* @__PURE__ */ c(t, {
+							variant: "secondary",
+							"aria-label": w,
+							onClick: () => b(m - 1),
+							disabled: !j,
+							children: /* @__PURE__ */ c(f, {})
+						}),
+						/* @__PURE__ */ c(t, {
+							variant: "secondary",
+							"aria-label": T,
+							onClick: () => b(m + 1),
+							disabled: !M,
+							children: /* @__PURE__ */ c(p, {})
+						}),
+						/* @__PURE__ */ c(t, {
+							variant: "secondary",
+							"aria-label": E,
+							className: "hidden lg:inline-flex",
+							onClick: () => b(h - 1),
+							disabled: !M,
+							children: /* @__PURE__ */ c(d, {})
+						})
+					]
+				})
+			]
+		})]
+	});
+});
+m.displayName = "TablePagination";
+//#endregion
+export { m 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  /** 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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"}
+{"version":3,"file":"table-pagination.js","names":[],"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"],"mappings":";;;;;;;AAmEA,IAAM,IAAkB,EAAM,YAE1B,EACE,cACA,cACA,cACA,aACA,qBAAkB;CAAC;CAAI;CAAI;CAAI;CAAI;AAAE,GACrC,cACA,iBACA,sBACA,qBACA,sBAAmB,iBACnB,oBAAiB,oBACjB,uBAAoB,uBACpB,mBAAgB,mBAChB,mBAAgB,mBAChB,gBAAa,GAAM,MACjB,MAAU,IAAI,aAAa,QAAQ,EAAK,MAAM,KAChD,mBAAgB,GAAU,MACxB,KAAY,OAER,GAAG,EAAM,YADT,GAAG,EAAS,MAAM,EAAM,oBAE9B,GAAG,KAEL,MACG;CACH,IAAM,IAAc,IAAY,GAC1B,IAAU,IAAY,IAAY,GAElC,IACJ,KAAa,OAA+C,OAAxC,EAAa,GAAc,CAAS;CAE1D,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,0CAA0C,CAAS;EACjE,GAAI;EAHN,UAAA,CAKE,kBAAC,OAAD;GAAK,WAAU;GAAwC,UAAA;EAAa,CAAA,GACpE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,KAAD;MAAG,WAAU;MAAuB,UAAA;KAAoB,CAAA,GACxD,kBAAC,GAAD;MACE,OAAO,GAAG;MACV,gBAAgB,MAAU,EAAiB,OAAO,CAAK,CAAC;MAF1D,UAAA,CAIE,kBAAC,GAAD;OAAe,cAAY;OAAkB,WAAU;OACrD,UAAA,kBAAC,GAAD,CAAc,CAAA;MACD,CAAA,GACf,kBAAC,GAAD,EAAA,UACG,EAAgB,KAAK,MACpB,kBAAC,GAAD;OAAyB,OAAO,GAAG;OAChC,UAAA;MACS,GAFK,CAEL,CACb,EACY,CAAA,CACT;KACL,CAAA,CAAA;;IACL,kBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,EAAU,IAAY,GAAG,CAAS;IAChC,CAAA;IACL,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,kBAAC,GAAD;OACE,SAAQ;OACR,cAAY;OACZ,WAAU;OACV,eAAe,EAAkB,CAAC;OAClC,UAAU,CAAC;OAEX,UAAA,kBAAC,GAAD,CAAmB,CAAA;MACT,CAAA;MACZ,kBAAC,GAAD;OACE,SAAQ;OACR,cAAY;OACZ,eAAe,EAAkB,IAAY,CAAC;OAC9C,UAAU,CAAC;OAEX,UAAA,kBAAC,GAAD,CAAkB,CAAA;MACR,CAAA;MACZ,kBAAC,GAAD;OACE,SAAQ;OACR,cAAY;OACZ,eAAe,EAAkB,IAAY,CAAC;OAC9C,UAAU,CAAC;OAEX,UAAA,kBAAC,GAAD,CAAmB,CAAA;MACT,CAAA;MACZ,kBAAC,GAAD;OACE,SAAQ;OACR,cAAY;OACZ,WAAU;OACV,eAAe,EAAkB,IAAY,CAAC;OAC9C,UAAU,CAAC;OAEX,UAAA,kBAAC,GAAD,CAAkB,CAAA;MACR,CAAA;KACT;;GACF;EACF,CAAA,CAAA;;AAET,CACF;AACA,EAAgB,cAAc"}

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

@@ -1,54 +1,38 @@
-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: a,
-  triggerLabel: t = "View",
-  iconOnly: o = !1,
-  triggerAriaLabel: d = "Column settings"
-}) {
-  return /* @__PURE__ */ r(p, { children: [
-    /* @__PURE__ */ r(
-      c,
-      {
-        render: o ? /* @__PURE__ */ e(f, { "aria-label": d }) : /* @__PURE__ */ e(u, { variant: "secondary", className: "h-8 shrink-0 gap-2" }),
-        children: [
-          /* @__PURE__ */ e(s, {}),
-          !o && t
-        ]
-      }
-    ),
-    /* @__PURE__ */ e(l, { align: "end", className: "w-[150px]", children: /* @__PURE__ */ e(m, { children: i.map((n) => /* @__PURE__ */ r(
-      h,
-      {
-        role: "menuitemcheckbox",
-        "aria-checked": !n.hidden,
-        closeOnClick: !1,
-        onClick: () => a(n.id),
-        className: "items-center",
-        children: [
-          /* @__PURE__ */ e(
-            w,
-            {
-              checked: !n.hidden,
-              "aria-hidden": !0,
-              tabIndex: -1,
-              className: "pointer-events-none"
-            }
-          ),
-          n.label
-        ]
-      },
-      n.id
-    )) }) })
-  ] });
+import { ButtonIcon as e } from "../button-icon/button-icon.js";
+import { Button as t } from "../button/button.js";
+import { Checkbox as n } from "../checkbox/checkbox.js";
+import { DropdownMenu as r, DropdownMenuContent as i, DropdownMenuGroup as a, DropdownMenuItem as o, DropdownMenuTrigger as s } from "../dropdown-menu/dropdown-menu.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { CogIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/table/table-view-options.tsx
+function d({ columns: d, onToggle: f, triggerLabel: p = "View", iconOnly: m = !1, triggerAriaLabel: h = "Column settings" }) {
+	return /* @__PURE__ */ l(r, { children: [/* @__PURE__ */ l(s, {
+		render: m ? /* @__PURE__ */ c(e, { "aria-label": h }) : /* @__PURE__ */ c(t, {
+			variant: "secondary",
+			className: "h-8 shrink-0 gap-2"
+		}),
+		children: [/* @__PURE__ */ c(u, {}), !m && p]
+	}), /* @__PURE__ */ c(i, {
+		align: "end",
+		className: "w-[150px]",
+		children: /* @__PURE__ */ c(a, { children: d.map((e) => /* @__PURE__ */ l(o, {
+			role: "menuitemcheckbox",
+			"aria-checked": !e.hidden,
+			closeOnClick: !1,
+			onClick: () => f(e.id),
+			className: "items-center",
+			children: [/* @__PURE__ */ c(n, {
+				checked: !e.hidden,
+				"aria-hidden": !0,
+				tabIndex: -1,
+				className: "pointer-events-none"
+			}), e.label]
+		}, e.id)) })
+	})] });
 }
-b.displayName = "TableViewOptions";
-export {
-  b as TableViewOptions
-};
-//# sourceMappingURL=table-view-options.js.map
+d.displayName = "TableViewOptions";
+//#endregion
+export { d 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 { 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;"}
+{"version":3,"file":"table-view-options.js","names":[],"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"],"mappings":";;;;;;;;AAgDA,SAAS,EAAiB,EACxB,YACA,aACA,kBAAe,QACf,cAAW,IACX,sBAAmB,qBACK;CACxB,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,QACE,IACE,kBAAC,GAAD,EAAY,cAAY,EAAmB,CAAA,IAE3C,kBAAC,GAAD;GAAQ,SAAQ;GAAY,WAAU;EAAsB,CAAA;EALlE,UAAA,CASE,kBAAC,GAAD,CAAU,CAAA,GACT,CAAC,KAAY,CACK;CACrB,CAAA,GAAA,kBAAC,GAAD;EAAqB,OAAM;EAAM,WAAU;EACzC,UAAA,kBAAC,GAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAEE,MAAK;GACL,gBAAc,CAAC,EAAO;GACtB,cAAc;GACd,eAAe,EAAS,EAAO,EAAE;GACjC,WAAU;GANZ,UAAA,CAQE,kBAAC,GAAD;IACE,SAAS,CAAC,EAAO;IACjB,eAAA;IACA,UAAU;IACV,WAAU;GACX,CAAA,GACA,EAAO,KACQ;EAdX,GAAA,EAAO,EAcI,CACnB,EACgB,CAAA;CACA,CAAA,CACT,EAAA,CAAA;AAElB;AACA,EAAiB,cAAc"}