@jfrader/ui 0.3.0 → 0.5.0

package/dist/date-range-picker-B5uFWsm-.js

@@ -0,0 +1,562 @@
+'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 { n as ee } from "./roving-focus-CYlo_Kf8.js";
+import { t as te } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { t as o } from "./button-C92uYFJW.js";
+import { n as s } from "./surface-DZ4d-2aL.js";
+import { n as c, r as l } from "./overlay-layer-SeUyyEPD.js";
+import { a as u, c as d, d as f, f as p, i as m, l as h, n as g, o as _, r as v, s as y, t as b, u as x } from "./calendar-B3Svu0X2.js";
+import { t as ne } from "./overlay-portal-C4JZFq2M.js";
+import { t as re } from "./use-overlay-floating-DvJifLpF.js";
+import { createContext as S, useCallback as ie, useContext as C, useEffect as ae, useId as oe, useLayoutEffect as se, useMemo as w, useRef as T, useState as E } from "react";
+import { vars as D } from "@jfrader/tokens/vars";
+import { Fragment as O, jsx as k, jsxs as A } from "@emotion/react/jsx-runtime";
+import { FloatingFocusManager as j, useClick as M, useInteractions as N, useMergeRefs as ce, useRole as P } from "@floating-ui/react";
+//#region src/components/date-range-picker/date-range-picker.tsx
+var F = "bottom-start", I = 712, L = 864e5, le = /* @__PURE__ */ new Set(["Enter", "ArrowDown"]), ue = " ", R = "[data-ui=\"calendar-day\"]", z = `${R}[tabindex="0"]`, B = {
+	itemSelector: "[data-ui=\"date-range-picker-preset\"]:not([aria-disabled=\"true\"])",
+	ownerSelector: "[data-ui=\"date-range-picker-presets\"]"
+}, de = [], fe = {
+	...g,
+	dateStyle: "medium"
+}, V = S(null);
+function H(e) {
+	let t = C(V);
+	if (!t) throw Error(`DateRangePicker.${e} must be rendered inside <DateRangePicker>.`);
+	return t;
+}
+var pe = (e) => e != null && d(e.start) && d(e.end) && e.start <= e.end, me = (e, t, n) => pe(e) && h(e.start, t, n) && h(e.end, t, n), he = (e, t) => e === t || e !== null && t !== null && e.start === t.start && e.end === t.end, U = (e, t) => e <= t ? {
+	start: e,
+	end: t
+} : {
+	start: t,
+	end: e
+}, W = ({ start: e, end: t }) => Math.round((m(t).getTime() - m(e).getTime()) / L) + 1;
+function ge() {
+	let e = /* @__PURE__ */ new Date();
+	return x(u(e.getFullYear(), e.getMonth(), e.getDate()));
+}
+var _e = (e, { start: t, end: n }) => e.formatRange(m(t), m(n)), G = (e) => {
+	let t = e?.querySelector(z) ?? null;
+	return t?.focus({ preventScroll: !0 }), t;
+}, K = e({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	gap: D.space[2],
+	boxSizing: "border-box",
+	maxInlineSize: "100%",
+	border: `1px solid ${D.color.borderControl}`,
+	borderRadius: D.radius.md,
+	backgroundColor: D.color.surfaceRaised,
+	font: "inherit",
+	fontWeight: D.fontWeight.medium,
+	color: D.color.text,
+	textAlign: "start",
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: D.motion.duration.fast,
+	transitionTimingFunction: D.motion.easeStandard,
+	"&:hover:not(:disabled)": { backgroundColor: D.color.surfaceHover },
+	"&:focus-visible": { ...n },
+	"&[aria-invalid=\"true\"]:not(:focus-visible)": { borderColor: D.color.dangerText },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[i]: { transitionDuration: "0s" }
+}), q = {
+	sm: e({
+		minBlockSize: D.space[8],
+		paddingInline: D.space[3],
+		fontSize: D.textSize.sm
+	}),
+	md: e({
+		minBlockSize: D.space[10],
+		paddingInline: D.space[4],
+		fontSize: D.textSize.sm
+	}),
+	lg: e({
+		minBlockSize: D.space[12],
+		paddingInline: D.space[4],
+		fontSize: D.textSize.md
+	})
+}, J = e({
+	display: "inline-flex",
+	flexShrink: 0,
+	color: D.color.textMuted,
+	"& > svg": {
+		inlineSize: "1em",
+		blockSize: "1em"
+	}
+}), Y = e({ color: D.color.textMuted }), X = e({
+	display: "block",
+	marginBlockStart: D.space[2],
+	fontSize: D.textSize.xs,
+	color: D.color.dangerText
+}), ve = e({
+	...s,
+	display: "grid",
+	gap: D.space[4],
+	borderRadius: D.radius.lg,
+	boxShadow: D.shadow.overlay,
+	padding: D.space[4],
+	overflow: "auto",
+	"&[data-layout=\"rail\"]": { gridTemplateColumns: "auto 1fr" },
+	[r]: { border: "1px solid CanvasText" }
+}), ye = e({
+	display: "flex",
+	gap: D.space[2],
+	"[data-layout=\"row\"] > &": {
+		overflowX: "auto",
+		paddingBlock: D.space[1]
+	},
+	"[data-layout=\"rail\"] > &": {
+		flexDirection: "column",
+		gridRow: "1 / span 2",
+		paddingInlineEnd: D.space[4],
+		borderInlineEnd: `1px solid ${D.color.border}`
+	}
+}), be = e({
+	appearance: "none",
+	flexShrink: 0,
+	minBlockSize: D.space[8],
+	paddingInline: D.space[3],
+	border: "1px solid transparent",
+	borderRadius: D.radius.md,
+	backgroundColor: "transparent",
+	font: "inherit",
+	fontSize: D.textSize.sm,
+	color: D.color.text,
+	textAlign: "start",
+	whiteSpace: "nowrap",
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: D.motion.duration.fast,
+	transitionTimingFunction: D.motion.easeStandard,
+	"&:hover:not([aria-disabled=\"true\"])": { backgroundColor: D.color.surfaceHover },
+	"&[aria-pressed=\"true\"]": {
+		backgroundColor: D.color.accentSoft,
+		borderColor: D.color.accentBorder
+	},
+	"&[aria-disabled=\"true\"]": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&:focus-visible": { ...n },
+	[i]: { transitionDuration: "0s" },
+	[r]: { "&[aria-pressed=\"true\"]": { borderColor: "Highlight" } }
+}), xe = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "flex-start",
+	gap: D.space[6]
+}), Se = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: D.space[3],
+	"[data-layout=\"rail\"] > &": { gridColumn: 2 }
+}), Ce = e({
+	fontSize: D.textSize.sm,
+	color: D.color.textMuted
+}), we = e({
+	display: "flex",
+	gap: D.space[2],
+	marginInlineStart: "auto"
+});
+function Z({ nodeId: e, value: t, defaultValue: n, onValueChange: r, open: i, defaultOpen: ee = !1, onOpenChange: a, min: o, max: s, locale: c, firstDayOfWeek: u, today: f, months: p = "auto", boundary: m, presets: h = de, disabled: v = !1, readOnly: y = !1, required: b = !1, startName: x, endName: ne, messages: S, children: ie }) {
+	let [C = null, oe, se] = te(t, n ?? null, r), [D = !1, O] = te(i, ee, a), j = D && !v, [ce, I] = E(null), [L, le] = E(null), ue = T(null), R = T(!1), z = T(null), B = w(() => new Intl.DateTimeFormat(c ?? _(), g).resolvedOptions().locale, [c]), H = w(() => new Intl.DateTimeFormat(B, fe), [B]), U = pe(C) ? C : null, W = d(o) ? o : void 0, G = d(s) ? s : void 0, K = C !== null && U === null || W !== void 0 && G !== void 0 && W > G, q = d(f) ? f : ge(), { refs: J, floatingStyles: Y, context: X } = re({
+		open: j,
+		placement: F,
+		nodeId: e,
+		boundary: m,
+		onAvailableSize: (e) => le((t) => t?.width === e.width && t.height === e.height ? t : e),
+		onOpenChange: (e, t, n) => {
+			if (v && e) return;
+			let r = z.current;
+			z.current = n === "outside-press" && t?.target instanceof Element ? t.target : null;
+			let i = n === "focus-out" && t instanceof FocusEvent ? t.relatedTarget : null;
+			r && i instanceof Node && i.contains(r) || (e || (R.current = n === "escape-key"), O(e));
+		}
+	});
+	ae(() => {
+		!j && R.current && (R.current = !1, J.domReference.current?.focus());
+	}, [j, J]);
+	let ve = M(X, {
+		enabled: !v,
+		keyboardHandlers: !1
+	}), ye = l(X, "container"), be = P(X, { role: "dialog" }), { getReferenceProps: xe, getFloatingProps: Se } = N([
+		ve,
+		...ye,
+		be
+	]), Ce = w(() => U ? _e(H, U) : void 0, [H, U]), we = w(() => {
+		let e = (e) => {
+			he(e, C) || oe(e);
+		};
+		return {
+			open: j,
+			disabled: v,
+			readOnly: y,
+			required: b,
+			invalid: K,
+			value: U,
+			displayValue: Ce,
+			min: W,
+			max: G,
+			locale: B,
+			firstDayOfWeek: u,
+			today: q,
+			months: p,
+			presets: h,
+			messages: S,
+			availableSize: L,
+			triggerLabelling: ce,
+			contentRef: ue,
+			refs: J,
+			floatingContext: X,
+			floatingStyles: Y,
+			getReferenceProps: xe,
+			getFloatingProps: Se,
+			requestOpen: () => {
+				v || O(!0);
+			},
+			apply: (t) => {
+				v || y || !me(t, W, G) || (e(t), R.current = !0, O(!1));
+			},
+			cancel: () => {
+				R.current = !0, O(!1);
+			},
+			resetValue: () => {
+				t === void 0 ? se() : e(n ?? null);
+			},
+			setTriggerLabelling: I
+		};
+	}, [
+		j,
+		v,
+		y,
+		b,
+		K,
+		C,
+		U,
+		Ce,
+		W,
+		G,
+		B,
+		u,
+		q,
+		p,
+		h,
+		S,
+		L,
+		ce,
+		J,
+		X,
+		Y,
+		xe,
+		Se,
+		oe,
+		O,
+		se,
+		t,
+		n
+	]);
+	return /* @__PURE__ */ A(V.Provider, {
+		value: we,
+		children: [
+			ie,
+			x !== void 0 && /* @__PURE__ */ k("input", {
+				type: "hidden",
+				name: x,
+				value: U?.start ?? "",
+				disabled: v
+			}),
+			ne !== void 0 && /* @__PURE__ */ k("input", {
+				type: "hidden",
+				name: ne,
+				value: U?.end ?? "",
+				disabled: v
+			})
+		]
+	});
+}
+function Te(e) {
+	return /* @__PURE__ */ k(c, { children: (t) => /* @__PURE__ */ k(Z, {
+		...e,
+		nodeId: t
+	}) });
+}
+Te.displayName = "DateRangePicker";
+function Ee({ ref: e, id: n, size: r = "md", icon: i, placeholder: ee, className: te, sx: o, onKeyDown: s, onKeyUp: c, "aria-label": l, "aria-labelledby": u, "aria-describedby": d, "aria-invalid": f, ...p }) {
+	let { open: m, disabled: h, readOnly: g, required: _, invalid: v, displayValue: y, messages: b, contentRef: x, refs: ne, getReferenceProps: re, requestOpen: S, resetValue: ie, setTriggerLabelling: C } = H("Trigger"), w = T(null), E = ce([
+		ne.setReference,
+		e,
+		w
+	]), D = oe(), j = n ?? D, M = `${j}-value`, N = `${j}-required`, P = `${j}-error`, F = _ && a(b.required), I = v || f, L = (I === !0 || I === "true") && a(b.error);
+	se(() => (C(u === void 0 ? l === void 0 ? null : { label: l } : { labelledBy: u }), () => C(null)), [
+		u,
+		l,
+		C
+	]);
+	let R = T(ie);
+	ae(() => {
+		R.current = ie;
+	}), ae(() => {
+		let e = w.current?.form;
+		if (!e) return;
+		let t = () => R.current();
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, []);
+	let z = u ?? (l === void 0 ? void 0 : j), B = z === void 0 ? void 0 : [
+		z,
+		M,
+		F ? N : void 0
+	].filter(Boolean).join(" "), de = [d, L ? P : void 0].filter(Boolean).join(" ") || void 0, fe = () => {
+		h || (m ? G(x.current) : S());
+	}, V = (e) => {
+		s?.(e), !(e.defaultPrevented || h) && (e.key === ue ? e.preventDefault() : le.has(e.key) && (e.preventDefault(), fe()));
+	}, pe = (e) => {
+		c?.(e), !(e.defaultPrevented || h || e.key !== ue) && fe();
+	};
+	return /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(t, {
+		className: te,
+		styles: [K, q[r]],
+		sx: o,
+		children: (e) => /* @__PURE__ */ A("button", {
+			type: "button",
+			...re({
+				...p,
+				onKeyDown: V,
+				onKeyUp: pe
+			}),
+			ref: E,
+			id: j,
+			disabled: h,
+			"aria-label": l,
+			"aria-labelledby": B,
+			"aria-describedby": de,
+			"aria-invalid": I,
+			"data-ui": "date-range-picker",
+			"data-state": m ? "open" : "closed",
+			"data-size": r,
+			"data-readonly": g || void 0,
+			"data-required": _ || void 0,
+			className: e,
+			children: [
+				a(i) && /* @__PURE__ */ k("span", {
+					"aria-hidden": "true",
+					css: J,
+					children: i
+				}),
+				y === void 0 ? /* @__PURE__ */ k("span", {
+					id: M,
+					"data-placeholder": "",
+					css: Y,
+					children: ee
+				}) : /* @__PURE__ */ k("span", {
+					id: M,
+					children: y
+				}),
+				F && /* @__PURE__ */ k("span", {
+					id: N,
+					hidden: !0,
+					children: b.required
+				})
+			]
+		})
+	}), L && /* @__PURE__ */ k("span", {
+		id: P,
+		role: "alert",
+		"data-ui": "date-range-picker-error",
+		css: X,
+		children: b.error
+	})] });
+}
+Ee.displayName = "DateRangePicker.Trigger";
+function Q(e) {
+	let { open: t } = H("Content");
+	return t ? /* @__PURE__ */ k(De, { ...e }) : null;
+}
+Q.displayName = "DateRangePicker.Content";
+function De({ ref: e, dir: n, style: r, className: i, sx: te, slotProps: a, "aria-label": s, "aria-labelledby": c, "aria-describedby": l, ...u }) {
+	let { readOnly: d, value: m, min: g, max: _, locale: x, firstDayOfWeek: re, today: S, months: C, presets: D, messages: O, availableSize: M, triggerLabelling: N, contentRef: P, refs: F, floatingContext: L, floatingStyles: le, getFloatingProps: ue, apply: z, cancel: de } = H("Content"), V = oe(), pe = w(() => new Intl.DateTimeFormat(x, fe), [x]), ge = w(() => new Intl.NumberFormat(x), [x]), K = (e) => e != null && h(e, g, _), q = g === void 0 || _ === void 0 || g <= _ ? K(m?.start) ? m.start : v(_ !== void 0 && S > _ ? y(f(_)) : S, g, _) : null, [J, Y] = E(m), [X, Z] = E(!1), [Te, Ee] = E(m);
+	he(Te, m) || (Ee(m), Y(m), Z(!1));
+	let [Q, De] = E(q), [Oe, ke] = E(null), [Ae, je] = E(null), Me = T(null), Ne = M?.width ?? F.domReference.current?.ownerDocument.documentElement.clientWidth ?? 0, $ = C === "auto" ? Ne >= I ? 2 : 1 : C, [Pe, Fe] = E(f(q ?? v(S, g, void 0))), Ie = Array.from({ length: $ }, (e, t) => p(Pe, t)), Le = Ie[Ie.length - 1] ?? Pe, Re = (e) => f(e) >= Pe && f(e) <= Le, ze = (e, t = $) => {
+		let n = f(e);
+		n < Pe ? Fe(n) : n > p(Pe, t - 1) && Fe(p(n, 1 - t));
+	}, [Be, Ve] = E($);
+	Be !== $ && (Ve($), Q !== null && ze(Q, $));
+	let He = [
+		Q,
+		J?.start,
+		S
+	].find((e) => K(e) && Re(e)) ?? Ie.map((e) => v(y(e), g, _)).find((e) => Re(e) && K(e)) ?? null, Ue = Oe ?? Q, We = X && J && K(Ue) ? U(J.start, Ue) : null, Ge = We ?? J;
+	ae(() => {
+		let e = Me.current;
+		if (e === null) return;
+		Me.current = null;
+		let t = P.current?.querySelector(`${R}[data-date="${e}"]`);
+		t && t.ownerDocument.activeElement !== t && t.focus();
+	});
+	let Ke = (e) => {
+		De(e), ke(null), ze(e);
+		let t = P.current?.ownerDocument.activeElement;
+		Me.current = t instanceof HTMLElement && t.dataset.date === e ? null : e;
+	}, qe = (e) => {
+		d || (X && J ? (Y(U(J.start, e)), Z(!1)) : (Y({
+			start: e,
+			end: e
+		}), Z(!0)));
+	}, Je = (e) => {
+		let t = e.target.closest(R);
+		ke(t && !t.disabled ? t.dataset.date ?? null : null);
+	}, Ye = D.map((e) => {
+		let t = e.range(S);
+		return {
+			preset: e,
+			range: t,
+			enabled: !d && me(t, g, _)
+		};
+	}), Xe = Ye.find((e) => e.enabled && e.preset.id === Ae) ?? Ye.find((e) => e.enabled), Ze = (e) => {
+		Y(e), Z(!1), De(e.start), ze(e.start);
+	}, Qe = T(null), $e = ie((e) => {
+		P.current = e, e && !Qe.current && (Qe.current = G(e));
+	}, [P]), et = ce([
+		F.setFloating,
+		e,
+		$e
+	]), tt = L.elements.domReference, [nt, rt] = E();
+	se(() => {
+		rt(tt?.ownerDocument.defaultView?.getComputedStyle(tt).direction);
+	}, [tt]);
+	let it = c !== void 0 || s !== void 0 ? {
+		"aria-labelledby": c,
+		"aria-label": s
+	} : N?.labelledBy === void 0 ? { "aria-label": N?.label } : { "aria-labelledby": N.labelledBy }, at = $ === 2 ? "rail" : "row", ot = !d && me(J, g, _);
+	return /* @__PURE__ */ k(ne, { children: /* @__PURE__ */ k(j, {
+		context: L,
+		modal: !1,
+		initialFocus: Qe,
+		returnFocus: !1,
+		children: /* @__PURE__ */ k(t, {
+			className: i,
+			styles: ve,
+			sx: te,
+			children: (e) => /* @__PURE__ */ A("div", {
+				...ue({
+					...it,
+					"aria-describedby": [l, V].filter(Boolean).join(" "),
+					...u
+				}),
+				ref: et,
+				dir: n ?? nt,
+				"data-ui": "date-range-picker-content",
+				"data-layout": at,
+				style: {
+					...r,
+					...le,
+					...M && {
+						maxInlineSize: M.width,
+						maxBlockSize: M.height
+					}
+				},
+				className: e,
+				children: [
+					Ye.length > 0 && /* @__PURE__ */ k("div", {
+						role: "group",
+						"aria-label": O.presets,
+						"data-ui": "date-range-picker-presets",
+						className: a?.presets?.className,
+						css: [ye, a?.presets?.css],
+						onKeyDown: (e) => ee(e, e.currentTarget, at === "rail" ? "vertical" : "horizontal", B),
+						children: Ye.map(({ preset: e, range: t, enabled: n }) => /* @__PURE__ */ k("button", {
+							type: "button",
+							"data-ui": "date-range-picker-preset",
+							"aria-disabled": !n || void 0,
+							"aria-pressed": n && he(t, J) && !X,
+							tabIndex: e === Xe?.preset ? 0 : -1,
+							onFocus: () => je(e.id),
+							onClick: () => {
+								n && Ze(t);
+							},
+							css: be,
+							children: e.label
+						}, e.id))
+					}),
+					/* @__PURE__ */ k("div", {
+						"data-ui": "date-range-picker-calendars",
+						className: a?.calendars?.className,
+						css: [xe, a?.calendars?.css],
+						children: Ie.map((e, t) => /* @__PURE__ */ A(b, {
+							visibleMonth: e,
+							onVisibleMonthChange: (e) => Fe(p(e, -t)),
+							min: g,
+							max: _,
+							locale: x,
+							firstDayOfWeek: re,
+							today: S,
+							selectionRange: J,
+							previewRange: We,
+							tabStopDate: He !== null && f(He) === e ? He : null,
+							onDayActivate: qe,
+							onFocusedDateChange: Ke,
+							rangeLabels: {
+								start: O.start,
+								end: O.end
+							},
+							children: [/* @__PURE__ */ k(b.Header, {}), /* @__PURE__ */ k(b.Grid, {
+								onPointerMove: Je,
+								onPointerLeave: () => ke(null)
+							})]
+						}, t))
+					}),
+					/* @__PURE__ */ A("div", {
+						"data-ui": "date-range-picker-footer",
+						css: Se,
+						children: [/* @__PURE__ */ k("span", {
+							id: V,
+							role: "status",
+							"data-ui": "date-range-picker-summary",
+							className: a?.summary?.className,
+							css: [Ce, a?.summary?.css],
+							children: Ge ? O.summary({
+								range: _e(pe, Ge),
+								days: W(Ge),
+								formattedDays: ge.format(W(Ge))
+							}) : O.empty
+						}), /* @__PURE__ */ A("div", {
+							"data-ui": "date-range-picker-actions",
+							className: a?.actions?.className,
+							css: [we, a?.actions?.css],
+							children: [/* @__PURE__ */ k(o, {
+								variant: "ghost",
+								size: "sm",
+								onClick: de,
+								children: O.cancel
+							}), /* @__PURE__ */ k(o, {
+								tone: "accent",
+								size: "sm",
+								disabled: !ot,
+								onClick: () => {
+									ot && z(J);
+								},
+								children: O.apply
+							})]
+						})]
+					})
+				]
+			})
+		})
+	}) });
+}
+var Oe = Object.assign(Te, {
+	Trigger: Ee,
+	Content: Q
+});
+//#endregion
+export { Oe as t };

package/dist/date-range-picker.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as DateRangePicker } from "./date-range-picker-B5uFWsm-.js";

package/dist/{dialog-xaydbXl2.js → dialog-ciiv9H2b.js}

@@ -1,11 +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-D_eA_I-e.js";
-import { t as i } from "./use-controlled-state-CVXDa-qM.js";
-import { t as a } from "./trigger-style-B1KVC8O1.js";
-import { i as o, n as s, r as c, t as l } from "./use-native-dialog-DWpIUVO1.js";
-import { n as u, t as d } from "./surface-DZ4d-2aL.js";
+import { r } from "./media-8yrN85VT.js";
+import { t as i } from "./use-controlled-state-DpeVQZNR.js";
+import { n as a, t as o } from "./surface-DZ4d-2aL.js";
+import { t as s } from "./trigger-style-B1KVC8O1.js";
+import { i as c, n as l, r as u, t as d } from "./use-native-dialog-DWpIUVO1.js";
 import { createContext as f, useCallback as p, useContext as m, useEffect as h, useId as g, useMemo as _, useRef as v, useState as y } from "react";
 import { vars as b } from "@jfrader/tokens/vars";
 import { jsx as x } from "@emotion/react/jsx-runtime";
@@ -16,8 +16,8 @@ function w(e) {
 	if (!t) throw Error(`Dialog.${e} must be rendered inside <Dialog>.`);
 	return t;
 }
-var T = e(d), E = e({
-	...u,
+var T = e(o), E = e({
+	...a,
 	borderRadius: b.radius.lg,
 	boxShadow: b.shadow.floating,
 	padding: b.space[5],
@@ -63,8 +63,8 @@ var T = e(d), E = e({
 	[r]: { transitionDuration: "0s" }
 });
 function A({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
-	let a = g(), [s = !1, c] = i(e, t, n), { setDialogElement: l, setOpen: u, requestClose: d, repairToken: f } = o(s, c), [p, m] = y(!1), [h, v] = y(!1), b = _(() => ({
-		open: s,
+	let a = g(), [o = !1, s] = i(e, t, n), { setDialogElement: l, setOpen: u, requestClose: d, repairToken: f } = c(o, s), [p, m] = y(!1), [h, v] = y(!1), b = _(() => ({
+		open: o,
 		setOpen: u,
 		requestClose: d,
 		repairToken: f,
@@ -76,7 +76,7 @@ function A({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
 		setHasTitle: m,
 		setHasDescription: v
 	}), [
-		s,
+		o,
 		u,
 		d,
 		f,
@@ -91,8 +91,8 @@ function A({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
 	});
 }
 A.displayName = "Dialog";
-function j({ ref: e = null, onClick: n, render: r, className: i, sx: o, ...s }) {
-	let { open: c, setOpen: l } = w("Trigger"), { "data-ui": u, ...d } = s, f = n, p = (e) => {
+function j({ ref: e = null, onClick: n, render: r, className: i, sx: a, ...o }) {
+	let { open: c, setOpen: l } = w("Trigger"), { "data-ui": u, ...d } = o, f = n, p = (e) => {
 		f?.(e), e.defaultPrevented || l(!0);
 	}, m = {
 		type: "button",
@@ -105,8 +105,8 @@ function j({ ref: e = null, onClick: n, render: r, className: i, sx: o, ...s })
 	};
 	return /* @__PURE__ */ x(t, {
 		className: i,
-		styles: r ? void 0 : a,
-		sx: o,
+		styles: r ? void 0 : s,
+		sx: a,
 		children: (e) => r ? r({
 			...m,
 			className: e
@@ -118,15 +118,15 @@ function j({ ref: e = null, onClick: n, render: r, className: i, sx: o, ...s })
 }
 j.displayName = "Dialog.Trigger";
 function M({ ref: e, className: n, sx: r, ...i }) {
-	let { children: a, onCancel: o, onClick: u, onClose: d, "aria-labelledby": f, "aria-describedby": m, withDescription: h = !0, ...g } = l(i), _ = w("Content"), { setOpen: y, titleId: b, descriptionId: S, hasTitle: D, hasDescription: O } = _, k = v(null), A = p(() => {
-		s(k.current, y);
-	}, [y]), j = c({
+	let { children: a, onCancel: o, onClick: s, onClose: c, "aria-labelledby": f, "aria-describedby": m, withDescription: h = !0, ...g } = d(i), _ = w("Content"), { setOpen: y, titleId: b, descriptionId: S, hasTitle: D, hasDescription: O } = _, k = v(null), A = p(() => {
+		l(k.current, y);
+	}, [y]), j = u({
 		..._,
 		requestClose: A
 	}, {
 		onCancel: o,
-		onClick: u,
-		onClose: d
+		onClick: s,
+		onClose: c
 	}, e, k), M = [f, D && b].filter(Boolean).join(" ") || void 0, N = [m, h && O && S].filter(Boolean).join(" ") || void 0;
 	return /* @__PURE__ */ x(t, {
 		className: n,

package/dist/dialog.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Dialog } from "./dialog-xaydbXl2.js";
+export { t as Dialog } from "./dialog-ciiv9H2b.js";