tembro 2.0.4 → 2.0.6

package/dist/components/calendar/calendar.js

@@ -2,198 +2,277 @@ import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "../ui/button/index.js";
 import { addMonths as n, getMonthDays as r, getMonthLabel as i, getWeekdayLabels as a, isAfterDate as o, isBeforeDate as s, isSameMonth as c, isWithinRange as ee, parseDateKey as l, startOfMonth as u, toDateKey as d } from "./date-utils.js";
 import * as f from "react";
-import { ChevronLeftIcon as p, ChevronRightIcon as m } from "lucide-react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { ChevronLeftIcon as te, ChevronRightIcon as ne } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/calendar/calendar.tsx
-function _(e, t, n) {
+function re(e, t, n) {
 	return e instanceof Date ? u(e) : u(l(e) || l(t) || l(n?.from ?? n?.to) || /* @__PURE__ */ new Date());
 }
-function v(e, t) {
+function h(e, t) {
 	let n = new Date(e);
 	return n.setDate(e.getDate() + t), n;
 }
-function y(e, t) {
+function g(e, t) {
 	let n = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
 	return new Date(t.getFullYear(), t.getMonth(), Math.min(e.getDate(), n));
 }
-function b(e, t) {
+function _(e, t) {
 	let n = l(e), r = l(t);
 	if (!n || !r || t < e) return [];
 	let i = [], a = new Date(n);
 	for (; d(a) <= t;) i.push(d(a)), a.setDate(a.getDate() + 1);
 	return i;
 }
-function x({ className: l, value: x, range: S, onValueChange: C, onRangeChange: w, mode: T = "single", month: te, defaultMonth: ne, onMonthChange: E, min: D, max: O, disabledDates: k, locale: A = "en-US", weekStartsOn: j = 1, numberOfMonths: re = 1, showMonthHeaders: M, pagedNavigation: N = !1, labels: P, ...F }) {
-	let [ie, ae] = f.useState(() => _(ne, x, S)), I = te ?? ie, L = Math.max(re, 1), R = M ?? L > 1, z = N ? L : 1, B = d(/* @__PURE__ */ new Date()), V = f.useMemo(() => new Set(k ?? []), [k]), H = f.useMemo(() => a(A, j), [A, j]), U = f.useRef(/* @__PURE__ */ new Map()), [W, G] = f.useState(() => x ?? S?.from ?? B), K = f.useMemo(() => Array.from({ length: L }, (e, t) => n(I, t)), [I, L]), q = f.useMemo(() => K.map((e) => ({
+function v(e, t) {
+	let n = l(e);
+	return !n || !e ? null : new Intl.DateTimeFormat(t, { dateStyle: "medium" }).format(n);
+}
+function y({ className: l, value: y, range: b, onValueChange: ie, onRangeChange: x, mode: S = "single", month: ae, defaultMonth: oe, onMonthChange: se, min: C, max: ce, disabledDates: le, locale: w = "en-US", weekStartsOn: T = 1, numberOfMonths: ue = 1, showMonthHeaders: de, showOutsideDays: E = !0, pagedNavigation: fe = !1, showTodayShortcut: pe = !1, showClearShortcut: me = !1, showSelectionSummary: D = !1, labels: O, renderSelectionSummary: k, ...he }) {
+	let A = y !== void 0, j = b !== void 0, [ge, M] = f.useState(y ?? null), [_e, N] = f.useState(b ?? {}), [ve, ye] = f.useState(() => re(oe, y, b)), P = A ? y : ge, F = j ? b : _e, I = ae ?? ve, L = Math.max(ue, 1), be = de ?? L > 1, R = fe ? L : 1, z = d(/* @__PURE__ */ new Date()), B = f.useMemo(() => new Set(le ?? []), [le]), xe = f.useMemo(() => a(w, T), [w, T]), V = f.useRef(/* @__PURE__ */ new Map()), [H, U] = f.useState(() => y ?? b?.from ?? z), [W, G] = f.useState(null), K = f.useMemo(() => Array.from({ length: L }, (e, t) => n(I, t)), [I, L]), q = f.useMemo(() => K.map((e) => ({
 		month: e,
-		days: r(e, j)
-	})), [K, j]), J = f.useMemo(() => q.flatMap((e) => e.days), [q]), Y = f.useCallback((e) => {
-		if (V.has(e)) return "disabled";
-		if (s(e, D)) return "min";
-		if (o(e, O)) return "max";
+		days: r(e, T)
+	})), [K, T]), Se = f.useMemo(() => q.flatMap((e) => e.days), [q]), J = f.useCallback((e) => {
+		if (B.has(e)) return "disabled";
+		if (s(e, C)) return "min";
+		if (o(e, ce)) return "max";
 	}, [
-		V,
-		O,
-		D
-	]), X = f.useCallback((e) => !!Y(e), [Y]), Z = f.useMemo(() => J.map(d).filter((e) => !X(e)), [J, X]), oe = f.useMemo(() => {
-		let e = x ?? S?.from ?? B;
-		return Z.includes(W) ? W : Z.includes(e) ? e : Z[0];
-	}, [
-		W,
-		S?.from,
 		B,
-		x,
-		Z
+		ce,
+		C
+	]), Y = f.useCallback((e) => !!J(e), [J]), X = f.useMemo(() => Se.map(d).filter((e) => !Y(e)), [Se, Y]), Ce = f.useMemo(() => {
+		let e = y ?? b?.from ?? z, t = F?.from ?? void 0, n = P ?? void 0;
+		return X.includes(H) ? H : X.includes(n ?? t ?? e) ? n ?? t ?? e : X[0];
+	}, [
+		F?.from,
+		P,
+		H,
+		b?.from,
+		z,
+		y,
+		X
 	]);
 	f.useEffect(() => {
-		W && U.current.get(W)?.focus();
-	}, [W]);
-	let Q = (e) => {
+		A && M(y ?? null);
+	}, [A, y]), f.useEffect(() => {
+		j && b && N(b);
+	}, [j, b]), f.useEffect(() => {
+		H && V.current.get(H)?.focus();
+	}, [H]), f.useEffect(() => {
+		S !== "range" && G(null);
+	}, [S]);
+	let Z = (e) => {
 		let t = u(e);
-		ae(t), E?.(t);
-	}, $ = (e) => {
+		ye(t), se?.(t);
+	}, Q = (e) => {
 		let t = e, n = d(t), r = 0;
-		for (; X(n) && r < 370;) t = v(t, t < e ? -1 : 1), n = d(t), r += 1;
-		G(n), K.some((e) => c(t, e)) || Q(u(t));
-	}, se = (e) => {
-		if (X(e)) return;
-		if (T === "single") {
-			C?.(e);
+		for (; Y(n) && r < 370;) t = h(t, t < e ? -1 : 1), n = d(t), r += 1;
+		U(n), K.some((e) => c(t, e)) || Z(u(t));
+	}, we = (e) => {
+		if (Y(e)) return;
+		if (S === "single") {
+			A || M(e), ie?.(e);
 			return;
 		}
-		let t = S?.from ?? null, n = S?.to ?? null;
+		let t = F?.from ?? null, n = F?.to ?? null;
 		if (!t || t && n || e < t) {
-			w?.({
+			let t = {
 				from: e,
 				to: null
-			});
+			};
+			j || N(t), x?.(t);
 			return;
 		}
-		if (b(t, e).some((e) => X(e))) {
-			w?.({
+		if (_(t, e).some((e) => Y(e))) {
+			let t = {
 				from: e,
 				to: null
-			});
+			};
+			j || N(t), x?.(t);
 			return;
 		}
-		w?.({
+		let r = {
 			from: t,
 			to: e
+		};
+		j || N(r), x?.(r);
+	}, $ = S === "range" && F?.from && !F.to && W && W >= F.from && !_(F.from, W).some((e) => Y(e)) ? {
+		from: F.from,
+		to: W
+	} : null, Te = f.useMemo(() => {
+		if (!D && !k) return null;
+		if (k) return k({
+			mode: S,
+			value: P,
+			range: F,
+			locale: w
 		});
-	}, ce = (e, t) => {
+		if (S === "range") {
+			let e = v(F?.from, w), t = v(F?.to, w);
+			return e && t ? `${e} -> ${t}` : e ? `${e} -> ...` : "No range selected";
+		}
+		return v(P, w) ?? "No date selected";
+	}, [
+		F,
+		P,
+		w,
+		S,
+		k,
+		D
+	]), Ee = () => {
+		if (S === "single") {
+			A || M(null), ie?.("");
+			return;
+		}
+		let e = {
+			from: null,
+			to: null
+		};
+		j || N(e), x?.(e);
+	}, De = () => {
+		let e = /* @__PURE__ */ new Date(), t = d(e);
+		Z(e), U(t), Y(t) || we(t);
+	}, Oe = (e, t) => {
 		let r = ((q.find((e) => c(t, e.month))?.days.findIndex((e) => d(e) === d(t)) ?? 0) + 7) % 7;
 		switch (e.key) {
 			case "ArrowRight":
-				e.preventDefault(), $(v(t, 1));
+				e.preventDefault(), Q(h(t, 1));
 				break;
 			case "ArrowLeft":
-				e.preventDefault(), $(v(t, -1));
+				e.preventDefault(), Q(h(t, -1));
 				break;
 			case "ArrowDown":
-				e.preventDefault(), $(v(t, 7));
+				e.preventDefault(), Q(h(t, 7));
 				break;
 			case "ArrowUp":
-				e.preventDefault(), $(v(t, -7));
+				e.preventDefault(), Q(h(t, -7));
 				break;
 			case "Home":
-				e.preventDefault(), $(v(t, -r));
+				e.preventDefault(), Q(h(t, -r));
 				break;
 			case "End":
-				e.preventDefault(), $(v(t, 6 - r));
+				e.preventDefault(), Q(h(t, 6 - r));
 				break;
 			case "PageUp":
-				e.preventDefault(), $(y(t, n(t, -1)));
+				e.preventDefault(), Q(g(t, n(t, -1)));
 				break;
 			case "PageDown":
-				e.preventDefault(), $(y(t, n(t, 1)));
+				e.preventDefault(), Q(g(t, n(t, 1)));
 				break;
 		}
 	};
-	return /* @__PURE__ */ g("div", {
+	return /* @__PURE__ */ m("div", {
 		"data-slot": "calendar",
 		"data-months": L,
 		className: e("w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", l),
-		...F,
-		children: [/* @__PURE__ */ g("div", {
-			className: "mb-3 flex items-center justify-between gap-3",
-			children: [
-				/* @__PURE__ */ h(t, {
-					type: "button",
-					variant: "outline",
-					size: "icon-sm",
-					className: "rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground",
-					"aria-label": P?.previousMonth ?? "Previous month",
-					onClick: () => Q(n(I, -z)),
-					children: /* @__PURE__ */ h(p, {})
-				}),
-				/* @__PURE__ */ g("div", {
-					className: "flex flex-1 flex-col items-center text-center",
-					children: [/* @__PURE__ */ h("span", {
-						className: "text-[10px] font-semibold uppercase tracking-[0.24em] text-muted-foreground/90",
-						children: "Calendar"
-					}), /* @__PURE__ */ h("div", {
-						className: "text-base font-semibold capitalize tracking-tight text-foreground",
-						children: i(I, A)
-					})]
-				}),
-				/* @__PURE__ */ h(t, {
-					type: "button",
-					variant: "outline",
-					size: "icon-sm",
-					className: "rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground",
-					"aria-label": P?.nextMonth ?? "Next month",
-					onClick: () => Q(n(I, z)),
-					children: /* @__PURE__ */ h(m, {})
-				})
-			]
-		}), /* @__PURE__ */ h("div", {
-			className: e("grid gap-3", L > 1 && "sm:grid-cols-2"),
-			style: L > 2 ? { gridTemplateColumns: `repeat(${L}, minmax(0, 1fr))` } : void 0,
-			children: q.map(({ month: t, days: n }) => /* @__PURE__ */ g("div", {
-				className: "min-w-[16.5rem] rounded-[var(--radius-md)] bg-transparent p-1",
+		...he,
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "mb-3 flex items-center justify-between gap-3",
 				children: [
-					R && /* @__PURE__ */ h("div", {
-						className: "mb-2 text-center text-sm font-semibold capitalize tracking-tight text-foreground",
-						children: i(t, A)
+					/* @__PURE__ */ p(t, {
+						type: "button",
+						variant: "outline",
+						size: "icon-sm",
+						className: "rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground",
+						"aria-label": O?.previousMonth ?? "Previous month",
+						onClick: () => Z(n(I, -R)),
+						children: /* @__PURE__ */ p(te, {})
 					}),
-					/* @__PURE__ */ h("div", {
-						className: "grid grid-cols-7 gap-1 text-center text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-muted-foreground/90",
-						children: H.map((e) => /* @__PURE__ */ h("div", {
-							className: "py-1",
-							children: e
-						}, `${d(t)}-${e}`))
+					/* @__PURE__ */ m("div", {
+						className: "flex flex-1 flex-col items-center text-center",
+						children: [/* @__PURE__ */ p("span", {
+							className: "text-[10px] font-semibold uppercase tracking-[0.24em] text-muted-foreground/90",
+							children: "Calendar"
+						}), /* @__PURE__ */ p("div", {
+							className: "text-base font-semibold capitalize tracking-tight text-foreground",
+							children: i(I, w)
+						})]
 					}),
-					/* @__PURE__ */ h("div", {
-						className: "mt-1.5 grid grid-cols-7 gap-1",
-						children: n.map((n) => {
-							let r = d(n), i = !c(n, t), a = T === "single" ? x === r : r === S?.from || r === S?.to, o = T === "range" && ee(r, S?.from, S?.to), s = Y(r), l = !!s, u = s ? P?.disabledDate?.(r, s) : void 0;
-							return /* @__PURE__ */ h("button", {
-								ref: (e) => {
-									e ? U.current.set(r, e) : U.current.delete(r);
-								},
-								type: "button",
-								disabled: l,
-								"aria-label": u ?? P?.selectDate?.(r) ?? r,
-								"aria-current": r === B ? "date" : void 0,
-								tabIndex: r === oe ? 0 : -1,
-								title: u,
-								"data-selected": a || void 0,
-								"data-today": r === B || void 0,
-								"data-outside": i || void 0,
-								"data-in-range": o || void 0,
-								"data-disabled-reason": s,
-								className: e("flex h-9 items-center justify-center rounded-[var(--radius-sm)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30", i && "text-muted-foreground/34", r === B && "border-border/70 bg-muted/60 text-foreground", o && "bg-primary/10 text-foreground", a && "border-primary bg-primary text-primary-foreground shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-primary hover:text-primary-foreground"),
-								onFocus: () => G(r),
-								onKeyDown: (e) => ce(e, n),
-								onClick: () => se(r),
-								children: n.getDate()
-							}, r);
-						})
+					/* @__PURE__ */ p(t, {
+						type: "button",
+						variant: "outline",
+						size: "icon-sm",
+						className: "rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground",
+						"aria-label": O?.nextMonth ?? "Next month",
+						onClick: () => Z(n(I, R)),
+						children: /* @__PURE__ */ p(ne, {})
 					})
 				]
-			}, d(t)))
-		})]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: e("grid gap-3", L > 1 && "sm:grid-cols-2"),
+				style: L > 2 ? { gridTemplateColumns: `repeat(${L}, minmax(0, 1fr))` } : void 0,
+				children: q.map(({ month: t, days: n }) => /* @__PURE__ */ m("div", {
+					className: "min-w-[16.5rem] rounded-[var(--radius-md)] bg-transparent p-1",
+					children: [
+						be && /* @__PURE__ */ p("div", {
+							className: "mb-2 text-center text-sm font-semibold capitalize tracking-tight text-foreground",
+							children: i(t, w)
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "grid grid-cols-7 gap-1 text-center text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-muted-foreground/90",
+							children: xe.map((e) => /* @__PURE__ */ p("div", {
+								className: "py-1",
+								children: e
+							}, `${d(t)}-${e}`))
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "mt-1.5 grid grid-cols-7 gap-1",
+							children: n.map((n) => {
+								let r = d(n), i = !c(n, t), a = S === "single" ? P === r : r === F?.from || r === F?.to, o = S === "range" && ee(r, F?.from, F?.to), s = !o && S === "range" && ee(r, $?.from, $?.to), l = J(r), u = !!l, f = l ? O?.disabledDate?.(r, l) : void 0;
+								return /* @__PURE__ */ p("button", {
+									ref: (e) => {
+										e ? V.current.set(r, e) : V.current.delete(r);
+									},
+									type: "button",
+									disabled: u,
+									"aria-label": f ?? O?.selectDate?.(r) ?? r,
+									"aria-current": r === z ? "date" : void 0,
+									tabIndex: r === Ce ? 0 : -1,
+									title: f,
+									"data-selected": a || void 0,
+									"data-today": r === z || void 0,
+									"data-outside": i || void 0,
+									"data-in-range": o || void 0,
+									"data-in-preview-range": s || void 0,
+									"data-disabled-reason": l,
+									className: e("flex h-9 items-center justify-center rounded-[var(--radius-sm)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30", i && E ? "text-muted-foreground/34" : "text-foreground", i && !E && "pointer-events-none opacity-0", r === z && "border-border/70 bg-muted/60 text-foreground", o && "bg-primary/10 text-foreground", s && "bg-primary/6 text-foreground", a && "border-primary bg-primary text-primary-foreground shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-primary hover:text-primary-foreground"),
+									onFocus: () => U(r),
+									onMouseEnter: () => G(r),
+									onMouseLeave: () => G(null),
+									onKeyDown: (e) => Oe(e, n),
+									onClick: () => we(r),
+									children: n.getDate()
+								}, r);
+							})
+						})
+					]
+				}, d(t)))
+			}),
+			pe || me || D || k ? /* @__PURE__ */ m("div", {
+				className: "mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-[color:var(--aui-card-border,var(--border))] pt-3",
+				children: [/* @__PURE__ */ p("div", {
+					className: "text-xs text-muted-foreground",
+					children: Te
+				}), /* @__PURE__ */ m("div", {
+					className: "flex flex-wrap gap-2",
+					children: [me ? /* @__PURE__ */ p(t, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						onClick: Ee,
+						children: O?.clear ?? "Clear"
+					}) : null, pe ? /* @__PURE__ */ p(t, {
+						type: "button",
+						size: "sm",
+						variant: "outline",
+						onClick: De,
+						children: O?.today ?? "Today"
+					}) : null]
+				})]
+			}) : null
+		]
 	});
 }
 //#endregion
-export { x as Calendar };
+export { y as Calendar };

package/dist/components/calendar/date-picker.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/popover/index.cjs"),i=require("./date-utils.cjs"),a=require("./calendar.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("lucide-react"),c=require("react/jsx-runtime");function l(e){let t=i.parseDateKey(e);return t?new Intl.DateTimeFormat(`en-US`,{dateStyle:`medium`}).format(t):e}function u({value:e,onValueChange:i,placeholder:u,labels:d,disabled:f=!1,formatValue:p=l,triggerClassName:m,contentClassName:h,className:g,..._}){let[v,y]=o.useState(!1),b=!!e;return(0,c.jsx)(`div`,{"data-slot":`date-picker`,className:t.cn(`w-full`,g),children:(0,c.jsxs)(r.Popover,{open:v,onOpenChange:y,children:[(0,c.jsxs)(r.PopoverTrigger,{render:(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:f,className:t.cn(`min-h-11 w-full justify-start rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]`,!b&&`text-muted-foreground`,m)}),children:[(0,c.jsx)(s.CalendarIcon,{"data-icon":`inline-start`}),(0,c.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:b?p(String(e)):u??d?.placeholder??`Select date`})]}),(0,c.jsx)(r.PopoverContent,{align:`start`,className:t.cn(`w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur`,h),children:(0,c.jsx)(a.Calendar,{value:e,onValueChange:e=>{i?.(e),y(!1)},labels:d,..._})})]})})}exports.DatePicker=u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/popover/index.cjs"),i=require("./date-utils.cjs"),a=require("./calendar.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("lucide-react"),c=require("react/jsx-runtime");function l(e){let t=i.parseDateKey(e);return t?new Intl.DateTimeFormat(`en-US`,{dateStyle:`medium`}).format(t):e}function u({value:e,onValueChange:i,placeholder:u,labels:d,disabled:f=!1,clearable:p=!0,formatValue:m=l,triggerClassName:h,contentClassName:g,className:_,...v}){let[y,b]=o.useState(!1),x=!!e,S=e=>{i?.(e),b(!1)},C=()=>{i?.(``),b(!1)};return(0,c.jsx)(`div`,{"data-slot":`date-picker`,className:t.cn(`w-full`,_),children:(0,c.jsxs)(r.Popover,{open:y,onOpenChange:b,children:[(0,c.jsxs)(r.PopoverTrigger,{render:(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:f,className:t.cn(`group min-h-11 w-full justify-start gap-3 rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 px-3 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]`,!x&&`text-muted-foreground`,h)}),children:[(0,c.jsx)(s.CalendarIcon,{"data-icon":`inline-start`,className:t.cn(x&&`text-primary`)}),(0,c.jsxs)(`span`,{className:`grid min-w-0 flex-1 gap-0.5`,children:[(0,c.jsx)(`span`,{className:`text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground`,children:d?.selected??`Date`}),(0,c.jsx)(`span`,{className:t.cn(`truncate text-sm`,x&&`font-semibold text-foreground`),children:x?m(String(e)):u??d?.placeholder??`Select date`})]}),p&&x?(0,c.jsx)(`span`,{role:`button`,tabIndex:0,"aria-label":d?.clear??`Clear date`,className:`ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground opacity-80 transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring`,onClick:e=>{e.preventDefault(),e.stopPropagation(),C()},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),C())},children:(0,c.jsx)(s.XIcon,{className:`size-3.5`})}):null]}),(0,c.jsx)(r.PopoverContent,{align:`start`,className:t.cn(`w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur`,g),children:(0,c.jsx)(a.Calendar,{value:e,onValueChange:S,labels:d,showTodayShortcut:!0,showClearShortcut:p,showSelectionSummary:!0,...v})})]})})}exports.DatePicker=u;

package/dist/components/calendar/date-picker.d.ts

@@ -2,14 +2,16 @@ import * as React from "react";
 import { type CalendarProps } from "@/components/calendar/calendar";
 export type DatePickerLabels = CalendarProps["labels"] & {
     placeholder?: string;
+    selected?: string;
 };
 export type DatePickerProps = Omit<CalendarProps, "mode" | "range" | "onRangeChange" | "labels"> & {
     placeholder?: string;
     labels?: DatePickerLabels;
     disabled?: boolean;
+    clearable?: boolean;
     formatValue?: (value: string) => React.ReactNode;
     triggerClassName?: string;
     contentClassName?: string;
 };
-declare function DatePicker({ value, onValueChange, placeholder, labels, disabled, formatValue, triggerClassName, contentClassName, className, ...calendarProps }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ value, onValueChange, placeholder, labels, disabled, clearable, formatValue, triggerClassName, contentClassName, className, ...calendarProps }: DatePickerProps): React.JSX.Element;
 export { DatePicker };

package/dist/components/calendar/date-picker.js

@@ -4,46 +4,76 @@ import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../ui/po
 import { parseDateKey as a } from "./date-utils.js";
 import { Calendar as o } from "./calendar.js";
 import * as s from "react";
-import { CalendarIcon as c } from "lucide-react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { CalendarIcon as c, XIcon as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/calendar/date-picker.tsx
-function d(e) {
+function f(e) {
 	let t = a(e);
 	return t ? new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(t) : e;
 }
-function f({ value: a, onValueChange: f, placeholder: p, labels: m, disabled: h = !1, formatValue: g = d, triggerClassName: _, contentClassName: v, className: y, ...b }) {
-	let [x, S] = s.useState(!1), C = !!a;
-	return /* @__PURE__ */ l("div", {
+function p({ value: a, onValueChange: p, placeholder: m, labels: h, disabled: g = !1, clearable: _ = !0, formatValue: v = f, triggerClassName: y, contentClassName: b, className: x, ...S }) {
+	let [C, w] = s.useState(!1), T = !!a, E = (e) => {
+		p?.(e), w(!1);
+	}, D = () => {
+		p?.(""), w(!1);
+	};
+	return /* @__PURE__ */ u("div", {
 		"data-slot": "date-picker",
-		className: e("w-full", y),
-		children: /* @__PURE__ */ u(n, {
-			open: x,
-			onOpenChange: S,
-			children: [/* @__PURE__ */ u(i, {
-				render: /* @__PURE__ */ l(t, {
+		className: e("w-full", x),
+		children: /* @__PURE__ */ d(n, {
+			open: C,
+			onOpenChange: w,
+			children: [/* @__PURE__ */ d(i, {
+				render: /* @__PURE__ */ u(t, {
 					type: "button",
 					variant: "outline",
-					disabled: h,
-					className: e("min-h-11 w-full justify-start rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]", !C && "text-muted-foreground", _)
+					disabled: g,
+					className: e("group min-h-11 w-full justify-start gap-3 rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 px-3 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]", !T && "text-muted-foreground", y)
 				}),
-				children: [/* @__PURE__ */ l(c, { "data-icon": "inline-start" }), /* @__PURE__ */ l("span", {
-					className: "min-w-0 flex-1 truncate",
-					children: C ? g(String(a)) : p ?? m?.placeholder ?? "Select date"
-				})]
-			}), /* @__PURE__ */ l(r, {
+				children: [
+					/* @__PURE__ */ u(c, {
+						"data-icon": "inline-start",
+						className: e(T && "text-primary")
+					}),
+					/* @__PURE__ */ d("span", {
+						className: "grid min-w-0 flex-1 gap-0.5",
+						children: [/* @__PURE__ */ u("span", {
+							className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground",
+							children: h?.selected ?? "Date"
+						}), /* @__PURE__ */ u("span", {
+							className: e("truncate text-sm", T && "font-semibold text-foreground"),
+							children: T ? v(String(a)) : m ?? h?.placeholder ?? "Select date"
+						})]
+					}),
+					_ && T ? /* @__PURE__ */ u("span", {
+						role: "button",
+						tabIndex: 0,
+						"aria-label": h?.clear ?? "Clear date",
+						className: "ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground opacity-80 transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+						onClick: (e) => {
+							e.preventDefault(), e.stopPropagation(), D();
+						},
+						onKeyDown: (e) => {
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
+						},
+						children: /* @__PURE__ */ u(l, { className: "size-3.5" })
+					}) : null
+				]
+			}), /* @__PURE__ */ u(r, {
 				align: "start",
-				className: e("w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur", v),
-				children: /* @__PURE__ */ l(o, {
+				className: e("w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur", b),
+				children: /* @__PURE__ */ u(o, {
 					value: a,
-					onValueChange: (e) => {
-						f?.(e), S(!1);
-					},
-					labels: m,
-					...b
+					onValueChange: E,
+					labels: h,
+					showTodayShortcut: !0,
+					showClearShortcut: _,
+					showSelectionSummary: !0,
+					...S
 				})
 			})]
 		})
 	});
 }
 //#endregion
-export { f as DatePicker };
+export { p as DatePicker };

package/dist/components/calendar/date-range-picker.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/popover/index.cjs"),i=require("./date-utils.cjs"),a=require("./calendar.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("lucide-react"),c=require("react/jsx-runtime");function l(e){let t=i.parseDateKey(e);return t?new Intl.DateTimeFormat(`en-US`,{dateStyle:`medium`}).format(t):e}function u({className:e,value:i,onValueChange:u,labels:d,placeholder:f,disabled:p=!1,formatValue:m=l,closeOnSelect:h=!0,showFooter:g=!1,triggerClassName:_,contentClassName:v,numberOfMonths:y=2,pagedNavigation:b=!0,...x}){let[S,C]=o.useState(!1),[w,T]=o.useState(i??{}),E=i?.from??``,D=i?.to??``,O=!!(E||D),k=g?w:i,A=k?.from??``,j=k?.to??``,M=!!(A||j),N=E&&D?`${m(E)} - ${m(D)}`:E?`${m(E)} - ...`:f??d?.placeholder??`Select date range`,P=A&&j?`${m(A)} - ${m(j)}`:A?`${m(A)} - ...`:d?.placeholder??`Select date range`;o.useEffect(()=>{S&&g&&T(i??{})},[S,g,i]);let F=e=>{if(g){T(e);return}u?.(e),h&&e.from&&e.to&&C(!1)},I=()=>{u?.(w),C(!1)},L=()=>{let e={};if(g){T(e);return}u?.(e)};return(0,c.jsx)(`div`,{"data-slot":`date-range-picker`,className:t.cn(`w-full`,e),children:(0,c.jsxs)(r.Popover,{open:S,onOpenChange:C,children:[(0,c.jsxs)(r.PopoverTrigger,{render:(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:p,className:t.cn(`min-h-11 w-full justify-start rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]`,!O&&`text-muted-foreground`,_)}),children:[(0,c.jsx)(s.CalendarIcon,{"data-icon":`inline-start`}),(0,c.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:N})]}),(0,c.jsxs)(r.PopoverContent,{align:`start`,className:t.cn(`w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur`,v),children:[(0,c.jsx)(a.Calendar,{mode:`range`,range:k,onRangeChange:F,labels:d,numberOfMonths:y,pagedNavigation:b,...x}),g&&(0,c.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3 border-t border-border/70 bg-muted/24 px-4 py-3`,children:[(0,c.jsx)(`div`,{className:`min-w-0 text-sm text-muted-foreground`,children:(0,c.jsx)(`span`,{className:`block truncate`,children:P})}),(0,c.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,c.jsx)(n.Button,{type:`button`,variant:`ghost`,size:`sm`,onClick:L,children:d?.clear??`Clear`}),(0,c.jsx)(n.Button,{type:`button`,size:`sm`,disabled:!M,onClick:I,children:d?.apply??`Apply`})]})]})]})]})})}exports.DateRangePicker=u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/popover/index.cjs"),i=require("./date-utils.cjs"),a=require("./calendar.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("lucide-react"),c=require("react/jsx-runtime");function l(e){let t=i.parseDateKey(e);return t?new Intl.DateTimeFormat(`en-US`,{dateStyle:`medium`}).format(t):e}function u(e,t){return typeof e==`string`?e:t}function d({className:e,value:i,onValueChange:d,labels:f,placeholder:p,disabled:m=!1,clearable:h=!0,formatValue:g=l,closeOnSelect:_=!1,closeOnPresetSelect:v=!1,showFooter:y=!0,presets:b,triggerClassName:x,contentClassName:S,numberOfMonths:C=2,pagedNavigation:w=!0,...T}){let[E,D]=o.useState(!1),[O,k]=o.useState(i??{}),A=i?.from??``,j=i?.to??``,M=!!(A||j),N=y?O:i,P=N?.from??``,F=N?.to??``,I=!!(P||F),L=A&&j?`${g(A)} - ${g(j)}`:A?`${g(A)} - ...`:p??f?.placeholder??`Select date range`,R=P&&F?`${g(P)} - ${g(F)}`:P?`${g(P)} - ...`:f?.placeholder??`Select date range`;o.useEffect(()=>{E&&y&&k(i??{})},[E,y,i]);let z=e=>{if(y){k(e);return}d?.(e),_&&e.from&&e.to&&D(!1)},B=()=>{d?.(O),D(!1)},V=()=>{let e={};if(y){k(e);return}d?.(e)},H=()=>{let e={};k(e),d?.(e)},U=e=>{e.preventDefault(),e.stopPropagation(),H()},W=e=>{if(y){k(e),v&&(d?.(e),D(!1));return}d?.(e),(_||v)&&e.from&&e.to&&D(!1)};return(0,c.jsx)(`div`,{"data-slot":`date-range-picker`,className:t.cn(`w-full`,e),children:(0,c.jsxs)(r.Popover,{open:E,onOpenChange:D,children:[(0,c.jsxs)(r.PopoverTrigger,{render:(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:m,className:t.cn(`group min-h-11 w-full justify-start gap-3 rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 px-3 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]`,!M&&`text-muted-foreground`,x)}),children:[(0,c.jsx)(s.CalendarIcon,{"data-icon":`inline-start`,className:t.cn(M&&`text-primary`)}),M?(0,c.jsxs)(`span`,{className:`grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2`,children:[(0,c.jsxs)(`span`,{className:`grid min-w-0 gap-0.5`,children:[(0,c.jsx)(`span`,{className:`text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground`,children:f?.start??`Start`}),(0,c.jsx)(`span`,{className:`truncate text-sm font-semibold text-foreground`,children:A?g(A):`...`})]}),(0,c.jsx)(`span`,{className:`text-muted-foreground`,children:`-`}),(0,c.jsxs)(`span`,{className:`grid min-w-0 gap-0.5`,children:[(0,c.jsx)(`span`,{className:`text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground`,children:f?.end??`End`}),(0,c.jsx)(`span`,{className:`truncate text-sm font-semibold text-foreground`,children:j?g(j):`...`})]})]}):(0,c.jsxs)(`span`,{className:`grid min-w-0 flex-1 gap-0.5`,children:[(0,c.jsx)(`span`,{className:`text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground`,children:`Range`}),(0,c.jsx)(`span`,{className:`truncate text-sm`,children:L})]}),h&&M?(0,c.jsx)(`span`,{role:`button`,tabIndex:0,"aria-label":u(f?.clear,`Clear date range`),className:`ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground opacity-80 transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring`,onClick:U,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),H())},children:(0,c.jsx)(s.XIcon,{className:`size-3.5`})}):null]}),(0,c.jsxs)(r.PopoverContent,{align:`start`,className:t.cn(`w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur`,S),children:[b?.length?(0,c.jsx)(`div`,{className:`flex flex-wrap gap-2 border-b border-border/70 bg-muted/20 px-3 py-3`,children:b.map((e,t)=>(0,c.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,className:`h-7 rounded-full px-3 text-xs`,onClick:()=>W(e.value),children:e.label},t))}):null,(0,c.jsx)(a.Calendar,{mode:`range`,range:N,onRangeChange:z,labels:f,renderSelectionSummary:({range:e})=>{let t=e?.from?g(e.from):null,n=e?.to?g(e.to):null;return t&&n?`${t} -> ${n}`:t?`${t} -> ...`:`No range selected`},numberOfMonths:C,pagedNavigation:w,showClearShortcut:!y&&h,showSelectionSummary:!0,...T}),y&&(0,c.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3 border-t border-border/70 bg-muted/24 px-4 py-3`,children:[(0,c.jsx)(`div`,{className:`min-w-0 text-sm text-muted-foreground`,children:(0,c.jsx)(`span`,{className:`block truncate`,children:R})}),(0,c.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,c.jsx)(n.Button,{type:`button`,variant:`ghost`,size:`sm`,onClick:V,children:f?.clear??`Clear`}),(0,c.jsx)(n.Button,{type:`button`,size:`sm`,disabled:!I,onClick:B,children:f?.apply??`Apply`})]})]})]})]})})}exports.DateRangePicker=d;

package/dist/components/calendar/date-range-picker.d.ts

@@ -5,6 +5,12 @@ export type DateRangePickerLabels = CalendarProps["labels"] & {
     placeholder?: string;
     apply?: React.ReactNode;
     clear?: React.ReactNode;
+    start?: string;
+    end?: string;
+};
+export type DateRangePickerPreset = {
+    label: React.ReactNode;
+    value: DateRangePickerValue;
 };
 export type DateRangePickerProps = Omit<CalendarProps, "mode" | "value" | "onValueChange" | "range" | "onRangeChange" | "labels"> & {
     value?: DateRangePickerValue;
@@ -12,11 +18,14 @@ export type DateRangePickerProps = Omit<CalendarProps, "mode" | "value" | "onVal
     labels?: DateRangePickerLabels;
     placeholder?: string;
     disabled?: boolean;
+    clearable?: boolean;
     formatValue?: (value: string) => React.ReactNode;
     closeOnSelect?: boolean;
+    closeOnPresetSelect?: boolean;
     showFooter?: boolean;
+    presets?: DateRangePickerPreset[];
     triggerClassName?: string;
     contentClassName?: string;
 };
-declare function DateRangePicker({ className, value, onValueChange, labels, placeholder, disabled, formatValue, closeOnSelect, showFooter, triggerClassName, contentClassName, numberOfMonths, pagedNavigation, ...calendarProps }: DateRangePickerProps): React.JSX.Element;
+declare function DateRangePicker({ className, value, onValueChange, labels, placeholder, disabled, clearable, formatValue, closeOnSelect, closeOnPresetSelect, showFooter, presets, triggerClassName, contentClassName, numberOfMonths, pagedNavigation, ...calendarProps }: DateRangePickerProps): React.JSX.Element;
 export { DateRangePicker };