@logicplanes/kaeso-ui 0.4.3 → 0.4.5

package/dist/components/stat.js

@@ -1,30 +1,31 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { i as t, r as n } from "../chunks/context-BELWW79w.js";
 import { t as r } from "../chunks/observe-resize-DhxhmoyB.js";
-import { r as i } from "../chunks/skeleton-Dcz57Zyp.js";
-import { t as a } from "../chunks/badge-C2KtxCLB.js";
-import { Sparkline as o } from "./charts/sparkline.js";
-import { Children as s, cloneElement as c, createContext as l, forwardRef as u, isValidElement as d, useContext as f, useLayoutEffect as p, useRef as m, useState as h } from "react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { r as i } from "../chunks/skeleton-D-qk3mes.js";
+import { t as a } from "../chunks/truncated-d1afmUJT.js";
+import { t as o } from "../chunks/badge-C0GC3B9X.js";
+import { Sparkline as s } from "./charts/sparkline.js";
+import { Children as c, cloneElement as l, createContext as u, forwardRef as d, isValidElement as f, useContext as p, useLayoutEffect as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/stat/stat.tsx
-var y = { size: {
+var b = { size: {
 	md: { classes: "text-metric" },
 	sm: { classes: "text-title" }
-} }, b = { size: "md" }, x = /* @__PURE__ */ u(function({ value: t, unit: n, delta: r, size: i = "md", className: o }, s) {
-	return /* @__PURE__ */ v("div", {
+} }, x = { size: "md" }, S = /* @__PURE__ */ d(function({ value: t, unit: n, delta: r, size: i = "md", className: a }, s) {
+	return /* @__PURE__ */ y("div", {
 		ref: s,
-		className: e("flex min-w-0 flex-wrap items-baseline gap-x-8 gap-y-4", o),
+		className: e("flex min-w-0 flex-wrap items-baseline gap-x-8 gap-y-4", a),
 		children: [
-			/* @__PURE__ */ _("span", {
-				className: e("font-semibold text-fg tabular", y.size[i].classes),
+			/* @__PURE__ */ v("span", {
+				className: e("font-semibold text-fg tabular", b.size[i].classes),
 				children: t
 			}),
-			n && /* @__PURE__ */ _("span", {
+			n && /* @__PURE__ */ v("span", {
 				className: "text-body-lg font-regular text-fg-secondary",
 				children: n
 			}),
-			r && /* @__PURE__ */ _(a, {
+			r && /* @__PURE__ */ v(o, {
 				tone: r.tone ?? "neutral",
 				className: "self-center",
 				children: r.label
@@ -32,25 +33,25 @@ var y = { size: {
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (x.displayName = "Stat");
-var S = /* @__PURE__ */ u(function({ children: t, className: n }, r) {
-	return /* @__PURE__ */ _("div", {
+process.env.NODE_ENV !== "production" && (S.displayName = "Stat");
+var C = /* @__PURE__ */ d(function({ children: t, className: n }, r) {
+	return /* @__PURE__ */ v("div", {
 		ref: r,
 		className: e("flex flex-wrap items-baseline gap-x-48 gap-y-16", n),
 		children: t
 	});
 });
-process.env.NODE_ENV !== "production" && (S.displayName = "MetricRow");
-var C = (e, t, n) => {
+process.env.NODE_ENV !== "production" && (C.displayName = "MetricRow");
+var w = (e, t, n) => {
 	let r = Math.abs(e) * 100, i = r >= 10 || r === 0 ? 0 : 1, a = new Intl.NumberFormat(n === "en" ? "en-US" : n, {
 		minimumFractionDigits: i,
 		maximumFractionDigits: i,
 		useGrouping: !1
 	}).format(i ? Number(r.toFixed(1)) : Math.round(r));
 	return `${e > 0 ? "↑" : e < 0 ? "↓" : ""}${t("statTile.percent", "{value}%", { value: a })}`;
-}, w = [
+}, T = [
 	{
-		classes: "text-title-lg",
+		classes: "text-metric",
 		px: 28
 	},
 	{
@@ -61,78 +62,85 @@ var C = (e, t, n) => {
 		classes: "text-title-sm",
 		px: 17
 	}
-], T = /* @__PURE__ */ l(0), E = /* @__PURE__ */ u(function({ label: r, value: s, change: c, detail: l, trend: u, trendColor: d, loading: p, className: m }, h) {
-	let y = t(), b = n(), x = c && c.value !== 0 ? c.value > 0 == ((c.better ?? "up") === "up") : void 0, S = w[f(T)] ?? w[0];
-	return /* @__PURE__ */ v("div", {
-		ref: h,
+], E = /* @__PURE__ */ u(0), D = /* @__PURE__ */ d(function({ label: r, value: c, change: l, detail: u, trend: d, trendColor: f, loading: m, className: h }, g) {
+	let b = t(), x = n(), S = l && l.value !== 0 ? l.value > 0 == ((l.better ?? "up") === "up") : void 0, C = T[p(E)] ?? T[0];
+	return /* @__PURE__ */ y("div", {
+		ref: g,
 		role: "listitem",
-		"aria-busy": p || void 0,
-		className: e("flex min-w-0 flex-col bg-raised px-20 pt-16", u ? "pb-12" : "pb-16", m),
+		"aria-busy": m || void 0,
+		className: e("flex min-w-0 flex-col bg-raised px-20 pt-16", d ? "pb-12" : "pb-16", h),
 		children: [
-			/* @__PURE__ */ _("span", {
+			/* @__PURE__ */ v("span", {
 				className: "text-small font-medium text-fg-secondary",
 				children: r
 			}),
-			/* @__PURE__ */ _("span", {
+			/* @__PURE__ */ v("span", {
 				className: "mt-6 flex h-34 min-w-0 items-center",
-				children: /* @__PURE__ */ _("span", {
-					"data-stat-value": S.px,
-					className: e("max-w-full truncate font-semibold text-fg tabular", S.classes, p && "flex"),
-					children: p ? /* @__PURE__ */ _(i, {
+				children: m ? /* @__PURE__ */ v("span", {
+					"data-stat-value": C.px,
+					className: e("flex max-w-full font-semibold text-fg tabular", C.classes),
+					children: /* @__PURE__ */ v(i, {
 						shape: "line",
 						className: "h-20 w-96"
-					}) : s
+					})
+				}) : /* @__PURE__ */ v(a, {
+					"data-stat-value": C.px,
+					className: e("max-w-full font-semibold text-fg tabular", C.classes),
+					children: c
 				})
 			}),
-			p ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("span", {
+			m ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("span", {
 				className: "mt-2 flex h-20 items-center",
-				children: /* @__PURE__ */ _(i, {
+				children: /* @__PURE__ */ v(i, {
 					shape: "line",
 					className: "w-120"
 				})
-			}), u && /* @__PURE__ */ _("span", {
+			}), d && /* @__PURE__ */ v("span", {
 				className: "mt-auto h-40 shrink-0 pt-8",
-				children: /* @__PURE__ */ _(i, { className: "h-full w-full" })
-			})] }) : /* @__PURE__ */ v("span", {
+				children: /* @__PURE__ */ v(i, { className: "h-full w-full" })
+			})] }) : /* @__PURE__ */ y("span", {
 				className: "mt-2 flex min-h-20 min-w-0 flex-wrap items-center gap-x-6 gap-y-2 text-small text-fg-tertiary",
-				children: [c && Number.isFinite(c.value) && /* @__PURE__ */ _("span", {
+				children: [l && Number.isFinite(l.value) && /* @__PURE__ */ v("span", {
 					className: "flex h-20 shrink-0 items-center",
-					children: /* @__PURE__ */ _(a, {
-						tone: x === void 0 ? "neutral" : x ? "success" : "danger",
+					children: /* @__PURE__ */ y(o, {
+						tone: S === void 0 ? "neutral" : S ? "success" : "danger",
 						className: "shrink-0 tabular",
-						children: C(c.value, y, b)
+						children: [w(l.value, b, x), S !== void 0 && /* @__PURE__ */ y("span", {
+							className: "sr-only",
+							children: [" ", S ? b("statTile.better", "better") : b("statTile.worse", "worse")]
+						})]
 					})
-				}), l && /* @__PURE__ */ _("span", {
+				}), u && /* @__PURE__ */ v("span", {
 					className: "min-w-0",
-					children: l
+					children: u
 				})]
 			}),
-			u && !p && /* @__PURE__ */ _("span", {
+			d && !m && /* @__PURE__ */ v("span", {
 				className: "mt-auto h-40 shrink-0 pt-8",
-				children: u.length > 1 && /* @__PURE__ */ _(o, {
-					values: u,
+				children: d.length > 1 && /* @__PURE__ */ v(s, {
+					values: d,
 					fluid: !0,
-					...d ? { color: d } : {},
-					"aria-label": typeof r == "string" ? y("statTile.trendPerDay", "{label} per day", { label: r }) : y("statTile.trend", "Trend")
+					...f ? { color: f } : {},
+					"aria-label": typeof r == "string" ? b("statTile.trendPerDay", "{label} per day", { label: r }) : b("statTile.trend", "Trend")
 				})
 			})
 		]
 	});
 });
-process.env.NODE_ENV !== "production" && (E.displayName = "StatTile");
-var D = {
+process.env.NODE_ENV !== "production" && (D.displayName = "StatTile");
+var O = {
 	1: "grid-cols-1",
 	2: "grid-cols-2"
-}, O = {
+}, k = {
 	3: "lg:grid-cols-3",
 	4: "lg:grid-cols-4"
-}, k = { 2: "col-span-2" }, A = {
+}, A = { 2: "col-span-2" }, j = {
 	1: "lg:col-span-1",
 	2: "lg:col-span-2",
 	3: "lg:col-span-3",
 	4: "lg:col-span-4"
-}, j = 40, M = 1, N = 1.03;
-function P(e, t) {
+}, M = 40, N = 1, P = 1.03;
+function F(e, t) {
 	let n = e <= 2 ? Math.max(e, 1) : t ? Math.min(e, 4) : 2, r = e - 1;
 	return {
 		cols: n,
@@ -143,12 +151,12 @@ function P(e, t) {
 		}[e % 4] ?? 1 : e % 2 == 1 ? 2 : 1)
 	};
 }
-var F = 160;
-function I(e, t, n) {
-	let r = w[0].px, i = ({ cols: n, spans: i }) => {
-		let a = (t - (n - 1) * M) / n, o = i.map((e) => a * e + (e - 1) * M - j);
-		return w.findIndex((t) => e.every((e, n) => e * t.px * N / r <= (o[n] ?? 0)));
-	}, a = P(e.length, n), o = a.cols > 2 && (t - (a.cols - 1) * M) / a.cols < F, s = i(o ? P(e.length, !1) : a);
+var I = 160;
+function L(e, t, n) {
+	let r = T[0].px, i = ({ cols: n, spans: i }) => {
+		let a = (t - (n - 1) * N) / n, o = i.map((e) => a * e + (e - 1) * N - M);
+		return T.findIndex((t) => e.every((e, n) => e * t.px * P / r <= (o[n] ?? 0)));
+	}, a = F(e.length, n), o = a.cols > 2 && (t - (a.cols - 1) * N) / a.cols < I, s = i(o ? F(e.length, !1) : a);
 	if (s >= 0 || e.length < 2) return {
 		step: Math.max(s, 0),
 		single: !1,
@@ -159,50 +167,56 @@ function I(e, t, n) {
 		spans: e.map(() => 1)
 	});
 	return {
-		step: c >= 0 ? c : w.length - 1,
+		step: c >= 0 ? c : T.length - 1,
 		single: !0,
 		two: !1
 	};
 }
-var L = /* @__PURE__ */ u(function({ children: t, className: n, ...i }, a) {
-	let o = s.toArray(t).filter(d), l = o.length, u = m(null), [f, g] = h({
+var R = /* @__PURE__ */ d(function({ children: t, className: n, ...i }, a) {
+	let o = c.toArray(t).filter(f), s = o.length, u = h(null), [d, p] = g({
 		step: 0,
 		single: !1,
 		two: !1
-	}), v = m(() => {});
-	v.current = () => {
+	}), _ = h(() => {}), y = h(0);
+	_.current = () => {
 		let e = u.current;
 		if (!e || !e.clientWidth) return;
-		let t = [...e.querySelectorAll("[data-stat-value]")].map((e) => e.scrollWidth * w[0].px / (Number(e.dataset.statValue) || w[0].px)), n = typeof window.matchMedia == "function" && window.matchMedia("(min-width: 1024px)").matches, r = I(t, e.clientWidth, n);
-		g((e) => e.step === r.step && e.single === r.single && e.two === r.two ? e : r);
-	}, p(() => v.current()), p(() => {
+		let t = [...e.querySelectorAll("[data-stat-value]")].map((e) => e.scrollWidth * T[0].px / (Number(e.dataset.statValue) || T[0].px)), n = typeof window.matchMedia == "function" && window.matchMedia("(min-width: 1024px)").matches, r = L(t, e.clientWidth, n), i = y.current === e.clientWidth;
+		y.current = e.clientWidth, p((e) => {
+			let t = i && r.step < e.step ? {
+				...r,
+				step: e.step
+			} : r;
+			return e.step === t.step && e.single === t.single && e.two === t.two ? e : t;
+		});
+	}, m(() => _.current()), m(() => {
 		let e = u.current;
 		if (!e || typeof ResizeObserver > "u") return;
-		let t = r([e, ...e.querySelectorAll("[data-stat-value]")], () => v.current());
-		return document.fonts?.ready.then(() => v.current()), t;
-	}, [l]);
-	let y = P(l, !1), b = P(l, !0), x = (t) => {
-		let n = y.spans[t] ?? 1, r = b.spans[t] ?? 1;
-		return e(k[n], !f.two && r !== n && A[r]) || void 0;
+		let t = r([e, ...e.querySelectorAll("[data-stat-value]")], () => _.current());
+		return document.fonts?.ready.then(() => _.current()), t;
+	}, [s]);
+	let b = F(s, !1), x = F(s, !0), S = (t) => {
+		let n = b.spans[t] ?? 1, r = x.spans[t] ?? 1;
+		return e(A[n], !d.two && r !== n && j[r]) || void 0;
 	};
-	return /* @__PURE__ */ _("div", {
+	return /* @__PURE__ */ v("div", {
 		ref: (e) => {
 			u.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
 		},
 		role: "list",
-		className: e("grid gap-1 overflow-hidden rounded-group bg-line-subtle shadow-xs", f.single ? "grid-cols-1" : f.two ? "grid-cols-2" : e(D[y.cols], b.cols !== y.cols && O[b.cols]), n),
+		className: e("grid gap-1 overflow-hidden rounded-group bg-line shadow-xs forced-line", d.single ? "grid-cols-1" : d.two ? "grid-cols-2" : e(O[b.cols], x.cols !== b.cols && k[x.cols]), n),
 		...i,
-		children: /* @__PURE__ */ _(T.Provider, {
-			value: f.step,
+		children: /* @__PURE__ */ v(E.Provider, {
+			value: d.step,
 			children: o.map((t, n) => {
-				let r = f.single ? void 0 : x(n);
-				return r ? c(t, { className: e(t.props.className, r) }) : t;
+				let r = d.single ? void 0 : S(n);
+				return r ? l(t, { className: e(t.props.className, r) }) : t;
 			})
 		})
 	});
 });
-process.env.NODE_ENV !== "production" && (L.displayName = "StatGrid");
+process.env.NODE_ENV !== "production" && (R.displayName = "StatGrid");
 //#endregion
-export { b as KAESO_STAT_DEFAULT_VARIANTS, y as KAESO_STAT_VARIANTS, S as MetricRow, w as STAT_VALUE_STEPS, x as Stat, L as StatGrid, E as StatTile, I as statGridFit, P as statGridLayout };
+export { x as KAESO_STAT_DEFAULT_VARIANTS, b as KAESO_STAT_VARIANTS, C as MetricRow, T as STAT_VALUE_STEPS, S as Stat, R as StatGrid, D as StatTile, L as statGridFit, F as statGridLayout };
 
 //# sourceMappingURL=stat.js.map

package/dist/components/stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.js","names":["_Fragment","cn","useUiText","useLocale","observeResize","Skeleton","Badge","Fragment$1","KAESO_STAT_VARIANTS","KAESO_STAT_DEFAULT_VARIANTS","Stat","className","size","value","unit","delta","MetricRow","changeLabel","pct","v","digits","shown","locale","STAT_VALUE_STEPS","StatStepContext","StatTile","t","good","change","step","useContext","loading","trend","label","detail","Sparkline","trendColor","GRID_COLS","LG_GRID_COLS","COL_SPAN","LG_COL_SPAN","TILE_PADDING","GAP","SLACK","statGridLayout","cols","n","wide","last","MIN_TILE","statGridFit","base","at","col","width","rooms","spans","s","needs","need","st","i","own","two","single","StatGrid","props","tiles","Children","children","isValidElement","grid","useRef","fit","setFit","useState","measure","el","next","f","useLayoutEffect","stop","narrow","span","small","large","ref","extra","cloneElement"],"sources":["../../src/components/stat/stat.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { observeResize } from \"../../utils/observe-resize.js\";\nimport { Badge } from \"../badge/badge.js\";\nimport { Sparkline } from \"../charts/sparkline.js\";\nimport { Skeleton } from \"../skeleton/skeleton.js\";\nimport { useLocale, useUiText, type UiText } from \"../../i18n/context.js\";\n\nexport const KAESO_STAT_VARIANTS = {\n  size: {\n    md: { classes: \"text-metric\" },\n    sm: { classes: \"text-title\" },\n  },\n} as const;\nexport const KAESO_STAT_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface StatProps {\n  value: ReactNode;\n  unit?: ReactNode | undefined;\n  delta?: { label: string; tone?: \"success\" | \"danger\" | \"neutral\" | undefined } | undefined;\n  size?: keyof typeof KAESO_STAT_VARIANTS.size | undefined;\n  className?: string | undefined;\n}\n\nexport const Stat = /* @__PURE__ */ forwardRef<HTMLDivElement, StatProps>(function Stat({ value, unit, delta, size = \"md\", className }, ref) {\n  return (\n    <div ref={ref} className={cn(\"flex min-w-0 flex-wrap items-baseline gap-x-8 gap-y-4\", className)}>\n      <span className={cn(\"font-semibold text-fg tabular\", KAESO_STAT_VARIANTS.size[size].classes)}>{value}</span>\n      {unit && <span className=\"text-body-lg font-regular text-fg-secondary\">{unit}</span>}\n      {delta && (\n        <Badge tone={delta.tone ?? \"neutral\"} className=\"self-center\">\n          {delta.label}\n        </Badge>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Stat.displayName = \"Stat\";\n\nexport const MetricRow = /* @__PURE__ */ forwardRef<HTMLDivElement, { children: ReactNode; className?: string | undefined }>(function MetricRow({ children, className }, ref) {\n  return (\n    <div ref={ref} className={cn(\"flex flex-wrap items-baseline gap-x-48 gap-y-16\", className)}>\n      {children}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") MetricRow.displayName = \"MetricRow\";\n\nexport interface StatTileProps {\n  label: ReactNode;\n  value: ReactNode;\n  change?: { value: number; better?: \"up\" | \"down\" | undefined } | undefined;\n  detail?: ReactNode | undefined;\n  trend?: number[] | undefined;\n  trendColor?: string | undefined;\n  loading?: boolean | undefined;\n  className?: string | undefined;\n}\n\nconst changeLabel = (v: number, t: UiText, locale: string) => {\n  const pct = Math.abs(v) * 100;\n  const digits = pct >= 10 || pct === 0 ? 0 : 1;\n  const shown = new Intl.NumberFormat(locale === \"en\" ? \"en-US\" : locale, {\n    minimumFractionDigits: digits,\n    maximumFractionDigits: digits,\n    useGrouping: false,\n  }).format(digits ? Number(pct.toFixed(1)) : Math.round(pct));\n  return `${v > 0 ? \"↑\" : v < 0 ? \"↓\" : \"\"}${t(\"statTile.percent\", \"{value}%\", { value: shown })}`;\n};\n\nexport const STAT_VALUE_STEPS = [\n  { classes: \"text-title-lg\", px: 28 },\n  { classes: \"text-title\", px: 20 },\n  { classes: \"text-title-sm\", px: 17 },\n] as const;\n\nconst StatStepContext = /* @__PURE__ */ createContext(0);\n\nexport const StatTile = /* @__PURE__ */ forwardRef<HTMLDivElement, StatTileProps>(function StatTile(\n  { label, value, change, detail, trend, trendColor, loading, className },\n  ref,\n) {\n  const t = useUiText();\n  const locale = useLocale();\n  const good = change && change.value !== 0 ? change.value > 0 === ((change.better ?? \"up\") === \"up\") : undefined;\n  const step = STAT_VALUE_STEPS[useContext(StatStepContext)] ?? STAT_VALUE_STEPS[0];\n  return (\n    <div\n      ref={ref}\n      role=\"listitem\"\n      aria-busy={loading || undefined}\n      className={cn(\"flex min-w-0 flex-col bg-raised px-20 pt-16\", trend ? \"pb-12\" : \"pb-16\", className)}\n    >\n      <span className=\"text-small font-medium text-fg-secondary\">{label}</span>\n      <span className=\"mt-6 flex h-34 min-w-0 items-center\">\n        <span data-stat-value={step.px} className={cn(\"max-w-full truncate font-semibold text-fg tabular\", step.classes, loading && \"flex\")}>\n          {loading ? <Skeleton shape=\"line\" className=\"h-20 w-96\" /> : value}\n        </span>\n      </span>\n      {loading ? (\n        <>\n          <span className=\"mt-2 flex h-20 items-center\">\n            <Skeleton shape=\"line\" className=\"w-120\" />\n          </span>\n          {trend && (\n            <span className=\"mt-auto h-40 shrink-0 pt-8\">\n              <Skeleton className=\"h-full w-full\" />\n            </span>\n          )}\n        </>\n      ) : (\n        <span className=\"mt-2 flex min-h-20 min-w-0 flex-wrap items-center gap-x-6 gap-y-2 text-small text-fg-tertiary\">\n          {change && Number.isFinite(change.value) && (\n            <span className=\"flex h-20 shrink-0 items-center\">\n              <Badge tone={good === undefined ? \"neutral\" : good ? \"success\" : \"danger\"} className=\"shrink-0 tabular\">\n                {changeLabel(change.value, t, locale)}\n              </Badge>\n            </span>\n          )}\n          {detail && <span className=\"min-w-0\">{detail}</span>}\n        </span>\n      )}\n      {trend && !loading && (\n        <span className=\"mt-auto h-40 shrink-0 pt-8\">\n          {trend.length > 1 && (\n            <Sparkline\n              values={trend}\n              fluid\n              {...(trendColor ? { color: trendColor } : {})}\n              aria-label={typeof label === \"string\" ? t(\"statTile.trendPerDay\", \"{label} per day\", { label }) : t(\"statTile.trend\", \"Trend\")}\n            />\n          )}\n        </span>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") StatTile.displayName = \"StatTile\";\n\nconst GRID_COLS: Record<number, string> = { 1: \"grid-cols-1\", 2: \"grid-cols-2\" };\nconst LG_GRID_COLS: Record<number, string> = { 3: \"lg:grid-cols-3\", 4: \"lg:grid-cols-4\" };\nconst COL_SPAN: Record<number, string> = { 2: \"col-span-2\" };\nconst LG_COL_SPAN: Record<number, string> = { 1: \"lg:col-span-1\", 2: \"lg:col-span-2\", 3: \"lg:col-span-3\", 4: \"lg:col-span-4\" };\n\nconst TILE_PADDING = 40;\nconst GAP = 1;\nconst SLACK = 1.03;\n\nexport function statGridLayout(n: number, wide: boolean): { cols: number; spans: number[] } {\n  const cols = n <= 2 ? Math.max(n, 1) : wide ? Math.min(n, 4) : 2;\n  const last = n - 1;\n  const spans = Array.from({ length: n }, (_, i) => {\n    if (i !== last || n < 3) return 1;\n    if (n === 3) return wide ? 1 : 2;\n    return wide ? ({ 1: 4, 2: 3, 3: 2 }[n % 4] ?? 1) : n % 2 === 1 ? 2 : 1;\n  });\n  return { cols, spans };\n}\n\nconst MIN_TILE = 160;\n\nexport function statGridFit(needs: number[], width: number, wide: boolean): { step: number; single: boolean; two: boolean } {\n  const base = STAT_VALUE_STEPS[0].px;\n  const at = ({ cols, spans }: { cols: number; spans: number[] }) => {\n    const col = (width - (cols - 1) * GAP) / cols;\n    const rooms = spans.map((s) => col * s + (s - 1) * GAP - TILE_PADDING);\n    return STAT_VALUE_STEPS.findIndex((st) => needs.every((need, i) => (need * st.px * SLACK) / base <= (rooms[i] ?? 0)));\n  };\n  const own = statGridLayout(needs.length, wide);\n  const two = own.cols > 2 && (width - (own.cols - 1) * GAP) / own.cols < MIN_TILE;\n  const step = at(two ? statGridLayout(needs.length, false) : own);\n  if (step >= 0 || needs.length < 2) return { step: Math.max(step, 0), single: false, two };\n  const single = at({ cols: 1, spans: needs.map(() => 1) });\n  return { step: single >= 0 ? single : STAT_VALUE_STEPS.length - 1, single: true, two: false };\n}\n\nexport const StatGrid = /* @__PURE__ */ forwardRef<HTMLDivElement, { children: ReactNode; \"aria-label\"?: string | undefined; className?: string | undefined }>(\n  function StatGrid({ children, className, ...props }, ref) {\n    const tiles = Children.toArray(children).filter(isValidElement) as ReactElement<{ className?: string | undefined }>[];\n    const n = tiles.length;\n    const grid = useRef<HTMLDivElement | null>(null);\n    const [fit, setFit] = useState({ step: 0, single: false, two: false });\n    const measure = useRef(() => {});\n    measure.current = () => {\n      const el = grid.current;\n      if (!el || !el.clientWidth) return;\n      const values = [...el.querySelectorAll<HTMLElement>(\"[data-stat-value]\")];\n      const needs = values.map((v) => (v.scrollWidth * STAT_VALUE_STEPS[0].px) / (Number(v.dataset.statValue) || STAT_VALUE_STEPS[0].px));\n      const wide = typeof window.matchMedia === \"function\" && window.matchMedia(\"(min-width: 1024px)\").matches;\n      const next = statGridFit(needs, el.clientWidth, wide);\n      setFit((f) => (f.step === next.step && f.single === next.single && f.two === next.two ? f : next));\n    };\n    useLayoutEffect(() => measure.current());\n    useLayoutEffect(() => {\n      const el = grid.current;\n      if (!el || typeof ResizeObserver === \"undefined\") return;\n      const stop = observeResize([el, ...el.querySelectorAll(\"[data-stat-value]\")], () => measure.current());\n      void document.fonts?.ready.then(() => measure.current());\n      return stop;\n    }, [n]);\n    const narrow = statGridLayout(n, false);\n    const wide = statGridLayout(n, true);\n    const span = (i: number) => {\n      const small = narrow.spans[i] ?? 1;\n      const large = wide.spans[i] ?? 1;\n      return cn(COL_SPAN[small], !fit.two && large !== small && LG_COL_SPAN[large]) || undefined;\n    };\n    return (\n      <div\n        ref={(e) => {\n          grid.current = e;\n          if (typeof ref === \"function\") ref(e);\n          else if (ref) ref.current = e;\n        }}\n        role=\"list\"\n        className={cn(\n          \"grid gap-1 overflow-hidden rounded-group bg-line-subtle shadow-xs\",\n          fit.single ? \"grid-cols-1\" : fit.two ? \"grid-cols-2\" : cn(GRID_COLS[narrow.cols], wide.cols !== narrow.cols && LG_GRID_COLS[wide.cols]),\n          className,\n        )}\n        {...props}\n      >\n        <StatStepContext.Provider value={fit.step}>\n          {tiles.map((t, i) => {\n            const extra = fit.single ? undefined : span(i);\n            return extra ? cloneElement(t, { className: cn(t.props.className, extra) }) : t;\n          })}\n        </StatStepContext.Provider>\n      </div>\n    );\n  },\n);\nif (process.env.NODE_ENV !== \"production\") StatGrid.displayName = \"StatGrid\";\n"],"mappings":"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"}
+{"version":3,"file":"stat.js","names":["_Fragment","cn","useUiText","useLocale","observeResize","Skeleton","TruncatedText","Badge","Fragment$1","KAESO_STAT_VARIANTS","KAESO_STAT_DEFAULT_VARIANTS","Stat","className","size","value","unit","delta","MetricRow","changeLabel","pct","v","digits","shown","locale","STAT_VALUE_STEPS","StatStepContext","StatTile","t","good","change","step","useContext","loading","trend","label","detail","Sparkline","trendColor","GRID_COLS","LG_GRID_COLS","COL_SPAN","LG_COL_SPAN","TILE_PADDING","GAP","SLACK","statGridLayout","cols","n","wide","last","MIN_TILE","statGridFit","base","at","col","width","rooms","spans","s","needs","need","st","i","own","two","single","StatGrid","props","tiles","Children","children","isValidElement","grid","useRef","fit","setFit","useState","measure","measuredAt","el","fitted","sameWidth","next","f","useLayoutEffect","stop","narrow","span","small","large","ref","extra","cloneElement"],"sources":["../../src/components/stat/stat.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { observeResize } from \"../../utils/observe-resize.js\";\nimport { Badge } from \"../badge/badge.js\";\nimport { Sparkline } from \"../charts/sparkline.js\";\nimport { Skeleton } from \"../skeleton/skeleton.js\";\nimport { TruncatedText } from \"../text/truncated.js\";\nimport { useLocale, useUiText, type UiText } from \"../../i18n/context.js\";\n\nexport const KAESO_STAT_VARIANTS = {\n  size: {\n    md: { classes: \"text-metric\" },\n    sm: { classes: \"text-title\" },\n  },\n} as const;\nexport const KAESO_STAT_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface StatProps {\n  value: ReactNode;\n  unit?: ReactNode | undefined;\n  delta?: { label: string; tone?: \"success\" | \"danger\" | \"neutral\" | undefined } | undefined;\n  size?: keyof typeof KAESO_STAT_VARIANTS.size | undefined;\n  className?: string | undefined;\n}\n\nexport const Stat = /* @__PURE__ */ forwardRef<HTMLDivElement, StatProps>(function Stat({ value, unit, delta, size = \"md\", className }, ref) {\n  return (\n    <div ref={ref} className={cn(\"flex min-w-0 flex-wrap items-baseline gap-x-8 gap-y-4\", className)}>\n      <span className={cn(\"font-semibold text-fg tabular\", KAESO_STAT_VARIANTS.size[size].classes)}>{value}</span>\n      {unit && <span className=\"text-body-lg font-regular text-fg-secondary\">{unit}</span>}\n      {delta && (\n        <Badge tone={delta.tone ?? \"neutral\"} className=\"self-center\">\n          {delta.label}\n        </Badge>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Stat.displayName = \"Stat\";\n\nexport const MetricRow = /* @__PURE__ */ forwardRef<HTMLDivElement, { children: ReactNode; className?: string | undefined }>(function MetricRow({ children, className }, ref) {\n  return (\n    <div ref={ref} className={cn(\"flex flex-wrap items-baseline gap-x-48 gap-y-16\", className)}>\n      {children}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") MetricRow.displayName = \"MetricRow\";\n\nexport interface StatTileProps {\n  label: ReactNode;\n  value: ReactNode;\n  change?: { value: number; better?: \"up\" | \"down\" | undefined } | undefined;\n  detail?: ReactNode | undefined;\n  trend?: number[] | undefined;\n  trendColor?: string | undefined;\n  loading?: boolean | undefined;\n  className?: string | undefined;\n}\n\nconst changeLabel = (v: number, t: UiText, locale: string) => {\n  const pct = Math.abs(v) * 100;\n  const digits = pct >= 10 || pct === 0 ? 0 : 1;\n  const shown = new Intl.NumberFormat(locale === \"en\" ? \"en-US\" : locale, {\n    minimumFractionDigits: digits,\n    maximumFractionDigits: digits,\n    useGrouping: false,\n  }).format(digits ? Number(pct.toFixed(1)) : Math.round(pct));\n  return `${v > 0 ? \"↑\" : v < 0 ? \"↓\" : \"\"}${t(\"statTile.percent\", \"{value}%\", { value: shown })}`;\n};\n\nexport const STAT_VALUE_STEPS = [\n  { classes: \"text-metric\", px: 28 },\n  { classes: \"text-title\", px: 20 },\n  { classes: \"text-title-sm\", px: 17 },\n] as const;\n\nconst StatStepContext = /* @__PURE__ */ createContext(0);\n\nexport const StatTile = /* @__PURE__ */ forwardRef<HTMLDivElement, StatTileProps>(function StatTile(\n  { label, value, change, detail, trend, trendColor, loading, className },\n  ref,\n) {\n  const t = useUiText();\n  const locale = useLocale();\n  const good = change && change.value !== 0 ? change.value > 0 === ((change.better ?? \"up\") === \"up\") : undefined;\n  const step = STAT_VALUE_STEPS[useContext(StatStepContext)] ?? STAT_VALUE_STEPS[0];\n  return (\n    <div\n      ref={ref}\n      role=\"listitem\"\n      aria-busy={loading || undefined}\n      className={cn(\"flex min-w-0 flex-col bg-raised px-20 pt-16\", trend ? \"pb-12\" : \"pb-16\", className)}\n    >\n      <span className=\"text-small font-medium text-fg-secondary\">{label}</span>\n      <span className=\"mt-6 flex h-34 min-w-0 items-center\">\n        {loading ? (\n          <span data-stat-value={step.px} className={cn(\"flex max-w-full font-semibold text-fg tabular\", step.classes)}>\n            <Skeleton shape=\"line\" className=\"h-20 w-96\" />\n          </span>\n        ) : (\n          <TruncatedText data-stat-value={step.px} className={cn(\"max-w-full font-semibold text-fg tabular\", step.classes)}>\n            {value}\n          </TruncatedText>\n        )}\n      </span>\n      {loading ? (\n        <>\n          <span className=\"mt-2 flex h-20 items-center\">\n            <Skeleton shape=\"line\" className=\"w-120\" />\n          </span>\n          {trend && (\n            <span className=\"mt-auto h-40 shrink-0 pt-8\">\n              <Skeleton className=\"h-full w-full\" />\n            </span>\n          )}\n        </>\n      ) : (\n        <span className=\"mt-2 flex min-h-20 min-w-0 flex-wrap items-center gap-x-6 gap-y-2 text-small text-fg-tertiary\">\n          {change && Number.isFinite(change.value) && (\n            <span className=\"flex h-20 shrink-0 items-center\">\n              <Badge tone={good === undefined ? \"neutral\" : good ? \"success\" : \"danger\"} className=\"shrink-0 tabular\">\n                {changeLabel(change.value, t, locale)}\n                {good !== undefined && <span className=\"sr-only\"> {good ? t(\"statTile.better\", \"better\") : t(\"statTile.worse\", \"worse\")}</span>}\n              </Badge>\n            </span>\n          )}\n          {detail && <span className=\"min-w-0\">{detail}</span>}\n        </span>\n      )}\n      {trend && !loading && (\n        <span className=\"mt-auto h-40 shrink-0 pt-8\">\n          {trend.length > 1 && (\n            <Sparkline\n              values={trend}\n              fluid\n              {...(trendColor ? { color: trendColor } : {})}\n              aria-label={typeof label === \"string\" ? t(\"statTile.trendPerDay\", \"{label} per day\", { label }) : t(\"statTile.trend\", \"Trend\")}\n            />\n          )}\n        </span>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") StatTile.displayName = \"StatTile\";\n\nconst GRID_COLS: Record<number, string> = { 1: \"grid-cols-1\", 2: \"grid-cols-2\" };\nconst LG_GRID_COLS: Record<number, string> = { 3: \"lg:grid-cols-3\", 4: \"lg:grid-cols-4\" };\nconst COL_SPAN: Record<number, string> = { 2: \"col-span-2\" };\nconst LG_COL_SPAN: Record<number, string> = { 1: \"lg:col-span-1\", 2: \"lg:col-span-2\", 3: \"lg:col-span-3\", 4: \"lg:col-span-4\" };\n\nconst TILE_PADDING = 40;\nconst GAP = 1;\nconst SLACK = 1.03;\n\nexport function statGridLayout(n: number, wide: boolean): { cols: number; spans: number[] } {\n  const cols = n <= 2 ? Math.max(n, 1) : wide ? Math.min(n, 4) : 2;\n  const last = n - 1;\n  const spans = Array.from({ length: n }, (_, i) => {\n    if (i !== last || n < 3) return 1;\n    if (n === 3) return wide ? 1 : 2;\n    return wide ? ({ 1: 4, 2: 3, 3: 2 }[n % 4] ?? 1) : n % 2 === 1 ? 2 : 1;\n  });\n  return { cols, spans };\n}\n\nconst MIN_TILE = 160;\n\nexport function statGridFit(needs: number[], width: number, wide: boolean): { step: number; single: boolean; two: boolean } {\n  const base = STAT_VALUE_STEPS[0].px;\n  const at = ({ cols, spans }: { cols: number; spans: number[] }) => {\n    const col = (width - (cols - 1) * GAP) / cols;\n    const rooms = spans.map((s) => col * s + (s - 1) * GAP - TILE_PADDING);\n    return STAT_VALUE_STEPS.findIndex((st) => needs.every((need, i) => (need * st.px * SLACK) / base <= (rooms[i] ?? 0)));\n  };\n  const own = statGridLayout(needs.length, wide);\n  const two = own.cols > 2 && (width - (own.cols - 1) * GAP) / own.cols < MIN_TILE;\n  const step = at(two ? statGridLayout(needs.length, false) : own);\n  if (step >= 0 || needs.length < 2) return { step: Math.max(step, 0), single: false, two };\n  const single = at({ cols: 1, spans: needs.map(() => 1) });\n  return { step: single >= 0 ? single : STAT_VALUE_STEPS.length - 1, single: true, two: false };\n}\n\nexport const StatGrid = /* @__PURE__ */ forwardRef<HTMLDivElement, { children: ReactNode; \"aria-label\"?: string | undefined; className?: string | undefined }>(\n  function StatGrid({ children, className, ...props }, ref) {\n    const tiles = Children.toArray(children).filter(isValidElement) as ReactElement<{ className?: string | undefined }>[];\n    const n = tiles.length;\n    const grid = useRef<HTMLDivElement | null>(null);\n    const [fit, setFit] = useState({ step: 0, single: false, two: false });\n    const measure = useRef(() => {});\n    const measuredAt = useRef(0);\n    measure.current = () => {\n      const el = grid.current;\n      if (!el || !el.clientWidth) return;\n      const values = [...el.querySelectorAll<HTMLElement>(\"[data-stat-value]\")];\n      const needs = values.map((v) => (v.scrollWidth * STAT_VALUE_STEPS[0].px) / (Number(v.dataset.statValue) || STAT_VALUE_STEPS[0].px));\n      const wide = typeof window.matchMedia === \"function\" && window.matchMedia(\"(min-width: 1024px)\").matches;\n      const fitted = statGridFit(needs, el.clientWidth, wide);\n      const sameWidth = measuredAt.current === el.clientWidth;\n      measuredAt.current = el.clientWidth;\n      setFit((f) => {\n        // At the same width, live values only ever step the size down, so a digit that comes and goes doesn't make every tile jump.\n        const next = sameWidth && fitted.step < f.step ? { ...fitted, step: f.step } : fitted;\n        return f.step === next.step && f.single === next.single && f.two === next.two ? f : next;\n      });\n    };\n    useLayoutEffect(() => measure.current());\n    useLayoutEffect(() => {\n      const el = grid.current;\n      if (!el || typeof ResizeObserver === \"undefined\") return;\n      const stop = observeResize([el, ...el.querySelectorAll(\"[data-stat-value]\")], () => measure.current());\n      void document.fonts?.ready.then(() => measure.current());\n      return stop;\n    }, [n]);\n    const narrow = statGridLayout(n, false);\n    const wide = statGridLayout(n, true);\n    const span = (i: number) => {\n      const small = narrow.spans[i] ?? 1;\n      const large = wide.spans[i] ?? 1;\n      return cn(COL_SPAN[small], !fit.two && large !== small && LG_COL_SPAN[large]) || undefined;\n    };\n    return (\n      <div\n        ref={(e) => {\n          grid.current = e;\n          if (typeof ref === \"function\") ref(e);\n          else if (ref) ref.current = e;\n        }}\n        role=\"list\"\n        className={cn(\n          \"grid gap-1 overflow-hidden rounded-group bg-line shadow-xs forced-line\",\n          fit.single ? \"grid-cols-1\" : fit.two ? \"grid-cols-2\" : cn(GRID_COLS[narrow.cols], wide.cols !== narrow.cols && LG_GRID_COLS[wide.cols]),\n          className,\n        )}\n        {...props}\n      >\n        <StatStepContext.Provider value={fit.step}>\n          {tiles.map((t, i) => {\n            const extra = fit.single ? undefined : span(i);\n            return extra ? cloneElement(t, { className: cn(t.props.className, extra) }) : t;\n          })}\n        </StatStepContext.Provider>\n      </div>\n    );\n  },\n);\nif (process.env.NODE_ENV !== \"production\") StatGrid.displayName = \"StatGrid\";\n"],"mappings":"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"}

package/dist/components/status-dot.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as KAESO_STATUS_DOT_DEFAULT_VARIANTS, n as KAESO_STATUS_DOT_VARIANTS, r as Status, i as StatusDot } from "../chunks/status-dot-QJTF0Yv4.js";
+export { t as KAESO_STATUS_DOT_DEFAULT_VARIANTS, n as KAESO_STATUS_DOT_VARIANTS, r as Status, i as StatusDot } from "../chunks/status-dot-CP6runiC.js";

package/dist/components/surface.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { forwardRef as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/surface/surface.tsx

package/dist/components/swap-text.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as KAESO_SWAP_TEXT_DEFAULT_VARIANTS, n as KAESO_SWAP_TEXT_VARIANTS, r as SwapText } from "../chunks/swap-text-Dr0Irxz6.js";
+export { t as KAESO_SWAP_TEXT_DEFAULT_VARIANTS, n as KAESO_SWAP_TEXT_VARIANTS, r as SwapText } from "../chunks/swap-text-SlUjrTlG.js";

package/dist/components/switch.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as KAESO_SWITCH_DEFAULT_VARIANTS, n as KAESO_SWITCH_VARIANTS, r as Switch } from "../chunks/switch-BNMq_kGt.js";
+export { t as KAESO_SWITCH_DEFAULT_VARIANTS, n as KAESO_SWITCH_VARIANTS, r as Switch } from "../chunks/switch-ngywMQdl.js";

package/dist/components/table.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as KAESO_TABLE_DEFAULT_VARIANTS, n as KAESO_TABLE_VARIANTS, r as Table } from "../chunks/table-BeOSKl_3.js";
+export { t as KAESO_TABLE_DEFAULT_VARIANTS, n as KAESO_TABLE_VARIANTS, r as Table } from "../chunks/table-CTK5E0J7.js";

package/dist/components/tabs.js

@@ -1,95 +1,113 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
-import { t } from "../chunks/icon-D7ja-_Yk.js";
-import { createContext as n, forwardRef as r, useContext as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Tabs as c } from "@base-ui/react/tabs";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
+import { t } from "../chunks/icon-CBzOwqrX.js";
+import { t as n } from "../chunks/merge-refs-BN1FyQt9.js";
+import { t as r } from "../chunks/observe-resize-DhxhmoyB.js";
+import { createContext as i, forwardRef as a, useContext as o, useEffect as s, useMemo as c, useRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Tabs as p } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs.tsx
-var l = { variant: {
+var m = { variant: {
 	underline: { classes: "" },
 	pill: { classes: "" }
-} }, u = { variant: "underline" }, d = { variant: l.variant }, f = { variant: "pill" }, p = /* @__PURE__ */ n("underline");
-function m(t, n) {
-	let i = /* @__PURE__ */ r(function({ value: n, defaultValue: r, onValueChange: i, variant: a = t, className: s, children: l }, u) {
-		return /* @__PURE__ */ o(p.Provider, {
+} }, h = { variant: "underline" }, g = { variant: m.variant }, _ = { variant: "pill" }, v = /* @__PURE__ */ i("underline");
+function y(t, n) {
+	let r = /* @__PURE__ */ a(function({ value: n, defaultValue: r, onValueChange: i, variant: a = t, className: o, children: s }, c) {
+		return /* @__PURE__ */ d(v.Provider, {
 			value: a,
-			children: /* @__PURE__ */ o(c.Root, {
-				ref: u,
+			children: /* @__PURE__ */ d(p.Root, {
+				ref: c,
 				...n === void 0 ? {} : { value: n },
 				...r === void 0 ? {} : { defaultValue: r },
 				...i ? { onValueChange: (e) => i(String(e)) } : {},
-				className: e("flex min-w-0 flex-col", s),
-				children: l
+				className: e("flex min-w-0 flex-col", o),
+				children: s
 			})
 		});
 	});
-	return i.displayName = n, i;
+	return r.displayName = n, r;
 }
-var h = /* @__PURE__ */ r(function({ className: t, children: n, ...r }, a) {
-	let l = i(p);
-	return /* @__PURE__ */ s(c.List, {
-		ref: a,
-		className: e("relative flex min-w-0 items-center overflow-x-auto scrollbar-none", l === "underline" ? "-mx-12 gap-20 px-12 hairline-b-inset-12" : "-m-4 gap-4 p-4", t),
-		...r,
-		children: [n, l === "underline" && /* @__PURE__ */ o(c.Indicator, { className: "absolute bottom-0 left-0 h-2 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-pill bg-ink indicator-motion" })]
+var b = /* @__PURE__ */ a(function({ className: t, children: i, ...a }, u) {
+	let m = o(v), h = l(null), g = c(() => n(h, u), [u]);
+	return s(() => {
+		let e = h.current;
+		if (!e) return;
+		let t = () => {
+			let t = e.scrollWidth - e.clientWidth - Math.abs(e.scrollLeft);
+			e.style.setProperty("--scroll-area-overflow-x-start", `${Math.max(0, Math.abs(e.scrollLeft))}px`), e.style.setProperty("--scroll-area-overflow-x-end", `${Math.max(0, t)}px`);
+		};
+		t(), e.addEventListener("scroll", t, { passive: !0 });
+		let n = r([e, ...e.children], t);
+		return () => {
+			e.removeEventListener("scroll", t), n();
+		};
+	}, []), /* @__PURE__ */ f(p.List, {
+		ref: g,
+		className: e("relative flex min-w-0 items-center overflow-x-auto scroll-px-16 scrollbar-none scroll-fade-x", m === "underline" ? "hairline-b-strong" : "gap-4", t),
+		...a,
+		children: [i, m === "underline" && /* @__PURE__ */ d(p.Indicator, {
+			className: "absolute bottom-0 left-0 flex h-2 w-(--active-tab-width) translate-x-(--active-tab-left) px-12 indicator-motion",
+			children: /* @__PURE__ */ d("span", { className: "h-2 flex-1 rounded-pill bg-ink forced-line" })
+		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (h.displayName = "Tabs.List");
-var g = /* @__PURE__ */ r(function({ value: n, children: r, icon: l, count: u, disabled: d, className: f, "data-force": m }, h) {
-	let g = i(p);
-	return /* @__PURE__ */ o(c.Tab, {
-		ref: h,
+process.env.NODE_ENV !== "production" && (b.displayName = "Tabs.List");
+var x = /* @__PURE__ */ a(function({ value: n, children: r, icon: i, count: a, disabled: s, className: c, "data-force": l }, m) {
+	let h = o(v);
+	return /* @__PURE__ */ d(p.Tab, {
+		ref: m,
 		value: n,
-		...d ? { disabled: !0 } : {},
-		...m ? { "data-force": m } : {},
-		className: e("relative inline-flex shrink-0 cursor-pointer items-center gap-6 text-body font-medium whitespace-nowrap transition-control tap-target disabled:cursor-not-allowed disabled:text-fg-disabled", g === "underline" ? "group/tab h-40 text-fg-secondary outline-none hover:text-fg selected:text-fg" : "h-32 rounded-pill px-12 text-fg-secondary hover:bg-fill-1 hover:text-fg active:bg-fill-2 selected:bg-fill-2 selected:text-fg focus-ring", f),
-		children: g === "underline" ? /* @__PURE__ */ s("span", {
-			className: "-mx-8 inline-flex h-28 items-center gap-6 rounded-pill px-8 outline-2 outline-transparent group-focus-visible/tab:outline-focus",
+		...s ? { disabled: !0 } : {},
+		...l ? { "data-force": l } : {},
+		className: e("relative inline-flex shrink-0 cursor-pointer items-center gap-6 text-body font-medium whitespace-nowrap text-fg-secondary transition-control tap-target hover:text-fg selected:text-fg disabled:cursor-not-allowed disabled:text-fg-disabled selected:disabled:text-fg-disabled", h === "underline" ? "group/tab h-40 outline-none" : "h-32 rounded-pill px-12 hover:bg-fill-1 active:bg-fill-2 selected:bg-fill-2 selected:hover:bg-fill-3 selected:active:bg-fill-3 focus-ring-inset", c),
+		children: h === "underline" ? /* @__PURE__ */ f("span", {
+			className: "inline-flex h-28 items-center gap-6 rounded-pill px-12 transition-control focus-ring-inset group-hover/tab:bg-fill-1 group-active/tab:bg-fill-2 group-disabled/tab:bg-transparent group-focus-visible/tab:outline-focus group-focus-visible/tab:outline-solid",
 			children: [
-				l && /* @__PURE__ */ o(t, {
-					icon: l,
+				i && /* @__PURE__ */ d(t, {
+					icon: i,
 					size: "sm"
 				}),
 				r,
-				u !== void 0 && /* @__PURE__ */ o("span", {
+				a !== void 0 && /* @__PURE__ */ d("span", {
 					className: "text-body font-regular text-fg-secondary tabular",
-					children: u
+					children: a
 				})
 			]
-		}) : /* @__PURE__ */ s(a, { children: [
-			l && /* @__PURE__ */ o(t, {
-				icon: l,
+		}) : /* @__PURE__ */ f(u, { children: [
+			i && /* @__PURE__ */ d(t, {
+				icon: i,
 				size: "sm"
 			}),
 			r,
-			u !== void 0 && /* @__PURE__ */ o("span", {
+			a !== void 0 && /* @__PURE__ */ d("span", {
 				className: "text-body font-regular text-fg-secondary tabular",
-				children: u
+				children: a
 			})
 		] })
 	});
 });
-process.env.NODE_ENV !== "production" && (g.displayName = "Tabs.Tab");
-var _ = /* @__PURE__ */ r(function({ value: t, className: n, children: r, keepMounted: i }, a) {
-	return /* @__PURE__ */ o(c.Panel, {
-		ref: a,
+process.env.NODE_ENV !== "production" && (x.displayName = "Tabs.Tab");
+var S = /* @__PURE__ */ a(function({ value: t, className: n, children: r, keepMounted: i, "data-force": a }, o) {
+	return /* @__PURE__ */ d(p.Panel, {
+		ref: o,
 		value: t,
 		...i ? { keepMounted: i } : {},
+		...a ? { "data-force": a } : {},
 		className: e("outline-none focus-ring-inset", n),
 		children: r
 	});
 });
-process.env.NODE_ENV !== "production" && (_.displayName = "Tabs.Panel");
-var v = /* @__PURE__ */ Object.assign(/* @__PURE__ */ m(u.variant, "Tabs"), {
-	List: h,
-	Tab: g,
-	Panel: _
-}), y = /* @__PURE__ */ Object.assign(/* @__PURE__ */ m(f.variant, "PillTabs"), {
-	List: h,
-	Tab: g,
-	Panel: _
+process.env.NODE_ENV !== "production" && (S.displayName = "Tabs.Panel");
+var C = /* @__PURE__ */ Object.assign(/* @__PURE__ */ y(h.variant, "Tabs"), {
+	List: b,
+	Tab: x,
+	Panel: S
+}), w = /* @__PURE__ */ Object.assign(/* @__PURE__ */ y(_.variant, "PillTabs"), {
+	List: b,
+	Tab: x,
+	Panel: S
 });
 //#endregion
-export { f as KAESO_PILL_TABS_DEFAULT_VARIANTS, d as KAESO_PILL_TABS_VARIANTS, u as KAESO_TABS_DEFAULT_VARIANTS, l as KAESO_TABS_VARIANTS, y as PillTabs, v as Tabs };
+export { _ as KAESO_PILL_TABS_DEFAULT_VARIANTS, g as KAESO_PILL_TABS_VARIANTS, h as KAESO_TABS_DEFAULT_VARIANTS, m as KAESO_TABS_VARIANTS, w as PillTabs, C as Tabs };
 
 //# sourceMappingURL=tabs.js.map