@acronis-platform/ui-react 1.0.0 → 2.0.0

package/dist/components/ui/alert/alert.js

@@ -1,11 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as o from "react";
+import { jsx as e } from "react/jsx-runtime";
+import * as l from "react";
 import { cva as d } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { TimesIcon as g } from "@acronis-platform/icons-react/stroke-mono";
 import { DiamondWarningRedIcon as f, CircleWarningOrangeIcon as b, TriangleWarningYellowIcon as p, CircleCheckGreenIcon as u, CircleInfoBlueIcon as v } from "@acronis-platform/icons-react/stroke-multi";
-import { cn as l } from "../../../lib/utils.js";
-import { ButtonIcon as m } from "../button-icon/button-icon.js";
-const x = d(
+import { cn as o } from "../../../lib/utils.js";
+import { ButtonIcon as x } from "../button-icon/button-icon.js";
+const m = d(
   "relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid min-w-[var(--ui-alert-global-container-width-min)] gap-[var(--ui-alert-global-container-gap)] px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] rounded-[var(--ui-alert-global-container-border-radius)] border-[length:var(--ui-alert-global-container-border-width)] bg-[var(--ui-alert-global-container-background)] before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] before:w-[var(--ui-alert-global-container-status-width)]",
   {
     variants: {
@@ -27,118 +27,118 @@ const x = d(
   warning: p,
   critical: b,
   danger: f
-}, i = o.createContext("info"), y = o.forwardRef(
-  ({ className: r, variant: a, ...e }, n) => /* @__PURE__ */ t(i.Provider, { value: a ?? "info", children: /* @__PURE__ */ t(
+}, i = l.createContext("info"), y = l.forwardRef(
+  ({ className: t, variant: r, ...a }, n) => /* @__PURE__ */ e(i.Provider, { value: r ?? "info", children: /* @__PURE__ */ e(
     "div",
     {
       ref: n,
       role: "alert",
       "data-slot": "alert",
-      "data-variant": a ?? "info",
-      className: l(x({ variant: a }), r),
-      ...e
+      "data-variant": r ?? "info",
+      className: o(m({ variant: r }), t),
+      ...a
     }
   ) })
 );
 y.displayName = "Alert";
-const A = o.forwardRef(({ className: r, children: a, ...e }, n) => {
-  const c = o.useContext(i), s = w[c];
+const A = l.forwardRef(({ className: t, children: r, ...a }, n) => {
+  const c = l.useContext(i), s = w[c];
   return (
     // The icon box's padding (4/8) is what optically aligns the 16px glyph with
     // the first line of the title: glyph centre 8 + 8 = 16, title centre
     // (AlertText's 4px padding) 4 + 12 = 16.
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ e(
       "div",
       {
         ref: n,
         "data-slot": "alert-icon",
-        className: l(
+        className: o(
           "flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0",
-          r
+          t
         ),
-        ...e,
-        children: a ?? /* @__PURE__ */ t(s, { size: 16 })
+        ...a,
+        children: r ?? /* @__PURE__ */ e(s, { size: 16 })
       }
     )
   );
 });
 A.displayName = "AlertIcon";
-const h = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const N = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "div",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-content",
-    className: l(
+    className: o(
       "flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]",
-      r
+      t
     ),
-    ...a
+    ...r
   }
 ));
-h.displayName = "AlertContent";
-const N = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+N.displayName = "AlertContent";
+const h = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "div",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-text",
-    className: l(
+    className: o(
       "flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]",
-      r
+      t
     ),
-    ...a
+    ...r
   }
 ));
-N.displayName = "AlertText";
-const C = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+h.displayName = "AlertText";
+const C = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "h5",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-title",
-    className: l(
-      "ui-typography-headings-lead mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]",
-      r
+    className: o(
+      "ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]",
+      t
     ),
-    ...a
+    ...r
   }
 ));
 C.displayName = "AlertTitle";
-const I = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const I = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "p",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-description",
-    className: l(
+    className: o(
       "ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]",
-      r
+      t
     ),
-    ...a
+    ...r
   }
 ));
 I.displayName = "AlertDescription";
-const R = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const R = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "div",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-actions",
-    className: l(
+    className: o(
       "flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]",
-      r
+      t
     ),
-    ...a
+    ...r
   }
 ));
 R.displayName = "AlertActions";
-const k = o.forwardRef(
-  ({ className: r, ariaLabel: a = "Close", ...e }, n) => /* @__PURE__ */ t(
-    m,
+const k = l.forwardRef(
+  ({ className: t, ariaLabel: r = "Close", ...a }, n) => /* @__PURE__ */ e(
+    x,
     {
       ref: n,
       "data-slot": "alert-close",
-      className: l("shrink-0", r),
-      ...e,
+      className: o("shrink-0", t),
+      ...a,
       variant: "ghost",
-      "aria-label": a,
-      children: /* @__PURE__ */ t(g, {})
+      "aria-label": r,
+      children: /* @__PURE__ */ e(g, {})
     }
   )
 );
@@ -147,11 +147,11 @@ export {
   y as Alert,
   R as AlertActions,
   k as AlertClose,
-  h as AlertContent,
+  N as AlertContent,
   I as AlertDescription,
   A as AlertIcon,
-  N as AlertText,
+  h as AlertText,
   C as AlertTitle,
-  x as alertVariants
+  m as alertVariants
 };
 //# sourceMappingURL=alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon, type ButtonIconProps } from '../button-icon';\n\n// Mirrors the Figma \"Alert\" component set (node 7421:125155). The banner is a\n// *neutral* surface — not a status tint — with the severity carried by two\n// things: a 1px border in the status color and a 6px status line down the\n// leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-alert-*` tier (imported in `src/styles/index.css`).\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the generated classes: `ui-typography-headings-lead` for\n// the title (Inter Regular 18 / 24) and the Alert tier's own emitted class for the\n// description (Inter Regular 14 / 24) — the same pair Toast uses, since the two are\n// the same card. Only the *colors* are separate token references. Every other value\n// is a `var(--ui-alert-*)` reference, so a brand override is honored without\n// touching this file.\nconst alertVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'min-w-[var(--ui-alert-global-container-width-min)] ' +\n    'gap-[var(--ui-alert-global-container-gap)] ' +\n    'px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] ' +\n    'rounded-[var(--ui-alert-global-container-border-radius)] ' +\n    'border-[length:var(--ui-alert-global-container-border-width)] ' +\n    'bg-[var(--ui-alert-global-container-background)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-alert-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]',\n        success:\n          'border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type AlertVariant = NonNullable<\n  VariantProps<typeof alertVariants>['variant']\n>;\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so unlike the previous\n// monocolor port, nothing here tints them.\nconst STATUS_ICON: Record<AlertVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\nconst AlertVariantContext = React.createContext<AlertVariant>('info');\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\n/**\n * A status banner: neutral surface, a status-colored border, and a status line\n * down the leading edge. Compose it from `AlertIcon`, `AlertContent`\n * (`AlertText` + `AlertTitle` / `AlertDescription`, optionally `AlertActions`)\n * and `AlertClose`.\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant, ...props }, ref) => (\n    <AlertVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-slot=\"alert\"\n        data-variant={variant ?? 'info'}\n        className={cn(alertVariants({ variant }), className)}\n        {...props}\n      />\n    </AlertVariantContext.Provider>\n  )\n);\nAlert.displayName = 'Alert';\n\n/**\n * The leading status icon. Renders the variant's own icon when given no\n * `children`; pass children to substitute a different glyph.\n */\nconst AlertIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const variant = React.useContext(AlertVariantContext);\n  const StatusIcon = STATUS_ICON[variant];\n  return (\n    // The icon box's padding (4/8) is what optically aligns the 16px glyph with\n    // the first line of the title: glyph centre 8 + 8 = 16, title centre\n    // (AlertText's 4px padding) 4 + 12 = 16.\n    <div\n      ref={ref}\n      data-slot=\"alert-icon\"\n      className={cn(\n        'flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? <StatusIcon size={16} />}\n    </div>\n  );\n});\nAlertIcon.displayName = 'AlertIcon';\n\nconst AlertContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-content\"\n    className={cn(\n      'flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertContent.displayName = 'AlertContent';\n\n/**\n * The title + description block. Its own vertical padding is what keeps the\n * text aligned with the icon, so keep the title and description inside it\n * rather than directly under `AlertContent`.\n */\nconst AlertText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-text\"\n    className={cn(\n      'flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertText.displayName = 'AlertText';\n\nconst AlertTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn(\n      'ui-typography-headings-lead mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn(\n      'ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\n/**\n * Action buttons under the text. Place inside `AlertContent` (after\n * `AlertText`), as the Figma does — the row wraps when it runs out of width.\n */\nconst AlertActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-actions\"\n    className={cn(\n      'flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertActions.displayName = 'AlertActions';\n\n// The spec pins this control to a ghost ButtonIcon with a times glyph, so the\n// props that would change that are omitted from the type instead of merely being\n// defaulted — `...props` spreads after them, so keeping them would let\n// `<AlertClose variant=\"secondary\" />` silently win over the documented behavior.\n//\n// `aria-label` needs the belt *and* braces. Omitting it from the type is not\n// enough: TypeScript deliberately skips checking hyphenated JSX attributes (the\n// same rule that lets `data-*` through), so `<AlertClose aria-label=\"X\" />` still\n// compiles. Pinning `aria-label` after the spread is what actually makes\n// `ariaLabel` authoritative.\nexport interface AlertCloseProps\n  extends Omit<ButtonIconProps, 'children' | 'variant' | 'render' | 'aria-label'> {\n  /** Accessible name for the dismiss control. */\n  ariaLabel?: string;\n}\n\n/**\n * The trailing dismiss control. Rendering it is what makes an alert\n * dismissable — wire `onClick` to remove the alert. Name it with `ariaLabel`.\n */\nconst AlertClose = React.forwardRef<HTMLButtonElement, AlertCloseProps>(\n  ({ className, ariaLabel = 'Close', ...props }, ref) => (\n    <ButtonIcon\n      ref={ref}\n      data-slot=\"alert-close\"\n      className={cn('shrink-0', className)}\n      {...props}\n      variant=\"ghost\"\n      aria-label={ariaLabel}\n    >\n      <TimesIcon />\n    </ButtonIcon>\n  )\n);\nAlertClose.displayName = 'AlertClose';\n\nexport {\n  Alert,\n  AlertIcon,\n  AlertContent,\n  AlertText,\n  AlertTitle,\n  AlertDescription,\n  AlertActions,\n  AlertClose,\n  alertVariants,\n};\n"],"names":["alertVariants","cva","STATUS_ICON","CircleInfoBlueIcon","CircleCheckGreenIcon","TriangleWarningYellowIcon","CircleWarningOrangeIcon","DiamondWarningRedIcon","AlertVariantContext","React","Alert","className","variant","props","ref","jsx","cn","AlertIcon","children","StatusIcon","AlertContent","AlertText","AlertTitle","AlertDescription","AlertActions","AlertClose","ariaLabel","ButtonIcon","TimesIcon"],"mappings":"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"}
+{"version":3,"file":"alert.js","sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon, type ButtonIconProps } from '../button-icon';\n\n// Mirrors the Figma \"Alert\" component set (node 7421:125155). The banner is a\n// *neutral* surface — not a status tint — with the severity carried by two\n// things: a 1px border in the status color and a 6px status line down the\n// leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-alert-*` tier (imported in `src/styles/index.css`).\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the Alert tier's own emitted classes — the title (Inter\n// Regular 18 / 24) and the description (Inter Regular 14 / 24) — the same pair\n// Toast uses, since the two are the same card. The title previously borrowed the\n// semantic `ui-typography-headings-lead` because the tier emitted no title class;\n// it does now, and the two resolve identically today, so a brand that re-styles\n// only Alert's title is honored. Only the *colors* are separate token references.\n// Every other value is a `var(--ui-alert-*)` reference, so a brand override is\n// honored without touching this file.\nconst alertVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'min-w-[var(--ui-alert-global-container-width-min)] ' +\n    'gap-[var(--ui-alert-global-container-gap)] ' +\n    'px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] ' +\n    'rounded-[var(--ui-alert-global-container-border-radius)] ' +\n    'border-[length:var(--ui-alert-global-container-border-width)] ' +\n    'bg-[var(--ui-alert-global-container-background)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-alert-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]',\n        success:\n          'border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type AlertVariant = NonNullable<\n  VariantProps<typeof alertVariants>['variant']\n>;\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so unlike the previous\n// monocolor port, nothing here tints them.\nconst STATUS_ICON: Record<AlertVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\nconst AlertVariantContext = React.createContext<AlertVariant>('info');\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\n/**\n * A status banner: neutral surface, a status-colored border, and a status line\n * down the leading edge. Compose it from `AlertIcon`, `AlertContent`\n * (`AlertText` + `AlertTitle` / `AlertDescription`, optionally `AlertActions`)\n * and `AlertClose`.\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant, ...props }, ref) => (\n    <AlertVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-slot=\"alert\"\n        data-variant={variant ?? 'info'}\n        className={cn(alertVariants({ variant }), className)}\n        {...props}\n      />\n    </AlertVariantContext.Provider>\n  )\n);\nAlert.displayName = 'Alert';\n\n/**\n * The leading status icon. Renders the variant's own icon when given no\n * `children`; pass children to substitute a different glyph.\n */\nconst AlertIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const variant = React.useContext(AlertVariantContext);\n  const StatusIcon = STATUS_ICON[variant];\n  return (\n    // The icon box's padding (4/8) is what optically aligns the 16px glyph with\n    // the first line of the title: glyph centre 8 + 8 = 16, title centre\n    // (AlertText's 4px padding) 4 + 12 = 16.\n    <div\n      ref={ref}\n      data-slot=\"alert-icon\"\n      className={cn(\n        'flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? <StatusIcon size={16} />}\n    </div>\n  );\n});\nAlertIcon.displayName = 'AlertIcon';\n\nconst AlertContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-content\"\n    className={cn(\n      'flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertContent.displayName = 'AlertContent';\n\n/**\n * The title + description block. Its own vertical padding is what keeps the\n * text aligned with the icon, so keep the title and description inside it\n * rather than directly under `AlertContent`.\n */\nconst AlertText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-text\"\n    className={cn(\n      'flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertText.displayName = 'AlertText';\n\nconst AlertTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn(\n      'ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn(\n      'ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\n/**\n * Action buttons under the text. Place inside `AlertContent` (after\n * `AlertText`), as the Figma does — the row wraps when it runs out of width.\n */\nconst AlertActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-actions\"\n    className={cn(\n      'flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertActions.displayName = 'AlertActions';\n\n// The spec pins this control to a ghost ButtonIcon with a times glyph, so the\n// props that would change that are omitted from the type instead of merely being\n// defaulted — `...props` spreads after them, so keeping them would let\n// `<AlertClose variant=\"secondary\" />` silently win over the documented behavior.\n//\n// `aria-label` needs the belt *and* braces. Omitting it from the type is not\n// enough: TypeScript deliberately skips checking hyphenated JSX attributes (the\n// same rule that lets `data-*` through), so `<AlertClose aria-label=\"X\" />` still\n// compiles. Pinning `aria-label` after the spread is what actually makes\n// `ariaLabel` authoritative.\nexport interface AlertCloseProps\n  extends Omit<ButtonIconProps, 'children' | 'variant' | 'render' | 'aria-label'> {\n  /** Accessible name for the dismiss control. */\n  ariaLabel?: string;\n}\n\n/**\n * The trailing dismiss control. Rendering it is what makes an alert\n * dismissable — wire `onClick` to remove the alert. Name it with `ariaLabel`.\n */\nconst AlertClose = React.forwardRef<HTMLButtonElement, AlertCloseProps>(\n  ({ className, ariaLabel = 'Close', ...props }, ref) => (\n    <ButtonIcon\n      ref={ref}\n      data-slot=\"alert-close\"\n      className={cn('shrink-0', className)}\n      {...props}\n      variant=\"ghost\"\n      aria-label={ariaLabel}\n    >\n      <TimesIcon />\n    </ButtonIcon>\n  )\n);\nAlertClose.displayName = 'AlertClose';\n\nexport {\n  Alert,\n  AlertIcon,\n  AlertContent,\n  AlertText,\n  AlertTitle,\n  AlertDescription,\n  AlertActions,\n  AlertClose,\n  alertVariants,\n};\n"],"names":["alertVariants","cva","STATUS_ICON","CircleInfoBlueIcon","CircleCheckGreenIcon","TriangleWarningYellowIcon","CircleWarningOrangeIcon","DiamondWarningRedIcon","AlertVariantContext","React","Alert","className","variant","props","ref","jsx","cn","AlertIcon","children","StatusIcon","AlertContent","AlertText","AlertTitle","AlertDescription","AlertActions","AlertClose","ariaLabel","ButtonIcon","TimesIcon"],"mappings":"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"}

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;"}

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

@@ -1,27 +1,35 @@
 import { jsx as a } from "react/jsx-runtime";
-import * as l from "react";
-import { ChevronDownIcon as s } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as o } from "../../../lib/utils.js";
-function c({ row: e, className: t, ...n }, i) {
+import * as c from "react";
+import { ChevronDownIcon as d } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as t } from "../../../lib/utils.js";
+function p({
+  row: e,
+  collapseLabel: o = "Collapse row",
+  expandLabel: n = "Expand row",
+  className: i,
+  ...l
+}, s) {
   if (!e.getCanExpand()) return null;
   const r = e.getIsExpanded();
   return /* @__PURE__ */ a(
     "button",
     {
-      ref: i,
+      ref: s,
       type: "button",
       onClick: e.getToggleExpandedHandler(),
-      "aria-label": r ? "Collapse row" : "Expand row",
+      "aria-label": r ? o : n,
       "aria-expanded": r,
-      className: o(
-        "inline-flex size-6 cursor-pointer items-center justify-center rounded text-[var(--ui-table-data-value-color-idle)] 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-4 [&_svg]:shrink-0",
-        t
+      className: t(
+        // Lives in a data cell, so it tints from the data-cell tokens; the focus
+        // ring matches the kit-wide 3px treatment (Figma stroke/width-3).
+        "inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
+        i
       ),
-      ...n,
+      ...l,
       children: /* @__PURE__ */ a(
-        s,
+        d,
         {
-          className: o(
+          className: t(
             "transition-transform",
             !r && "ltr:-rotate-90 rtl:rotate-90"
           )
@@ -30,10 +38,10 @@ function c({ row: e, className: t, ...n }, i) {
     }
   );
 }
-const f = l.forwardRef(
-  c
+const m = c.forwardRef(
+  p
 );
 export {
-  f as DataTableExpandTrigger
+  m as DataTableExpandTrigger
 };
 //# sourceMappingURL=data-table-expand-trigger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-expand-trigger.js","sources":["../../../../src/components/ui/data-table/data-table-expand-trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Row } from '@tanstack/react-table';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableExpandTriggerProps<TData>\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** The row this trigger toggles. */\n  row: Row<TData>;\n}\n\n// A chevron toggle button wired to a row's expansion state, meant to live inside\n// a column's `cell` render function so the expand affordance sits in a real\n// column (like the Vue2 `type=\"expand\"` column) instead of requiring a\n// whole-row click. Reads the row's own `getCanExpand`/`getIsExpanded` and calls\n// `toggleExpanded()` — the underlying expand state model is unchanged. Renders\n// nothing when the row can't expand.\nfunction DataTableExpandTriggerImpl<TData>(\n  { row, className, ...props }: DataTableExpandTriggerProps<TData>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  if (!row.getCanExpand()) return null;\n\n  const expanded = row.getIsExpanded();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={row.getToggleExpandedHandler()}\n      aria-label={expanded ? 'Collapse row' : 'Expand row'}\n      aria-expanded={expanded}\n      className={cn(\n        'inline-flex size-6 cursor-pointer items-center justify-center rounded text-[var(--ui-table-data-value-color-idle)] 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-4 [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n        className={cn(\n          'transition-transform',\n          !expanded && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      />\n    </button>\n  );\n}\n\n// `forwardRef` erases the generic; re-cast so callers keep `DataTableExpandTrigger<TData>`.\nexport const DataTableExpandTrigger = React.forwardRef(\n  DataTableExpandTriggerImpl\n) as <TData>(\n  props: DataTableExpandTriggerProps<TData> & {\n    ref?: React.Ref<HTMLButtonElement>;\n  }\n) => React.ReactElement | null;\n"],"names":["DataTableExpandTriggerImpl","row","className","props","ref","expanded","jsx","cn","ChevronDownIcon","DataTableExpandTrigger","React"],"mappings":";;;;AAkBA,SAASA,EACP,EAAE,KAAAC,GAAK,WAAAC,GAAW,GAAGC,EAAA,GACrBC,GACA;AACA,MAAI,CAACH,EAAI,aAAA,EAAgB,QAAO;AAEhC,QAAMI,IAAWJ,EAAI,cAAA;AAErB,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,SAASH,EAAI,yBAAA;AAAA,MACb,cAAYI,IAAW,iBAAiB;AAAA,MACxC,iBAAeA;AAAA,MACf,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA,CAACF,KAAY;AAAA,UAAA;AAAA,QACf;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAGO,MAAMI,IAAyBC,EAAM;AAAA,EAC1CV;AACF;"}
+{"version":3,"file":"data-table-expand-trigger.js","sources":["../../../../src/components/ui/data-table/data-table-expand-trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Row } from '@tanstack/react-table';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableExpandTriggerProps<TData>\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** The row this trigger toggles. */\n  row: Row<TData>;\n  /** Accessible name while the row is expanded. Override to localize. */\n  collapseLabel?: string;\n  /** Accessible name while the row is collapsed. Override to localize. */\n  expandLabel?: string;\n}\n\n// A chevron toggle button wired to a row's expansion state, meant to live inside\n// a column's `cell` render function so the expand affordance sits in a real\n// column (like the Vue2 `type=\"expand\"` column) instead of requiring a\n// whole-row click. Reads the row's own `getCanExpand`/`getIsExpanded` and calls\n// `toggleExpanded()` — the underlying expand state model is unchanged. Renders\n// nothing when the row can't expand.\nfunction DataTableExpandTriggerImpl<TData>(\n  {\n    row,\n    collapseLabel = 'Collapse row',\n    expandLabel = 'Expand row',\n    className,\n    ...props\n  }: DataTableExpandTriggerProps<TData>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  if (!row.getCanExpand()) return null;\n\n  const expanded = row.getIsExpanded();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={row.getToggleExpandedHandler()}\n      aria-label={expanded ? collapseLabel : expandLabel}\n      aria-expanded={expanded}\n      className={cn(\n        // Lives in a data cell, so it tints from the data-cell tokens; the focus\n        // ring matches the kit-wide 3px treatment (Figma stroke/width-3).\n        'inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n        className={cn(\n          'transition-transform',\n          !expanded && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      />\n    </button>\n  );\n}\n\n// `forwardRef` erases the generic; re-cast so callers keep `DataTableExpandTrigger<TData>`.\nexport const DataTableExpandTrigger = React.forwardRef(\n  DataTableExpandTriggerImpl\n) as <TData>(\n  props: DataTableExpandTriggerProps<TData> & {\n    ref?: React.Ref<HTMLButtonElement>;\n  }\n) => React.ReactElement | null;\n"],"names":["DataTableExpandTriggerImpl","row","collapseLabel","expandLabel","className","props","ref","expanded","jsx","cn","ChevronDownIcon","DataTableExpandTrigger","React"],"mappings":";;;;AAsBA,SAASA,EACP;AAAA,EACE,KAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,MAAI,CAACL,EAAI,aAAA,EAAgB,QAAO;AAEhC,QAAMM,IAAWN,EAAI,cAAA;AAErB,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,SAASL,EAAI,yBAAA;AAAA,MACb,cAAYM,IAAWL,IAAgBC;AAAA,MACvC,iBAAeI;AAAA,MACf,WAAWE;AAAA;AAAA;AAAA,QAGT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA,CAACF,KAAY;AAAA,UAAA;AAAA,QACf;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAGO,MAAMI,IAAyBC,EAAM;AAAA,EAC1CZ;AACF;"}