@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Proyecto Viviana contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,113 +1,23 @@
 # @proyecto-viviana/solid-stately
 
-A SolidJS port of [React Stately](https://react-spectrum.adobe.com/react-stately/) - headless state management for UI components.
+SolidJS port of React Stately state primitives.
 
-## Installation
+This package is the state layer below `solidaria` and
+`solidaria-components`. It owns controlled/uncontrolled state, collection
+models, selection, date/time state, validation state, and related utilities.
+
+## Install
 
 ```bash
-bun add @proyecto-viviana/solid-stately solid-js
+npm install @proyecto-viviana/solid-stately solid-js
 ```
 
-## Overview
-
-solid-stately provides state management hooks that handle the complex logic for UI components like toggles, selections, overlays, and collections. These hooks return reactive state and update functions that you can use with any UI.
-
-This package is the foundation layer of the Proyecto Viviana component library, providing the state logic that powers the accessibility hooks in `@proyecto-viviana/solidaria`.
-
-## Available Hooks
-
-### Toggle & Selection
-
-| Hook | Description |
-|------|-------------|
-| `createToggleState` | Boolean toggle state for checkboxes, switches |
-| `createCheckboxGroupState` | Multi-selection checkbox group |
-| `createRadioGroupState` | Single-selection radio group |
-
-### Overlays
-
-| Hook | Description |
-|------|-------------|
-| `createOverlayTriggerState` | Open/close state for modals, popovers, menus |
-
-### Collections & Lists
-
-| Hook | Description |
-|------|-------------|
-| `createListState` | List with selection and keyboard focus |
-| `createSingleSelectListState` | Single-selection list (e.g., for select dropdowns) |
-| `createSelectionState` | Low-level selection management |
-| `createMenuState` | Menu state with action support |
-| `createMenuTriggerState` | Menu trigger open/close state |
-| `createSelectState` | Select dropdown state |
-| `ListCollection` | Collection data structure for lists |
-| `createListCollection` | Create a list collection from items |
-
-### Navigation
-
-| Hook | Description |
-|------|-------------|
-| `createTabListState` | Tab navigation state with keyboard support |
-
-### Form Controls
-
-| Hook | Description |
-|------|-------------|
-| `createTextFieldState` | Text input state |
-| `createNumberFieldState` | Numeric input with validation |
-| `createSearchFieldState` | Search input with clear functionality |
-| `createSliderState` | Range slider state |
-| `createFormValidationState` | Form validation state with realtime/native modes |
-
-### Grid & Table
-
-| Hook | Description |
-|------|-------------|
-| `createGridState` | Grid state with keyboard navigation |
-| `createTableState` | Table state with sorting and selection |
-| `TableCollection` | Collection data structure for tables |
-
-### Tree
-
-| Hook | Description |
-|------|-------------|
-| `createTreeState` | Tree state with expand/collapse |
-| `TreeCollection` | Collection data structure for trees |
-
-### Color
-
-| Hook | Description |
-|------|-------------|
-| `createColorSliderState` | Color channel slider state |
-| `createColorAreaState` | 2D color area picker state |
-| `createColorWheelState` | Circular hue wheel state |
-| `createColorFieldState` | Color text input state |
-
-### Drag & Drop
-
-| Hook | Description |
-|------|-------------|
-| `createDragState` | Drag operation state |
-| `createDropState` | Drop target state |
-| `createDraggableCollectionState` | Collection-level drag state |
-| `createDroppableCollectionState` | Collection-level drop state |
-
-### Utilities
-
-| Hook | Description |
-|------|-------------|
-| `createId` | Generate unique IDs (SSR-safe) |
-| `createIsSSR` | Detect server-side rendering |
-| `canUseDOM` | Check if DOM is available |
-
-## Usage Examples
-
-### Toggle State
+## Usage
 
 ```tsx
-import { createToggleState } from '@proyecto-viviana/solid-stately';
+import { createToggleState } from "@proyecto-viviana/solid-stately";
 
-function Checkbox(props) {
+export function Toggle(props) {
   const state = createToggleState({
     isSelected: props.isSelected,
     defaultSelected: props.defaultSelected,
@@ -115,198 +25,35 @@ function Checkbox(props) {
   });
 
   return (
-    <label>
-      <input
-        type="checkbox"
-        checked={state.isSelected()}
-        onChange={() => state.toggle()}
-      />
+    <button aria-pressed={state.isSelected()} onClick={() => state.toggle()}>
       {props.children}
-    </label>
+    </button>
   );
 }
 ```
 
-### List State with Selection
-
-```tsx
-import { createListState } from '@proyecto-viviana/solid-stately';
-
-function ListBox(props) {
-  const state = createListState({
-    items: props.items,
-    getKey: (item) => item.id,
-    getTextValue: (item) => item.name,
-    selectionMode: 'single',
-    onSelectionChange: props.onSelectionChange,
-  });
-
-  return (
-    <ul>
-      <For each={props.items}>
-        {(item) => {
-          const key = item.id;
-          const isSelected = () => state.selectionManager.isSelected(key);
-          
-          return (
-            <li
-              onClick={() => state.selectionManager.toggleSelection(key)}
-              style={{ background: isSelected() ? 'blue' : 'white' }}
-            >
-              {item.name}
-            </li>
-          );
-        }}
-      </For>
-    </ul>
-  );
-}
-```
+## Public Surface
 
-### Overlay State
+The source of truth is [`src/index.ts`](src/index.ts). Keep this README focused
+on package purpose and verification rather than duplicating the full export
+list.
 
-```tsx
-import { createOverlayTriggerState } from '@proyecto-viviana/solid-stately';
+Major areas currently covered:
 
-function Modal(props) {
-  const state = createOverlayTriggerState({
-    isOpen: props.isOpen,
-    defaultOpen: props.defaultOpen,
-    onOpenChange: props.onOpenChange,
-  });
+- toggles, checkbox groups, radio groups, and disclosure;
+- overlays, tooltips, toasts, forms, and validation;
+- collections, selection, menus, selects, combo boxes, tabs;
+- grid, table, tree, list data, and async list helpers;
+- date/time/calendar state and internationalized date helpers;
+- number fields, search fields, sliders, and color state;
+- drag-and-drop state and SSR utilities.
 
-  return (
-    <>
-      <button onClick={() => state.open()}>Open Modal</button>
-      <Show when={state.isOpen()}>
-        <div class="modal">
-          {props.children}
-          <button onClick={() => state.close()}>Close</button>
-        </div>
-      </Show>
-    </>
-  );
-}
-```
+## Verification
 
-### Tab State
-
-```tsx
-import { createTabListState } from '@proyecto-viviana/solid-stately';
-
-function Tabs(props) {
-  const state = createTabListState({
-    items: props.tabs,
-    getKey: (tab) => tab.id,
-    selectedKey: props.selectedKey,
-    onSelectionChange: props.onSelectionChange,
-  });
-
-  return (
-    <div>
-      <div role="tablist">
-        <For each={props.tabs}>
-          {(tab) => (
-            <button
-              role="tab"
-              aria-selected={state.selectedKey() === tab.id}
-              onClick={() => state.setSelectedKey(tab.id)}
-            >
-              {tab.label}
-            </button>
-          )}
-        </For>
-      </div>
-      <div role="tabpanel">
-        {props.tabs.find(t => t.id === state.selectedKey())?.content}
-      </div>
-    </div>
-  );
-}
-```
-
-### Slider State
-
-```tsx
-import { createSliderState } from '@proyecto-viviana/solid-stately';
-
-function Slider(props) {
-  const state = createSliderState({
-    value: props.value,
-    defaultValue: props.defaultValue ?? 50,
-    minValue: props.minValue ?? 0,
-    maxValue: props.maxValue ?? 100,
-    step: props.step ?? 1,
-    onChange: props.onChange,
-  });
-
-  const percent = () => state.getValuePercent() * 100;
-
-  return (
-    <div>
-      <input
-        type="range"
-        min={state.minValue}
-        max={state.maxValue}
-        step={state.step}
-        value={state.value()}
-        onInput={(e) => state.setValue(parseFloat(e.target.value))}
-      />
-      <span>{state.getFormattedValue()}</span>
-    </div>
-  );
-}
-```
-
-## Key Concepts
-
-### Controlled vs Uncontrolled
-
-All state hooks support both controlled and uncontrolled patterns:
-
-```tsx
-// Uncontrolled - uses internal state
-const state = createToggleState({
-  defaultSelected: false,
-  onChange: (isSelected) => console.log('Changed:', isSelected),
-});
-
-// Controlled - uses external state
-const [isSelected, setIsSelected] = createSignal(false);
-const state = createToggleState({
-  isSelected: isSelected(),
-  onChange: setIsSelected,
-});
-```
-
-### MaybeAccessor Pattern
-
-Props can be passed as values or accessors for reactive updates:
-
-```tsx
-// Static value
-createToggleState({ defaultSelected: true });
-
-// Reactive accessor
-createToggleState({ 
-  get isDisabled() { return props.isDisabled; } 
-});
-```
-
-## TypeScript
-
-All hooks are fully typed. Import types as needed:
-
-```tsx
-import { 
-  createListState,
-  type ListState,
-  type ListStateProps,
-  type Key,
-  type Selection,
-} from '@proyecto-viviana/solid-stately';
+```bash
+vp run --filter @proyecto-viviana/solid-stately build
+vp test run packages
 ```
 
-## License
-
-MIT
+State changes should include tests for controlled and uncontrolled use, default
+values, callbacks, validation, and disabled/read-only behavior where applicable.

package/dist/autocomplete/createAutocompleteState.d.ts

@@ -3,7 +3,8 @@
  *
  * Based on @react-stately/autocomplete useAutocompleteState.
  */
-import { type Accessor } from 'solid-js';
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface AutocompleteState {
     /** The current value of the autocomplete input. */
     inputValue: Accessor<string>;
@@ -42,4 +43,4 @@ export interface AutocompleteStateOptions {
  * state.setFocusedNodeId('item-1');
  * ```
  */
-export declare function createAutocompleteState(props?: AutocompleteStateOptions): AutocompleteState;
+export declare function createAutocompleteState(props?: MaybeAccessor<AutocompleteStateOptions>): AutocompleteState;

package/dist/autocomplete/index.d.ts

@@ -1 +1 @@
-export { createAutocompleteState, type AutocompleteState, type AutocompleteStateOptions, } from './createAutocompleteState';
+export { createAutocompleteState, type AutocompleteState, type AutocompleteStateOptions, } from "./createAutocompleteState";

package/dist/calendar/createCalendarState.d.ts

@@ -4,17 +4,20 @@
  * Provides state management for calendar components.
  * Based on @react-stately/calendar useCalendarState
  */
-import { type Accessor } from 'solid-js';
-import { type CalendarDate, type DateValue } from '@internationalized/date';
-import { type MaybeAccessor } from '../utils';
-export type ValidationState = 'valid' | 'invalid';
+import { type Accessor } from "solid-js";
+import { type Calendar as InternationalizedCalendar, type CalendarDate, type CalendarIdentifier, type DateValue } from "@internationalized/date";
+import { type MaybeAccessor } from "../utils";
+export type ValidationState = "valid" | "invalid";
+export type CalendarPageBehavior = "single" | "visible";
+export type CalendarSelectionAlignment = "start" | "center" | "end";
+export type CalendarDayOfWeek = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
 export interface CalendarStateProps<T extends DateValue = DateValue> {
     /** The current value (controlled). */
     value?: MaybeAccessor<T | null>;
     /** The default value (uncontrolled). */
     defaultValue?: T | null;
     /** Handler called when the value changes. */
-    onChange?: (value: T) => void;
+    onChange?: (value: T | null) => void;
     /** The minimum allowed date. */
     minValue?: MaybeAccessor<DateValue | undefined>;
     /** The maximum allowed date. */
@@ -26,17 +29,23 @@ export interface CalendarStateProps<T extends DateValue = DateValue> {
     /** Whether dates outside the visible range are automatically focused. */
     autoFocus?: boolean;
     /** The date that is focused when the calendar first mounts. */
-    focusedValue?: MaybeAccessor<DateValue | undefined>;
+    focusedValue?: MaybeAccessor<DateValue | null | 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;
+    locale?: MaybeAccessor<string | undefined>;
+    /** Creates a calendar object for a locale calendar identifier. */
+    createCalendar?: (identifier: CalendarIdentifier) => InternationalizedCalendar;
     /** Callback that is called for each date in the calendar to determine if it is unavailable. */
     isDateUnavailable?: (date: DateValue) => boolean;
     /** The number of months to display at once. */
     visibleMonths?: number;
+    /** Controls whether paging advances by one month or by the visible month range. */
+    pageBehavior?: CalendarPageBehavior;
+    /** Determines how the visible months align around the initial focused date. */
+    selectionAlignment?: CalendarSelectionAlignment;
     /** Whether to automatically focus the calendar when it is mounted. */
     autoFocusOnMount?: boolean;
     /** Controls which days are disabled. */
@@ -68,8 +77,14 @@ export interface CalendarState<T extends DateValue = DateValue> {
     }>;
     /** The timezone used for date calculations. */
     timeZone: string;
+    /** The locale used for formatting and locale-specific week starts. */
+    locale: Accessor<string>;
+    /** The explicitly requested first weekday, or undefined for the locale default. */
+    firstDayOfWeek: Accessor<CalendarDayOfWeek | undefined>;
     /** The validation state. */
     validationState: Accessor<ValidationState | undefined>;
+    /** Whether the current value is invalid according to validation state. */
+    isValueInvalid: Accessor<boolean>;
     /** Whether a date is selected. */
     isSelected: (date: DateValue) => boolean;
     /** Whether a date is focused. */

package/dist/calendar/createDateFieldState.d.ts

@@ -4,11 +4,12 @@
  * Provides state management for date field components with segment-based editing.
  * Based on @react-stately/datepicker useDateFieldState
  */
-import { type Accessor } from 'solid-js';
-import { type CalendarDate, type DateValue } from '@internationalized/date';
-import { type MaybeAccessor } from '../utils';
-import type { ValidationState } from './createCalendarState';
-export type DateSegmentType = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod' | 'era' | 'timeZoneName' | 'literal';
+import { type Accessor } from "solid-js";
+import { CalendarDate, type DateValue } from "@internationalized/date";
+import { type MaybeAccessor } from "../utils";
+import type { ValidationState } from "./createCalendarState";
+import { type ValidationBehavior, type ValidationFunction, type ValidationResult } from "../form";
+export type DateSegmentType = "year" | "month" | "day" | "hour" | "minute" | "second" | "dayPeriod" | "era" | "timeZoneName" | "literal";
 export interface DateSegment {
     /** The type of segment. */
     type: DateSegmentType;
@@ -44,18 +45,26 @@ export interface DateFieldStateProps<T extends DateValue = DateValue> {
     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 of the date/time (day, hour, minute, second). */
-    granularity?: 'day' | 'hour' | 'minute' | 'second';
+    granularity?: "day" | "hour" | "minute" | "second";
     /** Whether to show the hour in 12 or 24 hour format. */
     hourCycle?: 12 | 24;
     /** Whether to hide the time zone. */
     hideTimeZone?: boolean;
     /** The placeholder date (determines segment structure). */
     placeholderValue?: DateValue;
+    /** Whether to force leading zeroes in month/day segments. */
+    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. */
@@ -64,6 +73,8 @@ export interface DateFieldStateProps<T extends DateValue = DateValue> {
     allowsNonContiguousRanges?: boolean;
     /** Whether to create a date or datetime. */
     createCalendar?: (name: string) => unknown;
+    /** Whether a date is unavailable. */
+    isDateUnavailable?: (date: DateValue) => boolean;
 }
 export interface DateFieldState<T extends DateValue = DateValue> {
     /** The current value. */
@@ -95,13 +106,25 @@ export interface DateFieldState<T extends DateValue = DateValue> {
     /** The validation state. */
     validationState: Accessor<ValidationState | undefined>;
     /** The granularity. */
-    granularity: 'day' | 'hour' | 'minute' | 'second';
+    granularity: "day" | "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 time zone. */
     timeZone: string;
+    /** The default value. */
+    defaultValue: T | null;
 }
 /**
  * Provides state management for a date field component.

package/dist/calendar/createDatePickerState.d.ts

@@ -0,0 +1,60 @@
+/**
+ * DatePickerState for Solid-Stately
+ *
+ * Provides unified state management for DatePicker components.
+ * Based on @react-stately/datepicker useDatePickerState
+ */
+import { type Accessor } from "solid-js";
+import { type DateValue, DateFormatter } from "@internationalized/date";
+import { type MaybeAccessor } from "../utils";
+import type { ValidationState } from "./createCalendarState";
+import type { TimeValue } from "./createTimeFieldState";
+export type Granularity = "day" | "hour" | "minute" | "second";
+export type DatePickerStateProps<T extends DateValue = DateValue> = DatePickerStateOptions<T>;
+export interface DatePickerStateOptions<T extends DateValue = DateValue> {
+    value?: MaybeAccessor<T | null>;
+    defaultValue?: T | null;
+    onChange?: (value: T | null) => void;
+    minValue?: MaybeAccessor<DateValue | undefined>;
+    maxValue?: MaybeAccessor<DateValue | undefined>;
+    isDisabled?: MaybeAccessor<boolean>;
+    isReadOnly?: MaybeAccessor<boolean>;
+    isRequired?: MaybeAccessor<boolean>;
+    granularity?: Granularity;
+    hourCycle?: 12 | 24;
+    hideTimeZone?: boolean;
+    placeholderValue?: DateValue;
+    shouldCloseOnSelect?: boolean | (() => boolean);
+    defaultOpen?: boolean;
+    isOpen?: MaybeAccessor<boolean | undefined>;
+    onOpenChange?: (isOpen: boolean) => void;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    validationState?: MaybeAccessor<ValidationState | undefined>;
+}
+export interface DatePickerState<T extends DateValue = DateValue> {
+    value: Accessor<T | null>;
+    defaultValue: T | null;
+    setValue: (value: T | null) => void;
+    dateValue: Accessor<DateValue | null>;
+    setDateValue: (value: DateValue) => void;
+    timeValue: Accessor<TimeValue | null>;
+    setTimeValue: (value: TimeValue) => void;
+    granularity: Granularity;
+    hasTime: boolean;
+    isOpen: Accessor<boolean>;
+    open: () => void;
+    close: () => void;
+    setOpen: (isOpen: boolean) => void;
+    isInvalid: Accessor<boolean>;
+    validationState: Accessor<ValidationState | undefined>;
+    builtinValidation: Accessor<{
+        isInvalid: boolean;
+    }>;
+    showEra: Accessor<boolean>;
+    formatValue: (locale: string, fieldOptions?: Intl.DateTimeFormatOptions) => string;
+    getDateFormatter: (locale: string, formatOptions?: Intl.DateTimeFormatOptions) => DateFormatter;
+}
+/**
+ * Provides unified state management for a DatePicker component.
+ */
+export declare function createDatePickerState<T extends DateValue = DateValue>(props?: DatePickerStateOptions<T>): DatePickerState<T>;

package/dist/calendar/createRangeCalendarState.d.ts

@@ -4,10 +4,12 @@
  * Provides state management for range calendar components.
  * Based on @react-stately/calendar useRangeCalendarState
  */
-import { type Accessor } from 'solid-js';
-import { type CalendarDate, type DateValue } from '@internationalized/date';
-import { type MaybeAccessor } from '../utils';
-import type { ValidationState } from './createCalendarState';
+import { type Accessor } from "solid-js";
+import { type Calendar as InternationalizedCalendar, type CalendarDate, type CalendarIdentifier, type DateValue } from "@internationalized/date";
+import { type MaybeAccessor } from "../utils";
+import type { CalendarDayOfWeek, ValidationState } from "./createCalendarState";
+type RangeCalendarSelectionAlignment = "start" | "center" | "end";
+type RangeCalendarPageBehavior = "single" | "visible";
 export interface DateRange {
     start: CalendarDate;
     end: CalendarDate;
@@ -22,7 +24,7 @@ export interface RangeCalendarStateProps<T extends DateValue = DateValue> {
     /** The default value (uncontrolled). */
     defaultValue?: RangeValue<T> | null;
     /** Handler called when the value changes. */
-    onChange?: (value: RangeValue<T>) => void;
+    onChange?: (value: RangeValue<T> | null) => void;
     /** The minimum allowed date. */
     minValue?: MaybeAccessor<DateValue | undefined>;
     /** The maximum allowed date. */
@@ -32,17 +34,23 @@ export interface RangeCalendarStateProps<T extends DateValue = DateValue> {
     /** Whether the calendar is read-only. */
     isReadOnly?: MaybeAccessor<boolean>;
     /** The date that is focused when the calendar first mounts. */
-    focusedValue?: MaybeAccessor<DateValue | undefined>;
+    focusedValue?: MaybeAccessor<DateValue | null | 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;
+    locale?: MaybeAccessor<string | undefined>;
+    /** Creates a calendar object for a locale calendar identifier. */
+    createCalendar?: (identifier: CalendarIdentifier) => InternationalizedCalendar;
     /** Callback to determine if a date is unavailable. */
     isDateUnavailable?: (date: DateValue) => boolean;
     /** The number of months to display at once. */
-    visibleMonths?: number;
+    visibleMonths?: MaybeAccessor<number | undefined>;
+    /** Controls how the initial visible months are aligned around the current value. */
+    selectionAlignment?: MaybeAccessor<RangeCalendarSelectionAlignment | undefined>;
+    /** Controls whether pagination moves by one month or the visible month count. */
+    pageBehavior?: MaybeAccessor<RangeCalendarPageBehavior | undefined>;
     /** Controls which days are disabled. */
     isDateDisabled?: (date: DateValue) => boolean;
     /** Validation state. */
@@ -78,8 +86,14 @@ export interface RangeCalendarState<T extends DateValue = DateValue> {
     }>;
     /** The timezone used for date calculations. */
     timeZone: string;
+    /** The locale used for formatting and locale-specific week starts. */
+    locale: Accessor<string>;
+    /** The explicitly requested first weekday, or undefined for the locale default. */
+    firstDayOfWeek: Accessor<CalendarDayOfWeek | undefined>;
     /** The validation state. */
     validationState: Accessor<ValidationState | undefined>;
+    /** Whether the current value is invalid according to validation state. */
+    isValueInvalid: Accessor<boolean>;
     /** Whether a date is within the selected range. */
     isSelected: (date: DateValue) => boolean;
     /** Whether a date is the start of the selection. */
@@ -104,6 +118,10 @@ export interface RangeCalendarState<T extends DateValue = DateValue> {
     focusPreviousSection: () => void;
     /** Moves focus to the next section (year). */
     focusNextSection: () => void;
+    /** Whether the previous visible range would be outside the allowed date range. */
+    isPreviousVisibleRangeInvalid: () => boolean;
+    /** Whether the next visible range would be outside the allowed date range. */
+    isNextVisibleRangeInvalid: () => boolean;
     /** Moves focus to the previous day. */
     focusPreviousDay: () => void;
     /** Moves focus to the next day. */
@@ -143,3 +161,4 @@ export interface RangeCalendarState<T extends DateValue = DateValue> {
  * Provides state management for a range calendar component.
  */
 export declare function createRangeCalendarState<T extends DateValue = CalendarDate>(props?: RangeCalendarStateProps<T>): RangeCalendarState<T>;
+export {};