@jfrader/ui 0.5.1 → 0.7.0

package/dist/emblem-DnXmpZCh.js

@@ -0,0 +1,166 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
+import { t as i } from "./initials-DEdwNe9_.js";
+import { useState as a } from "react";
+import { vars as o } from "@jfrader/tokens/vars";
+import { jsx as s } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as c } from "@floating-ui/react";
+//#region src/components/emblem/emblem.tsx
+var l = 3, u = "[data-ui=\"emblem-plate\"]", d = "polygon(50% 0, 91% 16%, 84% 73%, 50% 100%, 16% 73%, 9% 16%)", f = "polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)", p = "0.12", m = "0.85", h = "@supports (color: oklch(from red l c h))", g = "@supports (color: contrast-color(red))", _ = e({
+	"--emblem-fill": o.color.accent,
+	"--emblem-highlight": "var(--emblem-fill)",
+	"--emblem-secondary": "var(--emblem-highlight)",
+	"--emblem-pattern": "none",
+	"--emblem-shadow": `drop-shadow(${o.shadow.raised})`,
+	"--emblem-brightness": "1",
+	position: "relative",
+	display: "inline-block",
+	inlineSize: "var(--emblem-size)",
+	blockSize: "var(--emblem-size)",
+	fontSize: "var(--emblem-size)",
+	verticalAlign: "middle",
+	userSelect: "none",
+	filter: "var(--emblem-shadow) brightness(var(--emblem-brightness))",
+	[h]: { "--emblem-highlight": `oklch(from var(--emblem-fill) calc(l + ${p}) calc(c * ${m}) h)` }
+}), v = e({
+	position: "absolute",
+	inset: 0,
+	display: "grid",
+	placeItems: "center",
+	overflow: "hidden",
+	backgroundImage: "var(--emblem-pattern), linear-gradient(135deg, var(--emblem-highlight), var(--emblem-fill))",
+	"&::after": {
+		content: "\"\"",
+		position: "absolute",
+		inset: "10% 12% 14%",
+		border: "1px solid color-mix(in srgb, var(--emblem-secondary) 42%, transparent)",
+		borderRadius: "inherit",
+		clipPath: "inherit"
+	}
+}), y = e({
+	position: "relative",
+	maxInlineSize: "100%",
+	overflow: "hidden",
+	fontFamily: o.font.sans,
+	fontSize: "0.5em",
+	fontWeight: o.fontWeight.semibold,
+	letterSpacing: "-0.03em",
+	lineHeight: 1,
+	whiteSpace: "nowrap"
+}), b = e({
+	color: `var(--emblem-ink, ${o.color.accentContrast})`,
+	[g]: { color: "var(--emblem-ink, contrast-color(var(--emblem-highlight)))" }
+}), x = e({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	objectFit: "cover"
+}), S = {
+	sm: e({ "--emblem-size": o.size.emblemSm }),
+	md: e({ "--emblem-size": o.size.emblemMd }),
+	lg: e({ "--emblem-size": o.size.emblemLg }),
+	xl: e({ "--emblem-size": o.size.emblemXl })
+}, C = {
+	shield: e({
+		blockSize: "calc(var(--emblem-size) * 8 / 7)",
+		[`& > ${u}`]: { clipPath: d }
+	}),
+	circle: e({ [`& > ${u}`]: { borderRadius: o.radius.full } }),
+	squircle: e({ [`& > ${u}`]: { borderRadius: "30%" } }),
+	hexagon: e({ [`& > ${u}`]: { clipPath: f } })
+}, w = {
+	none: e({ "--emblem-pattern": "none" }),
+	stripes: e({ "--emblem-pattern": "repeating-linear-gradient(to right, var(--emblem-secondary) 0 10%, transparent 10% 20%)" }),
+	hoops: e({ "--emblem-pattern": "repeating-linear-gradient(to bottom, var(--emblem-secondary) 0 12%, transparent 12% 24%)" }),
+	sash: e({
+		"--emblem-pattern": "linear-gradient(135deg, transparent 34%, var(--emblem-secondary) 34% 62%, transparent 62%)",
+		"&:dir(rtl)": { "--emblem-pattern": "linear-gradient(225deg, transparent 34%, var(--emblem-secondary) 34% 62%, transparent 62%)" }
+	})
+}, T = e({
+	cursor: "pointer",
+	textDecoration: "none",
+	transitionProperty: "filter, transform",
+	transitionDuration: o.motion.duration.fast,
+	transitionTimingFunction: o.motion.easeStandard,
+	"&:hover": {
+		"--emblem-brightness": "1.08",
+		transform: "translateY(-1px)"
+	},
+	"&:focus-visible": { ...t },
+	[n]: { transitionDuration: "0s" }
+});
+function E({ ref: e, name: t, initials: n, src: o, color: u, secondaryColor: d, inkColor: f, shape: p = "shield", size: m = "md", pattern: h = "none", slotProps: g, className: E, style: D, sx: O, render: k, ...A }) {
+	let [j, M] = a(), N = c([e]), P = o !== void 0 && o !== "" && o !== j, F = [
+		_,
+		S[m],
+		C[p],
+		w[h]
+	];
+	k !== void 0 && F.push(T);
+	let I = n ?? i(t, l), L = P ? t : `${t} — ${I}`, R = {};
+	u !== void 0 && (R["--emblem-fill"] = u), d !== void 0 && (R["--emblem-secondary"] = d), f !== void 0 && (R["--emblem-ink"] = f);
+	let z = {
+		...R,
+		...D
+	}, B = /* @__PURE__ */ s("span", {
+		"data-ui": "emblem-plate",
+		"aria-hidden": "true",
+		css: v,
+		children: P ? /* @__PURE__ */ s("img", {
+			src: o,
+			alt: "",
+			onError: () => M(o),
+			className: g?.image?.className,
+			css: [x, g?.image?.css]
+		}) : /* @__PURE__ */ s("span", {
+			"data-ui": "emblem-ink",
+			"aria-hidden": "true",
+			className: g?.monogram?.className,
+			css: [
+				y,
+				b,
+				g?.monogram?.css
+			],
+			children: I
+		})
+	});
+	return k ? /* @__PURE__ */ s(r, {
+		className: E,
+		styles: F,
+		sx: O,
+		children: (e) => k({
+			...A,
+			className: e,
+			ref: N,
+			style: z,
+			"data-ui": "emblem",
+			"data-shape": p,
+			"data-pattern": h,
+			"aria-label": L,
+			css: F,
+			children: B
+		})
+	}) : /* @__PURE__ */ s(r, {
+		className: E,
+		styles: F,
+		sx: O,
+		children: (n) => /* @__PURE__ */ s("span", {
+			...A,
+			ref: e,
+			role: "img",
+			"aria-label": t,
+			"data-ui": "emblem",
+			"data-shape": p,
+			"data-pattern": h,
+			className: n,
+			style: z,
+			children: B
+		})
+	});
+}
+E.displayName = "Emblem";
+//#endregion
+export { E as t };

package/dist/emblem.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as Emblem } from "./emblem-DnXmpZCh.js";

package/dist/{empty-state-CDgrjPPf.js → empty-state-DO0ApylK.js}

@@ -1,5 +1,6 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./sx-BJXJ2xJK.js";
 import { t as n } from "./renderable-DzcIj1Lo.js";
 import { useId as r } from "react";
 import { vars as i } from "@jfrader/tokens/vars";

package/dist/empty-state.js

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

package/dist/{expandable-card-rUATve0o.js → expandable-card-W97vjix9.js}

@@ -1,17 +1,18 @@
 '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 { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./disclosure-caret-C5T3fcl6.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./sx-BJXJ2xJK.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 { n as c } from "./surface-C69kwSuk.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";
+import { MotionConfig as b, animate as x, useMotionValue as S, useReducedMotion as C } from "motion/react";
+import { base as w } from "@jfrader/tokens";
+import { useMergeRefs as T } from "@floating-ui/react";
 //#region src/components/expandable-card/expandable-card.tsx
 var E = l(null);
 function D(e) {
@@ -25,7 +26,7 @@ var O = {
 	damping: 40,
 	mass: 1
 }, k = {
-	duration: Number.parseFloat(T.motion.duration.fast) / 1e3,
+	duration: Number.parseFloat(w.motion.duration.fast) / 1e3,
 	ease: [
 		.2,
 		.6,
@@ -68,13 +69,13 @@ var O = {
 		overflowWrap: "anywhere"
 	},
 	"&::after": {
-		...n,
+		...t,
 		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,
+	"&:focus-visible": n,
 	"&:hover:not(:disabled)": { backgroundColor: _.color.surfaceHover },
 	"&:disabled": {
 		cursor: "not-allowed",
@@ -84,8 +85,8 @@ var O = {
 		minBlockSize: _.space[12],
 		padding: _.space[3]
 	},
-	[a]: { "&::after": { transitionDuration: "0s" } },
-	[i]: {
+	[i]: { "&::after": { transitionDuration: "0s" } },
+	[r]: {
 		"&:focus-visible": { outlineColor: "Highlight" },
 		"&::after": {
 			forcedColorAdjust: "none",
@@ -122,8 +123,8 @@ function R(e) {
 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);
+function B({ ref: e, open: t, defaultOpen: n = !1, onOpenChange: r, collapsedInlineSize: i, expandedInlineSize: s, size: c = "md", disabled: l = !1, headingLevel: u = 3, className: d, sx: _, onKeyDown: y, children: w, ...D }) {
+	let [k, M] = o(t, n, r), N = !!k, P = f(), F = h(null), I = h(null), L = h(null), z = T([I, e]), [B, V] = g(!1), [H, U] = g(!1), [W, G] = g(), [K, ee] = g(0), q = C(), J = S(0), Y = h(!1), X = R(i), 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;
@@ -143,7 +144,7 @@ function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInl
 		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), () => {
+		return !Y.current || q ? (J.jump(Q), t(Q), Y.current = !0) : x(J, Q, O), () => {
 			n(), J.stop();
 		};
 	}, [
@@ -176,14 +177,14 @@ function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInl
 		H,
 		$
 	]);
-	return /* @__PURE__ */ v(x, {
+	return /* @__PURE__ */ v(b, {
 		reducedMotion: "user",
 		children: /* @__PURE__ */ v(E.Provider, {
 			value: te,
 			children: /* @__PURE__ */ v("div", {
 				ref: L,
 				css: j,
-				children: /* @__PURE__ */ v(t, {
+				children: /* @__PURE__ */ v(a, {
 					className: d,
 					styles: A,
 					sx: _,
@@ -199,7 +200,7 @@ function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInl
 							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
+						children: w
 					})
 				})
 			})
@@ -207,15 +208,15 @@ function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInl
 	});
 }
 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}`;
+function V({ ref: e, className: t, sx: n, onClick: r, disabled: i, "aria-labelledby": o, "aria-describedby": s, ...c }) {
+	let l = D("Trigger"), u = T([l.triggerRef, e]), d = `h${l.headingLevel}`;
 	return /* @__PURE__ */ v(d, {
 		css: M,
 		"aria-labelledby": l.triggerId,
-		children: /* @__PURE__ */ v(t, {
-			className: n,
+		children: /* @__PURE__ */ v(a, {
+			className: t,
 			styles: N,
-			sx: r,
+			sx: n,
 			children: (e) => /* @__PURE__ */ v("button", {
 				...c,
 				ref: u,
@@ -223,62 +224,62 @@ function V({ ref: e, className: n, sx: r, onClick: i, disabled: a, "aria-labelle
 				id: l.triggerId,
 				"data-ui": "expandable-card-trigger",
 				className: e,
-				disabled: l.disabled || a,
+				disabled: l.disabled || i,
 				"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);
+					r?.(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,
+function H({ ref: e, className: t, sx: n, children: r, ...i }) {
+	let { titleId: o, setHasTitle: c } = D("Title"), l = s(r);
+	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(a, {
+		className: t,
 		styles: P,
-		sx: r,
+		sx: n,
 		children: (t) => /* @__PURE__ */ v("span", {
-			...a,
+			...i,
 			ref: e,
 			id: o,
 			className: t,
 			"data-ui": "expandable-card-title",
-			children: i
+			children: r
 		})
 	}) : 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,
+function U({ ref: e, className: t, sx: n, children: r, ...i }) {
+	let { descriptionId: o, setHasDescription: c } = D("Description"), l = s(r);
+	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(a, {
+		className: t,
 		styles: F,
-		sx: r,
+		sx: n,
 		children: (t) => /* @__PURE__ */ y("span", {
-			...a,
+			...i,
 			ref: e,
 			id: o,
 			className: t,
 			"data-ui": "expandable-card-description",
-			children: [" ", i]
+			children: [" ", r]
 		})
 	}) : 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);
+function W({ ref: e, className: t, sx: n, children: r, "aria-labelledby": i, "aria-describedby": o, ...s }) {
+	let c = D("Content"), l = h(null), u = h(null), d = T([l, e]), f = S(0), m = S(+!!c.open), g = C(), _ = 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);
+			e.style.blockSize = `${t}px`, c.open && t > 0 && m.get() === 0 && !m.isAnimating() && x(m, 1, k);
 		}, a = f.on("change", i), o = m.on("change", (t) => {
 			e.style.opacity = String(t);
 		}), s = () => {
@@ -287,13 +288,13 @@ function W({ ref: e, className: n, sx: r, children: i, "aria-labelledby": a, "ar
 			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, {
+			!_.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 && x(m, 1, k), x(f, o, {
 				...O,
 				onComplete: s
-			})) : S(m, 0, {
+			})) : x(m, 0, {
 				...k,
 				onComplete: () => {
-					!r && a === n && S(f, o, {
+					!r && a === n && x(f, o, {
 						...O,
 						onComplete: s
 					});
@@ -312,10 +313,10 @@ function W({ ref: e, className: n, sx: r, children: i, "aria-labelledby": a, "ar
 		f,
 		m,
 		g
-	]), /* @__PURE__ */ v(t, {
-		className: n,
+	]), /* @__PURE__ */ v(a, {
+		className: t,
 		styles: I,
-		sx: r,
+		sx: n,
 		children: (e) => /* @__PURE__ */ v("div", {
 			...s,
 			ref: d,
@@ -325,13 +326,13 @@ function W({ ref: e, className: n, sx: r, children: i, "aria-labelledby": a, "ar
 			"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-labelledby": z(i, 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
+				children: r
 			})
 		})
 	});

package/dist/expandable-card.js

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

package/dist/{expanding-search-BxOwtdwt.js → expanding-search-Bb2_YfNx.js}

@@ -1,20 +1,21 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
 import { t as r } from "./use-controlled-state-DpeVQZNR.js";
 import { t as i } from "./renderable-DzcIj1Lo.js";
-import { t as a } from "./button-NLY0h6EJ.js";
-import { t as o } from "./search-field-DMvho0KQ.js";
+import { t as a } from "./button-C6OV0C7J.js";
+import { t as o } from "./search-field-CbsajaZb.js";
 import { useId as ee, useLayoutEffect as s, useRef as c, useState as te } from "react";
 import { vars as l } from "@jfrader/tokens/vars";
 import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
-import { useMergeRefs as f } from "@floating-ui/react";
-import { animate as p, useMotionValue as m } from "motion/react";
-import { base as h } from "@jfrader/tokens";
+import { animate as f, useMotionValue as p } from "motion/react";
+import { base as m } from "@jfrader/tokens";
+import { useMergeRefs as h } from "@floating-ui/react";
 //#region src/components/expanding-search/expanding-search.tsx
 var g = {
 	type: "spring",
-	visualDuration: Number.parseFloat(h.motion.duration.slow) / 1e3,
+	visualDuration: Number.parseFloat(m.motion.duration.slow) / 1e3,
 	bounce: 0
 }, ne = "(prefers-reduced-motion: reduce)", re = e({
 	position: "relative",
@@ -62,7 +63,7 @@ var g = {
 	borderRadius: "var(--expanding-search-radius)",
 	borderColor: l.color.borderControl,
 	backgroundColor: l.color.surfaceRaised,
-	[n]: {
+	[t]: {
 		borderColor: "ButtonText",
 		color: "ButtonText"
 	}
@@ -88,8 +89,8 @@ var g = {
 		r: "6.5"
 	}), /* @__PURE__ */ u("path", { d: "m16 16 5 5" })]
 }), le = (e, t) => e?.expanded === t.expanded && e.size === t.size && e.radius === t.radius;
-function b({ ref: e, inputRef: n, triggerLabel: h, open: b, defaultOpen: ue = !1, onOpenChange: x, anchor: S = "end", expandedWidth: C = `calc(${l.space[12]} * 8)`, size: w = "md", disabled: T, value: de, defaultValue: fe, onValueChange: pe, label: E, description: D, error: O, clearable: k, messages: A, searchIcon: j = y, clearIcon: M, slotProps: N, inputProps: P, className: F, sx: I, dir: L, style: R, onKeyDown: z, onBlur: B, ...me }) {
-	let [V = !1, H] = r(b, ue, x), U = c(null), W = c(null), G = c(null), K = c(null), q = c(null), he = f([U, e]), ge = f([G, n]), J = ee(), Y = c(null), [X, _e] = te(), Z = m(0), Q = m(0), $ = c(void 0);
+function b({ ref: e, inputRef: t, triggerLabel: m, open: b, defaultOpen: ue = !1, onOpenChange: x, anchor: S = "end", expandedWidth: C = `calc(${l.space[12]} * 8)`, size: w = "md", disabled: T, value: de, defaultValue: fe, onValueChange: pe, label: E, description: D, error: O, clearable: k, messages: A, searchIcon: j = y, clearIcon: M, slotProps: N, inputProps: P, className: F, sx: I, dir: L, style: R, onKeyDown: z, onBlur: B, ...me }) {
+	let [V = !1, H] = r(b, ue, x), U = c(null), W = c(null), G = c(null), K = c(null), q = c(null), he = h([U, e]), ge = h([G, t]), J = ee(), Y = c(null), [X, _e] = te(), Z = p(0), Q = p(0), $ = c(void 0);
 	s(() => {
 		let e = U.current, t = q.current;
 		if (!e || !t) return;
@@ -120,7 +121,7 @@ function b({ ref: e, inputRef: n, triggerLabel: h, open: b, defaultOpen: ue = !1
 		}, r = () => {
 			Z.jump(t.width), Q.jump(t.radius), n();
 		}, i = [Z.on("change", n), Q.on("change", n)], a = e.ownerDocument.defaultView?.matchMedia(ne);
-		$.current === void 0 || $.current === V || a?.matches ? r() : (p(Z, t.width, g), p(Q, t.radius, g)), $.current = V;
+		$.current === void 0 || $.current === V || a?.matches ? r() : (f(Z, t.width, g), f(Q, t.radius, g)), $.current = V;
 		let o = () => {
 			a?.matches && r();
 		};
@@ -138,8 +139,8 @@ function b({ ref: e, inputRef: n, triggerLabel: h, open: b, defaultOpen: ue = !1
 		let t = e.ownerDocument.activeElement;
 		V && Y.current === "input" ? (Y.current = null, (e.contains(t) || t === e.ownerDocument.body) && G.current?.focus()) : !V && Y.current === "trigger" && (Y.current = null, (e.contains(t) || t === e.ownerDocument.body) && K.current?.focus());
 	}, [V]);
-	let ve = P?.["aria-label"] ?? (!i(E) || E === "" ? h : void 0);
-	return /* @__PURE__ */ u(t, {
+	let ve = P?.["aria-label"] ?? (!i(E) || E === "" ? m : void 0);
+	return /* @__PURE__ */ u(n, {
 		className: F,
 		styles: [re, ie[w]],
 		sx: I,
@@ -182,7 +183,7 @@ function b({ ref: e, inputRef: n, triggerLabel: h, open: b, defaultOpen: ue = !1
 						size: w,
 						variant: "outline",
 						disabled: T,
-						"aria-label": h,
+						"aria-label": m,
 						"aria-expanded": V,
 						"aria-controls": J,
 						css: oe,

package/dist/expanding-search.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ExpandingSearch } from "./expanding-search-BxOwtdwt.js";
+export { t as ExpandingSearch } from "./expanding-search-Bb2_YfNx.js";

package/dist/{field-anatomy-COVdNpf5.js → field-anatomy-BDIP42MI.js}

@@ -1,5 +1,6 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./sx-BJXJ2xJK.js";
 import { t as n } from "./renderable-DzcIj1Lo.js";
 import { useId as r } from "react";
 import { vars as i } from "@jfrader/tokens/vars";

package/dist/{file-dropzone-BuXm3Tea.js → file-dropzone-Bi5ikRIz.js}

@@ -1,13 +1,14 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r, r as i } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
 import { t as a } from "./use-latest-callback-cj1OOQL6.js";
 import { t as ee } from "./use-controlled-state-DpeVQZNR.js";
-import { t as te } from "./visually-hidden-BJdvqqvn.js";
+import { t as te } from "./visually-hidden-DgVO3NaB.js";
 import { t as o } from "./renderable-DzcIj1Lo.js";
-import { t as ne } from "./button-NLY0h6EJ.js";
-import { t as re } from "./progress-DAQkfhPd.js";
+import { t as ne } from "./button-C6OV0C7J.js";
+import { t as re } from "./progress-Bcuz3Ob4.js";
 import { useEffect as s, useId as ie, useRef as c, useState as l } from "react";
 import { vars as u } from "@jfrader/tokens/vars";
 import { createElement as ae } from "@emotion/react";
@@ -33,13 +34,13 @@ var oe = e({
 	transitionProperty: "background-color, border-color",
 	transitionDuration: u.motion.duration.fast,
 	transitionTimingFunction: u.motion.easeStandard,
-	"&:has(input:focus-visible)": n,
+	"&:has(input:focus-visible)": t,
 	"&[data-dragging=\"true\"]": {
 		borderStyle: "solid",
 		backgroundColor: u.color.surfaceHover
 	},
-	[i]: { transitionDuration: "0s" },
-	[r]: { borderColor: "ButtonText" }
+	[r]: { transitionDuration: "0s" },
+	[n]: { borderColor: "ButtonText" }
 }), ce = e({
 	display: "grid",
 	justifyItems: "center",
@@ -138,8 +139,8 @@ function ke(e, t) {
 		maximumFractionDigits: 1
 	}).format(e / h ** Math.max(0, n));
 }
-function v({ ref: e, value: n, defaultValue: r = Ce, onValueChange: i, onReject: u, accept: h, multiple: g = !0, maxFiles: v = we, maxSize: y, validate: Ae, onUpload: b, listPlacement: x = "below", compactAt: S, label: C, description: w, note: je, dropLabel: T, error: E, messages: D, locale: Me, disabled: O = !1, readOnly: k = !1, required: Ne = !1, size: Pe = "md", paste: Fe = !0, renderFileIcon: Ie, name: Le, inputRef: Re, slotProps: A, className: ze, sx: Be, onDragEnter: Ve, onDragOver: He, onDragLeave: Ue, onDrop: We, onPaste: Ge, ...Ke }) {
-	let j = ie(), qe = c(r), [M = Ce, Je, Ye] = ee(n, qe.current, i), N = c(null), P = c(null), Xe = p([P, e]), Ze = p([N, Re]), F = c(/* @__PURE__ */ new Map()), I = c(/* @__PURE__ */ new Map()), L = c(/* @__PURE__ */ new Map()), R = c(null), [, Qe] = l(0), z = () => Qe((e) => e + 1), [B, V] = l(!1), H = c(0), [U, $e] = l([]), [et, W] = l(""), [tt, nt] = l(/* @__PURE__ */ new Set()), G = O || k, K = o(C) && C !== "", rt = o(w), q = o(je), J = o(E) || U.length > 0, Y = A?.input, it = Y?.id ?? `${j}-input`, at = [
+function v({ ref: e, value: t, defaultValue: n = Ce, onValueChange: r, onReject: u, accept: h, multiple: g = !0, maxFiles: v = we, maxSize: y, validate: Ae, onUpload: b, listPlacement: x = "below", compactAt: S, label: C, description: w, note: je, dropLabel: T, error: E, messages: D, locale: Me, disabled: O = !1, readOnly: k = !1, required: Ne = !1, size: Pe = "md", paste: Fe = !0, renderFileIcon: Ie, name: Le, inputRef: Re, slotProps: A, className: ze, sx: Be, onDragEnter: Ve, onDragOver: He, onDragLeave: Ue, onDrop: We, onPaste: Ge, ...Ke }) {
+	let j = ie(), qe = c(n), [M = Ce, Je, Ye] = ee(t, qe.current, r), N = c(null), P = c(null), Xe = p([P, e]), Ze = p([N, Re]), F = c(/* @__PURE__ */ new Map()), I = c(/* @__PURE__ */ new Map()), L = c(/* @__PURE__ */ new Map()), R = c(null), [, Qe] = l(0), z = () => Qe((e) => e + 1), [B, V] = l(!1), H = c(0), [U, $e] = l([]), [et, W] = l(""), [tt, nt] = l(/* @__PURE__ */ new Set()), G = O || k, K = o(C) && C !== "", rt = o(w), q = o(je), J = o(E) || U.length > 0, Y = A?.input, it = Y?.id ?? `${j}-input`, at = [
 		Y?.["aria-describedby"],
 		rt && `${j}-description`,
 		q && `${j}-note`,
@@ -194,7 +195,7 @@ function v({ ref: e, value: n, defaultValue: r = Ce, onValueChange: i, onReject:
 		L.current.clear(), I.current.clear();
 	}, []);
 	let lt = a(() => {
-		I.current.clear(), $e([]), W(""), n === void 0 ? Ye() : X(qe.current);
+		I.current.clear(), $e([]), W(""), t === void 0 ? Ye() : X(qe.current);
 	});
 	s(() => {
 		let e = N.current?.form, t = (e) => {
@@ -325,7 +326,7 @@ function v({ ref: e, value: n, defaultValue: r = Ce, onValueChange: i, onReject:
 			}));
 		})
 	}), $ = S !== void 0 && S > 0 && M.length >= S && !B;
-	return /* @__PURE__ */ d(t, {
+	return /* @__PURE__ */ d(i, {
 		className: [A?.root?.className, ze].filter(Boolean).join(" "),
 		styles: [oe, A?.root?.css],
 		sx: Be,

package/dist/file-dropzone.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as FileDropzone } from "./file-dropzone-BuXm3Tea.js";
+export { t as FileDropzone } from "./file-dropzone-Bi5ikRIz.js";