@acronis-platform/ui-react 0.57.0 → 0.57.1

package/dist/components/ui/chart/chart.js

@@ -0,0 +1,213 @@
+import { jsx as c, jsxs as v, Fragment as E } from "react/jsx-runtime";
+import * as b from "react";
+import * as C from "recharts";
+import { cn as i } from "../../../lib/utils.js";
+const I = { light: "", dark: "[data-theme='dark']" }, $ = b.createContext(null);
+function L() {
+  const s = b.useContext($);
+  if (!s)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return s;
+}
+function M({
+  id: s,
+  className: r,
+  children: e,
+  config: o,
+  ...n
+}) {
+  const u = b.useId(), a = `chart-${s || u.replace(/:/g, "")}`;
+  return /* @__PURE__ */ c($.Provider, { value: { config: o }, children: /* @__PURE__ */ v(
+    "div",
+    {
+      id: s,
+      "data-slot": "chart",
+      "data-chart": a,
+      className: i(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        r
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ c(R, { id: a, config: o }),
+        /* @__PURE__ */ c(C.ResponsiveContainer, { children: e })
+      ]
+    }
+  ) });
+}
+const R = ({ id: s, config: r }) => {
+  const e = Object.entries(r).filter(
+    ([, o]) => o.theme || o.color
+  );
+  return e.length ? /* @__PURE__ */ c("style", { children: Object.entries(I).map(
+    ([o, n]) => `
+            ${n} [data-chart=${s}] {
+            ${e.map(([u, a]) => {
+      var l;
+      const h = ((l = a.theme) == null ? void 0 : l[o]) || a.color;
+      return h ? `  --color-${u}: ${h};` : null;
+    }).join(`
+`)}
+            }
+            `
+  ).join(`
+`) }) : null;
+}, O = C.Tooltip;
+function q({
+  active: s,
+  payload: r,
+  label: e,
+  className: o,
+  indicator: n = "dot",
+  hideLabel: u = !1,
+  hideIndicator: a = !1,
+  labelFormatter: h,
+  formatter: l,
+  labelClassName: p,
+  color: P,
+  nameKey: T,
+  labelKey: _
+}) {
+  const { config: m } = L(), N = b.useMemo(() => {
+    if (u || !(r != null && r.length))
+      return null;
+    const [t] = r, k = `${_ || (t == null ? void 0 : t.dataKey) || (t == null ? void 0 : t.name) || "value"}`, f = w(m, t, k), d = (() => {
+      var j;
+      const g = !_ && typeof e == "string" ? ((j = m[e]) == null ? void 0 : j.label) ?? e : f == null ? void 0 : f.label;
+      return typeof g == "string" || typeof g == "number" ? g : void 0;
+    })();
+    return h ? /* @__PURE__ */ c("div", { className: i("font-medium", p), children: h(d, r) }) : d ? /* @__PURE__ */ c("div", { className: i("font-medium", p), children: d }) : null;
+  }, [
+    e,
+    h,
+    r,
+    u,
+    p,
+    m,
+    _
+  ]);
+  if (!s || !(r != null && r.length))
+    return null;
+  const x = r.length === 1 && n !== "dot";
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: i(
+        "grid min-w-[8rem] items-start gap-1.5 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md",
+        o
+      ),
+      children: [
+        x ? null : N,
+        /* @__PURE__ */ c("div", { className: "grid gap-1.5", children: r.map((t, k) => {
+          const f = `${T || t.name || t.dataKey || "value"}`, d = w(m, t, f), g = P || t.payload.fill || t.color;
+          return /* @__PURE__ */ c(
+            "div",
+            {
+              className: i(
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                n === "dot" && "items-center"
+              ),
+              children: l && (t == null ? void 0 : t.value) !== void 0 && t.name ? l(t.value, t.name, t, k, r) : /* @__PURE__ */ v(E, { children: [
+                d != null && d.icon ? /* @__PURE__ */ c(d.icon, {}) : !a && /* @__PURE__ */ c(
+                  "div",
+                  {
+                    className: i(
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      {
+                        "h-2.5 w-2.5": n === "dot",
+                        "h-4 w-1": n === "line",
+                        "h-4 w-0 border-[1.5px] border-dashed bg-transparent": n === "dashed",
+                        "my-0.5": x && n === "dashed"
+                      }
+                    ),
+                    style: {
+                      "--color-bg": g,
+                      "--color-border": g
+                    }
+                  }
+                ),
+                /* @__PURE__ */ v(
+                  "div",
+                  {
+                    className: i(
+                      "flex flex-1 justify-between leading-none",
+                      x ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ v("div", { className: "grid gap-1.5", children: [
+                        x ? N : null,
+                        /* @__PURE__ */ c("span", { className: "text-muted-foreground", children: (d == null ? void 0 : d.label) || t.name })
+                      ] }),
+                      t.value != null && /* @__PURE__ */ c("span", { className: "font-medium tabular-nums text-foreground", children: t.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            f
+          );
+        }) })
+      ]
+    }
+  );
+}
+const H = C.Legend;
+function z({
+  className: s,
+  hideIcon: r = !1,
+  payload: e,
+  verticalAlign: o = "bottom",
+  nameKey: n
+}) {
+  const { config: u } = L();
+  return e != null && e.length ? /* @__PURE__ */ c(
+    "div",
+    {
+      className: i(
+        "flex items-center justify-center gap-4",
+        o === "top" ? "pb-3" : "pt-3",
+        s
+      ),
+      children: e.map((a) => {
+        const h = `${n || a.dataKey || "value"}`, l = w(u, a, h);
+        return /* @__PURE__ */ v(
+          "div",
+          {
+            className: i(
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+            ),
+            children: [
+              l != null && l.icon && !r ? /* @__PURE__ */ c(l.icon, {}) : /* @__PURE__ */ c(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: a.color
+                  }
+                }
+              ),
+              l == null ? void 0 : l.label
+            ]
+          },
+          a.value
+        );
+      })
+    }
+  ) : null;
+}
+function w(s, r, e) {
+  if (typeof r != "object" || r === null)
+    return;
+  const o = "payload" in r && typeof r.payload == "object" && r.payload !== null ? r.payload : void 0;
+  let n = e;
+  return e in r && typeof r[e] == "string" ? n = r[e] : o && e in o && typeof o[e] == "string" && (n = o[e]), n in s ? s[n] : s[e];
+}
+export {
+  M as ChartContainer,
+  H as ChartLegend,
+  z as ChartLegendContent,
+  R as ChartStyle,
+  O as ChartTooltip,
+  q as ChartTooltipContent
+};
+//# sourceMappingURL=chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sources":["../../../../src/components/ui/chart/chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\nimport {\n  NameType,\n  Payload,\n  ValueType,\n} from 'recharts/types/component/DefaultTooltipContent';\nimport type { Props as LegendProps } from 'recharts/types/component/Legend';\nimport { TooltipContentProps } from 'recharts/types/component/Tooltip';\n\nimport { cn } from '@/lib/utils';\n\n// Format: { THEME_NAME: CSS_SELECTOR }. ui-react flips light/dark via the\n// `[data-theme]` attribute (the tokens resolve `light-dark()` through\n// `color-scheme`), not the legacy `.dark` class — so per-series `theme` colors\n// scope their dark value under `[data-theme='dark']`.\nconst THEMES = { light: '', dark: \"[data-theme='dark']\" } as const;\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  );\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nexport type ChartTooltipContentProps = Partial<\n  TooltipContentProps<ValueType, NameType>\n> & {\n  className?: string;\n  hideLabel?: boolean;\n  hideIndicator?: boolean;\n  indicator?: 'line' | 'dot' | 'dashed';\n  nameKey?: string;\n  labelKey?: string;\n  labelFormatter?: (\n    label: TooltipContentProps<number, string>['label'],\n    payload: TooltipContentProps<number, string>['payload']\n  ) => React.ReactNode;\n  formatter?: (\n    value: number | string,\n    name: string,\n    item: Payload<number | string, string>,\n    index: number,\n    payload: ReadonlyArray<Payload<number | string, string>>\n  ) => React.ReactNode;\n  labelClassName?: string;\n  color?: string;\n};\n\nexport type ChartLegendContentProps = {\n  className?: string;\n  hideIcon?: boolean;\n  verticalAlign?: LegendProps['verticalAlign'];\n  payload?: LegendPayload[];\n  nameKey?: string;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n}\n\nexport interface ChartContainerProps extends React.ComponentProps<'div'> {\n  config: ChartConfig;\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >['children'];\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: ChartContainerProps) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        id={id}\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  // Rendered as a text child (not dangerouslySetInnerHTML): React sets it via\n  // textContent, which the browser does not HTML-parse, so a `</style>` in a\n  // config color can't break out of the tag.\n  return (\n    <style>\n      {Object.entries(THEMES)\n        .map(\n          ([theme, prefix]) => `\n            ${prefix} [data-chart=${id}] {\n            ${colorConfig\n              .map(([key, itemConfig]) => {\n                const color =\n                  itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n                  itemConfig.color;\n                return color ? `  --color-${key}: ${color};` : null;\n              })\n              .join('\\n')}\n            }\n            `\n        )\n        .join('\\n')}\n    </style>\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  label,\n  className,\n  indicator = 'dot',\n  hideLabel = false,\n  hideIndicator = false,\n  labelFormatter,\n  formatter,\n  labelClassName,\n  color,\n  nameKey,\n  labelKey,\n}: ChartTooltipContentProps) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value = (() => {\n      const v =\n        !labelKey && typeof label === 'string'\n          ? (config[label as keyof typeof config]?.label ?? label)\n          : itemConfig?.label;\n\n      return typeof v === 'string' || typeof v === 'number' ? v : undefined;\n    })();\n\n    if (labelFormatter) {\n      return (\n        <div className={cn('font-medium', labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== 'dot';\n\n  return (\n    <div\n      className={cn(\n        'grid min-w-[8rem] items-start gap-1.5 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md',\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || 'value'}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || item.payload.fill || item.color;\n\n          return (\n            <div\n              key={key}\n              className={cn(\n                'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n                indicator === 'dot' && 'items-center'\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',\n                          {\n                            'h-2.5 w-2.5': indicator === 'dot',\n                            'h-4 w-1': indicator === 'line',\n                            'h-4 w-0 border-[1.5px] border-dashed bg-transparent':\n                              indicator === 'dashed',\n                            'my-0.5': nestLabel && indicator === 'dashed',\n                          }\n                        )}\n                        style={\n                          {\n                            '--color-bg': indicatorColor,\n                            '--color-border': indicatorColor,\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      'flex flex-1 justify-between leading-none',\n                      nestLabel ? 'items-end' : 'items-center'\n                    )}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">\n                        {itemConfig?.label || item.name}\n                      </span>\n                    </div>\n                    {item.value != null && (\n                      <span className=\"font-medium tabular-nums text-foreground\">\n                        {item.value.toLocaleString()}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = 'bottom',\n  nameKey,\n}: ChartLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-4',\n        verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n        className\n      )}\n    >\n      {payload.map((item) => {\n        const key = `${nameKey || item.dataKey || 'value'}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== 'object' || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    'payload' in payload &&\n    typeof payload.payload === 'object' &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === 'string'\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"names":["THEMES","ChartContext","React","useChart","context","ChartContainer","id","className","children","config","props","uniqueId","chartId","jsxs","cn","jsx","ChartStyle","RechartsPrimitive","colorConfig","theme","prefix","key","itemConfig","color","_a","ChartTooltip","ChartTooltipContent","active","payload","label","indicator","hideLabel","hideIndicator","labelFormatter","formatter","labelClassName","nameKey","labelKey","tooltipLabel","item","getPayloadConfigFromPayload","value","v","nestLabel","index","indicatorColor","Fragment","ChartLegend","ChartLegendContent","hideIcon","verticalAlign","payloadPayload","configLabelKey"],"mappings":";;;;AAmBA,MAAMA,IAAS,EAAE,OAAO,IAAI,MAAM,sBAAA,GAgD5BC,IAAeC,EAAM,cAAwC,IAAI;AAEvE,SAASC,IAAW;AAClB,QAAMC,IAAUF,EAAM,WAAWD,CAAY;AAE7C,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,mDAAmD;AAGrE,SAAOA;AACT;AASA,SAASC,EAAe;AAAA,EACtB,IAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAWT,EAAM,MAAA,GACjBU,IAAU,SAASN,KAAMK,EAAS,QAAQ,MAAM,EAAE,CAAC;AAEzD,2BACGV,EAAa,UAAb,EAAsB,OAAO,EAAE,QAAAQ,KAC9B,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAP;AAAA,MACA,aAAU;AAAA,MACV,cAAYM;AAAA,MACZ,WAAWE;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAK,EAACC,GAAA,EAAW,IAAIJ,GAAS,QAAAH,EAAA,CAAgB;AAAA,QACzC,gBAAAM,EAACE,EAAkB,qBAAlB,EACE,UAAAT,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAMQ,IAAa,CAAC,EAAE,IAAAV,GAAI,QAAAG,QAAkD;AAC1E,QAAMS,IAAc,OAAO,QAAQT,CAAM,EAAE;AAAA,IACzC,CAAC,CAAA,EAAGA,CAAM,MAAMA,EAAO,SAASA,EAAO;AAAA,EAAA;AAGzC,SAAKS,EAAY,SAQf,gBAAAH,EAAC,SAAA,EACE,UAAA,OAAO,QAAQf,CAAM,EACnB;AAAA,IACC,CAAC,CAACmB,GAAOC,CAAM,MAAM;AAAA,cACjBA,CAAM,gBAAgBd,CAAE;AAAA,cACxBY,EACC,IAAI,CAAC,CAACG,GAAKC,CAAU,MAAM;;AAC1B,YAAMC,MACJC,IAAAF,EAAW,UAAX,gBAAAE,EAAmBL,OACnBG,EAAW;AACb,aAAOC,IAAQ,aAAaF,CAAG,KAAKE,CAAK,MAAM;AAAA,IACjD,CAAC,EACA,KAAK;AAAA,CAAI,CAAC;AAAA;AAAA;AAAA,EAAA,EAIhB,KAAK;AAAA,CAAI,GACd,IAxBO;AA0BX,GAEME,IAAeR,EAAkB;AAEvC,SAASS,EAAoB;AAAA,EAC3B,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAtB;AAAA,EACA,WAAAuB,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAZ;AAAA,EACA,SAAAa;AAAA,EACA,UAAAC;AACF,GAA6B;AAC3B,QAAM,EAAE,QAAA5B,EAAA,IAAWN,EAAA,GAEbmC,IAAepC,EAAM,QAAQ,MAAM;AACvC,QAAI6B,KAAa,EAACH,KAAA,QAAAA,EAAS;AACzB,aAAO;AAGT,UAAM,CAACW,CAAI,IAAIX,GACTP,IAAM,GAAGgB,MAAYE,KAAA,gBAAAA,EAAM,aAAWA,KAAA,gBAAAA,EAAM,SAAQ,OAAO,IAC3DjB,IAAakB,EAA4B/B,GAAQ8B,GAAMlB,CAAG,GAC1DoB,KAAS,MAAM;;AACnB,YAAMC,IACJ,CAACL,KAAY,OAAOR,KAAU,aACzBL,IAAAf,EAAOoB,CAA4B,MAAnC,gBAAAL,EAAsC,UAASK,IAChDP,KAAA,gBAAAA,EAAY;AAElB,aAAO,OAAOoB,KAAM,YAAY,OAAOA,KAAM,WAAWA,IAAI;AAAA,IAC9D,GAAA;AAEA,WAAIT,IAEA,gBAAAlB,EAAC,OAAA,EAAI,WAAWD,EAAG,eAAeqB,CAAc,GAC7C,UAAAF,EAAeQ,GAAOb,CAAO,EAAA,CAChC,IAICa,sBAIG,OAAA,EAAI,WAAW3B,EAAG,eAAeqB,CAAc,GAAI,UAAAM,GAAM,IAHxD;AAAA,EAIX,GAAG;AAAA,IACDZ;AAAA,IACAI;AAAA,IACAL;AAAA,IACAG;AAAA,IACAI;AAAA,IACA1B;AAAA,IACA4B;AAAA,EAAA,CACD;AAED,MAAI,CAACV,KAAU,EAACC,KAAA,QAAAA,EAAS;AACvB,WAAO;AAGT,QAAMe,IAAYf,EAAQ,WAAW,KAAKE,MAAc;AAExD,SACE,gBAAAjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAACoC,IAA2B,OAAfL;AAAA,QACd,gBAAAvB,EAAC,SAAI,WAAU,gBACZ,YAAQ,IAAI,CAACwB,GAAMK,MAAU;AAC5B,gBAAMvB,IAAM,GAAGe,KAAWG,EAAK,QAAQA,EAAK,WAAW,OAAO,IACxDjB,IAAakB,EAA4B/B,GAAQ8B,GAAMlB,CAAG,GAC1DwB,IAAiBtB,KAASgB,EAAK,QAAQ,QAAQA,EAAK;AAE1D,iBACE,gBAAAxB;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWD;AAAA,gBACT;AAAA,gBACAgB,MAAc,SAAS;AAAA,cAAA;AAAA,cAGxB,UAAAI,MAAaK,KAAA,gBAAAA,EAAM,WAAU,UAAaA,EAAK,OAC9CL,EAAUK,EAAK,OAAOA,EAAK,MAAMA,GAAMK,GAAOhB,CAAO,IAErD,gBAAAf,EAAAiC,GAAA,EACG,UAAA;AAAA,gBAAAxB,KAAA,QAAAA,EAAY,OACX,gBAAAP,EAACO,EAAW,MAAX,EAAgB,IAEjB,CAACU,KACC,gBAAAjB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWD;AAAA,sBACT;AAAA,sBACA;AAAA,wBACE,eAAegB,MAAc;AAAA,wBAC7B,WAAWA,MAAc;AAAA,wBACzB,uDACEA,MAAc;AAAA,wBAChB,UAAUa,KAAab,MAAc;AAAA,sBAAA;AAAA,oBACvC;AAAA,oBAEF,OACE;AAAA,sBACE,cAAce;AAAA,sBACd,kBAAkBA;AAAA,oBAAA;AAAA,kBACpB;AAAA,gBAAA;AAAA,gBAKR,gBAAAhC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACT;AAAA,sBACA6B,IAAY,cAAc;AAAA,oBAAA;AAAA,oBAG5B,UAAA;AAAA,sBAAA,gBAAA9B,EAAC,OAAA,EAAI,WAAU,gBACZ,UAAA;AAAA,wBAAA8B,IAAYL,IAAe;AAAA,0CAC3B,QAAA,EAAK,WAAU,yBACb,WAAAhB,KAAA,gBAAAA,EAAY,UAASiB,EAAK,KAAA,CAC7B;AAAA,sBAAA,GACF;AAAA,sBACCA,EAAK,SAAS,QACb,gBAAAxB,EAAC,QAAA,EAAK,WAAU,4CACb,UAAAwB,EAAK,MAAM,eAAA,EAAe,CAC7B;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAEJ,EAAA,CACF;AAAA,YAAA;AAAA,YApDGlB;AAAA,UAAA;AAAA,QAwDX,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAM0B,IAAc9B,EAAkB;AAEtC,SAAS+B,EAAmB;AAAA,EAC1B,WAAAzC;AAAA,EACA,UAAA0C,IAAW;AAAA,EACX,SAAArB;AAAA,EACA,eAAAsB,IAAgB;AAAA,EAChB,SAAAd;AACF,GAA4B;AAC1B,QAAM,EAAE,QAAA3B,EAAA,IAAWN,EAAA;AAEnB,SAAKyB,KAAA,QAAAA,EAAS,SAKZ,gBAAAb;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD;AAAA,QACT;AAAA,QACAoC,MAAkB,QAAQ,SAAS;AAAA,QACnC3C;AAAA,MAAA;AAAA,MAGD,UAAAqB,EAAQ,IAAI,CAACW,MAAS;AACrB,cAAMlB,IAAM,GAAGe,KAAWG,EAAK,WAAW,OAAO,IAC3CjB,IAAakB,EAA4B/B,GAAQ8B,GAAMlB,CAAG;AAEhE,eACE,gBAAAR;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWC;AAAA,cACT;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAQ,KAAA,QAAAA,EAAY,QAAQ,CAAC2B,sBACnB3B,EAAW,MAAX,CAAA,CAAgB,IAEjB,gBAAAP;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,iBAAiBwB,EAAK;AAAA,kBAAA;AAAA,gBACxB;AAAA,cAAA;AAAA,cAGHjB,KAAA,gBAAAA,EAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAfRiB,EAAK;AAAA,QAAA;AAAA,MAkBhB,CAAC;AAAA,IAAA;AAAA,EAAA,IAnCI;AAsCX;AAGA,SAASC,EACP/B,GACAmB,GACAP,GACA;AACA,MAAI,OAAOO,KAAY,YAAYA,MAAY;AAC7C;AAGF,QAAMuB,IACJ,aAAavB,KACb,OAAOA,EAAQ,WAAY,YAC3BA,EAAQ,YAAY,OAChBA,EAAQ,UACR;AAEN,MAAIwB,IAAyB/B;AAE7B,SACEA,KAAOO,KACP,OAAOA,EAAQP,CAA2B,KAAM,WAEhD+B,IAAiBxB,EAAQP,CAA2B,IAEpD8B,KACA9B,KAAO8B,KACP,OAAOA,EAAe9B,CAAkC,KAAM,aAE9D+B,IAAiBD,EACf9B,CACF,IAGK+B,KAAkB3C,IACrBA,EAAO2C,CAAc,IACrB3C,EAAOY,CAA0B;AACvC;"}

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

@@ -0,0 +1,70 @@
+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 }) : /* @__PURE__ */ e(u, { size: 16 }) })
+    }
+  );
+  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;
+});
+f.displayName = "Checkbox";
+export {
+  f as Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,70 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import * as d from "react";
+import { TimesIcon as h } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as m } from "../../../lib/utils.js";
+const f = g(
+  "inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] 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]: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: "cursor-pointer 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)]"
+      }
+    },
+    defaultVariants: {
+      variant: "removable"
+    }
+  }
+), x = d.forwardRef(
+  ({
+    className: c,
+    variant: i = "removable",
+    icon: t,
+    selected: a,
+    onRemove: b,
+    removeLabel: s = "Remove",
+    children: u,
+    onKeyDown: e,
+    ...n
+  }, v) => {
+    const l = i === "selectable";
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: v,
+        className: m(f({ variant: i }), c),
+        onKeyDown: (r) => {
+          l && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), e == null || e(r);
+        },
+        ...l ? {
+          role: "button",
+          tabIndex: 0,
+          "aria-pressed": !!a,
+          "data-selected": a ? "true" : void 0
+        } : {},
+        ...n,
+        children: [
+          t,
+          /* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: u }),
+          i === "removable" && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              "aria-label": s,
+              onClick: b,
+              className: "-me-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none",
+              children: /* @__PURE__ */ o(h, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+x.displayName = "Chip";
+export {
+  x as Chip,
+  f as chipVariants
+};
+//# sourceMappingURL=chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` carries a trailing × (remove) button; `selectable` toggles a\n// selected state. 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` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\nconst chipVariants = cva(\n  \"inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] 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]: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          'cursor-pointer 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      },\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    return (\n      <div\n        ref={ref}\n        className={cn(chipVariants({ variant }), className)}\n        onKeyDown={(event) => {\n          // The selectable chip is a div with button semantics; mirror native\n          // button activation so Enter/Space fire its click handler.\n          if (selectable && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            event.currentTarget.click();\n          }\n          onKeyDown?.(event);\n        }}\n        {...(selectable\n          ? {\n              role: 'button',\n              tabIndex: 0,\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 items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n          >\n            <TimesIcon />\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","jsxs","cn","event","jsx","TimesIcon"],"mappings":";;;;;AAgBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;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;AAC/B,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWG,EAAGhB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACa,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBN,KAAA,QAAAA,EAAYM;AAAA,QACd;AAAA,QACC,GAAIH,IACD;AAAA,UACE,MAAM;AAAA,UACN,UAAU;AAAA,UACV,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAR,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYT;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAEV,4BAACW,GAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAjB,EAAK,cAAc;"}

package/dist/components/ui/collapsible/collapsible.js

@@ -0,0 +1,22 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as i from "react";
+import { Collapsible as o } from "@base-ui/react/collapsible";
+import { cn as s } from "../../../lib/utils.js";
+const d = o.Root, C = o.Trigger, r = i.forwardRef(({ className: t, ...e }, l) => /* @__PURE__ */ a(
+  o.Panel,
+  {
+    ref: l,
+    className: s(
+      "overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
+      t
+    ),
+    ...e
+  }
+));
+r.displayName = "CollapsibleContent";
+export {
+  d as Collapsible,
+  r as CollapsibleContent,
+  C as CollapsibleTrigger
+};
+//# sourceMappingURL=collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","sources":["../../../../src/components/ui/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `collapsible`. A thin wrapper over\n// Base UI's Collapsible — a disclosure: a trigger toggles a height-animating panel.\n// No colors of its own (it's the primitive behind Accordion and the sidebars).\nconst Collapsible = CollapsiblePrimitive.Root;\n\nconst CollapsibleTrigger = CollapsiblePrimitive.Trigger;\n\nconst CollapsibleContent = React.forwardRef<\n  React.ElementRef<typeof CollapsiblePrimitive.Panel>,\n  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Panel>\n>(({ className, ...props }, ref) => (\n  <CollapsiblePrimitive.Panel\n    ref={ref}\n    className={cn(\n      'overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0',\n      className\n    )}\n    {...props}\n  />\n));\nCollapsibleContent.displayName = 'CollapsibleContent';\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"names":["Collapsible","CollapsiblePrimitive","CollapsibleTrigger","CollapsibleContent","React","className","props","ref","jsx","cn"],"mappings":";;;;AAUA,MAAMA,IAAcC,EAAqB,MAEnCC,IAAqBD,EAAqB,SAE1CE,IAAqBC,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACP,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAmB,cAAc;"}

package/dist/components/ui/combobox/combobox.js

@@ -0,0 +1,153 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import * as n from "react";
+import { Combobox as o } from "@base-ui/react/combobox";
+import { TimesIcon as x, ChevronDownIcon as v, CheckIcon as g } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as a } from "../../../lib/utils.js";
+import { usePortalContainer as h } from "../../../lib/portal-container.js";
+function f(r) {
+  return /* @__PURE__ */ e(o.Root, { ...r });
+}
+f.displayName = "Combobox";
+const w = n.forwardRef(({ className: r, containerClassName: i, clearable: t, ...l }, d) => (
+  // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to
+  // the box's left edge rather than to the bare input inside the box padding.
+  /* @__PURE__ */ s(
+    o.InputGroup,
+    {
+      className: a(
+        "group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 transition-colors",
+        "not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]",
+        "has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]",
+        "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]",
+        "has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]",
+        i
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          o.Input,
+          {
+            ref: d,
+            className: a(
+              "min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]",
+              r
+            ),
+            ...l
+          }
+        ),
+        t && /* @__PURE__ */ e(
+          o.Clear,
+          {
+            "aria-label": "Clear",
+            className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden",
+            children: /* @__PURE__ */ e(x, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ e(
+          o.Trigger,
+          {
+            "aria-label": "Toggle",
+            className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]",
+            children: /* @__PURE__ */ e(
+              v,
+              {
+                size: 16,
+                className: "transition-transform group-has-[input[aria-expanded=true]]:rotate-180"
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+));
+w.displayName = "ComboboxInput";
+const C = n.forwardRef(
+  ({ className: r, children: i, sideOffset: t = 4, align: l = "start", side: d = "bottom", portalContainer: c, ...u }, p) => {
+    const b = h(), m = c ?? b;
+    return /* @__PURE__ */ e(o.Portal, { container: m, children: /* @__PURE__ */ e(
+      o.Positioner,
+      {
+        sideOffset: t,
+        align: l,
+        side: d,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ e(
+          o.Popup,
+          {
+            ref: p,
+            className: a(
+              "max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none",
+              r
+            ),
+            ...u,
+            children: i
+          }
+        )
+      }
+    ) });
+  }
+);
+C.displayName = "ComboboxContent";
+const y = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
+  o.List,
+  {
+    ref: t,
+    className: a("flex flex-col", r),
+    ...i
+  }
+));
+y.displayName = "ComboboxList";
+const N = n.forwardRef(({ className: r, children: i, ...t }, l) => /* @__PURE__ */ s(
+  o.Item,
+  {
+    ref: l,
+    className: a(
+      "relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none",
+      "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
+      "data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]",
+      "data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]",
+      r
+    ),
+    ...t,
+    children: [
+      /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: i }),
+      /* @__PURE__ */ e(o.ItemIndicator, { className: "flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]", children: /* @__PURE__ */ e(g, { size: 16 }) })
+    ]
+  }
+));
+N.displayName = "ComboboxItem";
+const I = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
+  o.Empty,
+  {
+    ref: t,
+    className: a(
+      "px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0",
+      r
+    ),
+    ...i
+  }
+));
+I.displayName = "ComboboxEmpty";
+const E = o.Group, R = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
+  o.GroupLabel,
+  {
+    ref: t,
+    className: a(
+      "px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]",
+      r
+    ),
+    ...i
+  }
+));
+R.displayName = "ComboboxGroupLabel";
+export {
+  f as Combobox,
+  C as ComboboxContent,
+  I as ComboboxEmpty,
+  E as ComboboxGroup,
+  R as ComboboxGroupLabel,
+  w as ComboboxInput,
+  N as ComboboxItem,
+  y as ComboboxList
+};
+//# sourceMappingURL=combobox.js.map