@jfrader/ui 0.1.1 → 0.2.0

package/dist/toast-D_dnqnn-.js

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

package/dist/toggle-group-B7gXCea8.js

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

package/dist/tooltip-BJ2hLV1b.js

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