@jfrader/ui 0.4.0 → 0.5.1

package/dist/swipe-actions-CBuJREU1.js

@@ -0,0 +1,420 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+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-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";
+import { useMergeRefs as ee } from "@floating-ui/react";
+import { AnimatePresence as te, MotionConfig as ne, animate as b, motion as x, useIsPresent as S, useMotionValue as C, useReducedMotion as re } from "motion/react";
+import { base as w } from "@jfrader/tokens";
+//#region src/components/swipe-actions/swipe-actions.tsx
+var ie = 8, ae = 48, oe = .56, se = 900, ce = .1, le = .2, ue = {
+	type: "spring",
+	stiffness: 420,
+	damping: 40,
+	mass: 1
+}, de = Number.parseFloat(w.motion.duration.fast) / 1e3, fe = Number.parseFloat(w.motion.duration.slow) / 1e3, pe = [], me = "button,a,input,select,textarea,[contenteditable]:not([contenteditable=\"false\"]),[role=\"button\"]", T = e({
+	label: "swipe-actions",
+	listStyle: "none",
+	padding: 0,
+	margin: 0,
+	display: "grid",
+	gap: g.space[2],
+	fontFamily: g.font.sans,
+	color: g.color.text,
+	"&:focus": n
+}), he = e({
+	label: "swipe-actions-row",
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr)",
+	position: "relative",
+	overflow: "hidden",
+	minInlineSize: 0,
+	border: `1px solid ${g.color.borderControl}`,
+	borderRadius: g.radius.md
+}), ge = e({
+	gridArea: "1 / 1",
+	position: "relative",
+	display: "flex",
+	alignItems: "center",
+	gap: g.space[2],
+	padding: g.space[4],
+	minBlockSize: `calc(${g.space[8]} * 2)`,
+	boxSizing: "border-box",
+	background: g.color.surface,
+	touchAction: "pan-y"
+}), _e = e({
+	flex: "1 1 0",
+	minInlineSize: 0,
+	overflowWrap: "anywhere"
+}), ve = e({
+	position: "relative",
+	gridArea: "1 / 1",
+	display: "flex",
+	maxInlineSize: "100%",
+	"&[data-side=\"leading\"]": { justifySelf: "start" },
+	"&[data-side=\"trailing\"]": { justifySelf: "end" }
+}), ye = e({
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center",
+	alignItems: "center",
+	gap: g.space[1],
+	inlineSize: `calc(${g.space[10]} * 2)`,
+	minInlineSize: g.space[8],
+	minBlockSize: g.space[12],
+	padding: g.space[2],
+	boxSizing: "border-box",
+	border: `1px solid ${g.color.borderControl}`,
+	font: "inherit",
+	fontSize: g.textSize.sm,
+	overflowWrap: "anywhere",
+	cursor: "pointer",
+	"&:disabled": { cursor: "not-allowed" },
+	[r]: { borderColor: "ButtonText" }
+}), be = {
+	neutral: e({
+		background: g.color.surfaceHover,
+		color: g.color.text
+	}),
+	accent: e({
+		background: g.color.accent,
+		color: g.color.accentContrast
+	}),
+	danger: e({
+		background: g.color.danger,
+		color: g.color.dangerContrast
+	})
+}, xe = e({
+	display: "inline-flex",
+	inlineSize: "1em",
+	blockSize: "1em"
+}), Se = e({
+	minInlineSize: g.space[8],
+	minBlockSize: g.space[8],
+	flexShrink: 0
+});
+function Ce({ nativeProps: e, ...t }) {
+	return /* @__PURE__ */ v("li", {
+		...e,
+		...t,
+		style: {
+			...e.style,
+			...t.style
+		}
+	});
+}
+var we = x.create(Ce), Te = c(null);
+function E({ ref: e, className: n, sx: r, value: a, defaultValue: o = null, onValueChange: c, children: u, onKeyDown: f, ...h }) {
+	let [g = null, _] = i(a, o, c), y = m(null), b = m(/* @__PURE__ */ new Map()).current, x = ee([y, e]), S = s.toArray(u).flatMap((e) => l(e) ? [e.props.id] : []), C = p(() => ({
+		value: g,
+		rows: b,
+		list: y,
+		ids: S,
+		request: (e) => {
+			(g?.id !== e?.id || g?.side !== e?.side) && _(e);
+		}
+	}), [
+		g,
+		b,
+		_,
+		S.join("\0")
+	]);
+	return d(() => {
+		let e = y.current;
+		if (!e || !g) return;
+		let t = (e) => {
+			let t = b.get(g.id), n = e.target;
+			n && !t?.element.contains(n) && !t?.menu?.contains(n) && C.request(null);
+		}, n = (t) => {
+			t.key !== "Escape" || t.defaultPrevented || t.isComposing || D(e) || e.ownerDocument.querySelector("[role=\"menu\"], [role=\"listbox\"], [role=\"dialog\"], dialog[open]") || (t.preventDefault(), C.request(null));
+		};
+		return e.ownerDocument.addEventListener("pointerdown", t), e.ownerDocument.addEventListener("keydown", n), () => {
+			e.ownerDocument.removeEventListener("pointerdown", t), e.ownerDocument.removeEventListener("keydown", n);
+		};
+	}, [
+		g,
+		b,
+		C
+	]), /* @__PURE__ */ v(ne, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ v(Te.Provider, {
+			value: C,
+			children: /* @__PURE__ */ v(t, {
+				className: n,
+				styles: T,
+				sx: r,
+				children: (e) => /* @__PURE__ */ v("ul", {
+					...h,
+					ref: x,
+					className: e,
+					"data-ui": "swipe-actions",
+					tabIndex: h.tabIndex ?? -1,
+					onKeyDown: (e) => {
+						f?.(e), !e.defaultPrevented && g !== null && e.key === "Escape" && !e.nativeEvent.isComposing && !e.target.closest("[role=\"menu\"]") && !D(y.current) && (e.stopPropagation(), e.preventDefault(), C.request(null));
+					},
+					children: /* @__PURE__ */ v(te, {
+						initial: !1,
+						children: u
+					})
+				})
+			})
+		})
+	});
+}
+function D(e) {
+	return !!e?.querySelector("[aria-expanded=\"true\"]");
+}
+E.displayName = "SwipeActions";
+function O({ id: e, label: n, actionsLabel: r, leading: i = pe, trailing: s = pe, fullSwipe: c = !0, disabled: l = !1, ref: p, className: g, sx: te, children: ne, slotProps: w, onPointerDown: T, onPointerMove: Ce, onPointerUp: E, onPointerCancel: D, onLostPointerCapture: O, onClickCapture: k, ...Ee }) {
+	let A = u(Te);
+	if (!A) throw Error("SwipeActions.Row must be rendered inside SwipeActions.");
+	let { value: j, request: M, rows: N, list: P } = A, F = m(null), De = m(null), I = m(null), Oe = m(!1), ke = m(A.ids), L = m(null), R = m(null), z = m(null), B = m(0), V = m(!1), H = m(void 0), U = C(0), W = re(), G = S(), [Ae, K] = h(!1), [je, Me] = h(0), Ne = ee([F, p]), q = {
+		leading: i,
+		trailing: s
+	}, J = (e) => !l && q[e].some((e) => !e.disabled), Y = (e) => Math.min(F.current?.getBoundingClientRect().width ?? 0, (e === "leading" ? L : R).current?.getBoundingClientRect().width ?? 0), Pe = () => F.current?.matches(":dir(rtl)") ? -1 : 1, Fe = () => j?.id === e && J(j.side) ? Y(j.side) * (j.side === "leading" ? 1 : -1) * Pe() : 0, X = () => {
+		let e = Fe(), t = e - U.get(), n = e !== 0 && Math.sign(t) === Math.sign(B.current) ? Math.max(-900, Math.min(se, B.current)) : 0;
+		if (B.current = 0, W) U.jump(e);
+		else return b(U, e, {
+			...ue,
+			velocity: n
+		});
+	}, Ie = m(X);
+	Ie.current = X, d(() => {
+		if (z.current?.locked) return;
+		let e = X();
+		return () => e?.stop();
+	}, [
+		j,
+		l,
+		i,
+		s,
+		W,
+		je
+	]), d(() => {
+		let e = F.current, t = e?.ownerDocument.defaultView?.ResizeObserver;
+		if (!e || !t) return;
+		let n = new t(() => {
+			z.current?.locked || Ie.current();
+		});
+		return n.observe(e), L.current && n.observe(L.current), R.current && n.observe(R.current), () => n.disconnect();
+	}, []), f(() => {
+		A.ids.includes(e) && (ke.current = A.ids);
+	}, [A.ids, e]), f(() => {
+		if (!G) return;
+		let t = F.current;
+		if (!t) return;
+		let n = {
+			element: t,
+			trigger: De.current,
+			menu: I.current
+		};
+		return N.set(e, n), () => {
+			let n = t.ownerDocument.activeElement, r = t.contains(n) || I.current?.contains(n) || Oe.current && (!n || n === t.ownerDocument.body), i = ke.current, a = i.indexOf(e);
+			N.delete(e), r && t.ownerDocument.defaultView?.queueMicrotask(() => {
+				!N.has(e) && P.current?.isConnected && (i.slice(a + 1).concat(i.slice(0, a).reverse()).map((e) => N.get(e)?.trigger).find((e) => e?.isConnected && !e.disabled) ?? P.current)?.focus();
+			});
+		};
+	}, [
+		e,
+		N,
+		G,
+		P
+	]), d(() => {
+		let e = F.current?.ownerDocument.defaultView;
+		return () => {
+			z.current?.unlisten(), z.current = null, U.stop(), H.current !== void 0 && e?.clearTimeout(H.current);
+		};
+	}, [U]);
+	let Z = (e) => {
+		l || e.disabled || !G || (M(null), K(!1), Oe.current = !!I.current?.contains(I.current.ownerDocument.activeElement), e.onSelect(), Me((e) => e + 1));
+	}, Q = (t, n) => {
+		let r = z.current;
+		if (!r || r.pointer !== t) return;
+		z.current = null, r.unlisten(), B.current = n ? 0 : r.velocity;
+		let i = F.current;
+		if (r.locked) {
+			V.current = !0;
+			let a = i?.ownerDocument.defaultView;
+			H.current !== void 0 && a?.clearTimeout(H.current), H.current = a?.setTimeout(() => {
+				V.current = !1;
+			}, 0);
+			let o = U.get() * r.direction, s = o >= 0 ? "leading" : "trailing", l = Y(s), u = r.velocity * (s === "leading" ? 1 : -1) * r.direction, d = Math.max(l + ae, (i?.getBoundingClientRect().width ?? 0) * oe), f = Math.abs(o), p = f >= d || u >= se && f + u * ce >= d;
+			if (!n && c && J(s) && p && u > -900) {
+				let e = q[s].filter((e) => !e.disabled), t = s === "leading" ? e[0] : e.at(-1);
+				t && Z(t);
+			} else n || M(J(s) && f >= l / 2 ? {
+				id: e,
+				side: s
+			} : null);
+			i?.hasPointerCapture(t) && i.releasePointerCapture(t);
+		}
+		Me((e) => e + 1);
+	}, Le = j?.id === e && J(j.side) ? j.side : void 0, $ = (e) => /* @__PURE__ */ y(_, { children: [a(e.icon) && e.icon !== "" && /* @__PURE__ */ v("span", {
+		"aria-hidden": !0,
+		"data-ui": "swipe-actions-action-icon",
+		className: w?.actionIcon?.className,
+		css: [xe, w?.actionIcon?.css],
+		children: e.icon
+	}), /* @__PURE__ */ v("span", {
+		"data-ui": "swipe-actions-action-label",
+		className: w?.actionLabel?.className,
+		css: w?.actionLabel?.css,
+		children: e.label
+	})] });
+	return /* @__PURE__ */ v(t, {
+		className: g,
+		styles: he,
+		sx: te,
+		children: (t) => /* @__PURE__ */ y(we, {
+			nativeProps: Ee,
+			id: e,
+			ref: Ne,
+			className: t,
+			"data-ui": "swipe-actions-row",
+			"data-state": Le ?? "closed",
+			inert: !G || Ee.inert || void 0,
+			initial: !W && {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: "auto",
+				opacity: 1
+			},
+			exit: W ? void 0 : {
+				height: 0,
+				opacity: 0,
+				minHeight: 0
+			},
+			transition: {
+				duration: W ? 0 : fe,
+				opacity: { duration: W ? 0 : de }
+			},
+			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;
+				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 = {
+					pointer: e.pointerId,
+					startX: e.clientX,
+					startY: e.clientY,
+					origin: U.get(),
+					lastX: e.clientX,
+					lastTime: e.timeStamp,
+					velocity: 0,
+					locked: !1,
+					vertical: !1,
+					direction: Pe(),
+					unlisten: () => {
+						n.removeEventListener("pointerup", r, !0), n.removeEventListener("pointercancel", r, !0);
+					}
+				};
+			},
+			onPointerMove: (e) => {
+				Ce?.(e);
+				let t = z.current;
+				if (!t || t.pointer !== e.pointerId || t.vertical) return;
+				let n = e.clientX - t.startX, r = e.clientY - t.startY;
+				if (!t.locked) {
+					if (Math.max(Math.abs(n), Math.abs(r)) < ie) return;
+					if (Math.abs(r) >= Math.abs(n)) {
+						t.vertical = !0;
+						return;
+					}
+					t.locked = !0, U.stop(), K(!1), e.currentTarget.setPointerCapture(e.pointerId);
+				}
+				e.preventDefault();
+				let i = e.timeStamp - t.lastTime;
+				i > 0 && (t.velocity = (e.clientX - t.lastX) / i * 1e3), t.lastX = e.clientX, t.lastTime = e.timeStamp;
+				let a = t.origin + n, o = a * t.direction >= 0 ? "leading" : "trailing", s = F.current?.getBoundingClientRect().width ?? 0, l = c ? Math.max(Y(o) + ae, s * oe) : Y(o), u = Math.abs(a), d = u > l ? l + (u - l) * le : u;
+				U.set(J(o) ? Math.sign(a) * Math.min(d, s) : 0);
+			},
+			onPointerUp: (e) => {
+				E?.(e), Q(e.pointerId, !1);
+			},
+			onPointerCancel: (e) => {
+				D?.(e), Q(e.pointerId, !0);
+			},
+			onLostPointerCapture: (e) => {
+				O?.(e), Q(e.pointerId, !0);
+			},
+			onClickCapture: (e) => {
+				k?.(e), V.current && (V.current = !1, e.preventDefault(), e.stopPropagation());
+			},
+			children: [["leading", "trailing"].map((e) => q[e].length > 0 && /* @__PURE__ */ v("div", {
+				ref: e === "leading" ? L : R,
+				"data-side": e,
+				"data-ui": "swipe-actions-rail",
+				css: ve,
+				"aria-hidden": !0,
+				children: q[e].map((t) => /* @__PURE__ */ v("button", {
+					type: "button",
+					tabIndex: -1,
+					disabled: l || t.disabled || Le !== e || !G,
+					"data-ui": "swipe-actions-action",
+					className: w?.action?.className,
+					css: [
+						ye,
+						be[t.tone ?? "neutral"],
+						w?.action?.css
+					],
+					onPointerDown: (e) => e.preventDefault(),
+					onClick: () => Z(t),
+					children: $(t)
+				}, t.id))
+			}, e)), /* @__PURE__ */ y(x.div, {
+				"data-ui": "swipe-actions-content",
+				className: w?.content?.className,
+				css: [ge, w?.content?.css],
+				style: { x: U },
+				children: [/* @__PURE__ */ v("div", {
+					"data-ui": "swipe-actions-body",
+					className: w?.body?.className,
+					css: [_e, w?.body?.css],
+					children: ne
+				}), /* @__PURE__ */ y(o, {
+					open: Ae && G,
+					onOpenChange: (e) => {
+						e && M(null), K(e);
+					},
+					children: [/* @__PURE__ */ v(o.Trigger, {
+						ref: De,
+						disabled: l || !i.length && !s.length,
+						"aria-label": r,
+						title: n,
+						className: w?.trigger?.className,
+						css: [Se, w?.trigger?.css],
+						children: "⋯"
+					}), /* @__PURE__ */ v(o.Content, {
+						ref: (t) => {
+							I.current = t;
+							let n = N.get(e);
+							n && (n.menu = t);
+						},
+						className: w?.menu?.className,
+						css: w?.menu?.css,
+						children: [...i, ...s].map((e) => /* @__PURE__ */ v(o.Item, {
+							disabled: l || e.disabled,
+							className: w?.menuItem?.className,
+							css: w?.menuItem?.css,
+							onSelect: () => Z(e),
+							children: $(e)
+						}, e.id))
+					})]
+				})]
+			})]
+		})
+	});
+}
+O.displayName = "SwipeActions.Row";
+var k = Object.assign(E, { Row: O });
+//#endregion
+export { k as t };

package/dist/swipe-actions.js

@@ -0,0 +1,2 @@
+'use client';
+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-Dr-qjmT4.js";
+export { t as Switch } from "./switch-C1WrKrf-.js";