@react-spectrum/s2 1.3.1 → 1.5.0

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

@@ -7,12 +7,19 @@ import { StyleProps } from './style-utils';
 export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
     /** The content to display in the button. */
     children: ReactNode;
-    /** 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;
 }
-export declare const ToggleButtonContext: import("react").Context<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
+interface ToggleButtonContextProps extends Partial<ToggleButtonProps> {
+    holdAffordance?: boolean;
+}
+export declare const ToggleButtonContext: import("react").Context<ContextValue<ToggleButtonContextProps, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
 /**
  * ToggleButtons allow users to toggle a selection on or off, for example
  * switching between two states or modes.
  */
 export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
+export {};

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

@@ -3,7 +3,10 @@ import { ContextValue } from 'react-aria-components/slots';
 import { DOMProps, GlobalDOMAttributes } from '@react-types/shared';
 import { ToggleButtonGroupProps as RACToggleButtonGroupProps } from 'react-aria-components/ToggleButtonGroup';
 export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RACToggleButtonGroupProps, 'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, DOMProps {
-    /** 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;
 }
 export declare const ToggleButtonGroupContext: import("react").Context<ContextValue<Partial<ToggleButtonGroupProps>, HTMLDivElement>>;

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

@@ -10,12 +10,15 @@ interface S2TreeProps {
 }
 interface TreeViewStyleProps {
     /**
-     * How selection should be displayed. For guidance on when to use which option, refer to the [Spectrum](https://spectrum.adobe.com/page/tree-view/#Checkbox-or-highlight-selection-style) page.
+     * How selection should be displayed. For guidance on when to use which option, refer to the
+     * [Spectrum](https://spectrum.adobe.com/page/tree-view/#Checkbox-or-highlight-selection-style)
+     * page.
+     *
      * @default 'checkbox'
      */
     selectionStyle?: 'highlight' | 'checkbox';
 }
-export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'render' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps, TreeViewStyleProps {
+export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'render' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps, TreeViewStyleProps {
     /** Spectrum-defined styles, returned by the `style()` macro. */
     styles?: StylesPropWithHeight;
 }
@@ -30,7 +33,7 @@ export interface TreeViewLoadMoreItemProps extends Pick<TreeLoadMoreItemProps, '
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
  */
-export declare const TreeView: <T extends object>(props: TreeViewProps<T> & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>) => ReactElement<unknown, string | JSXElementConstructor<any>> | null;
+export declare const TreeView: <T>(props: TreeViewProps<T> & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>) => ReactElement<unknown, string | JSXElementConstructor<any>> | null;
 export declare const TreeViewItem: (props: TreeViewItemProps) => ReactNode;
 export interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {
     /** Rendered contents of the tree item or child items. */

package/dist/types/src/dnd-utils.d.ts

@@ -0,0 +1,8 @@
+import { ItemDropTarget } from '@react-types/shared';
+import React from 'react';
+export declare function InsertionIndicator({ target }: {
+    target: ItemDropTarget;
+}): React.JSX.Element;
+export declare function DragHandleButton({ isFocusVisibleWithin }: {
+    isFocusVisibleWithin: boolean;
+}): React.JSX.Element;

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

@@ -1,4 +1,24 @@
 import { CSSProperties, RefObject } from 'react';
+/**
+ * Returns a render prop style function that applies a subtle Spectrum "press" scale
+ * effect to an element while it is being pressed.
+ *
+ * @example
+ *   import {Button} from 'react-aria-components/Button';
+ *   import {pressScale} from '@react-spectrum/s2';
+ *   import {useRef} from 'react';
+ *
+ *   function MyButton(props) {
+ *     let ref = useRef(null);
+ *     return <Button {...props} ref={ref} style={pressScale(ref, props.style)} />;
+ *   }
+ *
+ * @param ref - A ref to the element receiving the press effect.
+ * @param style - An optional base style object, or a render prop function returning
+ *   one.
+ * @returns A render prop function suitable for passing to a React Aria component's
+ * `style` prop.
+ */
 export declare function pressScale<R extends {
     isPressed: boolean;
 }>(ref: RefObject<HTMLElement | null>, style?: CSSProperties | ((renderProps: R) => CSSProperties)): (renderProps: R) => CSSProperties;

package/dist/types/src/style-utils.d.ts

@@ -1,22 +1,21 @@
 import { CSSProperties } from 'react';
 import { StyleString } from '../style/types';
 /**
- * Calculates vertical padding to center a single line of text within a container.
- * Uses the CSS `self()` function and `1lh` unit to compute the padding based on
- * the container's minimum height and border widths.
- * This is useful for precise vertical centering without introducing a flex/grid layout to the container.
- *
- * @param minHeight - A CSS expression for the minimum height to center within. Defaults to `'self(minHeight)'`.
- * @returns A CSS `calc()` expression wrapped as an arbitrary style value.
+ * Calculates vertical padding to center a single line of text within a container. Uses the CSS
+ * `self()` function and `1lh` unit to compute the padding based on the container's minimum height
+ * and border widths. This is useful for precise vertical centering without introducing a flex/grid
+ * layout to the container.
  *
  * @example
- * ```tsx
- * import {centerPadding, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {centerPadding, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = style({
- *   paddingY: centerPadding()
- * });
- * ```
+ *   const styles = style({
+ *     paddingY: centerPadding()
+ *   });
+ *
+ * @param minHeight - A CSS expression for the minimum height to center within. Defaults to
+ *   `'self(minHeight)'`.
+ * @returns A CSS `calc()` expression wrapped as an arbitrary style value.
  */
 export declare function centerPadding(minHeight?: string): `[${string}]`;
 export declare const field: () => {
@@ -143,20 +142,18 @@ export declare const fieldInput: () => {
     readonly containIntrinsicWidth: "calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))";
 };
 /**
- * Returns style properties that set the CSS `color-scheme` for a component.
- * Defaults to the page's color scheme and supports `'light'`, `'dark'`, and `'light dark'` values
- * via the `colorScheme` render prop condition.
- * Intended for root containers (e.g. providers, modals, and popovers), and not needed for individual components.
+ * Returns style properties that set the CSS `color-scheme` for a component. Defaults to the page's
+ * color scheme and supports `'light'`, `'dark'`, and `'light dark'` values via the `colorScheme`
+ * render prop condition. Intended for root containers (e.g. providers, modals, and popovers), and
+ * not needed for individual components.
  *
  * @example
- * ```tsx
- * import {setColorScheme, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {setColorScheme, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = style({
- *   ...setColorScheme(),
- *   backgroundColor: 'layer-1'
- * });
- * ```
+ *   const styles = style({
+ *     ...setColorScheme(),
+ *     backgroundColor: 'layer-1'
+ *   });
  */
 export declare const setColorScheme: () => {
     readonly '--s2-color-scheme': {
@@ -275,23 +272,33 @@ export declare function control(options: ControlOptions): ControlResult;
 declare const allowedOverrides: readonly ["margin", "marginStart", "marginEnd", "marginTop", "marginBottom", "marginX", "marginY", "flexGrow", "flexShrink", "flexBasis", "justifySelf", "alignSelf", "order", "gridArea", "gridRowStart", "gridRowEnd", "gridColumnStart", "gridColumnEnd", "position", "zIndex", "top", "bottom", "inset", "insetX", "insetY", "insetStart", "insetEnd", "visibility"];
 export declare const widthProperties: readonly ["width", "minWidth", "maxWidth"];
 export declare const heightProperties: readonly ["size", "height", "minHeight", "maxHeight"];
+export declare const fontProperties: readonly ["font", "fontFamily", "fontWeight", "lineHeight", "fontSize"];
 export type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;
 export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
 export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
+export type StylesPropWithFont = StyleString<(typeof fontProperties)[number]>;
 export type UnsafeClassName = string & {
     properties?: never;
 };
 export interface UnsafeStyles {
-    /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
+    /**
+     * Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
+     * for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop
+     * instead.
+     */
     UNSAFE_className?: UnsafeClassName;
-    /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
+    /**
+     * Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the
+     * element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead.
+     */
     UNSAFE_style?: CSSProperties;
 }
 export interface StyleProps extends UnsafeStyles {
     /** Spectrum-defined styles, returned by the `style()` macro. */
     styles?: StylesProp;
 }
-export declare function getAllowedOverrides({ width, height }?: {
+export declare function getAllowedOverrides({ width, height, font }?: {
+    font?: boolean | undefined;
     height?: boolean | undefined;
     width?: boolean | undefined;
 }): string[];

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

@@ -1,7 +1,7 @@
-import { DOMRef, DOMRefValue, FocusableElement, FocusableRef, FocusableRefValue, RefObject } from '@react-types/shared';
+import { DOMRef, DOMRefValue, FocusableRef, FocusableRefValue, RefObject } from '@react-types/shared';
 export declare function createDOMRef<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>): DOMRefValue<T>;
-export declare function createFocusableRef<T extends HTMLElement = HTMLElement>(domRef: RefObject<T | null>, focusableRef?: RefObject<FocusableElement | null>): FocusableRefValue<T>;
+export declare function createFocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T>(domRef: RefObject<D | null>, focusableRef?: RefObject<T | null>): FocusableRefValue<T, D>;
 export declare function useDOMRef<T extends HTMLElement = HTMLElement>(ref: DOMRef<T>): RefObject<T | null>;
-export declare function useFocusableRef<T extends HTMLElement = HTMLElement>(ref: FocusableRef<T>, focusableRef?: RefObject<FocusableElement | null>): RefObject<T | null>;
+export declare function useFocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T>(ref: FocusableRef<T, D>, focusableRef?: RefObject<T | null>): RefObject<D | null>;
 export declare function unwrapDOMRef<T extends HTMLElement>(ref: RefObject<DOMRefValue<T> | null>): RefObject<T | null>;
 export declare function useUnwrapDOMRef<T extends HTMLElement>(ref: RefObject<DOMRefValue<T> | null>): RefObject<T | null>;

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

@@ -0,0 +1,9 @@
+import type { DragAndDrop, DragAndDropOptions as RACDragAndDropOptions } from 'react-aria-components/useDragAndDrop';
+export type { DragAndDrop };
+export interface DragAndDropOptions<T = object> extends Omit<RACDragAndDropOptions<T>, 'renderDropIndicator'> {
+}
+/**
+ * Provides the hooks required to enable drag and drop behavior for a drag and drop compatible
+ * collection component.
+ */
+export declare function useDragAndDrop<T = object>(options: DragAndDropOptions<T>): DragAndDrop<T>;

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

@@ -9,49 +9,45 @@ export type { StyleString } from './types';
 /**
  * Converts a pixel value to a Spectrum spacing token in `rem` units.
  *
- * @param px - The spacing in pixels.
- * @returns A `rem` value wrapped as an arbitrary style value.
- *
  * @example
- * ```tsx
- * import {space, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {space, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = style({
- *   gap: space(12) // 12/16 = 0.75rem
- * });
- * ```
+ *   const styles = style({
+ *     gap: space(12) // 12/16 = 0.75rem
+ *   });
+ *
+ * @param px - The spacing in pixels.
+ * @returns A `rem` value wrapped as an arbitrary style value.
  */
 export declare function space(px: number): `[${string}]`;
 /**
  * Converts a pixel value to a font-relative `em` length. Useful for sizing elements
  * relative to the current font size. Defaults to a 14px base.
  *
+ * @example
+ *   import {fontRelative, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *
+ *   const styles = style({
+ *     gap: fontRelative(2) // 2/14 = ~0.143em
+ *   });
+ *
  * @param base - The pixel value to convert.
  * @param baseFontSize - The base font size in pixels to divide by. Defaults to `14`.
  * @returns A CSS `em` value wrapped as an arbitrary style value.
- *
- * @example
- * ```tsx
- * import {fontRelative, style} from '@react-spectrum/s2/style' with {type: 'macro'};
- *
- * const styles = style({
- *   gap: fontRelative(2)  // 2/14 = ~0.143em
- * });
- * ```
  */
 export declare function fontRelative(base: number, baseFontSize?: number): `[${string}]`;
 /**
  * Returns consistent Spectrum focus ring outline styles for interactive components.
  *
+ * Note: Requires `isFocusVisible` to be passed into the style call that uses this.
+ *
  * @example
- * ```tsx
- * import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = style({
- *   ...focusRing(),
- *   borderRadius: 'lg'
- * });
- * ```
+ *   const styles = style({
+ *     ...focusRing(),
+ *     borderRadius: 'lg'
+ *   });
  */
 export declare const focusRing: () => {
     readonly outlineStyle: {
@@ -98,15 +94,13 @@ export interface IconStyle {
  * Generates styles for an icon element with the given size, color, and layout options.
  * Must be imported with `{type: 'macro'}`.
  *
- * @param options - Icon styling options including `size` (XS–XL), `color`, and layout properties.
- * @returns A `StyleString` that can be applied to an icon element.
- *
  * @example
- * ```tsx
- * import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
- * import Edit from '@react-spectrum/s2/icons/Edit';
+ *   import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import Edit from '@react-spectrum/s2/icons/Edit';
+ *
+ *   <Edit styles={iconStyle({size: 'XL', color: 'positive'})} />;
  *
- * <Edit styles={iconStyle({size: 'XL', color: 'positive'})} />
- * ```
+ * @param options - Icon styling options including `size` (XS–XL), `color`, and layout properties.
+ * @returns A `StyleString` that can be applied to an icon element.
  */
 export declare function iconStyle(this: MacroContext | void, options: IconStyle): StyleString<Exclude<keyof IconStyle, 'color' | 'size'>>;

package/dist/types/style/runtime.d.ts

@@ -5,14 +5,12 @@ import { StyleString } from './types';
  * Useful for composing styles from multiple `style()` macro calls.
  *
  * @example
- * ```tsx
- * import {mergeStyles} from '@react-spectrum/s2';
- * import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {mergeStyles} from '@react-spectrum/s2';
+ *   import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const baseStyles = style({padding: 8});
- * const overrideStyles = style({padding: 16, color: 'heading'});
- * const merged = mergeStyles(baseStyles, overrideStyles);
- * // merged has `padding: 16` and `color: heading`.
- * ```
+ *   const baseStyles = style({padding: 8});
+ *   const overrideStyles = style({padding: 16, color: 'heading'});
+ *   const merged = mergeStyles(baseStyles, overrideStyles);
+ *   // merged has `padding: 16` and `color: heading`.
  */
 export declare function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString;

package/dist/types/style/spectrum-theme.d.ts

@@ -447,17 +447,16 @@ type BaseColor = keyof typeof baseColors;
  * Returns a set of stateful color token references for the default, hovered, focus-visible,
  * and pressed states of a component.
  *
- * @param base - A Spectrum base color token name (e.g. `'gray-100'`, `'accent-900'`).
- * @returns An object with `default`, `isHovered`, `isFocusVisible`, and `isPressed` color token references.
- *
  * @example
- * ```tsx
- * import {baseColor, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {baseColor, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = style({
- *   backgroundColor: baseColor('gray-100')
- * });
- * ```
+ *   const styles = style({
+ *     backgroundColor: baseColor('gray-100')
+ *   });
+ *
+ * @param base - A Spectrum base color token name (e.g. `'gray-100'`, `'accent-900'`).
+ * @returns An object with `default`, `isHovered`, `isFocusVisible`, and `isPressed` color token
+ *   references.
  */
 export declare function baseColor<C extends string = BaseColor>(base: BaseColor | C): {
     default: C;
@@ -470,54 +469,49 @@ type SpectrumColor = Color<BaseColor> | ArbitraryValue;
  * Resolves a Spectrum color token name to a CSS color value string.
  * Supports opacity modifiers via the `color/opacity` syntax.
  *
- * @param value - A Spectrum color token (e.g. `'gray-800'`, `'accent-900/50'`) or an arbitrary CSS color value.
- * @returns A CSS color string.
- *
  * @example
- * ```tsx
- * import {color, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {color, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *
+ *   const styles = style({
+ *     color: color('gray-800'),
+ *     borderColor: color('accent-900/50')
+ *   });
  *
- * const styles = style({
- *   color: color('gray-800'),
- *   borderColor: color('accent-900/50')
- * });
- * ```
+ * @param value - A Spectrum color token (e.g. `'gray-800'`, `'accent-900/50'`) or an arbitrary CSS
+ *   color value.
+ * @returns A CSS color string.
  */
 export declare function color(value: SpectrumColor): string;
 /**
  * Produces a `light-dark()` CSS color value that resolves to different colors
  * depending on the current color scheme.
  *
+ * @example
+ *   import {lightDark, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *
+ *   const styles = style({
+ *     backgroundColor: lightDark('gray-25', 'gray-900')
+ *   });
+ *
  * @param light - The color to use in light mode.
  * @param dark - The color to use in dark mode.
  * @returns A CSS `light-dark()` expression wrapped as an arbitrary style value.
- *
- * @example
- * ```tsx
- * import {lightDark, style} from '@react-spectrum/s2/style' with {type: 'macro'};
- *
- * const styles = style({
- *   backgroundColor: lightDark('gray-25', 'gray-900')
- * });
- * ```
  */
 export declare function lightDark(light: SpectrumColor, dark: SpectrumColor): `[${string}]`;
 /**
  * Mixes two Spectrum colors by a given percentage using CSS `color-mix()` in sRGB color space.
  *
+ * @example
+ *   import {colorMix, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *
+ *   const styles = style({
+ *     backgroundColor: colorMix('accent-900', 'gray-25', 50)
+ *   });
+ *
  * @param a - The first color.
  * @param b - The second color.
  * @param percent - The percentage of the second color in the mix (0–100).
  * @returns A CSS `color-mix()` expression wrapped as an arbitrary style value.
- *
- * @example
- * ```tsx
- * import {colorMix, style} from '@react-spectrum/s2/style' with {type: 'macro'};
- *
- * const styles = style({
- *   backgroundColor: colorMix('accent-900', 'gray-25', 50)
- * });
- * ```
  */
 export declare function colorMix(a: SpectrumColor, b: SpectrumColor, percent: number): `[${string}]`;
 interface LinearGradient {
@@ -572,22 +566,20 @@ export declare function fontRelative(this: MacroContext | void, base: number, ba
 export declare function edgeToText(this: MacroContext | void, height: keyof typeof baseSpacing): string;
 export declare function space(this: MacroContext | void, px: number): string;
 /**
- * Converts a pixel value to a scalable CSS size expression using the Spectrum 2 scale factor.
- * The result is a `calc()` expression that multiplies the rem-converted value by the current scale factor.
- * The scale factor differs between touch and non-touch devices.
- *
- * @param px - The size in pixels.
- * @returns A CSS `calc()` expression.
+ * Converts a pixel value to a scalable CSS size expression using the Spectrum 2 scale factor. The
+ * result is a `calc()` expression that multiplies the rem-converted value by the current scale
+ * factor. The scale factor differs between touch and non-touch devices.
  *
  * @example
- * ```tsx
- * import {size, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {size, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = style({
- *   width: size(200),
- *   height: size(48)
- * });
- * ```
+ *   const styles = style({
+ *     width: size(200),
+ *     height: size(48)
+ *   });
+ *
+ * @param px - The size in pixels.
+ * @returns A CSS `calc()` expression.
  */
 export declare function size(this: MacroContext | void, px: number): `calc(${string})`;
 declare const inset: {

package/dist/types/style/style-macro.d.ts

@@ -50,18 +50,16 @@ export declare function createTheme<T extends Theme>(theme: T): StyleFunction<Th
  * available in the style macro API), and should be used sparingly.
  * Must be imported with `{type: 'macro'}`.
  *
- * @param content - The CSS declarations to inject.
- * @param layer - The CSS `@layer` to place the styles in. Defaults to `'_.a'`.
- * @returns The generated class name that applies the styles.
- *
  * @example
- * ```tsx
- * import {css} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {css} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = css(`
+ *   const styles = css(`
  *   backdrop-filter: blur(8px);
- * `);
- * ```
+ *   `);
+ *
+ * @param content - The CSS declarations to inject.
+ * @param layer - The CSS `@layer` to place the styles in. Defaults to `'_.a'`.
+ * @returns The generated class name that applies the styles.
  */
 export declare function css(this: MacroContext | void, content: string, layer?: string): string;
 export declare function keyframes(this: MacroContext | void, css: string): string;

package/dist/types/style/tokens.d.ts

@@ -20,8 +20,8 @@ type ReplaceColor<S extends string> = S extends `${infer S}-color-${infer N}` ?
 export declare function colorScale<S extends string>(scale: S): Record<ReplaceColor<Extract<TokenName, `${S}-${number}`>>, ReturnType<typeof colorToken>>;
 export declare function simpleColorScale<S extends string>(scale: S): Record<Extract<TokenName, `${S}-${number}`>, string>;
 /**
- * This swaps between white or black based on the background color.
- * After testing against all RGB background colors, 49.44 minimizes the number of WCAG 4.5:1 contrast failures.
+ * This swaps between white or black based on the background color. After testing against all RGB
+ * background colors, 49.44 minimizes the number of WCAG 4.5:1 contrast failures.
  */
 export declare function autoStaticColor(bg?: string, alpha?: number): string;
 interface ColorScaleValues {

package/dist/types/ui-icons/CornerTriangle.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode, SVGProps } from 'react';
+export default function CornerTriangle(props: SVGProps<SVGSVGElement> & {
+    size?: 'M' | 'L' | 'XL' | 'S';
+}): ReactNode;

package/dist/types/ui-icons/DragHandle.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode, SVGProps } from 'react';
+export default function DragHandle(props: SVGProps<SVGSVGElement> & {
+    size?: 'M' | 'L' | 'XL' | 'S';
+}): ReactNode;

package/exports/Accordion.ts

@@ -1,3 +1,18 @@
-export {Accordion, AccordionContext, AccordionItem, AccordionItemHeader, AccordionItemTitle, AccordionItemPanel} from '../src/Accordion';
-export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps, AccordionItemState, AccordionItemRenderProps} from '../src/Accordion';
+export {
+  Accordion,
+  AccordionContext,
+  AccordionItem,
+  AccordionItemHeader,
+  AccordionItemTitle,
+  AccordionItemPanel
+} from '../src/Accordion';
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionItemHeaderProps,
+  AccordionItemTitleProps,
+  AccordionItemPanelProps,
+  AccordionItemState,
+  AccordionItemRenderProps
+} from '../src/Accordion';
 export type {Key} from '@react-types/shared';

package/exports/ActionMenu.ts

@@ -1,9 +1,21 @@
 export {ActionMenu, ActionMenuContext} from '../src/ActionMenu';
 export type {ActionMenuProps} from '../src/ActionMenu';
 
-export {MenuItem, MenuTrigger, MenuSection, SubmenuTrigger, UnavailableMenuItemTrigger} from '../src/Menu';
+export {
+  MenuItem,
+  MenuTrigger,
+  MenuSection,
+  SubmenuTrigger,
+  UnavailableMenuItemTrigger
+} from '../src/Menu';
 export {Collection} from 'react-aria/Collection';
-export type {MenuTriggerProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps, UnavailableMenuItemTriggerProps} from '../src/Menu';
+export type {
+  MenuTriggerProps,
+  MenuItemProps,
+  MenuSectionProps,
+  SubmenuTriggerProps,
+  UnavailableMenuItemTriggerProps
+} from '../src/Menu';
 
 export {ContextualHelpPopover} from '../src/ContextualHelp';
 export type {ContextualHelpPopoverProps} from '../src/ContextualHelp';

package/exports/Card.ts

@@ -1,5 +1,19 @@
-export {Card, CardPreview, CollectionCardPreview, AssetCard, UserCard, ProductCard, CardContext} from '../src/Card';
-export type {CardProps, CardPreviewProps, AssetCardProps, ProductCardProps, UserCardProps} from '../src/Card';
+export {
+  Card,
+  CardPreview,
+  CollectionCardPreview,
+  AssetCard,
+  UserCard,
+  ProductCard,
+  CardContext
+} from '../src/Card';
+export type {
+  CardProps,
+  CardPreviewProps,
+  AssetCardProps,
+  ProductCardProps,
+  UserCardProps
+} from '../src/Card';
 
 export {Text, Content, Footer} from '../src/Content';
 export {Image} from '../src/Image';

package/exports/CardView.ts

@@ -6,8 +6,22 @@ export type {Selection, Key, SelectionMode} from '@react-types/shared';
 export {SkeletonCollection} from '../src/SkeletonCollection';
 export type {SkeletonCollectionProps} from '../src/SkeletonCollection';
 
-export {Card, CardPreview, CollectionCardPreview, AssetCard, UserCard, ProductCard, CardContext} from '../src/Card';
-export type {CardProps, CardPreviewProps, AssetCardProps, ProductCardProps, UserCardProps} from '../src/Card';
+export {
+  Card,
+  CardPreview,
+  CollectionCardPreview,
+  AssetCard,
+  UserCard,
+  ProductCard,
+  CardContext
+} from '../src/Card';
+export type {
+  CardProps,
+  CardPreviewProps,
+  AssetCardProps,
+  ProductCardProps,
+  UserCardProps
+} from '../src/Card';
 
 export {Text, Content, Footer} from '../src/Content';
 export {Image} from '../src/Image';

package/exports/CenterBaseline.ts

@@ -0,0 +1 @@
+export {CenterBaseline} from '../src/CenterBaseline';

package/exports/ColorArea.ts

@@ -1,4 +1,11 @@
 export {ColorArea, ColorAreaContext} from '../src/ColorArea';
 export type {ColorAreaProps} from '../src/ColorArea';
 export {parseColor, getColorChannels} from 'react-aria-components/ColorArea';
-export type {ColorSpace, ColorChannel, Color, ColorFormat, ColorAxes, ColorChannelRange} from 'react-aria-components/ColorArea';
+export type {
+  ColorSpace,
+  ColorChannel,
+  Color,
+  ColorFormat,
+  ColorAxes,
+  ColorChannelRange
+} from 'react-aria-components/ColorArea';