@jfrader/ui 0.5.0 → 0.6.0

package/dist/file-dropzone-Bi5ikRIz.js

@@ -0,0 +1,458 @@
+'use client';
+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-DgVO3NaB.js";
+import { t as o } from "./renderable-DzcIj1Lo.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";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as p } from "@floating-ui/react";
+//#region src/components/file-dropzone/file-dropzone.tsx
+var oe = e({
+	label: "file-dropzone",
+	display: "grid",
+	gap: u.space[3],
+	minInlineSize: 0,
+	color: u.color.text,
+	fontFamily: u.font.sans,
+	fontSize: u.textSize.sm,
+	lineHeight: u.lineHeight.base
+}), se = e({
+	position: "relative",
+	display: "grid",
+	border: `1px dashed ${u.color.borderControl}`,
+	borderRadius: u.radius.lg,
+	backgroundColor: u.color.surface,
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: u.motion.duration.fast,
+	transitionTimingFunction: u.motion.easeStandard,
+	"&:has(input:focus-visible)": t,
+	"&[data-dragging=\"true\"]": {
+		borderStyle: "solid",
+		backgroundColor: u.color.surfaceHover
+	},
+	[r]: { transitionDuration: "0s" },
+	[n]: { borderColor: "ButtonText" }
+}), ce = e({
+	display: "grid",
+	justifyItems: "center",
+	gap: u.space[3],
+	textAlign: "center"
+}), le = e({ cursor: "not-allowed" }), ue = {
+	sm: e({ padding: u.space[4] }),
+	md: e({ padding: u.space[6] }),
+	lg: e({ padding: u.space[8] })
+}, de = {
+	sm: e({
+		paddingInline: u.space[4],
+		paddingBlockEnd: u.space[4]
+	}),
+	md: e({
+		paddingInline: u.space[6],
+		paddingBlockEnd: u.space[6]
+	}),
+	lg: e({
+		paddingInline: u.space[8],
+		paddingBlockEnd: u.space[8]
+	})
+}, fe = e({
+	display: "inline-flex",
+	alignItems: "center",
+	minBlockSize: u.space[8],
+	paddingInline: u.space[3],
+	border: `1px solid ${u.color.borderControl}`,
+	borderRadius: u.radius.md,
+	fontWeight: u.fontWeight.medium,
+	overflowWrap: "anywhere"
+}), pe = e({
+	position: "absolute",
+	opacity: 0,
+	inlineSize: "1px",
+	blockSize: "1px"
+}), m = e({ color: u.color.textMuted }), me = e({
+	display: "grid",
+	gap: u.space[2],
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	inlineSize: "100%",
+	textAlign: "start"
+}), he = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: u.space[3],
+	padding: u.space[3],
+	border: `1px solid ${u.color.borderControl}`,
+	borderRadius: u.radius.md,
+	backgroundColor: u.color.surfaceRaised,
+	cursor: "default"
+}), ge = e({
+	flex: "1 1 10rem",
+	minInlineSize: 0,
+	display: "grid",
+	gap: u.space[2],
+	overflowWrap: "anywhere"
+}), _e = e({
+	inlineSize: u.space[12],
+	blockSize: u.space[12],
+	objectFit: "cover",
+	borderRadius: u.radius.sm
+}), ve = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: u.space[2]
+}), ye = e({
+	whiteSpace: "normal",
+	overflowWrap: "anywhere",
+	minBlockSize: u.space[8],
+	blockSize: "auto",
+	paddingBlock: u.space[2],
+	maxInlineSize: "100%"
+}), be = e({
+	color: u.color.dangerText,
+	overflowWrap: "anywhere"
+}), xe = e({ "& > [data-ui=\"progress-indicator\"]": { transitionDuration: "0s" } }), Se = "label, [data-file-row], a, button, input, select, textarea, [role=\"button\"]", Ce = [], we = 5, Te = 100, h = 1e3, g = [
+	"byte",
+	"kilobyte",
+	"megabyte",
+	"gigabyte"
+], Ee = (e, t) => e.length === t.length && e.every((e, n) => e.id === t[n]?.id && e.file === t[n]?.file), _ = (e) => Array.from(e.types).includes("Files"), De = (e, t) => e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
+function Oe(e, t) {
+	let n = t?.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean) ?? [];
+	return !n.length || n.some((t) => t.startsWith(".") ? e.name.toLowerCase().endsWith(t) : !!e.type && (t.endsWith("/*") ? e.type.toLowerCase().startsWith(t.slice(0, -1)) : e.type.toLowerCase() === t));
+}
+function ke(e, t) {
+	let n = e > 0 ? Math.min(Math.floor(Math.log(e) / Math.log(h)), g.length - 1) : 0;
+	return new Intl.NumberFormat(t, {
+		style: "unit",
+		unit: g[Math.max(0, n)],
+		unitDisplay: "short",
+		maximumFractionDigits: 1
+	}).format(e / h ** Math.max(0, n));
+}
+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`,
+		J && `${j}-error`
+	].filter(Boolean).join(" ") || void 0, ot = [Y?.["aria-labelledby"], K && `${j}-label`].filter(Boolean).join(" ") || void 0, st = J ? !0 : Y?.["aria-invalid"], X = (e) => {
+		Ee(M, e) || Je(e);
+	}, ct = Number.isInteger(v) && v > 0 ? v : we, Z = a((e) => {
+		if (!e.file || !b) return;
+		F.current.get(e.id)?.controller.abort();
+		let t = {
+			file: e.file,
+			controller: new AbortController(),
+			status: "uploading"
+		};
+		F.current.set(e.id, t), z();
+		let n = () => !t.controller.signal.aborted && F.current.get(e.id) === t, r = (e) => {
+			n() && t.status === "uploading" && Number.isFinite(e) && (t.progress = Math.max(t.progress ?? 0, Math.min(Te, Math.max(0, e))), z());
+		};
+		Promise.resolve().then(() => {
+			if (n()) return b(e, {
+				signal: t.controller.signal,
+				onProgress: r
+			});
+		}).then(() => {
+			n() && (t.status = "uploaded", W(D.status("uploaded", e.name)), z());
+		}, (r) => {
+			n() && (r instanceof Error && r.name === "AbortError" ? (t.status = "idle", z()) : (t.status = "failed", t.error = r instanceof Error && r.message.trim() ? r.message : D.uploadError, W(D.status("failed", e.name)), z()));
+		});
+	});
+	s(() => {
+		let e = !1, t = 0;
+		for (let [t, n] of F.current) M.some((e) => e.id === t && e.file === n.file) || (n.controller.abort(), F.current.delete(t), e = !0);
+		for (let [t, n] of L.current) M.some((e) => e.id === t && e.file === n.file && e.preview === void 0) || (URL.revokeObjectURL(n.url), L.current.delete(t), e = !0);
+		for (let n of M) {
+			let r = I.current.get(n.id);
+			r && r.file === n.file && (I.current.delete(n.id), n.file?.type.startsWith("image/") && n.preview === void 0 && !L.current.has(n.id) && (L.current.set(n.id, {
+				file: n.file,
+				url: URL.createObjectURL(n.file)
+			}), e = !0), t++, Z(n));
+		}
+		t && W(D.added(t));
+		let n = R.current;
+		n && !M.some((e) => e.id === n.item.id && e.file === n.item.file) && (R.current = null, W(D.removed(n.item.name)), n.active && (P.current?.ownerDocument.activeElement === n.active || P.current?.ownerDocument.activeElement === P.current?.ownerDocument.body) && ((P.current?.querySelectorAll("[data-file-row]")?.[Math.min(n.index, M.length - 1)])?.querySelector("[data-action=\"remove\"]") ?? N.current)?.focus()), e && z();
+	}, [
+		M,
+		D,
+		Z
+	]), s(() => () => {
+		for (let e of F.current.values()) e.controller.abort();
+		F.current.clear();
+		for (let e of L.current.values()) URL.revokeObjectURL(e.url);
+		L.current.clear(), I.current.clear();
+	}, []);
+	let lt = a(() => {
+		I.current.clear(), $e([]), W(""), t === void 0 ? Ye() : X(qe.current);
+	});
+	s(() => {
+		let e = N.current?.form, t = (e) => {
+			queueMicrotask(() => {
+				e.defaultPrevented || lt();
+			});
+		};
+		return e?.addEventListener("reset", t), () => e?.removeEventListener("reset", t);
+	}, [lt]);
+	function Q(e) {
+		if (G) return;
+		let t = [], n = [], r = g ? M : M.filter((e) => !e.file);
+		for (let i of e) {
+			let e, a = null;
+			Oe(i, h) ? y !== void 0 && Number.isFinite(y) && y >= 0 && i.size > y ? e = "size" : (a = Ae?.(i) ?? null, a !== null && (e = "custom")) : e = "type", (e || !M.some((e) => e.file && De(e.file, i)) && !n.some((e) => De(e, i))) && (!e && (r.length + n.length >= ct || !g && n.length >= 1) && (e = "count"), e ? t.push({
+				file: i,
+				code: e,
+				message: e === "custom" ? a : D.rejection(e, i)
+			}) : n.push(i));
+		}
+		if ($e(t), t.length && u?.(t), !n.length) return;
+		let i = n.map((e) => ({
+			id: crypto.randomUUID(),
+			file: e,
+			name: e.name,
+			size: e.size
+		}));
+		I.current.clear();
+		for (let e of i) I.current.set(e.id, e);
+		X([...r, ...i]);
+	}
+	function ut(e, t) {
+		if (G) return;
+		let n = P.current?.querySelectorAll("[data-file-row]")[t], r = P.current?.ownerDocument.activeElement ?? null;
+		R.current = {
+			item: e,
+			index: t,
+			active: n?.contains(r) ? r : null
+		}, X(M.filter((t) => t.id !== e.id));
+	}
+	function dt(e, t, n) {
+		if (!G && e.target instanceof HTMLButtonElement && ((e.key === "Delete" || e.key === "Backspace") && (e.preventDefault(), ut(t, n)), e.key === "ArrowUp" || e.key === "ArrowDown")) {
+			e.preventDefault();
+			let t = n + (e.key === "ArrowUp" ? -1 : 1), r = P.current?.querySelectorAll("[data-file-row]")[t], i = e.target.dataset.action;
+			(r?.querySelector(`[data-action="${i}"]`) ?? r?.querySelector("[data-action=\"remove\"]"))?.focus();
+		}
+	}
+	let ft = M.length > 0 && /* @__PURE__ */ d("ul", {
+		...A?.list,
+		"aria-label": A?.list?.["aria-label"] ?? D.files,
+		css: [
+			me,
+			x === "inside" && de[Pe],
+			A?.list?.css
+		],
+		children: M.map((e, t) => {
+			let n = F.current.get(e.id), r = n?.status ?? (e.uploaded ? "uploaded" : "idle"), i = e.preview ?? L.current.get(e.id)?.url, a = Ie?.(e);
+			return /* @__PURE__ */ ae("li", {
+				...A?.item,
+				key: e.id,
+				"data-file-row": !0,
+				"data-state": r,
+				onKeyDown: (n) => {
+					A?.item?.onKeyDown?.(n), n.defaultPrevented || dt(n, e, t);
+				},
+				css: [he, A?.item?.css]
+			}, i && !tt.has(i) ? /* @__PURE__ */ d("img", {
+				...A?.preview,
+				src: i,
+				alt: "",
+				css: [_e, A?.preview?.css],
+				onError: (e) => {
+					A?.preview?.onError?.(e), nt((e) => /* @__PURE__ */ new Set([...e, i]));
+				}
+			}) : o(a) && /* @__PURE__ */ d("span", {
+				"aria-hidden": !0,
+				children: a
+			}), /* @__PURE__ */ f("div", {
+				css: ge,
+				children: [
+					/* @__PURE__ */ d("bdi", { children: e.name }),
+					/* @__PURE__ */ d("span", {
+						css: m,
+						children: ke(e.size, Me)
+					}),
+					/* @__PURE__ */ d("span", { children: D.status(r, e.name) }),
+					r === "uploading" && /* @__PURE__ */ d(re, {
+						...A?.progress,
+						value: n?.progress,
+						"aria-label": A?.progress?.["aria-label"] ?? e.name,
+						getValueLabel: (e) => new Intl.NumberFormat(Me, { style: "percent" }).format(e / Te),
+						css: [xe, A?.progress?.css]
+					}),
+					n?.error && /* @__PURE__ */ d("span", {
+						css: be,
+						children: n.error
+					})
+				]
+			}), /* @__PURE__ */ f("div", {
+				css: ve,
+				children: [r === "failed" && e.file && b && /* @__PURE__ */ d(ne, {
+					...A?.action,
+					css: [ye, A?.action?.css],
+					variant: "outline",
+					size: "sm",
+					disabled: O,
+					"aria-disabled": k || A?.action?.["aria-disabled"],
+					"data-action": "retry",
+					"aria-label": A?.action?.["aria-label"] ?? D.retry(e.name),
+					onClick: (t) => {
+						A?.action?.onClick?.(t), !t.defaultPrevented && !G && (Z(e), t.currentTarget.parentElement?.querySelector("[data-action=\"remove\"]")?.focus());
+					},
+					children: D.retry(e.name)
+				}), /* @__PURE__ */ d(ne, {
+					...A?.action,
+					css: [ye, A?.action?.css],
+					variant: "outline",
+					size: "sm",
+					disabled: O,
+					"aria-disabled": k || A?.action?.["aria-disabled"],
+					"data-action": "remove",
+					"aria-label": A?.action?.["aria-label"] ?? D.remove(e.name),
+					onClick: (n) => {
+						A?.action?.onClick?.(n), n.defaultPrevented || ut(e, t);
+					},
+					children: D.remove(e.name)
+				})]
+			}));
+		})
+	}), $ = S !== void 0 && S > 0 && M.length >= S && !B;
+	return /* @__PURE__ */ d(i, {
+		className: [A?.root?.className, ze].filter(Boolean).join(" "),
+		styles: [oe, A?.root?.css],
+		sx: Be,
+		children: (e) => /* @__PURE__ */ f("div", {
+			...A?.root,
+			...Ke,
+			ref: Xe,
+			className: e,
+			"data-ui": "file-dropzone",
+			"data-state": B ? "dragging" : M.length ? "selected" : "empty",
+			"aria-disabled": G || Ke["aria-disabled"] || A?.root?.["aria-disabled"],
+			onDragEnter: (e) => {
+				A?.root?.onDragEnter?.(e), Ve?.(e), !e.defaultPrevented && !G && _(e.dataTransfer) && (e.preventDefault(), H.current++, V(!0));
+			},
+			onDragOver: (e) => {
+				A?.root?.onDragOver?.(e), He?.(e), !e.defaultPrevented && !G && _(e.dataTransfer) && (e.preventDefault(), e.dataTransfer.dropEffect = "copy");
+			},
+			onDragLeave: (e) => {
+				A?.root?.onDragLeave?.(e), Ue?.(e), !e.defaultPrevented && _(e.dataTransfer) && (H.current = Math.max(0, H.current - 1), H.current || V(!1));
+			},
+			onDrop: (e) => {
+				A?.root?.onDrop?.(e), We?.(e), H.current = 0, V(!1), !e.defaultPrevented && _(e.dataTransfer) && (e.preventDefault(), Q(Array.from(e.dataTransfer.files)));
+			},
+			onPaste: (e) => {
+				A?.root?.onPaste?.(e), Ge?.(e);
+				let t = e.target;
+				!e.defaultPrevented && Fe && !G && P.current?.contains(P.current.ownerDocument.activeElement) && !t.closest("input, textarea, [contenteditable]:not([contenteditable=\"false\"])") && e.clipboardData.files.length && (e.preventDefault(), Q(Array.from(e.clipboardData.files)));
+			},
+			children: [
+				/* @__PURE__ */ f("div", {
+					...A?.target,
+					"data-dragging": B,
+					"data-compact": $,
+					css: [
+						se,
+						G && le,
+						A?.target?.css
+					],
+					onClick: (e) => {
+						A?.target?.onClick?.(e);
+						let t = e.target.closest(Se);
+						!e.defaultPrevented && !G && !e.currentTarget.contains(t) && N.current?.click();
+					},
+					children: [/* @__PURE__ */ f("label", {
+						...A?.label,
+						htmlFor: it,
+						css: [
+							ce,
+							ue[Pe],
+							A?.label?.css
+						],
+						children: [
+							/* @__PURE__ */ d("input", {
+								...Y,
+								ref: Ze,
+								id: it,
+								type: "file",
+								name: Le,
+								accept: h,
+								multiple: g,
+								required: Ne,
+								disabled: O,
+								"aria-disabled": k || Y?.["aria-disabled"],
+								"aria-labelledby": ot,
+								"aria-label": Y?.["aria-label"] ?? (!K && !Y?.["aria-labelledby"] ? D.browse : void 0),
+								"aria-describedby": at,
+								"aria-invalid": st,
+								css: [pe, Y?.css],
+								onClick: (e) => {
+									Y?.onClick?.(e), G && e.preventDefault();
+								},
+								onChange: (e) => {
+									Y?.onChange?.(e), e.defaultPrevented || Q(Array.from(e.currentTarget.files ?? [])), e.currentTarget.value = "";
+								}
+							}),
+							K && /* @__PURE__ */ d("span", {
+								id: `${j}-label`,
+								children: C
+							}),
+							rt && /* @__PURE__ */ d("div", {
+								...A?.description,
+								id: `${j}-description`,
+								css: [$ ? te : m, A?.description?.css],
+								children: w
+							}),
+							B && o(T) && /* @__PURE__ */ d("div", { children: T }),
+							$ && /* @__PURE__ */ d("span", { children: D.count(M.length) }),
+							/* @__PURE__ */ d("span", {
+								...A?.browse,
+								"aria-hidden": !0,
+								css: [fe, A?.browse?.css],
+								children: D.browse
+							}),
+							q && /* @__PURE__ */ d("div", {
+								...A?.note,
+								id: `${j}-note`,
+								css: [m, A?.note?.css],
+								children: je
+							})
+						]
+					}), x === "inside" && ft]
+				}),
+				J && /* @__PURE__ */ f("div", {
+					...A?.error,
+					id: `${j}-error`,
+					role: "alert",
+					css: [be, A?.error?.css],
+					children: [o(E) && E, U.length > 0 && /* @__PURE__ */ d("ul", { children: U.map((e, t) => /* @__PURE__ */ f("li", { children: [
+						/* @__PURE__ */ d("bdi", { children: e.file.name }),
+						": ",
+						e.message
+					] }, t)) })]
+				}),
+				x === "below" && ft,
+				/* @__PURE__ */ d("div", {
+					...A?.status,
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					css: [te, A?.status?.css],
+					children: B && o(T) ? T : et
+				})
+			]
+		})
+	});
+}
+v.displayName = "FileDropzone";
+//#endregion
+export { v as t };

package/dist/file-dropzone.js

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

package/dist/{filter-toolbar-D5KEKTSe.js → filter-toolbar-QRnC4S_H.js}

@@ -1,10 +1,11 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { 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 { t as o } from "./button-C92uYFJW.js";
+import { t as o } from "./button-C6OV0C7J.js";
 import { createContext as s, useContext as c, useLayoutEffect as l, useMemo as u, useRef as d } from "react";
 import { vars as f } from "@jfrader/tokens/vars";
 import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
@@ -58,8 +59,8 @@ var T = e({
 	color: f.color.text,
 	fontFamily: f.font.sans,
 	fontSize: f.textSize.sm,
-	"&:focus": n,
-	[r]: {
+	"&:focus": t,
+	[n]: {
 		borderColor: "CanvasText",
 		backgroundColor: "Canvas",
 		color: "CanvasText"
@@ -79,14 +80,16 @@ var T = e({
 	borderRadius: f.radius.full,
 	backgroundColor: f.color.surfaceHover,
 	color: f.color.text,
-	[r]: {
+	[n]: {
 		borderColor: "CanvasText",
 		backgroundColor: "Canvas",
 		color: "CanvasText"
 	}
 }), k = e({
 	minInlineSize: 0,
-	overflowWrap: "anywhere"
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
 }), A = e({ color: f.color.textMuted }), j = e({ fontWeight: f.fontWeight.medium }), M = e({
 	flexShrink: 0,
 	minInlineSize: f.space[8],
@@ -95,7 +98,7 @@ var T = e({
 	padding: 0,
 	borderRadius: f.radius.full,
 	color: f.color.text,
-	[r]: { borderColor: "ButtonText" }
+	[n]: { borderColor: "ButtonText" }
 }), N = e({
 	alignSelf: "flex-start",
 	maxInlineSize: "100%",
@@ -105,7 +108,7 @@ var T = e({
 	whiteSpace: "normal",
 	overflowWrap: "anywhere",
 	borderColor: f.color.borderControl,
-	[r]: { borderColor: "ButtonText" }
+	[n]: { borderColor: "ButtonText" }
 }), P = e({
 	margin: 0,
 	minInlineSize: 0,
@@ -114,8 +117,8 @@ var T = e({
 	fontSize: f.textSize.sm,
 	lineHeight: f.lineHeight.base
 });
-function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled: o = !1, label: s = "Filters", messages: c, className: f, sx: m, children: y, "aria-label": b, "aria-labelledby": w, tabIndex: T = -1, ...D }) {
-	let [O = g, k] = i(n, r, a), A = u(() => x(O), [O]), j = d(null), M = h([j, e]), N = d(null), P = u(() => ({
+function F({ ref: e, value: t, defaultValue: n = g, onValueChange: a, disabled: o = !1, label: s = "Filters", messages: c, className: f, sx: m, children: y, "aria-label": b, "aria-labelledby": w, tabIndex: T = -1, ...D }) {
+	let [O = g, k] = i(t, n, a), A = u(() => x(O), [O]), j = d(null), M = h([j, e]), N = d(null), P = u(() => ({
 		...v,
 		...c
 	}), [c]), F = u(() => {
@@ -164,7 +167,7 @@ function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled:
 		(a ?? o ?? t).focus();
 	}, [A]), /* @__PURE__ */ p(C.Provider, {
 		value: F,
-		children: /* @__PURE__ */ p(t, {
+		children: /* @__PURE__ */ p(r, {
 			className: f,
 			styles: E,
 			sx: m,
@@ -184,12 +187,12 @@ function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled:
 	});
 }
 F.displayName = "FilterToolbar";
-function I({ children: e, className: n, sx: r, ...i }) {
+function I({ children: e, className: t, sx: n, ...i }) {
 	let { value: a, disabled: o, onValueChange: s } = w("Controls");
-	return /* @__PURE__ */ p(t, {
-		className: n,
+	return /* @__PURE__ */ p(r, {
+		className: t,
 		styles: T,
-		sx: r,
+		sx: n,
 		children: (t) => /* @__PURE__ */ p("div", {
 			...i,
 			"data-ui": "filter-toolbar-controls",
@@ -203,29 +206,29 @@ function I({ children: e, className: n, sx: r, ...i }) {
 	});
 }
 I.displayName = "FilterToolbar.Controls";
-function L({ empty: e, slotProps: n, className: r, sx: i, ...s }) {
+function L({ empty: e, slotProps: t, className: n, sx: i, ...s }) {
 	let { value: c, disabled: l, messages: u, remove: d } = w("ActiveFilters");
-	return /* @__PURE__ */ p(t, {
-		className: r,
+	return /* @__PURE__ */ p(r, {
+		className: n,
 		styles: T,
 		sx: i,
-		children: (t) => /* @__PURE__ */ p("div", {
+		children: (n) => /* @__PURE__ */ p("div", {
 			...s,
 			"data-ui": "filter-toolbar-active-filters",
-			className: t,
+			className: n,
 			children: c.length > 0 ? /* @__PURE__ */ p("ul", {
-				className: n?.list?.className,
+				className: t?.list?.className,
 				css: [
 					T,
 					D,
-					n?.list?.css
+					t?.list?.css
 				],
 				children: c.map((e) => /* @__PURE__ */ m("li", {
-					className: n?.chip?.className,
-					css: [O, n?.chip?.css],
+					className: t?.chip?.className,
+					css: [O, t?.chip?.css],
 					children: [/* @__PURE__ */ m("span", {
-						className: n?.label?.className,
-						css: [k, n?.label?.css],
+						className: t?.label?.className,
+						css: [k, t?.label?.css],
 						children: [/* @__PURE__ */ m("span", {
 							css: A,
 							children: [e.label, ": "]
@@ -240,8 +243,8 @@ function L({ empty: e, slotProps: n, className: r, sx: i, ...s }) {
 						"aria-label": u.remove(e),
 						"data-ui": "filter-toolbar-remove",
 						"data-filter-id": e.id,
-						className: n?.remove?.className,
-						css: [M, n?.remove?.css],
+						className: t?.remove?.className,
+						css: [M, t?.remove?.css],
 						onClick: (t) => d(e, t.currentTarget),
 						render: (e) => /* @__PURE__ */ p("button", {
 							...e,
@@ -282,10 +285,10 @@ function R({ children: e, onClick: t, disabled: n = !1, css: r, ...i }) {
 	});
 }
 R.displayName = "FilterToolbar.Clear";
-function z({ count: e, locale: n, formatCount: r = b, loading: i = !1, loadingLabel: a = "Loading results", unknownLabel: o = "Results unavailable", className: s, sx: c, ...l }) {
+function z({ count: e, locale: t, formatCount: n = b, loading: i = !1, loadingLabel: a = "Loading results", unknownLabel: o = "Results unavailable", className: s, sx: c, ...l }) {
 	w("ResultCount");
-	let u = e !== null && Number.isFinite(e) && Number.isInteger(e) && e >= 0 ? r(e, new Intl.NumberFormat(n).format(e)) : o;
-	return /* @__PURE__ */ p(t, {
+	let u = e !== null && Number.isFinite(e) && Number.isInteger(e) && e >= 0 ? n(e, new Intl.NumberFormat(t).format(e)) : o;
+	return /* @__PURE__ */ p(r, {
 		className: s,
 		styles: P,
 		sx: c,

package/dist/filter-toolbar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as FilterToolbar } from "./filter-toolbar-D5KEKTSe.js";
+export { t as FilterToolbar } from "./filter-toolbar-QRnC4S_H.js";

package/dist/{flex-Dh-_J5-U.js → flex-CS7eMRcK.js}

@@ -1,6 +1,6 @@
 'use client';
-import { t as e } from "./sx-Dx9JUKp5.js";
-import { t } from "./layout-style-Cbd1Vilw.js";
+import { t as e } from "./sx-BJXJ2xJK.js";
+import { t } from "./layout-style-BE0gSqrH.js";
 import { jsx as n } from "@emotion/react/jsx-runtime";
 //#region src/components/flex/flex.tsx
 function r({ ref: r, direction: i, wrap: a, inline: o, align: s, justify: c, gap: l, className: u, sx: d, ...f }) {

package/dist/flex.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Flex } from "./flex-Dh-_J5-U.js";
+export { t as Flex } from "./flex-CS7eMRcK.js";