@jfrader/ui 0.5.0 → 0.5.1

package/dist/{swipe-actions-DiZC57-3.js → swipe-actions-CBuJREU1.js}

@@ -4,7 +4,7 @@ import { t as n } from "./focus-ring-BK5W5_NY.js";
 import { n as r } from "./media-8yrN85VT.js";
 import { t as i } from "./use-controlled-state-DpeVQZNR.js";
 import { t as a } from "./renderable-DzcIj1Lo.js";
-import { t as o } from "./menu-xwOOUtWP.js";
+import { t as o } from "./menu-DDKgmK2F.js";
 import { Children as s, createContext as c, isValidElement as l, useContext as u, useEffect as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
 import { vars as g } from "@jfrader/tokens/vars";
 import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
@@ -297,7 +297,9 @@ function O({ id: e, label: n, actionsLabel: r, leading: i = pe, trailing: s = pe
 			},
 			onPointerDown: (e) => {
 				if (T?.(e), e.defaultPrevented || l || !G || z.current || !e.isPrimary || e.button !== 0 || e.target.closest(me)) return;
-				let t = e.currentTarget, n = t.ownerDocument, r = (e) => {
+				let t = e.currentTarget, n = t.ownerDocument;
+				e.pointerType === "mouse" && e.preventDefault();
+				let r = (e) => {
 					t.contains(e.target) || Q(e.pointerId, !0);
 				};
 				n.addEventListener("pointerup", r, !0), n.addEventListener("pointercancel", r, !0), z.current = {

package/dist/swipe-actions.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as SwipeActions } from "./swipe-actions-DiZC57-3.js";
+export { t as SwipeActions } from "./swipe-actions-CBuJREU1.js";

package/dist/switch-C1WrKrf-.js

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

package/dist/switch.js

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

package/dist/tabs-XluwRjgg.js

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

package/dist/tabs.js

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

package/dist/{text-field-C8TWG-tY.js → text-field-hU72iSVS.js}

@@ -22,36 +22,38 @@ var u = {
 		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 = n({
+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, dir: x, "aria-describedby": S, "aria-invalid": C, ...w }) {
+	let T = n({
 		id: b,
 		description: d,
 		error: f,
-		"aria-describedby": x,
-		"aria-invalid": S
-	}), T = (e) => {
+		"aria-describedby": S,
+		"aria-invalid": C
+	}), E = (e) => {
 		m?.(e), h?.(e.currentTarget.value);
 	};
 	return /* @__PURE__ */ l(r, {
 		"data-ui": "text-field",
+		dir: x,
 		className: _,
 		sx: v,
 		part: g?.root,
 		children: [
 			/* @__PURE__ */ c(a, {
-				htmlFor: w.id,
+				htmlFor: T.id,
 				required: y,
 				part: g?.label,
 				children: s
 			}),
 			/* @__PURE__ */ c("input", {
-				...C,
+				...w,
 				ref: e,
-				id: w.id,
+				id: T.id,
+				dir: x,
 				required: y,
-				"aria-describedby": w.describedBy,
-				"aria-invalid": w.ariaInvalid,
-				onChange: T,
+				"aria-describedby": T.describedBy,
+				"aria-invalid": T.ariaInvalid,
+				onChange: E,
 				className: g?.control?.className,
 				css: [
 					t,
@@ -60,12 +62,12 @@ function d({ ref: e, label: s, description: d, error: f, size: p = "md", onChang
 				]
 			}),
 			/* @__PURE__ */ c(o, {
-				id: w.descriptionId,
+				id: T.descriptionId,
 				part: g?.description,
 				children: d
 			}),
 			/* @__PURE__ */ c(i, {
-				id: w.errorId,
+				id: T.errorId,
 				part: g?.error,
 				children: f
 			})

package/dist/text-field.js

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

package/dist/{textarea-BrW0XcG_.js → textarea-3k4Y0QQ3.js}

@@ -28,37 +28,39 @@ var u = e({
 	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, sx: w, required: T, id: E, "aria-describedby": D, "aria-invalid": O, ...k }) {
-	let A = n({
-		id: E,
+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, sx: w, dir: T, required: E, id: D, "aria-describedby": O, "aria-invalid": k, ...A }) {
+	let j = n({
+		id: D,
 		description: m,
 		error: h,
-		"aria-describedby": D,
-		"aria-invalid": O
-	}), j = (e) => {
+		"aria-describedby": O,
+		"aria-invalid": k
+	}), M = (e) => {
 		b?.(e), x?.(e.currentTarget.value);
 	};
 	return /* @__PURE__ */ l(r, {
 		"data-ui": "textarea",
+		dir: T,
 		className: C,
 		sx: w,
 		part: S?.root,
 		children: [
 			/* @__PURE__ */ c(a, {
-				htmlFor: A.id,
-				required: T,
+				htmlFor: j.id,
+				required: E,
 				part: S?.label,
 				children: s
 			}),
 			/* @__PURE__ */ c("textarea", {
-				...k,
+				...A,
 				ref: e,
-				id: A.id,
+				id: j.id,
 				rows: y,
-				required: T,
-				"aria-describedby": A.describedBy,
-				"aria-invalid": A.ariaInvalid,
-				onChange: j,
+				dir: T,
+				required: E,
+				"aria-describedby": j.describedBy,
+				"aria-invalid": j.ariaInvalid,
+				onChange: M,
 				className: S?.control?.className,
 				css: [
 					t,
@@ -70,12 +72,12 @@ function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize:
 				]
 			}),
 			/* @__PURE__ */ c(o, {
-				id: A.descriptionId,
+				id: j.descriptionId,
 				part: S?.description,
 				children: m
 			}),
 			/* @__PURE__ */ c(i, {
-				id: A.errorId,
+				id: j.errorId,
 				part: S?.error,
 				children: h
 			})

package/dist/textarea.js

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

package/dist/theme-root.js

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