@acronis-platform/ui-react 0.36.0 → 0.43.0

package/dist/components/ui/card/card.js

@@ -0,0 +1,92 @@
+import * as o from "react";
+import { mergeProps as t } from "@base-ui/react/merge-props";
+import { useRender as s } from "@base-ui/react/use-render";
+import { cn as p } from "../../../lib/utils.js";
+const m = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      {
+        className: p(
+          "rounded-lg border border-border bg-background text-foreground shadow-xs",
+          e
+        )
+      },
+      r
+    )
+  })
+);
+m.displayName = "Card";
+const f = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      { className: p("flex flex-col space-y-1.5 p-6", e) },
+      r
+    )
+  })
+);
+f.displayName = "CardHeader";
+const l = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      {
+        className: p(
+          "text-2xl font-semibold leading-none tracking-tight",
+          e
+        )
+      },
+      r
+    )
+  })
+);
+l.displayName = "CardTitle";
+const i = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      { className: p("text-sm text-muted-foreground", e) },
+      r
+    )
+  })
+);
+i.displayName = "CardDescription";
+const n = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t({ className: p("p-6 pt-0", e) }, r)
+  })
+);
+n.displayName = "CardContent";
+const c = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      { className: p("flex items-center p-6 pt-0", e) },
+      r
+    )
+  })
+);
+c.displayName = "CardFooter";
+export {
+  m as Card,
+  n as CardContent,
+  i as CardDescription,
+  c as CardFooter,
+  f as CardHeader,
+  l as CardTitle
+};
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `card`\n// (packages/ui-legacy/src/components/ui/card.tsx). No \"ready for dev\" Figma node\n// exists yet, so this is a design-pending v1: there is no `--ui-card-*` token\n// tier, so the surface/text/border colors resolve to the shared **semantic**\n// tokens via the bridged Tailwind names in `src/styles/index.css`:\n//   • bg-background    → --ui-background-surface-primary   (legacy `bg-card`)\n//   • text-foreground  → --ui-text-on-surface-primary      (legacy `text-card-foreground`)\n//   • border-border    → --ui-border-on-surface-border      (legacy bare `border`)\n//   • text-muted-foreground → --ui-text-on-surface-secondary (description)\n// Geometry (radius, padding, gaps, shadow) is carried over verbatim from legacy.\n// Reconcile against the real design with `/figma-component Card <url> --update`\n// once a mockup lands — at which point an elevated-surface token may replace the\n// primary surface used for the card background.\n\ninterface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. render `CardTitle` as a heading. The component's props\n   * and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'rounded-lg border border-border bg-background text-foreground shadow-xs',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex flex-col space-y-1.5 p-6', className) },\n        props\n      ),\n    })\n);\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'text-2xl font-semibold leading-none tracking-tight',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('text-sm text-muted-foreground', className) },\n        props\n      ),\n    })\n);\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>({ className: cn('p-6 pt-0', className) }, props),\n    })\n);\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex items-center p-6 pt-0', className) },\n        props\n      ),\n    })\n);\nCardFooter.displayName = 'CardFooter';\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  type CardPartProps,\n};\n"],"names":["Card","React","className","render","props","ref","useRender","mergeProps","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;;AA6BA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAJ,EAAK,cAAc;AAEnB,MAAMS,IAAaR,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAK,EAAW,cAAc;AAEzB,MAAMC,IAAYT,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAM,EAAU,cAAc;AAExB,MAAMC,IAAkBV,EAAM;AAAA,EAC5B,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAO,EAAgB,cAAc;AAE9B,MAAMC,IAAcX,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE,EAAkB,EAAE,WAAWC,EAAG,YAAYN,CAAS,EAAA,GAAKE,CAAK;AAAA,EAAA,CACzE;AACL;AACAQ,EAAY,cAAc;AAE1B,MAAMC,IAAaZ,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,8BAA8BN,CAAS,EAAA;AAAA,MACvDE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAS,EAAW,cAAc;"}

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

@@ -0,0 +1,48 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { ArrowDownIcon as a, ArrowUpIcon as d, ArrowsDownUpIcon as c, EyeCrossedIcon as l } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as s } from "../../../lib/utils.js";
+import { DropdownMenu as p, DropdownMenuTrigger as g, DropdownMenuContent as m, DropdownMenuItem as n, DropdownMenuSeparator as f } from "../dropdown-menu/dropdown-menu.js";
+import { Button as u } from "../button/button.js";
+function I({
+  column: r,
+  title: t,
+  className: i
+}) {
+  return r.getCanSort() ? /* @__PURE__ */ e("div", { className: s("flex items-center gap-2", i), children: /* @__PURE__ */ o(p, { children: [
+    /* @__PURE__ */ o(
+      g,
+      {
+        render: /* @__PURE__ */ e(
+          u,
+          {
+            variant: "ghost",
+            className: "-ml-2 h-8 gap-2 px-2 data-[popup-open]:bg-accent"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ e("span", { children: t }),
+          r.getIsSorted() === "desc" ? /* @__PURE__ */ e(a, {}) : r.getIsSorted() === "asc" ? /* @__PURE__ */ e(d, {}) : /* @__PURE__ */ e(c, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(m, { align: "start", children: [
+      /* @__PURE__ */ o(n, { onClick: () => r.toggleSorting(!1), children: [
+        /* @__PURE__ */ e(d, { className: "text-muted-foreground" }),
+        "Asc"
+      ] }),
+      /* @__PURE__ */ o(n, { onClick: () => r.toggleSorting(!0), children: [
+        /* @__PURE__ */ e(a, { className: "text-muted-foreground" }),
+        "Desc"
+      ] }),
+      /* @__PURE__ */ e(f, {}),
+      /* @__PURE__ */ o(n, { onClick: () => r.toggleVisibility(!1), children: [
+        /* @__PURE__ */ e(l, { className: "text-muted-foreground" }),
+        "Hide"
+      ] })
+    ] })
+  ] }) }) : /* @__PURE__ */ e("div", { className: s(i), children: t });
+}
+export {
+  I as DataTableColumnHeader
+};
+//# sourceMappingURL=data-table-column-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n  ArrowDownIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  EyeCrossedIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '../button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n  extends React.HTMLAttributes<HTMLDivElement> {\n  column: Column<TData, TValue>;\n  title: string;\n}\n\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  if (!column.getCanSort()) {\n    return <div className={cn(className)}>{title}</div>;\n  }\n\n  return (\n    <div className={cn('flex items-center gap-2', className)}>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              // ui-react's ghost button has 0 horizontal padding, so add a small\n              // padding for a comfortable click/hover target and negate it on the\n              // left (-ml-2 px-2) so the label still sits flush at the cell's\n              // padding edge — aligned with the body cells below.\n              className=\"-ml-2 h-8 gap-2 px-2 data-[popup-open]:bg-accent\"\n            />\n          }\n        >\n          <span>{title}</span>\n          {column.getIsSorted() === 'desc' ? (\n            <ArrowDownIcon />\n          ) : column.getIsSorted() === 'asc' ? (\n            <ArrowUpIcon />\n          ) : (\n            <ArrowsDownUpIcon />\n          )}\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>\n            <ArrowUpIcon className=\"text-muted-foreground\" />\n            Asc\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>\n            <ArrowDownIcon className=\"text-muted-foreground\" />\n            Desc\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>\n            <EyeCrossedIcon className=\"text-muted-foreground\" />\n            Hide\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n"],"names":["DataTableColumnHeader","column","title","className","jsx","cn","DropdownMenu","jsxs","DropdownMenuTrigger","Button","ArrowDownIcon","ArrowUpIcon","ArrowsDownUpIcon","DropdownMenuContent","DropdownMenuItem","DropdownMenuSeparator","EyeCrossedIcon"],"mappings":";;;;;AAyBO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,GAA8C;AAC5C,SAAKF,EAAO,eAKV,gBAAAG,EAAC,SAAI,WAAWC,EAAG,2BAA2BF,CAAS,GACrD,4BAACG,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QACE,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YAKR,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAId,UAAA;AAAA,UAAA,gBAAAL,EAAC,UAAM,UAAAF,EAAA,CAAM;AAAA,UACZD,EAAO,YAAA,MAAkB,2BACvBS,GAAA,CAAA,CAAc,IACbT,EAAO,YAAA,MAAkB,QAC3B,gBAAAG,EAACO,GAAA,CAAA,CAAY,sBAEZC,GAAA,CAAA,CAAiB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtB,gBAAAL,EAACM,GAAA,EAAoB,OAAM,SACzB,UAAA;AAAA,MAAA,gBAAAN,EAACO,KAAiB,SAAS,MAAMb,EAAO,cAAc,EAAK,GACzD,UAAA;AAAA,QAAA,gBAAAG,EAACO,GAAA,EAAY,WAAU,wBAAA,CAAwB;AAAA,QAAE;AAAA,MAAA,GAEnD;AAAA,wBACCG,GAAA,EAAiB,SAAS,MAAMb,EAAO,cAAc,EAAI,GACxD,UAAA;AAAA,QAAA,gBAAAG,EAACM,GAAA,EAAc,WAAU,wBAAA,CAAwB;AAAA,QAAE;AAAA,MAAA,GAErD;AAAA,wBACCK,GAAA,EAAsB;AAAA,wBACtBD,GAAA,EAAiB,SAAS,MAAMb,EAAO,iBAAiB,EAAK,GAC5D,UAAA;AAAA,QAAA,gBAAAG,EAACY,GAAA,EAAe,WAAU,wBAAA,CAAwB;AAAA,QAAE;AAAA,MAAA,EAAA,CAEtD;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF,sBA3CQ,OAAA,EAAI,WAAWX,EAAGF,CAAS,GAAI,UAAAD,GAAM;AA6CjD;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n  table: Table<TData>;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  pageSizeOptions = [10, 20, 30, 40, 50],\n}: DataTablePaginationProps<TData>) {\n  return (\n    <div className=\"flex items-center justify-between px-2\">\n      <div className=\"flex-1 text-sm text-muted-foreground\">\n        {table.getFilteredSelectedRowModel().rows.length} of{' '}\n        {table.getFilteredRowModel().rows.length} row(s) selected.\n      </div>\n      <div className=\"flex items-center gap-6 lg:gap-8\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-sm font-medium\">Rows per page</p>\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => table.setPageSize(Number(value))}\n          >\n            <SelectTrigger aria-label=\"Rows per page\" className=\"h-8 w-[70px]\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizeOptions.map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n          Page {table.getState().pagination.pageIndex + 1} of{' '}\n          {table.getPageCount()}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to first page\"\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(0)}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronFirstIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to previous page\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronLeftIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to next page\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronRightIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to last page\"\n            className=\"hidden lg:inline-flex\"\n            onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronLastIcon />\n          </ButtonIcon>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","jsxs","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":";;;;AAuBO,SAASA,EAA2B;AAAA,EACzC,OAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AACvC,GAAoC;AAClC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,wCACZ,UAAA;AAAA,MAAAF,EAAM,8BAA8B,KAAK;AAAA,MAAO;AAAA,MAAI;AAAA,MACpDA,EAAM,sBAAsB,KAAK;AAAA,MAAO;AAAA,IAAA,GAC3C;AAAA,IACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBAAsB,UAAA,iBAAa;AAAA,QAChD,gBAAAD;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,OAAO,GAAGJ,EAAM,SAAA,EAAW,WAAW,QAAQ;AAAA,YAC9C,eAAe,CAACK,MAAUL,EAAM,YAAY,OAAOK,CAAK,CAAC;AAAA,YAEzD,UAAA;AAAA,cAAA,gBAAAF,EAACG,KAAc,cAAW,iBAAgB,WAAU,gBAClD,UAAA,gBAAAH,EAACI,KAAY,EAAA,CACf;AAAA,cACA,gBAAAJ,EAACK,GAAA,EACE,UAAAP,EAAgB,IAAI,CAACQ,MACpB,gBAAAN,EAACO,GAAA,EAA0B,OAAO,GAAGD,CAAQ,IAC1C,UAAAA,EAAA,GADcA,CAEjB,CACD,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MACA,gBAAAP,EAAC,OAAA,EAAI,WAAU,kEAAiE,UAAA;AAAA,QAAA;AAAA,QACxEF,EAAM,SAAA,EAAW,WAAW,YAAY;AAAA,QAAE;AAAA,QAAI;AAAA,QACnDA,EAAM,aAAA;AAAA,MAAa,GACtB;AAAA,MACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAa,CAAC;AAAA,YACnC,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACY,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAT;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,aAAA;AAAA,YACrB,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACa,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnB,gBAAAV;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,SAAA;AAAA,YACrB,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACc,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAX;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAaA,EAAM,aAAA,IAAiB,CAAC;AAAA,YAC1D,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACe,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,46 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { TimesIcon as m } from "@acronis-platform/icons-react/stroke-mono";
+import { DataTableViewOptions as c } from "./data-table-view-options.js";
+import { InputText as p } from "../input-text/input-text.js";
+import { Button as u } from "../button/button.js";
+function F({
+  table: e,
+  searchKey: t,
+  searchPlaceholder: n = "Filter…"
+}) {
+  var i;
+  const s = e.getState().columnFilters.length > 0;
+  return /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ l("div", { className: "flex flex-1 items-center gap-2", children: [
+      t && /* @__PURE__ */ r(
+        p,
+        {
+          placeholder: n,
+          value: ((i = e.getColumn(t)) == null ? void 0 : i.getFilterValue()) ?? "",
+          onChange: (a) => {
+            var o;
+            return (o = e.getColumn(t)) == null ? void 0 : o.setFilterValue(a.target.value);
+          },
+          className: "h-8 w-[150px] lg:w-[250px]"
+        }
+      ),
+      s && /* @__PURE__ */ l(
+        u,
+        {
+          variant: "ghost",
+          onClick: () => e.resetColumnFilters(),
+          className: "h-8 gap-2",
+          children: [
+            "Reset",
+            /* @__PURE__ */ r(m, {})
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(c, { table: e })
+  ] });
+}
+export {
+  F as DataTableToolbar
+};
+//# sourceMappingURL=data-table-toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/ui/data-table/data-table-toolbar.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport { InputText } from '../input-text';\nimport { DataTableViewOptions } from './data-table-view-options';\n\ninterface DataTableToolbarProps<TData> {\n  table: Table<TData>;\n  /** Column id to wire the search box to (client-side text filter). */\n  searchKey?: string;\n  searchPlaceholder?: string;\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  searchKey,\n  searchPlaceholder = 'Filter…',\n}: DataTableToolbarProps<TData>) {\n  const isFiltered = table.getState().columnFilters.length > 0;\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex flex-1 items-center gap-2\">\n        {searchKey && (\n          <InputText\n            placeholder={searchPlaceholder}\n            value={\n              (table.getColumn(searchKey)?.getFilterValue() as string) ?? ''\n            }\n            onChange={(event) =>\n              table.getColumn(searchKey)?.setFilterValue(event.target.value)\n            }\n            className=\"h-8 w-[150px] lg:w-[250px]\"\n          />\n        )}\n        {isFiltered && (\n          <Button\n            variant=\"ghost\"\n            onClick={() => table.resetColumnFilters()}\n            className=\"h-8 gap-2\"\n          >\n            Reset\n            <TimesIcon />\n          </Button>\n        )}\n      </div>\n      <DataTableViewOptions table={table} />\n    </div>\n  );\n}\n"],"names":["DataTableToolbar","table","searchKey","searchPlaceholder","isFiltered","jsxs","jsx","InputText","_a","event","Button","TimesIcon","DataTableViewOptions"],"mappings":";;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,GAAiC;;AAC/B,QAAMC,IAAaH,EAAM,SAAA,EAAW,cAAc,SAAS;AAE3D,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAA;AAAA,MAAAH,KACC,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAaJ;AAAA,UACb,SACGK,IAAAP,EAAM,UAAUC,CAAS,MAAzB,gBAAAM,EAA4B,qBAA+B;AAAA,UAE9D,UAAU,CAACC,MAAA;;AACT,oBAAAD,IAAAP,EAAM,UAAUC,CAAS,MAAzB,gBAAAM,EAA4B,eAAeC,EAAM,OAAO;AAAA;AAAA,UAE1D,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGbL,KACC,gBAAAC;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAMT,EAAM,mBAAA;AAAA,UACrB,WAAU;AAAA,UACX,UAAA;AAAA,YAAA;AAAA,8BAEEU,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACb,GAEJ;AAAA,IACA,gBAAAL,EAACM,KAAqB,OAAAX,EAAA,CAAc;AAAA,EAAA,GACtC;AAEJ;"}

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

@@ -0,0 +1,40 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { CogIcon as t } from "@acronis-platform/icons-react/stroke-mono";
+import { DropdownMenu as a, DropdownMenuTrigger as d, DropdownMenuContent as l, DropdownMenuLabel as p, DropdownMenuSeparator as s, DropdownMenuCheckboxItem as c } from "../dropdown-menu/dropdown-menu.js";
+import { Button as g } from "../button/button.js";
+function w({
+  table: r
+}) {
+  return /* @__PURE__ */ o(a, { children: [
+    /* @__PURE__ */ o(
+      d,
+      {
+        render: /* @__PURE__ */ n(g, { variant: "secondary", className: "ml-auto hidden h-8 gap-2 lg:flex" }),
+        children: [
+          /* @__PURE__ */ n(t, {}),
+          "View"
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(l, { align: "end", className: "w-[150px]", children: [
+      /* @__PURE__ */ n(p, { children: "Toggle columns" }),
+      /* @__PURE__ */ n(s, {}),
+      r.getAllColumns().filter(
+        (e) => typeof e.accessorFn < "u" && e.getCanHide()
+      ).map((e) => /* @__PURE__ */ n(
+        c,
+        {
+          className: "capitalize",
+          checked: e.getIsVisible(),
+          onCheckedChange: (i) => e.toggleVisibility(!!i),
+          children: e.id
+        },
+        e.id
+      ))
+    ] })
+  ] });
+}
+export {
+  w as DataTableViewOptions
+};
+//# sourceMappingURL=data-table-view-options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\ninterface DataTableViewOptionsProps<TData> {\n  table: Table<TData>;\n}\n\nexport function DataTableViewOptions<TData>({\n  table,\n}: DataTableViewOptionsProps<TData>) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={\n          <Button variant=\"secondary\" className=\"ml-auto hidden h-8 gap-2 lg:flex\" />\n        }\n      >\n        <CogIcon />\n        View\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {table\n          .getAllColumns()\n          .filter(\n            (column) =>\n              typeof column.accessorFn !== 'undefined' && column.getCanHide()\n          )\n          .map((column) => (\n            <DropdownMenuCheckboxItem\n              key={column.id}\n              className=\"capitalize\"\n              checked={column.getIsVisible()}\n              onCheckedChange={(value) => column.toggleVisibility(!!value)}\n            >\n              {column.id}\n            </DropdownMenuCheckboxItem>\n          ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["DataTableViewOptions","table","DropdownMenu","jsxs","DropdownMenuTrigger","jsx","Button","CogIcon","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","column","DropdownMenuCheckboxItem","value"],"mappings":";;;;AAiBO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AACF,GAAqC;AACnC,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QACE,gBAAAC,EAACC,GAAA,EAAO,SAAQ,aAAY,WAAU,oCAAmC;AAAA,QAG3E,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAA,EAAQ;AAAA,UAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,gBAAAJ,EAACK,GAAA,EAAoB,OAAM,OAAM,WAAU,aACzC,UAAA;AAAA,MAAA,gBAAAH,EAACI,KAAkB,UAAA,iBAAA,CAAc;AAAA,wBAChCC,GAAA,EAAsB;AAAA,MACtBT,EACE,gBACA;AAAA,QACC,CAACU,MACC,OAAOA,EAAO,aAAe,OAAeA,EAAO,WAAA;AAAA,MAAW,EAEjE,IAAI,CAACA,MACJ,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,SAASD,EAAO,aAAA;AAAA,UAChB,iBAAiB,CAACE,MAAUF,EAAO,iBAAiB,CAAC,CAACE,CAAK;AAAA,UAE1D,UAAAF,EAAO;AAAA,QAAA;AAAA,QALHA,EAAO;AAAA,MAAA,CAOf;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,89 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useState as t, Fragment as H } from "react";
+import { useReactTable as P, flexRender as h } 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 p } from "../../../lib/utils.js";
+import { Table as j, TableHeader as A, TableRow as a, TableHead as B, TableBody as L, TableCell as d } from "../table/table.js";
+import { getFilteredRowModel as $, getSortedRowModel as q, getPaginationRowModel as z, getExpandedRowModel as G, getCoreRowModel as J } from "../../../node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js";
+function Z({
+  columns: b,
+  data: C,
+  getRowCanExpand: f,
+  renderExpandedRow: g,
+  striped: v = !1,
+  bordered: R = !1,
+  highlightCurrentRow: i = !1,
+  skeleton: x = !1,
+  skeletonRows: S = 5
+}) {
+  const [M, w] = t([]), [y, N] = t([]), [T, F] = t({}), [V, _] = t({}), [k, E] = t({}), [I, D] = t(), s = P({
+    data: C,
+    columns: b,
+    getCoreRowModel: J(),
+    getExpandedRowModel: G(),
+    getPaginationRowModel: z(),
+    getRowCanExpand: f,
+    onExpandedChange: E,
+    onSortingChange: w,
+    getSortedRowModel: q(),
+    onColumnFiltersChange: N,
+    getFilteredRowModel: $(),
+    onColumnVisibilityChange: F,
+    onRowSelectionChange: _,
+    state: { sorting: M, columnFilters: y, columnVisibility: T, rowSelection: V, expanded: k }
+  }), n = s.getRowModel().rows;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: p(
+        "rounded-md border border-[var(--ui-table-global-cell-border-color)]",
+        R ? "[&_th:not(:last-child)]:border-r [&_td:not(:last-child)]:border-r [&_th]:border-[var(--ui-table-global-cell-border-color)] [&_td]:border-[var(--ui-table-global-cell-border-color)]" : void 0
+      ),
+      children: /* @__PURE__ */ u(j, { children: [
+        /* @__PURE__ */ e(A, { children: s.getHeaderGroups().map((l) => /* @__PURE__ */ e(a, { children: l.headers.map((o) => /* @__PURE__ */ e(B, { children: o.isPlaceholder ? null : h(
+          o.column.columnDef.header,
+          o.getContext()
+        ) }, o.id)) }, l.id)) }),
+        /* @__PURE__ */ e(L, { children: x ? Array.from({ length: S }).map((l, o) => /* @__PURE__ */ e(a, { className: "hover:bg-transparent", children: s.getVisibleLeafColumns().map((r) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e("div", { className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]" }) }, r.id)) }, `skeleton-${o}`)) : n != null && n.length ? n.map((l, o) => {
+          const r = l.getIsSelected(), m = i && I === l.id;
+          return /* @__PURE__ */ u(H, { children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                selected: r,
+                onClick: i ? () => D(l.id) : void 0,
+                className: p(
+                  i && "cursor-pointer",
+                  v && o % 2 === 1 && !r && !m && "bg-[var(--ui-background-surface-secondary)]",
+                  m && !r && "bg-[var(--ui-table-global-row-color-active)]"
+                ),
+                children: l.getVisibleCells().map((c) => /* @__PURE__ */ e(d, { children: h(
+                  c.column.columnDef.cell,
+                  c.getContext()
+                ) }, c.id))
+              }
+            ),
+            g && l.getIsExpanded() && /* @__PURE__ */ e(a, { className: "hover:bg-transparent", children: /* @__PURE__ */ e(
+              d,
+              {
+                className: "h-auto py-3",
+                colSpan: l.getVisibleCells().length,
+                children: g(l)
+              }
+            ) })
+          ] }, l.id);
+        }) : /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+          d,
+          {
+            colSpan: b.length,
+            className: "h-24 text-center text-[var(--ui-table-data-value-color-disabled)]",
+            children: "No results."
+          }
+        ) }) })
+      ] })
+    }
+  );
+}
+export {
+  Z as DataTable
+};
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sources":["../../../../src/components/ui/data-table/data-table.tsx"],"sourcesContent":["import { Fragment, type ReactNode, useState } from 'react';\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type ExpandedState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { cn } from '@/lib/utils';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `data-table`\n// (packages/ui-legacy/src/components/ui/data-table/). A TanStack-react-table v8\n// data grid composed over the ui-react Table primitives — sorting, filtering,\n// column visibility, row selection, pagination, and optional row expansion. The\n// presentational flags (`striped`, `bordered`, `skeleton`, `highlightCurrentRow`)\n// are borrowed from the Vue `AvTable`; behavioral features come from TanStack.\n// Pair with DataTableToolbar / DataTablePagination / DataTableColumnHeader, which\n// take the `table` instance returned to column cells via TanStack context.\n// The grid cells/rows/headers are themed by the Table primitives' `--ui-table-*`\n// tier; DataTable's own chrome reuses that tier too — the wrapper border matches\n// the cell borders (`--ui-table-global-cell-border-color`), the empty-state uses\n// the muted table-value color, the current row the active-row color, and stripes\n// the secondary surface.\n\nexport interface DataTableProps<TData, TValue> {\n  columns: ColumnDef<TData, TValue>[];\n  data: TData[];\n  /** Enables row expansion for rows that return true. Pair with `renderExpandedRow`. */\n  getRowCanExpand?: (row: Row<TData>) => boolean;\n  /**\n   * Renders expanded content for an expanded row. Used together with\n   * `getRowCanExpand`.\n   */\n  renderExpandedRow?: (row: Row<TData>) => ReactNode;\n  /** Alternating row backgrounds. */\n  striped?: boolean;\n  /** Vertical borders between columns (rows already have horizontal borders). */\n  bordered?: boolean;\n  /** Highlight the row the user last clicked (the \"current\" row). */\n  highlightCurrentRow?: boolean;\n  /** Render placeholder skeleton rows instead of data (loading state). */\n  skeleton?: boolean;\n  /** Number of skeleton rows to render when `skeleton` is set. */\n  skeletonRows?: number;\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  getRowCanExpand,\n  renderExpandedRow,\n  striped = false,\n  bordered = false,\n  highlightCurrentRow = false,\n  skeleton = false,\n  skeletonRows = 5,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n  const [rowSelection, setRowSelection] = useState({});\n  const [expanded, setExpanded] = useState<ExpandedState>({});\n  const [currentRowId, setCurrentRowId] = useState<string>();\n\n  const table = useReactTable({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getRowCanExpand,\n    onExpandedChange: setExpanded,\n    onSortingChange: setSorting,\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: { sorting, columnFilters, columnVisibility, rowSelection, expanded },\n  });\n\n  const rows = table.getRowModel().rows;\n  // Vertical borders are opt-in; a trailing border on the last cell would\n  // double up with the wrapper, so suppress it.\n  const borderedClass = bordered\n    ? '[&_th:not(:last-child)]:border-r [&_td:not(:last-child)]:border-r [&_th]:border-[var(--ui-table-global-cell-border-color)] [&_td]:border-[var(--ui-table-global-cell-border-color)]'\n    : undefined;\n\n  return (\n    <div\n      className={cn(\n        'rounded-md border border-[var(--ui-table-global-cell-border-color)]',\n        borderedClass\n      )}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => (\n                <TableHead key={header.id}>\n                  {header.isPlaceholder\n                    ? null\n                    : flexRender(\n                        header.column.columnDef.header,\n                        header.getContext()\n                      )}\n                </TableHead>\n              ))}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {skeleton ? (\n            Array.from({ length: skeletonRows }).map((_, rowIndex) => (\n              <TableRow key={`skeleton-${rowIndex}`} className=\"hover:bg-transparent\">\n                {table.getVisibleLeafColumns().map((column) => (\n                  <TableCell key={column.id}>\n                    <div className=\"h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]\" />\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : rows?.length ? (\n            rows.map((row, rowIndex) => {\n              const isSelected = row.getIsSelected();\n              const isCurrent = highlightCurrentRow && currentRowId === row.id;\n              return (\n                <Fragment key={row.id}>\n                  <TableRow\n                    selected={isSelected}\n                    onClick={\n                      highlightCurrentRow\n                        ? () => setCurrentRowId(row.id)\n                        : undefined\n                    }\n                    className={cn(\n                      highlightCurrentRow && 'cursor-pointer',\n                      striped &&\n                        rowIndex % 2 === 1 &&\n                        !isSelected &&\n                        !isCurrent &&\n                        'bg-[var(--ui-background-surface-secondary)]',\n                      isCurrent &&\n                        !isSelected &&\n                        'bg-[var(--ui-table-global-row-color-active)]'\n                    )}\n                  >\n                    {row.getVisibleCells().map((cell) => (\n                      <TableCell key={cell.id}>\n                        {flexRender(\n                          cell.column.columnDef.cell,\n                          cell.getContext()\n                        )}\n                      </TableCell>\n                    ))}\n                  </TableRow>\n                  {renderExpandedRow && row.getIsExpanded() && (\n                    <TableRow className=\"hover:bg-transparent\">\n                      <TableCell\n                        className=\"h-auto py-3\"\n                        colSpan={row.getVisibleCells().length}\n                      >\n                        {renderExpandedRow(row)}\n                      </TableCell>\n                    </TableRow>\n                  )}\n                </Fragment>\n              );\n            })\n          ) : (\n            <TableRow>\n              <TableCell\n                colSpan={columns.length}\n                className=\"h-24 text-center text-[var(--ui-table-data-value-color-disabled)]\"\n              >\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n"],"names":["DataTable","columns","data","getRowCanExpand","renderExpandedRow","striped","bordered","highlightCurrentRow","skeleton","skeletonRows","sorting","setSorting","useState","columnFilters","setColumnFilters","columnVisibility","setColumnVisibility","rowSelection","setRowSelection","expanded","setExpanded","currentRowId","setCurrentRowId","table","useReactTable","getCoreRowModel","getExpandedRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","rows","jsx","cn","Table","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","_","rowIndex","column","TableCell","row","isSelected","isCurrent","Fragment","cell"],"mappings":"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"}

package/dist/components/ui/dialog/dialog.js

@@ -0,0 +1,140 @@
+import { jsx as t, jsxs as n, Fragment as u } from "react/jsx-runtime";
+import * as i from "react";
+import { Dialog as r } from "@base-ui/react/dialog";
+import { TimesIcon as x } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as D } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as l } from "../../../lib/utils.js";
+const y = D(
+  "fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg bg-muted text-foreground shadow-lg duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",
+  {
+    variants: {
+      size: {
+        xs: "max-w-[464px]",
+        sm: "max-w-lg",
+        md: "max-w-2xl",
+        lg: "max-w-[832px]",
+        xl: "max-w-[992px]",
+        "2xl": "max-w-[1136px]"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+), j = r.Root, F = r.Trigger, H = r.Portal, O = r.Close, d = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
+  r.Backdrop,
+  {
+    ref: e,
+    className: l(
+      "fixed inset-0 z-50 bg-[var(--ui-background-overlay-primary)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0",
+      o
+    ),
+    ...a
+  }
+));
+d.displayName = "DialogOverlay";
+const b = i.forwardRef(
+  ({
+    className: o,
+    children: a,
+    size: e,
+    portal: m = !0,
+    portalContainer: c,
+    keepMounted: f,
+    ...g
+  }, p) => {
+    const s = /* @__PURE__ */ n(u, { children: [
+      /* @__PURE__ */ t(d, {}),
+      /* @__PURE__ */ t(
+        r.Popup,
+        {
+          ref: p,
+          className: l(y({ size: e }), o),
+          ...g,
+          children: a
+        }
+      )
+    ] });
+    return m ? /* @__PURE__ */ t(r.Portal, { container: c, keepMounted: f, children: s }) : s;
+  }
+);
+b.displayName = "DialogContent";
+const w = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: l(
+      "flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4",
+      o
+    ),
+    ...a
+  }
+));
+w.displayName = "DialogHeader";
+const v = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: l(
+      "flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4",
+      o
+    ),
+    ...a
+  }
+));
+v.displayName = "DialogFooter";
+const N = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t("div", { ref: e, className: l("flex-1 overflow-auto p-6", o), ...a }));
+N.displayName = "DialogBody";
+const R = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
+  r.Title,
+  {
+    ref: e,
+    className: l(
+      "flex-1 text-2xl font-normal leading-8 text-foreground",
+      o
+    ),
+    ...a
+  }
+));
+R.displayName = "DialogTitle";
+const h = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ t(
+  r.Description,
+  {
+    ref: e,
+    className: l("text-sm text-muted-foreground", o),
+    ...a
+  }
+));
+h.displayName = "DialogDescription";
+const C = i.forwardRef(({ className: o, ...a }, e) => /* @__PURE__ */ n(
+  r.Close,
+  {
+    ref: e,
+    className: l(
+      "rounded p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none",
+      o
+    ),
+    ...a,
+    children: [
+      /* @__PURE__ */ t(x, { size: 24 }),
+      /* @__PURE__ */ t("span", { className: "sr-only", children: "Close" })
+    ]
+  }
+));
+C.displayName = "DialogCloseButton";
+export {
+  j as Dialog,
+  N as DialogBody,
+  O as DialogClose,
+  C as DialogCloseButton,
+  b as DialogContent,
+  h as DialogDescription,
+  v as DialogFooter,
+  w as DialogHeader,
+  d as DialogOverlay,
+  H as DialogPortal,
+  R as DialogTitle,
+  F as DialogTrigger,
+  y as dialogContentVariants
+};
+//# sourceMappingURL=dialog.js.map