@vjdesigns/vjdesigns-ui 2.4.0 → 2.5.0

package/dist/components/data-display/List/List.mjs

@@ -1,98 +1,99 @@
+"use client";
 import { cx as e } from "../../../utils/cx.mjs";
 import t from "./List.module.css.mjs";
-import { createContext as n, useContext as r, useId as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/components/data-display/List/List.tsx
-var s = {
+import { createContext as n, useContext as r, useId as i, useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/components/data-display/List/List.tsx
+var c = {
 	plain: t.plain,
 	bulleted: t.bulleted,
 	numbered: t.numbered,
 	divided: t.divided,
 	card: t.card
-}, c = {
+}, l = {
 	sm: t.sm,
 	md: t.md,
 	lg: t.lg
-}, l = n({
+}, u = n({
 	variant: "plain",
 	marker: void 0
-}), u = ({ variant: n = "plain", as: r, ordered: i = !1, size: o = "md", spacing: u, marker: d, start: f, className: p, style: m, children: h, ref: g, ..._ }) => {
-	let v = r ?? (i || n === "numbered" ? "ol" : "ul"), y = f === void 0 ? m : {
-		counterReset: `dh-list-item ${f - 1}`,
-		...m
-	};
-	return /* @__PURE__ */ a(l.Provider, {
-		value: {
-			variant: n,
-			marker: d
-		},
-		children: /* @__PURE__ */ a(v, {
+}), d = ({ variant: n = "plain", as: r, ordered: i = !1, size: s = "md", spacing: d, marker: f, start: p, className: m, style: h, children: g, ref: _, ...v }) => {
+	let y = r ?? (i || n === "numbered" ? "ol" : "ul"), b = p === void 0 ? h : {
+		counterReset: `dh-list-item ${p - 1}`,
+		...h
+	}, x = a(() => ({
+		variant: n,
+		marker: f
+	}), [n, f]);
+	return /* @__PURE__ */ o(u.Provider, {
+		value: x,
+		children: /* @__PURE__ */ o(y, {
 			role: "list",
-			..._,
-			ref: g,
-			start: v === "ol" ? f : void 0,
-			"data-spacing": u,
-			className: e(t.root, s[n], c[o], p),
-			style: y,
-			children: h
+			...v,
+			ref: _,
+			start: y === "ol" ? p : void 0,
+			"data-spacing": d,
+			className: e(t.root, c[n], l[s], m),
+			style: b,
+			children: g
 		})
 	});
-}, d = ({ marker: n }) => {
-	let { variant: i, marker: o } = r(l), s = n ?? o;
-	return s === !1 ? null : s != null && s !== !0 ? /* @__PURE__ */ a("span", {
+}, f = ({ marker: n }) => {
+	let { variant: i, marker: a } = r(u), s = n ?? a;
+	return s === !1 ? null : s != null && s !== !0 ? /* @__PURE__ */ o("span", {
 		className: e(t.marker, t.customMarker),
 		"aria-hidden": "true",
 		children: s
-	}) : i === "bulleted" ? /* @__PURE__ */ a("span", {
+	}) : i === "bulleted" ? /* @__PURE__ */ o("span", {
 		className: e(t.marker, t.bulletMarker),
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ a("span", { className: t.dot })
-	}) : i === "numbered" ? /* @__PURE__ */ a("span", {
+		children: /* @__PURE__ */ o("span", { className: t.dot })
+	}) : i === "numbered" ? /* @__PURE__ */ o("span", {
 		className: e(t.marker, t.numberMarker),
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ a("span", { className: t.number })
+		children: /* @__PURE__ */ o("span", { className: t.number })
 	}) : null;
-}, f = (e) => e != null && e !== !1 && e !== "", p = (...e) => e.filter(Boolean).join(" ") || void 0, m = ({ slots: n, main: r, descriptionId: i, metaId: s, interactive: c, disabled: l, liProps: u, ariaCurrent: p }) => {
+}, p = (e) => e != null && e !== !1 && e !== "", m = (...e) => e.filter(Boolean).join(" ") || void 0, h = ({ slots: n, main: r, descriptionId: i, metaId: a, interactive: c, disabled: l, liProps: u, ariaCurrent: d }) => {
 	let { start: m, description: h, meta: g, end: _, marker: v } = n, y = !!(n.selected || n.current), { className: b, ...x } = u;
-	return /* @__PURE__ */ o("li", {
-		"aria-current": c ? void 0 : p,
+	return /* @__PURE__ */ s("li", {
+		"aria-current": c ? void 0 : d,
 		"aria-disabled": l || void 0,
 		...x,
 		className: e(t.item, c && t.interactive, y && t.selected, l && t.disabled, b),
 		children: [
-			/* @__PURE__ */ a(d, { marker: v }),
-			f(m) && /* @__PURE__ */ a("span", {
+			/* @__PURE__ */ o(f, { marker: v }),
+			p(m) && /* @__PURE__ */ o("span", {
 				className: t.start,
 				children: m
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ s("div", {
 				className: t.content,
 				children: [
 					r,
-					f(h) && /* @__PURE__ */ a("span", {
+					p(h) && /* @__PURE__ */ o("span", {
 						id: i,
 						className: t.description,
 						children: h
 					}),
-					n.title !== void 0 && f(n.children) && /* @__PURE__ */ a("div", {
+					n.title !== void 0 && p(n.children) && /* @__PURE__ */ o("div", {
 						className: t.body,
 						children: n.children
 					})
 				]
 			}),
-			f(g) && /* @__PURE__ */ a("span", {
-				id: s,
+			p(g) && /* @__PURE__ */ o("span", {
+				id: a,
 				className: t.meta,
 				children: g
 			}),
-			f(_) && /* @__PURE__ */ a("div", {
+			p(_) && /* @__PURE__ */ o("div", {
 				className: t.end,
 				children: _
 			})
 		]
 	});
 };
-function h(e) {
+function g(e) {
 	let { start: t, title: n, description: r, meta: i, end: a, marker: o, selected: s, current: c, children: l, ...u } = e;
 	return {
 		slots: {
@@ -109,37 +110,37 @@ function h(e) {
 		rest: u
 	};
 }
-var g = (e) => {
-	let { slots: n, rest: r } = h(e), i = !!(n.selected || n.current), o = n.title === void 0 ? f(n.children) && /* @__PURE__ */ a("div", {
+var _ = (e) => {
+	let { slots: n, rest: r } = g(e), i = !!(n.selected || n.current), a = n.title === void 0 ? p(n.children) && /* @__PURE__ */ o("div", {
 		className: t.body,
 		children: n.children
-	}) : /* @__PURE__ */ a("span", {
+	}) : /* @__PURE__ */ o("span", {
 		className: t.title,
 		children: n.title
 	});
-	return /* @__PURE__ */ a(m, {
+	return /* @__PURE__ */ o(h, {
 		slots: n,
-		main: o,
+		main: a,
 		interactive: !1,
 		liProps: r,
 		ariaCurrent: n.current ?? (i ? "true" : void 0)
 	});
 };
-g.displayName = "List.Item";
-var _ = (n) => {
-	let { slots: r, rest: o } = h(n), { disabled: s = !1, className: c, style: l, itemProps: u, type: d = "button", "aria-describedby": g, "aria-current": _, ...v } = o, y = i(), b = `${y}-description`, x = `${y}-meta`, S = !!(r.selected || r.current), C = /* @__PURE__ */ a("button", {
+_.displayName = "List.Item";
+var v = (n) => {
+	let { slots: r, rest: a } = g(n), { disabled: s = !1, className: c, style: l, itemProps: u, type: d = "button", "aria-describedby": f, "aria-current": _, ...v } = a, y = i(), b = `${y}-description`, x = `${y}-meta`, S = !!(r.selected || r.current), C = /* @__PURE__ */ o("button", {
 		...v,
 		type: d,
 		disabled: s,
 		className: t.action,
 		"aria-current": _ ?? r.current ?? (S ? "true" : void 0),
-		"aria-describedby": p(g, f(r.description) && b, f(r.meta) && x),
-		children: /* @__PURE__ */ a("span", {
+		"aria-describedby": m(f, p(r.description) && b, p(r.meta) && x),
+		children: /* @__PURE__ */ o("span", {
 			className: t.title,
 			children: r.title ?? r.children
 		})
 	});
-	return /* @__PURE__ */ a(m, {
+	return /* @__PURE__ */ o(h, {
 		slots: r,
 		main: C,
 		descriptionId: b,
@@ -156,23 +157,23 @@ var _ = (n) => {
 		}
 	});
 };
-_.displayName = "List.ItemButton";
-var v = (n) => {
-	let { slots: r, rest: o } = h(n), { disabled: s = !1, className: c, style: l, itemProps: u, href: d, onClick: g, "aria-describedby": _, "aria-current": v, ...y } = o, b = i(), x = `${b}-description`, S = `${b}-meta`, C = !!(r.selected || r.current), w = /* @__PURE__ */ a("a", {
+v.displayName = "List.ItemButton";
+var y = (n) => {
+	let { slots: r, rest: a } = g(n), { disabled: s = !1, className: c, style: l, itemProps: u, href: d, onClick: f, "aria-describedby": _, "aria-current": v, ...y } = a, b = i(), x = `${b}-description`, S = `${b}-meta`, C = !!(r.selected || r.current), w = /* @__PURE__ */ o("a", {
 		...y,
 		href: s ? void 0 : d,
 		role: s ? "link" : void 0,
 		"aria-disabled": s || void 0,
-		onClick: s ? (e) => e.preventDefault() : g,
+		onClick: s ? (e) => e.preventDefault() : f,
 		className: t.action,
 		"aria-current": v ?? r.current ?? (C ? "page" : void 0),
-		"aria-describedby": p(_, f(r.description) && x, f(r.meta) && S),
-		children: /* @__PURE__ */ a("span", {
+		"aria-describedby": m(_, p(r.description) && x, p(r.meta) && S),
+		children: /* @__PURE__ */ o("span", {
 			className: t.title,
 			children: r.title ?? r.children
 		})
 	});
-	return /* @__PURE__ */ a(m, {
+	return /* @__PURE__ */ o(h, {
 		slots: r,
 		main: w,
 		descriptionId: x,
@@ -189,12 +190,11 @@ var v = (n) => {
 		}
 	});
 };
-v.displayName = "List.ItemLink";
-var y = ({ as: n = "h3", size: r = "md", className: i, children: o, ...s }) => /* @__PURE__ */ a(n, {
+y.displayName = "List.ItemLink";
+var b = ({ as: n = "h3", size: r = "md", className: i, children: a, ...s }) => /* @__PURE__ */ o(n, {
 	...s,
-	className: e(t.subheader, c[r], i),
-	children: o
+	className: e(t.subheader, l[r], i),
+	children: a
 });
-y.displayName = "List.Subheader", u.Item = g, u.ItemButton = _, u.ItemLink = v, u.Subheader = y;
-//#endregion
-export { u as List, g as ListItem, _ as ListItemButton, v as ListItemLink, y as ListSubheader };
+b.displayName = "List.Subheader", d.Item = _, d.ItemButton = v, d.ItemLink = y, d.Subheader = b;
+export { d as List, _ as ListItem, v as ListItemButton, y as ListItemLink, b as ListSubheader };

package/dist/components/data-display/List/List.module.css.mjs

@@ -1,4 +1,4 @@
-//#region src/components/data-display/List/List.module.css
+// src/components/data-display/List/List.module.css
 var e = "_root_8n7jz_27", t = "_sm_8n7jz_29", n = "_md_8n7jz_29", r = "_lg_8n7jz_29", i = "_plain_8n7jz_207", a = "_bulleted_8n7jz_209", o = "_numbered_8n7jz_211", s = "_divided_8n7jz_221", c = "_card_8n7jz_223", l = "_item_8n7jz_241", u = "_start_8n7jz_329", d = "_content_8n7jz_341", f = "_title_8n7jz_357", p = "_description_8n7jz_377", m = "_body_8n7jz_393", h = "_meta_8n7jz_411", g = "_end_8n7jz_431", _ = "_marker_8n7jz_455", v = "_bulletMarker_8n7jz_485", y = "_dot_8n7jz_493", b = "_numberMarker_8n7jz_513", x = "_number_8n7jz_211", S = "_customMarker_8n7jz_565", C = "_interactive_8n7jz_593", w = "_action_8n7jz_627", T = "_disabled_8n7jz_729", E = "_selected_8n7jz_763", D = "_subheader_8n7jz_875", O = {
 	root: e,
 	sm: t,
@@ -29,5 +29,4 @@ var e = "_root_8n7jz_27", t = "_sm_8n7jz_29", n = "_md_8n7jz_29", r = "_lg_8n7jz
 	selected: E,
 	subheader: D
 };
-//#endregion
 export { w as action, m as body, v as bulletMarker, a as bulleted, c as card, d as content, S as customMarker, O as default, p as description, T as disabled, s as divided, y as dot, g as end, C as interactive, l as item, r as lg, _ as marker, n as md, h as meta, x as number, b as numberMarker, o as numbered, i as plain, e as root, E as selected, t as sm, u as start, D as subheader, f as title };

package/dist/components/data-display/Stat/Stat.cjs.js

@@ -1 +1 @@
-const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../hooks/useMergedRef.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),i=require("../../primitives/Icon/icons.cjs.js"),a=require("../../feedback/Progress/Progress.cjs.js"),o=require("./Stat.module.css.cjs.js");let s=require("react"),c=require("react/jsx-runtime");var l={sm:o.default.sm,md:o.default.md,lg:o.default.lg,xl:o.default.xl},u={start:o.default.alignStart,center:o.default.alignCenter,end:o.default.alignEnd},d={plain:o.default.plain,card:o.default.card,accent:o.default.accent},f={start:o.default.accentStart,top:o.default.accentTop},p={neutral:o.default.toneNeutral,primary:o.default.tonePrimary,accent:o.default.toneAccent,success:o.default.toneSuccess,warning:o.default.toneWarning,danger:o.default.toneDanger,info:o.default.toneInfo},ee={neutral:o.default.barNeutral,primary:o.default.barPrimary,accent:o.default.barAccent,success:o.default.barSuccess,warning:o.default.barWarning,danger:o.default.barDanger,info:o.default.barInfo},te={increase:i.ArrowUpIcon,decrease:i.ArrowDownIcon,neutral:i.MinusIcon},m={style:`percent`,maximumFractionDigits:1},h=1200,g=e=>1-(1-e)**3,_=()=>typeof window<`u`&&typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,v=e=>{if(!Number.isFinite(e))return 0;let[,t=``]=String(e).split(`.`);return Math.min(4,t.replace(/e.*$/,``).length)};function y(e){return e>0?`increase`:e<0?`decrease`:`neutral`}function ne(e,t,n){let r=t&&e!==void 0,[i,a]=(0,s.useState)(()=>r&&!_()?0:e),o=(0,s.useRef)(i);return o.current=i,(0,s.useEffect)(()=>{if(!r||_()){a(e);return}if(!n)return;let t=o.current??0,i=e,s=10**v(i),c=0,l,u=e=>{l??=e;let n=Math.min(1,(e-l)/h),r=t+(i-t)*g(n);a(n>=1?i:Math.round(r*s)/s),n<1&&(c=requestAnimationFrame(u))},d=()=>{c=requestAnimationFrame(u)};if(typeof IntersectionObserver>`u`)return d(),()=>cancelAnimationFrame(c);let f=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(f.disconnect(),d())},{threshold:.25});return f.observe(n),()=>{f.disconnect(),cancelAnimationFrame(c)}},[r,e,n]),i}var b=(0,s.createContext)(!1),x=({label:i,value:h,format:g,locale:_,prefix:v,suffix:x,unit:S,helpText:C,icon:w,size:T=`md`,align:E=`start`,variant:D=`plain`,accentPosition:re=`start`,tone:O,change:k,changeType:ie,positiveIsGood:A=!0,changeFormat:j=m,comparisonLabel:ae,changeLabel:oe,progress:M,sparkline:N,animate:P=!1,loading:F=!1,loadingLabel:I,className:L,ref:R,...z})=>{let{messages:B,locale:V}=e.useLocale(),H=_??V,U=I??B.stat.loading,W=(0,s.useContext)(b),[G,K]=(0,s.useState)(null),se=t.useMergedRef(K,R),q=typeof h==`number`,J=(0,s.useMemo)(()=>new Intl.NumberFormat(H,g),[H,g]),ce=(0,s.useMemo)(()=>new Intl.NumberFormat(H,j),[H,j]),Y=ne(q?h:void 0,P&&q&&!F,G),X=q?J.format(h):void 0,le=q&&Y!==void 0?J.format(Y):X,ue=P&&q,Z=k!==void 0&&Number.isFinite(k),Q=ie??(Z?y(k):`neutral`),de=Q===`neutral`?`neutral`:Q===`increase`===A?`positive`:`negative`,$=Z?ce.format(Math.abs(k)):``,fe=Z?Q===`neutral`?$:`${Q===`increase`?`+`:`−`}${$}`:``,pe=oe??[Q===`increase`?B.stat.increased($):Q===`decrease`?B.stat.decreased($):k===0?B.stat.noChange:B.stat.changed($),ae].filter(Boolean).join(` `),me=te[Q],he=typeof i==`string`||typeof i==`number`?B.stat.progressNamed(String(i)):B.stat.progress,ge=W?`div`:`dl`,_e=O??`accent`;return(0,c.jsxs)(ge,{...z,ref:se,"aria-busy":F||void 0,"data-variant":D,className:n.cx(o.default.root,l[T],u[E],d[D],D===`accent`&&f[re],D===`accent`&&ee[_e],p[O??`primary`],N!=null&&o.default.hasSparkline,L),children:[(0,c.jsxs)(`dt`,{className:o.default.labelRow,children:[w!=null&&(0,c.jsx)(`span`,{className:o.default.icon,"aria-hidden":`true`,children:w}),(0,c.jsx)(`span`,{className:o.default.label,children:i})]}),(0,c.jsx)(`dd`,{className:o.default.valueRow,children:F?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{className:n.cx(o.default.skeleton,o.default.skeletonValue),"aria-hidden":`true`}),Z&&(0,c.jsx)(`span`,{className:n.cx(o.default.skeleton,o.default.skeletonChange),"aria-hidden":`true`}),(0,c.jsx)(r.VisuallyHidden,{children:U})]}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(`span`,{className:o.default.value,children:[v!=null&&(0,c.jsx)(`span`,{className:o.default.affix,children:v}),ue?(0,c.jsxs)(`span`,{className:o.default.counter,children:[(0,c.jsx)(`span`,{className:o.default.counterGhost,"aria-hidden":`true`,children:X}),(0,c.jsx)(`span`,{className:o.default.counterLive,"aria-hidden":`true`,children:le}),(0,c.jsx)(r.VisuallyHidden,{children:X})]}):(0,c.jsx)(`span`,{className:o.default.number,children:q?X:h}),x!=null&&(0,c.jsx)(`span`,{className:o.default.affix,children:x}),S!=null&&(0,c.jsx)(`span`,{className:o.default.unit,children:S})]}),Z&&(0,c.jsxs)(`span`,{className:o.default.change,"data-trend":Q,"data-sentiment":de,children:[(0,c.jsxs)(`span`,{className:o.default.changeVisible,"aria-hidden":`true`,children:[(0,c.jsx)(me,{className:o.default.changeIcon,strokeWidth:2.5}),fe]}),(0,c.jsx)(r.VisuallyHidden,{children:`, ${pe}`})]})]})}),N!=null&&(0,c.jsx)(`dd`,{className:o.default.sparkline,children:N}),C!=null&&(0,c.jsx)(`dd`,{className:o.default.helpText,children:C}),M&&(0,c.jsx)(`dd`,{className:o.default.progress,children:(0,c.jsx)(a.Progress,{size:`sm`,value:F?null:M.value,max:M.max??100,tone:M.tone??O??`primary`,label:M.label,showValue:M.showValue,valueText:M.valueText,"aria-label":M.label?void 0:he})})]})},S=[`base`,`sm`,`md`,`lg`,`xl`,`2xl`],C={plain:o.default.groupPlain,card:o.default.groupCard},w=({children:e,columns:t,divided:r=!1,variant:i=`plain`,className:a,style:s,...l})=>{let u;if(t!==void 0){let e={},n;for(let r of S){let i=typeof t==`number`?r===`base`?t:void 0:t[r];i!==void 0&&(n=Math.max(1,Math.round(i))),n!==void 0&&(e[`--_cols-${r}`]=n)}u=e}return(0,c.jsx)(b.Provider,{value:!0,children:(0,c.jsx)(`dl`,{...l,className:n.cx(o.default.group,C[i],t===void 0?o.default.groupAuto:o.default.groupColumns,r&&o.default.groupDivided,a),style:u?{...u,...s}:s,children:e})})};exports.Stat=x,exports.StatGroup=w,exports.getStatChangeType=y;
+"use client";const e=require("../../../hooks/useMergedRef.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),r=require("../../primitives/Icon/icons.cjs.js"),i=require("../../feedback/Progress/Progress.cjs.js"),a=require("./Stat.module.css.cjs.js"),o=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js");let s=require("react"),c=require("react/jsx-runtime");var l={sm:a.default.sm,md:a.default.md,lg:a.default.lg,xl:a.default.xl},u={start:a.default.alignStart,center:a.default.alignCenter,end:a.default.alignEnd},d={plain:a.default.plain,card:a.default.card,accent:a.default.accent},f={start:a.default.accentStart,top:a.default.accentTop},p={neutral:a.default.toneNeutral,primary:a.default.tonePrimary,accent:a.default.toneAccent,success:a.default.toneSuccess,warning:a.default.toneWarning,danger:a.default.toneDanger,info:a.default.toneInfo},ee={neutral:a.default.barNeutral,primary:a.default.barPrimary,accent:a.default.barAccent,success:a.default.barSuccess,warning:a.default.barWarning,danger:a.default.barDanger,info:a.default.barInfo},te={increase:r.ArrowUpIcon,decrease:r.ArrowDownIcon,neutral:r.MinusIcon},m={style:`percent`,maximumFractionDigits:1},h=1200,g=e=>1-(1-e)**3,_=()=>typeof window<`u`&&typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,v=e=>{if(!Number.isFinite(e))return 0;let[,t=``]=String(e).split(`.`);return Math.min(4,t.replace(/e.*$/,``).length)};function y(e){return e>0?`increase`:e<0?`decrease`:`neutral`}function ne(e,t,n){let r=t&&e!==void 0,[i,a]=(0,s.useState)(()=>r&&!_()?0:e),o=(0,s.useRef)(i);return o.current=i,(0,s.useEffect)(()=>{if(!r||_()){a(e);return}if(!n)return;let t=o.current??0,i=e,s=10**v(i),c=0,l,u=e=>{l??=e;let n=Math.min(1,(e-l)/h),r=t+(i-t)*g(n);a(n>=1?i:Math.round(r*s)/s),n<1&&(c=requestAnimationFrame(u))},d=()=>{c=requestAnimationFrame(u)};if(typeof IntersectionObserver>`u`)return d(),()=>cancelAnimationFrame(c);let f=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(f.disconnect(),d())},{threshold:.25});return f.observe(n),()=>{f.disconnect(),cancelAnimationFrame(c)}},[r,e,n]),i}var b=(0,s.createContext)(!1),x=({label:r,value:h,format:g,locale:_,prefix:v,suffix:x,unit:S,helpText:C,icon:w,size:T=`md`,align:E=`start`,variant:D=`plain`,accentPosition:re=`start`,tone:O,change:k,changeType:ie,positiveIsGood:A=!0,changeFormat:j=m,comparisonLabel:ae,changeLabel:oe,progress:M,sparkline:N,animate:P=!1,loading:F=!1,loadingLabel:I,className:L,ref:R,...z})=>{let{messages:B,locale:V}=o.useLocale(),H=_??V,U=I??B.stat.loading,W=(0,s.useContext)(b),[G,K]=(0,s.useState)(null),se=e.useMergedRef(K,R),q=typeof h==`number`,J=(0,s.useMemo)(()=>new Intl.NumberFormat(H,g),[H,g]),ce=(0,s.useMemo)(()=>new Intl.NumberFormat(H,j),[H,j]),Y=ne(q?h:void 0,P&&q&&!F,G),X=q?J.format(h):void 0,le=q&&Y!==void 0?J.format(Y):X,ue=P&&q,Z=k!==void 0&&Number.isFinite(k),Q=ie??(Z?y(k):`neutral`),de=Q===`neutral`?`neutral`:Q===`increase`===A?`positive`:`negative`,$=Z?ce.format(Math.abs(k)):``,fe=Z?Q===`neutral`?$:`${Q===`increase`?`+`:`−`}${$}`:``,pe=oe??[Q===`increase`?B.stat.increased($):Q===`decrease`?B.stat.decreased($):k===0?B.stat.noChange:B.stat.changed($),ae].filter(Boolean).join(` `),me=te[Q],he=typeof r==`string`||typeof r==`number`?B.stat.progressNamed(String(r)):B.stat.progress,ge=W?`div`:`dl`,_e=O??`accent`;return(0,c.jsxs)(ge,{...z,ref:se,"aria-busy":F||void 0,"data-variant":D,className:t.cx(a.default.root,l[T],u[E],d[D],D===`accent`&&f[re],D===`accent`&&ee[_e],p[O??`primary`],N!=null&&a.default.hasSparkline,L),children:[(0,c.jsxs)(`dt`,{className:a.default.labelRow,children:[w!=null&&(0,c.jsx)(`span`,{className:a.default.icon,"aria-hidden":`true`,children:w}),(0,c.jsx)(`span`,{className:a.default.label,children:r})]}),(0,c.jsx)(`dd`,{className:a.default.valueRow,children:F?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{className:t.cx(a.default.skeleton,a.default.skeletonValue),"aria-hidden":`true`}),Z&&(0,c.jsx)(`span`,{className:t.cx(a.default.skeleton,a.default.skeletonChange),"aria-hidden":`true`}),(0,c.jsx)(n.VisuallyHidden,{children:U})]}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(`span`,{className:a.default.value,children:[v!=null&&(0,c.jsx)(`span`,{className:a.default.affix,children:v}),ue?(0,c.jsxs)(`span`,{className:a.default.counter,children:[(0,c.jsx)(`span`,{className:a.default.counterGhost,"aria-hidden":`true`,children:X}),(0,c.jsx)(`span`,{className:a.default.counterLive,"aria-hidden":`true`,children:le}),(0,c.jsx)(n.VisuallyHidden,{children:X})]}):(0,c.jsx)(`span`,{className:a.default.number,children:q?X:h}),x!=null&&(0,c.jsx)(`span`,{className:a.default.affix,children:x}),S!=null&&(0,c.jsx)(`span`,{className:a.default.unit,children:S})]}),Z&&(0,c.jsxs)(`span`,{className:a.default.change,"data-trend":Q,"data-sentiment":de,children:[(0,c.jsxs)(`span`,{className:a.default.changeVisible,"aria-hidden":`true`,children:[(0,c.jsx)(me,{className:a.default.changeIcon,strokeWidth:2.5}),fe]}),(0,c.jsx)(n.VisuallyHidden,{children:`, ${pe}`})]})]})}),N!=null&&(0,c.jsx)(`dd`,{className:a.default.sparkline,children:N}),C!=null&&(0,c.jsx)(`dd`,{className:a.default.helpText,children:C}),M&&(0,c.jsx)(`dd`,{className:a.default.progress,children:(0,c.jsx)(i.Progress,{size:`sm`,value:F?null:M.value,max:M.max??100,tone:M.tone??O??`primary`,label:M.label,showValue:M.showValue,valueText:M.valueText,"aria-label":M.label?void 0:he})})]})},S=[`base`,`sm`,`md`,`lg`,`xl`,`2xl`],C={plain:a.default.groupPlain,card:a.default.groupCard},w=({children:e,columns:n,divided:r=!1,variant:i=`plain`,className:o,style:s,...l})=>{let u;if(n!==void 0){let e={},t;for(let r of S){let i=typeof n==`number`?r===`base`?n:void 0:n[r];i!==void 0&&(t=Math.max(1,Math.round(i))),t!==void 0&&(e[`--_cols-${r}`]=t)}u=e}return(0,c.jsx)(b.Provider,{value:!0,children:(0,c.jsx)(`dl`,{...l,className:t.cx(a.default.group,C[i],n===void 0?a.default.groupAuto:a.default.groupColumns,r&&a.default.groupDivided,o),style:u?{...u,...s}:s,children:e})})};exports.Stat=x,exports.StatGroup=w,exports.getStatChangeType=y;

package/dist/components/data-display/Stat/Stat.mjs

@@ -1,71 +1,72 @@
-import { useLocale as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { useMergedRef as t } from "../../../hooks/useMergedRef.mjs";
-import { cx as n } from "../../../utils/cx.mjs";
-import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
-import { ArrowDownIcon as i, ArrowUpIcon as a, MinusIcon as o } from "../../primitives/Icon/icons.mjs";
-import { Progress as s } from "../../feedback/Progress/Progress.mjs";
-import c from "./Stat.module.css.mjs";
+"use client";
+import { useMergedRef as e } from "../../../hooks/useMergedRef.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { VisuallyHidden as n } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { ArrowDownIcon as r, ArrowUpIcon as i, MinusIcon as a } from "../../primitives/Icon/icons.mjs";
+import { Progress as o } from "../../feedback/Progress/Progress.mjs";
+import s from "./Stat.module.css.mjs";
+import { useLocale as c } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
 import { createContext as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-//#region src/components/data-display/Stat/Stat.tsx
+// src/components/data-display/Stat/Stat.tsx
 var ee = {
-	sm: c.sm,
-	md: c.md,
-	lg: c.lg,
-	xl: c.xl
+	sm: s.sm,
+	md: s.md,
+	lg: s.lg,
+	xl: s.xl
 }, te = {
-	start: c.alignStart,
-	center: c.alignCenter,
-	end: c.alignEnd
+	start: s.alignStart,
+	center: s.alignCenter,
+	end: s.alignEnd
 }, ne = {
-	plain: c.plain,
-	card: c.card,
-	accent: c.accent
+	plain: s.plain,
+	card: s.card,
+	accent: s.accent
 }, re = {
-	start: c.accentStart,
-	top: c.accentTop
+	start: s.accentStart,
+	top: s.accentTop
 }, ie = {
-	neutral: c.toneNeutral,
-	primary: c.tonePrimary,
-	accent: c.toneAccent,
-	success: c.toneSuccess,
-	warning: c.toneWarning,
-	danger: c.toneDanger,
-	info: c.toneInfo
+	neutral: s.toneNeutral,
+	primary: s.tonePrimary,
+	accent: s.toneAccent,
+	success: s.toneSuccess,
+	warning: s.toneWarning,
+	danger: s.toneDanger,
+	info: s.toneInfo
 }, v = {
-	neutral: c.barNeutral,
-	primary: c.barPrimary,
-	accent: c.barAccent,
-	success: c.barSuccess,
-	warning: c.barWarning,
-	danger: c.barDanger,
-	info: c.barInfo
-}, ae = {
-	increase: a,
-	decrease: i,
-	neutral: o
+	neutral: s.barNeutral,
+	primary: s.barPrimary,
+	accent: s.barAccent,
+	success: s.barSuccess,
+	warning: s.barWarning,
+	danger: s.barDanger,
+	info: s.barInfo
 }, y = {
+	increase: i,
+	decrease: r,
+	neutral: a
+}, b = {
 	style: "percent",
 	maximumFractionDigits: 1
-}, b = 1200, x = (e) => 1 - (1 - e) ** 3, S = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, C = (e) => {
+}, x = 1200, S = (e) => 1 - (1 - e) ** 3, C = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, w = (e) => {
 	if (!Number.isFinite(e)) return 0;
 	let [, t = ""] = String(e).split(".");
 	return Math.min(4, t.replace(/e.*$/, "").length);
 };
-function w(e) {
+function T(e) {
 	return e > 0 ? "increase" : e < 0 ? "decrease" : "neutral";
 }
-function oe(e, t, n) {
-	let r = t && e !== void 0, [i, a] = m(() => r && !S() ? 0 : e), o = p(i);
+function ae(e, t, n) {
+	let r = t && e !== void 0, [i, a] = m(() => r && !C() ? 0 : e), o = p(i);
 	return o.current = i, d(() => {
-		if (!r || S()) {
+		if (!r || C()) {
 			a(e);
 			return;
 		}
 		if (!n) return;
-		let t = o.current ?? 0, i = e, s = 10 ** C(i), c = 0, l, u = (e) => {
+		let t = o.current ?? 0, i = e, s = 10 ** w(i), c = 0, l, u = (e) => {
 			l ??= e;
-			let n = Math.min(1, (e - l) / b), r = t + (i - t) * x(n);
+			let n = Math.min(1, (e - l) / x), r = t + (i - t) * S(n);
 			a(n >= 1 ? i : Math.round(r * s) / s), n < 1 && (c = requestAnimationFrame(u));
 		}, d = () => {
 			c = requestAnimationFrame(u);
@@ -83,135 +84,135 @@ function oe(e, t, n) {
 		n
 	]), i;
 }
-var T = l(!1), E = ({ label: i, value: a, format: o, locale: l, prefix: d, suffix: p, unit: b, helpText: x, icon: S, size: C = "md", align: E = "start", variant: D = "plain", accentPosition: O = "start", tone: k, change: A, changeType: j, positiveIsGood: M = !0, changeFormat: N = y, comparisonLabel: P, changeLabel: se, progress: F, sparkline: I, animate: L = !1, loading: R = !1, loadingLabel: z, className: B, ref: V, ...H }) => {
-	let { messages: U, locale: W } = e(), G = l ?? W, ce = z ?? U.stat.loading, le = u(T), [ue, de] = m(null), fe = t(de, V), K = typeof a == "number", q = f(() => new Intl.NumberFormat(G, o), [G, o]), pe = f(() => new Intl.NumberFormat(G, N), [G, N]), J = oe(K ? a : void 0, L && K && !R, ue), Y = K ? q.format(a) : void 0, X = K && J !== void 0 ? q.format(J) : Y, me = L && K, Z = A !== void 0 && Number.isFinite(A), Q = j ?? (Z ? w(A) : "neutral"), he = Q === "neutral" ? "neutral" : Q === "increase" === M ? "positive" : "negative", $ = Z ? pe.format(Math.abs(A)) : "", ge = Z ? Q === "neutral" ? $ : `${Q === "increase" ? "+" : "−"}${$}` : "", _e = se ?? [Q === "increase" ? U.stat.increased($) : Q === "decrease" ? U.stat.decreased($) : A === 0 ? U.stat.noChange : U.stat.changed($), P].filter(Boolean).join(" "), ve = ae[Q], ye = typeof i == "string" || typeof i == "number" ? U.stat.progressNamed(String(i)) : U.stat.progress, be = le ? "div" : "dl", xe = k ?? "accent";
+var E = l(!1), D = ({ label: r, value: i, format: a, locale: l, prefix: d, suffix: p, unit: x, helpText: S, icon: C, size: w = "md", align: D = "start", variant: O = "plain", accentPosition: k = "start", tone: A, change: j, changeType: oe, positiveIsGood: M = !0, changeFormat: N = b, comparisonLabel: P, changeLabel: F, progress: I, sparkline: L, animate: R = !1, loading: z = !1, loadingLabel: B, className: V, ref: H, ...U }) => {
+	let { messages: W, locale: G } = c(), K = l ?? G, se = B ?? W.stat.loading, ce = u(E), [le, ue] = m(null), de = e(ue, H), q = typeof i == "number", J = f(() => new Intl.NumberFormat(K, a), [K, a]), fe = f(() => new Intl.NumberFormat(K, N), [K, N]), Y = ae(q ? i : void 0, R && q && !z, le), X = q ? J.format(i) : void 0, pe = q && Y !== void 0 ? J.format(Y) : X, me = R && q, Z = j !== void 0 && Number.isFinite(j), Q = oe ?? (Z ? T(j) : "neutral"), he = Q === "neutral" ? "neutral" : Q === "increase" === M ? "positive" : "negative", $ = Z ? fe.format(Math.abs(j)) : "", ge = Z ? Q === "neutral" ? $ : `${Q === "increase" ? "+" : "−"}${$}` : "", _e = F ?? [Q === "increase" ? W.stat.increased($) : Q === "decrease" ? W.stat.decreased($) : j === 0 ? W.stat.noChange : W.stat.changed($), P].filter(Boolean).join(" "), ve = y[Q], ye = typeof r == "string" || typeof r == "number" ? W.stat.progressNamed(String(r)) : W.stat.progress, be = ce ? "div" : "dl", xe = A ?? "accent";
 	return /* @__PURE__ */ _(be, {
-		...H,
-		ref: fe,
-		"aria-busy": R || void 0,
-		"data-variant": D,
-		className: n(c.root, ee[C], te[E], ne[D], D === "accent" && re[O], D === "accent" && v[xe], ie[k ?? "primary"], I != null && c.hasSparkline, B),
+		...U,
+		ref: de,
+		"aria-busy": z || void 0,
+		"data-variant": O,
+		className: t(s.root, ee[w], te[D], ne[O], O === "accent" && re[k], O === "accent" && v[xe], ie[A ?? "primary"], L != null && s.hasSparkline, V),
 		children: [
 			/* @__PURE__ */ _("dt", {
-				className: c.labelRow,
-				children: [S != null && /* @__PURE__ */ g("span", {
-					className: c.icon,
+				className: s.labelRow,
+				children: [C != null && /* @__PURE__ */ g("span", {
+					className: s.icon,
 					"aria-hidden": "true",
-					children: S
+					children: C
 				}), /* @__PURE__ */ g("span", {
-					className: c.label,
-					children: i
+					className: s.label,
+					children: r
 				})]
 			}),
 			/* @__PURE__ */ g("dd", {
-				className: c.valueRow,
-				children: R ? /* @__PURE__ */ _(h, { children: [
+				className: s.valueRow,
+				children: z ? /* @__PURE__ */ _(h, { children: [
 					/* @__PURE__ */ g("span", {
-						className: n(c.skeleton, c.skeletonValue),
+						className: t(s.skeleton, s.skeletonValue),
 						"aria-hidden": "true"
 					}),
 					Z && /* @__PURE__ */ g("span", {
-						className: n(c.skeleton, c.skeletonChange),
+						className: t(s.skeleton, s.skeletonChange),
 						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ g(r, { children: ce })
+					/* @__PURE__ */ g(n, { children: se })
 				] }) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("span", {
-					className: c.value,
+					className: s.value,
 					children: [
 						d != null && /* @__PURE__ */ g("span", {
-							className: c.affix,
+							className: s.affix,
 							children: d
 						}),
 						me ? /* @__PURE__ */ _("span", {
-							className: c.counter,
+							className: s.counter,
 							children: [
 								/* @__PURE__ */ g("span", {
-									className: c.counterGhost,
+									className: s.counterGhost,
 									"aria-hidden": "true",
-									children: Y
+									children: X
 								}),
 								/* @__PURE__ */ g("span", {
-									className: c.counterLive,
+									className: s.counterLive,
 									"aria-hidden": "true",
-									children: X
+									children: pe
 								}),
-								/* @__PURE__ */ g(r, { children: Y })
+								/* @__PURE__ */ g(n, { children: X })
 							]
 						}) : /* @__PURE__ */ g("span", {
-							className: c.number,
-							children: K ? Y : a
+							className: s.number,
+							children: q ? X : i
 						}),
 						p != null && /* @__PURE__ */ g("span", {
-							className: c.affix,
+							className: s.affix,
 							children: p
 						}),
-						b != null && /* @__PURE__ */ g("span", {
-							className: c.unit,
-							children: b
+						x != null && /* @__PURE__ */ g("span", {
+							className: s.unit,
+							children: x
 						})
 					]
 				}), Z && /* @__PURE__ */ _("span", {
-					className: c.change,
+					className: s.change,
 					"data-trend": Q,
 					"data-sentiment": he,
 					children: [/* @__PURE__ */ _("span", {
-						className: c.changeVisible,
+						className: s.changeVisible,
 						"aria-hidden": "true",
 						children: [/* @__PURE__ */ g(ve, {
-							className: c.changeIcon,
+							className: s.changeIcon,
 							strokeWidth: 2.5
 						}), ge]
-					}), /* @__PURE__ */ g(r, { children: `, ${_e}` })]
+					}), /* @__PURE__ */ g(n, { children: `, ${_e}` })]
 				})] })
 			}),
-			I != null && /* @__PURE__ */ g("dd", {
-				className: c.sparkline,
-				children: I
+			L != null && /* @__PURE__ */ g("dd", {
+				className: s.sparkline,
+				children: L
 			}),
-			x != null && /* @__PURE__ */ g("dd", {
-				className: c.helpText,
-				children: x
+			S != null && /* @__PURE__ */ g("dd", {
+				className: s.helpText,
+				children: S
 			}),
-			F && /* @__PURE__ */ g("dd", {
-				className: c.progress,
-				children: /* @__PURE__ */ g(s, {
+			I && /* @__PURE__ */ g("dd", {
+				className: s.progress,
+				children: /* @__PURE__ */ g(o, {
 					size: "sm",
-					value: R ? null : F.value,
-					max: F.max ?? 100,
-					tone: F.tone ?? k ?? "primary",
-					label: F.label,
-					showValue: F.showValue,
-					valueText: F.valueText,
-					"aria-label": F.label ? void 0 : ye
+					value: z ? null : I.value,
+					max: I.max ?? 100,
+					tone: I.tone ?? A ?? "primary",
+					label: I.label,
+					showValue: I.showValue,
+					valueText: I.valueText,
+					"aria-label": I.label ? void 0 : ye
 				})
 			})
 		]
 	});
-}, D = [
+}, O = [
 	"base",
 	"sm",
 	"md",
 	"lg",
 	"xl",
 	"2xl"
-], O = {
-	plain: c.groupPlain,
-	card: c.groupCard
-}, k = ({ children: e, columns: t, divided: r = !1, variant: i = "plain", className: a, style: o, ...s }) => {
+], k = {
+	plain: s.groupPlain,
+	card: s.groupCard
+}, A = ({ children: e, columns: n, divided: r = !1, variant: i = "plain", className: a, style: o, ...c }) => {
 	let l;
-	if (t !== void 0) {
-		let e = {}, n;
-		for (let r of D) {
-			let i = typeof t == "number" ? r === "base" ? t : void 0 : t[r];
-			i !== void 0 && (n = Math.max(1, Math.round(i))), n !== void 0 && (e[`--_cols-${r}`] = n);
+	if (n !== void 0) {
+		let e = {}, t;
+		for (let r of O) {
+			let i = typeof n == "number" ? r === "base" ? n : void 0 : n[r];
+			i !== void 0 && (t = Math.max(1, Math.round(i))), t !== void 0 && (e[`--_cols-${r}`] = t);
 		}
 		l = e;
 	}
-	return /* @__PURE__ */ g(T.Provider, {
+	return /* @__PURE__ */ g(E.Provider, {
 		value: !0,
 		children: /* @__PURE__ */ g("dl", {
-			...s,
-			className: n(c.group, O[i], t === void 0 ? c.groupAuto : c.groupColumns, r && c.groupDivided, a),
+			...c,
+			className: t(s.group, k[i], n === void 0 ? s.groupAuto : s.groupColumns, r && s.groupDivided, a),
 			style: l ? {
 				...l,
 				...o
@@ -220,5 +221,4 @@ var T = l(!1), E = ({ label: i, value: a, format: o, locale: l, prefix: d, suffi
 		})
 	});
 };
-//#endregion
-export { E as Stat, k as StatGroup, w as getStatChangeType };
+export { D as Stat, A as StatGroup, T as getStatChangeType };

package/dist/components/data-display/Stat/Stat.module.css.mjs

@@ -1,4 +1,4 @@
-//#region src/components/data-display/Stat/Stat.module.css
+// src/components/data-display/Stat/Stat.module.css
 var e = "_root_1b36i_23", t = "_labelRow_1b36i_95", n = "_label_1b36i_95", r = "_icon_1b36i_127", i = "_valueRow_1b36i_165", a = "_value_1b36i_165", o = "_number_1b36i_207", s = "_affix_1b36i_217", c = "_unit_1b36i_231", l = "_counter_1b36i_251", u = "_counterGhost_1b36i_259", d = "_counterLive_1b36i_261", f = "_alignStart_1b36i_277", p = "_alignCenter_1b36i_283", m = "_alignEnd_1b36i_289", h = "_change_1b36i_301", g = "_changeVisible_1b36i_317", _ = "_changeIcon_1b36i_351", v = "_helpText_1b36i_391", y = "_progress_1b36i_403", b = "_hasSparkline_1b36i_411", x = "_sparkline_1b36i_431", S = "_sm_1b36i_499", C = "_md_1b36i_517", w = "_lg_1b36i_535", T = "_xl_1b36i_553", E = "_plain_1b36i_575", D = "_card_1b36i_583", O = "_accent_1b36i_599", k = "_accentStart_1b36i_607", A = "_accentTop_1b36i_621", j = "_toneNeutral_1b36i_639", M = "_tonePrimary_1b36i_647", N = "_toneAccent_1b36i_655", P = "_toneSuccess_1b36i_663", F = "_toneWarning_1b36i_671", I = "_toneDanger_1b36i_679", L = "_toneInfo_1b36i_687", R = "_barNeutral_1b36i_701", z = "_barPrimary_1b36i_707", B = "_barAccent_1b36i_713", V = "_barSuccess_1b36i_719", H = "_barWarning_1b36i_725", U = "_barDanger_1b36i_731", W = "_barInfo_1b36i_737", G = "_skeleton_1b36i_749", K = "_skeletonValue_1b36i_763", q = "_skeletonChange_1b36i_775", J = "_group_1b36i_827", Y = "_groupAuto_1b36i_841", X = "_groupColumns_1b36i_849", Z = "_groupPlain_1b36i_909", Q = "_groupCard_1b36i_917", $ = "_groupDivided_1b36i_939", ee = {
 	root: e,
 	labelRow: t,
@@ -56,5 +56,4 @@ var e = "_root_1b36i_23", t = "_labelRow_1b36i_95", n = "_label_1b36i_95", r = "
 	groupCard: Q,
 	groupDivided: $
 };
-//#endregion
 export { O as accent, k as accentStart, A as accentTop, s as affix, p as alignCenter, m as alignEnd, f as alignStart, B as barAccent, U as barDanger, W as barInfo, R as barNeutral, z as barPrimary, V as barSuccess, H as barWarning, D as card, h as change, _ as changeIcon, g as changeVisible, l as counter, u as counterGhost, d as counterLive, ee as default, J as group, Y as groupAuto, Q as groupCard, X as groupColumns, $ as groupDivided, Z as groupPlain, b as hasSparkline, v as helpText, r as icon, n as label, t as labelRow, w as lg, C as md, o as number, E as plain, y as progress, e as root, G as skeleton, q as skeletonChange, K as skeletonValue, S as sm, x as sparkline, N as toneAccent, I as toneDanger, L as toneInfo, j as toneNeutral, M as tonePrimary, P as toneSuccess, F as toneWarning, c as unit, a as value, i as valueRow, T as xl };