@acronis-platform/ui-react 0.57.0 → 0.58.0

package/dist/components/ui/toggle-group/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sources":["../../../../src/components/ui/toggle-group/toggle-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform`'s `toggle-group`, on Base UI's Toggle /\n// ToggleGroup. No `--ui-toggle-*` tier — semantic tokens. The shared item style is\n// transparent when idle, the hover surface on hover, and the active surface +\n// foreground when pressed (legacy's `bg-muted` hover is near-white in ui-react, so\n// hover uses the visible surface-hover and the pressed state uses surface-active so\n// it reads as selected, distinct from hover).\nconst toggleItemClassName = cn(\n  'inline-flex h-9 select-none items-center justify-center gap-2 rounded-md border border-transparent bg-transparent px-3 text-sm font-medium text-[var(--ui-text-on-surface-primary)] transition-colors outline-none',\n  'not-disabled:hover:bg-[var(--ui-background-surface-hover)]',\n  'focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]',\n  'data-pressed:bg-[var(--ui-background-surface-active)] data-pressed:text-[var(--ui-text-on-surface-primary)]',\n  'disabled:pointer-events-none disabled:opacity-50'\n);\n\nconst Toggle = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive>\n>(({ className, ...props }, ref) => (\n  <TogglePrimitive\n    ref={ref}\n    className={cn(toggleItemClassName, className)}\n    {...props}\n  />\n));\nToggle.displayName = 'Toggle';\n\nconst ToggleGroup = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive>\n>(({ className, ...props }, ref) => (\n  <ToggleGroupPrimitive\n    ref={ref}\n    className={cn(\n      'inline-flex items-center gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n      className\n    )}\n    {...props}\n  />\n));\nToggleGroup.displayName = 'ToggleGroup';\n\nconst ToggleGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive>\n>(({ className, ...props }, ref) => (\n  <TogglePrimitive\n    ref={ref}\n    className={cn(toggleItemClassName, className)}\n    {...props}\n  />\n));\nToggleGroupItem.displayName = 'ToggleGroupItem';\n\nexport { Toggle, ToggleGroup, ToggleGroupItem };\n"],"names":["toggleItemClassName","cn","Toggle","React","className","props","ref","jsx","TogglePrimitive","ToggleGroup","ToggleGroupPrimitive","ToggleGroupItem"],"mappings":";;;;;AAcA,MAAMA,IAAsBC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWL,EAAGD,GAAqBI,CAAS;AAAA,IAC3C,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAO,cAAc;AAErB,MAAMO,IAAcN,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACG;AAAAA,EAAA;AAAA,IACC,KAAAJ;AAAA,IACA,WAAWL;AAAA,MACT;AAAA,MACAG;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAY,cAAc;AAE1B,MAAME,IAAkBR,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWL,EAAGD,GAAqBI,CAAS;AAAA,IAC3C,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAgB,cAAc;"}

package/dist/components/ui/toolbar/toolbar.js

@@ -0,0 +1,214 @@
+import { jsx as a, jsxs as R } from "react/jsx-runtime";
+import * as l from "react";
+import { Toolbar as v } from "@base-ui/react/toolbar";
+import { cn as T } from "../../../lib/utils.js";
+import { Button as x } from "../button/button.js";
+import { DropdownMenu as F, DropdownMenuTrigger as L, DropdownMenuContent as _, DropdownMenuItem as I } from "../dropdown-menu/dropdown-menu.js";
+import { ButtonMenu as A } from "../button-menu/button-menu.js";
+const j = l.forwardRef(
+  ({ className: r, ...t }, n) => /* @__PURE__ */ a(
+    "fieldset",
+    {
+      ref: n,
+      className: T(
+        "m-0 flex min-w-0 items-center gap-4 border-0 p-0",
+        r
+      ),
+      ...t
+    }
+  )
+);
+j.displayName = "Toolbar";
+const P = l.forwardRef(
+  ({ className: r, ...t }, n) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: n,
+      className: T(
+        "flex grow shrink-0 items-center justify-end gap-2 whitespace-nowrap",
+        r
+      ),
+      ...t
+    }
+  )
+);
+P.displayName = "ToolbarActions";
+const M = 16;
+function X(r, t, n, m) {
+  const d = r.length;
+  if (d === 0) return 0;
+  if (r.reduce((c, h) => c + h, 0) + n * (d - 1) <= m) return d;
+  let o = t, s = 0;
+  for (let c = 0; c < d; c++) {
+    const h = o + r[c] + n;
+    if (h > m) break;
+    o = h, s++;
+  }
+  return s;
+}
+function G(r) {
+  const t = Array.from(r.childNodes).filter(
+    (o) => {
+      var s;
+      return o.nodeType === Node.ELEMENT_NODE || o.nodeType === Node.TEXT_NODE && !!((s = o.textContent) != null && s.trim());
+    }
+  );
+  if (t.length === 0) return r.getBoundingClientRect().width;
+  const n = getComputedStyle(r), m = parseFloat(n.columnGap) || 0, d = (parseFloat(n.paddingLeft) || 0) + (parseFloat(n.paddingRight) || 0) + (parseFloat(n.borderLeftWidth) || 0) + (parseFloat(n.borderRightWidth) || 0);
+  return t.map((o) => {
+    if (o.nodeType === Node.TEXT_NODE) {
+      const s = document.createRange();
+      return s.selectNodeContents(o), s.getBoundingClientRect().width;
+    }
+    return o.getBoundingClientRect().width;
+  }).reduce((o, s) => o + s, 0) + m * (t.length - 1) + d;
+}
+function V(...r) {
+  return (t) => {
+    for (const n of r)
+      n && (typeof n == "function" ? n(t) : n.current = t);
+  };
+}
+const z = l.forwardRef(
+  ({ className: r, actions: t, moreActionsLabel: n = "More actions", ...m }, d) => {
+    const u = l.useRef(null), o = l.useRef(
+      /* @__PURE__ */ new Map()
+    ), s = l.useRef(null), [c, h] = l.useState(t.length), [k, C] = l.useState(!1), [g, B] = l.useState(!1);
+    l.useEffect(() => {
+      var p;
+      const e = (p = u.current) == null ? void 0 : p.closest("fieldset");
+      if (!e) return;
+      const i = () => B(e.disabled);
+      i();
+      const f = new MutationObserver(i);
+      return f.observe(e, {
+        attributes: !0,
+        attributeFilter: ["disabled"]
+      }), () => f.disconnect();
+    }, []), l.useEffect(() => {
+      g && C(!1);
+    }, [g]);
+    const y = l.useCallback(() => {
+      var E;
+      const e = u.current, i = e == null ? void 0 : e.parentElement;
+      if (!e || !i) return;
+      const f = Array.from(i.children).filter((b) => b !== e).reduce((b, w) => b + G(w), 0), p = Math.max(i.children.length - 1, 0), O = i.clientWidth - f - M * p, S = t.map(
+        (b) => {
+          var w;
+          return ((w = o.current.get(b.key)) == null ? void 0 : w.getBoundingClientRect().width) ?? 0;
+        }
+      ), W = ((E = s.current) == null ? void 0 : E.getBoundingClientRect().width) ?? 0;
+      h(
+        X(
+          S,
+          W,
+          M,
+          O
+        )
+      );
+    }, [t]);
+    l.useLayoutEffect(() => {
+      var f;
+      y();
+      const e = (f = u.current) == null ? void 0 : f.parentElement;
+      if (!e) return;
+      const i = new ResizeObserver(y);
+      return i.observe(e), Array.from(e.children).forEach((p) => {
+        p !== u.current && i.observe(p);
+      }), () => i.disconnect();
+    }, [y, t]);
+    const D = t.slice(0, c), N = t.slice(c);
+    return /* @__PURE__ */ R(
+      v.Root,
+      {
+        ref: V(u, d),
+        className: T(
+          // `overflow-hidden` clips the invisible measurement clone below —
+          // it's `position: absolute` + `visibility: hidden`, which keeps
+          // contributing to this element's scrollable overflow (and thus a
+          // real horizontal scrollbar on a narrow container/page) unless
+          // something in the ancestor chain clips it. Visible content is
+          // already sized to fit `availableWidth` by the collapse math, so
+          // clipping never affects anything actually shown.
+          "relative flex min-w-0 flex-nowrap items-center gap-4 overflow-hidden",
+          r
+        ),
+        ...m,
+        children: [
+          D.map((e) => /* @__PURE__ */ a(
+            v.Button,
+            {
+              disabled: e.disabled,
+              focusableWhenDisabled: !e.disabled,
+              onClick: e.onSelect,
+              render: /* @__PURE__ */ a(x, { variant: "ghost", children: e.label })
+            },
+            e.key
+          )),
+          N.length > 0 && /* @__PURE__ */ R(
+            F,
+            {
+              open: k,
+              onOpenChange: C,
+              disabled: g,
+              children: [
+                /* @__PURE__ */ a(
+                  v.Button,
+                  {
+                    render: /* @__PURE__ */ a(
+                      L,
+                      {
+                        render: /* @__PURE__ */ a(A, { variant: "secondary", children: n })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ a(_, { align: "start", children: N.map((e) => /* @__PURE__ */ a(
+                  I,
+                  {
+                    disabled: e.disabled || g,
+                    onClick: e.onSelect,
+                    children: e.label
+                  },
+                  e.key
+                )) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ R(
+            "div",
+            {
+              "aria-hidden": !0,
+              inert: !0,
+              className: "pointer-events-none invisible absolute start-0 top-0 flex items-center gap-4",
+              children: [
+                t.map((e) => /* @__PURE__ */ a(
+                  x,
+                  {
+                    ref: (i) => {
+                      o.current.set(e.key, i);
+                    },
+                    variant: "ghost",
+                    tabIndex: -1,
+                    children: e.label
+                  },
+                  e.key
+                )),
+                /* @__PURE__ */ a(A, { ref: s, variant: "secondary", tabIndex: -1, children: n })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+z.displayName = "ToolbarActionList";
+export {
+  j as Toolbar,
+  z as ToolbarActionList,
+  P as ToolbarActions,
+  X as computeVisibleActionCount,
+  G as measureNaturalWidth
+};
+//# sourceMappingURL=toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sources":["../../../../src/components/ui/toolbar/toolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '../button';\nimport { ButtonMenu } from '../button-menu';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\n// Mirrors the Figma \"Toolbar\" component (node 3897:7199): a horizontal action\n// row — list actions, an optional overflow control (e.g. a `ButtonMenu`), and\n// an optional trailing area (`ToolbarActions`: a status text or a selection\n// counter + action) — typically shown above/below a list or table when rows\n// are selected or bulk actions are available. Every action is an existing\n// `Button`/`ButtonMenu` instance in Figma, so this component only lays them\n// out and carries no dedicated `--ui-toolbar-*` token tier; the 16px\n// inter-item gap is the Figma `gap/gap-16` semantic token, left un-tokenized —\n// same precedent as `FilterSearch`'s identical gap.\n//\n// The Figma `state: active | disabled` variant is the native `disabled`\n// attribute here: the root renders as a `<fieldset>` (reset to look like a\n// flex row) so every nested `Button`/`ButtonMenu` disables via the platform's\n// own fieldset-disables-descendants behavior — no prop-drilling into\n// arbitrary children required.\n//\n// `min-w-0` is required, not cosmetic: browsers give `<fieldset>` an\n// intrinsic `min-width: min-content` that Tailwind's reset doesn't touch, so\n// without it the fieldset refuses to shrink below its content's natural\n// width. `ToolbarActionList`'s collapse math reads this fieldset's own\n// `clientWidth` as \"available space\" — without `min-w-0` the fieldset\n// balloons to fit every action before that measurement ever runs, so it\n// always measures \"everything fits\" and the row never collapses.\n\nexport type ToolbarProps = React.ComponentPropsWithoutRef<'fieldset'>;\n\nconst Toolbar = React.forwardRef<HTMLFieldSetElement, ToolbarProps>(\n  ({ className, ...props }, ref) => (\n    <fieldset\n      ref={ref}\n      className={cn(\n        'm-0 flex min-w-0 items-center gap-4 border-0 p-0',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nToolbar.displayName = 'Toolbar';\n\n// Trailing, right-aligned area — a status text (e.g. \"25 of 1250 items\n// loaded\") or a selection counter + action (e.g. \"6 items selected: Deselect\").\n// 8px inter-child gap matches the Figma Counter part's own gap. `whitespace-nowrap`\n// is required, not cosmetic: the Figma \"Counter\" part is always single-line, but a\n// plain-text child (e.g. a `<span>`) defaults to `white-space: normal` — without\n// this, the text wraps mid-phrase once the row shrinks below its content's natural\n// width (`white-space` is inherited, so it cascades to children without them\n// needing their own override).\n//\n// `grow shrink-0` (not `flex-1`, which also shrinks): this area must grow to fill\n// leftover space so `justify-end` can right-align it, but must never shrink below\n// its own content's natural width. `ToolbarActionList`'s auto-collapse math reads\n// this element's *rendered* width as the space it needs to reserve — if it could\n// shrink, that measurement would be a moving target (less room reserved than the\n// content actually needs), so the actions row would under-collapse and this area's\n// (nowrap, unshrinkable) content would overflow past its own box instead.\nexport type ToolbarActionsProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst ToolbarActions = React.forwardRef<HTMLDivElement, ToolbarActionsProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex grow shrink-0 items-center justify-end gap-2 whitespace-nowrap',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nToolbarActions.displayName = 'ToolbarActions';\n\n// Matches the `gap-4` utility used on both this component's row and\n// Toolbar's own root — keep in sync if either class changes.\nconst ACTION_LIST_GAP_PX = 16;\n\n// Pure so the collapse math is unit-testable without mocking layout/ResizeObserver.\n// Greedily fits as many leading items as possible into `availableWidth`; the\n// instant not everything fits, reserves `moreWidth` (+ one gap) for the\n// overflow trigger before fitting items.\nexport function computeVisibleActionCount(\n  itemWidths: number[],\n  moreWidth: number,\n  gap: number,\n  availableWidth: number\n): number {\n  const total = itemWidths.length;\n  if (total === 0) return 0;\n\n  const fullWidth =\n    itemWidths.reduce((sum, width) => sum + width, 0) + gap * (total - 1);\n  if (fullWidth <= availableWidth) return total;\n\n  let used = moreWidth;\n  let count = 0;\n  for (let i = 0; i < total; i++) {\n    const next = used + itemWidths[i] + gap;\n    if (next > availableWidth) break;\n    used = next;\n    count++;\n  }\n  return count;\n}\n\n// A grown sibling's own `getBoundingClientRect()` reflects its flex-grown\n// box, not the space its content actually needs — reading that would make\n// `measure()`'s \"available space\" calculation self-referential (see below),\n// so this reads the sibling's *content nodes* instead: normal (non-growing)\n// flex children report their natural width regardless of how large the\n// parent's box has grown to fill leftover row space. Bare text (e.g.\n// `<ToolbarActions>25 selected</ToolbarActions>` with no wrapping element)\n// renders as a `Text` node rather than an `Element`, so `children` alone\n// would miss it and fall through to the self-referential branch this\n// function exists to avoid — a `Range` measures that text's own rendered\n// width the same way `getBoundingClientRect()` does for an element.\n//\n// The sibling's own padding/border don't grow with flex-grow (only the free\n// space between content and box edge does), so they're safe to add back on\n// top of the content sum — unlike the box's own `getBoundingClientRect()`,\n// which is self-referential.\n//\n// Exported (like `computeVisibleActionCount`) so this is unit-testable\n// without mocking layout/ResizeObserver.\nexport function measureNaturalWidth(el: Element): number {\n  const nodes = Array.from(el.childNodes).filter(\n    (node): node is ChildNode =>\n      node.nodeType === Node.ELEMENT_NODE ||\n      (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim())\n  );\n  if (nodes.length === 0) return el.getBoundingClientRect().width;\n\n  const style = getComputedStyle(el);\n  const gap = parseFloat(style.columnGap) || 0;\n  const ownPaddingAndBorder =\n    (parseFloat(style.paddingLeft) || 0) +\n    (parseFloat(style.paddingRight) || 0) +\n    (parseFloat(style.borderLeftWidth) || 0) +\n    (parseFloat(style.borderRightWidth) || 0);\n  const widths = nodes.map((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      const range = document.createRange();\n      range.selectNodeContents(node);\n      return range.getBoundingClientRect().width;\n    }\n    return (node as Element).getBoundingClientRect().width;\n  });\n\n  return (\n    widths.reduce((sum, width) => sum + width, 0) +\n    gap * (nodes.length - 1) +\n    ownPaddingAndBorder\n  );\n}\n\nfunction mergeRefs<T>(\n  ...refs: Array<React.Ref<T> | undefined>\n): React.RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      if (!ref) continue;\n      if (typeof ref === 'function') ref(node);\n      else (ref as React.RefObject<T | null>).current = node;\n    }\n  };\n}\n\nexport interface ToolbarActionListItem {\n  /** Stable identity — used as the React key in both the row and the overflow menu. */\n  key: string;\n  /** Rendered as the visible ghost Button's label, and the overflow menu item's label. */\n  label: React.ReactNode;\n  onSelect?: () => void;\n  disabled?: boolean;\n}\n\nexport interface ToolbarActionListProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** Ordered list of actions; trailing ones collapse into \"More actions\" first. */\n  actions: ToolbarActionListItem[];\n  /** Label for the overflow trigger. */\n  moreActionsLabel?: React.ReactNode;\n}\n\n// Mirrors the Figma \"ListActions\" part, but drives its `hasMoreActions`\n// overflow menu from measured available width instead of a static boolean —\n// the breakpoints spec (node 6262:28276) requires that \"if there is no space\n// for all Toolbar actions, then last actions must be hidden under More\n// actions.\" Renders every action as a ghost Button until they no longer fit\n// the row, then moves the trailing ones into a ButtonMenu + DropdownMenu\n// (same trigger Figma's `hasMoreActions` variant shows). An invisible clone\n// of every action + the trigger is kept mounted purely to measure natural\n// widths, since a hidden item can't report its own size.\n//\n// The root and each visible action/trigger are Base UI's `Toolbar.Root`/\n// `Toolbar.Button` (`@base-ui/react/toolbar`), giving the row the WAI-ARIA\n// toolbar pattern for free: one Tab stop, arrow-key roving-tabindex between\n// actions and into the overflow trigger. Base UI's `Toolbar.Root` does not\n// forward `enableHomeAndEndKeys` to its underlying composite, so Home/End\n// are not supported here — this is a Base UI limitation, not a choice made\n// in this component. `Toolbar.Button` composes\n// via `render` the same way `DropdownMenuTrigger`/`ButtonMenu` already do\n// below — it merges its own composite/keydown/disabled props onto whatever\n// element you pass. `focusableWhenDisabled={!action.disabled}` opts a\n// disabled action out of Base UI's default APG toolbar treatment (disabled\n// items normally stay focusable via `aria-disabled`, skippable with Tab) so\n// it matches every other disabled `Button` in this library: a real native\n// `disabled` button, unreachable via Tab or arrow keys. This MUST stay\n// conditional on `action.disabled` — `Toolbar.Root` builds its\n// `disabledIndices` list from `focusableWhenDisabled` alone, regardless of\n// the item's actual disabled state, so passing a bare `false` here disables\n// every index and silently breaks arrow-key navigation for the whole row.\n//\n// The invisible measurement clones stay plain `Button`/`ButtonMenu` (not\n// `Toolbar.Button`): registering them too would double-count hidden items in\n// the roving-tabindex list. This is scoped to the action list only —\n// `Toolbar`'s own `<fieldset>` disabled-cascade (see above) is\n// intentionally untouched; Base UI's `Fieldset.Root` strips the native\n// `disabled` attribute in favor of a context other Base UI Field-aware\n// components consume, which `Button`/`ButtonMenu` don't, so it would silently\n// break the \"disabling the toolbar disables every nested control\" guarantee.\nconst ToolbarActionList = React.forwardRef<\n  HTMLDivElement,\n  ToolbarActionListProps\n>(\n  (\n    { className, actions, moreActionsLabel = 'More actions', ...props },\n    forwardedRef\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const itemRefs = React.useRef<Map<string, HTMLButtonElement | null>>(\n      new Map()\n    );\n    const moreRef = React.useRef<HTMLButtonElement>(null);\n    const [visibleCount, setVisibleCount] = React.useState(actions.length);\n    const [moreMenuOpen, setMoreMenuOpen] = React.useState(false);\n    // The overflow menu renders in a portal, outside the ancestor\n    // `<fieldset>`'s DOM subtree, so the native disabled-cascade (see\n    // `Toolbar` above) never reaches its items. Tracked separately here so a\n    // menu already open when the fieldset becomes disabled gets closed, and\n    // its items stay disabled even if forced open again (e.g. via a ref).\n    const [ancestorDisabled, setAncestorDisabled] = React.useState(false);\n\n    React.useEffect(() => {\n      const fieldset = containerRef.current?.closest('fieldset');\n      if (!fieldset) return;\n      const sync = () => setAncestorDisabled(fieldset.disabled);\n      sync();\n      const observer = new MutationObserver(sync);\n      observer.observe(fieldset, {\n        attributes: true,\n        attributeFilter: ['disabled'],\n      });\n      return () => observer.disconnect();\n    }, []);\n\n    React.useEffect(() => {\n      if (ancestorDisabled) setMoreMenuOpen(false);\n    }, [ancestorDisabled]);\n\n    const measure = React.useCallback(() => {\n      const container = containerRef.current;\n      const parent = container?.parentElement;\n      if (!container || !parent) return;\n\n      const siblingsWidth = Array.from(parent.children)\n        .filter((child) => child !== container)\n        .reduce((sum, el) => sum + measureNaturalWidth(el), 0);\n      const gapCount = Math.max(parent.children.length - 1, 0);\n      const available =\n        parent.clientWidth - siblingsWidth - ACTION_LIST_GAP_PX * gapCount;\n\n      // Keyed by `action.key`, not index — an index-keyed array would keep\n      // stale entries (and a stale length) when `actions` shrinks, since\n      // React only nulls out the removed clones' refs without truncating it.\n      const itemWidths = actions.map(\n        (action) =>\n          itemRefs.current.get(action.key)?.getBoundingClientRect().width ?? 0\n      );\n      const moreWidth = moreRef.current?.getBoundingClientRect().width ?? 0;\n\n      setVisibleCount(\n        computeVisibleActionCount(\n          itemWidths,\n          moreWidth,\n          ACTION_LIST_GAP_PX,\n          available\n        )\n      );\n    }, [actions]);\n\n    React.useLayoutEffect(() => {\n      measure();\n      const parent = containerRef.current?.parentElement;\n      if (!parent) return;\n      const observer = new ResizeObserver(measure);\n      observer.observe(parent);\n      // A sibling like `ToolbarActions` is `shrink-0`, so its own border-box\n      // grows with its content (e.g. a \"6 items selected\" counter ticking\n      // up) even while `parent`'s box stays fixed — a ResizeObserver bound\n      // only to `parent` never fires for that case, so `measure()` goes\n      // stale and the row silently overflows instead of collapsing further.\n      // Observing every sibling directly catches that box-size change too.\n      Array.from(parent.children).forEach((sibling) => {\n        if (sibling !== containerRef.current) observer.observe(sibling);\n      });\n      return () => observer.disconnect();\n    }, [measure, actions]);\n\n    const visibleActions = actions.slice(0, visibleCount);\n    const hiddenActions = actions.slice(visibleCount);\n\n    return (\n      <ToolbarPrimitive.Root\n        ref={mergeRefs(containerRef, forwardedRef)}\n        className={cn(\n          // `overflow-hidden` clips the invisible measurement clone below —\n          // it's `position: absolute` + `visibility: hidden`, which keeps\n          // contributing to this element's scrollable overflow (and thus a\n          // real horizontal scrollbar on a narrow container/page) unless\n          // something in the ancestor chain clips it. Visible content is\n          // already sized to fit `availableWidth` by the collapse math, so\n          // clipping never affects anything actually shown.\n          'relative flex min-w-0 flex-nowrap items-center gap-4 overflow-hidden',\n          className\n        )}\n        {...props}\n      >\n        {visibleActions.map((action) => (\n          <ToolbarPrimitive.Button\n            key={action.key}\n            disabled={action.disabled}\n            focusableWhenDisabled={!action.disabled}\n            onClick={action.onSelect}\n            render={<Button variant=\"ghost\">{action.label}</Button>}\n          />\n        ))}\n        {hiddenActions.length > 0 && (\n          <DropdownMenu\n            open={moreMenuOpen}\n            onOpenChange={setMoreMenuOpen}\n            disabled={ancestorDisabled}\n          >\n            <ToolbarPrimitive.Button\n              render={\n                <DropdownMenuTrigger\n                  render={\n                    <ButtonMenu variant=\"secondary\">\n                      {moreActionsLabel}\n                    </ButtonMenu>\n                  }\n                />\n              }\n            />\n            <DropdownMenuContent align=\"start\">\n              {hiddenActions.map((action) => (\n                <DropdownMenuItem\n                  key={action.key}\n                  disabled={action.disabled || ancestorDisabled}\n                  onClick={action.onSelect}\n                >\n                  {action.label}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n        <div\n          aria-hidden\n          inert\n          className=\"pointer-events-none invisible absolute start-0 top-0 flex items-center gap-4\"\n        >\n          {actions.map((action) => (\n            <Button\n              key={action.key}\n              ref={(el) => {\n                itemRefs.current.set(action.key, el);\n              }}\n              variant=\"ghost\"\n              tabIndex={-1}\n            >\n              {action.label}\n            </Button>\n          ))}\n          <ButtonMenu ref={moreRef} variant=\"secondary\" tabIndex={-1}>\n            {moreActionsLabel}\n          </ButtonMenu>\n        </div>\n      </ToolbarPrimitive.Root>\n    );\n  }\n);\nToolbarActionList.displayName = 'ToolbarActionList';\n\nexport { Toolbar, ToolbarActions, ToolbarActionList };\n"],"names":["Toolbar","React","className","props","ref","jsx","cn","ToolbarActions","ACTION_LIST_GAP_PX","computeVisibleActionCount","itemWidths","moreWidth","gap","availableWidth","total","sum","width","used","count","i","next","measureNaturalWidth","el","nodes","node","_a","style","ownPaddingAndBorder","range","mergeRefs","refs","ToolbarActionList","actions","moreActionsLabel","forwardedRef","containerRef","itemRefs","moreRef","visibleCount","setVisibleCount","moreMenuOpen","setMoreMenuOpen","ancestorDisabled","setAncestorDisabled","fieldset","sync","observer","measure","container","parent","siblingsWidth","child","gapCount","available","action","sibling","visibleActions","hiddenActions","jsxs","ToolbarPrimitive","Button","DropdownMenu","DropdownMenuTrigger","ButtonMenu","DropdownMenuContent","DropdownMenuItem"],"mappings":"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"}

package/dist/components/ui/tooltip/tooltip.js

@@ -0,0 +1,58 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as u from "react";
+import { Tooltip as o } from "@base-ui/react/tooltip";
+import { cn as v } from "../../../lib/utils.js";
+import { usePortalContainer as x } from "../../../lib/portal-container.js";
+function C(i) {
+  return /* @__PURE__ */ t(o.Provider, { delay: 300, ...i });
+}
+const h = o.Root, y = o.Trigger, f = u.forwardRef(
+  ({
+    className: i,
+    sideOffset: r = 6,
+    side: n = "top",
+    align: e = "center",
+    anchor: a,
+    portalContainer: l,
+    keepMounted: p,
+    ...c
+  }, d) => {
+    const m = x(), s = l ?? m;
+    return /* @__PURE__ */ t(
+      o.Portal,
+      {
+        container: s,
+        keepMounted: p,
+        children: /* @__PURE__ */ t(
+          o.Positioner,
+          {
+            sideOffset: r,
+            side: n,
+            align: e,
+            anchor: a,
+            className: "z-50",
+            children: /* @__PURE__ */ t(
+              o.Popup,
+              {
+                ref: d,
+                className: v(
+                  "max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]",
+                  i
+                ),
+                ...c
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+f.displayName = "TooltipContent";
+export {
+  h as Tooltip,
+  f as TooltipContent,
+  C as TooltipProvider,
+  y as TooltipTrigger
+};
+//# sourceMappingURL=tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A contextual hint shown on hover/focus of its trigger. Wraps the Base UI\n// Tooltip primitive; the popup is themed with the `--ui-tooltip-*` token tier\n// (a dark, ~90%-opaque bubble with a light label, 12/8px padding, 4px radius,\n// 48–256px width). No arrow — matching the Figma design. Wrap the whole app (or\n// a region) in `TooltipProvider` to share open/close delays across tooltips.\n\nfunction TooltipProvider(props: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return <TooltipPrimitive.Provider delay={300} {...props} />;\n}\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Popup> & {\n    sideOffset?: number;\n    side?: TooltipPrimitive.Positioner.Props['side'];\n    align?: TooltipPrimitive.Positioner.Props['align'];\n    /**\n     * Override what the popup is positioned against — defaults to the\n     * `TooltipTrigger` element. Useful when the hover/focus trigger is\n     * narrower than the element the tooltip should visually align to (e.g. a\n     * truncating label inside a full-width row, where the tooltip should\n     * anchor to the row's edge, not the label's).\n     */\n    anchor?: TooltipPrimitive.Positioner.Props['anchor'];\n    portalContainer?: TooltipPrimitive.Portal.Props['container'];\n    keepMounted?: TooltipPrimitive.Portal.Props['keepMounted'];\n  }\n>(\n  (\n    {\n      className,\n      sideOffset = 6,\n      side = 'top',\n      align = 'center',\n      anchor,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <TooltipPrimitive.Portal\n      container={resolvedContainer}\n      keepMounted={keepMounted}\n    >\n      <TooltipPrimitive.Positioner\n        sideOffset={sideOffset}\n        side={side}\n        align={align}\n        anchor={anchor}\n        className=\"z-50\"\n      >\n        <TooltipPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]',\n            className\n          )}\n          {...props}\n        />\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n    );\n  }\n);\nTooltipContent.displayName = 'TooltipContent';\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["TooltipProvider","props","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","React","className","sideOffset","side","align","anchor","portalContainer","keepMounted","ref","ctxContainer","usePortalContainer","resolvedContainer","jsx","cn"],"mappings":";;;;;AAYA,SAASA,EAAgBC,GAA+D;AACtF,2BAAQC,EAAiB,UAAjB,EAA0B,OAAO,KAAM,GAAGD,GAAO;AAC3D;AAEA,MAAME,IAAUD,EAAiB,MAE3BE,IAAiBF,EAAiB,SAElCG,IAAiBC,EAAM;AAAA,EAkB3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGZ;AAAA,EAAA,GAELa,MACG;AACH,UAAMC,IAAeC,EAAA,GACfC,IAAoBL,KAAmBG;AAE7C,WACA,gBAAAG;AAAA,MAAChB,EAAiB;AAAA,MAAjB;AAAA,QACC,WAAWe;AAAA,QACX,aAAAJ;AAAA,QAEA,UAAA,gBAAAK;AAAA,UAAChB,EAAiB;AAAA,UAAjB;AAAA,YACC,YAAAM;AAAA,YACA,MAAAC;AAAA,YACA,OAAAC;AAAA,YACA,QAAAC;AAAA,YACA,WAAU;AAAA,YAEV,UAAA,gBAAAO;AAAA,cAAChB,EAAiB;AAAA,cAAjB;AAAA,gBACC,KAAAY;AAAA,gBACA,WAAWK;AAAA,kBACT;AAAA,kBACAZ;AAAA,gBAAA;AAAA,gBAED,GAAGN;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGJ;AACF;AACAI,EAAe,cAAc;"}

package/dist/components/ui/treemap/treemap.js

@@ -0,0 +1,83 @@
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import * as x from "react";
+import { Treemap as T } from "recharts";
+import { cn as C } from "../../../lib/utils.js";
+import { ChartContainer as h, ChartTooltip as v, ChartTooltipContent as N } from "../chart/chart.js";
+function b({
+  x: o = 0,
+  y: l = 0,
+  width: t = 0,
+  height: a = 0,
+  name: e,
+  showLabels: s = !0
+}) {
+  if (!e) return /* @__PURE__ */ r("g", {});
+  const i = s && t > 64 && a > 28;
+  return /* @__PURE__ */ u("g", { children: [
+    /* @__PURE__ */ r(
+      "rect",
+      {
+        x: o,
+        y: l,
+        width: t,
+        height: a,
+        strokeWidth: 2,
+        className: "stroke-background",
+        style: { fill: `var(--color-${e})` }
+      }
+    ),
+    i && /* @__PURE__ */ r(
+      "text",
+      {
+        x: o + t / 2,
+        y: l + a / 2,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        className: "fill-[var(--ui-text-on-status-strong-neutral)] text-xs",
+        children: e
+      }
+    )
+  ] });
+}
+const k = x.forwardRef(
+  ({
+    className: o,
+    config: l,
+    data: t,
+    dataKey: a,
+    nameKey: e,
+    aspectRatio: s = 4 / 3,
+    showLabels: i = !0,
+    showTooltip: c = !0,
+    tooltipContent: m,
+    ...d
+  }, p) => {
+    const f = t.map((n) => ({
+      ...n,
+      fill: `var(--color-${n[e]})`
+    }));
+    return /* @__PURE__ */ r("div", { ref: p, className: C(o), ...d, children: /* @__PURE__ */ r(h, { config: l, className: "size-full", children: /* @__PURE__ */ r(
+      T,
+      {
+        data: f,
+        dataKey: a,
+        nameKey: e,
+        aspectRatio: s,
+        isAnimationActive: !1,
+        content: /* @__PURE__ */ r(b, { showLabels: i }),
+        children: c && /* @__PURE__ */ r(
+          v,
+          {
+            content: m ?? /* @__PURE__ */ r(N, { nameKey: e, hideLabel: !0 })
+          }
+        )
+      }
+    ) }) });
+  }
+);
+k.displayName = "Treemap";
+export {
+  k as Treemap,
+  b as TreemapCell
+};
+//# sourceMappingURL=treemap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"treemap.js","sources":["../../../../src/components/ui/treemap/treemap.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Treemap as RechartsTreemap } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. A treemap is\n// the odd one out: a single `Treemap` element with no axes/grid/legend, themed\n// through a custom `content` cell renderer (recharts' default paints every cell\n// the same fill and has no token hooks). Like Scatter/Composed/RadialBar there's\n// no CVA variant — a treemap's knobs are geometry (`aspectRatio`) and the data,\n// not a visual \"mode\". v1 is a flat treemap (a list of leaves).\n\ninterface TreemapCellProps {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  // recharts injects the node's resolved `name` (from nameKey) + value.\n  name?: string;\n  showLabels?: boolean;\n}\n\n// Cell renderer: fill each rect from its `--color-<name>` var, separate cells\n// with the surface color, and center a white label (readable over the saturated\n// series colors) when the cell is big enough. Passed to `Treemap.content`;\n// recharts clones it with each node's geometry + `name`.\nexport function TreemapCell({\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  showLabels = true,\n}: TreemapCellProps) {\n  // recharts invokes `content` for the synthetic root node too (full chart\n  // dimensions, empty name). Skip any name-less node — otherwise its rect has no\n  // `--color-<name>` fill and paints the SVG-default black behind everything\n  // (invisible when leaves cover it, a black box on empty data).\n  if (!name) return <g />;\n  const canLabel = showLabels && width > 64 && height > 28;\n  return (\n    <g>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        strokeWidth={2}\n        className=\"stroke-background\"\n        style={{ fill: `var(--color-${name})` }}\n      />\n      {canLabel && (\n        <text\n          x={x + width / 2}\n          y={y + height / 2}\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          // The design system's \"text on a strong colored surface\" token\n          // (constant white in both themes) — reads over the saturated series\n          // colors without hardcoding a color.\n          className=\"fill-[var(--ui-text-on-status-strong-neutral)] text-xs\"\n        >\n          {name}\n        </text>\n      )}\n    </g>\n  );\n}\n\nexport interface TreemapProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** Row-per-leaf data. Each object holds the leaf's `nameKey` label + its `dataKey` numeric size. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-leaf map of `label` / `color`, keyed by the leaf's `nameKey` value\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each leaf's rectangle. */\n  dataKey: string;\n  /**\n   * Label field that names each leaf (drives the on-cell label, tooltip, and\n   * `--color-<name>` lookup). Values should be unique and CSS-safe (they become\n   * part of a custom-property name).\n   */\n  nameKey: string;\n  /** Width-to-height ratio the tiling targets. */\n  aspectRatio?: number;\n  /** Render each leaf's name inside its cell (when it fits). */\n  showLabels?: boolean;\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-cell rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst Treemap = React.forwardRef<HTMLDivElement, TreemapProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKey,\n      nameKey,\n      aspectRatio = 4 / 3,\n      showLabels = true,\n      showTooltip = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n    // hover resolves the cell color in the tooltip — recharts' Treemap carries no\n    // per-cell color on the tooltip payload item.\n    const seriesData: Record<string, string | number>[] = data.map((row) => ({\n      ...row,\n      fill: `var(--color-${row[nameKey]})`,\n    }));\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer config={config} className=\"size-full\">\n          <RechartsTreemap\n            data={seriesData}\n            dataKey={dataKey}\n            nameKey={nameKey}\n            aspectRatio={aspectRatio}\n            isAnimationActive={false}\n            content={<TreemapCell showLabels={showLabels} />}\n          >\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n          </RechartsTreemap>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nTreemap.displayName = 'Treemap';\n\nexport { Treemap };\n"],"names":["TreemapCell","x","y","width","height","name","showLabels","jsx","canLabel","Treemap","React","className","config","data","dataKey","nameKey","aspectRatio","showTooltip","tooltipContent","props","ref","seriesData","row","cn","ChartContainer","RechartsTreemap","ChartTooltip","ChartTooltipContent"],"mappings":";;;;;AAkCO,SAASA,EAAY;AAAA,EAC1B,GAAAC,IAAI;AAAA,EACJ,GAAAC,IAAI;AAAA,EACJ,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,MAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAqB;AAKnB,MAAI,CAACD,EAAM,QAAO,gBAAAE,EAAC,KAAA,CAAA,CAAE;AACrB,QAAMC,IAAWF,KAAcH,IAAQ,MAAMC,IAAS;AACtD,2BACG,KAAA,EACC,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAAN;AAAA,QACA,GAAAC;AAAA,QACA,OAAAC;AAAA,QACA,QAAAC;AAAA,QACA,aAAa;AAAA,QACb,WAAU;AAAA,QACV,OAAO,EAAE,MAAM,eAAeC,CAAI,IAAA;AAAA,MAAI;AAAA,IAAA;AAAA,IAEvCG,KACC,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAGN,IAAIE,IAAQ;AAAA,QACf,GAAGD,IAAIE,IAAS;AAAA,QAChB,YAAW;AAAA,QACX,kBAAiB;AAAA,QAIjB,WAAU;AAAA,QAET,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAmCA,MAAMI,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc,IAAI;AAAA,IAClB,YAAAV,IAAa;AAAA,IACb,aAAAW,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAgDR,EAAK,IAAI,CAACS,OAAS;AAAA,MACvE,GAAGA;AAAA,MACH,MAAM,eAAeA,EAAIP,CAAO,CAAC;AAAA,IAAA,EACjC;AAEF,WACE,gBAAAR,EAAC,OAAA,EAAI,KAAAa,GAAU,WAAWG,EAAGZ,CAAS,GAAI,GAAGQ,GAC3C,UAAA,gBAAAZ,EAACiB,GAAA,EAAe,QAAAZ,GAAgB,WAAU,aACxC,UAAA,gBAAAL;AAAA,MAACkB;AAAAA,MAAA;AAAA,QACC,MAAMJ;AAAA,QACN,SAAAP;AAAA,QACA,SAAAC;AAAA,QACA,aAAAC;AAAA,QACA,mBAAmB;AAAA,QACnB,SAAS,gBAAAT,EAACP,GAAA,EAAY,YAAAM,EAAA,CAAwB;AAAA,QAE7C,UAAAW,KACC,gBAAAV;AAAA,UAACmB;AAAA,UAAA;AAAA,YACC,SACER,KACE,gBAAAX,EAACoB,GAAA,EAAoB,SAAAZ,GAAkB,WAAS,GAAA,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MAGvD;AAAA,IAAA,GAGN,EAAA,CACF;AAAA,EAEJ;AACF;AACAN,EAAQ,cAAc;"}

package/dist/components/ui/trend-indicator/trend-indicator.js

@@ -0,0 +1,97 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import * as u from "react";
+import { cva as b } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ArrowRightIcon as I, ArrowTrendDownIcon as N, ArrowTrendUpIcon as T } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as h } from "../../../lib/utils.js";
+import { Tooltip as w, TooltipTrigger as k, TooltipContent as z } from "../tooltip/tooltip.js";
+const R = b(
+  "inline-flex items-center align-middle font-medium [&_svg]:shrink-0",
+  {
+    variants: {
+      sentiment: {
+        positive: "text-[var(--ui-text-on-status-success)]",
+        negative: "text-[var(--ui-text-on-status-danger)]",
+        neutral: "text-[var(--ui-text-on-status-neutral)]"
+      },
+      size: {
+        small: "gap-0.5 text-xs [&_svg]:size-3.5",
+        medium: "gap-1 text-sm [&_svg]:size-4"
+      },
+      variant: {
+        inline: "",
+        badge: "rounded-sm px-1.5 py-0.5"
+      }
+    },
+    // The badge tint pairs with the same status family as the text color.
+    compoundVariants: [
+      {
+        variant: "badge",
+        sentiment: "positive",
+        className: "bg-[var(--ui-background-status-success)]"
+      },
+      {
+        variant: "badge",
+        sentiment: "negative",
+        className: "bg-[var(--ui-background-status-danger)]"
+      },
+      {
+        variant: "badge",
+        sentiment: "neutral",
+        className: "bg-[var(--ui-background-status-neutral)]"
+      }
+    ],
+    defaultVariants: {
+      sentiment: "neutral",
+      size: "medium",
+      variant: "inline"
+    }
+  }
+), _ = {
+  up: T,
+  down: N,
+  flat: I
+}, y = u.forwardRef(
+  ({
+    className: m,
+    direction: e,
+    sentiment: a,
+    size: g,
+    variant: p,
+    value: n,
+    comparisonLabel: r,
+    tooltip: s,
+    showIcon: v = !0,
+    ariaLabel: i,
+    ...x
+  }, o) => {
+    const f = _[e], l = s != null, d = /* @__PURE__ */ c(
+      "span",
+      {
+        "data-direction": e,
+        "data-sentiment": a ?? "neutral",
+        className: h(
+          R({ sentiment: a, size: g, variant: p }),
+          m
+        ),
+        ...i ? { role: "img", "aria-label": i } : {},
+        tabIndex: l ? 0 : void 0,
+        ...x,
+        children: [
+          v && /* @__PURE__ */ t(f, { "aria-hidden": !0, className: "rtl:-scale-x-100" }),
+          n != null && /* @__PURE__ */ t("span", { className: "tabular-nums", children: n }),
+          r != null && /* @__PURE__ */ t("span", { className: "text-[var(--ui-text-on-surface-secondary)]", children: r })
+        ]
+      }
+    );
+    return l ? /* @__PURE__ */ c(w, { children: [
+      /* @__PURE__ */ t(k, { ref: o, render: d }),
+      /* @__PURE__ */ t(z, { children: s })
+    ] }) : u.cloneElement(d, { ref: o });
+  }
+);
+y.displayName = "TrendIndicator";
+export {
+  y as TrendIndicator,
+  R as trendIndicatorVariants
+};
+//# sourceMappingURL=trend-indicator.js.map

package/dist/components/ui/trend-indicator/trend-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trend-indicator.js","sources":["../../../../src/components/ui/trend-indicator/trend-indicator.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ArrowRightIcon,\n  ArrowTrendDownIcon,\n  ArrowTrendUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A small, presentational trend/delta indicator: a direction glyph + a\n// pre-formatted change value + an optional comparison label. It deliberately\n// separates `direction` (what happened mathematically) from `sentiment`\n// (whether that change is good or bad), because the kit can't assume up = good —\n// revenue ↑ is positive, threats ↑ is negative, MTTR ↓ is positive. The consumer\n// computes both and passes an already-formatted `value`; this component never\n// diffs two numbers, rounds, or interprets domain rules. Sentiment drives the\n// color through the semantic status text tokens (the glyph inherits via\n// `currentColor`), and the `badge` variant adds a matching status tint — no new\n// tokens.\nconst trendIndicatorVariants = cva(\n  'inline-flex items-center align-middle font-medium [&_svg]:shrink-0',\n  {\n    variants: {\n      sentiment: {\n        positive: 'text-[var(--ui-text-on-status-success)]',\n        negative: 'text-[var(--ui-text-on-status-danger)]',\n        neutral: 'text-[var(--ui-text-on-status-neutral)]',\n      },\n      size: {\n        small: 'gap-0.5 text-xs [&_svg]:size-3.5',\n        medium: 'gap-1 text-sm [&_svg]:size-4',\n      },\n      variant: {\n        inline: '',\n        badge: 'rounded-sm px-1.5 py-0.5',\n      },\n    },\n    // The badge tint pairs with the same status family as the text color.\n    compoundVariants: [\n      {\n        variant: 'badge',\n        sentiment: 'positive',\n        className: 'bg-[var(--ui-background-status-success)]',\n      },\n      {\n        variant: 'badge',\n        sentiment: 'negative',\n        className: 'bg-[var(--ui-background-status-danger)]',\n      },\n      {\n        variant: 'badge',\n        sentiment: 'neutral',\n        className: 'bg-[var(--ui-background-status-neutral)]',\n      },\n    ],\n    defaultVariants: {\n      sentiment: 'neutral',\n      size: 'medium',\n      variant: 'inline',\n    },\n  }\n);\n\n// `flat` uses a horizontal arrow (the \"no meaningful change\" glyph); up/down use\n// the trend arrows. All three carry a horizontal direction, so they mirror under\n// `dir=\"rtl\"` (`rtl:-scale-x-100`) to stay aligned with the mirrored text flow.\nconst DIRECTION_ICON = {\n  up: ArrowTrendUpIcon,\n  down: ArrowTrendDownIcon,\n  flat: ArrowRightIcon,\n} as const;\n\nexport interface TrendIndicatorProps\n  extends Omit<React.ComponentProps<'span'>, 'children'>,\n    VariantProps<typeof trendIndicatorVariants> {\n  /** What changed mathematically — selects the direction glyph. */\n  direction: 'up' | 'down' | 'flat';\n  /**\n   * Already-formatted change to display — e.g. `\"12%\"`, `\"3.5 h\"`,\n   * `\"Improving\"`, `\"4.2 h → 2.8 h\"`. The kit does not format or compute it.\n   */\n  value?: React.ReactNode;\n  /** Secondary comparison caption — e.g. `\"vs previous quarter\"`, `\"YoY\"`. */\n  comparisonLabel?: React.ReactNode;\n  /** Contextual hint shown on hover/focus (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Show the leading direction glyph. Defaults to `true` — color alone isn't enough. */\n  showIcon?: boolean;\n  /**\n   * Accessible sentence describing the trend (e.g. \"Revenue increased 12%\n   * compared with the previous quarter\"). Applied as the element's label via\n   * `role=\"img\"`, since the kit can't build a correct, localized sentence from\n   * `direction` + `value` alone. Without it, assistive tech reads the visible\n   * `value` / `comparisonLabel` text (the glyph is decorative).\n   */\n  ariaLabel?: string;\n}\n\nconst TrendIndicator = React.forwardRef<HTMLSpanElement, TrendIndicatorProps>(\n  (\n    {\n      className,\n      direction,\n      sentiment,\n      size,\n      variant,\n      value,\n      comparisonLabel,\n      tooltip,\n      showIcon = true,\n      ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const Icon = DIRECTION_ICON[direction];\n    const hasTooltip = tooltip != null;\n\n    const root = (\n      <span\n        data-direction={direction}\n        data-sentiment={sentiment ?? 'neutral'}\n        className={cn(\n          trendIndicatorVariants({ sentiment, size, variant }),\n          className\n        )}\n        // With an explicit sentence, the whole unit is one labelled image and\n        // the inner text/glyph is decorative; otherwise the visible text carries\n        // the meaning and the glyph is hidden.\n        {...(ariaLabel ? { role: 'img', 'aria-label': ariaLabel } : {})}\n        // When it's a tooltip trigger, make it keyboard-reachable so the hint\n        // isn't hover-only.\n        tabIndex={hasTooltip ? 0 : undefined}\n        {...props}\n      >\n        {showIcon && <Icon aria-hidden className=\"rtl:-scale-x-100\" />}\n        {value != null && <span className=\"tabular-nums\">{value}</span>}\n        {comparisonLabel != null && (\n          <span className=\"text-[var(--ui-text-on-surface-secondary)]\">\n            {comparisonLabel}\n          </span>\n        )}\n      </span>\n    );\n\n    if (!hasTooltip) {\n      return React.cloneElement(root, { ref });\n    }\n\n    return (\n      <Tooltip>\n        {/* Base UI's Trigger ref is typed to its default <button>; the trigger\n            here is the span, so the runtime ref is that span. */}\n        <TooltipTrigger ref={ref as React.Ref<HTMLButtonElement>} render={root} />\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    );\n  }\n);\nTrendIndicator.displayName = 'TrendIndicator';\n\nexport { TrendIndicator, trendIndicatorVariants };\n"],"names":["trendIndicatorVariants","cva","DIRECTION_ICON","ArrowTrendUpIcon","ArrowTrendDownIcon","ArrowRightIcon","TrendIndicator","React","className","direction","sentiment","size","variant","value","comparisonLabel","tooltip","showIcon","ariaLabel","props","ref","Icon","hasTooltip","root","jsxs","cn","jsx","Tooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;AAuBA,MAAMA,IAAyBC;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,WAAW;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAEV,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,IACT;AAAA;AAAA,IAGF,kBAAkB;AAAA,MAChB;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAKMC,IAAiB;AAAA,EACrB,IAAIC;AAAA,EACJ,MAAMC;AAAA,EACN,MAAMC;AACR,GA4BMC,IAAiBC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAOlB,EAAeO,CAAS,GAC/BY,IAAaN,KAAW,MAExBO,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAgBd;AAAA,QAChB,kBAAgBC,KAAa;AAAA,QAC7B,WAAWc;AAAA,UACTxB,EAAuB,EAAE,WAAAU,GAAW,MAAAC,GAAM,SAAAC,GAAS;AAAA,UACnDJ;AAAA,QAAA;AAAA,QAKD,GAAIS,IAAY,EAAE,MAAM,OAAO,cAAcA,EAAA,IAAc,CAAA;AAAA,QAG5D,UAAUI,IAAa,IAAI;AAAA,QAC1B,GAAGH;AAAA,QAEH,UAAA;AAAA,UAAAF,KAAY,gBAAAS,EAACL,GAAA,EAAK,eAAW,IAAC,WAAU,oBAAmB;AAAA,UAC3DP,KAAS,QAAQ,gBAAAY,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAZ,GAAM;AAAA,UACvDC,KAAmB,QAClB,gBAAAW,EAAC,QAAA,EAAK,WAAU,8CACb,UAAAX,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAKN,WAAKO,sBAKFK,GAAA,EAGC,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAe,KAAAR,GAA0C,QAAQG,EAAA,CAAM;AAAA,MACxE,gBAAAG,EAACG,KAAgB,UAAAb,EAAA,CAAQ;AAAA,IAAA,GAC3B,IATOR,EAAM,aAAae,GAAM,EAAE,KAAAH,GAAK;AAAA,EAW3C;AACF;AACAb,EAAe,cAAc;"}