@jfrader/ui 0.4.0 → 0.5.0

package/dist/carousel-IvPqN-oM.js

@@ -0,0 +1,472 @@
+'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 } from "./roving-focus-CYlo_Kf8.js";
+import { t as ee } from "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./button-C92uYFJW.js";
+import { Children as te, isValidElement as c, useEffect as l, useId as ne, useLayoutEffect as re, useMemo as ie, useRef as u, useState as d, useSyncExternalStore as ae } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { createElement as oe } from "@emotion/react";
+import { jsx as p, jsxs as se } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as m } from "@floating-ui/react";
+//#region src/components/carousel/carousel.tsx
+var ce = "min(80cqw, 21rem)", h = "min(var(--carousel-slide-size), 100cqw)", le = 6, ue = 120, g = "(prefers-reduced-motion: reduce)", de = "a[href], button, input, select, textarea, label, summary, [contenteditable]:not([contenteditable=\"false\"]), [tabindex], [role=\"slider\"]", fe = {
+	itemSelector: "[role=\"tab\"]",
+	ownerSelector: "[role=\"tablist\"]"
+}, _ = () => {};
+function pe(e) {
+	if (typeof window > "u" || !window.matchMedia) return _;
+	let t = window.matchMedia(g);
+	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}
+var me = () => typeof window < "u" && window.matchMedia?.(g).matches === !0;
+function he(e) {
+	return typeof document > "u" ? _ : (document.addEventListener("visibilitychange", e), () => document.removeEventListener("visibilitychange", e));
+}
+var ge = () => typeof document < "u" && document.hidden, _e = () => !1;
+function ve(e, t) {
+	return t === 0 ? 0 : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1);
+}
+function v(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+var ye = (...e) => e.filter(Boolean).join(" ") || void 0, y = (e, t) => c(e) && e.key !== null ? e.key : `slide-${t}`, be = e({
+	label: "carousel",
+	containerType: "inline-size",
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	minInlineSize: 0,
+	display: "grid",
+	gap: f.space[3],
+	fontFamily: f.font.sans,
+	color: f.color.text
+}), xe = e({ justifySelf: "start" }), Se = e({
+	overflowX: "auto",
+	overflowY: "hidden",
+	scrollSnapType: "inline mandatory",
+	overscrollBehaviorInline: "contain",
+	scrollbarWidth: "none",
+	borderRadius: f.radius.lg,
+	"&:focus-visible": n,
+	"&[data-disabled]": { overflowX: "hidden" },
+	"&[data-dragging]": {
+		cursor: "grabbing",
+		userSelect: "none"
+	}
+}), Ce = e({
+	display: "flex",
+	gap: f.space[3],
+	inlineSize: "max-content",
+	paddingInline: `calc((100cqw - ${h}) / 2)`
+}), we = e({
+	flex: "none",
+	boxSizing: "border-box",
+	inlineSize: h,
+	minInlineSize: 0,
+	scrollSnapAlign: "center",
+	scrollSnapStop: "always"
+}), Te = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: f.space[2]
+}), Ee = e({
+	display: "flex",
+	flex: "1 1 auto",
+	minInlineSize: 0,
+	overflowX: "auto",
+	scrollbarWidth: "none"
+}), De = e({
+	appearance: "none",
+	display: "inline-grid",
+	placeItems: "center",
+	flex: "none",
+	minInlineSize: f.space[8],
+	blockSize: f.space[8],
+	padding: 0,
+	border: 0,
+	borderRadius: f.radius.full,
+	background: "transparent",
+	cursor: "pointer",
+	"&:hover:not([aria-disabled=\"true\"]):not([aria-selected=\"true\"]) > span": { backgroundColor: f.color.textMuted },
+	"&[aria-selected=\"true\"] > span": {
+		inlineSize: f.space[6],
+		backgroundColor: f.color.accent
+	},
+	"&[aria-disabled=\"true\"]": {
+		cursor: "not-allowed",
+		opacity: .55
+	},
+	"&:focus-visible": r,
+	[i]: {
+		"& > span": {
+			forcedColorAdjust: "none",
+			backgroundColor: "CanvasText"
+		},
+		"&[aria-selected=\"true\"] > span": { backgroundColor: "Highlight" }
+	}
+}), Oe = e({
+	display: "block",
+	inlineSize: f.space[2],
+	blockSize: f.space[2],
+	borderRadius: f.radius.full,
+	backgroundColor: f.color.borderControl,
+	transitionProperty: "inline-size, background-color",
+	transitionDuration: f.motion.duration.fast,
+	transitionTimingFunction: f.motion.easeStandard,
+	[a]: { transitionDuration: "0s" }
+}), ke = e({
+	inlineSize: f.space[8],
+	paddingInline: 0
+}), Ae = e({
+	inlineSize: f.space[4],
+	blockSize: f.space[4],
+	"&:dir(rtl)": { transform: "scaleX(-1)" }
+}), je = e({
+	margin: 0,
+	textAlign: "center",
+	fontSize: f.textSize.sm,
+	lineHeight: f.lineHeight.base,
+	color: f.color.textMuted,
+	fontVariantNumeric: "tabular-nums"
+}), Me = e({
+	display: "grid",
+	placeItems: "center",
+	padding: f.space[8],
+	border: `1px dashed ${f.color.borderControl}`,
+	borderRadius: f.radius.lg,
+	fontSize: f.textSize.sm,
+	lineHeight: f.lineHeight.base,
+	color: f.color.textMuted
+});
+function Ne({ direction: e }) {
+	return /* @__PURE__ */ p("svg", {
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		focusable: "false",
+		css: Ae,
+		children: /* @__PURE__ */ p("path", {
+			d: e === "previous" ? "M10 3 5 8l5 5" : "m6 3 5 5-5 5",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function b({ ref: e, children: n, value: r, defaultValue: i = 0, onValueChange: a, slideSize: c = ce, getSlideLabel: f, activation: h = "auto", interval: g, autoPlay: Ae = !1, playingValue: b, defaultPlayingValue: Pe, onPlayingValueChange: Fe, locale: Ie, labels: Le, disabled: x = !1, slotProps: S, className: Re, sx: ze, style: Be, role: Ve = "region", "aria-roledescription": He, onFocus: Ue, onBlur: We, onPointerEnter: Ge, onPointerLeave: Ke, ...qe }) {
+	let Je = ne(), Ye = ie(() => new Intl.NumberFormat(Ie), [Ie]), C = {
+		slides: "Slides",
+		chooseSlide: "Choose slide",
+		previous: "Previous slide",
+		next: "Next slide",
+		startRotation: "Start slide rotation",
+		stopRotation: "Stop slide rotation",
+		empty: "No slides",
+		carouselRole: "carousel",
+		slideCount: (e, t) => `Slide ${Ye.format(e + 1)} of ${Ye.format(t)}`,
+		...Le
+	}, Xe = f ?? C.slideCount, w = te.toArray(n), T = w.length, Ze = JSON.stringify(w.map(y)), E = T > 1, [Qe, D] = ee(r, i, a), O = Qe ?? 0, k = ve(O, T), A = E && !x, j = typeof g == "number" && Number.isFinite(g) && g > 0 ? g : void 0, M = j !== void 0 && E, [$e, et] = ee(b, Pe ?? Ae, Fe), [tt, N] = d(!1), [P, nt] = d(null), F = ae(pe, me, _e), rt = ae(he, ge, _e), [it, at] = d(!1), [ot, st] = d(!1), [ct, lt] = d(!1), I = M && $e && !tt && !F && !x, L = I && !it && !ot && !rt && !ct, [R, ut] = d(null), dt = R !== null && R < T ? R : k, [ft, pt] = d(0), mt = u(null), z = u(null), B = u(null), ht = u(null), gt = m([e, mt]), _t = m([S?.viewport?.ref, z]), vt = m([S?.tabList?.ref, ht]), V = u(null), H = u(null), U = u(null), W = u(null), G = u(null), K = u(null), yt = u(!0), bt = u(0), xt = u(void 0), St = (e) => `${Je}-panel-${e}`, Ct = (e) => `${Je}-tab-${e}`;
+	l(() => {
+		Number.isFinite(O) || console.warn(`Carousel: value ${O} is not a finite index; showing the first slide.`);
+	}, [O]), l(() => {
+		F && N(!0);
+	}, [F]), l(() => {
+		let e = mt.current;
+		if (!M || !e || typeof IntersectionObserver > "u") return;
+		let t = new IntersectionObserver(([e]) => lt(e ? !e.isIntersecting : !1));
+		return t.observe(e), () => t.disconnect();
+	}, [M]), l(() => {
+		if (!L || j === void 0) return;
+		let e = setTimeout(() => {
+			nt(k), D((k + 1) % T);
+		}, j);
+		return () => clearTimeout(e);
+	}, [
+		L,
+		j,
+		k,
+		T,
+		D
+	]), l(() => {
+		P !== null && (nt(null), P === k && N(!0));
+	}, [P, k]), l(() => () => clearTimeout(xt.current), []);
+	let wt = (e) => B.current?.children[e], Tt = (e, t) => {
+		let n = z.current, r = wt(e);
+		if (!n || !r) return;
+		let i = n.getBoundingClientRect(), a = r.getBoundingClientRect(), o = a.left + a.width / 2 - (i.left + i.width / 2);
+		Math.abs(o) < 1 || (K.current = n.scrollLeft + o, n.scrollTo({
+			left: K.current,
+			behavior: t
+		}));
+	}, Et = () => {
+		let e = z.current, t = B.current;
+		if (!e || !t) return k;
+		let n = e.getBoundingClientRect(), r = n.left + n.width / 2, i = k, a = Infinity;
+		return Array.from(t.children).forEach((e, t) => {
+			let n = e.getBoundingClientRect(), o = Math.abs(n.left + n.width / 2 - r);
+			o < a && (a = o, i = t);
+		}), i;
+	};
+	re(() => {
+		bt.current = k;
+		let e = z.current;
+		if (!e) return;
+		let { activeElement: t, body: n } = e.ownerDocument, r = V.current, i = (t) => e.contains(t) && t.closest("[inert]") !== null, a = t !== null && i(t), o = t === n && r !== null && (!r.isConnected || i(r));
+		(a || o) && e.focus({ preventScroll: !0 }), ht.current?.contains(t) || ut(null), !H.current?.active && (Tt(k, yt.current || F ? "instant" : "smooth"), yt.current = !1);
+	}, [
+		k,
+		Ze,
+		ft
+	]), l(() => {
+		let e = z.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => {
+			H.current?.active || Tt(bt.current, "instant");
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [T > 0]);
+	let q = (e) => {
+		if (!A) return;
+		let t = ve(e, T);
+		t !== k && D(t);
+	}, Dt = (e) => {
+		U.current = e, q(e), pt((e) => e + 1);
+	}, Ot = () => {
+		let e = z.current, t = K.current;
+		if (e && t !== null) {
+			Math.abs(e.scrollLeft - t) < 2 && (K.current = null);
+			return;
+		}
+		if (!A || H.current) return;
+		let n = Et();
+		n !== k && n !== U.current && Dt(n);
+	}, kt = () => {
+		clearTimeout(xt.current), xt.current = setTimeout(Ot, ue);
+	}, At = typeof window < "u" && "onscrollend" in window, jt = () => {
+		M && !tt && (N(!0), et(!1));
+	}, Mt = v(Ue, (e) => {
+		V.current = e.target, jt();
+	}), Nt = v(We, (e) => {
+		let t = e.relatedTarget;
+		t !== null && !e.currentTarget.contains(t) && (V.current = null);
+	}), Pt = () => {
+		let e = G.current ?? (I ? "stop" : "start");
+		G.current = null, N(e === "stop"), et(e === "start");
+	}, Ft = () => {
+		U.current = null, K.current = null;
+	}, It = (e) => {
+		if (Ft(), e.target !== e.currentTarget || !A) return;
+		let t = getComputedStyle(e.currentTarget).direction === "rtl", n = {
+			ArrowRight: k + (t ? -1 : 1),
+			ArrowLeft: k + (t ? 1 : -1),
+			Home: 0,
+			End: T - 1
+		}[e.key];
+		n !== void 0 && (e.preventDefault(), q(n));
+	}, Lt = (e) => {
+		if (Ft(), !A || e.pointerType !== "mouse" || e.button !== 0) return;
+		let t = e.currentTarget, n = e.target.closest(de);
+		n && n !== t && t.contains(n) || (H.current = {
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startY: e.clientY,
+			startScroll: t.scrollLeft,
+			active: !1
+		});
+	}, Rt = (e) => {
+		let t = H.current;
+		if (!t || t.pointerId !== e.pointerId) return;
+		let n = e.currentTarget, r = e.clientX - t.startX, i = e.clientY - t.startY;
+		if (!t.active) {
+			if (Math.abs(i) >= le && Math.abs(i) > Math.abs(r)) {
+				H.current = null;
+				return;
+			}
+			if (Math.abs(r) < le) return;
+			t.active = !0, n.setPointerCapture(e.pointerId), n.style.scrollSnapType = "none", n.ownerDocument.getSelection()?.removeAllRanges(), st(!0);
+		}
+		n.scrollLeft = t.startScroll - r;
+	}, zt = (e, t) => {
+		let n = H.current;
+		if (!n || n.pointerId !== e.pointerId || (H.current = null, !n.active)) return;
+		let r = e.currentTarget;
+		if (r.style.scrollSnapType = "", st(!1), !t) {
+			pt((e) => e + 1);
+			return;
+		}
+		let i = (e) => {
+			e.preventDefault(), e.stopPropagation();
+		};
+		r.addEventListener("click", i, {
+			capture: !0,
+			once: !0
+		}), setTimeout(() => r.removeEventListener("click", i, { capture: !0 })), Dt(Et());
+	}, Bt = (e) => {
+		ut(e), h === "auto" && (W.current = e, q(e));
+	}, Vt = (e) => {
+		let t = W.current === e;
+		W.current = null, !(h === "auto" && t) && q(e);
+	}, Ht = (e) => {
+		W.current = null, o(e, e.currentTarget, "horizontal", fe);
+	}, Ut = {
+		...Be,
+		"--carousel-slide-size": typeof c == "number" ? `${c}px` : c
+	}, { viewport: J, track: Wt, slide: Gt, controls: Kt, tabList: Y, indicator: X, rotationButton: Z, previousButton: Q, nextButton: $, status: qt, empty: Jt } = S ?? {};
+	return /* @__PURE__ */ p(t, {
+		className: Re,
+		styles: be,
+		sx: ze,
+		children: (e) => /* @__PURE__ */ se("section", {
+			...qe,
+			ref: gt,
+			role: Ve,
+			"aria-roledescription": He ?? C.carouselRole,
+			"data-ui": "carousel",
+			"data-disabled": x || void 0,
+			"data-rotating": L || void 0,
+			className: e,
+			style: Ut,
+			onFocus: Mt,
+			onBlur: Nt,
+			onPointerEnter: v(Ge, (e) => {
+				e.pointerType !== "touch" && at(!0);
+			}),
+			onPointerLeave: v(Ke, () => at(!1)),
+			children: [
+				M && /* @__PURE__ */ p(s, {
+					size: "sm",
+					variant: "outline",
+					...Z,
+					css: [xe, Z?.css],
+					"data-ui": "carousel-rotation",
+					"aria-disabled": x || F || void 0,
+					onPointerDown: v(Z?.onPointerDown, () => {
+						G.current = I ? "stop" : "start";
+					}),
+					onClick: v(Z?.onClick, Pt),
+					children: I ? C.stopRotation : C.startRotation
+				}),
+				T === 0 ? /* @__PURE__ */ p("div", {
+					...Jt,
+					"data-ui": "carousel-empty",
+					css: [Me, Jt?.css],
+					children: C.empty
+				}) : /* @__PURE__ */ p("div", {
+					...J,
+					ref: _t,
+					role: "group",
+					"aria-label": J?.["aria-label"] ?? (J?.["aria-labelledby"] ? void 0 : C.slides),
+					tabIndex: A ? 0 : void 0,
+					"data-ui": "carousel-viewport",
+					"data-disabled": x || void 0,
+					"data-dragging": ot || void 0,
+					css: [Se, J?.css],
+					onKeyDown: v(J?.onKeyDown, It),
+					onWheel: v(J?.onWheel, Ft),
+					onPointerDown: v(J?.onPointerDown, Lt),
+					onPointerMove: v(J?.onPointerMove, Rt),
+					onPointerUp: v(J?.onPointerUp, (e) => zt(e, !0)),
+					onPointerCancel: v(J?.onPointerCancel, (e) => zt(e, !1)),
+					onScroll: v(J?.onScroll, At ? _ : kt),
+					onScrollEnd: v(J?.onScrollEnd, Ot),
+					children: /* @__PURE__ */ p("div", {
+						...Wt,
+						ref: B,
+						"data-ui": "carousel-track",
+						css: [Ce, Wt?.css],
+						children: w.map((e, t) => {
+							let n = t === k;
+							return /* @__PURE__ */ oe("div", {
+								...Gt,
+								key: y(e, t),
+								role: E ? "tabpanel" : void 0,
+								id: St(t),
+								"aria-labelledby": ye(Gt?.["aria-labelledby"], E ? Ct(t) : void 0),
+								"aria-hidden": !n || void 0,
+								inert: !n,
+								"data-ui": "carousel-slide",
+								"data-state": n ? "active" : "inactive",
+								css: [we, Gt?.css]
+							}, e);
+						})
+					})
+				}),
+				E && /* @__PURE__ */ se("div", {
+					...Kt,
+					"data-ui": "carousel-controls",
+					css: [Te, Kt?.css],
+					children: [
+						/* @__PURE__ */ p("div", {
+							...Y,
+							ref: vt,
+							role: "tablist",
+							"aria-label": Y?.["aria-label"] ?? (Y?.["aria-labelledby"] ? void 0 : C.chooseSlide),
+							"aria-orientation": "horizontal",
+							"data-ui": "carousel-tablist",
+							css: [Ee, Y?.css],
+							onKeyDown: v(Y?.onKeyDown, Ht),
+							children: w.map((e, t) => /* @__PURE__ */ oe("button", {
+								...X,
+								key: y(e, t),
+								type: "button",
+								role: "tab",
+								id: Ct(t),
+								"aria-label": Xe(t, T),
+								"aria-selected": t === k,
+								"aria-controls": St(t),
+								"aria-disabled": x || void 0,
+								tabIndex: t === dt ? 0 : -1,
+								"data-ui": "carousel-indicator",
+								css: [De, X?.css],
+								onPointerDown: v(X?.onPointerDown, () => {
+									W.current = null;
+								}),
+								onFocus: v(X?.onFocus, () => Bt(t)),
+								onClick: v(X?.onClick, () => Vt(t))
+							}, /* @__PURE__ */ p("span", { css: Oe })))
+						}),
+						/* @__PURE__ */ p(s, {
+							size: "sm",
+							variant: "outline",
+							...Q,
+							css: [ke, Q?.css],
+							"data-ui": "carousel-previous",
+							"aria-label": Q?.["aria-label"] ?? C.previous,
+							"aria-disabled": !A || k === 0 || void 0,
+							onClick: v(Q?.onClick, () => q(k - 1)),
+							children: /* @__PURE__ */ p(Ne, { direction: "previous" })
+						}),
+						/* @__PURE__ */ p(s, {
+							size: "sm",
+							variant: "outline",
+							...$,
+							css: [ke, $?.css],
+							"data-ui": "carousel-next",
+							"aria-label": $?.["aria-label"] ?? C.next,
+							"aria-disabled": !A || k === T - 1 || void 0,
+							onClick: v($?.onClick, () => q(k + 1)),
+							children: /* @__PURE__ */ p(Ne, { direction: "next" })
+						})
+					]
+				}),
+				E && /* @__PURE__ */ p("div", {
+					...qt,
+					role: "status",
+					"aria-live": L ? "off" : "polite",
+					"aria-atomic": "true",
+					"data-ui": "carousel-status",
+					css: [je, qt?.css],
+					children: Xe(k, T)
+				})
+			]
+		})
+	});
+}
+b.displayName = "Carousel";
+//#endregion
+export { b as t };

package/dist/carousel.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as Carousel } from "./carousel-IvPqN-oM.js";

package/dist/{checkbox-COYG6L7d.js → checkbox-cFquiSdy.js}

@@ -1,6 +1,6 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-D_eA_I-e.js";
+import { r as n } from "./media-8yrN85VT.js";
 import { t as r } from "./renderable-DzcIj1Lo.js";
 import { i, n as a, r as o, t as s } from "./choice-control-5kJkLXgv.js";
 import { useEffect as c, useId as l, useImperativeHandle as u, useRef as d } from "react";

package/dist/checkbox.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Checkbox } from "./checkbox-COYG6L7d.js";
+export { t as Checkbox } from "./checkbox-cFquiSdy.js";