@jfrader/ui 0.1.1 → 0.2.0

package/dist/progress-XdvBG0Vv.js

@@ -1,83 +0,0 @@
-import { n as e, t } from "./css-CW_HG55W.js";
-import { n, t as r } from "./media-8K3xDAxM.js";
-import { t as i } from "./visually-hidden-BXVyhj0y.js";
-import { t as a } from "./renderable-DwPvt1I8.js";
-import { forwardRef as o, 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/progress/progress.tsx
-var d = "40%", f = "1.4s ease-in-out infinite", p = 100, m = e({
-	from: { transform: "translateX(-100%)" },
-	to: { transform: "translateX(250%)" }
-}), h = e({
-	from: { transform: "translateX(100%)" },
-	to: { transform: "translateX(-250%)" }
-}), g = t({
-	position: "relative",
-	display: "block",
-	boxSizing: "border-box",
-	blockSize: "4px",
-	overflow: "hidden",
-	backgroundColor: c.color.surfaceHover,
-	border: `1px solid ${c.color.borderSubtle}`,
-	borderRadius: c.radius.full
-}), _ = t({
-	blockSize: "100%",
-	backgroundColor: c.color.accent,
-	borderRadius: c.radius.full,
-	transitionProperty: "width",
-	transitionDuration: c.motion.duration.base,
-	transitionTimingFunction: c.motion.easeStandard,
-	[n]: { transitionDuration: "0s" },
-	[r]: {
-		forcedColorAdjust: "none",
-		backgroundColor: "Highlight"
-	}
-}), v = t({
-	inlineSize: d,
-	animation: `${m} ${f}`,
-	"&:dir(rtl)": { animation: `${h} ${f}` },
-	[n]: {
-		"&, &:dir(rtl)": { animation: "none" },
-		opacity: .7
-	}
-});
-function y(e, t) {
-	let n = Number.isFinite(t) && t > 0 ? t : p;
-	return {
-		value: e === void 0 ? void 0 : Math.min(Math.max(Number.isFinite(e) ? e : 0, 0), n),
-		max: n
-	};
-}
-var b = o(function({ value: e, max: t = p, label: n, getValueLabel: r, slotProps: o, "aria-labelledby": c, ...d }, f) {
-	let m = `${s()}-label`, h = a(n), b = [c, h && m].filter(Boolean).join(" ") || void 0, { value: x, max: S } = y(e, t), C = x === void 0, w = x === void 0 ? 0 : x / S * 100;
-	return /* @__PURE__ */ u("div", {
-		...d,
-		ref: f,
-		role: "progressbar",
-		"data-ui": "progress",
-		"data-state": C ? "indeterminate" : "determinate",
-		"aria-labelledby": b,
-		"aria-valuemin": 0,
-		"aria-valuemax": S,
-		"aria-valuenow": x,
-		"aria-valuetext": x === void 0 ? void 0 : r?.(x, S),
-		css: g,
-		children: [h && /* @__PURE__ */ l("span", {
-			id: m,
-			css: i,
-			children: n
-		}), /* @__PURE__ */ l("div", {
-			"data-ui": "progress-indicator",
-			className: o?.indicator?.className,
-			style: C ? void 0 : { width: `${w}%` },
-			css: [
-				_,
-				C && v,
-				o?.indicator?.css
-			]
-		})]
-	});
-});
-//#endregion
-export { b as t };

package/dist/radio-group-CxMJ2Vq7.js

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

package/dist/select-mwFbmzsn.js

@@ -1,256 +0,0 @@
-import { t as e } from "./css-CW_HG55W.js";
-import { t } from "./use-controlled-state-DQXkiTQI.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-C2jnQa7X.js";
-import { t as f } from "./trigger-style-f54idgjT.js";
-import { t as p } from "./use-overlay-floating-CsZd3qxa.js";
-import { createContext as m, forwardRef as h, useContext as g, useId as _, useLayoutEffect as v, useMemo as y, useRef as b, useState as x } from "react";
-import { vars as S } from "@jfrader/tokens/vars";
-import { jsx as C, jsxs as w } from "@emotion/react/jsx-runtime";
-import { FloatingList as T, FloatingPortal 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 = m(null), L = m(!1);
-function R(e) {
-	let t = g(I);
-	if (!t) throw Error(`Select.${e} must be rendered inside <Select>.`);
-	return t;
-}
-function z() {
-	let e = R("Item");
-	if (!g(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: S.color.surfaceHover }
-}), V = e({
-	overflow: "hidden",
-	textOverflow: "ellipsis",
-	whiteSpace: "nowrap",
-	"&[data-placeholder]": { color: S.color.textMuted }
-});
-function H({ 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 = _(), [m, h] = t(e, r, i), [g = !1, v] = t(a, o, s), [S, T] = x(null), [E, j] = x(!1), [N, F] = n(), [L, R] = x(null), z = b([]), B = b([]), V = b(null);
-	!g && E && (j(!1), T(null));
-	let { valuesByIndex: H, disabledIndices: U } = y(() => {
-		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 = m === void 0 ? void 0 : N.get(m), G = W && W.index !== -1 ? W.index : null, { refs: K, floatingStyles: q, context: J } = p({
-		open: g,
-		placement: c,
-		onOpenChange: (e) => v(e)
-	}), Y = D(J), X = M(J, { role: "listbox" }), ee = O(J, {
-		escapeKey: !0,
-		outsidePress: !0
-	}), te = A(J, {
-		listRef: z,
-		activeIndex: S,
-		onNavigate: T,
-		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 = y(() => {
-		let e = (e) => {
-			h(e), v(!1);
-		};
-		return {
-			baseId: f,
-			open: g,
-			disabled: l,
-			selectedValue: m,
-			activeIndex: S,
-			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 = S ?? -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) {
-						T(i), g || (j(!0), v(!0));
-						return;
-					}
-				}
-			},
-			selectIndex: (t) => {
-				let n = H[t];
-				n === void 0 || U.has(t) || e(n);
-			},
-			requestOpenChange: v,
-			registration: F,
-			setTriggerLabelling: R
-		};
-	}, [
-		f,
-		g,
-		l,
-		m,
-		S,
-		N,
-		L,
-		K,
-		q,
-		Z,
-		Q,
-		$,
-		H,
-		U,
-		h,
-		v,
-		F
-	]);
-	return /* @__PURE__ */ w(I.Provider, {
-		value: ne,
-		children: [d, u !== void 0 && /* @__PURE__ */ C("input", {
-			type: "hidden",
-			name: u,
-			value: m ?? "",
-			disabled: l
-		})]
-	});
-}
-var U = h(function({ id: e, disabled: t, onKeyDown: n, ...r }, i) {
-	let { baseId: a, open: o, disabled: s, activeIndex: c, refs: l, getReferenceProps: u, selectIndex: d, matchTypeahead: p, requestOpenChange: m, setTriggerLabelling: h } = R("Trigger"), g = j([l.setReference, i]), _ = b({
-		search: "",
-		lastKeyAt: 0
-	}), y = e ?? `${a}-trigger`, x = r["aria-labelledby"], S = r["aria-label"];
-	v(() => (h({
-		id: y,
-		labelledBy: x,
-		label: S
-	}), () => h(null)), [
-		y,
-		x,
-		S,
-		h
-	]);
-	let w = (e) => {
-		if (n?.(e), !(e.defaultPrevented || s || t)) {
-			if (e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.altKey && !e.metaKey) {
-				let t = performance.now(), n = _.current, r = (t - n.lastKeyAt > N ? "" : n.search) + e.key;
-				_.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__ */ C("button", {
-		type: "button",
-		...u({
-			...r,
-			id: y,
-			disabled: s || t,
-			onKeyDown: w
-		}),
-		ref: g,
-		"data-state": o ? "open" : "closed",
-		"data-ui": "select-trigger",
-		css: [f, B]
-	});
-}), W = h(function({ placeholder: e, ...t }, n) {
-	let { selectedValue: r, options: i } = R("Value"), a = r === void 0 ? void 0 : i.get(r)?.label, o = a === void 0;
-	return /* @__PURE__ */ C("span", {
-		...t,
-		ref: n,
-		"data-placeholder": o || void 0,
-		"data-ui": "select-value",
-		css: V,
-		children: o ? e : a
-	});
-}), G = h(function({ style: e, onMouseDown: t, children: n, ...r }, o) {
-	let { open: s, triggerLabelling: c, refs: l, floatingStyles: u, elementsRef: d, getFloatingProps: f } = R("Content"), p = j([s ? l.setFloating : null, o]), m = r["aria-labelledby"] !== void 0 || r["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) => {
-		t?.(e), e.preventDefault();
-	};
-	return /* @__PURE__ */ C(E, { children: /* @__PURE__ */ C("div", {
-		...f({
-			...m,
-			...r,
-			onMouseDown: h
-		}),
-		ref: p,
-		hidden: !s,
-		"data-state": s ? "open" : "closed",
-		"data-ui": "select-listbox",
-		style: {
-			...e,
-			...u
-		},
-		css: [a, i],
-		children: /* @__PURE__ */ C(T, {
-			elementsRef: d,
-			children: /* @__PURE__ */ C(L.Provider, {
-				value: !0,
-				children: n
-			})
-		})
-	}) });
-}), K = h(function({ value: e, disabled: t = !1, onClick: n, children: i, ...a }, f) {
-	let { baseId: p, selectedValue: m, activeIndex: h, labelsRef: g, getItemProps: _, selectValue: v, registration: y } = z(), x = b(null), { ref: S, index: T } = c(e, y, x, (e, n) => ({
-		index: e,
-		label: n,
-		disabled: t
-	}), {
-		labelsRef: g,
-		include: !t
-	}), E = j([S, f]), D = T !== -1 && h === T, O = m === e, k = (r) => {
-		n?.(r), !(t || r.defaultPrevented) && v(e);
-	};
-	return /* @__PURE__ */ w("div", {
-		..._({
-			id: u(p, e),
-			...a,
-			onClick: k
-		}),
-		ref: E,
-		role: "option",
-		"aria-selected": O,
-		"aria-disabled": t || void 0,
-		"data-active": D || void 0,
-		"data-ui": "select-item",
-		css: [
-			l,
-			s,
-			o
-		],
-		children: [/* @__PURE__ */ C("span", {
-			ref: x,
-			css: d,
-			children: i
-		}), O && /* @__PURE__ */ C("span", {
-			"aria-hidden": "true",
-			css: r,
-			children: F
-		})]
-	});
-}), q = Object.assign(H, {
-	Trigger: U,
-	Value: W,
-	Content: G,
-	Item: K
-});
-//#endregion
-export { q as t };

package/dist/skeleton-qas9ZKK9.js

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

package/dist/spinner-ros2CfIf.js

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

package/dist/stack-Hs8THnIL.js

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