@react-spectrum/s2 1.3.0 → 1.4.0

package/dist/types/exports/index.d.ts

@@ -42,8 +42,10 @@ export { IllustratedMessage, IllustratedMessageContext } from '../src/Illustrate
 export { Image, ImageContext } from '../src/Image';
 export { ImageCoordinator } from '../src/ImageCoordinator';
 export { InlineAlert, InlineAlertContext } from '../src/InlineAlert';
+export { LabeledValue, LabeledValueContext } from '../src/LabeledValue';
 export { Link, LinkContext } from '../src/Link';
 export { ListView, ListViewContext, ListViewItem } from '../src/ListView';
+export { DragPreview } from '../src/DragPreview';
 export { MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, UnavailableMenuItemTrigger, MenuContext } from '../src/Menu';
 export { Meter, MeterContext } from '../src/Meter';
 export { NotificationBadge, NotificationBadgeContext } from '../src/NotificationBadge';
@@ -64,7 +66,7 @@ export { Skeleton, useIsSkeleton } from '../src/Skeleton';
 export { SkeletonCollection } from '../src/SkeletonCollection';
 export { StatusLight, StatusLightContext } from '../src/StatusLight';
 export { Switch, SwitchContext } from '../src/Switch';
-export { TableView, TableHeader, TableBody, Row, Cell, Column, TableContext, EditableCell } from '../src/TableView';
+export { TableView, TableHeader, TableBody, Row, Cell, Column, TableContext, EditableCell, TableFooter } from '../src/TableView';
 export { Tabs, TabList, Tab, TabPanel, TabsContext } from '../src/Tabs';
 export { TagGroup, Tag, TagGroupContext } from '../src/TagGroup';
 export { TextArea, TextField, TextAreaContext, TextFieldContext } from '../src/TextField';
@@ -84,6 +86,8 @@ export { useLocale } from 'react-aria/I18nProvider';
 export { useListData } from 'react-stately/useListData';
 export { useTreeData } from 'react-stately/useTreeData';
 export { useAsyncList } from 'react-stately/useAsyncList';
+export { DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem } from 'react-aria/useDrop';
+export { useDragAndDrop } from './useDragAndDrop';
 export type { AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps, AccordionItemState, AccordionItemRenderProps } from '../src/Accordion';
 export type { ActionBarProps } from '../src/ActionBar';
 export type { ActionButtonProps } from '../src/ActionButton';
@@ -126,8 +130,10 @@ export type { IconProps, IconContextValue, IllustrationProps, IllustrationContex
 export type { InlineAlertProps } from '../src/InlineAlert';
 export type { ImageProps } from '../src/Image';
 export type { ImageCoordinatorProps } from '../src/ImageCoordinator';
+export type { LabeledValueProps } from '../src/LabeledValue';
 export type { LinkProps } from '../src/Link';
 export type { ListViewProps, ListViewItemProps } from '../src/ListView';
+export type { DragPreviewProps } from '../src/DragPreview';
 export type { MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps, UnavailableMenuItemTriggerProps } from '../src/Menu';
 export type { MeterProps } from '../src/Meter';
 export type { NotificationBadgeProps } from '../src/NotificationBadge';
@@ -147,7 +153,7 @@ export type { SkeletonProps } from '../src/Skeleton';
 export type { SkeletonCollectionProps } from '../src/SkeletonCollection';
 export type { StatusLightProps } from '../src/StatusLight';
 export type { SwitchProps } from '../src/Switch';
-export type { TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps } from '../src/TableView';
+export type { TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps, TableFooterProps } from '../src/TableView';
 export type { TabsProps, TabProps, TabListProps, TabPanelProps } from '../src/Tabs';
 export type { TagGroupProps, TagProps } from '../src/TagGroup';
 export type { TextFieldProps, TextAreaProps, TextFieldRef } from '../src/TextField';
@@ -167,4 +173,7 @@ export type { ColorSpace, ColorChannel, Color, ColorFormat, ColorAxes, ColorChan
 export type { ListOptions, ListData } from 'react-stately/useListData';
 export type { TreeOptions, TreeData } from 'react-stately/useTreeData';
 export type { AsyncListOptions, AsyncListData, AsyncListLoadFunction, AsyncListLoadOptions, AsyncListStateUpdate } from 'react-stately/useAsyncList';
+export type { DragAndDropHooks } from 'react-aria-components/useDragAndDrop';
+export type { DragAndDropOptions } from './useDragAndDrop';
+export type { DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem } from '@react-types/shared';
 export type { StylesProp, StylesPropWithHeight, StylesPropWithoutWidth, UnsafeClassName, UnsafeStyles, StyleProps } from '../src/style-utils';

package/dist/types/exports/useDragAndDrop.d.ts

@@ -0,0 +1,8 @@
+export { useDragAndDrop } from '../src/useDragAndDrop';
+export { DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem } from 'react-aria/useDrop';
+export { DragPreview } from '../src/DragPreview';
+export type { DragAndDropHooks } from 'react-aria-components/useDragAndDrop';
+export type { DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem } from '@react-types/shared';
+export type { DragAndDropOptions } from '../src/useDragAndDrop';
+export type { DragAndDrop } from 'react-aria-components/useDragAndDrop';
+export type { DragPreviewProps } from '../src/DragPreview';

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

@@ -10,11 +10,13 @@ export interface AccordionProps extends UnsafeStyles, DOMProps, SlotProps {
     styles?: StylesPropWithHeight;
     /**
      * The size of the accordion.
+     *
      * @default 'M'
      */
     size?: 'S' | 'M' | 'L' | 'XL';
     /**
      * The amount of space between the accordion items.
+     *
      * @default 'regular'
      */
     density?: 'compact' | 'regular' | 'spacious';
@@ -51,16 +53,19 @@ export interface AccordionItemState {
 export interface AccordionItemRenderProps {
     /**
      * Whether the accordion item is expanded.
+     *
      * @selector [data-expanded]
      */
     isExpanded: boolean;
     /**
      * Whether the accordion item has keyboard focus.
+     *
      * @selector [data-focus-visible-within]
      */
     isFocusVisibleWithin: boolean;
     /**
      * Whether the accordion item is disabled.
+     *
      * @selector [data-disabled]
      */
     isDisabled: boolean;
@@ -72,17 +77,22 @@ export interface AccordionItemRenderProps {
 export interface AccordionItemProps extends Omit<RenderProps<AccordionItemRenderProps>, 'className' | 'style' | 'render'>, SlotProps, StyleProps {
     /**
      * The size of the accordion item.
+     *
      * @default 'M'
      */
     size?: 'S' | 'M' | 'L' | 'XL';
     /**
      * The amount of space between the accordion item.
+     *
      * @default 'regular'
      */
     density?: 'compact' | 'regular' | 'spacious';
     /** Whether the accordion item should be displayed with a quiet style. */
     isQuiet?: boolean;
-    /** The contents of the accordion item, consisting of a accordion item title and accordion item panel. */
+    /**
+     * The contents of the accordion item, consisting of a accordion item title and accordion item
+     * panel.
+     */
     children: ReactNode;
     /** An id for the accordion item, matching the id used in `expandedKeys`. */
     id?: Key;
@@ -96,11 +106,13 @@ export interface AccordionItemProps extends Omit<RenderProps<AccordionItemRender
     defaultExpanded?: boolean;
 }
 /**
- * A accordion item 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 accordion item 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 AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
 export interface AccordionItemTitleProps extends UnsafeStyles, DOMProps {
-    /** The heading level of the accordion item title.
+    /**
+     * The heading level of the accordion item title.
      *
      * @default 3
      */
@@ -109,7 +121,8 @@ export interface AccordionItemTitleProps extends UnsafeStyles, DOMProps {
     children: React.ReactNode;
 }
 /**
- * An accordion item title consisting of a heading and a trigger button to expand/collapse the panel.
+ * An accordion item title consisting of a heading and a trigger button to expand/collapse the
+ * panel.
  */
 export declare const AccordionItemTitle: React.ForwardRefExoticComponent<AccordionItemTitleProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
 export interface AccordionItemHeaderProps extends UnsafeStyles, DOMProps {
@@ -117,7 +130,8 @@ export interface AccordionItemHeaderProps extends UnsafeStyles, DOMProps {
     children: React.ReactNode;
 }
 /**
- * A wrapper element for the accordion item title that can contain other elements not part of the trigger.
+ * A wrapper element for the accordion item title that can contain other elements not part of the
+ * trigger.
  */
 export declare const AccordionItemHeader: React.ForwardRefExoticComponent<AccordionItemHeaderProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
 export interface AccordionItemPanelProps extends UnsafeStyles, DOMProps, AriaLabelingProps {
@@ -125,11 +139,13 @@ export interface AccordionItemPanelProps extends UnsafeStyles, DOMProps, AriaLab
     children: React.ReactNode;
     /**
      * The accessibility role for the accordion item panel.
+     *
      * @default 'group'
      */
     role?: 'group' | 'region';
 }
 /**
- * An accordion item panel is a collapsible section of content that is hidden until the accordion item is expanded.
+ * An accordion item panel is a collapsible section of content that is hidden until the accordion
+ * item is expanded.
  */
 export declare const AccordionItemPanel: React.ForwardRefExoticComponent<AccordionItemPanelProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;

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

@@ -7,7 +7,10 @@ export interface ActionBarProps extends SlotProps, StyleProps, DOMProps {
     children: ReactNode;
     /** Whether the ActionBar should be displayed with a emphasized style. */
     isEmphasized?: boolean;
-    /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */
+    /**
+     * The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is
+     * hidden.
+     */
     selectedItemCount?: number | 'all';
     /** Handler that is called when the ActionBar clear button is pressed. */
     onClearSelection?: () => void;
@@ -16,7 +19,8 @@ export interface ActionBarProps extends SlotProps, StyleProps, DOMProps {
 }
 export declare const ActionBarContext: import("react").Context<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>;
 /**
- * Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.
+ * Action bars are used for single and bulk selection patterns when a user needs to perform actions
+ * on one or more items at the same time.
  */
 export declare const ActionBar: import("react").ForwardRefExoticComponent<ActionBarProps & import("react").RefAttributes<DOMRefValue<HTMLDivElement>>>;
 interface ActionBarContainerHookProps {

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

@@ -12,13 +12,19 @@ export interface ActionButtonStyleProps {
     size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
     /** The static color style to apply. Useful when the ActionButton appears over a color background. */
     staticColor?: 'black' | 'white' | 'auto';
-    /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */
+    /**
+     * Whether the button should be displayed with a [quiet
+     * style](https://spectrum.adobe.com/page/action-button/#Quiet).
+     */
     isQuiet?: boolean;
 }
 interface ToggleButtonStyleProps {
     /** Whether the ActionButton should be selected (controlled). */
     isSelected?: boolean;
-    /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
+    /**
+     * Whether the button should be displayed with an [emphasized
+     * style](https://spectrum.adobe.com/page/action-button/#Emphasis).
+     */
     isEmphasized?: boolean;
 }
 interface ActionGroupItemStyleProps {
@@ -34,10 +40,14 @@ export declare const btnStyles: (props: ButtonRenderProps & ActionButtonStylePro
     isInGroup: boolean;
     isStaticColor: boolean;
 }, overrides?: import("../style/types").StyleString<string> | null | 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 const ActionButtonContext: import("react").Context<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
+interface ActionButtonContextProps extends Partial<ActionButtonProps> {
+    holdAffordance?: boolean;
+}
+export declare const ActionButtonContext: import("react").Context<ContextValue<ActionButtonContextProps, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
 /**
- * ActionButtons allow users to perform an action.
- * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.
+ * ActionButtons allow users to perform an action. They're used for similar, task-based options
+ * within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of
+ * attention.
  */
 export declare const ActionButton: import("react").ForwardRefExoticComponent<ActionButtonProps & import("react").RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
 export {};

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

@@ -9,22 +9,31 @@ export interface ActionButtonGroupProps extends AriaLabelingProps, UnsafeStyles,
     children: ReactNode;
     /**
      * Size of the buttons.
-     * @default "M"
+     *
+     * @default 'M'
      */
     size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
     /**
      * Spacing between the buttons.
-     * @default "regular"
+     *
+     * @default 'regular'
      */
     density?: 'compact' | 'regular';
-    /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */
+    /**
+     * Whether the button should be displayed with a [quiet
+     * style](https://spectrum.adobe.com/page/action-button/#Quiet).
+     */
     isQuiet?: boolean;
     /** Whether the buttons should divide the container width equally. */
     isJustified?: boolean;
-    /** The static color style to apply. Useful when the ActionButtonGroup appears over a color background. */
+    /**
+     * The static color style to apply. Useful when the ActionButtonGroup appears over a color
+     * background.
+     */
     staticColor?: 'white' | 'black' | 'auto';
     /**
      * The axis the group should align with.
+     *
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';

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

@@ -15,4 +15,4 @@ export declare const ActionMenuContext: import("react").Context<ContextValue<Par
 /**
  * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
  */
-export declare const ActionMenu: <T extends object>(props: ActionMenuProps<T> & import("react").RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export declare const ActionMenu: <T>(props: ActionMenuProps<T> & import("react").RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -4,6 +4,7 @@ import { UnsafeStyles } from './style-utils';
 export interface AlertDialogProps extends DOMProps, UnsafeStyles {
     /**
      * The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog.
+     *
      * @default 'confirmation'
      */
     variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning';
@@ -37,6 +38,7 @@ export interface AlertDialogProps extends DOMProps, UnsafeStyles {
     size?: 'S' | 'M' | 'L';
 }
 /**
- * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
+ * AlertDialogs are a specific type of Dialog. They display important information that users need to
+ * acknowledge.
  */
 export declare const AlertDialog: import("react").ForwardRefExoticComponent<AlertDialogProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLElement>>>;

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

@@ -10,6 +10,7 @@ export interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {
     styles?: StylesPropWithoutWidth;
     /**
      * The size of the avatar.
+     *
      * @default 24
      */
     size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {});

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

@@ -9,6 +9,7 @@ export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingPr
     label?: string;
     /**
      * The size of the avatar group.
+     *
      * @default 24
      */
     size?: 16 | 20 | 24 | 28 | 32 | 36 | 40;

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

@@ -10,18 +10,21 @@ export interface BadgeStyleProps {
      */
     size?: 'S' | 'M' | 'L' | 'XL';
     /**
-     * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.
+     * The variant changes the background color of the badge. When badge has a semantic meaning, they
+     * should use the variant for semantic colors.
      *
      * @default 'neutral'
      */
     variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver';
     /**
      * The fill of the badge.
+     *
      * @default 'bold'
      */
     fillStyle?: 'bold' | 'subtle' | 'outline';
     /**
      * Sets the text behavior for the contents.
+     *
      * @default 'wrap'
      */
     overflowMode?: 'wrap' | 'truncate';
@@ -34,6 +37,7 @@ export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, Bad
 }
 export declare const BadgeContext: React.Context<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>;
 /**
- * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
+ * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a
+ * user's attention.
  */
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;

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

@@ -19,7 +19,7 @@ export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'chil
 }
 export declare const BreadcrumbsContext: import("react").Context<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>;
 /** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */
-export declare const Breadcrumbs: <T extends object>(props: BreadcrumbsProps<T> & import("react").RefAttributes<DOMRefValue<HTMLOListElement>>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export declare const Breadcrumbs: <T>(props: BreadcrumbsProps<T> & import("react").RefAttributes<DOMRefValue<HTMLOListElement>>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'render' | 'autoFocus' | 'onClick' | keyof GlobalDOMAttributes>, LinkDOMProps {
     /** The children of the breadcrumb item. */
     children: ReactNode;

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

@@ -46,7 +46,8 @@ export declare function usePendingState(isPending: boolean): {
  */
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
 /**
- * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.
+ * A LinkButton combines the functionality of a link with the appearance of a button. Useful for
+ * allowing users to navigate to another page.
  */
 export declare const LinkButton: import("react").ForwardRefExoticComponent<LinkButtonProps & import("react").RefAttributes<FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>>;
 export {};

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

@@ -1,27 +1,30 @@
-import { CalendarProps as AriaCalendarProps, DateValue } from 'react-aria-components/Calendar';
+import { CalendarProps as AriaCalendarProps, CalendarSelectionMode, DateValue } from 'react-aria-components/Calendar';
 import { AriaCalendarGridProps } from 'react-aria/useCalendar';
 import { ButtonProps } from 'react-aria-components/Button';
 import { ContextValue } from 'react-aria-components/slots';
 import { GlobalDOMAttributes } from '@react-types/shared';
 import { StyleProps } from './style-utils';
 import React, { ReactElement, ReactNode } from 'react';
-export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'render' | 'styles' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
+export interface CalendarProps<T extends DateValue, M extends CalendarSelectionMode = 'single'> extends Omit<AriaCalendarProps<T, M>, 'visibleDuration' | 'weeksInMonth' | 'style' | 'className' | 'render' | 'styles' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
     /**
      * The error message to display when the calendar is invalid.
      */
     errorMessage?: ReactNode;
     /**
      * The number of months to display at once.
+     *
      * @default 1
      */
     visibleMonths?: number;
 }
-export declare const CalendarContext: React.Context<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>;
+export declare const CalendarContext: React.Context<ContextValue<Partial<CalendarProps<any, CalendarSelectionMode>>, HTMLDivElement>>;
 /**
  * Calendars display a grid of days in one or more months and allow users to select a single date.
  */
-export declare const Calendar: <T extends DateValue>(props: CalendarProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
-export declare const CalendarHeader: () => ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare const Calendar: <T extends DateValue, M extends CalendarSelectionMode = "single">(props: CalendarProps<T, M> & React.RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export declare const CalendarHeader: ({ visibleMonths }: {
+    visibleMonths: number;
+}) => ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare const CalendarGrid: (props: Omit<AriaCalendarGridProps, "children"> & {
     children?: ReactNode;
 } & {

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

@@ -12,22 +12,25 @@ export interface CardProps extends Omit<GridListItemProps, 'className' | 'style'
     children: ReactNode | ((renderProps: CardRenderProps) => ReactNode);
     /**
      * The size of the Card.
+     *
      * @default 'M'
      */
     size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
     /**
      * The amount of internal padding within the Card.
+     *
      * @default 'regular'
      */
     density?: 'compact' | 'regular' | 'spacious';
     /**
      * The visual style of the Card.
+     *
      * @default 'primary'
      */
     variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';
 }
 export declare const InternalCardViewContext: import("react").Context<{
-    ElementType: "div" | (<T extends object>(props: GridListItemProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null);
+    ElementType: "div" | (<T>(props: GridListItemProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null);
     layout: "grid" | "waterfall";
 }>;
 export declare const CardContext: import("react").Context<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>;

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

@@ -6,26 +6,31 @@ import { StylesPropWithHeight, UnsafeStyles } from './style-utils';
 export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'render' | 'isLoading' | keyof GlobalDOMAttributes>, UnsafeStyles {
     /**
      * The layout of the cards.
+     *
      * @default 'grid'
      */
     layout?: 'grid' | 'waterfall';
     /**
      * The size of the cards.
+     *
      * @default 'M'
      */
     size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
     /**
      * The amount of space between the cards.
+     *
      * @default 'regular'
      */
     density?: 'compact' | 'regular' | 'spacious';
     /**
      * The visual style of the cards.
+     *
      * @default 'primary'
      */
     variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';
     /**
      * How selection should be displayed.
+     *
      * @default 'checkbox'
      */
     selectionStyle?: 'checkbox' | 'highlight';
@@ -42,4 +47,4 @@ export declare const CardViewContext: import("react").Context<ContextValue<Parti
 /**
  * A CardView displays a group of related objects, with support for selection and bulk actions.
  */
-export declare const CardView: <T extends object>(props: CardViewProps<T> & import("react").RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export declare const CardView: <T>(props: CardViewProps<T> & import("react").RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -1,6 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
+import { DOMAttributes } from '@react-types/shared';
 import { StyleString } from '../style/types';
-interface CenterBaselineProps {
+interface CenterBaselineProps extends DOMAttributes {
     style?: CSSProperties;
     styles?: StyleString;
     children: ReactNode;

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

@@ -1,8 +1,8 @@
-import { CheckboxProps as AriaCheckboxProps, CheckboxRenderProps } from 'react-aria-components/Checkbox';
+import { CheckboxFieldProps, CheckboxRenderProps } from 'react-aria-components/Checkbox';
 import { ContextValue } from 'react-aria-components/slots';
 import { StyleProps } from './style-utils';
 import { ReactNode } from 'react';
-import { FocusableRefValue, GlobalDOMAttributes } from '@react-types/shared';
+import { FocusableRefValue, GlobalDOMAttributes, HelpTextProps } from '@react-types/shared';
 interface CheckboxStyleProps {
     /**
      * The size of the Checkbox.
@@ -15,16 +15,16 @@ interface CheckboxStyleProps {
 }
 interface RenderProps extends CheckboxRenderProps, CheckboxStyleProps {
 }
-export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, CheckboxStyleProps {
+export interface CheckboxProps extends Omit<CheckboxFieldProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, HelpTextProps, StyleProps, CheckboxStyleProps {
     /** The label for the element. */
     children?: ReactNode;
 }
-export declare const CheckboxContext: import("react").Context<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>>;
+export declare const CheckboxContext: import("react").Context<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLInputElement, HTMLDivElement>>>;
 export declare const box: (props: RenderProps) => 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 const iconStyles: import("../style/types").StyleString<"--iconPrimary" | "pointerEvents">;
 /**
  * Checkboxes allow users to select multiple items from a list of individual items,
  * or to mark one individual item as selected.
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<FocusableRefValue<HTMLInputElement, HTMLDivElement>>>;
 export {};

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

@@ -14,9 +14,9 @@ export declare const CoachMark: import("react").ForwardRefExoticComponent<CoachM
 export interface CoachMarkTriggerProps 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 CoachMarkTrigger(props: CoachMarkTriggerProps): ReactNode;
 interface CoachMarkIndicatorProps {

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

@@ -6,6 +6,7 @@ export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'c
 }
 export declare const ColorAreaContext: import("react").Context<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>;
 /**
- * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
+ * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a
+ * two-dimensional gradient background.
  */
 export declare const ColorArea: import("react").ForwardRefExoticComponent<ColorAreaProps & import("react").RefAttributes<DOMRefValue<HTMLDivElement>>>;

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

@@ -1,5 +1,6 @@
 import { ColorFieldProps as AriaColorFieldProps } from 'react-aria-components/ColorField';
 import { ContextValue } from 'react-aria-components/slots';
+import { ReactNode } from 'react';
 import { StyleProps } from './style-utils';
 import { GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps } from '@react-types/shared';
 import { InputProps } from 'react-aria-components/Input';
@@ -11,6 +12,11 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
      * @default 'M'
      */
     size?: 'S' | 'M' | 'L' | 'XL';
+    /**
+     * The prefix to display in the ColorField. A non-interactive element that appears before the
+     * input.
+     */
+    prefix?: ReactNode;
 }
 export declare const ColorFieldContext: import("react").Context<ContextValue<Partial<ColorFieldProps>, TextFieldRef<HTMLInputElement>>>;
 /**

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';