@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/chart-widget/chart-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-widget.js","names":[],"sources":["../../../../src/components/ui/chart-widget/chart-widget.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\nimport { Card, CardContent, CardHeader, type CardHeaderProps } from '../card';\nimport {\n  ChartState,\n  type ChartStateProps,\n  type ChartStateVariant,\n} from '../chart-state';\n\n// A dashboard chart widget: the Card every chart mockup is wrapped in, plus the\n// one thing a Card doesn't know about — what the body shows while there is no\n// plot to show.\n//\n// Deliberately thin. `CardHeader` already owns the whole header surface (title,\n// description, extras, actions, drag handle, switch, avatar, rename, collapse\n// trigger) and draws the divider under itself, so this re-declares none of it:\n// `header` is typed as `CardHeaderProps` and spread, which means a header\n// feature added to Card arrives here for free instead of drifting.\n//\n// It owns no size either. The Figma `size` axis (sm/md/lg) only changes the\n// WIDTH (288/592/896), and every set is `HUG` vertically. So the height comes\n// from the dashboard grid, and the widget just passes it down: the header takes\n// what it needs, and the plot fills whatever is left (`flex-1 min-h-0` all the\n// way down, so a chart given `size-full` occupies the rest of the card).\n//\n// Dropped into a parent with no definite height, `h-full` resolves to `auto` and\n// the card hugs its content instead — so a standalone widget still works, with\n// the chart bringing its own height.\n//\n// The per-type chart components stay card-less on purpose. They are the plot;\n// the card is composition. That keeps `<AreaChart>` usable inside a table cell,\n// a popover, or a `Metric`'s sparkline slot, where a card would be wrong.\n//\n// Figma: every chart set wraps the `Card` set (`10012:195993`) — ChartArea\n// `8174:22232`, ChartBar `8700:55606`, ChartDonut `8811:172438`, and so on.\n\nexport interface ChartWidgetProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition), forwarded to `Card`. This is how a dashboard gives each\n   * widget a landmark role — `render={<section aria-label=\"Sessions\" />}` — the\n   * one thing the widget can't infer for itself.\n   */\n  render?: useRender.RenderProp;\n  /**\n   * Which chart the widget holds. Only used while `state=\"empty\"`, to pick the\n   * silhouette the design draws for that chart type — the widget itself needs\n   * no size, so this carries nothing else.\n   */\n  variant?: ChartStateVariant;\n  /**\n   * The card header, forwarded verbatim to `CardHeader`. Everything that\n   * component takes works here — `title`, `actions` (the ⋯ menu), `extras` (a\n   * filter chip), `isDraggable`, `hasRename`, … Omit it for a header-less\n   * widget.\n   */\n  header?: CardHeaderProps;\n  /**\n   * The readout beside or above the plot — typically a `Metric`.\n   *\n   * - `'vertical'` (default) — metric above the plot, full width. The metric\n   *   takes its natural height; the plot fills the rest of the card body.\n   * - `'horizontal'` — metric and plot side by side, each `flex-1`. Use for\n   *   compact widgets (sm/288px) where vertical space is at a premium.\n   *\n   * Figma: vertical → `8174:22335`, horizontal → `8982:31681`.\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * The readout beside or above the plot — typically a `Metric`. Layout is\n   * controlled by `orientation`.\n   */\n  metric?: React.ReactNode;\n  /**\n   * Show a placeholder instead of the plot, for a widget whose data isn't there\n   * yet. `error` also gives the card its error border.\n   */\n  state?: ChartStateProps['state'];\n  /**\n   * Text below the placeholder illustration or glyph — defaults to\n   * `\"Data is loading…\"` / `\"No data found\"` / `\"Something went wrong\"`.\n   */\n  stateDescription?: ChartStateProps['description'];\n  /** Trailing action on the `error` placeholder — e.g. a \"Try again\" button. */\n  stateAction?: ChartStateProps['action'];\n  /**\n   * Class for the card body. Rarely needed — the body already fills the card.\n   * Use it where nothing above gives a height and the content can't either, e.g.\n   * a placeholder-only widget outside a sized grid cell.\n   */\n  bodyClassName?: string;\n  /** The chart. Replaced by the placeholder while `state` is set. */\n  children?: React.ReactNode;\n}\n\nconst ChartWidget = React.forwardRef<HTMLDivElement, ChartWidgetProps>(\n  (\n    {\n      className,\n      variant,\n      header,\n      orientation = 'vertical',\n      metric,\n      state,\n      stateDescription,\n      stateAction,\n      bodyClassName,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isHorizontal = orientation === 'horizontal';\n    return (\n      <Card\n        ref={ref}\n        // The error border belongs to Card, so a caller sets `state=\"error\"` once\n        // rather than wiring the placeholder and the border separately.\n        hasError={state === 'error'}\n        data-slot=\"chart-widget\"\n        data-orientation={orientation}\n        // `h-full` + a flex column is what lets the plot fill the card: the grid\n        // sizes this, the header is `shrink-0`, and the body takes the rest.\n        className={cn('flex h-full w-full flex-col', className)}\n        {...props}\n      >\n        {header ? <CardHeader {...header} /> : null}\n        {/* `CardContent` brings `px-4 pb-4`; the design's body is padded on all\n            four sides with a 16px gap between the metric row and the plot. */}\n        <CardContent\n          className={cn(\n            'min-h-0 flex-1 gap-4 pt-4',\n            // In horizontal mode override the default flex-col with flex-row so\n            // the metric and the chart sit side by side, each taking half the body.\n            isHorizontal && 'flex-row items-stretch',\n            bodyClassName\n          )}\n        >\n          {metric ? (\n            <div\n              className={cn(\n                // Vertical: takes natural height, full width.\n                // Horizontal: flex-[1_0_0] matches Figma — equal half-width,\n                // no shrink (flex: 1 0 0), min-w-0 allows text to truncate.\n                isHorizontal ? 'min-w-0 flex-[1_0_0]' : 'shrink-0'\n              )}\n              data-slot=\"chart-widget-metric\"\n            >\n              {metric}\n            </div>\n          ) : null}\n          {/* `min-h-0` matters: without it a flex child refuses to shrink below\n              its content's height, so a chart would push the card past the height\n              the grid gave it instead of fitting inside. */}\n          <div\n            className={cn(\n              'min-h-0',\n              isHorizontal ? 'min-w-0 flex-[1_0_0]' : 'flex-1'\n            )}\n            data-slot=\"chart-widget-body\"\n          >\n            {state ? (\n              <ChartState\n                state={state}\n                variant={variant}\n                description={stateDescription}\n                action={stateAction}\n              />\n            ) : (\n              children\n            )}\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n);\nChartWidget.displayName = 'ChartWidget';\n\nexport { ChartWidget };\n"],"mappings":";;;;;;;AAsGA,IAAM,IAAc,EAAM,YAEtB,EACE,cACA,YACA,WACA,iBAAc,YACd,WACA,UACA,qBACA,gBACA,kBACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAe,MAAgB;CACrC,OACE,kBAAC,GAAD;EACO;EAGL,UAAU,MAAU;EACpB,aAAU;EACV,oBAAkB;EAGlB,WAAW,EAAG,+BAA+B,CAAS;EACtD,GAAI;EAVN,UAAA,CAYG,IAAS,kBAAC,GAAD,EAAY,GAAI,EAAS,CAAA,IAAI,MAGvC,kBAAC,GAAD;GACE,WAAW,EACT,6BAGA,KAAgB,0BAChB,CACF;GAPF,UAAA,CASG,IACC,kBAAC,OAAD;IACE,WAAW,EAIT,IAAe,yBAAyB,UAC1C;IACA,aAAU;IAET,UAAA;GACE,CAAA,IACH,MAIJ,kBAAC,OAAD;IACE,WAAW,EACT,WACA,IAAe,yBAAyB,QAC1C;IACA,aAAU;IAET,UAAA,IACC,kBAAC,GAAD;KACS;KACE;KACT,aAAa;KACb,QAAQ;IACT,CAAA,IAED;GAEC,CAAA,CACM;EACT,CAAA,CAAA;;AAEV,CACF;AACA,EAAY,cAAc"}

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

@@ -1,70 +1,57 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import * as l from "react";
-import { Checkbox as h } from "@base-ui/react/checkbox";
-import { MinusIcon as v, CheckIcon as u } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as m } from "../../../lib/utils.js";
-const g = [
-  // geometry + focus ring
-  // `align-middle` keeps the box vertically centered when it sits inline next to
-  // text (e.g. in a table cell) rather than defaulting to the text baseline.
-  "inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0",
-  // unchecked (base): idle / hover / active
-  "bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]",
-  "not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]",
-  "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)]",
-  // checked: idle / hover / active
-  "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)]",
-  "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)]",
-  "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)]",
-  // indeterminate: idle / hover / active
-  "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)]",
-  "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)]",
-  "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)]",
-  // disabled (unchecked base + per-state overrides)
-  "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)]",
-  "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)]",
-  "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)]"
-].join(" "), f = l.forwardRef(({ className: x, label: a, description: o, indeterminate: c, ...s }, k) => {
-  const d = l.useId(), r = a != null ? `${d}-label` : void 0, i = o != null ? `${d}-description` : void 0, t = a != null || o != null, b = /* @__PURE__ */ e(
-    h.Root,
-    {
-      ref: k,
-      indeterminate: c,
-      "aria-labelledby": r,
-      "aria-describedby": i,
-      className: m(
-        g,
-        t && "mt-[var(--ui-checkbox-global-box-margin-y)]",
-        x
-      ),
-      ...s,
-      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: [
-    b,
-    /* @__PURE__ */ n("span", { className: "flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]", children: [
-      a != null && /* @__PURE__ */ e(
-        "span",
-        {
-          id: r,
-          className: "text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]",
-          children: a
-        }
-      ),
-      o != null && /* @__PURE__ */ e(
-        "span",
-        {
-          id: i,
-          className: "text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]",
-          children: o
-        }
-      )
-    ] })
-  ] }) : b;
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { CheckIcon as i, MinusIcon as a } from "@acronis-platform/icons-react/stroke-mono";
+import { Checkbox as o } from "@base-ui/react/checkbox";
+//#region src/components/ui/checkbox/checkbox.tsx
+var s = [
+	"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",
+	"bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]",
+	"not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]",
+	"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)]",
+	"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)]",
+	"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)]",
+	"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)]",
+	"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)]",
+	"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)]",
+	"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)]",
+	"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)]",
+	"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)]",
+	"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)]"
+].join(" "), c = t.forwardRef(({ className: c, label: l, description: u, indeterminate: d, ...f }, p) => {
+	let m = t.useId(), h = l == null ? void 0 : `${m}-label`, g = u == null ? void 0 : `${m}-description`, _ = l != null || u != null, v = /* @__PURE__ */ n(o.Root, {
+		ref: p,
+		indeterminate: d,
+		"aria-labelledby": h,
+		"aria-describedby": g,
+		className: e(s, _ && "mt-[var(--ui-checkbox-global-box-margin-y)]", c),
+		...f,
+		children: /* @__PURE__ */ n(o.Indicator, {
+			className: "flex items-center justify-center text-current",
+			children: n(d ? a : i, {
+				size: 16,
+				className: "text-current!"
+			})
+		})
+	});
+	return _ ? /* @__PURE__ */ r("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: [v, /* @__PURE__ */ r("span", {
+			className: "flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]",
+			children: [l != null && /* @__PURE__ */ n("span", {
+				id: h,
+				className: "text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]",
+				children: l
+			}), u != null && /* @__PURE__ */ n("span", {
+				id: g,
+				className: "text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]",
+				children: u
+			})]
+		})]
+	}) : v;
 });
-f.displayName = "Checkbox";
-export {
-  f as Checkbox
-};
-//# sourceMappingURL=checkbox.js.map
+c.displayName = "Checkbox";
+//#endregion
+export { c as Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

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 ? (\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;"}
+{"version":3,"file":"checkbox.js","names":[],"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"],"mappings":";;;;;;AA8BA,IAAM,IAAa;CAIjB;CAEA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG,GAUJ,IAAW,EAAM,YAGpB,EAAE,cAAW,UAAO,gBAAa,kBAAe,GAAG,KAAS,MAAQ;CACrE,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAS,OAA4B,KAAA,IAArB,GAAG,EAAQ,SACrC,IAAgB,KAAe,OAAkC,KAAA,IAA3B,GAAG,EAAQ,eACjD,IAAa,KAAS,QAAQ,KAAe,MAE7C,IACJ,kBAAC,EAAkB,MAAnB;EACO;EACU;EACf,mBAAiB;EACjB,oBAAkB;EAClB,WAAW,EACT,GACA,KAAc,+CACd,CACF;EACA,GAAI;EAEJ,UAAA,kBAAC,EAAkB,WAAnB;GAA6B,WAAU;GACpC,UACC,EADD,IACE,IAEA,GAFD;IAAW,MAAM;IAAI,WAAU;GAAiB,CAEA;EAEvB,CAAA;CACP,CAAA;CAK1B,OAFK,IAGH,kBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA,CACG,GACD,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACG,KAAS,QACR,kBAAC,QAAD;IACE,IAAI;IACJ,WAAU;IAET,UAAA;GACG,CAAA,GAEP,KAAe,QACd,kBAAC,QAAD;IACE,IAAI;IACJ,WAAU;IAET,UAAA;GACG,CAAA,CAEJ;EACD,CAAA,CAAA;MAvBe;AAyB1B,CAAC;AACD,EAAS,cAAc"}

package/dist/components/ui/chip/chip.js

@@ -1,70 +1,51 @@
-import { jsxs as h, jsx as r } from "react/jsx-runtime";
-import * as d from "react";
-import { TimesSmallIcon as g } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as m } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as f } from "../../../lib/utils.js";
-const x = m(
-  "inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:text-[var(--ui-chip-global-icon-color)]",
-  {
-    variants: {
-      variant: {
-        removable: "text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]",
-        selectable: "text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]",
-        operational: "ui-chip-operational-label-text-style text-[var(--ui-chip-operational-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]"
-      }
-    },
-    defaultVariants: {
-      variant: "removable"
-    }
-  }
-), y = d.forwardRef(
-  ({
-    className: t,
-    variant: e = "removable",
-    icon: b,
-    selected: a,
-    onRemove: s,
-    removeLabel: n = "Remove",
-    children: u,
-    onKeyDown: o,
-    ...v
-  }, p) => {
-    const l = e === "selectable", c = l || e === "operational";
-    return /* @__PURE__ */ h(
-      "div",
-      {
-        ref: p,
-        className: f(x({ variant: e }), t),
-        onKeyDown: (i) => {
-          c && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), i.currentTarget.click()), o == null || o(i);
-        },
-        ...c ? { role: "button", tabIndex: 0 } : {},
-        ...l ? {
-          "aria-pressed": !!a,
-          "data-selected": a ? "true" : void 0
-        } : {},
-        ...v,
-        children: [
-          b,
-          /* @__PURE__ */ r("span", { className: "min-w-0 truncate", children: u }),
-          e === "removable" && /* @__PURE__ */ r(
-            "button",
-            {
-              type: "button",
-              "aria-label": n,
-              onClick: s,
-              className: "-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none",
-              children: /* @__PURE__ */ r(g, { size: 16 })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-y.displayName = "Chip";
-export {
-  y as Chip,
-  x as chipVariants
-};
-//# sourceMappingURL=chip.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { TimesSmallIcon as a } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/chip/chip.tsx
+var o = t("inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:text-[var(--ui-chip-global-icon-color)]", {
+	variants: { variant: {
+		removable: "text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]",
+		selectable: "text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]",
+		operational: "ui-chip-operational-label-text-style text-[var(--ui-chip-operational-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]"
+	} },
+	defaultVariants: { variant: "removable" }
+}), s = n.forwardRef(({ className: t, variant: n = "removable", icon: s, selected: c, onRemove: l, removeLabel: u = "Remove", children: d, onKeyDown: f, ...p }, m) => {
+	let h = n === "selectable", g = h || n === "operational";
+	return /* @__PURE__ */ i("div", {
+		ref: m,
+		className: e(o({ variant: n }), t),
+		onKeyDown: (e) => {
+			g && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click()), f?.(e);
+		},
+		...g ? {
+			role: "button",
+			tabIndex: 0
+		} : {},
+		...h ? {
+			"aria-pressed": !!c,
+			"data-selected": c ? "true" : void 0
+		} : {},
+		...p,
+		children: [
+			s,
+			/* @__PURE__ */ r("span", {
+				className: "min-w-0 truncate",
+				children: d
+			}),
+			n === "removable" && /* @__PURE__ */ r("button", {
+				type: "button",
+				"aria-label": u,
+				onClick: l,
+				className: "-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none",
+				children: /* @__PURE__ */ r(a, { size: 16 })
+			})
+		]
+	});
+});
+s.displayName = "Chip";
+//#endregion
+export { s as Chip, o as chipVariants };
+
+//# sourceMappingURL=chip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesSmallIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` (Figma `dismissable`) carries a trailing × (remove) button;\n// `selectable` toggles a selected state; `operational` is a plain action chip\n// whose label is styled like a strong link (the semibold weight comes from\n// tokens-pd's generated `ui-chip-operational-label-text-style` class).\n// The container fill/border/label/icon all wire to the dedicated\n// `--ui-chip-*` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable`/`operational` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\n//\n// Figma's `_global/box/marginY` (4px) is deliberately NOT wired: its frame sits\n// at y=-4 with height 32 around the 24px box, i.e. it bleeds *outside* the\n// component's 24px footprint to give the focus ring room on the canvas. A CSS\n// `ring` already paints outside the border box without affecting layout, so\n// translating it to a real margin would wrongly add 8px to every chip.\nconst chipVariants = cva(\n  \"inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:text-[var(--ui-chip-global-icon-color)]\",\n  {\n    variants: {\n      variant: {\n        removable:\n          'text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]',\n        selectable:\n          'text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]',\n        operational:\n          'ui-chip-operational-label-text-style text-[var(--ui-chip-operational-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'removable',\n    },\n  }\n);\n\nexport interface ChipProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof chipVariants> {\n  /** Optional leading icon, rendered at 16px before the label. */\n  icon?: React.ReactNode;\n  /**\n   * `selectable` only — applies the selected (active) styling and exposes the\n   * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n   */\n  selected?: boolean;\n  /** `removable` only — called when the trailing remove (×) button is pressed. */\n  onRemove?: () => void;\n  /** Accessible label for the remove button (`removable`). */\n  removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n  (\n    {\n      className,\n      variant = 'removable',\n      icon,\n      selected,\n      onRemove,\n      removeLabel = 'Remove',\n      children,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    const selectable = variant === 'selectable';\n    // `selectable` and `operational` put the action on the chip itself, so the\n    // container carries button semantics. `removable` keeps a presentational\n    // container — its only control is the trailing × button.\n    const actionable = selectable || variant === 'operational';\n    return (\n      <div\n        ref={ref}\n        className={cn(chipVariants({ variant }), className)}\n        onKeyDown={(event) => {\n          // An actionable chip is a div with button semantics; mirror native\n          // button activation so Enter/Space fire its click handler.\n          if (actionable && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            event.currentTarget.click();\n          }\n          onKeyDown?.(event);\n        }}\n        {...(actionable ? { role: 'button', tabIndex: 0 } : {})}\n        {...(selectable\n          ? {\n              'aria-pressed': Boolean(selected),\n              'data-selected': selected ? 'true' : undefined,\n            }\n          : {})}\n        {...props}\n      >\n        {icon}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {variant === 'removable' && (\n          <button\n            type=\"button\"\n            aria-label={removeLabel}\n            onClick={onRemove}\n            className=\"-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n          >\n            {/* `TimesSmall` (not `Times`) at size 16 is what the design uses:\n                its × mark spans ~52% of the 16px box, where `Times` spans ~85%.\n                `size={16}` also picks the 16px stroke spec (2.4 viewBox units →\n                the design's 1.6px), instead of scaling the 24px master down. */}\n            <TimesSmallIcon size={16} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"names":["chipVariants","cva","Chip","React","className","variant","icon","selected","onRemove","removeLabel","children","onKeyDown","props","ref","selectable","actionable","jsxs","cn","event","jsx","TimesSmallIcon"],"mappings":";;;;;AAyBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;AAAA,QACF,aACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaT,MAAY,cAIzBU,IAAaD,KAAcT,MAAY;AAC7C,WACE,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,WAAWI,EAAGjB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACc,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBP,KAAA,QAAAA,EAAYO;AAAA,QACd;AAAA,QACC,GAAIH,IAAa,EAAE,MAAM,UAAU,UAAU,EAAA,IAAM,CAAA;AAAA,QACnD,GAAID,IACD;AAAA,UACE,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAa,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAT,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYV;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAMV,UAAA,gBAAAW,EAACC,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5B;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAlB,EAAK,cAAc;"}
+{"version":3,"file":"chip.js","names":[],"sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesSmallIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` (Figma `dismissable`) carries a trailing × (remove) button;\n// `selectable` toggles a selected state; `operational` is a plain action chip\n// whose label is styled like a strong link (the semibold weight comes from\n// tokens-pd's generated `ui-chip-operational-label-text-style` class).\n// The container fill/border/label/icon all wire to the dedicated\n// `--ui-chip-*` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable`/`operational` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\n//\n// Figma's `_global/box/marginY` (4px) is deliberately NOT wired: its frame sits\n// at y=-4 with height 32 around the 24px box, i.e. it bleeds *outside* the\n// component's 24px footprint to give the focus ring room on the canvas. A CSS\n// `ring` already paints outside the border box without affecting layout, so\n// translating it to a real margin would wrongly add 8px to every chip.\nconst chipVariants = cva(\n  \"inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:text-[var(--ui-chip-global-icon-color)]\",\n  {\n    variants: {\n      variant: {\n        removable:\n          'text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]',\n        selectable:\n          'text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]',\n        operational:\n          'ui-chip-operational-label-text-style text-[var(--ui-chip-operational-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'removable',\n    },\n  }\n);\n\nexport interface ChipProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof chipVariants> {\n  /** Optional leading icon, rendered at 16px before the label. */\n  icon?: React.ReactNode;\n  /**\n   * `selectable` only — applies the selected (active) styling and exposes the\n   * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n   */\n  selected?: boolean;\n  /** `removable` only — called when the trailing remove (×) button is pressed. */\n  onRemove?: () => void;\n  /** Accessible label for the remove button (`removable`). */\n  removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n  (\n    {\n      className,\n      variant = 'removable',\n      icon,\n      selected,\n      onRemove,\n      removeLabel = 'Remove',\n      children,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    const selectable = variant === 'selectable';\n    // `selectable` and `operational` put the action on the chip itself, so the\n    // container carries button semantics. `removable` keeps a presentational\n    // container — its only control is the trailing × button.\n    const actionable = selectable || variant === 'operational';\n    return (\n      <div\n        ref={ref}\n        className={cn(chipVariants({ variant }), className)}\n        onKeyDown={(event) => {\n          // An actionable chip is a div with button semantics; mirror native\n          // button activation so Enter/Space fire its click handler.\n          if (actionable && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            event.currentTarget.click();\n          }\n          onKeyDown?.(event);\n        }}\n        {...(actionable ? { role: 'button', tabIndex: 0 } : {})}\n        {...(selectable\n          ? {\n              'aria-pressed': Boolean(selected),\n              'data-selected': selected ? 'true' : undefined,\n            }\n          : {})}\n        {...props}\n      >\n        {icon}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {variant === 'removable' && (\n          <button\n            type=\"button\"\n            aria-label={removeLabel}\n            onClick={onRemove}\n            className=\"-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n          >\n            {/* `TimesSmall` (not `Times`) at size 16 is what the design uses:\n                its × mark spans ~52% of the 16px box, where `Times` spans ~85%.\n                `size={16}` also picks the 16px stroke spec (2.4 viewBox units →\n                the design's 1.6px), instead of scaling the 24px master down. */}\n            <TimesSmallIcon size={16} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"mappings":";;;;;;AAyBA,IAAM,IAAe,EACnB,wqBACA;CACE,UAAU,EACR,SAAS;EACP,WACE;EACF,YACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,YACX;AACF,CACF,GAmBM,IAAO,EAAM,YAEf,EACE,cACA,aAAU,aACV,SACA,aACA,aACA,iBAAc,UACd,aACA,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAa,MAAY,cAIzB,IAAa,KAAc,MAAY;CAC7C,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,EAAa,EAAE,WAAQ,CAAC,GAAG,CAAS;EAClD,YAAY,MAAU;GAOpB,AAJI,MAAe,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACxD,EAAM,eAAe,GACrB,EAAM,cAAc,MAAM,IAE5B,IAAY,CAAK;EACnB;EACA,GAAK,IAAa;GAAE,MAAM;GAAU,UAAU;EAAE,IAAI,CAAC;EACrD,GAAK,IACD;GACE,gBAAgB,EAAQ;GACxB,iBAAiB,IAAW,SAAS,KAAA;EACvC,IACA,CAAC;EACL,GAAI;EAnBN,UAAA;GAqBG;GACD,kBAAC,QAAD;IAAM,WAAU;IAAoB;GAAe,CAAA;GAClD,MAAY,eACX,kBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,SAAS;IACT,WAAU;IAMV,UAAA,kBAAC,GAAD,EAAgB,MAAM,GAAK,CAAA;GACrB,CAAA;EAEP;;AAET,CACF;AACA,EAAK,cAAc"}