cupertino-datetime-picker 0.1.0

package/dist/index.js

@@ -0,0 +1,832 @@
+import { Popover as e } from "@base-ui/react/popover";
+import * as t from "react";
+import { clsx as n } from "clsx";
+import { twMerge as r } from "tailwind-merge";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/calendar.ts
+function o(e) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function s(e, t) {
+	return !!e && !!t && e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function c(e, t) {
+	return new Date(e, t + 1, 0).getDate();
+}
+function l(e) {
+	return {
+		year: e.getFullYear(),
+		month: e.getMonth()
+	};
+}
+function u(e, t) {
+	return (t.year - e.year) * 12 + (t.month - e.month);
+}
+function d(e, t) {
+	let n = e.month + t;
+	return {
+		year: e.year + Math.floor(n / 12),
+		month: (n % 12 + 12) % 12
+	};
+}
+function f(e, t, n, r) {
+	let i = new Date(e);
+	return i.setFullYear(t, n, Math.min(r, c(t, n))), i;
+}
+function p(e, t, n) {
+	let r = new Date(e);
+	return r.setHours(t, n, 0, 0), r;
+}
+function m(e, t) {
+	let n = new Date(e);
+	return n.setDate(n.getDate() + t), n;
+}
+function h(e, t) {
+	let n = d(l(e), t);
+	return f(e, n.year, n.month, e.getDate());
+}
+function g(e, t, n) {
+	let r = o(e).getTime();
+	return !!(t && r < o(t).getTime() || n && r > o(n).getTime());
+}
+function _(e, t, n) {
+	let r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = Math.ceil((r + c(e, t)) / 7);
+	return Array.from({ length: i }, (n, i) => Array.from({ length: 7 }, (n, a) => {
+		let o = new Date(e, t, i * 7 + a - r + 1);
+		return {
+			date: o,
+			inMonth: o.getMonth() === t
+		};
+	}));
+}
+function v(e) {
+	let t = y(e);
+	return t === void 0 ? +!/^(en-(US|CA|AU)|ja|ko|zh-(TW|HK)|he|pt-BR|es-(MX|US))\b/i.test(e) : t % 7;
+}
+function y(e) {
+	let t;
+	try {
+		t = new Intl.Locale(e);
+	} catch {
+		return;
+	}
+	let n = "getWeekInfo" in t && typeof t.getWeekInfo == "function" ? t.getWeekInfo() : "weekInfo" in t ? t.weekInfo : void 0;
+	return typeof n == "object" && n && "firstDay" in n && typeof n.firstDay == "number" ? n.firstDay : void 0;
+}
+//#endregion
+//#region src/time.ts
+function b(e) {
+	let t = new Intl.DateTimeFormat(e, { hour: "numeric" }).resolvedOptions().hourCycle;
+	return t === "h11" || t === "h12" ? "h12" : "h23";
+}
+function x(e) {
+	return {
+		hour: e % 12 == 0 ? 12 : e % 12,
+		pm: e >= 12
+	};
+}
+function S(e, t) {
+	return e % 12 + (t ? 12 : 0);
+}
+function C(e) {
+	let t = new Intl.DateTimeFormat(e, {
+		hour: "numeric",
+		hourCycle: "h12"
+	}), n = (e) => t.formatToParts(new Date(2e3, 0, 1, e)).find((e) => e.type === "dayPeriod")?.value ?? (e < 12 ? "AM" : "PM");
+	return {
+		am: n(1),
+		pm: n(13)
+	};
+}
+function w(e, t = "long") {
+	let n = new Intl.DateTimeFormat(e, { month: t });
+	return Array.from({ length: 12 }, (e, t) => n.format(new Date(2e3, t, 1)));
+}
+function T(e, t, n = "narrow") {
+	let r = new Intl.DateTimeFormat(e, { weekday: n });
+	return Array.from({ length: 7 }, (e, n) => r.format(new Date(2023, 0, 1 + (t + n) % 7)));
+}
+function E(e, t) {
+	return new Intl.DateTimeFormat(t, { dateStyle: "medium" }).format(e);
+}
+function D(e, t, n) {
+	return new Intl.DateTimeFormat(t, {
+		hour: n === "h12" ? "numeric" : "2-digit",
+		minute: "2-digit",
+		hourCycle: n
+	}).format(e);
+}
+function O(e, t) {
+	return new Intl.DateTimeFormat(t, {
+		month: "long",
+		year: "numeric"
+	}).format(e);
+}
+function k(e, t) {
+	return new Intl.DateTimeFormat(t, {
+		weekday: "long",
+		year: "numeric",
+		month: "long",
+		day: "numeric"
+	}).format(e);
+}
+//#endregion
+//#region src/utils.ts
+function A(...e) {
+	return r(n(e));
+}
+function j(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function M(e, t) {
+	return (e % t + t) % t;
+}
+function N(e) {
+	return e < 10 ? `0${e}` : String(e);
+}
+//#endregion
+//#region src/hooks.ts
+function P(e, n, r) {
+	let [i, a] = t.useState(n);
+	return [e === void 0 ? i : e, (t) => {
+		e === void 0 && a(t), r?.(t);
+	}];
+}
+function F() {
+	return t.useSyncExternalStore((e) => {
+		let t = window.matchMedia("(prefers-reduced-motion: reduce)");
+		return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+	}, () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, () => !1);
+}
+//#endregion
+//#region src/wheel-math.ts
+function I(e, t) {
+	return Math.round(e / t);
+}
+function L(e, t, n, r) {
+	return j(I(e + t * 380, n), 0, r);
+}
+function R(e, t, n, r) {
+	let i = e;
+	for (let a = 0; a < r; a++) {
+		let r = a * n + e;
+		Math.abs(r - t) < Math.abs(i - t) && (i = r);
+	}
+	return i;
+}
+function z(e) {
+	return 1 - (1 - e) ** 3;
+}
+//#endregion
+//#region src/wheel.tsx
+var B = 7, V = 700;
+function H({ options: e, value: n, onChange: r, loop: a = !1, itemHeight: o = 32, visibleRows: s = 5, "aria-label": c, className: l }) {
+	let u = t.useRef(null), d = F(), f = e.length, p = a ? B : 1, m = a ? Math.floor(B / 2) * f : 0, h = f * p - 1, g = Math.max(0, e.findIndex((e) => e.value === n)), _ = (s - 1) / 2 * o, v = t.useRef(m + g), y = t.useRef(null), b = t.useRef(0), x = t.useRef(0), S = t.useRef({
+		buffer: "",
+		timer: 0
+	}), C = t.useRef(!1), w = t.useRef(r), T = t.useRef(n);
+	t.useLayoutEffect(() => {
+		w.current = r, T.current = n;
+	});
+	let E = (e) => {
+		let t = D(e);
+		t && t.value !== T.current && w.current(t.value);
+	}, D = (t) => e.at(M(t, f)), O = () => {
+		let e = u.current;
+		if (!e) return;
+		let t = e.scrollTop / o, n = e.firstElementChild?.children;
+		if (!n) return;
+		let r = Math.max(0, Math.floor(t) - s), i = Math.min(n.length - 1, Math.ceil(t) + s), a = I(e.scrollTop, o);
+		for (let e = r; e <= i; e++) {
+			let r = n[e], i = e - t, o = j(i * 22, -85, 85);
+			r.style.transform = `perspective(600px) rotateX(${-o}deg)`, r.style.opacity = String(j(1 - Math.abs(i) * .28, .12, 1)), e === a ? r.dataset.active = "" : delete r.dataset.active;
+		}
+	}, k = (e, t) => {
+		let n = u.current;
+		n && n.scrollTo({
+			top: j(e, 0, h) * o,
+			behavior: t && !d ? "smooth" : "auto"
+		});
+	}, N = () => {
+		let e = u.current;
+		if (!e || y.current || b.current) return;
+		let t = I(e.scrollTop, o);
+		if (a) {
+			let n = m + M(t, f);
+			t !== n && (t = n, e.scrollTop = t * o);
+		}
+		v.current = t, E(t);
+	}, P = (e, t = !0) => {
+		let n = j(e, 0, h);
+		v.current = n, E(n), k(n, t);
+	}, H = t.useRef(!1);
+	t.useLayoutEffect(() => {
+		H.current || (H.current = !0, u.current?.scrollTo({ top: v.current * o }), O());
+	}), t.useEffect(() => {
+		if (y.current || b.current || e.at(M(v.current, f))?.value === n) return;
+		let t = a ? R(g, v.current, f, p) : g;
+		v.current = t, u.current?.scrollTo({
+			top: t * o,
+			behavior: d ? "auto" : "smooth"
+		});
+	}, [
+		n,
+		e,
+		f,
+		a,
+		g,
+		p,
+		o,
+		d,
+		v,
+		u
+	]);
+	let U = () => {
+		O(), window.clearTimeout(x.current), x.current = window.setTimeout(N, 120);
+	}, W = () => {
+		window.clearTimeout(x.current), N();
+	}, G = (e) => {
+		if (e.pointerType !== "mouse" || e.button !== 0) return;
+		let t = e.currentTarget;
+		cancelAnimationFrame(b.current), b.current = 0, t.setPointerCapture(e.pointerId), t.style.scrollSnapType = "none", y.current = {
+			startY: e.clientY,
+			startTop: t.scrollTop,
+			lastTop: t.scrollTop,
+			lastT: e.timeStamp,
+			v: 0,
+			moved: !1
+		};
+	}, ee = (e) => {
+		let t = y.current;
+		if (!t) return;
+		let n = e.currentTarget, r = j(t.startTop - (e.clientY - t.startY), 0, h * o), i = Math.max(1, e.timeStamp - t.lastT);
+		t.v = t.v * .5 + (r - t.lastTop) / i * .5, t.lastTop = r, t.lastT = e.timeStamp, Math.abs(e.clientY - t.startY) > 3 && (t.moved = !0), n.scrollTop = r;
+	}, K = (e) => {
+		let t = y.current;
+		if (!t) return;
+		y.current = null;
+		let n = e.currentTarget;
+		if (n.releasePointerCapture(e.pointerId), !t.moved) {
+			n.style.scrollSnapType = "";
+			let t = e.clientY - n.getBoundingClientRect().top;
+			P(Math.floor((n.scrollTop + t - _) / o)), C.current = !0;
+			return;
+		}
+		C.current = !0;
+		let r = L(n.scrollTop, e.timeStamp - t.lastT > 80 ? 0 : t.v, o, h), i = n.scrollTop, a = r * o, s = d ? 0 : j(Math.abs(a - i) * 1.2, 180, 720), c = e.timeStamp, l = (e) => {
+			let t = s === 0 ? 1 : Math.min(1, (e - c) / s);
+			n.scrollTop = i + (a - i) * z(t), t < 1 ? b.current = requestAnimationFrame(l) : (b.current = 0, n.style.scrollSnapType = "", N());
+		};
+		b.current = requestAnimationFrame(l);
+	}, q = (t) => {
+		let n = v.current, r = a ? m : 0, i = a ? m + f - 1 : f - 1;
+		switch (t.key) {
+			case "ArrowUp":
+				P(n - 1);
+				break;
+			case "ArrowDown":
+				P(n + 1);
+				break;
+			case "PageUp":
+				P(n - 5);
+				break;
+			case "PageDown":
+				P(n + 5);
+				break;
+			case "Home":
+				P(r);
+				break;
+			case "End":
+				P(i);
+				break;
+			default: {
+				if (t.key.length !== 1 || t.metaKey || t.ctrlKey || t.altKey) return;
+				let r = S.current;
+				window.clearTimeout(r.timer), r.buffer += t.key.toLowerCase(), r.timer = window.setTimeout(() => r.buffer = "", V);
+				let i = e.findIndex((e) => String(e.value) === r.buffer || e.label.toLowerCase().startsWith(r.buffer));
+				if (i === -1) {
+					r.buffer = t.key.toLowerCase();
+					let i = e.findIndex((e) => String(e.value) === r.buffer || e.label.toLowerCase().startsWith(r.buffer));
+					if (i === -1) return;
+					P(a ? R(i, n, f, p) : i);
+				} else P(a ? R(i, n, f, p) : i);
+				break;
+			}
+		}
+		t.preventDefault();
+	}, J = e.at(g);
+	return /* @__PURE__ */ i("div", {
+		ref: u,
+		role: "spinbutton",
+		tabIndex: 0,
+		"aria-label": c,
+		"aria-valuenow": J?.value,
+		"aria-valuetext": J?.label,
+		"aria-valuemin": e.at(0)?.value,
+		"aria-valuemax": e.at(-1)?.value,
+		"data-slot": "wheel",
+		onScroll: U,
+		onScrollEnd: W,
+		onPointerDown: G,
+		onPointerMove: ee,
+		onPointerUp: K,
+		onPointerCancel: K,
+		onKeyDown: q,
+		className: A("cdp-wheel relative snap-y snap-mandatory overflow-y-scroll overscroll-contain rounded-lg outline-none select-none focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)]", l),
+		style: {
+			height: s * o,
+			scrollbarWidth: "none",
+			touchAction: "pan-y"
+		},
+		children: /* @__PURE__ */ i("div", {
+			"aria-hidden": !0,
+			style: { paddingBlock: _ },
+			children: Array.from({ length: f * p }, (t, n) => {
+				let r = e.at(n % f);
+				return /* @__PURE__ */ i("div", {
+					role: "presentation",
+					className: "flex snap-center items-center justify-center text-[22px] leading-none text-[var(--cdp-secondary)] tabular-nums transition-colors data-active:text-[var(--cdp-label)]",
+					style: { height: o },
+					onClick: () => {
+						if (C.current) {
+							C.current = !1;
+							return;
+						}
+						P(n);
+					},
+					children: r?.label
+				}, n);
+			})
+		})
+	});
+}
+function U({ itemHeight: e = 32, className: t }) {
+	return /* @__PURE__ */ i("div", {
+		"aria-hidden": !0,
+		className: A("pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 rounded-lg bg-[var(--cdp-fill)]", t),
+		style: { height: e }
+	});
+}
+//#endregion
+//#region src/calendar-panel.tsx
+var W = {
+	previousMonth: "Previous month",
+	nextMonth: "Next month",
+	month: "Month",
+	year: "Year"
+}, G = 100, ee = 40;
+function K({ className: e }) {
+	return /* @__PURE__ */ i("svg", {
+		viewBox: "0 0 20 20",
+		className: A("size-5", e),
+		"aria-hidden": !0,
+		fill: "none",
+		children: /* @__PURE__ */ i("path", {
+			d: "M7.5 4.5 13 10l-5.5 5.5",
+			stroke: "currentColor",
+			strokeWidth: "2.25",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function q({ value: e, onChange: n, locale: r = navigator.language, min: c, max: p, labels: y, today: b, className: x }) {
+	let S = {
+		...W,
+		...y
+	}, C = b ?? o(/* @__PURE__ */ new Date()), E = v(r), [D, j] = t.useState(() => l(e ?? C)), [M, N] = t.useState(0), [P, F] = t.useState(!1), [I, L] = t.useState(e ?? C), R = t.useRef(!1), z = t.useRef(null), B = t.useRef(null), [V, q] = t.useState(e);
+	e !== V && (q(e), e && u(D, l(e)) !== 0 && (N(0), j(l(e)), L(e)));
+	let J = (e, t) => {
+		N(t), j(e);
+	}, Y = (e) => J(d(D, e), e > 0 ? 1 : -1), X = (e) => {
+		let t = d(D, e);
+		return !(e < 0 && c && u(l(c), t) < 0 || e > 0 && p && u(t, l(p)) < 0);
+	}, Z = (t) => {
+		L(t), n(f(e ?? C, t.getFullYear(), t.getMonth(), t.getDate()));
+	}, Q = (e) => {
+		if (g(e, c, p)) return;
+		R.current = !0, L(e);
+		let t = u(D, l(e));
+		t !== 0 && J(l(e), t > 0 ? 1 : -1);
+	};
+	t.useEffect(() => {
+		R.current && (R.current = !1, z.current?.querySelector(`[data-date="${o(I).getTime()}"]`)?.focus());
+	}, [I]);
+	let $ = (e) => {
+		let t = I, n = (/* @__PURE__ */ new Map([
+			["ArrowLeft", () => m(t, -1)],
+			["ArrowRight", () => m(t, 1)],
+			["ArrowUp", () => m(t, -7)],
+			["ArrowDown", () => m(t, 7)],
+			["Home", () => m(t, -((t.getDay() - E + 7) % 7))],
+			["End", () => m(t, 6 - (t.getDay() - E + 7) % 7)],
+			["PageUp", () => h(t, e.shiftKey ? -12 : -1)],
+			["PageDown", () => h(t, e.shiftKey ? 12 : 1)]
+		])).get(e.key);
+		n && (e.preventDefault(), Q(n()));
+	}, te = (e) => {
+		e.pointerType !== "mouse" && (B.current = {
+			x: e.clientX,
+			y: e.clientY
+		});
+	}, ne = (e) => {
+		let t = B.current;
+		if (B.current = null, !t) return;
+		let n = e.clientX - t.x;
+		if (Math.abs(n) < ee || Math.abs(n) < Math.abs(e.clientY - t.y)) return;
+		let r = n < 0 ? 1 : -1;
+		X(r) && Y(r);
+	}, re = _(D.year, D.month, E), ie = new Date(D.year, D.month, 1), ae = w(r).map((e, t) => ({
+		value: t,
+		label: e
+	})), oe = Array.from({ length: 201 }, (e, t) => {
+		let n = C.getFullYear() - G + t;
+		return {
+			value: n,
+			label: String(n)
+		};
+	});
+	return /* @__PURE__ */ a("div", {
+		className: A("cdp flex w-[312px] flex-col select-none", x),
+		"data-slot": "calendar",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex h-11 items-center justify-between pr-1 pl-2.5",
+			children: [/* @__PURE__ */ a("button", {
+				type: "button",
+				"aria-expanded": P,
+				onClick: () => F((e) => !e),
+				className: "flex h-9 items-center gap-1 rounded-lg px-1.5 text-[17px] font-semibold tracking-[-0.01em] text-[var(--cdp-label)] transition-opacity outline-none active:opacity-50 focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)]",
+				children: [/* @__PURE__ */ i("span", { children: O(ie, r) }), /* @__PURE__ */ i(K, { className: A("size-4 text-[var(--cdp-tint)] transition-transform duration-200", P && "rotate-90") })]
+			}), /* @__PURE__ */ a("div", {
+				className: A("flex items-center transition-opacity duration-150", P && "pointer-events-none opacity-0"),
+				children: [/* @__PURE__ */ i("button", {
+					type: "button",
+					"aria-label": S.previousMonth,
+					disabled: !X(-1),
+					onClick: () => Y(-1),
+					className: "flex size-11 items-center justify-center rounded-full text-[var(--cdp-tint)] transition-opacity outline-none active:opacity-40 disabled:opacity-30 focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)]",
+					children: /* @__PURE__ */ i(K, { className: "rotate-180" })
+				}), /* @__PURE__ */ i("button", {
+					type: "button",
+					"aria-label": S.nextMonth,
+					disabled: !X(1),
+					onClick: () => Y(1),
+					className: "flex size-11 items-center justify-center rounded-full text-[var(--cdp-tint)] transition-opacity outline-none active:opacity-40 disabled:opacity-30 focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)]",
+					children: /* @__PURE__ */ i(K, {})
+				})]
+			})]
+		}), /* @__PURE__ */ a("div", {
+			className: "relative grid px-1.5 pb-1.5",
+			children: [/* @__PURE__ */ a("div", {
+				className: A("col-start-1 row-start-1 transition-[opacity,transform] duration-200", P && "pointer-events-none scale-95 opacity-0"),
+				"aria-hidden": P,
+				children: [/* @__PURE__ */ i("div", {
+					className: "grid grid-cols-7",
+					"aria-hidden": !0,
+					children: T(r, E).map((e, t) => /* @__PURE__ */ i("div", {
+						className: "flex h-8 items-center justify-center text-[13px] font-semibold text-[var(--cdp-tertiary)]",
+						children: e
+					}, t))
+				}), /* @__PURE__ */ i("div", {
+					ref: z,
+					role: "grid",
+					tabIndex: -1,
+					"aria-label": O(ie, r),
+					"data-dir": M,
+					onKeyDown: $,
+					onPointerDown: te,
+					onPointerUp: ne,
+					className: "grid grid-cols-7 gap-y-0.5 data-[dir=-1]:animate-[cdp-slide-from-left_240ms_cubic-bezier(0.2,0.9,0.3,1)] data-[dir=1]:animate-[cdp-slide-from-right_240ms_cubic-bezier(0.2,0.9,0.3,1)]",
+					style: { touchAction: "pan-y" },
+					children: re.flat().map(({ date: t, inMonth: n }, a) => {
+						if (!n) return /* @__PURE__ */ i("div", {
+							role: "gridcell",
+							"aria-hidden": !0
+						}, a);
+						let l = s(t, e), u = s(t, C), d = g(t, c, p);
+						return /* @__PURE__ */ i("button", {
+							type: "button",
+							role: "gridcell",
+							"aria-selected": l,
+							"aria-label": k(t, r),
+							"aria-current": u ? "date" : void 0,
+							"data-date": o(t).getTime(),
+							"data-today": u || void 0,
+							"data-selected": l || void 0,
+							tabIndex: s(t, I) ? 0 : -1,
+							disabled: d,
+							onClick: () => Z(t),
+							onFocus: () => L(t),
+							className: A("mx-auto flex size-10 items-center justify-center rounded-full text-[20px] leading-none tabular-nums transition-transform duration-150 outline-none active:scale-90 focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--cdp-bg)] disabled:opacity-30", l ? u ? "bg-[var(--cdp-tint)] font-semibold text-[var(--cdp-on-tint)]" : "bg-[var(--cdp-tint-fill)] font-semibold text-[var(--cdp-tint)]" : u ? "text-[var(--cdp-tint)] hover:bg-[var(--cdp-fill)]" : "text-[var(--cdp-label)] hover:bg-[var(--cdp-fill)]"),
+							children: t.getDate()
+						}, a);
+					})
+				}, `${D.year}-${D.month}`)]
+			}), /* @__PURE__ */ a("div", {
+				className: A("cdp-wheel-mask relative col-start-1 row-start-1 flex items-center justify-center gap-2 px-2 transition-[opacity,transform] duration-200", !P && "pointer-events-none scale-95 opacity-0"),
+				"aria-hidden": !P,
+				"data-slot": "month-year",
+				children: [
+					/* @__PURE__ */ i(U, { className: "inset-x-2" }),
+					/* @__PURE__ */ i(H, {
+						"aria-label": S.month,
+						options: ae,
+						value: D.month,
+						loop: !0,
+						visibleRows: 7,
+						onChange: (e) => J({
+							year: D.year,
+							month: e
+						}, 0),
+						className: "w-40"
+					}),
+					/* @__PURE__ */ i(H, {
+						"aria-label": S.year,
+						options: oe,
+						value: D.year,
+						visibleRows: 7,
+						onChange: (e) => J({
+							year: e,
+							month: D.month
+						}, 0),
+						className: "w-24"
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/segmented-control.tsx
+function J({ options: e, value: n, onChange: r, "aria-label": o, className: s }) {
+	let c = t.useId(), l = Math.max(0, e.findIndex((e) => e.value === n));
+	return /* @__PURE__ */ a("div", {
+		role: "radiogroup",
+		"aria-label": o,
+		"data-slot": "segmented-control",
+		className: A("relative inline-grid h-8 auto-cols-fr grid-flow-col rounded-[9px] bg-[var(--cdp-fill)] p-0.5", s),
+		children: [/* @__PURE__ */ i("div", {
+			"aria-hidden": !0,
+			className: "pointer-events-none absolute inset-y-0.5 left-0.5 rounded-[7px] bg-[var(--cdp-thumb)] shadow-[0_3px_8px_rgba(0,0,0,0.12),0_3px_1px_rgba(0,0,0,0.04)] transition-transform duration-200 ease-[cubic-bezier(0.2,0,0,1)]",
+			style: {
+				width: `calc((100% - 4px) / ${e.length})`,
+				transform: `translateX(${l * 100}%)`
+			}
+		}), e.map((e) => {
+			let t = e.value === n;
+			return /* @__PURE__ */ a("label", {
+				className: A("relative z-10 flex min-w-12 cursor-pointer items-center justify-center rounded-[7px] px-3 text-[13px] font-semibold transition-colors select-none has-focus-visible:ring-2 has-focus-visible:ring-[var(--cdp-tint)]", t ? "text-[var(--cdp-label)]" : "text-[var(--cdp-label)]/80 active:opacity-60"),
+				children: [/* @__PURE__ */ i("input", {
+					type: "radio",
+					name: c,
+					checked: t,
+					onChange: () => r(e.value),
+					className: "absolute inset-0 cursor-pointer appearance-none opacity-0"
+				}), e.label]
+			}, String(e.value));
+		})]
+	});
+}
+//#endregion
+//#region src/segments.ts
+function Y(e, t, n, r) {
+	let i = e.length >= 2 ? t : e + t, a = Number(i);
+	if (a > r) {
+		let e = Number(t);
+		return e > r || e < n ? {
+			buffer: "",
+			value: null,
+			done: !1
+		} : {
+			buffer: t,
+			value: e,
+			done: e * 10 > r
+		};
+	}
+	return {
+		buffer: i,
+		value: a >= n ? a : null,
+		done: i.length === 2 || a * 10 > r
+	};
+}
+function X(e, t, n, r) {
+	let i = r - n + 1;
+	return n + ((e - n + t) % i + i) % i;
+}
+//#endregion
+//#region src/time-panel.tsx
+var Z = {
+	time: "Time",
+	hour: "Hour",
+	minute: "Minute",
+	dayPeriod: "Day period"
+};
+function Q({ value: e, onChange: n, locale: r = navigator.language, hourCycle: o, minuteInterval: s = 1, wheels: c = !0, labels: l, className: u }) {
+	let d = {
+		...Z,
+		...l
+	}, f = (o ?? b(r)) === "h12", m = e.getHours(), h = e.getMinutes(), { hour: g, pm: _ } = x(m), v = f ? g : m, y = +!!f, w = f ? 12 : 23, T = C(r), [E, D] = t.useState(null), O = t.useRef(null), k = t.useRef(null), j = (t) => n(p(e, f ? S(t, _) : t, h)), M = (t) => n(p(e, m, t)), P = (t) => n(p(e, S(g, t), h)), F = (e) => {
+		let t = e === "hour" ? O.current : k.current;
+		t?.focus(), t?.select();
+	}, I = (e, t) => {
+		let n = E?.segment === e ? E.buffer : "", r = e === "hour" ? Y(n, t, y, w) : Y(n, t, 0, 59);
+		r.value !== null && (e === "hour" ? j : M)(r.value), r.done ? (D(null), e === "hour" && F("minute")) : D({
+			segment: e,
+			buffer: r.buffer
+		});
+	}, L = (e) => (t) => {
+		let n = t.key;
+		if (/^\d$/.test(n)) {
+			t.preventDefault(), I(e, n);
+			return;
+		}
+		let r = n === "ArrowUp" ? 1 : n === "ArrowDown" ? -1 : 0;
+		if (r) {
+			t.preventDefault(), D(null), e === "hour" ? j(X(v, r, y, w)) : M(X(h, r * s, 0, 59));
+			return;
+		}
+		n === "ArrowLeft" && e === "minute" ? (t.preventDefault(), F("hour")) : n === "ArrowRight" && e === "hour" ? (t.preventDefault(), F("minute")) : n === "Backspace" || n === "Delete" ? (t.preventDefault(), D({
+			segment: e,
+			buffer: ""
+		})) : f && (n === "a" || n === "A" || n === "p" || n === "P") ? (t.preventDefault(), P(n === "p" || n === "P")) : n === "Enter" ? t.currentTarget.blur() : n.length === 1 && !t.metaKey && !t.ctrlKey && t.preventDefault();
+	}, R = (e) => (t) => {
+		t.preventDefault();
+		let n = t.nativeEvent.data ?? "";
+		for (let t of n) /\d/.test(t) && I(e, t);
+	}, z = (e) => (t) => {
+		let n = t.target.value.replace(B(e), "");
+		for (let t of n) /\d/.test(t) && I(e, t);
+	}, B = (e) => E?.segment === e ? E.buffer : e === "hour" ? f ? String(v) : N(v) : N(h), V = "box-content h-10 rounded-md bg-transparent px-1 text-center text-[32px] leading-none font-light tabular-nums text-[var(--cdp-label)] caret-transparent outline-none selection:bg-transparent focus:bg-[var(--cdp-tint-fill)] focus:text-[var(--cdp-tint)]", W = Array.from({ length: w - y + 1 }, (e, t) => {
+		let n = y + t;
+		return {
+			value: n,
+			label: f ? String(n) : N(n)
+		};
+	}), G = Array.from({ length: Math.ceil(60 / s) }, (e, t) => ({
+		value: t * s,
+		label: N(t * s)
+	}));
+	return /* @__PURE__ */ a("div", {
+		className: A("cdp flex w-[280px] flex-col gap-2 p-3 select-none", u),
+		"data-slot": "time",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ a("div", {
+				role: "group",
+				"aria-label": d.time,
+				className: "flex h-11 items-center rounded-lg bg-[var(--cdp-fill)] px-1.5",
+				"data-slot": "time-field",
+				children: [
+					/* @__PURE__ */ i("input", {
+						ref: O,
+						"aria-label": d.hour,
+						inputMode: "numeric",
+						autoComplete: "off",
+						value: B("hour"),
+						onChange: z("hour"),
+						onBeforeInput: R("hour"),
+						onKeyDown: L("hour"),
+						onFocus: (e) => e.currentTarget.select(),
+						onBlur: () => D(null),
+						className: V,
+						style: { width: `${Math.max(1, B("hour").length || 1)}ch` },
+						"data-segment": "hour"
+					}),
+					/* @__PURE__ */ i("span", {
+						className: "-mx-0.5 text-[32px] leading-none font-light text-[var(--cdp-label)]",
+						"aria-hidden": !0,
+						children: ":"
+					}),
+					/* @__PURE__ */ i("input", {
+						ref: k,
+						"aria-label": d.minute,
+						inputMode: "numeric",
+						autoComplete: "off",
+						value: B("minute"),
+						onChange: z("minute"),
+						onBeforeInput: R("minute"),
+						onKeyDown: L("minute"),
+						onFocus: (e) => e.currentTarget.select(),
+						onBlur: () => D(null),
+						className: V,
+						style: { width: "2ch" },
+						"data-segment": "minute"
+					})
+				]
+			}), f && /* @__PURE__ */ i(J, {
+				"aria-label": d.dayPeriod,
+				options: [{
+					value: !1,
+					label: T.am
+				}, {
+					value: !0,
+					label: T.pm
+				}],
+				value: _,
+				onChange: P
+			})]
+		}), c && /* @__PURE__ */ a("div", {
+			className: "cdp-wheel-mask relative flex justify-center",
+			"data-slot": "time-wheels",
+			children: [
+				/* @__PURE__ */ i(U, {}),
+				/* @__PURE__ */ i(H, {
+					"aria-label": d.hour,
+					options: W,
+					value: v,
+					loop: !0,
+					onChange: j,
+					className: "w-16"
+				}),
+				/* @__PURE__ */ i(H, {
+					"aria-label": d.minute,
+					options: G,
+					value: h - h % s,
+					loop: !0,
+					onChange: M,
+					className: "w-16"
+				}),
+				f && /* @__PURE__ */ i(H, {
+					"aria-label": d.dayPeriod,
+					options: [{
+						value: 0,
+						label: T.am
+					}, {
+						value: 1,
+						label: T.pm
+					}],
+					value: +!!_,
+					onChange: (e) => P(e === 1),
+					className: "w-16"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/date-time-picker.tsx
+var $ = "inline-flex h-[34px] items-center rounded-lg bg-[var(--cdp-fill)] px-3 text-[17px] leading-none text-[var(--cdp-label)] transition-[background-color,color] outline-none hover:bg-[var(--cdp-fill-hover)] focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)] active:opacity-60 disabled:opacity-40 data-popup-open:text-[var(--cdp-tint)]", te = "cdp origin-(--transform-origin) rounded-[13px] bg-[var(--cdp-bg)] shadow-[var(--cdp-shadow)] outline-none data-open:animate-[cdp-pop-in_260ms_cubic-bezier(0.18,0.9,0.32,1.15)] data-closed:animate-[cdp-pop-out_140ms_ease-in]";
+function ne({ value: t, defaultValue: n = null, onChange: r, mode: o = "dateTime", display: s = "compact", locale: c = navigator.language, hourCycle: l, minuteInterval: u = 1, min: d, max: f, disabled: p = !1, className: m, labels: h }) {
+	let [g, _] = P(t, n, r), v = l ?? b(c), y = o !== "time", x = o !== "date", S = g ?? /* @__PURE__ */ new Date(), C = /* @__PURE__ */ i(q, {
+		value: g,
+		onChange: _,
+		locale: c,
+		min: d,
+		max: f
+	}), w = /* @__PURE__ */ i(Q, {
+		value: S,
+		onChange: _,
+		locale: c,
+		hourCycle: v,
+		minuteInterval: u
+	}), T = /* @__PURE__ */ a(e.Root, { children: [/* @__PURE__ */ i(e.Trigger, {
+		className: $,
+		disabled: p,
+		"data-slot": "time-trigger",
+		children: g ? D(g, c, v) : h?.time ?? "Time"
+	}), /* @__PURE__ */ i(e.Portal, { children: /* @__PURE__ */ i(e.Positioner, {
+		sideOffset: 8,
+		align: "center",
+		className: "isolate z-50",
+		children: /* @__PURE__ */ i(e.Popup, {
+			className: te,
+			"data-slot": "time-popup",
+			children: w
+		})
+	}) })] });
+	return s === "inline" ? /* @__PURE__ */ a("div", {
+		className: A("cdp inline-flex flex-col items-stretch rounded-[13px] bg-[var(--cdp-bg)]", m),
+		"data-slot": "date-time-picker",
+		"data-display": "inline",
+		children: [y && C, x && (y ? /* @__PURE__ */ a("div", {
+			className: "mx-3 flex h-[52px] items-center justify-between border-t border-[var(--cdp-fill)]",
+			children: [/* @__PURE__ */ i("span", {
+				className: "text-[17px] text-[var(--cdp-label)]",
+				children: h?.time ?? "Time"
+			}), T]
+		}) : w)]
+	}) : /* @__PURE__ */ a("div", {
+		className: A("cdp inline-flex items-center gap-2", m),
+		"data-slot": "date-time-picker",
+		"data-display": "compact",
+		children: [y && /* @__PURE__ */ a(e.Root, { children: [/* @__PURE__ */ i(e.Trigger, {
+			className: "inline-flex h-[34px] items-center rounded-lg bg-[var(--cdp-fill)] px-3 text-[17px] leading-none text-[var(--cdp-label)] transition-[background-color,color] outline-none hover:bg-[var(--cdp-fill-hover)] focus-visible:ring-2 focus-visible:ring-[var(--cdp-tint)] active:opacity-60 disabled:opacity-40 data-popup-open:text-[var(--cdp-tint)]",
+			disabled: p,
+			"data-slot": "date-trigger",
+			children: g ? E(g, c) : h?.date ?? "Date"
+		}), /* @__PURE__ */ i(e.Portal, { children: /* @__PURE__ */ i(e.Positioner, {
+			sideOffset: 8,
+			align: "center",
+			className: "isolate z-50",
+			children: /* @__PURE__ */ i(e.Popup, {
+				className: "cdp origin-(--transform-origin) rounded-[13px] bg-[var(--cdp-bg)] shadow-[var(--cdp-shadow)] outline-none data-open:animate-[cdp-pop-in_260ms_cubic-bezier(0.18,0.9,0.32,1.15)] data-closed:animate-[cdp-pop-out_140ms_ease-in]",
+				"data-slot": "date-popup",
+				children: C
+			})
+		}) })] }), x && T]
+	});
+}
+//#endregion
+export { W as CALENDAR_LABELS, q as CalendarPanel, ne as DateTimePicker, J as SegmentedControl, Z as TIME_LABELS, Q as TimePanel, H as Wheel, U as WheelHighlight, m as addDays, h as addMonths, C as dayPeriodLabels, c as daysInMonth, D as formatClock, E as formatDay, k as formatFullDate, O as formatMonthYear, b as hourCycleFor, g as isDayDisabled, s as isSameDay, u as monthDiff, _ as monthGrid, w as monthNames, $ as pillClass, te as popupClass, d as shiftMonth, o as startOfDay, X as stepValue, x as to12, S as to24, Y as typeDigit, v as weekStartFor, T as weekdayNames, f as withDay, p as withTime, l as yearMonthOf };
+
+//# sourceMappingURL=index.js.map