@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/horizontal-bars-D1992rbt.cjs

@@ -0,0 +1,141 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const scrollArea = require('./scroll-area-l6Yx-88I.cjs');
+const tooltip = require('./tooltip-_cda-a7s.cjs');
+const utils_cn = require('./cn-BuHW7Wrt.cjs');
+
+function hexLuminance(color) {
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];
+  if (!hex) return void 0;
+  const full = hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex;
+  const linear = (offset) => {
+    const channel = parseInt(full.slice(offset, offset + 2), 16) / 255;
+    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * linear(0) + 0.7152 * linear(2) + 0.0722 * linear(4);
+}
+function needsDarkLabel(color) {
+  const luminance = color ? hexLuminance(color) : void 0;
+  return luminance !== void 0 && luminance > 0.25;
+}
+function HorizontalBars({
+  data,
+  segments,
+  maxVal,
+  fmt,
+  className,
+  LinkComponent = "a"
+}) {
+  const sorted = [...data].sort((a, b) => {
+    const totalB = b.values.reduce((s, v) => s + v, 0);
+    const totalA = a.values.reduce((s, v) => s + v, 0);
+    return totalB - totalA;
+  });
+  const isStacked = segments.length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(scrollArea.ScrollArea, { className: utils_cn.cn("size-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 mb-4 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
+      ] }, seg.label)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral2 shrink-0 pr-2", children: "Total" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3.5", children: sorted.map((d) => {
+      const total = d.values.reduce((s, v) => s + v, 0);
+      const barWidth = `${maxVal > 0 ? total / maxVal * 100 : 0}%`;
+      const darkLabelOnFill = needsDarkLabel(segments[d.values.findIndex((v) => v > 0)]?.color);
+      const rowBody = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full min-w-0 flex-1", style: { "--bar-width": barWidth }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: utils_cn.cn("absolute inset-y-0 left-0", d.href ? "cursor-pointer" : "cursor-default"),
+                style: { width: barWidth },
+                children: segments.map((seg, si) => {
+                  const val = d.values[si] ?? 0;
+                  const pct = total > 0 ? val / total * 100 : 0;
+                  const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? v / total * 100 : 0), 0);
+                  const isLastWithValue = d.values.slice(si + 1).every((v) => !v);
+                  const segHref = d.href ? void 0 : d.hrefs?.[si];
+                  const segmentNode = /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: utils_cn.cn(
+                        "absolute inset-y-0 opacity-40 dark:opacity-100",
+                        isStacked && si === 0 && "rounded-l",
+                        isStacked && isLastWithValue && "rounded-r",
+                        !isStacked && "rounded",
+                        segHref && "cursor-pointer transition-opacity hover:opacity-70"
+                      ),
+                      style: {
+                        left: isStacked ? `${left}%` : 0,
+                        width: isStacked ? `${pct}%` : `${pct}%`,
+                        backgroundColor: seg.color
+                      }
+                    }
+                  );
+                  if (segHref) {
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      LinkComponent,
+                      {
+                        href: segHref,
+                        "aria-label": `${d.name} — ${seg.label}`,
+                        className: "contents",
+                        children: segmentNode
+                      },
+                      seg.label
+                    );
+                  }
+                  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: segmentNode }, seg.label);
+                })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: seg.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
+            ] }, seg.label)) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils_cn.cn(
+                "pointer-events-none absolute inset-0 z-10",
+                darkLabelOnFill && "dark:[clip-path:inset(0_0_0_var(--bar-width))]"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral4 absolute inset-y-0 left-2.5 flex items-center truncate", children: d.name })
+            }
+          ),
+          darkLabelOnFill && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-y-0 left-0 z-10 hidden w-(--bar-width) overflow-hidden dark:block",
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral1 absolute inset-y-0 left-2.5 flex items-center whitespace-nowrap", children: d.name })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-md text-neutral4 shrink-0 pr-3 tabular-nums", children: fmt(total) })
+      ] });
+      if (d.href) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          LinkComponent,
+          {
+            href: d.href,
+            className: "hover:bg-surface3 focus-visible:bg-surface3 flex h-6 cursor-pointer items-center gap-14 rounded transition-colors outline-none",
+            children: rowBody
+          },
+          d.name
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 items-center gap-14", children: rowBody }, d.name);
+    }) })
+  ] });
+}
+function Wrapper({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+
+exports.HorizontalBars = HorizontalBars;
+//# sourceMappingURL=horizontal-bars-D1992rbt.cjs.map

package/dist/horizontal-bars-D1992rbt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal-bars-D1992rbt.cjs","sources":["../src/ds/components/HorizontalBars/horizontal-bars.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/ds/components/Tooltip';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { cn } from '@/lib/utils';\n\n/** Relative luminance (WCAG) of a hex color, or `undefined` for anything else (e.g. `var(--token)`). */\nfunction hexLuminance(color: string): number | undefined {\n  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];\n  if (!hex) return undefined;\n  const full = hex.length === 3 ? [...hex].map(c => c + c).join('') : hex;\n  const linear = (offset: number) => {\n    const channel = parseInt(full.slice(offset, offset + 2), 16) / 255;\n    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;\n  };\n  return 0.2126 * linear(0) + 0.7152 * linear(2) + 0.0722 * linear(4);\n}\n\n/** Bright fills (yellow, orange, green, red) swallow the light label; dark text reads better on them. */\nfunction needsDarkLabel(color: string | undefined): boolean {\n  const luminance = color ? hexLuminance(color) : undefined;\n  return luminance !== undefined && luminance > 0.25;\n}\n\ntype Segment = { label: string; color: string };\n\ntype HorizontalBarRow = {\n  name: string;\n  values: number[];\n  /** If present, the whole row is rendered as a link to this URL. */\n  href?: string;\n  /** If present, an individual segment becomes its own link. Indices align with `segments`. */\n  hrefs?: Array<string | undefined>;\n};\n\nexport function HorizontalBars({\n  data,\n  segments,\n  maxVal,\n  fmt,\n  className,\n  LinkComponent = 'a',\n}: {\n  data: Array<HorizontalBarRow>;\n  segments: Segment[];\n  maxVal: number;\n  fmt: (v: number) => string;\n  className?: string;\n  /** Override how links produced by `href` / `hrefs` are rendered. Receives `href`,\n   *  `className`, `aria-label`, and `children`. Defaults to a plain `<a>` element;\n   *  consumers using a router should pass an adapter that maps `href` to their\n   *  navigation primitive (e.g. react-router `<Link to={href} />`). */\n  LinkComponent?: LinkComponent;\n}) {\n  const sorted = [...data].sort((a, b) => {\n    const totalB = b.values.reduce((s, v) => s + v, 0);\n    const totalA = a.values.reduce((s, v) => s + v, 0);\n    return totalB - totalA;\n  });\n\n  const isStacked = segments.length > 1;\n\n  return (\n    <ScrollArea className={cn('size-full', className)}>\n      <div className=\"mt-2 mb-4 flex items-center gap-3\">\n        <div className=\"flex flex-1 items-center gap-4\">\n          {segments.map(seg => (\n            <div key={seg.label} className=\"flex items-center gap-2\">\n              <div className=\"size-2 rounded-full\" style={{ backgroundColor: seg.color }} />\n              <span className=\"text-ui-sm text-neutral3\">{seg.label}</span>\n            </div>\n          ))}\n        </div>\n        <span className=\"text-ui-sm text-neutral2 shrink-0 pr-2\">Total</span>\n      </div>\n      <div className=\"grid gap-3.5\">\n        {sorted.map(d => {\n          const total = d.values.reduce((s, v) => s + v, 0);\n          const barWidth = `${maxVal > 0 ? (total / maxVal) * 100 : 0}%`;\n          // The label starts over the first filled segment; that fill decides the label tone in dark mode.\n          // Light mode fades every fill to 40% (see below), so the default label already reads there.\n          const darkLabelOnFill = needsDarkLabel(segments[d.values.findIndex(v => v > 0)]?.color);\n          const rowBody = (\n            <>\n              <div className=\"relative h-full min-w-0 flex-1\" style={{ '--bar-width': barWidth } as CSSProperties}>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <div\n                      className={cn('absolute inset-y-0 left-0', d.href ? 'cursor-pointer' : 'cursor-default')}\n                      style={{ width: barWidth }}\n                    >\n                      {segments.map((seg, si) => {\n                        const val = d.values[si] ?? 0;\n                        const pct = total > 0 ? (val / total) * 100 : 0;\n                        const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? (v / total) * 100 : 0), 0);\n                        const isLastWithValue = d.values.slice(si + 1).every(v => !v);\n                        // Only honor segment-level links when the row itself is not an anchor.\n                        // Otherwise we'd render <a> nested inside <a>, which is invalid HTML.\n                        const segHref = d.href ? undefined : d.hrefs?.[si];\n\n                        const segmentNode = (\n                          <div\n                            className={cn(\n                              'absolute inset-y-0 opacity-40 dark:opacity-100',\n                              isStacked && si === 0 && 'rounded-l',\n                              isStacked && isLastWithValue && 'rounded-r',\n                              !isStacked && 'rounded',\n                              segHref && 'cursor-pointer transition-opacity hover:opacity-70',\n                            )}\n                            style={{\n                              left: isStacked ? `${left}%` : 0,\n                              width: isStacked ? `${pct}%` : `${pct}%`,\n                              backgroundColor: seg.color,\n                            }}\n                          />\n                        );\n\n                        if (segHref) {\n                          return (\n                            <LinkComponent\n                              key={seg.label}\n                              href={segHref}\n                              aria-label={`${d.name} — ${seg.label}`}\n                              className=\"contents\"\n                            >\n                              {segmentNode}\n                            </LinkComponent>\n                          );\n                        }\n                        return <Wrapper key={seg.label}>{segmentNode}</Wrapper>;\n                      })}\n                    </div>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\" className=\"font-mono\">\n                    <div className=\"grid gap-1\">\n                      {segments.map((seg, si) => (\n                        <div key={seg.label} className=\"flex items-center gap-2\">\n                          <span>{seg.label}</span>\n                          <span className=\"ml-auto pl-3\">{fmt(d.values[si] ?? 0)}</span>\n                        </div>\n                      ))}\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <div\n                  className={cn(\n                    'pointer-events-none absolute inset-0 z-10',\n                    darkLabelOnFill && 'dark:[clip-path:inset(0_0_0_var(--bar-width))]',\n                  )}\n                >\n                  <span className=\"text-ui-sm text-neutral4 absolute inset-y-0 left-2.5 flex items-center truncate\">\n                    {d.name}\n                  </span>\n                </div>\n                {darkLabelOnFill && (\n                  <div\n                    aria-hidden\n                    className=\"pointer-events-none absolute inset-y-0 left-0 z-10 hidden w-(--bar-width) overflow-hidden dark:block\"\n                  >\n                    <span className=\"text-ui-sm text-neutral1 absolute inset-y-0 left-2.5 flex items-center whitespace-nowrap\">\n                      {d.name}\n                    </span>\n                  </div>\n                )}\n              </div>\n              <span className=\"text-ui-md text-neutral4 shrink-0 pr-3 tabular-nums\">{fmt(total)}</span>\n            </>\n          );\n\n          if (d.href) {\n            return (\n              <LinkComponent\n                key={d.name}\n                href={d.href}\n                className=\"hover:bg-surface3 focus-visible:bg-surface3 flex h-6 cursor-pointer items-center gap-14 rounded transition-colors outline-none\"\n              >\n                {rowBody}\n              </LinkComponent>\n            );\n          }\n          return (\n            <div key={d.name} className=\"flex h-6 items-center gap-14\">\n              {rowBody}\n            </div>\n          );\n        })}\n      </div>\n    </ScrollArea>\n  );\n}\n\nfunction Wrapper({ children }: { children: ReactNode }) {\n  return <>{children}</>;\n}\n"],"names":["ScrollArea","cn","jsxs","jsx","Fragment","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}

package/dist/horizontal-bars-lhqUch51.js

@@ -0,0 +1,139 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { S as ScrollArea } from './scroll-area-ByrWkkO_.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-QuS0KEbc.js';
+import { c as cn } from './cn-C6s2yXwM.js';
+
+function hexLuminance(color) {
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];
+  if (!hex) return void 0;
+  const full = hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex;
+  const linear = (offset) => {
+    const channel = parseInt(full.slice(offset, offset + 2), 16) / 255;
+    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * linear(0) + 0.7152 * linear(2) + 0.0722 * linear(4);
+}
+function needsDarkLabel(color) {
+  const luminance = color ? hexLuminance(color) : void 0;
+  return luminance !== void 0 && luminance > 0.25;
+}
+function HorizontalBars({
+  data,
+  segments,
+  maxVal,
+  fmt,
+  className,
+  LinkComponent = "a"
+}) {
+  const sorted = [...data].sort((a, b) => {
+    const totalB = b.values.reduce((s, v) => s + v, 0);
+    const totalA = a.values.reduce((s, v) => s + v, 0);
+    return totalB - totalA;
+  });
+  const isStacked = segments.length > 1;
+  return /* @__PURE__ */ jsxs(ScrollArea, { className: cn("size-full", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 mb-4 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
+        /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
+      ] }, seg.label)) }),
+      /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral2 shrink-0 pr-2", children: "Total" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-3.5", children: sorted.map((d) => {
+      const total = d.values.reduce((s, v) => s + v, 0);
+      const barWidth = `${maxVal > 0 ? total / maxVal * 100 : 0}%`;
+      const darkLabelOnFill = needsDarkLabel(segments[d.values.findIndex((v) => v > 0)]?.color);
+      const rowBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative h-full min-w-0 flex-1", style: { "--bar-width": barWidth }, children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("absolute inset-y-0 left-0", d.href ? "cursor-pointer" : "cursor-default"),
+                style: { width: barWidth },
+                children: segments.map((seg, si) => {
+                  const val = d.values[si] ?? 0;
+                  const pct = total > 0 ? val / total * 100 : 0;
+                  const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? v / total * 100 : 0), 0);
+                  const isLastWithValue = d.values.slice(si + 1).every((v) => !v);
+                  const segHref = d.href ? void 0 : d.hrefs?.[si];
+                  const segmentNode = /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "absolute inset-y-0 opacity-40 dark:opacity-100",
+                        isStacked && si === 0 && "rounded-l",
+                        isStacked && isLastWithValue && "rounded-r",
+                        !isStacked && "rounded",
+                        segHref && "cursor-pointer transition-opacity hover:opacity-70"
+                      ),
+                      style: {
+                        left: isStacked ? `${left}%` : 0,
+                        width: isStacked ? `${pct}%` : `${pct}%`,
+                        backgroundColor: seg.color
+                      }
+                    }
+                  );
+                  if (segHref) {
+                    return /* @__PURE__ */ jsx(
+                      LinkComponent,
+                      {
+                        href: segHref,
+                        "aria-label": `${d.name} — ${seg.label}`,
+                        className: "contents",
+                        children: segmentNode
+                      },
+                      seg.label
+                    );
+                  }
+                  return /* @__PURE__ */ jsx(Wrapper, { children: segmentNode }, seg.label);
+                })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { children: seg.label }),
+              /* @__PURE__ */ jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
+            ] }, seg.label)) }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "pointer-events-none absolute inset-0 z-10",
+                darkLabelOnFill && "dark:[clip-path:inset(0_0_0_var(--bar-width))]"
+              ),
+              children: /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral4 absolute inset-y-0 left-2.5 flex items-center truncate", children: d.name })
+            }
+          ),
+          darkLabelOnFill && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-y-0 left-0 z-10 hidden w-(--bar-width) overflow-hidden dark:block",
+              children: /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral1 absolute inset-y-0 left-2.5 flex items-center whitespace-nowrap", children: d.name })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-ui-md text-neutral4 shrink-0 pr-3 tabular-nums", children: fmt(total) })
+      ] });
+      if (d.href) {
+        return /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            href: d.href,
+            className: "hover:bg-surface3 focus-visible:bg-surface3 flex h-6 cursor-pointer items-center gap-14 rounded transition-colors outline-none",
+            children: rowBody
+          },
+          d.name
+        );
+      }
+      return /* @__PURE__ */ jsx("div", { className: "flex h-6 items-center gap-14", children: rowBody }, d.name);
+    }) })
+  ] });
+}
+function Wrapper({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+export { HorizontalBars as H };
+//# sourceMappingURL=horizontal-bars-lhqUch51.js.map

package/dist/horizontal-bars-lhqUch51.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal-bars-lhqUch51.js","sources":["../src/ds/components/HorizontalBars/horizontal-bars.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/ds/components/Tooltip';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { cn } from '@/lib/utils';\n\n/** Relative luminance (WCAG) of a hex color, or `undefined` for anything else (e.g. `var(--token)`). */\nfunction hexLuminance(color: string): number | undefined {\n  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())?.[1];\n  if (!hex) return undefined;\n  const full = hex.length === 3 ? [...hex].map(c => c + c).join('') : hex;\n  const linear = (offset: number) => {\n    const channel = parseInt(full.slice(offset, offset + 2), 16) / 255;\n    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;\n  };\n  return 0.2126 * linear(0) + 0.7152 * linear(2) + 0.0722 * linear(4);\n}\n\n/** Bright fills (yellow, orange, green, red) swallow the light label; dark text reads better on them. */\nfunction needsDarkLabel(color: string | undefined): boolean {\n  const luminance = color ? hexLuminance(color) : undefined;\n  return luminance !== undefined && luminance > 0.25;\n}\n\ntype Segment = { label: string; color: string };\n\ntype HorizontalBarRow = {\n  name: string;\n  values: number[];\n  /** If present, the whole row is rendered as a link to this URL. */\n  href?: string;\n  /** If present, an individual segment becomes its own link. Indices align with `segments`. */\n  hrefs?: Array<string | undefined>;\n};\n\nexport function HorizontalBars({\n  data,\n  segments,\n  maxVal,\n  fmt,\n  className,\n  LinkComponent = 'a',\n}: {\n  data: Array<HorizontalBarRow>;\n  segments: Segment[];\n  maxVal: number;\n  fmt: (v: number) => string;\n  className?: string;\n  /** Override how links produced by `href` / `hrefs` are rendered. Receives `href`,\n   *  `className`, `aria-label`, and `children`. Defaults to a plain `<a>` element;\n   *  consumers using a router should pass an adapter that maps `href` to their\n   *  navigation primitive (e.g. react-router `<Link to={href} />`). */\n  LinkComponent?: LinkComponent;\n}) {\n  const sorted = [...data].sort((a, b) => {\n    const totalB = b.values.reduce((s, v) => s + v, 0);\n    const totalA = a.values.reduce((s, v) => s + v, 0);\n    return totalB - totalA;\n  });\n\n  const isStacked = segments.length > 1;\n\n  return (\n    <ScrollArea className={cn('size-full', className)}>\n      <div className=\"mt-2 mb-4 flex items-center gap-3\">\n        <div className=\"flex flex-1 items-center gap-4\">\n          {segments.map(seg => (\n            <div key={seg.label} className=\"flex items-center gap-2\">\n              <div className=\"size-2 rounded-full\" style={{ backgroundColor: seg.color }} />\n              <span className=\"text-ui-sm text-neutral3\">{seg.label}</span>\n            </div>\n          ))}\n        </div>\n        <span className=\"text-ui-sm text-neutral2 shrink-0 pr-2\">Total</span>\n      </div>\n      <div className=\"grid gap-3.5\">\n        {sorted.map(d => {\n          const total = d.values.reduce((s, v) => s + v, 0);\n          const barWidth = `${maxVal > 0 ? (total / maxVal) * 100 : 0}%`;\n          // The label starts over the first filled segment; that fill decides the label tone in dark mode.\n          // Light mode fades every fill to 40% (see below), so the default label already reads there.\n          const darkLabelOnFill = needsDarkLabel(segments[d.values.findIndex(v => v > 0)]?.color);\n          const rowBody = (\n            <>\n              <div className=\"relative h-full min-w-0 flex-1\" style={{ '--bar-width': barWidth } as CSSProperties}>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <div\n                      className={cn('absolute inset-y-0 left-0', d.href ? 'cursor-pointer' : 'cursor-default')}\n                      style={{ width: barWidth }}\n                    >\n                      {segments.map((seg, si) => {\n                        const val = d.values[si] ?? 0;\n                        const pct = total > 0 ? (val / total) * 100 : 0;\n                        const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? (v / total) * 100 : 0), 0);\n                        const isLastWithValue = d.values.slice(si + 1).every(v => !v);\n                        // Only honor segment-level links when the row itself is not an anchor.\n                        // Otherwise we'd render <a> nested inside <a>, which is invalid HTML.\n                        const segHref = d.href ? undefined : d.hrefs?.[si];\n\n                        const segmentNode = (\n                          <div\n                            className={cn(\n                              'absolute inset-y-0 opacity-40 dark:opacity-100',\n                              isStacked && si === 0 && 'rounded-l',\n                              isStacked && isLastWithValue && 'rounded-r',\n                              !isStacked && 'rounded',\n                              segHref && 'cursor-pointer transition-opacity hover:opacity-70',\n                            )}\n                            style={{\n                              left: isStacked ? `${left}%` : 0,\n                              width: isStacked ? `${pct}%` : `${pct}%`,\n                              backgroundColor: seg.color,\n                            }}\n                          />\n                        );\n\n                        if (segHref) {\n                          return (\n                            <LinkComponent\n                              key={seg.label}\n                              href={segHref}\n                              aria-label={`${d.name} — ${seg.label}`}\n                              className=\"contents\"\n                            >\n                              {segmentNode}\n                            </LinkComponent>\n                          );\n                        }\n                        return <Wrapper key={seg.label}>{segmentNode}</Wrapper>;\n                      })}\n                    </div>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\" className=\"font-mono\">\n                    <div className=\"grid gap-1\">\n                      {segments.map((seg, si) => (\n                        <div key={seg.label} className=\"flex items-center gap-2\">\n                          <span>{seg.label}</span>\n                          <span className=\"ml-auto pl-3\">{fmt(d.values[si] ?? 0)}</span>\n                        </div>\n                      ))}\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <div\n                  className={cn(\n                    'pointer-events-none absolute inset-0 z-10',\n                    darkLabelOnFill && 'dark:[clip-path:inset(0_0_0_var(--bar-width))]',\n                  )}\n                >\n                  <span className=\"text-ui-sm text-neutral4 absolute inset-y-0 left-2.5 flex items-center truncate\">\n                    {d.name}\n                  </span>\n                </div>\n                {darkLabelOnFill && (\n                  <div\n                    aria-hidden\n                    className=\"pointer-events-none absolute inset-y-0 left-0 z-10 hidden w-(--bar-width) overflow-hidden dark:block\"\n                  >\n                    <span className=\"text-ui-sm text-neutral1 absolute inset-y-0 left-2.5 flex items-center whitespace-nowrap\">\n                      {d.name}\n                    </span>\n                  </div>\n                )}\n              </div>\n              <span className=\"text-ui-md text-neutral4 shrink-0 pr-3 tabular-nums\">{fmt(total)}</span>\n            </>\n          );\n\n          if (d.href) {\n            return (\n              <LinkComponent\n                key={d.name}\n                href={d.href}\n                className=\"hover:bg-surface3 focus-visible:bg-surface3 flex h-6 cursor-pointer items-center gap-14 rounded transition-colors outline-none\"\n              >\n                {rowBody}\n              </LinkComponent>\n            );\n          }\n          return (\n            <div key={d.name} className=\"flex h-6 items-center gap-14\">\n              {rowBody}\n            </div>\n          );\n        })}\n      </div>\n    </ScrollArea>\n  );\n}\n\nfunction Wrapper({ children }: { children: ReactNode }) {\n  return <>{children}</>;\n}\n"],"names":[],"mappings":"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"}

package/dist/hover-card-BSj1EgQs.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const previewCard = require('@base-ui/react/preview-card');
+const React = require('react');
+const primitives_floating = require('./primitives/floating.cjs.js');
+const utils_cn = require('./cn-BuHW7Wrt.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const HoverCard = previewCard.PreviewCard.Root;
+const HoverCardTrigger = React__namespace.forwardRef(
+  ({ className, delay = 250, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Trigger, { ref, delay, className, ...props })
+);
+HoverCardTrigger.displayName = "HoverCardTrigger";
+const HoverCardContent = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    side = "top",
+    align,
+    sideOffset = 5,
+    container,
+    showArrow = true,
+    anchor,
+    positionMethod = primitives_floating.FLOATING_POSITION_METHOD,
+    alignOffset,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    arrowPadding,
+    disableAnchorTracking,
+    collisionAvoidance,
+    ...props
+  }, ref) => {
+    const positionerProps = {
+      side,
+      align,
+      sideOffset,
+      anchor,
+      positionMethod,
+      alignOffset,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      arrowPadding,
+      disableAnchorTracking,
+      collisionAvoidance
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Positioner, { className: "z-50 data-[anchor-hidden]:hidden", ...positionerProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      previewCard.PreviewCard.Popup,
+      {
+        ref,
+        className: utils_cn.cn(
+          "max-w-100 w-auto origin-[var(--transform-origin)] rounded-xl border border-border1 bg-surface3 px-3 py-2.5 text-ui-sm text-neutral5 shadow-dialog",
+          "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showArrow && /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Arrow, { className: "fill-surface3" })
+        ]
+      }
+    ) }) });
+  }
+);
+HoverCardContent.displayName = "HoverCardContent";
+
+exports.HoverCard = HoverCard;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardTrigger = HoverCardTrigger;
+//# sourceMappingURL=hover-card-BSj1EgQs.cjs.map

package/dist/hover-card-BSj1EgQs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card-BSj1EgQs.cjs","sources":["../src/ds/components/HoverCard/hover-card.tsx"],"sourcesContent":["import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport type { PreviewCardPopupProps, PreviewCardPositionerProps } from '@base-ui/react/preview-card';\nimport * as React from 'react';\n\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { cn } from '@/lib/utils';\n\n/**\n * HoverCard — a floating card that reveals extra content when its trigger is\n * hovered or focused. Built on Base UI's `PreviewCard`\n * (`@base-ui/react/preview-card`); the `HoverCard` name matches the Radix\n * component this replaced and the common term for the pattern.\n *\n * Compose it as `HoverCard` > (`HoverCardTrigger` + `HoverCardContent`).\n */\nconst HoverCard = PreviewCardPrimitive.Root;\n\nexport type HoverCardTriggerProps = Omit<PreviewCardPrimitive.Trigger.Props, 'className'> & {\n  className?: string;\n};\n\n/**\n * The element that opens the card on hover/focus. Renders an `<a>` by default;\n * pass `render` to project the behavior onto an existing element.\n *\n * `delay` defaults to 250ms to preserve the previous Radix `openDelay`\n * behavior — Base UI's own default is 600ms.\n */\nconst HoverCardTrigger = React.forwardRef<HTMLAnchorElement, HoverCardTriggerProps>(\n  ({ className, delay = 250, ...props }, ref) => (\n    <PreviewCardPrimitive.Trigger ref={ref} delay={delay} className={className} {...props} />\n  ),\n);\nHoverCardTrigger.displayName = 'HoverCardTrigger';\n\ntype HoverCardContentPositionerProps = Omit<PreviewCardPositionerProps, keyof PreviewCardPopupProps>;\n\nexport type HoverCardContentProps = Omit<PreviewCardPopupProps, 'className'> &\n  HoverCardContentPositionerProps & {\n    className?: string;\n    /** Optional portal container, forwarded to `PreviewCard.Portal`. */\n    container?: HTMLElement | null;\n    /** Whether to render the small arrow pointing at the trigger. */\n    showArrow?: boolean;\n  };\n\n/**\n * The floating card body. Wraps Base UI's `Portal` / `Positioner` / `Popup`\n * (and an optional `Arrow`) so consumers only deal with a single element.\n */\nconst HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(\n  (\n    {\n      className,\n      children,\n      side = 'top',\n      align,\n      sideOffset = 5,\n      container,\n      showArrow = true,\n      anchor,\n      positionMethod = FLOATING_POSITION_METHOD,\n      alignOffset,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n      ...props\n    },\n    ref,\n  ) => {\n    const positionerProps: HoverCardContentPositionerProps = {\n      side,\n      align,\n      sideOffset,\n      anchor,\n      positionMethod,\n      alignOffset,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n    };\n\n    return (\n      <PreviewCardPrimitive.Portal container={container ?? undefined}>\n        <PreviewCardPrimitive.Positioner className=\"z-50 data-[anchor-hidden]:hidden\" {...positionerProps}>\n          <PreviewCardPrimitive.Popup\n            ref={ref}\n            className={cn(\n              'max-w-100 w-auto origin-[var(--transform-origin)] rounded-xl border border-border1 bg-surface3 px-3 py-2.5 text-ui-sm text-neutral5 shadow-dialog',\n              'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n              'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n              className,\n            )}\n            {...props}\n          >\n            {children}\n            {showArrow && <PreviewCardPrimitive.Arrow className=\"fill-surface3\" />}\n          </PreviewCardPrimitive.Popup>\n        </PreviewCardPrimitive.Positioner>\n      </PreviewCardPrimitive.Portal>\n    );\n  },\n);\nHoverCardContent.displayName = 'HoverCardContent';\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"names":["PreviewCardPrimitive","React","jsx","FLOATING_POSITION_METHOD","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAYA,uBAAA,CAAqB;AAavC,MAAM,mBAAmBC,gBAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,GAAA,EAAK,GAAG,KAAA,EAAM,EAAG,GAAA,qBACrCC,cAAA,CAACF,wBAAqB,OAAA,EAArB,EAA6B,KAAU,KAAA,EAAc,SAAA,EAAuB,GAAG,KAAA,EAAO;AAE3F;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAiB/B,MAAM,mBAAmBC,gBAAA,CAAM,UAAA;AAAA,EAC7B,CACE;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA,GAAO,KAAA;AAAA,IACP,KAAA;AAAA,IACA,UAAA,GAAa,CAAA;AAAA,IACb,SAAA;AAAA,IACA,SAAA,GAAY,IAAA;AAAA,IACZ,MAAA;AAAA,IACA,cAAA,GAAiBE,4CAAA;AAAA,IACjB,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,qBAAA;AAAA,IACA,kBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAA,GAAmD;AAAA,MACvD,IAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,qBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,uBACED,cAAA,CAACF,uBAAA,CAAqB,MAAA,EAArB,EAA4B,WAAW,SAAA,IAAa,MAAA,EACnD,QAAA,kBAAAE,cAAA,CAACF,uBAAA,CAAqB,UAAA,EAArB,EAAgC,SAAA,EAAU,kCAAA,EAAoC,GAAG,eAAA,EAChF,QAAA,kBAAAI,eAAA;AAAA,MAACJ,uBAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWK,WAAA;AAAA,UACT,mJAAA;AAAA,UACA,kJAAA;AAAA,UACA,6JAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,6BAAaH,cAAA,CAACF,uBAAA,CAAqB,KAAA,EAArB,EAA2B,WAAU,eAAA,EAAgB;AAAA;AAAA;AAAA,OAExE,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;;;;;"}

package/dist/hover-card-Cmh0QRP8.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PreviewCard } from '@base-ui/react/preview-card';
+import * as React from 'react';
+import { FLOATING_POSITION_METHOD } from './primitives/floating.es.js';
+import { c as cn } from './cn-C6s2yXwM.js';
+
+const HoverCard = PreviewCard.Root;
+const HoverCardTrigger = React.forwardRef(
+  ({ className, delay = 250, ...props }, ref) => /* @__PURE__ */ jsx(PreviewCard.Trigger, { ref, delay, className, ...props })
+);
+HoverCardTrigger.displayName = "HoverCardTrigger";
+const HoverCardContent = React.forwardRef(
+  ({
+    className,
+    children,
+    side = "top",
+    align,
+    sideOffset = 5,
+    container,
+    showArrow = true,
+    anchor,
+    positionMethod = FLOATING_POSITION_METHOD,
+    alignOffset,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    arrowPadding,
+    disableAnchorTracking,
+    collisionAvoidance,
+    ...props
+  }, ref) => {
+    const positionerProps = {
+      side,
+      align,
+      sideOffset,
+      anchor,
+      positionMethod,
+      alignOffset,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      arrowPadding,
+      disableAnchorTracking,
+      collisionAvoidance
+    };
+    return /* @__PURE__ */ jsx(PreviewCard.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(PreviewCard.Positioner, { className: "z-50 data-[anchor-hidden]:hidden", ...positionerProps, children: /* @__PURE__ */ jsxs(
+      PreviewCard.Popup,
+      {
+        ref,
+        className: cn(
+          "max-w-100 w-auto origin-[var(--transform-origin)] rounded-xl border border-border1 bg-surface3 px-3 py-2.5 text-ui-sm text-neutral5 shadow-dialog",
+          "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showArrow && /* @__PURE__ */ jsx(PreviewCard.Arrow, { className: "fill-surface3" })
+        ]
+      }
+    ) }) });
+  }
+);
+HoverCardContent.displayName = "HoverCardContent";
+
+export { HoverCard as H, HoverCardContent as a, HoverCardTrigger as b };
+//# sourceMappingURL=hover-card-Cmh0QRP8.js.map

package/dist/hover-card-Cmh0QRP8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card-Cmh0QRP8.js","sources":["../src/ds/components/HoverCard/hover-card.tsx"],"sourcesContent":["import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport type { PreviewCardPopupProps, PreviewCardPositionerProps } from '@base-ui/react/preview-card';\nimport * as React from 'react';\n\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { cn } from '@/lib/utils';\n\n/**\n * HoverCard — a floating card that reveals extra content when its trigger is\n * hovered or focused. Built on Base UI's `PreviewCard`\n * (`@base-ui/react/preview-card`); the `HoverCard` name matches the Radix\n * component this replaced and the common term for the pattern.\n *\n * Compose it as `HoverCard` > (`HoverCardTrigger` + `HoverCardContent`).\n */\nconst HoverCard = PreviewCardPrimitive.Root;\n\nexport type HoverCardTriggerProps = Omit<PreviewCardPrimitive.Trigger.Props, 'className'> & {\n  className?: string;\n};\n\n/**\n * The element that opens the card on hover/focus. Renders an `<a>` by default;\n * pass `render` to project the behavior onto an existing element.\n *\n * `delay` defaults to 250ms to preserve the previous Radix `openDelay`\n * behavior — Base UI's own default is 600ms.\n */\nconst HoverCardTrigger = React.forwardRef<HTMLAnchorElement, HoverCardTriggerProps>(\n  ({ className, delay = 250, ...props }, ref) => (\n    <PreviewCardPrimitive.Trigger ref={ref} delay={delay} className={className} {...props} />\n  ),\n);\nHoverCardTrigger.displayName = 'HoverCardTrigger';\n\ntype HoverCardContentPositionerProps = Omit<PreviewCardPositionerProps, keyof PreviewCardPopupProps>;\n\nexport type HoverCardContentProps = Omit<PreviewCardPopupProps, 'className'> &\n  HoverCardContentPositionerProps & {\n    className?: string;\n    /** Optional portal container, forwarded to `PreviewCard.Portal`. */\n    container?: HTMLElement | null;\n    /** Whether to render the small arrow pointing at the trigger. */\n    showArrow?: boolean;\n  };\n\n/**\n * The floating card body. Wraps Base UI's `Portal` / `Positioner` / `Popup`\n * (and an optional `Arrow`) so consumers only deal with a single element.\n */\nconst HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(\n  (\n    {\n      className,\n      children,\n      side = 'top',\n      align,\n      sideOffset = 5,\n      container,\n      showArrow = true,\n      anchor,\n      positionMethod = FLOATING_POSITION_METHOD,\n      alignOffset,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n      ...props\n    },\n    ref,\n  ) => {\n    const positionerProps: HoverCardContentPositionerProps = {\n      side,\n      align,\n      sideOffset,\n      anchor,\n      positionMethod,\n      alignOffset,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n    };\n\n    return (\n      <PreviewCardPrimitive.Portal container={container ?? undefined}>\n        <PreviewCardPrimitive.Positioner className=\"z-50 data-[anchor-hidden]:hidden\" {...positionerProps}>\n          <PreviewCardPrimitive.Popup\n            ref={ref}\n            className={cn(\n              'max-w-100 w-auto origin-[var(--transform-origin)] rounded-xl border border-border1 bg-surface3 px-3 py-2.5 text-ui-sm text-neutral5 shadow-dialog',\n              'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n              'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n              className,\n            )}\n            {...props}\n          >\n            {children}\n            {showArrow && <PreviewCardPrimitive.Arrow className=\"fill-surface3\" />}\n          </PreviewCardPrimitive.Popup>\n        </PreviewCardPrimitive.Positioner>\n      </PreviewCardPrimitive.Portal>\n    );\n  },\n);\nHoverCardContent.displayName = 'HoverCardContent';\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"names":["PreviewCardPrimitive"],"mappings":";;;;;;AAeA,MAAM,YAAYA,WAAA,CAAqB;AAavC,MAAM,mBAAmB,KAAA,CAAM,UAAA;AAAA,EAC7B,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,GAAA,EAAK,GAAG,KAAA,EAAM,EAAG,GAAA,qBACrC,GAAA,CAACA,YAAqB,OAAA,EAArB,EAA6B,KAAU,KAAA,EAAc,SAAA,EAAuB,GAAG,KAAA,EAAO;AAE3F;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAiB/B,MAAM,mBAAmB,KAAA,CAAM,UAAA;AAAA,EAC7B,CACE;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA,GAAO,KAAA;AAAA,IACP,KAAA;AAAA,IACA,UAAA,GAAa,CAAA;AAAA,IACb,SAAA;AAAA,IACA,SAAA,GAAY,IAAA;AAAA,IACZ,MAAA;AAAA,IACA,cAAA,GAAiB,wBAAA;AAAA,IACjB,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,qBAAA;AAAA,IACA,kBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAA,GAAmD;AAAA,MACvD,IAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,qBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,uBACE,GAAA,CAACA,WAAA,CAAqB,MAAA,EAArB,EAA4B,WAAW,SAAA,IAAa,MAAA,EACnD,QAAA,kBAAA,GAAA,CAACA,WAAA,CAAqB,UAAA,EAArB,EAAgC,SAAA,EAAU,kCAAA,EAAoC,GAAG,eAAA,EAChF,QAAA,kBAAA,IAAA;AAAA,MAACA,WAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,mJAAA;AAAA,UACA,kJAAA;AAAA,UACA,6JAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,6BAAa,GAAA,CAACA,WAAA,CAAqB,KAAA,EAArB,EAA2B,WAAU,eAAA,EAAgB;AAAA;AAAA;AAAA,OAExE,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;;;"}

package/dist/icons/Icon.cjs.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-BuHW7Wrt.cjs');
 
 const sizes = {
-  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
-  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
-  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
+  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm [&>svg]:[stroke-width:2]",
+  smd: "[&>svg]:h-icon-smd [&>svg]:w-icon-smd [&>svg]:[stroke-width:1.75]",
+  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default [&>svg]:[stroke-width:1.5]",
+  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg [&>svg]:[stroke-width:1.25]"
 };
 const Icon = ({ children, className, size = "default", ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("block", sizes[size], className), ...props, children });

package/dist/icons/Icon.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs.js","sources":["../../src/ds/icons/Icon.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode;\n  className?: string;\n  size?: 'default' | 'lg' | 'sm';\n}\n\nconst sizes = {\n  sm: '[&>svg]:h-icon-sm [&>svg]:w-icon-sm',\n  default: '[&>svg]:h-icon-default [&>svg]:w-icon-default',\n  lg: '[&>svg]:h-icon-lg [&>svg]:w-icon-lg',\n};\n\nexport const Icon = ({ children, className, size = 'default', ...props }: IconProps) => {\n  return (\n    <span className={cn('block', sizes[size], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":["jsx","cn"],"mappings":";;;;;;;AASA,MAAM,KAAA,GAAQ;AAAA,EACZ,EAAA,EAAI,qCAAA;AAAA,EACJ,OAAA,EAAS,+CAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,IAAA,GAAO,CAAC,EAAE,QAAA,EAAU,WAAW,IAAA,GAAO,SAAA,EAAW,GAAG,KAAA,EAAM,KAAiB;AACtF,EAAA,uBACEA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWC,WAAA,CAAG,OAAA,EAAS,KAAA,CAAM,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACvD,QAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Icon.cjs.js","sources":["../../src/ds/icons/Icon.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode;\n  className?: string;\n  size?: 'default' | 'lg' | 'sm' | 'smd';\n}\n\n// Lucide draws `stroke-width: 2` on a 24 viewBox, so a rendered stroke is\n// `size / 12`: 1px at 12px but 1.67px at 20px. Pinning the stroke per size to\n// `24 / size` holds every icon at a ~1px line, so a small icon and a large one\n// read as the same family, and the line stays crisp at 1x.\nconst sizes = {\n  sm: '[&>svg]:h-icon-sm [&>svg]:w-icon-sm [&>svg]:[stroke-width:2]',\n  smd: '[&>svg]:h-icon-smd [&>svg]:w-icon-smd [&>svg]:[stroke-width:1.75]',\n  default: '[&>svg]:h-icon-default [&>svg]:w-icon-default [&>svg]:[stroke-width:1.5]',\n  lg: '[&>svg]:h-icon-lg [&>svg]:w-icon-lg [&>svg]:[stroke-width:1.25]',\n};\n\nexport const Icon = ({ children, className, size = 'default', ...props }: IconProps) => {\n  return (\n    <span className={cn('block', sizes[size], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":["jsx","cn"],"mappings":";;;;;;;AAaA,MAAM,KAAA,GAAQ;AAAA,EACZ,EAAA,EAAI,8DAAA;AAAA,EACJ,GAAA,EAAK,mEAAA;AAAA,EACL,OAAA,EAAS,0EAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,IAAA,GAAO,CAAC,EAAE,QAAA,EAAU,WAAW,IAAA,GAAO,SAAA,EAAW,GAAG,KAAA,EAAM,KAAiB;AACtF,EAAA,uBACEA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWC,WAAA,CAAG,OAAA,EAAS,KAAA,CAAM,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACvD,QAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/icons/Icon.es.js

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { c as cn } from '../cn-C6s2yXwM.js';
 
 const sizes = {
-  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
-  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
-  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
+  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm [&>svg]:[stroke-width:2]",
+  smd: "[&>svg]:h-icon-smd [&>svg]:w-icon-smd [&>svg]:[stroke-width:1.75]",
+  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default [&>svg]:[stroke-width:1.5]",
+  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg [&>svg]:[stroke-width:1.25]"
 };
 const Icon = ({ children, className, size = "default", ...props }) => {
   return /* @__PURE__ */ jsx("span", { className: cn("block", sizes[size], className), ...props, children });

package/dist/icons/Icon.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.es.js","sources":["../../src/ds/icons/Icon.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode;\n  className?: string;\n  size?: 'default' | 'lg' | 'sm';\n}\n\nconst sizes = {\n  sm: '[&>svg]:h-icon-sm [&>svg]:w-icon-sm',\n  default: '[&>svg]:h-icon-default [&>svg]:w-icon-default',\n  lg: '[&>svg]:h-icon-lg [&>svg]:w-icon-lg',\n};\n\nexport const Icon = ({ children, className, size = 'default', ...props }: IconProps) => {\n  return (\n    <span className={cn('block', sizes[size], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;AASA,MAAM,KAAA,GAAQ;AAAA,EACZ,EAAA,EAAI,qCAAA;AAAA,EACJ,OAAA,EAAS,+CAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,IAAA,GAAO,CAAC,EAAE,QAAA,EAAU,WAAW,IAAA,GAAO,SAAA,EAAW,GAAG,KAAA,EAAM,KAAiB;AACtF,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,OAAA,EAAS,KAAA,CAAM,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACvD,QAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Icon.es.js","sources":["../../src/ds/icons/Icon.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode;\n  className?: string;\n  size?: 'default' | 'lg' | 'sm' | 'smd';\n}\n\n// Lucide draws `stroke-width: 2` on a 24 viewBox, so a rendered stroke is\n// `size / 12`: 1px at 12px but 1.67px at 20px. Pinning the stroke per size to\n// `24 / size` holds every icon at a ~1px line, so a small icon and a large one\n// read as the same family, and the line stays crisp at 1x.\nconst sizes = {\n  sm: '[&>svg]:h-icon-sm [&>svg]:w-icon-sm [&>svg]:[stroke-width:2]',\n  smd: '[&>svg]:h-icon-smd [&>svg]:w-icon-smd [&>svg]:[stroke-width:1.75]',\n  default: '[&>svg]:h-icon-default [&>svg]:w-icon-default [&>svg]:[stroke-width:1.5]',\n  lg: '[&>svg]:h-icon-lg [&>svg]:w-icon-lg [&>svg]:[stroke-width:1.25]',\n};\n\nexport const Icon = ({ children, className, size = 'default', ...props }: IconProps) => {\n  return (\n    <span className={cn('block', sizes[size], className)} {...props}>\n      {children}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;AAaA,MAAM,KAAA,GAAQ;AAAA,EACZ,EAAA,EAAI,8DAAA;AAAA,EACJ,GAAA,EAAK,mEAAA;AAAA,EACL,OAAA,EAAS,0EAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,IAAA,GAAO,CAAC,EAAE,QAAA,EAAU,WAAW,IAAA,GAAO,SAAA,EAAW,GAAG,KAAA,EAAM,KAAiB;AACtF,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,OAAA,EAAS,KAAA,CAAM,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACvD,QAAA,EACH,CAAA;AAEJ;;;;"}