@jfrader/ui 0.1.2 → 0.3.0

package/dist/command-palette-V_2pEay7.js

@@ -0,0 +1,379 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { t as r } from "./use-controlled-state-CVXDa-qM.js";
+import { t as i } from "./visually-hidden-BJdvqqvn.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { a as o, r as s, s as c, t as l } from "./collection-registry-BTYi6zGh.js";
+import { t as u } from "./trigger-style-B1KVC8O1.js";
+import { i as d, r as f, t as p } from "./use-native-dialog-DWpIUVO1.js";
+import { n as m, t as h } from "./surface-DZ4d-2aL.js";
+import { createContext as g, useCallback as _, useContext as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
+import { vars as C } from "@jfrader/tokens/vars";
+import { jsx as w, jsxs as T } from "@emotion/react/jsx-runtime";
+import { FloatingList as E, useFloatingRootContext as D, useInteractions as O, useListNavigation as ee, useMergeRefs as k } from "@floating-ui/react";
+//#region src/components/command-palette/command-palette.styles.ts
+var A = e({
+	...h,
+	marginBlockStart: C.space[12]
+}), j = e({
+	...m,
+	display: "flex",
+	flexDirection: "column",
+	borderRadius: C.radius.lg,
+	boxShadow: C.shadow.floating,
+	inlineSize: "min(560px, calc(100vw - 32px))"
+}), M = e({
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	blockSize: "48px",
+	margin: 0,
+	border: 0,
+	borderBlockEnd: `1px solid ${C.color.borderControl}`,
+	borderStartStartRadius: C.radius.lg,
+	borderStartEndRadius: C.radius.lg,
+	backgroundColor: "transparent",
+	paddingInline: C.space[4],
+	font: "inherit",
+	fontSize: C.textSize.md,
+	color: C.color.text,
+	"&::placeholder": { color: C.color.textSubtle },
+	"&:focus-visible": { ...n }
+}), N = e({
+	boxSizing: "border-box",
+	display: "flex",
+	flexDirection: "column",
+	maxBlockSize: "320px",
+	overflow: "auto",
+	padding: C.space[1],
+	"&[hidden]": { display: "none" }
+}), P = e({
+	display: "flex",
+	flexDirection: "column",
+	"&[hidden]": { display: "none" }
+}), F = e({
+	paddingBlock: C.space[1],
+	paddingInline: C.space[2],
+	fontSize: C.textSize.xs,
+	fontWeight: C.fontWeight.medium,
+	color: C.color.textMuted
+}), te = e({
+	"&:hover, &[data-active]": { backgroundColor: C.color.surfaceHover },
+	"&[hidden]": { display: "none" }
+}), I = e({
+	paddingBlock: C.space[6],
+	paddingInline: C.space[4],
+	textAlign: "center",
+	fontSize: C.textSize.sm,
+	color: C.color.textMuted
+}), ne = "Command palette", re = "No results", L = new Intl.PluralRules("en"), ie = (e, t) => e.toLocaleLowerCase().includes(t.toLocaleLowerCase()), ae = (e) => `${e} ${L.select(e) === "one" ? "result" : "results"}`, R = g(null), z = g(null);
+function B(e) {
+	let t = v(R);
+	if (!t) throw Error(`CommandPalette.${e} must be rendered inside <CommandPalette>.`);
+	return t;
+}
+var V = (e) => {
+	e?.setAttribute("autofocus", "");
+};
+function H({ open: e, defaultOpen: t = !1, onOpenChange: n, label: i = ne, filter: a = ie, emptyMessage: s = re, formatResultCount: c = ae, children: l }) {
+	let u = y(), [f = !1, p] = r(e, t, n), { dialogElementRef: m, setDialogElement: h, setOpen: g, requestClose: v, repairToken: C } = d(f, p), [T, E] = S(""), [k, A] = S(!1), [j, M] = S(null), [N, P] = o(), [F, te] = S(null), [I, L] = S(null), [z, B] = S(f), V = x([]);
+	f !== z && (B(f), f && (E(""), A(!1), M(null)));
+	let H = _(() => {
+		g(!(f && m.current?.open));
+	}, [
+		f,
+		g,
+		m
+	]), { matchedValues: U, matchedIndices: W, visibleGroupIds: G } = b(() => {
+		let e = /* @__PURE__ */ new Set(), t = [], n = /* @__PURE__ */ new Set();
+		return N.forEach((r, i) => {
+			r.index !== -1 && (T === "" || a(r.label, T) || r.keywords !== void 0 && a(r.keywords, T)) && (e.add(i), t.push(r.index), r.groupId !== null && n.add(r.groupId));
+		}), t.sort((e, t) => e - t), {
+			matchedValues: e,
+			matchedIndices: t,
+			visibleGroupIds: n
+		};
+	}, [
+		N,
+		T,
+		a
+	]), K = b(() => new Set(W), [W]), q = j !== null && K.has(j) ? j : W[0] ?? null, J = D({
+		open: f,
+		onOpenChange: (e) => g(e),
+		elements: {
+			reference: F,
+			floating: I
+		}
+	}), Y = ee(J, {
+		listRef: V,
+		activeIndex: q,
+		onNavigate: (e) => {
+			e !== null && M(e);
+		},
+		virtual: !0,
+		loop: !0,
+		focusItemOnOpen: !1,
+		disabledIndices: (e) => !K.has(e)
+	}), { getReferenceProps: X, getFloatingProps: Z, getItemProps: Q } = O([Y]), $ = W.length, oe = k ? c($) : "", se = b(() => ({
+		open: f,
+		setOpen: g,
+		toggleOpen: H,
+		requestClose: v,
+		repairToken: C,
+		setDialogElement: h,
+		label: i,
+		emptyMessage: s,
+		baseId: u,
+		listId: `${u}-list`,
+		query: T,
+		announcement: oe,
+		matchCount: $,
+		matchedValues: U,
+		visibleGroupIds: G,
+		activeIndex: q,
+		elementsRef: V,
+		setInputElement: te,
+		setListElement: L,
+		getReferenceProps: X,
+		getFloatingProps: Z,
+		getItemProps: Q,
+		changeQuery: (e) => {
+			E(e), A(!0), M(null);
+		},
+		moveToEdge: (e) => {
+			let t = e === "first" ? W[0] : W[W.length - 1];
+			t !== void 0 && M(t);
+		},
+		registration: P
+	}), [
+		f,
+		g,
+		H,
+		v,
+		C,
+		h,
+		i,
+		s,
+		u,
+		T,
+		oe,
+		$,
+		U,
+		W,
+		G,
+		q,
+		X,
+		Z,
+		Q,
+		P
+	]);
+	return /* @__PURE__ */ w(R.Provider, {
+		value: se,
+		children: l
+	});
+}
+H.displayName = "CommandPalette";
+function U({ ref: e, onClick: n, className: r, sx: i, ...a }) {
+	let { open: o, toggleOpen: s } = B("Trigger"), c = (e) => {
+		n?.(e), e.defaultPrevented || s();
+	};
+	return /* @__PURE__ */ w(t, {
+		className: r,
+		styles: u,
+		sx: i,
+		children: (t) => /* @__PURE__ */ w("button", {
+			type: "button",
+			...a,
+			ref: e,
+			"data-ui": "command-palette-trigger",
+			"aria-haspopup": "dialog",
+			"aria-expanded": o,
+			onClick: c,
+			className: t
+		})
+	});
+}
+U.displayName = "CommandPalette.Trigger";
+function W({ ref: e, className: n, sx: r, ...a }) {
+	let { children: o, onCancel: s, onClick: c, onClose: l, ...u } = p(a), d = B("Content"), { label: m, announcement: h } = d, g = f(d, {
+		onCancel: s,
+		onClick: c,
+		onClose: l
+	}, e);
+	return /* @__PURE__ */ w(t, {
+		className: n,
+		styles: A,
+		sx: r,
+		children: (e) => /* @__PURE__ */ w("dialog", {
+			"aria-label": m,
+			...u,
+			...g,
+			"data-ui": "command-palette",
+			"aria-modal": "true",
+			className: e,
+			children: /* @__PURE__ */ T("div", {
+				css: j,
+				children: [o, /* @__PURE__ */ w("div", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					css: i,
+					children: h
+				})]
+			})
+		})
+	});
+}
+W.displayName = "CommandPalette.Content";
+function G({ ref: e, onChange: n, onKeyDown: r, className: i, sx: a, ...o }) {
+	let { label: s, listId: c, query: l, matchCount: u, activeIndex: d, elementsRef: f, requestClose: p, setInputElement: m, getReferenceProps: h, changeQuery: g, moveToEdge: _ } = B("Input"), v = k([
+		m,
+		V,
+		e
+	]), y = (e) => {
+		n?.(e), g(e.currentTarget.value);
+	}, b = (e) => {
+		r?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "Escape" ? (e.preventDefault(), p()) : (e.key === "Home" || e.key === "End") && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey ? (e.preventDefault(), _(e.key === "Home" ? "first" : "last")) : e.key === "Enter" && d !== null && (e.preventDefault(), f.current[d]?.click()));
+	};
+	return /* @__PURE__ */ w(t, {
+		className: i,
+		styles: M,
+		sx: a,
+		children: (e) => /* @__PURE__ */ w("input", {
+			"aria-label": s,
+			autoComplete: "off",
+			spellCheck: !1,
+			...h({
+				...o,
+				onChange: y,
+				onKeyDown: b
+			}),
+			ref: v,
+			type: "text",
+			value: l,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": u > 0,
+			"aria-controls": c,
+			"data-ui": "command-palette-input",
+			className: e
+		})
+	});
+}
+G.displayName = "CommandPalette.Input";
+function K({ ref: e, onMouseDown: n, children: r, className: i, sx: a, ...o }) {
+	let { label: s, listId: c, matchCount: l, elementsRef: u, setListElement: d, getFloatingProps: f } = B("List"), p = k([d, e]), m = (e) => {
+		n?.(e), e.preventDefault();
+	};
+	return /* @__PURE__ */ w(t, {
+		className: i,
+		styles: N,
+		sx: a,
+		children: (e) => /* @__PURE__ */ w("div", {
+			"aria-label": s,
+			...f({
+				...o,
+				onMouseDown: m
+			}),
+			ref: p,
+			id: c,
+			role: "listbox",
+			hidden: l === 0,
+			"data-ui": "command-palette-list",
+			className: e,
+			children: /* @__PURE__ */ w(E, {
+				elementsRef: u,
+				children: r
+			})
+		})
+	});
+}
+K.displayName = "CommandPalette.List";
+function q({ ref: e, children: n, className: r, sx: i, ...o }) {
+	let { matchCount: s, emptyMessage: c } = B("Empty");
+	return s > 0 ? null : /* @__PURE__ */ w(t, {
+		className: r,
+		styles: I,
+		sx: i,
+		children: (t) => /* @__PURE__ */ w("div", {
+			...o,
+			ref: e,
+			"data-ui": "command-palette-empty",
+			className: t,
+			children: a(n) ? n : c
+		})
+	});
+}
+q.displayName = "CommandPalette.Empty";
+function J({ ref: e, label: n, children: r, "aria-labelledby": i, className: a, sx: o, ...s }) {
+	let { visibleGroupIds: c } = B("Group"), l = y(), u = `${l}-heading`;
+	return /* @__PURE__ */ w(t, {
+		className: a,
+		styles: P,
+		sx: o,
+		children: (t) => /* @__PURE__ */ T("div", {
+			...s,
+			ref: e,
+			role: "group",
+			"aria-labelledby": [i, u].filter(Boolean).join(" "),
+			hidden: !c.has(l),
+			"data-ui": "command-palette-group",
+			className: t,
+			children: [/* @__PURE__ */ w("div", {
+				id: u,
+				css: F,
+				children: n
+			}), /* @__PURE__ */ w(z.Provider, {
+				value: l,
+				children: r
+			})]
+		})
+	});
+}
+J.displayName = "CommandPalette.Group";
+function Y({ ref: e, value: n, onSelect: r, keywords: i, onClick: a, children: o, className: u, sx: d, ...f }) {
+	let { baseId: p, activeIndex: m, matchedValues: h, getItemProps: g, setOpen: _, registration: y } = B("Item"), b = v(z), S = x(null), { ref: C, index: T } = s(n, y, S, (e, t) => ({
+		index: e,
+		label: t,
+		keywords: i,
+		groupId: b
+	})), E = k([
+		C,
+		S,
+		e
+	]), D = T !== -1 && m === T, O = (e) => {
+		a?.(e), !e.defaultPrevented && (r?.(), _(!1));
+	};
+	return /* @__PURE__ */ w(t, {
+		className: u,
+		styles: [c, te],
+		sx: d,
+		children: (e) => /* @__PURE__ */ w("div", {
+			...g({
+				id: l(p, n),
+				...f,
+				onClick: O
+			}),
+			ref: E,
+			role: "option",
+			"aria-selected": D,
+			hidden: !h.has(n),
+			"data-active": D || void 0,
+			"data-ui": "command-palette-item",
+			className: e,
+			children: o
+		})
+	});
+}
+Y.displayName = "CommandPalette.Item";
+var X = Object.assign(H, {
+	Trigger: U,
+	Content: W,
+	Input: G,
+	List: K,
+	Empty: q,
+	Group: J,
+	Item: Y
+});
+//#endregion
+export { X as t };

package/dist/command-palette.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as CommandPalette } from "./command-palette-6c158eH1.js";
+export { t as CommandPalette } from "./command-palette-V_2pEay7.js";

package/dist/container-BOaSptJa.js

@@ -0,0 +1,41 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./layout-style-Cbd1Vilw.js";
+import { jsx as r } from "@emotion/react/jsx-runtime";
+//#region src/components/container/container.tsx
+var i = {
+	sm: "640px",
+	md: "768px",
+	lg: "1024px",
+	xl: "1280px"
+}, a = e({
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	marginInline: "auto"
+}), o = {
+	sm: e({ maxInlineSize: i.sm }),
+	md: e({ maxInlineSize: i.md }),
+	lg: e({ maxInlineSize: i.lg }),
+	xl: e({ maxInlineSize: i.xl })
+}, s = n("paddingInline");
+function c({ ref: e, size: n = "lg", paddingInline: i = "md", className: c, sx: l, ...u }) {
+	return /* @__PURE__ */ r(t, {
+		className: c,
+		styles: [
+			a,
+			o[n],
+			s[i]
+		],
+		sx: l,
+		children: (t) => /* @__PURE__ */ r("div", {
+			...u,
+			ref: e,
+			"data-ui": "container",
+			"data-size": n,
+			className: t
+		})
+	});
+}
+c.displayName = "Container";
+//#endregion
+export { c as t };

package/dist/container.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Container } from "./container-xUEIoZzj.js";
+export { t as Container } from "./container-BOaSptJa.js";

package/dist/{date-picker-DrHJMt2p.js → date-picker-ClUYBIBh.js}

@@ -1,12 +1,12 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { t } from "./use-controlled-state-CVXDa-qM.js";
-import { t as n } from "./renderable-DzcIj1Lo.js";
-import { t as r } from "./calendar-DUgS0xmp.js";
-import { n as i } from "./surface-DZ4d-2aL.js";
-import { t as a } from "./use-overlay-floating-efeqppiw.js";
-import { t as o } from "./text-field-DDPqQu29.js";
-import { createContext as s, forwardRef as c, useContext as l, useEffect as u, useId as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./use-controlled-state-CVXDa-qM.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { t as i } from "./calendar-C9Yad_-w.js";
+import { n as a } from "./surface-DZ4d-2aL.js";
+import { t as o } from "./use-overlay-floating-efeqppiw.js";
+import { t as s } from "./text-field-D60ok14S.js";
+import { createContext as c, useContext as l, useEffect as u, useId as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
 import { vars as g } from "@jfrader/tokens/vars";
 import { jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
 import { FloatingFocusManager as y, FloatingPortal as b, useClick as x, useDismiss as S, useInteractions as C, useMergeRefs as w, useRole as T } from "@floating-ui/react";
@@ -15,7 +15,7 @@ var E = "bottom-start", D = /* @__PURE__ */ new Set(["Enter", "ArrowDown"]), O =
 	calendar: "gregory",
 	timeZone: "UTC",
 	dateStyle: "medium"
-}, N = s(null);
+}, N = c(null);
 function P(e) {
 	let t = l(N);
 	if (!t) throw Error(`DatePicker.${e} must be rendered inside <DatePicker>.`);
@@ -48,13 +48,13 @@ var B = e({
 	cursor: "pointer",
 	"&:disabled": { cursor: "not-allowed" }
 }), V = e({
-	...i,
+	...a,
 	borderRadius: g.radius.md,
 	boxShadow: g.shadow.overlay,
 	padding: g.space[3]
 });
-function H({ value: e, defaultValue: n, onValueChange: r, open: i, defaultOpen: o = !1, onOpenChange: s, min: c, max: l, locale: d, firstDayOfWeek: f, disabled: g = !1, name: y, placeholder: b, children: w }) {
-	let [D, O] = t(e, n, r), [k = !1, A] = t(i, o, s), [j, P] = h(!1), F = g || j, I = k && !F, [z, B] = h(null), V = m(null), H = m(!1), U = p(() => new Intl.DateTimeFormat(d ?? ne()).resolvedOptions().locale, [d]), W = p(() => new Intl.DateTimeFormat(U, M), [U]), G = p(() => re(W, U), [W, U]), K = L(D), q = K ? W.format(K) : "", J = R(c), Y = R(l), X = ee(R(D) ?? te(), J, Y).slice(0, 7), { refs: Z, floatingStyles: Q, context: $ } = a({
+function H({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen: a = !1, onOpenChange: s, min: c, max: l, locale: d, firstDayOfWeek: f, disabled: g = !1, name: y, placeholder: b, children: w }) {
+	let [D, O] = n(e, t, r), [k = !1, A] = n(i, a, s), [j, P] = h(!1), F = g || j, I = k && !F, [z, B] = h(null), V = m(null), H = m(!1), U = p(() => new Intl.DateTimeFormat(d ?? ne()).resolvedOptions().locale, [d]), W = p(() => new Intl.DateTimeFormat(U, M), [U]), G = p(() => re(W, U), [W, U]), K = L(D), q = K ? W.format(K) : "", J = R(c), Y = R(l), X = ee(R(D) ?? te(), J, Y).slice(0, 7), { refs: Z, floatingStyles: Q, context: $ } = o({
 		open: I,
 		placement: E,
 		onOpenChange: (e, t, n) => {
@@ -141,12 +141,13 @@ function H({ value: e, defaultValue: n, onValueChange: r, open: i, defaultOpen:
 		})]
 	});
 }
-var U = c(function({ label: e, id: t, disabled: r, slotProps: i, onKeyDown: a, onKeyUp: s, ...c }, l) {
-	let { open: u, disabled: p, displayValue: m, placeholder: h, gridRef: g, refs: v, getReferenceProps: y, requestOpenChange: b, setInputLabelling: x, setInputDisabled: S } = P("Input"), C = w([v.setReference, l]), T = d(), E = t ?? T, k = `${E}-label`, A = n(e), j = c["aria-labelledby"], M = c["aria-label"], N = M ?? (typeof e == "string" ? e : void 0), F = p || r === !0;
-	f(() => (S(r === !0), () => S(!1)), [r, S]), f(() => (x(j === void 0 ? M === void 0 ? typeof e == "string" ? { label: e } : { labelledBy: A ? k : void 0 } : { label: M } : { labelledBy: j }), () => x(null)), [
+H.displayName = "DatePicker";
+function U({ ref: e, label: t, id: n, disabled: i, slotProps: a, onKeyDown: o, onKeyUp: c, ...l }) {
+	let { open: u, disabled: p, displayValue: m, placeholder: h, gridRef: g, refs: v, getReferenceProps: y, requestOpenChange: b, setInputLabelling: x, setInputDisabled: S } = P("Input"), C = w([v.setReference, e]), T = d(), E = n ?? T, k = `${E}-label`, A = r(t), j = l["aria-labelledby"], M = l["aria-label"], N = M ?? (typeof t == "string" ? t : void 0), F = p || i === !0;
+	f(() => (S(i === !0), () => S(!1)), [i, S]), f(() => (x(j === void 0 ? M === void 0 ? typeof t == "string" ? { label: t } : { labelledBy: A ? k : void 0 } : { label: M } : { labelledBy: j }), () => x(null)), [
 		j,
 		M,
-		e,
+		t,
 		A,
 		k,
 		x
@@ -154,13 +155,13 @@ var U = c(function({ label: e, id: t, disabled: r, slotProps: i, onKeyDown: a, o
 	let I = () => {
 		F || (u ? z(g.current) : b(!0));
 	}, L = (e) => {
-		a?.(e), !(e.defaultPrevented || F) && (e.key === O ? e.preventDefault() : D.has(e.key) && (e.preventDefault(), I()));
+		o?.(e), !(e.defaultPrevented || F) && (e.key === O ? e.preventDefault() : D.has(e.key) && (e.preventDefault(), I()));
 	}, R = (e) => {
-		s?.(e), !(e.defaultPrevented || F || e.key !== O) && I();
+		c?.(e), !(e.defaultPrevented || F || e.key !== O) && I();
 	};
-	return /* @__PURE__ */ _(o, {
+	return /* @__PURE__ */ _(s, {
 		...y({
-			...c,
+			...l,
 			onKeyDown: L,
 			onKeyUp: R
 		}),
@@ -168,13 +169,13 @@ var U = c(function({ label: e, id: t, disabled: r, slotProps: i, onKeyDown: a, o
 		id: E,
 		label: A ? /* @__PURE__ */ _("span", {
 			id: k,
-			children: e
-		}) : e,
+			children: t
+		}) : t,
 		slotProps: {
-			...i,
+			...a,
 			control: {
-				...i?.control,
-				css: [B, i?.control?.css]
+				...a?.control,
+				css: [B, a?.control?.css]
 			}
 		},
 		value: m,
@@ -187,52 +188,61 @@ var U = c(function({ label: e, id: t, disabled: r, slotProps: i, onKeyDown: a, o
 		"data-state": u ? "open" : "closed",
 		"data-ui": "date-picker-input"
 	});
-}), W = c(function({ style: e, ...t }, n) {
-	let { open: i, value: a, initialMonth: o, min: s, max: c, locale: l, firstDayOfWeek: u, inputLabelling: d, gridRef: f, refs: p, floatingContext: h, floatingStyles: g, getFloatingProps: x, selectDate: S } = P("Popup"), C = w([p.setFloating, n]), T = m(null), E = w([(e) => {
-		f.current = e, T.current = z(e);
+}
+U.displayName = "DatePicker.Input";
+function W({ ref: e, style: n, className: r, sx: a, ...o }) {
+	let { open: s, value: c, initialMonth: l, min: u, max: d, locale: f, firstDayOfWeek: p, inputLabelling: h, gridRef: g, refs: x, floatingContext: S, floatingStyles: C, getFloatingProps: T, selectDate: E } = P("Popup"), D = w([x.setFloating, e]), O = m(null), k = w([(e) => {
+		g.current = e, O.current = z(e);
 	}]);
-	if (!i) return null;
-	let D = t["aria-labelledby"] !== void 0 || t["aria-label"] !== void 0 ? {} : d?.labelledBy === void 0 ? { "aria-label": d?.label } : { "aria-labelledby": d.labelledBy }, O = (e) => {
+	if (!s) return null;
+	let j = o["aria-labelledby"] !== void 0 || o["aria-label"] !== void 0 ? {} : h?.labelledBy === void 0 ? { "aria-label": h?.label } : { "aria-labelledby": h.labelledBy }, M = (e) => {
 		let t = e.target.closest(A);
 		if (t?.disabled) return;
 		let n = t?.dataset.date;
-		n !== void 0 && S(n);
-	}, k = (e) => {
+		n !== void 0 && E(n);
+	}, N = (e) => {
 		e.target.closest(A)?.disabled && e.preventDefault();
 	};
 	return /* @__PURE__ */ _(b, { children: /* @__PURE__ */ _(y, {
-		context: h,
+		context: S,
 		modal: !1,
-		initialFocus: T,
+		initialFocus: O,
 		returnFocus: !1,
-		children: /* @__PURE__ */ _("div", {
-			...x({
-				...D,
-				...t
-			}),
-			ref: C,
-			"data-ui": "date-picker-popup",
-			style: {
-				...e,
-				...g
-			},
-			css: V,
-			children: /* @__PURE__ */ v(r, {
-				value: a ?? "",
-				defaultVisibleMonth: o,
-				min: s,
-				max: c,
-				locale: l,
-				firstDayOfWeek: u,
-				children: [/* @__PURE__ */ _(r.Header, {}), /* @__PURE__ */ _(r.Grid, {
-					ref: E,
-					onClick: O,
-					onPointerDownCapture: k
-				})]
+		children: /* @__PURE__ */ _(t, {
+			className: r,
+			styles: V,
+			sx: a,
+			children: (e) => /* @__PURE__ */ _("div", {
+				...T({
+					...j,
+					...o
+				}),
+				ref: D,
+				"data-ui": "date-picker-popup",
+				style: {
+					...n,
+					...C
+				},
+				className: e,
+				children: /* @__PURE__ */ v(i, {
+					value: c ?? "",
+					defaultVisibleMonth: l,
+					min: u,
+					max: d,
+					locale: f,
+					firstDayOfWeek: p,
+					children: [/* @__PURE__ */ _(i.Header, {}), /* @__PURE__ */ _(i.Grid, {
+						ref: k,
+						onClick: M,
+						onPointerDownCapture: N
+					})]
+				})
 			})
 		})
 	}) });
-}), G = Object.assign(H, {
+}
+W.displayName = "DatePicker.Popup";
+var G = Object.assign(H, {
 	Input: U,
 	Popup: W
 });

package/dist/date-picker.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as DatePicker } from "./date-picker-DrHJMt2p.js";
+export { t as DatePicker } from "./date-picker-ClUYBIBh.js";