@acronis-platform/ui-react 1.0.0 → 3.0.0

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

@@ -1,92 +1,168 @@
-import * as o from "react";
-import { mergeProps as t } from "@base-ui/react/merge-props";
-import { useRender as s } from "@base-ui/react/use-render";
-import { cn as p } from "../../../lib/utils.js";
-const m = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
+import { jsxs as c, Fragment as D, jsx as r } from "react/jsx-runtime";
+import * as i from "react";
+import { mergeProps as s } from "@base-ui/react/merge-props";
+import { useRender as d } from "@base-ui/react/use-render";
+import { cva as E } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { HandleGripIcon as P, PencilIcon as B } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as n } from "../../../lib/utils.js";
+import { useAccordionContainerContext as G, AccordionContainer as S } from "../accordion-container/accordion-container.js";
+import { Switch as q } from "../switch/switch.js";
+import { Avatar as J, AvatarFallback as K } from "../avatar/avatar.js";
+import { ButtonIconInput as L } from "../button-icon-input/button-icon-input.js";
+import { buttonIconVariants as M } from "../button-icon/button-icon.js";
+const O = E(
+  "overflow-hidden rounded-lg border bg-[var(--ui-background-surface-primary)] text-[var(--ui-text-on-surface-primary)] shadow-xs",
+  {
+    variants: {
+      hasError: {
+        false: "border-[var(--ui-border-on-surface-border)]",
+        true: "border-[var(--ui-border-on-surface-border-error)]"
+      }
+    },
+    defaultVariants: {
+      hasError: !1
+    }
+  }
+), Q = i.forwardRef(
+  ({ className: a, hasError: e, render: o, ...t }, l) => d({
+    render: o,
+    ref: l,
     defaultTagName: "div",
-    props: t(
-      {
-        className: p(
-          "rounded-lg border border-border bg-background text-foreground shadow-xs",
-          e
-        )
-      },
-      r
+    props: s(
+      { className: n(O({ hasError: e }), a) },
+      t
     )
   })
 );
-m.displayName = "Card";
-const f = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
+Q.displayName = "Card";
+const U = i.forwardRef(
+  ({
+    className: a,
+    title: e,
+    description: o,
+    hasDescription: t = !1,
+    isDraggable: l = !1,
+    dragHandleLabel: m = "Reorder",
+    isSwitchable: p = !1,
+    switchChecked: u,
+    defaultSwitchChecked: h,
+    onSwitchCheckedChange: v,
+    switchDisabled: x,
+    switchLabel: b = "Toggle card",
+    hasAvatar: g = !1,
+    avatarLabel: N = "",
+    avatar: C,
+    hasRename: w = !1,
+    onRename: k,
+    renameLabel: y = "Rename",
+    extras: R,
+    actions: A,
+    isCollapsible: f = !1,
+    collapseLabel: T = "Collapse card",
+    render: I,
+    children: F,
+    ...j
+  }, H) => {
+    const { collapsible: V, open: z } = G();
+    return d({
+      render: I,
+      ref: H,
+      defaultTagName: "div",
+      props: s(
+        {
+          className: n(
+            "flex w-full shrink-0 items-center gap-2 overflow-hidden border-[var(--ui-border-on-surface-divider)] px-4 py-2",
+            !(f && V && !z) && "border-b",
+            a
+          ),
+          children: /* @__PURE__ */ c(D, { children: [
+            l && /* @__PURE__ */ r(
+              P,
+              {
+                size: 16,
+                className: "shrink-0 cursor-grab text-[var(--ui-text-on-surface-secondary)]",
+                title: m
+              }
+            ),
+            p && /* @__PURE__ */ r(
+              q,
+              {
+                checked: u,
+                defaultChecked: h,
+                onCheckedChange: v,
+                disabled: x,
+                "aria-label": b,
+                className: "shrink-0"
+              }
+            ),
+            g && (C ?? /* @__PURE__ */ r(J, { color: "blue", className: "shrink-0", children: /* @__PURE__ */ r(K, { children: N }) })),
+            /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col items-start justify-center gap-0.5", children: [
+              /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+                e && /* @__PURE__ */ r("p", { className: "truncate text-lg leading-6 font-normal text-[var(--ui-text-on-surface-primary)]", children: e }),
+                w && /* @__PURE__ */ r(
+                  L,
+                  {
+                    variant: "normal",
+                    onClick: k,
+                    "aria-label": y,
+                    children: /* @__PURE__ */ r(B, { size: 16 })
+                  }
+                ),
+                R
+              ] }),
+              t && /* @__PURE__ */ r("p", { className: "w-full truncate text-xs leading-4 text-[var(--ui-text-on-surface-secondary)]", children: o })
+            ] }),
+            F,
+            A,
+            f && /* @__PURE__ */ r(
+              S.Trigger,
+              {
+                "aria-label": T,
+                className: M({ variant: "ghost" })
+              }
+            )
+          ] })
+        },
+        j
+      )
+    });
+  }
+);
+U.displayName = "CardHeader";
+const W = i.forwardRef(
+  ({ className: a, render: e, ...o }, t) => d({
+    render: e,
+    ref: t,
     defaultTagName: "div",
-    props: t(
-      { className: p("flex flex-col space-y-1.5 p-6", e) },
-      r
+    props: s(
+      { className: n("flex w-full flex-col px-4 pb-4", a) },
+      o
     )
   })
 );
-f.displayName = "CardHeader";
-const l = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
+W.displayName = "CardContent";
+const X = i.forwardRef(
+  ({ className: a, render: e, ...o }, t) => d({
+    render: e,
+    ref: t,
     defaultTagName: "div",
-    props: t(
+    props: s(
       {
-        className: p(
-          "text-2xl font-semibold leading-none tracking-tight",
-          e
+        className: n(
+          "flex w-full shrink-0 items-start gap-4 overflow-hidden border-t border-[var(--ui-border-on-surface-divider)] p-4",
+          a
         )
       },
-      r
-    )
-  })
-);
-l.displayName = "CardTitle";
-const i = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
-    defaultTagName: "div",
-    props: t(
-      { className: p("text-sm text-muted-foreground", e) },
-      r
-    )
-  })
-);
-i.displayName = "CardDescription";
-const n = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
-    defaultTagName: "div",
-    props: t({ className: p("p-6 pt-0", e) }, r)
-  })
-);
-n.displayName = "CardContent";
-const c = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
-    defaultTagName: "div",
-    props: t(
-      { className: p("flex items-center p-6 pt-0", e) },
-      r
+      o
     )
   })
 );
-c.displayName = "CardFooter";
+X.displayName = "CardFooter";
 export {
-  m as Card,
-  n as CardContent,
-  i as CardDescription,
-  c as CardFooter,
-  f as CardHeader,
-  l as CardTitle
+  Q as Card,
+  W as CardContent,
+  X as CardFooter,
+  U as CardHeader,
+  O as cardVariants
 };
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `card`\n// (packages/ui-legacy/src/components/ui/card.tsx). No \"ready for dev\" Figma node\n// exists yet, so this is a design-pending v1: there is no `--ui-card-*` token\n// tier, so the surface/text/border colors resolve to the shared **semantic**\n// tokens via the bridged Tailwind names in `src/styles/index.css`:\n//   • bg-background    → --ui-background-surface-primary   (legacy `bg-card`)\n//   • text-foreground  → --ui-text-on-surface-primary      (legacy `text-card-foreground`)\n//   • border-border    → --ui-border-on-surface-border      (legacy bare `border`)\n//   • text-muted-foreground → --ui-text-on-surface-secondary (description)\n// Geometry (radius, padding, gaps, shadow) is carried over verbatim from legacy.\n// Reconcile against the real design with `/figma-component Card <url> --update`\n// once a mockup lands — at which point an elevated-surface token may replace the\n// primary surface used for the card background.\n\ninterface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. render `CardTitle` as a heading. The component's props\n   * and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'rounded-lg border border-border bg-background text-foreground shadow-xs',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex flex-col space-y-1.5 p-6', className) },\n        props\n      ),\n    })\n);\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'text-2xl font-semibold leading-none tracking-tight',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('text-sm text-muted-foreground', className) },\n        props\n      ),\n    })\n);\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>({ className: cn('p-6 pt-0', className) }, props),\n    })\n);\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex items-center p-6 pt-0', className) },\n        props\n      ),\n    })\n);\nCardFooter.displayName = 'CardFooter';\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  type CardPartProps,\n};\n"],"names":["Card","React","className","render","props","ref","useRender","mergeProps","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;;AA6BA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAJ,EAAK,cAAc;AAEnB,MAAMS,IAAaR,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAK,EAAW,cAAc;AAEzB,MAAMC,IAAYT,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAM,EAAU,cAAc;AAExB,MAAMC,IAAkBV,EAAM;AAAA,EAC5B,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAO,EAAgB,cAAc;AAE9B,MAAMC,IAAcX,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE,EAAkB,EAAE,WAAWC,EAAG,YAAYN,CAAS,EAAA,GAAKE,CAAK;AAAA,EAAA,CACzE;AACL;AACAQ,EAAY,cAAc;AAE1B,MAAMC,IAAaZ,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,8BAA8BN,CAAS,EAAA;AAAA,MACvDE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAS,EAAW,cAAc;"}
+{"version":3,"file":"card.js","sources":["../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { HandleGripIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { PencilIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { ButtonIconInput } from '@/components/ui/button-icon-input';\nimport { Switch } from '@/components/ui/switch';\nimport { buttonIconVariants } from '@/components/ui/button-icon';\nimport {\n  AccordionContainer,\n  useAccordionContainerContext,\n} from '@/components/ui/accordion-container';\n\n// Figma node 10012:195993 (\"Card\"). The design's `isCollapsable` variant\n// (`false` / `true-expanded` / `true-collapsed`) is implemented by composing\n// `Card` with `AccordionContainer` (the shared disclosure primitive) rather\n// than a bespoke chevron/animation: wrap `CardContent`/`CardFooter` in\n// `AccordionContainer.Content` and set `CardHeader`'s `isCollapsible` to\n// render the trigger. The trigger is restyled with `buttonIconVariants({\n// variant: 'ghost' })` instead of `AccordionContainer.Trigger`'s own neutral\n// default — Figma's `ButtonCollapse` is a real ghost `ButtonIcon` instance\n// (confirmed via Code Connect metadata + its idle icon color resolving to\n// `--ui-button-icon-global-icon-color-idle`), not the accordion's plain\n// neutral chevron.\n// No dedicated `--ui-card-*` token tier exists for the root chrome (only the\n// unrelated `CardFilter` tier does) — the design references plain semantic\n// tokens for the surface/border/divider/text colors, so this stays on the\n// shared semantic tier rather than a component-local one.\n//\n// `hasHeader` / `hasBody` / `hasFooter` from Figma aren't reproduced as\n// booleans: this is a compound component (`Card` + `CardHeader` +\n// `CardContent` + `CardFooter`), so a part is simply omitted by the consumer\n// instead of hidden behind a flag — same pattern as the rest of this package\n// (see `breadcrumb.tsx`). `CardHeader`'s own feature toggles (`isDraggable`,\n// `isSwitchable`, `hasAvatar`, `hasRename`, `hasDescription`) stay as booleans\n// because each gates real interactive/content sub-parts with independent\n// payloads (a callback, a slot, a label), not a structural part swap.\n\nconst cardVariants = cva(\n  'overflow-hidden rounded-lg border bg-[var(--ui-background-surface-primary)] text-[var(--ui-text-on-surface-primary)] shadow-xs',\n  {\n    variants: {\n      hasError: {\n        false: 'border-[var(--ui-border-on-surface-border)]',\n        true: 'border-[var(--ui-border-on-surface-border-error)]',\n      },\n    },\n    defaultVariants: {\n      hasError: false,\n    },\n  }\n);\n\nexport interface CardProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. render `Card` as an `<article>`.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, hasError, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn(cardVariants({ hasError }), className) },\n        props\n      ),\n    })\n);\nCard.displayName = 'Card';\n\nexport interface CardHeaderProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** The card's title. Renders nothing when omitted. */\n  title?: string;\n  /** Helper text shown under the title; only rendered when `hasDescription`. */\n  description?: string;\n  /** Shows `description` below the title. */\n  hasDescription?: boolean;\n  /** Shows a drag handle at the start of the header, for reorderable lists. */\n  isDraggable?: boolean;\n  /** Accessible label for the drag handle. */\n  dragHandleLabel?: string;\n  /** Shows a toggle switch at the start of the header. */\n  isSwitchable?: boolean;\n  /** Controlled checked state of the header switch. */\n  switchChecked?: boolean;\n  /** Uncontrolled initial checked state of the header switch. */\n  defaultSwitchChecked?: boolean;\n  /** Fires when the header switch is toggled. */\n  onSwitchCheckedChange?: (checked: boolean) => void;\n  /** Disables the header switch. */\n  switchDisabled?: boolean;\n  /** Accessible label for the header switch. */\n  switchLabel?: string;\n  /** Shows an avatar before the title. */\n  hasAvatar?: boolean;\n  /** Initials shown in the default avatar; ignored if `avatar` is provided. */\n  avatarLabel?: string;\n  /** Replaces the default initials avatar with custom content. */\n  avatar?: React.ReactNode;\n  /** Shows a rename button next to the title. */\n  hasRename?: boolean;\n  /** Fires when the rename button is activated. */\n  onRename?: () => void;\n  /** Accessible label for the rename button. */\n  renameLabel?: string;\n  /** Extra content rendered inline next to the title (e.g. a tag or badge). */\n  extras?: React.ReactNode;\n  /** Actions rendered at the end of the header (e.g. a menu button). */\n  actions?: React.ReactNode;\n  /**\n   * Shows a disclosure trigger at the end of the header. Only has an effect\n   * when this header renders inside a collapsible `AccordionContainer` —\n   * see the collapsible composition example.\n   */\n  isCollapsible?: boolean;\n  /** Accessible label for the collapse trigger. */\n  collapseLabel?: string;\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition).\n   */\n  render?: useRender.RenderProp;\n}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  (\n    {\n      className,\n      title,\n      description,\n      hasDescription = false,\n      isDraggable = false,\n      dragHandleLabel = 'Reorder',\n      isSwitchable = false,\n      switchChecked,\n      defaultSwitchChecked,\n      onSwitchCheckedChange,\n      switchDisabled,\n      switchLabel = 'Toggle card',\n      hasAvatar = false,\n      avatarLabel = '',\n      avatar,\n      hasRename = false,\n      onRename,\n      renameLabel = 'Rename',\n      extras,\n      actions,\n      isCollapsible = false,\n      collapseLabel = 'Collapse card',\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { collapsible: inAccordion, open } = useAccordionContainerContext();\n    // Drop the divider whenever this header sits in a collapsed accordion\n    // panel — it otherwise doubles up against Card's own outer border once\n    // there's nothing visible below to separate it from. This doesn't check\n    // whether the panel actually has no visible content below (a sibling\n    // outside AccordionContainer.Content, or a CardFooter with its own\n    // border-t, can still mask a doubled divider in those cases).\n    const hideDivider = isCollapsible && inAccordion && !open;\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'flex w-full shrink-0 items-center gap-2 overflow-hidden border-[var(--ui-border-on-surface-divider)] px-4 py-2',\n            !hideDivider && 'border-b',\n            className\n          ),\n          children: (\n            <>\n              {isDraggable && (\n                <HandleGripIcon\n                  size={16}\n                  className=\"shrink-0 cursor-grab text-[var(--ui-text-on-surface-secondary)]\"\n                  title={dragHandleLabel}\n                />\n              )}\n              {isSwitchable && (\n                <Switch\n                  checked={switchChecked}\n                  defaultChecked={defaultSwitchChecked}\n                  onCheckedChange={onSwitchCheckedChange}\n                  disabled={switchDisabled}\n                  aria-label={switchLabel}\n                  className=\"shrink-0\"\n                />\n              )}\n              {hasAvatar &&\n                (avatar ?? (\n                  <Avatar color=\"blue\" className=\"shrink-0\">\n                    <AvatarFallback>{avatarLabel}</AvatarFallback>\n                  </Avatar>\n                ))}\n              <div className=\"flex min-w-0 flex-1 flex-col items-start justify-center gap-0.5\">\n                <div className=\"flex items-center gap-2\">\n                  {title && (\n                    <p className=\"truncate text-lg leading-6 font-normal text-[var(--ui-text-on-surface-primary)]\">\n                      {title}\n                    </p>\n                  )}\n                  {hasRename && (\n                    <ButtonIconInput\n                      variant=\"normal\"\n                      onClick={onRename}\n                      aria-label={renameLabel}\n                    >\n                      <PencilIcon size={16} />\n                    </ButtonIconInput>\n                  )}\n                  {extras}\n                </div>\n                {hasDescription && (\n                  <p className=\"w-full truncate text-xs leading-4 text-[var(--ui-text-on-surface-secondary)]\">\n                    {description}\n                  </p>\n                )}\n              </div>\n              {children}\n              {actions}\n              {isCollapsible && (\n                <AccordionContainer.Trigger\n                  aria-label={collapseLabel}\n                  className={buttonIconVariants({ variant: 'ghost' })}\n                />\n              )}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nCardHeader.displayName = 'CardHeader';\n\nexport interface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition).\n   */\n  render?: useRender.RenderProp;\n}\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex w-full flex-col px-4 pb-4', className) },\n        props\n      ),\n    })\n);\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'flex w-full shrink-0 items-start gap-4 overflow-hidden border-t border-[var(--ui-border-on-surface-divider)] p-4',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCardFooter.displayName = 'CardFooter';\n\nexport { Card, CardHeader, CardContent, CardFooter, cardVariants };\n"],"names":["cardVariants","cva","Card","React","className","hasError","render","props","ref","useRender","mergeProps","cn","CardHeader","title","description","hasDescription","isDraggable","dragHandleLabel","isSwitchable","switchChecked","defaultSwitchChecked","onSwitchCheckedChange","switchDisabled","switchLabel","hasAvatar","avatarLabel","avatar","hasRename","onRename","renameLabel","extras","actions","isCollapsible","collapseLabel","children","inAccordion","open","useAccordionContainerContext","jsxs","Fragment","jsx","HandleGripIcon","Switch","Avatar","AvatarFallback","ButtonIconInput","PencilIcon","AccordionContainer","buttonIconVariants","CardContent","CardFooter"],"mappings":";;;;;;;;;;;;AA0CA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ,GAaMC,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAC1CC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAGX,EAAa,EAAE,UAAAK,EAAA,CAAU,GAAGD,CAAS,EAAA;AAAA,MACrDG;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAL,EAAK,cAAc;AA2DnB,MAAMU,IAAaT,EAAM;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAS;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,aAAAC,IAAc;AAAA,IACd,iBAAAC,IAAkB;AAAA,IAClB,cAAAC,IAAe;AAAA,IACf,eAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,QAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,QAAA3B;AAAA,IACA,UAAA4B;AAAA,IACA,GAAG3B;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,aAAa2B,GAAa,MAAAC,EAAA,IAASC,EAAA;AAS3C,WAAO5B,EAAU;AAAA,MACf,QAAAH;AAAA,MACA,KAAAE;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOE;AAAA,QACL;AAAA,UACE,WAAWC;AAAA,YACT;AAAA,YACA,EAVYqB,KAAiBG,KAAe,CAACC,MAU7B;AAAA,YAChBhC;AAAA,UAAA;AAAA,UAEF,UACE,gBAAAkC,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAvB,KACC,gBAAAwB;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,gBACV,OAAOxB;AAAA,cAAA;AAAA,YAAA;AAAA,YAGVC,KACC,gBAAAsB;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,SAASvB;AAAA,gBACT,gBAAgBC;AAAA,gBAChB,iBAAiBC;AAAA,gBACjB,UAAUC;AAAA,gBACV,cAAYC;AAAA,gBACZ,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAGbC,MACEE,KACC,gBAAAc,EAACG,GAAA,EAAO,OAAM,QAAO,WAAU,YAC7B,UAAA,gBAAAH,EAACI,GAAA,EAAgB,UAAAnB,EAAA,CAAY,EAAA,CAC/B;AAAA,YAEJ,gBAAAa,EAAC,OAAA,EAAI,WAAU,mEACb,UAAA;AAAA,cAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,gBAAAzB,KACC,gBAAA2B,EAAC,KAAA,EAAE,WAAU,mFACV,UAAA3B,GACH;AAAA,gBAEDc,KACC,gBAAAa;AAAA,kBAACK;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,SAASjB;AAAA,oBACT,cAAYC;AAAA,oBAEZ,UAAA,gBAAAW,EAACM,GAAA,EAAW,MAAM,GAAA,CAAI;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGzBhB;AAAA,cAAA,GACH;AAAA,cACCf,KACC,gBAAAyB,EAAC,KAAA,EAAE,WAAU,gFACV,UAAA1B,EAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YACCoB;AAAA,YACAH;AAAA,YACAC,KACC,gBAAAQ;AAAA,cAACO,EAAmB;AAAA,cAAnB;AAAA,gBACC,cAAYd;AAAA,gBACZ,WAAWe,EAAmB,EAAE,SAAS,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACpD,EAAA,CAEJ;AAAA,QAAA;AAAA,QAGJzC;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAK,EAAW,cAAc;AAUzB,MAAMqC,IAAc9C,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,QAAAE,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,kCAAkCP,CAAS,EAAA;AAAA,MAC3DG;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACA0C,EAAY,cAAc;AAE1B,MAAMC,IAAa/C,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAE,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAP;AAAA,QAAA;AAAA,MACF;AAAA,MAEFG;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACA2C,EAAW,cAAc;"}

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

@@ -0,0 +1,111 @@
+import { jsxs as s, jsx as a, Fragment as C } from "react/jsx-runtime";
+import * as B from "react";
+import { mergeProps as V } from "@base-ui/react/merge-props";
+import { useRender as j } from "@base-ui/react/use-render";
+import { cva as n } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as m } from "../../../lib/utils.js";
+import { Card as R } from "../card/card.js";
+const S = n(
+  "flex w-full flex-col items-start justify-center gap-3",
+  {
+    variants: {
+      variant: {
+        slot: "px-4 pt-4",
+        tag: "px-4 pt-4",
+        list: "px-4 pt-4",
+        // Flush: the table's own rows own the horizontal inset.
+        "table-actions": "",
+        "card-primary": "px-4 pt-4",
+        "card-secondary": "px-4 pt-4"
+      },
+      hasBottomBorder: {
+        false: "",
+        true: "border-b border-[var(--ui-border-on-surface-divider)] pb-4"
+      }
+    },
+    defaultVariants: {
+      variant: "slot",
+      hasBottomBorder: !1
+    }
+  }
+), k = n("w-full", {
+  variants: {
+    surface: {
+      primary: "bg-[var(--ui-background-surface-primary)]",
+      secondary: "bg-[var(--ui-background-surface-secondary)]"
+    }
+  },
+  defaultVariants: {
+    surface: "primary"
+  }
+}), F = B.forwardRef(
+  ({
+    className: p,
+    variant: e = "slot",
+    hasBottomBorder: u = !1,
+    hasHeader: x = !1,
+    title: y,
+    extras: g,
+    actions: b,
+    content: l,
+    contentTag: t,
+    contentList: i,
+    contentTable: d,
+    render: h,
+    children: o,
+    ...v
+  }, N) => {
+    const c = e === "table-actions", f = e === "card-primary" || e === "card-secondary", w = x ? /* @__PURE__ */ s(
+      "div",
+      {
+        className: m(
+          "flex w-full items-center gap-2",
+          // `table-actions` has no root inset, so the header re-applies it to
+          // stay aligned with the table cells below.
+          c && "px-4"
+        ),
+        children: [
+          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: [
+            /* @__PURE__ */ a("p", { className: "truncate text-sm leading-6 font-medium text-[var(--ui-text-on-surface-primary)]", children: y }),
+            g
+          ] }),
+          b
+        ]
+      }
+    ) : null;
+    let r = null;
+    return f ? r = /* @__PURE__ */ a(
+      R,
+      {
+        className: k({
+          surface: e === "card-secondary" ? "secondary" : "primary"
+        }),
+        children: o
+      }
+    ) : e === "tag" ? r = t ? /* @__PURE__ */ a("div", { className: "flex w-full flex-wrap items-start gap-x-4 gap-y-2", children: t }) : null : e === "list" ? r = i ? /* @__PURE__ */ a("div", { className: "flex w-full flex-col", children: i }) : null : c ? r = d ? /* @__PURE__ */ a("div", { className: "flex w-full flex-col overflow-hidden rounded", children: d }) : null : r = l ? /* @__PURE__ */ a("div", { className: "w-full", children: l }) : null, j({
+      render: h,
+      ref: N,
+      defaultTagName: "div",
+      props: V(
+        {
+          className: m(
+            S({ variant: e, hasBottomBorder: u }),
+            p
+          ),
+          children: /* @__PURE__ */ s(C, { children: [
+            w,
+            r,
+            !f && o
+          ] })
+        },
+        v
+      )
+    });
+  }
+);
+F.displayName = "CardSection";
+export {
+  F as CardSection,
+  S as cardSectionVariants
+};
+//# sourceMappingURL=card-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-section.js","sources":["../../../../src/components/ui/card-section/card-section.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Card } from '@/components/ui/card';\n\n// Figma node 7662:8727 (\"CardSection\"). A band of content that stacks inside a\n// `Card`'s body, below `CardHeader`. Figma's PascalCase variant names map to\n// this repo's kebab-case convention: `Slot` → `slot`, `Tag` → `tag`,\n// `List` → `list`, `Table + Actions` → `table-actions`,\n// `Card (primary)` → `card-primary`, `Card (secondary)` → `card-secondary`.\n//\n// Padding is variant-dependent, straight from the design: every variant except\n// `table-actions` insets its content (`px-4 pt-4`), while `table-actions` sits\n// flush so its table rows can run edge-to-edge inside the card — its own header\n// row re-applies the `px-4` instead. `hasBottomBorder` adds the divider plus the\n// matching bottom padding that separates this section from the next one below.\n//\n// `card-primary` / `card-secondary` differ in exactly one thing: the nested\n// `Card`'s surface token. Everything else — border, radius, composition — is\n// identical, so the two are a single cva branch pair rather than a separate\n// prop. Both branches set their surface token explicitly (rather than\n// relying on `Card`'s own primary default) so the pair stays correct even\n// if that default ever changes.\n//\n// No `--ui-card-*` component tier exists in tokens-pd, so — like `card.tsx` —\n// this stays on the shared semantic tier. Figma's default `contentList`\n// (a `ListItem` instance) references `components/Card/body/section/item/*`\n// variables that have no counterpart in `@acronis-platform/design-tokens`, so\n// `list` ships without a built-in fallback: the consumer supplies the rows.\n\nconst cardSectionVariants = cva(\n  'flex w-full flex-col items-start justify-center gap-3',\n  {\n    variants: {\n      variant: {\n        slot: 'px-4 pt-4',\n        tag: 'px-4 pt-4',\n        list: 'px-4 pt-4',\n        // Flush: the table's own rows own the horizontal inset.\n        'table-actions': '',\n        'card-primary': 'px-4 pt-4',\n        'card-secondary': 'px-4 pt-4',\n      },\n      hasBottomBorder: {\n        false: '',\n        true: 'border-b border-[var(--ui-border-on-surface-divider)] pb-4',\n      },\n    },\n    defaultVariants: {\n      variant: 'slot',\n      hasBottomBorder: false,\n    },\n  }\n);\n\nconst nestedCardVariants = cva('w-full', {\n  variants: {\n    surface: {\n      primary: 'bg-[var(--ui-background-surface-primary)]',\n      secondary: 'bg-[var(--ui-background-surface-secondary)]',\n    },\n  },\n  defaultVariants: {\n    surface: 'primary',\n  },\n});\n\nexport interface CardSectionBaseProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'>,\n    VariantProps<typeof cardSectionVariants> {\n  /** Extra content rendered inline next to the section title (e.g. a tag). */\n  extras?: React.ReactNode;\n  /** Actions rendered at the end of the section header row (e.g. a menu button). */\n  actions?: React.ReactNode;\n  /** Body of the `slot` variant — arbitrary passthrough content. */\n  content?: React.ReactNode;\n  /**\n   * Body of the `tag` variant — a wrapping row of tags. Has no built-in\n   * default: like `contentList`, the consumer supplies the tags.\n   */\n  contentTag?: React.ReactNode;\n  /**\n   * Body of the `list` variant — title/description key-value rows. Has no\n   * built-in default: the `ListItem` tokens the design references\n   * (`--ui-card-body-section-item-*`) do not exist in tokens-pd yet.\n   */\n  contentList?: React.ReactNode;\n  /** Body of the `table-actions` variant — a table with row actions. */\n  contentTable?: React.ReactNode;\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. render the section as a `<section>`.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * A band of content stacked inside a `Card`'s body.\n *\n * `hasHeader` and `title` form a discriminated union: turning the section's own\n * mini-header on requires a title, because the header row always renders one.\n */\nexport type CardSectionProps = CardSectionBaseProps &\n  (\n    | {\n        /** Shows the section's own mini-header row (14px, distinct from `CardHeader`). */\n        hasHeader: true;\n        /** The section header's title. Required whenever `hasHeader` is set. */\n        title: string;\n      }\n    | { hasHeader?: false; title?: never }\n  );\n\nconst CardSection = React.forwardRef<HTMLDivElement, CardSectionProps>(\n  (\n    {\n      className,\n      variant = 'slot',\n      hasBottomBorder = false,\n      hasHeader = false,\n      title,\n      extras,\n      actions,\n      content,\n      contentTag,\n      contentList,\n      contentTable,\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isTable = variant === 'table-actions';\n    const isNestedCard =\n      variant === 'card-primary' || variant === 'card-secondary';\n\n    const header = hasHeader ? (\n      <div\n        className={cn(\n          'flex w-full items-center gap-2',\n          // `table-actions` has no root inset, so the header re-applies it to\n          // stay aligned with the table cells below.\n          isTable && 'px-4'\n        )}\n      >\n        <div className=\"flex min-w-0 flex-1 items-start gap-2\">\n          <p className=\"truncate text-sm leading-6 font-medium text-[var(--ui-text-on-surface-primary)]\">\n            {title}\n          </p>\n          {extras}\n        </div>\n        {actions}\n      </div>\n    ) : null;\n\n    let body: React.ReactNode = null;\n    if (isNestedCard) {\n      body = (\n        <Card\n          className={nestedCardVariants({\n            surface: variant === 'card-secondary' ? 'secondary' : 'primary',\n          })}\n        >\n          {children}\n        </Card>\n      );\n    } else if (variant === 'tag') {\n      body = contentTag ? (\n        <div className=\"flex w-full flex-wrap items-start gap-x-4 gap-y-2\">\n          {contentTag}\n        </div>\n      ) : null;\n    } else if (variant === 'list') {\n      body = contentList ? (\n        <div className=\"flex w-full flex-col\">{contentList}</div>\n      ) : null;\n    } else if (isTable) {\n      body = contentTable ? (\n        <div className=\"flex w-full flex-col overflow-hidden rounded\">\n          {contentTable}\n        </div>\n      ) : null;\n    } else {\n      body = content ? <div className=\"w-full\">{content}</div> : null;\n    }\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            cardSectionVariants({ variant, hasBottomBorder }),\n            className\n          ),\n          children: (\n            <>\n              {header}\n              {body}\n              {!isNestedCard && children}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nCardSection.displayName = 'CardSection';\n\nexport { CardSection, cardSectionVariants };\n"],"names":["cardSectionVariants","cva","nestedCardVariants","CardSection","React","className","variant","hasBottomBorder","hasHeader","title","extras","actions","content","contentTag","contentList","contentTable","render","children","props","ref","isTable","isNestedCard","header","jsxs","cn","jsx","body","Card","useRender","mergeProps","Fragment"],"mappings":";;;;;;;AAiCA,MAAMA,IAAsBC;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,iBAAiB;AAAA,QACjB,gBAAgB;AAAA,QAChB,kBAAkB;AAAA,MAAA;AAAA,MAEpB,iBAAiB;AAAA,QACf,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,GAEMC,IAAqBD,EAAI,UAAU;AAAA,EACvC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EACb;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAiDKE,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,iBAAAC,IAAkB;AAAA,IAClB,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUd,MAAY,iBACtBe,IACJf,MAAY,kBAAkBA,MAAY,kBAEtCgB,IAASd,IACb,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA;AAAA;AAAA,UAGAJ,KAAW;AAAA,QAAA;AAAA,QAGb,UAAA;AAAA,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,YAAA,gBAAAE,EAAC,KAAA,EAAE,WAAU,mFACV,UAAAhB,GACH;AAAA,YACCC;AAAA,UAAA,GACH;AAAA,UACCC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAED;AAEJ,QAAIe,IAAwB;AAC5B,WAAIL,IACFK,IACE,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAWzB,EAAmB;AAAA,UAC5B,SAASI,MAAY,mBAAmB,cAAc;AAAA,QAAA,CACvD;AAAA,QAEA,UAAAW;AAAA,MAAA;AAAA,IAAA,IAGIX,MAAY,QACrBoB,IAAOb,IACL,gBAAAY,EAAC,OAAA,EAAI,WAAU,qDACZ,aACH,IACE,OACKnB,MAAY,SACrBoB,IAAOZ,IACL,gBAAAW,EAAC,OAAA,EAAI,WAAU,wBAAwB,aAAY,IACjD,OACKL,IACTM,IAAOX,IACL,gBAAAU,EAAC,OAAA,EAAI,WAAU,gDACZ,aACH,IACE,OAEJC,IAAOd,IAAU,gBAAAa,EAAC,OAAA,EAAI,WAAU,UAAU,aAAQ,IAAS,MAGtDG,EAAU;AAAA,MACf,QAAAZ;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOU;AAAA,QACL;AAAA,UACE,WAAWL;AAAA,YACTxB,EAAoB,EAAE,SAAAM,GAAS,iBAAAC,GAAiB;AAAA,YAChDF;AAAA,UAAA;AAAA,UAEF,UACE,gBAAAkB,EAAAO,GAAA,EACG,UAAA;AAAA,YAAAR;AAAA,YACAI;AAAA,YACA,CAACL,KAAgBJ;AAAA,UAAA,EAAA,CACpB;AAAA,QAAA;AAAA,QAGJC;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAf,EAAY,cAAc;"}

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

@@ -38,7 +38,7 @@ const g = [
         x
       ),
       ...s,
-      children: /* @__PURE__ */ e(h.Indicator, { className: "flex items-center justify-center text-current", children: c ? /* @__PURE__ */ e(v, { size: 16 }) : /* @__PURE__ */ e(u, { size: 16 }) })
+      children: /* @__PURE__ */ e(h.Indicator, { className: "flex items-center justify-center text-current", children: c ? /* @__PURE__ */ e(v, { size: 16, className: "text-current!" }) : /* @__PURE__ */ e(u, { size: 16, className: "text-current!" }) })
     }
   );
   return t ? /* @__PURE__ */ 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)]", children: [

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-y` (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-[3px] 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-y)]',\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;"}
+{"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-y` (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-[3px] 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-y)]',\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n        {indeterminate ? (\n          <MinusIcon size={16} className=\"text-current!\" />\n        ) : (\n          <CheckIcon size={16} className=\"text-current!\" />\n        )}\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,UAAA,gBAAAO,EAACC,EAAkB,WAAlB,EAA4B,WAAU,iDACpC,UAAAT,sBACEW,GAAA,EAAU,MAAM,IAAI,WAAU,iBAAgB,IAE/C,gBAAAH,EAACI,GAAA,EAAU,MAAM,IAAI,WAAU,iBAAgB,EAAA,CAEnD;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-bulk-actions-bar.js

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

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

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

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

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

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

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