@react-spectrum/s2 1.3.1 → 1.5.0

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

@@ -6,11 +6,13 @@ import { StylesPropWithHeight, UnsafeStyles } from './style-utils';
 export interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {
     /**
      * The size of the ColorSwatch.
+     *
      * @default 'M'
      */
     size?: 'XS' | 'S' | 'M' | 'L';
     /**
      * The corner rounding of the ColorSwatch.
+     *
      * @default 'default'
      */
     rounding?: 'default' | 'none' | 'full';

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

@@ -8,16 +8,19 @@ export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>
     children: ReactNode;
     /**
      * The amount of padding between the swatches.
+     *
      * @default 'regular'
      */
     density?: 'compact' | 'regular' | 'spacious';
     /**
      * The size of the color swatches.
+     *
      * @default 'M'
      */
     size?: 'XS' | 'S' | 'M' | 'L';
     /**
      * The corner rounding of the color swatches.
+     *
      * @default 'none'
      */
     rounding?: 'none' | 'default' | 'full';

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

@@ -14,8 +14,12 @@ export interface ComboboxStyleProps {
      * @default 'M'
      */
     size?: 'S' | 'M' | 'L' | 'XL';
+    /**
+     * The prefix to display in the ComboBox. A non-interactive element that appears before the input.
+     */
+    prefix?: ReactNode;
 }
-export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'render' | 'defaultFilter' | 'allowsEmptyCollection' | 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | keyof GlobalDOMAttributes>, Omit<SingleSelection, 'disallowEmptySelection'>, ComboboxStyleProps, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<ListBoxProps<T>, 'items' | 'dependencies'>, Pick<AriaPopoverProps, 'shouldFlip'>, Pick<AsyncLoadable, 'onLoadMore'>, Pick<InputProps, 'placeholder'> {
+export interface ComboBoxProps<T> extends Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'render' | 'defaultFilter' | 'allowsEmptyCollection' | 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | keyof GlobalDOMAttributes>, Omit<SingleSelection, 'disallowEmptySelection'>, ComboboxStyleProps, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<ListBoxProps<T>, 'items' | 'dependencies'>, Pick<AriaPopoverProps, 'shouldFlip'>, Pick<AsyncLoadable, 'onLoadMore'>, Pick<InputProps, 'placeholder'> {
     /** The contents of the collection. */
     children: ReactNode | ((item: T) => ReactNode);
     /**
@@ -30,9 +34,15 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
      * @default 'start'
      */
     align?: 'start' | 'end';
-    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
+    /**
+     * Width of the menu. By default, matches width of the trigger. Note that the minimum width of the
+     * dropdown is always equal to the trigger's width.
+     */
     menuWidth?: number;
-    /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */
+    /**
+     * The current loading state of the ComboBox. Determines whether or not the progress circle should
+     * be shown.
+     */
     loadingState?: LoadingState;
 }
 export declare const ComboBoxContext: import("react").Context<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef<HTMLInputElement>>>;
@@ -72,16 +82,17 @@ export declare const LOADER_ROW_HEIGHTS: {
     };
 };
 /**
- * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
+ * ComboBox allow users to choose a single option from a collapsible list of options when space is
+ * limited.
  */
-export declare const ComboBox: <T extends object>(props: ComboBoxProps<T> & import("react").RefAttributes<TextFieldRef<HTMLInputElement>>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export declare const ComboBox: <T>(props: ComboBoxProps<T> & import("react").RefAttributes<TextFieldRef<HTMLInputElement>>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | 'onKeyDown' | 'onKeyUp' | keyof GlobalDOMAttributes>, StyleProps {
     children: ReactNode;
 }
 export declare function ComboBoxItem(props: ComboBoxItemProps): ReactNode;
-export interface ComboBoxSectionProps<T extends object> extends Omit<ListBoxSectionProps<T>, 'style' | 'className' | 'render' | keyof GlobalDOMAttributes> {
+export interface ComboBoxSectionProps<T> extends Omit<ListBoxSectionProps<T>, 'style' | 'className' | 'render' | keyof GlobalDOMAttributes> {
 }
-export declare function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode;
+export declare function ComboBoxSection<T>(props: ComboBoxSectionProps<T>): ReactNode;
 export declare const Divider: (props: {
     size?: "L" | "M" | "S" | "XL" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -5,9 +5,10 @@ import { DialogTriggerProps } from './DialogTrigger';
 import { Placement } from 'react-aria-components/Popover';
 import { PopoverDialogProps } from './Popover';
 import { StyleProps } from './style-utils';
-export interface ContextualHelpPopoverProps extends PopoverDialogProps {
+export interface ContextualHelpPopoverProps extends Omit<PopoverDialogProps, 'isNonModal'> {
     /**
-     * The children of the contextual help popover. Supports Heading, Content, and Footer elements. */
+     * The children of the contextual help popover. Supports Heading, Content, and Footer elements.
+     */
     children: ReactNode;
 }
 /**
@@ -25,6 +26,7 @@ export interface ContextualHelpStyleProps {
 export interface ContextualHelpProps extends Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>, Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>, ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {
     /**
      * The placement of the popover with respect to the action button.
+     *
      * @default 'bottom start'
      */
     placement?: Placement;
@@ -39,6 +41,7 @@ export interface ContextualHelpProps extends Pick<DialogTriggerProps, 'isOpen' |
 }
 export declare const ContextualHelpContext: import("react").Context<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
 /**
- * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
+ * Contextual help shows a user extra information about the state of an adjacent component, or a
+ * total view.
  */
 export declare const ContextualHelp: import("react").ForwardRefExoticComponent<ContextualHelpProps & import("react").RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;

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

@@ -14,6 +14,7 @@ export interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 's
     isKeyboardDismissDisabled?: boolean;
     /**
      * The amount of padding around the contents of the dialog.
+     *
      * @default 'default'
      */
     padding?: 'default' | 'none';

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

@@ -13,7 +13,9 @@ export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePicke
      */
     size?: 'S' | 'M' | 'L' | 'XL';
     /**
-     * The maximum number of months to display at once in the calendar popover, if screen space permits.
+     * The maximum number of months to display at once in the calendar popover, if screen space
+     * permits.
+     *
      * @default 1
      */
     maxVisibleMonths?: number;
@@ -21,7 +23,8 @@ export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePicke
 export declare const DatePickerContext: import("react").Context<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>;
 export declare const timeField: import("../style/types").StyleString<"flexGrow" | "flexShrink" | "minWidth" | "width">;
 /**
- * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date
+ * and time value.
  */
 export declare const DatePicker: <T extends DateValue>(props: DatePickerProps<T> & import("react").RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 export declare function CalendarPopover(props: Omit<PopoverProps, 'children'> & {

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

@@ -13,7 +13,9 @@ export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDate
      */
     size?: 'S' | 'M' | 'L' | 'XL';
     /**
-     * The maximum number of months to display at once in the calendar popover, if screen space permits.
+     * The maximum number of months to display at once in the calendar popover, if screen space
+     * permits.
+     *
      * @default 1
      */
     maxVisibleMonths?: number;

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

@@ -17,7 +17,8 @@ export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'
 }
 export declare const dialogInner: import("../style/types").StyleString<"borderRadius" | "boxSizing" | "display" | "flexDirection" | "flexGrow" | "fontFamily" | "maxHeight" | "outlineStyle" | "overflow">;
 /**
- * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
- * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
+ * Dialogs are windows containing contextual information, tasks, or workflows that appear over the
+ * user interface. Depending on the kind of Dialog, further interactions may be blocked until the
+ * Dialog is acknowledged.
  */
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLElement>>>;

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

@@ -3,8 +3,8 @@ import { ReactNode } from 'react';
 export interface DialogTriggerProps extends AriaDialogTriggerProps {
 }
 /**
- * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
- * open state with the trigger's press state. Additionally, it allows you to customize the type and
- * positioning of the Dialog.
+ * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the
+ * Dialog's open state with the trigger's press state. Additionally, it allows you to customize the
+ * type and positioning of the Dialog.
  */
 export declare function DialogTrigger(props: DialogTriggerProps): ReactNode;

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

@@ -1,16 +1,18 @@
 import { AriaLabelingProps, DOMProps, DOMRefValue, GlobalDOMAttributes } from '@react-types/shared';
 import { ContextValue } from 'react-aria-components/slots';
 import { DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components/Disclosure';
-import { StyleProps, UnsafeStyles } from './style-utils';
+import { StyleProps, StylesPropWithFont, UnsafeStyles } from './style-utils';
 import React, { ReactNode } from 'react';
 export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
     /**
      * The size of the disclosure.
+     *
      * @default 'M'
      */
     size?: 'S' | 'M' | 'L' | 'XL';
     /**
      * The amount of space between the disclosures.
+     *
      * @default 'regular'
      */
     density?: 'compact' | 'regular' | 'spacious';
@@ -21,23 +23,31 @@ export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' |
 }
 export declare const DisclosureContext: React.Context<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>;
 /**
- * A disclosure is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.
+ * A disclosure is a collapsible section of content. It is composed of a header with a heading and
+ * trigger button, and a panel that contains the content.
  */
 export declare const Disclosure: React.ForwardRefExoticComponent<DisclosureProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
 export interface DisclosureTitleProps extends UnsafeStyles, DOMProps {
-    /** The heading level of the disclosure header.
+    /**
+     * The heading level of the disclosure header.
      *
      * @default 3
      */
     level?: number;
     /** The contents of the disclosure header. */
     children: React.ReactNode;
+    /**
+     * Spectrum-defined styles, returned by the `style()` macro. Only allows overriding
+     * `font`, `fontFamily`, `fontWeight`, `fontSize`, and `lineHeight`.
+     */
+    styles?: StylesPropWithFont;
 }
 interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {
     children: React.ReactNode;
 }
 /**
- * A wrapper element for the disclosure title that can contain other elements not part of the trigger.
+ * A wrapper element for the disclosure title that can contain other elements not part of the
+ * trigger.
  */
 export declare const DisclosureHeader: (props: DisclosureHeaderProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
 /**
@@ -48,7 +58,8 @@ export interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'cla
     children: React.ReactNode;
 }
 /**
- * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
+ * A disclosure panel is a collapsible section of content that is hidden until the disclosure is
+ * expanded.
  */
 export declare const DisclosurePanel: React.ForwardRefExoticComponent<DisclosurePanelProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
 export {};

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

@@ -5,11 +5,13 @@ import { SeparatorProps as RACSeparatorProps } from 'react-aria-components/Separ
 interface DividerSpectrumProps {
     /**
      * How thick the Divider should be.
+     *
      * @default 'M'
      */
     size?: 'S' | 'M' | 'L';
     /**
      * The orientation of the Divider.
+     *
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';

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

@@ -0,0 +1,42 @@
+import { DragItem } from '@react-types/shared';
+import { ReactNode } from 'react';
+export declare let label: (props: {
+    overflowMode: "wrap" | undefined;
+    size: "L" | "S" | "XL" | "XS" | undefined;
+} | {
+    [x: string]: any;
+}) => import("../style/types").StyleString<"alignSelf" | "color" | "font" | "gridArea" | "truncate" | "whiteSpace">;
+export declare let description: (props: {
+    isDisabled: boolean | undefined;
+    isFocusVisible: boolean | undefined;
+    isHovered: boolean | undefined;
+    isPressed: boolean | undefined;
+    overflowMode: "wrap" | undefined;
+} | {
+    [x: string]: any;
+}) => import("../style/types").StyleString<"alignSelf" | "color" | "font" | "gridArea" | "transition" | "truncate" | "whiteSpace">;
+export declare let iconCenterWrapper: import("../style/types").StyleString<"alignItems" | "alignSelf" | "display" | "gridArea" | "gridRowEnd">;
+export declare let icon: import("../style/types").StyleString<"--iconPrimary" | "display" | "marginEnd" | "size">;
+export declare let dragPreviewWrapper: import("../style/types").StyleString<"position">;
+export declare let dragPreviewCardBack: import("../style/types").StyleString<"backgroundColor" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "height" | "left" | "position" | "top" | "width" | "zIndex">;
+export declare let dragPreviewCard: (props: {
+    scale?: "large" | "medium" | undefined;
+}) => import("../style/types").StyleString<"alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomEndRadius" | "borderBottomRadius" | "borderBottomStartRadius" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndRadius" | "borderEndWidth" | "borderRadius" | "borderSpacing" | "borderStartRadius" | "borderStartWidth" | "borderStyle" | "borderTopEndRadius" | "borderTopRadius" | "borderTopStartRadius" | "borderTopWidth" | "borderWidth" | "borderXWidth" | "borderYWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "color" | "colorScheme" | "columnGap" | "contain" | "containIntrinsicHeight" | "containIntrinsicWidth" | "containerName" | "containerType" | "cursor" | "disableTapHighlight" | "display" | "fill" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFamily" | "fontSize" | "fontWeight" | "forcedColorAdjust" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "hyphens" | "inset" | "insetEnd" | "insetStart" | "insetX" | "insetY" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "lineClamp" | "lineHeight" | "listStylePosition" | "listStyleType" | "margin" | "marginBottom" | "marginEnd" | "marginStart" | "marginTop" | "marginX" | "marginY" | "maxHeight" | "maxSize" | "maxWidth" | "minHeight" | "minSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorX" | "overscrollBehaviorY" | "padding" | "paddingBottom" | "paddingEnd" | "paddingStart" | "paddingTop" | "paddingX" | "paddingY" | "placeContent" | "placeItems" | "placeSelf" | "pointerEvents" | "position" | "resize" | "right" | "rotate" | "rowGap" | "scale" | "scaleX" | "scaleY" | "scrollBehavior" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginEnd" | "scrollMarginStart" | "scrollMarginTop" | "scrollMarginX" | "scrollMarginY" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingEnd" | "scrollPaddingStart" | "scrollPaddingTop" | "scrollPaddingX" | "scrollPaddingY" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarWidth" | "size" | "stroke" | "strokeWidth" | "tableLayout" | "textAlign" | "textDecoration" | "textIndent" | "textOverflow" | "textTransform" | "textWrap" | "top" | "touchAction" | "transform" | "transformOrigin" | "transition" | "transitionDelay" | "transitionDuration" | "transitionTimingFunction" | "translate" | "translateX" | "translateY" | "truncate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "width" | "willChange" | "wordBreak" | "zIndex" | `--${string}`>;
+export declare let dragPreviewBadge: import("../style/types").StyleString<"alignSelf" | "backgroundColor" | "borderRadius" | "color" | "font" | "fontWeight" | "forcedColorAdjust" | "gridArea" | "paddingX" | "paddingY">;
+export interface DragPreviewProps {
+    /** The currently dragged items, sourced from renderDragPreview. */
+    items: DragItem[];
+    /** The overflow mode to be applied on the drag preview. */
+    overflowMode?: 'wrap' | 'truncate';
+    /**
+     * The contents of the drag preview. Supports the `label`, `description`, and `icon` slots.
+     * If no children are provided, defaults to the first drag item's plain text content.
+     */
+    children?: ReactNode;
+}
+/**
+ * The default drag preview rendered by the collection element during drag and drop. Pass this to
+ * your drag hooks' `renderDragPreview` to match the default visual. To customize the drag preview's
+ * contents, use Text with the "label" and "description" slots and/or a Icon for the leading icon.
+ */
+export declare function DragPreview(props: DragPreviewProps): import("react").JSX.Element;

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

@@ -12,6 +12,7 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
     isFilled?: boolean;
     /**
      * The message to replace the default banner message that is shown when the drop zone is filled.
+     *
      * @default 'Drop file to replace'
      */
     replaceMessage?: string;

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

@@ -3,8 +3,8 @@ import { StyleProps, UnsafeStyles } from './style-utils';
 import { FieldErrorProps } from 'react-aria-components/FieldError';
 import { ReactNode } from 'react';
 import { GroupProps } from 'react-aria-components/Group';
-import { LabelProps } from 'react-aria-components/Label';
 import { InputProps as RACInputProps } from 'react-aria-components/Input';
+import { LabelProps } from 'react-aria-components/Label';
 import { StyleString } from '../style/types';
 interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'render' | 'children'>, StyleProps {
     isDisabled?: boolean;
@@ -20,22 +20,24 @@ interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'rend
     children?: ReactNode;
 }
 export declare const FieldLabel: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLLabelElement>>>;
-interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'render' | 'children'>, UnsafeStyles {
+interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'render' | 'children' | 'prefix'>, UnsafeStyles {
     size?: 'S' | 'M' | 'L' | 'XL';
     children: ReactNode;
     styles?: StyleString;
     shouldTurnOffFocusRing?: boolean;
+    prefix?: ReactNode;
 }
 export declare const FieldGroup: import("react").ForwardRefExoticComponent<FieldGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface InputProps extends Omit<RACInputProps, 'className' | 'style' | 'render'>, StyleProps {
 }
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 interface HelpTextProps extends FieldErrorProps {
-    size?: 'S' | 'M' | 'L' | 'XL';
+    size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
     isDisabled?: boolean;
     isInvalid?: boolean;
     description?: ReactNode;
     showErrorIcon?: boolean;
+    styles?: StyleString;
 }
 export declare const helpTextStyles: (props: {
     isDisabled: boolean | undefined;

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

@@ -5,6 +5,7 @@ import { FormProps as RACFormProps } from 'react-aria-components/Form';
 interface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'contextualHelp'> {
     /**
      * Size of the Form elements.
+     *
      * @default 'M'
      */
     size?: 'S' | 'M' | 'L' | 'XL';
@@ -19,7 +20,8 @@ export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className
 export declare const FormContext: import("react").Context<Partial<FormStyleProps | null>>;
 export declare function useFormProps<T extends FormStyleProps>(props: T): T;
 /**
- * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
+ * Forms allow users to enter data that can be submitted while providing alignment and styling for
+ * form fields.
  */
 export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLFormElement>>>;
 export {};

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

@@ -4,7 +4,8 @@ import { StyleProps } from './style-utils';
 export interface FullscreenDialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {
     /**
      * The variant of fullscreen dialog to display.
-     * @default "fullscreen"
+     *
+     * @default 'fullscreen'
      */
     variant?: 'fullscreen' | 'fullscreenTakeover';
     /** Whether pressing the escape key to close the dialog should be disabled. */
@@ -12,6 +13,7 @@ export interface FullscreenDialogProps extends Omit<RACDialogProps, 'className'
 }
 export declare const dialogInner: import("../style/types").StyleString<"borderRadius" | "boxSizing" | "columnGap" | "display" | "fontFamily" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "maxHeight" | "outlineStyle" | "overflow" | "padding">;
 /**
- * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
+ * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be
+ * used for modal experiences with complex workflows.
  */
 export declare const FullscreenDialog: import("react").ForwardRefExoticComponent<FullscreenDialogProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLElement>>>;

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

@@ -10,7 +10,8 @@ export interface ImageSource {
      */
     srcSet?: string | undefined;
     /**
-     * The color scheme for this image source. Unlike `media`, this respects the `Provider` color scheme setting.
+     * The color scheme for this image source. Unlike `media`, this respects the `Provider` color
+     * scheme setting.
      */
     colorScheme?: 'light' | 'dark';
     /**
@@ -84,13 +85,13 @@ export interface ImageProps extends UnsafeStyles, SlotProps {
     /** A function that is called to render a fallback when the image fails to load. */
     renderError?: () => ReactNode;
     /**
-     * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.
-     * If not provided, the default image group is used.
+     * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>`
+     * component. If not provided, the default image group is used.
      */
     group?: ImageGroup;
     /**
-     * Associates the image with a microdata object.
-     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).
+     * Associates the image with a microdata object. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).
      */
     itemProp?: string;
 }

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

@@ -3,7 +3,9 @@ export interface ImageCoordinatorProps {
     /** Children within the ImageCoordinator. */
     children: ReactNode;
     /**
-     * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.
+     * Time in milliseconds after which images are always displayed, even if all images are not yet
+     * loaded.
+     *
      * @default 5000
      */
     timeout?: number;

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

@@ -15,19 +15,21 @@ export interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProp
 interface InlineStylesProps {
     /**
      * The semantic tone of a Inline Alert.
+     *
      * @default neutral
      */
     variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral';
     /**
      * The visual style of the Inline Alert.
+     *
      * @default border
      */
     fillStyle?: 'border' | 'subtleFill' | 'boldFill';
 }
 export declare const InlineAlertContext: import("react").Context<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>;
 /**
- * Inline alerts display a non-modal message associated with objects in a view.
- * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
+ * Inline alerts display a non-modal message associated with objects in a view. These are often used
+ * in form validation, providing a place to aggregate feedback related to multiple fields.
  */
 export declare const InlineAlert: import("react").ForwardRefExoticComponent<InlineAlertProps & import("react").RefAttributes<DOMRefValue<HTMLDivElement>>>;
 export {};

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

@@ -0,0 +1,61 @@
+import { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from '@internationalized/date';
+import { ContextValue } from 'react-aria-components/slots';
+import { StyleProps } from './style-utils';
+import { ReactElement, ReactNode } from 'react';
+import { DOMProps, DOMRefValue, RangeValue, SpectrumLabelableProps } from '@react-types/shared';
+type NumberValue = number | RangeValue<number>;
+interface NumberProps<T extends NumberValue> {
+    /** The value to display. */
+    value: T;
+    /** Formatting options for the value. */
+    formatOptions?: Intl.NumberFormatOptions;
+}
+export type DateTime = Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time;
+type RangeDateTime = RangeValue<DateTime>;
+type DateTimeValue = DateTime | RangeDateTime;
+interface DateProps<T extends DateTimeValue> {
+    /** The value to display. */
+    value: T;
+    /** Formatting options for the value. */
+    formatOptions?: Intl.DateTimeFormatOptions;
+}
+interface StringProps<T extends string> {
+    /** The value to display. */
+    value: T;
+    /** Formatting options for the value. */
+    formatOptions?: never;
+}
+interface StringListProps<T extends string[]> {
+    /** The value to display. */
+    value: T;
+    /** Formatting options for the value. */
+    formatOptions?: Intl.ListFormatOptions;
+}
+interface ReactElementProps<T extends ReactElement> {
+    /** The value to display. */
+    value: T;
+    /** Formatting options for the value. */
+    formatOptions?: never;
+}
+export interface LabeledValueStyleProps {
+    /**
+     * The size of the component.
+     *
+     * @default 'M'
+     */
+    size?: 'S' | 'M' | 'L' | 'XL';
+}
+export interface LabeledValueBaseProps extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'> {
+    /** The content to display as the label. */
+    label: ReactNode;
+}
+type LabeledValueTypeProps<T> = T extends NumberValue ? NumberProps<T> : T extends DateTimeValue ? DateProps<T> : T extends string[] ? StringListProps<T> : T extends string ? StringProps<T> : T extends ReactElement ? ReactElementProps<T> : never;
+type LabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime> | ReactElement;
+export type LabeledValueProps<T> = LabeledValueTypeProps<T> & LabeledValueBaseProps & LabeledValueStyleProps;
+export declare const LabeledValueContext: import("react").Context<ContextValue<Partial<LabeledValueProps<any>>, DOMRefValue<HTMLDivElement>>>;
+/**
+ * A LabeledValue displays a non-editable value with a label. It formats numbers,
+ * dates, times, and lists according to the user's locale.
+ */
+export declare const LabeledValue: import("react").ForwardRefExoticComponent<LabeledValueProps<LabeledValueTypes> & import("react").RefAttributes<DOMRefValue<HTMLDivElement>>>;
+export {};

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

@@ -6,6 +6,7 @@ import { LinkProps as RACLinkProps } from 'react-aria-components/Link';
 interface LinkStyleProps {
     /**
      * The [visual style](https://spectrum.adobe.com/page/link/#Options) of the link.
+     *
      * @default 'primary'
      */
     variant?: 'primary' | 'secondary';

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

@@ -1,4 +1,4 @@
 import { ListBoxItemProps, ListBoxProps } from 'react-aria-components/ListBox';
 import { ReactNode } from 'react';
-export declare function ListBox<T extends object>({ children, ...props }: ListBoxProps<T>): ReactNode;
+export declare function ListBox<T>({ children, ...props }: ListBoxProps<T>): ReactNode;
 export declare function ListBoxItem(props: ListBoxItemProps): ReactNode;

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

@@ -1,11 +1,12 @@
 import { ContextValue, SlotProps } from 'react-aria-components/slots';
 import { StylesPropWithHeight, UnsafeStyles } from './style-utils';
 import { ReactElement, ReactNode } from 'react';
-import { DOMProps, DOMRefValue, GlobalDOMAttributes, LoadingState } from '@react-types/shared';
+import { DOMProps, DOMRefValue, GlobalDOMAttributes, ItemDropTarget, LoadingState } from '@react-types/shared';
 import { GridListItemProps, GridListProps } from 'react-aria-components/GridList';
 import { Key } from '@react-types/shared';
-import { ListState } from 'react-stately/useListState';
-export interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'children' | 'selectionBehavior' | 'dragAndDropHooks' | 'layout' | 'render' | 'keyboardNavigationBehavior' | 'orientation' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, ListViewStylesProps, SlotProps {
+import { LayoutInfo } from 'react-aria-components/Virtualizer';
+import { ListLayout } from 'react-stately/useVirtualizerState';
+export interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'children' | 'selectionBehavior' | 'layout' | 'render' | 'orientation' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, ListViewStylesProps, SlotProps {
     /** Spectrum-defined styles, returned by the `style()` macro. */
     styles?: StylesPropWithHeight;
     /** The current loading state of the ListView. */
@@ -24,11 +25,13 @@ interface ListViewStylesProps {
     isQuiet?: boolean;
     /**
      * How selection should be displayed.
+     *
      * @default 'checkbox'
      */
     selectionStyle?: 'highlight' | 'checkbox';
     /**
      * Sets the overflow behavior for item contents.
+     *
      * @default 'truncate'
      */
     overflowMode?: 'wrap' | 'truncate';
@@ -42,28 +45,13 @@ export interface ListViewItemProps extends Omit<GridListItemProps, 'children' |
     hasChildItems?: boolean;
 }
 export declare const ListViewContext: import("react").Context<ContextValue<Partial<ListViewProps<any>>, DOMRefValue<HTMLDivElement>>>;
+export declare class S2ListLayout<T> extends ListLayout<T> {
+    getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
+}
 /**
- * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
+ * A ListView displays a list of interactive items, and allows a user to navigate, select, or
+ * perform an action.
  */
-export declare const ListView: <T extends object>(props: ListViewProps<T> & import("react").RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
-export declare let label: (props: {
-    overflowMode: "wrap" | undefined;
-    size: "L" | "S" | "XL" | "XS" | undefined;
-} | {
-    [x: string]: any;
-}) => import("../style/types").StyleString<"alignSelf" | "color" | "font" | "gridArea" | "truncate" | "whiteSpace">;
-export declare let description: (props: {
-    isDisabled: boolean | undefined;
-    isFocusVisible: boolean | undefined;
-    isHovered: boolean | undefined;
-    isPressed: boolean | undefined;
-    overflowMode: "wrap" | undefined;
-} | {
-    [x: string]: any;
-}) => import("../style/types").StyleString<"alignSelf" | "color" | "font" | "gridArea" | "transition" | "truncate" | "whiteSpace">;
-export declare let iconCenterWrapper: import("../style/types").StyleString<"alignItems" | "alignSelf" | "display" | "gridArea" | "gridRowEnd">;
-export declare let icon: import("../style/types").StyleString<"--iconPrimary" | "display" | "marginEnd" | "size">;
-export declare function isPrevSelected(id: Key | undefined, state: ListState<unknown>): boolean;
-export declare function isFirstItem(id: Key | undefined, state: ListState<unknown>): boolean;
+export declare const ListView: <T>(props: ListViewProps<T> & import("react").RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 export declare function ListViewItem(props: ListViewItemProps): ReactNode;
 export {};