@salt-ds/lab 1.0.0-alpha.51 → 1.0.0-alpha.52

package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useControlled,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type ForwardedRef,\n  type MouseEvent,\n  type ReactElement,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n  useCollectionItems,\n  useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n  /**\n   * Trigger button icon\n   */\n  triggerButtonIcon?: JSX.Element;\n  /**\n   * Trigger button text\n   */\n  triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n  {\n    children,\n    className,\n    defaultIsOpen,\n    isOpen: isOpenProp,\n    onOpenChange,\n    triggerButtonIcon,\n    triggerButtonLabel,\n    ...props\n  }: DropdownPanelProps,\n  forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-panel\",\n    css: overflowPanelCss,\n    window: targetWindow,\n  });\n\n  const id = useId();\n  const collectionHook = useCollectionItems<ReactElement>({\n    id,\n    children,\n  });\n\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen || false,\n    name: \"DropdownPanel\",\n  });\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigationPanel({\n      cycleFocus: true,\n      defaultHighlightedIndex: 0,\n      focusOnHighlight: true,\n      indexPositions: collectionHook.data,\n    });\n\n  const focusTrigger = useCallback(() => {\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  }, []);\n\n  const setPanelRef = useCallback((el: HTMLElement | null) => el?.focus(), []);\n\n  const handleItemClick = (evt: MouseEvent) => {\n    // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n    setIsOpen(false);\n    focusTrigger();\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const getTriggerButtonIcon = () =>\n    triggerButtonIcon ?? triggerButtonLabel === undefined ? (\n      <OverflowMenuIcon />\n    ) : undefined;\n\n  return (\n    <DropdownBase\n      {...props}\n      className={clsx(withBaseName(), className)}\n      isOpen={isOpen}\n      onOpenChange={handleOpenChange}\n      placement=\"bottom-end\"\n      ref={forwardedRef}\n    >\n      <Button variant=\"secondary\" ref={triggerRef}>\n        {getTriggerButtonIcon()}\n        {triggerButtonLabel}\n      </Button>\n      <div\n        className={withBaseName(\"content\")}\n        ref={setPanelRef}\n        tabIndex={-1}\n        {...keyboardHook.listProps}\n      >\n        {collectionHook.data.map((item) => {\n          const { type } = item.value as ReactElement;\n          if (type === OverflowSeparator) {\n            return item.value;\n          }\n          const formFieldProps = {\n            id: item.id,\n            inOverflowPanel: true,\n            key: item.id,\n            onClick: handleItemClick,\n          } as ToolbarFieldProps;\n\n          if (type === ToolbarField) {\n            return cloneElement(item.value as ReactElement, formFieldProps);\n          }\n          return (\n            <ToolbarField {...formFieldProps} key={item.id}>\n              {item.value}\n            </ToolbarField>\n          );\n        })}\n      </div>\n    </DropdownBase>\n  );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}
+{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useControlled,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type ForwardedRef,\n  type MouseEvent,\n  type ReactElement,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n  useCollectionItems,\n  useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n  /**\n   * Trigger button icon\n   */\n  triggerButtonIcon?: JSX.Element;\n  /**\n   * Trigger button text\n   */\n  triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n  {\n    children,\n    className,\n    defaultIsOpen,\n    isOpen: isOpenProp,\n    onOpenChange,\n    triggerButtonIcon,\n    triggerButtonLabel,\n    ...props\n  }: DropdownPanelProps,\n  forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-panel\",\n    css: overflowPanelCss,\n    window: targetWindow,\n  });\n\n  const id = useId();\n  const collectionHook = useCollectionItems<ReactElement>({\n    id,\n    children,\n  });\n\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen || false,\n    name: \"DropdownPanel\",\n  });\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigationPanel({\n      cycleFocus: true,\n      defaultHighlightedIndex: 0,\n      focusOnHighlight: true,\n      indexPositions: collectionHook.data,\n    });\n\n  const focusTrigger = useCallback(() => {\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  }, []);\n\n  const setPanelRef = useCallback((el: HTMLElement | null) => el?.focus(), []);\n\n  const handleItemClick = (evt: MouseEvent) => {\n    // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n    setIsOpen(false);\n    focusTrigger();\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const getTriggerButtonIcon = () =>\n    (triggerButtonIcon ?? triggerButtonLabel === undefined) ? (\n      <OverflowMenuIcon />\n    ) : undefined;\n\n  return (\n    <DropdownBase\n      {...props}\n      className={clsx(withBaseName(), className)}\n      isOpen={isOpen}\n      onOpenChange={handleOpenChange}\n      placement=\"bottom-end\"\n      ref={forwardedRef}\n    >\n      <Button variant=\"secondary\" ref={triggerRef}>\n        {getTriggerButtonIcon()}\n        {triggerButtonLabel}\n      </Button>\n      <div\n        className={withBaseName(\"content\")}\n        ref={setPanelRef}\n        tabIndex={-1}\n        {...keyboardHook.listProps}\n      >\n        {collectionHook.data.map((item) => {\n          const { type } = item.value as ReactElement;\n          if (type === OverflowSeparator) {\n            return item.value;\n          }\n          const formFieldProps = {\n            id: item.id,\n            inOverflowPanel: true,\n            key: item.id,\n            onClick: handleItemClick,\n          } as ToolbarFieldProps;\n\n          if (type === ToolbarField) {\n            return cloneElement(item.value as ReactElement, formFieldProps);\n          }\n          return (\n            <ToolbarField {...formFieldProps} key={item.id}>\n              {item.value}\n            </ToolbarField>\n          );\n        })}\n      </div>\n    </DropdownBase>\n  );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}

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

@@ -1,12 +1,69 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 import { type CalendarCarouselProps } from "./internal/CalendarCarousel";
-import { type CalendarNavigationProps } from "./internal/CalendarNavigation";
-import { type useCalendarProps } from "./useCalendar";
-export declare type CalendarProps = useCalendarProps & {
+import { type UseCalendarMultiSelectProps, type UseCalendarOffsetProps, type UseCalendarRangeProps, type UseCalendarSingleProps } from "./useCalendar";
+/**
+ * Base props for the Calendar component.
+ */
+export interface CalendarBaseProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content to be rendered inside the Calendar.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names to apply to the Calendar.
+     */
     className?: string;
+    /**
+     * Function to render the contents of a day.
+     */
     renderDayContents?: CalendarCarouselProps["renderDayContents"];
-    hideYearDropdown?: CalendarNavigationProps["hideYearDropdown"];
-    borderedDropdown?: CalendarNavigationProps["borderedDropdown"];
+    /**
+     * Props for the tooltip component.
+     */
     TooltipProps?: CalendarCarouselProps["TooltipProps"];
+    /**
+     * If `true`, hides dates that are out of the selectable range.
+     */
     hideOutOfRangeDates?: CalendarCarouselProps["hideOutOfRangeDates"];
-};
+}
+/**
+ * Props for the Calendar component with single date selection.
+ */
+export interface CalendarSingleProps extends CalendarBaseProps, UseCalendarSingleProps {
+    /**
+     * The selection variant, set to "single".
+     */
+    selectionVariant: "single";
+}
+/**
+ * Props for the Calendar component with date range selection.
+ */
+export interface CalendarRangeProps extends CalendarBaseProps, UseCalendarRangeProps {
+    /**
+     * The selection variant, set to "range".
+     */
+    selectionVariant: "range";
+}
+/**
+ * Props for the Calendar component with multi-select date selection.
+ */
+export interface CalendarMultiSelectProps extends CalendarBaseProps, UseCalendarMultiSelectProps {
+    /**
+     * The selection variant, set to "multiselect".
+     */
+    selectionVariant: "multiselect";
+}
+/**
+ * Props for the Calendar component with offset date selection.
+ */
+export interface CalendarOffsetProps extends CalendarBaseProps, UseCalendarOffsetProps {
+    /**
+     * The selection variant, set to "offset".
+     */
+    selectionVariant: "offset";
+}
+/**
+ * Type representing the props for the Calendar component with various selection variants.
+ */
+export declare type CalendarProps = CalendarSingleProps | CalendarRangeProps | CalendarMultiSelectProps | CalendarOffsetProps;
 export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,57 @@
+import { type ButtonProps, type DropdownProps } from "@salt-ds/core";
+import { type ComponentPropsWithRef } from "react";
+import { type DateValue } from "@internationalized/date";
+declare type DateDropdownProps = DropdownProps<DateValue>;
+/**
+ * Props for the CalendarNavigation component.
+ */
+export interface CalendarNavigationProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Props for the month dropdown component.
+     */
+    MonthDropdownProps?: DateDropdownProps;
+    /**
+     * Props for the year dropdown component.
+     */
+    YearDropdownProps?: DateDropdownProps;
+    /**
+     * Callback fired when a month is selected.
+     * @param event - The change event.
+     */
+    onMonthSelect?: DateDropdownProps["onChange"];
+    /**
+     * Callback fired when a year is selected.
+     * @param event - The change event.
+     */
+    onYearSelect?: DateDropdownProps["onChange"];
+    /**
+     * Callback fired when navigating to the next month.
+     * @param event - The click event.
+     */
+    onNavigateNext?: ButtonProps["onClick"];
+    /**
+     * Callback fired when navigating to the previous month.
+     * @param event - The click event.
+     */
+    onNavigatePrevious?: ButtonProps["onClick"];
+    /**
+     * If `true`, hides the year dropdown.
+     */
+    hideYearDropdown?: boolean;
+    /**
+     * The step value for navigation. Defaults to 1.
+     */
+    step?: number;
+    /**
+     * Format the month dropdown values
+     * @param date
+     */
+    formatMonth?: (date: DateValue) => string;
+    /**
+     * Format the year dropdown values
+     * @param date
+     */
+    formatYear?: (date: DateValue) => string;
+}
+export declare const CalendarNavigation: import("react").ForwardRefExoticComponent<Omit<CalendarNavigationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,14 @@
+import { type DateValue } from "@internationalized/date";
+/**
+ * Gets the current locale from the browser.
+ * @returns The current locale as a string.
+ */
+export declare function getCurrentLocale(): string;
+/**
+ * Formats a date value according to the specified locale and options.
+ * @param date - The date value to format.
+ * @param locale - The locale to use for formatting. Defaults to the current locale.
+ * @param options - Additional options for date formatting.
+ * @returns The formatted date as a string.
+ */
+export declare function formatDate(date: DateValue | null, locale?: string, options?: Intl.DateTimeFormatOptions): string;

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

@@ -1,4 +1,6 @@
 export * from "./Calendar";
+export * from "./CalendarNavigation";
 export * from "./useCalendarDay";
 export * from "./useCalendar";
-export * from "./useSelection";
+export * from "./useCalendarSelection";
+export * from "./formatDate";

package/dist-types/calendar/internal/CalendarDay.d.ts

@@ -2,10 +2,11 @@ import type { DateValue } from "@internationalized/date";
 import { type TooltipProps } from "@salt-ds/core";
 import { type ComponentPropsWithRef, type ReactElement } from "react";
 import { type DayStatus } from "../useCalendarDay";
+import { formatDate as defaultFormatDate } from "./utils";
 export declare type DateFormatter = (day: Date) => string | undefined;
 export interface CalendarDayProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
     day: DateValue;
-    formatDate?: DateFormatter;
+    formatDate?: typeof defaultFormatDate;
     renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;
     status?: DayStatus;
     month: DateValue;

package/dist-types/calendar/internal/CalendarWeekHeader.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef } from "react";
-export declare type CalendarWeekHeaderProps = ComponentPropsWithRef<"div">;
-export declare const CalendarWeekHeader: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare type CalendarWeekHeaderProps = ComponentPropsWithRef<"div"> & {
+    locale: string;
+};
+export declare const CalendarWeekHeader: import("react").ForwardRefExoticComponent<Omit<CalendarWeekHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/internal/useFocusManagement.d.ts

@@ -1,7 +1,8 @@
 import { type DateValue } from "@internationalized/date";
 import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "react";
-export declare function useFocusManagement({ date }: {
+export declare function useFocusManagement({ date, locale, }: {
     date: DateValue;
+    locale: string;
 }): {
     handleClick: MouseEventHandler<HTMLButtonElement>;
     handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;

package/dist-types/calendar/internal/utils.d.ts

@@ -1,15 +1,14 @@
-import { DateFormatter, type DateValue } from "@internationalized/date";
-export declare function getCurrentLocale(): string;
-export declare function getDateFormatter(options?: Intl.DateTimeFormatOptions): DateFormatter;
-export declare function formatDate(date: DateValue, options?: Intl.DateTimeFormatOptions): string;
-export declare function getCalender(): import("@internationalized/date").Calendar;
+import { type CalendarDate, type DateValue } from "@internationalized/date";
+export declare function formatDate(date: DateValue, locale: string, options?: Intl.DateTimeFormatOptions): string;
+export declare function getCalendar(locale: string): import("@internationalized/date").Calendar;
 declare type WeekdayFormat = Intl.DateTimeFormatOptions["weekday"];
-export declare function daysForLocale(weekday?: WeekdayFormat): string[];
-export declare function monthsForLocale(currentYear: DateValue): (import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime)[];
-export declare function generateVisibleDays(currentMonth: DateValue): {
+export declare function daysForLocale(weekday: WeekdayFormat, locale: string): string[];
+export declare function monthsForLocale(currentYear: DateValue, locale: string): (CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime)[];
+export declare function generateVisibleDays(currentMonth: DateValue, locale: string): {
     date: DateValue;
     dateOfMonth: number;
     isCurrentMonth: boolean;
 }[];
 export declare function monthDiff(a: DateValue, b: DateValue): number;
+export declare function generateDatesForMonth(date: DateValue): CalendarDate[];
 export {};

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

@@ -1,33 +1,116 @@
 import { type DateValue } from "@internationalized/date";
 import { type SyntheticEvent } from "react";
-import { type UseMultiSelectionCalendarProps, type UseOffsetSelectionCalendarProps, type UseRangeSelectionCalendarProps, type UseSingleSelectionCalendarProps } from "./useSelection";
-interface BaseUseCalendarProps {
+import { type UseCalendarSelectionMultiSelectProps, type UseCalendarSelectionOffsetProps, type UseCalendarSelectionRangeProps, type UseCalendarSelectionSingleProps } from "./useCalendarSelection";
+/**
+ * Interface representing the base properties UseCalendar hook.
+ */
+interface UseCalendarBaseProps {
+    /**
+     * The default visible month.
+     */
     defaultVisibleMonth?: DateValue;
+    /**
+     * Callback fired when the visible month changes.
+     * @param event - The synthetic event.
+     * @param visibleMonth - The new visible month.
+     */
     onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: DateValue) => void;
+    /**
+     * 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: DateValue) => 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: DateValue) => string | false | undefined;
-    isDayDisabled?: (date: DateValue) => boolean;
+    /**
+     * 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: DateValue) => string | false | undefined;
+    /**
+     * The currently visible month.
+     */
     visibleMonth?: DateValue;
+    /**
+     * If `true`, hides dates that are out of the selectable range.
+     */
     hideOutOfRangeDates?: boolean;
-    hideYearDropdown?: boolean;
+    /**
+     * The minimum selectable date.
+     */
     minDate?: DateValue;
+    /**
+     * The maximum selectable date.
+     */
     maxDate?: DateValue;
+    /**
+     * The time zone used for date calculations.
+     */
+    timeZone?: string;
+    /**
+     * The locale used for date formatting.
+     */
+    locale?: string;
 }
-export declare type useCalendarProps = (Omit<UseSingleSelectionCalendarProps, "isDaySelectable"> | Omit<UseMultiSelectionCalendarProps, "isDaySelectable"> | Omit<UseRangeSelectionCalendarProps, "isDaySelectable"> | Omit<UseOffsetSelectionCalendarProps, "isDaySelectable">) & BaseUseCalendarProps;
-export declare function useCalendar(props: useCalendarProps): {
+/**
+ * UseCalendar hook props for a single date selection Calendar.
+ */
+export interface UseCalendarSingleProps extends UseCalendarSelectionSingleProps, UseCalendarBaseProps {
+    /**
+     * The selection variant, set to "single".
+     */
+    selectionVariant: "single";
+}
+/**
+ * UseCalendar hook props for a date range selection Calendar.
+ */
+export interface UseCalendarRangeProps extends UseCalendarSelectionRangeProps, UseCalendarBaseProps {
+    /**
+     * The selection variant, set to "range".
+     */
+    selectionVariant: "range";
+}
+/**
+ * UseCalendar hook props for a multi-select Calendar.
+ */
+export interface UseCalendarMultiSelectProps extends UseCalendarSelectionMultiSelectProps, UseCalendarBaseProps {
+    /**
+     * The selection variant, set to "multiselect".
+     */
+    selectionVariant: "multiselect";
+}
+/**
+ * UseCalendar hook props for an offset date selection Calendar.
+ */
+export interface UseCalendarOffsetProps extends UseCalendarSelectionOffsetProps, UseCalendarBaseProps {
+    /**
+     * The selection variant, set to "offset".
+     */
+    selectionVariant: "offset";
+}
+/**
+ * UseCalendar hook props, wth the selection variant determining the return type of the date selection
+ */
+export declare type UseCalendarProps = UseCalendarSingleProps | UseCalendarRangeProps | UseCalendarMultiSelectProps | UseCalendarOffsetProps;
+export declare function useCalendar(props: UseCalendarProps): {
     state: {
-        selectedDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | import("./useSelection").RangeSelectionValueType | {
-            startDate?: DateValue | undefined;
-            endDate?: DateValue | undefined;
-        } | DateValue[] | null | undefined;
+        selectedDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | import("./useCalendarSelection").DateRangeSelection | import("./useCalendarSelection").MultipleDateSelection | null | undefined;
         hoveredDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
         visibleMonth: DateValue;
-        focusedDate: DateValue;
+        focusedDate: DateValue | null;
         minDate: DateValue | undefined;
         maxDate: DateValue | undefined;
-        selectionVariant: "offset" | "range" | "default" | "multiselect";
+        selectionVariant: "offset" | "range" | "single" | "multiselect";
         hideOutOfRangeDates: boolean | undefined;
         calendarFocused: boolean;
+        timeZone: string;
+        locale: string;
     };
     helpers: {
         setSelectedDate: (event: SyntheticEvent<HTMLButtonElement, Event>, newSelectedDate: DateValue) => void;
@@ -39,16 +122,17 @@ export declare function useCalendar(props: useCalendarProps): {
         isSelectedStart: (date: DateValue) => boolean;
         isSelectedEnd: (date: DateValue) => boolean;
         isHoveredOffset: (date: DateValue) => boolean;
+        isDaySelectable: ((date: DateValue) => boolean) | undefined;
         setVisibleMonth: (event: SyntheticEvent, newVisibleMonth: DateValue) => void;
         setFocusedDate: (event: SyntheticEvent, date: DateValue) => void;
         setCalendarFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
         isDayUnselectable: (date: DateValue) => string | false | undefined;
         isDayHighlighted: (date: DateValue) => string | false | undefined;
-        isDayDisabled: (date: DateValue) => boolean;
+        isDayDisabled: (date: DateValue) => string | false | undefined;
         isDayVisible: (date: DateValue) => boolean;
-        isOutsideAllowedDates: (date: DateValue) => boolean;
-        isOutsideAllowedMonths: (date: DateValue) => boolean;
-        isOutsideAllowedYears: (date: DateValue) => boolean;
+        isOutsideAllowedDates: (date: DateValue) => boolean | undefined;
+        isOutsideAllowedMonths: (date: DateValue) => boolean | undefined;
+        isOutsideAllowedYears: (date: DateValue) => boolean | undefined;
     };
 };
 export {};

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

@@ -1,17 +1,53 @@
 import { type DateValue } from "@internationalized/date";
 import { type RefObject } from "react";
+/**
+ * Interface representing the status of a day in the Calendar.
+ */
 export interface DayStatus {
+    /**
+     * If `true`, the day is out of the selectable range.
+     */
     outOfRange?: boolean;
+    /**
+     * If `true`, the day is selected.
+     */
     selected?: boolean;
+    /**
+     * If `true`, the day is today.
+     */
     today?: boolean;
+    /**
+     * If set, the day is unselectable with a reason.
+     */
     unselectable?: string | false;
+    /**
+     * If set, the day is highlighted with a reason.
+     */
     highlighted?: string | false;
+    /**
+     * If `true`, the day is focused.
+     */
     focused?: boolean;
+    /**
+     * If `true`, the day is disabled.
+     */
     disabled?: boolean;
+    /**
+     * If `true`, the day is hidden.
+     */
     hidden?: boolean;
 }
+/**
+ * UseCalendar hook props to return a calendar day's status
+ */
 export interface useCalendarDayProps {
+    /**
+     * The date of the calendar day.
+     */
     date: DateValue;
+    /**
+     * The month of the calendar day.
+     */
     month: DateValue;
 }
 export declare function useCalendarDay({ date, month }: useCalendarDayProps, ref: RefObject<HTMLElement>): {
@@ -19,4 +55,6 @@ export declare function useCalendarDay({ date, month }: useCalendarDayProps, ref
     dayProps: Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">;
     unselectableReason: string | false | undefined;
     highlightedReason: string | false | undefined;
+    locale: string;
+    timeZone: string;
 };

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

@@ -0,0 +1,189 @@
+import { CalendarDate, CalendarDateTime, type DateValue, ZonedDateTime } from "@internationalized/date";
+import type { KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from "react";
+/**
+ * Type representing a single date selection.
+ */
+export declare type SingleDateSelection = DateValue;
+/**
+ * Type representing multiple date selections.
+ */
+export declare type MultipleDateSelection = DateValue[];
+/**
+ * Type representing a date range selection.
+ */
+export declare type DateRangeSelection = {
+    /**
+     * The start date of the range.
+     */
+    startDate?: DateValue | null;
+    /**
+     * The end date of the range.
+     */
+    endDate?: DateValue | null;
+};
+/**
+ * Type representing all possible selection value types.
+ */
+export declare type AllSelectionValueType = SingleDateSelection | MultipleDateSelection | DateRangeSelection | null;
+/**
+ * The default minimum year used by the calendar.
+ */
+export declare const CALENDAR_MIN_YEAR = 1900;
+/**
+ * The default maximum year used by the calendar.
+ */
+export declare const CALENDAR_MAX_YEAR = 2100;
+/**
+ * Checks if a value is a single date selection.
+ * @param value - The value to check.
+ * @returns `true` if the value is a single date selection, otherwise `false`.
+ */
+export declare function isSingleSelectionValueType(value: any): value is DateValue;
+/**
+ * Checks if a value is a date range selection.
+ * @param value - The value to check.
+ * @returns `true` if the value is a date range selection, otherwise `false`.
+ */
+export declare function isDateRangeSelection(value: any): value is DateRangeSelection;
+/**
+ * Checks if a value is a multiple date selection.
+ * @param value - The value to check.
+ * @returns `true` if the value is a multiple date selection, otherwise `false`.
+ */
+export declare function isMultipleDateSelection(value: any): value is MultipleDateSelection;
+/**
+ * Base properties for calendar UseCalendarSelection hook.
+ * @template SelectionVariantType - The type of the selection variant.
+ */
+interface UseCalendarSelectionBaseProps<SelectionVariantType> {
+    /**
+     * The currently hovered date.
+     */
+    hoveredDate?: DateValue | null;
+    /**
+     * The currently selected date.
+     */
+    selectedDate?: SelectionVariantType | null;
+    /**
+     * The default selected date.
+     */
+    defaultSelectedDate?: SelectionVariantType;
+    /**
+     * Callback fired when the selected date changes.
+     * @param event - The synthetic event.
+     * @param selectedDate - The new selected date.
+     */
+    onSelectedDateChange?: (event: SyntheticEvent, selectedDate: SelectionVariantType | null) => void;
+    /**
+     * 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: DateValue) => boolean;
+    /**
+     * Callback fired when the hovered date changes.
+     * @param event - The synthetic event.
+     * @param hoveredDate - The new hovered date.
+     */
+    onHoveredDateChange?: (event: SyntheticEvent, hoveredDate: DateValue | null) => void;
+    /**
+     * Function to select a new date.
+     * @param currentSelectedDate - The current selected date.
+     * @param newSelectedDate - The new date to select.
+     * @returns The updated selection variant type.
+     */
+    select?: (currentSelectedDate: SelectionVariantType, newSelectedDate: DateValue) => SelectionVariantType;
+}
+/**
+ * UseCalendar hook props to return a calendar day's status
+ */
+export interface UseCalendarSelectionOffsetProps extends Omit<UseCalendarSelectionBaseProps<DateRangeSelection>, "startDateOffset" | "endDateOffset"> {
+    /**
+     * The selection variant, set to "offset".
+     */
+    selectionVariant: "offset";
+    /**
+     * Function to calculate the start date offset.
+     * @param date - The date to offset.
+     * @returns The offset start date.
+     */
+    startDateOffset?: (date: DateValue) => DateValue;
+    /**
+     * Function to calculate the end date offset.
+     * @param date - The date to offset.
+     * @returns The offset end date.
+     */
+    endDateOffset?: (date: DateValue) => DateValue;
+}
+/**
+ * Properties for the range date selection hook.
+ */
+export interface UseCalendarSelectionRangeProps extends UseCalendarSelectionBaseProps<DateRangeSelection> {
+    /**
+     * The selection variant, set to "range".
+     */
+    selectionVariant: "range";
+}
+/**
+ * Properties for the multi-select date selection hook.
+ */
+export interface UseCalendarSelectionMultiSelectProps extends UseCalendarSelectionBaseProps<MultipleDateSelection> {
+    /**
+     * The selection variant, set to "multiselect".
+     */
+    selectionVariant: "multiselect";
+}
+/**
+ * Properties for the single date selection hook.
+ */
+export interface UseCalendarSelectionSingleProps extends UseCalendarSelectionBaseProps<SingleDateSelection> {
+    /**
+     * The selection variant, set to "single".
+     */
+    selectionVariant: "single";
+}
+/**
+ * UseCalendarSelection hook props, wth the selection variant determining the return type of the date selection
+ */
+export declare type UseCalendarSelectionProps = UseCalendarSelectionSingleProps | UseCalendarSelectionMultiSelectProps | UseCalendarSelectionRangeProps | UseCalendarSelectionOffsetProps;
+export declare function useCalendarSelection(props: UseCalendarSelectionProps): {
+    state: {
+        selectedDate: CalendarDate | CalendarDateTime | ZonedDateTime | DateRangeSelection | MultipleDateSelection | null | undefined;
+        hoveredDate: CalendarDate | CalendarDateTime | ZonedDateTime | null | undefined;
+    };
+    helpers: {
+        setSelectedDate: (event: SyntheticEvent<HTMLButtonElement>, newSelectedDate: DateValue) => void;
+        isSelected: (date: DateValue) => boolean;
+        setHoveredDate: (event: SyntheticEvent, date: DateValue | null) => void;
+        isHovered: (date: DateValue) => boolean;
+        isSelectedSpan: (date: DateValue) => boolean;
+        isHoveredSpan: (date: DateValue) => boolean;
+        isSelectedStart: (date: DateValue) => boolean;
+        isSelectedEnd: (date: DateValue) => boolean;
+        isHoveredOffset: (date: DateValue) => boolean;
+        isDaySelectable: ((date: DateValue) => boolean) | undefined;
+    };
+};
+export declare function useCalendarSelectionDay({ date }: {
+    date: DateValue;
+}): {
+    handleClick: MouseEventHandler<HTMLButtonElement>;
+    handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    handleMouseOver: MouseEventHandler<HTMLButtonElement>;
+    handleMouseLeave: MouseEventHandler<HTMLButtonElement>;
+    status: {
+        selected: boolean;
+        selectedSpan: boolean;
+        hoveredSpan: boolean;
+        selectedStart: boolean;
+        selectedEnd: boolean;
+        hovered: boolean;
+        hoveredOffset: boolean;
+    };
+    dayProps: {
+        className: string;
+        "aria-pressed": string | undefined;
+        "aria-disabled": string | undefined;
+    };
+};
+export {};