import { jsx, jsxs } from "react/jsx-runtime"; import { b as buttonVariants, B as Button } from "./button-CdJZJLGw.js"; import { ChevronRight, ChevronLeft, CalendarIcon } from "lucide-react"; import { DayPicker } from "react-day-picker"; import { c as cn } from "./utils-DLCPGU0v.js"; import { P as Popover, a as PopoverTrigger, b as PopoverContent } from "./popover-Cv6Hz_y0.js"; import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem } from "./select-BYx0MCUK.js"; import { u as useLang } from "./use-lang-44ndmTOc.js"; import { format } from "date-fns"; function Calendar({ className, classNames, showOutsideDays = true, ...props }) { return /* @__PURE__ */ jsx( DayPicker, { showOutsideDays, className: cn("p-3", className), classNames: { months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", nav_button: cn( buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100" ), nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", table: "w-full border-collapse space-y-1", head_row: "flex", head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: cn( "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md" ), day: cn( buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100" ), day_range_start: "day-range-start", day_range_end: "day-range-end", day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", day_hidden: "invisible", ...classNames }, components: { IconLeft: ({ className: className2, ...props2 }) => /* @__PURE__ */ jsx(ChevronLeft, { className: cn("h-4 w-4", className2), ...props2 }), IconRight: ({ className: className2, ...props2 }) => /* @__PURE__ */ jsx(ChevronRight, { className: cn("h-4 w-4", className2), ...props2 }) }, ...props } ); } Calendar.displayName = "Calendar"; function DateTimePicker({ date, setDate }) { const { button } = useLang(); const minuteOptions = Array.from({ length: 60 }, (_, i) => i); const hourOptions = Array.from({ length: 12 }, (_, i) => i + 1); const handleTimeChange = (type, value) => { const newDate = new Date(date); if (type === "hour") { let hour = parseInt(value); if (date.getHours() >= 12) { hour = hour === 12 ? 12 : hour + 12; } else { hour = hour === 12 ? 0 : hour; } newDate.setHours(hour); } else if (type === "minute") { newDate.setMinutes(parseInt(value)); } else if (type === "meridiem") { const hours = newDate.getHours(); if (value === "PM" && hours < 12) { newDate.setHours(hours + 12); } else if (value === "AM" && hours >= 12) { newDate.setHours(hours - 12); } } setDate(newDate); }; return /* @__PURE__ */ jsxs(Popover, { children: [ /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: cn("w-full justify-between px-3 text-left font-normal", !date && "text-muted-foreground"), children: [ date ? format(date, "PPP p") : /* @__PURE__ */ jsx("span", { children: button.pick_a_date }), /* @__PURE__ */ jsx(CalendarIcon, { className: "ml-2 h-4 w-4" }) ] }) }), /* @__PURE__ */ jsxs(PopoverContent, { className: "w-auto p-0", align: "start", children: [ /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: date, onSelect: (newDate) => newDate && setDate(newDate), initialFocus: true }), /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t p-3", children: [ /* @__PURE__ */ jsxs(Select, { value: format(date, "h"), onValueChange: (value) => handleTimeChange("hour", value), children: [ /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }), /* @__PURE__ */ jsx(SelectContent, { children: hourOptions.map((hour) => /* @__PURE__ */ jsx(SelectItem, { value: hour.toString(), children: hour.toString().padStart(2, "0") }, hour)) }) ] }), /* @__PURE__ */ jsx("span", { children: ":" }), /* @__PURE__ */ jsxs(Select, { value: date.getMinutes().toString(), onValueChange: (value) => handleTimeChange("minute", value), children: [ /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }), /* @__PURE__ */ jsx(SelectContent, { children: minuteOptions.map((minute) => /* @__PURE__ */ jsx(SelectItem, { value: minute.toString(), children: minute.toString().padStart(2, "0") }, minute)) }) ] }), /* @__PURE__ */ jsxs(Select, { value: format(date, "a"), onValueChange: (value) => handleTimeChange("meridiem", value), children: [ /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }), /* @__PURE__ */ jsxs(SelectContent, { children: [ /* @__PURE__ */ jsx(SelectItem, { value: "AM", children: "AM" }), /* @__PURE__ */ jsx(SelectItem, { value: "PM", children: "PM" }) ] }) ] }) ] }) ] }) ] }); } export { DateTimePicker as D };