@proyecto-viviana/solid-stately 0.0.5 → 0.1.0

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

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

package/src/calendar/createRangeCalendarState.ts

@@ -0,0 +1,535 @@
+/**
+ * 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

@@ -0,0 +1,95 @@
+/**
+ * TimeFieldState for Solid-Stately
+ *
+ * Provides state management for time field components with segment-based editing.
+ * Based on @react-stately/datepicker useTimeFieldState
+ */
+import { type Accessor } from 'solid-js';
+import { type Time, type CalendarDateTime, type ZonedDateTime } from '@internationalized/date';
+import { type MaybeAccessor } from '../utils';
+import type { ValidationState } from './createCalendarState';
+export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
+export type TimeSegmentType = 'hour' | 'minute' | 'second' | 'dayPeriod' | 'literal';
+export interface TimeSegment {
+    /** The type of segment. */
+    type: TimeSegmentType;
+    /** The text content of the segment. */
+    text: string;
+    /** The numeric value of the segment (if applicable). */
+    value?: number;
+    /** The minimum value for the segment. */
+    minValue?: number;
+    /** The maximum value for the segment. */
+    maxValue?: number;
+    /** Whether this segment is editable. */
+    isEditable: boolean;
+    /** Whether this segment is a placeholder. */
+    isPlaceholder: boolean;
+    /** A placeholder string for the segment. */
+    placeholder: string;
+}
+export interface TimeFieldStateProps<T extends TimeValue = Time> {
+    /** The current value (controlled). */
+    value?: MaybeAccessor<T | null>;
+    /** The default value (uncontrolled). */
+    defaultValue?: T | null;
+    /** Handler called when the value changes. */
+    onChange?: (value: T | null) => void;
+    /** The minimum allowed time. */
+    minValue?: MaybeAccessor<TimeValue | undefined>;
+    /** The maximum allowed time. */
+    maxValue?: MaybeAccessor<TimeValue | undefined>;
+    /** Whether the field is disabled. */
+    isDisabled?: MaybeAccessor<boolean>;
+    /** Whether the field is read-only. */
+    isReadOnly?: MaybeAccessor<boolean>;
+    /** Whether the field is required. */
+    isRequired?: MaybeAccessor<boolean>;
+    /** The locale to use for formatting. */
+    locale?: string;
+    /** The granularity (hour, minute, second). */
+    granularity?: 'hour' | 'minute' | 'second';
+    /** Whether to show 12 or 24 hour format. */
+    hourCycle?: 12 | 24;
+    /** Validation state. */
+    validationState?: MaybeAccessor<ValidationState | undefined>;
+    /** The placeholder value. */
+    placeholderValue?: T;
+}
+export interface TimeFieldState<T extends TimeValue = Time> {
+    /** The current value. */
+    value: Accessor<T | null>;
+    /** Sets the value. */
+    setValue: (value: T | null) => void;
+    /** The segments that make up the time. */
+    segments: Accessor<TimeSegment[]>;
+    /** Sets a segment value. */
+    setSegment: (type: TimeSegmentType, value: number) => void;
+    /** Increments a segment. */
+    incrementSegment: (type: TimeSegmentType) => void;
+    /** Decrements a segment. */
+    decrementSegment: (type: TimeSegmentType) => void;
+    /** Clears a segment. */
+    clearSegment: (type: TimeSegmentType) => void;
+    /** Whether the field is disabled. */
+    isDisabled: Accessor<boolean>;
+    /** Whether the field is read-only. */
+    isReadOnly: Accessor<boolean>;
+    /** Whether the field is required. */
+    isRequired: Accessor<boolean>;
+    /** The validation state. */
+    validationState: Accessor<ValidationState | undefined>;
+    /** The granularity. */
+    granularity: 'hour' | 'minute' | 'second';
+    /** Whether the value is invalid. */
+    isInvalid: Accessor<boolean>;
+    /** The locale. */
+    locale: string;
+    /** The hour cycle. */
+    hourCycle: 12 | 24;
+}
+/**
+ * Provides state management for a time field component.
+ */
+export declare function createTimeFieldState<T extends TimeValue = Time>(props?: TimeFieldStateProps<T>): TimeFieldState<T>;
+//# sourceMappingURL=createTimeFieldState.d.ts.map

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

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