@salt-ds/lab 1.0.0-alpha.67 → 1.0.0-alpha.69

package/dist-types/calendar/useCalendar.d.ts

@@ -1,20 +1,22 @@
-import type { DateFrameworkType } from "@salt-ds/date-adapters";
+import { type ResponsiveProp } from "@salt-ds/core";
+import type { DateFrameworkType, Timezone } from "@salt-ds/date-adapters";
 import { type SyntheticEvent } from "react";
-import { type UseCalendarSelectionMultiSelectProps, type UseCalendarSelectionOffsetProps, type UseCalendarSelectionRangeProps, type UseCalendarSelectionSingleProps } from "./useCalendarSelection";
+import { type UseCalendarSelectionBaseProps, type UseCalendarSelectionMultiSelectProps, type UseCalendarSelectionOffsetProps, type UseCalendarSelectionRangeProps, type UseCalendarSelectionSingleProps } from "./useCalendarSelection";
 /**
- * Interface representing the base properties UseCalendar hook.
+ * Base properties for the UseCalendar hook.
+ * @template TDate - The type of the date object.
  */
-interface UseCalendarBaseProps<TDate> {
+interface UseCalendarBaseProps<TDate> extends UseCalendarSelectionBaseProps<TDate> {
     /**
      * The default visible month.
      */
     defaultVisibleMonth?: TDate;
     /**
      * Callback fired when the visible month changes.
-     * @param event - The synthetic event.
+     * @param event - The synthetic event or null if triggered by code.
      * @param visibleMonth - The new visible month.
      */
-    onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: TDate) => void;
+    onVisibleMonthChange?: (event: SyntheticEvent | null, visibleMonth: TDate) => void;
     /**
      * Function to determine if a day is unselectable.
      * @param date - The date to check.
@@ -33,18 +35,10 @@ interface UseCalendarBaseProps<TDate> {
      * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.
      */
     isDayDisabled?: (date: TDate) => string | false | undefined;
-    /**
-     * The currently visible month.
-     */
-    visibleMonth?: TDate;
     /**
      * If `true`, hides dates that are out of the selectable range.
      */
     hideOutOfRangeDates?: boolean;
-    /**
-     * Locale for date formatting
-     */
-    locale?: any;
     /**
      * The minimum selectable date.
      */
@@ -53,6 +47,10 @@ interface UseCalendarBaseProps<TDate> {
      * The maximum selectable date.
      */
     maxDate?: TDate;
+    /**
+     * Number of visible months, maximum 12, defaults to 1.
+     */
+    numberOfVisibleMonths?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
 }
 /**
  * UseCalendar hook props for a single date selection Calendar.
@@ -65,6 +63,7 @@ export interface UseCalendarSingleProps<TDate extends DateFrameworkType> extends
 }
 /**
  * UseCalendar hook props for a date range selection Calendar.
+ * @template TDate - The type of the date object.
  */
 export interface UseCalendarRangeProps<TDate extends DateFrameworkType> extends UseCalendarSelectionRangeProps<TDate>, UseCalendarBaseProps<TDate> {
     /**
@@ -74,6 +73,7 @@ export interface UseCalendarRangeProps<TDate extends DateFrameworkType> extends
 }
 /**
  * UseCalendar hook props for a multi-select Calendar.
+ * @template TDate - The type of the date object.
  */
 export interface UseCalendarMultiSelectProps<TDate extends DateFrameworkType> extends UseCalendarSelectionMultiSelectProps<TDate>, UseCalendarBaseProps<TDate> {
     /**
@@ -83,6 +83,7 @@ export interface UseCalendarMultiSelectProps<TDate extends DateFrameworkType> ex
 }
 /**
  * UseCalendar hook props for an offset date selection Calendar.
+ * @template TDate - The type of the date object.
  */
 export interface UseCalendarOffsetProps<TDate extends DateFrameworkType> extends UseCalendarSelectionOffsetProps<TDate>, UseCalendarBaseProps<TDate> {
     /**
@@ -92,12 +93,12 @@ export interface UseCalendarOffsetProps<TDate extends DateFrameworkType> extends
 }
 /**
  * UseCalendar hook props, wth the selection variant determining the return type of the date selection
+ * @template TDate - The type of the date object.
  */
 export declare type UseCalendarProps<TDate extends DateFrameworkType> = UseCalendarSingleProps<TDate> | UseCalendarRangeProps<TDate> | UseCalendarMultiSelectProps<TDate> | UseCalendarOffsetProps<TDate>;
 /**
  * Represents the return type of the useCalendar hook.
- *
- * @template TDate - The type of the date object used in the calendar.
+ * @template TDate - The type of the date object.
  */
 export interface UseCalendarReturn<TDate extends DateFrameworkType> {
     /**
@@ -113,9 +114,9 @@ export interface UseCalendarReturn<TDate extends DateFrameworkType> {
          */
         focusedDate: TDate | null;
         /**
-         * The locale used for date formatting.
+         *  Focusable dates based on current state
          */
-        locale: any;
+        focusableDates: TDate[];
         /**
          * The minimum selectable date in the calendar.
          */
@@ -133,9 +134,18 @@ export interface UseCalendarReturn<TDate extends DateFrameworkType> {
          */
         hideOutOfRangeDates?: boolean;
         /**
-         * Whether the calendar is currently focused.
+         * Number of visible months
          */
-        calendarFocused: boolean;
+        numberOfVisibleMonths: number;
+        /**
+         * Specifies the timezone behavior:
+         * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.
+         * - If set to "default", the default timezone of the date library will be used.
+         * - If set to "system", the local system's timezone will be applied.
+         * - If set to "UTC", the time will be returned in UTC.
+         * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
+         */
+        timezone?: Timezone;
         /**
          * Additional state properties from selectionManager.state.
          */
@@ -148,23 +158,17 @@ export interface UseCalendarReturn<TDate extends DateFrameworkType> {
         /**
          * Sets the visible month in the calendar.
          *
-         * @param event - The synthetic event triggering the change.
+         * @param event - The synthetic event or null if triggered by code.
          * @param newVisibleMonth - The new visible month to set.
          */
-        setVisibleMonth: (event: SyntheticEvent, newVisibleMonth: TDate) => void;
+        setVisibleMonth: (event: SyntheticEvent | null, newVisibleMonth: TDate) => void;
         /**
          * Sets the focused date in the calendar.
          *
-         * @param event - The synthetic event triggering the change.
+         * @param event - The synthetic event or null if triggered by code.
          * @param date - The new date to focus.
          */
-        setFocusedDate: (event: SyntheticEvent, date: TDate) => void;
-        /**
-         * Sets whether the calendar is focused.
-         *
-         * @param focused - Whether the calendar should be focused.
-         */
-        setCalendarFocused: (focused: boolean) => void;
+        setFocusedDate: (event: SyntheticEvent | null, date: TDate | null) => void;
         /**
          * Determines if a day is unselectable.
          *

package/dist-types/calendar/useCalendarDay.d.ts

@@ -1,5 +1,4 @@
 import type { DateFrameworkType } from "@salt-ds/date-adapters";
-import { type RefObject } from "react";
 /**
  * Interface representing the status of a day in the Calendar.
  */
@@ -39,6 +38,7 @@ export interface DayStatus {
 }
 /**
  * UseCalendar hook props to return a calendar day's status
+ * @template TDate - The type of the date object.
  */
 export interface useCalendarDayProps<TDate> {
     /**
@@ -50,9 +50,10 @@ export interface useCalendarDayProps<TDate> {
      */
     month: TDate;
 }
-export declare function useCalendarDay<TDate extends DateFrameworkType>(props: useCalendarDayProps<TDate>, ref: RefObject<HTMLElement>): {
+export declare function useCalendarDay<TDate extends DateFrameworkType>(props: useCalendarDayProps<TDate>): {
     status: DayStatus;
     dayProps: Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">;
+    focusedDateRef: any;
     unselectableReason: string | false | undefined;
     highlightedReason: string | false | undefined;
 };

package/dist-types/calendar/useCalendarSelection.d.ts

@@ -1,15 +1,18 @@
-import type { DateFrameworkType } from "@salt-ds/date-adapters";
+import type { DateFrameworkType, Timezone } from "@salt-ds/date-adapters";
 import type { KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from "react";
 /**
  * Type representing a single date selection.
+ * @template TDate - The type of the date object.
  */
 export declare type SingleDateSelection<TDate extends DateFrameworkType> = TDate;
 /**
  * Type representing multiple date selections.
+ * @template TDate - The type of the date object.
  */
 export declare type MultipleDateSelection<TDate extends DateFrameworkType> = TDate[];
 /**
  * Type representing a date range selection.
+ * @template TDate - The type of the date object.
  */
 export declare type DateRangeSelection<TDate extends DateFrameworkType> = {
     /**
@@ -23,50 +26,94 @@ export declare type DateRangeSelection<TDate extends DateFrameworkType> = {
 };
 /**
  * Type representing all possible selection value types.
+ * @template TDate - The type of the date object.
  */
 export declare type AllSelectionValueType<TDate extends DateFrameworkType> = SingleDateSelection<TDate> | MultipleDateSelection<TDate> | DateRangeSelection<TDate> | null;
 /**
  * Checks if a value is a single date selection.
+ * @template TDate - The type of the date object.
  * @param value - The value to check.
  * @returns `true` if the value is a single date selection, otherwise `false`.
  */
 export declare function isSingleSelectionValueType<TDate extends DateFrameworkType>(value: any): value is TDate;
 /**
  * Checks if a value is a date range selection.
+ * @template TDate - The type of the date object.
  * @param value - The value to check.
  * @returns `true` if the value is a date range selection, otherwise `false`.
  */
 export declare function isDateRangeSelection<TDate extends DateFrameworkType>(value: any): value is DateRangeSelection<TDate>;
 /**
  * Checks if a value is a multiple date selection.
+ * @template TDate - The type of the date object.
  * @param value - The value to check.
  * @returns `true` if the value is a multiple date selection, otherwise `false`.
  */
 export declare function isMultipleDateSelection<TDate extends DateFrameworkType>(value: any): value is MultipleDateSelection<TDate>;
 /**
  * Base properties for calendar UseCalendarSelection hook.
- * @template SelectionVariantType - The type of the selection variant.
+ * @template TDate - The type of the date object.
  */
-interface UseCalendarSelectionBaseProps<TDate extends DateFrameworkType> {
+export interface UseCalendarSelectionBaseProps<TDate extends DateFrameworkType> {
+    /**
+     * The currently focused date in the calendar, or null if no date is focused.
+     */
+    focusedDate?: TDate | null;
     /**
      * The currently hovered date.
      */
     hoveredDate?: TDate | null;
+    /**
+     * Determines if a date is outside the allowed date range.
+     * @param date - The date to check.
+     * @returns `true` if the date is outside the allowed range, otherwise `false`.
+     */
+    isOutsideAllowedDates?: (date: TDate) => boolean;
     /**
      * Function to determine if a day is selectable.
      * @param date - The date to check.
      * @returns `true` if the day is selectable, otherwise `false`.
      */
     isDaySelectable?: (date: TDate) => boolean;
+    /**
+     * Function to determine if a day is visible.
+     * @param date - The date to check.
+     * @returns `true` if the day is visible, otherwise `false`.
+     */
+    isDayVisible?: (date: TDate) => boolean;
+    /**
+     * Ref to attach to the focused element, enabling focus to be controlled.
+     */
+    focusedDateRef?: React.MutableRefObject<HTMLElement | null>;
+    /**
+     * Callback fired when the focused date changes.
+     * @param event - The synthetic event, if user event triggered focus or null.
+     * @param date - The new focused date.
+     */
+    onFocusedDateChange?: (event: SyntheticEvent | null, date: TDate | null) => void;
     /**
      * Callback fired when the hovered date changes.
      * @param event - The synthetic event.
      * @param hoveredDate - The new hovered date.
      */
     onHoveredDateChange?: (event: SyntheticEvent, hoveredDate: TDate | null) => void;
+    /**
+     * Specifies the timezone behavior:
+     * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.
+     * - If set to "default", the default timezone of the date library will be used.
+     * - If set to "system", the local system's timezone will be applied.
+     * - If set to "UTC", the time will be returned in UTC.
+     * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
+     */
+    timezone?: Timezone;
+    /**
+     * The currently visible month.
+     */
+    visibleMonth?: TDate;
 }
 /**
  * UseCalendar hook props to return a calendar day's status
+ * @template TDate - The type of the date object.
  */
 export interface UseCalendarSelectionOffsetProps<TDate extends DateFrameworkType> extends Omit<UseCalendarSelectionBaseProps<TDate>, "startDateOffset" | "endDateOffset"> {
     /**
@@ -102,6 +149,7 @@ export interface UseCalendarSelectionOffsetProps<TDate extends DateFrameworkType
 }
 /**
  * Properties for the range date selection hook.
+ * @template TDate - The type of the date object.
  */
 export interface UseCalendarSelectionRangeProps<TDate extends DateFrameworkType> extends UseCalendarSelectionBaseProps<TDate> {
     /**
@@ -125,6 +173,7 @@ export interface UseCalendarSelectionRangeProps<TDate extends DateFrameworkType>
 }
 /**
  * Properties for the multi-select date selection hook.
+ * @template TDate - The type of the date object.
  */
 export interface UseCalendarSelectionMultiSelectProps<TDate extends DateFrameworkType> extends UseCalendarSelectionBaseProps<TDate> {
     /**
@@ -148,6 +197,7 @@ export interface UseCalendarSelectionMultiSelectProps<TDate extends DateFramewor
 }
 /**
  * Properties for the single date selection hook.
+ * @template TDate - The type of the date object.
  */
 export interface UseCalendarSelectionSingleProps<TDate extends DateFrameworkType> extends UseCalendarSelectionBaseProps<TDate> {
     /**
@@ -171,12 +221,16 @@ export interface UseCalendarSelectionSingleProps<TDate extends DateFrameworkType
 }
 /**
  * UseCalendarSelection hook props, wth the selection variant determining the return type of the date selection
+ * @template TDate - The type of the date object.
  */
 export declare type UseCalendarSelectionProps<TDate extends DateFrameworkType> = UseCalendarSelectionSingleProps<TDate> | UseCalendarSelectionMultiSelectProps<TDate> | UseCalendarSelectionRangeProps<TDate> | UseCalendarSelectionOffsetProps<TDate>;
 export declare function useCalendarSelection<TDate extends DateFrameworkType>(props: UseCalendarSelectionProps<TDate>): {
     state: {
-        selectedDate: TDate | MultipleDateSelection<TDate> | DateRangeSelection<TDate> | null | undefined;
+        focusedDate: TDate | null;
+        focusedDateRef: import("react").MutableRefObject<HTMLElement | null> | undefined;
         hoveredDate: TDate | null | undefined;
+        selectedDate: TDate | MultipleDateSelection<TDate> | DateRangeSelection<TDate> | null | undefined;
+        focusableDates: TDate[];
     };
     helpers: {
         setSelectedDate: (event: SyntheticEvent<HTMLButtonElement>, newSelectedDate: TDate) => void;
@@ -188,7 +242,8 @@ export declare function useCalendarSelection<TDate extends DateFrameworkType>(pr
         isSelectedStart: (date: TDate) => boolean;
         isSelectedEnd: (date: TDate) => boolean;
         isHoveredOffset: (date: TDate) => boolean;
-        isDaySelectable: ((date: TDate) => boolean) | undefined;
+        isDaySelectable: (date: TDate) => boolean;
+        setFocusedDate: (event: SyntheticEvent | null, date: TDate | null) => void;
     };
 };
 export declare function useCalendarSelectionDay<TDate extends DateFrameworkType>({ date, }: {
@@ -196,8 +251,6 @@ export declare function useCalendarSelectionDay<TDate extends DateFrameworkType>
 }): {
     handleClick: MouseEventHandler<HTMLButtonElement>;
     handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;
-    handleMouseOver: MouseEventHandler<HTMLButtonElement>;
-    handleMouseLeave: MouseEventHandler<HTMLButtonElement>;
     status: {
         selected: boolean;
         selectedSpan: boolean;
@@ -213,4 +266,3 @@ export declare function useCalendarSelectionDay<TDate extends DateFrameworkType>
         "aria-disabled": string | undefined;
     };
 };
-export {};

package/dist-types/date-input/DateInputRange.d.ts

@@ -1,5 +1,5 @@
 import { type InputProps } from "@salt-ds/core";
-import type { DateDetail, DateFrameworkType, ParserResult } from "@salt-ds/date-adapters";
+import type { DateDetail, DateFrameworkType, ParserResult, Timezone } from "@salt-ds/date-adapters";
 import { type ChangeEvent, type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode, type Ref, type SyntheticEvent } from "react";
 import type { DateRangeSelection } from "../calendar";
 /**
@@ -27,7 +27,7 @@ export declare enum DateParserField {
 }
 /**
  * Props for the DateInputRange component.
- * @template T
+ * @template TDate - The type of the date object.
  */
 export interface DateInputRangeProps<TDate extends DateFrameworkType> extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "onChange">, Omit<InputProps, "defaultValue" | "inputRef" | "value" | "onChange"> {
     /**
@@ -81,18 +81,13 @@ export interface DateInputRangeProps<TDate extends DateFrameworkType> extends Om
      * Optional ref for the end input component.
      */
     endInputRef?: Ref<HTMLInputElement>;
-    /**
-     * Locale for date formatting and parsing
-     */
-    locale?: any;
     /**
      * Parser callback, if not using the adapter's parser
      * @param value - date string to parse
      * @param field: DateParserField to identify value,
      * @param format - format required
-     * @param locale - locale required
      */
-    parse?: (value: string, field: DateParserField, format: string, locale?: any) => ParserResult<TDate>;
+    parse?: (value: string, field: DateParserField, format: string) => ParserResult<TDate>;
     /**
      * Input value. Use when the input value is controlled.
      */
@@ -128,5 +123,14 @@ export interface DateInputRangeProps<TDate extends DateFrameworkType> extends Om
      * @param newValue - The new date input range value.
      */
     onDateValueChange?: (event: SyntheticEvent | null, newValue: DateInputRangeValue) => void;
+    /**
+     * Specifies the timezone behavior:
+     * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.
+     * - If set to "default", the default timezone of the date library will be used.
+     * - If set to "system", the local system's timezone will be applied.
+     * - If set to "UTC", the time will be returned in UTC.
+     * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
+     */
+    timezone?: Timezone;
 }
 export declare const DateInputRange: import("react").ForwardRefExoticComponent<DateInputRangeProps<any> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-input/DateInputSingle.d.ts

@@ -1,4 +1,4 @@
-import type { DateDetail, DateFrameworkType, ParserResult } from "@salt-ds/date-adapters";
+import type { DateDetail, DateFrameworkType, ParserResult, Timezone } from "@salt-ds/date-adapters";
 import { type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode, type Ref, type SyntheticEvent } from "react";
 import type { SingleDateSelection } from "../calendar";
 /**
@@ -7,7 +7,7 @@ import type { SingleDateSelection } from "../calendar";
 export declare type DateInputSingleDetails = DateDetail;
 /**
  * Props for the DateInputSingle component.
- * @template T
+ * @template TDate - The type of the date object.
  */
 export interface DateInputSingleProps<TDate extends DateFrameworkType> extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "value" | "defaultValue" | "placeholder"> {
     /**
@@ -56,17 +56,12 @@ export interface DateInputSingleProps<TDate extends DateFrameworkType> extends O
      * Reference for the input.
      */
     inputRef?: Ref<HTMLInputElement>;
-    /**
-     * Locale for date formatting and parsing
-     */
-    locale?: any;
     /**
      * Parser callback, if not using the adapter's parser
      * @param value - date string to parse
      * @param format - format required
-     * @param locale - locale required
      */
-    parse?: (value: string, format: string, locale?: any) => ParserResult<TDate>;
+    parse?: (value: string, format: string) => ParserResult<TDate>;
     /**
      * Input value. Use when the input value is controlled.
      */
@@ -96,5 +91,14 @@ export interface DateInputSingleProps<TDate extends DateFrameworkType> extends O
      * @param newValue - The new date input value.
      */
     onDateValueChange?: (event: SyntheticEvent | null, newValue: string) => void;
+    /**
+     * Specifies the timezone behavior:
+     * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.
+     * - If set to "default", the default timezone of the date library will be used.
+     * - If set to "system", the local system's timezone will be applied.
+     * - If set to "UTC", the time will be returned in UTC.
+     * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
+     */
+    timezone?: Timezone;
 }
 export declare const DateInputSingle: import("react").ForwardRefExoticComponent<DateInputSingleProps<any> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import type { DateFrameworkType } from "@salt-ds/date-adapters";
+import type { DateFrameworkType, Timezone } from "@salt-ds/date-adapters";
 import { type ReactNode } from "react";
 import { type DatePickerOpenChangeReason } from "./DatePickerOverlayProvider";
 import { type UseDatePickerRangeProps, type UseDatePickerSingleProps } from "./useDatePicker";
@@ -15,32 +15,40 @@ export interface DatePickerBaseProps {
     /**
      * Handler for when open state changes
      * @param newOpen - true when opened
-     * @param event - event that triggered the state change
      * @param reason - reason for the the state change
      */
-    onOpenChange?: (newOpen: boolean, event?: Event, reason?: DatePickerOpenChangeReason) => void;
+    onOpenChange?: (newOpen: boolean, reason?: DatePickerOpenChangeReason) => void;
     /**
      * the initial open/close state of the overlay, when the open/close state is un-controlled.
      */
     defaultOpen?: DatePickerBaseProps["open"];
+    /**
+     * Specifies the timezone behavior:
+     * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.
+     * - If set to "default", the default timezone of the date library will be used.
+     * - If set to "system", the local system's timezone will be applied.
+     * - If set to "UTC", the time will be returned in UTC.
+     * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
+     */
+    timezone?: Timezone;
 }
 /**
  * Props for the DatePicker component, when `selectionVariant` is `single`.
- * @template T
+ * @template TDate - The type of the date object.
  */
 export interface DatePickerSingleProps<TDate extends DateFrameworkType> extends DatePickerBaseProps, UseDatePickerSingleProps<TDate> {
     selectionVariant: "single";
 }
 /**
  * Props for the DatePicker component, when `selectionVariant` is `range`.
- * @template T
+ * @template TDate - The type of the date object.
  */
 export interface DatePickerRangeProps<TDate extends DateFrameworkType> extends DatePickerBaseProps, UseDatePickerRangeProps<TDate> {
     selectionVariant: "range";
 }
 /**
  * Props for the DatePicker component.
- * @template T
+ * @template TDate - The type of the date object.
  */
 export declare type DatePickerProps<TDate extends DateFrameworkType> = DatePickerSingleProps<TDate> | DatePickerRangeProps<TDate>;
 export declare const DatePickerMain: import("react").ForwardRefExoticComponent<DatePickerProps<any> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerContext.d.ts

@@ -1,9 +1,10 @@
-import type { DateFrameworkType } from "@salt-ds/date-adapters";
+import type { DateFrameworkType, Timezone } from "@salt-ds/date-adapters";
 import { type Context, type Ref, type SyntheticEvent } from "react";
 import type { DateRangeSelection, SingleDateSelection } from "../calendar";
 import type { DateInputRangeDetails, DateInputSingleDetails } from "../date-input";
 /**
  * Interface representing the base state for a DatePicker.
+ * @template TDate - The type of the date object.
  */
 interface DatePickerBaseState<TDate extends DateFrameworkType> {
     /**
@@ -38,6 +39,15 @@ interface DatePickerBaseState<TDate extends DateFrameworkType> {
          * Reference to the container element.
          */
         containerRef: Ref<HTMLDivElement>;
+        /**
+         * Specifies the timezone behavior:
+         * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.
+         * - If set to "default", the default timezone of the date library will be used.
+         * - If set to "system", the local system's timezone will be applied.
+         * - If set to "UTC", the time will be returned in UTC.
+         * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
+         */
+        timezone?: Timezone;
     };
     /**
      * Helper functions for managing the DatePicker state.
@@ -48,6 +58,24 @@ interface DatePickerBaseState<TDate extends DateFrameworkType> {
          * @param event - event that triggered the state change
          */
         cancel: (event?: Event) => void;
+        /**
+         * Function to determine if a day is disabled.
+         * @param date - The date to check.
+         * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.
+         */
+        isDayDisabled?: (date: TDate) => string | false | undefined;
+        /**
+         * Function to determine if a day is highlighted.
+         * @param date - The date to check.
+         * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.
+         */
+        isDayHighlighted?: (date: TDate) => string | false | undefined;
+        /**
+         * Function to determine if a day is unselectable.
+         * @param date - The date to check.
+         * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.
+         */
+        isDayUnselectable?: (date: TDate) => string | false | undefined;
         /**
          * Sets the enableApply state.
          * @param newEnableApply - The new value for enableApply.

package/dist-types/date-picker/DatePickerHelperText.d.ts

@@ -0,0 +1,4 @@
+import { type FormFieldHelperTextProps } from "@salt-ds/core";
+export interface DatePickerHelperTextProps extends FormFieldHelperTextProps {
+}
+export declare const DatePickerHelperText: import("react").ForwardRefExoticComponent<Omit<DatePickerHelperTextProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/dist-types/date-picker/DatePickerOverlayProvider.d.ts

@@ -11,10 +11,18 @@ interface DatePickerOverlayState {
      * If `true`, the overlay is open.
      */
     open: boolean;
+    /**
+     * If `true`, the overlay contains the active element
+     */
+    focused: boolean;
     /**
      * The result of the floating UI calculations.
      */
     floatingUIResult: ReturnType<typeof useFloatingUI>;
+    /**
+     * Ref to attach to the initially focused element, when the overlay is opened.
+     */
+    initialFocusRef?: React.MutableRefObject<HTMLElement | null>;
 }
 /**
  * Interface representing the helper functions for a DatePicker overlay.
@@ -69,10 +77,9 @@ interface DatePickerOverlayProviderProps {
     /**
      * Handler for when open state changes
      * @param newOpen - true when opened
-     * @param event - event that triggered the state change
      * @param reason - reason for the the state change
      */
-    onOpenChange?: (newOpen: boolean, event?: Event, reason?: DatePickerOpenChangeReason) => void;
+    onOpenChange?: (newOpen: boolean, reason?: DatePickerOpenChangeReason) => void;
     /**
      * The default open state of the overlay.
      */

package/dist-types/date-picker/DatePickerRangeGridPanel.d.ts

@@ -0,0 +1,17 @@
+import type { DateFrameworkType } from "@salt-ds/date-adapters";
+import { type SyntheticEvent } from "react";
+import { type CalendarRangeProps } from "../calendar";
+import { type DateRangeSelection } from "../calendar";
+import type { DatePickerPanelBaseProps } from "./DatePickerSingleGridPanel";
+/**
+ * Props for the DatePickerRangeGridPanel component.
+ * @template TDate - The type of the date object.
+ */
+export declare type DatePickerRangeGridPanelProps<TDate extends DateFrameworkType> = DatePickerPanelBaseProps<TDate> & DateRangeSelection<TDate> & {
+    onSelectionChange?: (event: SyntheticEvent, selectedDate?: DateRangeSelection<TDate> | null) => void;
+    CalendarProps?: Partial<Omit<CalendarRangeProps<TDate>, "selectionVariant" | "selectedDate" | "defaultSelectedDate" | "onHoveredDateChange" | "onSelectionChange" | "onVisibleMonthChange">>;
+};
+export declare const DatePickerRangeGridPanel: import("react").ForwardRefExoticComponent<DatePickerPanelBaseProps<unknown> & DateRangeSelection<unknown> & {
+    onSelectionChange?: ((event: SyntheticEvent, selectedDate?: DateRangeSelection<unknown> | null | undefined) => void) | undefined;
+    CalendarProps?: Partial<Omit<CalendarRangeProps<unknown>, "onSelectionChange" | "selectionVariant" | "onHoveredDateChange" | "selectedDate" | "defaultSelectedDate" | "onVisibleMonthChange">> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerRangeInput.d.ts

@@ -3,6 +3,7 @@ import type { DateRangeSelection } from "../calendar";
 import { type DateInputRangeDetails, type DateInputRangeProps } from "../date-input";
 /**
  * Props for the DatePickerRangeInput component.
+ * @template TDate - The type of the date object.
  */
 export interface DatePickerRangeInputProps<TDate extends DateFrameworkType> extends DateInputRangeProps<TDate> {
     /**