@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/composed/date-picker/index.js

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