@plexui/ui 0.7.43 → 0.7.45

package/dist/es/components/DatePicker/Calendar.js

@@ -13,26 +13,68 @@ import { useDateContext } from "./context";
 const CALENDAR_WIDTH_PX = 210;
 const CALENDAR_GAP_PX = 32;
 const STEP_DISTANCE_PX = CALENDAR_WIDTH_PX + CALENDAR_GAP_PX;
+const SHORT_MONTH_NAMES = Array.from({ length: 12 }, (_, i) => DateTime.local(2024, i + 1, 1).monthShort);
 export const DateCalendar = () => {
-    const { value, min, max, onChangeRef } = useDateContext();
+    const { value, min, max, onChangeRef, captionLayout, showTime, yearRange } = useDateContext();
     const closePopover = usePopoverClose();
     const calendarContainerRef = useRef(null);
     const [calendarSteps, setCalendarSteps] = useState(0);
     const [forceRenderIncrement, setForceRenderIncrement] = useState(0);
     const [calendarDate, setCalendarDate] = useState(() => value ?? DateTime.now());
+    const isDropdown = captionLayout === "dropdown";
     const canGoBack = !min || isBefore(min, calendarDate.startOf("month"));
     const canGoForward = !max || isBefore(calendarDate.endOf("month"), max);
+    const [pendingHour, setPendingHour] = useState(() => value?.hour ?? 12);
+    const [pendingMinute, setPendingMinute] = useState(() => value?.minute ?? 0);
+    useEffect(() => {
+        if (value) {
+            setPendingHour(value.hour);
+            setPendingMinute(value.minute);
+        }
+    }, [value]);
     const handleNext = () => {
-        setCalendarSteps((c) => c + 1);
-        setCalendarDate((dt) => dt.plus({ months: 1 }));
+        if (isDropdown) {
+            setCalendarDate((dt) => dt.plus({ months: 1 }));
+            setForceRenderIncrement((c) => c + 1);
+        }
+        else {
+            setCalendarSteps((c) => c + 1);
+            setCalendarDate((dt) => dt.plus({ months: 1 }));
+        }
     };
     const handlePrevious = () => {
-        setCalendarSteps((c) => c - 1);
-        setCalendarDate((dt) => dt.minus({ months: 1 }));
+        if (isDropdown) {
+            setCalendarDate((dt) => dt.minus({ months: 1 }));
+            setForceRenderIncrement((c) => c + 1);
+        }
+        else {
+            setCalendarSteps((c) => c - 1);
+            setCalendarDate((dt) => dt.minus({ months: 1 }));
+        }
     };
     const handleDateSelect = (selectedDate) => {
-        onChangeRef.current(selectedDate);
-        closePopover();
+        if (showTime) {
+            onChangeRef.current(selectedDate.set({ hour: pendingHour, minute: pendingMinute }));
+        }
+        else {
+            onChangeRef.current(selectedDate);
+            closePopover();
+        }
+    };
+    const handleTimeChange = (hour, minute) => {
+        setPendingHour(hour);
+        setPendingMinute(minute);
+        if (value) {
+            onChangeRef.current(value.set({ hour, minute }));
+        }
+    };
+    const handleDropdownMonthChange = (month) => {
+        setCalendarDate(DateTime.local(calendarDate.year, month, 1));
+        setForceRenderIncrement((c) => c + 1);
+    };
+    const handleDropdownYearChange = (year) => {
+        setCalendarDate(DateTime.local(year, calendarDate.month, 1));
+        setForceRenderIncrement((c) => c + 1);
     };
     // Force re-renders when `value` changes out of band from direct user-selection
     useEffect(() => {
@@ -82,15 +124,105 @@ export const DateCalendar = () => {
             }
         });
     }, [calendarDate]);
-    return (_jsx("div", { className: s.CalendarWrapper, children: _jsxs("div", { ref: calendarContainerRef, className: s.CalendarContainer, children: [_jsx("div", { className: s.Previous, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handlePrevious, disabled: !canGoBack, children: _jsx(ChevronLeft, {}) }) }), _jsx("div", { className: s.Next, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handleNext, disabled: !canGoForward, children: _jsx(ChevronRight, {}) }) }), _jsx("div", { className: s.CalendarRange, style: {
-                        transform: `translate(${calendarSteps * -1 * STEP_DISTANCE_PX}px, 0)`,
-                    }, children: _jsx(TransitionGroup, { enterDuration: 400, exitDuration: 400, children: _jsx(CalendarView, { stepPosition: calendarSteps, date: calendarDate, selectedDate: value, min: min, max: max, onDateSelect: handleDateSelect }, calendarDate.toLocaleString({
+    return (_jsxs("div", { className: s.CalendarWrapper, children: [_jsxs("div", { ref: calendarContainerRef, className: s.CalendarContainer, "data-dropdown": isDropdown ? "" : undefined, children: [_jsx("div", { className: s.Previous, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handlePrevious, disabled: !canGoBack, children: _jsx(ChevronLeft, {}) }) }), _jsx("div", { className: s.Next, children: _jsx(Button, { variant: "ghost", color: "secondary", size: "sm", gutterSize: "2xs", pill: false, iconSize: "sm", onClick: handleNext, disabled: !canGoForward, children: _jsx(ChevronRight, {}) }) }), isDropdown && (_jsx(DropdownCaption, { date: calendarDate, onMonthChange: handleDropdownMonthChange, onYearChange: handleDropdownYearChange, min: min, max: max, yearRange: yearRange })), _jsx("div", { className: s.CalendarRange, style: !isDropdown
+                            ? { transform: `translate(${calendarSteps * -1 * STEP_DISTANCE_PX}px, 0)` }
+                            : undefined, children: !isDropdown ? (_jsx(TransitionGroup, { enterDuration: 400, exitDuration: 400, children: _jsx(CalendarView, { stepPosition: calendarSteps, date: calendarDate, selectedDate: value, min: min, max: max, onDateSelect: handleDateSelect, hideMonthLabel: false }, calendarDate.toLocaleString({
+                                month: "long",
+                                year: "numeric",
+                            })) })) : (_jsx(CalendarView, { stepPosition: 0, date: calendarDate, selectedDate: value, min: min, max: max, onDateSelect: handleDateSelect, hideMonthLabel: true }, calendarDate.toLocaleString({
                             month: "long",
                             year: "numeric",
-                        })) }) })] }) }, `stable-view-${forceRenderIncrement}`));
+                        }))) })] }), showTime && (_jsx(TimeInput, { hour: pendingHour, minute: pendingMinute, onChange: handleTimeChange }))] }, `stable-view-${forceRenderIncrement}`));
+};
+const DropdownCaption = ({ date, onMonthChange, onYearChange, min, max, yearRange, }) => {
+    const currentYear = DateTime.now().year;
+    const minYear = yearRange?.[0] ?? min?.year ?? currentYear - 120;
+    const maxYear = yearRange?.[1] ?? max?.year ?? currentYear;
+    const years = useMemo(() => {
+        const result = [];
+        for (let y = maxYear; y >= minYear; y--) {
+            result.push(y);
+        }
+        return result;
+    }, [minYear, maxYear]);
+    return (_jsxs("div", { className: s.DropdownCaption, children: [_jsx("select", { className: s.DropdownSelect, value: date.month, onChange: (e) => onMonthChange(Number(e.target.value)), children: SHORT_MONTH_NAMES.map((name, i) => (_jsx("option", { value: i + 1, children: name }, name))) }), _jsx("select", { className: s.DropdownSelect, value: date.year, onChange: (e) => onYearChange(Number(e.target.value)), children: years.map((y) => (_jsx("option", { value: y, children: y }, y))) })] }));
+};
+const TimeInput = ({ hour, minute, onChange }) => {
+    const hourRef = useRef(null);
+    const minuteRef = useRef(null);
+    const [hourText, setHourText] = useState(() => String(hour).padStart(2, "0"));
+    const [minuteText, setMinuteText] = useState(() => String(minute).padStart(2, "0"));
+    useEffect(() => {
+        if (document.activeElement !== hourRef.current) {
+            setHourText(String(hour).padStart(2, "0"));
+        }
+    }, [hour]);
+    useEffect(() => {
+        if (document.activeElement !== minuteRef.current) {
+            setMinuteText(String(minute).padStart(2, "0"));
+        }
+    }, [minute]);
+    const handleHourChange = (e) => {
+        const raw = e.target.value.replace(/\D/g, "").slice(0, 2);
+        setHourText(raw);
+        if (raw.length === 2) {
+            onChange(Math.min(23, Number(raw)), minute);
+            minuteRef.current?.focus();
+            minuteRef.current?.select();
+        }
+    };
+    const handleHourBlur = (e) => {
+        const raw = e.currentTarget.value.replace(/\D/g, "").slice(0, 2);
+        const h = Math.min(23, Number(raw) || 0);
+        onChange(h, minute);
+        setHourText(String(h).padStart(2, "0"));
+    };
+    const handleMinuteChange = (e) => {
+        const raw = e.target.value.replace(/\D/g, "").slice(0, 2);
+        setMinuteText(raw);
+        if (raw.length === 2) {
+            onChange(hour, Math.min(59, Number(raw)));
+        }
+    };
+    const handleMinuteBlur = (e) => {
+        const raw = e.currentTarget.value.replace(/\D/g, "").slice(0, 2);
+        const m = Math.min(59, Number(raw) || 0);
+        onChange(hour, m);
+        setMinuteText(String(m).padStart(2, "0"));
+    };
+    const handleKeyDown = (e, type) => {
+        const step = e.shiftKey ? 10 : 1;
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            if (type === "hour") {
+                const h = (hour + step) % 24;
+                onChange(h, minute);
+                setHourText(String(h).padStart(2, "0"));
+            }
+            else {
+                const m = (minute + step) % 60;
+                onChange(hour, m);
+                setMinuteText(String(m).padStart(2, "0"));
+            }
+        }
+        else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            if (type === "hour") {
+                const h = (hour - step + 24) % 24;
+                onChange(h, minute);
+                setHourText(String(h).padStart(2, "0"));
+            }
+            else {
+                const m = (minute - step + 60) % 60;
+                onChange(hour, m);
+                setMinuteText(String(m).padStart(2, "0"));
+            }
+        }
+    };
+    return (_jsxs("div", { className: s.TimeFooter, children: [_jsx("span", { className: s.TimeLabel, children: "Time" }), _jsxs("div", { className: s.TimeInputGroup, children: [_jsx("input", { ref: hourRef, className: s.TimeField, type: "text", inputMode: "numeric", value: hourText, onChange: handleHourChange, onBlur: handleHourBlur, onFocus: (e) => e.target.select(), onKeyDown: (e) => handleKeyDown(e, "hour"), maxLength: 2, "aria-label": "Hour" }), _jsx("span", { className: s.TimeSeparator, children: ":" }), _jsx("input", { ref: minuteRef, className: s.TimeField, type: "text", inputMode: "numeric", value: minuteText, onChange: handleMinuteChange, onBlur: handleMinuteBlur, onFocus: (e) => e.target.select(), onKeyDown: (e) => handleKeyDown(e, "minute"), maxLength: 2, "aria-label": "Minute" })] })] }));
 };
 const daysOfTheWeekLabels = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-const CalendarView = ({ date, selectedDate, min, max, onDateSelect, stepPosition, }) => {
+const CalendarView = ({ date, selectedDate, min, max, onDateSelect, stepPosition, hideMonthLabel = false, }) => {
     // Lock position on mount and don't respond to changes
     const [position] = useState(stepPosition);
     const { startOfMonth, weeks, enabledInterval } = useMemo(() => {
@@ -108,14 +240,14 @@ const CalendarView = ({ date, selectedDate, min, max, onDateSelect, stepPosition
             enabledInterval: enabledDateInterval,
         };
     }, [date, min, max]);
-    return (_jsxs("div", { className: s.Calendar, style: { left: position * STEP_DISTANCE_PX }, "data-calendar": true, children: [_jsxs("p", { className: s.MonthLabel, children: [startOfMonth.monthLong, " ", startOfMonth.year] }), _jsx("div", { className: s.Week, children: daysOfTheWeekLabels.map((day) => (_jsx("div", { className: s.DayLabel, children: day }, day))) }), weeks.map((week, weekIndex) => (_jsx("div", { className: s.Week, children: week.map((d, dayIndex) => {
+    return (_jsxs("div", { className: s.Calendar, style: hideMonthLabel ? undefined : { left: position * STEP_DISTANCE_PX }, "data-calendar": true, "data-static": hideMonthLabel ? "" : undefined, children: [hideMonthLabel ? (_jsx("div", { className: s.MonthLabelSpacer, "aria-hidden": "true" })) : (_jsxs("p", { className: s.MonthLabel, children: [startOfMonth.monthLong, " ", startOfMonth.year] })), _jsx("div", { className: s.Week, children: daysOfTheWeekLabels.map((day) => (_jsx("div", { className: s.DayLabel, children: day }, day))) }), weeks.map((week, weekIndex) => (_jsx("div", { className: s.Week, children: week.map((d, dayIndex) => {
                     if (!d) {
                         return _jsx("div", { className: s.Day }, `${weekIndex}-${dayIndex}`);
                     }
                     const enabled = enabledInterval.contains(d);
                     const isSelected = enabled && selectedDate && isSameDay(d, selectedDate);
                     const dayIsToday = isToday(d);
-                    return (_jsx("div", { className: s.Day, "data-is-selected": isSelected ? "" : undefined, children: _jsxs("button", { className: s.InteractiveDay, disabled: !enabled, onClick: () => d && onDateSelect?.(d), children: [d.day, dayIsToday && _jsx("span", { className: s.TodayDot })] }) }, dayIndex));
+                    return (_jsx("div", { className: s.Day, "data-is-selected": isSelected ? "" : undefined, children: _jsxs("button", { type: "button", className: s.InteractiveDay, disabled: !enabled, onClick: () => d && onDateSelect?.(d), children: [d.day, dayIsToday && _jsx("span", { className: s.TodayDot })] }) }, dayIndex));
                 }) }, weekIndex)))] }));
 };
 //# sourceMappingURL=Calendar.js.map

package/dist/es/components/DatePicker/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/Calendar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { DateTime, Interval } from \"luxon\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\nimport { chunkIntoWeeks, getDaysOfMonth, isBefore, isSameDay, isToday } from \"../../lib/dateUtils\"\nimport { waitForAnimationFrame } from \"../../lib/helpers\"\nimport { Button } from \"../Button\"\nimport { ChevronLeft, ChevronRight } from \"../Icon\"\nimport { usePopoverClose } from \"../Popover/usePopoverController\"\nimport { TransitionGroup } from \"../Transition\"\nimport s from \"./Calendar.module.css\"\nimport { useDateContext } from \"./context\"\n\nconst CALENDAR_WIDTH_PX = 210\nconst CALENDAR_GAP_PX = 32\nconst STEP_DISTANCE_PX = CALENDAR_WIDTH_PX + CALENDAR_GAP_PX\n\nexport const DateCalendar = () => {\n  const { value, min, max, onChangeRef } = useDateContext()\n  const closePopover = usePopoverClose()\n  const calendarContainerRef = useRef<HTMLDivElement | null>(null)\n  const [calendarSteps, setCalendarSteps] = useState<number>(0)\n  const [forceRenderIncrement, setForceRenderIncrement] = useState<number>(0)\n  const [calendarDate, setCalendarDate] = useState<DateTime>(() => value ?? DateTime.now())\n\n  const canGoBack = !min || isBefore(min, calendarDate.startOf(\"month\"))\n  const canGoForward = !max || isBefore(calendarDate.endOf(\"month\"), max)\n\n  const handleNext = () => {\n    setCalendarSteps((c) => c + 1)\n    setCalendarDate((dt) => dt.plus({ months: 1 }))\n  }\n\n  const handlePrevious = () => {\n    setCalendarSteps((c) => c - 1)\n    setCalendarDate((dt) => dt.minus({ months: 1 }))\n  }\n\n  const handleDateSelect = (selectedDate: DateTime) => {\n    onChangeRef.current(selectedDate)\n    closePopover()\n  }\n\n  // Force re-renders when `value` changes out of band from direct user-selection\n  useEffect(() => {\n    // No-op when value is empty\n    if (!value) {\n      return\n    }\n\n    // Check if `value` is still within view of our calendar\n    const viewInterval = Interval.fromDateTimes(\n      calendarDate.startOf(\"month\"),\n      calendarDate.endOf(\"month\"),\n    )\n    const isValueInRangeOfCalendar = viewInterval.contains(value)\n    if (!isValueInRangeOfCalendar) {\n      // Reset state the calendar view entirely\n      setCalendarSteps(0)\n      setCalendarDate(value)\n      setForceRenderIncrement((c) => c + 1)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only re-run this hook when value changes\n  }, [value])\n\n  // Detect height changes when new calendars are rendered\n  useEffect(() => {\n    waitForAnimationFrame(() => {\n      const container = calendarContainerRef.current\n\n      if (!container) {\n        return\n      }\n\n      let maxHeight = -Infinity\n\n      // Find the tallest calendar\n      container.querySelectorAll(\"[data-calendar]\")?.forEach((element) => {\n        // NOTE: clientHeight does not respect the scale() that popover uses to animate in, which is what we want\n        // We want to know the full height of the element, without any transform applied.\n        const height = element.clientHeight\n\n        // Ignore calendars that are exiting\n        if (element.closest(\"[data-exiting\")) {\n          return\n        }\n\n        if (height > maxHeight) {\n          maxHeight = height\n        }\n      })\n\n      container.style.height = `${maxHeight}px`\n\n      // Don't animate the initial height.\n      // This is relevant when the calendar opens to a larger size than the default.\n      if (!container.style.transition) {\n        waitForAnimationFrame(() => {\n          container.style.transition = `height 0.25s var(--cubic-move)`\n        })\n      }\n    })\n  }, [calendarDate])\n\n  return (\n    <div className={s.CalendarWrapper} key={`stable-view-${forceRenderIncrement}`}>\n      <div ref={calendarContainerRef} className={s.CalendarContainer}>\n        <div className={s.Previous}>\n          <Button\n            variant=\"ghost\"\n            color=\"secondary\"\n            size=\"sm\"\n            gutterSize=\"2xs\"\n            pill={false}\n            iconSize=\"sm\"\n            onClick={handlePrevious}\n            disabled={!canGoBack}\n          >\n            <ChevronLeft />\n          </Button>\n        </div>\n        <div className={s.Next}>\n          <Button\n            variant=\"ghost\"\n            color=\"secondary\"\n            size=\"sm\"\n            gutterSize=\"2xs\"\n            pill={false}\n            iconSize=\"sm\"\n            onClick={handleNext}\n            disabled={!canGoForward}\n          >\n            <ChevronRight />\n          </Button>\n        </div>\n        <div\n          className={s.CalendarRange}\n          style={{\n            transform: `translate(${calendarSteps * -1 * STEP_DISTANCE_PX}px, 0)`,\n          }}\n        >\n          <TransitionGroup enterDuration={400} exitDuration={400}>\n            <CalendarView\n              key={calendarDate.toLocaleString({\n                month: \"long\",\n                year: \"numeric\",\n              })}\n              stepPosition={calendarSteps}\n              date={calendarDate}\n              selectedDate={value}\n              min={min}\n              max={max}\n              onDateSelect={handleDateSelect}\n            />\n          </TransitionGroup>\n        </div>\n      </div>\n    </div>\n  )\n}\n\ntype CalendarViewProps = {\n  // Can be any day within the given month that the calendar should render for\n  date: DateTime\n  selectedDate?: DateTime | null\n  onDateSelect?: (dt: DateTime) => void\n  min?: DateTime\n  max?: DateTime\n  stepPosition: number\n}\n\nconst daysOfTheWeekLabels = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]\n\nconst CalendarView = ({\n  date,\n  selectedDate,\n  min,\n  max,\n  onDateSelect,\n  stepPosition,\n}: CalendarViewProps) => {\n  // Lock position on mount and don't respond to changes\n  const [position] = useState(stepPosition)\n  const { startOfMonth, weeks, enabledInterval } = useMemo(() => {\n    const monthStart = date.startOf(\"month\")\n    const endOfMonth = date.endOf(\"month\")\n\n    const daysBeforeMonthStart = monthStart.weekday % 7\n    const blankDays = new Array(daysBeforeMonthStart).fill(null)\n    const daysInMonth = getDaysOfMonth(monthStart)\n    const calendarCells = [...blankDays, ...daysInMonth]\n\n    const enabledDateInterval = Interval.fromDateTimes(min || monthStart, max || endOfMonth)\n\n    return {\n      startOfMonth: monthStart,\n      endOfMonth,\n      weeks: chunkIntoWeeks(calendarCells, 7),\n      enabledInterval: enabledDateInterval,\n    }\n  }, [date, min, max])\n\n  return (\n    <div className={s.Calendar} style={{ left: position * STEP_DISTANCE_PX }} data-calendar>\n      <p className={s.MonthLabel}>\n        {startOfMonth.monthLong} {startOfMonth.year}\n      </p>\n      <div className={s.Week}>\n        {daysOfTheWeekLabels.map((day) => (\n          <div key={day} className={s.DayLabel}>\n            {day}\n          </div>\n        ))}\n      </div>\n      {weeks.map((week, weekIndex) => (\n        <div className={s.Week} key={weekIndex}>\n          {week.map((d, dayIndex) => {\n            if (!d) {\n              return <div className={s.Day} key={`${weekIndex}-${dayIndex}`} />\n            }\n\n            const enabled = enabledInterval.contains(d)\n            const isSelected = enabled && selectedDate && isSameDay(d, selectedDate)\n            const dayIsToday = isToday(d)\n\n            return (\n              <div className={s.Day} key={dayIndex} data-is-selected={isSelected ? \"\" : undefined}>\n                <button\n                  className={s.InteractiveDay}\n                  disabled={!enabled}\n                  onClick={() => d && onDateSelect?.(d)}\n                >\n                  {d.day}\n                  {dayIsToday && <span className={s.TodayDot} />}\n                </button>\n              </div>\n            )\n          })}\n        </div>\n      ))}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/Calendar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { DateTime, Interval } from \"luxon\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\nimport { chunkIntoWeeks, getDaysOfMonth, isBefore, isSameDay, isToday } from \"../../lib/dateUtils\"\nimport { waitForAnimationFrame } from \"../../lib/helpers\"\nimport { Button } from \"../Button\"\nimport { ChevronLeft, ChevronRight } from \"../Icon\"\nimport { usePopoverClose } from \"../Popover/usePopoverController\"\nimport { TransitionGroup } from \"../Transition\"\nimport s from \"./Calendar.module.css\"\nimport { useDateContext } from \"./context\"\n\nconst CALENDAR_WIDTH_PX = 210\nconst CALENDAR_GAP_PX = 32\nconst STEP_DISTANCE_PX = CALENDAR_WIDTH_PX + CALENDAR_GAP_PX\n\nconst SHORT_MONTH_NAMES = Array.from({ length: 12 }, (_, i) =>\n  DateTime.local(2024, i + 1, 1).monthShort!,\n)\n\nexport const DateCalendar = () => {\n  const { value, min, max, onChangeRef, captionLayout, showTime, yearRange } = useDateContext()\n  const closePopover = usePopoverClose()\n  const calendarContainerRef = useRef<HTMLDivElement | null>(null)\n  const [calendarSteps, setCalendarSteps] = useState<number>(0)\n  const [forceRenderIncrement, setForceRenderIncrement] = useState<number>(0)\n  const [calendarDate, setCalendarDate] = useState<DateTime>(() => value ?? DateTime.now())\n\n  const isDropdown = captionLayout === \"dropdown\"\n\n  const canGoBack = !min || isBefore(min, calendarDate.startOf(\"month\"))\n  const canGoForward = !max || isBefore(calendarDate.endOf(\"month\"), max)\n\n  const [pendingHour, setPendingHour] = useState<number>(() => value?.hour ?? 12)\n  const [pendingMinute, setPendingMinute] = useState<number>(() => value?.minute ?? 0)\n\n  useEffect(() => {\n    if (value) {\n      setPendingHour(value.hour)\n      setPendingMinute(value.minute)\n    }\n  }, [value])\n\n  const handleNext = () => {\n    if (isDropdown) {\n      setCalendarDate((dt) => dt.plus({ months: 1 }))\n      setForceRenderIncrement((c) => c + 1)\n    } else {\n      setCalendarSteps((c) => c + 1)\n      setCalendarDate((dt) => dt.plus({ months: 1 }))\n    }\n  }\n\n  const handlePrevious = () => {\n    if (isDropdown) {\n      setCalendarDate((dt) => dt.minus({ months: 1 }))\n      setForceRenderIncrement((c) => c + 1)\n    } else {\n      setCalendarSteps((c) => c - 1)\n      setCalendarDate((dt) => dt.minus({ months: 1 }))\n    }\n  }\n\n  const handleDateSelect = (selectedDate: DateTime) => {\n    if (showTime) {\n      onChangeRef.current(selectedDate.set({ hour: pendingHour, minute: pendingMinute }))\n    } else {\n      onChangeRef.current(selectedDate)\n      closePopover()\n    }\n  }\n\n  const handleTimeChange = (hour: number, minute: number) => {\n    setPendingHour(hour)\n    setPendingMinute(minute)\n    if (value) {\n      onChangeRef.current(value.set({ hour, minute }))\n    }\n  }\n\n  const handleDropdownMonthChange = (month: number) => {\n    setCalendarDate(DateTime.local(calendarDate.year, month, 1))\n    setForceRenderIncrement((c) => c + 1)\n  }\n\n  const handleDropdownYearChange = (year: number) => {\n    setCalendarDate(DateTime.local(year, calendarDate.month, 1))\n    setForceRenderIncrement((c) => c + 1)\n  }\n\n  // Force re-renders when `value` changes out of band from direct user-selection\n  useEffect(() => {\n    // No-op when value is empty\n    if (!value) {\n      return\n    }\n\n    // Check if `value` is still within view of our calendar\n    const viewInterval = Interval.fromDateTimes(\n      calendarDate.startOf(\"month\"),\n      calendarDate.endOf(\"month\"),\n    )\n    const isValueInRangeOfCalendar = viewInterval.contains(value)\n    if (!isValueInRangeOfCalendar) {\n      // Reset state the calendar view entirely\n      setCalendarSteps(0)\n      setCalendarDate(value)\n      setForceRenderIncrement((c) => c + 1)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only re-run this hook when value changes\n  }, [value])\n\n  // Detect height changes when new calendars are rendered\n  useEffect(() => {\n    waitForAnimationFrame(() => {\n      const container = calendarContainerRef.current\n\n      if (!container) {\n        return\n      }\n\n      let maxHeight = -Infinity\n\n      // Find the tallest calendar\n      container.querySelectorAll(\"[data-calendar]\")?.forEach((element) => {\n        // NOTE: clientHeight does not respect the scale() that popover uses to animate in, which is what we want\n        // We want to know the full height of the element, without any transform applied.\n        const height = element.clientHeight\n\n        // Ignore calendars that are exiting\n        if (element.closest(\"[data-exiting\")) {\n          return\n        }\n\n        if (height > maxHeight) {\n          maxHeight = height\n        }\n      })\n\n      container.style.height = `${maxHeight}px`\n\n      // Don't animate the initial height.\n      // This is relevant when the calendar opens to a larger size than the default.\n      if (!container.style.transition) {\n        waitForAnimationFrame(() => {\n          container.style.transition = `height 0.25s var(--cubic-move)`\n        })\n      }\n    })\n  }, [calendarDate])\n\n  return (\n    <div className={s.CalendarWrapper} key={`stable-view-${forceRenderIncrement}`}>\n      <div ref={calendarContainerRef} className={s.CalendarContainer} data-dropdown={isDropdown ? \"\" : undefined}>\n        <div className={s.Previous}>\n          <Button\n            variant=\"ghost\"\n            color=\"secondary\"\n            size=\"sm\"\n            gutterSize=\"2xs\"\n            pill={false}\n            iconSize=\"sm\"\n            onClick={handlePrevious}\n            disabled={!canGoBack}\n          >\n            <ChevronLeft />\n          </Button>\n        </div>\n        <div className={s.Next}>\n          <Button\n            variant=\"ghost\"\n            color=\"secondary\"\n            size=\"sm\"\n            gutterSize=\"2xs\"\n            pill={false}\n            iconSize=\"sm\"\n            onClick={handleNext}\n            disabled={!canGoForward}\n          >\n            <ChevronRight />\n          </Button>\n        </div>\n        {isDropdown && (\n          <DropdownCaption\n            date={calendarDate}\n            onMonthChange={handleDropdownMonthChange}\n            onYearChange={handleDropdownYearChange}\n            min={min}\n            max={max}\n            yearRange={yearRange}\n          />\n        )}\n        <div\n          className={s.CalendarRange}\n          style={\n            !isDropdown\n              ? { transform: `translate(${calendarSteps * -1 * STEP_DISTANCE_PX}px, 0)` }\n              : undefined\n          }\n        >\n          {!isDropdown ? (\n            <TransitionGroup enterDuration={400} exitDuration={400}>\n              <CalendarView\n                key={calendarDate.toLocaleString({\n                  month: \"long\",\n                  year: \"numeric\",\n                })}\n                stepPosition={calendarSteps}\n                date={calendarDate}\n                selectedDate={value}\n                min={min}\n                max={max}\n                onDateSelect={handleDateSelect}\n                hideMonthLabel={false}\n              />\n            </TransitionGroup>\n          ) : (\n            <CalendarView\n              key={calendarDate.toLocaleString({\n                month: \"long\",\n                year: \"numeric\",\n              })}\n              stepPosition={0}\n              date={calendarDate}\n              selectedDate={value}\n              min={min}\n              max={max}\n              onDateSelect={handleDateSelect}\n              hideMonthLabel\n            />\n          )}\n        </div>\n      </div>\n      {showTime && (\n        <TimeInput\n          hour={pendingHour}\n          minute={pendingMinute}\n          onChange={handleTimeChange}\n        />\n      )}\n    </div>\n  )\n}\n\ntype DropdownCaptionProps = {\n  date: DateTime\n  onMonthChange: (month: number) => void\n  onYearChange: (year: number) => void\n  min?: DateTime\n  max?: DateTime\n  yearRange?: [number, number]\n}\n\nconst DropdownCaption = ({\n  date,\n  onMonthChange,\n  onYearChange,\n  min,\n  max,\n  yearRange,\n}: DropdownCaptionProps) => {\n  const currentYear = DateTime.now().year\n  const minYear = yearRange?.[0] ?? min?.year ?? currentYear - 120\n  const maxYear = yearRange?.[1] ?? max?.year ?? currentYear\n\n  const years = useMemo(() => {\n    const result: number[] = []\n    for (let y = maxYear; y >= minYear; y--) {\n      result.push(y)\n    }\n    return result\n  }, [minYear, maxYear])\n\n  return (\n    <div className={s.DropdownCaption}>\n      <select\n        className={s.DropdownSelect}\n        value={date.month}\n        onChange={(e) => onMonthChange(Number(e.target.value))}\n      >\n        {SHORT_MONTH_NAMES.map((name, i) => (\n          <option key={name} value={i + 1}>\n            {name}\n          </option>\n        ))}\n      </select>\n      <select\n        className={s.DropdownSelect}\n        value={date.year}\n        onChange={(e) => onYearChange(Number(e.target.value))}\n      >\n        {years.map((y) => (\n          <option key={y} value={y}>\n            {y}\n          </option>\n        ))}\n      </select>\n    </div>\n  )\n}\n\ntype TimeInputProps = {\n  hour: number\n  minute: number\n  onChange: (hour: number, minute: number) => void\n}\n\nconst TimeInput = ({ hour, minute, onChange }: TimeInputProps) => {\n  const hourRef = useRef<HTMLInputElement>(null)\n  const minuteRef = useRef<HTMLInputElement>(null)\n  const [hourText, setHourText] = useState(() => String(hour).padStart(2, \"0\"))\n  const [minuteText, setMinuteText] = useState(() => String(minute).padStart(2, \"0\"))\n\n  useEffect(() => {\n    if (document.activeElement !== hourRef.current) {\n      setHourText(String(hour).padStart(2, \"0\"))\n    }\n  }, [hour])\n\n  useEffect(() => {\n    if (document.activeElement !== minuteRef.current) {\n      setMinuteText(String(minute).padStart(2, \"0\"))\n    }\n  }, [minute])\n\n  const handleHourChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value.replace(/\\D/g, \"\").slice(0, 2)\n    setHourText(raw)\n    if (raw.length === 2) {\n      onChange(Math.min(23, Number(raw)), minute)\n      minuteRef.current?.focus()\n      minuteRef.current?.select()\n    }\n  }\n\n  const handleHourBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    const raw = e.currentTarget.value.replace(/\\D/g, \"\").slice(0, 2)\n    const h = Math.min(23, Number(raw) || 0)\n    onChange(h, minute)\n    setHourText(String(h).padStart(2, \"0\"))\n  }\n\n  const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value.replace(/\\D/g, \"\").slice(0, 2)\n    setMinuteText(raw)\n    if (raw.length === 2) {\n      onChange(hour, Math.min(59, Number(raw)))\n    }\n  }\n\n  const handleMinuteBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    const raw = e.currentTarget.value.replace(/\\D/g, \"\").slice(0, 2)\n    const m = Math.min(59, Number(raw) || 0)\n    onChange(hour, m)\n    setMinuteText(String(m).padStart(2, \"0\"))\n  }\n\n  const handleKeyDown = (\n    e: React.KeyboardEvent<HTMLInputElement>,\n    type: \"hour\" | \"minute\",\n  ) => {\n    const step = e.shiftKey ? 10 : 1\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault()\n      if (type === \"hour\") {\n        const h = (hour + step) % 24\n        onChange(h, minute)\n        setHourText(String(h).padStart(2, \"0\"))\n      } else {\n        const m = (minute + step) % 60\n        onChange(hour, m)\n        setMinuteText(String(m).padStart(2, \"0\"))\n      }\n    } else if (e.key === \"ArrowDown\") {\n      e.preventDefault()\n      if (type === \"hour\") {\n        const h = (hour - step + 24) % 24\n        onChange(h, minute)\n        setHourText(String(h).padStart(2, \"0\"))\n      } else {\n        const m = (minute - step + 60) % 60\n        onChange(hour, m)\n        setMinuteText(String(m).padStart(2, \"0\"))\n      }\n    }\n  }\n\n  return (\n    <div className={s.TimeFooter}>\n      <span className={s.TimeLabel}>Time</span>\n      <div className={s.TimeInputGroup}>\n        <input\n          ref={hourRef}\n          className={s.TimeField}\n          type=\"text\"\n          inputMode=\"numeric\"\n          value={hourText}\n          onChange={handleHourChange}\n          onBlur={handleHourBlur}\n          onFocus={(e) => e.target.select()}\n          onKeyDown={(e) => handleKeyDown(e, \"hour\")}\n          maxLength={2}\n          aria-label=\"Hour\"\n        />\n        <span className={s.TimeSeparator}>:</span>\n        <input\n          ref={minuteRef}\n          className={s.TimeField}\n          type=\"text\"\n          inputMode=\"numeric\"\n          value={minuteText}\n          onChange={handleMinuteChange}\n          onBlur={handleMinuteBlur}\n          onFocus={(e) => e.target.select()}\n          onKeyDown={(e) => handleKeyDown(e, \"minute\")}\n          maxLength={2}\n          aria-label=\"Minute\"\n        />\n      </div>\n    </div>\n  )\n}\n\ntype CalendarViewProps = {\n  date: DateTime\n  selectedDate?: DateTime | null\n  onDateSelect?: (dt: DateTime) => void\n  min?: DateTime\n  max?: DateTime\n  stepPosition: number\n  hideMonthLabel?: boolean\n}\n\nconst daysOfTheWeekLabels = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]\n\nconst CalendarView = ({\n  date,\n  selectedDate,\n  min,\n  max,\n  onDateSelect,\n  stepPosition,\n  hideMonthLabel = false,\n}: CalendarViewProps) => {\n  // Lock position on mount and don't respond to changes\n  const [position] = useState(stepPosition)\n  const { startOfMonth, weeks, enabledInterval } = useMemo(() => {\n    const monthStart = date.startOf(\"month\")\n    const endOfMonth = date.endOf(\"month\")\n\n    const daysBeforeMonthStart = monthStart.weekday % 7\n    const blankDays = new Array(daysBeforeMonthStart).fill(null)\n    const daysInMonth = getDaysOfMonth(monthStart)\n    const calendarCells = [...blankDays, ...daysInMonth]\n\n    const enabledDateInterval = Interval.fromDateTimes(min || monthStart, max || endOfMonth)\n\n    return {\n      startOfMonth: monthStart,\n      endOfMonth,\n      weeks: chunkIntoWeeks(calendarCells, 7),\n      enabledInterval: enabledDateInterval,\n    }\n  }, [date, min, max])\n\n  return (\n    <div\n      className={s.Calendar}\n      style={hideMonthLabel ? undefined : { left: position * STEP_DISTANCE_PX }}\n      data-calendar\n      data-static={hideMonthLabel ? \"\" : undefined}\n    >\n      {hideMonthLabel ? (\n        <div className={s.MonthLabelSpacer} aria-hidden=\"true\" />\n      ) : (\n        <p className={s.MonthLabel}>\n          {startOfMonth.monthLong} {startOfMonth.year}\n        </p>\n      )}\n      <div className={s.Week}>\n        {daysOfTheWeekLabels.map((day) => (\n          <div key={day} className={s.DayLabel}>\n            {day}\n          </div>\n        ))}\n      </div>\n      {weeks.map((week, weekIndex) => (\n        <div className={s.Week} key={weekIndex}>\n          {week.map((d, dayIndex) => {\n            if (!d) {\n              return <div className={s.Day} key={`${weekIndex}-${dayIndex}`} />\n            }\n\n            const enabled = enabledInterval.contains(d)\n            const isSelected = enabled && selectedDate && isSameDay(d, selectedDate)\n            const dayIsToday = isToday(d)\n\n            return (\n              <div className={s.Day} key={dayIndex} data-is-selected={isSelected ? \"\" : undefined}>\n                <button\n                  type=\"button\"\n                  className={s.InteractiveDay}\n                  disabled={!enabled}\n                  onClick={() => d && onDateSelect?.(d)}\n                >\n                  {d.day}\n                  {dayIsToday && <span className={s.TodayDot} />}\n                </button>\n              </div>\n            )\n          })}\n        </div>\n      ))}\n    </div>\n  )\n}\n"]}

package/dist/es/components/DatePicker/Calendar.module.css

@@ -71,6 +71,11 @@
   }/*  Lift the inner button above the pseudo elements to avoid clipping in the focus ring box shadow. */.Next button[type="button"],
 .Previous button[type="button"] {
   z-index: 2;
+}.CalendarContainer[data-dropdown] .Previous::before,
+.CalendarContainer[data-dropdown] .Previous::after,
+.CalendarContainer[data-dropdown] .Next::before,
+.CalendarContainer[data-dropdown] .Next::after {
+  display: none;
 }.CalendarWrapper {
   overflow: hidden;
   padding: 10px 12px 12px;
@@ -84,7 +89,11 @@
   top: 0;
   width: 210px;
   font-size: 14px;
-}.Week {
+}
+
+  .Calendar[data-static] {
+    position: relative;
+  }.Week {
   display: flex;
   margin-bottom: var(--cell-vertical-gutter);
 }
@@ -190,5 +199,102 @@ background-color: var(--alpha-08);
 
   [data-is-selected] .TodayDot {
     background-color: var(--gray-0);
+  }.MonthLabelSpacer {
+  height: 28px;
+  margin: 0 0 6px;
+}.DropdownCaption {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  height: 28px;
+  pointer-events: none;
+}.DropdownSelect {
+  height: 28px;
+  padding: 0 18px 0 8px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: right 4px center;
+  background-repeat: no-repeat;
+  color: var(--color-text);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: var(--font-weight-semibold);
+  pointer-events: auto;
+  transition: background-color 0.15s var(--cubic-enter);
+}
+
+  @media (hover: hover) and (pointer: fine) {.DropdownSelect:hover, :where([data-theme="light"]) .DropdownSelect:hover {
+background-color: var(--alpha-04);
+}:where([data-theme="dark"]) .DropdownSelect:hover {
+background-color: var(--alpha-06);
+}
+}
+
+  .DropdownSelect:focus-visible {
+    border-radius: var(--radius-sm);
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: -2px;
+  }.TimeFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  margin-top: 10px;
+}.TimeFooter, :where([data-theme="light"]) .TimeFooter {
+border-top: 1px solid var(--alpha-06);
+}:where([data-theme="dark"]) .TimeFooter {
+border-top: 1px solid var(--alpha-08);
+}.TimeLabel {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}.TimeInputGroup {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}.TimeField {
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+  transition: background-color 0.15s var(--cubic-enter);
+}.TimeField, :where([data-theme="light"]) .TimeField {
+background-color: var(--alpha-04);
+}:where([data-theme="dark"]) .TimeField {
+background-color: var(--alpha-06);
+}
+
+  .TimeField:focus {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: -2px;
   }
+
+  .TimeField:focus, :where([data-theme="light"]) .TimeField:focus {
+background-color: var(--alpha-06);
+}
+
+  :where([data-theme="dark"]) .TimeField:focus {
+background-color: var(--alpha-08);
+}.TimeSeparator {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
 }

package/dist/es/components/DatePicker/DatePicker.js

@@ -10,7 +10,7 @@ import { SelectControl } from "../SelectControl";
 import { DateCalendar } from "./Calendar";
 import { DateContext } from "./context";
 export const DatePicker = (props) => {
-    const { id, value, onChange, min, max, side = "bottom", sideOffset = 8, align = "center", alignOffset, variant = "outline", size = "md", clearable = false, disabled = false, dropdownIconType, placeholder = "Select date...", pill = true, block = false, triggerClassName, triggerShowIcon = true, triggerDateFormat = "MM/dd/yy", } = props;
+    const { id, value, onChange, min, max, side = "bottom", sideOffset = 8, align = "center", alignOffset, variant = "outline", size = "md", clearable = false, disabled = false, dropdownIconType, placeholder = "Select date...", pill = true, block = false, triggerClassName, triggerShowIcon = true, captionLayout = "buttons", showTime = false, yearRange, triggerDateFormat = showTime ? "MM/dd/yy HH:mm" : "MM/dd/yy", } = props;
     if (min && max && !isBefore(min, max)) {
         throw new Error("DatePicker error: `min` date must be before the `max` date");
     }
@@ -31,6 +31,9 @@ export const DatePicker = (props) => {
         triggerClassName,
         triggerShowIcon,
         triggerDateFormat,
+        captionLayout,
+        showTime,
+        yearRange,
         onChangeRef,
     }), [
         value,
@@ -47,11 +50,14 @@ export const DatePicker = (props) => {
         triggerClassName,
         triggerShowIcon,
         triggerDateFormat,
+        captionLayout,
+        showTime,
+        yearRange,
         onChangeRef,
     ]);
     const handleClearClick = () => {
         onChangeRef.current(null);
     };
-    return (_jsx(DateContext, { value: store, children: _jsxs(Popover, { children: [_jsx(Popover.Trigger, { children: _jsx(SelectControl, { id: id, className: triggerClassName, selected: !!value, variant: variant, pill: pill, block: block, size: size, disabled: disabled, StartIcon: triggerShowIcon ? Calendar : undefined, dropdownIconType: dropdownIconType, onClearClick: clearable ? handleClearClick : undefined, children: _jsx("span", { className: "tabular-nums", children: value?.toFormat(triggerDateFormat) ?? placeholder }) }) }), _jsx(Popover.Content, { minWidth: 230, side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset ?? (align === "center" ? 0 : -5), children: _jsx(DateCalendar, {}) })] }) }));
+    return (_jsx(DateContext, { value: store, children: _jsxs(Popover, { children: [_jsx(Popover.Trigger, { children: _jsx(SelectControl, { id: id, className: triggerClassName, selected: !!value, variant: variant, pill: pill, block: block, size: size, disabled: disabled, StartIcon: triggerShowIcon ? Calendar : undefined, dropdownIconType: dropdownIconType, onClearClick: clearable ? handleClearClick : undefined, children: value?.toFormat(triggerDateFormat) ?? placeholder }) }), _jsx(Popover.Content, { minWidth: 230, side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset ?? (align === "center" ? 0 : -5), children: _jsx(DateCalendar, {}) })] }) }));
 };
 //# sourceMappingURL=DatePicker.js.map

package/dist/es/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { DateTime } from \"luxon\"\nimport { useMemo } from \"react\"\nimport { useLatestValue } from \"../../hooks/useLatestValue\"\nimport { isBefore } from \"../../lib/dateUtils\"\nimport { Calendar } from \"../Icon\"\nimport { Popover, type PopoverContentProps } from \"../Popover\"\nimport { SelectControl, type SelectControlProps } from \"../SelectControl\"\nimport { DateCalendar } from \"./Calendar\"\nimport { DateContext, type DateContextValue } from \"./context\"\n\nexport type DatePickerProps = {\n  /**\n   * Allow targeting the input for forms and accessibility.\n   */\n  id: string\n  /**\n   * The selected date value.\n   */\n  value: DateTime | null\n  /**\n   * Handler that is triggered when the date changes.\n   */\n  onChange: (nextValue: DateTime | null) => void\n  /**\n   * Defines the earliest selectable date (inclusive).\n   */\n  min?: DateTime\n  /**\n   * Defines the latest selectable date (inclusive).\n   */\n  max?: DateTime\n  /**\n   * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.\n   * @default bottom\n   */\n  side?: PopoverContentProps[\"side\"]\n  /**\n   * The distance in pixels from the trigger.\n   * @default 8\n   */\n  sideOffset?: PopoverContentProps[\"sideOffset\"]\n  /**\n   * The preferred alignment against the trigger. May change when collisions occur.\n   * @default center\n   */\n  align?: PopoverContentProps[\"align\"]\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   * @default 0\n   */\n  alignOffset?: PopoverContentProps[\"alignOffset\"]\n\n  /**\n   * Disables the select visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Placeholder text for the select\n   * @default Select date...\n   */\n  placeholder?: string\n  /**\n   * Style variant for the select trigger\n   * @default outline\n   */\n  variant?: SelectControlProps[\"variant\"]\n  /**\n   * Determines if the select trigger should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Determines size of the size and spacing of the control.\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   * @default md\n   */\n  size?: SelectControlProps[\"size\"]\n  /**\n   * Icon displayed in the far right of the select trigger\n   * @default dropdown\n   */\n  dropdownIconType?: SelectControlProps[\"dropdownIconType\"]\n  /**\n   * Custom class applied to the select trigger\n   */\n  triggerClassName?: string\n  /**\n   * Display calendar icon at the start of the trigger\n   * @default true\n   */\n  triggerShowIcon?: boolean\n  /**\n   * Format of dates displayed in the trigger\n   */\n  triggerDateFormat: string\n  /**\n   * Display a clear action that allows the select to be unset.\n   * @default false\n   */\n  clearable?: boolean\n  /**\n   * Extends select to 100% of available width.\n   * @default true\n   */\n  block?: boolean\n}\n\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    id,\n    value,\n    onChange,\n    min,\n    max,\n    side = \"bottom\",\n    sideOffset = 8,\n    align = \"center\",\n    alignOffset,\n    variant = \"outline\",\n    size = \"md\",\n    clearable = false,\n    disabled = false,\n    dropdownIconType,\n    placeholder = \"Select date...\",\n    pill = true,\n    block = false,\n    triggerClassName,\n    triggerShowIcon = true,\n    triggerDateFormat = \"MM/dd/yy\",\n  } = props\n\n  if (min && max && !isBefore(min, max)) {\n    throw new Error(\"DatePicker error: `min` date must be before the `max` date\")\n  }\n\n  // Create stable, mutable references to avoid memoization requirements from consumers\n  const onChangeRef = useLatestValue(onChange)\n\n  const store = useMemo<DateContextValue>(\n    () => ({\n      value,\n      min,\n      max,\n      variant,\n      size,\n      dropdownIconType,\n      clearable,\n      disabled,\n      placeholder,\n      block,\n      pill,\n      triggerClassName,\n      triggerShowIcon,\n      triggerDateFormat,\n      onChangeRef,\n    }),\n    [\n      value,\n      min,\n      max,\n      variant,\n      size,\n      dropdownIconType,\n      clearable,\n      disabled,\n      placeholder,\n      block,\n      pill,\n      triggerClassName,\n      triggerShowIcon,\n      triggerDateFormat,\n      onChangeRef,\n    ],\n  )\n\n  const handleClearClick = () => {\n    onChangeRef.current(null)\n  }\n\n  return (\n    <DateContext value={store}>\n      <Popover>\n        <Popover.Trigger>\n          <SelectControl\n            id={id}\n            className={triggerClassName}\n            selected={!!value}\n            variant={variant}\n            pill={pill}\n            block={block}\n            size={size}\n            disabled={disabled}\n            StartIcon={triggerShowIcon ? Calendar : undefined}\n            dropdownIconType={dropdownIconType}\n            onClearClick={clearable ? handleClearClick : undefined}\n          >\n            <span className=\"tabular-nums\">\n              {value?.toFormat(triggerDateFormat) ?? placeholder}\n            </span>\n          </SelectControl>\n        </Popover.Trigger>\n        <Popover.Content\n          minWidth={230}\n          side={side}\n          sideOffset={sideOffset}\n          align={align}\n          alignOffset={alignOffset ?? (align === \"center\" ? 0 : -5)}\n        >\n          <DateCalendar />\n        </Popover.Content>\n      </Popover>\n    </DateContext>\n  )\n}\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { DateTime } from \"luxon\"\nimport { useMemo } from \"react\"\nimport { useLatestValue } from \"../../hooks/useLatestValue\"\nimport { isBefore } from \"../../lib/dateUtils\"\nimport { Calendar } from \"../Icon\"\nimport { Popover, type PopoverContentProps } from \"../Popover\"\nimport { SelectControl, type SelectControlProps } from \"../SelectControl\"\nimport { DateCalendar } from \"./Calendar\"\nimport { DateContext, type DateContextValue } from \"./context\"\n\nexport type DatePickerProps = {\n  /**\n   * Allow targeting the input for forms and accessibility.\n   */\n  id: string\n  /**\n   * The selected date value.\n   */\n  value: DateTime | null\n  /**\n   * Handler that is triggered when the date changes.\n   */\n  onChange: (nextValue: DateTime | null) => void\n  /**\n   * Defines the earliest selectable date (inclusive).\n   */\n  min?: DateTime\n  /**\n   * Defines the latest selectable date (inclusive).\n   */\n  max?: DateTime\n  /**\n   * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.\n   * @default bottom\n   */\n  side?: PopoverContentProps[\"side\"]\n  /**\n   * The distance in pixels from the trigger.\n   * @default 8\n   */\n  sideOffset?: PopoverContentProps[\"sideOffset\"]\n  /**\n   * The preferred alignment against the trigger. May change when collisions occur.\n   * @default center\n   */\n  align?: PopoverContentProps[\"align\"]\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   * @default 0\n   */\n  alignOffset?: PopoverContentProps[\"alignOffset\"]\n\n  /**\n   * Disables the select visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Placeholder text for the select\n   * @default Select date...\n   */\n  placeholder?: string\n  /**\n   * Style variant for the select trigger\n   * @default outline\n   */\n  variant?: SelectControlProps[\"variant\"]\n  /**\n   * Determines if the select trigger should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Determines size of the size and spacing of the control.\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   * @default md\n   */\n  size?: SelectControlProps[\"size\"]\n  /**\n   * Icon displayed in the far right of the select trigger\n   * @default dropdown\n   */\n  dropdownIconType?: SelectControlProps[\"dropdownIconType\"]\n  /**\n   * Custom class applied to the select trigger\n   */\n  triggerClassName?: string\n  /**\n   * Display calendar icon at the start of the trigger\n   * @default true\n   */\n  triggerShowIcon?: boolean\n  /**\n   * Format of dates displayed in the trigger\n   */\n  triggerDateFormat: string\n  /**\n   * Display a clear action that allows the select to be unset.\n   * @default false\n   */\n  clearable?: boolean\n  /**\n   * Extends select to 100% of available width.\n   * @default true\n   */\n  block?: boolean\n  /**\n   * Controls how the calendar header is rendered.\n   * - `\"buttons\"` — Arrow navigation between months (default)\n   * - `\"dropdown\"` — Month and year dropdown selects (ideal for date of birth)\n   * @default buttons\n   */\n  captionLayout?: \"buttons\" | \"dropdown\"\n  /**\n   * Show time input below the calendar for combined date and time selection.\n   * @default false\n   */\n  showTime?: boolean\n  /**\n   * Range of selectable years when `captionLayout` is `\"dropdown\"`.\n   * @default [currentYear - 120, currentYear]\n   */\n  yearRange?: [number, number]\n}\n\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    id,\n    value,\n    onChange,\n    min,\n    max,\n    side = \"bottom\",\n    sideOffset = 8,\n    align = \"center\",\n    alignOffset,\n    variant = \"outline\",\n    size = \"md\",\n    clearable = false,\n    disabled = false,\n    dropdownIconType,\n    placeholder = \"Select date...\",\n    pill = true,\n    block = false,\n    triggerClassName,\n    triggerShowIcon = true,\n    captionLayout = \"buttons\",\n    showTime = false,\n    yearRange,\n    triggerDateFormat = showTime ? \"MM/dd/yy HH:mm\" : \"MM/dd/yy\",\n  } = props\n\n  if (min && max && !isBefore(min, max)) {\n    throw new Error(\"DatePicker error: `min` date must be before the `max` date\")\n  }\n\n  // Create stable, mutable references to avoid memoization requirements from consumers\n  const onChangeRef = useLatestValue(onChange)\n\n  const store = useMemo<DateContextValue>(\n    () => ({\n      value,\n      min,\n      max,\n      variant,\n      size,\n      dropdownIconType,\n      clearable,\n      disabled,\n      placeholder,\n      block,\n      pill,\n      triggerClassName,\n      triggerShowIcon,\n      triggerDateFormat,\n      captionLayout,\n      showTime,\n      yearRange,\n      onChangeRef,\n    }),\n    [\n      value,\n      min,\n      max,\n      variant,\n      size,\n      dropdownIconType,\n      clearable,\n      disabled,\n      placeholder,\n      block,\n      pill,\n      triggerClassName,\n      triggerShowIcon,\n      triggerDateFormat,\n      captionLayout,\n      showTime,\n      yearRange,\n      onChangeRef,\n    ],\n  )\n\n  const handleClearClick = () => {\n    onChangeRef.current(null)\n  }\n\n  return (\n    <DateContext value={store}>\n      <Popover>\n        <Popover.Trigger>\n          <SelectControl\n            id={id}\n            className={triggerClassName}\n            selected={!!value}\n            variant={variant}\n            pill={pill}\n            block={block}\n            size={size}\n            disabled={disabled}\n            StartIcon={triggerShowIcon ? Calendar : undefined}\n            dropdownIconType={dropdownIconType}\n            onClearClick={clearable ? handleClearClick : undefined}\n          >\n            {value?.toFormat(triggerDateFormat) ?? placeholder}\n          </SelectControl>\n        </Popover.Trigger>\n        <Popover.Content\n          minWidth={230}\n          side={side}\n          sideOffset={sideOffset}\n          align={align}\n          alignOffset={alignOffset ?? (align === \"center\" ? 0 : -5)}\n        >\n          <DateCalendar />\n        </Popover.Content>\n      </Popover>\n    </DateContext>\n  )\n}\n"]}

package/dist/es/components/DatePicker/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAsB1C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAA;AAEvE,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,GAAG,CAAC,WAAW,CAAC,CAAA;IAEhC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;IACtE,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { DateTime } from \"luxon\"\nimport { createContext, use } from \"react\"\nimport type { SelectControlProps } from \"../SelectControl\"\n\nexport type DateContextValue = {\n  value: DateTime | null\n  min?: DateTime\n  max?: DateTime\n  triggerClassName?: string\n  triggerShowIcon?: boolean\n  triggerDateFormat: string\n  disabled: boolean\n  variant?: SelectControlProps[\"variant\"]\n  pill: boolean\n  block: boolean\n  size?: SelectControlProps[\"size\"]\n  dropdownIconType?: SelectControlProps[\"dropdownIconType\"]\n  clearable: boolean\n  placeholder: string\n  // References\n  onChangeRef: React.MutableRefObject<(nextValue: DateTime | null) => void>\n}\n\nexport const DateContext = createContext<DateContextValue | null>(null)\n\nexport const useDateContext = () => {\n  const context = use(DateContext)\n\n  if (!context) {\n    throw new Error(\"Date components must be wrapped in <DatePicker />\")\n  }\n\n  return context\n}\n"]}
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAyB1C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAA;AAEvE,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,GAAG,CAAC,WAAW,CAAC,CAAA;IAEhC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;IACtE,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { DateTime } from \"luxon\"\nimport { createContext, use } from \"react\"\nimport type { SelectControlProps } from \"../SelectControl\"\n\nexport type DateContextValue = {\n  value: DateTime | null\n  min?: DateTime\n  max?: DateTime\n  triggerClassName?: string\n  triggerShowIcon?: boolean\n  triggerDateFormat: string\n  disabled: boolean\n  variant?: SelectControlProps[\"variant\"]\n  pill: boolean\n  block: boolean\n  size?: SelectControlProps[\"size\"]\n  dropdownIconType?: SelectControlProps[\"dropdownIconType\"]\n  clearable: boolean\n  placeholder: string\n  captionLayout: \"buttons\" | \"dropdown\"\n  showTime: boolean\n  yearRange?: [number, number]\n  // References\n  onChangeRef: React.MutableRefObject<(nextValue: DateTime | null) => void>\n}\n\nexport const DateContext = createContext<DateContextValue | null>(null)\n\nexport const useDateContext = () => {\n  const context = use(DateContext)\n\n  if (!context) {\n    throw new Error(\"Date components must be wrapped in <DatePicker />\")\n  }\n\n  return context\n}\n"]}

package/dist/es/components/Dialog/Dialog.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Dialog as RadixDialog } from "radix-ui";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+import { useEscCloseStack } from "../../hooks/useEscCloseStack";
+import { preventDefaultHandler, toCssVariables } from "../../lib/helpers";
+import { TransitionGroup } from "../Transition";
+import s from "./Dialog.module.css";
+const DialogContext = createContext(null);
+const useDialogContext = () => {
+    const context = useContext(DialogContext);
+    if (!context) {
+        throw new Error("Dialog compound components must be used inside <Dialog>");
+    }
+    return context;
+};
+export const Dialog = ({ open: controlledOpen, onOpenChange: controlledOnOpenChange, children, }) => {
+    const [open, setOpen] = useState(false);
+    const isOpen = controlledOpen ?? open;
+    const handleOpenChange = useCallback((nextState) => {
+        controlledOnOpenChange?.(nextState);
+        setOpen(nextState);
+    }, [controlledOnOpenChange]);
+    const store = useMemo(() => ({
+        open: isOpen,
+        setOpen: handleOpenChange,
+    }), [isOpen, handleOpenChange]);
+    return (_jsx(DialogContext, { value: store, children: _jsx(RadixDialog.Root, { open: isOpen, onOpenChange: handleOpenChange, children: children }) }));
+};
+const Trigger = ({ children }) => {
+    return _jsx(RadixDialog.Trigger, { asChild: true, children: children });
+};
+const Content = ({ children, width = 480, showClose = true, className }) => {
+    const { open, setOpen } = useDialogContext();
+    useEscCloseStack(open, () => {
+        setOpen(false);
+    });
+    return (_jsx(RadixDialog.Portal, { forceMount: true, children: _jsx(TransitionGroup, { enterDuration: 250, exitDuration: 150, className: s.Transition, disableAnimations: true, children: open && (_jsxs("div", { children: [_jsx(RadixDialog.Overlay, { className: s.Overlay }), _jsx(RadixDialog.Content, { forceMount: true, className: s.Content, style: toCssVariables({ "dialog-width": width }), onEscapeKeyDown: preventDefaultHandler, children: _jsxs("div", { className: clsx(s.Panel, className), children: [showClose && (_jsx(RadixDialog.Close, { asChild: true, children: _jsx("button", { type: "button", className: s.CloseButton, "aria-label": "Close dialog", children: _jsx("svg", { className: s.CloseIcon, viewBox: "0 0 20 20", width: "20", height: "20", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06" }) }) }) })), children] }) })] }, "dialog")) }) }));
+};
+const Header = ({ children, className }) => {
+    return _jsx("div", { className: clsx(s.Header, className), children: children });
+};
+const Footer = ({ children, className }) => {
+    return _jsx("div", { className: clsx(s.Footer, className), children: children });
+};
+const Title = ({ children, className }) => {
+    return _jsx(RadixDialog.Title, { className: clsx(s.Title, className), children: children });
+};
+const Description = ({ children, className }) => {
+    return (_jsx(RadixDialog.Description, { className: clsx(s.Description, className), children: children }));
+};
+const Close = ({ children }) => {
+    return _jsx(RadixDialog.Close, { asChild: true, children: children });
+};
+Dialog.Trigger = Trigger;
+Dialog.Content = Content;
+Dialog.Header = Header;
+Dialog.Footer = Footer;
+Dialog.Title = Title;
+Dialog.Description = Description;
+Dialog.Close = Close;
+//# sourceMappingURL=Dialog.js.map

package/dist/es/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Dialog as RadixDialog } from \"radix-ui\"\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\"\nimport { useEscCloseStack } from \"../../hooks/useEscCloseStack\"\nimport { preventDefaultHandler, toCssVariables } from \"../../lib/helpers\"\nimport { TransitionGroup } from \"../Transition\"\nimport s from \"./Dialog.module.css\"\n\ntype DialogContextValue = {\n  open: boolean\n  setOpen: (nextState: boolean) => void\n}\n\nconst DialogContext = createContext<DialogContextValue | null>(null)\n\nconst useDialogContext = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw new Error(\"Dialog compound components must be used inside <Dialog>\")\n  }\n\n  return context\n}\n\nexport type DialogProps = {\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  children: ReactNode\n}\n\nexport const Dialog = ({\n  open: controlledOpen,\n  onOpenChange: controlledOnOpenChange,\n  children,\n}: DialogProps) => {\n  const [open, setOpen] = useState<boolean>(false)\n  const isOpen = controlledOpen ?? open\n\n  const handleOpenChange = useCallback(\n    (nextState: boolean) => {\n      controlledOnOpenChange?.(nextState)\n      setOpen(nextState)\n    },\n    [controlledOnOpenChange],\n  )\n\n  const store = useMemo<DialogContextValue>(\n    () => ({\n      open: isOpen,\n      setOpen: handleOpenChange,\n    }),\n    [isOpen, handleOpenChange],\n  )\n\n  return (\n    <DialogContext value={store}>\n      <RadixDialog.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n      </RadixDialog.Root>\n    </DialogContext>\n  )\n}\n\nconst Trigger = ({ children }: { children: ReactNode }) => {\n  return <RadixDialog.Trigger asChild>{children}</RadixDialog.Trigger>\n}\n\nexport type DialogContentProps = {\n  children: ReactNode\n  width?: number | string\n  showClose?: boolean\n  className?: string\n}\n\nconst Content = ({ children, width = 480, showClose = true, className }: DialogContentProps) => {\n  const { open, setOpen } = useDialogContext()\n\n  useEscCloseStack(open, () => {\n    setOpen(false)\n  })\n\n  return (\n    <RadixDialog.Portal forceMount>\n      <TransitionGroup\n        enterDuration={250}\n        exitDuration={150}\n        className={s.Transition}\n        disableAnimations\n      >\n        {open && (\n          <div key=\"dialog\">\n            <RadixDialog.Overlay className={s.Overlay} />\n            <RadixDialog.Content\n              forceMount\n              className={s.Content}\n              style={toCssVariables({ \"dialog-width\": width })}\n              onEscapeKeyDown={preventDefaultHandler}\n            >\n              <div className={clsx(s.Panel, className)}>\n                {showClose && (\n                  <RadixDialog.Close asChild>\n                    <button type=\"button\" className={s.CloseButton} aria-label=\"Close dialog\">\n                      <svg\n                        className={s.CloseIcon}\n                        viewBox=\"0 0 20 20\"\n                        width=\"20\"\n                        height=\"20\"\n                        aria-hidden=\"true\"\n                      >\n                        <path\n                          fill=\"currentColor\"\n                          d=\"M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06\"\n                        />\n                      </svg>\n                    </button>\n                  </RadixDialog.Close>\n                )}\n                {children}\n              </div>\n            </RadixDialog.Content>\n          </div>\n        )}\n      </TransitionGroup>\n    </RadixDialog.Portal>\n  )\n}\n\ntype DialogSlotProps = {\n  children: ReactNode\n  className?: string\n}\n\nconst Header = ({ children, className }: DialogSlotProps) => {\n  return <div className={clsx(s.Header, className)}>{children}</div>\n}\n\nconst Footer = ({ children, className }: DialogSlotProps) => {\n  return <div className={clsx(s.Footer, className)}>{children}</div>\n}\n\nconst Title = ({ children, className }: DialogSlotProps) => {\n  return <RadixDialog.Title className={clsx(s.Title, className)}>{children}</RadixDialog.Title>\n}\n\nconst Description = ({ children, className }: DialogSlotProps) => {\n  return (\n    <RadixDialog.Description className={clsx(s.Description, className)}>\n      {children}\n    </RadixDialog.Description>\n  )\n}\n\nconst Close = ({ children }: { children: ReactNode }) => {\n  return <RadixDialog.Close asChild>{children}</RadixDialog.Close>\n}\n\nDialog.Trigger = Trigger\nDialog.Content = Content\nDialog.Header = Header\nDialog.Footer = Footer\nDialog.Title = Title\nDialog.Description = Description\nDialog.Close = Close\n"]}

package/dist/es/components/Dialog/Dialog.module.css

@@ -0,0 +1,128 @@
+@layer components {.Transition {
+  position: relative;
+}.Overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgb(0 0 0 / 0.5);
+}
+
+  .Transition[data-entering] .Overlay {
+    opacity: 0;
+  }
+
+  .Transition[data-entering-active] .Overlay,
+  .Transition[data-entering][data-interrupted] .Overlay {
+    opacity: 1;
+    transition: opacity 0.2s var(--cubic-enter);
+  }
+
+  .Transition[data-exiting] .Overlay {
+    opacity: 1;
+  }
+
+  .Transition[data-exiting-active] .Overlay,
+  .Transition[data-exiting][data-interrupted] .Overlay {
+    opacity: 0;
+    transition: opacity 0.15s var(--cubic-exit);
+  }.Content {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+  .Content:focus {
+    outline: none;
+  }.Panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: var(--dialog-width, 480px);
+  max-width: 100%;
+  max-height: calc(100vh - 2rem);
+  overflow: auto;
+  border-radius: var(--radius-xl);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-lg), var(--shadow-hairline);
+  padding: 1.25rem;
+}
+
+  .Transition[data-entering] .Panel {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+  }
+
+  .Transition[data-entering-active] .Panel,
+  .Transition[data-entering][data-interrupted] .Panel {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+    transition: opacity 0.25s var(--cubic-enter), transform 0.25s var(--cubic-enter);
+  }
+
+  .Transition[data-exiting] .Panel {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  .Transition[data-exiting-active] .Panel,
+  .Transition[data-exiting][data-interrupted] .Panel {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+    transition: opacity 0.15s var(--cubic-exit), transform 0.15s var(--cubic-exit);
+  }.CloseButton {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: background-color 0.2s var(--cubic-enter), color 0.2s var(--cubic-enter);
+}
+
+  .CloseButton:hover {
+    background: color-mix(in srgb, var(--color-text-tertiary) 12%, transparent);
+    color: var(--color-text);
+  }
+
+  .CloseButton:focus-visible {
+    outline: 2px solid var(--color-text);
+    outline-offset: 2px;
+  }.CloseIcon {
+  display: block;
+}.Header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}.Footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}.Title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--color-text);
+}.Description {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+}@media (width <= 640px) {
+  .Footer {
+    flex-direction: column;
+  }
+}
+}

package/dist/es/components/Dialog/index.js

@@ -0,0 +1,2 @@
+export { Dialog } from "./Dialog";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA6C,MAAM,UAAU,CAAA","sourcesContent":["export { Dialog, type DialogContentProps, type DialogProps } from \"./Dialog\"\n"]}

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -99,5 +99,22 @@ export type DatePickerProps = {
      * @default true
      */
     block?: boolean;
+    /**
+     * Controls how the calendar header is rendered.
+     * - `"buttons"` — Arrow navigation between months (default)
+     * - `"dropdown"` — Month and year dropdown selects (ideal for date of birth)
+     * @default buttons
+     */
+    captionLayout?: "buttons" | "dropdown";
+    /**
+     * Show time input below the calendar for combined date and time selection.
+     * @default false
+     */
+    showTime?: boolean;
+    /**
+     * Range of selectable years when `captionLayout` is `"dropdown"`.
+     * @default [currentYear - 120, currentYear]
+     */
+    yearRange?: [number, number];
 };
 export declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/context.d.ts

@@ -15,6 +15,9 @@ export type DateContextValue = {
     dropdownIconType?: SelectControlProps["dropdownIconType"];
     clearable: boolean;
     placeholder: string;
+    captionLayout: "buttons" | "dropdown";
+    showTime: boolean;
+    yearRange?: [number, number];
     onChangeRef: React.MutableRefObject<(nextValue: DateTime | null) => void>;
 };
 export declare const DateContext: import("react").Context<DateContextValue | null>;

package/dist/types/components/Dialog/Dialog.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+export type DialogProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+};
+export declare const Dialog: {
+    ({ open: controlledOpen, onOpenChange: controlledOnOpenChange, children, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children }: {
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, width, showClose, className }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
+    Close: ({ children }: {
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export type DialogContentProps = {
+    children: ReactNode;
+    width?: number | string;
+    showClose?: boolean;
+    className?: string;
+};
+type DialogSlotProps = {
+    children: ReactNode;
+    className?: string;
+};
+export {};

package/dist/types/components/Dialog/index.d.ts

@@ -0,0 +1 @@
+export { Dialog, type DialogContentProps, type DialogProps } from "./Dialog";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.7.43",
+  "version": "0.7.45",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",