@jfrader/ui 0.1.2 → 0.2.0

package/dist/pill-CrVqffKM.js

@@ -1,50 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { forwardRef as t } from "react";
-import { vars as n } from "@jfrader/tokens/vars";
-import { jsx as r } from "@emotion/react/jsx-runtime";
-//#region src/components/pill/pill.tsx
-var i = e({
-	display: "inline-flex",
-	alignItems: "center",
-	boxSizing: "border-box",
-	blockSize: n.space[5],
-	paddingInline: n.space[2],
-	borderRadius: n.radius.full,
-	fontSize: n.textSize.xs,
-	fontWeight: n.fontWeight.medium,
-	lineHeight: 1,
-	whiteSpace: "nowrap",
-	verticalAlign: "middle"
-}), a = {
-	neutral: e({
-		backgroundColor: n.color.surfaceHover,
-		color: n.color.textMuted
-	}),
-	accent: e({
-		backgroundColor: n.color.accentSoft,
-		color: n.color.accentText
-	}),
-	success: e({
-		backgroundColor: n.color.successSoft,
-		color: n.color.success
-	}),
-	warning: e({
-		backgroundColor: n.color.warningSoft,
-		color: n.color.warning
-	}),
-	danger: e({
-		backgroundColor: n.color.dangerSoft,
-		color: n.color.dangerText
-	})
-}, o = t(function({ tone: e = "neutral", ...t }, n) {
-	return /* @__PURE__ */ r("span", {
-		...t,
-		ref: n,
-		"data-ui": "pill",
-		"data-tone": e,
-		css: [i, a[e]]
-	});
-});
-//#endregion
-export { o as t };

package/dist/popover-CVAZ_C1a.js

@@ -1,98 +0,0 @@
-'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, forwardRef as o, useContext as s, useEffect as c, useMemo as l, useRef as u } from "react";
-import { vars as d } from "@jfrader/tokens/vars";
-import { jsx as f } from "@emotion/react/jsx-runtime";
-import { FloatingFocusManager as p, FloatingPortal 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 = a(null);
-function x(e) {
-	let t = s(b);
-	if (!t) throw Error(`Popover.${e} must be rendered inside <Popover>.`);
-	return t;
-}
-var S = e({
-	...r,
-	borderRadius: d.radius.lg,
-	boxShadow: d.shadow.overlay,
-	padding: d.space[4],
-	minInlineSize: "200px",
-	maxInlineSize: "min(360px, calc(100vw - 32px))",
-	fontSize: d.textSize.sm
-});
-function C({ open: e, defaultOpen: n = !1, onOpenChange: r, placement: a = "bottom", children: o }) {
-	let [s = !1, d] = t(e, n, r), p = u(!1), { refs: m, floatingStyles: v, context: x } = i({
-		open: s,
-		placement: a,
-		onOpenChange: (e, t, n) => {
-			e || (p.current = n === "escape-key"), d(e);
-		}
-	});
-	c(() => {
-		!s && p.current && (p.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 = l(() => ({
-		open: s,
-		refs: m,
-		floatingContext: x,
-		floatingStyles: v,
-		getReferenceProps: T,
-		getFloatingProps: E
-	}), [
-		s,
-		m,
-		x,
-		v,
-		T,
-		E
-	]);
-	return /* @__PURE__ */ f(b.Provider, {
-		value: D,
-		children: o
-	});
-}
-var w = o(function(e, t) {
-	let { refs: r, getReferenceProps: i } = x("Trigger"), a = v([r.setReference, t]);
-	return /* @__PURE__ */ f("button", {
-		type: "button",
-		...i(e),
-		ref: a,
-		"data-ui": "popover-trigger",
-		css: n
-	});
-}), T = o(function({ style: e, ...t }, n) {
-	let { open: r, refs: i, floatingContext: a, floatingStyles: o, getFloatingProps: s } = x("Content"), c = v([i.setFloating, n]);
-	return r ? /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f(p, {
-		context: a,
-		modal: !1,
-		initialFocus: -1,
-		returnFocus: !1,
-		closeOnFocusOut: !1,
-		children: /* @__PURE__ */ f("div", {
-			...s(t),
-			ref: c,
-			"data-ui": "popover",
-			style: {
-				...e,
-				...o
-			},
-			css: S
-		})
-	}) }) : null;
-}), E = Object.assign(C, {
-	Trigger: w,
-	Content: T
-});
-//#endregion
-export { E as t };

package/dist/radio-group-CvQ4x8ii.js

@@ -1,131 +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, 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-CNNiUhKB.js

@@ -1,257 +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, 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-gJ4ImO5u.js

@@ -1,48 +0,0 @@
-'use client';
-import { n as e, t } from "./css-Cgj6sCHn.js";
-import { n } from "./media-D_eA_I-e.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/stack-mEAryjKz.js

@@ -1,21 +0,0 @@
-'use client';
-import { t as e } from "./layout-style-7ZTOiWGR.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 };