@jfrader/ui 0.5.1 → 0.6.0

package/dist/{badge-CjM5Agqk.js → badge-CfhTcA-Z.js}

@@ -1,6 +1,7 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-8yrN85VT.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 "./renderable-DzcIj1Lo.js";
 import { vars as i } from "@jfrader/tokens/vars";
 import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
@@ -21,7 +22,7 @@ var s = 99, c = e({
 	lineHeight: 1,
 	whiteSpace: "nowrap",
 	pointerEvents: "none",
-	[n]: {
+	[t]: {
 		outline: "1px solid CanvasText",
 		backgroundColor: "Canvas"
 	}
@@ -36,7 +37,7 @@ var s = 99, c = e({
 		blockSize: i.space[2],
 		inlineSize: i.space[2],
 		borderRadius: i.radius.full,
-		[n]: {
+		[t]: {
 			backgroundColor: "CanvasText",
 			forcedColorAdjust: "none",
 			outline: "none"
@@ -84,18 +85,18 @@ var s = 99, c = e({
 		color: i.color.bg
 	})
 };
-function m({ ref: e, children: n, 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 }) {
+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(t, {
+	return /* @__PURE__ */ a(n, {
 		className: k,
 		styles: [c, x?.root?.css],
 		sx: C,
-		children: (t) => /* @__PURE__ */ o("span", {
+		children: (n) => /* @__PURE__ */ o("span", {
 			...w,
 			ref: e,
 			"data-ui": "badge",
-			className: t,
-			children: [n, !E && /* @__PURE__ */ a("span", {
+			className: n,
+			children: [t, !E && /* @__PURE__ */ a("span", {
 				"data-ui": "badge-marker",
 				"data-variant": _,
 				"data-tone": v,

package/dist/badge.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Badge } from "./badge-CjM5Agqk.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";