@devalok/shilp-sutra 0.36.0 → 0.37.0-next.0

package/dist/_chunks/date-picker.js

@@ -7,25 +7,35 @@ 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;
+//#region src/composed/date-picker/month-picker.tsx
+var O = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+], k = 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, m + 1);
+				t = Math.min(11, f + 1);
 				break;
 			case "ArrowLeft":
-				t = Math.max(0, m - 1);
+				t = Math.max(0, f - 1);
 				break;
 			case "ArrowDown":
-				t = Math.min(11, m + 3);
+				t = Math.min(11, f + 4);
 				break;
 			case "ArrowUp":
-				t = Math.max(0, m - 3);
+				t = Math.max(0, f - 4);
 				break;
 			case "Home":
 				t = 0;
@@ -35,83 +45,68 @@ var O = o.forwardRef(function({ currentYear: t, selectedYear: n, onYearSelect: r
 				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();
+		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__ */ c("div", {
+		children: [/* @__PURE__ */ s("div", {
 			className: "text-center pb-ds-04 text-ds-md font-semibold text-surface-fg",
-			children: [
-				f,
-				" – ",
-				f + 11
-			]
+			children: t
 		}), /* @__PURE__ */ s("div", {
 			role: "grid",
-			"aria-label": "Year picker",
+			"aria-label": "Month picker",
 			tabIndex: -1,
-			onKeyDown: v,
+			onKeyDown: g,
 			children: [
 				0,
 				1,
-				2,
-				3
+				2
 			].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);
+				className: "grid grid-cols-4 gap-ds-02 mb-ds-02 last:mb-0",
+				children: O.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) => {
-							g.current[i] = e;
+							m.current[o] = 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);
+						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))
 		})]
 	});
 });
-O.displayName = "YearPicker";
+k.displayName = "MonthPicker";
 //#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;
+//#region src/composed/date-picker/year-picker.tsx
+var A = 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, f + 1);
+				t = Math.min(11, m + 1);
 				break;
 			case "ArrowLeft":
-				t = Math.max(0, f - 1);
+				t = Math.max(0, m - 1);
 				break;
 			case "ArrowDown":
-				t = Math.min(11, f + 4);
+				t = Math.min(11, m + 3);
 				break;
 			case "ArrowUp":
-				t = Math.max(0, f - 4);
+				t = Math.max(0, m - 3);
 				break;
 			case "Home":
 				t = 0;
@@ -121,73 +116,78 @@ var k = [
 				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();
+		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__ */ s("div", {
+		children: [/* @__PURE__ */ c("div", {
 			className: "text-center pb-ds-04 text-ds-md font-semibold text-surface-fg",
-			children: t
+			children: [
+				f,
+				" – ",
+				f + 11
+			]
 		}), /* @__PURE__ */ s("div", {
 			role: "grid",
-			"aria-label": "Month picker",
+			"aria-label": "Year picker",
 			tabIndex: -1,
-			onKeyDown: g,
+			onKeyDown: v,
 			children: [
 				0,
 				1,
-				2
+				2,
+				3
 			].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);
+				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) => {
-							m.current[o] = e;
+							g.current[i] = 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);
+						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))
 		})]
 	});
 });
-A.displayName = "MonthPicker";
+A.displayName = "YearPicker";
 //#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");
+	let [C, w] = o.useState(!1), [T, E] = o.useState(l ?? /* @__PURE__ */ new Date()), [D, O] = o.useState("days");
 	o.useEffect(() => {
-		C || k("days");
+		C || O("days");
 	}, [C]);
 	let j = (e) => {
 		d?.(e), w(!1);
 	}, M = () => {
-		k((e) => e === "days" ? "months" : "years");
+		O((e) => e === "days" ? "months" : "years");
 	}, N = (e) => {
-		E((t) => b(t, e)), k("days");
+		E((t) => b(t, e)), O("days");
 	}, P = (e) => {
-		E((t) => S(t, e)), k("months");
+		E((t) => S(t, e)), O("months");
 	}, F = () => {
 		switch (D) {
-			case "years": return /* @__PURE__ */ s(O, {
+			case "years": return /* @__PURE__ */ s(A, {
 				currentYear: T.getFullYear(),
 				selectedYear: l?.getFullYear(),
 				onYearSelect: P,
 				minDate: g,
 				maxDate: _
 			});
-			case "months": return /* @__PURE__ */ s(A, {
+			case "months": return /* @__PURE__ */ s(k, {
 				currentYear: T.getFullYear(),
 				selectedMonth: l?.getMonth(),
 				onMonthSelect: N,
@@ -331,7 +331,7 @@ var M = {
 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) {
+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 }, O) {
 	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);
@@ -391,14 +391,14 @@ var P = o.forwardRef(function({ startDate: l, endDate: d, onChange: p, placehold
 		}, t))
 	}), Q = () => {
 		switch (H) {
-			case "years": return /* @__PURE__ */ s(O, {
+			case "years": return /* @__PURE__ */ s(A, {
 				currentYear: P.getFullYear(),
 				selectedYear: I?.getFullYear(),
 				onYearSelect: Y,
 				minDate: x,
 				maxDate: C
 			});
-			case "months": return /* @__PURE__ */ s(A, {
+			case "months": return /* @__PURE__ */ s(k, {
 				currentYear: P.getFullYear(),
 				selectedMonth: I?.getMonth(),
 				onMonthSelect: J,
@@ -414,7 +414,7 @@ var P = o.forwardRef(function({ startDate: l, endDate: d, onChange: p, placehold
 		children: [/* @__PURE__ */ s(n, {
 			asChild: !0,
 			children: /* @__PURE__ */ c("button", {
-				ref: k,
+				ref: O,
 				type: "button",
 				"aria-label": I && R ? `Change date range, ${X()}` : m,
 				...D,
@@ -448,166 +448,23 @@ var P = o.forwardRef(function({ startDate: l, endDate: d, onChange: p, placehold
 });
 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) {
+function F(e) {
 	return e.toString().padStart(2, "0");
 }
-function z(e, t, n) {
+function I(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");
+var L = 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), [O, 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 P = u ? u.getHours() : 0, L = u ? u.getMinutes() : 0, R = P >= 12 ? "PM" : "AM", z = P === 0 ? 12 : P > 12 ? P - 12 : P, B = g === "12h" ? I(1, 12, 1) : I(0, 23, 1), V = I(0, 59, _), H = g === "12h" ? z : P, U = (e) => {
 		let t = v(e, u ? u.getHours() : P);
-		t = y(t, u ? u.getMinutes() : F), d?.(t);
+		t = y(t, u ? u.getMinutes() : L), d?.(t);
 	}, W = () => {
 		N((e) => e === "days" ? "months" : "years");
 	}, G = (e) => {
@@ -616,7 +473,7 @@ var B = o.forwardRef(function({ value: u, onChange: d, minDate: f, maxDate: p, d
 		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);
+		g === "12h" && (n = (u ? R : "AM") === "AM" ? e === 12 ? 0 : e : e === 12 ? 12 : e + 12);
 		let r = v(t, n);
 		d?.(r);
 	}, J = (e) => {
@@ -627,22 +484,22 @@ var B = o.forwardRef(function({ value: u, onChange: d, minDate: f, maxDate: p, d
 		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(),
+			case "years": return /* @__PURE__ */ s(A, {
+				currentYear: O.getFullYear(),
 				selectedYear: u?.getFullYear(),
 				onYearSelect: K,
 				minDate: f,
 				maxDate: p
 			});
-			case "months": return /* @__PURE__ */ s(A, {
-				currentYear: k.getFullYear(),
+			case "months": return /* @__PURE__ */ s(k, {
+				currentYear: O.getFullYear(),
 				selectedMonth: u?.getMonth(),
 				onMonthSelect: G,
 				minDate: f,
 				maxDate: p
 			});
 			default: return /* @__PURE__ */ s(a, {
-				currentMonth: k,
+				currentMonth: O,
 				selected: u,
 				onSelect: U,
 				onMonthChange: j,
@@ -697,7 +554,7 @@ var B = o.forwardRef(function({ value: u, onChange: d, minDate: f, maxDate: p, d
 								children: "--"
 							}), B.map((e) => /* @__PURE__ */ s("option", {
 								value: e,
-								children: g === "24h" ? R(e) : e
+								children: g === "24h" ? F(e) : e
 							}, e))]
 						}),
 						/* @__PURE__ */ s("span", {
@@ -705,7 +562,7 @@ var B = o.forwardRef(function({ value: u, onChange: d, minDate: f, maxDate: p, d
 							children: ":"
 						}),
 						/* @__PURE__ */ c("select", {
-							value: u ? F : "",
+							value: u ? L : "",
 							onChange: (e) => J(Number(e.target.value)),
 							className: Q,
 							"aria-label": "Minute",
@@ -714,11 +571,11 @@ var B = o.forwardRef(function({ value: u, onChange: d, minDate: f, maxDate: p, d
 								children: "--"
 							}), V.map((e) => /* @__PURE__ */ s("option", {
 								value: e,
-								children: R(e)
+								children: F(e)
 							}, e))]
 						}),
 						g === "12h" && /* @__PURE__ */ c("select", {
-							value: u ? I : "",
+							value: u ? R : "",
 							onChange: (e) => Y(e.target.value),
 							className: Q,
 							"aria-label": "AM or PM",
@@ -743,6 +600,149 @@ var B = o.forwardRef(function({ value: u, onChange: d, minDate: f, maxDate: p, d
 		})]
 	});
 });
-B.displayName = "DateTimePicker";
+L.displayName = "DateTimePicker";
+//#endregion
+//#region src/composed/date-picker/time-picker.tsx
+function R(e, t, n) {
+	let r = [];
+	for (let i = e; i <= t; i += n) r.push(i);
+	return r;
+}
+function z(e) {
+	return e.toString().padStart(2, "0");
+}
+var B = 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" ? R(1, 12, 1) : R(0, 23, 1), M = R(0, 59, f), N = R(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;
+	}, F = (e) => {
+		let t = P({ hours: e });
+		l?.(t);
+	}, I = (e) => {
+		let t = P({ minutes: e });
+		l?.(t);
+	}, L = (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: () => F(t),
+								className: e(W, H === t ? G : K),
+								"aria-label": `${t} hours`,
+								"aria-selected": H === t || void 0,
+								children: u === "24h" ? z(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: () => I(t),
+								className: e(W, D === t ? G : K),
+								"aria-label": `${z(t)} minutes`,
+								"aria-selected": D === t || void 0,
+								children: z(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: () => L(t),
+								className: e(W, O === t ? G : K),
+								"aria-label": `${z(t)} seconds`,
+								"aria-selected": O === t || void 0,
+								children: z(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))
+						})]
+					})
+				]
+			})
+		})]
+	});
+});
+B.displayName = "TimePicker";
 //#endregion
-export { j as a, N as i, L as n, A as o, P as r, O as s, B as t };
+export { j as a, N as i, L as n, A as o, P as r, k as s, B as t };