@jfrader/ui 0.1.2 → 0.3.0

package/dist/{skeleton-gJ4ImO5u.js → skeleton-OoFlOEXO.js}

@@ -1,7 +1,6 @@
 'use client';
-import { n as e, t } from "./css-Cgj6sCHn.js";
-import { n } from "./media-D_eA_I-e.js";
-import { forwardRef as r } from "react";
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r } from "./media-D_eA_I-e.js";
 import { vars as i } from "@jfrader/tokens/vars";
 import { jsx as a } from "@emotion/react/jsx-runtime";
 //#region src/components/skeleton/skeleton.tsx
@@ -20,7 +19,7 @@ var o = e({
 	backgroundRepeat: "no-repeat",
 	animation: `${o} 1.6s ease-in-out infinite`,
 	"&:dir(rtl)": { animationDirection: "reverse" },
-	[n]: {
+	[r]: {
 		animation: "none",
 		backgroundImage: "none"
 	}
@@ -29,20 +28,27 @@ var o = e({
 	blockSize: "auto",
 	aspectRatio: "1",
 	borderRadius: i.radius.full
-}), l = r(function({ width: e, height: t, circle: n = !1, radius: r, style: i, ...o }, l) {
-	return /* @__PURE__ */ a("div", {
-		...o,
-		ref: l,
-		"aria-hidden": "true",
-		"data-ui": "skeleton",
-		style: {
-			inlineSize: e,
-			blockSize: t,
-			borderRadius: n ? void 0 : r,
-			...i
-		},
-		css: [s, n && c]
-	});
 });
+function l({ ref: e, width: t, height: r, circle: i = !1, radius: o, style: l, className: u, sx: d, ...f }) {
+	return /* @__PURE__ */ a(n, {
+		className: u,
+		styles: [s, i && c],
+		sx: d,
+		children: (n) => /* @__PURE__ */ a("div", {
+			...f,
+			ref: e,
+			"aria-hidden": "true",
+			"data-ui": "skeleton",
+			style: {
+				inlineSize: t,
+				blockSize: r,
+				borderRadius: i ? void 0 : o,
+				...l
+			},
+			className: n
+		})
+	});
+}
+l.displayName = "Skeleton";
 //#endregion
 export { l as t };

package/dist/skeleton.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Skeleton } from "./skeleton-gJ4ImO5u.js";
+export { t as Skeleton } from "./skeleton-OoFlOEXO.js";

package/dist/spinner-C2YDoiMn.js

@@ -0,0 +1,56 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-D_eA_I-e.js";
+import { t as r } from "./visually-hidden-BJdvqqvn.js";
+import { n as i, t as a } from "./loading-ring-B8-30Dl1.js";
+import { vars as o } from "@jfrader/tokens/vars";
+import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
+//#region src/components/spinner/spinner.tsx
+var l = e({
+	position: "relative",
+	display: "inline-flex",
+	verticalAlign: "middle"
+}), u = e({
+	...a,
+	flexShrink: 0,
+	boxSizing: "border-box",
+	[n]: { animation: `${i} 1.6s ease-in-out infinite alternate` }
+}), d = {
+	sm: e({
+		inlineSize: o.space[4],
+		blockSize: o.space[4]
+	}),
+	md: e({
+		inlineSize: o.space[5],
+		blockSize: o.space[5]
+	}),
+	lg: e({
+		inlineSize: o.space[6],
+		blockSize: o.space[6]
+	})
+};
+function f({ ref: e, size: n = "md", label: i = "Loading", className: a, sx: o, ...f }) {
+	return /* @__PURE__ */ s(t, {
+		className: a,
+		styles: l,
+		sx: o,
+		children: (t) => /* @__PURE__ */ c("span", {
+			...f,
+			ref: e,
+			role: "status",
+			"data-ui": "spinner",
+			className: t,
+			children: [/* @__PURE__ */ s("span", {
+				"aria-hidden": "true",
+				"data-ui": "spinner-indicator",
+				css: [u, d[n]]
+			}), /* @__PURE__ */ s("span", {
+				css: r,
+				children: i
+			})]
+		})
+	});
+}
+f.displayName = "Spinner";
+//#endregion
+export { f as t };

package/dist/spinner.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Spinner } from "./spinner-CSFiP0Oi.js";
+export { t as Spinner } from "./spinner-C2YDoiMn.js";

package/dist/stack-DC3IbtWk.js

@@ -0,0 +1,27 @@
+'use client';
+import { t as e } from "./sx-Dx9JUKp5.js";
+import { t } from "./layout-style-Cbd1Vilw.js";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+//#region src/components/stack/stack.tsx
+function r({ ref: r, gap: i = "md", align: a, justify: o, wrap: s, className: c, sx: l, ...u }) {
+	return /* @__PURE__ */ n(e, {
+		className: c,
+		styles: t({
+			direction: "column",
+			gap: i,
+			align: a,
+			justify: o,
+			wrap: s
+		}),
+		sx: l,
+		children: (e) => /* @__PURE__ */ n("div", {
+			...u,
+			ref: r,
+			"data-ui": "stack",
+			className: e
+		})
+	});
+}
+r.displayName = "Stack";
+//#endregion
+export { r as t };

package/dist/stack.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Stack } from "./stack-mEAryjKz.js";
+export { t as Stack } from "./stack-DC3IbtWk.js";

package/dist/{switch-2hm2WnWt.js → switch-Dr-qjmT4.js}

@@ -1,9 +1,9 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t } from "./media-D_eA_I-e.js";
-import { t as n } from "./renderable-DzcIj1Lo.js";
-import { i as r, n as i, r as a, t as o } from "./choice-control-ByFogYcT.js";
-import { forwardRef as s, useId as c } from "react";
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-D_eA_I-e.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { i, n as a, r as o, t as s } from "./choice-control-5kJkLXgv.js";
+import { useId as c } from "react";
 import { vars as l } from "@jfrader/tokens/vars";
 import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
 //#region src/components/switch/switch.tsx
@@ -32,7 +32,7 @@ var f = {
 		transitionDuration: l.motion.duration.fast,
 		transitionTimingFunction: l.motion.easeStandard
 	},
-	[t]: {
+	[n]: {
 		transitionDuration: "0s",
 		"&::after": { transitionDuration: "0s" }
 	}
@@ -77,60 +77,66 @@ var f = {
 }), v = {
 	sm: e({ marginInlineStart: `calc(${f.sm} + ${l.space[2]})` }),
 	md: e({ marginInlineStart: `calc(${f.md} + ${l.space[2]})` })
-}, y = s(function({ label: e, description: t, size: s = "md", onChange: l, onCheckedChange: f, slotProps: y, className: b, dir: x, "aria-labelledby": S, "aria-describedby": C, ...w }, T) {
-	let E = c(), D = `${E}-label`, O = `${E}-description`, k = n(e), A = n(t), j = [S, k && D].filter(Boolean).join(" ") || void 0, M = [C, A && O].filter(Boolean).join(" ") || void 0, N = [b, y?.root?.className].filter(Boolean).join(" ") || void 0, P = (e) => {
-		l?.(e), f?.(e.currentTarget.checked);
+};
+function y({ ref: e, label: n, description: l, size: f = "md", onChange: y, onCheckedChange: b, slotProps: x, className: S, sx: C, dir: w, "aria-labelledby": T, "aria-describedby": E, ...D }) {
+	let O = c(), k = `${O}-label`, A = `${O}-description`, j = r(n), M = r(l), N = [T, j && k].filter(Boolean).join(" ") || void 0, P = [E, M && A].filter(Boolean).join(" ") || void 0, F = [S, x?.root?.className].filter(Boolean).join(" ") || void 0, I = (e) => {
+		y?.(e), b?.(e.currentTarget.checked);
 	};
-	return /* @__PURE__ */ d("label", {
-		"data-ui": "switch",
-		dir: x,
-		className: N,
-		css: [
+	return /* @__PURE__ */ u(t, {
+		className: F,
+		styles: [
+			o,
 			a,
-			i,
-			h[s],
-			y?.root?.css
+			h[f],
+			x?.root?.css
 		],
-		children: [/* @__PURE__ */ d("span", {
-			css: r,
-			children: [
-				/* @__PURE__ */ u("input", {
-					...w,
-					ref: T,
-					type: "checkbox",
-					role: "switch",
-					"aria-labelledby": j,
-					"aria-describedby": M,
-					onChange: P,
-					css: o
-				}),
-				/* @__PURE__ */ u("span", {
-					"aria-hidden": "true",
-					className: y?.control?.className,
-					css: [
-						p,
-						m[s],
-						y?.control?.css
-					]
-				}),
-				k && /* @__PURE__ */ u("span", {
-					id: D,
-					className: y?.label?.className,
-					css: [g[s], y?.label?.css],
-					children: e
-				})
-			]
-		}), A && /* @__PURE__ */ u("span", {
-			id: O,
-			className: y?.description?.className,
-			css: [
-				_,
-				v[s],
-				y?.description?.css
-			],
-			children: t
-		})]
+		sx: C,
+		children: (t) => /* @__PURE__ */ d("label", {
+			"data-ui": "switch",
+			dir: w,
+			className: t,
+			children: [/* @__PURE__ */ d("span", {
+				css: i,
+				children: [
+					/* @__PURE__ */ u("input", {
+						...D,
+						ref: e,
+						type: "checkbox",
+						role: "switch",
+						"aria-labelledby": N,
+						"aria-describedby": P,
+						onChange: I,
+						css: s
+					}),
+					/* @__PURE__ */ u("span", {
+						"aria-hidden": "true",
+						className: x?.control?.className,
+						css: [
+							p,
+							m[f],
+							x?.control?.css
+						]
+					}),
+					j && /* @__PURE__ */ u("span", {
+						id: k,
+						className: x?.label?.className,
+						css: [g[f], x?.label?.css],
+						children: n
+					})
+				]
+			}), M && /* @__PURE__ */ u("span", {
+				id: A,
+				className: x?.description?.className,
+				css: [
+					_,
+					v[f],
+					x?.description?.css
+				],
+				children: l
+			})]
+		})
 	});
-});
+}
+y.displayName = "Switch";
 //#endregion
 export { y as t };

package/dist/switch.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Switch } from "./switch-2hm2WnWt.js";
+export { t as Switch } from "./switch-Dr-qjmT4.js";

package/dist/sx-Dx9JUKp5.js

@@ -0,0 +1,23 @@
+'use client';
+import { ClassNames as e, ThemeProvider as t, css as n, keyframes as r, useTheme as i } from "@emotion/react";
+import { jsx as a } from "@emotion/react/jsx-runtime";
+//#region src/styling/sx.tsx
+var o = (e) => Array.isArray(e);
+function s(e, t) {
+	return typeof e == "function" ? s(e(t), t) : o(e) ? e.map((e) => s(e, t)) : e;
+}
+function c({ className: t, styles: n, children: r }) {
+	return /* @__PURE__ */ a(e, { children: ({ css: e, cx: i, theme: a }) => r(n === void 0 ? t : i(e(s(n, a)), t)) });
+}
+function l({ className: e, styles: t, sx: n, children: r }) {
+	return /* @__PURE__ */ a(c, {
+		styles: n,
+		children: (i) => /* @__PURE__ */ a(c, {
+			className: n === void 0 ? e : [e, i].filter(Boolean).join(" "),
+			styles: t,
+			children: r
+		})
+	});
+}
+//#endregion
+export { i as a, r as i, t as n, n as r, l as t };

package/dist/tabs-CK_g1RKa.js

@@ -0,0 +1,203 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n, t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i } from "./media-D_eA_I-e.js";
+import { n as a, r as o, t as s } from "./roving-focus-CYlo_Kf8.js";
+import { t as c } from "./use-controlled-state-CVXDa-qM.js";
+import { t as l } from "./part-id-D0zksy32.js";
+import { createContext as u, useContext as d, useEffect as f, useId as p, useImperativeHandle as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { vars as v } from "@jfrader/tokens/vars";
+import { jsx as y } from "@emotion/react/jsx-runtime";
+//#region src/components/tabs/tabs.tsx
+var b = u(null);
+function x(e) {
+	let t = d(b);
+	if (!t) throw Error(`Tabs.${e} must be rendered inside <Tabs>.`);
+	return t;
+}
+var S = {
+	itemSelector: "[role=\"tab\"]:not([disabled])",
+	ownerSelector: "[role=\"tablist\"]"
+}, C = e({ "&[data-orientation=\"vertical\"]": {
+	display: "flex",
+	alignItems: "flex-start",
+	gap: v.space[4]
+} }), w = {
+	horizontal: e({
+		display: "inline-flex",
+		gap: v.space[1],
+		borderBlockEnd: `1px solid ${v.color.border}`
+	}),
+	vertical: e({
+		display: "inline-flex",
+		flexDirection: "column",
+		alignItems: "stretch",
+		borderInlineEnd: `1px solid ${v.color.border}`
+	})
+}, T = e({
+	appearance: "none",
+	border: 0,
+	background: "transparent",
+	cursor: "pointer",
+	paddingBlock: v.space[2],
+	paddingInline: v.space[3],
+	font: "inherit",
+	fontSize: v.textSize.sm,
+	fontWeight: v.fontWeight.medium,
+	color: v.color.textMuted,
+	transitionProperty: "color, border-color",
+	transitionDuration: v.motion.duration.fast,
+	transitionTimingFunction: v.motion.easeStandard,
+	"&:hover:not(:disabled):not([aria-selected=\"true\"])": { color: v.color.text },
+	"&[aria-selected=\"true\"]": {
+		color: v.color.text,
+		borderColor: v.color.accent
+	},
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&:focus-visible": { ...r },
+	[i]: { transitionDuration: "0s" }
+}), E = {
+	horizontal: e({
+		borderBlockEnd: "2px solid transparent",
+		marginBlockEnd: "-1px"
+	}),
+	vertical: e({
+		borderInlineEnd: "2px solid transparent",
+		marginInlineEnd: "-1px",
+		textAlign: "start"
+	})
+}, D = e({
+	color: v.color.text,
+	outline: "none",
+	"&:focus-visible": { ...n },
+	"&[hidden]": { display: "none" }
+}), O = e({ paddingBlockStart: v.space[3] });
+function k({ ref: e, value: n, defaultValue: r, onValueChange: i, orientation: a = "horizontal", activation: o = "auto", className: s, sx: l, ...u }) {
+	let d = p(), [f, m] = c(n, r, i), [g, v] = _(null), x = h(() => ({
+		value: f,
+		setValue: m,
+		focused: g,
+		setFocused: v,
+		orientation: a,
+		activation: o,
+		baseId: d
+	}), [
+		f,
+		m,
+		g,
+		a,
+		o,
+		d
+	]);
+	return /* @__PURE__ */ y(b.Provider, {
+		value: x,
+		children: /* @__PURE__ */ y(t, {
+			className: s,
+			styles: C,
+			sx: l,
+			children: (t) => /* @__PURE__ */ y("div", {
+				...u,
+				ref: e,
+				"data-ui": "tabs-root",
+				"data-orientation": a,
+				className: t
+			})
+		})
+	});
+}
+k.displayName = "Tabs";
+function A({ ref: e, onKeyDown: n, className: r, sx: i, ...c }) {
+	let { orientation: l, value: u, focused: d, setFocused: p } = x("List"), h = g(null);
+	m(e, () => h.current, []), f(() => {
+		let e = h.current;
+		if (!e) return;
+		let t = o(e, S);
+		t.length !== 0 && (t.some((e) => e.tabIndex === 0) || p((s(t, u) ?? s(t, d) ?? t[0])?.dataset.value ?? null));
+	});
+	let _ = (e) => {
+		n?.(e);
+		let t = h.current;
+		!e.defaultPrevented && t && a(e, t, l, S);
+	};
+	return /* @__PURE__ */ y(t, {
+		className: r,
+		styles: w[l],
+		sx: i,
+		children: (e) => /* @__PURE__ */ y("div", {
+			...c,
+			ref: h,
+			role: "tablist",
+			"aria-orientation": l,
+			"data-ui": "tabs-list",
+			"data-orientation": l,
+			"data-roving": d ?? "",
+			"data-selected": u ?? "",
+			onKeyDown: _,
+			className: e
+		})
+	});
+}
+A.displayName = "Tabs.List";
+function j({ ref: e, value: n, disabled: r, onClick: i, onFocus: a, className: o, sx: s, ...c }) {
+	let { value: u, setValue: d, focused: f, setFocused: p, activation: m, baseId: h, orientation: _ } = x("Tab"), v = u === n, b = !r && (f === null ? v : f === n), S = g(!1), C = (e) => {
+		if (i?.(e), e.defaultPrevented) return;
+		let t = S.current;
+		S.current = !1, !(m === "auto" && t) && d(n);
+	}, w = (e) => {
+		a?.(e), !e.defaultPrevented && (S.current = !0, p(n), m === "auto" && d(n));
+	};
+	return /* @__PURE__ */ y(t, {
+		className: o,
+		styles: [T, E[_]],
+		sx: s,
+		children: (t) => /* @__PURE__ */ y("button", {
+			...c,
+			ref: e,
+			type: "button",
+			role: "tab",
+			id: l(h, "tab", n),
+			"data-ui": "tabs-tab",
+			"data-value": n,
+			"data-state": v ? "active" : "inactive",
+			"aria-selected": v,
+			"aria-controls": l(h, "panel", n),
+			tabIndex: b ? 0 : -1,
+			disabled: r,
+			onClick: C,
+			onFocus: w,
+			className: t
+		})
+	});
+}
+j.displayName = "Tabs.Tab";
+function M({ ref: e, value: n, tabIndex: r = 0, "aria-labelledby": i, className: a, sx: o, ...s }) {
+	let { value: c, baseId: u, orientation: d } = x("Panel"), f = c === n, p = [i, l(u, "tab", n)].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ y(t, {
+		className: a,
+		styles: [D, d === "horizontal" && O],
+		sx: o,
+		children: (t) => /* @__PURE__ */ y("div", {
+			...s,
+			ref: e,
+			role: "tabpanel",
+			id: l(u, "panel", n),
+			"aria-labelledby": p,
+			tabIndex: r,
+			hidden: !f,
+			"data-ui": "tabs-panel",
+			"data-state": f ? "active" : "inactive",
+			className: t
+		})
+	});
+}
+M.displayName = "Tabs.Panel";
+var N = Object.assign(k, {
+	List: A,
+	Tab: j,
+	Panel: M
+});
+//#endregion
+export { N as t };

package/dist/tabs.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Tabs } from "./tabs-GBppQabg.js";
+export { t as Tabs } from "./tabs-CK_g1RKa.js";

package/dist/text-field-D60ok14S.js

@@ -0,0 +1,76 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-D2ToMeRa.js";
+import { vars as s } from "@jfrader/tokens/vars";
+import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
+//#region src/components/text-field/text-field.tsx
+var u = {
+	sm: e({
+		blockSize: "32px",
+		paddingInline: s.space[3],
+		fontSize: s.textSize.sm
+	}),
+	md: e({
+		blockSize: "40px",
+		paddingInline: s.space[4],
+		fontSize: s.textSize.sm
+	}),
+	lg: e({
+		blockSize: "48px",
+		paddingInline: s.space[4],
+		fontSize: s.textSize.md
+	})
+};
+function d({ ref: e, label: s, description: d, error: f, size: p = "md", onChange: m, onValueChange: h, slotProps: g, className: _, sx: v, required: y, id: b, "aria-describedby": x, "aria-invalid": S, ...C }) {
+	let w = t({
+		id: b,
+		description: d,
+		error: f,
+		"aria-describedby": x,
+		"aria-invalid": S
+	}), T = (e) => {
+		m?.(e), h?.(e.currentTarget.value);
+	};
+	return /* @__PURE__ */ l(n, {
+		"data-ui": "text-field",
+		className: _,
+		sx: v,
+		part: g?.root,
+		children: [
+			/* @__PURE__ */ c(a, {
+				htmlFor: w.id,
+				required: y,
+				part: g?.label,
+				children: s
+			}),
+			/* @__PURE__ */ c("input", {
+				...C,
+				ref: e,
+				id: w.id,
+				required: y,
+				"aria-describedby": w.describedBy,
+				"aria-invalid": w.ariaInvalid,
+				onChange: T,
+				className: g?.control?.className,
+				css: [
+					i,
+					u[p],
+					g?.control?.css
+				]
+			}),
+			/* @__PURE__ */ c(o, {
+				id: w.descriptionId,
+				part: g?.description,
+				children: d
+			}),
+			/* @__PURE__ */ c(r, {
+				id: w.errorId,
+				part: g?.error,
+				children: f
+			})
+		]
+	});
+}
+d.displayName = "TextField";
+//#endregion
+export { d as t };

package/dist/text-field.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as TextField } from "./text-field-DDPqQu29.js";
+export { t as TextField } from "./text-field-D60ok14S.js";