react-aria-components 1.17.0 → 1.18.0

package/dist/types/src/Slider.d.ts

@@ -6,7 +6,9 @@ import React, { HTMLAttributes, OutputHTMLAttributes } from 'react';
 import { SliderState } from 'react-stately/useSliderState';
 export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps<T>, 'label'>, RenderProps<SliderRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
     /**
-     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+     * element. A function may be provided to compute the class based on component state.
+     *
      * @default 'react-aria-Slider'
      */
     className?: ClassNameOrFunction<SliderRenderProps>;
@@ -18,15 +20,18 @@ export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps
 export declare const SliderContext: React.Context<ContextValue<SliderProps<number | number[]>, HTMLDivElement>>;
 export declare const SliderStateContext: React.Context<SliderState | null>;
 export declare const SliderTrackContext: React.Context<ContextValue<SliderTrackContextValue, HTMLDivElement>>;
+export declare const SliderFillContext: React.Context<ContextValue<SliderFillProps, HTMLDivElement>>;
 export declare const SliderOutputContext: React.Context<ContextValue<SliderOutputContextValue, HTMLOutputElement>>;
 export interface SliderRenderProps {
     /**
      * The orientation of the slider.
+     *
      * @selector [data-orientation="horizontal | vertical"]
      */
     orientation: Orientation;
     /**
      * Whether the slider is disabled.
+     *
      * @selector [data-disabled]
      */
     isDisabled: boolean;
@@ -41,7 +46,9 @@ export interface SliderRenderProps {
 export declare const Slider: <T extends number | number[]>(props: SliderProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
 export interface SliderOutputProps extends RenderProps<SliderRenderProps, 'output'>, GlobalDOMAttributes<HTMLOutputElement> {
     /**
-     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+     * element. A function may be provided to compute the class based on component state.
+     *
      * @default 'react-aria-SliderOutput'
      */
     className?: ClassNameOrFunction<SliderRenderProps>;
@@ -55,13 +62,16 @@ export declare const SliderOutput: (props: SliderOutputProps & React.RefAttribut
 export interface SliderTrackRenderProps extends SliderRenderProps {
     /**
      * Whether the slider track is currently hovered with a mouse.
+     *
      * @selector [data-hovered]
      */
     isHovered: boolean;
 }
 export interface SliderTrackProps extends HoverEvents, RenderProps<SliderTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
     /**
-     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+     * element. A function may be provided to compute the class based on component state.
+     *
      * @default 'react-aria-SliderTrack'
      */
     className?: ClassNameOrFunction<SliderTrackRenderProps>;
@@ -79,33 +89,40 @@ export interface SliderThumbRenderProps {
     state: SliderState;
     /**
      * Whether this thumb is currently being dragged.
+     *
      * @selector [data-dragging]
      */
     isDragging: boolean;
     /**
      * Whether the thumb is currently hovered with a mouse.
+     *
      * @selector [data-hovered]
      */
     isHovered: boolean;
     /**
      * Whether the thumb is currently focused.
+     *
      * @selector [data-focused]
      */
     isFocused: boolean;
     /**
      * Whether the thumb is keyboard focused.
+     *
      * @selector [data-focus-visible]
      */
     isFocusVisible: boolean;
     /**
      * Whether the thumb is disabled.
+     *
      * @selector [data-disabled]
      */
     isDisabled: boolean;
 }
 export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | 'validationState'>, HoverEvents, RenderProps<SliderThumbRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
     /**
-     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+     * element. A function may be provided to compute the class based on component state.
+     *
      * @default 'react-aria-SliderThumb'
      */
     className?: ClassNameOrFunction<SliderThumbRenderProps>;
@@ -118,4 +135,31 @@ export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | '
  * A slider thumb represents an individual value that the user can adjust within a slider track.
  */
 export declare const SliderThumb: (props: SliderThumbProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export interface SliderFillRenderProps extends SliderRenderProps {
+    /**
+     * Whether the slider fill is currently hovered with a mouse.
+     *
+     * @selector [data-hovered]
+     */
+    isHovered: boolean;
+}
+export interface SliderFillProps extends HoverEvents, RenderProps<SliderFillRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+    /**
+     * The offset from which to start the fill.
+     *
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+     * element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'react-aria-SliderFill'
+     */
+    className?: ClassNameOrFunction<SliderFillRenderProps>;
+}
+/**
+ * Displays the selected range.
+ */
+export declare const SliderFill: (props: SliderFillProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
 export {};

package/dist/types/src/Switch.d.ts

@@ -1,12 +1,14 @@
 import { AriaSwitchProps } from 'react-aria/useSwitch';
-import { ClassNameOrFunction, ContextValue, RenderProps, SlotProps } from './utils';
+import { ClassNameOrFunction, ContextValue, RACValidation, RenderProps, SlotProps } from './utils';
 import { GlobalDOMAttributes, RefObject } from '@react-types/shared';
 import { HoverEvents } from '@react-types/shared';
 import React from 'react';
 import { ToggleState } from 'react-stately/useToggleState';
-export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
+export interface SwitchProps extends Omit<AriaSwitchProps, 'children' | 'validationState' | 'validationBehavior' | 'isRequired' | 'isInvalid' | 'validate'>, HoverEvents, RenderProps<SwitchRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
     /**
-     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+     * element. A function may be provided to compute the class based on component state.
+     *
      * @default 'react-aria-Switch'
      */
     className?: ClassNameOrFunction<SwitchRenderProps>;
@@ -15,39 +17,68 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEve
      */
     inputRef?: RefObject<HTMLInputElement | null>;
 }
+export interface SwitchFieldProps extends Omit<AriaSwitchProps, 'children' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<SwitchFieldRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+     * element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'react-aria-SwitchField'
+     */
+    className?: ClassNameOrFunction<SwitchFieldRenderProps>;
+    /**
+     * A ref for the HTML input element.
+     */
+    inputRef?: RefObject<HTMLInputElement | null>;
+}
+export interface SwitchButtonProps extends HoverEvents, RenderProps<SwitchButtonRenderProps, 'label'>, SlotProps, GlobalDOMAttributes<HTMLLabelElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+     * element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'react-aria-SwitchButton'
+     */
+    className?: ClassNameOrFunction<SwitchButtonRenderProps>;
+}
 export interface SwitchRenderProps {
     /**
      * Whether the switch is selected.
+     *
      * @selector [data-selected]
      */
     isSelected: boolean;
     /**
      * Whether the switch is currently hovered with a mouse.
+     *
      * @selector [data-hovered]
      */
     isHovered: boolean;
     /**
      * Whether the switch is currently in a pressed state.
+     *
      * @selector [data-pressed]
      */
     isPressed: boolean;
     /**
      * Whether the switch is focused, either via a mouse or keyboard.
+     *
      * @selector [data-focused]
      */
     isFocused: boolean;
     /**
      * Whether the switch is keyboard focused.
+     *
      * @selector [data-focus-visible]
      */
     isFocusVisible: boolean;
     /**
      * Whether the switch is disabled.
+     *
      * @selector [data-disabled]
      */
     isDisabled: boolean;
     /**
      * Whether the switch is read only.
+     *
      * @selector [data-readonly]
      */
     isReadOnly: boolean;
@@ -56,8 +87,74 @@ export interface SwitchRenderProps {
      */
     state: ToggleState;
 }
+export interface SwitchFieldRenderProps {
+    /**
+     * Whether the switch is selected.
+     *
+     * @selector [data-selected]
+     */
+    isSelected: boolean;
+    /**
+     * Whether the switch is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the switch is read only.
+     *
+     * @selector [data-readonly]
+     */
+    isReadOnly: boolean;
+    /**
+     * Whether the switch invalid.
+     *
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the switch is required.
+     *
+     * @selector [data-required]
+     */
+    isRequired: boolean;
+    /**
+     * State of the switch.
+     */
+    state: ToggleState;
+}
+export interface SwitchButtonRenderProps extends SwitchRenderProps {
+    /**
+     * Whether the switch invalid.
+     *
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the switch is required.
+     *
+     * @selector [data-required]
+     */
+    isRequired: boolean;
+    /**
+     * State of the switch.
+     */
+    state: ToggleState;
+}
 export declare const SwitchContext: React.Context<ContextValue<SwitchProps, HTMLLabelElement>>;
+export declare const SwitchFieldContext: React.Context<ContextValue<SwitchFieldProps, HTMLDivElement>>;
+export declare const ToggleStateContext: React.Context<ToggleState | null>;
 /**
  * A switch allows a user to turn a setting on or off.
+ *
+ * @deprecated Use SwitchField + SwitchButton instead.
  */
 export declare const Switch: (props: SwitchProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+/**
+ * A switch allows a user to turn a setting on or off, with support for validation and help text.
+ */
+export declare const SwitchField: (props: SwitchFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+/**
+ * A switch button is the clickable area of a switch, including the indicator and label.
+ */
+export declare const SwitchButton: (props: SwitchButtonProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;