@jfrader/ui 0.2.0 → 0.4.0

package/dist/radio-group-DPI5KUCj.js

@@ -1,136 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t, t as n } from "./media-D_eA_I-e.js";
-import { t as r } from "./use-controlled-state-CVXDa-qM.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-ByFogYcT.js";
-import { createContext as l, useContext as u, useId as d, useMemo as f } from "react";
-import { vars as p } from "@jfrader/tokens/vars";
-import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
-//#region src/components/radio-group/radio-group.tsx
-var g = l(null);
-function _(e) {
-	let t = u(g);
-	if (!t) throw Error(`RadioGroup.${e} must be rendered inside <RadioGroup>.`);
-	return t;
-}
-var v = "16px", y = {
-	vertical: e({
-		display: "grid",
-		justifyItems: "start",
-		gap: p.space[3]
-	}),
-	horizontal: e({
-		display: "flex",
-		flexWrap: "wrap",
-		alignItems: "flex-start",
-		gap: p.space[4]
-	})
-}, b = e({ "input:checked + span::after": { opacity: 1 } }), x = e({ minBlockSize: "32px" }), S = e({
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	flexShrink: 0,
-	boxSizing: "border-box",
-	inlineSize: v,
-	blockSize: v,
-	border: `1px solid ${p.color.borderControl}`,
-	borderRadius: p.radius.full,
-	backgroundColor: p.color.surfaceRaised,
-	transitionProperty: "background-color, border-color",
-	transitionDuration: p.motion.duration.fast,
-	transitionTimingFunction: p.motion.easeStandard,
-	"&::after": {
-		content: "\"\"",
-		inlineSize: "40%",
-		blockSize: "40%",
-		borderRadius: p.radius.full,
-		backgroundColor: p.color.accentContrast,
-		opacity: 0
-	},
-	[t]: { transitionDuration: "0s" },
-	[n]: { "&::after": { backgroundColor: "CanvasText" } }
-}), C = e({ fontSize: p.textSize.sm }), w = e({
-	marginInlineStart: `calc(${v} + ${p.space[2]})`,
-	fontSize: p.textSize.sm,
-	color: p.color.textMuted
-});
-function T({ ref: e, value: t, defaultValue: n, onValueChange: i, name: a, disabled: o = !1, orientation: s = "vertical", ...c }) {
-	let l = d(), u = a ?? l, [p, h] = r(t, n, i), _ = f(() => ({
-		value: p,
-		setValue: h,
-		name: u,
-		disabled: o
-	}), [
-		p,
-		h,
-		u,
-		o
-	]);
-	return /* @__PURE__ */ m(g.Provider, {
-		value: _,
-		children: /* @__PURE__ */ m("div", {
-			...c,
-			ref: e,
-			role: "radiogroup",
-			"aria-orientation": s,
-			"data-ui": "radio-group-root",
-			"data-orientation": s,
-			css: y[s]
-		})
-	});
-}
-T.displayName = "RadioGroup";
-function E({ ref: e, value: t, label: n, description: r, disabled: l, onChange: u, slotProps: f, className: p, "aria-labelledby": g, "aria-describedby": v, ...y }) {
-	let { value: T, setValue: E, name: D, disabled: O } = _("Radio"), k = O || l, A = d(), j = `${A}-label`, M = `${A}-description`, N = i(n), P = i(r), F = [g, N && j].filter(Boolean).join(" ") || void 0, I = [v, P && M].filter(Boolean).join(" ") || void 0, L = [p, f?.root?.className].filter(Boolean).join(" ") || void 0, R = (e) => {
-		u?.(e), e.currentTarget.checked && E(t);
-	};
-	return /* @__PURE__ */ h("label", {
-		"data-ui": "radio-group-radio",
-		className: L,
-		css: [
-			s,
-			b,
-			o,
-			f?.root?.css
-		],
-		children: [/* @__PURE__ */ h("span", {
-			css: [a, x],
-			children: [
-				/* @__PURE__ */ m("input", {
-					...y,
-					ref: e,
-					type: "radio",
-					name: D,
-					value: t,
-					checked: T === t,
-					disabled: k,
-					"aria-labelledby": F,
-					"aria-describedby": I,
-					onChange: R,
-					css: c
-				}),
-				/* @__PURE__ */ m("span", {
-					"aria-hidden": "true",
-					className: f?.control?.className,
-					css: [S, f?.control?.css]
-				}),
-				N && /* @__PURE__ */ m("span", {
-					id: j,
-					className: f?.label?.className,
-					css: [C, f?.label?.css],
-					children: n
-				})
-			]
-		}), P && /* @__PURE__ */ m("span", {
-			id: M,
-			className: f?.description?.className,
-			css: [w, f?.description?.css],
-			children: r
-		})]
-	});
-}
-E.displayName = "RadioGroup.Radio";
-var D = Object.assign(T, { Radio: E });
-//#endregion
-export { D as t };

package/dist/select-C1xGrOhT.js

@@ -1,266 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { t } from "./use-controlled-state-CVXDa-qM.js";
-import { a as n, c as r, d as i, f as a, l as o, o as s, r as c, s as l, t as u, u as d } from "./collection-registry-1l9f3XJZ.js";
-import { t as f } from "./trigger-style-B1GFmH7M.js";
-import { t as p } from "./use-overlay-floating-efeqppiw.js";
-import { createContext as m, useContext as h, useId as g, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
-import { vars as x } from "@jfrader/tokens/vars";
-import { jsx as S, jsxs as C } from "@emotion/react/jsx-runtime";
-import { FloatingList as w, FloatingPortal as T, useClick as E, useDismiss as D, useInteractions as O, useListNavigation as k, useMergeRefs as A, useRole as j } from "@floating-ui/react";
-//#region src/components/select/select.tsx
-var M = 500, N = new Intl.Collator(void 0, {
-	usage: "search",
-	sensitivity: "base"
-}), P = "✓", F = m(null), I = m(!1);
-function L(e) {
-	let t = h(F);
-	if (!t) throw Error(`Select.${e} must be rendered inside <Select>.`);
-	return t;
-}
-function R() {
-	let e = L("Item");
-	if (!h(I)) throw Error("Select.Item must be rendered inside <Select.Content>.");
-	return e;
-}
-var z = e({
-	justifyContent: "flex-start",
-	minInlineSize: "180px",
-	"&[aria-expanded=\"true\"]": { backgroundColor: x.color.surfaceHover }
-}), B = e({
-	overflow: "hidden",
-	textOverflow: "ellipsis",
-	whiteSpace: "nowrap",
-	"&[data-placeholder]": { color: x.color.textMuted }
-});
-function V({ value: e, defaultValue: r, onValueChange: i, open: a, defaultOpen: o = !1, onOpenChange: s, placement: c = "bottom-start", disabled: l = !1, name: u, children: d }) {
-	let f = g(), [m, h] = t(e, r, i), [_ = !1, x] = t(a, o, s), [w, T] = b(null), [A, M] = b(!1), [P, I] = n(), [L, R] = b(null), z = y([]), B = y([]), V = y(null);
-	!_ && A && (M(!1), T(null));
-	let { valuesByIndex: H, disabledIndices: U } = v(() => {
-		let e = [], t = /* @__PURE__ */ new Set();
-		return P.forEach((n, r) => {
-			n.index !== -1 && (e[n.index] = r, n.disabled && t.add(n.index));
-		}), {
-			valuesByIndex: e,
-			disabledIndices: t
-		};
-	}, [P]), W = m === void 0 ? void 0 : P.get(m), G = W && W.index !== -1 ? W.index : null, { refs: K, floatingStyles: q, context: J } = p({
-		open: _,
-		placement: c,
-		onOpenChange: (e) => x(e)
-	}), Y = E(J), X = j(J, { role: "listbox" }), ee = D(J, {
-		escapeKey: !0,
-		outsidePress: !0
-	}), te = k(J, {
-		listRef: z,
-		activeIndex: w,
-		onNavigate: T,
-		virtual: !0,
-		virtualItemRef: V,
-		loop: !0,
-		focusItemOnOpen: !0,
-		selectedIndex: A ? null : G,
-		disabledIndices: (e) => U.has(e)
-	}), { getReferenceProps: Z, getFloatingProps: Q, getItemProps: $ } = O([
-		Y,
-		X,
-		ee,
-		te
-	]), ne = v(() => {
-		let e = (e) => {
-			h(e), x(!1);
-		};
-		return {
-			baseId: f,
-			open: _,
-			disabled: l,
-			selectedValue: m,
-			activeIndex: w,
-			options: P,
-			triggerLabelling: L,
-			refs: K,
-			floatingStyles: q,
-			elementsRef: z,
-			labelsRef: B,
-			getReferenceProps: Z,
-			getFloatingProps: Q,
-			getItemProps: $,
-			selectValue: e,
-			matchTypeahead: (e) => {
-				let t = B.current, n = w ?? -1;
-				for (let r = 1; r <= t.length; r += 1) {
-					let i = (n + r) % t.length, a = t[i];
-					if (!(a == null || U.has(i)) && N.compare(a.slice(0, e.length), e) === 0) {
-						T(i), _ || (M(!0), x(!0));
-						return;
-					}
-				}
-			},
-			selectIndex: (t) => {
-				let n = H[t];
-				n === void 0 || U.has(t) || e(n);
-			},
-			requestOpenChange: x,
-			registration: I,
-			setTriggerLabelling: R
-		};
-	}, [
-		f,
-		_,
-		l,
-		m,
-		w,
-		P,
-		L,
-		K,
-		q,
-		Z,
-		Q,
-		$,
-		H,
-		U,
-		h,
-		x,
-		I
-	]);
-	return /* @__PURE__ */ C(F.Provider, {
-		value: ne,
-		children: [d, u !== void 0 && /* @__PURE__ */ S("input", {
-			type: "hidden",
-			name: u,
-			value: m ?? "",
-			disabled: l
-		})]
-	});
-}
-V.displayName = "Select";
-function H({ ref: e, id: t, disabled: n, onKeyDown: r, ...i }) {
-	let { baseId: a, open: o, disabled: s, activeIndex: c, refs: l, getReferenceProps: u, selectIndex: d, matchTypeahead: p, requestOpenChange: m, setTriggerLabelling: h } = L("Trigger"), g = A([l.setReference, e]), v = y({
-		search: "",
-		lastKeyAt: 0
-	}), b = t ?? `${a}-trigger`, x = i["aria-labelledby"], C = i["aria-label"];
-	_(() => (h({
-		id: b,
-		labelledBy: x,
-		label: C
-	}), () => h(null)), [
-		b,
-		x,
-		C,
-		h
-	]);
-	let w = (e) => {
-		if (r?.(e), !(e.defaultPrevented || s || n)) {
-			if (e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.altKey && !e.metaKey) {
-				let t = performance.now(), n = v.current, r = (t - n.lastKeyAt > M ? "" : n.search) + e.key;
-				v.current = {
-					search: r,
-					lastKeyAt: t
-				}, p(r);
-			} else o && (e.key === "Tab" ? m(!1) : (e.key === "Enter" || e.key === " ") && c !== null && (e.preventDefault(), d(c)));
-		}
-	};
-	return /* @__PURE__ */ S("button", {
-		type: "button",
-		...u({
-			...i,
-			id: b,
-			disabled: s || n,
-			onKeyDown: w
-		}),
-		ref: g,
-		"data-state": o ? "open" : "closed",
-		"data-ui": "select-trigger",
-		css: [f, z]
-	});
-}
-H.displayName = "Select.Trigger";
-function U({ ref: e, placeholder: t, ...n }) {
-	let { selectedValue: r, options: i } = L("Value"), a = r === void 0 ? void 0 : i.get(r)?.label, o = a === void 0;
-	return /* @__PURE__ */ S("span", {
-		...n,
-		ref: e,
-		"data-placeholder": o || void 0,
-		"data-ui": "select-value",
-		css: B,
-		children: o ? t : a
-	});
-}
-U.displayName = "Select.Value";
-function W({ ref: e, style: t, onMouseDown: n, children: r, ...o }) {
-	let { open: s, triggerLabelling: c, refs: l, floatingStyles: u, elementsRef: d, getFloatingProps: f } = L("Content"), p = A([s ? l.setFloating : null, e]), m = o["aria-labelledby"] !== void 0 || o["aria-label"] !== void 0 ? {} : c?.labelledBy === void 0 ? c?.label === void 0 ? { "aria-labelledby": c?.id } : { "aria-label": c.label } : { "aria-labelledby": c.labelledBy }, h = (e) => {
-		n?.(e), e.preventDefault();
-	};
-	return /* @__PURE__ */ S(T, { children: /* @__PURE__ */ S("div", {
-		...f({
-			...m,
-			...o,
-			onMouseDown: h
-		}),
-		ref: p,
-		hidden: !s,
-		"data-state": s ? "open" : "closed",
-		"data-ui": "select-listbox",
-		style: {
-			...t,
-			...u
-		},
-		css: [a, i],
-		children: /* @__PURE__ */ S(w, {
-			elementsRef: d,
-			children: /* @__PURE__ */ S(I.Provider, {
-				value: !0,
-				children: r
-			})
-		})
-	}) });
-}
-W.displayName = "Select.Content";
-function G({ ref: e, value: t, disabled: n = !1, onClick: i, children: a, ...f }) {
-	let { baseId: p, selectedValue: m, activeIndex: h, labelsRef: g, getItemProps: _, selectValue: v, registration: b } = R(), x = y(null), { ref: w, index: T } = c(t, b, x, (e, t) => ({
-		index: e,
-		label: t,
-		disabled: n
-	}), {
-		labelsRef: g,
-		include: !n
-	}), E = A([w, e]), D = T !== -1 && h === T, O = m === t, k = (e) => {
-		i?.(e), !(n || e.defaultPrevented) && v(t);
-	};
-	return /* @__PURE__ */ C("div", {
-		..._({
-			id: u(p, t),
-			...f,
-			onClick: k
-		}),
-		ref: E,
-		role: "option",
-		"aria-selected": O,
-		"aria-disabled": n || void 0,
-		"data-active": D || void 0,
-		"data-ui": "select-item",
-		css: [
-			l,
-			s,
-			o
-		],
-		children: [/* @__PURE__ */ S("span", {
-			ref: x,
-			css: d,
-			children: a
-		}), O && /* @__PURE__ */ S("span", {
-			"aria-hidden": "true",
-			css: r,
-			children: P
-		})]
-	});
-}
-G.displayName = "Select.Item";
-var K = Object.assign(V, {
-	Trigger: H,
-	Value: U,
-	Content: W,
-	Item: G
-});
-//#endregion
-export { K as t };

package/dist/skeleton-DitdP-yz.js

@@ -1,49 +0,0 @@
-'use client';
-import { n as e, t } from "./css-Cgj6sCHn.js";
-import { n } from "./media-D_eA_I-e.js";
-import { vars as r } from "@jfrader/tokens/vars";
-import { jsx as i } from "@emotion/react/jsx-runtime";
-//#region src/components/skeleton/skeleton.tsx
-var a = e({
-	from: { backgroundPosition: "200% 0" },
-	to: { backgroundPosition: "-100% 0" }
-}), o = t({
-	display: "block",
-	inlineSize: "100%",
-	blockSize: "1em",
-	flexShrink: 0,
-	borderRadius: r.radius.sm,
-	backgroundColor: r.color.surfaceHover,
-	backgroundImage: `linear-gradient(90deg, transparent, ${r.color.border}, transparent)`,
-	backgroundSize: "200% 100%",
-	backgroundRepeat: "no-repeat",
-	animation: `${a} 1.6s ease-in-out infinite`,
-	"&:dir(rtl)": { animationDirection: "reverse" },
-	[n]: {
-		animation: "none",
-		backgroundImage: "none"
-	}
-}), s = t({
-	inlineSize: r.space[10],
-	blockSize: "auto",
-	aspectRatio: "1",
-	borderRadius: r.radius.full
-});
-function c({ ref: e, width: t, height: n, circle: r = !1, radius: a, style: c, ...l }) {
-	return /* @__PURE__ */ i("div", {
-		...l,
-		ref: e,
-		"aria-hidden": "true",
-		"data-ui": "skeleton",
-		style: {
-			inlineSize: t,
-			blockSize: n,
-			borderRadius: r ? void 0 : a,
-			...c
-		},
-		css: [o, r && s]
-	});
-}
-c.displayName = "Skeleton";
-//#endregion
-export { c as t };

package/dist/spinner-CFq5HPoo.js

@@ -1,51 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t } from "./media-D_eA_I-e.js";
-import { t as n } from "./visually-hidden-DCWhf0Cb.js";
-import { n as r, t as i } from "./loading-ring-BpdB0aFi.js";
-import { vars as a } from "@jfrader/tokens/vars";
-import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
-//#region src/components/spinner/spinner.tsx
-var c = e({
-	position: "relative",
-	display: "inline-flex",
-	verticalAlign: "middle"
-}), l = e({
-	...i,
-	flexShrink: 0,
-	boxSizing: "border-box",
-	[t]: { animation: `${r} 1.6s ease-in-out infinite alternate` }
-}), u = {
-	sm: e({
-		inlineSize: a.space[4],
-		blockSize: a.space[4]
-	}),
-	md: e({
-		inlineSize: a.space[5],
-		blockSize: a.space[5]
-	}),
-	lg: e({
-		inlineSize: a.space[6],
-		blockSize: a.space[6]
-	})
-};
-function d({ ref: e, size: t = "md", label: r = "Loading", ...i }) {
-	return /* @__PURE__ */ s("span", {
-		...i,
-		ref: e,
-		role: "status",
-		"data-ui": "spinner",
-		css: c,
-		children: [/* @__PURE__ */ o("span", {
-			"aria-hidden": "true",
-			"data-ui": "spinner-indicator",
-			css: [l, u[t]]
-		}), /* @__PURE__ */ o("span", {
-			css: n,
-			children: r
-		})]
-	});
-}
-d.displayName = "Spinner";
-//#endregion
-export { d as t };

package/dist/stack-D_g6NJzo.js

@@ -1,21 +0,0 @@
-'use client';
-import { t as e } from "./layout-style-7ZTOiWGR.js";
-import { jsx as t } from "@emotion/react/jsx-runtime";
-//#region src/components/stack/stack.tsx
-function n({ ref: n, gap: r = "md", align: i, justify: a, wrap: o, ...s }) {
-	return /* @__PURE__ */ t("div", {
-		...s,
-		ref: n,
-		"data-ui": "stack",
-		css: e({
-			direction: "column",
-			gap: r,
-			align: i,
-			justify: a,
-			wrap: o
-		})
-	});
-}
-n.displayName = "Stack";
-//#endregion
-export { n as t };

package/dist/switch-B5TTU-oJ.js

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