@jfrader/ui 0.4.0 → 0.5.1

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

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

package/dist/{dialog-xaydbXl2.js → dialog-BX1zYMs-.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,12 +16,12 @@ 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],
-	minInlineSize: "320px",
+	minInlineSize: "min(320px, 100%)",
 	maxInlineSize: "min(560px, calc(100vw - 32px))"
 }), D = e({
 	margin: 0,
@@ -38,6 +38,7 @@ var T = e(d), E = e({
 	appearance: "none",
 	display: "inline-flex",
 	alignItems: "center",
+	minBlockSize: "32px",
 	border: "1px solid transparent",
 	borderRadius: b.radius.md,
 	backgroundColor: "transparent",
@@ -63,8 +64,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 +77,7 @@ function A({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
 		setHasTitle: m,
 		setHasDescription: v
 	}), [
-		s,
+		o,
 		u,
 		d,
 		f,
@@ -91,8 +92,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 +106,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 +119,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-BX1zYMs-.js";