@jfrader/ui 0.1.1 → 0.2.0

package/dist/spinner-CFq5HPoo.js

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

package/dist/spinner.js

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

package/dist/stack-D_g6NJzo.js

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

package/dist/stack.js

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

package/dist/{surface-Bo_aSQOb.js → surface-DZ4d-2aL.js}

@@ -1,3 +1,4 @@
+'use client';
 import { vars as e } from "@jfrader/tokens/vars";
 //#region src/styling/surface.ts
 var t = {

package/dist/switch-B5TTU-oJ.js

@@ -0,0 +1,138 @@
+'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 { useId as s } from "react";
+import { vars as c } from "@jfrader/tokens/vars";
+import { jsx as l, jsxs as u } from "@emotion/react/jsx-runtime";
+//#region src/components/switch/switch.tsx
+var d = {
+	sm: "36px",
+	md: "44px"
+}, f = e({
+	position: "relative",
+	display: "inline-block",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	border: `1px solid ${c.color.borderControl}`,
+	borderRadius: c.radius.full,
+	backgroundColor: c.color.surfaceHover,
+	transitionProperty: "background-color, border-color",
+	transitionDuration: c.motion.duration.fast,
+	transitionTimingFunction: c.motion.easeStandard,
+	"&::after": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: "2px",
+		insetInlineStart: "2px",
+		borderRadius: c.radius.full,
+		backgroundColor: c.color.text,
+		transitionProperty: "transform, background-color",
+		transitionDuration: c.motion.duration.fast,
+		transitionTimingFunction: c.motion.easeStandard
+	},
+	[t]: {
+		transitionDuration: "0s",
+		"&::after": { transitionDuration: "0s" }
+	}
+}), p = {
+	sm: e({
+		inlineSize: d.sm,
+		blockSize: "20px",
+		"&::after": {
+			inlineSize: "14px",
+			blockSize: "14px"
+		}
+	}),
+	md: e({
+		inlineSize: d.md,
+		blockSize: "24px",
+		"&::after": {
+			inlineSize: "18px",
+			blockSize: "18px"
+		}
+	})
+}, m = {
+	sm: e({
+		"input:checked + span::after": {
+			transform: "translateX(16px)",
+			backgroundColor: c.color.accentContrast
+		},
+		"&:dir(rtl) input:checked + span::after": { transform: "translateX(-16px)" }
+	}),
+	md: e({
+		"input:checked + span::after": {
+			transform: "translateX(20px)",
+			backgroundColor: c.color.accentContrast
+		},
+		"&:dir(rtl) input:checked + span::after": { transform: "translateX(-20px)" }
+	})
+}, h = {
+	sm: e({ fontSize: c.textSize.sm }),
+	md: e({ fontSize: c.textSize.md })
+}, g = e({
+	fontSize: c.textSize.sm,
+	color: c.color.textMuted
+}), _ = {
+	sm: e({ marginInlineStart: `calc(${d.sm} + ${c.space[2]})` }),
+	md: e({ marginInlineStart: `calc(${d.md} + ${c.space[2]})` })
+};
+function v({ ref: e, label: t, description: c, size: d = "md", onChange: v, onCheckedChange: y, slotProps: b, className: x, dir: S, "aria-labelledby": C, "aria-describedby": w, ...T }) {
+	let E = s(), D = `${E}-label`, O = `${E}-description`, k = n(t), A = n(c), j = [C, k && D].filter(Boolean).join(" ") || void 0, M = [w, A && O].filter(Boolean).join(" ") || void 0, N = [x, b?.root?.className].filter(Boolean).join(" ") || void 0, P = (e) => {
+		v?.(e), y?.(e.currentTarget.checked);
+	};
+	return /* @__PURE__ */ u("label", {
+		"data-ui": "switch",
+		dir: S,
+		className: N,
+		css: [
+			a,
+			i,
+			m[d],
+			b?.root?.css
+		],
+		children: [/* @__PURE__ */ u("span", {
+			css: r,
+			children: [
+				/* @__PURE__ */ l("input", {
+					...T,
+					ref: e,
+					type: "checkbox",
+					role: "switch",
+					"aria-labelledby": j,
+					"aria-describedby": M,
+					onChange: P,
+					css: o
+				}),
+				/* @__PURE__ */ l("span", {
+					"aria-hidden": "true",
+					className: b?.control?.className,
+					css: [
+						f,
+						p[d],
+						b?.control?.css
+					]
+				}),
+				k && /* @__PURE__ */ l("span", {
+					id: D,
+					className: b?.label?.className,
+					css: [h[d], b?.label?.css],
+					children: t
+				})
+			]
+		}), A && /* @__PURE__ */ l("span", {
+			id: O,
+			className: b?.description?.className,
+			css: [
+				g,
+				_[d],
+				b?.description?.css
+			],
+			children: c
+		})]
+	});
+}
+v.displayName = "Switch";
+//#endregion
+export { v as t };

package/dist/switch.js

@@ -1 +1,2 @@
-export { t as Switch } from "./switch-E375Bz4X.js";
+'use client';
+export { t as Switch } from "./switch-B5TTU-oJ.js";

package/dist/tabs-C26PWl2c.js

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

package/dist/tabs.js

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

package/dist/text-field-8PQAqRpM.js

@@ -0,0 +1,75 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-BzGw1Ch9.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: _, required: v, id: y, "aria-describedby": b, "aria-invalid": x, ...S }) {
+	let C = t({
+		id: y,
+		description: d,
+		error: f,
+		"aria-describedby": b,
+		"aria-invalid": x
+	}), w = (e) => {
+		m?.(e), h?.(e.currentTarget.value);
+	};
+	return /* @__PURE__ */ l(n, {
+		"data-ui": "text-field",
+		className: _,
+		part: g?.root,
+		children: [
+			/* @__PURE__ */ c(a, {
+				htmlFor: C.id,
+				required: v,
+				part: g?.label,
+				children: s
+			}),
+			/* @__PURE__ */ c("input", {
+				...S,
+				ref: e,
+				id: C.id,
+				required: v,
+				"aria-describedby": C.describedBy,
+				"aria-invalid": C.ariaInvalid,
+				onChange: w,
+				className: g?.control?.className,
+				css: [
+					i,
+					u[p],
+					g?.control?.css
+				]
+			}),
+			/* @__PURE__ */ c(o, {
+				id: C.descriptionId,
+				part: g?.description,
+				children: d
+			}),
+			/* @__PURE__ */ c(r, {
+				id: C.errorId,
+				part: g?.error,
+				children: f
+			})
+		]
+	});
+}
+d.displayName = "TextField";
+//#endregion
+export { d as t };

package/dist/text-field.js

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

package/dist/textarea-CcGWuntL.js

@@ -0,0 +1,85 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-BzGw1Ch9.js";
+import { vars as s } from "@jfrader/tokens/vars";
+import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
+//#region src/components/textarea/textarea.tsx
+var u = e({
+	paddingBlock: s.space[2],
+	lineHeight: s.lineHeight.base
+}), d = {
+	sm: e({
+		minBlockSize: "64px",
+		paddingInline: s.space[3],
+		fontSize: s.textSize.sm
+	}),
+	md: e({
+		minBlockSize: "80px",
+		paddingInline: s.space[4],
+		fontSize: s.textSize.sm
+	}),
+	lg: e({
+		minBlockSize: "96px",
+		paddingInline: s.space[4],
+		fontSize: s.textSize.md
+	})
+}, f = {
+	none: e({ resize: "none" }),
+	vertical: e({ resize: "vertical" })
+}, p = e({ fieldSizing: "content" });
+function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize: _ = "vertical", autoResize: v = !1, rows: y = 3, onChange: b, onValueChange: x, slotProps: S, className: C, required: w, id: T, "aria-describedby": E, "aria-invalid": D, ...O }) {
+	let k = t({
+		id: T,
+		description: m,
+		error: h,
+		"aria-describedby": E,
+		"aria-invalid": D
+	}), A = (e) => {
+		b?.(e), x?.(e.currentTarget.value);
+	};
+	return /* @__PURE__ */ l(n, {
+		"data-ui": "textarea",
+		className: C,
+		part: S?.root,
+		children: [
+			/* @__PURE__ */ c(a, {
+				htmlFor: k.id,
+				required: w,
+				part: S?.label,
+				children: s
+			}),
+			/* @__PURE__ */ c("textarea", {
+				...O,
+				ref: e,
+				id: k.id,
+				rows: y,
+				required: w,
+				"aria-describedby": k.describedBy,
+				"aria-invalid": k.ariaInvalid,
+				onChange: A,
+				className: S?.control?.className,
+				css: [
+					i,
+					u,
+					d[g],
+					f[_],
+					v && p,
+					S?.control?.css
+				]
+			}),
+			/* @__PURE__ */ c(o, {
+				id: k.descriptionId,
+				part: S?.description,
+				children: m
+			}),
+			/* @__PURE__ */ c(r, {
+				id: k.errorId,
+				part: S?.error,
+				children: h
+			})
+		]
+	});
+}
+m.displayName = "Textarea";
+//#endregion
+export { m as t };

package/dist/textarea.js

@@ -1 +1,2 @@
-export { t as Textarea } from "./textarea-CUG26CH2.js";
+'use client';
+export { t as Textarea } from "./textarea-CcGWuntL.js";

package/dist/theme-root-BRLIA4eb.js

@@ -0,0 +1,22 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { vars as t } from "@jfrader/tokens/vars";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+//#region src/components/theme-root/theme-root.tsx
+var r = e({
+	color: t.color.text,
+	colorScheme: "dark",
+	"&[data-theme=\"light\"]": { colorScheme: "light" }
+});
+function i({ ref: e, theme: t, ...i }) {
+	return /* @__PURE__ */ n("div", {
+		"data-ui": "theme-root",
+		"data-theme": t ?? "dark",
+		...i,
+		ref: e,
+		css: r
+	});
+}
+i.displayName = "ThemeRoot";
+//#endregion
+export { i as t };

package/dist/theme-root.js

@@ -1 +1,2 @@
-export { t as ThemeRoot } from "./theme-root-CrdzwfSo.js";
+'use client';
+export { t as ThemeRoot } from "./theme-root-BRLIA4eb.js";