@acronis-platform/ui-react 0.43.0 → 0.45.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/description-list/description-list.js

@@ -0,0 +1,54 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as a } from "../../../lib/utils.js";
+const o = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t("dl", { ref: i, className: a("w-full", s), ...e }));
+o.displayName = "DescriptionList";
+const c = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: i,
+    className: a(
+      // `px-6` insets the content while the `border-t` divider stays full-bleed
+      // (the Figma card look). Override the padding via className when the
+      // surrounding container already pads (e.g. `-mx-6` inside a padded body).
+      "grid grid-cols-[var(--description-list-label,14rem)_minmax(0,1fr)] gap-x-4 border-t border-border px-6 py-3 text-sm leading-6",
+      s
+    ),
+    ...e
+  }
+));
+c.displayName = "DescriptionListItem";
+const n = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t("dt", { ref: i, className: a("text-foreground", s), ...e }));
+n.displayName = "DescriptionListLabel";
+const p = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t(
+  "dd",
+  {
+    ref: i,
+    className: a(
+      "flex min-w-0 items-start gap-2 text-foreground [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+      s
+    ),
+    ...e
+  }
+));
+p.displayName = "DescriptionListValue";
+const d = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t("p", { ref: i, className: a("text-muted-foreground", s), ...e }));
+d.displayName = "DescriptionListValueDescription";
+const l = r.forwardRef(({ className: s, ...e }, i) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: i,
+    className: a("flex flex-wrap items-center gap-4", s),
+    ...e
+  }
+));
+l.displayName = "DescriptionListActions";
+export {
+  o as DescriptionList,
+  l as DescriptionListActions,
+  c as DescriptionListItem,
+  n as DescriptionListLabel,
+  p as DescriptionListValue,
+  d as DescriptionListValueDescription
+};
+//# sourceMappingURL=description-list.js.map

package/dist/components/ui/description-list/description-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.js","sources":["../../../../src/components/ui/description-list/description-list.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// A key/value data list — rows of `label → value`, where the value can be plain\n// text, a status (leading icon + value + a muted description), or action links.\n// Built from the Figma \"Service status\" design (Cyber-Compliance node\n// 3001-20448). Semantic HTML: a `<dl>` of `<div>`-grouped `<dt>`/`<dd>` rows.\n// No `--ui-description-list-*` tier — it composes the shared semantic tokens:\n//   • label / value      -> text-foreground (--ui-text-on-surface-primary)\n//   • description         -> text-muted-foreground (--ui-text-on-surface-secondary)\n//   • row divider         -> border-border (--ui-border-on-surface-border)\n//   • status icon color   -> caller-provided (--ui-text-on-status-*)\n//   • action links        -> compose the `Link` component\n// The 2-column row grid uses a fixed label column (overridable per item via\n// className / the `--description-list-label` custom property).\n\nconst DescriptionList = React.forwardRef<\n  HTMLDListElement,\n  React.HTMLAttributes<HTMLDListElement>\n>(({ className, ...props }, ref) => (\n  <dl ref={ref} className={cn('w-full', className)} {...props} />\n));\nDescriptionList.displayName = 'DescriptionList';\n\nconst DescriptionListItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      // `px-6` insets the content while the `border-t` divider stays full-bleed\n      // (the Figma card look). Override the padding via className when the\n      // surrounding container already pads (e.g. `-mx-6` inside a padded body).\n      'grid grid-cols-[var(--description-list-label,14rem)_minmax(0,1fr)] gap-x-4 border-t border-border px-6 py-3 text-sm leading-6',\n      className\n    )}\n    {...props}\n  />\n));\nDescriptionListItem.displayName = 'DescriptionListItem';\n\nconst DescriptionListLabel = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <dt ref={ref} className={cn('text-foreground', className)} {...props} />\n));\nDescriptionListLabel.displayName = 'DescriptionListLabel';\n\nconst DescriptionListValue = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <dd\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-start gap-2 text-foreground [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0',\n      className\n    )}\n    {...props}\n  />\n));\nDescriptionListValue.displayName = 'DescriptionListValue';\n\nconst DescriptionListValueDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p ref={ref} className={cn('text-muted-foreground', className)} {...props} />\n));\nDescriptionListValueDescription.displayName = 'DescriptionListValueDescription';\n\nconst DescriptionListActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-wrap items-center gap-4', className)}\n    {...props}\n  />\n));\nDescriptionListActions.displayName = 'DescriptionListActions';\n\nexport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n  DescriptionListValueDescription,\n  DescriptionListActions,\n};\n"],"names":["DescriptionList","React","className","props","ref","cn","DescriptionListItem","jsx","DescriptionListLabel","DescriptionListValue","DescriptionListValueDescription","DescriptionListActions"],"mappings":";;;AAiBA,MAAMA,IAAkBC,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,MAAA,EAAG,KAAAA,GAAU,WAAWC,EAAG,UAAUH,CAAS,GAAI,GAAGC,GAAO,CAC9D;AACDH,EAAgB,cAAc;AAE9B,MAAMM,IAAsBL,EAAM,WAGhC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,WAAWC;AAAA;AAAA;AAAA;AAAA,MAIT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDG,EAAoB,cAAc;AAElC,MAAME,IAAuBP,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,MAAA,EAAG,KAAAA,GAAU,WAAWC,EAAG,mBAAmBH,CAAS,GAAI,GAAGC,GAAO,CACvE;AACDK,EAAqB,cAAc;AAEnC,MAAMC,IAAuBR,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAqB,cAAc;AAEnC,MAAMC,IAAkCT,EAAM,WAG5C,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,KAAA,EAAE,KAAAA,GAAU,WAAWC,EAAG,yBAAyBH,CAAS,GAAI,GAAGC,GAAO,CAC5E;AACDO,EAAgC,cAAc;AAE9C,MAAMC,IAAyBV,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAG;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAH;AAAA,IACA,WAAWC,EAAG,qCAAqCH,CAAS;AAAA,IAC3D,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAuB,cAAc;"}

package/dist/components/ui/sheet/sheet-details.js

@@ -0,0 +1,80 @@
+import { jsxs as l, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { Sheet as g, SheetTrigger as D, SheetContent as x, SheetHeader as N, SheetTitle as E, SheetCloseButton as L, SheetBody as T, SheetFooter as b } from "./sheet.js";
+import { Spinner as j } from "../spinner/spinner.js";
+import { Empty as w, EmptyHeader as B, EmptyTitle as v, EmptyDescription as C } from "../empty/empty.js";
+import { DescriptionList as F, DescriptionListItem as H, DescriptionListLabel as I, DescriptionListValue as V } from "../description-list/description-list.js";
+function k({
+  contentState: t,
+  properties: i,
+  children: n,
+  emptyTitle: h,
+  emptyDescription: d,
+  errorTitle: m,
+  errorDescription: s
+}) {
+  if (t === "loading")
+    return /* @__PURE__ */ e("div", { className: "flex h-40 items-center justify-center", children: /* @__PURE__ */ e(j, {}) });
+  if (t === "empty" || t === "error") {
+    const r = t === "error";
+    return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ l(B, { children: [
+      /* @__PURE__ */ e(v, { children: r ? m ?? "Something went wrong" : h ?? "Nothing to show" }),
+      /* @__PURE__ */ e(C, { children: r ? s ?? "The details could not be loaded." : d ?? "There are no details to display yet." })
+    ] }) });
+  }
+  return n ? /* @__PURE__ */ e(S, { children: n }) : i != null && i.length ? /* @__PURE__ */ e(
+    F,
+    {
+      className: "-mx-6",
+      style: { "--description-list-label": "9rem" },
+      children: i.map((r, o) => /* @__PURE__ */ l(H, { children: [
+        /* @__PURE__ */ e(I, { className: "text-muted-foreground", children: r.label }),
+        /* @__PURE__ */ e(V, { className: "font-medium", children: r.value })
+      ] }, o))
+    }
+  ) : null;
+}
+function q({
+  open: t,
+  defaultOpen: i,
+  onOpenChange: n,
+  title: h,
+  side: d = "right",
+  contentState: m = "content",
+  properties: s,
+  children: r,
+  actions: o,
+  trigger: c,
+  emptyTitle: a,
+  emptyDescription: u,
+  errorTitle: f,
+  errorDescription: y,
+  portalContainer: p
+}) {
+  return /* @__PURE__ */ l(g, { open: t, defaultOpen: i, onOpenChange: n, children: [
+    c ? /* @__PURE__ */ e(D, { render: c }) : null,
+    /* @__PURE__ */ l(x, { side: d, portalContainer: p, children: [
+      /* @__PURE__ */ l(N, { children: [
+        /* @__PURE__ */ e(E, { children: h }),
+        /* @__PURE__ */ e(L, {})
+      ] }),
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(
+        k,
+        {
+          contentState: m,
+          properties: s,
+          emptyTitle: a,
+          emptyDescription: u,
+          errorTitle: f,
+          errorDescription: y,
+          children: r
+        }
+      ) }),
+      o ? /* @__PURE__ */ e(b, { children: o }) : null
+    ] })
+  ] });
+}
+q.displayName = "SheetDetails";
+export {
+  q as SheetDetails
+};
+//# sourceMappingURL=sheet-details.js.map

package/dist/components/ui/sheet/sheet-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-details.js","sources":["../../../../src/components/ui/sheet/sheet-details.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n} from '../description-list';\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from '../empty';\nimport { Spinner } from '../spinner';\nimport {\n  Sheet,\n  SheetBody,\n  SheetCloseButton,\n  type SheetContentProps,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from './sheet';\n\n// `SheetDetails` is the preset for the `sheet-detail-panel` usage pattern — the\n// \"easy path that IS the pattern\". It bakes a right-anchored Sheet's header\n// (title + close), a body that switches by `contentState`\n// (loading → Spinner, empty/error → Empty, else a key/value property list or\n// custom children), and an optional footer of actions — so consumers don't\n// re-assemble (or hand-roll) the recipe. For anything outside the recipe, compose\n// the `Sheet*` parts directly. (React composition of the Vue kit's `Details`.)\n\nexport interface SheetDetailsProperty {\n  label: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport type SheetDetailsContentState = 'content' | 'loading' | 'empty' | 'error';\n\nexport interface SheetDetailsProps {\n  /** Controlled open state. Pair with `onOpenChange`. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Fires when the sheet opens or closes. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Panel title (header). Also the accessible name. */\n  title: React.ReactNode;\n  /** Edge the panel anchors to. Defaults to `right`. */\n  side?: SheetContentProps['side'];\n  /** Which body view to show. Defaults to `content`. */\n  contentState?: SheetDetailsContentState;\n  /** Key/value rows rendered as the body in the `content` state (unless `children`). */\n  properties?: SheetDetailsProperty[];\n  /** Custom body for the `content` state — overrides `properties`. */\n  children?: React.ReactNode;\n  /** Footer action(s). Omit for no footer. */\n  actions?: React.ReactNode;\n  /** Optional trigger element (rendered via the Sheet trigger's `render`). */\n  trigger?: React.ReactElement;\n  /** Empty-state copy (`contentState=\"empty\"`). */\n  emptyTitle?: React.ReactNode;\n  emptyDescription?: React.ReactNode;\n  /** Error-state copy (`contentState=\"error\"`). */\n  errorTitle?: React.ReactNode;\n  errorDescription?: React.ReactNode;\n  /** Portal container (shadow-root mount for isolated previews). */\n  portalContainer?: SheetContentProps['portalContainer'];\n}\n\nfunction SheetDetailsBody({\n  contentState,\n  properties,\n  children,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n}: Pick<\n  SheetDetailsProps,\n  | 'contentState'\n  | 'properties'\n  | 'children'\n  | 'emptyTitle'\n  | 'emptyDescription'\n  | 'errorTitle'\n  | 'errorDescription'\n>) {\n  if (contentState === 'loading') {\n    return (\n      <div className=\"flex h-40 items-center justify-center\">\n        <Spinner />\n      </div>\n    );\n  }\n  if (contentState === 'empty' || contentState === 'error') {\n    const isError = contentState === 'error';\n    return (\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>\n            {isError\n              ? (errorTitle ?? 'Something went wrong')\n              : (emptyTitle ?? 'Nothing to show')}\n          </EmptyTitle>\n          <EmptyDescription>\n            {isError\n              ? (errorDescription ?? 'The details could not be loaded.')\n              : (emptyDescription ?? 'There are no details to display yet.')}\n          </EmptyDescription>\n        </EmptyHeader>\n      </Empty>\n    );\n  }\n  if (children) return <>{children}</>;\n  if (properties?.length) {\n    // Render through DescriptionList. `-mx-6` cancels the SheetBody padding so\n    // the row dividers go full-bleed while the content stays aligned at the\n    // panel's 24px inset; the label column is tightened for the narrow panel.\n    return (\n      <DescriptionList\n        className=\"-mx-6\"\n        style={{ '--description-list-label': '9rem' } as React.CSSProperties}\n      >\n        {properties.map((p, i) => (\n          <DescriptionListItem key={i}>\n            <DescriptionListLabel className=\"text-muted-foreground\">\n              {p.label}\n            </DescriptionListLabel>\n            <DescriptionListValue className=\"font-medium\">\n              {p.value}\n            </DescriptionListValue>\n          </DescriptionListItem>\n        ))}\n      </DescriptionList>\n    );\n  }\n  return null;\n}\n\nfunction SheetDetails({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  side = 'right',\n  contentState = 'content',\n  properties,\n  children,\n  actions,\n  trigger,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n  portalContainer,\n}: SheetDetailsProps) {\n  return (\n    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {trigger ? <SheetTrigger render={trigger} /> : null}\n      <SheetContent side={side} portalContainer={portalContainer}>\n        <SheetHeader>\n          <SheetTitle>{title}</SheetTitle>\n          <SheetCloseButton />\n        </SheetHeader>\n        <SheetBody>\n          <SheetDetailsBody\n            contentState={contentState}\n            properties={properties}\n            emptyTitle={emptyTitle}\n            emptyDescription={emptyDescription}\n            errorTitle={errorTitle}\n            errorDescription={errorDescription}\n          >\n            {children}\n          </SheetDetailsBody>\n        </SheetBody>\n        {actions ? <SheetFooter>{actions}</SheetFooter> : null}\n      </SheetContent>\n    </Sheet>\n  );\n}\nSheetDetails.displayName = 'SheetDetails';\n\nexport { SheetDetails };\n"],"names":["SheetDetailsBody","contentState","properties","children","emptyTitle","emptyDescription","errorTitle","errorDescription","jsx","Spinner","isError","Empty","jsxs","EmptyHeader","EmptyTitle","EmptyDescription","Fragment","DescriptionList","p","i","DescriptionListItem","DescriptionListLabel","DescriptionListValue","SheetDetails","open","defaultOpen","onOpenChange","title","side","actions","trigger","portalContainer","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetCloseButton","SheetBody","SheetFooter"],"mappings":";;;;;AAyEA,SAASA,EAAiB;AAAA,EACxB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACF,GASG;AACD,MAAIN,MAAiB;AACnB,6BACG,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAO,EAACC,KAAQ,GACX;AAGJ,MAAIR,MAAiB,WAAWA,MAAiB,SAAS;AACxD,UAAMS,IAAUT,MAAiB;AACjC,WACE,gBAAAO,EAACG,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAA,EACE,UAAAJ,IACIJ,KAAc,yBACdF,KAAc,mBACrB;AAAA,wBACCW,GAAA,EACE,UAAAL,IACIH,KAAoB,qCACpBF,KAAoB,uCAAA,CAC3B;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACA,SAAIF,IAAiB,gBAAAK,EAAAQ,GAAA,EAAG,UAAAb,EAAA,CAAS,IAC7BD,KAAA,QAAAA,EAAY,SAKZ,gBAAAM;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,4BAA4B,OAAA;AAAA,MAEpC,YAAW,IAAI,CAACC,GAAGC,wBACjBC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAZ,EAACa,GAAA,EAAqB,WAAU,yBAC7B,UAAAH,EAAE,OACL;AAAA,QACA,gBAAAV,EAACc,GAAA,EAAqB,WAAU,eAC7B,YAAE,MAAA,CACL;AAAA,MAAA,EAAA,GANwBH,CAO1B,CACD;AAAA,IAAA;AAAA,EAAA,IAIA;AACT;AAEA,SAASI,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAA3B,IAAe;AAAA,EACf,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAA0B;AAAA,EACA,SAAAC;AAAA,EACA,YAAA1B;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAwB;AACF,GAAsB;AACpB,SACE,gBAAAnB,EAACoB,GAAA,EAAM,MAAAR,GAAY,aAAAC,GAA0B,cAAAC,GAC1C,UAAA;AAAA,IAAAI,IAAU,gBAAAtB,EAACyB,GAAA,EAAa,QAAQH,EAAA,CAAS,IAAK;AAAA,IAC/C,gBAAAlB,EAACsB,GAAA,EAAa,MAAAN,GAAY,iBAAAG,GACxB,UAAA;AAAA,MAAA,gBAAAnB,EAACuB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAA3B,EAAC4B,KAAY,UAAAT,EAAA,CAAM;AAAA,0BAClBU,GAAA,CAAA,CAAiB;AAAA,MAAA,GACpB;AAAA,wBACCC,GAAA,EACC,UAAA,gBAAA9B;AAAA,QAACR;AAAA,QAAA;AAAA,UACC,cAAAC;AAAA,UACA,YAAAC;AAAA,UACA,YAAAE;AAAA,UACA,kBAAAC;AAAA,UACA,YAAAC;AAAA,UACA,kBAAAC;AAAA,UAEC,UAAAJ;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACC0B,IAAU,gBAAArB,EAAC+B,GAAA,EAAa,UAAAV,EAAA,CAAQ,IAAiB;AAAA,IAAA,EAAA,CACpD;AAAA,EAAA,GACF;AAEJ;AACAN,EAAa,cAAc;"}

package/dist/components/ui/sheet/sheet.js

@@ -0,0 +1,138 @@
+import { jsx as r, jsxs as n, Fragment as u } from "react/jsx-runtime";
+import * as d from "react";
+import { Dialog as a } from "@base-ui/react/dialog";
+import { TimesIcon as b } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as s } from "../../../lib/utils.js";
+const x = g(
+  "fixed z-50 flex flex-col overflow-hidden bg-muted text-foreground shadow-lg duration-300 data-[open]:animate-in data-[closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 max-h-[80vh] border-b border-border data-[open]:slide-in-from-top data-[closed]:slide-out-to-top",
+        bottom: "inset-x-0 bottom-0 max-h-[80vh] border-t border-border data-[open]:slide-in-from-bottom data-[closed]:slide-out-to-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r border-border data-[open]:slide-in-from-left data-[closed]:slide-out-to-left sm:max-w-md",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l border-border data-[open]:slide-in-from-right data-[closed]:slide-out-to-right sm:max-w-md"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+), j = a.Root, z = a.Trigger, F = a.Portal, H = a.Close, l = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  a.Backdrop,
+  {
+    ref: t,
+    className: s(
+      "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",
+      e
+    ),
+    ...o
+  }
+));
+l.displayName = "SheetOverlay";
+const y = d.forwardRef(
+  ({
+    className: e,
+    children: o,
+    side: t,
+    portal: m = !0,
+    portalContainer: f,
+    keepMounted: c,
+    ...p
+  }, h) => {
+    const i = /* @__PURE__ */ n(u, { children: [
+      /* @__PURE__ */ r(l, {}),
+      /* @__PURE__ */ r(
+        a.Popup,
+        {
+          ref: h,
+          className: s(x({ side: t }), e),
+          ...p,
+          children: o
+        }
+      )
+    ] });
+    return m ? /* @__PURE__ */ r(a.Portal, { container: f, keepMounted: c, children: i }) : i;
+  }
+);
+y.displayName = "SheetContent";
+const S = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: t,
+    className: s(
+      "flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-5 py-4",
+      e
+    ),
+    ...o
+  }
+));
+S.displayName = "SheetHeader";
+const v = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: t,
+    className: s(
+      "flex h-16 shrink-0 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4",
+      e
+    ),
+    ...o
+  }
+));
+v.displayName = "SheetFooter";
+const N = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r("div", { ref: t, className: s("flex-1 overflow-auto p-6", e), ...o }));
+N.displayName = "SheetBody";
+const w = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  a.Title,
+  {
+    ref: t,
+    className: s(
+      "flex-1 text-lg font-semibold leading-7 text-foreground",
+      e
+    ),
+    ...o
+  }
+));
+w.displayName = "SheetTitle";
+const R = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  a.Description,
+  {
+    ref: t,
+    className: s("text-sm text-muted-foreground", e),
+    ...o
+  }
+));
+R.displayName = "SheetDescription";
+const C = d.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ n(
+  a.Close,
+  {
+    ref: t,
+    className: s(
+      "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",
+      e
+    ),
+    ...o,
+    children: [
+      /* @__PURE__ */ r(b, { size: 24 }),
+      /* @__PURE__ */ r("span", { className: "sr-only", children: "Close" })
+    ]
+  }
+));
+C.displayName = "SheetCloseButton";
+export {
+  j as Sheet,
+  N as SheetBody,
+  H as SheetClose,
+  C as SheetCloseButton,
+  y as SheetContent,
+  R as SheetDescription,
+  v as SheetFooter,
+  S as SheetHeader,
+  l as SheetOverlay,
+  F as SheetPortal,
+  w as SheetTitle,
+  z as SheetTrigger,
+  x as sheetVariants
+};
+//# sourceMappingURL=sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `sheet`\n// (packages/ui-legacy/src/components/ui/sheet.tsx). A modal side panel — the\n// same Base UI Dialog primitive the `Dialog` component uses (keyboard, focus\n// trap, scroll lock, ARIA come from Base UI), but anchored to a screen edge with\n// a slide transition. In the Vue kit this was `Details`; it's re-exported under\n// `Details*` aliases for a 1:1 drop-in. No `--ui-sheet-*` token tier exists yet,\n// so this design-pending v1 mirrors the Dialog family's semantic theming:\n//   • overlay  -> var(--ui-background-overlay-primary)\n//   • panel    -> bg-muted        = --ui-background-surface-secondary\n//   • header / footer -> bg-background = --ui-background-surface-primary bars,\n//     divided by border-border\n//   • title    -> text-foreground / description -> text-muted-foreground\n//   • close    -> text-muted-foreground → hover text-foreground, focus ring\n//     var(--ui-focus-primary)\n// Enter/exit slide animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes. Reconcile\n// against the real design with `/figma-component Sheet <url> --update`\n// (Cyber-Compliance node 3442-31542) once the mockup is ready for dev.\n\nconst sheetVariants = cva(\n  'fixed z-50 flex flex-col overflow-hidden bg-muted text-foreground shadow-lg duration-300 data-[open]:animate-in data-[closed]:animate-out',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 max-h-[80vh] border-b border-border data-[open]:slide-in-from-top data-[closed]:slide-out-to-top',\n        bottom:\n          'inset-x-0 bottom-0 max-h-[80vh] border-t border-border data-[open]:slide-in-from-bottom data-[closed]:slide-out-to-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[open]:slide-in-from-left data-[closed]:slide-out-to-left sm:max-w-md',\n        right:\n          'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[open]:slide-in-from-right data-[closed]:slide-out-to-right sm:max-w-md',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  }\n);\n\nconst Sheet = DialogPrimitive.Root;\n\nconst SheetTrigger = DialogPrimitive.Trigger;\n\nconst SheetPortal = DialogPrimitive.Portal;\n\nconst SheetClose = DialogPrimitive.Close;\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Backdrop>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      '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',\n      className\n    )}\n    {...props}\n  />\n));\nSheetOverlay.displayName = 'SheetOverlay';\n\nexport interface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n    VariantProps<typeof sheetVariants> {\n  /** Screen edge the panel anchors to. Defaults to `right`. */\n  side?: VariantProps<typeof sheetVariants>['side'];\n  /**\n   * Render the content inside a portal (default `true`). Base UI requires the\n   * Popup to sit in a Portal for correct stacking; set `false` for inline usage\n   * (e.g. when the caller supplies its own `SheetPortal`, or in tests).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: DialogPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: DialogPrimitive.Portal.Props['keepMounted'];\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Popup>,\n  SheetContentProps\n>(\n  (\n    {\n      className,\n      children,\n      side,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const popup = (\n      <>\n        <SheetOverlay />\n        <DialogPrimitive.Popup\n          ref={ref}\n          className={cn(sheetVariants({ side }), className)}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Popup>\n      </>\n    );\n\n    return portal ? (\n      <DialogPrimitive.Portal container={portalContainer} keepMounted={keepMounted}>\n        {popup}\n      </DialogPrimitive.Portal>\n    ) : (\n      popup\n    );\n  }\n);\nSheetContent.displayName = 'SheetContent';\n\nconst SheetHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-5 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nSheetHeader.displayName = 'SheetHeader';\n\nconst SheetFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 shrink-0 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nSheetFooter.displayName = 'SheetFooter';\n\nconst SheetBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex-1 overflow-auto p-6', className)} {...props} />\n));\nSheetBody.displayName = 'SheetBody';\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'flex-1 text-lg font-semibold leading-7 text-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nSheetTitle.displayName = 'SheetTitle';\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nSheetDescription.displayName = 'SheetDescription';\n\nconst SheetCloseButton = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Close\n    ref={ref}\n    className={cn(\n      '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',\n      className\n    )}\n    {...props}\n  >\n    <TimesIcon size={24} />\n    <span className=\"sr-only\">Close</span>\n  </DialogPrimitive.Close>\n));\nSheetCloseButton.displayName = 'SheetCloseButton';\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetPortal,\n  SheetClose,\n  SheetCloseButton,\n  SheetOverlay,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetBody,\n  SheetTitle,\n  SheetDescription,\n  sheetVariants,\n};\n"],"names":["sheetVariants","cva","Sheet","DialogPrimitive","SheetTrigger","SheetPortal","SheetClose","SheetOverlay","React","className","props","ref","jsx","cn","SheetContent","children","side","portal","portalContainer","keepMounted","popup","jsxs","Fragment","SheetHeader","SheetFooter","SheetBody","SheetTitle","SheetDescription","SheetCloseButton","TimesIcon"],"mappings":"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"}

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

@@ -38,10 +38,10 @@ const g = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
 ));
 g.displayName = "TableFooter";
 const h = t.forwardRef(
-  ({ className: a, selected: e, ...o }, i) => /* @__PURE__ */ l(
+  ({ className: a, selected: e, ...o }, s) => /* @__PURE__ */ l(
     "tr",
     {
-      ref: i,
+      ref: s,
       "data-state": e ? "selected" : void 0,
       className: r(
         "border-b border-[color:var(--ui-table-global-cell-border-color)] bg-[var(--ui-table-global-row-color-idle)] transition-colors hover:bg-[var(--ui-table-global-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-global-row-color-active)]",
@@ -57,13 +57,13 @@ function x({ direction: a }) {
   return a === "asc" ? /* @__PURE__ */ l(n, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : a === "desc" ? /* @__PURE__ */ l(m, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-active)]") }) : /* @__PURE__ */ l(f, { className: r(e, "text-[var(--ui-table-header-sort-icon-color-inactive)]") });
 }
 const w = t.forwardRef(
-  ({ className: a, children: e, sortable: o, sortDirection: i = !1, onSort: s, ...c }, d) => /* @__PURE__ */ l(
+  ({ className: a, children: e, sortable: o, sortDirection: s = !1, onSort: i, ...c }, d) => /* @__PURE__ */ l(
     "th",
     {
       ref: d,
-      "aria-sort": i === "asc" ? "ascending" : i === "desc" ? "descending" : o ? "none" : void 0,
+      "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : o ? "none" : void 0,
       className: r(
-        "h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:align-middle",
+        "h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0",
         o && "cursor-pointer transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)]",
         a
       ),
@@ -72,11 +72,11 @@ const w = t.forwardRef(
         "button",
         {
           type: "button",
-          onClick: s,
+          onClick: i,
           className: "-mx-1 inline-flex items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
           children: [
             e,
-            /* @__PURE__ */ l(x, { direction: i })
+            /* @__PURE__ */ l(x, { direction: s })
           ]
         }
       ) : e
@@ -89,7 +89,7 @@ const N = t.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
   {
     ref: o,
     className: r(
-      "h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:align-middle",
+      "h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0",
       a
     ),
     ...e

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives ported from `@acronis-platform/shadcn-uikit`'s\n// `table` (packages/ui-legacy/src/components/ui/table.tsx) and informed by the\n// \"pre-release\" Table design in the shadcn-uikit Figma (node 2948-2416). Unlike\n// Card/Dialog, a `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell   -> --ui-table-global-cell-{border-color,padding-x,padding-y,min-height}\n//   • row    -> --ui-table-global-row-color-{idle,hover,active}  (active = selected)\n//   • header -> --ui-table-header-{label-color,cell-color-hover,cell-padding-x,gap}\n//   • sort   -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • data   -> --ui-table-data-value-color-{idle,disabled}\n// The design's row checkboxes, tags, links and the column-settings button are\n// consumer composition (use Checkbox / Tag / Link / ButtonIcon in cells). A\n// TanStack-backed `DataTable` (sorting/selection logic over these primitives) is\n// a planned follow-up, mirroring legacy's separate `data-table`. Reconcile with\n// `/figma-component Table <url> --update` once the design is ready for dev.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-[color:var(--ui-table-global-cell-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b border-[color:var(--ui-table-global-cell-border-color)] bg-[var(--ui-table-global-row-color-idle)] transition-colors hover:bg-[var(--ui-table-global-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-global-row-color-active)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, children, sortable, sortDirection = false, onSort, ...props }, ref) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:align-middle',\n        sortable &&\n          'cursor-pointer transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"-mx-1 inline-flex items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:align-middle',\n      className\n    )}\n    {...props}\n  />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","jsxs","TableCell","TableCaption"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives ported from `@acronis-platform/shadcn-uikit`'s\n// `table` (packages/ui-legacy/src/components/ui/table.tsx) and informed by the\n// \"pre-release\" Table design in the shadcn-uikit Figma (node 2948-2416). Unlike\n// Card/Dialog, a `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell   -> --ui-table-global-cell-{border-color,padding-x,padding-y,min-height}\n//   • row    -> --ui-table-global-row-color-{idle,hover,active}  (active = selected)\n//   • header -> --ui-table-header-{label-color,cell-color-hover,cell-padding-x,gap}\n//   • sort   -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • data   -> --ui-table-data-value-color-{idle,disabled}\n// The design's row checkboxes, tags, links and the column-settings button are\n// consumer composition (use Checkbox / Tag / Link / ButtonIcon in cells). A\n// TanStack-backed `DataTable` (sorting/selection logic over these primitives) is\n// a planned follow-up, mirroring legacy's separate `data-table`. Reconcile with\n// `/figma-component Table <url> --update` once the design is ready for dev.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-[color:var(--ui-table-global-cell-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b border-[color:var(--ui-table-global-cell-border-color)] bg-[var(--ui-table-global-row-color-idle)] transition-colors hover:bg-[var(--ui-table-global-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-global-row-color-active)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, children, sortable, sortDirection = false, onSort, ...props }, ref) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'h-10 px-[var(--ui-table-header-cell-padding-x)] text-left align-middle text-sm font-semibold text-[var(--ui-table-header-label-color)] [&:has([role=checkbox])]:pr-0',\n        sortable &&\n          'cursor-pointer transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"-mx-1 inline-flex items-center gap-[var(--ui-table-header-gap)] rounded-sm px-1 outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'h-10 px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm [&:has([role=checkbox])]:pr-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","SortIcon","direction","size","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon","TableHead","children","sortable","sortDirection","onSort","jsxs","TableCell","TableCaption"],"mappings":"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"}