@proyecto-viviana/solidaria-components 0.3.1 → 0.4.0

package/src/Calendar.tsx

@@ -30,6 +30,7 @@ import {
   createCalendarState,
   type CalendarState,
   type CalendarStateProps,
+  type CalendarSelectionMode,
   type CalendarDate,
   type DateValue,
   endOfMonth,
@@ -69,10 +70,13 @@ export interface CalendarRenderProps {
   isInvalid: boolean;
 }
 
-export interface CalendarProps<T extends DateValue = DateValue>
+export interface CalendarProps<
+  T extends DateValue = DateValue,
+  M extends CalendarSelectionMode = "single",
+>
   extends
     Omit<AriaCalendarProps, "id" | "isDisabled" | "isReadOnly">,
-    Omit<CalendarStateProps<T>, "locale">,
+    Omit<CalendarStateProps<T, M>, "locale">,
     SlotProps {
   /** The children of the component. */
   children?: JSX.Element;
@@ -207,7 +211,10 @@ export function useCalendarContext(): CalendarState<DateValue> {
  * </Calendar>
  * ```
  */
-export function Calendar<T extends DateValue = CalendarDate>(props: CalendarProps<T>): JSX.Element {
+export function Calendar<
+  T extends DateValue = CalendarDate,
+  M extends CalendarSelectionMode = "single",
+>(props: CalendarProps<T, M>): JSX.Element {
   const inheritedState = useContext(CalendarContext);
 
   // Use hydration-safe pattern for client-only rendering
@@ -227,9 +234,10 @@ export function Calendar<T extends DateValue = CalendarDate>(props: CalendarProp
   );
 }
 
-function CalendarWithState<T extends DateValue = CalendarDate>(
-  props: CalendarProps<T> & { state: CalendarState<DateValue> },
-): JSX.Element {
+function CalendarWithState<
+  T extends DateValue = CalendarDate,
+  M extends CalendarSelectionMode = "single",
+>(props: CalendarProps<T, M> & { state: CalendarState<DateValue> }): JSX.Element {
   const [local, stateProps, rest] = splitProps(
     props,
     ["children", "class", "style", "slot", "state", "ref"],
@@ -237,6 +245,7 @@ function CalendarWithState<T extends DateValue = CalendarDate>(
       "value",
       "defaultValue",
       "onChange",
+      "selectionMode",
       "minValue",
       "maxValue",
       "isDisabled",
@@ -303,7 +312,10 @@ function CalendarWithState<T extends DateValue = CalendarDate>(
 /**
  * Internal Calendar component that renders after client mount.
  */
-function CalendarInner<T extends DateValue = CalendarDate>(props: CalendarProps<T>): JSX.Element {
+function CalendarInner<
+  T extends DateValue = CalendarDate,
+  M extends CalendarSelectionMode = "single",
+>(props: CalendarProps<T, M>): JSX.Element {
   const [local, stateProps, rest] = splitProps(
     props,
     ["children", "class", "style", "slot", "ref"],
@@ -311,6 +323,7 @@ function CalendarInner<T extends DateValue = CalendarDate>(props: CalendarProps<
       "value",
       "defaultValue",
       "onChange",
+      "selectionMode",
       "minValue",
       "maxValue",
       "isDisabled",
@@ -333,7 +346,7 @@ function CalendarInner<T extends DateValue = CalendarDate>(props: CalendarProps<
   );
 
   // Create calendar state
-  const state = createCalendarState(stateProps);
+  const state = createCalendarState<T, M>(stateProps);
 
   // Create calendar ARIA props
   const calendarAria = createCalendar(
@@ -398,7 +411,9 @@ export function CalendarHeading(props: CalendarHeadingProps): JSX.Element {
   }));
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-CalendarHeading",
@@ -625,7 +640,9 @@ export function CalendarCell(props: CalendarCellProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-CalendarCell",

package/src/CalendarPicker.tsx

@@ -0,0 +1,73 @@
+/**
+ * CalendarMonthPicker / CalendarYearPicker components for solidaria-components
+ *
+ * Headless month/year "jump-to" pickers shared by Calendar and RangeCalendar.
+ * Each reads whichever calendar state context is present and renders through a
+ * child function, mirroring the single context-agnostic components upstream.
+ * Port of react-aria-components/src/Calendar.tsx (CalendarMonthPicker /
+ * CalendarYearPicker).
+ */
+
+import { type JSX, useContext } from "solid-js";
+
+import {
+  createCalendarMonthPicker,
+  createCalendarYearPicker,
+  type CalendarMonthPickerProps as AriaCalendarMonthPickerProps,
+  type CalendarMonthPickerAria,
+  type CalendarYearPickerProps as AriaCalendarYearPickerProps,
+  type CalendarYearPickerAria,
+} from "@proyecto-viviana/solidaria";
+
+import { CalendarContext } from "./Calendar";
+import { RangeCalendarContext } from "./RangeCalendar";
+
+export type {
+  CalendarMonthPickerAria,
+  CalendarMonthPickerItem,
+  CalendarYearPickerAria,
+  CalendarYearPickerItem,
+  CalendarYearPickerFormatOptions,
+} from "@proyecto-viviana/solidaria";
+
+export interface CalendarMonthPickerProps extends AriaCalendarMonthPickerProps {
+  /** A function that renders the month picker from its accessible props. */
+  children: (renderProps: CalendarMonthPickerAria) => JSX.Element;
+}
+
+/**
+ * A CalendarMonthPicker renders the list of months in the focused year so the
+ * user can jump the calendar's focus to a different month. It works within both
+ * a Calendar and a RangeCalendar.
+ */
+export function CalendarMonthPicker(props: CalendarMonthPickerProps): JSX.Element {
+  const calendarState = useContext(CalendarContext);
+  const rangeCalendarState = useContext(RangeCalendarContext);
+  const state = calendarState ?? rangeCalendarState;
+  if (!state) {
+    throw new Error("CalendarMonthPicker must be used within a Calendar or RangeCalendar");
+  }
+  const aria = createCalendarMonthPicker(props, state);
+  return props.children(aria);
+}
+
+export interface CalendarYearPickerProps extends AriaCalendarYearPickerProps {
+  /** A function that renders the year picker from its accessible props. */
+  children: (renderProps: CalendarYearPickerAria) => JSX.Element;
+}
+
+/**
+ * A CalendarYearPicker renders a sliding window of years so the user can jump
+ * the calendar's focus to a different year. It works within both a Calendar and
+ * a RangeCalendar.
+ */
+export function CalendarYearPicker(props: CalendarYearPickerProps): JSX.Element {
+  const calendarState = useContext(CalendarContext);
+  const rangeCalendarState = useContext(RangeCalendarContext);
+  const state = calendarState ?? rangeCalendarState;
+  if (!state) {
+    throw new Error("CalendarYearPicker must be used within a Calendar or RangeCalendar");
+  }
+  const aria = createCalendarYearPicker(props, state);
+  return props.children(aria);
+}