@jfrader/ui 0.5.0 → 0.6.0

package/dist/stretch-refresh-OrnTEj7P.js

@@ -0,0 +1,349 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./focus-ring-BK5W5_NY.js";
+import { n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
+import { t as i } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { t as o } from "./button-C6OV0C7J.js";
+import { useEffect as s, useId as ee, useLayoutEffect as te, useRef as c, useState as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+import { createElement as ne } from "@emotion/react";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
+import { MotionConfig as re, animate as p, cubicBezier as m, motion as h, useMotionValue as g, useReducedMotion as ie } from "motion/react";
+import { base as _ } from "@jfrader/tokens";
+import { useMergeRefs as ae } from "@floating-ui/react";
+//#region src/components/stretch-refresh/stretch-refresh.tsx
+var v = 72, oe = 8, y = 2, se = {
+	type: "spring",
+	stiffness: 420,
+	damping: 40,
+	mass: 1
+}, ce = Number.parseFloat(_.motion.duration.base) / 1e3, le = .85, b = _.motion.easeStandard.match(/[\d.]+/g).map(Number), ue = m(...b), de = {
+	refresh: "Refresh",
+	refreshing: "Refreshing",
+	pull: "Pull to refresh",
+	release: "Release to refresh",
+	done: "Updated",
+	error: "Could not refresh. Try again."
+}, fe = "a[href],button,input,select,textarea,label,summary,[contenteditable]:not([contenteditable=\"false\"]),[role=\"button\"],[tabindex]", pe = e({
+	label: "stretch-refresh",
+	display: "flex",
+	flexDirection: "column",
+	minBlockSize: 0,
+	minInlineSize: 0,
+	fontFamily: u.font.sans,
+	lineHeight: u.lineHeight.base,
+	color: u.color.text,
+	background: u.color.surface,
+	border: `1px solid ${u.color.borderControl}`,
+	borderRadius: u.radius.md
+}), me = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: u.space[3],
+	padding: u.space[4]
+}), he = e({
+	flex: "1 1 auto",
+	margin: 0,
+	minInlineSize: 0,
+	overflowWrap: "anywhere",
+	fontSize: u.textSize.md,
+	fontWeight: u.fontWeight.semibold
+}), ge = e({
+	flexBasis: "100%",
+	fontSize: u.textSize.sm,
+	color: u.color.textMuted,
+	overflowWrap: "anywhere"
+}), _e = e({
+	minBlockSize: u.space[8],
+	blockSize: "auto",
+	paddingBlock: u.space[2],
+	whiteSpace: "normal",
+	overflowWrap: "anywhere",
+	maxInlineSize: "100%"
+}), ve = e({
+	overflow: "auto",
+	flex: "1 1 auto",
+	minBlockSize: 0,
+	minInlineSize: 0,
+	padding: u.space[2],
+	overscrollBehaviorY: "contain",
+	"&:focus-visible": t
+}), ye = e({
+	padding: u.space[2],
+	fontSize: u.textSize.sm,
+	color: u.color.accentText,
+	[n]: { color: "CanvasText" }
+}), be = e({
+	display: "block",
+	marginBlockStart: u.space[1],
+	blockSize: u.space[1],
+	background: u.color.accentText,
+	transformOrigin: "center",
+	[n]: {
+		background: "CanvasText",
+		outline: "1px solid CanvasText"
+	}
+}), xe = e({
+	listStyle: "none",
+	padding: 0,
+	margin: 0
+}), Se = e({
+	padding: u.space[3],
+	overflowWrap: "anywhere",
+	borderBlockEnd: `1px solid ${u.color.borderControl}`,
+	"& :is(button,a,input,select,textarea):focus-visible": t
+}), Ce = e({
+	paddingInline: u.space[4],
+	paddingBlock: u.space[2],
+	fontSize: u.textSize.sm,
+	overflowWrap: "anywhere"
+}), we = e({
+	padding: u.space[4],
+	color: u.color.textMuted
+}), x = (...e) => e.filter(Boolean).join(" ") || void 0;
+function S({ title: e, headingLevel: t = 2, subtitle: n, items: u, getKey: m, renderItem: _, onRefresh: b, refreshing: S, defaultRefreshing: Te = !1, onRefreshingChange: C, disabled: w = !1, threshold: T = v, emptyContent: E, labels: Ee, slotProps: D, ref: De, className: Oe, sx: ke, onKeyDown: Ae, ...je }) {
+	let O = ee(), Me = `h${t}`, k = {
+		...de,
+		...Ee
+	}, A = Number.isFinite(T) && T > 0 ? T : v, [j = !1, M] = i(S, Te, C), [N, P] = l(null), [F, I] = l(0), L = c(null), Ne = ae([L, D?.feed?.ref]), R = c(null), z = c(!1), B = c(!1), V = c(!1), H = c(void 0), U = g(0), W = g(0), G = g(1), K = ie(), q = () => {
+		!B.current && z.current && (V.current = !1, H.current !== void 0 && (L.current?.ownerDocument.defaultView?.cancelAnimationFrame(H.current), H.current = void 0), B.current = !0, P(null), Promise.resolve().then(b).then((e) => J({
+			phase: "done",
+			message: e ?? k.done
+		}), () => J({
+			phase: "error",
+			message: k.error
+		})));
+	}, J = (e) => {
+		z.current && (B.current = !1, P(e), S === void 0 ? M(!1) : C?.(!1));
+	}, Y = () => {
+		if (!(w || j || B.current || V.current)) {
+			if (V.current = !0, S === void 0) M(!0), q();
+			else {
+				let e = L.current?.ownerDocument.defaultView;
+				H.current = e?.requestAnimationFrame(() => {
+					V.current = !1, H.current = void 0;
+				}), M(!0);
+			}
+		}
+	};
+	te(() => {
+		w && (V.current = !1), V.current && j && !w && q();
+	}, [j, w]);
+	let X = (e) => {
+		let t = R.current;
+		if (t) {
+			R.current = null, t.cleanup(), t.node.hasPointerCapture(t.pointer) && t.node.releasePointerCapture(t.pointer), I(0);
+			for (let e of [U, W]) K || t.node.ownerDocument.hidden ? e.jump(0) : p(e, 0, se);
+			e && t.locked && t.distance >= A && Y();
+		}
+	};
+	s(() => {
+		z.current = !0;
+		let e = L.current?.ownerDocument.defaultView;
+		return () => {
+			z.current = !1, V.current = !1, R.current?.cleanup(), R.current = null, H.current !== void 0 && e?.cancelAnimationFrame(H.current), U.stop(), W.stop();
+		};
+	}, [U, W]), s(() => {
+		K && (U.jump(0), W.jump(0));
+	}, [
+		K,
+		U,
+		W
+	]), s(() => {
+		if (!N || K || L.current?.ownerDocument.hidden) {
+			G.jump(1);
+			return;
+		}
+		let e = p(G, [le, 1], {
+			duration: ce,
+			ease: ue
+		});
+		return () => e.stop();
+	}, [
+		N,
+		K,
+		G
+	]), s(() => {
+		(w || j) && X(!1);
+	}, [w, j]), s(() => {
+		let e = L.current?.ownerDocument, t = () => {
+			e?.hidden && (X(!1), U.jump(0), W.jump(0), G.jump(1));
+		};
+		return e?.addEventListener("visibilitychange", t), () => e?.removeEventListener("visibilitychange", t);
+	}, [
+		U,
+		W,
+		G
+	]), s(() => {
+		if (process.env.NODE_ENV === "production") return;
+		let e = u.map(m);
+		new Set(e).size !== e.length && console.warn("StretchRefresh: getKey must return unique keys.");
+	}, [u, m]);
+	let Z = (e, t, n) => {
+		let r = R.current;
+		if (!r) return;
+		let i = e - r.x, a = t - r.y;
+		if (!r.locked) {
+			if (Math.max(Math.abs(i), Math.abs(a)) < oe) return;
+			if (a <= 0 || Math.abs(i) > a || r.node.scrollTop > 0) {
+				X(!1);
+				return;
+			}
+			r.locked = !0, r.touch || r.node.setPointerCapture(r.pointer);
+		}
+		n(), r.distance = y * A * (1 - Math.exp(-Math.max(0, a) / (y * A))), I(r.distance), U.stop(), U.set(K ? 0 : r.distance), W.stop(), W.set(K ? 0 : Math.min(1, r.distance / A));
+	}, Pe = (e) => {
+		let t = e.currentTarget, n = e.target.closest(fe);
+		if (e.defaultPrevented || w || j || B.current || V.current || R.current || !e.isPrimary || e.button !== 0 || t.scrollTop > 0 || n && n !== t || t.ownerDocument.getSelection()?.toString()) return;
+		let r = t.ownerDocument, i = (e) => {
+			R.current?.pointer === e.pointerId && !t.contains(e.target) && X(!1);
+		}, a = (e) => {
+			if (e.touches.length !== 1) {
+				X(!1);
+				return;
+			}
+			let t = e.touches[0];
+			t && !e.defaultPrevented && Z(t.clientX, t.clientY, () => e.preventDefault());
+		}, o = (e) => X(e.type === "touchend" && !e.defaultPrevented);
+		r.addEventListener("pointerup", i, !0), r.addEventListener("pointercancel", i, !0), e.pointerType === "touch" && (t.addEventListener("touchmove", a, { passive: !1 }), r.addEventListener("touchend", o), r.addEventListener("touchcancel", o)), R.current = {
+			pointer: e.pointerId,
+			touch: e.pointerType === "touch",
+			x: e.clientX,
+			y: e.clientY,
+			distance: 0,
+			locked: !1,
+			node: t,
+			cleanup: () => {
+				r.removeEventListener("pointerup", i, !0), r.removeEventListener("pointercancel", i, !0), t.removeEventListener("touchmove", a), r.removeEventListener("touchend", o), r.removeEventListener("touchcancel", o);
+			}
+		};
+	}, Fe = j ? "refreshing" : F >= A ? "armed" : F > 0 ? "pulling" : N?.phase ?? "idle", Ie = j ? k.refreshing : Fe === "armed" ? k.release : k.pull, Le = a(n) && n !== "", Re = D?.title?.id ?? `${O}-title`, Q = D?.subtitle?.id ?? `${O}-subtitle`, $ = D?.feed, ze = $?.["aria-labelledby"] || !$?.["aria-label"] ? Re : void 0, Be = N?.message ?? (j ? k.refreshing : "");
+	return /* @__PURE__ */ d(re, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ d(r, {
+			className: Oe,
+			styles: pe,
+			sx: ke,
+			children: (t) => /* @__PURE__ */ f("div", {
+				...je,
+				ref: De,
+				className: t,
+				"data-ui": "stretch-refresh",
+				"data-state": Fe,
+				onKeyDown: (e) => {
+					Ae?.(e), !e.defaultPrevented && e.key === "Escape" && (R.current || V.current) && (e.preventDefault(), V.current = !1, X(!1));
+				},
+				children: [
+					/* @__PURE__ */ f("header", {
+						...D?.header,
+						role: D?.header?.role ?? "presentation",
+						css: [me, D?.header?.css],
+						children: [
+							/* @__PURE__ */ d(Me, {
+								...D?.title,
+								id: Re,
+								css: [he, D?.title?.css],
+								children: e
+							}),
+							/* @__PURE__ */ d(o, {
+								variant: "outline",
+								size: "sm",
+								...D?.refreshButton,
+								type: "button",
+								disabled: w,
+								"aria-disabled": j || B.current || D?.refreshButton?.["aria-disabled"],
+								css: [_e, D?.refreshButton?.css],
+								onClick: (e) => {
+									D?.refreshButton?.onClick?.(e), e.defaultPrevented || Y();
+								},
+								children: k.refresh
+							}),
+							Le && /* @__PURE__ */ d("div", {
+								...D?.subtitle,
+								id: Q,
+								"data-ui": "stretch-refresh-subtitle",
+								css: [ge, D?.subtitle?.css],
+								children: n
+							})
+						]
+					}),
+					/* @__PURE__ */ f("div", {
+						...$,
+						ref: Ne,
+						role: "region",
+						tabIndex: $?.tabIndex ?? 0,
+						"data-ui": "stretch-refresh-feed",
+						"aria-labelledby": x($?.["aria-labelledby"], ze),
+						"aria-describedby": x($?.["aria-describedby"], Le ? Q : void 0),
+						css: [ve, $?.css],
+						onPointerDown: (e) => {
+							$?.onPointerDown?.(e), Pe(e);
+						},
+						onPointerMove: (e) => {
+							$?.onPointerMove?.(e), !e.defaultPrevented && R.current?.pointer === e.pointerId && Z(e.clientX, e.clientY, () => e.preventDefault());
+						},
+						onPointerUp: (e) => {
+							$?.onPointerUp?.(e), R.current?.pointer === e.pointerId && X(!e.defaultPrevented);
+						},
+						onPointerCancel: (e) => {
+							$?.onPointerCancel?.(e), R.current?.pointer === e.pointerId && X(!1);
+						},
+						onLostPointerCapture: (e) => {
+							$?.onLostPointerCapture?.(e), R.current?.pointer === e.pointerId && X(!1);
+						},
+						children: [/* @__PURE__ */ f("div", {
+							...D?.indicator,
+							"aria-hidden": "true",
+							"data-ui": "stretch-refresh-indicator",
+							css: [ye, D?.indicator?.css],
+							children: [Ie, /* @__PURE__ */ d(h.span, {
+								"data-ui": "stretch-refresh-line",
+								css: be,
+								style: { scaleX: j ? 1 : W }
+							})]
+						}), /* @__PURE__ */ f(h.div, {
+							style: { y: U },
+							children: [/* @__PURE__ */ d("ul", {
+								...D?.list,
+								"aria-busy": j,
+								"data-ui": "stretch-refresh-list",
+								css: [xe, D?.list?.css],
+								children: u.map((e, t) => {
+									let n = typeof D?.item == "function" ? D.item(e, t) : D?.item;
+									return /* @__PURE__ */ ne("li", {
+										...n,
+										key: m(e),
+										css: [Se, n?.css]
+									}, _(e, t));
+								})
+							}), u.length === 0 && a(E) && E !== "" && /* @__PURE__ */ d("div", {
+								...D?.empty,
+								"data-ui": "stretch-refresh-empty",
+								css: [we, D?.empty?.css],
+								children: E
+							})]
+						})]
+					}),
+					/* @__PURE__ */ d("div", {
+						...D?.status,
+						id: D?.status?.id ?? `${O}-status`,
+						role: "status",
+						"aria-atomic": "true",
+						"data-ui": "stretch-refresh-status",
+						css: [Ce, D?.status?.css],
+						children: /* @__PURE__ */ d(h.span, {
+							style: { opacity: G },
+							children: Be
+						})
+					})
+				]
+			})
+		})
+	});
+}
+S.displayName = "StretchRefresh";
+//#endregion
+export { S as t };

package/dist/stretch-refresh.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as StretchRefresh } from "./stretch-refresh-OrnTEj7P.js";

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

@@ -1,14 +1,24 @@
 'use client';
 import { vars as e } from "@jfrader/tokens/vars";
 //#region src/styling/surface.ts
-var t = {
+function t(e) {
+	return e === "contrast" ? "dark" : null;
+}
+function n(e) {
+	let n = t(e);
+	return n ? {
+		"data-theme": n,
+		"data-appearance": e
+	} : null;
+}
+var r = {
 	boxSizing: "border-box",
 	backgroundColor: e.color.surfaceRaised,
 	border: `1px solid ${e.color.border}`,
 	color: e.color.text,
 	fontFamily: e.font.sans,
 	lineHeight: e.lineHeight.base
-}, n = {
+}, i = {
 	border: 0,
 	padding: 0,
 	background: "transparent",
@@ -16,4 +26,4 @@ var t = {
 	"&::backdrop": { backgroundColor: e.color.scrim }
 };
 //#endregion
-export { t as n, n as t };
+export { t as i, r as n, n as r, i as t };

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

@@ -1,16 +1,17 @@
 '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 { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./focus-ring-BK5W5_NY.js";
+import { n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.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-CVzpsyXn.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 { AnimatePresence as ee, MotionConfig as te, animate as b, motion as x, useIsPresent as S, useMotionValue as C, useReducedMotion as ne } from "motion/react";
 import { base as w } from "@jfrader/tokens";
+import { useMergeRefs as re } from "@floating-ui/react";
 //#region src/components/swipe-actions/swipe-actions.tsx
 var ie = 8, ae = 48, oe = .56, se = 900, ce = .1, le = .2, ue = {
 	type: "spring",
@@ -26,7 +27,7 @@ var ie = 8, ae = 48, oe = .56, se = 900, ce = .1, le = .2, ue = {
 	gap: g.space[2],
 	fontFamily: g.font.sans,
 	color: g.color.text,
-	"&:focus": n
+	"&:focus": t
 }), he = e({
 	label: "swipe-actions-row",
 	display: "grid",
@@ -75,7 +76,7 @@ var ie = 8, ae = 48, oe = .56, se = 900, ce = .1, le = .2, ue = {
 	overflowWrap: "anywhere",
 	cursor: "pointer",
 	"&:disabled": { cursor: "not-allowed" },
-	[r]: { borderColor: "ButtonText" }
+	[n]: { borderColor: "ButtonText" }
 }), be = {
 	neutral: e({
 		background: g.color.surfaceHover,
@@ -109,8 +110,8 @@ function Ce({ nativeProps: e, ...t }) {
 	});
 }
 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(() => ({
+function E({ ref: e, className: t, sx: n, 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 = re([y, e]), S = s.toArray(u).flatMap((e) => l(e) ? [e.props.id] : []), C = p(() => ({
 		value: g,
 		rows: b,
 		list: y,
@@ -140,14 +141,14 @@ function E({ ref: e, className: n, sx: r, value: a, defaultValue: o = null, onVa
 		g,
 		b,
 		C
-	]), /* @__PURE__ */ v(ne, {
+	]), /* @__PURE__ */ v(te, {
 		reducedMotion: "user",
 		children: /* @__PURE__ */ v(Te.Provider, {
 			value: C,
-			children: /* @__PURE__ */ v(t, {
-				className: n,
+			children: /* @__PURE__ */ v(r, {
+				className: t,
 				styles: T,
-				sx: r,
+				sx: n,
 				children: (e) => /* @__PURE__ */ v("ul", {
 					...h,
 					ref: x,
@@ -157,7 +158,7 @@ function E({ ref: e, className: n, sx: r, value: a, defaultValue: o = null, onVa
 					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, {
+					children: /* @__PURE__ */ v(ee, {
 						initial: !1,
 						children: u
 					})
@@ -170,10 +171,10 @@ 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 }) {
+function O({ id: e, label: t, actionsLabel: n, leading: i = pe, trailing: s = pe, fullSwipe: c = !0, disabled: l = !1, ref: p, className: g, sx: ee, children: te, 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 = {
+	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 = ne(), G = S(), [Ae, K] = h(!1), [je, Me] = h(0), Ne = re([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 = () => {
@@ -266,15 +267,15 @@ function O({ id: e, label: n, actionsLabel: r, leading: i = pe, trailing: s = pe
 		css: w?.actionLabel?.css,
 		children: e.label
 	})] });
-	return /* @__PURE__ */ v(t, {
+	return /* @__PURE__ */ v(r, {
 		className: g,
 		styles: he,
-		sx: te,
-		children: (t) => /* @__PURE__ */ y(we, {
+		sx: ee,
+		children: (r) => /* @__PURE__ */ y(we, {
 			nativeProps: Ee,
 			id: e,
 			ref: Ne,
-			className: t,
+			className: r,
 			"data-ui": "swipe-actions-row",
 			"data-state": Le ?? "closed",
 			inert: !G || Ee.inert || void 0,
@@ -297,7 +298,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 = {
@@ -342,7 +345,7 @@ function O({ id: e, label: n, actionsLabel: r, leading: i = pe, trailing: s = pe
 				D?.(e), Q(e.pointerId, !0);
 			},
 			onLostPointerCapture: (e) => {
-				O?.(e), Q(e.pointerId, !0);
+				O?.(e), e.target === e.currentTarget && Q(e.pointerId, !0);
 			},
 			onClickCapture: (e) => {
 				k?.(e), V.current && (V.current = !1, e.preventDefault(), e.stopPropagation());
@@ -377,7 +380,7 @@ function O({ id: e, label: n, actionsLabel: r, leading: i = pe, trailing: s = pe
 					"data-ui": "swipe-actions-body",
 					className: w?.body?.className,
 					css: [_e, w?.body?.css],
-					children: ne
+					children: te
 				}), /* @__PURE__ */ y(o, {
 					open: Ae && G,
 					onOpenChange: (e) => {
@@ -386,8 +389,8 @@ function O({ id: e, label: n, actionsLabel: r, leading: i = pe, trailing: s = pe
 					children: [/* @__PURE__ */ v(o.Trigger, {
 						ref: De,
 						disabled: l || !i.length && !s.length,
-						"aria-label": r,
-						title: n,
+						"aria-label": n,
+						title: t,
 						className: w?.trigger?.className,
 						css: [Se, w?.trigger?.css],
 						children: "⋯"

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-1H5UOZKE.js";

package/dist/switch-79-hkQqg.js

@@ -0,0 +1,146 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t, r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.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-BsWOZPc9.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
+	},
+	[n]: {
+		transitionDuration: "0s",
+		"&::after": { transitionDuration: "0s" }
+	},
+	[t]: { "&::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)" },
+		[t]: { "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)" },
+		[t]: { "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: t, description: n, 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(t), M = i(n), 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(r, {
+		className: F,
+		styles: [
+			s,
+			o,
+			g[u],
+			x?.root?.css
+		],
+		sx: C,
+		children: (r) => /* @__PURE__ */ f("label", {
+			"data-ui": "switch",
+			dir: w,
+			className: r,
+			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: t
+					})
+				]
+			}), M && /* @__PURE__ */ d("span", {
+				id: A,
+				className: x?.description?.className,
+				css: [
+					v,
+					y[u],
+					x?.description?.css
+				],
+				children: n
+			})]
+		})
+	});
+}
+b.displayName = "Switch";
+//#endregion
+export { b as t };