@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/date-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.mjs","names":["CalendarIcon","Calendar"],"sources":["../src/date-picker.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {addDays, format} from \"date-fns\";\nimport {Calendar as CalendarIcon} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {Calendar} from \"./calendar\";\nimport {Input} from \"./input\";\nimport {Label} from \"./label\";\nimport {Popover, PopoverContent, PopoverTrigger} from \"./popover\";\nimport {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from \"./select\";\nimport {HoverTooltip} from \"./tooltip\";\n\n/**\n * Shared by every picker here: where the calendar popover is portalled, and whether it is its own\n * modal layer. Both default to the right thing — the popover renders inside the enclosing\n * `DialogContent` when there is one, which is what keeps the calendar clickable inside a dialog\n * (issue #294) — so these exist for the host that needs to override it.\n */\nexport interface DatePickerPopoverProps {\n\t/** Portal target. Defaults to the enclosing `DialogContent`, else `document.body`. `null` forces `document.body`. */\n\tcontainer?: HTMLElement | null;\n\t/** Makes the popover its own modal layer (takes pointer events from below and traps focus). */\n\tmodal?: boolean;\n}\n\nexport interface DatePickerProps extends DatePickerPopoverProps {\n\tdate?: Date;\n\tonDateChange?: (date: Date | undefined) => void;\n\tplaceholder?: string;\n\tclassName?: string;\n\tdisabled?: boolean;\n}\n\n/** Date picker with multiple variants including presets, date-time, and range selection. */\nfunction DatePicker({\n\tdate,\n\tonDateChange,\n\tplaceholder = \"Pick a date\",\n\tclassName,\n\tdisabled = false,\n\tcontainer,\n\tmodal,\n}: DatePickerProps) {\n\treturn (\n\t\t<Popover modal={modal}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:h-9 wwc:w-[280px] wwc:justify-start wwc:text-left wwc:font-normal\",\n\t\t\t\t\t\t!date && \"wwc:text-muted-foreground\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t>\n\t\t\t\t\t<CalendarIcon />\n\t\t\t\t\t{date ? format(date, \"PPP\") : <span>{placeholder}</span>}\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent container={container} className=\"wwc:w-auto wwc:p-0\">\n\t\t\t\t<Calendar mode=\"single\" selected={date} onSelect={onDateChange} initialFocus />\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\n// Date Picker with Presets\nexport interface DatePickerWithPresetsProps extends DatePickerPopoverProps {\n\tdate?: Date;\n\tonDateChange?: (date: Date | undefined) => void;\n\tclassName?: string;\n}\n\nfunction DatePickerWithPresets({date, onDateChange, className, container, modal}: DatePickerWithPresetsProps) {\n\treturn (\n\t\t<Popover modal={modal}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:h-9 wwc:w-[280px] wwc:justify-start wwc:text-left wwc:font-normal\",\n\t\t\t\t\t\t!date && \"wwc:text-muted-foreground\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<CalendarIcon />\n\t\t\t\t\t{date ? format(date, \"PPP\") : <span>Pick a date</span>}\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent container={container} className=\"wwc:flex wwc:w-auto wwc:flex-col wwc:space-y-2 wwc:p-2\">\n\t\t\t\t<Select onValueChange={(value) => onDateChange?.(addDays(new Date(), Number.parseInt(value)))}>\n\t\t\t\t\t<SelectTrigger>\n\t\t\t\t\t\t<SelectValue placeholder=\"Select\" />\n\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t<SelectContent position=\"popper\">\n\t\t\t\t\t\t<SelectItem value=\"0\">Today</SelectItem>\n\t\t\t\t\t\t<SelectItem value=\"1\">Tomorrow</SelectItem>\n\t\t\t\t\t\t<SelectItem value=\"3\">In 3 days</SelectItem>\n\t\t\t\t\t\t<SelectItem value=\"7\">In a week</SelectItem>\n\t\t\t\t\t</SelectContent>\n\t\t\t\t</Select>\n\t\t\t\t<div className=\"wwc:rounded-md wwc:border\">\n\t\t\t\t\t<Calendar mode=\"single\" selected={date} onSelect={onDateChange} />\n\t\t\t\t</div>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\n// Date Picker for Form (Date of Birth style with dropdowns)\nexport interface DatePickerFormProps extends DatePickerPopoverProps {\n\tdate?: Date;\n\tonDateChange?: (date: Date | undefined) => void;\n\tlabel?: string;\n\tdescription?: string;\n\tclassName?: string;\n}\n\nfunction DatePickerForm({\n\tdate,\n\tonDateChange,\n\tlabel = \"Date of birth\",\n\tdescription,\n\tclassName,\n\tcontainer,\n\tmodal,\n}: DatePickerFormProps) {\n\treturn (\n\t\t<div className={cn(\"wwc:space-y-2\", className)}>\n\t\t\t<Label>{label}</Label>\n\t\t\t<Popover modal={modal}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:h-9 wwc:w-[280px] wwc:justify-start wwc:text-left wwc:font-normal\",\n\t\t\t\t\t\t\t!date && \"wwc:text-muted-foreground\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CalendarIcon />\n\t\t\t\t\t\t{date ? format(date, \"PPP\") : <span>Pick a date</span>}\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent container={container} className=\"wwc:w-auto wwc:p-0\" align=\"start\">\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\tmode=\"single\"\n\t\t\t\t\t\tselected={date}\n\t\t\t\t\t\tonSelect={onDateChange}\n\t\t\t\t\t\tcaptionLayout=\"dropdown\"\n\t\t\t\t\t\tstartMonth={new Date(1900, 0)}\n\t\t\t\t\t\tendMonth={new Date()}\n\t\t\t\t\t\tinitialFocus\n\t\t\t\t\t/>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t\t{description && <p className=\"wwc:text-sm wwc:text-muted-foreground\">{description}</p>}\n\t\t</div>\n\t);\n}\n\n// Date Picker with Input\nexport interface DatePickerWithInputProps extends DatePickerPopoverProps {\n\tdate?: Date;\n\tonDateChange?: (date: Date | undefined) => void;\n\tclassName?: string;\n}\n\nfunction DatePickerWithInput({date, onDateChange, className, container, modal}: DatePickerWithInputProps) {\n\tconst [inputValue, setInputValue] = React.useState(\"\");\n\n\tReact.useEffect(() => {\n\t\tif (date) {\n\t\t\tsetInputValue(format(date, \"MM/dd/yyyy\"));\n\t\t}\n\t}, [date]);\n\n\tconst handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst value = e.target.value;\n\t\tsetInputValue(value);\n\n\t\t// Try to parse the date\n\t\tconst parsed = new Date(value);\n\t\tif (!Number.isNaN(parsed.getTime())) {\n\t\t\tonDateChange?.(parsed);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={cn(\"wwc:flex wwc:gap-2\", className)}>\n\t\t\t<Input\n\t\t\t\ttype=\"text\"\n\t\t\t\tplaceholder=\"MM/DD/YYYY\"\n\t\t\t\tvalue={inputValue}\n\t\t\t\tonChange={handleInputChange}\n\t\t\t\tclassName=\"wwc:w-[150px]\"\n\t\t\t/>\n\t\t\t<Popover modal={modal}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t{/* h-9/w-9 so the trigger squares up with the Input beside it. */}\n\t\t\t\t\t<Button variant=\"outline\" icon className=\"wwc:h-9 wwc:w-9\">\n\t\t\t\t\t\t<CalendarIcon className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent container={container} className=\"wwc:w-auto wwc:p-0\" align=\"start\">\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\tmode=\"single\"\n\t\t\t\t\t\tselected={date}\n\t\t\t\t\t\tonSelect={(newDate) => {\n\t\t\t\t\t\t\tonDateChange?.(newDate);\n\t\t\t\t\t\t\tif (newDate) {\n\t\t\t\t\t\t\t\tsetInputValue(format(newDate, \"MM/dd/yyyy\"));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tinitialFocus\n\t\t\t\t\t/>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t</div>\n\t);\n}\n\n// Date and Time Picker\nexport interface DateTimePickerProps extends DatePickerPopoverProps {\n\tdate?: Date;\n\tonDateChange?: (date: Date | undefined) => void;\n\t/**\n\t * `\"split\"` (default) renders a date button beside a separate time select — two controls.\n\t * `\"unified\"` renders a single trigger whose popover holds the calendar, the time row, and\n\t * Cancel/Apply, mirroring `DateRangeTimePicker`. Prefer `\"unified\"` inside forms, where two\n\t * side-by-side controls under one label read as two fields.\n\t */\n\tvariant?: \"split\" | \"unified\";\n\t/** Trigger text before a date is picked. Unified variant only. */\n\tplaceholder?: string;\n\tclassName?: string;\n}\n\nfunction DateTimePicker({\n\tdate,\n\tonDateChange,\n\tvariant = \"split\",\n\tplaceholder,\n\tclassName,\n\tcontainer,\n\tmodal,\n}: DateTimePickerProps) {\n\tif (variant === \"unified\") {\n\t\treturn (\n\t\t\t<UnifiedDateTimePicker\n\t\t\t\tdate={date}\n\t\t\t\tonDateChange={onDateChange}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tclassName={className}\n\t\t\t\tcontainer={container}\n\t\t\t\tmodal={modal}\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<SplitDateTimePicker\n\t\t\tdate={date}\n\t\t\tonDateChange={onDateChange}\n\t\t\tclassName={className}\n\t\t\tcontainer={container}\n\t\t\tmodal={modal}\n\t\t/>\n\t);\n}\n\n/**\n * Single trigger + popover (calendar, time row, Cancel/Apply). Edits are staged locally and only\n * committed on Apply, matching DateRangeTimePicker — so dismissing the popover discards.\n */\nfunction UnifiedDateTimePicker({\n\tdate,\n\tonDateChange,\n\tplaceholder = \"Pick date & time\",\n\tclassName,\n\tcontainer,\n\tmodal,\n}: DatePickerPopoverProps & {\n\tdate?: Date;\n\tonDateChange?: (date: Date | undefined) => void;\n\tplaceholder?: string;\n\tclassName?: string;\n}) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [localDate, setLocalDate] = React.useState<Date | undefined>(date);\n\tconst [timeValue, setTimeValue] = React.useState(date ? format(date, \"hh:mm a\") : \"12:00 AM\");\n\n\tReact.useEffect(() => {\n\t\tif (date) {\n\t\t\tsetLocalDate(date);\n\t\t\tsetTimeValue(format(date, \"hh:mm a\"));\n\t\t}\n\t}, [date]);\n\n\tconst handleApply = () => {\n\t\tonDateChange?.(applyTimeToDate(localDate, timeValue));\n\t\tsetOpen(false);\n\t};\n\n\tconst handleCancel = () => {\n\t\tsetLocalDate(date);\n\t\tsetTimeValue(date ? format(date, \"hh:mm a\") : \"12:00 AM\");\n\t\tsetOpen(false);\n\t};\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={setOpen} modal={modal}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:h-9 wwc:w-full wwc:justify-start wwc:text-left wwc:font-normal\",\n\t\t\t\t\t\t!date && \"wwc:text-muted-foreground\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<CalendarIcon />\n\t\t\t\t\t<span className=\"wwc:truncate\">{date ? format(date, \"PPP p\") : placeholder}</span>\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent container={container} className=\"wwc:w-auto wwc:p-0\" align=\"start\">\n\t\t\t\t<div className=\"wwc:px-3 wwc:pt-3 wwc:pb-1\">\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\tinitialFocus\n\t\t\t\t\t\tmode=\"single\"\n\t\t\t\t\t\tdefaultMonth={localDate}\n\t\t\t\t\t\tselected={localDate}\n\t\t\t\t\t\tonSelect={setLocalDate}\n\t\t\t\t\t\tclassName=\"wwc:p-0\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"wwc:border-t wwc:border-border wwc:px-3 wwc:py-3\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-3\">\n\t\t\t\t\t\t<Label className=\"wwc:w-10 wwc:text-[11px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground\">\n\t\t\t\t\t\t\tTime\n\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t<TimeSelect value={timeValue} onChange={setTimeValue} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"wwc:flex wwc:justify-end wwc:gap-2 wwc:border-t wwc:border-border wwc:px-3 wwc:py-3\">\n\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" onClick={handleCancel}>\n\t\t\t\t\t\tCancel\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button size=\"sm\" onClick={handleApply} disabled={!localDate}>\n\t\t\t\t\t\tApply\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\nfunction SplitDateTimePicker({date, onDateChange, className, container, modal}: DateTimePickerProps) {\n\tconst [timeValue, setTimeValue] = React.useState(\"12:00 AM\");\n\n\tconst parseTime = (val: string) => {\n\t\tconst [time, period] = val.split(\" \");\n\t\tconst [h, m] = time.split(\":\").map(Number);\n\t\tlet hours = h;\n\t\tif (period === \"PM\" && hours !== 12) hours += 12;\n\t\tif (period === \"AM\" && hours === 12) hours = 0;\n\t\treturn {hours, minutes: m};\n\t};\n\n\tconst handleDateSelect = (newDate: Date | undefined) => {\n\t\tif (newDate) {\n\t\t\tconst {hours, minutes} = parseTime(timeValue);\n\t\t\tnewDate.setHours(hours, minutes);\n\t\t\tonDateChange?.(newDate);\n\t\t} else {\n\t\t\tonDateChange?.(undefined);\n\t\t}\n\t};\n\n\tconst handleTimeSelect = (value: string) => {\n\t\tsetTimeValue(value);\n\t\tif (date) {\n\t\t\tconst {hours, minutes} = parseTime(value);\n\t\t\tconst newDate = new Date(date);\n\t\t\tnewDate.setHours(hours, minutes);\n\t\t\tonDateChange?.(newDate);\n\t\t}\n\t};\n\n\t// Generate time options in 15-min intervals\n\tconst timeOptions: string[] = [];\n\tfor (const period of [\"AM\", \"PM\"]) {\n\t\tfor (let h = 12; h < 24; h++) {\n\t\t\tconst displayH = h === 12 ? 12 : h - 12;\n\t\t\tfor (let m = 0; m < 60; m += 15) {\n\t\t\t\ttimeOptions.push(`${String(displayH).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")} ${period}`);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn (\n\t\t<div className={cn(\"wwc:flex wwc:gap-2\", className)}>\n\t\t\t<Popover modal={modal}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:h-9 wwc:w-[200px] wwc:justify-start wwc:text-left wwc:font-normal\",\n\t\t\t\t\t\t\t!date && \"wwc:text-muted-foreground\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CalendarIcon />\n\t\t\t\t\t\t{date ? format(date, \"PPP\") : <span>Pick a date</span>}\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent container={container} className=\"wwc:w-auto wwc:p-0\">\n\t\t\t\t\t<Calendar mode=\"single\" selected={date} onSelect={handleDateSelect} initialFocus />\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t\t<Select value={timeValue} onValueChange={handleTimeSelect}>\n\t\t\t\t<SelectTrigger className=\"wwc:w-[130px]\">\n\t\t\t\t\t<SelectValue placeholder=\"Select time\" />\n\t\t\t\t</SelectTrigger>\n\t\t\t\t<SelectContent>\n\t\t\t\t\t{timeOptions.map((t) => (\n\t\t\t\t\t\t<SelectItem key={t} value={t}>\n\t\t\t\t\t\t\t{t}\n\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t))}\n\t\t\t\t</SelectContent>\n\t\t\t</Select>\n\t\t</div>\n\t);\n}\n\nexport interface DateRangePickerProps extends DatePickerPopoverProps {\n\tdateRange?: {from: Date | undefined; to: Date | undefined};\n\tonDateRangeChange?: (range: {from: Date | undefined; to: Date | undefined}) => void;\n\tplaceholder?: string;\n\tclassName?: string;\n\tdisabled?: boolean;\n}\n\nfunction DateRangePicker({\n\tdateRange,\n\tonDateRangeChange,\n\tplaceholder = \"Pick a date range\",\n\tclassName,\n\tdisabled = false,\n\tcontainer,\n\tmodal,\n}: DateRangePickerProps) {\n\treturn (\n\t\t<Popover modal={modal}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:w-[300px] wwc:justify-start wwc:text-left wwc:font-normal\",\n\t\t\t\t\t\t!dateRange?.from && \"wwc:text-muted-foreground\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t>\n\t\t\t\t\t<CalendarIcon />\n\t\t\t\t\t{dateRange?.from ? (\n\t\t\t\t\t\tdateRange.to ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{format(dateRange.from, \"LLL dd, y\")} - {format(dateRange.to, \"LLL dd, y\")}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tformat(dateRange.from, \"LLL dd, y\")\n\t\t\t\t\t\t)\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span>{placeholder}</span>\n\t\t\t\t\t)}\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent container={container} className=\"wwc:w-auto wwc:p-0\" align=\"start\">\n\t\t\t\t<Calendar\n\t\t\t\t\tinitialFocus\n\t\t\t\t\tmode=\"range\"\n\t\t\t\t\tdefaultMonth={dateRange?.from}\n\t\t\t\t\tselected={dateRange}\n\t\t\t\t\tonSelect={(range) => onDateRangeChange?.({from: range?.from, to: range?.to})}\n\t\t\t\t\tnumberOfMonths={2}\n\t\t\t\t/>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\n// Date Range with Time Picker\nexport interface DateRangeTimePickerProps extends DatePickerPopoverProps {\n\tdateRange?: {from: Date | undefined; to: Date | undefined};\n\tonDateRangeChange?: (range: {from: Date | undefined; to: Date | undefined}) => void;\n\tplaceholder?: string;\n\tclassName?: string;\n\t/** Render as a square icon-only trigger (for toolbars sitting next to other icon buttons). */\n\ticonOnly?: boolean;\n\t/** Accessible name for the icon-only trigger. Defaults to the placeholder. */\n\t\"aria-label\"?: string;\n\t/** Hover/focus hint on the icon-only trigger. Defaults to the aria-label; pass `null` to suppress. */\n\ttooltip?: React.ReactNode;\n}\n\nexport interface TimePickerProps {\n\t/** 12-hour time string, e.g. `\"06:30 PM\"`. Empty string means nothing picked yet. */\n\tvalue?: string;\n\tonValueChange?: (value: string) => void;\n\t/** Minutes between options. 15 by default; use 5 or 1 for finer control. */\n\tstep?: number;\n\tplaceholder?: string;\n\tdisabled?: boolean;\n\tid?: string;\n\t\"aria-label\"?: string;\n\tclassName?: string;\n}\n\n/** Builds `hh:mm AM/PM` options across the full day at `step`-minute intervals. */\nfunction buildTimeOptions(step: number) {\n\tconst options: string[] = [];\n\tfor (const period of [\"AM\", \"PM\"]) {\n\t\tfor (let h = 12; h < 24; h++) {\n\t\t\tconst displayH = h === 12 ? 12 : h - 12;\n\t\t\tfor (let m = 0; m < 60; m += step) {\n\t\t\t\toptions.push(`${String(displayH).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")} ${period}`);\n\t\t\t}\n\t\t}\n\t}\n\treturn options;\n}\n\n/**\n * Time-of-day dropdown. Use this instead of `<input type=\"time\">`, whose picker is rendered by the\n * OS and so ignores the design system entirely.\n */\nfunction TimePicker({\n\tvalue,\n\tonValueChange,\n\tstep = 15,\n\tplaceholder = \"Select time\",\n\tdisabled,\n\tid,\n\t\"aria-label\": ariaLabel,\n\tclassName,\n}: TimePickerProps) {\n\tconst timeOptions = React.useMemo(() => buildTimeOptions(step), [step]);\n\treturn (\n\t\t<Select value={value} onValueChange={onValueChange} disabled={disabled}>\n\t\t\t<SelectTrigger id={id} aria-label={ariaLabel} className={cn(\"wwc:h-9 wwc:w-[130px]\", className)}>\n\t\t\t\t<SelectValue placeholder={placeholder} />\n\t\t\t</SelectTrigger>\n\t\t\t<SelectContent>\n\t\t\t\t{timeOptions.map((t) => (\n\t\t\t\t\t<SelectItem key={t} value={t}>\n\t\t\t\t\t\t{t}\n\t\t\t\t\t</SelectItem>\n\t\t\t\t))}\n\t\t\t</SelectContent>\n\t\t</Select>\n\t);\n}\n\nfunction TimeSelect({value, onChange}: {value: string; onChange: (v: string) => void}) {\n\treturn <TimePicker value={value} onValueChange={onChange} />;\n}\n\nfunction applyTimeToDate(d: Date | undefined, timeStr: string): Date | undefined {\n\tif (!d) return undefined;\n\tconst [time, period] = timeStr.split(\" \");\n\tconst [h, m] = time.split(\":\").map(Number);\n\tlet hours = h;\n\tif (period === \"PM\" && hours !== 12) hours += 12;\n\tif (period === \"AM\" && hours === 12) hours = 0;\n\tconst newDate = new Date(d);\n\tnewDate.setHours(hours, m, 0, 0);\n\treturn newDate;\n}\n\nfunction DateRangeTimePicker({\n\tdateRange,\n\tonDateRangeChange,\n\tplaceholder = \"Pick date & time range\",\n\tclassName,\n\ticonOnly = false,\n\t\"aria-label\": ariaLabel,\n\ttooltip,\n\tcontainer,\n\tmodal,\n}: DateRangeTimePickerProps) {\n\tconst [fromTime, setFromTime] = React.useState(\"12:00 AM\");\n\tconst [toTime, setToTime] = React.useState(\"12:00 AM\");\n\tconst [open, setOpen] = React.useState(false);\n\tconst [localRange, setLocalRange] = React.useState<{from: Date | undefined; to: Date | undefined}>(\n\t\tdateRange ?? {from: undefined, to: undefined},\n\t);\n\n\tReact.useEffect(() => {\n\t\tif (dateRange) setLocalRange(dateRange);\n\t}, [dateRange]);\n\n\tconst handleApply = () => {\n\t\tconst from = applyTimeToDate(localRange.from, fromTime);\n\t\tconst to = applyTimeToDate(localRange.to, toTime);\n\t\tonDateRangeChange?.({from, to});\n\t\tsetOpen(false);\n\t};\n\n\tconst handleCancel = () => {\n\t\tsetLocalRange(dateRange ?? {from: undefined, to: undefined});\n\t\tsetOpen(false);\n\t};\n\n\tconst formatDisplay = () => {\n\t\tif (!dateRange?.from) return placeholder;\n\t\tconst fromStr = `${format(dateRange.from, \"MMM dd\")} ${fromTime}`;\n\t\tif (!dateRange.to) return fromStr;\n\t\treturn `${fromStr} — ${format(dateRange.to, \"MMM dd\")} ${toTime}`;\n\t};\n\n\tconst hint = tooltip === undefined ? (ariaLabel ?? placeholder) : tooltip;\n\tconst trigger = (\n\t\t<PopoverTrigger asChild>\n\t\t\t<Button\n\t\t\t\tvariant=\"outline\"\n\t\t\t\ticon={iconOnly}\n\t\t\t\taria-label={iconOnly ? (ariaLabel ?? placeholder) : ariaLabel}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t!iconOnly && \"wwc:h-9 wwc:w-[380px] wwc:justify-start wwc:text-left wwc:font-normal\",\n\t\t\t\t\t!dateRange?.from && \"wwc:text-muted-foreground\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<CalendarIcon />\n\t\t\t\t{!iconOnly && <span className=\"wwc:truncate\">{formatDisplay()}</span>}\n\t\t\t</Button>\n\t\t</PopoverTrigger>\n\t);\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={setOpen} modal={modal}>\n\t\t\t{/* Icon-only has no visible label, so it carries the tooltip; the wide form already reads its range. */}\n\t\t\t{iconOnly && hint !== null ? <HoverTooltip content={hint}>{trigger}</HoverTooltip> : trigger}\n\t\t\t<PopoverContent container={container} className=\"wwc:w-auto wwc:p-0\" align=\"start\">\n\t\t\t\t<div className=\"wwc:px-3 wwc:pt-3 wwc:pb-1\">\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\tinitialFocus\n\t\t\t\t\t\tmode=\"range\"\n\t\t\t\t\t\tdefaultMonth={localRange?.from}\n\t\t\t\t\t\tselected={localRange}\n\t\t\t\t\t\tonSelect={(range) => setLocalRange({from: range?.from, to: range?.to})}\n\t\t\t\t\t\tnumberOfMonths={1}\n\t\t\t\t\t\tclassName=\"wwc:p-0\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"wwc:border-t wwc:border-border wwc:px-3 wwc:py-3 wwc:space-y-3\">\n\t\t\t\t\t{/* From */}\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-3\">\n\t\t\t\t\t\t<Label className=\"wwc:text-[11px] wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground wwc:font-semibold wwc:w-10\">\n\t\t\t\t\t\t\tFrom\n\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2 wwc:flex-1\">\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t\t\tvalue={localRange.from ? format(localRange.from, \"MM/dd\") : \"— —\"}\n\t\t\t\t\t\t\t\tclassName=\"wwc:w-[70px] wwc:h-9 wwc:text-center wwc:text-[13px]\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TimeSelect value={fromTime} onChange={setFromTime} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{/* To */}\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-3\">\n\t\t\t\t\t\t<Label className=\"wwc:text-[11px] wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground wwc:font-semibold wwc:w-10\">\n\t\t\t\t\t\t\tTo\n\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2 wwc:flex-1\">\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t\t\tvalue={localRange.to ? format(localRange.to, \"MM/dd\") : \"— —\"}\n\t\t\t\t\t\t\t\tclassName=\"wwc:w-[70px] wwc:h-9 wwc:text-center wwc:text-[13px]\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TimeSelect value={toTime} onChange={setToTime} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{/* Actions */}\n\t\t\t\t<div className=\"wwc:border-t wwc:border-border wwc:px-3 wwc:py-3 wwc:flex wwc:justify-end wwc:gap-2\">\n\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" onClick={handleCancel}>\n\t\t\t\t\t\tCancel\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button size=\"sm\" onClick={handleApply}>\n\t\t\t\t\t\tApply\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\nexport {\n\tTimePicker,\n\tDatePicker,\n\tDatePickerWithPresets,\n\tDatePickerForm,\n\tDatePickerWithInput,\n\tDateTimePicker,\n\tDateRangePicker,\n\tDateRangeTimePicker,\n};\n"],"mappings":"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"}

package/dist/date-range-input.d.mts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { DateRange, DateRange as DateRange$1 } from "react-day-picker";
+//#region src/date-range-input.d.ts
+export interface DateRangeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Current date range value */
+  value?: DateRange$1;
+  /** Callback when date range changes */
+  onChange?: (range: DateRange$1 | undefined) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Date format string */
+  dateFormat?: string;
+  /** Disable the input */
+  disabled?: boolean;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Number of months to show */
+  numberOfMonths?: number;
+}
+/** Date range picker input for selecting start and end dates. */
+declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { type DateRange, DateRangeInput };
+//# sourceMappingURL=date-range-input.d.mts.map

package/dist/date-range-input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-input.d.mts","names":[],"sources":["../src/date-range-input.tsx"],"mappings":";;;iBAWiB,4BAA4B,KAAK,MAAM,eAAe;;EAEtE,QAAQ;;EAER,YAAY,OAAO;;EAEnB;;EAEA;;EAEA;;EAEA,UAAU;;EAEV,UAAU;;EAEV;;;cAIK,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}

package/dist/date-range-input.mjs

@@ -0,0 +1,60 @@
+import { Button } from "./button.mjs";
+import { Calendar as Calendar$1 } from "./calendar.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { CalendarIcon } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+//#region src/date-range-input.tsx
+/** Date range picker input for selecting start and end dates. */
+const DateRangeInput = React.forwardRef(({ className, value, onChange, placeholder = "Select date range", dateFormat = "LLL dd, y", disabled = false, minDate, maxDate, numberOfMonths = 2, ...props }, ref) => {
+	const [open, setOpen] = React.useState(false);
+	const displayValue = React.useMemo(() => {
+		if (!value?.from) return placeholder;
+		if (!value.to) return format(value.from, dateFormat);
+		return `${format(value.from, dateFormat)} - ${format(value.to, dateFormat)}`;
+	}, [
+		value,
+		dateFormat,
+		placeholder
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:grid wwc:gap-2", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					disabled,
+					className: cn("wwc:w-full wwc:justify-start wwc:text-left wwc:font-normal", !value && "wwc:text-muted-foreground"),
+					children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "wwc:mr-2 wwc:h-4 wwc:w-4" }), displayValue]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "wwc:w-auto wwc:p-0",
+				align: "start",
+				children: /* @__PURE__ */ jsx(Calendar$1, {
+					mode: "range",
+					defaultMonth: value?.from,
+					selected: value,
+					onSelect: onChange,
+					numberOfMonths,
+					disabled: (date) => {
+						if (minDate && date < minDate) return true;
+						if (maxDate && date > maxDate) return true;
+						return false;
+					}
+				})
+			})]
+		})
+	});
+});
+DateRangeInput.displayName = "DateRangeInput";
+//#endregion
+export { DateRangeInput };
+
+//# sourceMappingURL=date-range-input.mjs.map

package/dist/date-range-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-input.mjs","names":["Calendar"],"sources":["../src/date-range-input.tsx"],"sourcesContent":["import type {DateRange} from \"react-day-picker\";\n\nimport {cn} from \"@corensystem/coren-utils\";\nimport {format} from \"date-fns\";\nimport {CalendarIcon} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {Calendar} from \"./calendar\";\nimport {Popover, PopoverContent, PopoverTrigger} from \"./popover\";\n\nexport interface DateRangeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n\t/** Current date range value */\n\tvalue?: DateRange;\n\t/** Callback when date range changes */\n\tonChange?: (range: DateRange | undefined) => void;\n\t/** Placeholder text */\n\tplaceholder?: string;\n\t/** Date format string */\n\tdateFormat?: string;\n\t/** Disable the input */\n\tdisabled?: boolean;\n\t/** Minimum selectable date */\n\tminDate?: Date;\n\t/** Maximum selectable date */\n\tmaxDate?: Date;\n\t/** Number of months to show */\n\tnumberOfMonths?: number;\n}\n\n/** Date range picker input for selecting start and end dates. */\nconst DateRangeInput = React.forwardRef<HTMLDivElement, DateRangeInputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvalue,\n\t\t\tonChange,\n\t\t\tplaceholder = \"Select date range\",\n\t\t\tdateFormat = \"LLL dd, y\",\n\t\t\tdisabled = false,\n\t\t\tminDate,\n\t\t\tmaxDate,\n\t\t\tnumberOfMonths = 2,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [open, setOpen] = React.useState(false);\n\n\t\tconst displayValue = React.useMemo(() => {\n\t\t\tif (!value?.from) return placeholder;\n\t\t\tif (!value.to) return format(value.from, dateFormat);\n\t\t\treturn `${format(value.from, dateFormat)} - ${format(value.to, dateFormat)}`;\n\t\t}, [value, dateFormat, placeholder]);\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"wwc:grid wwc:gap-2\", className)} {...props}>\n\t\t\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"wwc:w-full wwc:justify-start wwc:text-left wwc:font-normal\",\n\t\t\t\t\t\t\t\t!value && \"wwc:text-muted-foreground\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CalendarIcon className=\"wwc:mr-2 wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</PopoverTrigger>\n\t\t\t\t\t<PopoverContent className=\"wwc:w-auto wwc:p-0\" align=\"start\">\n\t\t\t\t\t\t<Calendar\n\t\t\t\t\t\t\tmode=\"range\"\n\t\t\t\t\t\t\tdefaultMonth={value?.from}\n\t\t\t\t\t\t\tselected={value}\n\t\t\t\t\t\t\tonSelect={onChange}\n\t\t\t\t\t\t\tnumberOfMonths={numberOfMonths}\n\t\t\t\t\t\t\tdisabled={(date) => {\n\t\t\t\t\t\t\t\tif (minDate && date < minDate) return true;\n\t\t\t\t\t\t\t\tif (maxDate && date > maxDate) return true;\n\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PopoverContent>\n\t\t\t\t</Popover>\n\t\t\t</div>\n\t\t);\n\t},\n);\nDateRangeInput.displayName = \"DateRangeInput\";\n\nexport {DateRangeInput};\nexport type {DateRange} from \"react-day-picker\";\n"],"mappings":";;;;;;;;;;AA+BA,MAAM,iBAAiB,MAAM,YAE3B,EACC,WACA,OACA,UACA,cAAc,qBACd,aAAa,aACb,WAAW,OACX,SACA,SACA,iBAAiB,GACjB,GAAG,SAEJ,QACI;CACJ,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAE5C,MAAM,eAAe,MAAM,cAAc;EACxC,IAAI,CAAC,OAAO,MAAM,OAAO;EACzB,IAAI,CAAC,MAAM,IAAI,OAAO,OAAO,MAAM,MAAM,UAAU;EACnD,OAAO,GAAG,OAAO,MAAM,MAAM,UAAU,EAAE,KAAK,OAAO,MAAM,IAAI,UAAU;CAC1E,GAAG;EAAC;EAAO;EAAY;CAAW,CAAC;CAEnC,OACC,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,sBAAsB,SAAS;EAAG,GAAI;EAClE,UAAA,qBAAC,SAAD;GAAe;GAAM,cAAc;GAAnC,UAAA,CACC,oBAAC,gBAAD;IAAgB,SAAA;IACf,UAAA,qBAAC,QAAD;KACC,SAAQ;KACE;KACV,WAAW,GACV,8DACA,CAAC,SAAS,2BACX;KAND,UAAA,CAQC,oBAAC,cAAD,EAAc,WAAU,2BAA4B,CAAA,GACnD,YACM;;GACO,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;IAAqB,OAAM;IACpD,UAAA,oBAACA,YAAD;KACC,MAAK;KACL,cAAc,OAAO;KACrB,UAAU;KACV,UAAU;KACM;KAChB,WAAW,SAAS;MACnB,IAAI,WAAW,OAAO,SAAS,OAAO;MACtC,IAAI,WAAW,OAAO,SAAS,OAAO;MACtC,OAAO;KACR;IACA,CAAA;GACc,CAAA,CACR;;CACL,CAAA;AAEP,CACD;AACA,eAAe,cAAc"}

package/dist/date-time-input.d.mts

@@ -0,0 +1,27 @@
+import * as React from "react";
+//#region src/date-time-input.d.ts
+export interface DateTimeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Current datetime value */
+  value?: Date;
+  /** Callback when datetime changes */
+  onChange?: (date: Date | undefined) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Date format string */
+  dateFormat?: string;
+  /** Time format (12h or 24h) */
+  timeFormat?: "12h" | "24h";
+  /** Disable the input */
+  disabled?: boolean;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Step for minutes (e.g., 15 for 15-minute intervals) */
+  minuteStep?: number;
+}
+/** Combined date and time picker input. */
+declare const DateTimeInput: React.ForwardRefExoticComponent<DateTimeInputProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DateTimeInput };
+//# sourceMappingURL=date-time-input.d.mts.map

package/dist/date-time-input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-input.d.mts","names":[],"sources":["../src/date-time-input.tsx"],"mappings":";;iBAUiB,2BAA2B,KAAK,MAAM,eAAe;;EAErE,QAAQ;;EAER,YAAY,MAAM;;EAElB;;EAEA;;EAEA;;EAEA;;EAEA,UAAU;;EAEV,UAAU;;EAEV;;;cAIK,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA"}

package/dist/date-time-input.mjs

@@ -0,0 +1,110 @@
+import { Button } from "./button.mjs";
+import { Calendar as Calendar$1 } from "./calendar.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { Input } from "./input.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { CalendarIcon, Clock } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format, setHours, setMinutes } from "date-fns";
+//#region src/date-time-input.tsx
+/** Combined date and time picker input. */
+const DateTimeInput = React.forwardRef(({ className, value, onChange, placeholder = "Select date and time", dateFormat = "PPP", timeFormat = "24h", disabled = false, minDate, maxDate, minuteStep = 1, ...props }, ref) => {
+	const [open, setOpen] = React.useState(false);
+	const [timeValue, setTimeValue] = React.useState(() => {
+		if (!value) return "";
+		const hours = value.getHours();
+		const minutes = value.getMinutes();
+		if (timeFormat === "12h") {
+			const period = hours >= 12 ? "PM" : "AM";
+			return `${(hours % 12 || 12).toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${period}`;
+		}
+		return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+	});
+	const handleDateSelect = (date) => {
+		if (!date) {
+			onChange?.(void 0);
+			return;
+		}
+		if (value) {
+			const newDate = new Date(date);
+			newDate.setHours(value.getHours());
+			newDate.setMinutes(value.getMinutes());
+			onChange?.(newDate);
+		} else onChange?.(date);
+	};
+	const handleTimeChange = (e) => {
+		const newTimeValue = e.target.value;
+		setTimeValue(newTimeValue);
+		if (!value) return;
+		let hours = 0;
+		let minutes = 0;
+		if (timeFormat === "24h") {
+			const match = newTimeValue.match(/^(\d{1,2}):(\d{2})$/);
+			if (match) {
+				hours = parseInt(match[1], 10);
+				minutes = parseInt(match[2], 10);
+			}
+		} else {
+			const match = newTimeValue.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+			if (match) {
+				hours = parseInt(match[1], 10);
+				minutes = parseInt(match[2], 10);
+				const period = match[3].toUpperCase();
+				if (period === "PM" && hours !== 12) hours += 12;
+				if (period === "AM" && hours === 12) hours = 0;
+			}
+		}
+		const newDate = setMinutes(setHours(value, hours), minutes);
+		onChange?.(newDate);
+	};
+	const displayValue = value ? format(value, `${dateFormat} ${timeFormat === "12h" ? "h:mm a" : "HH:mm"}`) : placeholder;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:grid wwc:gap-2", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					disabled,
+					className: cn("wwc:w-full wwc:justify-start wwc:text-left wwc:font-normal", !value && "wwc:text-muted-foreground"),
+					children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "wwc:mr-2 wwc:h-4 wwc:w-4" }), displayValue]
+				})
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				className: "wwc:w-auto wwc:p-0",
+				align: "start",
+				children: [/* @__PURE__ */ jsx(Calendar$1, {
+					mode: "single",
+					selected: value,
+					onSelect: handleDateSelect,
+					disabled: (date) => {
+						if (minDate && date < minDate) return true;
+						if (maxDate && date > maxDate) return true;
+						return false;
+					}
+				}), /* @__PURE__ */ jsx("div", {
+					className: "wwc:border-t wwc:border-border wwc:p-3",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-2",
+						children: [/* @__PURE__ */ jsx(Clock, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+							type: "time",
+							value: timeValue,
+							onChange: handleTimeChange,
+							step: minuteStep * 60,
+							className: "wwc:w-auto"
+						})]
+					})
+				})]
+			})]
+		})
+	});
+});
+DateTimeInput.displayName = "DateTimeInput";
+//#endregion
+export { DateTimeInput };
+
+//# sourceMappingURL=date-time-input.mjs.map

package/dist/date-time-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-input.mjs","names":["Calendar"],"sources":["../src/date-time-input.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {format, parse, setHours, setMinutes} from \"date-fns\";\nimport {CalendarIcon, Clock} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {Calendar} from \"./calendar\";\nimport {Input} from \"./input\";\nimport {Popover, PopoverContent, PopoverTrigger} from \"./popover\";\n\nexport interface DateTimeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n\t/** Current datetime value */\n\tvalue?: Date;\n\t/** Callback when datetime changes */\n\tonChange?: (date: Date | undefined) => void;\n\t/** Placeholder text */\n\tplaceholder?: string;\n\t/** Date format string */\n\tdateFormat?: string;\n\t/** Time format (12h or 24h) */\n\ttimeFormat?: \"12h\" | \"24h\";\n\t/** Disable the input */\n\tdisabled?: boolean;\n\t/** Minimum selectable date */\n\tminDate?: Date;\n\t/** Maximum selectable date */\n\tmaxDate?: Date;\n\t/** Step for minutes (e.g., 15 for 15-minute intervals) */\n\tminuteStep?: number;\n}\n\n/** Combined date and time picker input. */\nconst DateTimeInput = React.forwardRef<HTMLDivElement, DateTimeInputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvalue,\n\t\t\tonChange,\n\t\t\tplaceholder = \"Select date and time\",\n\t\t\tdateFormat = \"PPP\",\n\t\t\ttimeFormat = \"24h\",\n\t\t\tdisabled = false,\n\t\t\tminDate,\n\t\t\tmaxDate,\n\t\t\tminuteStep = 1,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [open, setOpen] = React.useState(false);\n\t\tconst [timeValue, setTimeValue] = React.useState(() => {\n\t\t\tif (!value) return \"\";\n\t\t\tconst hours = value.getHours();\n\t\t\tconst minutes = value.getMinutes();\n\t\t\tif (timeFormat === \"12h\") {\n\t\t\t\tconst period = hours >= 12 ? \"PM\" : \"AM\";\n\t\t\t\tconst h12 = hours % 12 || 12;\n\t\t\t\treturn `${h12.toString().padStart(2, \"0\")}:${minutes.toString().padStart(2, \"0\")} ${period}`;\n\t\t\t}\n\t\t\treturn `${hours.toString().padStart(2, \"0\")}:${minutes.toString().padStart(2, \"0\")}`;\n\t\t});\n\n\t\tconst handleDateSelect = (date: Date | undefined) => {\n\t\t\tif (!date) {\n\t\t\t\tonChange?.(undefined);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Preserve existing time if we have a value\n\t\t\tif (value) {\n\t\t\t\tconst newDate = new Date(date);\n\t\t\t\tnewDate.setHours(value.getHours());\n\t\t\t\tnewDate.setMinutes(value.getMinutes());\n\t\t\t\tonChange?.(newDate);\n\t\t\t} else {\n\t\t\t\tonChange?.(date);\n\t\t\t}\n\t\t};\n\n\t\tconst handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst newTimeValue = e.target.value;\n\t\t\tsetTimeValue(newTimeValue);\n\n\t\t\tif (!value) return;\n\n\t\t\t// Parse time value\n\t\t\tlet hours = 0;\n\t\t\tlet minutes = 0;\n\n\t\t\tif (timeFormat === \"24h\") {\n\t\t\t\tconst match = newTimeValue.match(/^(\\d{1,2}):(\\d{2})$/);\n\t\t\t\tif (match) {\n\t\t\t\t\thours = parseInt(match[1], 10);\n\t\t\t\t\tminutes = parseInt(match[2], 10);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tconst match = newTimeValue.match(/^(\\d{1,2}):(\\d{2})\\s*(AM|PM)$/i);\n\t\t\t\tif (match) {\n\t\t\t\t\thours = parseInt(match[1], 10);\n\t\t\t\t\tminutes = parseInt(match[2], 10);\n\t\t\t\t\tconst period = match[3].toUpperCase();\n\t\t\t\t\tif (period === \"PM\" && hours !== 12) hours += 12;\n\t\t\t\t\tif (period === \"AM\" && hours === 12) hours = 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst newDate = setMinutes(setHours(value, hours), minutes);\n\t\t\tonChange?.(newDate);\n\t\t};\n\n\t\tconst displayValue = value\n\t\t\t? format(value, `${dateFormat} ${timeFormat === \"12h\" ? \"h:mm a\" : \"HH:mm\"}`)\n\t\t\t: placeholder;\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"wwc:grid wwc:gap-2\", className)} {...props}>\n\t\t\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"wwc:w-full wwc:justify-start wwc:text-left wwc:font-normal\",\n\t\t\t\t\t\t\t\t!value && \"wwc:text-muted-foreground\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CalendarIcon className=\"wwc:mr-2 wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</PopoverTrigger>\n\t\t\t\t\t<PopoverContent className=\"wwc:w-auto wwc:p-0\" align=\"start\">\n\t\t\t\t\t\t<Calendar\n\t\t\t\t\t\t\tmode=\"single\"\n\t\t\t\t\t\t\tselected={value}\n\t\t\t\t\t\t\tonSelect={handleDateSelect}\n\t\t\t\t\t\t\tdisabled={(date) => {\n\t\t\t\t\t\t\t\tif (minDate && date < minDate) return true;\n\t\t\t\t\t\t\t\tif (maxDate && date > maxDate) return true;\n\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"wwc:border-t wwc:border-border wwc:p-3\">\n\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t\t<Clock className=\"wwc:h-4 wwc:w-4 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\ttype=\"time\"\n\t\t\t\t\t\t\t\t\tvalue={timeValue}\n\t\t\t\t\t\t\t\t\tonChange={handleTimeChange}\n\t\t\t\t\t\t\t\t\tstep={minuteStep * 60}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:w-auto\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</PopoverContent>\n\t\t\t\t</Popover>\n\t\t\t</div>\n\t\t);\n\t},\n);\nDateTimeInput.displayName = \"DateTimeInput\";\n\nexport {DateTimeInput};\n"],"mappings":";;;;;;;;;;;AAgCA,MAAM,gBAAgB,MAAM,YAE1B,EACC,WACA,OACA,UACA,cAAc,wBACd,aAAa,OACb,aAAa,OACb,WAAW,OACX,SACA,SACA,aAAa,GACb,GAAG,SAEJ,QACI;CACJ,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAC5C,MAAM,CAAC,WAAW,gBAAgB,MAAM,eAAe;EACtD,IAAI,CAAC,OAAO,OAAO;EACnB,MAAM,QAAQ,MAAM,SAAS;EAC7B,MAAM,UAAU,MAAM,WAAW;EACjC,IAAI,eAAe,OAAO;GACzB,MAAM,SAAS,SAAS,KAAK,OAAO;GAEpC,OAAO,IADK,QAAQ,MAAM,GAAA,CACZ,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,QAAQ,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG;EACrF;EACA,OAAO,GAAG,MAAM,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,QAAQ,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG;CAClF,CAAC;CAED,MAAM,oBAAoB,SAA2B;EACpD,IAAI,CAAC,MAAM;GACV,WAAW,KAAA,CAAS;GACpB;EACD;EAGA,IAAI,OAAO;GACV,MAAM,UAAU,IAAI,KAAK,IAAI;GAC7B,QAAQ,SAAS,MAAM,SAAS,CAAC;GACjC,QAAQ,WAAW,MAAM,WAAW,CAAC;GACrC,WAAW,OAAO;EACnB,OACC,WAAW,IAAI;CAEjB;CAEA,MAAM,oBAAoB,MAA2C;EACpE,MAAM,eAAe,EAAE,OAAO;EAC9B,aAAa,YAAY;EAEzB,IAAI,CAAC,OAAO;EAGZ,IAAI,QAAQ;EACZ,IAAI,UAAU;EAEd,IAAI,eAAe,OAAO;GACzB,MAAM,QAAQ,aAAa,MAAM,qBAAqB;GACtD,IAAI,OAAO;IACV,QAAQ,SAAS,MAAM,IAAI,EAAE;IAC7B,UAAU,SAAS,MAAM,IAAI,EAAE;GAChC;EACD,OAAO;GACN,MAAM,QAAQ,aAAa,MAAM,gCAAgC;GACjE,IAAI,OAAO;IACV,QAAQ,SAAS,MAAM,IAAI,EAAE;IAC7B,UAAU,SAAS,MAAM,IAAI,EAAE;IAC/B,MAAM,SAAS,MAAM,EAAE,CAAC,YAAY;IACpC,IAAI,WAAW,QAAQ,UAAU,IAAI,SAAS;IAC9C,IAAI,WAAW,QAAQ,UAAU,IAAI,QAAQ;GAC9C;EACD;EAEA,MAAM,UAAU,WAAW,SAAS,OAAO,KAAK,GAAG,OAAO;EAC1D,WAAW,OAAO;CACnB;CAEA,MAAM,eAAe,QAClB,OAAO,OAAO,GAAG,WAAW,GAAG,eAAe,QAAQ,WAAW,SAAS,IAC1E;CAEH,OACC,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,sBAAsB,SAAS;EAAG,GAAI;EAClE,UAAA,qBAAC,SAAD;GAAe;GAAM,cAAc;GAAnC,UAAA,CACC,oBAAC,gBAAD;IAAgB,SAAA;IACf,UAAA,qBAAC,QAAD;KACC,SAAQ;KACE;KACV,WAAW,GACV,8DACA,CAAC,SAAS,2BACX;KAND,UAAA,CAQC,oBAAC,cAAD,EAAc,WAAU,2BAA4B,CAAA,GACnD,YACM;;GACO,CAAA,GAChB,qBAAC,gBAAD;IAAgB,WAAU;IAAqB,OAAM;IAArD,UAAA,CACC,oBAACA,YAAD;KACC,MAAK;KACL,UAAU;KACV,UAAU;KACV,WAAW,SAAS;MACnB,IAAI,WAAW,OAAO,SAAS,OAAO;MACtC,IAAI,WAAW,OAAO,SAAS,OAAO;MACtC,OAAO;KACR;IACA,CAAA,GACD,oBAAC,OAAD;KAAK,WAAU;KACd,UAAA,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACC,oBAAC,OAAD,EAAO,WAAU,4CAA6C,CAAA,GAC9D,oBAAC,OAAD;OACC,MAAK;OACL,OAAO;OACP,UAAU;OACV,MAAM,aAAa;OACnB,WAAU;MACV,CAAA,CACG;;IACD,CAAA,CACU;GACR,CAAA,CAAA;;CACL,CAAA;AAEP,CACD;AACA,cAAc,cAAc"}

package/dist/detail-panel-shell.d.mts

@@ -0,0 +1,37 @@
+import * as React from "react";
+//#region src/detail-panel-shell.d.ts
+export interface DetailPanelShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: React.ReactNode;
+  /** Badges or meta rendered under the title. */
+  meta?: React.ReactNode;
+  /** Shows a back arrow left of the title — the drill-in returns to whatever opened it. */
+  onBack?: () => void;
+  /** Accessible label for the back control. Default "Back". */
+  backLabel?: string;
+  /** Closes the panel. Omit to hide the close button. */
+  onClose?: () => void;
+  /**
+   * Pinned below the scrolling body — a composer or action bar that must stay reachable however long
+   * the content gets. It sits outside the scroll area, so it never scrolls away.
+   */
+  footer?: React.ReactNode;
+  /**
+   * Panel width in px. Fixed on purpose — it floats over a map, so it must not grow with its content.
+   * Default `340`.
+   */
+  width?: number;
+  /**
+   * Cap on the whole card's height, as a CSS length; the body scrolls beneath it. Default `"60vh"`,
+   * matching `MapControlPanel` so the two floating panels agree.
+   */
+  maxHeight?: string;
+}
+/**
+ * The chrome shared by every floating detail panel: a fixed width, a header carrying an optional back
+ * control, title, meta row and close button, and a body that scrolls inside the panel rather than
+ * growing it. Drill-in panels swap their body and pass `onBack`; the frame never moves between steps.
+ */
+declare const DetailPanelShell: React.ForwardRefExoticComponent<DetailPanelShellProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DetailPanelShell };
+//# sourceMappingURL=detail-panel-shell.d.mts.map

package/dist/detail-panel-shell.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-panel-shell.d.mts","names":[],"sources":["../src/detail-panel-shell.tsx"],"mappings":";;iBAQiB,8BAA8B,KAAK,MAAM,eAAe;EACxE,OAAO,MAAM;;EAEb,OAAO,MAAM;;EAEb;;EAEA;;EAEA;;;;;EAKA,SAAS,MAAM;;;;;EAKf;;;;;EAKA;;;;;;;cAQK,kBAAgB,MAAA,0BAAA,wBAAA,MAAA,cAAA"}

package/dist/detail-panel-shell.mjs

@@ -0,0 +1,86 @@
+import { Button } from "./button.mjs";
+import { FLOAT_SHADOW } from "./float-shadow.mjs";
+import { Separator } from "./separator.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ArrowLeft, X } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/detail-panel-shell.tsx
+/**
+* The chrome shared by every floating detail panel: a fixed width, a header carrying an optional back
+* control, title, meta row and close button, and a body that scrolls inside the panel rather than
+* growing it. Drill-in panels swap their body and pass `onBack`; the frame never moves between steps.
+*/
+const DetailPanelShell = React.forwardRef(({ className, title, meta, onBack, backLabel = "Back", onClose, footer, width = 340, maxHeight = "60vh", style, children, ...props }, ref) => {
+	React.useEffect(() => {
+		if (!onClose) return;
+		const onKey = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			if (document.querySelector("[data-radix-popper-content-wrapper]")) return;
+			onClose();
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [onClose]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:flex wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:text-card-foreground", FLOAT_SHADOW, className),
+		style: {
+			width,
+			maxHeight,
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:shrink-0 wwc:items-start wwc:justify-between wwc:gap-2 wwc:px-3 wwc:py-2.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:min-w-0 wwc:items-start wwc:gap-1.5",
+					children: [onBack && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						icon: true,
+						"aria-label": backLabel,
+						className: "wwc:-ml-1 wwc:h-6 wwc:w-6 wwc:shrink-0 wwc:text-muted-foreground",
+						onClick: onBack,
+						children: /* @__PURE__ */ jsx(ArrowLeft, { className: "wwc:h-3.5 wwc:w-3.5" })
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "wwc:min-w-0",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "wwc:truncate wwc:text-sm wwc:font-semibold",
+							children: title
+						}), meta && /* @__PURE__ */ jsx("div", {
+							className: "wwc:mt-1 wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1",
+							children: meta
+						})]
+					})]
+				}), onClose && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					icon: true,
+					"aria-label": "Close details",
+					className: "wwc:h-6 wwc:w-6 wwc:shrink-0 wwc:text-muted-foreground",
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(X, { className: "wwc:h-3.5 wwc:w-3.5" })
+				})]
+			}),
+			/* @__PURE__ */ jsx(Separator, { className: "wwc:shrink-0" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "wwc:min-h-0 wwc:flex-1 wwc:overflow-y-auto",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "wwc:space-y-3 wwc:px-3 wwc:py-3",
+					children
+				})
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "wwc:shrink-0 wwc:border-t wwc:border-border wwc:bg-card wwc:px-3 wwc:py-2.5",
+				children: footer
+			})
+		]
+	});
+});
+DetailPanelShell.displayName = "DetailPanelShell";
+//#endregion
+export { DetailPanelShell };
+
+//# sourceMappingURL=detail-panel-shell.mjs.map

package/dist/detail-panel-shell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-panel-shell.mjs","names":[],"sources":["../src/detail-panel-shell.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ArrowLeft, X} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {FLOAT_SHADOW} from \"./float-shadow\";\nimport {Separator} from \"./separator\";\n\nexport interface DetailPanelShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\ttitle: React.ReactNode;\n\t/** Badges or meta rendered under the title. */\n\tmeta?: React.ReactNode;\n\t/** Shows a back arrow left of the title — the drill-in returns to whatever opened it. */\n\tonBack?: () => void;\n\t/** Accessible label for the back control. Default \"Back\". */\n\tbackLabel?: string;\n\t/** Closes the panel. Omit to hide the close button. */\n\tonClose?: () => void;\n\t/**\n\t * Pinned below the scrolling body — a composer or action bar that must stay reachable however long\n\t * the content gets. It sits outside the scroll area, so it never scrolls away.\n\t */\n\tfooter?: React.ReactNode;\n\t/**\n\t * Panel width in px. Fixed on purpose — it floats over a map, so it must not grow with its content.\n\t * Default `340`.\n\t */\n\twidth?: number;\n\t/**\n\t * Cap on the whole card's height, as a CSS length; the body scrolls beneath it. Default `\"60vh\"`,\n\t * matching `MapControlPanel` so the two floating panels agree.\n\t */\n\tmaxHeight?: string;\n}\n\n/**\n * The chrome shared by every floating detail panel: a fixed width, a header carrying an optional back\n * control, title, meta row and close button, and a body that scrolls inside the panel rather than\n * growing it. Drill-in panels swap their body and pass `onBack`; the frame never moves between steps.\n */\nconst DetailPanelShell = React.forwardRef<HTMLDivElement, DetailPanelShellProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\ttitle,\n\t\t\tmeta,\n\t\t\tonBack,\n\t\t\tbackLabel = \"Back\",\n\t\t\tonClose,\n\t\t\tfooter,\n\t\t\twidth = 340,\n\t\t\tmaxHeight = \"60vh\",\n\t\t\tstyle,\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\t// Escape closes the panel, matching how every other dismissible surface behaves.\n\t\tReact.useEffect(() => {\n\t\t\tif (!onClose) return;\n\t\t\tconst onKey = (event: KeyboardEvent) => {\n\t\t\t\tif (event.key !== \"Escape\" || event.defaultPrevented) return;\n\t\t\t\t// A dropdown or popover open over the panel owns Escape first — let it close alone.\n\t\t\t\tif (document.querySelector(\"[data-radix-popper-content-wrapper]\")) return;\n\t\t\t\tonClose();\n\t\t\t};\n\t\t\tdocument.addEventListener(\"keydown\", onKey);\n\t\t\treturn () => document.removeEventListener(\"keydown\", onKey);\n\t\t}, [onClose]);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:flex wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:text-card-foreground\",\n\t\t\t\t\tFLOAT_SHADOW,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t// The cap keeps the panel inside its container; the body scrolls, the page does not.\n\t\t\t\tstyle={{width, maxHeight, ...style}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div className=\"wwc:flex wwc:shrink-0 wwc:items-start wwc:justify-between wwc:gap-2 wwc:px-3 wwc:py-2.5\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:items-start wwc:gap-1.5\">\n\t\t\t\t\t\t{onBack && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\taria-label={backLabel}\n\t\t\t\t\t\t\t\tclassName=\"wwc:-ml-1 wwc:h-6 wwc:w-6 wwc:shrink-0 wwc:text-muted-foreground\"\n\t\t\t\t\t\t\t\tonClick={onBack}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ArrowLeft className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"wwc:min-w-0\">\n\t\t\t\t\t\t\t<h3 className=\"wwc:truncate wwc:text-sm wwc:font-semibold\">{title}</h3>\n\t\t\t\t\t\t\t{meta && <div className=\"wwc:mt-1 wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1\">{meta}</div>}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{onClose && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\taria-label=\"Close details\"\n\t\t\t\t\t\t\tclassName=\"wwc:h-6 wwc:w-6 wwc:shrink-0 wwc:text-muted-foreground\"\n\t\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<X className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<Separator className=\"wwc:shrink-0\" />\n\n\t\t\t\t<div className=\"wwc:min-h-0 wwc:flex-1 wwc:overflow-y-auto\">\n\t\t\t\t\t<div className=\"wwc:space-y-3 wwc:px-3 wwc:py-3\">{children}</div>\n\t\t\t\t</div>\n\n\t\t\t\t{footer && (\n\t\t\t\t\t<div className=\"wwc:shrink-0 wwc:border-t wwc:border-border wwc:bg-card wwc:px-3 wwc:py-2.5\">{footer}</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nDetailPanelShell.displayName = \"DetailPanelShell\";\n\nexport {DetailPanelShell};\n"],"mappings":";;;;;;;;;;;;;AAwCA,MAAM,mBAAmB,MAAM,YAE7B,EACC,WACA,OACA,MACA,QACA,YAAY,QACZ,SACA,QACA,QAAQ,KACR,YAAY,QACZ,OACA,UACA,GAAG,SAEJ,QACI;CAEJ,MAAM,gBAAgB;EACrB,IAAI,CAAC,SAAS;EACd,MAAM,SAAS,UAAyB;GACvC,IAAI,MAAM,QAAQ,YAAY,MAAM,kBAAkB;GAEtD,IAAI,SAAS,cAAc,qCAAqC,GAAG;GACnE,QAAQ;EACT;EACA,SAAS,iBAAiB,WAAW,KAAK;EAC1C,aAAa,SAAS,oBAAoB,WAAW,KAAK;CAC3D,GAAG,CAAC,OAAO,CAAC;CAEZ,OACC,qBAAC,OAAD;EACM;EACL,WAAW,GACV,8HACA,cACA,SACD;EAEA,OAAO;GAAC;GAAO;GAAW,GAAG;EAAK;EAClC,GAAI;EATL,UAAA;GAWC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,UACA,oBAAC,QAAD;MACC,SAAQ;MACR,MAAK;MACL,MAAA;MACA,cAAY;MACZ,WAAU;MACV,SAAS;MAET,UAAA,oBAAC,WAAD,EAAW,WAAU,sBAAuB,CAAA;KACrC,CAAA,GAET,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACC,oBAAC,MAAD;OAAI,WAAU;OAA8C,UAAA;MAAU,CAAA,GACrE,QAAQ,oBAAC,OAAD;OAAK,WAAU;OAA8D,UAAA;MAAU,CAAA,CAC5F;KACD,CAAA,CAAA;IACJ,CAAA,GAAA,WACA,oBAAC,QAAD;KACC,SAAQ;KACR,MAAK;KACL,MAAA;KACA,cAAW;KACX,WAAU;KACV,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,sBAAuB,CAAA;IAC7B,CAAA,CAEL;;GAEL,oBAAC,WAAD,EAAW,WAAU,eAAgB,CAAA;GAErC,oBAAC,OAAD;IAAK,WAAU;IACd,UAAA,oBAAC,OAAD;KAAK,WAAU;KAAmC;IAAc,CAAA;GAC5D,CAAA;GAEJ,UACA,oBAAC,OAAD;IAAK,WAAU;IAA+E,UAAA;GAAY,CAAA;EAEvG;;AAEP,CACD;AACA,iBAAiB,cAAc"}

package/dist/dialog.d.mts

@@ -0,0 +1,105 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+//#region src/dialog.d.ts
+/** A window overlaid on the primary window or another dialog, rendering content in a portal. */
+declare function Dialog(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const DialogTrigger: typeof DialogPrimitive.Trigger;
+declare const DialogPortal: typeof DialogPrimitive.Portal;
+declare const DialogClose: typeof DialogPrimitive.Close;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * How a dialog is laid out. It is ONE decision, not three, which is why it lives on
+ * {@link DialogContent} and reaches the header, the footer, the close button and the body padding
+ * through context rather than asking a call site to keep three props in agreement.
+ *
+ * - `"banded"` (default) — the header and footer are 40px `bg-muted` strips, deliberately identical
+ *   to `WidgetCardHeader` (charts) and `TableHeader` (tables), so a modal reads as the same kind of
+ *   object as every other panel in the system. The close button centres in the header band and the
+ *   body supplies its own padding.
+ * - `"stacked"` — the pre-0.3 header: title over description, no band, no rule, the close button
+ *   inset, and the content padded as a whole. Lighter, and right for a short dialog that is a
+ *   sentence and two buttons rather than a panel.
+ *
+ * `"banded"` stays the default because the band is a SYSTEM decision, not a dialog one — flipping it
+ * would leave dialogs as the only unbanded header in 0.13 — but the choice is one prop, and issue
+ * #248 is the argument for making it per-dialog rather than for the library picking one and
+ * overriding the other.
+ */
+export type DialogVariant = "banded" | "stacked";
+/**
+ * The enclosing {@link DialogContent} element, or `null` outside a dialog.
+ *
+ * A modal dialog sets `pointer-events: none` on `<body>` and grants `auto` back only to the layers
+ * it knows about. An overlay portalled to `document.body` — a Popover, and so a `Combobox` or
+ * `DatePicker` — is one of those layers, so this normally resolves itself. It does NOT when the host
+ * app has a SECOND copy of `@radix-ui/react-dismissable-layer` (its own `@radix-ui/react-popover`
+ * beside core-ui's, say): the two copies keep separate layer stacks, the dialog never grants the
+ * popover `pointer-events: auto`, and every click inside the popover lands on the overlay instead —
+ * which reads as an outside interaction and dismisses it. Issue #294.
+ *
+ * Portalling into the dialog sidesteps the whole negotiation: the popover is then a DOM descendant
+ * of an element that already has `pointer-events: auto`, and it sits inside the dialog's focus scope
+ * rather than fighting it. `PopoverContent` does this automatically; reach for the hook directly
+ * only to pass a container to something that is not built on our Popover.
+ *
+ * ```tsx
+ * const container = useDialogContainer();
+ * <SomeThirdPartyPopover container={container} />
+ * ```
+ */
+declare function useDialogContainer(): HTMLElement | null;
+export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /** Banded (default) or stacked. See {@link DialogVariant}. */
+  variant?: DialogVariant;
+  /**
+   * Where the close button sits. `"band"` centres it in the 40px DialogHeader band; `"padded"` insets
+   * it. Defaults to whatever `variant` implies, so it only needs setting for the rare dialog that
+   * wants the band's chrome without its header, or the reverse.
+   */
+  closeAlign?: "padded" | "band";
+}
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Overrides the layout the enclosing {@link DialogContent} declared. Rarely needed. */
+  variant?: DialogVariant;
+}
+/**
+ * The dialog's header.
+ *
+ * `banded` is the 40px `bg-muted` strip, deliberately identical to `WidgetCardHeader` (charts) and
+ * `TableHeader` (tables) so a modal header reads as the same object as every other header in the
+ * system; `pr-10` reserves the close button's 40px square. `stacked` is the pre-0.3 header — title
+ * over description, no band, no rule — restored under {@link DialogVariant} rather than as a
+ * consumer override of shipped classes, which is what issue #248 asked for.
+ *
+ * The layout comes from the enclosing DialogContent, so the header, the footer, the close button and
+ * the body padding cannot drift apart. `variant` here overrides that for the odd case.
+ */
+declare const DialogHeader: {
+  ({ className, variant, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Overrides the layout the enclosing {@link DialogContent} declared. Rarely needed. */
+  variant?: DialogVariant;
+}
+/**
+ * The dialog's action bar.
+ *
+ * `banded` sizes it to the same 40px as {@link DialogHeader} so a modal is banded top and bottom by
+ * equal-height strips, and steps its buttons down to `h-7` from the library default `h-8` — a
+ * full-size button cannot fit a 40px bar with breathing room — via a descendant selector, so call
+ * sites keep writing plain `<Button>` and stay consistent automatically.
+ *
+ * `stacked` drops the strip and the step-down: with no band to fit inside, a full-size button is the
+ * right one, and the row is just the actions right-aligned under the content.
+ */
+declare const DialogFooter: {
+  ({ className, variant, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, useDialogContainer };
+//# sourceMappingURL=dialog.d.mts.map

package/dist/dialog.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.mts","names":[],"sources":["../src/dialog.tsx"],"mappings":";;;;iBAMS,OAAO,OAAO,MAAM,gCAAgC,gBAAgB,oCAAK,IAAA;cAG5E,sBAAsB,gBAAgB;cACtC,qBAAqB,gBAAgB;cACrC,oBAAoB,gBAAgB;cAEpC,eAAa,MAAA,0BAAA,KAAA,gBAAA,qBAAA,MAAA,cAAA,0BAAA,MAAA,cAAA;;;;;;;;;;;;;;;;;;;YAmCP;;;;;;;;;;;;;;;;;;;;;;iBAmCH,sBAAsB;iBAId,2BAA2B,MAAM,gCAAgC,gBAAgB;;EAEjG,UAAU;;;;;;EAMV;;cAGK,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA;iBAkDF,0BAA0B,MAAM,eAAe;;EAE/D,UAAU;;;;;;;;;;;;;;cAeL;KAAgD,WAAA,YAAA,SAAA,gDAAiB,IAAA;;;iBAkBtD,0BAA0B,MAAM,eAAe;;EAE/D,UAAU;;;;;;;;;;;;;cAcL;KAAgD,WAAA,YAAA,SAAA,gDAAiB,IAAA;;;cAkBjE,aAAW,MAAA,0BAAA,KAAA,gBAAA,mBAAA,MAAA,cAAA,8BAAA,MAAA,cAAA;cAYX,mBAAiB,MAAA,0BAAA,KAAA,gBAAA,yBAAA,MAAA,cAAA,gCAAA,MAAA,cAAA"}