@jfrader/ui 0.3.0 → 0.4.0

package/dist/theme-root-BbTBuLMQ.js

@@ -0,0 +1,46 @@
+'use client';
+import { a as e, n as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r, r as i } from "./theme-scope-t7nAKc2c.js";
+import { useContext as a, useMemo as o } from "react";
+import { vars as s } from "@jfrader/tokens/vars";
+import { jsx as c } from "@emotion/react/jsx-runtime";
+//#region src/styling/theme.ts
+var l = s;
+//#endregion
+//#region src/components/theme-provider/theme-provider.tsx
+function u({ theme: e = l, children: n }) {
+	return /* @__PURE__ */ c(t, {
+		theme: e,
+		children: n
+	});
+}
+u.displayName = "ThemeProvider";
+function d() {
+	return e();
+}
+//#endregion
+//#region src/components/theme-root/theme-root.tsx
+function f({ ref: e, theme: t = "dark", portalContainer: s, className: l, sx: d, ...f }) {
+	let p = a(r), m = s === void 0 ? p?.portalContainer : s, h = o(() => ({
+		theme: t,
+		portalContainer: m
+	}), [t, m]);
+	return /* @__PURE__ */ c(r.Provider, {
+		value: h,
+		children: /* @__PURE__ */ c(u, { children: /* @__PURE__ */ c(n, {
+			className: l,
+			styles: i,
+			sx: d,
+			children: (n) => /* @__PURE__ */ c("div", {
+				"data-ui": "theme-root",
+				"data-theme": t,
+				...f,
+				ref: e,
+				className: n
+			})
+		}) })
+	});
+}
+f.displayName = "ThemeRoot";
+//#endregion
+export { l as i, u as n, d as r, f as t };

package/dist/theme-root.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ThemeRoot } from "./theme-root-BiXXvQvr.js";
+export { t as ThemeRoot } from "./theme-root-BbTBuLMQ.js";

package/dist/theme-scope-t7nAKc2c.js

@@ -0,0 +1,27 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { createContext as t, useContext as n } from "react";
+import { vars as r } from "@jfrader/tokens/vars";
+import { jsx as i } from "@emotion/react/jsx-runtime";
+//#region src/styling/theme-scope.tsx
+var a = t(null);
+function o() {
+	return n(a);
+}
+var s = e({
+	color: r.color.text,
+	colorScheme: "dark",
+	"&[data-theme=\"light\"]": { colorScheme: "light" }
+}), c = e({ display: "contents" });
+function l({ children: e }) {
+	let t = o();
+	return t ? /* @__PURE__ */ i("div", {
+		"data-ui": "theme-boundary",
+		"data-theme": t.theme,
+		css: [s, c],
+		children: e
+	}) : e;
+}
+l.displayName = "ThemeBoundary";
+//#endregion
+export { o as i, a as n, s as r, l as t };

package/dist/toast-CjmELMZZ.js

@@ -0,0 +1,283 @@
+'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/toast.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Toast, n as useToast } from "./toast-iqelR-r0.js";
+export { t as Toast, n as useToast } from "./toast-CjmELMZZ.js";

package/dist/{tooltip-CB-HC1js.js → tooltip-CaL3rKbV.js}

@@ -2,40 +2,40 @@
 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 { t as i } from "./use-overlay-floating-efeqppiw.js";
-import { createContext 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";
+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 = a(null);
+var _ = 300, v = 100, y = o(null);
 function b(e) {
-	let t = o(y);
+	let t = s(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]}`,
+	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: c.color.text,
-	fontFamily: c.font.sans,
-	fontSize: c.textSize.sm,
-	lineHeight: c.lineHeight.base
+	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: a = "top", openDelay: o = _, closeDelay: c = v, children: u }) {
-	let [h = !1, b] = n(e, t, r), { refs: x, floatingStyles: S, context: C } = i({
+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: a,
+		placement: i,
 		onOpenChange: b
 	}), w = p(C, {
 		delay: {
 			open: o,
-			close: c
+			close: s
 		},
 		move: !1
 	}), T = f(C), E = d(C, { escapeKey: !0 }), D = g(C, { role: "tooltip" }), { getReferenceProps: O, getFloatingProps: k } = m([
@@ -43,7 +43,7 @@ function S({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: a = "top"
 		T,
 		E,
 		D
-	]), A = s(() => ({
+	]), A = c(() => ({
 		open: h,
 		refs: x,
 		floatingStyles: S,
@@ -56,22 +56,22 @@ function S({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: a = "top"
 		O,
 		k
 	]);
-	return /* @__PURE__ */ l(y.Provider, {
+	return /* @__PURE__ */ u(y.Provider, {
 		value: A,
-		children: u
+		children: l
 	});
 }
 S.displayName = "Tooltip";
 function C({ ref: e, "aria-describedby": n, className: i, sx: a, ...o }) {
-	let { refs: s, getReferenceProps: c } = b("Trigger"), u = h([s.setReference, e]), d = c(o), f = [n, d["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ l(t, {
+	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__ */ l("button", {
+		children: (e) => /* @__PURE__ */ u("button", {
 			type: "button",
 			...d,
-			ref: u,
+			ref: l,
 			"aria-describedby": f,
 			"data-ui": "tooltip-trigger",
 			className: e
@@ -79,21 +79,21 @@ function C({ ref: e, "aria-describedby": n, className: i, sx: a, ...o }) {
 	});
 }
 C.displayName = "Tooltip.Trigger";
-function w({ ref: e, style: n, className: r, sx: i, ...a }) {
-	let { open: o, refs: s, floatingStyles: c, getFloatingProps: d } = b("Content"), f = h([s.setFloating, e]);
-	if (!o) return null;
-	let { tabIndex: p, ...m } = d(a);
-	return /* @__PURE__ */ l(u, { children: /* @__PURE__ */ l(t, {
+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: i,
-		children: (e) => /* @__PURE__ */ l("div", {
+		sx: a,
+		children: (e) => /* @__PURE__ */ u("div", {
 			...m,
 			ref: f,
 			"data-ui": "tooltip",
 			style: {
 				...n,
-				...c
+				...l
 			},
 			className: e
 		})

package/dist/tooltip.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Tooltip } from "./tooltip-CB-HC1js.js";
+export { t as Tooltip } from "./tooltip-CaL3rKbV.js";

package/dist/types/components/theme-root/theme-root.d.ts

@@ -1,11 +1,17 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type SxProps } from '../../styling/sx';
-export type ThemeName = 'dark' | 'light';
+import { type ThemeName } from '../../styling/theme-scope';
+export type { ThemeName };
 export interface ThemeRootProps extends ComponentPropsWithRef<'div'>, SxProps {
     theme?: ThemeName;
+    /**
+     * Where overlays inside this root portal to. Omitted: the enclosing ThemeRoot's container, else
+     * the default (`body`). `null`: overlays wait until the host element is set.
+     */
+    portalContainer?: HTMLElement | null;
     children?: ReactNode;
 }
-export declare function ThemeRoot({ ref, theme, className, sx, ...rest }: ThemeRootProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ThemeRoot({ ref, theme, portalContainer, className, sx, ...rest }: ThemeRootProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace ThemeRoot {
     var displayName: string;
 }

package/dist/types/overlay/overlay-portal.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export declare function OverlayPortal({ children }: {
+    children?: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace OverlayPortal {
+    var displayName: string;
+}

package/dist/types/styling/theme-scope.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type ThemeName = 'dark' | 'light';
+export interface ThemeScope {
+    theme: ThemeName;
+    /** `undefined` keeps default portal routing; `null` holds portals until the host exists. */
+    portalContainer: HTMLElement | null | undefined;
+}
+export declare const ThemeScopeContext: import("react").Context<ThemeScope | null>;
+/** The nearest ThemeRoot's scope, or `null` outside any ThemeRoot (page theme applies). */
+export declare function useThemeScope(): ThemeScope | null;
+/** What a `data-theme` scope root sets besides the attribute: inherited text color and color-scheme. */
+export declare const themeScopeStyle: import("@emotion/react").SerializedStyles;
+/** Re-applies the nearest ThemeRoot's theme around portaled content; renders children bare outside one. */
+export declare function ThemeBoundary({ children }: {
+    children?: ReactNode;
+}): string | number | bigint | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export declare namespace ThemeBoundary {
+    var displayName: string;
+}

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

@@ -0,0 +1,31 @@
+'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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React components styled with Emotion and themed through CSS custom properties.",
   "keywords": [
     "react",
@@ -178,7 +178,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@floating-ui/react": "^0.27.20",
-    "@jfrader/tokens": "0.3.0"
+    "@jfrader/tokens": "0.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",