@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/_chunks/date-picker.js

@@ -0,0 +1,748 @@
+"use client";
+import { cn as e } from "../ui/lib/utils.js";
+import { Icon as t } from "../ui/icon.js";
+import { i as n, r, t as i } from "./popover.js";
+import { n as a } from "./use-calendar.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { IconCalendarClock as l, IconCalendarEvent as u, IconClock as d } from "@tabler/icons-react";
+import { addMonths as f, endOfDay as p, endOfMonth as m, format as h, isAfter as g, isBefore as _, setHours as v, setMinutes as y, setMonth as b, setSeconds as x, setYear as S, startOfDay as C, startOfMonth as w, startOfYear as T, subDays as E, subMonths as D } from "date-fns";
+//#region src/composed/date-picker/year-picker.tsx
+var O = o.forwardRef(function({ currentYear: t, selectedYear: n, onYearSelect: r, minDate: i, maxDate: a, className: l, ...u }, d) {
+	let f = Math.floor(t / 10) * 10, p = Array.from({ length: 12 }, (e, t) => f + t), [m, h] = o.useState(() => {
+		let e = p.indexOf(n ?? t);
+		return e >= 0 ? e : 0;
+	}), g = o.useRef([]), _ = (e) => i != null && e < i.getFullYear() || a != null && e > a.getFullYear(), v = (e) => {
+		let t = m;
+		switch (e.key) {
+			case "ArrowRight":
+				t = Math.min(11, m + 1);
+				break;
+			case "ArrowLeft":
+				t = Math.max(0, m - 1);
+				break;
+			case "ArrowDown":
+				t = Math.min(11, m + 3);
+				break;
+			case "ArrowUp":
+				t = Math.max(0, m - 3);
+				break;
+			case "Home":
+				t = 0;
+				break;
+			case "End":
+				t = 11;
+				break;
+			default: return;
+		}
+		for (e.preventDefault(); t !== m && _(p[t]);) if (t += e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1, t < 0 || t > 11) return;
+		h(t), g.current[t]?.focus();
+	};
+	return /* @__PURE__ */ c("div", {
+		ref: d,
+		...u,
+		className: e("w-[252px]", l),
+		children: [/* @__PURE__ */ c("div", {
+			className: "text-center pb-ds-04 text-ds-md font-semibold text-surface-fg",
+			children: [
+				f,
+				" – ",
+				f + 11
+			]
+		}), /* @__PURE__ */ s("div", {
+			role: "grid",
+			"aria-label": "Year picker",
+			tabIndex: -1,
+			onKeyDown: v,
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((t) => /* @__PURE__ */ s("div", {
+				role: "row",
+				className: "grid grid-cols-3 gap-ds-02 mb-ds-02 last:mb-0",
+				children: p.slice(t * 3, t * 3 + 3).map((t) => {
+					let i = p.indexOf(t), a = t === n, o = _(t);
+					return /* @__PURE__ */ s("button", {
+						ref: (e) => {
+							g.current[i] = e;
+						},
+						type: "button",
+						role: "gridcell",
+						tabIndex: i === m ? 0 : -1,
+						disabled: o || !1,
+						onClick: () => !o && r(t),
+						className: e("h-ds-sm-plus rounded-ds-md text-ds-md transition-colors focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", o && "opacity-action-disabled pointer-events-none cursor-not-allowed", a && "bg-accent-9 text-accent-fg", !a && !o && "hover:bg-surface-raised-hover text-surface-fg"),
+						children: t
+					}, t);
+				})
+			}, t))
+		})]
+	});
+});
+O.displayName = "YearPicker";
+//#endregion
+//#region src/composed/date-picker/month-picker.tsx
+var k = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+], A = o.forwardRef(function({ currentYear: t, selectedMonth: n, onMonthSelect: r, minDate: i, maxDate: a, className: l, ...u }, d) {
+	let [f, p] = o.useState(n ?? 0), m = o.useRef([]), h = (e) => i != null && (t < i.getFullYear() || t === i.getFullYear() && e < i.getMonth()) || a != null && (t > a.getFullYear() || t === a.getFullYear() && e > a.getMonth()), g = (e) => {
+		let t = f;
+		switch (e.key) {
+			case "ArrowRight":
+				t = Math.min(11, f + 1);
+				break;
+			case "ArrowLeft":
+				t = Math.max(0, f - 1);
+				break;
+			case "ArrowDown":
+				t = Math.min(11, f + 4);
+				break;
+			case "ArrowUp":
+				t = Math.max(0, f - 4);
+				break;
+			case "Home":
+				t = 0;
+				break;
+			case "End":
+				t = 11;
+				break;
+			default: return;
+		}
+		for (e.preventDefault(); t !== f && h(t);) if (t += e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1, t < 0 || t > 11) return;
+		p(t), m.current[t]?.focus();
+	};
+	return /* @__PURE__ */ c("div", {
+		ref: d,
+		...u,
+		className: e("w-[252px]", l),
+		children: [/* @__PURE__ */ s("div", {
+			className: "text-center pb-ds-04 text-ds-md font-semibold text-surface-fg",
+			children: t
+		}), /* @__PURE__ */ s("div", {
+			role: "grid",
+			"aria-label": "Month picker",
+			tabIndex: -1,
+			onKeyDown: g,
+			children: [
+				0,
+				1,
+				2
+			].map((t) => /* @__PURE__ */ s("div", {
+				role: "row",
+				className: "grid grid-cols-4 gap-ds-02 mb-ds-02 last:mb-0",
+				children: k.slice(t * 4, t * 4 + 4).map((i, a) => {
+					let o = t * 4 + a, c = o === n, l = h(o);
+					return /* @__PURE__ */ s("button", {
+						ref: (e) => {
+							m.current[o] = e;
+						},
+						type: "button",
+						role: "gridcell",
+						tabIndex: o === f ? 0 : -1,
+						disabled: l || !1,
+						onClick: () => !l && r(o),
+						className: e("h-ds-sm-plus rounded-ds-md text-ds-md transition-colors focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", l && "opacity-action-disabled pointer-events-none cursor-not-allowed", c && "bg-accent-9 text-accent-fg", !c && !l && "hover:bg-surface-raised-hover text-surface-fg"),
+						children: i
+					}, i);
+				})
+			}, t))
+		})]
+	});
+});
+A.displayName = "MonthPicker";
+//#endregion
+//#region src/composed/date-picker/date-picker.tsx
+var j = o.forwardRef(function({ value: l, onChange: d, placeholder: f = "Pick a date", className: p, formatStr: m = "MMM d, yyyy", minDate: g, maxDate: _, disabledDates: v, ...y }, x) {
+	let [C, w] = o.useState(!1), [T, E] = o.useState(l ?? /* @__PURE__ */ new Date()), [D, k] = o.useState("days");
+	o.useEffect(() => {
+		C || k("days");
+	}, [C]);
+	let j = (e) => {
+		d?.(e), w(!1);
+	}, M = () => {
+		k((e) => e === "days" ? "months" : "years");
+	}, N = (e) => {
+		E((t) => b(t, e)), k("days");
+	}, P = (e) => {
+		E((t) => S(t, e)), k("months");
+	}, F = () => {
+		switch (D) {
+			case "years": return /* @__PURE__ */ s(O, {
+				currentYear: T.getFullYear(),
+				selectedYear: l?.getFullYear(),
+				onYearSelect: P,
+				minDate: g,
+				maxDate: _
+			});
+			case "months": return /* @__PURE__ */ s(A, {
+				currentYear: T.getFullYear(),
+				selectedMonth: l?.getMonth(),
+				onMonthSelect: N,
+				minDate: g,
+				maxDate: _
+			});
+			default: return /* @__PURE__ */ s(a, {
+				currentMonth: T,
+				selected: l,
+				onSelect: j,
+				onMonthChange: E,
+				onHeaderClick: M,
+				disabledDates: v,
+				minDate: g,
+				maxDate: _
+			});
+		}
+	};
+	return /* @__PURE__ */ c(i, {
+		open: C,
+		onOpenChange: w,
+		children: [/* @__PURE__ */ s(n, {
+			asChild: !0,
+			children: /* @__PURE__ */ c("button", {
+				ref: x,
+				type: "button",
+				"aria-label": l ? `Change date, ${h(l, m)}` : f,
+				...y,
+				className: e("inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard", "hover:border-surface-border-strong", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", p),
+				children: [/* @__PURE__ */ s(t, {
+					icon: u,
+					size: "sm",
+					stroke: "light",
+					className: "text-surface-fg-subtle"
+				}), /* @__PURE__ */ s("span", {
+					className: e("text-ds-md", l ? "text-surface-fg" : "text-surface-fg-subtle"),
+					children: l ? h(l, m) : f
+				})]
+			})
+		}), /* @__PURE__ */ s(r, {
+			className: "w-auto border-surface-border-strong bg-surface-overlay p-ds-04",
+			align: "start",
+			sideOffset: 4,
+			children: F()
+		})]
+	});
+});
+j.displayName = "DatePicker";
+//#endregion
+//#region src/composed/date-picker/presets.tsx
+var M = {
+	today: {
+		label: "Today",
+		getRange: () => {
+			let e = /* @__PURE__ */ new Date();
+			return {
+				start: C(e),
+				end: p(e)
+			};
+		}
+	},
+	yesterday: {
+		label: "Yesterday",
+		getRange: () => {
+			let e = E(/* @__PURE__ */ new Date(), 1);
+			return {
+				start: C(e),
+				end: p(e)
+			};
+		}
+	},
+	last7days: {
+		label: "Last 7 days",
+		getRange: () => {
+			let e = /* @__PURE__ */ new Date();
+			return {
+				start: C(E(e, 6)),
+				end: p(e)
+			};
+		}
+	},
+	last30days: {
+		label: "Last 30 days",
+		getRange: () => {
+			let e = /* @__PURE__ */ new Date();
+			return {
+				start: C(E(e, 29)),
+				end: p(e)
+			};
+		}
+	},
+	thisMonth: {
+		label: "This month",
+		getRange: () => {
+			let e = /* @__PURE__ */ new Date();
+			return {
+				start: w(e),
+				end: m(e)
+			};
+		}
+	},
+	lastMonth: {
+		label: "Last month",
+		getRange: () => {
+			let e = D(/* @__PURE__ */ new Date(), 1);
+			return {
+				start: w(e),
+				end: m(e)
+			};
+		}
+	},
+	thisYear: {
+		label: "This year",
+		getRange: () => {
+			let e = /* @__PURE__ */ new Date();
+			return {
+				start: T(e),
+				end: p(e)
+			};
+		}
+	}
+}, N = o.forwardRef(function({ presets: t, onSelect: n, className: r, ...i }, a) {
+	return /* @__PURE__ */ s("div", {
+		ref: a,
+		...i,
+		className: e("flex flex-col gap-ds-01", r),
+		children: t.map((t) => {
+			let r = M[t];
+			return r ? /* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: () => {
+					let { start: e, end: t } = r.getRange();
+					n(e, t);
+				},
+				className: e("h-ds-sm w-full rounded-ds-md px-ds-03 text-left text-ds-sm", "text-surface-fg transition-colors", "hover:bg-surface-raised-hover", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9"),
+				children: r.label
+			}, t) : null;
+		})
+	});
+});
+N.displayName = "Presets";
+//#endregion
+//#region src/composed/date-picker/date-range-picker.tsx
+var P = o.forwardRef(function({ startDate: l, endDate: d, onChange: p, placeholder: m = "Pick a date range", className: v, formatStr: y = "MMM d, yyyy", minDate: x, maxDate: C, disabledDates: w, presets: T, numberOfMonths: E = 1, ...D }, k) {
+	let [j, M] = o.useState(!1), [P, F] = o.useState(l ?? /* @__PURE__ */ new Date()), [I, L] = o.useState(l ?? null), [R, z] = o.useState(d ?? null), [B, V] = o.useState(null), [H, U] = o.useState("days"), W = Math.max(1, E);
+	o.useEffect(() => {
+		L(l ?? null), z(d ?? null);
+	}, [l, d]), o.useEffect(() => {
+		j || U("days");
+	}, [j]);
+	let G = (e) => {
+		if (!I || I && R) L(e), z(null);
+		else {
+			let t = _(e, I) ? e : I, n = g(e, I) ? e : I;
+			L(t), z(n), p?.({
+				start: t,
+				end: n
+			}), M(!1);
+		}
+	}, K = (e, t) => {
+		L(e), z(t), p?.({
+			start: e,
+			end: t
+		}), M(!1);
+	}, q = () => {
+		U((e) => e === "days" ? "months" : "years");
+	}, J = (e) => {
+		F((t) => b(t, e)), U("days");
+	}, Y = (e) => {
+		F((t) => S(t, e)), U("months");
+	}, X = () => I && R ? `${h(I, y)} - ${h(R, y)}` : m, Z = () => W === 1 ? /* @__PURE__ */ s(a, {
+		currentMonth: P,
+		rangeStart: I,
+		rangeEnd: R,
+		hoverDate: B,
+		onSelect: G,
+		onHover: V,
+		onMonthChange: F,
+		onHeaderClick: q,
+		disabledDates: w,
+		minDate: x,
+		maxDate: C
+	}) : /* @__PURE__ */ s("div", {
+		className: "flex flex-row gap-ds-04",
+		children: Array.from({ length: W }, (e, t) => /* @__PURE__ */ s(a, {
+			currentMonth: f(P, t),
+			rangeStart: I,
+			rangeEnd: R,
+			hoverDate: B,
+			onSelect: G,
+			onHover: V,
+			onMonthChange: (e) => {
+				F(f(e, -t));
+			},
+			onHeaderClick: q,
+			disabledDates: w,
+			minDate: x,
+			maxDate: C,
+			hidePrevNav: t > 0,
+			hideNextNav: t < W - 1
+		}, t))
+	}), Q = () => {
+		switch (H) {
+			case "years": return /* @__PURE__ */ s(O, {
+				currentYear: P.getFullYear(),
+				selectedYear: I?.getFullYear(),
+				onYearSelect: Y,
+				minDate: x,
+				maxDate: C
+			});
+			case "months": return /* @__PURE__ */ s(A, {
+				currentYear: P.getFullYear(),
+				selectedMonth: I?.getMonth(),
+				onMonthSelect: J,
+				minDate: x,
+				maxDate: C
+			});
+			default: return Z();
+		}
+	}, $ = T && T.length > 0;
+	return /* @__PURE__ */ c(i, {
+		open: j,
+		onOpenChange: M,
+		children: [/* @__PURE__ */ s(n, {
+			asChild: !0,
+			children: /* @__PURE__ */ c("button", {
+				ref: k,
+				type: "button",
+				"aria-label": I && R ? `Change date range, ${X()}` : m,
+				...D,
+				className: e("inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard", "hover:border-surface-border-strong", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", v),
+				children: [/* @__PURE__ */ s(t, {
+					icon: u,
+					size: "sm",
+					stroke: "light",
+					className: "text-surface-fg-subtle"
+				}), /* @__PURE__ */ s("span", {
+					className: e("text-ds-md", I && R ? "text-surface-fg" : "text-surface-fg-subtle"),
+					children: X()
+				})]
+			})
+		}), /* @__PURE__ */ s(r, {
+			className: "w-auto border-surface-border-strong bg-surface-overlay p-ds-04",
+			align: "start",
+			sideOffset: 4,
+			children: $ ? /* @__PURE__ */ c("div", {
+				className: "flex flex-row gap-ds-04",
+				children: [/* @__PURE__ */ s("div", {
+					className: "min-w-[140px] border-r border-surface-border-strong pr-ds-04",
+					children: /* @__PURE__ */ s(N, {
+						presets: T,
+						onSelect: K
+					})
+				}), /* @__PURE__ */ s("div", { children: Q() })]
+			}) : Q()
+		})]
+	});
+});
+P.displayName = "DateRangePicker";
+//#endregion
+//#region src/composed/date-picker/time-picker.tsx
+function F(e, t, n) {
+	let r = [];
+	for (let i = e; i <= t; i += n) r.push(i);
+	return r;
+}
+function I(e) {
+	return e.toString().padStart(2, "0");
+}
+var L = o.forwardRef(function({ value: a, onChange: l, format: u = "12h", minuteStep: f = 1, secondStep: p = 1, showSeconds: m = !1, placeholder: g = "Pick a time", className: _, disabled: b = !1, ...S }, C) {
+	let [w, T] = o.useState(!1), E = a ? a.getHours() : null, D = a ? a.getMinutes() : null, O = a ? a.getSeconds() : null, k = E === null ? null : E >= 12 ? "PM" : "AM", A = E === null ? null : E === 0 ? 12 : E > 12 ? E - 12 : E, j = u === "12h" ? F(1, 12, 1) : F(0, 23, 1), M = F(0, 59, f), N = F(0, 59, p), P = (e) => {
+		let t = a ? new Date(a) : /* @__PURE__ */ new Date(), n = e.hours ?? t.getHours(), r = e.minutes ?? t.getMinutes(), i = e.seconds ?? t.getSeconds();
+		u === "12h" && e.hours !== void 0 && (n = (e.ampm ?? k ?? "AM") === "AM" ? e.hours === 12 ? 0 : e.hours : e.hours === 12 ? 12 : e.hours + 12);
+		let o = v(t, n);
+		return o = y(o, r), o = x(o, i), o;
+	}, L = (e) => {
+		let t = P({ hours: e });
+		l?.(t);
+	}, R = (e) => {
+		let t = P({ minutes: e });
+		l?.(t);
+	}, z = (e) => {
+		let t = P({ seconds: e });
+		l?.(t);
+	}, B = (e) => {
+		if (!a) {
+			let t = e === "AM" ? 0 : 12, n = /* @__PURE__ */ new Date();
+			n = v(n, t), n = y(n, 0), n = x(n, 0), l?.(n);
+			return;
+		}
+		let t = a.getHours(), n;
+		n = e === "AM" ? t >= 12 ? t - 12 : t : t < 12 ? t + 12 : t, l?.(v(new Date(a), n));
+	}, V = o.useMemo(() => a ? u === "12h" ? h(a, m ? "h:mm:ss a" : "h:mm a") : h(a, m ? "HH:mm:ss" : "HH:mm") : null, [
+		a,
+		u,
+		m
+	]), H = u === "12h" ? A : E, U = "flex flex-col gap-ds-01 overflow-y-auto max-h-[200px] px-ds-01", W = "flex h-ds-sm w-full items-center justify-center rounded-ds-md text-ds-md transition-colors duration-fast-01 ease-productive-standard cursor-pointer", G = "bg-accent-9 text-accent-fg", K = "text-surface-fg hover:bg-surface-raised-hover";
+	return /* @__PURE__ */ c(i, {
+		open: w,
+		onOpenChange: T,
+		children: [/* @__PURE__ */ s(n, {
+			asChild: !0,
+			children: /* @__PURE__ */ c("button", {
+				ref: C,
+				type: "button",
+				disabled: b,
+				...S,
+				className: e("inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard", "hover:border-surface-border-strong", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", b && "opacity-action-disabled pointer-events-none", _),
+				"aria-label": V ? `Selected time: ${V}` : g,
+				children: [/* @__PURE__ */ s(t, {
+					icon: d,
+					size: "sm",
+					stroke: "light",
+					className: "text-surface-fg-subtle"
+				}), /* @__PURE__ */ s("span", {
+					className: e("text-ds-md", V ? "text-surface-fg" : "text-surface-fg-subtle"),
+					children: V ?? g
+				})]
+			})
+		}), /* @__PURE__ */ s(r, {
+			className: "w-auto border-surface-border-strong bg-surface-overlay p-ds-04",
+			align: "start",
+			sideOffset: 4,
+			children: /* @__PURE__ */ c("div", {
+				className: "flex gap-ds-03",
+				role: "group",
+				"aria-label": "Time picker",
+				children: [
+					/* @__PURE__ */ c("div", {
+						className: "flex flex-col items-center gap-ds-02",
+						children: [/* @__PURE__ */ s("span", {
+							className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle",
+							children: "Hr"
+						}), /* @__PURE__ */ s("div", {
+							className: e(U, "min-w-[48px]"),
+							children: j.map((t) => /* @__PURE__ */ s("button", {
+								type: "button",
+								onClick: () => L(t),
+								className: e(W, H === t ? G : K),
+								"aria-label": `${t} hours`,
+								"aria-selected": H === t || void 0,
+								children: u === "24h" ? I(t) : t
+							}, t))
+						})]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "flex flex-col items-center gap-ds-02",
+						children: [/* @__PURE__ */ s("span", {
+							className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle",
+							children: "Min"
+						}), /* @__PURE__ */ s("div", {
+							className: e(U, "min-w-[48px]"),
+							children: M.map((t) => /* @__PURE__ */ s("button", {
+								type: "button",
+								onClick: () => R(t),
+								className: e(W, D === t ? G : K),
+								"aria-label": `${I(t)} minutes`,
+								"aria-selected": D === t || void 0,
+								children: I(t)
+							}, t))
+						})]
+					}),
+					m && /* @__PURE__ */ c("div", {
+						className: "flex flex-col items-center gap-ds-02",
+						children: [/* @__PURE__ */ s("span", {
+							className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle",
+							children: "Sec"
+						}), /* @__PURE__ */ s("div", {
+							className: e(U, "min-w-[48px]"),
+							children: N.map((t) => /* @__PURE__ */ s("button", {
+								type: "button",
+								onClick: () => z(t),
+								className: e(W, O === t ? G : K),
+								"aria-label": `${I(t)} seconds`,
+								"aria-selected": O === t || void 0,
+								children: I(t)
+							}, t))
+						})]
+					}),
+					u === "12h" && /* @__PURE__ */ c("div", {
+						className: "flex flex-col items-center gap-ds-02",
+						children: [/* @__PURE__ */ s("span", {
+							className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle",
+							children: "\xA0"
+						}), /* @__PURE__ */ s("div", {
+							className: "flex flex-col gap-ds-01 px-ds-01",
+							children: ["AM", "PM"].map((t) => /* @__PURE__ */ s("button", {
+								type: "button",
+								onClick: () => B(t),
+								className: e(W, "min-w-[44px] font-semibold", k === t ? G : K),
+								"aria-label": t,
+								"aria-selected": k === t || void 0,
+								children: t
+							}, t))
+						})]
+					})
+				]
+			})
+		})]
+	});
+});
+L.displayName = "TimePicker";
+//#endregion
+//#region src/composed/date-picker/date-time-picker.tsx
+function R(e) {
+	return e.toString().padStart(2, "0");
+}
+function z(e, t, n) {
+	let r = [];
+	for (let i = e; i <= t; i += n) r.push(i);
+	return r;
+}
+var B = o.forwardRef(function({ value: u, onChange: d, minDate: f, maxDate: p, disabledDates: m, timeFormat: g = "12h", minuteStep: _ = 1, placeholder: x = "Pick date & time", className: C, ...w }, T) {
+	let [E, D] = o.useState(!1), [k, j] = o.useState(u ?? /* @__PURE__ */ new Date()), [M, N] = o.useState("days");
+	o.useEffect(() => {
+		E || N("days");
+	}, [E]);
+	let P = u ? u.getHours() : 0, F = u ? u.getMinutes() : 0, I = P >= 12 ? "PM" : "AM", L = P === 0 ? 12 : P > 12 ? P - 12 : P, B = g === "12h" ? z(1, 12, 1) : z(0, 23, 1), V = z(0, 59, _), H = g === "12h" ? L : P, U = (e) => {
+		let t = v(e, u ? u.getHours() : P);
+		t = y(t, u ? u.getMinutes() : F), d?.(t);
+	}, W = () => {
+		N((e) => e === "days" ? "months" : "years");
+	}, G = (e) => {
+		j((t) => b(t, e)), N("days");
+	}, K = (e) => {
+		j((t) => S(t, e)), N("months");
+	}, q = (e) => {
+		let t = u ? new Date(u) : /* @__PURE__ */ new Date(), n = e;
+		g === "12h" && (n = (u ? I : "AM") === "AM" ? e === 12 ? 0 : e : e === 12 ? 12 : e + 12);
+		let r = v(t, n);
+		d?.(r);
+	}, J = (e) => {
+		let t = y(u ? new Date(u) : /* @__PURE__ */ new Date(), e);
+		d?.(t);
+	}, Y = (e) => {
+		let t = u ? new Date(u) : /* @__PURE__ */ new Date(), n = t.getHours(), r;
+		r = e === "AM" ? n >= 12 ? n - 12 : n : n < 12 ? n + 12 : n, d?.(v(t, r));
+	}, X = o.useMemo(() => u ? h(u, g === "12h" ? "MMM d, yyyy h:mm a" : "MMM d, yyyy HH:mm") : null, [u, g]), Z = () => {
+		switch (M) {
+			case "years": return /* @__PURE__ */ s(O, {
+				currentYear: k.getFullYear(),
+				selectedYear: u?.getFullYear(),
+				onYearSelect: K,
+				minDate: f,
+				maxDate: p
+			});
+			case "months": return /* @__PURE__ */ s(A, {
+				currentYear: k.getFullYear(),
+				selectedMonth: u?.getMonth(),
+				onMonthSelect: G,
+				minDate: f,
+				maxDate: p
+			});
+			default: return /* @__PURE__ */ s(a, {
+				currentMonth: k,
+				selected: u,
+				onSelect: U,
+				onMonthChange: j,
+				onHeaderClick: W,
+				disabledDates: m,
+				minDate: f,
+				maxDate: p
+			});
+		}
+	}, Q = "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-overlay px-ds-02 text-ds-md text-surface-fg transition-colors duration-fast-01 ease-productive-standard hover:border-surface-border-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 cursor-pointer appearance-none";
+	return /* @__PURE__ */ c(i, {
+		open: E,
+		onOpenChange: D,
+		children: [/* @__PURE__ */ s(n, {
+			asChild: !0,
+			children: /* @__PURE__ */ c("button", {
+				ref: T,
+				type: "button",
+				...w,
+				className: e("inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard", "hover:border-surface-border-strong", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", C),
+				"aria-label": X ? `Selected: ${X}` : x,
+				children: [/* @__PURE__ */ s(t, {
+					icon: l,
+					size: "sm",
+					stroke: "light",
+					className: "text-surface-fg-subtle"
+				}), /* @__PURE__ */ s("span", {
+					className: e("text-ds-md", X ? "text-surface-fg" : "text-surface-fg-subtle"),
+					children: X ?? x
+				})]
+			})
+		}), /* @__PURE__ */ s(r, {
+			className: "w-auto border-surface-border-strong bg-surface-overlay p-ds-04",
+			align: "start",
+			sideOffset: 4,
+			children: /* @__PURE__ */ c("div", {
+				className: "flex flex-col gap-ds-04",
+				children: [Z(), M === "days" && /* @__PURE__ */ c("div", {
+					className: "flex items-center gap-ds-02 border-t border-surface-border-strong pt-ds-04",
+					children: [
+						/* @__PURE__ */ s("span", {
+							className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle",
+							children: "Time"
+						}),
+						/* @__PURE__ */ c("select", {
+							value: H ?? "",
+							onChange: (e) => q(Number(e.target.value)),
+							className: Q,
+							"aria-label": "Hour",
+							children: [!u && /* @__PURE__ */ s("option", {
+								value: "",
+								children: "--"
+							}), B.map((e) => /* @__PURE__ */ s("option", {
+								value: e,
+								children: g === "24h" ? R(e) : e
+							}, e))]
+						}),
+						/* @__PURE__ */ s("span", {
+							className: "text-ds-md font-semibold text-surface-fg-subtle",
+							children: ":"
+						}),
+						/* @__PURE__ */ c("select", {
+							value: u ? F : "",
+							onChange: (e) => J(Number(e.target.value)),
+							className: Q,
+							"aria-label": "Minute",
+							children: [!u && /* @__PURE__ */ s("option", {
+								value: "",
+								children: "--"
+							}), V.map((e) => /* @__PURE__ */ s("option", {
+								value: e,
+								children: R(e)
+							}, e))]
+						}),
+						g === "12h" && /* @__PURE__ */ c("select", {
+							value: u ? I : "",
+							onChange: (e) => Y(e.target.value),
+							className: Q,
+							"aria-label": "AM or PM",
+							children: [
+								!u && /* @__PURE__ */ s("option", {
+									value: "",
+									children: "--"
+								}),
+								/* @__PURE__ */ s("option", {
+									value: "AM",
+									children: "AM"
+								}),
+								/* @__PURE__ */ s("option", {
+									value: "PM",
+									children: "PM"
+								})
+							]
+						})
+					]
+				})]
+			})
+		})]
+	});
+});
+B.displayName = "DateTimePicker";
+//#endregion
+export { j as a, N as i, L as n, A as o, P as r, O as s, B as t };