@jfrader/ui 0.4.0 → 0.5.1

package/dist/stepper-CruHbXxX.js

@@ -0,0 +1,480 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-BJdvqqvn.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as c } from "./part-id-D0zksy32.js";
+import { useId as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
+import { vars as p } from "@jfrader/tokens/vars";
+import { Fragment as m, jsx as h, jsxs as g } from "@emotion/react/jsx-runtime";
+//#region src/components/stepper/stepper.tsx
+var _ = "Progress", v = "All steps complete", y = {
+	complete: "completed",
+	current: "current step",
+	upcoming: "upcoming",
+	error: "error"
+}, ee = (e) => (t, n, r, i) => `${t.label}, step ${e.format(n + 1)} of ${e.format(r)}, ${y[i]}`, b = (e) => (t, n, r) => t ? `Step ${e.format(n + 1)} of ${e.format(r)}: ${t.label}` : v, x = "2px", S = "--stepper-marker-size", C = "--stepper-marker-font", w = "--stepper-detail-font", T = `var(${S})`, E = "@container stepper (max-width: 30rem)", D = (e) => ({
+	"[data-compact] &": e,
+	[E]: { "[data-auto-compact] &": e }
+});
+function O(e, t) {
+	if (e !== void 0) return Number.isFinite(e) ? Math.min(Math.max(Math.floor(e), 0), t) : 0;
+}
+function te(e, t, n) {
+	return s(e.error) ? "error" : t < n ? "complete" : t === n ? "current" : "upcoming";
+}
+var ne = (...e) => e.filter(Boolean).join(" ") || void 0;
+function re() {
+	return /* @__PURE__ */ h("svg", {
+		viewBox: "0 0 16 16",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ h("path", { d: "M3.5 8.5l3 3 6-6.5" })
+	});
+}
+function ie() {
+	return /* @__PURE__ */ g("svg", {
+		viewBox: "0 0 16 16",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		children: [/* @__PURE__ */ h("path", { d: "M8 3.5v5.5" }), /* @__PURE__ */ h("circle", {
+			cx: "8",
+			cy: "12.5",
+			r: "1",
+			fill: "currentColor",
+			stroke: "none"
+		})]
+	});
+}
+var ae = e({
+	label: "stepper",
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	minInlineSize: 0,
+	containerType: "inline-size",
+	containerName: "stepper",
+	fontFamily: p.font.sans,
+	lineHeight: p.lineHeight.base,
+	color: p.color.text
+}), oe = {
+	sm: e({
+		[S]: p.space[6],
+		[C]: p.textSize.xs,
+		[w]: p.textSize.xs,
+		fontSize: p.textSize.sm
+	}),
+	md: e({
+		[S]: p.space[8],
+		[C]: p.textSize.sm,
+		[w]: p.textSize.sm,
+		fontSize: p.textSize.md
+	})
+}, se = {
+	horizontal: e({
+		display: "flex",
+		margin: 0,
+		padding: 0,
+		listStyle: "none"
+	}),
+	vertical: e({
+		display: "flex",
+		flexDirection: "column",
+		margin: 0,
+		padding: 0,
+		listStyle: "none"
+	})
+}, ce = {
+	horizontal: e({
+		display: "grid",
+		gridTemplateColumns: `minmax(0, max-content) minmax(${p.space[4]}, 1fr)`,
+		alignItems: "start",
+		flex: "1 1 0",
+		minInlineSize: 0,
+		"&:last-of-type": {
+			gridTemplateColumns: "minmax(0, max-content)",
+			flex: "0 1 auto"
+		}
+	}),
+	vertical: e({
+		display: "grid",
+		gridTemplateColumns: `calc(${T} + 2 * ${p.space[1]}) minmax(0, 1fr)`,
+		minInlineSize: 0
+	})
+}, k = e({
+	boxSizing: "border-box",
+	gridRow: 1,
+	justifySelf: "start",
+	display: "inline-flex",
+	alignItems: "flex-start",
+	gap: p.space[3],
+	maxInlineSize: "100%",
+	minInlineSize: p.space[8],
+	minBlockSize: p.space[8],
+	margin: 0,
+	padding: p.space[1],
+	border: 0,
+	borderRadius: p.radius.sm,
+	backgroundColor: "transparent",
+	color: "inherit",
+	font: "inherit",
+	textAlign: "start",
+	transitionProperty: "background-color, transform",
+	transitionDuration: p.motion.duration.base,
+	transitionTimingFunction: p.motion.easeStandard,
+	[i]: { transitionDuration: "0s" }
+}), A = {
+	horizontal: e({ gridColumn: 1 }),
+	vertical: e({ gridColumn: "1 / -1" })
+}, le = e({
+	cursor: "pointer",
+	"&[aria-disabled=\"true\"]": { cursor: "default" },
+	"&:not([aria-disabled=\"true\"]):hover": { backgroundColor: p.color.surfaceHover },
+	"&:not([aria-disabled=\"true\"]):active": { transform: "scale(0.98)" },
+	"&:focus-visible": n,
+	[i]: { "&:not([aria-disabled=\"true\"]):active": { transform: "none" } }
+}), j = e({
+	boxSizing: "border-box",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	minInlineSize: T,
+	blockSize: T,
+	paddingInline: p.space[1],
+	border: `${x} solid ${p.color.borderControl}`,
+	borderRadius: p.radius.full,
+	backgroundColor: "transparent",
+	color: p.color.textMuted,
+	fontSize: `var(${C})`,
+	fontWeight: p.fontWeight.medium,
+	fontVariantNumeric: "tabular-nums",
+	lineHeight: 1,
+	whiteSpace: "nowrap",
+	transitionProperty: "background-color, border-color, color",
+	transitionDuration: p.motion.duration.base,
+	transitionTimingFunction: p.motion.easeStandard,
+	"& svg": {
+		inlineSize: "1em",
+		blockSize: "1em"
+	},
+	"&[data-numeral]::before": { content: "attr(data-numeral)" },
+	"&[data-state=\"complete\"]": {
+		borderColor: p.color.accent,
+		backgroundColor: p.color.accent,
+		color: p.color.accentContrast
+	},
+	"&[data-state=\"current\"]": {
+		borderColor: p.color.accent,
+		backgroundColor: p.color.accentSoft,
+		color: p.color.text,
+		fontWeight: p.fontWeight.semibold,
+		outline: `${x} solid ${p.color.accent}`,
+		outlineOffset: x
+	},
+	"&[data-state=\"error\"]": {
+		borderColor: p.color.dangerText,
+		backgroundColor: p.color.dangerSoft,
+		color: p.color.dangerText
+	},
+	[i]: { transitionDuration: "0s" },
+	[r]: {
+		borderColor: "CanvasText",
+		"&[data-state=\"current\"], &[data-state=\"error\"]": {
+			borderColor: "Highlight",
+			outlineColor: "Highlight"
+		},
+		"&[data-state=\"complete\"]": {
+			forcedColorAdjust: "none",
+			borderColor: "Highlight",
+			backgroundColor: "Highlight",
+			color: "HighlightText"
+		}
+	}
+}), ue = e({
+	display: "flex",
+	alignItems: "center",
+	minBlockSize: T,
+	minInlineSize: 0,
+	fontWeight: p.fontWeight.medium,
+	overflowWrap: "anywhere",
+	"&[data-state=\"current\"]": { fontWeight: p.fontWeight.semibold },
+	"&[data-state=\"upcoming\"]": { color: p.color.textMuted },
+	"&[data-state=\"error\"]": { color: p.color.dangerText },
+	...D({ "&:not([data-state=\"error\"])": { display: "none" } })
+}), de = e({
+	gridRow: 2,
+	minInlineSize: 0,
+	paddingInlineEnd: p.space[2],
+	fontSize: `var(${w})`,
+	color: p.color.textMuted,
+	overflowWrap: "anywhere",
+	"&[data-state=\"error\"]": { color: p.color.dangerText },
+	...D({ "&:not([data-state=\"error\"])": o })
+}), fe = {
+	horizontal: e({
+		gridColumn: "1 / -1",
+		paddingInlineStart: `calc(${p.space[1]} + ${T} + ${p.space[3]})`
+	}),
+	vertical: e({
+		gridColumn: 2,
+		paddingInlineStart: p.space[2],
+		paddingBlockEnd: p.space[2]
+	})
+}, pe = e({
+	position: "relative",
+	overflow: "hidden",
+	backgroundColor: p.color.border,
+	"&::after": {
+		content: "\"\"",
+		position: "absolute",
+		inset: 0,
+		backgroundColor: p.color.accent,
+		transitionProperty: "transform",
+		transitionDuration: p.motion.duration.base,
+		transitionTimingFunction: p.motion.easeStandard
+	},
+	"&[data-state=\"complete\"]::after": { transform: "none" },
+	[i]: { "&::after": { transitionDuration: "0s" } },
+	[r]: {
+		forcedColorAdjust: "none",
+		backgroundColor: "CanvasText",
+		"&::after": { backgroundColor: "Highlight" }
+	}
+}), me = {
+	horizontal: e({
+		gridColumn: 2,
+		gridRow: 1,
+		blockSize: x,
+		marginInline: p.space[2],
+		marginBlockStart: `calc(${p.space[1]} + ${T} / 2 - ${x} / 2)`,
+		"&:not([data-state=\"complete\"])::after": { transform: "scaleX(0)" },
+		"&::after": { transformOrigin: "left" },
+		"&:dir(rtl)::after": { transformOrigin: "right" }
+	}),
+	vertical: e({
+		gridColumn: 1,
+		gridRow: 2,
+		justifySelf: "center",
+		inlineSize: x,
+		minBlockSize: p.space[6],
+		marginBlock: p.space[1],
+		"&:not([data-state=\"complete\"])::after": { transform: "scaleY(0)" },
+		"&::after": { transformOrigin: "top" }
+	})
+}, M = e({
+	marginBlockStart: p.space[3],
+	fontSize: p.textSize.sm,
+	color: p.color.textMuted,
+	overflowWrap: "anywhere",
+	"&[data-complete]": {
+		color: p.color.text,
+		fontWeight: p.fontWeight.medium
+	},
+	"&:not([data-complete])": { display: "none" },
+	...D({ "&:not([data-complete])": { display: "block" } })
+}), he = e({
+	display: "block",
+	color: p.color.text,
+	fontWeight: p.fontWeight.medium
+});
+function N(e) {
+	let { ref: n, steps: r, value: i, defaultValue: p = 0, onValueChange: y, interactive: x = !1, orientation: S = "horizontal", details: C = "all", compact: w = !1, responsive: T = !0, size: E = "md", label: D = _, completeLabel: N = v, locale: P, getStepLabel: F, getChangeLabel: I, announceChanges: L = !1, slotProps: R, className: ge, sx: _e, "aria-label": ve, "aria-labelledby": z, ...ye } = e, B = r.length, be = l(), [xe, Se] = a(O(i, B), O(p, B), y), V = O(xe, B) ?? 0, H = r[V] ?? null, Ce = B > 0 && H === null, U = new Intl.NumberFormat(P), W = F ?? ee(U), we = I ?? b(U), [Te, Ee] = f(V), [De, Oe] = f("");
+	Te !== V && (Ee(V), L && Oe(we(H, V, B)));
+	let ke = (e) => e === V || e < V && r[e]?.disabled !== !0, G = x ? r.flatMap((e, t) => ke(t) ? [t] : []) : [], [Ae, je] = f(null), K = r.findIndex((e) => e.id === Ae), q = G.includes(K) ? K : G.includes(V) ? V : G[0], J = d(/* @__PURE__ */ new Map()), Y = d(!1);
+	u(() => {
+		if (!Y.current) return;
+		Y.current = !1;
+		let e = q === void 0 ? void 0 : J.current.get(r[q]?.id ?? ""), t = e?.ownerDocument.activeElement;
+		e && (!t || t === e.ownerDocument.body) && e.focus();
+	});
+	let Me = (e, t) => {
+		let n = getComputedStyle(e.currentTarget).direction === "rtl", [i, a] = S === "vertical" ? ["ArrowUp", "ArrowDown"] : n ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"], o = G.indexOf(G.includes(t) ? t : q ?? -1), s = {
+			[i]: G[Math.max(o - 1, 0)],
+			[a]: G[Math.min(o + 1, G.length - 1)],
+			Home: G[0],
+			End: G.at(-1)
+		};
+		if (!(e.key in s)) return;
+		e.preventDefault();
+		let c = s[e.key], l = c === void 0 ? void 0 : r[c];
+		l && J.current.get(l.id)?.focus();
+	}, Ne = (e) => {
+		e < V && r[e]?.disabled !== !0 && Se(e);
+	}, { className: X, css: Z, onClick: Pe, onKeyDown: Fe, onFocus: Ie, "aria-describedby": Le, ...Re } = R?.head ?? {}, ze = /* @__PURE__ */ h("ol", {
+		role: "list",
+		"data-ui": "stepper-list",
+		className: R?.list?.className,
+		css: [se[S], R?.list?.css],
+		children: r.map((e, t) => {
+			let n = te(e, t, V), r = t === V, i = W(e, t, B, n), a = n === "error", l = a || s(e.description) && (C === "all" || r), u = c(be, "detail", e.id), d = s(e.icon), f = n === "complete" ? /* @__PURE__ */ h(re, {}) : a ? /* @__PURE__ */ h(ie, {}) : null, p = d || f ? void 0 : U.format(t + 1), _ = /* @__PURE__ */ g(m, { children: [
+				/* @__PURE__ */ h("span", {
+					"aria-hidden": "true",
+					"data-ui": "stepper-marker",
+					"data-state": n,
+					"data-numeral": p,
+					className: R?.marker?.className,
+					css: [j, R?.marker?.css],
+					children: d ? e.icon : f
+				}),
+				/* @__PURE__ */ h("span", {
+					"aria-hidden": !x || void 0,
+					"data-ui": "stepper-label",
+					"data-state": n,
+					className: R?.label?.className,
+					css: [ue, R?.label?.css],
+					children: e.label
+				}),
+				!x && /* @__PURE__ */ h("span", {
+					css: o,
+					children: i
+				})
+			] });
+			return /* @__PURE__ */ g("li", {
+				role: "listitem",
+				"data-ui": "stepper-item",
+				"data-state": n,
+				"aria-current": r ? "step" : void 0,
+				"aria-label": i,
+				className: R?.item?.className,
+				css: [ce[S], R?.item?.css],
+				children: [
+					x ? /* @__PURE__ */ h("button", {
+						...Re,
+						ref: (t) => {
+							if (t) return J.current.set(e.id, t), () => {
+								J.current.delete(e.id), t.ownerDocument.activeElement === t && (Y.current = !0);
+							};
+						},
+						type: "button",
+						"data-ui": "stepper-head",
+						"data-state": n,
+						tabIndex: t === q ? 0 : -1,
+						"aria-current": r ? "step" : void 0,
+						"aria-disabled": t < V && !e.disabled ? void 0 : !0,
+						"aria-label": i,
+						"aria-describedby": ne(Le, l && u),
+						className: X,
+						css: [
+							k,
+							A[S],
+							le,
+							Z
+						],
+						onFocus: (t) => {
+							Ie?.(t), je(e.id);
+						},
+						onKeyDown: (e) => {
+							Fe?.(e), e.defaultPrevented || Me(e, t);
+						},
+						onClick: (e) => {
+							Pe?.(e), e.defaultPrevented || Ne(t);
+						},
+						children: _
+					}) : /* @__PURE__ */ h("span", {
+						"data-ui": "stepper-head",
+						"data-state": n,
+						className: X,
+						css: [
+							k,
+							A[S],
+							Z
+						],
+						children: _
+					}),
+					l && /* @__PURE__ */ h("span", {
+						id: u,
+						"data-ui": "stepper-description",
+						"data-state": n,
+						className: R?.description?.className,
+						css: [
+							de,
+							fe[S],
+							R?.description?.css
+						],
+						children: a ? e.error : e.description
+					}),
+					t < B - 1 && /* @__PURE__ */ h("span", {
+						"aria-hidden": "true",
+						"data-ui": "stepper-connector",
+						"data-state": t < V ? "complete" : "upcoming",
+						className: R?.connector?.className,
+						css: [
+							pe,
+							me[S],
+							R?.connector?.css
+						]
+					})
+				]
+			}, e.id);
+		})
+	}), Be = Ce ? s(N) && /* @__PURE__ */ h("div", {
+		"data-ui": "stepper-caption",
+		"data-complete": "",
+		className: R?.caption?.className,
+		css: [M, R?.caption?.css],
+		children: N
+	}) : H && /* @__PURE__ */ g("div", {
+		"aria-hidden": "true",
+		"data-ui": "stepper-caption",
+		className: R?.caption?.className,
+		css: [M, R?.caption?.css],
+		children: [/* @__PURE__ */ h("span", {
+			css: he,
+			children: H.label
+		}), !s(H.error) && s(H.description) && H.description]
+	}), Q = {
+		...ye,
+		"data-ui": "stepper",
+		"data-orientation": S,
+		"data-size": E,
+		"data-compact": w ? "" : void 0,
+		"data-auto-compact": T && S === "horizontal" ? "" : void 0,
+		"aria-label": ve ?? (z === void 0 ? D : void 0),
+		"aria-labelledby": z
+	}, $ = /* @__PURE__ */ g(m, { children: [
+		ze,
+		Be,
+		L && /* @__PURE__ */ h("span", {
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			"data-ui": "stepper-live",
+			css: o,
+			children: De
+		})
+	] });
+	return /* @__PURE__ */ h(t, {
+		className: [R?.root?.className, ge].filter(Boolean).join(" ") || void 0,
+		styles: [
+			ae,
+			oe[E],
+			R?.root?.css
+		],
+		sx: _e,
+		children: (e) => x ? /* @__PURE__ */ h("nav", {
+			...Q,
+			ref: n,
+			className: e,
+			children: $
+		}) : /* @__PURE__ */ h("div", {
+			...Q,
+			ref: n,
+			role: "group",
+			className: e,
+			children: $
+		})
+	});
+}
+N.displayName = "Stepper";
+//#endregion
+export { N as t };

package/dist/stepper.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as Stepper } from "./stepper-CruHbXxX.js";