@proyecto-viviana/solidaria-components 0.2.9 → 0.3.1

package/src/RangeCalendar.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Accessor,
   createContext,
   createMemo,
   createSignal,
@@ -15,14 +16,15 @@ import {
   For,
   Index,
   Show,
-} from 'solid-js';
+} from "solid-js";
 import {
   createRangeCalendar,
   createCalendarGrid,
   createRangeCalendarCell,
+  createHover,
   type AriaRangeCalendarProps,
   type AriaCalendarGridProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createRangeCalendarState,
   type RangeCalendarState,
@@ -32,7 +34,7 @@ import {
   type RangeValue,
   endOfMonth,
   isSameMonth,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -41,24 +43,38 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
-} from './utils';
+} from "./utils";
+import { VisuallyHidden } from "./VisuallyHidden";
 
-// ============================================
-// TYPES
-// ============================================
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) {
+    return;
+  }
+
+  if (typeof ref === "function") {
+    ref(el);
+  } else {
+    ref.current = el;
+  }
+}
 
 export interface RangeCalendarRenderProps {
   /** Whether the calendar is disabled. */
   isDisabled: boolean;
   /** Whether the calendar is read-only. */
   isReadOnly: boolean;
+  /** Whether the current selection is invalid. */
+  isInvalid: boolean;
   /** Whether the user is currently selecting a range. */
   isDragging: boolean;
 }
 
 export interface RangeCalendarProps<T extends DateValue = DateValue>
-  extends Omit<AriaRangeCalendarProps, 'id' | 'isDisabled' | 'isReadOnly'>,
-    Omit<RangeCalendarStateProps<T>, 'locale'>,
+  extends
+    Omit<AriaRangeCalendarProps, "id" | "isDisabled" | "isReadOnly">,
+    Omit<RangeCalendarStateProps<T>, "locale">,
     SlotProps {
   /** The children of the component. */
   children?: JSX.Element;
@@ -68,6 +84,8 @@ export interface RangeCalendarProps<T extends DateValue = DateValue>
   style?: StyleOrFunction<RangeCalendarRenderProps>;
   /** The locale to use for formatting. */
   locale?: string;
+  /** Ref for the range calendar root element. */
+  ref?: RefLike<HTMLDivElement>;
 }
 
 export interface RangeCalendarGridRenderProps {
@@ -75,13 +93,18 @@ export interface RangeCalendarGridRenderProps {
   isDisabled: boolean;
 }
 
-export interface RangeCalendarGridProps extends Omit<AriaCalendarGridProps, 'startDate' | 'endDate'>, SlotProps {
+export interface RangeCalendarGridProps
+  extends Omit<AriaCalendarGridProps, "startDate" | "endDate">, SlotProps {
   /** The children of the component (render function receiving dates). */
   children?: (date: CalendarDate) => JSX.Element;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<RangeCalendarGridRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<RangeCalendarGridRenderProps>;
+  /** Class name for weekday header cells. */
+  headerCellClass?: string;
+  /** Inline style for weekday header cells. */
+  headerCellStyle?: JSX.CSSProperties;
   /** Number of months to offset from the start. */
   offset?: { months?: number };
 }
@@ -99,12 +122,24 @@ export interface RangeCalendarCellRenderProps {
   isDisabled: boolean;
   /** Whether the cell is unavailable. */
   isUnavailable: boolean;
+  /** Whether the cell is part of an invalid selection. */
+  isInvalid: boolean;
   /** Whether the cell is outside the visible month. */
   isOutsideMonth: boolean;
   /** Whether the cell represents today. */
   isToday: boolean;
   /** Whether the cell is pressed. */
   isPressed: boolean;
+  /** Whether the cell is hovered. */
+  isHovered: boolean;
+  /** Whether the cell is the first day slot in its row. */
+  isFirstChild: boolean;
+  /** Whether the cell is the last day slot in its row. */
+  isLastChild: boolean;
+  /** Whether the cell is in the first rendered week row. */
+  isFirstWeek: boolean;
+  /** Whether the cell is in the last rendered week row. */
+  isLastWeek: boolean;
   /** The formatted date string. */
   formattedDate: string;
 }
@@ -118,28 +153,29 @@ export interface RangeCalendarCellProps extends SlotProps {
   class?: ClassNameOrFunction<RangeCalendarCellRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<RangeCalendarCellRenderProps>;
+  /** Class name for the table cell wrapper. */
+  cellClass?: ClassNameOrFunction<RangeCalendarCellRenderProps>;
+  /** Inline style for the table cell wrapper. */
+  cellStyle?: StyleOrFunction<RangeCalendarCellRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export const RangeCalendarContext = createContext<RangeCalendarState<DateValue> | null>(null);
 export const RangeCalendarStateContext = createContext<RangeCalendarState<DateValue> | null>(null);
-const RangeCalendarGridMonthContext = createContext<CalendarDate | null>(null);
+const RangeCalendarGridMonthContext = createContext<Accessor<CalendarDate> | null>(null);
+const RangeCalendarGridCellPositionContext = createContext<Accessor<{
+  weekIndex: number;
+  dayIndex: number;
+  lastWeekIndex: number;
+}> | null>(null);
 
 export function useRangeCalendarContext(): RangeCalendarState<DateValue> {
   const context = useContext(RangeCalendarContext);
   if (!context) {
-    throw new Error('RangeCalendar components must be used within a RangeCalendar');
+    throw new Error("RangeCalendar components must be used within a RangeCalendar");
   }
   return context;
 }
 
-// ============================================
-// RANGE CALENDAR COMPONENT
-// ============================================
-
 /**
  * A range calendar displays a grid of days and allows users to select a contiguous range of dates.
  *
@@ -158,7 +194,7 @@ export function useRangeCalendarContext(): RangeCalendarState<DateValue> {
  * ```
  */
 export function RangeCalendar<T extends DateValue = CalendarDate>(
-  props: RangeCalendarProps<T>
+  props: RangeCalendarProps<T>,
 ): JSX.Element {
   // Use hydration-safe pattern for client-only rendering
   const isHydrated = useIsHydrated();
@@ -166,7 +202,12 @@ export function RangeCalendar<T extends DateValue = CalendarDate>(
   return (
     <Show
       when={isHydrated()}
-      fallback={<div class="solidaria-RangeCalendar solidaria-RangeCalendar--placeholder" aria-hidden="true" />}
+      fallback={
+        <div
+          class="solidaria-RangeCalendar solidaria-RangeCalendar--placeholder"
+          aria-hidden="true"
+        />
+      }
     >
       <RangeCalendarInner {...props} />
     </Show>
@@ -177,53 +218,53 @@ export function RangeCalendar<T extends DateValue = CalendarDate>(
  * Internal RangeCalendar component that renders after client mount.
  */
 function RangeCalendarInner<T extends DateValue = CalendarDate>(
-  props: RangeCalendarProps<T>
+  props: RangeCalendarProps<T>,
 ): JSX.Element {
   const [local, stateProps, rest] = splitProps(
     props,
-    ['children', 'class', 'style', 'slot'],
+    ["children", "class", "style", "slot", "ref"],
     [
-      'value',
-      'defaultValue',
-      'onChange',
-      'minValue',
-      'maxValue',
-      'isDisabled',
-      'isReadOnly',
-      'focusedValue',
-      'defaultFocusedValue',
-      'onFocusChange',
-      'locale',
-      'isDateUnavailable',
-      'visibleMonths',
-      'isDateDisabled',
-      'validationState',
-      'allowsNonContiguousRanges',
-      'firstDayOfWeek',
-    ]
+      "value",
+      "defaultValue",
+      "onChange",
+      "minValue",
+      "maxValue",
+      "isDisabled",
+      "isReadOnly",
+      "focusedValue",
+      "defaultFocusedValue",
+      "onFocusChange",
+      "locale",
+      "createCalendar",
+      "isDateUnavailable",
+      "visibleMonths",
+      "pageBehavior",
+      "selectionAlignment",
+      "isDateDisabled",
+      "validationState",
+      "allowsNonContiguousRanges",
+      "firstDayOfWeek",
+    ],
   );
 
-  // Create range calendar state
   const state = createRangeCalendarState(stateProps);
 
-  // Create range calendar ARIA props
   const calendarAria = createRangeCalendar(rest, state as unknown as RangeCalendarState<DateValue>);
 
-  // Render props values
   const renderValues = createMemo<RangeCalendarRenderProps>(() => ({
     isDisabled: state.isDisabled(),
     isReadOnly: state.isReadOnly(),
+    isInvalid: state.isValueInvalid(),
     isDragging: state.isDragging(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-RangeCalendar',
+      defaultClassName: "solidaria-RangeCalendar",
     },
-    renderValues
+    renderValues,
   );
 
   return (
@@ -231,12 +272,17 @@ function RangeCalendarInner<T extends DateValue = CalendarDate>(
       <RangeCalendarContext.Provider value={state as unknown as RangeCalendarState<DateValue>}>
         <div
           {...calendarAria.calendarProps}
+          ref={(el) => assignRef(local.ref, el)}
           class={renderProps.class()}
           style={renderProps.style()}
           data-disabled={dataAttr(state.isDisabled())}
           data-readonly={dataAttr(state.isReadOnly())}
+          data-invalid={dataAttr(state.isValueInvalid())}
           data-dragging={dataAttr(state.isDragging())}
         >
+          <VisuallyHidden>
+            <h2>{String(calendarAria.calendarProps["aria-label"] ?? "")}</h2>
+          </VisuallyHidden>
           {props.children}
         </div>
       </RangeCalendarContext.Provider>
@@ -244,10 +290,6 @@ function RangeCalendarInner<T extends DateValue = CalendarDate>(
   );
 }
 
-// ============================================
-// RANGE CALENDAR HEADING COMPONENT
-// ============================================
-
 export interface RangeCalendarHeadingProps extends SlotProps {
   /** The CSS className for the element. */
   class?: string;
@@ -263,7 +305,7 @@ export function RangeCalendarHeading(props: RangeCalendarHeadingProps): JSX.Elem
 
   return (
     <h2
-      class={props.class ?? 'solidaria-RangeCalendarHeading'}
+      class={props.class ?? "solidaria-RangeCalendarHeading"}
       style={props.style}
       aria-live="polite"
     >
@@ -272,13 +314,9 @@ export function RangeCalendarHeading(props: RangeCalendarHeadingProps): JSX.Elem
   );
 }
 
-// ============================================
-// RANGE CALENDAR BUTTON COMPONENT
-// ============================================
-
 export interface RangeCalendarButtonProps extends SlotProps {
   /** The slot for this button (previous or next). */
-  slot?: 'previous' | 'next';
+  slot?: "previous" | "next";
   /** The children of the component. */
   children?: JSX.Element;
   /** The CSS className for the element. */
@@ -297,28 +335,27 @@ export function RangeCalendarButton(props: RangeCalendarButtonProps): JSX.Elemen
   const calendarAria = createRangeCalendar({}, state);
 
   const buttonProps = createMemo(() => {
-    if (props.slot === 'previous') {
+    if (props.slot === "previous") {
       return calendarAria.prevButtonProps;
     }
     return calendarAria.nextButtonProps;
   });
+  const isDisabled = createMemo(
+    () => props.isDisabled || Boolean(buttonProps().disabled) || state.isDisabled(),
+  );
 
   return (
     <button
       {...buttonProps()}
-      class={props.class ?? 'solidaria-RangeCalendarButton'}
+      class={props.class ?? "solidaria-RangeCalendarButton"}
       style={props.style}
-      disabled={props.isDisabled || state.isDisabled()}
+      disabled={isDisabled()}
     >
       {props.children}
     </button>
   );
 }
 
-// ============================================
-// RANGE CALENDAR GRID COMPONENT
-// ============================================
-
 /**
  * Displays a grid of range calendar cells.
  */
@@ -331,7 +368,6 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
     return offsetMonths ? baseStart.add({ months: offsetMonths }) : baseStart;
   });
 
-  // Create grid ARIA props
   const gridAria = createCalendarGrid(
     {
       startDate: startDate(),
@@ -339,22 +375,20 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
       weekdayStyle: props.weekdayStyle,
     },
     state as unknown as Parameters<typeof createCalendarGrid>[1],
-    gridRef
+    gridRef,
   );
 
-  // Render props values
   const renderValues = createMemo<RangeCalendarGridRenderProps>(() => ({
     isDisabled: state.isDisabled(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-RangeCalendarGrid',
+      defaultClassName: "solidaria-RangeCalendarGrid",
     },
-    renderValues
+    renderValues,
   );
 
   // Memoize all dates for the grid to avoid reactive loops in render paths.
@@ -371,7 +405,7 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
   });
 
   return (
-    <RangeCalendarGridMonthContext.Provider value={startDate()}>
+    <RangeCalendarGridMonthContext.Provider value={startDate}>
       <table
         ref={setGridRef}
         {...gridAria.gridProps}
@@ -382,7 +416,11 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
           <tr>
             <For each={gridAria.weekDays}>
               {(day) => (
-                <th scope="col" class="solidaria-RangeCalendarHeaderCell">
+                <th
+                  scope="col"
+                  class={props.headerCellClass ?? "solidaria-RangeCalendarHeaderCell"}
+                  style={props.headerCellStyle}
+                >
                   {day}
                 </th>
               )}
@@ -391,12 +429,20 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
         </thead>
         <tbody>
           <Index each={allDates()}>
-            {(weekDates) => (
+            {(weekDates, weekIndex) => (
               <tr>
                 <Index each={weekDates()}>
-                  {(date) => (
+                  {(date, dayIndex) => (
                     <Show when={date()} fallback={<td />}>
-                      {props.children?.(date()!)}
+                      <RangeCalendarGridCellPositionContext.Provider
+                        value={() => ({
+                          weekIndex,
+                          dayIndex,
+                          lastWeekIndex: allDates().length - 1,
+                        })}
+                      >
+                        {props.children?.(date()!)}
+                      </RangeCalendarGridCellPositionContext.Provider>
                     </Show>
                   )}
                 </Index>
@@ -409,32 +455,38 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
   );
 }
 
-// ============================================
-// RANGE CALENDAR CELL COMPONENT
-// ============================================
-
 /**
  * A cell in the range calendar grid representing a single day.
  */
 export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
   const state = useRangeCalendarContext();
   const currentMonthStart = useContext(RangeCalendarGridMonthContext);
+  const cellPosition = useContext(RangeCalendarGridCellPositionContext);
   const [cellRef, setCellRef] = createSignal<HTMLDivElement | null>(null);
   const isOutsideMonth = createMemo(
-    () => currentMonthStart != null && !isSameMonth(currentMonthStart, props.date)
+    () => currentMonthStart != null && !isSameMonth(currentMonthStart(), props.date),
+  );
+  const position = createMemo(
+    () =>
+      cellPosition?.() ?? {
+        weekIndex: 0,
+        dayIndex: 0,
+        lastWeekIndex: 0,
+      },
   );
 
-  // Create cell ARIA props
   const cellAria = createRangeCalendarCell(
     () => ({
       date: props.date,
       isOutsideMonth: isOutsideMonth(),
     }),
     state,
-    cellRef
+    cellRef,
   );
+  const { hoverProps, isHovered } = createHover(() => ({
+    isDisabled: cellAria.isDisabled || cellAria.isUnavailable,
+  }));
 
-  // Render props values
   const renderValues = createMemo<RangeCalendarCellRenderProps>(() => ({
     isSelected: cellAria.isSelected,
     isSelectionStart: cellAria.isSelectionStart,
@@ -442,36 +494,50 @@ export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
     isFocused: cellAria.isFocused,
     isDisabled: cellAria.isDisabled,
     isUnavailable: cellAria.isUnavailable,
+    isInvalid: cellAria.isInvalid,
     isOutsideMonth: cellAria.isOutsideMonth,
     isToday: cellAria.isToday,
     isPressed: cellAria.isPressed,
+    isHovered: isHovered(),
+    isFirstChild: position().dayIndex === 0,
+    isLastChild: position().dayIndex === 6,
+    isFirstWeek: position().weekIndex === 0,
+    isLastWeek: position().weekIndex === position().lastWeekIndex,
     formattedDate: cellAria.formattedDate,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-RangeCalendarCell',
+      defaultClassName: "solidaria-RangeCalendarCell",
+    },
+    renderValues,
+  );
+  const cellRenderProps = useRenderProps(
+    {
+      class: props.cellClass,
+      style: props.cellStyle,
+      defaultClassName: "solidaria-RangeCalendarCellWrapper",
     },
-    renderValues
+    renderValues,
   );
 
   // Determine children content - avoid Show for SSR hydration compatibility
   const getChildren = () => {
-    if (typeof props.children === 'function') {
+    if (typeof props.children === "function") {
       return renderProps.renderChildren();
     }
     return cellAria.formattedDate;
   };
 
   return (
-    <td {...cellAria.cellProps}>
+    <td {...cellAria.cellProps} class={cellRenderProps.class()} style={cellRenderProps.style()}>
       <div
         ref={setCellRef}
         {...cellAria.buttonProps}
+        {...hoverProps}
         class={renderProps.class()}
         style={renderProps.style()}
         data-selected={dataAttr(cellAria.isSelected)}
@@ -480,9 +546,11 @@ export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
         data-focused={dataAttr(cellAria.isFocused)}
         data-disabled={dataAttr(cellAria.isDisabled)}
         data-unavailable={dataAttr(cellAria.isUnavailable)}
+        data-invalid={dataAttr(cellAria.isInvalid)}
         data-outside-month={dataAttr(cellAria.isOutsideMonth)}
         data-today={dataAttr(cellAria.isToday)}
         data-pressed={dataAttr(cellAria.isPressed)}
+        data-hovered={dataAttr(isHovered())}
       >
         {getChildren()}
       </div>
@@ -490,5 +558,4 @@ export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
   );
 }
 
-// Re-export types
 export type { RangeCalendarState, RangeValue };