@lablup/ui-common 0.1.0-alpha.0

package/dist/components/Skeleton/SkeletonChart2.js

@@ -0,0 +1,66 @@
+import { Skeleton as e } from "./Skeleton2.js";
+/* empty css              */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Skeleton/SkeletonChart.tsx
+function r({ variant: r = "bar", height: i = "300px", className: a = "", testId: o, loadingLabel: s = "Loading chart" }) {
+	let c = [
+		"skeleton-chart",
+		`skeleton-chart--${r}`,
+		a
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t("div", {
+		className: c,
+		style: { height: i },
+		"data-testid": o,
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": s,
+		children: r === "pie" ? /* @__PURE__ */ n("div", {
+			className: "skeleton-chart__pie",
+			children: [/* @__PURE__ */ t(e, {
+				width: "100%",
+				height: "100%",
+				variant: "circle"
+			}), /* @__PURE__ */ t("div", {
+				className: "skeleton-chart__legend",
+				children: Array.from({ length: 4 }).map((r, i) => /* @__PURE__ */ n("div", {
+					className: "skeleton-chart__legend-item",
+					children: [/* @__PURE__ */ t(e, {
+						width: "16px",
+						height: "16px",
+						variant: "circle"
+					}), /* @__PURE__ */ t(e, {
+						width: "80px",
+						height: "14px"
+					})]
+				}, i))
+			})]
+		}) : r === "bar" ? /* @__PURE__ */ t("div", {
+			className: "skeleton-chart__bars",
+			children: [
+				60,
+				80,
+				45,
+				90,
+				70,
+				55,
+				85,
+				65
+			].map((n, r) => /* @__PURE__ */ t(e, {
+				width: "100%",
+				height: `${String(n)}%`,
+				className: "skeleton-chart__bar"
+			}, r))
+		}) : /* @__PURE__ */ t("div", {
+			className: "skeleton-chart__line",
+			children: /* @__PURE__ */ t(e, {
+				width: "100%",
+				height: "100%"
+			})
+		})
+	});
+}
+//#endregion
+export { r as SkeletonChart, r as default };
+
+//# sourceMappingURL=SkeletonChart2.js.map

package/dist/components/Skeleton/SkeletonChart2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonChart2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonChart.tsx"],"sourcesContent":["/**\n * SkeletonChart Component\n *\n * Skeleton placeholder for chart components.\n * Shows a simplified chart-like shape with bars or circular elements.\n *\n * @example\n * // Bar chart skeleton\n * <SkeletonChart variant=\"bar\" />\n *\n * @example\n * // Pie chart skeleton\n * <SkeletonChart variant=\"pie\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonChart.css\";\n\nexport interface SkeletonChartProps {\n  /** Chart type variant */\n  variant?: \"bar\" | \"line\" | \"pie\" | \"area\";\n  /** Chart height */\n  height?: string;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the chart is loading. Default: \"Loading chart\" */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonChart provides a loading placeholder for chart components.\n *\n * Variants:\n * - bar: Vertical bars of varying heights\n * - line: Line graph placeholder\n * - pie: Circular chart placeholder\n * - area: Area chart placeholder\n */\nexport function SkeletonChart({\n  variant = \"bar\",\n  height = \"300px\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading chart\",\n}: SkeletonChartProps) {\n  const classNames = [\"skeleton-chart\", `skeleton-chart--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ height }}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel}\n    >\n      {variant === \"pie\" ? (\n        <div className=\"skeleton-chart__pie\">\n          <Skeleton width=\"100%\" height=\"100%\" variant=\"circle\" />\n          <div className=\"skeleton-chart__legend\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"skeleton-chart__legend-item\">\n                <Skeleton width=\"16px\" height=\"16px\" variant=\"circle\" />\n                <Skeleton width=\"80px\" height=\"14px\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      ) : variant === \"bar\" ? (\n        <div className=\"skeleton-chart__bars\">\n          {[60, 80, 45, 90, 70, 55, 85, 65].map((barHeight, i) => (\n            <Skeleton\n              key={i}\n              width=\"100%\"\n              height={`${String(barHeight)}%`}\n              className=\"skeleton-chart__bar\"\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"skeleton-chart__line\">\n          <Skeleton width=\"100%\" height=\"100%\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonChart;\n"],"mappings":";;;;AAwCA,SAAgB,EAAc,EAC5B,aAAU,OACV,YAAS,SACT,eAAY,IACZ,WACA,kBAAe,mBACM;CACrB,IAAM,IAAa;EAAC;EAAkB,mBAAmB;EAAW;CAAS,CAAC,CAC3E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO,EAAE,UAAO;EAChB,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY;EAEX,UAAA,MAAY,QACX,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GACvD,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,OAAD;KAAa,WAAU;KAAvB,UAAA,CACE,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;MAAO,SAAQ;KAAU,CAAA,GACvD,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;KAAQ,CAAA,CACnC;IAHK,GAAA,CAGL,CACN;GACE,CAAA,CACF;EACH,CAAA,IAAA,MAAY,QACd,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,GAAW,MAChD,kBAAC,GAAD;IAEE,OAAM;IACN,QAAQ,GAAG,OAAO,CAAS,EAAE;IAC7B,WAAU;GACX,GAJM,CAIN,CACF;EACE,CAAA,IAEL,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;GAAQ,CAAA;EACnC,CAAA;CAEJ,CAAA;AAET"}

package/dist/components/Skeleton/SkeletonRow.d.ts

@@ -0,0 +1,22 @@
+export interface SkeletonRowProps {
+    /** Show avatar/icon on the left */
+    showAvatar?: boolean;
+    /** Show action buttons on the right */
+    showActions?: boolean;
+    /** Number of rows to display */
+    count?: number;
+    /** Additional CSS class names */
+    className?: string;
+    /** Test ID for testing */
+    testId?: string;
+}
+/**
+ * SkeletonRow provides a loading placeholder for list/table rows.
+ *
+ * Features:
+ * - Optional avatar/icon
+ * - Optional action buttons
+ * - Multiple rows for lists
+ */
+export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, }: SkeletonRowProps): import("react").JSX.Element;
+export default SkeletonRow;

package/dist/components/Skeleton/SkeletonRow2.js

@@ -0,0 +1,47 @@
+import { Skeleton as e } from "./Skeleton2.js";
+/* empty css            */
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Skeleton/SkeletonRow.tsx
+function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c }) {
+	let l = Array.from({ length: o });
+	return /* @__PURE__ */ n(t, { children: l.map((t, o) => /* @__PURE__ */ r("div", {
+		className: `skeleton-row ${s}`,
+		"data-testid": c ? `${c}-${String(o)}` : void 0,
+		role: "status",
+		"aria-busy": "true",
+		children: [
+			i && /* @__PURE__ */ n("div", {
+				className: "skeleton-row__avatar",
+				children: /* @__PURE__ */ n(e, {
+					width: "40px",
+					height: "40px",
+					variant: "circle"
+				})
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "skeleton-row__content",
+				children: [/* @__PURE__ */ n(e, {
+					width: "25%",
+					height: "14px"
+				}), /* @__PURE__ */ n(e, {
+					width: "100%",
+					height: "16px"
+				})]
+			}),
+			a && /* @__PURE__ */ r("div", {
+				className: "skeleton-row__actions",
+				children: [/* @__PURE__ */ n(e, {
+					width: "32px",
+					height: "32px"
+				}), /* @__PURE__ */ n(e, {
+					width: "32px",
+					height: "32px"
+				})]
+			})
+		]
+	}, o)) });
+}
+//#endregion
+export { i as SkeletonRow, i as default };
+
+//# sourceMappingURL=SkeletonRow2.js.map

package/dist/components/Skeleton/SkeletonRow2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow Component\n *\n * Skeleton placeholder for list rows and table rows.\n * Mimics the structure of a log entry or table row.\n *\n * @example\n * // Basic usage\n * <SkeletonRow />\n *\n * @example\n * // With avatar\n * <SkeletonRow showAvatar />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n  /** Show avatar/icon on the left */\n  showAvatar?: boolean;\n  /** Show action buttons on the right */\n  showActions?: boolean;\n  /** Number of rows to display */\n  count?: number;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonRow provides a loading placeholder for list/table rows.\n *\n * Features:\n * - Optional avatar/icon\n * - Optional action buttons\n * - Multiple rows for lists\n */\nexport function SkeletonRow({\n  showAvatar = false,\n  showActions = false,\n  count = 1,\n  className = \"\",\n  testId,\n}: SkeletonRowProps) {\n  const rows = Array.from({ length: count });\n\n  return (\n    <>\n      {rows.map((_, index) => (\n        <div\n          key={index}\n          className={`skeleton-row ${className}`}\n          data-testid={testId ? `${testId}-${String(index)}` : undefined}\n          role=\"status\"\n          aria-busy=\"true\"\n        >\n          {showAvatar && (\n            <div className=\"skeleton-row__avatar\">\n              <Skeleton width=\"40px\" height=\"40px\" variant=\"circle\" />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton width=\"25%\" height=\"14px\" />\n            <Skeleton width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton width=\"32px\" height=\"32px\" />\n              <Skeleton width=\"32px\" height=\"32px\" />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAuCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,aACmB;CACnB,IAAM,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,CAAC;CAEzC,OACE,kBAAA,GAAA,EAAA,UACG,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;EAEE,WAAW,gBAAgB;EAC3B,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EALZ,UAAA;GAOG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;KAAO,SAAQ;IAAU,CAAA;GACpD,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,GACrC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,GACtC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;EAEJ;CArBE,GAAA,CAqBF,CACN,EACD,CAAA;AAEN"}

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -0,0 +1,20 @@
+export interface SkeletonTextProps {
+    /** Number of text lines to display */
+    lines?: number;
+    /** Spacing between lines */
+    spacing?: "compact" | "normal" | "relaxed";
+    /** Additional CSS class names */
+    className?: string;
+    /** Test ID for testing */
+    testId?: string;
+}
+/**
+ * SkeletonText provides a loading placeholder for text content.
+ *
+ * Features:
+ * - Multiple lines with varying widths
+ * - Configurable line spacing
+ * - Accessible via aria-busy
+ */
+export declare function SkeletonText({ lines, spacing, className, testId, }: SkeletonTextProps): import("react").JSX.Element;
+export default SkeletonText;

package/dist/components/Skeleton/SkeletonText2.js

@@ -0,0 +1,26 @@
+import { Skeleton as e } from "./Skeleton2.js";
+/* empty css             */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Skeleton/SkeletonText.tsx
+function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a }) {
+	let o = [
+		"skeleton-text",
+		`skeleton-text--${r}`,
+		i
+	].filter(Boolean).join(" "), s = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
+	return /* @__PURE__ */ t("div", {
+		className: o,
+		"data-testid": a,
+		role: "status",
+		"aria-busy": "true",
+		children: s.map((n, r) => /* @__PURE__ */ t(e, {
+			width: n,
+			height: "1em",
+			variant: "text"
+		}, r))
+	});
+}
+//#endregion
+export { n as SkeletonText, n as default };
+
+//# sourceMappingURL=SkeletonText2.js.map

package/dist/components/Skeleton/SkeletonText2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {widths.map((width, index) => (\n        <Skeleton key={index} width={width} height=\"1em\" variant=\"text\" />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAqCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,aACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GAA6B;GAAO,QAAO;GAAM,SAAQ;EAAQ,GAAlD,CAAkD,CAClE;CACE,CAAA;AAET"}

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Skeleton Components
+ *
+ * Loading state components with shimmer animations.
+ */
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
+export { SkeletonCard } from './SkeletonCard';
+export type { SkeletonCardProps } from './SkeletonCard';
+export { SkeletonText } from './SkeletonText';
+export type { SkeletonTextProps } from './SkeletonText';
+export { SkeletonChart } from './SkeletonChart';
+export type { SkeletonChartProps } from './SkeletonChart';
+export { SkeletonRow } from './SkeletonRow';
+export type { SkeletonRowProps } from './SkeletonRow';

package/dist/components/Skeleton/index.js

@@ -0,0 +1,6 @@
+import { Skeleton as e } from "./Skeleton2.js";
+import { SkeletonCard as t } from "./SkeletonCard2.js";
+import { SkeletonText as n } from "./SkeletonText2.js";
+import { SkeletonChart as r } from "./SkeletonChart2.js";
+import { SkeletonRow as i } from "./SkeletonRow2.js";
+export { e as Skeleton, t as SkeletonCard, r as SkeletonChart, i as SkeletonRow, n as SkeletonText };

package/dist/components/SmoothHeight/SmoothHeight.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface SmoothHeightProps {
+    /** Whether height changes should currently be animated */
+    active: boolean;
+    children: ReactNode;
+    /** Additional class for the outer wrapper */
+    className?: string;
+}
+export declare function SmoothHeight({ active, children, className }: SmoothHeightProps): import("react").JSX.Element;

package/dist/components/SmoothHeight/SmoothHeight2.js

@@ -0,0 +1,38 @@
+/* empty css             */
+import { useLayoutEffect as e, useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/SmoothHeight/SmoothHeight.tsx
+var r = 250;
+function i({ active: i, children: a, className: o }) {
+	let s = t(null), c = t(null), l = t(null);
+	return e(() => {
+		let e = s.current, t = c.current;
+		if (!e || !t || typeof ResizeObserver > "u") return;
+		if (!i) return l.current = window.setTimeout(() => {
+			e.style.height = "", l.current = null;
+		}, r), () => {
+			l.current !== null && (window.clearTimeout(l.current), l.current = null);
+		};
+		l.current !== null && (window.clearTimeout(l.current), l.current = null);
+		let n = () => {
+			e.style.height = `${t.offsetHeight.toFixed(0)}px`;
+		};
+		n();
+		let a = new ResizeObserver(n);
+		return a.observe(t), () => {
+			a.disconnect();
+		};
+	}, [i]), /* @__PURE__ */ n("div", {
+		ref: s,
+		className: `smooth-height${i ? " smooth-height--active" : ""}${o ? ` ${o}` : ""}`,
+		children: /* @__PURE__ */ n("div", {
+			ref: c,
+			className: "smooth-height__content",
+			children: a
+		})
+	});
+}
+//#endregion
+export { i as SmoothHeight };
+
+//# sourceMappingURL=SmoothHeight2.js.map

package/dist/components/SmoothHeight/SmoothHeight2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmoothHeight2.js","names":[],"sources":["../../../src/components/SmoothHeight/SmoothHeight.tsx"],"sourcesContent":["/**\n * SmoothHeight Component\n *\n * Animates a container's height toward its content's natural height, so\n * content that grows in discrete jumps (streaming text wrapping onto new\n * lines) expands smoothly instead of snapping one line at a time.\n *\n * While `active`, the inner content is measured with a ResizeObserver and\n * the outer wrapper gets an explicit pixel height with a CSS height\n * transition. CSS cannot transition to `height: auto` (and the\n * `interpolate-size` opt-in is not available in WebKit), so the explicit\n * measurement is what makes the animation possible cross-platform.\n *\n * The very first activation does not animate: the wrapper goes from\n * `auto` to a pixel height, which CSS treats as non-interpolable and\n * applies instantly. Only subsequent pixel-to-pixel growth animates.\n *\n * When `active` turns off, the pixel height is kept just long enough for\n * the in-flight transition to settle, then released back to `auto` so\n * later reflows (window resizing, images loading) are unaffected.\n *\n * Degrades gracefully: without ResizeObserver (test environments), it\n * renders plain pass-through wrappers with auto height.\n */\n\nimport { useLayoutEffect, useRef, type ReactNode } from \"react\";\nimport \"./SmoothHeight.css\";\n\nexport interface SmoothHeightProps {\n  /** Whether height changes should currently be animated */\n  active: boolean;\n  children: ReactNode;\n  /** Additional class for the outer wrapper */\n  className?: string;\n}\n\n/**\n * Delay before releasing the explicit height after deactivation, covering\n * the height transition duration (--token-motionDurationMid = 0.2s).\n */\nconst RELEASE_DELAY_MS = 250;\n\nexport function SmoothHeight({ active, children, className }: SmoothHeightProps) {\n  const outerRef = useRef<HTMLDivElement>(null);\n  const innerRef = useRef<HTMLDivElement>(null);\n  const releaseTimerRef = useRef<number | null>(null);\n\n  useLayoutEffect(() => {\n    const outer = outerRef.current;\n    const inner = innerRef.current;\n    if (!outer || !inner) return;\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    if (!active) {\n      // Keep the last pixel height while the in-flight transition\n      // settles, then release to auto.\n      releaseTimerRef.current = window.setTimeout(() => {\n        outer.style.height = \"\";\n        releaseTimerRef.current = null;\n      }, RELEASE_DELAY_MS);\n      return () => {\n        if (releaseTimerRef.current !== null) {\n          window.clearTimeout(releaseTimerRef.current);\n          releaseTimerRef.current = null;\n        }\n      };\n    }\n\n    // (Re)activated: cancel any pending release and track the content.\n    if (releaseTimerRef.current !== null) {\n      window.clearTimeout(releaseTimerRef.current);\n      releaseTimerRef.current = null;\n    }\n\n    const measure = () => {\n      outer.style.height = `${inner.offsetHeight.toFixed(0)}px`;\n    };\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(inner);\n    return () => {\n      observer.disconnect();\n    };\n  }, [active]);\n\n  return (\n    <div\n      ref={outerRef}\n      className={`smooth-height${active ? \" smooth-height--active\" : \"\"}${className ? ` ${className}` : \"\"}`}\n    >\n      <div ref={innerRef} className=\"smooth-height__content\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAwCA,IAAM,IAAmB;AAEzB,SAAgB,EAAa,EAAE,WAAQ,aAAU,gBAAgC;CAC/E,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAW,EAAuB,IAAI,GACtC,IAAkB,EAAsB,IAAI;CAyClD,OAvCA,QAAsB;EACpB,IAAM,IAAQ,EAAS,SACjB,IAAQ,EAAS;EAEvB,IADI,CAAC,KAAS,CAAC,KACX,OAAO,iBAAmB,KAAa;EAE3C,IAAI,CAAC,GAOH,OAJA,EAAgB,UAAU,OAAO,iBAAiB;GAEhD,AADA,EAAM,MAAM,SAAS,IACrB,EAAgB,UAAU;EAC5B,GAAG,CAAgB,SACN;GACX,AAAI,EAAgB,YAAY,SAC9B,OAAO,aAAa,EAAgB,OAAO,GAC3C,EAAgB,UAAU;EAE9B;EAIF,AAAI,EAAgB,YAAY,SAC9B,OAAO,aAAa,EAAgB,OAAO,GAC3C,EAAgB,UAAU;EAG5B,IAAM,UAAgB;GACpB,EAAM,MAAM,SAAS,GAAG,EAAM,aAAa,QAAQ,CAAC,EAAE;EACxD;EACA,EAAQ;EAER,IAAM,IAAW,IAAI,eAAe,CAAO;EAE3C,OADA,EAAS,QAAQ,CAAK,SACT;GACX,EAAS,WAAW;EACtB;CACF,GAAG,CAAC,CAAM,CAAC,GAGT,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,gBAAgB,IAAS,2BAA2B,KAAK,IAAY,IAAI,MAAc;EAElG,UAAA,kBAAC,OAAD;GAAK,KAAK;GAAU,WAAU;GAC3B;EACE,CAAA;CACF,CAAA;AAET"}

package/dist/components/SmoothHeight/index.d.ts

@@ -0,0 +1,2 @@
+export { SmoothHeight } from './SmoothHeight';
+export type { SmoothHeightProps } from './SmoothHeight';

package/dist/components/SmoothHeight/index.js

@@ -0,0 +1,2 @@
+import { SmoothHeight as e } from "./SmoothHeight2.js";
+export { e as SmoothHeight };

package/dist/components/StatCard/StatCard.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode, JSX } from 'react';
+export type StatCardEmphasis = "compact" | "default" | "prominent";
+export type StatCardTone = "default" | "success" | "warning" | "danger" | "info";
+export type StatCardTrendDirection = "up" | "down" | "flat";
+export interface StatCardTrend {
+    /** Direction indicator (up / down / flat) */
+    direction: StatCardTrendDirection;
+    /** Human-readable delta label (e.g. "+12%", "-3", "0") */
+    label: string;
+    /** Optional ARIA description for screen readers */
+    ariaLabel?: string;
+}
+export interface StatCardProps {
+    /** Short label rendered above the value (UPPERCASE styled) */
+    label: string;
+    /** Primary metric value (number is coerced to localised string) */
+    value: string | number;
+    /** Optional suffix appended to the value (e.g. "/ 4", "GB") */
+    valueSuffix?: string;
+    /** Optional helper line under the value (e.g. context, secondary metric) */
+    hint?: ReactNode;
+    /** Optional leading icon node, rendered inside an accent badge */
+    icon?: ReactNode;
+    /** Visual tone, mirrors Badge variants. Default: "default" */
+    tone?: StatCardTone;
+    /** Optional trend indicator under the value */
+    trend?: StatCardTrend;
+    /** Click handler. Renders the card as keyboard-accessible button. */
+    onClick?: () => void;
+    /** Render skeletons instead of value/label content while loading */
+    loading?: boolean;
+    /** Optional aria label override (defaults to label + value) */
+    ariaLabel?: string;
+    /** Extra class name applied to the root */
+    className?: string;
+    /** Test id for unit tests */
+    testId?: string;
+    /**
+     * Formatter for numeric values (e.g. abbreviate to "1.2K", append "%").
+     * Defaults to `toLocaleString`. Ignored when `value` is a string.
+     */
+    format?: (value: number) => string;
+    /**
+     * Count up to a numeric value on mount and on change. Off by default so
+     * existing consumers render the final value immediately; opt in for
+     * dashboard hero metrics. Suppressed under `prefers-reduced-motion`.
+     */
+    animate?: boolean;
+    /**
+     * Optional trailing visual on the value line (e.g. a sparkline). Kept as a
+     * slot so the card does not depend on any particular chart component.
+     */
+    sparkline?: ReactNode;
+    /** Visual weight. Default: "default" */
+    emphasis?: StatCardEmphasis;
+}
+declare function StatCardComponent({ label, value, valueSuffix, hint, icon, tone, trend, onClick, loading, ariaLabel, className, testId, format, animate, sparkline, emphasis, }: StatCardProps): JSX.Element;
+export declare const StatCard: import('react').MemoExoticComponent<typeof StatCardComponent>;
+export {};

package/dist/components/StatCard/StatCard2.js

@@ -0,0 +1,111 @@
+import { BaseCard as e } from "../BaseCard/BaseCard2.js";
+import { Skeleton as t } from "../Skeleton/Skeleton2.js";
+import { usePrefersReducedMotion as n } from "../../hooks/usePrefersReducedMotion.js";
+/* empty css         */
+import { memo as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/StatCard/StatCard.tsx
+var l = 800;
+function u(e, t) {
+	let [n, r] = o(t ? 0 : e), s = a(t ? 0 : e), c = a(null);
+	return i(() => {
+		if (!t) {
+			s.current = e, r(e);
+			return;
+		}
+		let n = s.current, i = performance.now(), a = (t) => {
+			let o = Math.min((t - i) / l, 1), u = 1 - (1 - o) ** 3;
+			r(Math.round(n + (e - n) * u)), o < 1 ? c.current = requestAnimationFrame(a) : s.current = e;
+		};
+		return c.current = requestAnimationFrame(a), () => {
+			c.current !== null && cancelAnimationFrame(c.current);
+		};
+	}, [e, t]), t ? n : e;
+}
+var d = {
+	up: "▲",
+	down: "▼",
+	flat: "•"
+};
+function f(e, t) {
+	return typeof e == "number" ? t ? t(e) : e.toLocaleString() : e;
+}
+function p({ label: r, value: i, valueSuffix: a, hint: o, icon: l, tone: p = "default", trend: m, onClick: h, loading: g = !1, ariaLabel: _, className: v = "", testId: y, format: b, animate: x = !1, sparkline: S, emphasis: C = "default" }) {
+	let w = n(), T = typeof i == "number", E = x && T && !g && !w, D = u(T ? i : 0, E), O = f(T && E ? D : i, b), k = _ ?? (g ? r : `${r}: ${f(i, b)}${a ?? ""}`), A = [
+		"stat-card",
+		"corner-accent",
+		`stat-card--tone-${p}`,
+		C === "default" ? "" : `stat-card--${C}`,
+		v
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ c(e, {
+		className: A,
+		onClick: h,
+		role: h ? void 0 : "group",
+		ariaLabel: k,
+		testId: y,
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "stat-card__header",
+				children: [/* @__PURE__ */ s("span", {
+					className: "stat-card__label",
+					children: r
+				}), l && /* @__PURE__ */ s("span", {
+					className: "stat-card__icon",
+					"aria-hidden": "true",
+					children: l
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "stat-card__body",
+				children: [g ? /* @__PURE__ */ s(t, {
+					width: "60%",
+					height: "2rem"
+				}) : S ? /* @__PURE__ */ c("span", {
+					className: "stat-card__value-line",
+					children: [/* @__PURE__ */ c("span", {
+						className: "stat-card__value-row",
+						children: [/* @__PURE__ */ s("span", {
+							className: "stat-card__value",
+							children: O
+						}), a && /* @__PURE__ */ s("span", {
+							className: "stat-card__value-suffix",
+							children: a
+						})]
+					}), /* @__PURE__ */ s("span", {
+						className: "stat-card__sparkline",
+						children: S
+					})]
+				}) : /* @__PURE__ */ c("span", {
+					className: "stat-card__value-row",
+					children: [/* @__PURE__ */ s("span", {
+						className: "stat-card__value",
+						children: O
+					}), a && /* @__PURE__ */ s("span", {
+						className: "stat-card__value-suffix",
+						children: a
+					})]
+				}), m && !g && /* @__PURE__ */ c("span", {
+					className: `stat-card__trend stat-card__trend--${m.direction}`,
+					"aria-label": m.ariaLabel ?? m.label,
+					children: [/* @__PURE__ */ s("span", {
+						"aria-hidden": "true",
+						children: d[m.direction]
+					}), /* @__PURE__ */ s("span", { children: m.label })]
+				})]
+			}),
+			o != null && /* @__PURE__ */ s("div", {
+				className: "stat-card__hint",
+				children: g ? /* @__PURE__ */ s(t, {
+					width: "80%",
+					height: "0.85rem"
+				}) : o
+			})
+		]
+	});
+}
+var m = r(p);
+//#endregion
+export { m as StatCard };
+
+//# sourceMappingURL=StatCard2.js.map

package/dist/components/StatCard/StatCard2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard2.js","names":[],"sources":["../../../src/components/StatCard/StatCard.tsx"],"sourcesContent":["/**\n * StatCard Component\n *\n * Compact metric card for dashboards. Renders a label, a large numeric\n * value (with optional unit/suffix), and optional icon, hint, trend, or\n * accent tone. Wraps `BaseCard` so it inherits hover/focus/click affordances\n * and design tokens consistently with the rest of the common library.\n *\n * Designed for cross-page reuse: Squad dashboard, Statistics page, Cowork\n * dashboard, etc.\n */\n\nimport { memo, useEffect, useRef, useState, type ReactNode, type JSX } from \"react\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\nimport { BaseCard } from \"../BaseCard\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./StatCard.css\";\n\nexport type StatCardEmphasis = \"compact\" | \"default\" | \"prominent\";\n\nexport type StatCardTone = \"default\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type StatCardTrendDirection = \"up\" | \"down\" | \"flat\";\n\nexport interface StatCardTrend {\n  /** Direction indicator (up / down / flat) */\n  direction: StatCardTrendDirection;\n  /** Human-readable delta label (e.g. \"+12%\", \"-3\", \"0\") */\n  label: string;\n  /** Optional ARIA description for screen readers */\n  ariaLabel?: string;\n}\n\nexport interface StatCardProps {\n  /** Short label rendered above the value (UPPERCASE styled) */\n  label: string;\n  /** Primary metric value (number is coerced to localised string) */\n  value: string | number;\n  /** Optional suffix appended to the value (e.g. \"/ 4\", \"GB\") */\n  valueSuffix?: string;\n  /** Optional helper line under the value (e.g. context, secondary metric) */\n  hint?: ReactNode;\n  /** Optional leading icon node, rendered inside an accent badge */\n  icon?: ReactNode;\n  /** Visual tone, mirrors Badge variants. Default: \"default\" */\n  tone?: StatCardTone;\n  /** Optional trend indicator under the value */\n  trend?: StatCardTrend;\n  /** Click handler. Renders the card as keyboard-accessible button. */\n  onClick?: () => void;\n  /** Render skeletons instead of value/label content while loading */\n  loading?: boolean;\n  /** Optional aria label override (defaults to label + value) */\n  ariaLabel?: string;\n  /** Extra class name applied to the root */\n  className?: string;\n  /** Test id for unit tests */\n  testId?: string;\n  /**\n   * Formatter for numeric values (e.g. abbreviate to \"1.2K\", append \"%\").\n   * Defaults to `toLocaleString`. Ignored when `value` is a string.\n   */\n  format?: (value: number) => string;\n  /**\n   * Count up to a numeric value on mount and on change. Off by default so\n   * existing consumers render the final value immediately; opt in for\n   * dashboard hero metrics. Suppressed under `prefers-reduced-motion`.\n   */\n  animate?: boolean;\n  /**\n   * Optional trailing visual on the value line (e.g. a sparkline). Kept as a\n   * slot so the card does not depend on any particular chart component.\n   */\n  sparkline?: ReactNode;\n  /** Visual weight. Default: \"default\" */\n  emphasis?: StatCardEmphasis;\n}\n\nconst ANIMATION_DURATION_MS = 800;\n\n/**\n * Counts from the previous value to `target` with an ease-out-cubic curve.\n * When `enabled` is false the target is returned directly and no animation\n * frame is ever scheduled.\n */\nfunction useAnimatedValue(target: number, enabled: boolean): number {\n  const [displayValue, setDisplayValue] = useState(enabled ? 0 : target);\n  const previousValue = useRef(enabled ? 0 : target);\n  const frameRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      previousValue.current = target;\n      setDisplayValue(target);\n      return;\n    }\n\n    const startValue = previousValue.current;\n    const startTime = performance.now();\n\n    const step = (now: number): void => {\n      const progress = Math.min((now - startTime) / ANIMATION_DURATION_MS, 1);\n      const eased = 1 - Math.pow(1 - progress, 3);\n      setDisplayValue(Math.round(startValue + (target - startValue) * eased));\n\n      if (progress < 1) {\n        frameRef.current = requestAnimationFrame(step);\n      } else {\n        previousValue.current = target;\n      }\n    };\n\n    frameRef.current = requestAnimationFrame(step);\n\n    return () => {\n      if (frameRef.current !== null) {\n        cancelAnimationFrame(frameRef.current);\n      }\n    };\n  }, [target, enabled]);\n\n  return enabled ? displayValue : target;\n}\n\nconst TREND_GLYPH: Record<StatCardTrendDirection, string> = {\n  up: \"▲\",\n  down: \"▼\",\n  flat: \"•\",\n};\n\nfunction formatValue(\n  value: string | number,\n  format?: (value: number) => string,\n): string {\n  if (typeof value === \"number\") {\n    return format ? format(value) : value.toLocaleString();\n  }\n  return value;\n}\n\nfunction StatCardComponent({\n  label,\n  value,\n  valueSuffix,\n  hint,\n  icon,\n  tone = \"default\",\n  trend,\n  onClick,\n  loading = false,\n  ariaLabel,\n  className = \"\",\n  testId,\n  format,\n  animate = false,\n  sparkline,\n  emphasis = \"default\",\n}: StatCardProps): JSX.Element {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const isNumeric = typeof value === \"number\";\n  const shouldAnimate = animate && isNumeric && !loading && !prefersReducedMotion;\n  const animatedValue = useAnimatedValue(isNumeric ? value : 0, shouldAnimate);\n\n  const displayValue = formatValue(\n    isNumeric && shouldAnimate ? animatedValue : value,\n    format,\n  );\n\n  // The aria-label always describes the settled value, never an in-flight\n  // animation frame, so assistive tech is not read a counting-up number.\n  const composedAriaLabel =\n    ariaLabel ??\n    (loading ? label : `${label}: ${formatValue(value, format)}${valueSuffix ?? \"\"}`);\n\n  const rootClass = [\n    \"stat-card\",\n    \"corner-accent\",\n    `stat-card--tone-${tone}`,\n    emphasis !== \"default\" ? `stat-card--${emphasis}` : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseCard\n      className={rootClass}\n      onClick={onClick}\n      role={onClick ? undefined : \"group\"}\n      ariaLabel={composedAriaLabel}\n      testId={testId}\n    >\n      <div className=\"stat-card__header\">\n        <span className=\"stat-card__label\">{label}</span>\n        {icon && (\n          <span className=\"stat-card__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      <div className=\"stat-card__body\">\n        {loading ? (\n          <Skeleton width=\"60%\" height=\"2rem\" />\n        ) : sparkline ? (\n          // Only wrap when a sparkline is present, so cards without one keep\n          // the exact DOM they had before the slot existed.\n          <span className=\"stat-card__value-line\">\n            <span className=\"stat-card__value-row\">\n              <span className=\"stat-card__value\">{displayValue}</span>\n              {valueSuffix && (\n                <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n              )}\n            </span>\n            <span className=\"stat-card__sparkline\">{sparkline}</span>\n          </span>\n        ) : (\n          <span className=\"stat-card__value-row\">\n            <span className=\"stat-card__value\">{displayValue}</span>\n            {valueSuffix && (\n              <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n            )}\n          </span>\n        )}\n\n        {trend && !loading && (\n          <span\n            className={`stat-card__trend stat-card__trend--${trend.direction}`}\n            aria-label={trend.ariaLabel ?? trend.label}\n          >\n            <span aria-hidden=\"true\">{TREND_GLYPH[trend.direction]}</span>\n            <span>{trend.label}</span>\n          </span>\n        )}\n      </div>\n\n      {hint !== undefined && hint !== null && (\n        <div className=\"stat-card__hint\">\n          {loading ? <Skeleton width=\"80%\" height=\"0.85rem\" /> : hint}\n        </div>\n      )}\n    </BaseCard>\n  );\n}\n\nexport const StatCard = memo(StatCardComponent);\n"],"mappings":";;;;;;;AA8EA,IAAM,IAAwB;AAO9B,SAAS,EAAiB,GAAgB,GAA0B;CAClE,IAAM,CAAC,GAAc,KAAmB,EAAS,IAAU,IAAI,CAAM,GAC/D,IAAgB,EAAO,IAAU,IAAI,CAAM,GAC3C,IAAW,EAAsB,IAAI;CAiC3C,OA/BA,QAAgB;EACd,IAAI,CAAC,GAAS;GAEZ,AADA,EAAc,UAAU,GACxB,EAAgB,CAAM;GACtB;EACF;EAEA,IAAM,IAAa,EAAc,SAC3B,IAAY,YAAY,IAAI,GAE5B,KAAQ,MAAsB;GAClC,IAAM,IAAW,KAAK,KAAK,IAAM,KAAa,GAAuB,CAAC,GAChE,IAAQ,KAAa,IAAI,MAAU;GAGzC,AAFA,EAAgB,KAAK,MAAM,KAAc,IAAS,KAAc,CAAK,CAAC,GAElE,IAAW,IACb,EAAS,UAAU,sBAAsB,CAAI,IAE7C,EAAc,UAAU;EAE5B;EAIA,OAFA,EAAS,UAAU,sBAAsB,CAAI,SAEhC;GACX,AAAI,EAAS,YAAY,QACvB,qBAAqB,EAAS,OAAO;EAEzC;CACF,GAAG,CAAC,GAAQ,CAAO,CAAC,GAEb,IAAU,IAAe;AAClC;AAEA,IAAM,IAAsD;CAC1D,IAAI;CACJ,MAAM;CACN,MAAM;AACR;AAEA,SAAS,EACP,GACA,GACQ;CAIR,OAHI,OAAO,KAAU,WACZ,IAAS,EAAO,CAAK,IAAI,EAAM,eAAe,IAEhD;AACT;AAEA,SAAS,EAAkB,EACzB,UACA,UACA,gBACA,SACA,SACA,UAAO,WACP,UACA,YACA,aAAU,IACV,cACA,eAAY,IACZ,WACA,WACA,aAAU,IACV,cACA,cAAW,aACkB;CAC7B,IAAM,IAAuB,EAAwB,GAC/C,IAAY,OAAO,KAAU,UAC7B,IAAgB,KAAW,KAAa,CAAC,KAAW,CAAC,GACrD,IAAgB,EAAiB,IAAY,IAAQ,GAAG,CAAa,GAErE,IAAe,EACnB,KAAa,IAAgB,IAAgB,GAC7C,CACF,GAIM,IACJ,MACC,IAAU,IAAQ,GAAG,EAAM,IAAI,EAAY,GAAO,CAAM,IAAI,KAAe,OAExE,IAAY;EAChB;EACA;EACA,mBAAmB;EACnB,MAAa,YAAuC,KAA3B,cAAc;EACvC;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,GAAD;EACE,WAAW;EACF;EACT,MAAM,IAAU,KAAA,IAAY;EAC5B,WAAW;EACH;EALV,UAAA;GAOE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAA;IAAY,CAAA,GAC/C,KACC,kBAAC,QAAD;KAAM,WAAU;KAAkB,eAAY;KAC3C,UAAA;IACG,CAAA,CAEL;;GAEL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,IACC,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,IACnC,IAGF,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,kBAAC,QAAD;OAAM,WAAU;OAAoB,UAAA;MAAmB,CAAA,GACtD,KACC,kBAAC,QAAD;OAAM,WAAU;OAA2B,UAAA;MAAkB,CAAA,CAE3D;KACN,CAAA,GAAA,kBAAC,QAAD;MAAM,WAAU;MAAwB,UAAA;KAAgB,CAAA,CACpD;IAEN,CAAA,IAAA,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;MAAoB,UAAA;KAAmB,CAAA,GACtD,KACC,kBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA;KAAkB,CAAA,CAE3D;IAGP,CAAA,GAAA,KAAS,CAAC,KACT,kBAAC,QAAD;KACE,WAAW,sCAAsC,EAAM;KACvD,cAAY,EAAM,aAAa,EAAM;KAFvC,UAAA,CAIE,kBAAC,QAAD;MAAM,eAAY;MAAQ,UAAA,EAAY,EAAM;KAAiB,CAAA,GAC7D,kBAAC,QAAD,EAAA,UAAO,EAAM,MAAY,CAAA,CACrB;IAEL,CAAA,CAAA;;GAEJ,KAA+B,QAC9B,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,IAAU,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAW,CAAA,IAAI;GACpD,CAAA;EAEC;;AAEd;AAEA,IAAa,IAAW,EAAK,CAAiB"}

package/dist/components/StatCard/formatters.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Value formatters for StatCard.
+ *
+ * Kept out of StatCard.tsx so that file only exports components, which is what
+ * the react-refresh lint rule requires for fast refresh to work.
+ */
+/**
+ * Abbreviates large counts ("1.2M", "3.4K") and falls back to locale grouping
+ * below 1000. Pass explicitly via StatCard's `format` prop; the card's own
+ * default is plain `toLocaleString` so existing consumers are unaffected.
+ */
+export declare function formatCompactNumber(value: number): string;

package/dist/components/StatCard/formatters.js

@@ -0,0 +1,8 @@
+//#region src/components/StatCard/formatters.ts
+function e(e) {
+	return e >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(1)}K` : e.toLocaleString();
+}
+//#endregion
+export { e as formatCompactNumber };
+
+//# sourceMappingURL=formatters.js.map

package/dist/components/StatCard/formatters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatters.js","names":[],"sources":["../../../src/components/StatCard/formatters.ts"],"sourcesContent":["/**\n * Value formatters for StatCard.\n *\n * Kept out of StatCard.tsx so that file only exports components, which is what\n * the react-refresh lint rule requires for fast refresh to work.\n */\n\n/**\n * Abbreviates large counts (\"1.2M\", \"3.4K\") and falls back to locale grouping\n * below 1000. Pass explicitly via StatCard's `format` prop; the card's own\n * default is plain `toLocaleString` so existing consumers are unaffected.\n */\nexport function formatCompactNumber(value: number): string {\n  if (value >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`;\n  }\n  if (value >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`;\n  }\n  return value.toLocaleString();\n}\n"],"mappings":";AAYA,SAAgB,EAAoB,GAAuB;CAOzD,OANI,KAAS,MACJ,IAAI,IAAQ,IAAA,CAAW,QAAQ,CAAC,EAAE,KAEvC,KAAS,MACJ,IAAI,IAAQ,IAAA,CAAO,QAAQ,CAAC,EAAE,KAEhC,EAAM,eAAe;AAC9B"}

package/dist/components/StatCard/index.d.ts

@@ -0,0 +1,3 @@
+export { StatCard } from './StatCard';
+export { formatCompactNumber } from './formatters';
+export type { StatCardProps, StatCardEmphasis, StatCardTone, StatCardTrend, StatCardTrendDirection, } from './StatCard';

package/dist/components/StatCard/index.js

@@ -0,0 +1,3 @@
+import { StatCard as e } from "./StatCard2.js";
+import { formatCompactNumber as t } from "./formatters.js";
+export { e as StatCard, t as formatCompactNumber };

package/dist/components/StatusTag/StatusTag.d.ts

@@ -0,0 +1,38 @@
+import { BadgeProps } from '../Badge';
+/**
+ * Canonical lifecycle state surface accepted by {@link StatusTag}.
+ *
+ * The names are deliberately broad so domain types can map onto them:
+ * - SessionState `"starting"`           → `"preparing"`
+ * - SessionState `"running"` (healthy)  → `"running"`
+ * - SessionState `"idle"`               → `"idle"`
+ * - SessionState `"busy"`               → `"busy"`
+ * - SessionState `"stopping"`           → `"stopping"`
+ * - SessionState `"terminated"`         → `"terminated"`
+ * - SessionState `"error"`              → `"error"`
+ */
+export type StatusKind = "running" | "preparing" | "idle" | "busy" | "stopping" | "terminated" | "error";
+export interface StatusTagProps {
+    /** Canonical lifecycle state. Drives color and indicator behavior. */
+    state: StatusKind;
+    /** Display label. Callers are responsible for i18n at the call site. */
+    label: string;
+    /** Override the underlying Badge size. Defaults to `"small"`. */
+    size?: BadgeProps["size"];
+    /**
+     * When `true`, render a small pulsing dot before the label to
+     * communicate that the state is in motion. Defaults to a sensible
+     * choice based on `state` (transient states pulse, terminal ones
+     * don't).
+     */
+    pulse?: boolean;
+    /** Extra class names appended to the root span. */
+    className?: string;
+}
+declare function StatusTagComponent({ state, label, size, pulse, className, }: StatusTagProps): import("react").JSX.Element;
+/**
+ * Memoized to avoid re-rendering rows that didn't change. The component
+ * is a pure function of its props.
+ */
+export declare const StatusTag: import('react').MemoExoticComponent<typeof StatusTagComponent>;
+export default StatusTag;

package/dist/components/StatusTag/StatusTag2.js

@@ -0,0 +1,44 @@
+import { Badge as e } from "../Badge/Badge2.js";
+/* empty css          */
+import { memo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/StatusTag/StatusTag.tsx
+function i(e) {
+	switch (e) {
+		case "running": return "success";
+		case "preparing": return "info";
+		case "idle": return "default";
+		case "busy": return "primary";
+		case "stopping": return "warning";
+		case "terminated": return "default";
+		case "error": return "danger";
+	}
+}
+function a(e) {
+	return e === "preparing" || e === "stopping" || e === "busy";
+}
+function o({ state: t, label: o, size: s = "small", pulse: c, className: l = "" }) {
+	let u = c ?? a(t), d = [
+		"status-tag",
+		`status-tag--${t}`,
+		l
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ r(e, {
+		variant: i(t),
+		size: s,
+		className: d,
+		children: [u && /* @__PURE__ */ n("span", {
+			className: "status-tag__indicator",
+			"aria-hidden": "true",
+			"data-testid": "status-tag-indicator"
+		}), /* @__PURE__ */ n("span", {
+			className: "status-tag__label",
+			children: o
+		})]
+	});
+}
+var s = t(o);
+//#endregion
+export { s as StatusTag, s as default };
+
+//# sourceMappingURL=StatusTag2.js.map