@jfrader/ui 0.4.0 → 0.5.1

package/dist/popover-CdRXjQqI.js

@@ -1,113 +0,0 @@
-'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { t as n } from "./use-controlled-state-CVXDa-qM.js";
-import { t as r } from "./trigger-style-B1KVC8O1.js";
-import { n as i } from "./surface-DZ4d-2aL.js";
-import { n as a, t as o } from "./use-overlay-floating-Bit-f0FU.js";
-import { createContext as s, useContext as c, useEffect as l, useMemo as u, useRef as d } from "react";
-import { vars as f } from "@jfrader/tokens/vars";
-import { jsx as p } from "@emotion/react/jsx-runtime";
-import { FloatingFocusManager as m, useClick as h, useDismiss as g, useInteractions as _, useMergeRefs as v, useRole as y } from "@floating-ui/react";
-//#region src/components/popover/popover.tsx
-var b = s(null);
-function x(e) {
-	let t = c(b);
-	if (!t) throw Error(`Popover.${e} must be rendered inside <Popover>.`);
-	return t;
-}
-var S = e({
-	...i,
-	borderRadius: f.radius.lg,
-	boxShadow: f.shadow.overlay,
-	padding: f.space[4],
-	minInlineSize: "200px",
-	maxInlineSize: "min(360px, calc(100vw - 32px))",
-	fontSize: f.textSize.sm
-});
-function C({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: i = "bottom", children: a }) {
-	let [s = !1, c] = n(e, t, r), f = d(!1), { refs: m, floatingStyles: v, context: x } = o({
-		open: s,
-		placement: i,
-		onOpenChange: (e, t, n) => {
-			e || (f.current = n === "escape-key"), c(e);
-		}
-	});
-	l(() => {
-		!s && f.current && (f.current = !1, m.domReference.current?.focus());
-	}, [s, m]);
-	let S = h(x), C = g(x, {
-		escapeKey: !0,
-		outsidePress: !0
-	}), w = y(x, { role: "dialog" }), { getReferenceProps: T, getFloatingProps: E } = _([
-		S,
-		C,
-		w
-	]), D = u(() => ({
-		open: s,
-		refs: m,
-		floatingContext: x,
-		floatingStyles: v,
-		getReferenceProps: T,
-		getFloatingProps: E
-	}), [
-		s,
-		m,
-		x,
-		v,
-		T,
-		E
-	]);
-	return /* @__PURE__ */ p(b.Provider, {
-		value: D,
-		children: a
-	});
-}
-C.displayName = "Popover";
-function w({ ref: e, className: n, sx: i, ...a }) {
-	let { refs: o, getReferenceProps: s } = x("Trigger"), c = v([o.setReference, e]);
-	return /* @__PURE__ */ p(t, {
-		className: n,
-		styles: r,
-		sx: i,
-		children: (e) => /* @__PURE__ */ p("button", {
-			type: "button",
-			...s(a),
-			ref: c,
-			"data-ui": "popover-trigger",
-			className: e
-		})
-	});
-}
-w.displayName = "Popover.Trigger";
-function T({ ref: e, style: n, className: r, sx: i, ...o }) {
-	let { open: s, refs: c, floatingContext: l, floatingStyles: u, getFloatingProps: d } = x("Content"), f = v([c.setFloating, e]);
-	return s ? /* @__PURE__ */ p(a, { children: /* @__PURE__ */ p(m, {
-		context: l,
-		modal: !1,
-		initialFocus: -1,
-		returnFocus: !1,
-		closeOnFocusOut: !1,
-		children: /* @__PURE__ */ p(t, {
-			className: r,
-			styles: S,
-			sx: i,
-			children: (e) => /* @__PURE__ */ p("div", {
-				...d(o),
-				ref: f,
-				"data-ui": "popover",
-				style: {
-					...n,
-					...u
-				},
-				className: e
-			})
-		})
-	}) }) : null;
-}
-T.displayName = "Popover.Content";
-var E = Object.assign(C, {
-	Trigger: w,
-	Content: T
-});
-//#endregion
-export { E as t };

package/dist/select-BgG7WgSh.js

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

package/dist/switch-Dr-qjmT4.js

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