@acronis-platform/ui-react 0.62.0 → 2.0.0

package/dist/components/ui/chip/chip.js

@@ -1,60 +1,60 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
 import * as d from "react";
-import { TimesIcon as h } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as m } from "../../../lib/utils.js";
-const f = g(
+import { TimesSmallIcon as g } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as m } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as f } from "../../../lib/utils.js";
+const x = m(
   "inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:text-[var(--ui-chip-global-icon-color)]",
   {
     variants: {
       variant: {
         removable: "text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]",
-        selectable: "text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]"
+        selectable: "text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]",
+        operational: "ui-chip-operational-label-text-style text-[var(--ui-chip-operational-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]"
       }
     },
     defaultVariants: {
       variant: "removable"
     }
   }
-), x = d.forwardRef(
+), y = d.forwardRef(
   ({
-    className: c,
+    className: t,
     variant: e = "removable",
-    icon: t,
+    icon: b,
     selected: a,
-    onRemove: b,
-    removeLabel: s = "Remove",
-    children: n,
-    onKeyDown: i,
-    ...u
-  }, v) => {
-    const l = e === "selectable";
-    return /* @__PURE__ */ p(
+    onRemove: s,
+    removeLabel: n = "Remove",
+    children: u,
+    onKeyDown: o,
+    ...v
+  }, p) => {
+    const l = e === "selectable", c = l || e === "operational";
+    return /* @__PURE__ */ h(
       "div",
       {
-        ref: v,
-        className: m(f({ variant: e }), c),
-        onKeyDown: (r) => {
-          l && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), i == null || i(r);
+        ref: p,
+        className: f(x({ variant: e }), t),
+        onKeyDown: (i) => {
+          c && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), i.currentTarget.click()), o == null || o(i);
         },
+        ...c ? { role: "button", tabIndex: 0 } : {},
         ...l ? {
-          role: "button",
-          tabIndex: 0,
           "aria-pressed": !!a,
           "data-selected": a ? "true" : void 0
         } : {},
-        ...u,
+        ...v,
         children: [
-          t,
-          /* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: n }),
-          e === "removable" && /* @__PURE__ */ o(
+          b,
+          /* @__PURE__ */ r("span", { className: "min-w-0 truncate", children: u }),
+          e === "removable" && /* @__PURE__ */ r(
             "button",
             {
               type: "button",
-              "aria-label": s,
-              onClick: b,
+              "aria-label": n,
+              onClick: s,
               className: "-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none",
-              children: /* @__PURE__ */ o(h, {})
+              children: /* @__PURE__ */ r(g, { size: 16 })
             }
           )
         ]
@@ -62,9 +62,9 @@ const f = g(
     );
   }
 );
-x.displayName = "Chip";
+y.displayName = "Chip";
 export {
-  x as Chip,
-  f as chipVariants
+  y as Chip,
+  x as chipVariants
 };
 //# sourceMappingURL=chip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` carries a trailing × (remove) button; `selectable` toggles a\n// selected state. The container fill/border/label/icon all wire to the dedicated\n// `--ui-chip-*` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\nconst chipVariants = cva(\n  \"inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:text-[var(--ui-chip-global-icon-color)]\",\n  {\n    variants: {\n      variant: {\n        removable:\n          'text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]',\n        selectable:\n          'text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'removable',\n    },\n  }\n);\n\nexport interface ChipProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof chipVariants> {\n  /** Optional leading icon, rendered at 16px before the label. */\n  icon?: React.ReactNode;\n  /**\n   * `selectable` only — applies the selected (active) styling and exposes the\n   * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n   */\n  selected?: boolean;\n  /** `removable` only — called when the trailing remove (×) button is pressed. */\n  onRemove?: () => void;\n  /** Accessible label for the remove button (`removable`). */\n  removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n  (\n    {\n      className,\n      variant = 'removable',\n      icon,\n      selected,\n      onRemove,\n      removeLabel = 'Remove',\n      children,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    const selectable = variant === 'selectable';\n    return (\n      <div\n        ref={ref}\n        className={cn(chipVariants({ variant }), className)}\n        onKeyDown={(event) => {\n          // The selectable chip is a div with button semantics; mirror native\n          // button activation so Enter/Space fire its click handler.\n          if (selectable && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            event.currentTarget.click();\n          }\n          onKeyDown?.(event);\n        }}\n        {...(selectable\n          ? {\n              role: 'button',\n              tabIndex: 0,\n              'aria-pressed': Boolean(selected),\n              'data-selected': selected ? 'true' : undefined,\n            }\n          : {})}\n        {...props}\n      >\n        {icon}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {variant === 'removable' && (\n          <button\n            type=\"button\"\n            aria-label={removeLabel}\n            onClick={onRemove}\n            className=\"-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n          >\n            <TimesIcon />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"names":["chipVariants","cva","Chip","React","className","variant","icon","selected","onRemove","removeLabel","children","onKeyDown","props","ref","selectable","jsxs","cn","event","jsx","TimesIcon"],"mappings":";;;;;AAgBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaT,MAAY;AAC/B,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWG,EAAGhB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACa,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBN,KAAA,QAAAA,EAAYM;AAAA,QACd;AAAA,QACC,GAAIH,IACD;AAAA,UACE,MAAM;AAAA,UACN,UAAU;AAAA,UACV,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAR,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYT;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAEV,4BAACW,GAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAjB,EAAK,cAAc;"}
+{"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesSmallIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` (Figma `dismissable`) carries a trailing × (remove) button;\n// `selectable` toggles a selected state; `operational` is a plain action chip\n// whose label is styled like a strong link (the semibold weight comes from\n// tokens-pd's generated `ui-chip-operational-label-text-style` class).\n// The container fill/border/label/icon all wire to the dedicated\n// `--ui-chip-*` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable`/`operational` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\n//\n// Figma's `_global/box/marginY` (4px) is deliberately NOT wired: its frame sits\n// at y=-4 with height 32 around the 24px box, i.e. it bleeds *outside* the\n// component's 24px footprint to give the focus ring room on the canvas. A CSS\n// `ring` already paints outside the border box without affecting layout, so\n// translating it to a real margin would wrongly add 8px to every chip.\nconst chipVariants = cva(\n  \"inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:text-[var(--ui-chip-global-icon-color)]\",\n  {\n    variants: {\n      variant: {\n        removable:\n          'text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]',\n        selectable:\n          'text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]',\n        operational:\n          'ui-chip-operational-label-text-style text-[var(--ui-chip-operational-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'removable',\n    },\n  }\n);\n\nexport interface ChipProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof chipVariants> {\n  /** Optional leading icon, rendered at 16px before the label. */\n  icon?: React.ReactNode;\n  /**\n   * `selectable` only — applies the selected (active) styling and exposes the\n   * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n   */\n  selected?: boolean;\n  /** `removable` only — called when the trailing remove (×) button is pressed. */\n  onRemove?: () => void;\n  /** Accessible label for the remove button (`removable`). */\n  removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n  (\n    {\n      className,\n      variant = 'removable',\n      icon,\n      selected,\n      onRemove,\n      removeLabel = 'Remove',\n      children,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    const selectable = variant === 'selectable';\n    // `selectable` and `operational` put the action on the chip itself, so the\n    // container carries button semantics. `removable` keeps a presentational\n    // container — its only control is the trailing × button.\n    const actionable = selectable || variant === 'operational';\n    return (\n      <div\n        ref={ref}\n        className={cn(chipVariants({ variant }), className)}\n        onKeyDown={(event) => {\n          // An actionable chip is a div with button semantics; mirror native\n          // button activation so Enter/Space fire its click handler.\n          if (actionable && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            event.currentTarget.click();\n          }\n          onKeyDown?.(event);\n        }}\n        {...(actionable ? { role: 'button', tabIndex: 0 } : {})}\n        {...(selectable\n          ? {\n              'aria-pressed': Boolean(selected),\n              'data-selected': selected ? 'true' : undefined,\n            }\n          : {})}\n        {...props}\n      >\n        {icon}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {variant === 'removable' && (\n          <button\n            type=\"button\"\n            aria-label={removeLabel}\n            onClick={onRemove}\n            className=\"-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n          >\n            {/* `TimesSmall` (not `Times`) at size 16 is what the design uses:\n                its × mark spans ~52% of the 16px box, where `Times` spans ~85%.\n                `size={16}` also picks the 16px stroke spec (2.4 viewBox units →\n                the design's 1.6px), instead of scaling the 24px master down. */}\n            <TimesSmallIcon size={16} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"names":["chipVariants","cva","Chip","React","className","variant","icon","selected","onRemove","removeLabel","children","onKeyDown","props","ref","selectable","actionable","jsxs","cn","event","jsx","TimesSmallIcon"],"mappings":";;;;;AAyBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;AAAA,QACF,aACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaT,MAAY,cAIzBU,IAAaD,KAAcT,MAAY;AAC7C,WACE,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,WAAWI,EAAGjB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACc,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBP,KAAA,QAAAA,EAAYO;AAAA,QACd;AAAA,QACC,GAAIH,IAAa,EAAE,MAAM,UAAU,UAAU,EAAA,IAAM,CAAA;AAAA,QACnD,GAAID,IACD;AAAA,UACE,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAa,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAT,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYV;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAMV,UAAA,gBAAAW,EAACC,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5B;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAlB,EAAK,cAAc;"}

package/dist/components/ui/data-table/data-table-bulk-actions-bar.js

@@ -0,0 +1,38 @@
+import { jsxs as n, jsx as e, Fragment as a } from "react/jsx-runtime";
+import { isBulkSelectionActive as m } from "./data-table-selection.js";
+import { Button as d } from "../button/button.js";
+function x({
+  table: s,
+  children: r,
+  selectedLabel: l = (t) => `${t} item${t === 1 ? "" : "s"} selected:`,
+  clearLabel: o = "Deselect",
+  loadedLabel: i
+}) {
+  const t = s.getSelectedRowModel().rows.length, c = m(s);
+  return /* @__PURE__ */ n("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ e(
+      "fieldset",
+      {
+        disabled: !c,
+        className: "m-0 flex min-w-0 items-center gap-4 border-0 p-0",
+        children: r
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "ms-auto flex items-center gap-2", children: c ? /* @__PURE__ */ n(a, { children: [
+      /* @__PURE__ */ e("span", { className: "text-sm", children: l(t) }),
+      /* @__PURE__ */ e(
+        d,
+        {
+          variant: "ghost",
+          className: "h-8",
+          onClick: () => s.resetRowSelection(),
+          children: o
+        }
+      )
+    ] }) : i !== void 0 && /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: i }) })
+  ] });
+}
+export {
+  x as DataTableBulkActionsBar
+};
+//# sourceMappingURL=data-table-bulk-actions-bar.js.map

package/dist/components/ui/data-table/data-table-bulk-actions-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-bulk-actions-bar.js","sources":["../../../../src/components/ui/data-table/data-table-bulk-actions-bar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Table } from '@tanstack/react-table';\n\nimport { Button } from '../button';\nimport { isBulkSelectionActive } from './data-table-selection';\n\ninterface DataTableBulkActionsBarProps<TData> {\n  table: Table<TData>;\n  /**\n   * Bulk actions offered for the current selection — rendered leading, ahead\n   * of the trailing summary/Deselect control. Wrapped in a native `<fieldset\n   * disabled>` while nothing is selected, so every nested control (a `Button`\n   * renders a plain `<button>`) picks up the disabled state and styling for\n   * free — no per-action wiring needed. Each action reads the selection off\n   * the same `table` instance (`table.getSelectedRowModel().rows`).\n   */\n  children?: ReactNode;\n  /** Builds the trailing selection summary from the selected-row count. */\n  selectedLabel?: (count: number) => string;\n  /** Label of the trailing control that clears the selection. */\n  clearLabel?: string;\n  /**\n   * Trailing summary shown in place of the selection summary while nothing is\n   * selected — e.g. `\"25 of 1250 items loaded\"`. Omit to render nothing in\n   * that state.\n   */\n  loadedLabel?: ReactNode;\n}\n\n// Thin TanStack adapter: reads the selected-row count off\n// `table.getSelectedRowModel()` and routes Deselect back through\n// `table.resetRowSelection()`. It owns no state of its own.\n//\n// Always mounted (unlike a bar that appears/disappears with selection) — it\n// just toggles between two states (Figma 5916-11286 disabled / 5916-11991\n// enabled), on the same `isBulkSelectionActive` threshold that hides the\n// per-row actions column: with nothing selected, the leading actions are\n// disabled and the trailing side shows `loadedLabel`; once at least one row\n// is selected — including exactly one — the actions enable and the trailing\n// side switches to the selection summary + Deselect.\nexport function DataTableBulkActionsBar<TData>({\n  table,\n  children,\n  selectedLabel = (count) => `${count} item${count === 1 ? '' : 's'} selected:`,\n  clearLabel = 'Deselect',\n  loadedLabel,\n}: DataTableBulkActionsBarProps<TData>) {\n  const selectedCount = table.getSelectedRowModel().rows.length;\n  const hasSelection = isBulkSelectionActive(table);\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <fieldset\n        disabled={!hasSelection}\n        className=\"m-0 flex min-w-0 items-center gap-4 border-0 p-0\"\n      >\n        {children}\n      </fieldset>\n      <div className=\"ms-auto flex items-center gap-2\">\n        {hasSelection ? (\n          <>\n            <span className=\"text-sm\">{selectedLabel(selectedCount)}</span>\n            <Button\n              variant=\"ghost\"\n              className=\"h-8\"\n              onClick={() => table.resetRowSelection()}\n            >\n              {clearLabel}\n            </Button>\n          </>\n        ) : (\n          loadedLabel !== undefined && (\n            <span className=\"text-sm text-muted-foreground\">{loadedLabel}</span>\n          )\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTableBulkActionsBar","table","children","selectedLabel","count","clearLabel","loadedLabel","selectedCount","hasSelection","isBulkSelectionActive","jsxs","jsx","Fragment","Button"],"mappings":";;;AAwCO,SAASA,EAA+B;AAAA,EAC7C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB,CAACC,MAAU,GAAGA,CAAK,QAAQA,MAAU,IAAI,KAAK,GAAG;AAAA,EACjE,YAAAC,IAAa;AAAA,EACb,aAAAC;AACF,GAAwC;AACtC,QAAMC,IAAgBN,EAAM,oBAAA,EAAsB,KAAK,QACjDO,IAAeC,EAAsBR,CAAK;AAEhD,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,CAACH;AAAA,QACX,WAAU;AAAA,QAET,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAS,EAAC,OAAA,EAAI,WAAU,mCACZ,cACC,gBAAAD,EAAAE,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAR,EAAcI,CAAa,GAAE;AAAA,MACxD,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,MAAMZ,EAAM,kBAAA;AAAA,UAEpB,UAAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF,IAEAC,MAAgB,UACd,gBAAAK,EAAC,UAAK,WAAU,iCAAiC,aAAY,EAAA,CAGnE;AAAA,EAAA,GACF;AAEJ;"}

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n  table: Table<TData>;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  pageSizeOptions = [10, 20, 30, 40, 50],\n}: DataTablePaginationProps<TData>) {\n  return (\n    <div className=\"flex items-center justify-between px-2\">\n      <div className=\"flex-1 text-sm text-muted-foreground\">\n        {table.getFilteredSelectedRowModel().rows.length} of{' '}\n        {table.getFilteredRowModel().rows.length} row(s) selected.\n      </div>\n      <div className=\"flex items-center gap-6 lg:gap-8\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-sm font-medium\">Rows per page</p>\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => table.setPageSize(Number(value))}\n          >\n            <SelectTrigger aria-label=\"Rows per page\" className=\"h-8 w-[70px]\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizeOptions.map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n          Page {table.getState().pagination.pageIndex + 1} of{' '}\n          {table.getPageCount()}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to first page\"\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(0)}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronFirstIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to previous page\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronLeftIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to next page\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronRightIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to last page\"\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronLastIcon />\n          </ButtonIcon>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","jsxs","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":";;;;AAuBO,SAASA,EAA2B;AAAA,EACzC,OAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AACvC,GAAoC;AAClC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,wCACZ,UAAA;AAAA,MAAAF,EAAM,8BAA8B,KAAK;AAAA,MAAO;AAAA,MAAI;AAAA,MACpDA,EAAM,sBAAsB,KAAK;AAAA,MAAO;AAAA,IAAA,GAC3C;AAAA,IACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBAAsB,UAAA,iBAAa;AAAA,QAChD,gBAAAD;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,OAAO,GAAGJ,EAAM,SAAA,EAAW,WAAW,QAAQ;AAAA,YAC9C,eAAe,CAACK,MAAUL,EAAM,YAAY,OAAOK,CAAK,CAAC;AAAA,YAEzD,UAAA;AAAA,cAAA,gBAAAF,EAACG,KAAc,cAAW,iBAAgB,WAAU,gBAClD,UAAA,gBAAAH,EAACI,KAAY,EAAA,CACf;AAAA,cACA,gBAAAJ,EAACK,GAAA,EACE,UAAAP,EAAgB,IAAI,CAACQ,MACpB,gBAAAN,EAACO,GAAA,EAA0B,OAAO,GAAGD,CAAQ,IAC1C,UAAAA,EAAA,GADcA,CAEjB,CACD,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MACA,gBAAAP,EAAC,OAAA,EAAI,WAAU,kEAAiE,UAAA;AAAA,QAAA;AAAA,QACxEF,EAAM,SAAA,EAAW,WAAW,YAAY;AAAA,QAAE;AAAA,QAAI;AAAA,QACnDA,EAAM,aAAA;AAAA,MAAa,GACtB;AAAA,MACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAa,CAAC;AAAA,YACnC,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACY,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAT;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,aAAA;AAAA,YACrB,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACa,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnB,gBAAAV;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,SAAA;AAAA,YACrB,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACc,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAX;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAaA,EAAM,aAAA,IAAiB,CAAC;AAAA,YAC1D,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACe,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n  table: Table<TData>;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n  /** 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  /** Builds the page indicator from the 1-based page number and page count. */\n  pageLabel?: (page: number, pageCount: number) => string;\n  /** Builds the leading selection summary from the selected and total counts. */\n  summaryLabel?: (selectedRows: number, totalRows: number) => string;\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  pageSizeOptions = [10, 20, 30, 40, 50],\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) => `Page ${page} of ${count}`,\n  summaryLabel = (selected, total) => `${selected} of ${total} row(s) selected.`,\n}: DataTablePaginationProps<TData>) {\n  return (\n    <div className=\"flex items-center justify-between px-2\">\n      <div className=\"flex-1 text-sm text-muted-foreground\">\n        {summaryLabel(\n          table.getFilteredSelectedRowModel().rows.length,\n          table.getFilteredRowModel().rows.length\n        )}\n      </div>\n      <div className=\"flex items-center gap-6 lg:gap-8\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-sm font-medium\">{rowsPerPageLabel}</p>\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => table.setPageSize(Number(value))}\n          >\n            <SelectTrigger aria-label={rowsPerPageLabel} className=\"h-8 w-[70px]\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizeOptions.map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n          {pageLabel(\n            table.getState().pagination.pageIndex + 1,\n            table.getPageCount()\n          )}\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={() => table.setPageIndex(0)}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronFirstIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label={previousPageLabel}\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronLeftIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label={nextPageLabel}\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronRightIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label={lastPageLabel}\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronLastIcon />\n          </ButtonIcon>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","rowsPerPageLabel","firstPageLabel","previousPageLabel","nextPageLabel","lastPageLabel","pageLabel","page","count","summaryLabel","selected","total","jsxs","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":";;;;AAqCO,SAASA,EAA2B;AAAA,EACzC,OAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AAAA,EACrC,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,mBAAAC,IAAoB;AAAA,EACpB,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,WAAAC,IAAY,CAACC,GAAMC,MAAU,QAAQD,CAAI,OAAOC,CAAK;AAAA,EACrD,cAAAC,IAAe,CAACC,GAAUC,MAAU,GAAGD,CAAQ,OAAOC,CAAK;AAC7D,GAAoC;AAClC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,wCACZ,UAAAJ;AAAA,MACCV,EAAM,8BAA8B,KAAK;AAAA,MACzCA,EAAM,oBAAA,EAAsB,KAAK;AAAA,IAAA,GAErC;AAAA,IACA,gBAAAa,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBAAuB,UAAAZ,GAAiB;AAAA,QACrD,gBAAAW;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,OAAO,GAAGf,EAAM,SAAA,EAAW,WAAW,QAAQ;AAAA,YAC9C,eAAe,CAACgB,MAAUhB,EAAM,YAAY,OAAOgB,CAAK,CAAC;AAAA,YAEzD,UAAA;AAAA,cAAA,gBAAAF,EAACG,KAAc,cAAYf,GAAkB,WAAU,gBACrD,UAAA,gBAAAY,EAACI,KAAY,EAAA,CACf;AAAA,cACA,gBAAAJ,EAACK,GAAA,EACE,UAAAlB,EAAgB,IAAI,CAACmB,MACpB,gBAAAN,EAACO,GAAA,EAA0B,OAAO,GAAGD,CAAQ,IAC1C,UAAAA,EAAA,GADcA,CAEjB,CACD,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MACA,gBAAAN,EAAC,OAAA,EAAI,WAAU,kEACZ,UAAAP;AAAA,QACCP,EAAM,SAAA,EAAW,WAAW,YAAY;AAAA,QACxCA,EAAM,aAAA;AAAA,MAAa,GAEvB;AAAA,MACA,gBAAAa,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAYnB;AAAA,YACZ,WAAU;AAAA,YACV,SAAS,MAAMH,EAAM,aAAa,CAAC;AAAA,YACnC,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACuB,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAT;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAYlB;AAAA,YACZ,SAAS,MAAMJ,EAAM,aAAA;AAAA,YACrB,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACwB,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnB,gBAAAV;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAYjB;AAAA,YACZ,SAAS,MAAML,EAAM,SAAA;AAAA,YACrB,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACyB,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAX;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAYhB;AAAA,YACZ,WAAU;AAAA,YACV,SAAS,MAAMN,EAAM,aAAaA,EAAM,aAAA,IAAiB,CAAC;AAAA,YAC1D,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAAC0B,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,7 @@
+function t(e) {
+  return e.getSelectedRowModel().rows.length > 0;
+}
+export {
+  t as isBulkSelectionActive
+};
+//# sourceMappingURL=data-table-selection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selection.js","sources":["../../../../src/components/ui/data-table/data-table-selection.ts"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\n/**\n * Whether any row is currently selected — the single threshold that decides\n * between per-row actions and bulk actions, per the design (Figma 5916-10470\n * / 5916-10745 / 5916-11716 / 5916-11286 / 5916-11991): a single selected row\n * already switches to the bulk scope (its own row actions hide, and\n * `DataTableBulkActionsBar` enables), same as two or more. `TableActionsCell`\n * takes this as its `bulkSelectionActive` prop, so the threshold doesn't have\n * to be re-derived per consumer.\n */\nexport function isBulkSelectionActive<TData>(table: Table<TData>): boolean {\n  return table.getSelectedRowModel().rows.length > 0;\n}\n"],"names":["isBulkSelectionActive","table"],"mappings":"AAWO,SAASA,EAA6BC,GAA8B;AACzE,SAAOA,EAAM,oBAAA,EAAsB,KAAK,SAAS;AACnD;"}