@jfrader/ui 0.2.0 → 0.3.0

package/dist/tabs-C26PWl2c.js

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

package/dist/theme-root-BRLIA4eb.js

@@ -1,22 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { vars as t } from "@jfrader/tokens/vars";
-import { jsx as n } from "@emotion/react/jsx-runtime";
-//#region src/components/theme-root/theme-root.tsx
-var r = e({
-	color: t.color.text,
-	colorScheme: "dark",
-	"&[data-theme=\"light\"]": { colorScheme: "light" }
-});
-function i({ ref: e, theme: t, ...i }) {
-	return /* @__PURE__ */ n("div", {
-		"data-ui": "theme-root",
-		"data-theme": t ?? "dark",
-		...i,
-		ref: e,
-		css: r
-	});
-}
-i.displayName = "ThemeRoot";
-//#endregion
-export { i as t };

package/dist/toast-B1PXuwZ4.js

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

package/dist/toggle-group-N_owicT0.js

@@ -1,156 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { t } from "./focus-ring-BK5W5_NY.js";
-import { n, t as r } from "./media-D_eA_I-e.js";
-import { n as i, r as a, t as o } from "./roving-focus-CYlo_Kf8.js";
-import { t as s } from "./use-controlled-state-CVXDa-qM.js";
-import { createContext as c, useContext as l, useEffect as u, useImperativeHandle as d, useMemo as f, useRef as p, useState as m } from "react";
-import { vars as h } from "@jfrader/tokens/vars";
-import { jsx as g } from "@emotion/react/jsx-runtime";
-//#region src/components/toggle-group/toggle-group.tsx
-var _ = c(null);
-function v(e) {
-	let t = l(_);
-	if (!t) throw Error(`ToggleGroup.${e} must be rendered inside <ToggleGroup>.`);
-	return t;
-}
-var y = [], b = (e, t) => {
-	if (Array.isArray(e)) {
-		if (t === "multiple") return e;
-		e = e[0] ?? "";
-	}
-	return e === void 0 || e === "" ? y : [e];
-}, x = {
-	itemSelector: "[data-ui=\"toggle-group-item\"]:not([disabled])",
-	ownerSelector: "[data-ui=\"toggle-group-root\"]"
-}, S = "2px", C = e({
-	display: "inline-flex",
-	gap: S,
-	padding: S,
-	border: `1px solid ${h.color.borderControl}`,
-	borderRadius: h.radius.md,
-	backgroundColor: h.color.surfaceInset
-}), w = {
-	horizontal: e({ flexDirection: "row" }),
-	vertical: e({
-		flexDirection: "column",
-		alignItems: "stretch"
-	})
-}, T = e({
-	appearance: "none",
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	gap: h.space[2],
-	minBlockSize: "32px",
-	boxSizing: "border-box",
-	border: "1px solid transparent",
-	borderRadius: h.radius.sm,
-	background: "transparent",
-	cursor: "pointer",
-	paddingBlock: h.space[1],
-	paddingInline: h.space[3],
-	font: "inherit",
-	fontSize: h.textSize.sm,
-	fontWeight: h.fontWeight.medium,
-	color: h.color.textMuted,
-	transitionProperty: "background-color, border-color, color",
-	transitionDuration: h.motion.duration.fast,
-	transitionTimingFunction: h.motion.easeStandard,
-	"&:hover:not(:disabled):not([aria-pressed=\"true\"])": {
-		backgroundColor: h.color.surfaceHover,
-		color: h.color.text
-	},
-	"&[aria-pressed=\"true\"]": {
-		backgroundColor: h.color.accentSoft,
-		borderColor: h.color.accent,
-		color: h.color.accentText
-	},
-	"&[aria-pressed=\"true\"]:hover:not(:disabled)": { backgroundColor: h.color.accentSoftHover },
-	"&:disabled": {
-		opacity: .55,
-		cursor: "not-allowed"
-	},
-	"&:focus-visible": { ...t },
-	[n]: { transitionDuration: "0s" },
-	[r]: { "&[aria-pressed=\"true\"]": {
-		backgroundColor: "SelectedItem",
-		borderColor: "SelectedItem",
-		color: "SelectedItemText"
-	} }
-});
-function E({ ref: e, type: t = "single", value: n, defaultValue: r, onValueChange: c, orientation: l = "horizontal", disabled: h = !1, allowEmpty: v = !1, label: y, "aria-label": S, onKeyDown: T, ...E }) {
-	let [D, O] = s(n, r, c), [k, A] = m(null), j = p(null);
-	d(e, () => j.current, []);
-	let M = f(() => b(D, t), [D, t]), N = f(() => ({
-		pressed: M,
-		toggle: (e) => {
-			let n = M.includes(e);
-			t === "multiple" ? O(n ? M.filter((t) => t !== e) : [...M, e]) : n ? v && O("") : O(e);
-		},
-		focused: k,
-		setFocused: A,
-		disabled: h
-	}), [
-		M,
-		O,
-		t,
-		v,
-		k,
-		h
-	]);
-	u(() => {
-		let e = j.current;
-		if (!e) return;
-		let t = a(e, x);
-		if (t.length === 0 || t.some((e) => e.tabIndex === 0)) return;
-		let n = t.find((e) => e.getAttribute("aria-pressed") === "true");
-		A((n ?? o(t, k) ?? t[0])?.dataset.value ?? null);
-	});
-	let P = (e) => {
-		T?.(e);
-		let t = j.current;
-		!e.defaultPrevented && t && i(e, t, l, x);
-	};
-	return /* @__PURE__ */ g(_.Provider, {
-		value: N,
-		children: /* @__PURE__ */ g("div", {
-			...E,
-			ref: j,
-			role: "group",
-			"aria-label": y ?? S,
-			"aria-disabled": h || void 0,
-			"data-ui": "toggle-group-root",
-			"data-type": t,
-			"data-orientation": l,
-			onKeyDown: P,
-			css: [C, w[l]]
-		})
-	});
-}
-E.displayName = "ToggleGroup";
-function D({ ref: e, value: t, disabled: n, onClick: r, onFocus: i, ...a }) {
-	let { pressed: o, toggle: s, focused: c, setFocused: l, disabled: u } = v("Item"), d = u || n, f = o.includes(t), p = !d && (c === null ? o[0] === t : c === t), m = (e) => {
-		r?.(e), !e.defaultPrevented && s(t);
-	}, h = (e) => {
-		i?.(e), l(t);
-	};
-	return /* @__PURE__ */ g("button", {
-		...a,
-		ref: e,
-		type: "button",
-		"aria-pressed": f,
-		"data-ui": "toggle-group-item",
-		"data-value": t,
-		"data-state": f ? "on" : "off",
-		tabIndex: p ? 0 : -1,
-		disabled: d,
-		onClick: m,
-		onFocus: h,
-		css: T
-	});
-}
-D.displayName = "ToggleGroup.Item";
-var O = Object.assign(E, { Item: D });
-//#endregion
-export { O as t };