@jfrader/ui 0.1.2 → 0.3.0

package/dist/card-D9CHtouU.js

@@ -1,121 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { createContext as t, forwardRef as n, useContext as r } from "react";
-import { vars as i } from "@jfrader/tokens/vars";
-import { jsx as a } from "@emotion/react/jsx-runtime";
-//#region src/components/card/card.tsx
-var o = t(void 0);
-function s(...e) {
-	return e.filter(Boolean).join(" ") || void 0;
-}
-var c = e({
-	boxSizing: "border-box",
-	minInlineSize: 0,
-	backgroundColor: i.color.surfaceRaised,
-	border: `1px solid ${i.color.border}`,
-	borderRadius: i.radius.lg,
-	paddingBlock: i.space[4],
-	paddingInline: i.space[5],
-	fontFamily: i.font.sans,
-	lineHeight: i.lineHeight.base,
-	color: i.color.text
-}), l = {
-	flat: e({ boxShadow: "none" }),
-	raised: e({ boxShadow: i.shadow.raised })
-}, u = e({
-	display: "grid",
-	gap: i.space[1],
-	marginBlockEnd: i.space[4]
-}), d = e({
-	margin: 0,
-	fontSize: i.textSize.md,
-	fontWeight: i.fontWeight.semibold,
-	lineHeight: i.lineHeight.tight,
-	color: i.color.text
-}), f = e({
-	margin: 0,
-	fontSize: i.textSize.sm,
-	color: i.color.textMuted
-}), p = e({
-	fontSize: i.textSize.sm,
-	color: i.color.text
-}), m = e({
-	display: "flex",
-	flexWrap: "wrap",
-	alignItems: "center",
-	justifyContent: "space-between",
-	gap: i.space[2],
-	marginBlockStart: i.space[4],
-	paddingBlockStart: i.space[4],
-	borderBlockStart: `1px solid ${i.color.borderSubtle}`,
-	"& > :only-child": { marginInlineStart: "auto" }
-}), h = n(function({ variant: e = "raised", slotProps: t, className: n, ...r }, i) {
-	return /* @__PURE__ */ a(o.Provider, {
-		value: t,
-		children: /* @__PURE__ */ a("div", {
-			...r,
-			ref: i,
-			"data-ui": "card",
-			"data-variant": e,
-			className: s(t?.root?.className, n),
-			css: [
-				c,
-				l[e],
-				t?.root?.css
-			]
-		})
-	});
-}), g = n(function({ className: e, ...t }, n) {
-	let i = r(o)?.header;
-	return /* @__PURE__ */ a("div", {
-		...t,
-		ref: n,
-		"data-ui": "card-header",
-		className: s(i?.className, e),
-		css: [u, i?.css]
-	});
-}), _ = n(function({ level: e = 3, className: t, ...n }, i) {
-	let c = r(o)?.title, l = `h${e}`;
-	return /* @__PURE__ */ a(l, {
-		...n,
-		ref: i,
-		"data-ui": "card-title",
-		className: s(c?.className, t),
-		css: [d, c?.css]
-	});
-}), v = n(function({ className: e, ...t }, n) {
-	let i = r(o)?.description;
-	return /* @__PURE__ */ a("p", {
-		...t,
-		ref: n,
-		"data-ui": "card-description",
-		className: s(i?.className, e),
-		css: [f, i?.css]
-	});
-}), y = n(function({ className: e, ...t }, n) {
-	let i = r(o)?.content;
-	return /* @__PURE__ */ a("div", {
-		...t,
-		ref: n,
-		"data-ui": "card-content",
-		className: s(i?.className, e),
-		css: [p, i?.css]
-	});
-}), b = n(function({ className: e, ...t }, n) {
-	let i = r(o)?.footer;
-	return /* @__PURE__ */ a("div", {
-		...t,
-		ref: n,
-		"data-ui": "card-footer",
-		className: s(i?.className, e),
-		css: [m, i?.css]
-	});
-}), x = Object.assign(h, {
-	Header: g,
-	Title: _,
-	Description: v,
-	Content: y,
-	Footer: b
-});
-//#endregion
-export { x as t };

package/dist/checkbox-DKa5BCdy.js

@@ -1,135 +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 { forwardRef as s, useEffect as c, useId as l, useImperativeHandle as u, useRef as d } from "react";
-import { vars as f } from "@jfrader/tokens/vars";
-import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
-//#region src/components/checkbox/checkbox.tsx
-var h = {
-	sm: "16px",
-	md: "20px"
-}, g = e({
-	"input:checked + span svg": { opacity: 1 },
-	"&[data-indeterminate] input + span": {
-		backgroundColor: f.color.accent,
-		borderColor: f.color.accent
-	},
-	"&[data-indeterminate] input + span svg": { opacity: 1 }
-}), _ = e({
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	flexShrink: 0,
-	boxSizing: "border-box",
-	border: `1px solid ${f.color.borderControl}`,
-	borderRadius: f.radius.sm,
-	backgroundColor: f.color.surfaceRaised,
-	color: f.color.accentContrast,
-	transitionProperty: "background-color, border-color",
-	transitionDuration: f.motion.duration.fast,
-	transitionTimingFunction: f.motion.easeStandard,
-	"& svg": {
-		inlineSize: "75%",
-		blockSize: "75%",
-		opacity: 0
-	},
-	[t]: { transitionDuration: "0s" }
-}), v = {
-	sm: e({
-		inlineSize: h.sm,
-		blockSize: h.sm
-	}),
-	md: e({
-		inlineSize: h.md,
-		blockSize: h.md
-	})
-}, y = {
-	sm: e({ fontSize: f.textSize.sm }),
-	md: e({ fontSize: f.textSize.md })
-}, b = e({
-	fontSize: f.textSize.sm,
-	color: f.color.textMuted
-}), x = {
-	sm: e({ marginInlineStart: `calc(${h.sm} + ${f.space[2]})` }),
-	md: e({ marginInlineStart: `calc(${h.md} + ${f.space[2]})` })
-};
-function S({ indeterminate: e }) {
-	return /* @__PURE__ */ p("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		children: e ? /* @__PURE__ */ p("line", {
-			x1: "4",
-			y1: "8",
-			x2: "12",
-			y2: "8"
-		}) : /* @__PURE__ */ p("polyline", { points: "3.5 8.5 6.5 11.5 12.5 4.5" })
-	});
-}
-var C = s(function({ label: e, description: t, indeterminate: s = !1, size: f = "md", onChange: h, onCheckedChange: C, slotProps: w, className: T, "aria-labelledby": E, "aria-describedby": D, ...O }, k) {
-	let A = d(null);
-	u(k, () => A.current, []), c(() => {
-		A.current && (A.current.indeterminate = s);
-	}, [s]);
-	let j = l(), M = `${j}-label`, N = `${j}-description`, P = n(e), F = n(t), I = [E, P && M].filter(Boolean).join(" ") || void 0, L = [D, F && N].filter(Boolean).join(" ") || void 0, R = [T, w?.root?.className].filter(Boolean).join(" ") || void 0, z = (e) => {
-		s && (e.currentTarget.indeterminate = !0), h?.(e), C?.(e.currentTarget.checked);
-	};
-	return /* @__PURE__ */ m("label", {
-		"data-ui": "checkbox",
-		"data-indeterminate": s || void 0,
-		className: R,
-		css: [
-			a,
-			g,
-			i,
-			w?.root?.css
-		],
-		children: [/* @__PURE__ */ m("span", {
-			css: r,
-			children: [
-				/* @__PURE__ */ p("input", {
-					...O,
-					ref: A,
-					type: "checkbox",
-					"aria-labelledby": I,
-					"aria-describedby": L,
-					"aria-checked": s ? "mixed" : void 0,
-					onChange: z,
-					css: o
-				}),
-				/* @__PURE__ */ p("span", {
-					"aria-hidden": "true",
-					className: w?.control?.className,
-					css: [
-						_,
-						v[f],
-						w?.control?.css
-					],
-					children: /* @__PURE__ */ p(S, { indeterminate: s })
-				}),
-				P && /* @__PURE__ */ p("span", {
-					id: M,
-					className: w?.label?.className,
-					css: [y[f], w?.label?.css],
-					children: e
-				})
-			]
-		}), F && /* @__PURE__ */ p("span", {
-			id: N,
-			className: w?.description?.className,
-			css: [
-				b,
-				x[f],
-				w?.description?.css
-			],
-			children: t
-		})]
-	});
-});
-//#endregion
-export { C as t };

package/dist/combobox-Dq3V88Zt.js

@@ -1,302 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t, t as n } from "./use-controlled-state-CVXDa-qM.js";
-import { t as r } from "./renderable-DzcIj1Lo.js";
-import { a as i, c as a, d as o, f as s, l as c, o as l, r as u, s as d, t as f, u as p } from "./collection-registry-1l9f3XJZ.js";
-import { t as m } from "./use-overlay-floating-efeqppiw.js";
-import { t as h } from "./text-field-DDPqQu29.js";
-import { createContext as g, forwardRef as _, useCallback as v, useContext as y, useId as ee, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
-import { vars as w } from "@jfrader/tokens/vars";
-import { jsx as T, jsxs as E } from "@emotion/react/jsx-runtime";
-import { FloatingList as D, FloatingPortal as O, useDismiss as te, useInteractions as k, useListNavigation as A, useMergeRefs as j } from "@floating-ui/react";
-//#region src/components/combobox/combobox.tsx
-var M = "bottom-start", N = "✓", P = "No results", F = (e, t) => e.toLocaleLowerCase().includes(t.toLocaleLowerCase()), I = g(null), L = g(!1);
-function R(e) {
-	let t = y(I);
-	if (!t) throw Error(`Combobox.${e} must be rendered inside <Combobox>.`);
-	return t;
-}
-function z(e) {
-	let t = R(e);
-	if (!y(L)) throw Error(`Combobox.${e} must be rendered inside <Combobox.List>.`);
-	return t;
-}
-var B = e({ "&[hidden]": { display: "none" } }), V = e({
-	paddingBlock: w.space[1],
-	paddingInline: w.space[2],
-	fontSize: w.textSize.sm,
-	color: w.color.textMuted
-});
-function H({ value: e, defaultValue: r, onValueChange: a, open: o, defaultOpen: s = !1, onOpenChange: c, name: l, filter: u = F, onInputChange: d, children: f }) {
-	let p = ee(), [h, g] = C(`${p}-listbox`), [_, y] = C(!1), [b = null, w] = n(e, r ?? null, a), [D = !1, O] = n(o, s, c), [j, N] = C(null), [P, L] = C(""), [R, z] = i(), [B, V] = C(null), H = S([]), U = S(null), W = t(d), G = v((e, t) => t === "" || u(e, t), [u]), { valuesByIndex: K, skippedIndices: q, matchCount: J } = x(() => {
-		let e = [], t = /* @__PURE__ */ new Set(), n = 0;
-		return R.forEach((r, i) => {
-			if (r.index === -1) return;
-			e[r.index] = i;
-			let a = G(r.label, P);
-			a && (n += 1), (r.disabled || !a) && t.add(r.index);
-		}), {
-			valuesByIndex: e,
-			skippedIndices: t,
-			matchCount: n
-		};
-	}, [
-		R,
-		P,
-		G
-	]), { refs: Y, floatingStyles: X, context: Z } = m({
-		open: D,
-		placement: M,
-		onOpenChange: (e) => O(e)
-	}), ne = te(Z, {
-		escapeKey: !0,
-		outsidePress: !0
-	}), re = A(Z, {
-		listRef: H,
-		activeIndex: j,
-		onNavigate: N,
-		virtual: !0,
-		loop: !0,
-		disabledIndices: (e) => q.has(e)
-	}), { getReferenceProps: Q, getFloatingProps: $, getItemProps: ie } = k([ne, re]), ae = x(() => {
-		let e = (e) => {
-			w(e), O(!1), U.current?.commitLabel(R.get(e)?.label ?? "");
-		};
-		return {
-			baseId: p,
-			listId: h,
-			setListId: g,
-			setInputDisabled: y,
-			open: D,
-			selectedValue: b,
-			activeIndex: j,
-			options: R,
-			matchCount: J,
-			inputLabelling: B,
-			inputHandleRef: U,
-			refs: Y,
-			floatingStyles: X,
-			elementsRef: H,
-			getReferenceProps: Q,
-			getFloatingProps: $,
-			getItemProps: ie,
-			onInputChange: W,
-			isVisible: (e) => G(e, P),
-			findMatches: (e) => {
-				let t = 0, n = null, r = null;
-				return R.forEach((i) => {
-					i.index !== -1 && G(i.label, e) && (t += 1, !i.disabled && ((n === null || i.index < n) && (n = i.index), (r === null || i.index > r) && (r = i.index)));
-				}), {
-					count: t,
-					first: n,
-					last: r
-				};
-			},
-			setQuery: L,
-			setActiveIndex: N,
-			selectValue: e,
-			selectIndex: (t) => {
-				let n = K[t];
-				n === void 0 || q.has(t) || e(n);
-			},
-			clearValue: () => w(null),
-			requestOpenChange: O,
-			registration: z,
-			setInputLabelling: V
-		};
-	}, [
-		p,
-		h,
-		D,
-		b,
-		j,
-		R,
-		P,
-		J,
-		B,
-		Y,
-		X,
-		Q,
-		$,
-		ie,
-		W,
-		G,
-		K,
-		q,
-		w,
-		O,
-		z
-	]);
-	return /* @__PURE__ */ E(I.Provider, {
-		value: ae,
-		children: [f, l !== void 0 && /* @__PURE__ */ T("input", {
-			type: "hidden",
-			name: l,
-			value: b ?? "",
-			disabled: _
-		})]
-	});
-}
-var U = _(function({ inputValue: e, defaultInputValue: t, label: i, description: a, error: o, size: s, slotProps: c, className: l, id: u, onChange: d, onKeyDown: f, onBlur: p, disabled: m = !1, ...g }, _) {
-	let { listId: v, open: y, selectedValue: x, activeIndex: S, options: w, inputHandleRef: E, refs: D, getReferenceProps: O, onInputChange: te, findMatches: k, setQuery: A, setActiveIndex: M, selectIndex: N, clearValue: P, requestOpenChange: F, setInputLabelling: I, setInputDisabled: L } = R("Input"), z = j([D.setReference, _]), B = ee(), V = u ?? B, H = `${V}-label`, U = r(i), W = g["aria-labelledby"], G = g["aria-label"], [K, q] = C(t), [J, Y] = C(() => (e ?? t) !== void 0), X = x === null ? void 0 : w.get(x)?.label, Z = e ?? (J ? K ?? "" : X ?? K ?? ""), [, ne] = n(Z, void 0, te), re = (t) => {
-		ne(t), e === void 0 && q(t);
-	}, Q = e !== void 0 || J ? Z : "", $ = (e) => {
-		Y(!1), re(e);
-	};
-	b(() => {
-		A(Q);
-	}, [Q, A]), b(() => (L(m), () => L(!1)), [m, L]), b(() => (E.current = { commitLabel: $ }, () => {
-		E.current = null;
-	})), b(() => (I(W !== void 0 || !U ? {
-		labelledBy: W,
-		label: G
-	} : { labelledBy: H }), () => I(null)), [
-		W,
-		G,
-		U,
-		H,
-		I
-	]);
-	let ie = (t) => {
-		d?.(t);
-		let n = t.currentTarget.value;
-		Y(!0), re(n), n === "" && P();
-		let r = e ?? n;
-		if (r === "") {
-			M(null), F(!1);
-			return;
-		}
-		let i = k(r);
-		M(i.first), i.count > 0 && F(!0);
-	}, ae = (e) => {
-		if (f?.(e), !e.defaultPrevented) {
-			if (e.key === "Escape") J && X !== void 0 && $(X);
-			else if (y) {
-				if (e.key === "Enter" && S !== null) e.preventDefault(), N(S);
-				else if (e.key === "Home" || e.key === "End") {
-					let t = k(Q), n = e.key === "Home" ? t.first : t.last;
-					if (n === null) return;
-					e.preventDefault(), M(n);
-				}
-			}
-		}
-	}, oe = (e) => {
-		p?.(e), y && F(!1);
-	};
-	return /* @__PURE__ */ T(h, {
-		...O({
-			...g,
-			onKeyDown: ae,
-			onBlur: oe
-		}),
-		ref: z,
-		id: V,
-		label: U ? /* @__PURE__ */ T("span", {
-			id: H,
-			children: i
-		}) : i,
-		description: a,
-		error: o,
-		size: s,
-		slotProps: c,
-		className: l,
-		value: Z,
-		disabled: m,
-		onChange: ie,
-		role: "combobox",
-		autoComplete: "off",
-		"aria-autocomplete": "list",
-		"aria-expanded": y,
-		"aria-controls": y ? v : void 0,
-		"data-state": y ? "open" : "closed",
-		"data-ui": "combobox-input"
-	});
-}), W = _(function({ id: e, style: t, onMouseDown: n, children: r, ...i }, a) {
-	let { baseId: c, setListId: l, open: u, inputLabelling: d, refs: f, floatingStyles: p, elementsRef: m, getFloatingProps: h } = R("List"), g = e ?? `${c}-listbox`;
-	b(() => (l(g), () => l(`${c}-listbox`)), [
-		c,
-		g,
-		l
-	]);
-	let _ = j([u ? f.setFloating : null, a]), v = i["aria-labelledby"] !== void 0 || i["aria-label"] !== void 0 ? {} : d?.labelledBy === void 0 ? { "aria-label": d?.label } : { "aria-labelledby": d.labelledBy }, y = (e) => {
-		n?.(e), e.preventDefault();
-	};
-	return /* @__PURE__ */ T(O, { children: /* @__PURE__ */ T("div", {
-		...h({
-			id: g,
-			...v,
-			...i,
-			onMouseDown: y
-		}),
-		ref: _,
-		role: "listbox",
-		hidden: !u,
-		"data-state": u ? "open" : "closed",
-		"data-ui": "combobox-list",
-		style: {
-			...t,
-			...p
-		},
-		css: [s, o],
-		children: /* @__PURE__ */ T(D, {
-			elementsRef: m,
-			children: /* @__PURE__ */ T(L.Provider, {
-				value: !0,
-				children: r
-			})
-		})
-	}) });
-}), G = _(function({ value: e, disabled: t = !1, onClick: n, children: r, ...i }, o) {
-	let { baseId: s, selectedValue: m, activeIndex: h, options: g, isVisible: _, getItemProps: v, selectValue: y, registration: ee } = z("Item"), b = S(null), { ref: x, index: C } = u(e, ee, b, (e, n) => ({
-		index: e,
-		label: n,
-		disabled: t
-	})), w = j([x, o]), D = g.get(e)?.label, O = D !== void 0 && !_(D), te = C !== -1 && h === C, k = m === e, A = (r) => {
-		n?.(r), !(t || r.defaultPrevented) && y(e);
-	};
-	return /* @__PURE__ */ E("div", {
-		...v({
-			id: f(s, e),
-			...i,
-			onClick: A
-		}),
-		ref: w,
-		role: "option",
-		hidden: O,
-		"aria-selected": k,
-		"aria-disabled": t || void 0,
-		"data-active": te || void 0,
-		"data-ui": "combobox-item",
-		css: [
-			d,
-			l,
-			c,
-			B
-		],
-		children: [/* @__PURE__ */ T("span", {
-			ref: b,
-			css: p,
-			children: r
-		}), k && /* @__PURE__ */ T("span", {
-			"aria-hidden": "true",
-			css: a,
-			children: N
-		})]
-	});
-}), K = _(function({ children: e, ...t }, n) {
-	let { matchCount: i } = z("Empty");
-	return i > 0 ? null : /* @__PURE__ */ T("div", {
-		...t,
-		ref: n,
-		"data-ui": "combobox-empty",
-		css: V,
-		children: r(e) ? e : P
-	});
-}), q = Object.assign(H, {
-	Input: U,
-	List: W,
-	Item: G,
-	Empty: K
-});
-//#endregion
-export { q as t };