@jfrader/ui 0.4.0 → 0.5.1

package/dist/tabs-CK_g1RKa.js

@@ -1,203 +0,0 @@
-'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n, t as r } from "./focus-ring-BK5W5_NY.js";
-import { n as i } from "./media-D_eA_I-e.js";
-import { n as a, r as o, t as s } from "./roving-focus-CYlo_Kf8.js";
-import { t as c } from "./use-controlled-state-CVXDa-qM.js";
-import { t as l } from "./part-id-D0zksy32.js";
-import { createContext as u, useContext as d, useEffect as f, useId as p, useImperativeHandle as m, useMemo as h, useRef as g, useState as _ } from "react";
-import { vars as v } from "@jfrader/tokens/vars";
-import { jsx as y } from "@emotion/react/jsx-runtime";
-//#region src/components/tabs/tabs.tsx
-var b = u(null);
-function x(e) {
-	let t = d(b);
-	if (!t) throw Error(`Tabs.${e} must be rendered inside <Tabs>.`);
-	return t;
-}
-var S = {
-	itemSelector: "[role=\"tab\"]:not([disabled])",
-	ownerSelector: "[role=\"tablist\"]"
-}, C = e({ "&[data-orientation=\"vertical\"]": {
-	display: "flex",
-	alignItems: "flex-start",
-	gap: v.space[4]
-} }), w = {
-	horizontal: e({
-		display: "inline-flex",
-		gap: v.space[1],
-		borderBlockEnd: `1px solid ${v.color.border}`
-	}),
-	vertical: e({
-		display: "inline-flex",
-		flexDirection: "column",
-		alignItems: "stretch",
-		borderInlineEnd: `1px solid ${v.color.border}`
-	})
-}, T = e({
-	appearance: "none",
-	border: 0,
-	background: "transparent",
-	cursor: "pointer",
-	paddingBlock: v.space[2],
-	paddingInline: v.space[3],
-	font: "inherit",
-	fontSize: v.textSize.sm,
-	fontWeight: v.fontWeight.medium,
-	color: v.color.textMuted,
-	transitionProperty: "color, border-color",
-	transitionDuration: v.motion.duration.fast,
-	transitionTimingFunction: v.motion.easeStandard,
-	"&:hover:not(:disabled):not([aria-selected=\"true\"])": { color: v.color.text },
-	"&[aria-selected=\"true\"]": {
-		color: v.color.text,
-		borderColor: v.color.accent
-	},
-	"&:disabled": {
-		opacity: .55,
-		cursor: "not-allowed"
-	},
-	"&:focus-visible": { ...r },
-	[i]: { transitionDuration: "0s" }
-}), E = {
-	horizontal: e({
-		borderBlockEnd: "2px solid transparent",
-		marginBlockEnd: "-1px"
-	}),
-	vertical: e({
-		borderInlineEnd: "2px solid transparent",
-		marginInlineEnd: "-1px",
-		textAlign: "start"
-	})
-}, D = e({
-	color: v.color.text,
-	outline: "none",
-	"&:focus-visible": { ...n },
-	"&[hidden]": { display: "none" }
-}), O = e({ paddingBlockStart: v.space[3] });
-function k({ ref: e, value: n, defaultValue: r, onValueChange: i, orientation: a = "horizontal", activation: o = "auto", className: s, sx: l, ...u }) {
-	let d = p(), [f, m] = c(n, r, i), [g, v] = _(null), x = h(() => ({
-		value: f,
-		setValue: m,
-		focused: g,
-		setFocused: v,
-		orientation: a,
-		activation: o,
-		baseId: d
-	}), [
-		f,
-		m,
-		g,
-		a,
-		o,
-		d
-	]);
-	return /* @__PURE__ */ y(b.Provider, {
-		value: x,
-		children: /* @__PURE__ */ y(t, {
-			className: s,
-			styles: C,
-			sx: l,
-			children: (t) => /* @__PURE__ */ y("div", {
-				...u,
-				ref: e,
-				"data-ui": "tabs-root",
-				"data-orientation": a,
-				className: t
-			})
-		})
-	});
-}
-k.displayName = "Tabs";
-function A({ ref: e, onKeyDown: n, className: r, sx: i, ...c }) {
-	let { orientation: l, value: u, focused: d, setFocused: p } = x("List"), h = g(null);
-	m(e, () => h.current, []), f(() => {
-		let e = h.current;
-		if (!e) return;
-		let t = o(e, S);
-		t.length !== 0 && (t.some((e) => e.tabIndex === 0) || p((s(t, u) ?? s(t, d) ?? t[0])?.dataset.value ?? null));
-	});
-	let _ = (e) => {
-		n?.(e);
-		let t = h.current;
-		!e.defaultPrevented && t && a(e, t, l, S);
-	};
-	return /* @__PURE__ */ y(t, {
-		className: r,
-		styles: w[l],
-		sx: i,
-		children: (e) => /* @__PURE__ */ y("div", {
-			...c,
-			ref: h,
-			role: "tablist",
-			"aria-orientation": l,
-			"data-ui": "tabs-list",
-			"data-orientation": l,
-			"data-roving": d ?? "",
-			"data-selected": u ?? "",
-			onKeyDown: _,
-			className: e
-		})
-	});
-}
-A.displayName = "Tabs.List";
-function j({ ref: e, value: n, disabled: r, onClick: i, onFocus: a, className: o, sx: s, ...c }) {
-	let { value: u, setValue: d, focused: f, setFocused: p, activation: m, baseId: h, orientation: _ } = x("Tab"), v = u === n, b = !r && (f === null ? v : f === n), S = g(!1), C = (e) => {
-		if (i?.(e), e.defaultPrevented) return;
-		let t = S.current;
-		S.current = !1, !(m === "auto" && t) && d(n);
-	}, w = (e) => {
-		a?.(e), !e.defaultPrevented && (S.current = !0, p(n), m === "auto" && d(n));
-	};
-	return /* @__PURE__ */ y(t, {
-		className: o,
-		styles: [T, E[_]],
-		sx: s,
-		children: (t) => /* @__PURE__ */ y("button", {
-			...c,
-			ref: e,
-			type: "button",
-			role: "tab",
-			id: l(h, "tab", n),
-			"data-ui": "tabs-tab",
-			"data-value": n,
-			"data-state": v ? "active" : "inactive",
-			"aria-selected": v,
-			"aria-controls": l(h, "panel", n),
-			tabIndex: b ? 0 : -1,
-			disabled: r,
-			onClick: C,
-			onFocus: w,
-			className: t
-		})
-	});
-}
-j.displayName = "Tabs.Tab";
-function M({ ref: e, value: n, tabIndex: r = 0, "aria-labelledby": i, className: a, sx: o, ...s }) {
-	let { value: c, baseId: u, orientation: d } = x("Panel"), f = c === n, p = [i, l(u, "tab", n)].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ y(t, {
-		className: a,
-		styles: [D, d === "horizontal" && O],
-		sx: o,
-		children: (t) => /* @__PURE__ */ y("div", {
-			...s,
-			ref: e,
-			role: "tabpanel",
-			id: l(u, "panel", n),
-			"aria-labelledby": p,
-			tabIndex: r,
-			hidden: !f,
-			"data-ui": "tabs-panel",
-			"data-state": f ? "active" : "inactive",
-			className: t
-		})
-	});
-}
-M.displayName = "Tabs.Panel";
-var N = Object.assign(k, {
-	List: A,
-	Tab: j,
-	Panel: M
-});
-//#endregion
-export { N as t };

package/dist/toast-CjmELMZZ.js

@@ -1,283 +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 { t as i } from "./button-P2e7_44z.js";
-import { i as a, t as o } from "./theme-scope-t7nAKc2c.js";
-import { createContext as s, useCallback as c, useContext as l, useEffect as u, useId as d, useMemo as f, useRef as p, useState as m } from "react";
-import { vars as h } from "@jfrader/tokens/vars";
-import { Fragment as g, jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
-import { createPortal as y } from "react-dom";
-//#region src/components/toast/toast.tsx
-var b = 4, x = 5e3, S = "Dismiss", C = 100, w = "min(380px, calc(100vw - 32px))", T = "3px", E = s(null), D = s(null), O = e({
-	position: "fixed",
-	insetBlockEnd: 0,
-	insetInlineEnd: 0,
-	display: "flex",
-	flexDirection: "column",
-	gap: h.space[2],
-	inlineSize: w,
-	margin: 0,
-	paddingInlineEnd: h.space[4],
-	paddingBlockEnd: h.space[4],
-	pointerEvents: "none",
-	fontFamily: h.font.sans
-}), k = e({
-	boxSizing: "border-box",
-	display: "grid",
-	gridTemplateColumns: "minmax(0, 1fr) auto",
-	alignItems: "start",
-	gap: h.space[2],
-	backgroundColor: h.color.surfaceRaised,
-	border: `1px solid ${h.color.border}`,
-	borderRadius: h.radius.lg,
-	boxShadow: h.shadow.floating,
-	padding: h.space[3],
-	color: h.color.text,
-	lineHeight: h.lineHeight.base,
-	pointerEvents: "auto",
-	transitionProperty: "opacity, transform",
-	transitionDuration: h.motion.duration.base,
-	transitionTimingFunction: h.motion.easeStandard,
-	"&[data-populated=\"false\"]": { opacity: 0 },
-	"&[data-state=\"closing\"]": {
-		opacity: 0,
-		transform: `translateY(${h.space[2]})`,
-		pointerEvents: "none"
-	},
-	[n]: { transitionDuration: "0s" }
-}), A = {
-	neutral: e({ borderInlineStart: `${T} solid ${h.color.borderStrong}` }),
-	success: e({ borderInlineStart: `${T} solid ${h.color.success}` }),
-	danger: e({ borderInlineStart: `${T} solid ${h.color.danger}` })
-}, j = e({
-	display: "grid",
-	gap: h.space[1],
-	alignSelf: "center",
-	minInlineSize: 0
-}), M = e({
-	margin: 0,
-	fontSize: h.textSize.sm,
-	fontWeight: h.fontWeight.semibold
-}), N = e({
-	margin: 0,
-	fontSize: h.textSize.sm,
-	color: h.color.textMuted
-}), P = e({
-	gridColumn: 2,
-	gridRow: 1,
-	inlineSize: "32px",
-	paddingInline: 0
-}), F = e({ display: "contents" }), I = e({
-	gridColumn: "1 / -1",
-	display: "flex",
-	gap: h.space[2]
-});
-function L(e) {
-	let t = l(D);
-	if (!t) throw Error(`Toast.${e} must be rendered inside <Toast.Provider>.`);
-	return t;
-}
-function R() {
-	let e = l(E);
-	if (!e) throw Error("useToast() must be called inside <Toast.Provider>.");
-	return e;
-}
-function z({ children: e, max: t = b, duration: n = x, dismissLabel: r = S }) {
-	let i = d(), a = p(0), [o, s] = m([]), l = p([]), u = p(/* @__PURE__ */ new Map()), h = Math.max(1, Math.floor(Number.isFinite(t) ? t : b)), g = c((e, t) => {
-		t ? u.current.set(e, t) : u.current.delete(e);
-	}, []), v = c((e, t) => {
-		let n = new Set(t.filter((e) => e.state === "open").map((e) => u.current.get(e.id)));
-		for (let t of e) {
-			let e = u.current.get(t.id);
-			if (e?.contains(e.ownerDocument.activeElement)) {
-				Array.from(e.parentElement?.querySelectorAll("[data-ui=\"toast\"]") ?? []).find((e) => n.has(e))?.querySelector("[data-toast-dismiss]")?.focus();
-				break;
-			}
-		}
-	}, []), y = c((e) => {
-		a.current += 1;
-		let t = `${i}toast-${a.current}`, r = {
-			id: t,
-			options: {
-				...e,
-				duration: e.duration === void 0 ? n : e.duration
-			},
-			state: "open"
-		}, o = l.current, c = [...o, r].slice(-h);
-		return v(o.filter((e) => !c.includes(e)), c), l.current = c, s(c), t;
-	}, [
-		i,
-		h,
-		n,
-		v
-	]), C = c((e) => {
-		let t = l.current;
-		v(t.filter((t) => t.id === e), t.filter((t) => t.id !== e));
-		let n = t.map((t) => t.id === e && t.state === "open" ? {
-			...t,
-			state: "closing"
-		} : t);
-		l.current = n, s(n);
-	}, [v]), w = c((e) => {
-		let t = l.current, n = t.filter((t) => t.id !== e);
-		v(t.filter((t) => t.id === e), n), l.current = n, s(n);
-	}, [v]), T = f(() => ({
-		toast: y,
-		dismiss: C
-	}), [y, C]), O = f(() => ({
-		toasts: o,
-		dismiss: C,
-		remove: w,
-		registerRoot: g,
-		dismissLabel: r
-	}), [
-		o,
-		C,
-		w,
-		g,
-		r
-	]);
-	return /* @__PURE__ */ _(E.Provider, {
-		value: T,
-		children: /* @__PURE__ */ _(D.Provider, {
-			value: O,
-			children: e
-		})
-	});
-}
-z.displayName = "Toast.Provider";
-function B({ ref: e, className: n, sx: r, ...i }) {
-	let { toasts: s } = L("Viewport"), c = p(null), [l, d] = m(null), f = a()?.portalContainer, h = f === void 0 ? l : f;
-	return u(() => {
-		d(c.current?.ownerDocument.body ?? null);
-	}, []), /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("span", {
-		hidden: !0,
-		ref: c
-	}), h && y(/* @__PURE__ */ _(o, { children: /* @__PURE__ */ _(t, {
-		className: n,
-		styles: O,
-		sx: r,
-		children: (t) => /* @__PURE__ */ _("div", {
-			...i,
-			ref: e,
-			"data-ui": "toast-viewport",
-			className: t,
-			children: s.map((e) => /* @__PURE__ */ _(V, { record: e }, e.id))
-		})
-	}) }), h)] });
-}
-B.displayName = "Toast.Viewport";
-function V({ record: e }) {
-	let { dismiss: t, remove: n, registerRoot: a, dismissLabel: o } = L("Viewport"), { id: s, options: l, state: d } = e, { title: f, description: h, tone: y = "neutral", action: b } = l, x = l.duration, S = p(null), w = c((e) => {
-		S.current = e, a(s, e);
-	}, [s, a]), [T, E] = m(!1), [D, O] = m(!1), [R, z] = m(!1), B = p(x ?? 0);
-	u(() => {
-		let e = setTimeout(() => E(!0), C);
-		return () => clearTimeout(e);
-	}, []);
-	let V = T && d === "open" && x !== null && !D && !R;
-	return u(() => {
-		if (!V) return;
-		let e = performance.now(), n = setTimeout(() => t(s), B.current);
-		return () => {
-			clearTimeout(n), B.current -= performance.now() - e;
-		};
-	}, [
-		V,
-		t,
-		s
-	]), u(() => {
-		if (d !== "closing") return;
-		let e = S.current, t = e && typeof e.getAnimations == "function" ? e.getAnimations() : [], r = !1;
-		return Promise.allSettled(t.map((e) => e.finished)).then(() => {
-			r || n(s);
-		}), () => {
-			r = !0;
-		};
-	}, [
-		d,
-		n,
-		s
-	]), /* @__PURE__ */ v("div", {
-		ref: w,
-		inert: d === "closing",
-		"data-ui": "toast",
-		"data-tone": y,
-		"data-state": d,
-		"data-populated": T,
-		onPointerEnter: () => O(!0),
-		onPointerLeave: () => O(!1),
-		onFocus: () => z(!0),
-		onBlur: (e) => {
-			e.currentTarget.contains(e.relatedTarget) || z(!1);
-		},
-		css: [k, A[y]],
-		children: [/* @__PURE__ */ _("div", {
-			role: y === "danger" ? "alert" : "status",
-			"aria-atomic": "true",
-			css: j,
-			children: T && /* @__PURE__ */ v(g, { children: [r(f) && /* @__PURE__ */ _("div", {
-				css: M,
-				children: f
-			}), r(h) && /* @__PURE__ */ _("div", {
-				css: N,
-				children: h
-			})] })
-		}), T && /* @__PURE__ */ v("div", {
-			css: F,
-			children: [/* @__PURE__ */ _(i, {
-				variant: "ghost",
-				size: "sm",
-				"aria-label": o,
-				"data-toast-dismiss": "",
-				onClick: () => t(s),
-				css: P,
-				children: /* @__PURE__ */ _(H, {})
-			}), b && /* @__PURE__ */ _("div", {
-				css: I,
-				children: /* @__PURE__ */ _(i, {
-					variant: "outline",
-					size: "sm",
-					onClick: (e) => {
-						b?.onClick(e), e.defaultPrevented || t(s);
-					},
-					children: b.label
-				})
-			})]
-		})]
-	});
-}
-function H() {
-	return /* @__PURE__ */ v("svg", {
-		"aria-hidden": "true",
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		children: [/* @__PURE__ */ _("line", {
-			x1: "4",
-			y1: "4",
-			x2: "12",
-			y2: "12"
-		}), /* @__PURE__ */ _("line", {
-			x1: "12",
-			y1: "4",
-			x2: "4",
-			y2: "12"
-		})]
-	});
-}
-function U(e) {
-	return /* @__PURE__ */ _(z, { ...e });
-}
-U.displayName = "Toast";
-var W = Object.assign(U, {
-	Provider: z,
-	Viewport: B
-});
-//#endregion
-export { R as n, W as t };

package/dist/tooltip-CaL3rKbV.js

@@ -1,108 +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, t as a } from "./use-overlay-floating-Bit-f0FU.js";
-import { createContext as o, useContext as s, useMemo as c } from "react";
-import { vars as l } from "@jfrader/tokens/vars";
-import { jsx as u } from "@emotion/react/jsx-runtime";
-import { useDismiss as d, useFocus as f, useHover as p, useInteractions as m, useMergeRefs as h, useRole as g } from "@floating-ui/react";
-//#region src/components/tooltip/tooltip.tsx
-var _ = 300, v = 100, y = o(null);
-function b(e) {
-	let t = s(y);
-	if (!t) throw Error(`Tooltip.${e} must be rendered inside <Tooltip>.`);
-	return t;
-}
-var x = e({
-	boxSizing: "border-box",
-	backgroundColor: l.color.bgSoft,
-	border: `1px solid ${l.color.border}`,
-	borderRadius: l.radius.sm,
-	boxShadow: l.shadow.raised,
-	padding: `${l.space[1]} ${l.space[2]}`,
-	maxInlineSize: "260px",
-	color: l.color.text,
-	fontFamily: l.font.sans,
-	fontSize: l.textSize.sm,
-	lineHeight: l.lineHeight.base
-});
-function S({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: i = "top", openDelay: o = _, closeDelay: s = v, children: l }) {
-	let [h = !1, b] = n(e, t, r), { refs: x, floatingStyles: S, context: C } = a({
-		open: h,
-		placement: i,
-		onOpenChange: b
-	}), w = p(C, {
-		delay: {
-			open: o,
-			close: s
-		},
-		move: !1
-	}), T = f(C), E = d(C, { escapeKey: !0 }), D = g(C, { role: "tooltip" }), { getReferenceProps: O, getFloatingProps: k } = m([
-		w,
-		T,
-		E,
-		D
-	]), A = c(() => ({
-		open: h,
-		refs: x,
-		floatingStyles: S,
-		getReferenceProps: O,
-		getFloatingProps: k
-	}), [
-		h,
-		x,
-		S,
-		O,
-		k
-	]);
-	return /* @__PURE__ */ u(y.Provider, {
-		value: A,
-		children: l
-	});
-}
-S.displayName = "Tooltip";
-function C({ ref: e, "aria-describedby": n, className: i, sx: a, ...o }) {
-	let { refs: s, getReferenceProps: c } = b("Trigger"), l = h([s.setReference, e]), d = c(o), f = [n, d["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ u(t, {
-		className: i,
-		styles: r,
-		sx: a,
-		children: (e) => /* @__PURE__ */ u("button", {
-			type: "button",
-			...d,
-			ref: l,
-			"aria-describedby": f,
-			"data-ui": "tooltip-trigger",
-			className: e
-		})
-	});
-}
-C.displayName = "Tooltip.Trigger";
-function w({ ref: e, style: n, className: r, sx: a, ...o }) {
-	let { open: s, refs: c, floatingStyles: l, getFloatingProps: d } = b("Content"), f = h([c.setFloating, e]);
-	if (!s) return null;
-	let { tabIndex: p, ...m } = d(o);
-	return /* @__PURE__ */ u(i, { children: /* @__PURE__ */ u(t, {
-		className: r,
-		styles: x,
-		sx: a,
-		children: (e) => /* @__PURE__ */ u("div", {
-			...m,
-			ref: f,
-			"data-ui": "tooltip",
-			style: {
-				...n,
-				...l
-			},
-			className: e
-		})
-	}) });
-}
-w.displayName = "Tooltip.Content";
-var T = Object.assign(S, {
-	Trigger: C,
-	Content: w
-});
-//#endregion
-export { T as t };

package/dist/use-controlled-state-CVXDa-qM.js

@@ -1,21 +0,0 @@
-'use client';
-import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
-//#region src/utils/use-latest-callback.ts
-function i(r) {
-	let i = n(r);
-	return t(() => {
-		i.current = r;
-	}), e((...e) => i.current?.(...e), []);
-}
-//#endregion
-//#region src/utils/use-controlled-state.ts
-function a(t, a, o) {
-	let s = t !== void 0, [c, l] = r(a), u = s ? t : c, d = n(u);
-	d.current = u;
-	let f = i(o);
-	return [u, e((e) => {
-		e !== d.current && (s || l(e), f(e));
-	}, [s, f])];
-}
-//#endregion
-export { i as n, a as t };

package/dist/use-overlay-floating-Bit-f0FU.js

@@ -1,31 +0,0 @@
-'use client';
-import { i as e, t } from "./theme-scope-t7nAKc2c.js";
-import { jsx as n } from "@emotion/react/jsx-runtime";
-import { FloatingPortal as r, autoUpdate as i, flip as a, offset as o, shift as s, useFloating as c } from "@floating-ui/react";
-//#region src/overlay/overlay-portal.tsx
-function l({ children: i }) {
-	let a = e();
-	return /* @__PURE__ */ n(r, {
-		root: a?.portalContainer,
-		children: /* @__PURE__ */ n(t, { children: i })
-	});
-}
-l.displayName = "OverlayPortal";
-//#endregion
-//#region src/overlay/use-overlay-floating.ts
-var u = 8, d = 8;
-function f({ open: e, onOpenChange: t, placement: n }) {
-	return c({
-		open: e,
-		onOpenChange: t,
-		placement: n,
-		middleware: [
-			o(u),
-			a({ padding: d }),
-			s({ padding: d })
-		],
-		whileElementsMounted: i
-	});
-}
-//#endregion
-export { l as n, f as t };

package/dist/{theme-root-BbTBuLMQ.js → theme-root-Bs1U3uPA.js}

@@ -32,10 +32,10 @@ function f({ ref: e, theme: t = "dark", portalContainer: s, className: l, sx: d,
 			styles: i,
 			sx: d,
 			children: (n) => /* @__PURE__ */ c("div", {
-				"data-ui": "theme-root",
-				"data-theme": t,
 				...f,
 				ref: e,
+				"data-ui": "theme-root",
+				"data-theme": t,
 				className: n
 			})
 		}) })