@jfrader/ui 0.5.1 → 0.7.0

package/dist/photo-grid.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as PhotoGrid } from "./photo-grid-Dtl17D74.js";

package/dist/{pill-BaS-uIbn.js → pill-Dd7pog19.js}

@@ -1,6 +1,7 @@
 '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 { vars as r } from "@jfrader/tokens/vars";
 import { jsx as i } from "@emotion/react/jsx-runtime";
 //#region src/components/pill/pill.tsx
@@ -16,7 +17,7 @@ var a = e({
 	lineHeight: 1,
 	whiteSpace: "nowrap",
 	verticalAlign: "middle",
-	[n]: { outline: "1px solid CanvasText" }
+	[t]: { outline: "1px solid CanvasText" }
 }), o = {
 	neutral: e({
 		backgroundColor: r.color.surfaceHover,
@@ -39,17 +40,17 @@ var a = e({
 		color: r.color.dangerText
 	})
 };
-function s({ ref: e, tone: n = "neutral", className: r, sx: s, ...c }) {
-	return /* @__PURE__ */ i(t, {
+function s({ ref: e, tone: t = "neutral", className: r, sx: s, ...c }) {
+	return /* @__PURE__ */ i(n, {
 		className: r,
-		styles: [a, o[n]],
+		styles: [a, o[t]],
 		sx: s,
-		children: (t) => /* @__PURE__ */ i("span", {
+		children: (n) => /* @__PURE__ */ i("span", {
 			...c,
 			ref: e,
 			"data-ui": "pill",
-			"data-tone": n,
-			className: t
+			"data-tone": t,
+			className: n
 		})
 	});
 }

package/dist/pill.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Pill } from "./pill-BaS-uIbn.js";
+export { t as Pill } from "./pill-Dd7pog19.js";

package/dist/{popover-CErIw2q3.js → popover-CUMOcMtj.js}

@@ -1,10 +1,11 @@
 '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 "./use-controlled-state-DpeVQZNR.js";
-import { n as r } from "./surface-DZ4d-2aL.js";
-import { t as i } from "./trigger-style-B1KVC8O1.js";
+import { n as r } from "./surface-C69kwSuk.js";
+import { t as i } from "./trigger-style-CtOrdPk4.js";
 import { a, i as o } from "./overlay-layer-qEbpEtb8.js";
-import { t as s } from "./overlay-portal-C4JZFq2M.js";
+import { t as s } from "./overlay-portal-C9igMHnC.js";
 import { t as c } from "./use-overlay-floating-Bx2jBKAA.js";
 import { createContext as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { vars as h } from "@jfrader/tokens/vars";

package/dist/popover.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Popover } from "./popover-CErIw2q3.js";
+export { t as Popover } from "./popover-CUMOcMtj.js";

package/dist/presence-spring-4zwtUDQN.js

@@ -0,0 +1,12 @@
+'use client';
+//#region src/overlay/presence-spring.ts
+var e = {
+	type: "spring",
+	stiffness: 900,
+	damping: 60,
+	mass: 1,
+	restDelta: 1,
+	restSpeed: 30
+};
+//#endregion
+export { e as t };

package/dist/{progress-DAQkfhPd.js → progress-Bcuz3Ob4.js}

@@ -1,7 +1,8 @@
 'use client';
-import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
-import { n as r, r as i } from "./media-8yrN85VT.js";
-import { t as a } from "./visually-hidden-BJdvqqvn.js";
+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 "./visually-hidden-DgVO3NaB.js";
 import { t as o } from "./renderable-DzcIj1Lo.js";
 import { useId as s } from "react";
 import { vars as c } from "@jfrader/tokens/vars";
@@ -29,8 +30,8 @@ var d = "40%", f = "1.4s ease-in-out infinite", p = 100, m = e({
 	transitionProperty: "width",
 	transitionDuration: c.motion.duration.base,
 	transitionTimingFunction: c.motion.easeStandard,
-	[i]: { transitionDuration: "0s" },
-	[r]: {
+	[r]: { transitionDuration: "0s" },
+	[n]: {
 		forcedColorAdjust: "none",
 		backgroundColor: "Highlight"
 	}
@@ -38,7 +39,7 @@ var d = "40%", f = "1.4s ease-in-out infinite", p = 100, m = e({
 	inlineSize: d,
 	animation: `${m} ${f}`,
 	"&:dir(rtl)": { animation: `${h} ${f}` },
-	[i]: {
+	[r]: {
 		"&, &:dir(rtl)": { animation: "none" },
 		opacity: .7
 	}
@@ -50,9 +51,9 @@ function y(e, t) {
 		max: n
 	};
 }
-function b({ ref: e, value: t, max: r = p, label: i, getValueLabel: c, slotProps: d, "aria-labelledby": f, className: m, sx: h, ...b }) {
-	let x = `${s()}-label`, S = o(i), C = [f, S && x].filter(Boolean).join(" ") || void 0, { value: w, max: T } = y(t, r), E = w === void 0, D = w === void 0 ? 0 : w / T * 100;
-	return /* @__PURE__ */ l(n, {
+function b({ ref: e, value: t, max: n = p, label: r, getValueLabel: c, slotProps: d, "aria-labelledby": f, className: m, sx: h, ...b }) {
+	let x = `${s()}-label`, S = o(r), C = [f, S && x].filter(Boolean).join(" ") || void 0, { value: w, max: T } = y(t, n), E = w === void 0, D = w === void 0 ? 0 : w / T * 100;
+	return /* @__PURE__ */ l(i, {
 		className: m,
 		styles: g,
 		sx: h,
@@ -71,7 +72,7 @@ function b({ ref: e, value: t, max: r = p, label: i, getValueLabel: c, slotProps
 			children: [S && /* @__PURE__ */ l("span", {
 				id: x,
 				css: a,
-				children: i
+				children: r
 			}), /* @__PURE__ */ l("div", {
 				"data-ui": "progress-indicator",
 				className: d?.indicator?.className,

package/dist/progress.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Progress } from "./progress-DAQkfhPd.js";
+export { t as Progress } from "./progress-Bcuz3Ob4.js";

package/dist/{radio-cards-Cu9cBssN.js → radio-cards-FkAhESb5.js}

@@ -1,9 +1,10 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n, r } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t, r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
 import { t as i } from "./use-controlled-state-DpeVQZNR.js";
 import { t as a } from "./renderable-DzcIj1Lo.js";
-import { n as o, t as s } from "./choice-control-5kJkLXgv.js";
+import { n as o, t as s } from "./choice-control-BsWOZPc9.js";
 import { createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useImperativeHandle 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";
@@ -53,7 +54,7 @@ var M = e({
 		cursor: "not-allowed"
 	},
 	"&:has(input:disabled) > span": { borderStyle: "dashed" },
-	[n]: {
+	[t]: {
 		"input:checked + span": {
 			borderColor: "Highlight",
 			backgroundColor: "Canvas"
@@ -83,8 +84,8 @@ var M = e({
 	transitionProperty: "background-color, border-color",
 	transitionDuration: _.motion.duration.fast,
 	transitionTimingFunction: _.motion.easeStandard,
-	[r]: { transitionDuration: "0s" },
-	[n]: { borderColor: "CanvasText" }
+	[n]: { transitionDuration: "0s" },
+	[t]: { borderColor: "CanvasText" }
 }), L = {
 	sm: e({
 		padding: _.space[3],
@@ -115,8 +116,8 @@ var M = e({
 		transitionDuration: _.motion.duration.fast,
 		transitionTimingFunction: _.motion.easeStandard
 	},
-	[r]: { "&::after": { transitionDuration: "0s" } },
-	[n]: {
+	[n]: { "&::after": { transitionDuration: "0s" } },
+	[t]: {
 		borderColor: "CanvasText",
 		"&::after": { backgroundColor: "Highlight" }
 	}
@@ -159,7 +160,7 @@ var M = e({
 	pointerEvents: "none",
 	border: `2px solid ${_.color.accent}`,
 	borderRadius: _.radius.lg,
-	[n]: { borderColor: "Highlight" }
+	[t]: { borderColor: "Highlight" }
 });
 function q({ root: e, value: t, content: n }) {
 	let r = w(), i = C(0), a = C(0), o = C(0), s = C(0), [c, l] = g(!1), u = h(void 0), f = h(!1);
@@ -218,10 +219,10 @@ function q({ root: e, value: t, content: n }) {
 		css: K
 	});
 }
-function J({ ref: e, value: n, defaultValue: r, onValueChange: o, name: s, required: c = !1, disabled: u = !1, invalid: _ = !1, error: x, layout: S = "grid", minColumnWidth: C = E, size: w = "md", className: D, sx: O, style: k, children: P, onKeyDown: F, "aria-labelledby": I, "aria-describedby": L, "aria-invalid": R, ...z }) {
+function J({ ref: e, value: t, defaultValue: n, onValueChange: o, name: s, required: c = !1, disabled: u = !1, invalid: _ = !1, error: x, layout: S = "grid", minColumnWidth: C = E, size: w = "md", className: D, sx: O, style: k, children: P, onKeyDown: F, "aria-labelledby": I, "aria-describedby": L, "aria-invalid": R, ...z }) {
 	let B = f(), V = h(null);
 	p(e, () => V.current, []);
-	let [H, U, W] = i(n, r, o), [K, J] = g({
+	let [H, U, W] = i(t, n, o), [K, J] = g({
 		label: [],
 		description: []
 	}), Y = a(x), X = l((e, t) => (J((n) => ({
@@ -254,21 +255,21 @@ function J({ ref: e, value: n, defaultValue: r, onValueChange: o, name: s, requi
 	d(() => {
 		let e = V.current;
 		if (!e) return;
-		let t = new Set(A(e).map((e) => e.form).filter((e) => e !== null)), i = (t) => {
+		let r = new Set(A(e).map((e) => e.form).filter((e) => e !== null)), i = (r) => {
 			queueMicrotask(() => {
-				if (t.defaultPrevented) return;
+				if (r.defaultPrevented) return;
 				W();
-				let i = n === void 0 ? r : n;
+				let i = t === void 0 ? n : t;
 				A(e).forEach((e) => {
 					e.checked = e.value === i;
 				});
 			});
 		};
-		return t.forEach((e) => e.addEventListener("reset", i)), () => t.forEach((e) => e.removeEventListener("reset", i));
+		return r.forEach((e) => e.addEventListener("reset", i)), () => r.forEach((e) => e.removeEventListener("reset", i));
 	}, [
 		W,
-		n,
-		r
+		t,
+		n
 	]);
 	let Q = (e) => {
 		if (F?.(e), e.defaultPrevented || u) return;
@@ -290,7 +291,7 @@ function J({ ref: e, value: n, defaultValue: r, onValueChange: o, name: s, requi
 	};
 	return /* @__PURE__ */ v(T.Provider, {
 		value: Z,
-		children: /* @__PURE__ */ v(t, {
+		children: /* @__PURE__ */ v(r, {
 			className: D,
 			styles: [M, N[S]],
 			sx: O,
@@ -334,25 +335,25 @@ function J({ ref: e, value: n, defaultValue: r, onValueChange: o, name: s, requi
 	});
 }
 J.displayName = "RadioCards";
-function Y({ ref: e, value: n, label: r, description: i, meta: c, icon: l, disabledReason: u, dir: d, disabled: p, required: m, onChange: h, slotProps: g, className: _, sx: b, "aria-label": x, "aria-labelledby": S, "aria-describedby": C, "aria-invalid": w, ...T }) {
-	let E = k("Item"), D = f(), O = E.disabled || p, A = O && a(u) ? u : i, M = a(r), N = a(A);
-	return /* @__PURE__ */ v(t, {
+function Y({ ref: e, value: t, label: n, description: i, meta: c, icon: l, disabledReason: u, dir: d, disabled: p, required: m, onChange: h, slotProps: g, className: _, sx: b, "aria-label": x, "aria-labelledby": S, "aria-describedby": C, "aria-invalid": w, ...T }) {
+	let E = k("Item"), D = f(), O = E.disabled || p, A = O && a(u) ? u : i, M = a(n), N = a(A);
+	return /* @__PURE__ */ v(r, {
 		className: _,
 		styles: [o, P],
 		sx: b,
-		children: (t) => /* @__PURE__ */ y("label", {
+		children: (r) => /* @__PURE__ */ y("label", {
 			dir: d,
 			"data-ui": "radio-cards-item",
-			"data-state": E.value === n ? "checked" : "unchecked",
-			className: t,
+			"data-state": E.value === t ? "checked" : "unchecked",
+			className: r,
 			children: [/* @__PURE__ */ v("input", {
 				...T,
 				ref: e,
 				type: "radio",
 				"data-ui": "radio-cards-input",
 				name: E.name,
-				value: n,
-				checked: E.value === n,
+				value: t,
+				checked: E.value === t,
 				disabled: O,
 				required: E.required || m,
 				"aria-label": x,
@@ -360,7 +361,7 @@ function Y({ ref: e, value: n, label: r, description: i, meta: c, icon: l, disab
 				"aria-describedby": j(C, N && `${D}-description`),
 				"aria-invalid": E.invalid ? !0 : w,
 				onChange: (e) => {
-					h?.(e), e.currentTarget.checked && E.requestChange(n);
+					h?.(e), e.currentTarget.checked && E.requestChange(t);
 				},
 				css: [s, F]
 			}), /* @__PURE__ */ y("span", {
@@ -392,7 +393,7 @@ function Y({ ref: e, value: n, label: r, description: i, meta: c, icon: l, disab
 							id: `${D}-label`,
 							"data-ui": "radio-cards-item-label",
 							css: [B, g?.label?.css],
-							children: r
+							children: n
 						}), N && /* @__PURE__ */ v("span", {
 							...g?.description,
 							id: `${D}-description`,
@@ -413,23 +414,23 @@ function Y({ ref: e, value: n, label: r, description: i, meta: c, icon: l, disab
 	});
 }
 Y.displayName = "RadioCards.Item";
-function X({ kind: e, ref: n, id: r, children: i, className: o, sx: s, ...c }) {
-	let { register: l } = k(e === "label" ? "Label" : "Description"), u = f(), p = r ?? u, m = a(i);
+function X({ kind: e, ref: t, id: n, children: i, className: o, sx: s, ...c }) {
+	let { register: l } = k(e === "label" ? "Label" : "Description"), u = f(), p = n ?? u, m = a(i);
 	return d(() => m ? l(e, p) : void 0, [
 		l,
 		e,
 		p,
 		m
-	]), m ? /* @__PURE__ */ v(t, {
+	]), m ? /* @__PURE__ */ v(r, {
 		className: o,
 		styles: [W, e === "label" ? B : V],
 		sx: s,
-		children: (t) => /* @__PURE__ */ v("span", {
+		children: (n) => /* @__PURE__ */ v("span", {
 			...c,
-			ref: n,
+			ref: t,
 			id: p,
 			"data-ui": `radio-cards-${e}`,
-			className: t,
+			className: n,
 			children: i
 		})
 	}) : null;

package/dist/radio-cards.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as RadioCards } from "./radio-cards-Cu9cBssN.js";
+export { t as RadioCards } from "./radio-cards-FkAhESb5.js";

package/dist/{radio-group-TIK0-iPX.js → radio-group-DItMf2YM.js}

@@ -1,9 +1,10 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n, r } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t, r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
 import { t as i } from "./use-controlled-state-DpeVQZNR.js";
 import { t as a } from "./renderable-DzcIj1Lo.js";
-import { i as o, n as s, r as c, t as l } from "./choice-control-5kJkLXgv.js";
+import { i as o, n as s, r as c, t as l } from "./choice-control-BsWOZPc9.js";
 import { createContext as u, useContext as d, useId as f, useMemo as p } from "react";
 import { vars as m } from "@jfrader/tokens/vars";
 import { jsx as h, jsxs as g } from "@emotion/react/jsx-runtime";
@@ -48,15 +49,15 @@ var y = "16px", b = {
 		backgroundColor: m.color.accentContrast,
 		opacity: 0
 	},
-	[r]: { transitionDuration: "0s" },
-	[n]: { "&::after": { backgroundColor: "CanvasText" } }
+	[n]: { transitionDuration: "0s" },
+	[t]: { "&::after": { backgroundColor: "CanvasText" } }
 }), w = e({ fontSize: m.textSize.sm }), T = e({
 	marginInlineStart: `calc(${y} + ${m.space[2]})`,
 	fontSize: m.textSize.sm,
 	color: m.color.textMuted
 });
-function E({ ref: e, value: n, defaultValue: r, onValueChange: a, name: o, disabled: s = !1, orientation: c = "vertical", className: l, sx: u, ...d }) {
-	let m = f(), g = o ?? m, [v, y] = i(n, r, a), x = p(() => ({
+function E({ ref: e, value: t, defaultValue: n, onValueChange: a, name: o, disabled: s = !1, orientation: c = "vertical", className: l, sx: u, ...d }) {
+	let m = f(), g = o ?? m, [v, y] = i(t, n, a), x = p(() => ({
 		value: v,
 		setValue: y,
 		name: g,
@@ -69,7 +70,7 @@ function E({ ref: e, value: n, defaultValue: r, onValueChange: a, name: o, disab
 	]);
 	return /* @__PURE__ */ h(_.Provider, {
 		value: x,
-		children: /* @__PURE__ */ h(t, {
+		children: /* @__PURE__ */ h(r, {
 			className: l,
 			styles: b[c],
 			sx: u,
@@ -87,11 +88,11 @@ function E({ ref: e, value: n, defaultValue: r, onValueChange: a, name: o, disab
 	});
 }
 E.displayName = "RadioGroup";
-function D({ ref: e, value: n, label: r, description: i, disabled: u, onChange: d, slotProps: p, className: m, sx: _, dir: y, "aria-labelledby": b, "aria-describedby": E, ...D }) {
-	let { value: O, setValue: k, name: A, disabled: j } = v("Radio"), M = j || u, N = f(), P = `${N}-label`, F = `${N}-description`, I = a(r), L = a(i), R = [b, I && P].filter(Boolean).join(" ") || void 0, z = [E, L && F].filter(Boolean).join(" ") || void 0, B = [m, p?.root?.className].filter(Boolean).join(" ") || void 0, V = (e) => {
-		d?.(e), e.currentTarget.checked && k(n);
+function D({ ref: e, value: t, label: n, description: i, disabled: u, onChange: d, slotProps: p, className: m, sx: _, dir: y, "aria-labelledby": b, "aria-describedby": E, ...D }) {
+	let { value: O, setValue: k, name: A, disabled: j } = v("Radio"), M = j || u, N = f(), P = `${N}-label`, F = `${N}-description`, I = a(n), L = a(i), R = [b, I && P].filter(Boolean).join(" ") || void 0, z = [E, L && F].filter(Boolean).join(" ") || void 0, B = [m, p?.root?.className].filter(Boolean).join(" ") || void 0, V = (e) => {
+		d?.(e), e.currentTarget.checked && k(t);
 	};
-	return /* @__PURE__ */ h(t, {
+	return /* @__PURE__ */ h(r, {
 		className: B,
 		styles: [
 			c,
@@ -100,10 +101,10 @@ function D({ ref: e, value: n, label: r, description: i, disabled: u, onChange:
 			p?.root?.css
 		],
 		sx: _,
-		children: (t) => /* @__PURE__ */ g("label", {
+		children: (r) => /* @__PURE__ */ g("label", {
 			"data-ui": "radio-group-radio",
 			dir: y,
-			className: t,
+			className: r,
 			children: [/* @__PURE__ */ g("span", {
 				css: [o, S],
 				children: [
@@ -112,9 +113,9 @@ function D({ ref: e, value: n, label: r, description: i, disabled: u, onChange:
 						ref: e,
 						type: "radio",
 						name: A,
-						value: n,
+						value: t,
 						dir: y,
-						checked: O === n,
+						checked: O === t,
 						disabled: M,
 						"aria-labelledby": R,
 						"aria-describedby": z,
@@ -130,7 +131,7 @@ function D({ ref: e, value: n, label: r, description: i, disabled: u, onChange:
 						id: P,
 						className: p?.label?.className,
 						css: [w, p?.label?.css],
-						children: r
+						children: n
 					})
 				]
 			}), L && /* @__PURE__ */ h("span", {

package/dist/radio-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as RadioGroup } from "./radio-group-TIK0-iPX.js";
+export { t as RadioGroup } from "./radio-group-DItMf2YM.js";

package/dist/{resizable-panels-DUpQEpwG.js → resizable-panels-61h9hA3B.js}

@@ -1,7 +1,8 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { t as 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 { 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-controlled-state-DpeVQZNR.js";
 import { t as o } from "./part-id-D0zksy32.js";
 import { Children as s, Fragment as c, createContext as l, isValidElement as u, useCallback as d, useContext as f, useEffect as p, useId as m, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
@@ -73,7 +74,7 @@ var re = 80, ie = 16, ae = 64, oe = 44, se = 90, x = .5, ce = .5, le = 160, ue =
 		inlineSize: "1px",
 		backgroundColor: y.color.borderControl
 	},
-	"&:focus-visible": n,
+	"&:focus-visible": t,
 	"&[aria-disabled=\"true\"]": { cursor: "default" },
 	[E]: {
 		position: "relative",
@@ -87,11 +88,11 @@ var re = 80, ie = 16, ae = 64, oe = 44, se = 90, x = .5, ce = .5, le = 160, ue =
 		backgroundColor: y.color.textMuted,
 		transform: "scaleY(1.25)"
 	},
-	[i]: {
+	[r]: {
 		[E]: { transition: "none" },
 		[D]: { transform: "none" }
 	},
-	[r]: {
+	[n]: {
 		"&::before": {
 			forcedColorAdjust: "none",
 			backgroundColor: "CanvasText"
@@ -121,7 +122,7 @@ var re = 80, ie = 16, ae = 64, oe = 44, se = 90, x = .5, ce = .5, le = 160, ue =
 	},
 	"&[data-side=\"start\"]::before": { borderInlineStart: `${y.space[1]} solid currentColor` },
 	"&[data-side=\"end\"]::before": { borderInlineEnd: `${y.space[1]} solid currentColor` },
-	[r]: {
+	[n]: {
 		borderColor: "CanvasText",
 		boxShadow: "none",
 		color: "CanvasText"
@@ -224,8 +225,8 @@ var De = {
 	End: (e) => e.feasible ? e.upper : e.size,
 	Enter: z
 };
-function B({ ref: e, children: n, value: r, defaultValue: i, onValueChange: s, onValueCommit: l, disabled: u = !1, locale: f, getValueText: y, slotProps: re, className: oe, sx: x, ...S }) {
-	let T = m(), { elements: he, configs: E } = Ce(n, T), D = E.length, [A] = v(() => xe(i ?? r ?? E.map(() => 1), D)), [N, R] = a(r, A, (e) => s?.([...e])), z = xe(N ?? A, D), B = r !== void 0, V = ne() ?? !1, [H, Oe] = v(0), [ke, Ae] = v(null), U = _(null), W = _(null), G = _(null), K = _(null), je = _(/* @__PURE__ */ new Map()), Me = g(() => new Intl.NumberFormat(f, {
+function B({ ref: e, children: t, value: n, defaultValue: r, onValueChange: s, onValueCommit: l, disabled: u = !1, locale: f, getValueText: y, slotProps: re, className: oe, sx: x, ...S }) {
+	let T = m(), { elements: he, configs: E } = Ce(t, T), D = E.length, [A] = v(() => xe(r ?? n ?? E.map(() => 1), D)), [N, R] = a(n, A, (e) => s?.([...e])), z = xe(N ?? A, D), B = n !== void 0, V = ne() ?? !1, [H, Oe] = v(0), [ke, Ae] = v(null), U = _(null), W = _(null), G = _(null), K = _(null), je = _(/* @__PURE__ */ new Map()), Me = g(() => new Intl.NumberFormat(f, {
 		style: "percent",
 		maximumFractionDigits: 0
 	}), [f]), q = H > 0 ? P(z, E, H) : null, J = q ? q.map((e) => e / H) : z.map((e) => e / 100), Ne = J.map((e) => e.toFixed(5)).join(" "), Pe = (e) => o(T, "separator", E[e].value), Fe = d((t) => {
@@ -453,7 +454,7 @@ function B({ ref: e, children: n, value: r, defaultValue: i, onValueChange: s, o
 			})
 		});
 	};
-	return /* @__PURE__ */ b(t, {
+	return /* @__PURE__ */ b(i, {
 		className: oe,
 		styles: me,
 		sx: x,
@@ -478,7 +479,7 @@ function B({ ref: e, children: n, value: r, defaultValue: i, onValueChange: s, o
 	});
 }
 B.displayName = "ResizablePanels";
-function V({ ref: e, value: n, minSize: r, maxSize: i, collapsible: a, className: o, sx: s, style: c, children: l, ...u }) {
+function V({ ref: e, value: t, minSize: n, maxSize: r, collapsible: a, className: o, sx: s, style: c, children: l, ...u }) {
 	let d = f(ve);
 	if (!d) throw Error("ResizablePanels.Panel must be rendered inside ResizablePanels.");
 	let p = _(null), { collapsed: m, repairId: g } = d;
@@ -487,7 +488,7 @@ function V({ ref: e, value: n, minSize: r, maxSize: i, collapsible: a, className
 		if (!m || !e || !g) return;
 		let t = e.getRootNode();
 		e.contains(t.activeElement) && t.getElementById(g)?.focus();
-	}, [m, g]), /* @__PURE__ */ b(t, {
+	}, [m, g]), /* @__PURE__ */ b(i, {
 		className: o,
 		styles: T,
 		sx: s,

package/dist/resizable-panels.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ResizablePanels } from "./resizable-panels-DUpQEpwG.js";
+export { t as ResizablePanels } from "./resizable-panels-61h9hA3B.js";

package/dist/{scroll-area-CcZyiSOQ.js → scroll-area-B8KkCPOM.js}

@@ -1,7 +1,8 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { t as 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 { 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 { useCallback as o, useEffect as s, useRef as c } from "react";
 import { vars as l } from "@jfrader/tokens/vars";
@@ -19,7 +20,7 @@ var p = 900, m = .9, h = 1, g = e({
 	"--scroll-area-fade": l.space[6],
 	"&:hover > [data-ui=\"scroll-area-track\"], &:focus-within > [data-ui=\"scroll-area-track\"], &[data-scrolling] > [data-ui=\"scroll-area-track\"], &[data-dragging] > [data-ui=\"scroll-area-track\"], &[data-scrollbars=\"always\"] > [data-ui=\"scroll-area-track\"]": { opacity: 1 },
 	"&:focus-within > [data-ui=\"scroll-area-viewport\"]": { maskImage: "none" },
-	[r]: { "& > [data-ui=\"scroll-area-track\"]": { display: "none" } }
+	[n]: { "& > [data-ui=\"scroll-area-track\"]": { display: "none" } }
 }), _ = e({
 	label: "scroll-area-viewport",
 	minInlineSize: 0,
@@ -27,7 +28,7 @@ var p = 900, m = .9, h = 1, g = e({
 	maxBlockSize: "100%",
 	overflowX: "hidden",
 	overflowY: "auto",
-	"&:focus-visible": n,
+	"&:focus-visible": t,
 	maskImage: "linear-gradient(to bottom, transparent, black var(--fade-top), black calc(100% - var(--fade-bottom)), transparent), linear-gradient(to right, transparent, black var(--fade-left), black calc(100% - var(--fade-right)), transparent)",
 	maskComposite: "intersect",
 	"&[data-orientation=\"horizontal\"]": {
@@ -43,7 +44,7 @@ var p = 900, m = .9, h = 1, g = e({
 		scrollbarWidth: "none",
 		"&::-webkit-scrollbar": { display: "none" }
 	},
-	[r]: {
+	[n]: {
 		maskImage: "none",
 		"&:not([data-scrollbars=\"native\"])": {
 			scrollbarWidth: "auto",
@@ -61,7 +62,7 @@ var p = 900, m = .9, h = 1, g = e({
 	userSelect: "none",
 	transition: `opacity ${l.motion.duration.base} ${l.motion.easeStandard}`,
 	"&[hidden]": { display: "none" },
-	[i]: { transition: "none" }
+	[r]: { transition: "none" }
 }), b = e({
 	label: "scroll-area-thumb",
 	"&::after": {
@@ -82,7 +83,7 @@ var p = 900, m = .9, h = 1, g = e({
 		insetBlockStart: `calc(50% - ${l.space[2]} / 2)`
 	},
 	"&:hover::after": { backgroundColor: l.color.text },
-	[i]: { "&::after": { transition: "none" } }
+	[r]: { "&::after": { transition: "none" } }
 }), x = {
 	block: {
 		position: "absolute",
@@ -132,7 +133,7 @@ function C(e, t) {
 		typeof n == "function" ? n() : typeof e == "function" ? e(null) : e && (e.current = null);
 	};
 }
-function w({ ref: e, children: n, className: r, sx: i, orientation: l = "vertical", fade: w, scrollbars: T = "auto", hideDelay: E = p, maxBlockSize: D, snap: O, wheelToHorizontal: k = !1, onScroll: A, onEdgeChange: j, slotProps: M, ...N }) {
+function w({ ref: e, children: t, className: n, sx: r, orientation: l = "vertical", fade: w, scrollbars: T = "auto", hideDelay: E = p, maxBlockSize: D, snap: O, wheelToHorizontal: k = !1, onScroll: A, onEdgeChange: j, slotProps: M, ...N }) {
 	let P = c(null), F = c(null), I = c(/* @__PURE__ */ new WeakSet()), L = c({}), R = c({}), z = c(null), B = a(j), V = M?.viewport?.ref, H = o((e) => {
 		P.current = e;
 		let t = C(V, e);
@@ -258,16 +259,16 @@ function w({ ref: e, children: n, className: r, sx: i, orientation: l = "vertica
 		B
 	]);
 	let { ref: U, css: W, className: G, style: K, onScroll: q, onWheel: J, onWheelCapture: Y, ...X } = M?.viewport ?? {}, Z = M?.track, Q = M?.thumb, $ = w !== void 0 && Number.isFinite(w) ? { "--scroll-area-fade": `${Math.max(0, w)}px` } : void 0;
-	return /* @__PURE__ */ d(t, {
-		className: r,
+	return /* @__PURE__ */ d(i, {
+		className: n,
 		styles: g,
-		sx: i,
-		children: (t) => /* @__PURE__ */ f("div", {
+		sx: r,
+		children: (n) => /* @__PURE__ */ f("div", {
 			...N,
 			ref: e,
 			"data-ui": "scroll-area",
 			"data-scrollbars": T,
-			className: t,
+			className: n,
 			style: {
 				...$,
 				...N.style
@@ -307,7 +308,7 @@ function w({ ref: e, children: n, className: r, sx: i, orientation: l = "vertica
 					css: v,
 					"data-orientation": l,
 					"data-ui": "scroll-area-content",
-					children: n
+					children: t
 				})
 			}), ["block", "inline"].map((e) => /* @__PURE__ */ u("div", {
 				...Z,

package/dist/scroll-area.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ScrollArea } from "./scroll-area-CcZyiSOQ.js";
+export { t as ScrollArea } from "./scroll-area-B8KkCPOM.js";