@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/src/calendar/createTimeFieldState.ts

@@ -5,29 +5,30 @@
  * Based on @react-stately/datepicker useTimeFieldState
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
+import { createSignal, createMemo, type Accessor } from "solid-js";
 import {
   type Time,
   type CalendarDateTime,
   type ZonedDateTime,
+  type DateValue,
   getLocalTimeZone,
   DateFormatter,
-} from '@internationalized/date';
-import { access, type MaybeAccessor } from '../utils';
-import type { ValidationState } from './createCalendarState';
-
-// ============================================
-// TYPES
-// ============================================
+} from "@internationalized/date";
+import { access, type MaybeAccessor } from "../utils";
+import type { ValidationState } from "./createCalendarState";
+import {
+  createFormValidationState,
+  DEFAULT_VALIDATION_RESULT,
+  VALID_VALIDITY_STATE,
+  type ValidationBehavior,
+  type ValidationFunction,
+  type ValidationResult,
+  type ValidityState,
+} from "../form";
 
 export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
 
-export type TimeSegmentType =
-  | 'hour'
-  | 'minute'
-  | 'second'
-  | 'dayPeriod'
-  | 'literal';
+export type TimeSegmentType = "hour" | "minute" | "second" | "dayPeriod" | "literal";
 
 export interface TimeSegment {
   /** The type of segment. */
@@ -65,21 +66,37 @@ export interface TimeFieldStateProps<T extends TimeValue = Time> {
   isReadOnly?: MaybeAccessor<boolean>;
   /** Whether the field is required. */
   isRequired?: MaybeAccessor<boolean>;
+  /** Whether the value is invalid (controlled). */
+  isInvalid?: boolean;
   /** The locale to use for formatting. */
   locale?: string;
   /** The granularity (hour, minute, second). */
-  granularity?: 'hour' | 'minute' | 'second';
+  granularity?: "hour" | "minute" | "second";
   /** Whether to show 12 or 24 hour format. */
   hourCycle?: 12 | 24;
+  /** Whether to force leading zeroes in the hour segment. */
+  shouldForceLeadingZeros?: boolean;
   /** Validation state. */
   validationState?: MaybeAccessor<ValidationState | undefined>;
+  /** Validation behavior mode. */
+  validationBehavior?: ValidationBehavior;
+  /** Custom validation function. */
+  validate?: ValidationFunction<T>;
+  /** Description text. */
+  description?: string;
+  /** Error message. */
+  errorMessage?: string;
   /** The placeholder value. */
   placeholderValue?: T;
+  /** Whether dates outside the min/max range are unavailable. Added for API consistency. */
+  isDateUnavailable?: (date: DateValue) => boolean;
 }
 
 export interface TimeFieldState<T extends TimeValue = Time> {
   /** The current value. */
   value: Accessor<T | null>;
+  /** The default value. */
+  defaultValue: T | null;
   /** Sets the value. */
   setValue: (value: T | null) => void;
   /** The segments that make up the time. */
@@ -101,34 +118,40 @@ export interface TimeFieldState<T extends TimeValue = Time> {
   /** The validation state. */
   validationState: Accessor<ValidationState | undefined>;
   /** The granularity. */
-  granularity: 'hour' | 'minute' | 'second';
+  granularity: "hour" | "minute" | "second";
   /** Whether the value is invalid. */
   isInvalid: Accessor<boolean>;
+  /** Realtime validation results, including native and custom constraints. */
+  realtimeValidation: Accessor<ValidationResult>;
+  /** Currently displayed validation results. */
+  displayValidation: Accessor<ValidationResult>;
+  /** Updates the current validation result. */
+  updateValidation: (result: ValidationResult) => void;
+  /** Resets displayed validation to valid. */
+  resetValidation: () => void;
+  /** Commits realtime validation to displayed validation. */
+  commitValidation: () => void;
   /** The locale. */
   locale: string;
   /** The hour cycle. */
   hourCycle: 12 | 24;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for a time field component.
  */
 export function createTimeFieldState<T extends TimeValue = Time>(
-  props: TimeFieldStateProps<T> = {}
+  props: TimeFieldStateProps<T> = {},
 ): TimeFieldState<T> {
   const timeZone = getLocalTimeZone();
-  const locale = props.locale ?? 'en-US';
-  const granularity = props.granularity ?? 'minute';
+  const locale = props.locale ?? "en-US";
+  const granularity = props.granularity ?? "minute";
   const hourCycle = props.hourCycle ?? 12;
 
+  const initialValue = props.defaultValue ?? null;
+
   // State signals
-  const [internalValue, setInternalValue] = createSignal<T | null>(
-    props.defaultValue ?? null
-  );
+  const [internalValue, setInternalValue] = createSignal<T | null>(initialValue);
 
   // Track partial values during editing
   const [placeholderParts, setPlaceholderParts] = createSignal<Partial<TimeParts>>({});
@@ -143,21 +166,62 @@ export function createTimeFieldState<T extends TimeValue = Time>(
   const isDisabled = createMemo(() => access(props.isDisabled) ?? false);
   const isReadOnly = createMemo(() => access(props.isReadOnly) ?? false);
   const isRequired = createMemo(() => access(props.isRequired) ?? false);
-  const validationState = createMemo(() => access(props.validationState));
-
-  // Check if value is invalid
-  const isInvalid = createMemo(() => {
+  const explicitValidationState = createMemo(() => access(props.validationState));
+  const validationBehavior = () => props.validationBehavior ?? "native";
+  const builtinValidation = createMemo<ValidationResult>(() => {
     const v = value();
-    if (!v) return false;
+    if (!v) return DEFAULT_VALIDATION_RESULT;
 
     const minValue = access(props.minValue);
     const maxValue = access(props.maxValue);
+    const validationDetails: ValidityState = { ...VALID_VALIDITY_STATE };
+    const validationErrors: string[] = [];
 
-    if (minValue && compareTime(v, minValue) < 0) return true;
-    if (maxValue && compareTime(v, maxValue) > 0) return true;
+    if (minValue && compareTime(v, minValue) < 0) {
+      validationDetails.rangeUnderflow = true;
+      validationErrors.push("Value is below the minimum time.");
+    }
+
+    if (maxValue && compareTime(v, maxValue) > 0) {
+      validationDetails.rangeOverflow = true;
+      validationErrors.push("Value is above the maximum time.");
+    }
+
+    if (validationErrors.length === 0) {
+      return DEFAULT_VALIDATION_RESULT;
+    }
 
-    return validationState() === 'invalid';
+    validationDetails.valid = false;
+    return {
+      isInvalid: true,
+      validationDetails,
+      validationErrors,
+    };
+  });
+  const validation = createFormValidationState<T>({
+    get value() {
+      return value();
+    },
+    get isInvalid() {
+      return props.isInvalid;
+    },
+    get validationState() {
+      return explicitValidationState();
+    },
+    get validationBehavior() {
+      return validationBehavior();
+    },
+    get validate() {
+      return props.validate;
+    },
+    get builtinValidation() {
+      return builtinValidation();
+    },
   });
+  const isInvalid = createMemo(() => validation.displayValidation().isInvalid);
+  const validationState = createMemo<ValidationState | undefined>(
+    () => explicitValidationState() ?? (isInvalid() ? "invalid" : undefined),
+  );
 
   // Generate segments based on granularity
   const segments = createMemo<TimeSegment[]>(() => {
@@ -166,14 +230,15 @@ export function createTimeFieldState<T extends TimeValue = Time>(
     const segs: TimeSegment[] = [];
 
     // Determine format options
+    const shouldForceLeadingZeros = props.shouldForceLeadingZeros === true;
     const formatOptions: Intl.DateTimeFormatOptions = {
-      hour: '2-digit',
-      minute: '2-digit',
-      hourCycle: hourCycle === 12 ? 'h12' : 'h23',
+      hour: shouldForceLeadingZeros ? "2-digit" : "numeric",
+      minute: "2-digit",
+      hourCycle: hourCycle === 12 ? "h12" : "h23",
     };
 
-    if (granularity === 'second') {
-      formatOptions.second = '2-digit';
+    if (granularity === "second") {
+      formatOptions.second = "2-digit";
     }
 
     // Use a base date for formatting
@@ -188,9 +253,9 @@ export function createTimeFieldState<T extends TimeValue = Time>(
     for (const part of formattedParts) {
       const type = mapTimePartType(part.type);
 
-      if (type === 'literal') {
+      if (type === "literal") {
         segs.push({
-          type: 'literal',
+          type: "literal",
           text: part.value,
           isEditable: false,
           isPlaceholder: false,
@@ -236,7 +301,7 @@ export function createTimeFieldState<T extends TimeValue = Time>(
   // Set a specific segment value
   const setSegment = (type: TimeSegmentType, newValue: number) => {
     if (isDisabled() || isReadOnly()) return;
-    if (type === 'literal') return;
+    if (type === "literal") return;
 
     const v = value();
 
@@ -254,20 +319,18 @@ export function createTimeFieldState<T extends TimeValue = Time>(
   // Increment a segment
   const incrementSegment = (type: TimeSegmentType) => {
     if (isDisabled() || isReadOnly()) return;
-    if (type === 'literal') return;
+    if (type === "literal") return;
 
     const v = value();
-    const current = v
-      ? getTimeSegmentValue(v, type)
-      : placeholderParts()[type as keyof TimeParts];
+    const current = v ? getTimeSegmentValue(v, type) : placeholderParts()[type as keyof TimeParts];
     const max = getTimeMaxValue(type, hourCycle);
     const min = getTimeMinValue(type, hourCycle);
 
-    if (type === 'dayPeriod') {
+    if (type === "dayPeriod") {
       // Toggle AM/PM
       const currentHour = v ? getHour(v) : (placeholderParts().hour ?? 0);
       const newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
-      setSegment('hour', newHour);
+      setSegment("hour", newHour);
       return;
     }
 
@@ -278,20 +341,18 @@ export function createTimeFieldState<T extends TimeValue = Time>(
   // Decrement a segment
   const decrementSegment = (type: TimeSegmentType) => {
     if (isDisabled() || isReadOnly()) return;
-    if (type === 'literal') return;
+    if (type === "literal") return;
 
     const v = value();
-    const current = v
-      ? getTimeSegmentValue(v, type)
-      : placeholderParts()[type as keyof TimeParts];
+    const current = v ? getTimeSegmentValue(v, type) : placeholderParts()[type as keyof TimeParts];
     const max = getTimeMaxValue(type, hourCycle);
     const min = getTimeMinValue(type, hourCycle);
 
-    if (type === 'dayPeriod') {
+    if (type === "dayPeriod") {
       // Toggle AM/PM
       const currentHour = v ? getHour(v) : (placeholderParts().hour ?? 0);
       const newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
-      setSegment('hour', newHour);
+      setSegment("hour", newHour);
       return;
     }
 
@@ -317,6 +378,7 @@ export function createTimeFieldState<T extends TimeValue = Time>(
 
   return {
     value,
+    defaultValue: initialValue,
     setValue,
     segments,
     setSegment,
@@ -329,15 +391,16 @@ export function createTimeFieldState<T extends TimeValue = Time>(
     validationState,
     granularity,
     isInvalid,
+    realtimeValidation: validation.realtimeValidation,
+    displayValidation: validation.displayValidation,
+    updateValidation: validation.updateValidation,
+    resetValidation: validation.resetValidation,
+    commitValidation: validation.commitValidation,
     locale,
     hourCycle,
   };
 }
 
-// ============================================
-// HELPER TYPES & FUNCTIONS
-// ============================================
-
 interface TimeParts {
   hour?: number;
   minute?: number;
@@ -346,56 +409,53 @@ interface TimeParts {
 
 function mapTimePartType(type: Intl.DateTimeFormatPartTypes): TimeSegmentType | null {
   switch (type) {
-    case 'hour':
-      return 'hour';
-    case 'minute':
-      return 'minute';
-    case 'second':
-      return 'second';
-    case 'dayPeriod':
-      return 'dayPeriod';
-    case 'literal':
-      return 'literal';
+    case "hour":
+      return "hour";
+    case "minute":
+      return "minute";
+    case "second":
+      return "second";
+    case "dayPeriod":
+      return "dayPeriod";
+    case "literal":
+      return "literal";
     default:
       return null;
   }
 }
 
 function getHour(time: TimeValue): number {
-  if ('hour' in time) {
+  if ("hour" in time) {
     return time.hour;
   }
   return 0;
 }
 
 function getMinute(time: TimeValue): number {
-  if ('minute' in time) {
+  if ("minute" in time) {
     return time.minute;
   }
   return 0;
 }
 
 function getSecond(time: TimeValue): number {
-  if ('second' in time) {
+  if ("second" in time) {
     return time.second;
   }
   return 0;
 }
 
-function getTimeSegmentValue(
-  time: TimeValue | null,
-  type: TimeSegmentType
-): number | undefined {
+function getTimeSegmentValue(time: TimeValue | null, type: TimeSegmentType): number | undefined {
   if (!time) return undefined;
 
   switch (type) {
-    case 'hour':
+    case "hour":
       return getHour(time);
-    case 'minute':
+    case "minute":
       return getMinute(time);
-    case 'second':
+    case "second":
       return getSecond(time);
-    case 'dayPeriod':
+    case "dayPeriod":
       return getHour(time) >= 12 ? 1 : 0;
     default:
       return undefined;
@@ -404,13 +464,13 @@ function getTimeSegmentValue(
 
 function getTimeMinValue(type: TimeSegmentType, hourCycle: number): number {
   switch (type) {
-    case 'hour':
+    case "hour":
       return hourCycle === 12 ? 1 : 0;
-    case 'minute':
+    case "minute":
       return 0;
-    case 'second':
+    case "second":
       return 0;
-    case 'dayPeriod':
+    case "dayPeriod":
       return 0;
     default:
       return 0;
@@ -419,13 +479,14 @@ function getTimeMinValue(type: TimeSegmentType, hourCycle: number): number {
 
 function getTimeMaxValue(type: TimeSegmentType, hourCycle: number): number {
   switch (type) {
-    case 'hour':
+    case "hour":
+      // In 12-hour mode, the spinbutton displays 1–12, so aria-valuemax is 12.
       return hourCycle === 12 ? 12 : 23;
-    case 'minute':
+    case "minute":
       return 59;
-    case 'second':
+    case "second":
       return 59;
-    case 'dayPeriod':
+    case "dayPeriod":
       return 1;
     default:
       return 0;
@@ -434,16 +495,16 @@ function getTimeMaxValue(type: TimeSegmentType, hourCycle: number): number {
 
 function getTimePlaceholderText(type: TimeSegmentType): string {
   switch (type) {
-    case 'hour':
-      return '––';
-    case 'minute':
-      return '––';
-    case 'second':
-      return '––';
-    case 'dayPeriod':
-      return 'AM';
+    case "hour":
+      return "––";
+    case "minute":
+      return "––";
+    case "second":
+      return "––";
+    case "dayPeriod":
+      return "AM";
     default:
-      return '';
+      return "";
   }
 }
 
@@ -451,21 +512,39 @@ function updateTimePart(
   time: TimeValue,
   type: TimeSegmentType,
   value: number,
-  hourCycle: number
+  _hourCycle: number,
 ): TimeValue {
-  if ('set' in time) {
-    switch (type) {
-      case 'hour':
-        return time.set({ hour: value });
-      case 'minute':
-        return time.set({ minute: value });
-      case 'second':
-        return time.set({ second: value });
-      default:
-        return time;
+  if (!time) return time;
+
+  // All TimeValue types in @internationalized/date have a .set() method
+  const settable = time as { set(props: Record<string, number>): TimeValue };
+  if (typeof settable.set !== "function") {
+    return time;
+  }
+
+  switch (type) {
+    case "hour":
+      return settable.set({ hour: value });
+    case "minute":
+      return settable.set({ minute: value });
+    case "second":
+      return settable.set({ second: value });
+    case "dayPeriod": {
+      // dayPeriod 0 = AM, 1 = PM. Adjust hour by +/- 12 based on desired period.
+      const currentHour = getHour(time);
+      const isPM = value === 1;
+      const isCurrentlyPM = currentHour >= 12;
+      if (isPM && !isCurrentlyPM) {
+        return settable.set({ hour: currentHour + 12 });
+      }
+      if (!isPM && isCurrentlyPM) {
+        return settable.set({ hour: currentHour - 12 });
+      }
+      return time;
     }
+    default:
+      return time;
   }
-  return time;
 }
 
 function compareTime(a: TimeValue, b: TimeValue): number {

package/src/calendar/index.d.ts

@@ -1,7 +1,80 @@
-export { createCalendarState, type CalendarStateProps, type CalendarState, type ValidationState, } from './createCalendarState';
-export { createRangeCalendarState, type RangeCalendarStateProps, type RangeCalendarState, type DateRange, type RangeValue, } from './createRangeCalendarState';
-export { createDateFieldState, type DateFieldStateProps, type DateFieldState, type DateSegment, type DateSegmentType, } from './createDateFieldState';
-export { createTimeFieldState, type TimeFieldStateProps, type TimeFieldState, type TimeSegment, type TimeSegmentType, type TimeValue, } from './createTimeFieldState';
-export type { CalendarDate, CalendarDateTime, ZonedDateTime, DateValue, Time, } from '@internationalized/date';
-export { today, now, getLocalTimeZone, parseDate, parseDateTime, parseTime, parseAbsolute, parseAbsoluteToLocal, parseZonedDateTime, toCalendarDate, toCalendarDateTime, toZoned, toTime, CalendarDate as CalendarDateClass, CalendarDateTime as CalendarDateTimeClass, ZonedDateTime as ZonedDateTimeClass, Time as TimeClass, DateFormatter, isSameDay, isSameMonth, isSameYear, isToday, isWeekend, startOfMonth, endOfMonth, startOfWeek, endOfWeek, startOfYear, endOfYear, getWeeksInMonth, getDayOfWeek, minDate, maxDate, } from '@internationalized/date';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createCalendarState,
+  type CalendarStateProps,
+  type CalendarState,
+  type ValidationState,
+  type CalendarPageBehavior,
+  type CalendarSelectionAlignment,
+  type CalendarDayOfWeek,
+} from "./createCalendarState";
+export {
+  createRangeCalendarState,
+  type RangeCalendarStateProps,
+  type RangeCalendarState,
+  type DateRange,
+  type RangeValue,
+} from "./createRangeCalendarState";
+export {
+  createDateFieldState,
+  type DateFieldStateProps,
+  type DateFieldState,
+  type DateSegment,
+  type DateSegmentType,
+} from "./createDateFieldState";
+export {
+  createTimeFieldState,
+  type TimeFieldStateProps,
+  type TimeFieldState,
+  type TimeSegment,
+  type TimeSegmentType,
+  type TimeValue,
+} from "./createTimeFieldState";
+export type {
+  CalendarDate,
+  CalendarDateTime,
+  ZonedDateTime,
+  DateValue,
+  Time,
+  Calendar,
+  CalendarIdentifier,
+  AnyCalendarDate,
+} from "@internationalized/date";
+export {
+  createCalendar,
+  GregorianCalendar,
+  today,
+  now,
+  getLocalTimeZone,
+  parseDate,
+  parseDateTime,
+  parseTime,
+  parseAbsolute,
+  parseAbsoluteToLocal,
+  parseZonedDateTime,
+  toCalendarDate,
+  toCalendarDateTime,
+  toZoned,
+  toTime,
+  CalendarDate as CalendarDateClass,
+  CalendarDateTime as CalendarDateTimeClass,
+  ZonedDateTime as ZonedDateTimeClass,
+  Time as TimeClass,
+  DateFormatter,
+  isSameDay,
+  isSameMonth,
+  isSameYear,
+  isToday,
+  isWeekend,
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+  startOfYear,
+  endOfYear,
+  getWeeksInMonth,
+  getDayOfWeek,
+  toCalendar,
+  minDate,
+  maxDate,
+} from "@internationalized/date";
+//# sourceMappingURL=index.d.ts.map

package/src/calendar/index.ts

@@ -1,30 +1,29 @@
-// Calendar State
 export {
   createCalendarState,
   type CalendarStateProps,
   type CalendarState,
   type ValidationState,
-} from './createCalendarState';
+  type CalendarPageBehavior,
+  type CalendarSelectionAlignment,
+  type CalendarDayOfWeek,
+} from "./createCalendarState";
 
-// Range Calendar State
 export {
   createRangeCalendarState,
   type RangeCalendarStateProps,
   type RangeCalendarState,
   type DateRange,
   type RangeValue,
-} from './createRangeCalendarState';
+} from "./createRangeCalendarState";
 
-// Date Field State
 export {
   createDateFieldState,
   type DateFieldStateProps,
   type DateFieldState,
   type DateSegment,
   type DateSegmentType,
-} from './createDateFieldState';
+} from "./createDateFieldState";
 
-// Time Field State
 export {
   createTimeFieldState,
   type TimeFieldStateProps,
@@ -32,19 +31,28 @@ export {
   type TimeSegment,
   type TimeSegmentType,
   type TimeValue,
-} from './createTimeFieldState';
+} from "./createTimeFieldState";
+
+export {
+  createDatePickerState,
+  type DatePickerStateOptions,
+  type DatePickerState,
+} from "./createDatePickerState";
 
-// Re-export date types from @internationalized/date
 export type {
   CalendarDate,
   CalendarDateTime,
   ZonedDateTime,
   DateValue,
   Time,
-} from '@internationalized/date';
+  Calendar,
+  CalendarIdentifier,
+  AnyCalendarDate,
+} from "@internationalized/date";
 
-// Re-export commonly used date utilities
 export {
+  createCalendar,
+  GregorianCalendar,
   today,
   now,
   getLocalTimeZone,
@@ -76,6 +84,7 @@ export {
   endOfYear,
   getWeeksInMonth,
   getDayOfWeek,
+  toCalendar,
   minDate,
   maxDate,
-} from '@internationalized/date';
+} from "@internationalized/date";