@jfrader/ui 0.0.0-stage → 0.1.1

package/dist/switch-E375Bz4X.js

@@ -0,0 +1,135 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { n as t } from "./media-8K3xDAxM.js";
+import { t as n } from "./renderable-DwPvt1I8.js";
+import { i as r, n as i, r as a, t as o } from "./choice-control-DCyQ_hVw.js";
+import { forwardRef as s, 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
+var f = {
+	sm: "36px",
+	md: "44px"
+}, p = e({
+	position: "relative",
+	display: "inline-block",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	border: `1px solid ${l.color.borderControl}`,
+	borderRadius: l.radius.full,
+	backgroundColor: l.color.surfaceHover,
+	transitionProperty: "background-color, border-color",
+	transitionDuration: l.motion.duration.fast,
+	transitionTimingFunction: l.motion.easeStandard,
+	"&::after": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: "2px",
+		insetInlineStart: "2px",
+		borderRadius: l.radius.full,
+		backgroundColor: l.color.text,
+		transitionProperty: "transform, background-color",
+		transitionDuration: l.motion.duration.fast,
+		transitionTimingFunction: l.motion.easeStandard
+	},
+	[t]: {
+		transitionDuration: "0s",
+		"&::after": { transitionDuration: "0s" }
+	}
+}), m = {
+	sm: e({
+		inlineSize: f.sm,
+		blockSize: "20px",
+		"&::after": {
+			inlineSize: "14px",
+			blockSize: "14px"
+		}
+	}),
+	md: e({
+		inlineSize: f.md,
+		blockSize: "24px",
+		"&::after": {
+			inlineSize: "18px",
+			blockSize: "18px"
+		}
+	})
+}, h = {
+	sm: e({
+		"input:checked + span::after": {
+			transform: "translateX(16px)",
+			backgroundColor: l.color.accentContrast
+		},
+		"&:dir(rtl) input:checked + span::after": { transform: "translateX(-16px)" }
+	}),
+	md: e({
+		"input:checked + span::after": {
+			transform: "translateX(20px)",
+			backgroundColor: l.color.accentContrast
+		},
+		"&:dir(rtl) input:checked + span::after": { transform: "translateX(-20px)" }
+	})
+}, g = {
+	sm: e({ fontSize: l.textSize.sm }),
+	md: e({ fontSize: l.textSize.md })
+}, _ = e({
+	fontSize: l.textSize.sm,
+	color: l.color.textMuted
+}), 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);
+	};
+	return /* @__PURE__ */ d("label", {
+		"data-ui": "switch",
+		dir: x,
+		className: N,
+		css: [
+			a,
+			i,
+			h[s],
+			y?.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
+		})]
+	});
+});
+//#endregion
+export { y as t };

package/dist/switch.js

@@ -0,0 +1 @@
+export { t as Switch } from "./switch-E375Bz4X.js";

package/dist/tabs-CBwRiuul.js

@@ -0,0 +1,173 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { n as t, t as n } from "./focus-ring-qOS3rPlM.js";
+import { n as r } from "./media-8K3xDAxM.js";
+import { n as i, r as a, t as o } from "./roving-focus-DeEZ55-T.js";
+import { t as s } from "./use-controlled-state-DQXkiTQI.js";
+import { t as c } from "./part-id-Bg1LSlk7.js";
+import { createContext as l, forwardRef 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 = l(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": { ...n },
+	[r]: { 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": { ...t },
+	"&[hidden]": { display: "none" }
+}), O = e({ paddingBlockStart: v.space[3] }), k = u(function({ value: e, defaultValue: t, onValueChange: n, orientation: r = "horizontal", activation: i = "auto", ...a }, o) {
+	let c = p(), [l, u] = s(e, t, n), [d, f] = _(null), m = h(() => ({
+		value: l,
+		setValue: u,
+		focused: d,
+		setFocused: f,
+		orientation: r,
+		activation: i,
+		baseId: c
+	}), [
+		l,
+		u,
+		d,
+		r,
+		i,
+		c
+	]);
+	return /* @__PURE__ */ y(b.Provider, {
+		value: m,
+		children: /* @__PURE__ */ y("div", {
+			...a,
+			ref: o,
+			"data-ui": "tabs-root",
+			"data-orientation": r,
+			css: C
+		})
+	});
+}), A = u(function({ onKeyDown: e, ...t }, n) {
+	let { orientation: r, value: s, focused: c, setFocused: l } = x("List"), u = g(null);
+	m(n, () => u.current, []), f(() => {
+		let e = u.current;
+		if (!e) return;
+		let t = a(e, S);
+		t.length !== 0 && (t.some((e) => e.tabIndex === 0) || l((o(t, s) ?? o(t, c) ?? t[0])?.dataset.value ?? null));
+	});
+	let d = (t) => {
+		e?.(t);
+		let n = u.current;
+		!t.defaultPrevented && n && i(t, n, r, S);
+	};
+	return /* @__PURE__ */ y("div", {
+		...t,
+		ref: u,
+		role: "tablist",
+		"aria-orientation": r,
+		"data-ui": "tabs-list",
+		"data-orientation": r,
+		"data-roving": c ?? "",
+		"data-selected": s ?? "",
+		onKeyDown: d,
+		css: w[r]
+	});
+}), j = u(function({ value: e, disabled: t, onClick: n, onFocus: r, ...i }, a) {
+	let { value: o, setValue: s, focused: l, setFocused: u, activation: d, baseId: f, orientation: p } = x("Tab"), m = o === e, h = !t && (l === null ? m : l === e), _ = g(!1), v = (t) => {
+		if (n?.(t), t.defaultPrevented) return;
+		let r = _.current;
+		_.current = !1, !(d === "auto" && r) && s(e);
+	}, b = (t) => {
+		r?.(t), !t.defaultPrevented && (_.current = !0, u(e), d === "auto" && s(e));
+	};
+	return /* @__PURE__ */ y("button", {
+		...i,
+		ref: a,
+		type: "button",
+		role: "tab",
+		id: c(f, "tab", e),
+		"data-ui": "tabs-tab",
+		"data-value": e,
+		"data-state": m ? "active" : "inactive",
+		"aria-selected": m,
+		"aria-controls": c(f, "panel", e),
+		tabIndex: h ? 0 : -1,
+		disabled: t,
+		onClick: v,
+		onFocus: b,
+		css: [T, E[p]]
+	});
+}), M = u(function({ value: e, tabIndex: t = 0, "aria-labelledby": n, ...r }, i) {
+	let { value: a, baseId: o, orientation: s } = x("Panel"), l = a === e, u = [n, c(o, "tab", e)].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ y("div", {
+		...r,
+		ref: i,
+		role: "tabpanel",
+		id: c(o, "panel", e),
+		"aria-labelledby": u,
+		tabIndex: t,
+		hidden: !l,
+		"data-ui": "tabs-panel",
+		"data-state": l ? "active" : "inactive",
+		css: [D, s === "horizontal" && O]
+	});
+}), N = Object.assign(k, {
+	List: A,
+	Tab: j,
+	Panel: M
+});
+//#endregion
+export { N as t };

package/dist/tabs.js

@@ -0,0 +1 @@
+export { t as Tabs } from "./tabs-CBwRiuul.js";

package/dist/text-field-BlP8qGn_.js

@@ -0,0 +1,73 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-DKkB268x.js";
+import { forwardRef 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/text-field/text-field.tsx
+var d = {
+	sm: e({
+		blockSize: "32px",
+		paddingInline: c.space[3],
+		fontSize: c.textSize.sm
+	}),
+	md: e({
+		blockSize: "40px",
+		paddingInline: c.space[4],
+		fontSize: c.textSize.sm
+	}),
+	lg: e({
+		blockSize: "48px",
+		paddingInline: c.space[4],
+		fontSize: c.textSize.md
+	})
+}, f = s(function({ label: e, description: s, error: c, size: f = "md", onChange: p, onValueChange: m, slotProps: h, className: g, required: _, id: v, "aria-describedby": y, "aria-invalid": b, ...x }, S) {
+	let C = t({
+		id: v,
+		description: s,
+		error: c,
+		"aria-describedby": y,
+		"aria-invalid": b
+	}), w = (e) => {
+		p?.(e), m?.(e.currentTarget.value);
+	};
+	return /* @__PURE__ */ u(n, {
+		"data-ui": "text-field",
+		className: g,
+		part: h?.root,
+		children: [
+			/* @__PURE__ */ l(a, {
+				htmlFor: C.id,
+				required: _,
+				part: h?.label,
+				children: e
+			}),
+			/* @__PURE__ */ l("input", {
+				...x,
+				ref: S,
+				id: C.id,
+				required: _,
+				"aria-describedby": C.describedBy,
+				"aria-invalid": C.ariaInvalid,
+				onChange: w,
+				className: h?.control?.className,
+				css: [
+					i,
+					d[f],
+					h?.control?.css
+				]
+			}),
+			/* @__PURE__ */ l(o, {
+				id: C.descriptionId,
+				part: h?.description,
+				children: s
+			}),
+			/* @__PURE__ */ l(r, {
+				id: C.errorId,
+				part: h?.error,
+				children: c
+			})
+		]
+	});
+});
+//#endregion
+export { f as t };

package/dist/text-field.js

@@ -0,0 +1 @@
+export { t as TextField } from "./text-field-BlP8qGn_.js";

package/dist/textarea-CUG26CH2.js

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

package/dist/textarea.js

@@ -0,0 +1 @@
+export { t as Textarea } from "./textarea-CUG26CH2.js";

package/dist/theme-root-CrdzwfSo.js

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

package/dist/theme-root.js

@@ -0,0 +1 @@
+export { t as ThemeRoot } from "./theme-root-CrdzwfSo.js";