@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/calendar/createDatePickerState.ts

@@ -0,0 +1,347 @@
+/**
+ * DatePickerState for Solid-Stately
+ *
+ * Provides unified state management for DatePicker components.
+ * Based on @react-stately/datepicker useDatePickerState
+ */
+
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import {
+  type DateValue,
+  type CalendarDateTime,
+  Time,
+  DateFormatter,
+  toCalendarDate,
+  toCalendarDateTime,
+  toZoned,
+  getLocalTimeZone,
+} from "@internationalized/date";
+import { access, type MaybeAccessor } from "../utils";
+import type { ValidationState } from "./createCalendarState";
+import type { TimeValue } from "./createTimeFieldState";
+
+export type Granularity = "day" | "hour" | "minute" | "second";
+
+export type DatePickerStateProps<T extends DateValue = DateValue> = DatePickerStateOptions<T>;
+
+export interface DatePickerStateOptions<T extends DateValue = DateValue> {
+  value?: MaybeAccessor<T | null>;
+  defaultValue?: T | null;
+  onChange?: (value: T | null) => void;
+  minValue?: MaybeAccessor<DateValue | undefined>;
+  maxValue?: MaybeAccessor<DateValue | undefined>;
+  isDisabled?: MaybeAccessor<boolean>;
+  isReadOnly?: MaybeAccessor<boolean>;
+  isRequired?: MaybeAccessor<boolean>;
+  granularity?: Granularity;
+  hourCycle?: 12 | 24;
+  hideTimeZone?: boolean;
+  placeholderValue?: DateValue;
+  shouldCloseOnSelect?: boolean | (() => boolean);
+  defaultOpen?: boolean;
+  isOpen?: MaybeAccessor<boolean | undefined>;
+  onOpenChange?: (isOpen: boolean) => void;
+  isDateUnavailable?: (date: DateValue) => boolean;
+  validationState?: MaybeAccessor<ValidationState | undefined>;
+}
+
+export interface DatePickerState<T extends DateValue = DateValue> {
+  value: Accessor<T | null>;
+  defaultValue: T | null;
+  setValue: (value: T | null) => void;
+  dateValue: Accessor<DateValue | null>;
+  setDateValue: (value: DateValue) => void;
+  timeValue: Accessor<TimeValue | null>;
+  setTimeValue: (value: TimeValue) => void;
+  granularity: Granularity;
+  hasTime: boolean;
+  isOpen: Accessor<boolean>;
+  open: () => void;
+  close: () => void;
+  setOpen: (isOpen: boolean) => void;
+  isInvalid: Accessor<boolean>;
+  validationState: Accessor<ValidationState | undefined>;
+  builtinValidation: Accessor<{ isInvalid: boolean }>;
+  showEra: Accessor<boolean>;
+  formatValue: (locale: string, fieldOptions?: Intl.DateTimeFormatOptions) => string;
+  getDateFormatter: (locale: string, formatOptions?: Intl.DateTimeFormatOptions) => DateFormatter;
+}
+
+/**
+ * Provides unified state management for a DatePicker component.
+ */
+export function createDatePickerState<T extends DateValue = DateValue>(
+  props: DatePickerStateOptions<T> = {},
+): DatePickerState<T> {
+  const timeZone = getLocalTimeZone();
+
+  // Internal signals for value and overlay state
+  const [internalValue, setInternalValue] = createSignal<T | null>(props.defaultValue ?? null);
+  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);
+
+  // Transient selections for date and time
+  const [selectedDate, setSelectedDate] = createSignal<DateValue | null>(null);
+  const [selectedTime, setSelectedTime] = createSignal<TimeValue | null>(null);
+
+  // Controlled vs uncontrolled value
+  const value = createMemo<T | null>(() => {
+    const controlled = access(props.value);
+    return controlled !== undefined ? controlled : internalValue();
+  });
+
+  // Granularity: auto-detect from value type if not provided
+  const granularity = createMemo<Granularity>(() => {
+    if (props.granularity) return props.granularity;
+    const v = value();
+    if (v && "hour" in v) {
+      if ("second" in v) return "second";
+      return "minute";
+    }
+    return "day";
+  });
+
+  const hasTime = createMemo(() => {
+    const g = granularity();
+    return g === "hour" || g === "minute" || g === "second";
+  });
+
+  // Derived states
+  const isDisabled = createMemo(() => access(props.isDisabled) ?? false);
+  const isReadOnly = createMemo(() => access(props.isReadOnly) ?? false);
+  const validationState = createMemo(() => access(props.validationState));
+  const isOpen: Accessor<boolean> = () => access(props.isOpen) ?? internalOpen();
+
+  // Date and time portions of the current value
+  const dateValue = createMemo<DateValue | null>(() => {
+    const v = value();
+    if (!v) return null;
+    return toCalendarDate(v);
+  });
+
+  const timeValue = createMemo<TimeValue | null>(() => {
+    const v = value();
+    if (!v || !("hour" in v)) return null;
+    return v as unknown as TimeValue;
+  });
+
+  // Helper to resolve placeholder time (midnight fallback)
+  const getPlaceholderTime = (): TimeValue => {
+    const placeholder = props.placeholderValue;
+    if (placeholder && "hour" in placeholder) {
+      return placeholder as TimeValue;
+    }
+    return new Time(0, 0, 0);
+  };
+
+  // Commit combined date + time value
+  const commitValue = (date: DateValue, time: TimeValue | null) => {
+    if (isDisabled() || isReadOnly()) return;
+
+    let combined: DateValue;
+    if (time && hasTime()) {
+      combined = toCalendarDateTime(date, time);
+    } else {
+      combined = date;
+    }
+
+    // Preserve ZonedDateTime timezone if the current committed value has one
+    const current = value();
+    if (current && "timeZone" in current && !("timeZone" in combined)) {
+      combined = toZoned(combined as CalendarDateTime, current.timeZone);
+    }
+
+    // Clear transient states
+    setSelectedDate(null);
+    setSelectedTime(null);
+
+    // Update internal state if uncontrolled
+    const controlled = access(props.value);
+    if (controlled === undefined) {
+      setInternalValue(() => combined as T);
+    }
+
+    if (props.onChange) {
+      props.onChange(combined as T);
+    }
+  };
+
+  // Set the full value directly
+  const setValue = (newValue: T | null) => {
+    if (isDisabled() || isReadOnly()) return;
+
+    const controlled = access(props.value);
+    if (controlled === undefined) {
+      setInternalValue(() => newValue);
+    }
+
+    if (props.onChange) {
+      props.onChange(newValue);
+    }
+
+    // Clear transient states
+    setSelectedDate(null);
+    setSelectedTime(null);
+  };
+
+  // Select a date (may commit if time is already selected or shouldCloseOnSelect)
+  const setDateValue = (date: DateValue) => {
+    if (isDisabled() || isReadOnly()) return;
+
+    const currentTime = selectedTime();
+    const currentValue = value();
+    const shouldClose =
+      typeof props.shouldCloseOnSelect === "function"
+        ? props.shouldCloseOnSelect()
+        : (props.shouldCloseOnSelect ?? true);
+
+    if (hasTime() && (currentTime || shouldClose)) {
+      // Preserve existing time from committed value if user hasn't explicitly selected a new time
+      const existingTime =
+        currentTime ??
+        (currentValue && "hour" in currentValue ? (currentValue as unknown as TimeValue) : null);
+      const timePart = existingTime ?? getPlaceholderTime();
+      commitValue(date, timePart);
+
+      if (shouldClose) {
+        setOpen(false);
+      }
+    } else if (hasTime()) {
+      // Store date transiently, waiting for time selection
+      setSelectedDate(date);
+    } else {
+      // No time needed, commit immediately
+      commitValue(date, null);
+
+      if (shouldClose) {
+        setOpen(false);
+      }
+    }
+  };
+
+  // Select a time (may commit if date is already selected)
+  const setTimeValue = (time: TimeValue) => {
+    if (isDisabled() || isReadOnly()) return;
+
+    const currentDate = selectedDate();
+    const currentValue = value();
+
+    if (currentDate) {
+      // We have a transient date, commit combined
+      commitValue(currentDate, time);
+    } else if (currentValue && hasTime()) {
+      // We have an existing value with time, update the time portion
+      const datePart = toCalendarDate(currentValue);
+      commitValue(datePart, time);
+    } else {
+      // Store time transiently, waiting for date selection
+      setSelectedTime(time);
+    }
+  };
+
+  // Open / close helpers
+  const open = () => setOpen(true);
+  const close = () => setOpen(false);
+
+  const setOpen = (openValue: boolean) => {
+    if (openValue) {
+      if (access(props.isOpen) === undefined) {
+        setInternalOpen(true);
+      }
+      props.onOpenChange?.(true);
+    } else {
+      // When closing, only commit if both date and time are available (when time is required).
+      // Don't auto-commit partial selections with placeholder time to avoid phantom values.
+      const currentValue = value();
+      const currentDate = selectedDate();
+      const currentTime = selectedTime();
+
+      if (!currentValue && currentDate && hasTime() && currentTime) {
+        // Both date and time explicitly selected — safe to commit
+        commitValue(currentDate, currentTime);
+      }
+
+      // Clear any remaining transient state
+      setSelectedDate(null);
+      setSelectedTime(null);
+      if (access(props.isOpen) === undefined) {
+        setInternalOpen(false);
+      }
+      props.onOpenChange?.(false);
+    }
+  };
+
+  // Builtin validation against minValue, maxValue, and isDateUnavailable
+  const builtinValidation = createMemo(() => {
+    const v = value();
+    if (!v) return { isInvalid: false };
+
+    const minValue = access(props.minValue);
+    const maxValue = access(props.maxValue);
+
+    if (minValue && v.compare(minValue) < 0) return { isInvalid: true };
+    if (maxValue && v.compare(maxValue) > 0) return { isInvalid: true };
+    if (props.isDateUnavailable?.(v)) return { isInvalid: true };
+
+    return { isInvalid: false };
+  });
+
+  const isInvalid = createMemo(() => {
+    return builtinValidation().isInvalid || validationState() === "invalid";
+  });
+
+  // Show era for BC dates
+  const showEra = createMemo(() => {
+    const v = value();
+    return v ? v.year < 1 : false;
+  });
+
+  // Format the current value using DateFormatter with era support for BC dates
+  const formatValue = (locale: string, fieldOptions?: Intl.DateTimeFormatOptions): string => {
+    const v = value();
+    if (!v) return "";
+
+    const options: Intl.DateTimeFormatOptions = { ...fieldOptions };
+
+    // Add era for BC dates
+    if (v.year < 1) {
+      options.era = "short";
+    }
+
+    const formatter = new DateFormatter(locale, options);
+    return formatter.format(v.toDate(timeZone));
+  };
+
+  // Get a DateFormatter instance
+  const getDateFormatter = (
+    locale: string,
+    formatOptions?: Intl.DateTimeFormatOptions,
+  ): DateFormatter => {
+    return new DateFormatter(locale, formatOptions);
+  };
+
+  return {
+    value,
+    defaultValue: props.defaultValue ?? null,
+    setValue,
+    dateValue,
+    setDateValue,
+    timeValue,
+    setTimeValue,
+    get granularity() {
+      return granularity();
+    },
+    get hasTime() {
+      return hasTime();
+    },
+    isOpen,
+    open,
+    close,
+    setOpen,
+    isInvalid,
+    validationState,
+    builtinValidation,
+    showEra,
+    formatValue,
+    getDateFormatter,
+  };
+}

package/src/calendar/createRangeCalendarState.d.ts

@@ -4,143 +4,168 @@
  * Provides state management for range calendar components.
  * Based on @react-stately/calendar useRangeCalendarState
  */
-import { type Accessor } from 'solid-js';
-import { type CalendarDate, type DateValue } from '@internationalized/date';
-import { type MaybeAccessor } from '../utils';
-import type { ValidationState } from './createCalendarState';
+import { type Accessor } from "solid-js";
+import {
+  type Calendar as InternationalizedCalendar,
+  type CalendarDate,
+  type CalendarIdentifier,
+  type DateValue,
+} from "@internationalized/date";
+import { type MaybeAccessor } from "../utils";
+import type { CalendarDayOfWeek, ValidationState } from "./createCalendarState";
+type RangeCalendarSelectionAlignment = "start" | "center" | "end";
+type RangeCalendarPageBehavior = "single" | "visible";
 export interface DateRange {
-    start: CalendarDate;
-    end: CalendarDate;
+  start: CalendarDate;
+  end: CalendarDate;
 }
 export interface RangeValue<T> {
-    start: T;
-    end: T;
+  start: T;
+  end: T;
 }
 export interface RangeCalendarStateProps<T extends DateValue = DateValue> {
-    /** The current value (controlled). */
-    value?: MaybeAccessor<RangeValue<T> | null>;
-    /** The default value (uncontrolled). */
-    defaultValue?: RangeValue<T> | null;
-    /** Handler called when the value changes. */
-    onChange?: (value: RangeValue<T>) => void;
-    /** The minimum allowed date. */
-    minValue?: MaybeAccessor<DateValue | undefined>;
-    /** The maximum allowed date. */
-    maxValue?: MaybeAccessor<DateValue | undefined>;
-    /** Whether the calendar is disabled. */
-    isDisabled?: MaybeAccessor<boolean>;
-    /** Whether the calendar is read-only. */
-    isReadOnly?: MaybeAccessor<boolean>;
-    /** The date that is focused when the calendar first mounts. */
-    focusedValue?: MaybeAccessor<DateValue | undefined>;
-    /** The default focused date (uncontrolled). */
-    defaultFocusedValue?: DateValue;
-    /** Handler called when the focused date changes. */
-    onFocusChange?: (date: CalendarDate) => void;
-    /** The locale to use for formatting. */
-    locale?: string;
-    /** Callback to determine if a date is unavailable. */
-    isDateUnavailable?: (date: DateValue) => boolean;
-    /** The number of months to display at once. */
-    visibleMonths?: number;
-    /** Controls which days are disabled. */
-    isDateDisabled?: (date: DateValue) => boolean;
-    /** Validation state. */
-    validationState?: MaybeAccessor<ValidationState | undefined>;
-    /** Whether to allow selecting the same date for start and end. */
-    allowsNonContiguousRanges?: boolean;
-    /** The first day of the week (0 = Sunday, 1 = Monday, etc.). */
-    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /** The current value (controlled). */
+  value?: MaybeAccessor<RangeValue<T> | null>;
+  /** The default value (uncontrolled). */
+  defaultValue?: RangeValue<T> | null;
+  /** Handler called when the value changes. */
+  onChange?: (value: RangeValue<T> | null) => void;
+  /** The minimum allowed date. */
+  minValue?: MaybeAccessor<DateValue | undefined>;
+  /** The maximum allowed date. */
+  maxValue?: MaybeAccessor<DateValue | undefined>;
+  /** Whether the calendar is disabled. */
+  isDisabled?: MaybeAccessor<boolean>;
+  /** Whether the calendar is read-only. */
+  isReadOnly?: MaybeAccessor<boolean>;
+  /** The date that is focused when the calendar first mounts. */
+  focusedValue?: MaybeAccessor<DateValue | null | undefined>;
+  /** The default focused date (uncontrolled). */
+  defaultFocusedValue?: DateValue;
+  /** Handler called when the focused date changes. */
+  onFocusChange?: (date: CalendarDate) => void;
+  /** The locale to use for formatting. */
+  locale?: MaybeAccessor<string | undefined>;
+  /** Creates a calendar object for a locale calendar identifier. */
+  createCalendar?: (identifier: CalendarIdentifier) => InternationalizedCalendar;
+  /** Callback to determine if a date is unavailable. */
+  isDateUnavailable?: (date: DateValue) => boolean;
+  /** The number of months to display at once. */
+  visibleMonths?: MaybeAccessor<number | undefined>;
+  /** Controls how the initial visible months are aligned around the current value. */
+  selectionAlignment?: MaybeAccessor<RangeCalendarSelectionAlignment | undefined>;
+  /** Controls whether pagination moves by one month or the visible month count. */
+  pageBehavior?: MaybeAccessor<RangeCalendarPageBehavior | undefined>;
+  /** Controls which days are disabled. */
+  isDateDisabled?: (date: DateValue) => boolean;
+  /** Validation state. */
+  validationState?: MaybeAccessor<ValidationState | undefined>;
+  /** Whether to allow selecting the same date for start and end. */
+  allowsNonContiguousRanges?: boolean;
+  /** The first day of the week (0 = Sunday, 1 = Monday, etc.). */
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface RangeCalendarState<T extends DateValue = DateValue> {
-    /** The currently selected date range. */
-    value: Accessor<RangeValue<T> | null>;
-    /** Sets the selected date range. */
-    setValue: (value: RangeValue<T> | null) => void;
-    /** The currently focused date. */
-    focusedDate: Accessor<CalendarDate>;
-    /** Sets the focused date. */
-    setFocusedDate: (date: CalendarDate) => void;
-    /** The anchor date when selecting a range (first click). */
-    anchorDate: Accessor<CalendarDate | null>;
-    /** Sets the anchor date. */
-    setAnchorDate: (date: CalendarDate | null) => void;
-    /** The highlighted range during selection. */
-    highlightedRange: Accessor<RangeValue<CalendarDate> | null>;
-    /** Whether the calendar is disabled. */
-    isDisabled: Accessor<boolean>;
-    /** Whether the calendar is read-only. */
-    isReadOnly: Accessor<boolean>;
-    /** The visible date range (first and last day of visible month(s)). */
-    visibleRange: Accessor<{
-        start: CalendarDate;
-        end: CalendarDate;
-    }>;
-    /** The timezone used for date calculations. */
-    timeZone: string;
-    /** The validation state. */
-    validationState: Accessor<ValidationState | undefined>;
-    /** Whether a date is within the selected range. */
-    isSelected: (date: DateValue) => boolean;
-    /** Whether a date is the start of the selection. */
-    isSelectionStart: (date: DateValue) => boolean;
-    /** Whether a date is the end of the selection. */
-    isSelectionEnd: (date: DateValue) => boolean;
-    /** Whether a date is focused. */
-    isCellFocused: (date: DateValue) => boolean;
-    /** Whether a date is unavailable. */
-    isCellUnavailable: (date: DateValue) => boolean;
-    /** Whether a date is disabled. */
-    isCellDisabled: (date: DateValue) => boolean;
-    /** Whether a date is outside the visible range. */
-    isOutsideVisibleRange: (date: DateValue) => boolean;
-    /** Whether a date is invalid. */
-    isInvalid: (date: DateValue) => boolean;
-    /** Moves focus to the previous page (month). */
-    focusPreviousPage: () => void;
-    /** Moves focus to the next page (month). */
-    focusNextPage: () => void;
-    /** Moves focus to the previous section (year). */
-    focusPreviousSection: () => void;
-    /** Moves focus to the next section (year). */
-    focusNextSection: () => void;
-    /** Moves focus to the previous day. */
-    focusPreviousDay: () => void;
-    /** Moves focus to the next day. */
-    focusNextDay: () => void;
-    /** Moves focus to the previous week. */
-    focusPreviousWeek: () => void;
-    /** Moves focus to the next week. */
-    focusNextWeek: () => void;
-    /** Moves focus to the start of the month. */
-    focusPageStart: () => void;
-    /** Moves focus to the end of the month. */
-    focusPageEnd: () => void;
-    /** Selects the focused date. */
-    selectFocusedDate: () => void;
-    /** Selects a specific date. */
-    selectDate: (date: CalendarDate) => void;
-    /** Whether focus is currently within the calendar. */
-    isFocused: Accessor<boolean>;
-    /** Sets whether focus is within the calendar. */
-    setFocused: (focused: boolean) => void;
-    /** Gets the dates for a week in the visible range. */
-    getDatesInWeek: (weekIndex: number, monthStartDate?: CalendarDate) => (CalendarDate | null)[];
-    /** Gets the number of weeks in a month. */
-    getWeeksInMonth: (date?: CalendarDate) => number;
-    /** The week day headers. */
-    weekDays: Accessor<string[]>;
-    /** The title for the calendar (formatted month and year). */
-    title: Accessor<string>;
-    /** The number of visible months. */
-    visibleMonths: number;
-    /** Whether the user is currently selecting a range. */
-    isDragging: Accessor<boolean>;
-    /** Sets whether the user is dragging to select. */
-    setDragging: (dragging: boolean) => void;
+  /** The currently selected date range. */
+  value: Accessor<RangeValue<T> | null>;
+  /** Sets the selected date range. */
+  setValue: (value: RangeValue<T> | null) => void;
+  /** The currently focused date. */
+  focusedDate: Accessor<CalendarDate>;
+  /** Sets the focused date. */
+  setFocusedDate: (date: CalendarDate) => void;
+  /** The anchor date when selecting a range (first click). */
+  anchorDate: Accessor<CalendarDate | null>;
+  /** Sets the anchor date. */
+  setAnchorDate: (date: CalendarDate | null) => void;
+  /** The highlighted range during selection. */
+  highlightedRange: Accessor<RangeValue<CalendarDate> | null>;
+  /** Whether the calendar is disabled. */
+  isDisabled: Accessor<boolean>;
+  /** Whether the calendar is read-only. */
+  isReadOnly: Accessor<boolean>;
+  /** The visible date range (first and last day of visible month(s)). */
+  visibleRange: Accessor<{
+    start: CalendarDate;
+    end: CalendarDate;
+  }>;
+  /** The timezone used for date calculations. */
+  timeZone: string;
+  /** The locale used for formatting and locale-specific week starts. */
+  locale: Accessor<string>;
+  /** The explicitly requested first weekday, or undefined for the locale default. */
+  firstDayOfWeek: Accessor<CalendarDayOfWeek | undefined>;
+  /** The validation state. */
+  validationState: Accessor<ValidationState | undefined>;
+  /** Whether the current value is invalid according to validation state. */
+  isValueInvalid: Accessor<boolean>;
+  /** Whether a date is within the selected range. */
+  isSelected: (date: DateValue) => boolean;
+  /** Whether a date is the start of the selection. */
+  isSelectionStart: (date: DateValue) => boolean;
+  /** Whether a date is the end of the selection. */
+  isSelectionEnd: (date: DateValue) => boolean;
+  /** Whether a date is focused. */
+  isCellFocused: (date: DateValue) => boolean;
+  /** Whether a date is unavailable. */
+  isCellUnavailable: (date: DateValue) => boolean;
+  /** Whether a date is disabled. */
+  isCellDisabled: (date: DateValue) => boolean;
+  /** Whether a date is outside the visible range. */
+  isOutsideVisibleRange: (date: DateValue) => boolean;
+  /** Whether a date is invalid. */
+  isInvalid: (date: DateValue) => boolean;
+  /** Moves focus to the previous page (month). */
+  focusPreviousPage: () => void;
+  /** Moves focus to the next page (month). */
+  focusNextPage: () => void;
+  /** Moves focus to the previous section (year). */
+  focusPreviousSection: () => void;
+  /** Moves focus to the next section (year). */
+  focusNextSection: () => void;
+  /** Whether the previous visible range would be outside the allowed date range. */
+  isPreviousVisibleRangeInvalid: () => boolean;
+  /** Whether the next visible range would be outside the allowed date range. */
+  isNextVisibleRangeInvalid: () => boolean;
+  /** Moves focus to the previous day. */
+  focusPreviousDay: () => void;
+  /** Moves focus to the next day. */
+  focusNextDay: () => void;
+  /** Moves focus to the previous week. */
+  focusPreviousWeek: () => void;
+  /** Moves focus to the next week. */
+  focusNextWeek: () => void;
+  /** Moves focus to the start of the month. */
+  focusPageStart: () => void;
+  /** Moves focus to the end of the month. */
+  focusPageEnd: () => void;
+  /** Selects the focused date. */
+  selectFocusedDate: () => void;
+  /** Selects a specific date. */
+  selectDate: (date: CalendarDate) => void;
+  /** Whether focus is currently within the calendar. */
+  isFocused: Accessor<boolean>;
+  /** Sets whether focus is within the calendar. */
+  setFocused: (focused: boolean) => void;
+  /** Gets the dates for a week in the visible range. */
+  getDatesInWeek: (weekIndex: number, monthStartDate?: CalendarDate) => (CalendarDate | null)[];
+  /** Gets the number of weeks in a month. */
+  getWeeksInMonth: (date?: CalendarDate) => number;
+  /** The week day headers. */
+  weekDays: Accessor<string[]>;
+  /** The title for the calendar (formatted month and year). */
+  title: Accessor<string>;
+  /** The number of visible months. */
+  visibleMonths: number;
+  /** Whether the user is currently selecting a range. */
+  isDragging: Accessor<boolean>;
+  /** Sets whether the user is dragging to select. */
+  setDragging: (dragging: boolean) => void;
 }
 /**
  * Provides state management for a range calendar component.
  */
-export declare function createRangeCalendarState<T extends DateValue = CalendarDate>(props?: RangeCalendarStateProps<T>): RangeCalendarState<T>;
-//# sourceMappingURL=createRangeCalendarState.d.ts.map
+export declare function createRangeCalendarState<T extends DateValue = CalendarDate>(
+  props?: RangeCalendarStateProps<T>,
+): RangeCalendarState<T>;
+//# sourceMappingURL=createRangeCalendarState.d.ts.map