@proyecto-viviana/solid-stately 0.1.5 → 0.2.1

package/src/calendar/createRangeCalendarState.ts

@@ -1,535 +0,0 @@
-/**
- * RangeCalendarState for Solid-Stately
- *
- * Provides state management for range calendar components.
- * Based on @react-stately/calendar useRangeCalendarState
- */
-
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import {
-  type CalendarDate,
-  type DateValue,
-  today,
-  getLocalTimeZone,
-  isSameDay,
-  isSameMonth,
-  startOfMonth,
-  endOfMonth,
-  startOfWeek,
-  getWeeksInMonth,
-  getDayOfWeek,
-  DateFormatter,
-  toCalendarDate as intlToCalendarDate,
-} from '@internationalized/date';
-import { access, type MaybeAccessor } from '../utils';
-import type { ValidationState } from './createCalendarState';
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface DateRange {
-  start: CalendarDate;
-  end: CalendarDate;
-}
-
-export interface RangeValue<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;
-}
-
-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;
-}
-
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
-/**
- * Provides state management for a range calendar component.
- */
-export function createRangeCalendarState<T extends DateValue = CalendarDate>(
-  props: RangeCalendarStateProps<T> = {}
-): RangeCalendarState<T> {
-  const timeZone = getLocalTimeZone();
-  const locale = props.locale ?? 'en-US';
-  const visibleMonths = props.visibleMonths ?? 1;
-
-  // Determine the initially focused date
-  const getInitialFocusedDate = (): CalendarDate => {
-    const controlledFocused = access(props.focusedValue);
-    if (controlledFocused) {
-      return toCalendarDate(controlledFocused);
-    }
-    if (props.defaultFocusedValue) {
-      return toCalendarDate(props.defaultFocusedValue);
-    }
-    const controlledValue = access(props.value);
-    if (controlledValue?.start) {
-      return toCalendarDate(controlledValue.start);
-    }
-    if (props.defaultValue?.start) {
-      return toCalendarDate(props.defaultValue.start);
-    }
-    return today(timeZone);
-  };
-
-  // State signals
-  const [internalValue, setInternalValue] = createSignal<RangeValue<T> | null>(
-    props.defaultValue ?? null
-  );
-  const [focusedDate, setFocusedDateInternal] = createSignal<CalendarDate>(
-    getInitialFocusedDate()
-  );
-  const [anchorDate, setAnchorDate] = createSignal<CalendarDate | null>(null);
-  const [isFocused, setFocused] = createSignal(false);
-  const [isDragging, setDragging] = createSignal(false);
-
-  // Controlled vs uncontrolled value
-  const value = createMemo<RangeValue<T> | null>(() => {
-    const controlled = access(props.value);
-    return controlled !== undefined ? controlled : internalValue();
-  });
-
-  // Derived states
-  const isDisabled = createMemo(() => access(props.isDisabled) ?? false);
-  const isReadOnly = createMemo(() => access(props.isReadOnly) ?? false);
-  const validationState = createMemo(() => access(props.validationState));
-
-  // Highlighted range during selection
-  const highlightedRange = createMemo<RangeValue<CalendarDate> | null>(() => {
-    const anchor = anchorDate();
-    if (!anchor) {
-      const v = value();
-      if (v) {
-        return {
-          start: toCalendarDate(v.start),
-          end: toCalendarDate(v.end),
-        };
-      }
-      return null;
-    }
-
-    const focused = focusedDate();
-    if (anchor.compare(focused) <= 0) {
-      return { start: anchor, end: focused };
-    }
-    return { start: focused, end: anchor };
-  });
-
-  // Visible range based on focused date
-  const visibleRange = createMemo(() => {
-    const focused = focusedDate();
-    const start = startOfMonth(focused);
-    let end = endOfMonth(focused);
-
-    for (let i = 1; i < visibleMonths; i++) {
-      end = endOfMonth(end.add({ months: 1 }));
-    }
-
-    return { start, end };
-  });
-
-  // Format week days for headers
-  const weekDays = createMemo(() => {
-    const formatter = new DateFormatter(locale, { weekday: 'short' });
-    const startDay = props.firstDayOfWeek ?? 0;
-    const days: string[] = [];
-    const base = today(timeZone);
-
-    const dayOfWeek = getDayOfWeek(base, locale);
-    const weekStart = base.subtract({ days: (dayOfWeek - startDay + 7) % 7 });
-
-    for (let i = 0; i < 7; i++) {
-      const day = weekStart.add({ days: i });
-      days.push(formatter.format(day.toDate(timeZone)));
-    }
-
-    return days;
-  });
-
-  // Title (formatted month/year)
-  const title = createMemo(() => {
-    const formatter = new DateFormatter(locale, {
-      month: 'long',
-      year: 'numeric',
-    });
-    return formatter.format(focusedDate().toDate(timeZone));
-  });
-
-  // Set value with onChange callback
-  const setValue = (newValue: RangeValue<T> | null) => {
-    if (isDisabled() || isReadOnly()) return;
-
-    const controlled = access(props.value);
-    if (controlled === undefined) {
-      setInternalValue(() => newValue);
-    }
-
-    if (newValue && props.onChange) {
-      props.onChange(newValue);
-    }
-  };
-
-  // Set focused date with constraints
-  const setFocusedDate = (date: CalendarDate) => {
-    const minValue = access(props.minValue);
-    const maxValue = access(props.maxValue);
-
-    let constrained = date;
-
-    if (minValue && date.compare(toCalendarDate(minValue)) < 0) {
-      constrained = toCalendarDate(minValue);
-    }
-    if (maxValue && date.compare(toCalendarDate(maxValue)) > 0) {
-      constrained = toCalendarDate(maxValue);
-    }
-
-    setFocusedDateInternal(constrained);
-    props.onFocusChange?.(constrained);
-  };
-
-  // Check if a date is within the selected range
-  const isSelected = (date: DateValue): boolean => {
-    const range = highlightedRange();
-    if (!range) return false;
-
-    const calDate = toCalendarDate(date);
-    return (
-      calDate.compare(range.start) >= 0 && calDate.compare(range.end) <= 0
-    );
-  };
-
-  // Check if a date is the start of the selection
-  const isSelectionStart = (date: DateValue): boolean => {
-    const range = highlightedRange();
-    if (!range) return false;
-    return isSameDay(toCalendarDate(date), range.start);
-  };
-
-  // Check if a date is the end of the selection
-  const isSelectionEnd = (date: DateValue): boolean => {
-    const range = highlightedRange();
-    if (!range) return false;
-    return isSameDay(toCalendarDate(date), range.end);
-  };
-
-  // Check if a date is focused
-  const isCellFocused = (date: DateValue): boolean => {
-    return isSameDay(toCalendarDate(date), focusedDate());
-  };
-
-  // Check if a date is unavailable
-  const isCellUnavailable = (date: DateValue): boolean => {
-    return props.isDateUnavailable?.(date) ?? false;
-  };
-
-  // Check if a date is disabled
-  const isCellDisabled = (date: DateValue): boolean => {
-    if (isDisabled()) return true;
-    if (props.isDateDisabled?.(date)) return true;
-
-    const minValue = access(props.minValue);
-    const maxValue = access(props.maxValue);
-    const calDate = toCalendarDate(date);
-
-    if (minValue && calDate.compare(toCalendarDate(minValue)) < 0) return true;
-    if (maxValue && calDate.compare(toCalendarDate(maxValue)) > 0) return true;
-
-    return false;
-  };
-
-  // Check if a date is outside the visible range
-  const isOutsideVisibleRange = (date: DateValue): boolean => {
-    const range = visibleRange();
-    const calDate = toCalendarDate(date);
-    return !isSameMonth(calDate, range.start) && !isSameMonth(calDate, range.end);
-  };
-
-  // Check if a date is invalid
-  const isInvalid = (date: DateValue): boolean => {
-    return isCellDisabled(date) || isCellUnavailable(date);
-  };
-
-  // Navigation methods
-  const focusPreviousPage = () => {
-    setFocusedDate(focusedDate().subtract({ months: 1 }));
-  };
-
-  const focusNextPage = () => {
-    setFocusedDate(focusedDate().add({ months: 1 }));
-  };
-
-  const focusPreviousSection = () => {
-    setFocusedDate(focusedDate().subtract({ years: 1 }));
-  };
-
-  const focusNextSection = () => {
-    setFocusedDate(focusedDate().add({ years: 1 }));
-  };
-
-  const focusPreviousDay = () => {
-    setFocusedDate(focusedDate().subtract({ days: 1 }));
-  };
-
-  const focusNextDay = () => {
-    setFocusedDate(focusedDate().add({ days: 1 }));
-  };
-
-  const focusPreviousWeek = () => {
-    setFocusedDate(focusedDate().subtract({ weeks: 1 }));
-  };
-
-  const focusNextWeek = () => {
-    setFocusedDate(focusedDate().add({ weeks: 1 }));
-  };
-
-  const focusPageStart = () => {
-    setFocusedDate(startOfMonth(focusedDate()));
-  };
-
-  const focusPageEnd = () => {
-    setFocusedDate(endOfMonth(focusedDate()));
-  };
-
-  // Selection methods
-  const selectFocusedDate = () => {
-    if (isReadOnly() || isDisabled()) return;
-    selectDate(focusedDate());
-  };
-
-  const selectDate = (date: CalendarDate) => {
-    if (isReadOnly() || isDisabled()) return;
-    if (isCellDisabled(date) || isCellUnavailable(date)) return;
-
-    const anchor = anchorDate();
-
-    if (!anchor) {
-      // First click - set anchor
-      setAnchorDate(date);
-      setDragging(true);
-    } else {
-      // Second click - complete selection
-      let start: CalendarDate;
-      let end: CalendarDate;
-
-      if (date.compare(anchor) < 0) {
-        start = date;
-        end = anchor;
-      } else {
-        start = anchor;
-        end = date;
-      }
-
-      setValue({
-        start: start as unknown as T,
-        end: end as unknown as T,
-      });
-      setAnchorDate(null);
-      setDragging(false);
-    }
-
-    setFocusedDate(date);
-  };
-
-  // Get dates in a specific week
-  const getDatesInWeek = (
-    weekIndex: number,
-    monthStartDate?: CalendarDate
-  ): (CalendarDate | null)[] => {
-    const startDate = monthStartDate ?? visibleRange().start;
-
-    const monthStart = startOfMonth(startDate);
-    const weekStart = startOfWeek(monthStart, locale);
-
-    const week: (CalendarDate | null)[] = [];
-    const firstDayOfWeek = weekStart.add({ weeks: weekIndex });
-
-    for (let i = 0; i < 7; i++) {
-      const date = firstDayOfWeek.add({ days: i });
-      week.push(date);
-    }
-
-    return week;
-  };
-
-  // Get number of weeks in a month
-  const getWeeksInMonthFn = (date?: CalendarDate): number => {
-    const monthDate = date ?? focusedDate();
-    return getWeeksInMonth(monthDate, locale);
-  };
-
-  return {
-    value,
-    setValue,
-    focusedDate,
-    setFocusedDate,
-    anchorDate,
-    setAnchorDate,
-    highlightedRange,
-    isDisabled,
-    isReadOnly,
-    visibleRange,
-    timeZone,
-    validationState,
-    isSelected,
-    isSelectionStart,
-    isSelectionEnd,
-    isCellFocused,
-    isCellUnavailable,
-    isCellDisabled,
-    isOutsideVisibleRange,
-    isInvalid,
-    focusPreviousPage,
-    focusNextPage,
-    focusPreviousSection,
-    focusNextSection,
-    focusPreviousDay,
-    focusNextDay,
-    focusPreviousWeek,
-    focusNextWeek,
-    focusPageStart,
-    focusPageEnd,
-    selectFocusedDate,
-    selectDate,
-    isFocused,
-    setFocused,
-    getDatesInWeek,
-    getWeeksInMonth: getWeeksInMonthFn,
-    weekDays,
-    title,
-    visibleMonths,
-    isDragging,
-    setDragging,
-  };
-}
-
-// ============================================
-// HELPER FUNCTIONS
-// ============================================
-
-/**
- * Converts a DateValue to a CalendarDate.
- */
-function toCalendarDate(date: DateValue): CalendarDate {
-  return intlToCalendarDate(date);
-}

package/src/calendar/createTimeFieldState.d.ts.map

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