@jfrader/ui 0.5.0 → 0.6.0

package/dist/{avatar-group-DOQQuV51.js → avatar-group-DvP8mAE-.js}

@@ -1,8 +1,9 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-8yrN85VT.js";
-import { t as r } from "./visually-hidden-BJdvqqvn.js";
-import { t as i } from "./avatar-BahDVO9t.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
+import { t as r } from "./visually-hidden-DgVO3NaB.js";
+import { t as i } from "./avatar-B6idYC59.js";
 import { useId as a } from "react";
 import { vars as o } from "@jfrader/tokens/vars";
 import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
@@ -33,7 +34,7 @@ var f = e({
 }), m = e({
 	boxSizing: "border-box",
 	border: `2px solid ${o.color.surface}`,
-	[n]: { borderColor: "Canvas" }
+	[t]: { borderColor: "Canvas" }
 }), h = e({
 	position: "relative",
 	display: "inline-flex",
@@ -52,7 +53,7 @@ var f = e({
 	verticalAlign: "middle",
 	border: `2px solid ${o.color.surface}`,
 	"&:not(:first-of-type)": { marginInlineStart: `calc(-1 * ${o.space[1]})` },
-	[n]: {
+	[t]: {
 		borderColor: "Canvas",
 		color: "CanvasText",
 		backgroundColor: "Canvas"
@@ -77,9 +78,9 @@ var f = e({
 		fontSize: o.textSize.md
 	})
 };
-function _({ ref: e, members: n, max: o = 4, size: l = "md", label: _ = "Team members", locale: v, getOverflowLabel: y = u, getSummaryLabel: b = d, slotProps: x, avatarProps: S, className: C, sx: w, ...T }) {
-	let E = a(), D = typeof o == "number" && Number.isFinite(o) ? Math.max(0, Math.floor(o)) : 4, O = n.length, k = n.slice(0, D), A = O - k.length, j = A > 0, M = new Intl.NumberFormat(v), N = M.format(A), P = M.format(O), F = y(A, N), I = b(O, P), L = !!T["aria-labelledby"]?.trim(), R = T["aria-label"] ?? (L ? void 0 : _), z = [T["aria-describedby"], E].filter(Boolean).join(" ");
-	return /* @__PURE__ */ s(t, {
+function _({ ref: e, members: t, max: o = 4, size: l = "md", label: _ = "Team members", locale: v, getOverflowLabel: y = u, getSummaryLabel: b = d, slotProps: x, avatarProps: S, className: C, sx: w, ...T }) {
+	let E = a(), D = typeof o == "number" && Number.isFinite(o) ? Math.max(0, Math.floor(o)) : 4, O = t.length, k = t.slice(0, D), A = O - k.length, j = A > 0, M = new Intl.NumberFormat(v), N = M.format(A), P = M.format(O), F = y(A, N), I = b(O, P), L = !!T["aria-labelledby"]?.trim(), R = T["aria-label"] ?? (L ? void 0 : _), z = [T["aria-describedby"], E].filter(Boolean).join(" ");
+	return /* @__PURE__ */ s(n, {
 		className: C,
 		styles: f,
 		sx: w,

package/dist/avatar-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as AvatarGroup } from "./avatar-group-DOQQuV51.js";
+export { t as AvatarGroup } from "./avatar-group-DvP8mAE-.js";

package/dist/avatar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Avatar } from "./avatar-BahDVO9t.js";
+export { t as Avatar } from "./avatar-B6idYC59.js";

package/dist/badge-CfhTcA-Z.js

@@ -0,0 +1,120 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+var s = 99, c = e({
+	position: "relative",
+	display: "inline-flex",
+	flexShrink: 0,
+	verticalAlign: "middle"
+}), l = e({
+	position: "absolute",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	boxSizing: "border-box",
+	boxShadow: `0 0 0 2px ${i.color.bg}`,
+	fontWeight: i.fontWeight.medium,
+	lineHeight: 1,
+	whiteSpace: "nowrap",
+	pointerEvents: "none",
+	[t]: {
+		outline: "1px solid CanvasText",
+		backgroundColor: "Canvas"
+	}
+}), u = {
+	standard: e({
+		blockSize: i.space[5],
+		minInlineSize: i.space[5],
+		paddingInline: i.space[1],
+		fontSize: i.textSize.xs
+	}),
+	dot: e({
+		blockSize: i.space[2],
+		inlineSize: i.space[2],
+		borderRadius: i.radius.full,
+		[t]: {
+			backgroundColor: "CanvasText",
+			forcedColorAdjust: "none",
+			outline: "none"
+		}
+	})
+}, d = {
+	rectangular: e({ borderRadius: i.radius.sm }),
+	circular: e({ borderRadius: i.radius.full })
+}, f = {
+	"top-start": e({
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		transform: "translate(-50%, -50%)",
+		"&:dir(rtl)": { transform: "translate(50%, -50%)" }
+	}),
+	"top-end": e({
+		insetBlockStart: 0,
+		insetInlineEnd: 0,
+		transform: "translate(50%, -50%)",
+		"&:dir(rtl)": { transform: "translate(-50%, -50%)" }
+	}),
+	"bottom-start": e({
+		insetBlockEnd: 0,
+		insetInlineStart: 0,
+		transform: "translate(-50%, 50%)",
+		"&:dir(rtl)": { transform: "translate(50%, 50%)" }
+	}),
+	"bottom-end": e({
+		insetBlockEnd: 0,
+		insetInlineEnd: 0,
+		transform: "translate(50%, 50%)",
+		"&:dir(rtl)": { transform: "translate(-50%, 50%)" }
+	})
+}, p = {
+	accent: e({
+		backgroundColor: i.color.accent,
+		color: i.color.accentContrast
+	}),
+	danger: e({
+		backgroundColor: i.color.danger,
+		color: i.color.dangerContrast
+	}),
+	neutral: e({
+		backgroundColor: i.color.textMuted,
+		color: i.color.bg
+	})
+};
+function m({ ref: e, children: t, badgeContent: i, max: m = s, showZero: h = !1, invisible: g = !1, variant: _ = "standard", tone: v = "accent", anchor: y, overlap: b = "rectangular", slotProps: x, className: S, sx: C, ...w }) {
+	let T = _ === "dot", E = g || _ !== "dot" && (!r(i) || i === 0 && !h), D = typeof i == "number" && i > m ? `${m}+` : i, O = `${y?.vertical ?? "top"}-${y?.horizontal ?? "end"}`, k = [S, x?.root?.className].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ a(n, {
+		className: k,
+		styles: [c, x?.root?.css],
+		sx: C,
+		children: (n) => /* @__PURE__ */ o("span", {
+			...w,
+			ref: e,
+			"data-ui": "badge",
+			className: n,
+			children: [t, !E && /* @__PURE__ */ a("span", {
+				"data-ui": "badge-marker",
+				"data-variant": _,
+				"data-tone": v,
+				"aria-hidden": T ? "true" : void 0,
+				className: x?.badge?.className,
+				css: [
+					l,
+					u[_],
+					!T && d[b],
+					f[O],
+					p[v],
+					x?.badge?.css
+				],
+				children: T ? null : D
+			})]
+		})
+	});
+}
+m.displayName = "Badge";
+//#endregion
+export { m as t };

package/dist/badge.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Badge } from "./badge-B_sLygxU.js";
+export { t as Badge } from "./badge-CfhTcA-Z.js";

package/dist/billing-toggle-CgC7yxxo.js

@@ -0,0 +1,349 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
+import { t as r } from "./use-controlled-state-DpeVQZNR.js";
+import { t as i } from "./visually-hidden-DgVO3NaB.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { t as o } from "./segmented-control-DCh-4ca-.js";
+import { createContext as s, useContext as c, useId as l, useLayoutEffect as u, useMemo as d, useState as f } from "react";
+import { vars as p } from "@jfrader/tokens/vars";
+import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+import { AnimatePresence as g, MotionConfig as _, motion as v, useReducedMotion as y } from "motion/react";
+import { base as b } from "@jfrader/tokens";
+//#region src/components/billing-toggle/billing-toggle.tsx
+var x = s(null);
+function S() {
+	let e = c(x);
+	if (!e) throw Error("BillingToggle parts must be rendered inside <BillingToggle>.");
+	return e;
+}
+var C = e({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "flex-start",
+	gap: p.space[3],
+	minInlineSize: 0,
+	fontFamily: p.font.sans,
+	color: p.color.text
+}), w = e({
+	minInlineSize: 0,
+	maxInlineSize: "100%"
+}), T = e({ display: "contents" }), E = e({
+	fontSize: p.textSize.sm,
+	fontWeight: p.fontWeight.medium
+}), D = e({
+	display: "inline-grid",
+	border: `1px solid ${p.color.borderControl}`,
+	borderRadius: p.radius.full,
+	paddingInline: p.space[2],
+	fontSize: p.textSize.xs,
+	color: p.color.text,
+	backgroundColor: p.color.surfaceRaised,
+	[t]: {
+		borderColor: "CanvasText",
+		backgroundColor: "Canvas",
+		color: "CanvasText"
+	}
+}), O = e({
+	gridArea: "1 / 1",
+	whiteSpace: "nowrap"
+}), k = e({
+	visibility: "hidden",
+	pointerEvents: "none"
+}), A = {
+	neutral: e({ color: p.color.textMuted }),
+	accent: e({ borderColor: p.color.accentText }),
+	success: e({ borderColor: p.color.success })
+}, j = {
+	neutral: e({ backgroundColor: p.color.surfaceRaised }),
+	accent: e({ backgroundColor: p.color.accentSoft }),
+	success: e({ backgroundColor: p.color.successSoft })
+}, M = e({ [t]: { backgroundColor: "Canvas" } }), N = e({
+	display: "inline-flex",
+	flexWrap: "wrap",
+	alignItems: "baseline",
+	gap: p.space[2],
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	overflowWrap: "anywhere",
+	fontVariantNumeric: "tabular-nums"
+}), P = e({
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	fontSize: p.textSize["3xl"],
+	lineHeight: p.lineHeight.tight,
+	fontWeight: p.fontWeight.medium
+}), F = e({
+	display: "inline-grid",
+	gridTemplateColumns: "minmax(0, 1fr)",
+	maxInlineSize: "100%"
+}), I = e({
+	gridArea: "1 / 1",
+	minInlineSize: 0
+}), L = e({
+	color: p.color.textMuted,
+	minInlineSize: 0
+}), R = e({
+	color: p.color.textMuted,
+	minInlineSize: 0
+}), z = {
+	type: "spring",
+	bounce: 0,
+	visualDuration: Number.parseFloat(b.motion.duration.slow) / 1e3
+};
+function B({ ref: e, nativeProps: t, ...n }) {
+	return /* @__PURE__ */ m("span", {
+		...t,
+		...n,
+		ref: e,
+		"data-ui": "billing-toggle-price"
+	});
+}
+var V = v.create(B);
+function H({ ref: e, value: t, defaultValue: i, onValueChange: a, disabled: o = !1, size: s = "md", tone: c = "success", locale: u, className: p, sx: h, children: g, ...v }) {
+	let [y, b] = r(t, i, a), [S, w] = f([]), [T, E] = f(/* @__PURE__ */ new Map()), D = l(), O = d(() => ({
+		value: y,
+		emptyValue: D,
+		requestChange: b,
+		disabled: o,
+		size: s,
+		tone: c,
+		locale: u,
+		labels: S,
+		setLabels: w,
+		selections: T,
+		setSelections: E
+	}), [
+		y,
+		D,
+		b,
+		o,
+		s,
+		c,
+		u,
+		S,
+		T
+	]);
+	return /* @__PURE__ */ m(x.Provider, {
+		value: O,
+		children: /* @__PURE__ */ m(_, {
+			reducedMotion: "user",
+			children: /* @__PURE__ */ m(n, {
+				className: p,
+				styles: C,
+				sx: h,
+				children: (t) => /* @__PURE__ */ m("div", {
+					...v,
+					ref: e,
+					className: t,
+					"data-ui": "billing-toggle",
+					children: g
+				})
+			})
+		})
+	});
+}
+H.displayName = "BillingToggle";
+function U({ ref: e, id: t, className: r, sx: i, children: o, ...s }) {
+	let { setLabels: c } = S(), d = l(), f = t ?? d, p = a(o) && o !== "";
+	return u(() => {
+		if (p) return c((e) => [...e, f]), () => c((e) => e.filter((e) => e !== f));
+	}, [
+		f,
+		p,
+		c
+	]), p ? /* @__PURE__ */ m(n, {
+		className: r,
+		styles: E,
+		sx: i,
+		children: (t) => /* @__PURE__ */ m("span", {
+			...s,
+			ref: e,
+			id: f,
+			"data-ui": "billing-toggle-label",
+			className: t,
+			children: o
+		})
+	}) : null;
+}
+U.displayName = "BillingToggle.Label";
+function W({ ref: e, className: t, sx: r, children: i, ...a }) {
+	let s = S(), c = s.value === void 0 ? void 0 : s.selections.get(s.value);
+	return /* @__PURE__ */ m("div", {
+		"data-ui": "billing-toggle-list",
+		css: w,
+		children: /* @__PURE__ */ m(n, {
+			className: t,
+			styles: w,
+			sx: r,
+			children: (t) => /* @__PURE__ */ m(o, {
+				...a,
+				ref: e,
+				className: t,
+				value: s.value ?? s.emptyValue,
+				onValueChange: s.requestChange,
+				disabled: s.disabled,
+				size: s.size,
+				variant: "soft",
+				slotProps: { selection: {
+					...c,
+					css: [
+						j[s.tone],
+						M,
+						c?.css
+					]
+				} },
+				"aria-labelledby": [a["aria-labelledby"], ...s.labels].filter(Boolean).join(" ") || void 0,
+				children: i
+			})
+		})
+	});
+}
+W.displayName = "BillingToggle.List";
+function G({ badge: e, activeBadge: t, slotProps: r, children: i, className: s, sx: c, ...l }) {
+	let d = S(), { setSelections: f } = d, p = r?.selection, g = l.value;
+	u(() => {
+		if (p) return f((e) => new Map(e).set(g, p)), () => f((e) => {
+			let t = new Map(e);
+			return t.delete(g), t;
+		});
+	}, [
+		p,
+		g,
+		f
+	]);
+	let _ = d.value === l.value && t !== void 0 ? t : e, v = a(_) && _ !== "";
+	return /* @__PURE__ */ m("span", {
+		"data-ui": "billing-toggle-item",
+		css: T,
+		children: /* @__PURE__ */ m(n, {
+			className: s,
+			sx: c,
+			children: (n) => /* @__PURE__ */ m(o.Item, {
+				...l,
+				className: n,
+				accessory: v ? /* @__PURE__ */ h("span", {
+					...r?.badge,
+					"data-ui": "billing-toggle-badge",
+					css: [
+						D,
+						A[d.tone],
+						r?.badge?.css
+					],
+					children: [
+						a(e) && e !== "" && /* @__PURE__ */ m("span", {
+							"aria-hidden": "true",
+							css: [O, k],
+							children: e
+						}),
+						a(t) && t !== "" && /* @__PURE__ */ m("span", {
+							"aria-hidden": "true",
+							css: [O, k],
+							children: t
+						}),
+						/* @__PURE__ */ m("span", {
+							css: O,
+							children: _
+						})
+					]
+				}) : void 0,
+				children: a(i) && i !== "" && /* @__PURE__ */ m("span", {
+					...r?.label,
+					"data-ui": "billing-toggle-item-label",
+					css: r?.label?.css,
+					children: i
+				})
+			})
+		})
+	});
+}
+G.displayName = "BillingToggle.Item";
+function K({ ref: e, amount: t, currency: r, locale: o, formatOptions: s, was: c, period: l, previousLabel: u, slotProps: f, className: p, sx: _, ...b }) {
+	if (!Number.isFinite(t)) throw RangeError("BillingToggle.Price amount must be finite.");
+	let { locale: x } = S(), C = y(), w = o ?? x, T = JSON.stringify([
+		Intl.getCanonicalLocales(w === void 0 ? [] : [w].flat().map(String)),
+		r,
+		s ?? {}
+	]), E = d(() => {
+		let [e, t, n] = JSON.parse(T);
+		return new Intl.NumberFormat(e, {
+			...n,
+			style: "currency",
+			currency: t
+		});
+	}, [T]), D = E.format(t), O = c !== void 0 && Number.isFinite(c) && c > t;
+	if (O && !u) throw Error("BillingToggle.Price requires previousLabel when was exceeds amount.");
+	return /* @__PURE__ */ m(n, {
+		className: p,
+		styles: N,
+		sx: _,
+		children: (t) => /* @__PURE__ */ h(V, {
+			nativeProps: b,
+			style: b.style,
+			ref: e,
+			className: t,
+			layout: !C,
+			transition: z,
+			children: [
+				/* @__PURE__ */ h("span", {
+					...f?.amount,
+					"data-ui": "billing-toggle-amount",
+					css: [P, f?.amount?.css],
+					children: [/* @__PURE__ */ m("span", {
+						css: i,
+						children: D
+					}), /* @__PURE__ */ m(v.span, {
+						"aria-hidden": "true",
+						css: F,
+						transition: z,
+						children: /* @__PURE__ */ m(g, {
+							initial: !1,
+							children: /* @__PURE__ */ m(v.span, {
+								css: I,
+								initial: !C && {
+									opacity: 0,
+									y: "0.25em"
+								},
+								animate: {
+									opacity: 1,
+									y: 0
+								},
+								exit: C ? { opacity: 0 } : {
+									opacity: 0,
+									y: "-0.25em"
+								},
+								transition: C ? { duration: 0 } : z,
+								children: D
+							}, D)
+						})
+					})]
+				}),
+				O && /* @__PURE__ */ h("del", {
+					...f?.previous,
+					"data-ui": "billing-toggle-previous",
+					css: [L, f?.previous?.css],
+					children: [/* @__PURE__ */ m("span", {
+						css: i,
+						children: u
+					}), E.format(c)]
+				}),
+				a(l) && l !== "" && /* @__PURE__ */ m("span", {
+					...f?.period,
+					"data-ui": "billing-toggle-period",
+					css: [R, f?.period?.css],
+					children: l
+				})
+			]
+		})
+	});
+}
+K.displayName = "BillingToggle.Price";
+var q = Object.assign(H, {
+	List: W,
+	Item: G,
+	Label: U,
+	Price: K
+});
+//#endregion
+export { q as t };

package/dist/billing-toggle.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as BillingToggle } from "./billing-toggle-CgC7yxxo.js";