@jfrader/ui 0.4.0 → 0.5.1

package/dist/elastic-slider-BG6K019r.js

@@ -0,0 +1,395 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a, t as o } from "./media-8yrN85VT.js";
+import { a as ee, c as te, d as ne, f as re, g as ie, h as ae, i as oe, l as se, m as s, n as c, o as ce, p as le, r as l, s as ue, t as u, u as de } from "./use-slider-interaction-ChL-208h.js";
+import { useEffect as d, useRef as f, useState as fe } from "react";
+import { vars as p } from "@jfrader/tokens/vars";
+import { createElement as m } from "@emotion/react";
+import { jsx as h, jsxs as g } from "@emotion/react/jsx-runtime";
+import { MotionConfig as pe, motion as me, useMotionValue as he, useMotionValueEvent as _, useReducedMotion as ge, useSpring as v, useTransform as _e, useVelocity as ve } from "motion/react";
+//#region src/components/elastic-slider/elastic-slider.tsx
+var y = 26, ye = 1.15, be = 7, xe = 10, Se = 6, Ce = .02, we = 10, Te = {
+	stiffness: 380,
+	damping: 26
+}, Ee = {
+	stiffness: 300,
+	damping: 20
+}, De = {
+	type: "spring",
+	stiffness: 420,
+	damping: 28
+}, b = "--elastic-slider-stretch-start", x = "--elastic-slider-stretch-end", S = "--elastic-slider-squash", C = "--elastic-slider-shift", w = "--elastic-slider-tilt", T = e({
+	"0%": { scale: "1" },
+	"45%": { scale: "1.8" },
+	"100%": { scale: "1" }
+}), Oe = t(s, { label: "elastic-slider" }), ke = t({ marginInline: p.space[6] }), Ae = t({
+	position: "absolute",
+	insetInline: 0,
+	insetBlock: 0,
+	marginBlock: "auto",
+	blockSize: p.space[2],
+	borderRadius: p.radius.full,
+	background: p.color.surfaceInset,
+	pointerEvents: "none",
+	[i]: {
+		forcedColorAdjust: "none",
+		background: "Canvas"
+	}
+}), je = t({
+	position: "absolute",
+	insetInlineStart: `calc(-1 * var(${b}, 0px))`,
+	insetInlineEnd: `calc(-1 * var(${x}, 0px))`,
+	insetBlock: 0,
+	marginBlock: "auto",
+	blockSize: p.space[2],
+	boxSizing: "border-box",
+	overflow: "hidden",
+	border: `1px solid ${p.color.borderControl}`,
+	borderRadius: p.radius.full,
+	scale: `1 var(${S}, 1)`,
+	pointerEvents: "none",
+	[a]: {
+		insetInline: 0,
+		scale: "none"
+	},
+	[i]: {
+		forcedColorAdjust: "none",
+		borderColor: "CanvasText"
+	}
+}), Me = t({
+	position: "absolute",
+	insetBlock: 0,
+	insetInlineStart: 0,
+	background: p.color.accent,
+	[i]: { background: "Highlight" }
+}), Ne = t({
+	position: "absolute",
+	insetBlock: 0,
+	marginBlock: "auto",
+	marginInlineStart: `calc(${p.space[1]} / -2)`,
+	inlineSize: p.space[1],
+	blockSize: p.space[3],
+	boxSizing: "border-box",
+	border: `1px solid ${p.color.borderControl}`,
+	borderRadius: p.radius.full,
+	background: p.color.surfaceRaised,
+	pointerEvents: "none",
+	"&[data-latched]": {
+		blockSize: p.space[4],
+		background: p.color.accent,
+		animation: `${T} ${p.motion.duration.slow} ${p.motion.easeStandard}`
+	},
+	[a]: { "&[data-latched]": { animation: "none" } },
+	[i]: {
+		forcedColorAdjust: "none",
+		background: "Canvas",
+		borderColor: "CanvasText",
+		"&[data-latched]": { background: "Highlight" }
+	}
+}), Pe = t({
+	position: "absolute",
+	insetBlock: 0,
+	marginBlock: "auto",
+	marginInlineStart: `calc(${p.space[8]} / -2)`,
+	inlineSize: p.space[8],
+	blockSize: p.space[8],
+	display: "grid",
+	placeItems: "center",
+	borderRadius: p.radius.full,
+	translate: `var(${C}, 0px)`,
+	cursor: "grab",
+	"&:focus-visible": {
+		...r,
+		zIndex: 2
+	},
+	[a]: { translate: "none" },
+	"&[data-dragging]": {
+		cursor: "grabbing",
+		zIndex: 3
+	},
+	"&[aria-disabled=\"true\"]": { cursor: "default" }
+}), Fe = t({
+	inlineSize: p.space[6],
+	blockSize: p.space[6],
+	boxSizing: "border-box",
+	border: `2px solid ${p.color.borderControl}`,
+	borderRadius: p.radius.full,
+	background: p.color.surfaceRaised,
+	boxShadow: p.shadow.raised,
+	pointerEvents: "none",
+	[i]: {
+		forcedColorAdjust: "none",
+		background: "Canvas",
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+}), Ie = t({
+	position: "absolute",
+	insetBlockEnd: `calc(100% + ${p.space[2]})`,
+	paddingInline: p.space[2],
+	paddingBlock: p.space[1],
+	inlineSize: "max-content",
+	maxInlineSize: "min(24rem, 80vw)",
+	overflowWrap: "anywhere",
+	border: `1px solid ${p.color.borderControl}`,
+	borderRadius: p.radius.md,
+	background: p.color.surfaceRaised,
+	color: p.color.text,
+	boxShadow: p.shadow.raised,
+	fontSize: p.textSize.xs,
+	fontVariantNumeric: "tabular-nums",
+	pointerEvents: "none",
+	transformOrigin: "bottom center",
+	rotate: `var(${w}, 0deg)`,
+	opacity: 0,
+	transition: `opacity ${p.motion.duration.fast} ${p.motion.easeStandard}`,
+	"[data-dragging] > &, [data-slider-thumb]:focus-visible > &": { opacity: 1 },
+	[o]: { insetBlockEnd: `calc(100% + ${p.space[4]})` },
+	[a]: { rotate: "none" },
+	[i]: {
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+});
+function Le(e) {
+	return Math.sign(e) * y * (1 - Math.exp(-Math.abs(e) / y));
+}
+function E(e) {
+	let { ref: t, value: r, defaultValue: i, onValueChange: a, onValueCommit: o, label: s, description: p, error: T, invalid: E = !1, disabled: D = !1, min: O = 0, max: k = 100, step: A = 1, largeStep: Re, marks: ze = [], locale: Be, formatOptions: Ve, formatValue: He, showValue: j = !0, start: M, end: N, haptics: Ue = !1, name: P, size: We = "md", slotProps: F, className: Ge, sx: Ke, onKeyDown: qe, "aria-label": Je, "aria-labelledby": Ye, "aria-describedby": Xe, "aria-invalid": Ze, ...Qe } = e, I = ge() ?? !1, L = v(0, Te), R = f(null), z = f(!1), [$e, B] = fe(null), V = (e) => {
+		R.current = e, B(e);
+	}, et = (e) => {
+		if (!Ue || I || e !== "touch") return;
+		let t = H.controlRef.current?.ownerDocument.defaultView?.navigator;
+		if (typeof t?.vibrate == "function") try {
+			t.vibrate(Se);
+		} catch {}
+	}, H = ee({
+		component: "ElasticSlider",
+		range: !1,
+		value: r,
+		defaultValue: i,
+		min: O,
+		max: k,
+		step: A,
+		largeStep: Re,
+		minStepsBetweenThumbs: 0,
+		disabled: D,
+		onValueChange: (e) => a?.(e),
+		onValueCommit: (e) => o?.(e),
+		onPointerSample: ({ raw: e, low: t, high: n, pxPerUnit: r, rtl: i }) => {
+			z.current = i, L.set(I ? 0 : Le((e - Math.max(t, Math.min(n, e))) * r));
+		},
+		resolvePointer: ({ raw: e, pxPerUnit: t, pointerType: n }) => {
+			let r = (n) => Math.abs(e - n) * t, i = R.current;
+			if (i !== null && r(i) > xe && (i = null), i === null) {
+				for (let e of Y) r(e) <= be && (i === null || r(e) < r(i)) && (i = e);
+				i !== null && et(n);
+			}
+			return i !== R.current && V(i), i ?? e;
+		},
+		onGestureEnd: () => {
+			L.set(0), V(null);
+		}
+	}), { id: U, controlRef: W, current: tt, percent: G } = H, K = tt, { format: q } = oe(Be, Ve, He), J = H.normalizeMarks(ze), Y = J.map((e) => e.value).sort((e, t) => e - t), nt = [
+		O,
+		k,
+		A,
+		...Y
+	].join(" ");
+	d(() => {
+		R.current = null, B(null), L.jump(0);
+	}, [nt]);
+	let rt = he(G(K));
+	d(() => rt.set(G(K)), [
+		K,
+		O,
+		k
+	]);
+	let it = v(_e(ve(rt), (e) => {
+		let t = W.current?.matches(":dir(rtl)") ? e : -e;
+		return Math.max(-10, Math.min(we, t * Ce));
+	}), Ee), X = (e, t) => W.current?.style.setProperty(e, t);
+	_(L, "change", (e) => {
+		X(b, `${Math.max(0, -e)}px`), X(x, `${Math.max(0, e)}px`), X(S, String(1 - .4 * Math.min(1, Math.abs(e) / y))), X(C, `${z.current ? -e : e}px`);
+	}), _(it, "change", (e) => X(w, `${I ? 0 : e}deg`));
+	let Z = u(s), at = u(p), Q = u(T), $ = F?.thumb, ot = H.active === 0;
+	return /* @__PURE__ */ h(pe, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ h(n, {
+			className: Ge,
+			styles: Oe,
+			sx: Ke,
+			children: (e) => /* @__PURE__ */ g("div", {
+				...Qe,
+				ref: t,
+				className: e,
+				"data-ui": "elastic-slider",
+				"data-disabled": D || void 0,
+				onKeyDown: (e) => {
+					qe?.(e), H.handleRootKeyDown(e);
+				},
+				children: [
+					(Z || j) && /* @__PURE__ */ g("div", {
+						css: se,
+						children: [Z && /* @__PURE__ */ h("span", {
+							...F?.label,
+							id: `${U}-label`,
+							css: [de, F?.label?.css],
+							children: s
+						}), j && /* @__PURE__ */ h("span", {
+							...F?.readout,
+							"aria-hidden": "true",
+							"data-ui": "elastic-slider-readout",
+							css: [le, F?.readout?.css],
+							children: q(K)
+						})]
+					}),
+					at && /* @__PURE__ */ h("div", {
+						...F?.description,
+						id: `${U}-description`,
+						css: [ue, F?.description?.css],
+						children: p
+					}),
+					Q && /* @__PURE__ */ h("div", {
+						...F?.error,
+						id: `${U}-error`,
+						role: "alert",
+						css: [te, F?.error?.css],
+						children: T
+					}),
+					/* @__PURE__ */ g("div", {
+						css: ae,
+						children: [
+							u(M) && /* @__PURE__ */ h("div", {
+								...F?.start,
+								children: M
+							}),
+							/* @__PURE__ */ g("div", {
+								...F?.control,
+								...H.controlHandlers(F?.control),
+								css: [
+									ce,
+									ke,
+									ie[We],
+									F?.control?.css
+								],
+								"data-ui": "elastic-slider-control",
+								"data-disabled": D || void 0,
+								children: [
+									/* @__PURE__ */ h("div", {
+										...F?.rail,
+										"data-ui": "elastic-slider-rail",
+										"aria-hidden": "true",
+										css: [Ae, F?.rail?.css]
+									}),
+									/* @__PURE__ */ h("div", {
+										...F?.track,
+										"data-ui": "elastic-slider-track",
+										"aria-hidden": "true",
+										css: [je, F?.track?.css],
+										children: /* @__PURE__ */ h("div", {
+											...F?.fill,
+											"data-ui": "elastic-slider-fill",
+											css: [Me, F?.fill?.css],
+											style: {
+												...F?.fill?.style,
+												inlineSize: `${G(K)}%`
+											}
+										})
+									}),
+									J.map((e, t) => {
+										let n = c(F?.tick, t);
+										return /* @__PURE__ */ m("span", {
+											...n,
+											key: e.value,
+											"data-ui": "elastic-slider-tick",
+											"data-latched": $e === e.value || void 0,
+											"aria-hidden": "true",
+											css: [Ne, n?.css],
+											style: {
+												...n?.style,
+												insetInlineStart: `${G(e.value)}%`
+											}
+										});
+									}),
+									/* @__PURE__ */ g("div", {
+										...$,
+										id: `${U}-thumb`,
+										"data-slider-thumb": 0,
+										"data-dragging": ot || void 0,
+										role: "slider",
+										tabIndex: D ? -1 : 0,
+										"aria-orientation": "horizontal",
+										"aria-disabled": D,
+										"aria-invalid": Q || E ? !0 : $?.["aria-invalid"] ?? Ze,
+										"aria-valuemin": O,
+										"aria-valuemax": k,
+										"aria-valuenow": K,
+										"aria-valuetext": q(K),
+										"aria-label": $?.["aria-label"] ?? Je,
+										"aria-labelledby": l(Ye, $?.["aria-labelledby"], Z && `${U}-label`),
+										"aria-describedby": l(Xe, $?.["aria-describedby"], at && `${U}-description`, Q && `${U}-error`),
+										css: [Pe, $?.css],
+										style: {
+											...$?.style,
+											insetInlineStart: `${G(K)}%`
+										},
+										children: [/* @__PURE__ */ h(me.span, {
+											"aria-hidden": "true",
+											"data-ui": "elastic-slider-thumb-visual",
+											css: Fe,
+											animate: { scale: !I && ot ? ye : 1 },
+											transition: I ? { duration: 0 } : De
+										}), /* @__PURE__ */ h("span", {
+											...F?.bubble,
+											"data-ui": "elastic-slider-bubble",
+											"aria-hidden": "true",
+											css: [Ie, F?.bubble?.css],
+											style: {
+												...F?.bubble?.style,
+												...G(K) <= 50 ? { insetInlineStart: 0 } : { insetInlineEnd: 0 }
+											},
+											children: q(K)
+										})]
+									})
+								]
+							}),
+							u(N) && /* @__PURE__ */ h("div", {
+								...F?.end,
+								children: N
+							})
+						]
+					}),
+					J.some((e) => u(e.label)) && /* @__PURE__ */ h("div", {
+						css: re,
+						children: J.map((e, t) => {
+							if (!u(e.label)) return null;
+							let n = c(F?.mark, t);
+							return /* @__PURE__ */ m("button", {
+								...n,
+								key: e.value,
+								type: "button",
+								disabled: D,
+								"data-ui": "elastic-slider-mark",
+								css: [ne, n?.css],
+								onClick: (t) => {
+									n?.onClick?.(t), t.defaultPrevented || H.selectMark(e.value);
+								}
+							}, e.label);
+						})
+					}),
+					P !== void 0 && /* @__PURE__ */ h("input", {
+						type: "hidden",
+						disabled: D,
+						name: P,
+						value: K
+					})
+				]
+			})
+		})
+	});
+}
+E.displayName = "ElasticSlider";
+//#endregion
+export { E as t };

package/dist/elastic-slider.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ElasticSlider } from "./elastic-slider-BG6K019r.js";

package/dist/empty-state-CDgrjPPf.js

@@ -0,0 +1,142 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./renderable-DzcIj1Lo.js";
+import { useId as r } from "react";
+import { vars as i } from "@jfrader/tokens/vars";
+import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
+//#region src/components/empty-state/empty-state.tsx
+var s = "40ch", c = "24ch", l = e({
+	boxSizing: "border-box",
+	display: "flex",
+	gap: i.space[4],
+	minInlineSize: 0,
+	fontFamily: i.font.sans,
+	lineHeight: i.lineHeight.base,
+	color: i.color.text
+}), u = {
+	centered: e({
+		flexDirection: "column",
+		alignItems: "center",
+		textAlign: "center",
+		paddingBlock: i.space[8],
+		paddingInline: i.space[5]
+	}),
+	inline: e({
+		flexDirection: "row",
+		flexWrap: "wrap",
+		alignItems: "center",
+		textAlign: "start",
+		paddingBlock: i.space[4],
+		paddingInline: i.space[5]
+	})
+}, d = e({
+	boxSizing: "border-box",
+	display: "grid",
+	placeItems: "center",
+	flexShrink: 0,
+	inlineSize: i.space[12],
+	blockSize: i.space[12],
+	border: `1px solid ${i.color.border}`,
+	borderRadius: i.radius.md,
+	backgroundColor: i.color.surfaceHover,
+	color: i.color.textMuted,
+	"& > svg": {
+		inlineSize: i.space[6],
+		blockSize: i.space[6]
+	}
+}), f = e({
+	display: "grid",
+	gap: i.space[2],
+	minInlineSize: 0
+}), p = {
+	centered: e({
+		justifyItems: "center",
+		maxInlineSize: "100%"
+	}),
+	inline: e({ flex: `1 1 ${c}` })
+}, m = e({
+	margin: 0,
+	fontSize: i.textSize.md,
+	fontWeight: i.fontWeight.medium,
+	lineHeight: i.lineHeight.base,
+	color: i.color.text,
+	textWrap: "balance",
+	overflowWrap: "anywhere"
+}), h = e({
+	margin: 0,
+	maxInlineSize: s,
+	fontSize: i.textSize.sm,
+	color: i.color.textMuted,
+	textWrap: "pretty",
+	overflowWrap: "anywhere"
+}), g = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: i.space[3]
+}), _ = {
+	centered: e({ justifyContent: "center" }),
+	inline: void 0
+};
+function v(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function y({ ref: e, title: i, description: s, icon: c, action: y, headingLevel: b = 3, variant: x = "centered", slotProps: S, className: C, sx: w, "aria-labelledby": T, "aria-describedby": E, ...D }) {
+	let O = r(), k = `${O}-title`, A = `${O}-description`, j = n(i), M = n(s), N = `h${b}`;
+	return /* @__PURE__ */ a(t, {
+		className: C,
+		styles: [l, u[x]],
+		sx: w,
+		children: (t) => /* @__PURE__ */ o("section", {
+			...D,
+			ref: e,
+			"data-ui": "empty-state",
+			"data-variant": x,
+			"aria-labelledby": T ? v(T, j && k) : void 0,
+			"aria-describedby": v(E, M && A),
+			className: t,
+			children: [
+				n(c) && /* @__PURE__ */ a("div", {
+					"data-ui": "empty-state-icon",
+					"aria-hidden": "true",
+					className: S?.icon?.className,
+					css: [d, S?.icon?.css],
+					children: c
+				}),
+				/* @__PURE__ */ o("div", {
+					"data-ui": "empty-state-content",
+					className: S?.content?.className,
+					css: [
+						f,
+						p[x],
+						S?.content?.css
+					],
+					children: [j && /* @__PURE__ */ a(N, {
+						id: k,
+						className: S?.title?.className,
+						css: [m, S?.title?.css],
+						children: i
+					}), M && /* @__PURE__ */ a("p", {
+						id: A,
+						className: S?.description?.className,
+						css: [h, S?.description?.css],
+						children: s
+					})]
+				}),
+				n(y) && /* @__PURE__ */ a("div", {
+					"data-ui": "empty-state-action",
+					className: S?.action?.className,
+					css: [
+						g,
+						_[x],
+						S?.action?.css
+					],
+					children: y
+				})
+			]
+		})
+	});
+}
+y.displayName = "EmptyState";
+//#endregion
+export { y as t };

package/dist/empty-state.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as EmptyState } from "./empty-state-CDgrjPPf.js";