@ux-builder/ui 0.6.1 → 0.6.3

package/AGENTS.md

@@ -13,7 +13,7 @@ to the app, as long as the app follows the rules below.
 3. Never hard-code colours, font families or radii: no hex, rgb(), named colours, font names or pixel radii in CSS or style props.
 4. Run the lint rule ux-builder/no-hard-coded-values (@ux-builder/ui/stylelint, @ux-builder/ui/eslint) with ux-builder/no-foreign-ui and ux-builder/no-inline-svg, then the theme audit on the running app (npx ux-builder-audit <url>, @ux-builder/audit), and fix what they report.
 5. Select themes with ThemeProvider (theme, appearance) or data-theme and data-appearance on <html>; never restyle per theme in app code.
-6. Compose screens from @ux-builder/ui/patterns before writing any layout CSS: AppShell for the frame; CollectionList, ListDetail, RecordDetail, FormPage, QuickEdit, Dashboard, ReportViewer, SettingsPage and ErrorScreen for screens; the regions and the layout primitives (Stack, Cluster, Grid, Page, SplitView) for anything else. Supply content, data and actions through their slots; never fork or restyle a pattern.
+6. Compose screens from @ux-builder/ui/patterns before writing any layout CSS: AppShell for the frame, with each screen inside a Page, which gives it the page gutter and width (AppShell's content area and the screen patterns have none of their own; ErrorScreen excepted); CollectionList, ListDetail, RecordDetail, FormPage, QuickEdit, Dashboard, ReportViewer, SettingsPage and ErrorScreen for screens; the regions and the layout primitives (Stack, Cluster, Grid, Page, SplitView) for anything else. Supply content, data and actions through their slots; never fork or restyle a pattern.
 <!-- rules:end -->
 
 ## Setting up
@@ -77,7 +77,7 @@ import { ThemeProvider } from "@ux-builder/ui";
 <!-- catalogue:start -->
 ## Reference (generated from the SDK; do not edit by hand)
 
-@ux-builder/ui 0.6.1, @ux-builder/tokens 1.5.0. The full catalogue, with every token and prop, is `@ux-builder/ui/catalogue.json`.
+@ux-builder/ui 0.6.3, @ux-builder/tokens 1.6.0. The full catalogue, with every token and prop, is `@ux-builder/ui/catalogue.json`.
 
 ### Components
 

package/catalogue.json

@@ -1,8 +1,8 @@
 {
   "$description": "Generated by tools/gen-catalogue.mjs from source (FEAT-004 SDK-13). Do not edit; run npm run catalogue.",
   "packages": {
-    "@ux-builder/ui": "0.6.1",
-    "@ux-builder/tokens": "1.5.0"
+    "@ux-builder/ui": "0.6.3",
+    "@ux-builder/tokens": "1.6.0"
   },
   "rules": [
     "Use the SDK's widgets (@ux-builder/ui) for buttons, fields, choices, tables, menus, tabs, breadcrumbs, sheets, notices, status pills, toasts, progress bars, spinners, skeletons, icons and the logo; do not build your own. Icons beyond the shared names come from @ux-builder/ui/icons, never hand-drawn.",
@@ -10,7 +10,7 @@
     "Never hard-code colours, font families or radii: no hex, rgb(), named colours, font names or pixel radii in CSS or style props.",
     "Run the lint rule ux-builder/no-hard-coded-values (@ux-builder/ui/stylelint, @ux-builder/ui/eslint) with ux-builder/no-foreign-ui and ux-builder/no-inline-svg, then the theme audit on the running app (npx ux-builder-audit <url>, @ux-builder/audit), and fix what they report.",
     "Select themes with ThemeProvider (theme, appearance) or data-theme and data-appearance on <html>; never restyle per theme in app code.",
-    "Compose screens from @ux-builder/ui/patterns before writing any layout CSS: AppShell for the frame; CollectionList, ListDetail, RecordDetail, FormPage, QuickEdit, Dashboard, ReportViewer, SettingsPage and ErrorScreen for screens; the regions and the layout primitives (Stack, Cluster, Grid, Page, SplitView) for anything else. Supply content, data and actions through their slots; never fork or restyle a pattern."
+    "Compose screens from @ux-builder/ui/patterns before writing any layout CSS: AppShell for the frame, with each screen inside a Page, which gives it the page gutter and width (AppShell's content area and the screen patterns have none of their own; ErrorScreen excepted); CollectionList, ListDetail, RecordDetail, FormPage, QuickEdit, Dashboard, ReportViewer, SettingsPage and ErrorScreen for screens; the regions and the layout primitives (Stack, Cluster, Grid, Page, SplitView) for anything else. Supply content, data and actions through their slots; never fork or restyle a pattern."
   ],
   "lint": {
     "rule": "ux-builder/no-hard-coded-values",

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as e, C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, j as g, k as _, l as v, m as y, n as b, o as x, p as S, r as C, s as w, t as T, u as E, v as D, w as ee, x as O, y as k } from "./shared-CjrUPFqv.js";
+import { A as e, C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, j as g, k as _, l as v, m as y, n as b, o as x, p as S, r as C, s as w, t as T, u as E, v as D, w as ee, x as O, y as k } from "./shared-CAXoQbx9.js";
 import { UC as A, Wu as te, lP as ne } from "./shared-Bom_GJww.js";
 import { cloneElement as re, createContext as ie, useCallback as j, useContext as M, useEffect as N, useId as P, useLayoutEffect as ae, useMemo as oe, useRef as F, useState as I } from "react";
 import { jsx as L, jsxs as R } from "react/jsx-runtime";

package/dist/patterns.js

@@ -1,4 +1,4 @@
-import { _ as e, a as t, b as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, p as d, r as f, s as p, t as m, u as h } from "./shared-CjrUPFqv.js";
+import { _ as e, a as t, b as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, p as d, r as f, s as p, t as m, u as h } from "./shared-CAXoQbx9.js";
 import { Fragment as g, cloneElement as _, useCallback as v, useEffect as y, useId as b, useLayoutEffect as x, useMemo as S, useRef as C, useState as w } from "react";
 import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
 //#region src/patterns/Layout.jsx

package/dist/{shared-CjrUPFqv.js → shared-CAXoQbx9.js}

@@ -110,26 +110,26 @@ var f = [
 	png: "image/png",
 	webp: "image/webp",
 	ico: "image/x-icon"
-};
-function _(e) {
+}, _ = /url\(\s*(?:"((?:[^"\\]|\\.)*)"|'((?:[^'\\]|\\.)*)'|([^\s"'()]+))\s*\)/;
+function v(e) {
 	if (typeof window > "u" || !e) return null;
-	let t = getComputedStyle(e).getPropertyValue("--piq-brand-favicon").trim();
-	return /url\(\s*["']?([^"')]+)["']?\s*\)/.exec(t)?.[1] ?? null;
+	let t = getComputedStyle(e).getPropertyValue("--piq-brand-favicon").trim(), n = _.exec(t);
+	return n ? (n[1] ?? n[2] ?? n[3]).replace(/\\(.)/g, "$1") : null;
 }
-function v(e = typeof document > "u" ? null : document.documentElement) {
+function y(e = typeof document > "u" ? null : document.documentElement) {
 	if (typeof document > "u" || !e) return null;
-	let t = _(e), n = document.head.querySelector(`link[${h}]`);
+	let t = v(e), n = document.head.querySelector(`link[${h}]`);
 	if (!t) return n?.remove(), null;
 	n || (n = document.createElement("link"), n.rel = "icon", n.setAttribute(h, ""));
-	let r = g[/\.(\w+)(?:[?#].*)?$/.exec(t)?.[1]?.toLowerCase()];
+	let r = /^data:([^;,]+)/.exec(t)?.[1] ?? g[/\.(\w+)(?:[?#].*)?$/.exec(t)?.[1]?.toLowerCase()];
 	return r ? n.type = r : n.removeAttribute("type"), n.getAttribute("href") !== t && n.setAttribute("href", t), document.head.appendChild(n), t;
 }
-function y() {
+function b() {
 	typeof document < "u" && document.head.querySelector(`link[${h}]`)?.remove();
 }
-function b() {
+function x() {
 	return r(() => {
-		let e = document.documentElement, t = () => v(e);
+		let e = document.documentElement, t = () => y(e);
 		t();
 		let n = new MutationObserver(t);
 		n.observe(e, {
@@ -138,119 +138,119 @@ function b() {
 		});
 		let r = window.matchMedia?.("(prefers-color-scheme: dark)");
 		return r?.addEventListener("change", t), () => {
-			n.disconnect(), r?.removeEventListener("change", t), y();
+			n.disconnect(), r?.removeEventListener("change", t), b();
 		};
 	}, []), null;
 }
 //#endregion
 //#region src/ThemeProvider.jsx
-var x = e(null), S = new Map(f.map((e) => [e.name, e])), C = "(prefers-color-scheme: dark)", w = "piq:set-theme", T = !0;
+var S = e(null), C = new Map(f.map((e) => [e.name, e])), w = "(prefers-color-scheme: dark)", T = "piq:set-theme", E = !0;
 try {
-	T = process.env.NODE_ENV !== "production";
+	E = process.env.NODE_ENV !== "production";
 } catch {}
-var E = (e) => {
-	T && console.warn(`@ux-builder/ui ThemeProvider: ${e}`);
+var D = (e) => {
+	E && console.warn(`@ux-builder/ui ThemeProvider: ${e}`);
 };
-function D() {
-	return typeof window > "u" || !window.matchMedia ? null : window.matchMedia(C).matches ? "dark" : "light";
+function O() {
+	return typeof window > "u" || !window.matchMedia ? null : window.matchMedia(w).matches ? "dark" : "light";
 }
-function O(e, t, n = D()) {
-	let r = t === "system" ? n : t, i = S.get(e);
+function k(e, t, n = O()) {
+	let r = t === "system" ? n : t, i = C.get(e);
 	return i ? r && i.appearances.includes(r) ? r : i.default : r ?? null;
 }
-var k = typeof window > "u" ? r : a, A = (e) => ({
+var A = typeof window > "u" ? r : a, ee = (e) => ({
 	...Object.fromEntries(m.map((e) => [`--${e}`, "initial"])),
 	...Object.fromEntries(Object.entries(e).filter(([, e]) => !String(e).startsWith("url(")).map(([e, t]) => [`--${e}`, t]))
 });
 function j({ theme: e, appearance: i = "system", tokens: a, favicon: l = !0, onChange: d, as: p = "div", style: m, children: h, ...g }) {
-	let _ = n(x), b = s(null), [T, j] = c(e), [M, N] = c(i), [P, F] = c(D);
-	r(() => j(e), [e]), r(() => N(i), [i]), k(() => {
-		if (M !== "system" || typeof window > "u" || !window.matchMedia) return;
-		let e = window.matchMedia(C), t = () => F(e.matches ? "dark" : "light");
+	let _ = n(S), v = s(null), [x, E] = c(e), [j, M] = c(i), [N, P] = c(O);
+	r(() => E(e), [e]), r(() => M(i), [i]), A(() => {
+		if (j !== "system" || typeof window > "u" || !window.matchMedia) return;
+		let e = window.matchMedia(w), t = () => P(e.matches ? "dark" : "light");
 		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
-	}, [M]);
-	let I = a ? M === "system" ? P ?? "light" : M : O(T, M, P);
+	}, [j]);
+	let F = a ? j === "system" ? N ?? "light" : j : k(x, j, N);
 	r(() => {
-		a || (T && !S.has(T) ? E(`unknown theme "${T}"; known: ${[...S.keys()].join(", ")}`) : T && M !== "system" && I !== M && E(`theme "${T}" has no ${M} appearance; using ${I}`));
+		a || (x && !C.has(x) ? D(`unknown theme "${x}"; known: ${[...C.keys()].join(", ")}`) : x && j !== "system" && F !== j && D(`theme "${x}" has no ${j} appearance; using ${F}`));
 	}, [
-		T,
-		M,
-		I,
+		x,
+		j,
+		F,
 		a
 	]);
-	let L = l && !a && !_;
-	k(() => {
-		L && v(b.current);
+	let I = l && !a && !_;
+	A(() => {
+		I && y(v.current);
 	}, [
-		L,
-		T,
-		I
-	]), r(() => L ? y : void 0, [L]);
-	let R = t((e) => {
-		j(e), d?.({
+		I,
+		x,
+		F
+	]), r(() => I ? b : void 0, [I]);
+	let L = t((e) => {
+		E(e), d?.({
 			theme: e,
-			appearance: M
+			appearance: j
 		});
-	}, [d, M]), z = t((e) => {
-		N(e), d?.({
-			theme: T,
+	}, [d, j]), R = t((e) => {
+		M(e), d?.({
+			theme: x,
 			appearance: e
 		});
-	}, [d, T]), B = !a && !_;
+	}, [d, x]), z = !a && !_;
 	r(() => {
-		if (!B || typeof window > "u") return;
+		if (!z || typeof window > "u") return;
 		let e = (e) => {
 			let { theme: t, appearance: n } = e.detail ?? {};
-			t && j(t), n && N(n), (t || n) && d?.({
-				theme: t ?? T,
-				appearance: n ?? M
+			t && E(t), n && M(n), (t || n) && d?.({
+				theme: t ?? x,
+				appearance: n ?? j
 			});
 		};
-		return window.addEventListener(w, e), () => window.removeEventListener(w, e);
+		return window.addEventListener(T, e), () => window.removeEventListener(T, e);
 	}, [
-		B,
+		z,
 		d,
-		T,
-		M
+		x,
+		j
 	]);
-	let V = o(() => ({
-		theme: a ? null : T,
-		appearance: I,
-		preference: M,
+	let B = o(() => ({
+		theme: a ? null : x,
+		appearance: F,
+		preference: j,
 		themes: f,
-		setTheme: R,
-		setAppearance: z
+		setTheme: L,
+		setAppearance: R
 	}), [
-		T,
-		I,
-		M,
+		x,
+		F,
+		j,
 		a,
-		R,
-		z
-	]), H = a ? { style: {
-		...A(a),
-		colorScheme: I ?? void 0,
+		L,
+		R
+	]), V = a ? { style: {
+		...ee(a),
+		colorScheme: F ?? void 0,
 		...m
 	} } : {
-		"data-theme": T,
-		...I && { "data-appearance": I },
+		"data-theme": x,
+		...F && { "data-appearance": F },
 		style: {
-			colorScheme: I ?? void 0,
+			colorScheme: F ?? void 0,
 			...m
 		}
 	};
-	return /* @__PURE__ */ u(x.Provider, {
-		value: V,
+	return /* @__PURE__ */ u(S.Provider, {
+		value: B,
 		children: /* @__PURE__ */ u(p, {
-			ref: b,
+			ref: v,
 			...g,
-			...H,
+			...V,
 			children: h
 		})
 	});
 }
 function M() {
-	let e = n(x);
+	let e = n(S);
 	if (!e) throw Error("useTheme() needs a <ThemeProvider> above it");
 	return e;
 }
@@ -839,14 +839,14 @@ function z(e) {
 function B(e, t, n = P) {
 	return n[t]?.[e] ? [n[t][e], t] : n.lucide?.[e] ? [n.lucide[e], "lucide"] : [null, null];
 }
-var V = /* @__PURE__ */ new Map(), H = /<script|\son\w+\s*=|\shref\s*=|<foreignObject/i, ee = (e, t) => {
+var V = /* @__PURE__ */ new Map(), H = /<script|\son\w+\s*=|\shref\s*=|<foreignObject/i, U = (e, t) => {
 	let n = e.glyphs;
 	if (n[t]) return [n[t], t];
 	if (n.lucide) return [n.lucide, "lucide"];
 	let r = Object.keys(N).find((e) => n[e]);
 	return r ? [n[r], r] : [null, null];
 };
-function te(...e) {
+function W(...e) {
 	let t = [];
 	for (let n of e.flat()) {
 		if (!(n && typeof n.name == "string" && n.glyphs && Object.keys(n.glyphs).length > 0 && Object.keys(n.glyphs).every((e) => N[e]))) throw Error(`@ux-builder/ui registerIcons: an icon is { name, glyphs: { ${Object.keys(N).join(" | ")}: { viewBox, body } } }`);
@@ -855,17 +855,17 @@ function te(...e) {
 	}
 	return t;
 }
-var ne = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), U = Object.fromEntries(Object.entries(N).map(([e, t]) => [e, Object.fromEntries(Object.entries(t.svg).map(([e, t]) => [ne(e), t]))])), W = typeof window > "u" ? r : a;
+var te = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), ne = Object.fromEntries(Object.entries(N).map(([e, t]) => [e, Object.fromEntries(Object.entries(t.svg).map(([e, t]) => [te(e), t]))])), re = typeof window > "u" ? r : a;
 function G({ name: e, icon: t, set: r, size: i = "1em", label: a, className: o = "", ...l }) {
-	let d = n(x), f = s(null), [p, m] = c(null), [h, g] = c(null);
-	W(() => {
+	let d = n(S), f = s(null), [p, m] = c(null), [h, g] = c(null);
+	re(() => {
 		if (r || !f.current) return;
 		let e = getComputedStyle(f.current).getPropertyValue("--piq-icon-set").trim().replace(/^["']|["']$/g, "");
 		g(P[e] ? e : null), d?.theme || m(f.current.closest?.("[data-theme]")?.getAttribute("data-theme") ?? null);
 	});
-	let _ = r ?? h ?? z(d?.theme ?? p), v = t ?? (P.lucide[e] ? null : V.get(e)), [y, b] = v ? ee(v, _) : B(e, _);
+	let _ = r ?? h ?? z(d?.theme ?? p), v = t ?? (P.lucide[e] ? null : V.get(e)), [y, b] = v ? U(v, _) : B(e, _);
 	if (!y) return R && console.warn(`@ux-builder/ui Icon: no icon "${e}". Shared names: ${L.join(", ")}. Every Lucide icon is in @ux-builder/ui/icons: import it (e.g. import { iconPin } from "@ux-builder/ui/icons") and pass icon={iconPin}, or registerIcons(iconPin) once.`), null;
-	let S = a ? {
+	let x = a ? {
 		role: "img",
 		"aria-label": a
 	} : {
@@ -881,17 +881,17 @@ function G({ name: e, icon: t, set: r, size: i = "1em", label: a, className: o =
 		className: `piq-icon${o ? ` ${o}` : ""}`,
 		"data-icon": v?.name ?? e,
 		"data-icon-set": b,
-		...U[b],
-		...S,
+		...ne[b],
+		...x,
 		...l,
 		dangerouslySetInnerHTML: { __html: y.body }
 	});
 }
 //#endregion
 //#region src/widgets/Loading.jsx
-var re = (e, t, n) => Math.min(n, Math.max(t, e)), K = (e) => typeof e == "number" ? `${e}px` : e;
-function ie({ label: e, value: t, max: n = 100, valueText: r, showValue: a = !1, hideLabel: o = !1, className: s = "", ...c }) {
-	let l = i(), f = n > 0 ? n : 100, p = typeof t == "number" && Number.isFinite(t), m = p ? re(t, 0, f) : null, h = p ? Math.round(m / f * 100) : null;
+var ie = (e, t, n) => Math.min(n, Math.max(t, e)), K = (e) => typeof e == "number" ? `${e}px` : e;
+function ae({ label: e, value: t, max: n = 100, valueText: r, showValue: a = !1, hideLabel: o = !1, className: s = "", ...c }) {
+	let l = i(), f = n > 0 ? n : 100, p = typeof t == "number" && Number.isFinite(t), m = p ? ie(t, 0, f) : null, h = p ? Math.round(m / f * 100) : null;
 	return /* @__PURE__ */ d("div", {
 		className: `piq-progress${p ? "" : " piq-progress--indeterminate"}${s ? ` ${s}` : ""}`,
 		...c,
@@ -943,7 +943,7 @@ function q() {
 		})]
 	});
 }
-function ae({ size: e = "md", label: t = "Loading", showLabel: n = !1, className: r = "", ...i }) {
+function oe({ size: e = "md", label: t = "Loading", showLabel: n = !1, className: r = "", ...i }) {
 	return /* @__PURE__ */ d("span", {
 		className: `piq-spinner piq-spinner--${e}${r ? ` ${r}` : ""}`,
 		role: "status",
@@ -954,7 +954,7 @@ function ae({ size: e = "md", label: t = "Loading", showLabel: n = !1, className
 		})]
 	});
 }
-function oe({ variant: e = "text", lines: t = 1, width: n, height: r, className: i = "", style: a, ...o }) {
+function se({ variant: e = "text", lines: t = 1, width: n, height: r, className: i = "", style: a, ...o }) {
 	let s = `piq-skeleton piq-skeleton--${e}${i ? ` ${i}` : ""}`;
 	if (e === "text") {
 		let e = Math.max(1, Math.floor(t));
@@ -988,13 +988,13 @@ function oe({ variant: e = "text", lines: t = 1, width: n, height: r, className:
 }
 //#endregion
 //#region src/widgets/Button.jsx
-var se = {
+var ce = {
 	primary: "",
 	secondary: " piq-btn--secondary",
 	text: " piq-btn--text"
 };
 function J({ variant: e = "primary", size: t, badge: n, busy: r = !1, type: i = "button", className: a = "", onClick: o, children: s, ...c }) {
-	let f = `piq-btn${se[e] ?? ""}${t === "sm" ? " piq-btn--sm" : ""}${r ? " piq-btn--busy" : ""}${a ? ` ${a}` : ""}`, p = /* @__PURE__ */ d(l, { children: [s, n != null && /* @__PURE__ */ u("span", {
+	let f = `piq-btn${ce[e] ?? ""}${t === "sm" ? " piq-btn--sm" : ""}${r ? " piq-btn--busy" : ""}${a ? ` ${a}` : ""}`, p = /* @__PURE__ */ d(l, { children: [s, n != null && /* @__PURE__ */ u("span", {
 		className: "piq-btn__badge",
 		children: n
 	})] });
@@ -1022,7 +1022,7 @@ function J({ variant: e = "primary", size: t, badge: n, busy: r = !1, type: i =
 }
 //#endregion
 //#region src/widgets/Choice.jsx
-function ce({ label: e, className: t = "", ...n }) {
+function le({ label: e, className: t = "", ...n }) {
 	return /* @__PURE__ */ d("label", {
 		className: `piq-check${t ? ` ${t}` : ""}`,
 		children: [/* @__PURE__ */ u("input", {
@@ -1032,7 +1032,7 @@ function ce({ label: e, className: t = "", ...n }) {
 		}), /* @__PURE__ */ u("span", { children: e })]
 	});
 }
-function le({ label: e, className: t = "", ...n }) {
+function ue({ label: e, className: t = "", ...n }) {
 	return /* @__PURE__ */ d("label", {
 		className: `piq-check piq-switch${t ? ` ${t}` : ""}`,
 		children: [/* @__PURE__ */ u("input", {
@@ -1043,7 +1043,7 @@ function le({ label: e, className: t = "", ...n }) {
 		}), /* @__PURE__ */ u("span", { children: e })]
 	});
 }
-function ue({ label: e, options: t, name: n, value: r, defaultValue: a, onChange: o, disabled: s }) {
+function de({ label: e, options: t, name: n, value: r, defaultValue: a, onChange: o, disabled: s }) {
 	let c = i(), l = n ?? c;
 	return /* @__PURE__ */ d("fieldset", {
 		className: "piq-radios",
@@ -1112,7 +1112,7 @@ function X({ label: e, hint: t, error: n, id: r, className: i = "", ...a }) {
 		})
 	});
 }
-function de({ label: e, hint: t, error: n, id: r, className: i = "", rows: a = 4, ...o }) {
+function fe({ label: e, hint: t, error: n, id: r, className: i = "", rows: a = 4, ...o }) {
 	return /* @__PURE__ */ u(Y, {
 		label: e,
 		hint: t,
@@ -1169,7 +1169,7 @@ function Q({ label: e, value: t, onChange: n, min: r, max: i, hint: a, error: o,
 		onChange: (e) => n?.(e.target.value)
 	});
 }
-function fe({ label: e, from: t, to: n, onChange: r, min: a, max: o, fromLabel: s = "From", toLabel: c = "To", className: l }) {
+function pe({ label: e, from: t, to: n, onChange: r, min: a, max: o, fromLabel: s = "From", toLabel: c = "To", className: l }) {
 	let f = i();
 	return /* @__PURE__ */ d("fieldset", {
 		className: `piq-date-range${l ? ` ${l}` : ""}`,
@@ -1215,7 +1215,7 @@ function $(e, t) {
 }
 //#endregion
 //#region src/widgets/Dialog.jsx
-function pe({ open: e = !1, onClose: t, title: n, description: r, actions: a, closeLabel: o = "Close", initialFocus: s, role: c, className: l, children: f, ...p }) {
+function me({ open: e = !1, onClose: t, title: n, description: r, actions: a, closeLabel: o = "Close", initialFocus: s, role: c, className: l, children: f, ...p }) {
 	let m = $(e, s), h = i(), g = i();
 	return /* @__PURE__ */ d("dialog", {
 		ref: m,
@@ -1260,7 +1260,7 @@ function pe({ open: e = !1, onClose: t, title: n, description: r, actions: a, cl
 }
 //#endregion
 //#region src/widgets/MenuButton.jsx
-function me({ label: e, items: t = [], icon: n, variant: a = "secondary", size: o, align: l = "start", buttonLabel: f, className: p, ...m }) {
+function he({ label: e, items: t = [], icon: n, variant: a = "secondary", size: o, align: l = "start", buttonLabel: f, className: p, ...m }) {
 	let [h, g] = c(!1), [_, v] = c(-1), y = s(null), b = s(null), x = i(), S = t.map((e, t) => e.disabled ? -1 : t).filter((e) => e >= 0), C = (e) => {
 		g(!0), v(e === "last" ? S.at(-1) : S[0]);
 	}, w = (e = !0) => {
@@ -1360,7 +1360,7 @@ function me({ label: e, items: t = [], icon: n, variant: a = "secondary", size:
 }
 //#endregion
 //#region src/widgets/Pagination.jsx
-function he({ page: e = 1, pageSize: t = 20, total: n = 0, onPageChange: r, pageSizes: i = [
+function ge({ page: e = 1, pageSize: t = 20, total: n = 0, onPageChange: r, pageSizes: i = [
 	10,
 	20,
 	50,
@@ -1409,7 +1409,7 @@ function he({ page: e = 1, pageSize: t = 20, total: n = 0, onPageChange: r, page
 }
 //#endregion
 //#region src/widgets/Sheet.jsx
-function ge({ open: e = !1, onClose: t, title: n, label: r, side: a = "start", closeLabel: o = "Close", initialFocus: s, className: c, children: l, ...f }) {
+function _e({ open: e = !1, onClose: t, title: n, label: r, side: a = "start", closeLabel: o = "Close", initialFocus: s, className: c, children: l, ...f }) {
 	let p = $(e, s), m = i();
 	return /* @__PURE__ */ u("dialog", {
 		ref: p,
@@ -1445,7 +1445,7 @@ function ge({ open: e = !1, onClose: t, title: n, label: r, side: a = "start", c
 }
 //#endregion
 //#region src/widgets/Tabs.jsx
-function _e({ tabs: e = [], value: t, defaultValue: n, onChange: r, label: a, className: o, ...l }) {
+function ve({ tabs: e = [], value: t, defaultValue: n, onChange: r, label: a, className: o, ...l }) {
 	let [f, p] = c(n ?? e[0]?.id), m = t ?? f, h = i(), g = s(null);
 	function _(e, n) {
 		t === void 0 && p(e), e !== m && r?.(e), n && [...g.current?.querySelectorAll("[role=\"tab\"]") ?? []].find((t) => t.dataset.tab === String(e))?.focus();
@@ -1496,6 +1496,6 @@ function _e({ tabs: e = [], value: t, defaultValue: n, onChange: r, label: a, cl
 	});
 }
 //#endregion
-export { p as A, te as C, M as D, O as E, b as O, B as S, j as T, oe as _, pe as a, G as b, Y as c, X as d, ce as f, ie as g, J as h, me as i, f as j, v as k, Z as l, le as m, ge as n, Q as o, ue as p, he as r, fe as s, _e as t, de as u, ae as v, x as w, z as x, L as y };
+export { p as A, W as C, M as D, k as E, x as O, B as S, j as T, se as _, me as a, G as b, Y as c, X as d, le as f, ae as g, J as h, he as i, f as j, y as k, Z as l, ue as m, _e as n, Q as o, de as p, ge as r, pe as s, ve as t, fe as u, oe as v, S as w, z as x, L as y };
 
-//# sourceMappingURL=shared-CjrUPFqv.js.map
+//# sourceMappingURL=shared-CAXoQbx9.js.map