@acronis-platform/ui-react 0.57.0 → 0.58.0

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)] 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)]"
+      }
+    },
+    defaultVariants: {
+      variant: "removable"
+    }
+  }
+), x = d.forwardRef(
+  ({
+    className: c,
+    variant: e = "removable",
+    icon: t,
+    selected: a,
+    onRemove: b,
+    removeLabel: s = "Remove",
+    children: n,
+    onKeyDown: i,
+    ...u
+  }, v) => {
+    const l = e === "selectable";
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: v,
+        className: m(f({ variant: e }), c),
+        onKeyDown: (r) => {
+          l && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), i == null || i(r);
+        },
+        ...l ? {
+          role: "button",
+          tabIndex: 0,
+          "aria-pressed": !!a,
+          "data-selected": a ? "true" : void 0
+        } : {},
+        ...u,
+        children: [
+          t,
+          /* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: n }),
+          e === "removable" && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              "aria-label": s,
+              onClick: b,
+              className: "-me-1 flex shrink-0 cursor-pointer 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)] 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      },\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 cursor-pointer 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A searchable single/multi-select built on Base UI's Combobox primitive. The\n// legacy `combobox` was only a hardcoded Popover + cmdk demo; this is a real,\n// reusable component. There is no `--ui-combobox-*` tier, so it reuses the\n// `--ui-input-select-*` tokens (already imported) — the field box, dropdown\n// container, and items match InputSelect, the non-searchable sibling. The Root\n// auto-extracts `{ value, label }` items and filters them by the input value.\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>\n) {\n  return <ComboboxPrimitive.Root {...props} />;\n}\nCombobox.displayName = 'Combobox';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>,\n    'className'\n  > {\n  className?: string;\n  /** Wrapper (box) className. */\n  containerClassName?: string;\n  /** Show a clear (✕) button while the field has a value. */\n  clearable?: boolean;\n}\n\n// The field box: a typeable input + a clear button (optional) + a chevron trigger.\nconst ComboboxInput = React.forwardRef<\n  HTMLInputElement,\n  ComboboxInputProps\n>(({ className, containerClassName, clearable, ...props }, ref) => (\n  // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to\n  // the box's left edge rather than to the bare input inside the box padding.\n  <ComboboxPrimitive.InputGroup\n    className={cn(\n      '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',\n      '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)]',\n      '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)]',\n      '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)]',\n      '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)]',\n      containerClassName\n    )}\n  >\n    <ComboboxPrimitive.Input\n      ref={ref}\n      className={cn(\n        '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)]',\n        className\n      )}\n      {...props}\n    />\n    {clearable && (\n      <ComboboxPrimitive.Clear\n        aria-label=\"Clear\"\n        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\"\n      >\n        <TimesIcon size={16} />\n      </ComboboxPrimitive.Clear>\n    )}\n    <ComboboxPrimitive.Trigger\n      aria-label=\"Toggle\"\n      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)]\"\n    >\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-has-[input[aria-expanded=true]]:rotate-180\"\n      />\n    </ComboboxPrimitive.Trigger>\n  </ComboboxPrimitive.InputGroup>\n));\nComboboxInput.displayName = 'ComboboxInput';\n\nexport interface ComboboxContentProps\n  extends React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup> {\n  sideOffset?: number;\n  align?: ComboboxPrimitive.Positioner.Props['align'];\n  side?: ComboboxPrimitive.Positioner.Props['side'];\n  /** Container to portal into (e.g. a shadow root, so the popup inherits styles). */\n  portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nconst ComboboxContent = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Popup>,\n  ComboboxContentProps\n>(\n  (\n    { className, children, sideOffset = 4, align = 'start', side = 'bottom', portalContainer, ...props },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <ComboboxPrimitive.Portal container={resolvedContainer}>\n      <ComboboxPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        className=\"z-50 outline-none\"\n      >\n        <ComboboxPrimitive.Popup\n          ref={ref}\n          className={cn(\n            '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',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n    );\n  }\n);\nComboboxContent.displayName = 'ComboboxContent';\n\nconst ComboboxList = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.List\n    ref={ref}\n    className={cn('flex flex-col', className)}\n    {...props}\n  />\n));\nComboboxList.displayName = 'ComboboxList';\n\nconst ComboboxItem = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <ComboboxPrimitive.Item\n    ref={ref}\n    className={cn(\n      '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',\n      'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n      '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)]',\n      'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n    <ComboboxPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]\">\n      <CheckIcon size={16} />\n    </ComboboxPrimitive.ItemIndicator>\n  </ComboboxPrimitive.Item>\n));\nComboboxItem.displayName = 'ComboboxItem';\n\nconst ComboboxEmpty = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.Empty\n    ref={ref}\n    className={cn(\n      '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',\n      className\n    )}\n    {...props}\n  />\n));\nComboboxEmpty.displayName = 'ComboboxEmpty';\n\nconst ComboboxGroup = ComboboxPrimitive.Group;\n\nconst ComboboxGroupLabel = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      '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)]',\n      className\n    )}\n    {...props}\n  />\n));\nComboboxGroupLabel.displayName = 'ComboboxGroupLabel';\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n};\n"],"names":["Combobox","props","jsx","ComboboxPrimitive","ComboboxInput","React","className","containerClassName","clearable","ref","jsxs","cn","TimesIcon","ChevronDownIcon","ComboboxContent","children","sideOffset","align","side","portalContainer","ctxContainer","usePortalContainer","resolvedContainer","ComboboxList","ComboboxItem","CheckIcon","ComboboxEmpty","ComboboxGroup","ComboboxGroupLabel"],"mappings":"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"}

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

@@ -0,0 +1,107 @@
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import * as K from "react";
+import { ComposedChart as L, CartesianGrid as T, XAxis as N, YAxis as j, Bar as w, Area as B, Line as $ } from "recharts";
+import { cn as z } from "../../../lib/utils.js";
+import { ChartContainer as G, ChartTooltip as M, ChartTooltipContent as W, ChartLegend as X, ChartLegendContent as Y } from "../chart/chart.js";
+const _ = K.forwardRef(
+  ({
+    className: l,
+    config: s,
+    data: d,
+    series: f,
+    xKey: m,
+    xAxisLabel: o,
+    yAxisLabel: r,
+    yUnit: c,
+    curve: n = "monotone",
+    barRadius: a = 4,
+    fillOpacity: p = 0.3,
+    showGrid: y = !0,
+    showTooltip: h = !0,
+    showLegend: C = !0,
+    tooltipContent: k,
+    ...v
+  }, u) => {
+    const A = o ? { value: o, position: "insideBottom", offset: 0 } : void 0, g = r ? {
+      value: r,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0;
+    return /* @__PURE__ */ e("div", { ref: u, className: z(l), ...v, children: /* @__PURE__ */ e(
+      G,
+      {
+        config: s,
+        className: "size-full [&_.recharts-label]:fill-foreground",
+        children: /* @__PURE__ */ x(L, { data: d, children: [
+          y && /* @__PURE__ */ e(T, { vertical: !1 }),
+          /* @__PURE__ */ e(
+            N,
+            {
+              dataKey: m,
+              type: "category",
+              tickLine: !1,
+              axisLine: !1,
+              tickMargin: 8,
+              height: o ? 48 : void 0,
+              label: A
+            }
+          ),
+          /* @__PURE__ */ e(
+            j,
+            {
+              type: "number",
+              tickLine: !1,
+              axisLine: !1,
+              unit: c,
+              width: r ? 72 : void 0,
+              label: g
+            }
+          ),
+          h && /* @__PURE__ */ e(M, { content: k ?? /* @__PURE__ */ e(W, {}) }),
+          C && /* @__PURE__ */ e(X, { content: /* @__PURE__ */ e(Y, {}) }),
+          f.map((t) => {
+            const i = `var(--color-${t.key})`;
+            return t.type === "bar" ? /* @__PURE__ */ e(
+              w,
+              {
+                dataKey: t.key,
+                fill: i,
+                radius: a > 0 ? [a, a, 0, 0] : void 0,
+                isAnimationActive: !1
+              },
+              t.key
+            ) : t.type === "area" ? /* @__PURE__ */ e(
+              B,
+              {
+                type: n,
+                dataKey: t.key,
+                stroke: i,
+                fill: i,
+                fillOpacity: p,
+                isAnimationActive: !1
+              },
+              t.key
+            ) : /* @__PURE__ */ e(
+              $,
+              {
+                type: n,
+                dataKey: t.key,
+                stroke: i,
+                strokeWidth: 2,
+                dot: !1,
+                isAnimationActive: !1
+              },
+              t.key
+            );
+          })
+        ] })
+      }
+    ) });
+  }
+);
+_.displayName = "ComposedChart";
+export {
+  _ as ComposedChart
+};
+//# sourceMappingURL=composed-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composed-chart.js","sources":["../../../../src/components/ui/composed-chart/composed-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Area,\n  Bar,\n  CartesianGrid,\n  ComposedChart as RechartsComposedChart,\n  Line,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. A composed\n// chart's defining trait is that each series picks its own render type\n// (bar / line / area) over one shared category axis — so, like ScatterChart,\n// there's no single visual \"mode\" to model as a CVA variant (the skill's\n// \"per-series type\"). The variation lives in the `series[].type` list instead.\nexport type ComposedSeriesType = 'bar' | 'line' | 'area';\n\nexport interface ComposedSeries {\n  /** Column key to plot — must match a `config` entry; drives its `--color-<key>` paint. */\n  key: string;\n  /** How this series renders. */\n  type: ComposedSeriesType;\n}\n\nexport interface ComposedChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** Row-per-category data. Each object holds `xKey` + one numeric field per series. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-series map of `label` / `color`, keyed by `series[].key` (imported from\n   * the shared `Chart` primitives). Turned into `--color-<key>` custom\n   * properties. Colors are caller-supplied — reference an existing semantic\n   * `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Series to plot, each `{ key, type }` — one bar/line/area per entry. Each key must exist in `config` and every data row. */\n  series: ComposedSeries[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /** Title rendered beneath the horizontal (X) axis. */\n  xAxisLabel?: string;\n  /** Title rendered beside the vertical (Y) axis (rotated). */\n  yAxisLabel?: string;\n  /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */\n  yUnit?: string;\n  /** Interpolation for the line and area series. */\n  curve?: 'linear' | 'monotone' | 'step';\n  /** Corner radius on the growing end of bar series. */\n  barRadius?: number;\n  /** Flat-fill opacity for area series. */\n  fillOpacity?: number;\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /\n   * `indicator` — to customize formatting, per-series rows, or extra fields\n   * without composing recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst ComposedChart = React.forwardRef<HTMLDivElement, ComposedChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      series,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      curve = 'monotone',\n      barRadius = 4,\n      fillOpacity = 0.3,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsComposedChart data={data as readonly unknown[]}>\n            {showGrid && <CartesianGrid vertical={false} />}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              height={xAxisLabel ? 48 : undefined}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {/* Rendered in the caller's `series` order — recharts paints children\n                back-to-front, so later entries sit on top. Order them so thin\n                marks (a line) come after the areas/bars they should overlay. */}\n            {series.map((s) => {\n              const color = `var(--color-${s.key})`;\n              if (s.type === 'bar') {\n                return (\n                  <Bar\n                    key={s.key}\n                    dataKey={s.key}\n                    fill={color}\n                    radius={\n                      barRadius > 0\n                        ? [barRadius, barRadius, 0, 0]\n                        : undefined\n                    }\n                    isAnimationActive={false}\n                  />\n                );\n              }\n              if (s.type === 'area') {\n                return (\n                  <Area\n                    key={s.key}\n                    type={curve}\n                    dataKey={s.key}\n                    stroke={color}\n                    fill={color}\n                    fillOpacity={fillOpacity}\n                    isAnimationActive={false}\n                  />\n                );\n              }\n              return (\n                <Line\n                  key={s.key}\n                  type={curve}\n                  dataKey={s.key}\n                  stroke={color}\n                  strokeWidth={2}\n                  dot={false}\n                  isAnimationActive={false}\n                />\n              );\n            })}\n          </RechartsComposedChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nComposedChart.displayName = 'ComposedChart';\n\nexport { ComposedChart };\n"],"names":["ComposedChart","React","className","config","data","series","xKey","xAxisLabel","yAxisLabel","yUnit","curve","barRadius","fillOpacity","showGrid","showTooltip","showLegend","tooltipContent","props","ref","xAxisTitle","yAxisTitle","jsx","cn","ChartContainer","jsxs","RechartsComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","s","color","Bar","Area","Line"],"mappings":";;;;;AA4EA,MAAMA,IAAgBC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAaZ,IACf,EAAE,OAAOA,GAAY,UAAU,gBAAyB,QAAQ,EAAA,IAChE,QACEa,IAAaZ,IACf;AAAA,MACE,OAAOA;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO,EAAE,YAAY,SAAA;AAAA,IAAkB,IAEzC;AAEJ,WACE,gBAAAa,EAAC,SAAI,KAAAH,GAAU,WAAWI,EAAGpB,CAAS,GAAI,GAAGe,GAC3C,UAAA,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAApB;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAqB,EAACC,KAAsB,MAAArB,GACpB,UAAA;AAAA,UAAAS,KAAY,gBAAAQ,EAACK,GAAA,EAAc,UAAU,GAAA,CAAO;AAAA,UAC7C,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,SAASrB;AAAA,cACT,MAAK;AAAA,cACL,UAAU;AAAA,cACV,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,QAAQC,IAAa,KAAK;AAAA,cAC1B,OAAOY;AAAA,YAAA;AAAA,UAAA;AAAA,UAET,gBAAAE;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,UAAU;AAAA,cACV,MAAMnB;AAAA,cACN,OAAOD,IAAa,KAAK;AAAA,cACzB,OAAOY;AAAA,YAAA;AAAA,UAAA;AAAA,UAERN,KACC,gBAAAO,EAACQ,GAAA,EAAa,SAASb,KAAkB,gBAAAK,EAACS,KAAoB,GAAI;AAAA,UAEnEf,KAAc,gBAAAM,EAACU,GAAA,EAAY,SAAS,gBAAAV,EAACW,KAAmB,GAAI;AAAA,UAI5D3B,EAAO,IAAI,CAAC4B,MAAM;AACjB,kBAAMC,IAAQ,eAAeD,EAAE,GAAG;AAClC,mBAAIA,EAAE,SAAS,QAEX,gBAAAZ;AAAA,cAACc;AAAA,cAAA;AAAA,gBAEC,SAASF,EAAE;AAAA,gBACX,MAAMC;AAAA,gBACN,QACEvB,IAAY,IACR,CAACA,GAAWA,GAAW,GAAG,CAAC,IAC3B;AAAA,gBAEN,mBAAmB;AAAA,cAAA;AAAA,cARdsB,EAAE;AAAA,YAAA,IAYTA,EAAE,SAAS,SAEX,gBAAAZ;AAAA,cAACe;AAAA,cAAA;AAAA,gBAEC,MAAM1B;AAAA,gBACN,SAASuB,EAAE;AAAA,gBACX,QAAQC;AAAA,gBACR,MAAMA;AAAA,gBACN,aAAAtB;AAAA,gBACA,mBAAmB;AAAA,cAAA;AAAA,cANdqB,EAAE;AAAA,YAAA,IAWX,gBAAAZ;AAAA,cAACgB;AAAA,cAAA;AAAA,gBAEC,MAAM3B;AAAA,gBACN,SAASuB,EAAE;AAAA,gBACX,QAAQC;AAAA,gBACR,aAAa;AAAA,gBACb,KAAK;AAAA,gBACL,mBAAmB;AAAA,cAAA;AAAA,cANdD,EAAE;AAAA,YAAA;AAAA,UASb,CAAC;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AACAjC,EAAc,cAAc;"}

package/dist/components/ui/confidence-cone/confidence-cone.js

@@ -0,0 +1,195 @@
+import { jsx as e, jsxs as M } from "react/jsx-runtime";
+import * as c from "react";
+import { ComposedChart as X, CartesianGrid as Y, XAxis as z, YAxis as G, ReferenceArea as S, ReferenceLine as q, Area as T, Line as F } from "recharts";
+import { cn as H } from "../../../lib/utils.js";
+import { ChartContainer as I, ChartTooltip as b, ChartTooltipContent as J, ChartLegend as P, ChartLegendContent as Q } from "../chart/chart.js";
+const u = "__cone";
+function m(t) {
+  return t == null ? void 0 : t.filter((a) => a.dataKey !== u);
+}
+function U(t) {
+  return function(n) {
+    const r = {
+      ...n,
+      payload: m(n.payload)
+    };
+    return typeof t == "function" ? c.createElement(
+      t,
+      r
+    ) : c.cloneElement(t, r);
+  };
+}
+const V = c.forwardRef(
+  ({
+    className: t,
+    config: a,
+    data: n,
+    xKey: r,
+    actualKey: i,
+    forecastKey: p,
+    lowerKey: x,
+    upperKey: D,
+    xAxisLabel: s,
+    yAxisLabel: f,
+    yUnit: N,
+    strokeWidth: v = 2,
+    showForecastRegion: L = !0,
+    showGrid: O = !0,
+    showTooltip: R = !0,
+    showLegend: _ = !0,
+    tooltipContent: d,
+    ...$
+  }, B) => {
+    var C, g;
+    const y = c.useMemo(
+      () => d ? U(d) : void 0,
+      [d]
+    ), E = s ? { value: s, position: "insideBottom", offset: 0 } : void 0, j = f ? {
+      value: f,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0, w = n.map((o) => {
+      const A = o[x], k = o[D];
+      return {
+        ...o,
+        [u]: typeof A == "number" && typeof k == "number" ? [A, k] : void 0
+      };
+    }), l = L ? (C = n.find((o) => typeof o[p] == "number")) == null ? void 0 : C[r] : void 0, h = (g = n[n.length - 1]) == null ? void 0 : g[r];
+    return /* @__PURE__ */ e("div", { ref: B, className: H(t), ...$, children: /* @__PURE__ */ e(
+      I,
+      {
+        config: a,
+        className: "size-full [&_.recharts-label]:fill-foreground",
+        children: /* @__PURE__ */ M(X, { data: w, children: [
+          O && /* @__PURE__ */ e(Y, { vertical: !1 }),
+          /* @__PURE__ */ e(
+            z,
+            {
+              dataKey: r,
+              type: "category",
+              tickLine: !1,
+              axisLine: !1,
+              tickMargin: 8,
+              height: s ? 48 : void 0,
+              label: E
+            }
+          ),
+          /* @__PURE__ */ e(
+            G,
+            {
+              type: "number",
+              tickLine: !1,
+              axisLine: !1,
+              unit: N,
+              width: f ? 72 : void 0,
+              label: j
+            }
+          ),
+          l != null && h != null && /* @__PURE__ */ e(
+            S,
+            {
+              x1: l,
+              x2: h,
+              fill: "var(--ui-background-surface-secondary)",
+              fillOpacity: 0.5,
+              ifOverflow: "extendDomain"
+            }
+          ),
+          l != null && /* @__PURE__ */ e(
+            q,
+            {
+              x: l,
+              stroke: "var(--ui-border-on-surface-border)",
+              strokeDasharray: "4 4"
+            }
+          ),
+          R && (y ? (
+            // Strips the synthetic band before the caller's tooltip sees it
+            // — the `__cone` series feeds the Area, not the tooltip.
+            /* @__PURE__ */ e(b, { content: y })
+          ) : /* @__PURE__ */ e(
+            b,
+            {
+              content: (o) => /* @__PURE__ */ e(
+                J,
+                {
+                  active: o.active,
+                  label: o.label,
+                  payload: m(
+                    o.payload
+                  )
+                }
+              )
+            }
+          )),
+          _ && /* @__PURE__ */ e(
+            P,
+            {
+              content: (o) => /* @__PURE__ */ e(
+                Q,
+                {
+                  verticalAlign: o.verticalAlign,
+                  payload: m(
+                    o.payload
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            T,
+            {
+              dataKey: u,
+              type: "monotone",
+              stroke: "none",
+              fill: `var(--color-${i})`,
+              fillOpacity: 0.15,
+              connectNulls: !1,
+              dot: !1,
+              activeDot: !1,
+              isAnimationActive: !1,
+              legendType: "none",
+              tooltipType: "none"
+            }
+          ),
+          /* @__PURE__ */ e(
+            T,
+            {
+              dataKey: i,
+              type: "monotone",
+              stroke: `var(--color-${i})`,
+              strokeWidth: v,
+              fill: `var(--color-${i})`,
+              fillOpacity: 0.15,
+              dot: !1,
+              activeDot: !1,
+              connectNulls: !0,
+              isAnimationActive: !1
+            }
+          ),
+          /* @__PURE__ */ e(
+            F,
+            {
+              dataKey: p,
+              type: "monotone",
+              stroke: `var(--color-${i})`,
+              strokeWidth: v,
+              strokeDasharray: "5 5",
+              dot: !1,
+              connectNulls: !0,
+              isAnimationActive: !1
+            }
+          )
+        ] })
+      }
+    ) });
+  }
+);
+V.displayName = "ConfidenceCone";
+export {
+  V as ConfidenceCone,
+  U as createConeTooltip,
+  m as dropConeBand
+};
+//# sourceMappingURL=confidence-cone.js.map