@jfrader/ui 0.1.2 → 0.2.0

package/dist/popover-DRHbeIVq.js

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

package/dist/popover.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Popover } from "./popover-CVAZ_C1a.js";
+export { t as Popover } from "./popover-DRHbeIVq.js";

package/dist/{progress-C8bgujFI.js → progress-CpsskKTD.js}

@@ -3,58 +3,58 @@ import { n as e, t } from "./css-Cgj6sCHn.js";
 import { n, t as r } from "./media-D_eA_I-e.js";
 import { t as i } from "./visually-hidden-DCWhf0Cb.js";
 import { t as a } from "./renderable-DzcIj1Lo.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";
+import { useId as o } from "react";
+import { vars as s } from "@jfrader/tokens/vars";
+import { jsx as c, jsxs as l } 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({
+var u = "40%", d = "1.4s ease-in-out infinite", f = 100, p = e({
 	from: { transform: "translateX(-100%)" },
 	to: { transform: "translateX(250%)" }
-}), h = e({
+}), m = e({
 	from: { transform: "translateX(100%)" },
 	to: { transform: "translateX(-250%)" }
-}), g = t({
+}), h = 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({
+	backgroundColor: s.color.surfaceHover,
+	border: `1px solid ${s.color.borderSubtle}`,
+	borderRadius: s.radius.full
+}), g = t({
 	blockSize: "100%",
-	backgroundColor: c.color.accent,
-	borderRadius: c.radius.full,
+	backgroundColor: s.color.accent,
+	borderRadius: s.radius.full,
 	transitionProperty: "width",
-	transitionDuration: c.motion.duration.base,
-	transitionTimingFunction: c.motion.easeStandard,
+	transitionDuration: s.motion.duration.base,
+	transitionTimingFunction: s.motion.easeStandard,
 	[n]: { transitionDuration: "0s" },
 	[r]: {
 		forcedColorAdjust: "none",
 		backgroundColor: "Highlight"
 	}
-}), v = t({
-	inlineSize: d,
-	animation: `${m} ${f}`,
-	"&:dir(rtl)": { animation: `${h} ${f}` },
+}), _ = t({
+	inlineSize: u,
+	animation: `${p} ${d}`,
+	"&:dir(rtl)": { animation: `${m} ${d}` },
 	[n]: {
 		"&, &:dir(rtl)": { animation: "none" },
 		opacity: .7
 	}
 });
-function y(e, t) {
-	let n = Number.isFinite(t) && t > 0 ? t : p;
+function v(e, t) {
+	let n = Number.isFinite(t) && t > 0 ? t : f;
 	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,
+function y({ ref: e, value: t, max: n = f, label: r, getValueLabel: s, slotProps: u, "aria-labelledby": d, ...p }) {
+	let m = `${o()}-label`, y = a(r), b = [d, y && m].filter(Boolean).join(" ") || void 0, { value: x, max: S } = v(t, n), C = x === void 0, w = x === void 0 ? 0 : x / S * 100;
+	return /* @__PURE__ */ l("div", {
+		...p,
+		ref: e,
 		role: "progressbar",
 		"data-ui": "progress",
 		"data-state": C ? "indeterminate" : "determinate",
@@ -62,23 +62,24 @@ var b = o(function({ value: e, max: t = p, label: n, getValueLabel: r, slotProps
 		"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", {
+		"aria-valuetext": x === void 0 ? void 0 : s?.(x, S),
+		css: h,
+		children: [y && /* @__PURE__ */ c("span", {
 			id: m,
 			css: i,
-			children: n
-		}), /* @__PURE__ */ l("div", {
+			children: r
+		}), /* @__PURE__ */ c("div", {
 			"data-ui": "progress-indicator",
-			className: o?.indicator?.className,
+			className: u?.indicator?.className,
 			style: C ? void 0 : { width: `${w}%` },
 			css: [
-				_,
-				C && v,
-				o?.indicator?.css
+				g,
+				C && _,
+				u?.indicator?.css
 			]
 		})]
 	});
-});
+}
+y.displayName = "Progress";
 //#endregion
-export { b as t };
+export { y as t };

package/dist/progress.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Progress } from "./progress-C8bgujFI.js";
+export { t as Progress } from "./progress-CpsskKTD.js";

package/dist/radio-group-DPI5KUCj.js

@@ -0,0 +1,136 @@
+'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/radio-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as RadioGroup } from "./radio-group-CvQ4x8ii.js";
+export { t as RadioGroup } from "./radio-group-DPI5KUCj.js";

package/dist/select-C1xGrOhT.js

@@ -0,0 +1,266 @@
+'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/select.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Select } from "./select-CNNiUhKB.js";
+export { t as Select } from "./select-C1xGrOhT.js";

package/dist/skeleton-DitdP-yz.js

@@ -0,0 +1,49 @@
+'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 };