@acronis-platform/ui-react 0.56.1 → 0.57.1

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

@@ -1,60 +1,60 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import * as h from "react";
-import { TimesIcon as b } 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 g = m(
-  "inline-flex h-[var(--ui-chips-container-height)] min-w-[var(--ui-chips-container-width-min)] items-center justify-center gap-[var(--ui-chips-container-gap)] rounded-[var(--ui-chips-border-radius)] border-[length:var(--ui-chips-border-width)] border-solid border-[var(--ui-chips-border-color-idle)] bg-[var(--ui-chips-container-color-idle)] px-[var(--ui-chips-container-padding-x)] text-sm leading-6 text-[var(--ui-chips-label-color)] hover:border-[var(--ui-chips-border-color-hover)] hover:bg-[var(--ui-chips-container-color-hover)] [&_svg]:size-[var(--ui-chips-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chips-icon-color)]",
+import { jsxs as p, jsx as o } 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(
+  "inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] 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]:text-[var(--ui-chip-global-icon-color)]",
   {
     variants: {
       variant: {
-        removable: "focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chips-border-color-active)] active:bg-[var(--ui-chips-container-color-active)]",
-        selectable: "cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chips-border-color-active)] data-[selected=true]:bg-[var(--ui-chips-container-color-active)]"
+        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: "cursor-pointer 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)]"
       }
     },
     defaultVariants: {
       variant: "removable"
     }
   }
-), x = h.forwardRef(
+), x = d.forwardRef(
   ({
-    className: t,
+    className: c,
     variant: i = "removable",
-    icon: s,
+    icon: t,
     selected: a,
-    onRemove: n,
-    removeLabel: l = "Remove",
+    onRemove: b,
+    removeLabel: s = "Remove",
     children: u,
     onKeyDown: e,
-    ...v
-  }, p) => {
-    const c = i === "selectable";
-    return /* @__PURE__ */ d(
+    ...n
+  }, v) => {
+    const l = i === "selectable";
+    return /* @__PURE__ */ p(
       "div",
       {
-        ref: p,
-        className: f(g({ variant: i }), t),
+        ref: v,
+        className: m(f({ variant: i }), c),
         onKeyDown: (r) => {
-          c && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), e == null || e(r);
+          l && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), e == null || e(r);
         },
-        ...c ? {
+        ...l ? {
           role: "button",
           tabIndex: 0,
           "aria-pressed": !!a,
           "data-selected": a ? "true" : void 0
         } : {},
-        ...v,
+        ...n,
         children: [
-          s,
+          t,
           /* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: u }),
           i === "removable" && /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              "aria-label": l,
-              onClick: n,
+              "aria-label": s,
+              onClick: b,
               className: "-me-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none",
-              children: /* @__PURE__ */ o(b, {})
+              children: /* @__PURE__ */ o(h, {})
             }
           )
         ]
@@ -65,6 +65,6 @@ const g = m(
 x.displayName = "Chip";
 export {
   x as Chip,
-  g as chipVariants
+  f 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-chips-*` 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-chips-container-height)] min-w-[var(--ui-chips-container-width-min)] items-center justify-center gap-[var(--ui-chips-container-gap)] rounded-[var(--ui-chips-border-radius)] border-[length:var(--ui-chips-border-width)] border-solid border-[var(--ui-chips-border-color-idle)] bg-[var(--ui-chips-container-color-idle)] px-[var(--ui-chips-container-padding-x)] text-sm leading-6 text-[var(--ui-chips-label-color)] hover:border-[var(--ui-chips-border-color-hover)] hover:bg-[var(--ui-chips-container-color-hover)] [&_svg]:size-[var(--ui-chips-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chips-icon-color)]\",\n  {\n    variants: {\n      variant: {\n        removable:\n          'focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chips-border-color-active)] active:bg-[var(--ui-chips-container-color-active)]',\n        selectable:\n          'cursor-pointer focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chips-border-color-active)] data-[selected=true]:bg-[var(--ui-chips-container-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 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 { 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)] 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]: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          'cursor-pointer 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 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;"}

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

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