@jfrader/ui 0.4.0 → 0.5.0

package/dist/expandable-card-C-qJcZ14.js

@@ -0,0 +1,340 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./disclosure-caret-C5T3fcl6.js";
+import { t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { n as c } from "./surface-DZ4d-2aL.js";
+import { createContext as l, useContext as u, useEffect as d, useId as f, useLayoutEffect as p, useMemo as m, 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 { useMergeRefs as b } from "@floating-ui/react";
+import { MotionConfig as x, animate as S, useMotionValue as C, useReducedMotion as w } from "motion/react";
+import { base as T } from "@jfrader/tokens";
+//#region src/components/expandable-card/expandable-card.tsx
+var E = l(null);
+function D(e) {
+	let t = u(E);
+	if (!t) throw Error(`ExpandableCard.${e} must be rendered inside <ExpandableCard>.`);
+	return t;
+}
+var O = {
+	type: "spring",
+	stiffness: 400,
+	damping: 40,
+	mass: 1
+}, k = {
+	duration: Number.parseFloat(T.motion.duration.fast) / 1e3,
+	ease: [
+		.2,
+		.6,
+		.2,
+		1
+	]
+}, A = e({
+	...c,
+	borderColor: _.color.borderControl,
+	borderRadius: _.radius.lg,
+	boxShadow: _.shadow.raised,
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	marginInline: "auto",
+	overflow: "clip"
+}), j = e({
+	inlineSize: "100%",
+	minInlineSize: 0
+}), M = e({
+	margin: 0,
+	font: "inherit"
+}), N = e({
+	appearance: "none",
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	alignItems: "center",
+	gap: _.space[2],
+	inlineSize: "100%",
+	boxSizing: "border-box",
+	minBlockSize: `calc(${_.space[12]} + ${_.space[4]})`,
+	padding: _.space[4],
+	border: 0,
+	background: "transparent",
+	color: "inherit",
+	font: "inherit",
+	textAlign: "start",
+	cursor: "pointer",
+	"& > span": {
+		gridColumn: 1,
+		overflowWrap: "anywhere"
+	},
+	"&::after": {
+		...n,
+		gridColumn: 2,
+		gridRow: "1 / span 2"
+	},
+	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
+	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
+	"&:focus-visible": r,
+	"&:hover:not(:disabled)": { backgroundColor: _.color.surfaceHover },
+	"&:disabled": {
+		cursor: "not-allowed",
+		opacity: .55
+	},
+	"[data-size=\"sm\"] &": {
+		minBlockSize: _.space[12],
+		padding: _.space[3]
+	},
+	[a]: { "&::after": { transitionDuration: "0s" } },
+	[i]: { "&:focus-visible": { outlineColor: "Highlight" } }
+}), P = e({
+	fontSize: _.textSize.md,
+	fontWeight: _.fontWeight.medium
+}), F = e({
+	fontSize: _.textSize.sm,
+	color: _.color.textMuted
+}), I = e({
+	overflow: "clip",
+	minInlineSize: 0,
+	"&[hidden]": { display: "none" }
+}), L = e({
+	boxSizing: "border-box",
+	maxInlineSize: "none",
+	padding: _.space[4],
+	borderBlockStart: `1px solid ${_.color.border}`,
+	fontSize: _.textSize.sm,
+	overflowWrap: "anywhere",
+	"& :where(input, select, textarea, img, video, canvas, svg, iframe)": {
+		maxInlineSize: "100%",
+		boxSizing: "border-box"
+	},
+	"[data-size=\"sm\"] &": { padding: _.space[3] }
+});
+function R(e) {
+	return e !== void 0 && Number.isFinite(e) && e > 0 ? e : void 0;
+}
+function z(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInlineSize: a, expandedInlineSize: s, size: c = "md", disabled: l = !1, headingLevel: u = 3, className: d, sx: _, onKeyDown: y, children: T, ...D }) {
+	let [k, M] = o(n, r, i), N = !!k, P = f(), F = h(null), I = h(null), L = h(null), z = b([I, e]), [B, V] = g(!1), [H, U] = g(!1), [W, G] = g(), [K, ee] = g(0), q = w(), J = C(0), Y = h(!1), X = R(a), Z = R(s) ?? X, Q = W === void 0 ? void 0 : Math.min(W, (N ? Z : X) ?? W), $ = W === void 0 ? void 0 : Math.max(0, Math.min(W, Z ?? W) - K);
+	p(() => {
+		let e = L.current;
+		if (!e) return;
+		let t = () => {
+			G(e.getBoundingClientRect().width);
+			let t = I.current;
+			if (!t) return;
+			let n = getComputedStyle(t);
+			ee(Number.parseFloat(n.borderInlineStartWidth) + Number.parseFloat(n.borderInlineEndWidth) + Number.parseFloat(n.paddingInlineStart) + Number.parseFloat(n.paddingInlineEnd));
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []), p(() => {
+		let e = I.current;
+		if (!e || Q === void 0) return;
+		let t = (t) => {
+			e.style.inlineSize = `${t}px`;
+		}, n = J.on("change", t);
+		return !Y.current || q ? (J.jump(Q), t(Q), Y.current = !0) : S(J, Q, O), () => {
+			n(), J.stop();
+		};
+	}, [
+		Q,
+		q,
+		J
+	]);
+	let te = m(() => ({
+		open: N,
+		request: M,
+		disabled: l,
+		headingLevel: u,
+		triggerId: `${P}-trigger`,
+		panelId: `${P}-panel`,
+		titleId: `${P}-title`,
+		descriptionId: `${P}-description`,
+		hasTitle: B,
+		hasDescription: H,
+		setHasTitle: V,
+		setHasDescription: U,
+		triggerRef: F,
+		expandedWidth: $
+	}), [
+		N,
+		M,
+		l,
+		u,
+		P,
+		B,
+		H,
+		$
+	]);
+	return /* @__PURE__ */ v(x, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ v(E.Provider, {
+			value: te,
+			children: /* @__PURE__ */ v("div", {
+				ref: L,
+				css: j,
+				children: /* @__PURE__ */ v(t, {
+					className: d,
+					styles: A,
+					sx: _,
+					children: (e) => /* @__PURE__ */ v("article", {
+						...D,
+						ref: z,
+						"data-ui": "expandable-card",
+						"data-size": c,
+						"data-state": N ? "open" : "closed",
+						className: e,
+						onKeyDown: (e) => {
+							if (y?.(e), e.defaultPrevented || e.key !== "Escape" || !N) return;
+							let t = e.target, n = t.closest("dialog, [role=\"dialog\"], [role=\"menu\"], [role=\"listbox\"]");
+							t.closest("[data-ui=\"expandable-card\"]") !== e.currentTarget || n && e.currentTarget.contains(n) || (e.preventDefault(), M(!1));
+						},
+						children: T
+					})
+				})
+			})
+		})
+	});
+}
+B.displayName = "ExpandableCard";
+function V({ ref: e, className: n, sx: r, onClick: i, disabled: a, "aria-labelledby": o, "aria-describedby": s, ...c }) {
+	let l = D("Trigger"), u = b([l.triggerRef, e]), d = `h${l.headingLevel}`;
+	return /* @__PURE__ */ v(d, {
+		css: M,
+		"aria-labelledby": l.triggerId,
+		children: /* @__PURE__ */ v(t, {
+			className: n,
+			styles: N,
+			sx: r,
+			children: (e) => /* @__PURE__ */ v("button", {
+				...c,
+				ref: u,
+				type: "button",
+				id: l.triggerId,
+				"data-ui": "expandable-card-trigger",
+				className: e,
+				disabled: l.disabled || a,
+				"aria-expanded": l.open,
+				"aria-controls": l.panelId,
+				"aria-labelledby": z(o, l.hasTitle && l.titleId, l.hasDescription && l.descriptionId),
+				"aria-describedby": z(s),
+				onClick: (e) => {
+					i?.(e), e.defaultPrevented || l.request(!l.open);
+				}
+			})
+		})
+	});
+}
+V.displayName = "ExpandableCard.Trigger";
+function H({ ref: e, className: n, sx: r, children: i, ...a }) {
+	let { titleId: o, setHasTitle: c } = D("Title"), l = s(i);
+	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(t, {
+		className: n,
+		styles: P,
+		sx: r,
+		children: (t) => /* @__PURE__ */ v("span", {
+			...a,
+			ref: e,
+			id: o,
+			className: t,
+			"data-ui": "expandable-card-title",
+			children: i
+		})
+	}) : null;
+}
+H.displayName = "ExpandableCard.Title";
+function U({ ref: e, className: n, sx: r, children: i, ...a }) {
+	let { descriptionId: o, setHasDescription: c } = D("Description"), l = s(i);
+	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(t, {
+		className: n,
+		styles: F,
+		sx: r,
+		children: (t) => /* @__PURE__ */ y("span", {
+			...a,
+			ref: e,
+			id: o,
+			className: t,
+			"data-ui": "expandable-card-description",
+			children: [" ", i]
+		})
+	}) : null;
+}
+U.displayName = "ExpandableCard.Description";
+function W({ ref: e, className: n, sx: r, children: i, "aria-labelledby": a, "aria-describedby": o, ...s }) {
+	let c = D("Content"), l = h(null), u = h(null), d = b([l, e]), f = C(0), m = C(+!!c.open), g = w(), _ = h(!1);
+	return p(() => {
+		let e = l.current, t = u.current;
+		if (!e || !t) return;
+		let n = 0, r = !1;
+		if (!c.open && e.contains(e.ownerDocument.activeElement) && c.triggerRef.current?.focus(), e.inert = !c.open, e.hidden = !c.open && !_.current, c.expandedWidth === void 0) return;
+		let i = (t) => {
+			e.style.blockSize = `${t}px`, c.open && t > 0 && m.get() === 0 && !m.isAnimating() && S(m, 1, k);
+		}, a = f.on("change", i), o = m.on("change", (t) => {
+			e.style.opacity = String(t);
+		}), s = () => {
+			let a = ++n, o = c.open ? t.getBoundingClientRect().height : 0;
+			f.stop();
+			let s = () => {
+				!r && a === n && !c.open && (e.hidden = !0);
+			};
+			!_.current || g ? (m.jump(+!!c.open), e.style.opacity = String(m.get()), f.jump(o), i(o), s(), _.current = !0) : c.open ? (f.get() > 0 && S(m, 1, k), S(f, o, {
+				...O,
+				onComplete: s
+			})) : S(m, 0, {
+				...k,
+				onComplete: () => {
+					!r && a === n && S(f, o, {
+						...O,
+						onComplete: s
+					});
+				}
+			});
+		};
+		s();
+		let d = new ResizeObserver(s);
+		return d.observe(t), () => {
+			r = !0, n++, d.disconnect(), a(), o(), f.stop(), m.stop();
+		};
+	}, [
+		c.open,
+		c.expandedWidth,
+		c.triggerRef,
+		f,
+		m,
+		g
+	]), /* @__PURE__ */ v(t, {
+		className: n,
+		styles: I,
+		sx: r,
+		children: (e) => /* @__PURE__ */ v("div", {
+			...s,
+			ref: d,
+			id: c.panelId,
+			role: "region",
+			className: e,
+			"data-ui": "expandable-card-content",
+			hidden: !c.open,
+			"aria-hidden": !c.open || void 0,
+			"aria-labelledby": z(a, c.hasTitle ? c.titleId : c.triggerId),
+			"aria-describedby": z(o, c.hasDescription && c.descriptionId),
+			children: /* @__PURE__ */ v("div", {
+				ref: u,
+				css: L,
+				style: { inlineSize: c.expandedWidth },
+				children: i
+			})
+		})
+	});
+}
+W.displayName = "ExpandableCard.Content";
+var G = Object.assign(B, {
+	Trigger: V,
+	Title: H,
+	Description: U,
+	Content: W
+});
+//#endregion
+export { G as t };

package/dist/expandable-card.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ExpandableCard } from "./expandable-card-C-qJcZ14.js";

package/dist/field-anatomy-COVdNpf5.js

@@ -0,0 +1,84 @@
+'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/field/field-anatomy.tsx
+var s = e({
+	display: "grid",
+	gap: i.space[1],
+	inlineSize: "100%"
+}), c = e({
+	display: "inline-flex",
+	gap: i.space[1],
+	fontSize: i.textSize.sm,
+	fontWeight: i.fontWeight.medium,
+	color: i.color.text
+}), l = e({ color: i.color.dangerText }), u = e({
+	fontSize: i.textSize.sm,
+	color: i.color.textMuted
+}), d = e({
+	fontSize: i.textSize.sm,
+	color: i.color.dangerText
+});
+function f({ id: e, description: t, error: i, "aria-describedby": a, "aria-invalid": o }) {
+	let s = r(), c = e ?? s, l = `${c}-description`, u = `${c}-error`, d = n(t), f = n(i);
+	return {
+		id: c,
+		descriptionId: l,
+		errorId: u,
+		describedBy: [
+			a,
+			d && l,
+			f && u
+		].filter(Boolean).join(" ") || void 0,
+		ariaInvalid: f ? !0 : o
+	};
+}
+function p({ "data-ui": e, className: n, dir: r, sx: i, part: o, children: c }) {
+	let l = [n, o?.className].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ a(t, {
+		className: l,
+		styles: [s, o?.css],
+		sx: i,
+		children: (t) => /* @__PURE__ */ a("div", {
+			"data-ui": e,
+			dir: r,
+			className: t,
+			children: c
+		})
+	});
+}
+function m({ id: e, htmlFor: t, required: r, part: i, children: s }) {
+	return n(s) ? /* @__PURE__ */ o("label", {
+		id: e,
+		htmlFor: t,
+		className: i?.className,
+		css: [c, i?.css],
+		children: [s, r && /* @__PURE__ */ a("span", {
+			"aria-hidden": !0,
+			css: l,
+			children: " *"
+		})]
+	}) : null;
+}
+function h({ id: e, part: t, children: r }) {
+	return n(r) ? /* @__PURE__ */ a("span", {
+		id: e,
+		className: t?.className,
+		css: [u, t?.css],
+		children: r
+	}) : null;
+}
+function g({ id: e, part: t, children: r }) {
+	return n(r) ? /* @__PURE__ */ a("span", {
+		id: e,
+		role: "alert",
+		className: t?.className,
+		css: [d, t?.css],
+		children: r
+	}) : null;
+}
+//#endregion
+export { f as a, p as i, g as n, m as r, h as t };