import { cn, surface } from "./cva.js";
import { jsx } from "react/jsx-runtime";
import { DayPicker } from "react-day-picker";
//#region src/Calendar.tsx
const calendarClassNames = {
	root: cn(surface({
		tone: "surface",
		radius: "lg"
	}), "p-3"),
	month_caption: "flex items-center justify-center text-fg",
	nav: "flex items-center gap-1",
	button_previous: cn(surface({
		tone: "surface",
		radius: "md"
	}), "inline-flex h-[var(--mod-touch-min)] w-[var(--mod-touch-min)] items-center justify-center border border-border hover:bg-[var(--mod-color-accent-a3)] active:bg-[var(--mod-color-accent-a4)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]"),
	button_next: cn(surface({
		tone: "surface",
		radius: "md"
	}), "inline-flex h-[var(--mod-touch-min)] w-[var(--mod-touch-min)] items-center justify-center border border-border hover:bg-[var(--mod-color-accent-a3)] active:bg-[var(--mod-color-accent-a4)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]"),
	month_grid: "w-full border-collapse",
	weekdays: "text-fg-muted",
	weekday: "text-center text-sm font-normal",
	week: "",
	day: "p-0 text-center",
	day_button: cn("inline-flex h-[var(--mod-touch-min)] w-[var(--mod-touch-min)] items-center justify-center rounded-md text-sm text-fg hover:bg-[var(--mod-color-accent-4)] hover:text-[var(--mod-color-accent-contrast)] active:bg-[var(--mod-color-accent-5)] active:text-[var(--mod-color-accent-contrast)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]"),
	selected: "bg-[var(--mod-color-accent-9)] text-[var(--mod-color-accent-contrast)] hover:bg-[var(--mod-color-accent-10)] hover:text-[var(--mod-color-accent-contrast)] active:bg-[var(--mod-color-accent-11)]",
	today: "border border-border",
	outside: "text-fg-muted opacity-50",
	disabled: "text-fg-muted opacity-[var(--mod-opacity-disabled)]"
};
function Calendar({ selected, onSelect, mode = "single", month, onMonthChange }) {
	if (mode === "multiple") return /* @__PURE__ */ jsx(DayPicker, {
		mode: "multiple",
		selected,
		month,
		onMonthChange,
		onSelect: (dates) => onSelect?.(dates?.[dates.length - 1]),
		classNames: calendarClassNames,
		showOutsideDays: true
	});
	if (mode === "range") {
		const range = selected;
		return /* @__PURE__ */ jsx(DayPicker, {
			mode: "range",
			selected: range ? {
				from: range.from,
				to: range.to
			} : void 0,
			month,
			onMonthChange,
			onSelect: (r) => onSelect?.(r?.to ?? r?.from),
			classNames: calendarClassNames,
			showOutsideDays: true
		});
	}
	return /* @__PURE__ */ jsx(DayPicker, {
		mode: "single",
		selected,
		month,
		onMonthChange,
		onSelect: (date) => onSelect?.(date),
		classNames: calendarClassNames,
		showOutsideDays: true
	});
}
//#endregion
export { Calendar };
