@refraktor/dates 0.0.2 → 0.0.4

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 $ tsc && tailwindcss -i src/style.css -o build/style.css --minify
 ≈ tailwindcss v4.1.18
 
-Done in 83ms
+Done in 88ms

package/build/components/date-input/date-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.d.ts","sourceRoot":"","sources":["../../../src/components/date-input/date-input.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,oBAAoB,CAAC;AAyC5B,QAAA,MAAM,SAAS,uEAuSb,CAAC;AAMH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"date-input.d.ts","sourceRoot":"","sources":["../../../src/components/date-input/date-input.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,oBAAoB,CAAC;AAyC5B,QAAA,MAAM,SAAS,uEA0Sb,CAAC;AAMH,eAAe,SAAS,CAAC"}

package/build/components/date-input/date-input.js

@@ -93,7 +93,8 @@ const DateInput = factory((_props, ref) => {
         open: isOpen,
         onOpenChange: handleOpenChange,
         middleware,
-        whileElementsMounted: autoUpdate
+        whileElementsMounted: autoUpdate,
+        strategy: "fixed"
     });
     const focus = useFocus(floating.context, {
         enabled: !disabled
@@ -152,8 +153,9 @@ const DateInput = factory((_props, ref) => {
         onClick,
         onKeyDown: handleInputKeyDown
     });
-    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: isOpen, ...transitionProps, children: _jsx("div", { ref: floating.refs.setFloating, id: dropdownId, style: {
-                ...floating.floatingStyles
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: isOpen, style: { position: "relative", zIndex: 1000 }, ...transitionProps, children: _jsx("div", { ref: floating.refs.setFloating, id: dropdownId, style: {
+                ...floating.floatingStyles,
+                zIndex: 1000
             }, className: cx("w-80 z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-2 text-[var(--refraktor-text)] shadow-md", getRadius(radius), classes.dropdown), ...getFloatingProps(), children: _jsx(DatePicker, { value: selectedDate, onChange: handleDateChange, minDate: minDate, maxDate: maxDate, monthPickerColumns: monthPickerColumns, yearPickerYearsPerPage: yearPickerYearsPerPage, yearPickerColumns: yearPickerColumns, disabled: disabled, size: size, radius: radius, getWeekdayLabel: getWeekdayLabel, getDayLabel: getDayLabel, getDayAriaLabel: getDayAriaLabel, getHeaderLabel: getHeaderLabel, getNavigationAriaLabel: getNavigationAriaLabel, getMonthLabel: getMonthLabel, getMonthAriaLabel: getMonthAriaLabel, getMonthHeaderLabel: getMonthHeaderLabel, getMonthNavigationAriaLabel: getMonthNavigationAriaLabel, className: cx("bg-transparent p-0", classes.datePicker) }) }) }));
     const wrappedContent = isOpen ? (_jsx(FloatingFocusManager, { context: floating.context, modal: false, initialFocus: -1, returnFocus: false, children: dropdownContent })) : (dropdownContent);
     return (_jsxs(_Fragment, { children: [_jsx(Input, { ref: setInputRef, id: _id, readOnly: true, value: inputValue, disabled: disabled, size: size, radius: radius, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": isOpen ? dropdownId : undefined, className: cx(classes.input, className), classNames: inputClassNames, ...inputProps, ...mergedReferenceProps }), withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent)] }));

package/build/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,4 @@
+import { DateRangePickerFactoryPayload } from "./date-range-picker.types";
+declare const DateRangePicker: import("@refraktor/core").RefraktorComponent<DateRangePickerFactoryPayload>;
+export default DateRangePicker;
+//# sourceMappingURL=date-range-picker.d.ts.map

package/build/components/date-range-picker/date-range-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAGH,6BAA6B,EAIhC,MAAM,2BAA2B,CAAC;AAyLnC,QAAA,MAAM,eAAe,6EA6gBnB,CAAC;AAOH,eAAe,eAAe,CAAC"}

package/build/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,379 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useEffect, useMemo, useState } from "react";
+import { createClassNamesConfig, createComponentConfig, factory, useTheme, useClassNames, useProps } from "@refraktor/core";
+import { getGridColumns, getPickerSizeStyles, PickerHeader } from "../picker-shared";
+import { useDates } from "../dates-provider";
+import { MonthPicker } from "../month-picker";
+const DAYS_IN_WEEK = 7;
+const CONSISTENT_WEEK_COUNT = 6;
+const DEFAULT_MONTH_PICKER_COLUMNS = 3;
+const DEFAULT_YEAR_PICKER_YEARS_PER_PAGE = 9;
+const DEFAULT_YEAR_PICKER_COLUMNS = 3;
+const defaultProps = {
+    monthPickerColumns: DEFAULT_MONTH_PICKER_COLUMNS,
+    yearPickerYearsPerPage: DEFAULT_YEAR_PICKER_YEARS_PER_PAGE,
+    yearPickerColumns: DEFAULT_YEAR_PICKER_COLUMNS,
+    disabled: false,
+    size: "md",
+    radius: "default"
+};
+const isValidDate = (value) => value instanceof Date && !Number.isNaN(value.getTime());
+const toSafeInteger = (value, fallback) => {
+    if (!Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.trunc(value);
+};
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const startOfDay = (value) => {
+    const next = new Date(value);
+    next.setHours(0, 0, 0, 0);
+    return next;
+};
+const startOfMonth = (value) => {
+    const next = startOfDay(value);
+    next.setDate(1);
+    return next;
+};
+const isSameDay = (first, second) => first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth() &&
+    first.getDate() === second.getDate();
+const isSameMonth = (first, second) => first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth();
+const addDays = (value, amount) => {
+    const next = startOfDay(value);
+    next.setDate(next.getDate() + amount);
+    return next;
+};
+const addMonthsPreservingDay = (value, amount) => {
+    const originalDay = value.getDate();
+    const next = startOfDay(value);
+    next.setDate(1);
+    next.setMonth(next.getMonth() + amount);
+    const lastDayInTargetMonth = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate();
+    next.setDate(Math.min(originalDay, lastDayInTargetMonth));
+    return next;
+};
+const getDateBounds = (minDate, maxDate) => {
+    const normalizedMin = isValidDate(minDate) ? startOfDay(minDate) : undefined;
+    const normalizedMax = isValidDate(maxDate) ? startOfDay(maxDate) : undefined;
+    if (normalizedMin && normalizedMax && normalizedMin > normalizedMax) {
+        return {
+            minDate: normalizedMax,
+            maxDate: normalizedMin,
+            minTimestamp: normalizedMax.getTime(),
+            maxTimestamp: normalizedMin.getTime(),
+            hasMin: true,
+            hasMax: true
+        };
+    }
+    return {
+        minDate: normalizedMin,
+        maxDate: normalizedMax,
+        minTimestamp: normalizedMin?.getTime() ?? Number.NEGATIVE_INFINITY,
+        maxTimestamp: normalizedMax?.getTime() ?? Number.POSITIVE_INFINITY,
+        hasMin: normalizedMin !== undefined,
+        hasMax: normalizedMax !== undefined
+    };
+};
+const clampDate = (value, bounds) => {
+    const normalizedValue = startOfDay(value);
+    const timestamp = normalizedValue.getTime();
+    if (timestamp < bounds.minTimestamp && bounds.minDate) {
+        return bounds.minDate;
+    }
+    if (timestamp > bounds.maxTimestamp && bounds.maxDate) {
+        return bounds.maxDate;
+    }
+    return normalizedValue;
+};
+const isDateDisabled = (value, disabled, bounds) => disabled ||
+    value.getTime() < bounds.minTimestamp ||
+    value.getTime() > bounds.maxTimestamp;
+const toMonthIndex = (value) => value.getFullYear() * 12 + value.getMonth();
+const resolveMonthStart = (value, bounds) => startOfMonth(clampDate(value, bounds));
+const getVisibleDays = (displayedMonth, firstDayOfWeek, consistentWeeks) => {
+    const monthStart = startOfMonth(displayedMonth);
+    const leadingDays = (monthStart.getDay() - firstDayOfWeek + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+    const daysInMonth = new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 0).getDate();
+    const visibleWithoutTrailing = leadingDays + daysInMonth;
+    const trailingDays = consistentWeeks
+        ? DAYS_IN_WEEK * CONSISTENT_WEEK_COUNT - visibleWithoutTrailing
+        : (DAYS_IN_WEEK - (visibleWithoutTrailing % DAYS_IN_WEEK)) % DAYS_IN_WEEK;
+    const totalDays = visibleWithoutTrailing + trailingDays;
+    const firstVisibleDate = addDays(monthStart, -leadingDays);
+    return Array.from({ length: totalDays }, (_, index) => addDays(firstVisibleDate, index));
+};
+const normalizeRangeValue = (value) => {
+    const startDate = isValidDate(value?.startDate)
+        ? startOfDay(value.startDate)
+        : undefined;
+    const endDate = isValidDate(value?.endDate)
+        ? startOfDay(value.endDate)
+        : undefined;
+    if (startDate && endDate && startDate.getTime() > endDate.getTime()) {
+        return {
+            startDate: endDate,
+            endDate: startDate
+        };
+    }
+    return {
+        startDate,
+        endDate
+    };
+};
+const DateRangePicker = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { createDate, firstDayOfWeek, consistentWeeks, weekdays } = useDates();
+    const { id, value, defaultValue, onChange, minDate, maxDate, monthPickerColumns, yearPickerYearsPerPage, yearPickerColumns, disabled, size, radius, getWeekdayLabel, getDayLabel, getDayAriaLabel, getHeaderLabel, getNavigationAriaLabel, getMonthLabel, getMonthAriaLabel, getMonthHeaderLabel, getMonthNavigationAriaLabel, className, classNames, ...props } = useProps("DateRangePicker", defaultProps, _props);
+    const classes = useClassNames("DateRangePicker", classNames);
+    const _id = useId(id);
+    const today = useMemo(() => startOfDay(new Date()), []);
+    const bounds = useMemo(() => getDateBounds(minDate, maxDate), [minDate, maxDate]);
+    const safeMonthPickerColumns = clamp(toSafeInteger(monthPickerColumns, DEFAULT_MONTH_PICKER_COLUMNS), 1, 6);
+    const safeYearPickerYearsPerPage = Math.max(1, toSafeInteger(yearPickerYearsPerPage, DEFAULT_YEAR_PICKER_YEARS_PER_PAGE));
+    const safeYearPickerColumns = clamp(toSafeInteger(yearPickerColumns, DEFAULT_YEAR_PICKER_COLUMNS), 1, Math.min(6, safeYearPickerYearsPerPage));
+    const [selectedRangeState, setSelectedRange] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: {
+            startDate: undefined,
+            endDate: undefined
+        },
+        onChange
+    });
+    const selectedRange = normalizeRangeValue(selectedRangeState);
+    const { startDate, endDate } = selectedRange;
+    const [displayedMonth, setDisplayedMonth] = useState(() => resolveMonthStart(endDate ?? startDate ?? today, bounds));
+    const [view, setView] = useState("day");
+    useEffect(() => {
+        setDisplayedMonth((previousMonth) => resolveMonthStart(previousMonth, bounds));
+    }, [bounds]);
+    const rangeAnchorTimestamp = endDate?.getTime() ?? startDate?.getTime();
+    useEffect(() => {
+        if (rangeAnchorTimestamp === undefined) {
+            return;
+        }
+        const anchorDate = endDate ?? startDate;
+        if (!anchorDate) {
+            return;
+        }
+        const normalizedMonth = resolveMonthStart(anchorDate, bounds);
+        setDisplayedMonth((previousMonth) => {
+            if (isSameMonth(previousMonth, normalizedMonth)) {
+                return previousMonth;
+            }
+            return normalizedMonth;
+        });
+    }, [bounds, endDate, rangeAnchorTimestamp, startDate]);
+    const visibleDays = useMemo(() => getVisibleDays(displayedMonth, firstDayOfWeek, consistentWeeks), [consistentWeeks, displayedMonth, firstDayOfWeek]);
+    const firstAvailableDay = useMemo(() => visibleDays.find((day) => !isDateDisabled(day, disabled ?? false, bounds)), [bounds, disabled, visibleDays]);
+    const preferredFocusDay = useMemo(() => {
+        const isVisibleAndFocusable = (value) => {
+            if (!value) {
+                return false;
+            }
+            return visibleDays.some((day) => isSameDay(day, value) &&
+                !isDateDisabled(day, disabled ?? false, bounds));
+        };
+        if (isVisibleAndFocusable(endDate)) {
+            return endDate;
+        }
+        if (isVisibleAndFocusable(startDate)) {
+            return startDate;
+        }
+        return firstAvailableDay;
+    }, [bounds, disabled, endDate, firstAvailableDay, startDate, visibleDays]);
+    const canGoPrevious = !disabled &&
+        (!bounds.hasMin ||
+            (bounds.minDate !== undefined &&
+                toMonthIndex(displayedMonth) > toMonthIndex(bounds.minDate)));
+    const canGoNext = !disabled &&
+        (!bounds.hasMax ||
+            (bounds.maxDate !== undefined &&
+                toMonthIndex(displayedMonth) < toMonthIndex(bounds.maxDate)));
+    const sizeStyles = getPickerSizeStyles(size);
+    const resolveNavigationLabel = (direction) => {
+        if (getNavigationAriaLabel) {
+            return getNavigationAriaLabel(direction, displayedMonth);
+        }
+        const nextVisibleMonth = addMonthsPreservingDay(displayedMonth, direction === "previous" ? -1 : 1);
+        return direction === "previous"
+            ? `Show previous month (${createDate(nextVisibleMonth).format("MMMM YYYY")})`
+            : `Show next month (${createDate(nextVisibleMonth).format("MMMM YYYY")})`;
+    };
+    const resolveDayAriaLabel = (day, state) => {
+        if (getDayAriaLabel) {
+            return getDayAriaLabel(day, state);
+        }
+        const dayLabel = createDate(day).format("dddd, MMMM D, YYYY");
+        if (state.rangeStart && state.rangeEnd) {
+            return `${dayLabel}, range start and end`;
+        }
+        if (state.rangeStart) {
+            return `${dayLabel}, range start`;
+        }
+        if (state.rangeEnd) {
+            return `${dayLabel}, range end`;
+        }
+        if (state.inRange) {
+            return `${dayLabel}, in selected range`;
+        }
+        const suffix = [
+            state.outside ? "outside current month" : undefined,
+            state.disabled ? "unavailable" : undefined
+        ]
+            .filter(Boolean)
+            .join(", ");
+        return suffix ? `Choose ${dayLabel}, ${suffix}` : `Choose ${dayLabel}`;
+    };
+    const setDay = (day) => {
+        const normalizedDay = startOfDay(day);
+        if (isDateDisabled(normalizedDay, disabled ?? false, bounds)) {
+            return;
+        }
+        if (startDate === undefined || (startDate !== undefined && endDate !== undefined)) {
+            setDisplayedMonth(startOfMonth(normalizedDay));
+            setSelectedRange({
+                startDate: normalizedDay,
+                endDate: undefined
+            });
+            return;
+        }
+        const startTimestamp = startDate.getTime();
+        const dayTimestamp = normalizedDay.getTime();
+        if (dayTimestamp < startTimestamp) {
+            setSelectedRange({
+                startDate: normalizedDay,
+                endDate: startDate
+            });
+        }
+        else {
+            setSelectedRange({
+                startDate,
+                endDate: normalizedDay
+            });
+        }
+        setDisplayedMonth(startOfMonth(normalizedDay));
+    };
+    const shiftDisplayedMonth = (direction) => {
+        setDisplayedMonth((previousMonth) => resolveMonthStart(addMonthsPreservingDay(previousMonth, direction), bounds));
+    };
+    const handlePrevious = () => {
+        if (!canGoPrevious) {
+            return;
+        }
+        shiftDisplayedMonth(-1);
+    };
+    const handleNext = () => {
+        if (!canGoNext) {
+            return;
+        }
+        shiftDisplayedMonth(1);
+    };
+    const handleGridKeyDown = (event) => {
+        if (disabled) {
+            return;
+        }
+        const keyboardBaseDay = preferredFocusDay ?? clampDate(displayedMonth, bounds);
+        const keyboardSteps = {
+            ArrowLeft: -1,
+            ArrowRight: 1,
+            ArrowUp: -DAYS_IN_WEEK,
+            ArrowDown: DAYS_IN_WEEK
+        };
+        const step = keyboardSteps[event.key];
+        if (step !== undefined) {
+            event.preventDefault();
+            setDay(addDays(keyboardBaseDay, step));
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            setDay(startOfMonth(displayedMonth));
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            setDay(new Date(displayedMonth.getFullYear(), displayedMonth.getMonth() + 1, 0));
+            return;
+        }
+        if (event.key === "PageUp") {
+            event.preventDefault();
+            setDay(addMonthsPreservingDay(keyboardBaseDay, -1));
+            return;
+        }
+        if (event.key === "PageDown") {
+            event.preventDefault();
+            setDay(addMonthsPreservingDay(keyboardBaseDay, 1));
+        }
+    };
+    const handleHeaderLabelClick = () => {
+        if (disabled) {
+            return;
+        }
+        setView("month");
+    };
+    const handleMonthChange = (nextMonth) => {
+        if (disabled) {
+            return;
+        }
+        setDisplayedMonth(resolveMonthStart(nextMonth, bounds));
+        setView("day");
+    };
+    const monthViewMinYear = bounds.minDate?.getFullYear();
+    const monthViewMaxYear = bounds.maxDate?.getFullYear();
+    return (_jsx("div", { ref: ref, id: _id, className: cx("inline-flex w-full flex-col gap-2 bg-[var(--refraktor-bg)] p-2", getRadius(radius), classes.root, className), ...props, children: view === "month" ? (_jsx(MonthPicker, { value: displayedMonth, onChange: handleMonthChange, minYear: monthViewMinYear, maxYear: monthViewMaxYear, columns: safeMonthPickerColumns, yearPickerYearsPerPage: safeYearPickerYearsPerPage, yearPickerColumns: safeYearPickerColumns, disabled: disabled, size: size, radius: radius, getMonthLabel: getMonthLabel, getMonthAriaLabel: getMonthAriaLabel, getHeaderLabel: getMonthHeaderLabel, getNavigationAriaLabel: getMonthNavigationAriaLabel, className: cx("bg-transparent p-0", classes.monthPicker) })) : (_jsxs(_Fragment, { children: [_jsx(PickerHeader, { label: getHeaderLabel
+                        ? getHeaderLabel(displayedMonth.getMonth(), displayedMonth.getFullYear(), displayedMonth)
+                        : createDate(displayedMonth).format("MMMM YYYY"), onPrevious: handlePrevious, onNext: handleNext, onLabelClick: disabled ? undefined : handleHeaderLabelClick, previousDisabled: !canGoPrevious, nextDisabled: !canGoNext, previousLabel: resolveNavigationLabel("previous"), nextLabel: resolveNavigationLabel("next"), size: size, radius: radius, classNames: {
+                        root: classes.header,
+                        controls: classes.headerControls,
+                        control: classes.headerControl,
+                        previousControl: classes.headerPreviousControl,
+                        nextControl: classes.headerNextControl,
+                        label: classes.headerLabel
+                    } }), _jsx("div", { role: "row", className: cx("grid grid-cols-7 text-center text-[var(--refraktor-text-secondary)]", sizeStyles.label, sizeStyles.gridGap, classes.weekdays), children: weekdays.map((weekday, index) => {
+                        const dayOfWeek = (firstDayOfWeek + index) % DAYS_IN_WEEK;
+                        return (_jsx("span", { className: cx("truncate", classes.weekday), children: getWeekdayLabel
+                                ? getWeekdayLabel(dayOfWeek, weekday)
+                                : weekday }, `${weekday}-${index}`));
+                    }) }), _jsx("div", { role: "grid", "aria-label": `Date range picker, ${createDate(displayedMonth).format("MMMM YYYY")}`, className: cx("grid", getGridColumns(DAYS_IN_WEEK), sizeStyles.gridGap, classes.grid), onKeyDown: handleGridKeyDown, children: visibleDays.map((day) => {
+                        const isOutside = !isSameMonth(day, displayedMonth);
+                        const isToday = isSameDay(day, today);
+                        const isDayDisabled = isDateDisabled(day, disabled ?? false, bounds);
+                        const isRangeStart = startDate !== undefined && isSameDay(day, startDate);
+                        const isRangeEnd = endDate !== undefined && isSameDay(day, endDate);
+                        const isInRange = startDate !== undefined &&
+                            endDate !== undefined &&
+                            day.getTime() > startDate.getTime() &&
+                            day.getTime() < endDate.getTime();
+                        const isSelected = isRangeStart || isRangeEnd;
+                        const dayState = {
+                            selected: isSelected,
+                            rangeStart: isRangeStart,
+                            rangeEnd: isRangeEnd,
+                            inRange: isInRange,
+                            outside: isOutside,
+                            disabled: isDayDisabled
+                        };
+                        const tabIndex = preferredFocusDay !== undefined &&
+                            isSameDay(day, preferredFocusDay)
+                            ? 0
+                            : -1;
+                        return (_jsx("button", { type: "button", role: "gridcell", "aria-selected": isSelected || isInRange, "aria-current": isToday ? "date" : undefined, "aria-label": resolveDayAriaLabel(day, dayState), tabIndex: tabIndex, "data-active": isSelected, "data-outside": isOutside, "data-today": isToday, "data-disabled": isDayDisabled, "data-range-start": isRangeStart, "data-range-end": isRangeEnd, "data-in-range": isInRange, disabled: isDayDisabled, className: cx("inline-flex items-center justify-center font-medium text-[var(--refraktor-text)] transition-colors", "hover:bg-[var(--refraktor-bg-hover)]", isOutside &&
+                                "text-[var(--refraktor-text-secondary)]", isInRange &&
+                                "bg-[var(--refraktor-bg-subtle)] hover:bg-[var(--refraktor-bg-subtle)]", isSelected &&
+                                "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)] hover:bg-[var(--refraktor-primary)]", isToday &&
+                                !isSelected &&
+                                "ring-1 ring-[var(--refraktor-primary)]", isDayDisabled &&
+                                "pointer-events-none cursor-not-allowed opacity-50", sizeStyles.cell, getRadius(radius), classes.day, isOutside && classes.dayOutside, isToday && classes.dayToday, isSelected && classes.daySelected, isRangeStart && classes.dayRangeStart, isRangeEnd && classes.dayRangeEnd, isInRange && classes.dayInRange, isDayDisabled && classes.dayDisabled), onClick: () => setDay(day), children: getDayLabel
+                                ? getDayLabel(day, dayState)
+                                : day.getDate() }, day.toISOString()));
+                    }) })] })) }));
+});
+DateRangePicker.displayName = "@refraktor/dates/DateRangePicker";
+DateRangePicker.configure = createComponentConfig();
+DateRangePicker.classNames =
+    createClassNamesConfig();
+export default DateRangePicker;

package/build/components/date-range-picker/date-range-picker.types.d.ts

@@ -0,0 +1,100 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize, createClassNamesConfig, createComponentConfig, FactoryPayload } from "@refraktor/core";
+import type { MonthPickerGetHeaderLabel, MonthPickerGetMonthAriaLabel, MonthPickerGetMonthLabel, MonthPickerGetNavigationAriaLabel } from "../month-picker";
+export type DateRangePickerValue = {
+    startDate?: Date;
+    endDate?: Date;
+};
+export type DateRangePickerSize = RefraktorSize;
+export type DateRangePickerRadius = RefraktorRadius;
+export type DateRangePickerNavigationDirection = "previous" | "next";
+export type DateRangePickerDayState = {
+    selected: boolean;
+    rangeStart: boolean;
+    rangeEnd: boolean;
+    inRange: boolean;
+    outside: boolean;
+    disabled: boolean;
+};
+export type DateRangePickerOnChange = (value: DateRangePickerValue) => void;
+export type DateRangePickerGetDayLabel = (value: Date, state: DateRangePickerDayState) => ReactNode;
+export type DateRangePickerGetDayAriaLabel = (value: Date, state: DateRangePickerDayState) => string;
+export type DateRangePickerGetWeekdayLabel = (dayOfWeek: number, label: string) => ReactNode;
+export type DateRangePickerGetHeaderLabel = (month: number, year: number, value: Date) => ReactNode;
+export type DateRangePickerGetNavigationAriaLabel = (direction: DateRangePickerNavigationDirection, value: Date) => string;
+export type DateRangePickerClassNames = {
+    root?: string;
+    header?: string;
+    headerControls?: string;
+    headerControl?: string;
+    headerPreviousControl?: string;
+    headerNextControl?: string;
+    headerLabel?: string;
+    weekdays?: string;
+    weekday?: string;
+    grid?: string;
+    day?: string;
+    dayOutside?: string;
+    dayToday?: string;
+    daySelected?: string;
+    dayRangeStart?: string;
+    dayRangeEnd?: string;
+    dayInRange?: string;
+    dayDisabled?: string;
+    monthPicker?: string;
+};
+export interface DateRangePickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "value" | "defaultValue"> {
+    /** Active range (controlled). */
+    value?: DateRangePickerValue;
+    /** Initial active range (uncontrolled). */
+    defaultValue?: DateRangePickerValue;
+    /** Callback called when active range changes. */
+    onChange?: DateRangePickerOnChange;
+    /** Minimum selectable date. */
+    minDate?: Date;
+    /** Maximum selectable date. */
+    maxDate?: Date;
+    /** Month picker columns @default `3` */
+    monthPickerColumns?: number;
+    /** Year picker years rendered in one page @default `9` */
+    yearPickerYearsPerPage?: number;
+    /** Year picker columns @default `3` */
+    yearPickerColumns?: number;
+    /** Whether all controls are disabled @default `false` */
+    disabled?: boolean;
+    /** Component size @default `md` */
+    size?: DateRangePickerSize;
+    /** Border radius @default `default` */
+    radius?: DateRangePickerRadius;
+    /** Custom weekday label renderer. */
+    getWeekdayLabel?: DateRangePickerGetWeekdayLabel;
+    /** Custom day label renderer. */
+    getDayLabel?: DateRangePickerGetDayLabel;
+    /** Custom aria-label generator for day buttons. */
+    getDayAriaLabel?: DateRangePickerGetDayAriaLabel;
+    /** Custom header label renderer for visible month. */
+    getHeaderLabel?: DateRangePickerGetHeaderLabel;
+    /** Custom aria-label generator for previous/next controls. */
+    getNavigationAriaLabel?: DateRangePickerGetNavigationAriaLabel;
+    /** Custom month label renderer in month view. */
+    getMonthLabel?: MonthPickerGetMonthLabel;
+    /** Custom aria-label generator for month buttons in month view. */
+    getMonthAriaLabel?: MonthPickerGetMonthAriaLabel;
+    /** Custom header label renderer in month view. */
+    getMonthHeaderLabel?: MonthPickerGetHeaderLabel;
+    /** Custom aria-label generator for month view navigation controls. */
+    getMonthNavigationAriaLabel?: MonthPickerGetNavigationAriaLabel;
+    /** Used for editing root class name. */
+    className?: string;
+    /** Used for styling different parts of the component. */
+    classNames?: DateRangePickerClassNames;
+}
+export interface DateRangePickerFactoryPayload extends FactoryPayload {
+    props: DateRangePickerProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<DateRangePickerProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<DateRangePickerClassNames>>;
+    };
+}
+//# sourceMappingURL=date-range-picker.types.d.ts.map

package/build/components/date-range-picker/date-range-picker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.types.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/date-range-picker.types.ts"],"names":[],"mappings":"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"}

package/build/components/date-range-picker/date-range-picker.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/date-range-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DateRangePicker } from "./date-range-picker";
+export type { DateRangePickerClassNames, DateRangePickerDayState, DateRangePickerGetDayAriaLabel, DateRangePickerGetDayLabel, DateRangePickerGetHeaderLabel, DateRangePickerGetNavigationAriaLabel, DateRangePickerGetWeekdayLabel, DateRangePickerNavigationDirection, DateRangePickerOnChange, DateRangePickerProps, DateRangePickerRadius, DateRangePickerSize, DateRangePickerValue } from "./date-range-picker.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/date-range-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,YAAY,EACR,yBAAyB,EACzB,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,6BAA6B,EAC7B,qCAAqC,EACrC,8BAA8B,EAC9B,kCAAkC,EAClC,uBAAuB,EACvB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACvB,MAAM,2BAA2B,CAAC"}

package/build/components/date-range-picker/index.js

@@ -0,0 +1 @@
+export { default as DateRangePicker } from "./date-range-picker";

package/build/components/index.d.ts

@@ -5,4 +5,6 @@ export * from "./month-picker";
 export * from "./month-input";
 export * from "./year-picker";
 export * from "./year-input";
+export * from "./time-picker";
+export * from "./time-input";
 //# sourceMappingURL=index.d.ts.map

package/build/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC"}

package/build/components/index.js

@@ -5,3 +5,5 @@ export * from "./month-picker";
 export * from "./month-input";
 export * from "./year-picker";
 export * from "./year-input";
+export * from "./time-picker";
+export * from "./time-input";

package/build/components/month-input/month-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"month-input.d.ts","sourceRoot":"","sources":["../../../src/components/month-input/month-input.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAEH,wBAAwB,EAE3B,MAAM,qBAAqB,CAAC;AA0C7B,QAAA,MAAM,UAAU,wEAyRd,CAAC;AAMH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"month-input.d.ts","sourceRoot":"","sources":["../../../src/components/month-input/month-input.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAEH,wBAAwB,EAE3B,MAAM,qBAAqB,CAAC;AA0C7B,QAAA,MAAM,UAAU,wEA4Rd,CAAC;AAMH,eAAe,UAAU,CAAC"}

package/build/components/month-input/month-input.js

@@ -94,7 +94,8 @@ const MonthInput = factory((_props, ref) => {
         open: isOpen,
         onOpenChange: handleOpenChange,
         middleware,
-        whileElementsMounted: autoUpdate
+        whileElementsMounted: autoUpdate,
+        strategy: "fixed"
     });
     const focus = useFocus(floating.context, {
         enabled: !disabled
@@ -149,8 +150,9 @@ const MonthInput = factory((_props, ref) => {
         onClick,
         onKeyDown: handleInputKeyDown
     });
-    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: isOpen, ...transitionProps, children: _jsx("div", { ref: floating.refs.setFloating, id: dropdownId, style: {
-                ...floating.floatingStyles
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: isOpen, style: { position: "relative", zIndex: 1000 }, ...transitionProps, children: _jsx("div", { ref: floating.refs.setFloating, id: dropdownId, style: {
+                ...floating.floatingStyles,
+                zIndex: 1000
             }, className: cx("w-72 z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-2 text-[var(--refraktor-text)] shadow-md", getRadius(radius), classes.dropdown), ...getFloatingProps(), children: _jsx(MonthPicker, { value: selectedMonth, onChange: handleMonthChange, minYear: minYear, maxYear: maxYear, columns: columns, yearPickerYearsPerPage: yearPickerYearsPerPage, yearPickerColumns: yearPickerColumns, disabled: disabled, size: size, radius: radius, getMonthLabel: getMonthLabel, getMonthAriaLabel: getMonthAriaLabel, getHeaderLabel: getHeaderLabel, getNavigationAriaLabel: getNavigationAriaLabel, className: cx("bg-transparent p-0", classes.monthPicker) }) }) }));
     const wrappedContent = isOpen ? (_jsx(FloatingFocusManager, { context: floating.context, modal: false, initialFocus: -1, returnFocus: false, children: dropdownContent })) : (dropdownContent);
     return (_jsxs(_Fragment, { children: [_jsx(Input, { ref: setInputRef, id: _id, readOnly: true, value: inputValue, disabled: disabled, size: size, radius: radius, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": isOpen ? dropdownId : undefined, className: cx(classes.input, className), classNames: inputClassNames, ...inputProps, ...mergedReferenceProps }), withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent)] }));

package/build/components/time-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TimeInput } from "./time-input";
+export type { TimeInputClassNames, TimeInputFactoryPayload, TimeInputProps } from "./time-input.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/time-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EACR,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACjB,MAAM,oBAAoB,CAAC"}

package/build/components/time-input/index.js

@@ -0,0 +1 @@
+export { default as TimeInput } from "./time-input";

package/build/components/time-input/time-input.d.ts

@@ -0,0 +1,4 @@
+import { TimeInputFactoryPayload } from "./time-input.types";
+declare const TimeInput: import("@refraktor/core").RefraktorComponent<TimeInputFactoryPayload>;
+export default TimeInput;
+//# sourceMappingURL=time-input.d.ts.map

package/build/components/time-input/time-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/components/time-input/time-input.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,oBAAoB,CAAC;AAS5B,QAAA,MAAM,SAAS,uEAmBb,CAAC;AAMH,eAAe,SAAS,CAAC"}

package/build/components/time-input/time-input.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createClassNamesConfig, createComponentConfig, factory, Input, useClassNames, useProps, useTheme } from "@refraktor/core";
+const defaultProps = {
+    withSeconds: false,
+    size: "md",
+    radius: "default",
+    variant: "default"
+};
+const TimeInput = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { withSeconds, className, classNames, ...inputProps } = useProps("TimeInput", defaultProps, _props);
+    const classes = useClassNames("TimeInput", classNames);
+    return (_jsx(Input, { ref: ref, type: "time", step: withSeconds ? 1 : undefined, className: cx(classes.input, className), ...inputProps }));
+});
+TimeInput.displayName = "@refraktor/dates/TimeInput";
+TimeInput.configure = createComponentConfig();
+TimeInput.classNames = createClassNamesConfig();
+export default TimeInput;