@jfrader/ui 0.5.0 → 0.6.0

package/dist/next.js

@@ -0,0 +1,65 @@
+'use client';
+import { t as e } from "./css-BYJhdGh-.js";
+import { t } from "./theme-provider-BvcY-iJu.js";
+import { useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
+import { useServerInsertedHTML as o } from "next/navigation";
+import s from "@emotion/cache";
+//#region src/components/next/registry.ts
+function c(e) {
+	let t = s({ key: e });
+	t.compat = !0;
+	let n = t.insert, r = [];
+	return t.insert = (...e) => {
+		let [i, a] = e;
+		return t.inserted[a.name] === void 0 && r.push({
+			name: a.name,
+			isGlobal: !i
+		}), n(...e);
+	}, {
+		cache: t,
+		flush: () => {
+			let e = r;
+			return r = [], e;
+		}
+	};
+}
+function l(e, t) {
+	let n = [], r = [], i = "";
+	for (let { name: a, isGlobal: o } of e) {
+		let e = t[a];
+		typeof e == "string" && (o ? n.push({
+			name: a,
+			styles: e
+		}) : (r.push(a), i += e));
+	}
+	return {
+		globals: n,
+		names: r,
+		styles: i
+	};
+}
+//#endregion
+//#region src/components/next/emotion-registry.tsx
+var u = "css";
+function d({ cacheKey: s = u, children: d }) {
+	let [{ cache: f, flush: p }] = n(() => c(s));
+	return o(() => {
+		let e = p();
+		if (e.length === 0) return null;
+		let { globals: t, names: n, styles: o } = l(e, f.inserted);
+		return /* @__PURE__ */ a(r, { children: [t.map(({ name: e, styles: t }) => /* @__PURE__ */ i("style", {
+			"data-emotion": `${f.key}-global ${e}`,
+			dangerouslySetInnerHTML: { __html: t }
+		}, e)), n.length > 0 && /* @__PURE__ */ i("style", {
+			"data-emotion": `${f.key} ${n.join(" ")}`,
+			dangerouslySetInnerHTML: { __html: o }
+		}, f.key)] });
+	}), /* @__PURE__ */ i(e, {
+		value: f,
+		children: /* @__PURE__ */ i(t, { children: d })
+	});
+}
+d.displayName = "EmotionRegistry";
+//#endregion
+export { d as EmotionRegistry };

package/dist/now-playing-DjVm1Phm.js

@@ -0,0 +1,439 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-DgVO3NaB.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as c } from "./button-C6OV0C7J.js";
+import { t as l } from "./card-C008OQCp.js";
+import { t as u } from "./progress-Bcuz3Ob4.js";
+import { t as d } from "./slider-DjAnGmlC.js";
+import { createContext as f, useContext as p, useEffect as m, useId as ee, useLayoutEffect as te, useRef as h, useState as g } from "react";
+import { vars as _ } from "@jfrader/tokens/vars";
+import { jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
+import { MotionConfig as ne, motion as b, useInView as x, useReducedMotion as re } from "motion/react";
+import { useMergeRefs as S } from "@floating-ui/react";
+//#region src/components/now-playing/now-playing.tsx
+var ie = 3, ae = 70, oe = 700, se = 12, ce = [
+	.6,
+	1,
+	.75,
+	.9,
+	.5
+], le = "21rem", ue = {
+	type: "spring",
+	stiffness: 360,
+	damping: 32
+}, C = [
+	.2,
+	.4,
+	.7,
+	.45,
+	.9,
+	.6,
+	.35,
+	.8,
+	.5
+], de = Array.from({ length: 54 }, (e, t) => C[t % C.length]), fe = {
+	play: "Play",
+	pause: "Pause",
+	previous: "Previous",
+	next: "Next",
+	expand: "Expand",
+	collapse: "Collapse",
+	seek: "Seek",
+	empty: "No track selected",
+	unavailable: "Duration unavailable",
+	busy: "Loading",
+	playing: "Playing",
+	paused: "Paused",
+	position: (e, t) => `${e} / ${t}`
+}, pe = f(!1), me = e({
+	from: { transform: "scaleY(0.35)" },
+	to: { transform: "scaleY(1)" }
+}), he = t({
+	inlineSize: `min(100%, ${le})`,
+	minInlineSize: 0,
+	fontFamily: _.font.sans,
+	color: _.color.text
+}), ge = t({
+	padding: _.space[4],
+	overflowWrap: "anywhere"
+}), _e = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: _.space[2],
+	"&[hidden]": { display: "none" }
+}), ve = t({
+	display: "grid",
+	gap: _.space[4],
+	"&[hidden]": { display: "none" }
+}), ye = t({
+	display: "grid",
+	gap: _.space[1],
+	flex: "1 1 6rem",
+	minInlineSize: 0
+}), be = t({
+	fontSize: _.textSize.md,
+	fontWeight: _.fontWeight.medium
+}), xe = t({
+	fontSize: _.textSize.sm,
+	color: _.color.textMuted
+}), w = t({
+	display: "block",
+	inlineSize: "100%",
+	aspectRatio: "1",
+	objectFit: "cover",
+	borderRadius: _.radius.lg,
+	background: _.color.surfaceInset
+}), Se = t({
+	inlineSize: _.space[12],
+	flexShrink: 0
+}), Ce = t({
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "center",
+	gap: _.space[2]
+}), we = t({
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "space-between",
+	gap: _.space[2],
+	fontSize: _.textSize.sm,
+	fontVariantNumeric: "tabular-nums"
+}), Te = t({
+	display: "flex",
+	alignItems: "center",
+	gap: "1px",
+	blockSize: _.space[8],
+	pointerEvents: "none",
+	[n]: { display: "none" }
+}), Ee = t({
+	flex: "1 1 0",
+	minInlineSize: 0,
+	background: _.color.accentText,
+	borderRadius: _.radius.full
+}), De = t({
+	marginBlockStart: _.space[3],
+	color: _.color.dangerText,
+	fontSize: _.textSize.sm
+}), T = t({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "2px",
+	blockSize: _.space[6],
+	[n]: { display: "none" }
+}), E = t({
+	inlineSize: _.space[1],
+	blockSize: "100%",
+	background: _.color.accentText,
+	transformOrigin: "bottom",
+	animation: `${me} ${_.motion.duration.slow} ease-in-out infinite alternate`,
+	animationPlayState: "paused",
+	"[data-playing] > &": { animationPlayState: "running" },
+	[r]: { animation: "none" }
+});
+function D(e, t) {
+	let n = Math.floor(e), r = {
+		hours: Math.floor(n / 3600),
+		minutes: Math.floor(n / 60) % 60,
+		seconds: n % 60
+	}, i = Intl.DurationFormat;
+	return typeof i == "function" ? new i(t, { style: "digital" }).format(r) : new Intl.ListFormat(t, {
+		style: "short",
+		type: "unit"
+	}).format(Object.entries(r).filter(([e, t]) => t > 0 || e === "seconds").map(([e, n]) => new Intl.NumberFormat(t, {
+		style: "unit",
+		unit: e.slice(0, -1),
+		unitDisplay: "short"
+	}).format(n)));
+}
+function Oe(e, t) {
+	if (t === void 0 || !Number.isFinite(t) || t <= 0) return e / Math.ceil(e);
+	let n = Math.max(1, Math.round(e / t));
+	return n * t === e ? t : e / n;
+}
+function ke(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function Ae({ track: e, slot: t }) {
+	let [n, r] = g(!1);
+	return n || !e.artwork ? /* @__PURE__ */ v("span", {
+		className: t?.className,
+		style: t?.style,
+		css: [w, t?.css],
+		"aria-hidden": !e.artworkAlt || void 0,
+		role: e.artworkAlt ? "img" : void 0,
+		"aria-label": e.artworkAlt
+	}) : /* @__PURE__ */ v("img", {
+		...t,
+		draggable: !1,
+		css: [w, t?.css],
+		src: e.artwork,
+		alt: e.artworkAlt ?? "",
+		onError: (e) => {
+			r(!0), t?.onError?.(e);
+		}
+	});
+}
+function O({ ref: e, playing: t, className: n, sx: r, ...a }) {
+	let o = p(pe), s = h(null), c = S([s, e]), l = x(s), u = re(), [d, f] = g(!0);
+	return m(() => {
+		let e = s.current?.ownerDocument;
+		if (!e) return;
+		let t = () => f(e.visibilityState !== "hidden");
+		return t(), e.addEventListener("visibilitychange", t), () => e.removeEventListener("visibilitychange", t);
+	}, []), /* @__PURE__ */ v(i, {
+		className: n,
+		styles: T,
+		sx: r,
+		children: (e) => /* @__PURE__ */ v("span", {
+			...a,
+			ref: c,
+			className: e,
+			"data-ui": "now-playing-levels",
+			"aria-hidden": "true",
+			"data-playing": (t ?? o) && l && d && !u || void 0,
+			children: ce.map((e, t) => /* @__PURE__ */ v("span", {
+				css: E,
+				style: {
+					blockSize: `${e * 100}%`,
+					animationDelay: `calc(${_.motion.duration.base} * ${t / -2})`
+				}
+			}, t))
+		})
+	});
+}
+O.displayName = "NowPlaying.Levels";
+function k({ ref: e, tracks: t, value: n, defaultValue: r = 0, onValueChange: f, playing: p, defaultPlaying: g = !1, onPlayingChange: _, open: x, defaultOpen: ce = !1, onOpenChange: le, position: C, defaultPosition: me = 0, onPositionChange: w, busy: T = !1, error: E, waveform: k, label: A = "Now playing", labels: je, locale: j, seekStep: Me, seekLargeStep: Ne = 30, slotProps: M, className: Pe, sx: Fe, onKeyDown: Ie, "aria-label": Le, "aria-labelledby": N, "aria-describedby": Re, ...ze }) {
+	let [Be, Ve] = a(n, r, f), [He, Ue] = a(p, g, _), [We, P] = a(x, ce, le), [Ge, F] = a(C, me, w), I = Be ?? 0, L = He ?? !1, R = We ?? !1, Ke = Ge ?? 0, z = {
+		...fe,
+		...je
+	}, B = Number.isInteger(I) ? t[I] : void 0, V = B?.duration != null && Number.isFinite(B.duration) && B.duration > 0 ? B.duration : null, qe = Math.max(0, Number.isFinite(Ke) ? Ke : 0), H = V === null ? qe : Math.min(V, qe), U = s(E) && E !== "", W = ee(), Je = h(null), Ye = h(null), Xe = h(null), Ze = S([Je, M?.expand?.ref]), Qe = S([Ye, M?.collapse?.ref]), $e = S([Xe, M?.full?.ref]), G = h(!1), K = h(!1), q = re(), J = h(0), Y = h(!1), X = h(I), et = X.current === I ? 0 : J.current;
+	m(() => {
+		X.current !== I && (J.current = 0, X.current = I);
+	}, [I]), te(() => {
+		R && G.current && (Ye.current?.focus(), G.current = !1), !R && K.current && (Je.current?.focus(), K.current = !1);
+	}, [R]);
+	let Z = (e) => {
+		B && !T && ((e > 0 || H <= ie) && (J.current = e, Ve((I + e + t.length) % t.length)), F(0));
+	}, Q = () => P(!1), tt = /* @__PURE__ */ y("div", {
+		css: ye,
+		children: [/* @__PURE__ */ v("span", {
+			...M?.title,
+			css: [be, M?.title?.css],
+			children: B?.title ?? z.empty
+		}), B && /* @__PURE__ */ v("span", {
+			...M?.artist,
+			css: [xe, M?.artist?.css],
+			children: B.artist
+		})]
+	}), nt = /* @__PURE__ */ v(c, {
+		disabled: !B,
+		loading: T,
+		onClick: () => Ue(!L),
+		children: L ? z.pause : z.play
+	}), $ = (e) => B && /* @__PURE__ */ v(b.div, {
+		css: e && Se,
+		layoutId: `${W}-artwork`,
+		"data-ui": "now-playing-artwork",
+		layout: !q,
+		drag: !e && !q && "y",
+		dragConstraints: {
+			top: 0,
+			bottom: 0
+		},
+		dragElastic: {
+			top: 0,
+			bottom: .2
+		},
+		onPointerDownCapture: () => {
+			Y.current = !1;
+		},
+		onPointerCancel: () => {
+			Y.current = !0;
+		},
+		onDragEnd: (e, t) => {
+			!Y.current && (t.offset.y > ae || t.offset.y > 0 && t.velocity.y > oe) && Q();
+		},
+		transition: q ? { duration: 0 } : ue,
+		children: /* @__PURE__ */ v(b.div, {
+			initial: !q && {
+				x: et * se,
+				opacity: 0
+			},
+			animate: {
+				x: 0,
+				opacity: 1
+			},
+			children: /* @__PURE__ */ v(Ae, {
+				track: B,
+				slot: M?.artwork
+			}, B.artwork)
+		}, B.id)
+	});
+	return /* @__PURE__ */ v(ne, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ v(pe.Provider, {
+			value: L && !T && !!B,
+			children: /* @__PURE__ */ v(i, {
+				className: Pe,
+				styles: he,
+				sx: Fe,
+				children: (t) => /* @__PURE__ */ v("section", {
+					...ze,
+					ref: e,
+					"data-ui": "now-playing",
+					className: t,
+					"aria-label": Le ?? (N ? void 0 : A),
+					"aria-labelledby": N,
+					"aria-describedby": ke(Re, U && `${W}-error`),
+					"aria-busy": T || void 0,
+					onKeyDown: (e) => {
+						Ie?.(e), !e.defaultPrevented && e.key === "Escape" && R && Xe.current?.contains(e.target) && (e.preventDefault(), Q());
+					},
+					children: /* @__PURE__ */ v(b.div, {
+						layout: !q,
+						transition: q ? { duration: 0 } : ue,
+						children: /* @__PURE__ */ y(l, {
+							css: ge,
+							children: [
+								/* @__PURE__ */ y("div", {
+									...M?.mini,
+									css: [_e, M?.mini?.css],
+									hidden: R,
+									children: [
+										!R && $(!0),
+										!R && tt,
+										/* @__PURE__ */ v(O, {}),
+										nt,
+										/* @__PURE__ */ v(c, {
+											disabled: !B || T,
+											onClick: () => Z(1),
+											children: z.next
+										}),
+										/* @__PURE__ */ v(c, {
+											...M?.expand,
+											ref: Ze,
+											"aria-expanded": R,
+											"aria-controls": W,
+											onClick: (e) => {
+												M?.expand?.onClick?.(e), e.defaultPrevented || (G.current = e.detail === 0, P(!0));
+											},
+											children: z.expand
+										})
+									]
+								}),
+								/* @__PURE__ */ y("div", {
+									...M?.full,
+									ref: $e,
+									id: W,
+									hidden: !R,
+									inert: !R,
+									css: [ve, M?.full?.css],
+									onFocusCapture: (e) => {
+										K.current = !0, M?.full?.onFocusCapture?.(e);
+									},
+									onBlurCapture: (e) => {
+										!e.currentTarget.hidden && !e.currentTarget.contains(e.relatedTarget) && (K.current = !1), M?.full?.onBlurCapture?.(e);
+									},
+									children: [
+										/* @__PURE__ */ v(c, {
+											...M?.collapse,
+											ref: Qe,
+											"aria-expanded": R,
+											"aria-controls": W,
+											onClick: (e) => {
+												M?.collapse?.onClick?.(e), e.defaultPrevented || Q();
+											},
+											children: z.collapse
+										}),
+										R && $(!1),
+										R && tt,
+										/* @__PURE__ */ v("div", {
+											...M?.waveform,
+											"data-ui": "now-playing-waveform",
+											"aria-hidden": "true",
+											css: [Te, M?.waveform?.css],
+											children: (k?.length ? k : de).map((e, t) => /* @__PURE__ */ v("span", {
+												css: Ee,
+												style: { blockSize: `${Math.max(0, Math.min(1, Number.isFinite(e) ? e : 0)) * 100}%` }
+											}, t))
+										}),
+										/* @__PURE__ */ v(d, {
+											...M?.seek,
+											dir: "ltr",
+											label: M?.seek?.["aria-label"] || M?.seek?.["aria-labelledby"] ? null : z.seek,
+											min: 0,
+											max: V ?? 1,
+											step: V === null ? 1 : Oe(V, Me),
+											largeStep: Ne,
+											value: V === null ? 0 : H,
+											disabled: T || V === null || M?.seek?.disabled,
+											showValue: !1,
+											locale: j,
+											formatValue: (e) => V === null ? z.unavailable : z.position(D(e, j), D(V, j)),
+											onValueChange: (e) => {
+												!T && V !== null && Number.isFinite(e) && e !== H && F(Math.max(0, Math.min(V, e)));
+											}
+										}),
+										/* @__PURE__ */ y("div", {
+											css: we,
+											children: [/* @__PURE__ */ v("output", {
+												"aria-live": "off",
+												children: D(H, j)
+											}), /* @__PURE__ */ v("output", {
+												"aria-live": "off",
+												children: V === null ? z.unavailable : D(V - H, j)
+											})]
+										}),
+										/* @__PURE__ */ y("div", {
+											...M?.controls,
+											css: [Ce, M?.controls?.css],
+											children: [
+												/* @__PURE__ */ v(c, {
+													disabled: !B || T,
+													onClick: () => Z(-1),
+													children: z.previous
+												}),
+												nt,
+												/* @__PURE__ */ v(c, {
+													disabled: !B || T,
+													onClick: () => Z(1),
+													children: z.next
+												})
+											]
+										}),
+										/* @__PURE__ */ v(O, {})
+									]
+								}),
+								T && /* @__PURE__ */ v(u, { label: z.busy }),
+								/* @__PURE__ */ v("span", {
+									...M?.status,
+									role: "status",
+									"aria-live": "polite",
+									"aria-atomic": "true",
+									css: [o, M?.status?.css],
+									children: B ? `${B.title} — ${L ? z.playing : z.paused}` : z.empty
+								}),
+								U && /* @__PURE__ */ v("div", {
+									...M?.error,
+									id: `${W}-error`,
+									role: "alert",
+									css: [De, M?.error?.css],
+									children: E
+								})
+							]
+						})
+					})
+				})
+			})
+		})
+	});
+}
+k.displayName = "NowPlaying";
+var A = Object.assign(k, { Levels: O });
+//#endregion
+export { O as n, A as t };

package/dist/now-playing.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as NowPlaying, n as NowPlayingLevels } from "./now-playing-DjVm1Phm.js";

package/dist/{overlay-layer-SeUyyEPD.js → overlay-layer-qEbpEtb8.js}

@@ -53,12 +53,26 @@ function m({ children: e }) {
 }
 m.displayName = "OverlayLayer";
 function h({ children: e }) {
+	return /* @__PURE__ */ t(m, { children: (r) => /* @__PURE__ */ t(n, {
+		id: void 0,
+		children: e(r)
+	}) });
+}
+h.displayName = "MenuLayer";
+function g({ nodeId: e, children: r }) {
+	return /* @__PURE__ */ t(n, {
+		id: e,
+		children: r
+	});
+}
+g.displayName = "LayerContent";
+function _({ children: e }) {
 	let i = s(), a = o();
 	return !i && !a ? e : /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(n, {
 		id: void 0,
 		children: e
 	}) });
 }
-h.displayName = "IsolatedOverlay";
+_.displayName = "IsolatedOverlay";
 //#endregion
-export { m as n, f as r, h as t };
+export { f as a, m as i, g as n, h as r, _ as t };

package/dist/overlay-motion-Cr77ihn2.js

@@ -0,0 +1,90 @@
+'use client';
+import { r as e } from "./media-8yrN85VT.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { vars as i } from "@jfrader/tokens/vars";
+//#region src/overlay/exit-motion.ts
+function a(e, { subtree: t = !0 } = {}) {
+	let n = typeof e.getAnimations == "function" ? e.getAnimations({ subtree: t }).filter((e) => Number.isFinite(Number(e.effect?.getComputedTiming().endTime))) : [];
+	return Promise.allSettled(n.map((e) => e.finished));
+}
+var o = {
+	enter: () => {},
+	exit: (e) => a(e)
+};
+function s(e) {
+	let i = n(null), [o, s] = r(e);
+	return e && !o && s(!0), t(() => {
+		if (e || !o) return;
+		let t = i.current;
+		if (!t) {
+			s(!1);
+			return;
+		}
+		let n = !1;
+		return a(t).then(() => {
+			n || s(!1);
+		}), () => {
+			n = !0;
+		};
+	}, [e, o]), {
+		ref: i,
+		present: o,
+		closing: o && !e
+	};
+}
+//#endregion
+//#region src/styling/overlay-motion.ts
+var c = .96, l = .92, u = {
+	transitionDuration: i.motion.duration.base,
+	transitionTimingFunction: i.motion.easeStandard
+}, d = { transitionDuration: i.motion.duration.fast };
+function f(t) {
+	let n = {
+		opacity: 0,
+		scale: String(t),
+		translate: `0 ${i.space[2]}`
+	};
+	return {
+		transitionProperty: "opacity, scale, translate",
+		...u,
+		"@starting-style": n,
+		"[data-state=\"closing\"] > &": {
+			...n,
+			...d
+		},
+		[e]: { "&, [data-state=\"closing\"] > &": { transitionDuration: "0s" } }
+	};
+}
+var p = {
+	"&::backdrop": {
+		transitionProperty: "opacity",
+		...u
+	},
+	"&[open]::backdrop": { "@starting-style": { opacity: 0 } },
+	"&[data-state=\"closing\"]::backdrop": {
+		opacity: 0,
+		...d
+	},
+	"&[data-state=\"closing\"]": { pointerEvents: "none" },
+	[e]: { "&::backdrop, &[data-state=\"closing\"]::backdrop": { transitionDuration: "0s" } }
+}, m = {
+	transitionProperty: "opacity, translate",
+	...u,
+	"@starting-style": {
+		opacity: 0,
+		translate: "var(--overlay-enter-x, 0) var(--overlay-enter-y, 0)"
+	},
+	"&[data-state=\"closing\"]": {
+		opacity: 0,
+		translate: "var(--overlay-enter-x, 0) var(--overlay-enter-y, 0)",
+		pointerEvents: "none",
+		...d
+	},
+	"&[data-side=\"bottom\"]": { "--overlay-enter-y": `calc(-1 * ${i.space[1]})` },
+	"&[data-side=\"top\"]": { "--overlay-enter-y": i.space[1] },
+	"&[data-side=\"left\"]": { "--overlay-enter-x": i.space[1] },
+	"&[data-side=\"right\"]": { "--overlay-enter-x": `calc(-1 * ${i.space[1]})` },
+	[e]: { "&, &[data-state=\"closing\"]": { transitionDuration: "0s" } }
+};
+//#endregion
+export { m as a, o as c, d as i, s as l, l as n, p as o, u as r, f as s, c as t };

package/dist/{overlay-portal-C4JZFq2M.js → overlay-portal-C9igMHnC.js}

@@ -1,5 +1,5 @@
 'use client';
-import { i as e, t } from "./theme-scope-t7nAKc2c.js";
+import { l as e, n as t } from "./theme-scope-DGWy4H0C.js";
 import { jsx as n } from "@emotion/react/jsx-runtime";
 import { FloatingPortal as r } from "@floating-ui/react";
 //#region src/overlay/overlay-portal.tsx