@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/Button.tsx

@@ -16,7 +16,9 @@ import {
   createButton,
   createFocusRing,
   createHover,
+  mergeProps,
   type AriaButtonProps,
+  type PressEvent,
 } from '@proyecto-viviana/solidaria';
 import {
   type RenderChildren,
@@ -43,6 +45,8 @@ export interface ButtonRenderProps {
   isFocusVisible: boolean;
   /** Whether the button is disabled. */
   isDisabled: boolean;
+  /** Whether the button is currently in a pending state. */
+  isPending: boolean;
 }
 
 export interface ButtonProps
@@ -54,6 +58,8 @@ export interface ButtonProps
   class?: ClassNameOrFunction<ButtonRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<ButtonRenderProps>;
+  /** Whether the button is in a pending state. */
+  isPending?: boolean;
 }
 
 // ============================================
@@ -84,12 +90,16 @@ export const ButtonContext = createContext<ButtonProps | null>(null);
  * ```
  */
 export function Button(props: ButtonProps): JSX.Element {
+  const contextProps = useContext(ButtonContext);
+  const mergedProps = (contextProps ? mergeProps(contextProps, props) : props) as ButtonProps;
+
   // Split props
-  const [local, ariaProps] = splitProps(props, [
+  const [local, ariaProps] = splitProps(mergedProps, [
     'children',
     'class',
     'style',
     'slot',
+    'isPending',
   ]);
 
   // Check if inside a DialogTrigger or PopoverTrigger - if so, toggle on press
@@ -109,28 +119,30 @@ export function Button(props: ButtonProps): JSX.Element {
     return !!disabled;
   };
 
-  // Determine if this button should act as a dialog/popover trigger
-  // We only toggle if:
-  // 1. We have DialogTriggerContext or PopoverTriggerContext (we're inside a trigger)
-  // 2. AND there is NO onPress handler (the trigger button typically has no onPress,
-  //    while close buttons inside dialogs have onPress={close})
-  // This heuristic works because:
-  // - Trigger buttons: don't have onPress, should toggle
-  // - Close buttons: have onPress={close}, should NOT toggle (just call onPress)
-  const isDialogTrigger = () => dialogTriggerContext && !ariaProps.onPress;
-  const isPopoverTrigger = () => popoverTriggerContext && !ariaProps.onPress;
+  const resolvePending = (): boolean => !!local.isPending;
+
+  let buttonEl: HTMLButtonElement | undefined;
+
+  // Explicit trigger ownership: a button toggles overlays only when it is the
+  // registered trigger element for the surrounding trigger context.
+  const isDialogTrigger = () =>
+    !!dialogTriggerContext && !!buttonEl && dialogTriggerContext.triggerRef() === buttonEl;
+  const isPopoverTrigger = () =>
+    !!popoverTriggerContext && !!buttonEl && popoverTriggerContext.triggerRef() === buttonEl;
 
   // Wrap onPress to also toggle dialog/popover if this is a trigger button
-  const handlePress = (e: any) => {
+  const handlePress = (e: PressEvent) => {
+    if (resolvePending()) {
+      return;
+    }
     // Call original onPress if provided
     if (typeof ariaProps.onPress === 'function') {
       ariaProps.onPress(e);
     }
-    // Toggle dialog only if this is a trigger button (has no onPress handler)
+    // Toggle only when this exact button is the registered trigger element.
     if (isDialogTrigger()) {
       dialogTriggerContext!.state.toggle();
     }
-    // Toggle popover only if this is a trigger button (has no onPress handler)
     if (isPopoverTrigger()) {
       popoverTriggerContext!.state.toggle();
     }
@@ -140,8 +152,23 @@ export function Button(props: ButtonProps): JSX.Element {
   const buttonAria = createButton({
     ...ariaProps,
     onPress: handlePress,
+    get onPressStart() {
+      return resolvePending() ? undefined : ariaProps.onPressStart;
+    },
+    get onPressEnd() {
+      return resolvePending() ? undefined : ariaProps.onPressEnd;
+    },
+    get onPressUp() {
+      return resolvePending() ? undefined : ariaProps.onPressUp;
+    },
+    get onPressChange() {
+      return resolvePending() ? undefined : ariaProps.onPressChange;
+    },
+    get onClick() {
+      return resolvePending() ? undefined : ariaProps.onClick;
+    },
     get isDisabled() {
-      return resolveDisabled();
+      return resolveDisabled() || resolvePending();
     },
   });
 
@@ -151,23 +178,25 @@ export function Button(props: ButtonProps): JSX.Element {
   // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
-      return resolveDisabled();
+      return resolveDisabled() || resolvePending();
     },
   });
 
   // Render props values
   const renderValues = createMemo<ButtonRenderProps>(() => ({
     isHovered: isHovered(),
-    isPressed: buttonAria.isPressed(),
+    isPressed: buttonAria.isPressed() && !resolvePending(),
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
     isDisabled: resolveDisabled(),
+    isPending: resolvePending(),
   }));
 
   // Resolve render props
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      // Use merged children so ButtonContext can supply slot/default content.
+      children: local.children,
       class: local.class,
       style: local.style,
       defaultClassName: 'solidaria-Button',
@@ -206,13 +235,18 @@ export function Button(props: ButtonProps): JSX.Element {
 
   // Ref callback that combines all refs
   const handleRef = (el: HTMLButtonElement) => {
+    buttonEl = el;
+
     // Call the focusable ref for autoFocus support
     buttonPropsRef?.(el);
     focusPropsRef?.(el);
     hoverPropsRef?.(el);
 
-    // If this button is a popover trigger, register it
-    if (isPopoverTrigger() && popoverTriggerContext?.setTriggerRef) {
+    // Register trigger ownership for surrounding trigger contexts.
+    if (dialogTriggerContext?.setTriggerRef) {
+      dialogTriggerContext.setTriggerRef(el);
+    }
+    if (popoverTriggerContext?.setTriggerRef) {
       popoverTriggerContext.setTriggerRef(el);
     }
   };
@@ -224,13 +258,23 @@ export function Button(props: ButtonProps): JSX.Element {
       {...cleanButtonProps()}
       {...cleanFocusProps()}
       {...cleanHoverProps()}
+      type={
+        (buttonAria.buttonProps as Record<string, unknown>).type === 'submit' && resolvePending()
+          ? 'button'
+          : (buttonAria.buttonProps as Record<string, unknown>).type as
+              | 'button'
+              | 'submit'
+              | 'reset'
+              | undefined
+      }
       class={renderProps.class()}
       style={renderProps.style()}
-      data-pressed={buttonAria.isPressed() || undefined}
+      data-pressed={(buttonAria.isPressed() && !resolvePending()) || undefined}
       data-hovered={isHovered() || undefined}
       data-focused={isFocused() || undefined}
       data-focus-visible={isFocusVisible() || undefined}
       data-disabled={resolveDisabled() || undefined}
+      data-pending={resolvePending() || undefined}
     >
       {renderProps.renderChildren()}
     </button>

package/src/Calendar.tsx

@@ -30,6 +30,8 @@ import {
   type CalendarStateProps,
   type CalendarDate,
   type DateValue,
+  endOfMonth,
+  isSameMonth,
 } from '@proyecto-viviana/solid-stately';
 import {
   type RenderChildren,
@@ -121,11 +123,24 @@ export interface CalendarHeaderCellProps extends SlotProps {
   style?: JSX.CSSProperties;
 }
 
+export interface CalendarGridHeaderProps extends SlotProps {
+  children?: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+export interface CalendarGridBodyProps extends SlotProps {
+  children?: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
 // ============================================
 // CONTEXT
 // ============================================
 
 export const CalendarContext = createContext<CalendarState<DateValue> | null>(null);
+const CalendarGridMonthContext = createContext<CalendarDate | null>(null);
 
 export function useCalendarContext(): CalendarState<DateValue> {
   const context = useContext(CalendarContext);
@@ -159,6 +174,8 @@ export function useCalendarContext(): CalendarState<DateValue> {
 export function Calendar<T extends DateValue = CalendarDate>(
   props: CalendarProps<T>
 ): JSX.Element {
+  const inheritedState = useContext(CalendarContext);
+
   // Use hydration-safe pattern for client-only rendering
   const isHydrated = useIsHydrated();
 
@@ -167,11 +184,77 @@ export function Calendar<T extends DateValue = CalendarDate>(
       when={isHydrated()}
       fallback={<div class="solidaria-Calendar solidaria-Calendar--placeholder" aria-hidden="true" />}
     >
-      <CalendarInner {...props} />
+      <Show
+        when={inheritedState}
+        fallback={<CalendarInner {...props} />}
+      >
+        <CalendarWithState
+          state={inheritedState as CalendarState<DateValue>}
+          {...props}
+        />
+      </Show>
     </Show>
   );
 }
 
+function CalendarWithState<T extends DateValue = CalendarDate>(
+  props: CalendarProps<T> & { state: CalendarState<DateValue> }
+): JSX.Element {
+  const [local, _stateProps, rest] = splitProps(
+    props,
+    ['children', 'class', 'style', 'slot', 'state'],
+    [
+      'value',
+      'defaultValue',
+      'onChange',
+      'minValue',
+      'maxValue',
+      'isDisabled',
+      'isReadOnly',
+      'autoFocus',
+      'focusedValue',
+      'defaultFocusedValue',
+      'onFocusChange',
+      'locale',
+      'isDateUnavailable',
+      'visibleMonths',
+      'isDateDisabled',
+      'validationState',
+      'errorMessage',
+      'firstDayOfWeek',
+    ]
+  );
+
+  const state = () => props.state;
+  const calendarAria = createCalendar(rest, state());
+
+  const renderValues = createMemo<CalendarRenderProps>(() => ({
+    isDisabled: state().isDisabled(),
+    isReadOnly: state().isReadOnly(),
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-Calendar',
+    },
+    renderValues
+  );
+
+  return (
+    <div
+      {...calendarAria.calendarProps}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      data-disabled={dataAttr(state().isDisabled())}
+      data-readonly={dataAttr(state().isReadOnly())}
+    >
+      {props.children}
+    </div>
+  );
+}
+
 /**
  * Internal Calendar component that renders after client mount.
  */
@@ -321,10 +404,17 @@ export function CalendarButton(props: CalendarButtonProps): JSX.Element {
 export function CalendarGrid(props: CalendarGridProps): JSX.Element {
   const state = useCalendarContext();
   const [gridRef, setGridRef] = createSignal<HTMLTableElement | null>(null);
+  const startDate = createMemo(() => {
+    const offsetMonths = props.offset?.months ?? 0;
+    const baseStart = state.visibleRange().start;
+    return offsetMonths ? baseStart.add({ months: offsetMonths }) : baseStart;
+  });
 
   // Create grid ARIA props
   const gridAria = createCalendarGrid(
     {
+      startDate: startDate(),
+      endDate: endOfMonth(startDate()),
       weekdayStyle: props.weekdayStyle,
     },
     state,
@@ -350,52 +440,81 @@ export function CalendarGrid(props: CalendarGridProps): JSX.Element {
   // This breaks the cycle where accessing visibleRange() inside For loop
   // would cause infinite re-renders.
   const allDates = createMemo(() => {
-    const numWeeks = state.getWeeksInMonth();
+    const monthStart = startDate();
+    const numWeeks = state.getWeeksInMonth(monthStart);
     const weekDates: (CalendarDate | null)[][] = [];
 
     for (let weekIndex = 0; weekIndex < numWeeks; weekIndex++) {
-      weekDates.push(state.getDatesInWeek(weekIndex));
+      weekDates.push(state.getDatesInWeek(weekIndex, monthStart));
     }
 
     return weekDates;
   });
 
   return (
-    <table
-      ref={setGridRef}
-      {...gridAria.gridProps}
-      class={renderProps.class()}
-      style={renderProps.style()}
-    >
-      <thead {...gridAria.headerProps}>
-        <tr>
-          <For each={gridAria.weekDays}>
-            {(day) => (
-              <th scope="col" class="solidaria-CalendarHeaderCell">
-                {day}
-              </th>
-            )}
-          </For>
-        </tr>
-      </thead>
-      <tbody>
-        <Index each={allDates()}>
-          {(weekDates) => (
-            <tr>
-              <Index each={weekDates()}>
-                {(date) => (
-                  <Show when={date()}>
-                    <td role="gridcell">
+    <CalendarGridMonthContext.Provider value={startDate()}>
+      <table
+        ref={setGridRef}
+        {...gridAria.gridProps}
+        class={renderProps.class()}
+        style={renderProps.style()}
+      >
+        <thead {...gridAria.headerProps}>
+          <tr>
+            <For each={gridAria.weekDays}>
+              {(day) => (
+                <th scope="col" class="solidaria-CalendarHeaderCell">
+                  {day}
+                </th>
+              )}
+            </For>
+          </tr>
+        </thead>
+        <tbody>
+          <Index each={allDates()}>
+            {(weekDates) => (
+              <tr>
+                <Index each={weekDates()}>
+                  {(date) => (
+                    <Show when={date()} fallback={<td />}>
                       {props.children?.(date()!)}
-                    </td>
-                  </Show>
-                )}
-              </Index>
-            </tr>
-          )}
-        </Index>
-      </tbody>
-    </table>
+                    </Show>
+                  )}
+                </Index>
+              </tr>
+            )}
+          </Index>
+        </tbody>
+      </table>
+    </CalendarGridMonthContext.Provider>
+  );
+}
+
+export function CalendarGridHeader(props: CalendarGridHeaderProps): JSX.Element {
+  return (
+    <thead class={props.class ?? 'solidaria-CalendarGridHeader'} style={props.style}>
+      {props.children}
+    </thead>
+  );
+}
+
+export function CalendarGridBody(props: CalendarGridBodyProps): JSX.Element {
+  return (
+    <tbody class={props.class ?? 'solidaria-CalendarGridBody'} style={props.style}>
+      {props.children}
+    </tbody>
+  );
+}
+
+export function CalendarHeaderCell(props: CalendarHeaderCellProps): JSX.Element {
+  return (
+    <th
+      scope="col"
+      class={props.class ?? 'solidaria-CalendarHeaderCell'}
+      style={props.style}
+    >
+      {props.children}
+    </th>
   );
 }
 
@@ -408,11 +527,16 @@ export function CalendarGrid(props: CalendarGridProps): JSX.Element {
  */
 export function CalendarCell(props: CalendarCellProps): JSX.Element {
   const state = useCalendarContext();
+  const currentMonthStart = useContext(CalendarGridMonthContext);
   const [cellRef, setCellRef] = createSignal<HTMLDivElement | null>(null);
+  const isOutsideMonth = createMemo(() => currentMonthStart != null && !isSameMonth(currentMonthStart, props.date));
 
   // Create cell ARIA props
   const cellAria = createCalendarCell(
-    { date: props.date },
+    () => ({
+      date: props.date,
+      isOutsideMonth: isOutsideMonth(),
+    }),
     state,
     cellRef
   );
@@ -449,21 +573,23 @@ export function CalendarCell(props: CalendarCellProps): JSX.Element {
   };
 
   return (
-    <div
-      ref={setCellRef}
-      {...cellAria.buttonProps}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-selected={dataAttr(cellAria.isSelected)}
-      data-focused={dataAttr(cellAria.isFocused)}
-      data-disabled={dataAttr(cellAria.isDisabled)}
-      data-unavailable={dataAttr(cellAria.isUnavailable)}
-      data-outside-month={dataAttr(cellAria.isOutsideMonth)}
-      data-today={dataAttr(cellAria.isToday)}
-      data-pressed={dataAttr(cellAria.isPressed)}
-    >
-      {getChildren()}
-    </div>
+    <td {...cellAria.cellProps}>
+      <div
+        ref={setCellRef}
+        {...cellAria.buttonProps}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-selected={dataAttr(cellAria.isSelected)}
+        data-focused={dataAttr(cellAria.isFocused)}
+        data-disabled={dataAttr(cellAria.isDisabled)}
+        data-unavailable={dataAttr(cellAria.isUnavailable)}
+        data-outside-month={dataAttr(cellAria.isOutsideMonth)}
+        data-today={dataAttr(cellAria.isToday)}
+        data-pressed={dataAttr(cellAria.isPressed)}
+      >
+        {getChildren()}
+      </div>
+    </td>
   );
 }
 

package/src/Checkbox.tsx

@@ -8,7 +8,6 @@
 import {
   type JSX,
   type Accessor,
-  type ParentProps,
   createContext,
   useContext,
   createMemo,
@@ -125,7 +124,7 @@ export const CheckboxContext = createContext<CheckboxProps | null>(null);
  * </CheckboxGroup>
  * ```
  */
-export function CheckboxGroup(props: ParentProps<CheckboxGroupProps>): JSX.Element {
+export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
   const [local, ariaProps] = splitProps(props, [
     'class',
     'style',