@stll/ui 0.0.1-placeholder.0 → 0.3.0

package/dist/components/command.js

@@ -0,0 +1,100 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { useContentDir } from "../hooks/use-content-dir.js";
+import { DialogContent as DialogPopup } from "./dialog.js";
+import { SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/command.tsx
+const Command = ({ autoHighlight = "always", keepHighlight = true, open = true, ...props }) => /* @__PURE__ */ jsx(Autocomplete.Root, {
+	autoHighlight,
+	keepHighlight,
+	open,
+	...props
+});
+const CommandDialog = Dialog.Root;
+const CommandDialogTrigger = (props) => /* @__PURE__ */ jsx(Dialog.Trigger, {
+	"data-slot": "command-dialog-trigger",
+	...props
+});
+const CommandDialogPopup = ({ className, showCloseButton = false, ...props }) => /* @__PURE__ */ jsx(DialogPopup, {
+	className: cn("overflow-hidden p-0", className),
+	"data-slot": "command-dialog-popup",
+	showCloseButton,
+	...props
+});
+const CommandInput = ({ className, size = "lg", wrapperClassName, dir, onChange, ...props }) => {
+	const tracked = useContentDir({
+		dir: void 0,
+		value: void 0,
+		defaultValue: void 0
+	});
+	const handleChange = (event) => {
+		tracked.trackValue(event.currentTarget.value);
+		onChange?.(event);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-1 items-center gap-3", wrapperClassName),
+		"data-slot": "command-input-wrapper",
+		children: [/* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-5 shrink-0" }), /* @__PURE__ */ jsx(Autocomplete.Input, {
+			className: cn("placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-base outline-none disabled:cursor-not-allowed disabled:opacity-64 sm:text-sm", size === "sm" && "h-7 text-sm", size === "default" && "h-8", size === "lg" && "h-9", className),
+			"data-slot": "command-input",
+			size: typeof size === "number" ? size : void 0,
+			...props,
+			dir: dir ?? tracked.dir,
+			onChange: handleChange
+		})]
+	});
+};
+const CommandPanel = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("bg-popover text-popover-foreground flex min-h-0 flex-col rounded-lg border shadow-lg/5", className),
+	"data-slot": "command-panel",
+	...props
+});
+const CommandEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomplete.Empty, {
+	className: cn("text-muted-foreground py-6 text-center text-sm", className),
+	"data-slot": "command-empty",
+	...props
+});
+const CommandList = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomplete.List, {
+	className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+	"data-slot": "command-list",
+	...props
+});
+const CommandGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomplete.Group, {
+	className: cn("text-foreground overflow-hidden p-1", className),
+	"data-slot": "command-group",
+	...props
+});
+const CommandGroupLabel = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+	className: cn("text-muted-foreground px-2 py-1.5 text-xs font-medium", className),
+	"data-slot": "command-group-label",
+	...props
+});
+const CommandCollection = (props) => /* @__PURE__ */ jsx(Autocomplete.Collection, {
+	"data-slot": "command-collection",
+	...props
+});
+const CommandItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomplete.Item, {
+	className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+	"data-slot": "command-item",
+	...props
+});
+const CommandSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomplete.Separator, {
+	className: cn("bg-border -mx-1 h-px", className),
+	"data-slot": "command-separator",
+	...props
+});
+const CommandShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-muted-foreground ms-auto text-xs", className),
+	"data-slot": "command-shortcut",
+	...props
+});
+const CommandFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("text-muted-foreground flex items-center justify-between border-t px-3 py-2 text-xs", className),
+	"data-slot": "command-footer",
+	...props
+});
+//#endregion
+export { Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut };

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

@@ -0,0 +1,29 @@
+import { OverlayLayer } from "../lib/overlay-layer.js";
+//#region src/components/date-picker-popover.d.ts
+type DatePickerPopoverProps = {
+  id?: string;
+  /** ID of the visible field label, when the picker is part of a form field. */
+  labelledBy?: string;
+  value: string | Date | null;
+  onChange: (value: string | null) => void;
+  locale?: string;
+  isOverdue?: boolean;
+  showIcon?: boolean;
+  /** Shown in the trigger when no date is set. Falls back to an em dash so
+   *  the control still has height; pass a call-to-action ("Select date…") to
+   *  make the empty state self-explanatory. */
+  placeholderLabel?: string;
+  clearLabel?: string;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Label for the "go to today" button. Auto-localized from the locale when omitted. */
+  todayLabel?: string;
+  overdueLabel?: string;
+  minDate?: string;
+  maxDate?: string;
+  isDateDisabled?: (date: string) => boolean;
+  layer?: OverlayLayer;
+};
+declare const DatePickerPopover: (props: DatePickerPopoverProps) => import("react").JSX.Element;
+//#endregion
+export { DatePickerPopover, type DatePickerPopoverProps };

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

@@ -0,0 +1,548 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { DirectionalIcon } from "./directional-icon.js";
+import { Button } from "./button.js";
+import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
+import { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth } from "./date-picker-popover.logic.js";
+import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/date-picker-popover.tsx
+const toISODate = (date) => date.toISOString().slice(0, 10);
+const HYDRATION_DATE = "1970-01-01";
+const HYDRATION_LOCALE = "en";
+const noopSubscribe = (_onStoreChange) => () => void 0;
+const getLocalToday = () => localDateFromTimestamp(Date.now());
+const localDateListeners = /* @__PURE__ */ new Set();
+let localDateTimeoutId;
+const notifyLocalDateListeners = () => {
+	for (const listener of localDateListeners) listener();
+};
+const scheduleNextLocalDate = () => {
+	if (localDateTimeoutId !== void 0) clearTimeout(localDateTimeoutId);
+	localDateTimeoutId = setTimeout(() => {
+		notifyLocalDateListeners();
+		if (localDateListeners.size > 0) scheduleNextLocalDate();
+	}, millisecondsUntilNextLocalDate(Date.now()));
+};
+const refreshLocalDateEnvironment = () => {
+	notifyLocalDateListeners();
+	if (localDateListeners.size > 0) scheduleNextLocalDate();
+};
+const startLocalDateSubscription = () => {
+	scheduleNextLocalDate();
+	globalThis.addEventListener("focus", refreshLocalDateEnvironment);
+};
+const stopLocalDateSubscription = () => {
+	globalThis.removeEventListener("focus", refreshLocalDateEnvironment);
+	if (localDateTimeoutId !== void 0) {
+		clearTimeout(localDateTimeoutId);
+		localDateTimeoutId = void 0;
+	}
+};
+const subscribeToLocalDate = (onStoreChange) => {
+	localDateListeners.add(onStoreChange);
+	if (localDateListeners.size === 1) startLocalDateSubscription();
+	return () => {
+		localDateListeners.delete(onStoreChange);
+		if (localDateListeners.size === 0) stopLocalDateSubscription();
+	};
+};
+const useHydrationSafeToday = () => useSyncExternalStore(subscribeToLocalDate, getLocalToday, () => HYDRATION_DATE);
+const useHydrationSafeBrowserLocale = () => useSyncExternalStore(noopSubscribe, () => navigator.language || HYDRATION_LOCALE, () => HYDRATION_LOCALE);
+const getFirstDayOfWeek = (locale) => {
+	const info = getLocaleWeekInfo(locale);
+	if (!info) return 0;
+	return info.firstDay === 7 ? 6 : info.firstDay - 1;
+};
+const getMonthDays = (year, month, firstDow, weekendDays, today) => {
+	const days = [];
+	const first = new Date(Date.UTC(year, month, 1));
+	const startOffset = ((first.getUTCDay() + 6) % 7 - firstDow + 7) % 7;
+	const start = new Date(first);
+	start.setUTCDate(start.getUTCDate() - startOffset);
+	for (let i = 0; i < 42; i++) {
+		const d = new Date(start);
+		d.setUTCDate(d.getUTCDate() + i);
+		const iso = toISODate(d);
+		days.push({
+			date: iso,
+			isCurrentMonth: d.getUTCMonth() === month,
+			isToday: iso === today,
+			isWeekend: weekendDays.has(d.getUTCDay())
+		});
+	}
+	return days;
+};
+const weekdayFormatters = /* @__PURE__ */ new Map();
+const getWeekdayFormatter = (locale) => {
+	const fmt = weekdayFormatters.get(locale) ?? new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		timeZone: "UTC"
+	});
+	weekdayFormatters.set(locale, fmt);
+	return fmt;
+};
+const getWeekdayLabels = (locale, firstDow, weekendDays) => {
+	const fmt = getWeekdayFormatter(locale);
+	return Array.from({ length: 7 }, (_, i) => {
+		const d = new Date(Date.UTC(2024, 0, 1 + (i + firstDow) % 7));
+		return {
+			isWeekend: weekendDays.has(d.getUTCDay()),
+			label: fmt.format(d)
+		};
+	});
+};
+const monthFormatters = /* @__PURE__ */ new Map();
+const getMonthFormatter = (locale, format) => {
+	const key = `${locale}:${format}`;
+	const fmt = monthFormatters.get(key) ?? new Intl.DateTimeFormat(locale, {
+		month: format,
+		calendar: "gregory",
+		timeZone: "UTC"
+	});
+	monthFormatters.set(key, fmt);
+	return fmt;
+};
+const getMonthLabels = (locale, format = "long") => {
+	const fmt = getMonthFormatter(locale, format);
+	return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(Date.UTC(2024, i, 1))));
+};
+const monthYearFormatters = /* @__PURE__ */ new Map();
+const getMonthYearFormatter = (locale) => {
+	const fmt = monthYearFormatters.get(locale) ?? new Intl.DateTimeFormat(locale, {
+		month: "long",
+		year: "numeric",
+		calendar: "gregory",
+		timeZone: "UTC"
+	});
+	monthYearFormatters.set(locale, fmt);
+	return fmt;
+};
+const formatMonthYear = (locale, year, month) => getMonthYearFormatter(locale).format(new Date(Date.UTC(year, month, 1)));
+const relativeTimeFormatters = /* @__PURE__ */ new Map();
+const getRelativeTimeFormatter = (locale) => {
+	const fmt = relativeTimeFormatters.get(locale) ?? new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+	relativeTimeFormatters.set(locale, fmt);
+	return fmt;
+};
+/** Derive a locale-correct "Today" label (e.g., "Dnes", "Heute", "Today"). */
+const deriveTodayLabel = (locale) => {
+	const raw = getRelativeTimeFormatter(locale).format(0, "day");
+	return raw.charAt(0).toUpperCase() + raw.slice(1);
+};
+const normalizeDate = (v) => {
+	if (v === null || v === void 0) return "";
+	if (v instanceof Date) return v.toISOString().slice(0, 10);
+	return v.length >= 10 ? v.slice(0, 10) : v;
+};
+const addDays = (iso, n) => {
+	const d = /* @__PURE__ */ new Date(`${iso}T00:00:00Z`);
+	d.setUTCDate(d.getUTCDate() + n);
+	return toISODate(d);
+};
+const isBefore = (a, b) => a < b;
+const isAfter = (a, b) => a > b;
+/** Round down to the start of a decade (e.g. 2026 → 2020). */
+const decadeStart = (year) => Math.floor(year / 10) * 10;
+const DECADE_SIZE = 12;
+const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today }) => {
+	const value = normalizeDate(rawValue);
+	const displayValueId = useId();
+	const todayLabel = todayLabelProp ?? deriveTodayLabel(locale);
+	const firstDow = useMemo(() => getFirstDayOfWeek(locale), [locale]);
+	const weekendDays = useMemo(() => getWeekendDays(locale), [locale]);
+	const [viewMonthOverride, setViewMonthOverride] = useState(null);
+	const { month: viewMonth, year: viewYear } = resolveCalendarViewMonth({
+		override: viewMonthOverride,
+		today,
+		value
+	});
+	const [view, setView] = useState("days");
+	const [decadeBaseOverride, setDecadeBaseOverride] = useState(null);
+	const decadeBase = decadeBaseOverride ?? decadeStart(viewYear);
+	const days = useMemo(() => getMonthDays(viewYear, viewMonth, firstDow, weekendDays, today), [
+		viewYear,
+		viewMonth,
+		firstDow,
+		weekendDays,
+		today
+	]);
+	const weekdays = useMemo(() => getWeekdayLabels(locale, firstDow, weekendDays), [
+		locale,
+		firstDow,
+		weekendDays
+	]);
+	const [focusedDate, setFocusedDate] = useState("");
+	const gridRef = useRef(null);
+	const isDayDisabled = useCallback((date) => {
+		if (minDate && isBefore(date, minDate)) return true;
+		if (maxDate && isAfter(date, maxDate)) return true;
+		if (isDateDisabled?.(date)) return true;
+		return false;
+	}, [
+		minDate,
+		maxDate,
+		isDateDisabled
+	]);
+	const displayLabel = value ? (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).toLocaleDateString(locale, {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+		calendar: "gregory",
+		timeZone: "UTC"
+	}) : placeholderLabel ?? "—";
+	const formatDayLabel = useCallback((iso) => (/* @__PURE__ */ new Date(`${iso}T00:00:00Z`)).toLocaleDateString(locale, {
+		weekday: "long",
+		month: "long",
+		day: "numeric",
+		year: "numeric",
+		calendar: "gregory",
+		timeZone: "UTC"
+	}), [locale]);
+	const handleGridKeyDown = useCallback((e) => {
+		const firstDay = days.at(0);
+		if (!firstDay) return;
+		const current = focusedDate || value || firstDay.date;
+		let next = null;
+		const horizontalStep = gridRef.current !== null && getComputedStyle(gridRef.current).direction === "rtl" ? -1 : 1;
+		if (e.key === "ArrowRight") next = addDays(current, horizontalStep);
+		else if (e.key === "ArrowLeft") next = addDays(current, -horizontalStep);
+		else if (e.key === "ArrowDown") next = addDays(current, 7);
+		else if (e.key === "ArrowUp") next = addDays(current, -7);
+		else if (e.key === "Home") {
+			const offset = (((/* @__PURE__ */ new Date(`${current}T00:00:00Z`)).getUTCDay() + 6) % 7 - firstDow + 7) % 7;
+			next = addDays(current, -offset);
+		} else if (e.key === "End") {
+			const offset = (((/* @__PURE__ */ new Date(`${current}T00:00:00Z`)).getUTCDay() + 6) % 7 - firstDow + 7) % 7;
+			next = addDays(current, 6 - offset);
+		} else if (e.key === "PageUp") {
+			const d = /* @__PURE__ */ new Date(`${current}T00:00:00Z`);
+			if (e.shiftKey) d.setUTCFullYear(d.getUTCFullYear() - 1);
+			else d.setUTCMonth(d.getUTCMonth() - 1);
+			next = toISODate(d);
+		} else if (e.key === "PageDown") {
+			const d = /* @__PURE__ */ new Date(`${current}T00:00:00Z`);
+			if (e.shiftKey) d.setUTCFullYear(d.getUTCFullYear() + 1);
+			else d.setUTCMonth(d.getUTCMonth() + 1);
+			next = toISODate(d);
+		} else {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				if (!isDayDisabled(current)) onChange(current);
+			}
+			return;
+		}
+		e.preventDefault();
+		if (next) {
+			setFocusedDate(next);
+			const nextDate = /* @__PURE__ */ new Date(`${next}T00:00:00Z`);
+			const nextMonth = nextDate.getUTCMonth();
+			const nextYear = nextDate.getUTCFullYear();
+			if (nextMonth !== viewMonth || nextYear !== viewYear) setViewMonthOverride({
+				month: nextMonth,
+				year: nextYear
+			});
+			requestAnimationFrame(() => {
+				(gridRef.current?.querySelector(`[data-date="${next}"]`))?.focus();
+			});
+		}
+	}, [
+		focusedDate,
+		value,
+		days,
+		firstDow,
+		viewMonth,
+		viewYear,
+		isDayDisabled,
+		onChange,
+		setViewMonthOverride
+	]);
+	const handlePrev = () => {
+		if (view === "days") if (viewMonth === 0) setViewMonthOverride({
+			month: 11,
+			year: viewYear - 1
+		});
+		else setViewMonthOverride({
+			month: viewMonth - 1,
+			year: viewYear
+		});
+		else if (view === "months") setViewMonthOverride({
+			month: viewMonth,
+			year: viewYear - 1
+		});
+		else setDecadeBaseOverride(decadeBase - 10);
+	};
+	const handleNext = () => {
+		if (view === "days") if (viewMonth === 11) setViewMonthOverride({
+			month: 0,
+			year: viewYear + 1
+		});
+		else setViewMonthOverride({
+			month: viewMonth + 1,
+			year: viewYear
+		});
+		else if (view === "months") setViewMonthOverride({
+			month: viewMonth,
+			year: viewYear + 1
+		});
+		else setDecadeBaseOverride(decadeBase + 10);
+	};
+	const headerLabel = (() => {
+		if (view === "days") return formatMonthYear(locale, viewYear, viewMonth);
+		if (view === "months") return String(viewYear);
+		return `${decadeBase}\u2013${decadeBase + 9}`;
+	})();
+	const handleHeaderClick = () => {
+		if (view === "days") setView("months");
+		else if (view === "months") {
+			setDecadeBaseOverride(decadeStart(viewYear));
+			setView("years");
+		}
+	};
+	const handleMonthSelect = (month) => {
+		setViewMonthOverride({
+			month,
+			year: viewYear
+		});
+		setView("days");
+	};
+	const handleYearSelect = (year) => {
+		setViewMonthOverride({
+			month: viewMonth,
+			year
+		});
+		setDecadeBaseOverride(decadeStart(year));
+		setView("months");
+	};
+	const selectedYear = value ? (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).getUTCFullYear() : null;
+	const selectedMonth = value ? (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).getUTCMonth() : null;
+	const handleOpenChange = (open) => {
+		onOpenChange?.(open);
+		if (!open) {
+			setView("days");
+			setDecadeBaseOverride(decadeStart(viewYear));
+		}
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		defaultOpen,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				"aria-label": !labelledBy && value ? displayLabel : void 0,
+				"aria-labelledby": labelledBy ? `${labelledBy} ${displayValueId}` : void 0,
+				className: cn("flex h-auto min-h-7 w-full min-w-0 items-center gap-1.5", "rounded-md px-1.5 text-sm", "hover:bg-muted transition-colors", (() => {
+					if (isOverdue) return "text-destructive";
+					if (value) return "text-foreground";
+					return "text-muted-foreground";
+				})()),
+				id,
+				type: "button"
+			}),
+			children: [
+				showIcon && /* @__PURE__ */ jsx(CalendarIcon, { className: "size-3.5 shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 overflow-hidden text-start wrap-break-word text-ellipsis",
+					id: labelledBy ? displayValueId : void 0,
+					children: displayLabel
+				}),
+				isOverdue && overdueLabel && /* @__PURE__ */ jsx("span", {
+					className: "text-destructive text-xs",
+					children: overdueLabel
+				})
+			]
+		}), /* @__PURE__ */ jsx(PopoverPopup, {
+			className: "*:data-[slot=popover-viewport]:p-2!",
+			layer,
+			side: "bottom",
+			sideOffset: 4,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "w-60",
+				role: "dialog",
+				"aria-label": "Date picker",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-1 pb-1",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								"aria-label": (() => {
+									if (view === "days") return "Previous month";
+									if (view === "months") return "Previous year";
+									return "Previous decade";
+								})(),
+								onClick: handlePrev,
+								size: "icon-xs",
+								variant: "ghost",
+								children: /* @__PURE__ */ jsx(DirectionalIcon, { icon: ChevronLeftIcon })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								className: cn("text-xs font-medium transition-colors", view !== "years" && "hover:bg-muted cursor-pointer rounded-md px-2 py-0.5", view === "years" && "cursor-default"),
+								onClick: handleHeaderClick,
+								tabIndex: view === "years" ? -1 : 0,
+								type: "button",
+								children: headerLabel
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								"aria-label": (() => {
+									if (view === "days") return "Next month";
+									if (view === "months") return "Next year";
+									return "Next decade";
+								})(),
+								onClick: handleNext,
+								size: "icon-xs",
+								variant: "ghost",
+								children: /* @__PURE__ */ jsx(DirectionalIcon, { icon: ChevronRightIcon })
+							})
+						]
+					}),
+					view === "days" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						className: "grid grid-cols-7 gap-0",
+						role: "row",
+						"aria-hidden": "true",
+						children: weekdays.map((weekday) => /* @__PURE__ */ jsx("span", {
+							className: cn("py-1 text-center text-[10px]", weekday.isWeekend ? "text-muted-foreground" : "text-foreground-label"),
+							children: weekday.label
+						}, weekday.label))
+					}), /* @__PURE__ */ jsx("div", {
+						"aria-label": headerLabel,
+						className: "grid grid-cols-7 gap-0",
+						onKeyDown: handleGridKeyDown,
+						ref: gridRef,
+						role: "grid",
+						tabIndex: -1,
+						children: days.map((day) => {
+							const isSelected = day.date === value;
+							const isFocused = day.date === focusedDate || !focusedDate && isSelected || !focusedDate && !value && day.isToday;
+							const disabled = isDayDisabled(day.date);
+							return /* @__PURE__ */ jsx("button", {
+								"aria-current": day.isToday ? "date" : void 0,
+								"aria-disabled": disabled || void 0,
+								"aria-label": formatDayLabel(day.date),
+								"aria-selected": isSelected || void 0,
+								className: cn("flex size-8 items-center justify-center", "rounded-full text-xs transition-colors", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", disabled ? "text-foreground-disabled cursor-not-allowed" : "hover:bg-muted cursor-pointer", !day.isCurrentMonth && !disabled && "text-foreground-disabled", day.isWeekend && day.isCurrentMonth && !disabled && !isSelected && "text-foreground-label", day.isToday && !isSelected && !disabled && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
+								"data-date": day.date,
+								onClick: () => {
+									if (!disabled) onChange(day.date);
+								},
+								role: "gridcell",
+								tabIndex: isFocused ? 0 : -1,
+								type: "button",
+								children: Number.parseInt(day.date.slice(8), 10)
+							}, day.date);
+						})
+					})] }),
+					view === "months" && /* @__PURE__ */ jsx(MonthGrid, {
+						currentMonth: selectedMonth,
+						currentYear: selectedYear,
+						locale,
+						onSelect: handleMonthSelect,
+						today,
+						viewYear
+					}),
+					view === "years" && /* @__PURE__ */ jsx(YearGrid, {
+						currentYear: selectedYear,
+						decadeBase,
+						onSelect: handleYearSelect,
+						today
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-1 flex items-center gap-1 border-t pt-1",
+						children: [/* @__PURE__ */ jsx(Button, {
+							className: "flex-1",
+							onClick: () => {
+								const todayDate = /* @__PURE__ */ new Date(`${today}T00:00:00Z`);
+								setViewMonthOverride({
+									month: todayDate.getUTCMonth(),
+									year: todayDate.getUTCFullYear()
+								});
+								setView("days");
+							},
+							size: "xs",
+							variant: "ghost",
+							children: todayLabel
+						}), value && /* @__PURE__ */ jsx(Button, {
+							className: "flex-1",
+							onClick: () => onChange(null),
+							size: "xs",
+							variant: "ghost",
+							children: clearLabel
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+const DatePickerPopover = (props) => {
+	const browserLocale = useHydrationSafeBrowserLocale();
+	const today = useHydrationSafeToday();
+	const locale = props.locale ?? browserLocale;
+	return /* @__PURE__ */ jsx(DatePickerPopoverContent, {
+		...props,
+		locale,
+		today
+	});
+};
+const MONTHS_PER_ROW = 3;
+const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, today }) => {
+	const labels = useMemo(() => getMonthLabels(locale, "short"), [locale]);
+	const now = /* @__PURE__ */ new Date(`${today}T00:00:00Z`);
+	const todayMonth = now.getUTCMonth();
+	const todayYear = now.getUTCFullYear();
+	const rows = [];
+	for (let r = 0; r < 12; r += MONTHS_PER_ROW) rows.push(Array.from({ length: MONTHS_PER_ROW }, (_, c) => r + c));
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-3 gap-1 py-1",
+		role: "grid",
+		children: rows.map((row) => /* @__PURE__ */ jsx("div", {
+			className: "contents",
+			role: "row",
+			children: row.map((month) => {
+				const isSelected = currentMonth !== null && currentYear !== null && month === currentMonth && viewYear === currentYear;
+				return /* @__PURE__ */ jsxs("button", {
+					"aria-selected": isSelected || void 0,
+					className: cn("rounded-md px-2 py-1.5 text-xs transition-colors", "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", month === todayMonth && viewYear === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
+					onClick: () => onSelect(month),
+					role: "gridcell",
+					type: "button",
+					children: [!/^\d/u.test(labels[month] ?? "") && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: cn("me-1 text-[10px] tabular-nums opacity-50", !isSelected && "text-muted-foreground"),
+						children: month + 1
+					}), labels[month]]
+				}, month);
+			})
+		}, row[0]))
+	});
+};
+const YEARS_PER_ROW = 3;
+const YearGrid = ({ decadeBase, currentYear, onSelect, today }) => {
+	const todayYear = (/* @__PURE__ */ new Date(`${today}T00:00:00Z`)).getUTCFullYear();
+	const startYear = decadeBase - 1;
+	const rows = [];
+	for (let r = 0; r < DECADE_SIZE; r += YEARS_PER_ROW) rows.push(Array.from({ length: Math.min(YEARS_PER_ROW, DECADE_SIZE - r) }, (_, c) => r + c));
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-3 gap-1 py-1",
+		role: "grid",
+		children: rows.map((row) => /* @__PURE__ */ jsx("div", {
+			className: "contents",
+			role: "row",
+			children: row.map((i) => {
+				const year = startYear + i;
+				const isOutside = i === 0 || i === 11;
+				const isSelected = currentYear !== null && year === currentYear;
+				return /* @__PURE__ */ jsx("button", {
+					"aria-selected": isSelected || void 0,
+					className: cn("rounded-md px-2 py-1.5 text-xs transition-colors", "hover:bg-muted cursor-pointer", "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none", isOutside && !isSelected && "text-foreground-subtle", year === todayYear && !isSelected && "ring-foreground font-medium ring-1", isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"),
+					onClick: () => onSelect(year),
+					role: "gridcell",
+					type: "button",
+					children: year
+				}, year);
+			})
+		}, row[0]))
+	});
+};
+//#endregion
+export { DatePickerPopover };

package/dist/components/date-picker-popover.logic.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/date-picker-popover.logic.d.ts
+type CalendarMonth = {
+  month: number;
+  year: number;
+};
+declare const localDateFromTimestamp: (timestamp: number) => string;
+declare const resolveCalendarViewMonth: ({ override, today, value }: {
+  override: CalendarMonth | null;
+  today: string;
+  value: string;
+}) => CalendarMonth;
+declare const millisecondsUntilNextLocalDate: (timestamp: number) => number;
+//#endregion
+export { CalendarMonth, localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth };