@refraktor/dates 0.0.1

package/.turbo/turbo-build.log

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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ChillWoW
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# @refraktor/dates
+
+Date and time components for React.
+
+## Installation
+
+```bash
+# NPM
+npm install @refraktor/dates dayjs
+
+# Bun
+bun add @refraktor/dates dayjs
+```
+
+## Documentation
+
+Coming Soon...
+
+## License
+
+[MIT](LICENSE)

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,164 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useMemo } from "react";
+import { createClassNamesConfig, createComponentConfig, factory, Input, Transition, useClassNames, useProps, useTheme } from "@refraktor/core";
+import { autoUpdate, flip, FloatingFocusManager, FloatingPortal, inline, offset, shift, useDismiss, useFloating, useFocus, useInteractions, useRole } from "@floating-ui/react";
+import { useDates } from "../dates-provider";
+import { DatePicker } from "../date-picker";
+const DEFAULT_MONTH_PICKER_COLUMNS = 3;
+const DEFAULT_YEAR_PICKER_YEARS_PER_PAGE = 9;
+const DEFAULT_YEAR_PICKER_COLUMNS = 3;
+const DEFAULT_VALUE_FORMAT = "MMMM D, YYYY";
+const defaultProps = {
+    monthPickerColumns: DEFAULT_MONTH_PICKER_COLUMNS,
+    yearPickerYearsPerPage: DEFAULT_YEAR_PICKER_YEARS_PER_PAGE,
+    yearPickerColumns: DEFAULT_YEAR_PICKER_COLUMNS,
+    valueFormat: DEFAULT_VALUE_FORMAT,
+    disabled: false,
+    size: "md",
+    radius: "default",
+    positioning: {
+        placement: "bottom-start",
+        offset: 4
+    },
+    middlewares: {
+        flip: true,
+        shift: true
+    },
+    withinPortal: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true
+};
+const isValidDate = (value) => value instanceof Date && !Number.isNaN(value.getTime());
+const normalizeDateValue = (value) => {
+    if (!isValidDate(value)) {
+        return undefined;
+    }
+    const normalizedValue = new Date(value);
+    normalizedValue.setHours(0, 0, 0, 0);
+    return normalizedValue;
+};
+const DateInput = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { createDate } = useDates();
+    const { id, value, defaultValue, onChange, opened, defaultOpened, onOpenedChange, minDate, maxDate, monthPickerColumns, yearPickerYearsPerPage, yearPickerColumns, getWeekdayLabel, getDayLabel, getDayAriaLabel, getHeaderLabel, getNavigationAriaLabel, getMonthLabel, getMonthAriaLabel, getMonthHeaderLabel, getMonthNavigationAriaLabel, valueFormat, disabled, size, radius, positioning, middlewares, withinPortal, closeOnClickOutside, closeOnEscape, transitionProps, inputClassNames, className, classNames, onFocus, onBlur, onClick, onKeyDown, ...inputProps } = useProps("DateInput", defaultProps, _props);
+    const classes = useClassNames("DateInput", classNames);
+    const _id = useId(id);
+    const dropdownId = `${_id}-dropdown`;
+    const [selectedDateState, setSelectedDate] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: undefined,
+        onChange: (nextDate) => {
+            if (nextDate !== undefined) {
+                onChange?.(nextDate);
+            }
+        }
+    });
+    const [isOpenState, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+    const isOpen = isOpenState && !disabled;
+    const middleware = useMemo(() => {
+        const middlewareList = [];
+        middlewareList.push(offset(positioning?.offset ?? 4));
+        if (middlewares?.flip ?? true) {
+            middlewareList.push(flip(typeof middlewares?.flip === "boolean"
+                ? undefined
+                : middlewares.flip));
+        }
+        if (middlewares?.shift ?? true) {
+            middlewareList.push(shift(typeof middlewares?.shift === "boolean"
+                ? undefined
+                : middlewares.shift));
+        }
+        if (middlewares?.inline) {
+            middlewareList.push(inline(typeof middlewares.inline === "boolean"
+                ? undefined
+                : middlewares.inline));
+        }
+        return middlewareList;
+    }, [middlewares, positioning?.offset]);
+    const handleOpenChange = useCallback((nextOpen) => {
+        if (disabled && nextOpen) {
+            return;
+        }
+        setIsOpen(nextOpen);
+    }, [disabled, setIsOpen]);
+    const floating = useFloating({
+        placement: positioning?.placement ?? "bottom-start",
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        middleware,
+        whileElementsMounted: autoUpdate
+    });
+    const focus = useFocus(floating.context, {
+        enabled: !disabled
+    });
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape
+    });
+    const role = useRole(floating.context, {
+        role: "dialog"
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        focus,
+        dismiss,
+        role
+    ]);
+    const setInputRef = useCallback((node) => {
+        floating.refs.setReference(node);
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [floating.refs, ref]);
+    const handleInputKeyDown = useCallback((event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        if (event.key === "ArrowDown" ||
+            event.key === "Enter" ||
+            event.key === " ") {
+            event.preventDefault();
+            setIsOpen(true);
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setIsOpen(false);
+        }
+    }, [disabled, onKeyDown, setIsOpen]);
+    const handleDateChange = useCallback((nextDate) => {
+        const normalizedDate = normalizeDateValue(nextDate);
+        if (normalizedDate === undefined) {
+            return;
+        }
+        setSelectedDate(normalizedDate);
+        setIsOpen(false);
+    }, [setIsOpen, setSelectedDate]);
+    const selectedDate = normalizeDateValue(selectedDateState);
+    const inputValue = selectedDate === undefined ? "" : createDate(selectedDate).format(valueFormat);
+    const mergedReferenceProps = getReferenceProps({
+        onFocus,
+        onBlur,
+        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
+            }, 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)] }));
+});
+DateInput.displayName = "@refraktor/dates/DateInput";
+DateInput.configure = createComponentConfig();
+DateInput.classNames = createClassNamesConfig();
+export default DateInput;

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

@@ -0,0 +1,96 @@
+import type { FlipOptions, InlineOptions, Placement, ShiftOptions } from "@floating-ui/react";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload, InputFieldClassNames, InputProps, RefraktorRadius, RefraktorSize, TransitionProps } from "@refraktor/core";
+import type { DatePickerGetDayAriaLabel, DatePickerGetDayLabel, DatePickerGetHeaderLabel, DatePickerGetNavigationAriaLabel, DatePickerGetWeekdayLabel } from "../date-picker";
+import type { MonthPickerGetHeaderLabel, MonthPickerGetMonthAriaLabel, MonthPickerGetMonthLabel, MonthPickerGetNavigationAriaLabel } from "../month-picker";
+export type DateInputValue = Date;
+export type DateInputSize = RefraktorSize;
+export type DateInputRadius = RefraktorRadius;
+export type DateInputOnChange = (value: DateInputValue) => void;
+export type DateInputValueFormat = string;
+export type DateInputPositioning = {
+    /** The placement of the dropdown relative to the input @default `bottom-start` */
+    placement?: Placement;
+    /** Offset distance from the input in pixels @default `4` */
+    offset?: number;
+};
+export type DateInputMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+export type DateInputClassNames = {
+    input?: string;
+    dropdown?: string;
+    datePicker?: string;
+};
+interface _DateInputProps {
+    /** Selected date (controlled). */
+    value?: DateInputValue;
+    /** Initial selected date (uncontrolled). */
+    defaultValue?: DateInputValue;
+    /** Callback called when selected date changes. */
+    onChange?: DateInputOnChange;
+    /** Dropdown open state (controlled). */
+    opened?: boolean;
+    /** Initial dropdown open state (uncontrolled). */
+    defaultOpened?: boolean;
+    /** Callback called when dropdown open state changes. */
+    onOpenedChange?: (opened: boolean) => void;
+    /** 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;
+    /** Custom weekday label renderer. */
+    getWeekdayLabel?: DatePickerGetWeekdayLabel;
+    /** Custom day label renderer. */
+    getDayLabel?: DatePickerGetDayLabel;
+    /** Custom aria-label generator for day buttons. */
+    getDayAriaLabel?: DatePickerGetDayAriaLabel;
+    /** Custom header label renderer for visible month. */
+    getHeaderLabel?: DatePickerGetHeaderLabel;
+    /** Custom aria-label generator for previous/next controls. */
+    getNavigationAriaLabel?: DatePickerGetNavigationAriaLabel;
+    /** 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;
+    /** Dayjs format used to render selected date in the input @default `MMMM D, YYYY` */
+    valueFormat?: DateInputValueFormat;
+    /** Positioning settings for the dropdown. */
+    positioning?: DateInputPositioning;
+    /** Floating middleware settings. */
+    middlewares?: DateInputMiddlewares;
+    /** Whether to render dropdown in a portal @default `true` */
+    withinPortal?: boolean;
+    /** Whether to close on click outside @default `true` */
+    closeOnClickOutside?: boolean;
+    /** Whether to close on Escape key @default `true` */
+    closeOnEscape?: boolean;
+    /** Transition props for dropdown, uses Transition internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    /** Used for styling the core Input field parts. */
+    inputClassNames?: InputFieldClassNames;
+    /** Used for styling DateInput parts. */
+    classNames?: DateInputClassNames;
+}
+export type DateInputProps = _DateInputProps & Omit<InputProps, "value" | "defaultValue" | "onChange" | "readOnly" | "classNames">;
+export interface DateInputFactoryPayload extends FactoryPayload {
+    props: DateInputProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<DateInputProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<DateInputClassNames>>;
+    };
+}
+export {};
+//# sourceMappingURL=date-input.types.d.ts.map

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

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

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

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

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

@@ -0,0 +1,3 @@
+export { default as DateInput } from "./date-input";
+export type { DateInputClassNames, DateInputFactoryPayload, DateInputMiddlewares, DateInputOnChange, DateInputPositioning, DateInputProps, DateInputRadius, DateInputSize, DateInputValue, DateInputValueFormat } from "./date-input.types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAEH,wBAAwB,EAG3B,MAAM,qBAAqB,CAAC;AAkK7B,QAAA,MAAM,UAAU,wEA0cd,CAAC;AAMH,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,307 @@
+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 DatePicker = 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("DatePicker", defaultProps, _props);
+    const classes = useClassNames("DatePicker", 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 [selectedDateState, setSelectedDate] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: undefined,
+        onChange: (nextDate) => {
+            if (nextDate !== undefined) {
+                onChange?.(nextDate);
+            }
+        }
+    });
+    const selectedDateTimestamp = isValidDate(selectedDateState)
+        ? startOfDay(selectedDateState).getTime()
+        : undefined;
+    const selectedDate = selectedDateTimestamp !== undefined
+        ? new Date(selectedDateTimestamp)
+        : undefined;
+    const [displayedMonth, setDisplayedMonth] = useState(() => resolveMonthStart(selectedDate ?? today, bounds));
+    const [view, setView] = useState("day");
+    useEffect(() => {
+        setDisplayedMonth((previousMonth) => resolveMonthStart(previousMonth, bounds));
+    }, [bounds]);
+    useEffect(() => {
+        if (selectedDate === undefined) {
+            return;
+        }
+        const normalizedMonth = resolveMonthStart(selectedDate, bounds);
+        setDisplayedMonth((previousMonth) => {
+            if (isSameMonth(previousMonth, normalizedMonth)) {
+                return previousMonth;
+            }
+            return normalizedMonth;
+        });
+    }, [bounds, selectedDateTimestamp]);
+    const visibleDays = useMemo(() => getVisibleDays(displayedMonth, firstDayOfWeek, consistentWeeks), [consistentWeeks, displayedMonth, firstDayOfWeek]);
+    const hasVisibleSelection = selectedDate !== undefined &&
+        visibleDays.some((day) => isSameDay(day, selectedDate));
+    const firstAvailableDay = useMemo(() => visibleDays.find((day) => !isDateDisabled(day, disabled ?? false, bounds)), [bounds, disabled, 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, isSelected, isOutside, isDisabled) => {
+        if (getDayAriaLabel) {
+            return getDayAriaLabel(day, isSelected);
+        }
+        const dayLabel = createDate(day).format("dddd, MMMM D, YYYY");
+        if (isSelected) {
+            return `${dayLabel}, selected`;
+        }
+        const suffix = [
+            isOutside ? "outside current month" : undefined,
+            isDisabled ? "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 (selectedDate !== undefined && isSameDay(selectedDate, normalizedDay)) {
+            return;
+        }
+        setDisplayedMonth(startOfMonth(normalizedDay));
+        setSelectedDate(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 = selectedDate && visibleDays.some((day) => isSameDay(day, selectedDate))
+            ? selectedDate
+            : firstAvailableDay ?? 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 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 isSelected = selectedDate !== undefined &&
+                            isSameDay(day, selectedDate);
+                        const isToday = isSameDay(day, today);
+                        const isDayDisabled = isDateDisabled(day, disabled ?? false, bounds);
+                        const tabIndex = isSelected ||
+                            (!hasVisibleSelection &&
+                                firstAvailableDay !== undefined &&
+                                isSameDay(day, firstAvailableDay))
+                            ? 0
+                            : -1;
+                        return (_jsx("button", { type: "button", role: "gridcell", "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-label": resolveDayAriaLabel(day, isSelected, isOutside, isDayDisabled), tabIndex: tabIndex, "data-active": isSelected, "data-outside": isOutside, "data-today": isToday, "data-disabled": isDayDisabled, disabled: isDayDisabled, className: cx("inline-flex items-center justify-center font-medium text-[var(--refraktor-text)] transition-colors", "hover:bg-[var(--refraktor-bg-hover)]", isSelected &&
+                                "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)] hover:bg-[var(--refraktor-primary)]", isOutside &&
+                                "text-[var(--refraktor-text-secondary)]", 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, isDayDisabled && classes.dayDisabled), onClick: () => setDay(day), children: getDayLabel ? getDayLabel(day) : day.getDate() }, day.toISOString()));
+                    }) })] })) }));
+});
+DatePicker.displayName = "@refraktor/dates/DatePicker";
+DatePicker.configure = createComponentConfig();
+DatePicker.classNames = createClassNamesConfig();
+export default DatePicker;