@acronis-platform/ui-react 0.38.0 → 0.44.0

package/dist/components/ui/checkbox/checkbox.js

@@ -5,7 +5,9 @@ import { MinusIcon as v, CheckIcon as u } from "@acronis-platform/icons-react/st
 import { cn as m } from "../../../lib/utils.js";
 const g = [
   // geometry + focus ring
-  "inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0",
+  // `align-middle` keeps the box vertically centered when it sits inline next to
+  // text (e.g. in a table cell) rather than defaulting to the text baseline.
+  "inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0",
   // unchecked (base): idle / hover / active
   "bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]",
   "not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]",

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport {\n  CheckIcon,\n  MinusIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Checkbox primitive, themed by the dedicated next-gen\n// `--ui-checkbox-*` token tier from @acronis-platform/tokens-pd. The box has three\n// logical states — `unchecked` (the base), `checked`, and `indeterminate` — each\n// with its own per-interaction (idle / hover / active / disabled) fill\n// (`*-box-color-*`), border (`*-box-border-color-*`), and glyph (`*-icon-color-*`)\n// tokens. `unchecked` is the base layer (lowest specificity); `data-[checked]` /\n// `data-[indeterminate]` override it (Base UI marks an indeterminate box with both\n// data-unchecked AND data-indeterminate, so the single-attribute overrides win on\n// specificity), and `data-[disabled]:data-[<state>]` overrides those in turn. The\n// glyph (check when checked, minus when indeterminate) inherits the Root's text\n// color via the Indicator's `text-current`. Box geometry (16px size, 2px radius)\n// comes from `--ui-checkbox-global-box-*`; the focus ring uses `--ui-focus-primary`.\n//\n// An optional `label` / `description` compose the full Figma field: the box, an\n// optional label, and an optional description stacked beside it. When either is\n// present the whole row is a `<label>` (so clicking the text toggles the box — a\n// Base UI checkbox renders a labelable <button>), the box gets a top margin of\n// `--ui-checkbox-global-box-margin-x` (4px = (line-height 24 − box 16) / 2, the\n// design's box alignment margin) to center it on the first text line, and the\n// box is wired to the text via aria-labelledby / aria-describedby. With neither,\n// the box renders on its own (name it with `aria-label`).\nconst boxClasses = [\n  // geometry + focus ring\n  'inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0',\n  // unchecked (base): idle / hover / active\n  'bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]',\n  'not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]',\n  'not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]',\n  // checked: idle / hover / active\n  'data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]',\n  'data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]',\n  'data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]',\n  // indeterminate: idle / hover / active\n  'data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]',\n  'data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]',\n  'data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]',\n  // disabled (unchecked base + per-state overrides)\n  'data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]',\n  'data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]',\n  'data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]',\n].join(' ');\n\nexport interface CheckboxProps\n  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** Optional label rendered beside the box; names the control. */\n  label?: React.ReactNode;\n  /** Optional secondary description rendered under the label. */\n  description?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, label, description, indeterminate, ...props }, ref) => {\n  const reactId = React.useId();\n  const labelId = label != null ? `${reactId}-label` : undefined;\n  const descriptionId = description != null ? `${reactId}-description` : undefined;\n  const hasContent = label != null || description != null;\n\n  const box = (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      indeterminate={indeterminate}\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      className={cn(\n        boxClasses,\n        hasContent && 'mt-[var(--ui-checkbox-global-box-margin-x)]',\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n        {indeterminate ? <MinusIcon size={16} /> : <CheckIcon size={16} />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n\n  if (!hasContent) return box;\n\n  return (\n    <label className=\"inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]\">\n      {box}\n      <span className=\"flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]\">\n        {label != null && (\n          <span\n            id={labelId}\n            className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]\"\n          >\n            {label}\n          </span>\n        )}\n        {description != null && (\n          <span\n            id={descriptionId}\n            className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]\"\n          >\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["boxClasses","Checkbox","React","className","label","description","indeterminate","props","ref","reactId","labelId","descriptionId","hasContent","box","jsx","CheckboxPrimitive","cn","MinusIcon","CheckIcon","jsxs"],"mappings":";;;;;AA8BA,MAAMA,IAAa;AAAA;AAAA,EAEjB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAUJC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AACrE,QAAMC,IAAUP,EAAM,MAAA,GAChBQ,IAAUN,KAAS,OAAO,GAAGK,CAAO,WAAW,QAC/CE,IAAgBN,KAAe,OAAO,GAAGI,CAAO,iBAAiB,QACjEG,IAAaR,KAAS,QAAQC,KAAe,MAE7CQ,IACJ,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,KAAAP;AAAA,MACA,eAAAF;AAAA,MACA,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,WAAWK;AAAA,QACThB;AAAA,QACAY,KAAc;AAAA,QACdT;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEJ,4BAACQ,EAAkB,WAAlB,EAA4B,WAAU,iDACpC,UAAAT,IAAgB,gBAAAQ,EAACG,GAAA,EAAU,MAAM,IAAI,IAAK,gBAAAH,EAACI,GAAA,EAAU,MAAM,IAAI,EAAA,CAClE;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAKN,IAGH,gBAAAO,EAAC,SAAA,EAAM,WAAU,oMACd,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAM,EAAC,QAAA,EAAK,WAAU,qIACb,UAAA;AAAA,MAAAf,KAAS,QACR,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIJ;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAe,QACd,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIH;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GACF,IAvBsBQ;AAyB1B,CAAC;AACDZ,EAAS,cAAc;"}
+{"version":3,"file":"checkbox.js","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport {\n  CheckIcon,\n  MinusIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Checkbox primitive, themed by the dedicated next-gen\n// `--ui-checkbox-*` token tier from @acronis-platform/tokens-pd. The box has three\n// logical states — `unchecked` (the base), `checked`, and `indeterminate` — each\n// with its own per-interaction (idle / hover / active / disabled) fill\n// (`*-box-color-*`), border (`*-box-border-color-*`), and glyph (`*-icon-color-*`)\n// tokens. `unchecked` is the base layer (lowest specificity); `data-[checked]` /\n// `data-[indeterminate]` override it (Base UI marks an indeterminate box with both\n// data-unchecked AND data-indeterminate, so the single-attribute overrides win on\n// specificity), and `data-[disabled]:data-[<state>]` overrides those in turn. The\n// glyph (check when checked, minus when indeterminate) inherits the Root's text\n// color via the Indicator's `text-current`. Box geometry (16px size, 2px radius)\n// comes from `--ui-checkbox-global-box-*`; the focus ring uses `--ui-focus-primary`.\n//\n// An optional `label` / `description` compose the full Figma field: the box, an\n// optional label, and an optional description stacked beside it. When either is\n// present the whole row is a `<label>` (so clicking the text toggles the box — a\n// Base UI checkbox renders a labelable <button>), the box gets a top margin of\n// `--ui-checkbox-global-box-margin-x` (4px = (line-height 24 − box 16) / 2, the\n// design's box alignment margin) to center it on the first text line, and the\n// box is wired to the text via aria-labelledby / aria-describedby. With neither,\n// the box renders on its own (name it with `aria-label`).\nconst boxClasses = [\n  // geometry + focus ring\n  // `align-middle` keeps the box vertically centered when it sits inline next to\n  // text (e.g. in a table cell) rather than defaulting to the text baseline.\n  'inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0',\n  // unchecked (base): idle / hover / active\n  'bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]',\n  'not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]',\n  'not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]',\n  // checked: idle / hover / active\n  'data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]',\n  'data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]',\n  'data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]',\n  // indeterminate: idle / hover / active\n  'data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]',\n  'data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]',\n  'data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]',\n  // disabled (unchecked base + per-state overrides)\n  'data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]',\n  'data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]',\n  'data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]',\n].join(' ');\n\nexport interface CheckboxProps\n  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** Optional label rendered beside the box; names the control. */\n  label?: React.ReactNode;\n  /** Optional secondary description rendered under the label. */\n  description?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, label, description, indeterminate, ...props }, ref) => {\n  const reactId = React.useId();\n  const labelId = label != null ? `${reactId}-label` : undefined;\n  const descriptionId = description != null ? `${reactId}-description` : undefined;\n  const hasContent = label != null || description != null;\n\n  const box = (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      indeterminate={indeterminate}\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      className={cn(\n        boxClasses,\n        hasContent && 'mt-[var(--ui-checkbox-global-box-margin-x)]',\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n        {indeterminate ? <MinusIcon size={16} /> : <CheckIcon size={16} />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n\n  if (!hasContent) return box;\n\n  return (\n    <label className=\"inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]\">\n      {box}\n      <span className=\"flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]\">\n        {label != null && (\n          <span\n            id={labelId}\n            className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]\"\n          >\n            {label}\n          </span>\n        )}\n        {description != null && (\n          <span\n            id={descriptionId}\n            className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]\"\n          >\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["boxClasses","Checkbox","React","className","label","description","indeterminate","props","ref","reactId","labelId","descriptionId","hasContent","box","jsx","CheckboxPrimitive","cn","MinusIcon","CheckIcon","jsxs"],"mappings":";;;;;AA8BA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,EAIjB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAUJC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AACrE,QAAMC,IAAUP,EAAM,MAAA,GAChBQ,IAAUN,KAAS,OAAO,GAAGK,CAAO,WAAW,QAC/CE,IAAgBN,KAAe,OAAO,GAAGI,CAAO,iBAAiB,QACjEG,IAAaR,KAAS,QAAQC,KAAe,MAE7CQ,IACJ,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,KAAAP;AAAA,MACA,eAAAF;AAAA,MACA,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,WAAWK;AAAA,QACThB;AAAA,QACAY,KAAc;AAAA,QACdT;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEJ,4BAACQ,EAAkB,WAAlB,EAA4B,WAAU,iDACpC,UAAAT,IAAgB,gBAAAQ,EAACG,GAAA,EAAU,MAAM,IAAI,IAAK,gBAAAH,EAACI,GAAA,EAAU,MAAM,IAAI,EAAA,CAClE;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAKN,IAGH,gBAAAO,EAAC,SAAA,EAAM,WAAU,oMACd,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAM,EAAC,QAAA,EAAK,WAAU,qIACb,UAAA;AAAA,MAAAf,KAAS,QACR,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIJ;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAe,QACd,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIH;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GACF,IAvBsBQ;AAyB1B,CAAC;AACDZ,EAAS,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":";;;;;;AA+DO,SAASA,EAAyB;AAAA,EACvC,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,qBAAAC,IAAsB;AAAA,EACtB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AACjB,GAAkC;AAChC,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAuB,CAAA,CAAE,GACjD,CAACC,GAAeC,CAAgB,IAAIF,EAA6B,CAAA,CAAE,GACnE,CAACG,GAAkBC,CAAmB,IAAIJ,EAA0B,CAAA,CAAE,GACtE,CAACK,GAAcC,CAAe,IAAIN,EAAS,CAAA,CAAE,GAC7C,CAACO,GAAUC,CAAW,IAAIR,EAAwB,CAAA,CAAE,GACpD,CAACS,GAAcC,CAAe,IAAIV,EAAA,GAElCW,IAAQC,EAAc;AAAA,IAC1B,MAAAtB;AAAA,IACA,SAAAD;AAAA,IACA,iBAAiBwB,EAAA;AAAA,IACjB,qBAAqBC,EAAA;AAAA,IACrB,uBAAuBC,EAAA;AAAA,IACvB,iBAAAxB;AAAA,IACA,kBAAkBiB;AAAA,IAClB,iBAAiBT;AAAA,IACjB,mBAAmBiB,EAAA;AAAA,IACnB,uBAAuBd;AAAA,IACvB,qBAAqBe,EAAA;AAAA,IACrB,0BAA0Bb;AAAA,IAC1B,sBAAsBE;AAAA,IACtB,OAAO,EAAE,SAAAR,GAAS,eAAAG,GAAe,kBAAAE,GAAkB,cAAAE,GAAc,UAAAE,EAAA;AAAA,EAAS,CAC3E,GAEKW,IAAOP,EAAM,YAAA,EAAc;AAOjC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QAPgB1B,IAClB,wLACA;AAAA,MAME;AAAA,MAGF,4BAAC2B,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF,EAACG,KACE,UAAAX,EAAM,kBAAkB,IAAI,CAACY,MAC5B,gBAAAJ,EAACK,GAAA,EACE,UAAAD,EAAY,QAAQ,IAAI,CAACE,wBACvBC,GAAA,EACE,UAAAD,EAAO,gBACJ,OACAE;AAAA,UACEF,EAAO,OAAO,UAAU;AAAA,UACxBA,EAAO,WAAA;AAAA,QAAW,EACpB,GANUA,EAAO,EAOvB,CACD,KAVYF,EAAY,EAW3B,CACD,GACH;AAAA,QACA,gBAAAJ,EAACS,KACE,UAAAhC,IACC,MAAM,KAAK,EAAE,QAAQC,GAAc,EAAE,IAAI,CAACgC,GAAGC,MAC3C,gBAAAX,EAACK,GAAA,EAAsC,WAAU,wBAC9C,UAAAb,EAAM,sBAAA,EAAwB,IAAI,CAACoB,MAClC,gBAAAZ,EAACa,GAAA,EACC,4BAAC,OAAA,EAAI,WAAU,gFAA+E,KADhFD,EAAO,EAEvB,CACD,KALY,YAAYD,CAAQ,EAMnC,CACD,IACCZ,KAAA,QAAAA,EAAM,SACRA,EAAK,IAAI,CAACe,GAAKH,MAAa;AAC1B,gBAAMI,IAAaD,EAAI,cAAA,GACjBE,IAAYxC,KAAuBc,MAAiBwB,EAAI;AAC9D,mCACGG,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAjB;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,UAAUU;AAAA,gBACV,SACEvC,IACI,MAAMe,EAAgBuB,EAAI,EAAE,IAC5B;AAAA,gBAEN,WAAWb;AAAA,kBACTzB,KAAuB;AAAA,kBACvBF,KACEqC,IAAW,MAAM,KACjB,CAACI,KACD,CAACC,KACD;AAAA,kBACFA,KACE,CAACD,KACD;AAAA,gBAAA;AAAA,gBAGH,YAAI,gBAAA,EAAkB,IAAI,CAACG,wBACzBL,GAAA,EACE,UAAAL;AAAA,kBACCU,EAAK,OAAO,UAAU;AAAA,kBACtBA,EAAK,WAAA;AAAA,gBAAW,EAClB,GAJcA,EAAK,EAKrB,CACD;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF7C,KAAqByC,EAAI,cAAA,KACxB,gBAAAd,EAACK,GAAA,EAAS,WAAU,wBAClB,UAAA,gBAAAL;AAAA,cAACa;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAASC,EAAI,gBAAA,EAAkB;AAAA,gBAE9B,YAAkBA,CAAG;AAAA,cAAA;AAAA,YAAA,EACxB,CACF;AAAA,UAAA,EAAA,GArCWA,EAAI,EAuCnB;AAAA,QAEJ,CAAC,IAED,gBAAAd,EAACK,GAAA,EACC,UAAA,gBAAAL;AAAA,UAACa;AAAA,UAAA;AAAA,YACC,SAAS3C,EAAQ;AAAA,YACjB,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,QAAA,GAGH,EAAA,CAEJ;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/ui/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,159 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as s from "react";
+import { Menu as n } from "@base-ui/react/menu";
+import { CheckIcon as b, ChevronRightIcon as h } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as d } from "../../../lib/utils.js";
+const T = n.Root, j = n.Trigger, G = n.Group, _ = n.Portal, L = n.SubmenuRoot, q = n.RadioGroup, p = "z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-background py-1 text-foreground shadow-md outline-none duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2", m = "relative flex cursor-default select-none items-center gap-2 px-4 py-2 text-sm leading-6 outline-none transition-colors data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", N = s.forwardRef(
+  ({
+    className: e,
+    side: o,
+    align: a,
+    sideOffset: r = 4,
+    portal: i = !0,
+    portalContainer: u,
+    keepMounted: f,
+    ...g
+  }, w) => {
+    const c = /* @__PURE__ */ t(
+      n.Positioner,
+      {
+        side: o,
+        align: a,
+        sideOffset: r,
+        className: "z-50",
+        children: /* @__PURE__ */ t(
+          n.Popup,
+          {
+            ref: w,
+            className: d(p, e),
+            ...g
+          }
+        )
+      }
+    );
+    return i ? /* @__PURE__ */ t(n.Portal, { container: u, keepMounted: f, children: c }) : c;
+  }
+);
+N.displayName = "DropdownMenuContent";
+const M = s.forwardRef(({ className: e, sideOffset: o = 4, ...a }, r) => /* @__PURE__ */ t(n.Positioner, { sideOffset: o, className: "z-50", children: /* @__PURE__ */ t(
+  n.Popup,
+  {
+    ref: r,
+    className: d(p, e),
+    ...a
+  }
+) }));
+M.displayName = "DropdownMenuSubContent";
+const x = s.forwardRef(({ className: e, inset: o, ...a }, r) => /* @__PURE__ */ t(
+  n.Item,
+  {
+    ref: r,
+    className: d(m, o && "pl-8", e),
+    ...a
+  }
+));
+x.displayName = "DropdownMenuItem";
+const D = s.forwardRef(({ className: e, inset: o, children: a, ...r }, i) => /* @__PURE__ */ l(
+  n.SubmenuTrigger,
+  {
+    ref: i,
+    className: d(
+      m,
+      "data-[popup-open]:bg-accent",
+      o && "pl-8",
+      e
+    ),
+    ...r,
+    children: [
+      a,
+      /* @__PURE__ */ t(h, { className: "ml-auto" })
+    ]
+  }
+));
+D.displayName = "DropdownMenuSubTrigger";
+const y = s.forwardRef(({ className: e, children: o, ...a }, r) => /* @__PURE__ */ l(
+  n.CheckboxItem,
+  {
+    ref: r,
+    className: d(
+      "relative flex cursor-default select-none items-center py-2 pl-8 pr-4 text-sm leading-6 outline-none transition-colors data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      e
+    ),
+    ...a,
+    children: [
+      /* @__PURE__ */ t("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(n.CheckboxItemIndicator, { children: /* @__PURE__ */ t(b, { className: "size-4" }) }) }),
+      o
+    ]
+  }
+));
+y.displayName = "DropdownMenuCheckboxItem";
+const R = s.forwardRef(({ className: e, children: o, ...a }, r) => /* @__PURE__ */ l(
+  n.RadioItem,
+  {
+    ref: r,
+    className: d(
+      "relative flex cursor-default select-none items-center py-2 pl-8 pr-4 text-sm leading-6 outline-none transition-colors data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      e
+    ),
+    ...a,
+    children: [
+      /* @__PURE__ */ t("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(n.RadioItemIndicator, { children: /* @__PURE__ */ t("span", { className: "size-2 rounded-full bg-current" }) }) }),
+      o
+    ]
+  }
+));
+R.displayName = "DropdownMenuRadioItem";
+const v = s.forwardRef(({ className: e, inset: o, ...a }, r) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: r,
+    className: d(
+      "px-4 py-2 text-sm font-semibold leading-6",
+      o && "pl-8",
+      e
+    ),
+    ...a
+  }
+));
+v.displayName = "DropdownMenuLabel";
+const I = s.forwardRef(({ className: e, ...o }, a) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: a,
+    role: "separator",
+    className: d("my-1 h-px bg-border", e),
+    ...o
+  }
+));
+I.displayName = "DropdownMenuSeparator";
+function C({
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: d("ml-auto text-xs tracking-widest text-muted-foreground", e),
+      ...o
+    }
+  );
+}
+C.displayName = "DropdownMenuShortcut";
+export {
+  T as DropdownMenu,
+  y as DropdownMenuCheckboxItem,
+  N as DropdownMenuContent,
+  G as DropdownMenuGroup,
+  x as DropdownMenuItem,
+  v as DropdownMenuLabel,
+  _ as DropdownMenuPortal,
+  q as DropdownMenuRadioGroup,
+  R as DropdownMenuRadioItem,
+  I as DropdownMenuSeparator,
+  C as DropdownMenuShortcut,
+  L as DropdownMenuSub,
+  M as DropdownMenuSubContent,
+  D as DropdownMenuSubTrigger,
+  j as DropdownMenuTrigger
+};
+//# sourceMappingURL=dropdown-menu.js.map