# @askrjs/ui

> Published API exports for @askrjs/ui.

Source: [https://askrjs.com/docs/reference/api/ui/root](https://askrjs.com/docs/reference/api/ui/root)

Status: stable. Packages: @askrjs/ui.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 483 exports from the declarations shipped by @askrjs/ui.

### `Accordion`

```ts
Accordion: (props: AccordionProps) => JSX.Element
```

Renders a part of `accordion`.

### `ACCORDION_A11Y_CONTRACT`

```ts
ACCORDION_A11Y_CONTRACT: { readonly TRIGGER_ROLE: "button"; readonly EXPANDED_ATTRIBUTE: "aria-expanded"; readonly CONTROLS_ATTRIBUTE: "aria-controls"; readonly PANEL_ROLE: "region"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }
```

WAI-ARIA accordion/disclosure contract.

### `AccordionA11yContract`

```ts
AccordionA11yContract: typeof ACCORDION_A11Y_CONTRACT
```

Type of the Accordion A11y Contract object.

### `AccordionContent`

```ts
AccordionContent: { (props: AccordionContentProps): JSX.Element | null; (props: AccordionContentAsChildProps): JSX.Element | null; }
```

Renders the `accordion-content` part of `accordion` with `role="region"`.

Supports polymorphic rendering via `asChild`.

### `AccordionContentAsChildProps`

```ts
AccordionContentAsChildProps: BoxAsChildProps & AccordionContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Accordion Content.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

### `AccordionContentOwnProps`

```ts
AccordionContentOwnProps: {
  forceMount?: boolean;
}
```

Own props for Accordion Content, before merging with native element attributes.

- `forceMount`: forceMount?: boolean | undefined;

### `AccordionContentProps`

```ts
AccordionContentProps: BoxProps<'div', HTMLDivElement> & AccordionContentOwnProps
```

Props for Accordion Content.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `AccordionHeader`

```ts
AccordionHeader: { (props: AccordionHeaderProps): JSX.Element; (props: AccordionHeaderAsChildProps): JSX.Element; }
```

Renders the `accordion-header` part of `accordion`.

Supports polymorphic rendering via `asChild`.

### `AccordionHeaderAsChildProps`

```ts
AccordionHeaderAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Accordion Header.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `AccordionHeaderProps`

```ts
AccordionHeaderProps: BoxProps<'h3', HTMLHeadingElement>
```

Props for Accordion Header.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLHeadingElement>;

### `AccordionItem`

```ts
AccordionItem: (props: AccordionItemProps) => JSX.Element
```

Renders the `accordion-item` part of `accordion`.

### `AccordionItemOwnProps`

```ts
AccordionItemOwnProps: {
  children?: unknown;
  value: string;
  disabled?: boolean;
}
```

Own props for Accordion Item, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `value`: value: string;

### `AccordionItemProps`

```ts
AccordionItemProps: BoxProps<'div', HTMLDivElement> & AccordionItemOwnProps
```

Props for Accordion Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `value`: value: string;

### `AccordionMultipleProps`

```ts
AccordionMultipleProps: BoxProps<'div', HTMLDivElement> & AccordionSharedOwnProps & {
  type: 'multiple';
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
}
```

Props for Accordion Multiple.

- `asChild`: asChild?: false | undefined;

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `collapsible`: collapsible?: boolean | undefined;

- `defaultValue`: defaultValue?: string[] | undefined;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `onValueChange`: onValueChange?: ((value: string[]) => void) | undefined;

- `orientation`: orientation?: AccordionOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `type`: type: "multiple";

- `value`: value?: string[] | undefined;

### `AccordionOrientation`

```ts
AccordionOrientation: 'vertical' | 'horizontal'
```

Accordion Orientation.

### `AccordionProps`

```ts
AccordionProps: AccordionSingleProps | AccordionMultipleProps
```

Props for Accordion.

- `asChild`: asChild?: false | undefined;

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `collapsible`: collapsible?: boolean | undefined;

- `defaultValue`: defaultValue?: string | string[] | undefined;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `onValueChange`: onValueChange?: ((value: string[]) => void) | ((value: string) => void) | undefined;

- `orientation`: orientation?: AccordionOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `type`: type?: "single" | "multiple" | undefined;

- `value`: value?: string | string[] | undefined;

### `AccordionSingleProps`

```ts
AccordionSingleProps: BoxProps<'div', HTMLDivElement> & AccordionSharedOwnProps & {
  type?: 'single';
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
}
```

Props for Accordion Single.

- `asChild`: asChild?: false | undefined;

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `collapsible`: collapsible?: boolean | undefined;

- `defaultValue`: defaultValue?: string | undefined;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `onValueChange`: onValueChange?: ((value: string) => void) | undefined;

- `orientation`: orientation?: AccordionOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `type`: type?: "single" | undefined;

- `value`: value?: string | undefined;

### `AccordionTrigger`

```ts
AccordionTrigger: { (props: AccordionTriggerProps): JSX.Element; (props: AccordionTriggerAsChildProps): JSX.Element; }
```

Renders the `accordion-trigger` part of `accordion`.

Supports polymorphic rendering via `asChild`.

### `AccordionTriggerAsChildProps`

```ts
AccordionTriggerAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Accordion Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `AccordionTriggerProps`

```ts
AccordionTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Accordion Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `ALERT_DIALOG_A11Y_CONTRACT`

```ts
ALERT_DIALOG_A11Y_CONTRACT: { readonly CONTENT_ROLE: "alertdialog"; readonly LABELLED_BY_ATTRIBUTE: "aria-labelledby"; readonly DESCRIBED_BY_ATTRIBUTE: "aria-describedby"; readonly ACTION_REQUIREMENTS: { readonly hasPrimaryAction: true; readonly hasCancelAction: true; }; }
```

Alert dialog accessibility contract.

### `AlertDialog`

```ts
AlertDialog: (props: AlertDialogProps) => JSX.Element
```

Renders a part of `alert-dialog`.

### `AlertDialogA11yContract`

```ts
AlertDialogA11yContract: typeof ALERT_DIALOG_A11Y_CONTRACT
```

Type of the Alert Dialog A11y Contract object.

### `AlertDialogAction`

```ts
DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }
```

Renders the `dialog-close` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `AlertDialogActionAsChildProps`

```ts
AlertDialogActionAsChildProps: DialogCloseAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Alert Dialog Action.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `AlertDialogActionProps`

```ts
AlertDialogActionProps: DialogCloseProps
```

Props for Alert Dialog Action.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `AlertDialogCancel`

```ts
DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }
```

Renders the `dialog-close` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `AlertDialogCancelAsChildProps`

```ts
AlertDialogCancelAsChildProps: DialogCloseAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Alert Dialog Cancel.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `AlertDialogCancelProps`

```ts
AlertDialogCancelProps: DialogCloseProps
```

Props for Alert Dialog Cancel.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `AlertDialogContent`

```ts
AlertDialogContent: (props: AlertDialogContentProps | AlertDialogContentAsChildProps) => JSX.Element
```

Renders a part of `alert-dialog`.

Supports polymorphic rendering via `asChild`.

### `AlertDialogContentAsChildProps`

```ts
AlertDialogContentAsChildProps: DialogContentAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Alert Dialog Content.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `role`: role?: "alertdialog" | "dialog" | undefined;

### `AlertDialogContentOwnProps`

```ts
AlertDialogContentOwnProps: DialogContentOwnProps
```

Own props for Alert Dialog Content, before merging with native element attributes.

- `forceMount`: forceMount?: boolean | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `role`: role?: "alertdialog" | "dialog" | undefined;

### `AlertDialogContentProps`

```ts
AlertDialogContentProps: DialogContentProps
```

Props for Alert Dialog Content.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `role`: role?: "alertdialog" | "dialog" | undefined;

### `AlertDialogDescription`

```ts
DialogDescription: { (props: DialogDescriptionProps): JSX.Element; (props: DialogDescriptionAsChildProps): JSX.Element; }
```

Renders the `dialog-description` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `AlertDialogDescriptionAsChildProps`

```ts
AlertDialogDescriptionAsChildProps: DialogDescriptionAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Alert Dialog Description.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `AlertDialogDescriptionProps`

```ts
AlertDialogDescriptionProps: DialogDescriptionProps
```

Props for Alert Dialog Description.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLParagraphElement>;

### `AlertDialogOverlay`

```ts
DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }
```

Renders the `dialog-overlay` part of `dialog`.

With `@askrjs/themes/default`, the overlay is fully styled out of the box
with the shared backdrop token, blur, stacking, and fade animation. Standard
Dialog and AlertDialog usage requires no additional overlay CSS; customize
the theme tokens instead of applying a competing background class.

Supports polymorphic rendering via `asChild`.

### `AlertDialogOverlayAsChildProps`

```ts
AlertDialogOverlayAsChildProps: DialogOverlayAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Alert Dialog Overlay.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

### `AlertDialogOverlayOwnProps`

```ts
AlertDialogOverlayOwnProps: DialogOverlayOwnProps
```

Own props for Alert Dialog Overlay, before merging with native element attributes.

- `forceMount`: forceMount?: boolean | undefined;

### `AlertDialogOverlayProps`

```ts
AlertDialogOverlayProps: DialogOverlayProps
```

Props for Alert Dialog Overlay.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `AlertDialogOwnProps`

```ts
AlertDialogOwnProps: DialogProps
```

Own props for Alert Dialog, before merging with native element attributes.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `modal`: modal?: boolean | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `AlertDialogPortal`

```ts
DialogPortal: (props: DialogPortalProps) => JSX.Element | null
```

Renders a part of `dialog`.

### `AlertDialogPortalProps`

```ts
AlertDialogPortalProps: DialogPortalProps
```

Props for Alert Dialog Portal.

- `children`: children?: unknown;

### `AlertDialogProps`

```ts
AlertDialogProps: DialogProps
```

Props for Alert Dialog.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `modal`: modal?: boolean | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `AlertDialogTitle`

```ts
DialogTitle: { (props: DialogTitleProps): JSX.Element; (props: DialogTitleAsChildProps): JSX.Element; }
```

Renders the `dialog-title` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `AlertDialogTitleAsChildProps`

```ts
AlertDialogTitleAsChildProps: DialogTitleAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Alert Dialog Title.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `AlertDialogTitleProps`

```ts
AlertDialogTitleProps: DialogTitleProps
```

Props for Alert Dialog Title.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLHeadingElement>;

### `AlertDialogTrigger`

```ts
AlertDialogTrigger: (props: AlertDialogTriggerProps | AlertDialogTriggerAsChildProps) => JSX.Element
```

Renders a part of `alert-dialog`.

Supports polymorphic rendering via `asChild`.

### `AlertDialogTriggerAsChildProps`

```ts
AlertDialogTriggerAsChildProps: DialogTriggerAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Alert Dialog Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `AlertDialogTriggerProps`

```ts
AlertDialogTriggerProps: DialogTriggerProps
```

Props for Alert Dialog Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `Avatar`

```ts
Avatar: { (props: AvatarProps): JSX.Element; (props: AvatarAsChildProps): JSX.Element; }
```

Renders the `avatar` part of `avatar`.

Supports polymorphic rendering via `asChild`.

### `AVATAR_A11Y_CONTRACT`

```ts
AVATAR_A11Y_CONTRACT: { readonly ROOT: { readonly slot: "data-slot"; readonly marker: "data-avatar"; }; readonly IMAGE: { readonly slot: "data-slot"; readonly marker: "data-avatar-image"; readonly requiresAlt: true; }; readonly FALLBACK: { readonly slot: "data-slot"; readonly marker: "data-avatar-fallback"; readonly visibleBeforeImageLoad: true; }; }
```

Accessibility contract for Avatar primitives.

### `AvatarA11yContract`

```ts
AvatarA11yContract: typeof AVATAR_A11Y_CONTRACT
```

Type of the Avatar A11y Contract object.

### `AvatarAsChildProps`

```ts
AvatarAsChildProps: BoxAsChildProps & AvatarOwnProps
```

Props for the `asChild` (polymorphic) rendering of Avatar.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `id`: id?: string | undefined;

- `ref`: ref?: Ref<Element>;

### `AvatarFallback`

```ts
AvatarFallback: { (props: AvatarFallbackProps): JSX.Element | null; (props: AvatarFallbackAsChildProps): JSX.Element | null; }
```

Renders the `avatar-fallback` part of `avatar`.

Supports polymorphic rendering via `asChild`.

### `AvatarFallbackAsChildProps`

```ts
AvatarFallbackAsChildProps: BoxAsChildProps & AvatarFallbackOwnProps
```

Props for the `asChild` (polymorphic) rendering of Avatar Fallback.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `AvatarFallbackOwnProps`

```ts
AvatarFallbackOwnProps: {
  children?: unknown;
}
```

Own props for Avatar Fallback, before merging with native element attributes.

- `children`: children?: unknown;

### `AvatarFallbackProps`

```ts
AvatarFallbackProps: BoxProps<'span', HTMLSpanElement> & AvatarFallbackOwnProps
```

Props for Avatar Fallback.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLSpanElement>;

### `AvatarImage`

```ts
AvatarImage: (props: AvatarImageProps) => JSX.Element
```

Renders the `avatar-image` part of `avatar`.

### `AvatarImageOwnProps`

```ts
AvatarImageOwnProps: {
  src?: string;
  alt: string;
  onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
}
```

Own props for Avatar Image, before merging with native element attributes.

- `alt`: alt: string;

- `onLoadingStatusChange`: onLoadingStatusChange?: ((status: AvatarLoadingStatus) => void) | undefined;

- `src`: src?: string | undefined;

### `AvatarImageProps`

```ts
AvatarImageProps: Omit<JSX.IntrinsicElements['img'], 'children' | 'ref' | 'onLoad' | 'onError' | 'alt' | 'src'> & AvatarImageOwnProps & {
  ref?: Ref<HTMLImageElement>;
}
```

Props for Avatar Image.

- `alt`: alt: string;

- `onLoadingStatusChange`: onLoadingStatusChange?: ((status: AvatarLoadingStatus) => void) | undefined;

- `ref`: ref?: Ref<HTMLImageElement>;

- `src`: src?: string | undefined;

### `AvatarLoadingStatus`

```ts
AvatarLoadingStatus: 'idle' | 'loading' | 'loaded' | 'error'
```

Avatar Loading Status.

### `AvatarOwnProps`

```ts
AvatarOwnProps: {
  children?: unknown;
  id?: string;
}
```

Own props for Avatar, before merging with native element attributes.

- `children`: children?: unknown;

- `id`: id?: string | undefined;

### `AvatarProps`

```ts
AvatarProps: BoxProps<'span', HTMLSpanElement> & AvatarOwnProps
```

Props for Avatar.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `id`: id?: string | undefined;

- `ref`: ref?: Ref<HTMLSpanElement>;

### `Button`

```ts
Button: { (props: ButtonNativeProps): JSX.Element; (props: ButtonAsChildProps): JSX.Element; }
```

Headless Button component

## Responsibilities
- Compose pressable foundation for interaction behavior
- Enforce type="button" default to prevent accidental form submission
- Forward props and refs to native button or child element

## Non-Responsibilities (delegated to pressable foundation)
- Keyboard event handling (Enter/Space)
- Pointer event handling
- Disabled state enforcement
- ARIA attribute application

## Invariants
- MUST NOT contain any event handler logic
- MUST NOT check disabled prop directly
- MUST use pressable() for ALL interaction behavior
- MUST use mergeProps() for ALL prop composition
Renders the `button` part of `button`.

Supports polymorphic rendering via `asChild`.

````tsx
Native button (prevents accidental submit)
```tsx
<Button onPress={handleSave}>Save</Button>
```
````

````tsx
Explicit form submission
```tsx
<Button type="submit" onPress={handleSubmit}>Submit</Button>
```
````

````tsx
Polymorphic rendering (asChild)
```tsx
<Button asChild onPress={handleNav}>
<a href="/home">Home</a>
</Button>
```
````

### `BUTTON_A11Y_CONTRACT`

```ts
BUTTON_A11Y_CONTRACT: { readonly KEYBOARD_ACTIVATION: readonly ["Enter", "Space"]; readonly ROLE: "button"; readonly DISABLED_ATTRIBUTES: { readonly native: "disabled"; readonly asChild: "aria-disabled"; }; readonly DATA_ATTRIBUTES: { readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly enabled: "focusable"; readonly disabled: "not-focusable"; }; }
```

Accessibility contract for Button component

Following WAI-ARIA Button Pattern:
https://www.w3.org/WAI/ARIA/apg/patterns/button/

## Role
- Native <button>: implicit role="button"
- asChild: preserves child role (e.g., role="button" on <div>)

## States
- disabled (native): uses `disabled` attribute
- disabled (asChild): uses `aria-disabled="true"` + `tabindex="-1"`

## Keyboard
- Space: Activates button (handled by pressable foundation)
- Enter: Activates button (handled by pressable foundation)
- Disabled buttons do not respond to interaction

## Focus
- Native buttons: focusable by default
- asChild elements: receive tabindex if not naturally focusable
- Disabled: removed from tab order (tabindex="-1" or native disabled)

## Screen Reader
- Announces role as "button"
- Announces disabled state
- Announces accessible name from text content or aria-label

## Implementation Notes
- All interaction behavior is delegated to `pressable` foundation
- Button component does NOT implement keyboard handling directly
- Button component does NOT check disabled prop directly
- All ARIA attributes are applied by foundation, not component

### `ButtonA11yContract`

```ts
ButtonA11yContract: typeof BUTTON_A11Y_CONTRACT
```

Type-safe accessibility contract

### `ButtonAsChildElement`

```ts
ButtonAsChildElement: JSXElement | JSX.Element
```

Button As Child Element.

### `ButtonAsChildProps`

```ts
ButtonAsChildProps: ButtonOwnProps & {
  asChild: true;
  children: ButtonAsChildElement;
  ref?: Ref<Element>;
  type?: never;
}
```

Props when rendering with asChild (polymorphic)

- `asChild`: asChild: true;

- `children`: children: ButtonAsChildElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `size`: size?: ButtonSize | undefined;

- `type`: type?: undefined;

- `variant`: variant?: ButtonVariant | undefined;

- `width`: width?: ButtonWidth | undefined;

### `ButtonNativeProps`

```ts
ButtonNativeProps: Omit<JSX.IntrinsicElements['button'], 'children' | 'onClick' | 'disabled' | 'type' | 'ref'> & ButtonOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLButtonElement>;
  type?: 'button' | 'submit' | 'reset';
}
```

Props when rendering as native <button>

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `size`: size?: ButtonSize | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

- `variant`: variant?: ButtonVariant | undefined;

- `width`: width?: ButtonWidth | undefined;

### `ButtonOwnProps`

```ts
ButtonOwnProps: {
  children?: unknown;
  onPress?: (e: PressEvent) => void;
  disabled?: boolean;
  variant?: ButtonVariant;
  size?: ButtonSize;
  width?: ButtonWidth;
}
```

Core Button props shared across all variants

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `size`: size?: ButtonSize | undefined;

- `variant`: variant?: ButtonVariant | undefined;

- `width`: width?: ButtonWidth | undefined;

### `ButtonProps`

```ts
ButtonProps: ButtonNativeProps | ButtonAsChildProps
```

Union of all Button prop variants

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined;

- `size`: size?: ButtonSize | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

- `variant`: variant?: ButtonVariant | undefined;

- `width`: width?: ButtonWidth | undefined;

### `ButtonSize`

```ts
ButtonSize: 'xs' | 'sm' | 'md' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'
```

Button Size.

### `ButtonVariant`

```ts
ButtonVariant: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
```

Button Variant.

### `ButtonWidth`

```ts
ButtonWidth: 'auto' | 'full'
```

Button Width.

### `Checkbox`

```ts
Checkbox: { (props: CheckboxInputProps): JSX.Element; (props: CheckboxAsChildProps): JSX.Element; }
```

Headless Checkbox component

## Responsibilities
- Apply aria-checked for checkbox state signaling
- Handle indeterminate state for native and asChild hosts
- Support controlled and uncontrolled checked state
- Forward props and refs to native input or child element
- Preserve native checkbox semantics and apply checkbox behavior to asChild hosts

## Non-Responsibilities
- Form submission orchestration beyond native input props

## Invariants
- MUST NOT add role="button" (native inputs are role="checkbox")
- checked state may be controlled or uncontrolled
- indeterminate overrides checked for state signaling
- For asChild, consumer MUST provide role="checkbox"
Renders the `checkbox` part of `checkbox` with `role="checkbox"`.

Supports polymorphic rendering via `asChild`.

````tsx
Native checkbox input
```tsx
const checked = state(false);
<Checkbox checked={checked()} onPress={() => checked.set(!checked())} />
```
````

````tsx
Polymorphic rendering (asChild)
```tsx
<Checkbox asChild checked={agreed} onPress={toggleAgree}>
<div role="checkbox">I agree to terms</div>
</Checkbox>
```
````

````tsx
Indeterminate state (partial selection)
```tsx
<Checkbox checked={someChecked} indeterminate={!allChecked && someChecked} onPress={toggleAll}>
Select All
</Checkbox>
```
````

### `CHECKBOX_A11Y_CONTRACT`

```ts
CHECKBOX_A11Y_CONTRACT: { readonly ROLE: "checkbox"; readonly KEYBOARD_ACTIVATION: readonly ["Space"]; readonly CHECKED_ATTRIBUTE: "aria-checked"; readonly INDETERMINATE_VALUE: "mixed"; readonly DISABLED_ATTRIBUTES: { readonly nativeInput: { readonly disabled: true; }; readonly nonNative: { readonly "aria-disabled": "true"; readonly tabIndex: -1; }; }; readonly DATA_ATTRIBUTES: { readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly enabled: "tabIndex >= 0"; readonly disabled: "tabIndex = -1"; readonly visualIndicator: "required"; }; }
```

WAI-ARIA Checkbox Pattern

Specification: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/

A checkbox is an input mechanism that allows users to select one or more items
from a set. Unlike toggle buttons, checkboxes visually represent a checked state
with aria-checked (not aria-pressed).

## Required ARIA
- aria-checked: 'true' | 'false' | 'mixed' (indicates checkbox state)
- role: 'checkbox' (when not native input)

## Keyboard Support
- Space: Activates checkbox
- Enter: Does not activate checkbox

## Focus Management
- Checkbox is focusable when not disabled
- Visual focus indicator required

## Disabled State
- aria-disabled when disabled=true (for non-native)
- disabled attribute when native input
- Removed from tab order
- Visual disabled styling (consumer responsibility)

## Indeterminate State
- `asChild`: aria-checked='mixed'
- native input: current host path omits aria-checked and keeps data-state='indeterminate'
- Typically used for "select all" checkboxes when partial selection

### `CheckboxA11yContract`

```ts
CheckboxA11yContract: typeof CHECKBOX_A11Y_CONTRACT
```

Type of the Checkbox A11y Contract object.

### `CheckboxAsChildProps`

```ts
CheckboxAsChildProps: CheckboxOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props when rendering via asChild

- `asChild`: asChild: true;

- `checked`: checked?: boolean | undefined;

- `children`: children: JSXElement;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `indeterminate`: indeterminate?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

### `CheckboxInputProps`

```ts
CheckboxInputProps: Omit<JSX.IntrinsicElements['input'], 'children' | 'onClick' | 'disabled' | 'type' | 'ref' | 'checked' | 'name' | 'value' | 'required'> & CheckboxOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLInputElement>;
}
```

Props when rendering as a native <input type="checkbox"> element

- `asChild`: asChild?: false | undefined;

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `indeterminate`: indeterminate?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLInputElement>;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

### `CheckboxOwnProps`

```ts
CheckboxOwnProps: {
  children?: unknown;
  onPress?: (e: PressEvent) => void;
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  indeterminate?: boolean;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  value?: string;
}
```

Props shared by all Checkbox variants

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `indeterminate`: indeterminate?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

### `CheckboxProps`

```ts
CheckboxProps: CheckboxInputProps | CheckboxAsChildProps
```

Discriminated union of Checkbox prop types

- `asChild`: asChild?: boolean | undefined;

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `indeterminate`: indeterminate?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLInputElement | null) => void) | { current: HTMLInputElement | null; } | null | undefined;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

### `Collapsible`

```ts
Collapsible: (props: CollapsibleProps) => JSX.Element
```

Renders a part of `collapsible`.

### `COLLAPSIBLE_A11Y_CONTRACT`

```ts
COLLAPSIBLE_A11Y_CONTRACT: { readonly TRIGGER_ROLE: "button"; readonly KEYBOARD_ACTIVATION: readonly ["Enter", "Space"]; readonly EXPANDED_ATTRIBUTE: "aria-expanded"; readonly CONTROLS_ATTRIBUTE: "aria-controls"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly CONTENT_REQUIREMENTS: { readonly idAttribute: "required"; readonly defaultPresence: "unmounted when closed"; }; readonly FOCUS_RULES: { readonly afterActivation: "focus remains on trigger"; readonly contentFocusable: false; }; }
```

WAI-ARIA Disclosure Pattern (Collapsible)

Specification: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/

A disclosure (collapsible) shows and hides a region of content via a button.
The button indicates the visibility state of the content region.

## Required ARIA
- Trigger: role="button" (native or explicit)
- Trigger: aria-expanded="true" | "false"
- Trigger: aria-controls={contentId}
- Content: id attribute for aria-controls reference

## Keyboard Support
- Enter: Toggles content visibility (on trigger)
- Space: Toggles content visibility (on trigger)

## Focus Management
- Trigger is focusable when not disabled
- Focus remains on trigger after activation
- Content is not focusable by default

## Disabled State
- Trigger cannot be activated when disabled
- Visual disabled styling (consumer responsibility)

## Presence
- Content unmounts when closed (default)
- Can force mount for animation/transition control

### `CollapsibleContent`

```ts
CollapsibleContent: { (props: CollapsibleContentProps): JSX.Element | null; (props: CollapsibleContentAsChildProps): JSX.Element | null; }
```

Renders the `collapsible-content` part of `collapsible`.

Supports polymorphic rendering via `asChild`.

### `CollapsibleContentAsChildProps`

```ts
CollapsibleContentAsChildProps: any
```

Props for the `asChild` (polymorphic) rendering of Collapsible Content.

- `asChild`: Render as child element instead of div

- `children`: Child content

- `forceMount`: Force mount even when closed (for animation)

- `ref`: Ref forwarding

### `CollapsibleContentProps`

```ts
CollapsibleContentProps: any
```

Content component props

- `asChild`: Render as child element instead of div

- `children`: Child content

- `forceMount`: Force mount even when closed (for animation)

- `ref`: Ref forwarding

### `CollapsibleProps`

```ts
CollapsibleProps: any
```

Root component props

- `children`: Child components (Trigger, Content)

- `defaultOpen`: Uncontrolled default open state

- `disabled`: Whether the collapsible is disabled

- `id`: Stable caller-provided identity used for ARIA linking when available

- `onOpenChange`: Callback when open state changes

- `open`: Controlled open state

### `CollapsibleTrigger`

```ts
CollapsibleTrigger: { (props: CollapsibleTriggerProps): JSX.Element; (props: CollapsibleTriggerAsChildProps): JSX.Element; }
```

Renders the `collapsible-trigger` part of `collapsible`.

Supports polymorphic rendering via `asChild`.

### `CollapsibleTriggerAsChildProps`

```ts
CollapsibleTriggerAsChildProps: any
```

Props for the `asChild` (polymorphic) rendering of Collapsible Trigger.

- `asChild`: Render as child element instead of button

- `children`: Child content

- `ref`: Ref forwarding

### `CollapsibleTriggerProps`

```ts
CollapsibleTriggerProps: any
```

Trigger component props (button semantics)

- `asChild`: Render as child element instead of button

- `children`: Child content

- `ref`: Ref forwarding

### `DebouncedInput`

```ts
DebouncedInput: (props: DebouncedInputProps) => JSX.Element
```

DebouncedInput is a convenience wrapper around Input that emits a settled
value for search and filter surfaces.

### `DebouncedInputProps`

```ts
DebouncedInputProps: Omit<InputInputProps, 'onInput' | 'type'> & {
  type?: JSX.IntrinsicElements['input']['type'];
  debounceMs?: number;
  onInput?: (event: InputEvent) => void;
  onDebouncedInput?: (value: string) => void;
}
```

Props for Debounced Input.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `debounceMs`: debounceMs?: number | undefined;

- `onDebouncedInput`: onDebouncedInput?: ((value: string) => void) | undefined;

- `onInput`: onInput?: ((event: InputEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLInputElement>;

- `type`: type?: ReactiveProp<IntrinsicTextValue>;

### `Dialog`

```ts
Dialog: (props: DialogProps) => JSX.Element
```

Coordinates the Dialog trigger, portal, overlay, and content.

````tsx
```tsx
<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>Confirm action</DialogContent>
  </DialogPortal>
</Dialog>
```
````

### `DIALOG_A11Y_CONTRACT`

```ts
DIALOG_A11Y_CONTRACT: { readonly CONTENT_ROLE: "dialog"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly MODAL_ATTRIBUTE: "aria-modal"; readonly LABELLED_BY_ATTRIBUTE: "aria-labelledby"; readonly DESCRIBED_BY_ATTRIBUTE: "aria-describedby"; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; }; }
```

Dialog accessibility contract.

### `DialogA11yContract`

```ts
DialogA11yContract: typeof DIALOG_A11Y_CONTRACT
```

Type of the Dialog A11y Contract object.

### `DialogClose`

```ts
DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }
```

Renders the `dialog-close` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogCloseAsChildProps`

```ts
DialogCloseAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Close.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `DialogCloseProps`

```ts
DialogCloseProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Dialog Close.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `DialogContent`

```ts
DialogContent: { (props: DialogContentProps): JSX.Element | null; (props: DialogContentAsChildProps): JSX.Element | null; }
```

Renders the `dialog-content` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogContentAsChildProps`

```ts
DialogContentAsChildProps: BoxAsChildProps & DialogContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Content.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `role`: role?: "alertdialog" | "dialog" | undefined;

### `DialogContentOwnProps`

```ts
DialogContentOwnProps: {
  forceMount?: boolean;
  role?: 'dialog' | 'alertdialog';
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onDismiss?: () => void;
}
```

Own props for Dialog Content, before merging with native element attributes.

- `forceMount`: forceMount?: boolean | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `role`: role?: "alertdialog" | "dialog" | undefined;

### `DialogContentProps`

```ts
DialogContentProps: BoxProps<'div', HTMLDivElement> & DialogContentOwnProps
```

Props for Dialog Content.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `role`: role?: "alertdialog" | "dialog" | undefined;

### `DialogDescription`

```ts
DialogDescription: { (props: DialogDescriptionProps): JSX.Element; (props: DialogDescriptionAsChildProps): JSX.Element; }
```

Renders the `dialog-description` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogDescriptionAsChildProps`

```ts
DialogDescriptionAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Description.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DialogDescriptionProps`

```ts
DialogDescriptionProps: BoxProps<'p', HTMLParagraphElement>
```

Props for Dialog Description.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLParagraphElement>;

### `DialogOverlay`

```ts
DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }
```

Renders the `dialog-overlay` part of `dialog`.

With `@askrjs/themes/default`, the overlay is fully styled out of the box
with the shared backdrop token, blur, stacking, and fade animation. Standard
Dialog and AlertDialog usage requires no additional overlay CSS; customize
the theme tokens instead of applying a competing background class.

Supports polymorphic rendering via `asChild`.

### `DialogOverlayAsChildProps`

```ts
DialogOverlayAsChildProps: BoxAsChildProps & DialogOverlayOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Overlay.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

### `DialogOverlayOwnProps`

```ts
DialogOverlayOwnProps: {
  forceMount?: boolean;
}
```

Own props for Dialog Overlay, before merging with native element attributes.

- `forceMount`: forceMount?: boolean | undefined;

### `DialogOverlayProps`

```ts
DialogOverlayProps: BoxProps<'div', HTMLDivElement> & DialogOverlayOwnProps
```

Props for Dialog Overlay.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `DialogOwnProps`

```ts
DialogOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  modal?: boolean;
}
```

Own props for Dialog, before merging with native element attributes.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `modal`: modal?: boolean | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `DialogPortal`

```ts
DialogPortal: (props: DialogPortalProps) => JSX.Element | null
```

Renders a part of `dialog`.

### `DialogPortalProps`

```ts
DialogPortalProps: {
  children?: unknown;
}
```

Props for Dialog Portal.

- `children`: children?: unknown;

### `DialogProps`

```ts
DialogProps: DialogOwnProps
```

Props for Dialog.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `modal`: modal?: boolean | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `DialogTitle`

```ts
DialogTitle: { (props: DialogTitleProps): JSX.Element; (props: DialogTitleAsChildProps): JSX.Element; }
```

Renders the `dialog-title` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogTitleAsChildProps`

```ts
DialogTitleAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Title.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DialogTitleProps`

```ts
DialogTitleProps: BoxProps<'h2', HTMLHeadingElement>
```

Props for Dialog Title.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLHeadingElement>;

### `DialogTrigger`

```ts
DialogTrigger: { (props: DialogTriggerProps): JSX.Element; (props: DialogTriggerAsChildProps): JSX.Element; }
```

Renders the `dialog-trigger` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogTriggerAsChildProps`

```ts
DialogTriggerAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `DialogTriggerProps`

```ts
DialogTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Dialog Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `DISMISSABLE_LAYER_A11Y_CONTRACT`

```ts
DISMISSABLE_LAYER_A11Y_CONTRACT: { readonly DISMISS_EVENTS: readonly ["escape-key", "outside-pointer"]; readonly INTERACTION_POLICY: "background-dismissable"; }
```

Dismissable layer accessibility contract.

### `DismissableLayer`

```ts
DismissableLayer: { (props: DismissableLayerProps): JSX.Element; (props: DismissableLayerAsChildProps): JSX.Element; }
```

Renders a part of `dismissable-layer`.

Supports polymorphic rendering via `asChild`.

### `DismissableLayerA11yContract`

```ts
DismissableLayerA11yContract: typeof DISMISSABLE_LAYER_A11Y_CONTRACT
```

Type of the Dismissable Layer A11y Contract object.

### `DismissableLayerAsChildProps`

```ts
DismissableLayerAsChildProps: DismissableLayerOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Dismissable Layer.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `disableOutsidePointerEvents`: disableOutsidePointerEvents?: boolean | undefined;

- `id`: id?: string | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

### `DismissableLayerOwnProps`

```ts
DismissableLayerOwnProps: {
  children?: unknown;
  id?: string;
  disabled?: boolean;
  disableOutsidePointerEvents?: boolean;
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onDismiss?: () => void;
}
```

Own props for Dismissable Layer, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `disableOutsidePointerEvents`: disableOutsidePointerEvents?: boolean | undefined;

- `id`: id?: string | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

### `DismissableLayerProps`

```ts
DismissableLayerProps: Omit<JSX.IntrinsicElements['div'], 'children' | 'ref'> & DismissableLayerOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}
```

Props for Dismissable Layer.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `disableOutsidePointerEvents`: disableOutsidePointerEvents?: boolean | undefined;

- `id`: id?: string | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `Dropdown`

```ts
Dropdown: (props: DropdownProps) => JSX.Element
```

Renders a part of `dropdown`.

### `DROPDOWN_A11Y_CONTRACT`

```ts
DROPDOWN_A11Y_CONTRACT: { readonly CONTENT_ROLE: "menu"; readonly ITEM_ROLE: "menuitem"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; readonly hasPopup: "aria-haspopup"; }; }
```

Dropdown accessibility contract.

### `DropdownA11yContract`

```ts
DropdownA11yContract: typeof DROPDOWN_A11Y_CONTRACT
```

Type of the Dropdown A11y Contract object.

### `DropdownContent`

```ts
DropdownContent: { (props: DropdownContentProps): JSX.Element | null; (props: DropdownContentAsChildProps): JSX.Element | null; }
```

Renders a part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `DropdownContentAsChildProps`

```ts
DropdownContentAsChildProps: BoxAsChildProps & DropdownContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `DropdownContentOwnProps`

```ts
DropdownContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}
```

Own props for Dropdown Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

- `forceMount`: forceMount?: boolean | undefined;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `DropdownContentProps`

```ts
DropdownContentProps: BoxProps<'div', HTMLDivElement> & DropdownContentOwnProps
```

Props for Dropdown Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `DropdownGroup`

```ts
DropdownGroup: (props: DropdownGroupProps | DropdownGroupAsChildProps) => JSX.Element
```

Renders the `dropdown-group` part of `dropdown` with `role="group"`.

Supports polymorphic rendering via `asChild`.

### `DropdownGroupAsChildProps`

```ts
DropdownGroupAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Group.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DropdownGroupProps`

```ts
DropdownGroupProps: BoxProps<'div', HTMLDivElement>
```

Props for Dropdown Group.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `DropdownItem`

```ts
DropdownItem: { (props: DropdownItemProps): JSX.Element | null; (props: DropdownItemAsChildProps): JSX.Element | null; }
```

Renders a part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `DropdownItemAsChildProps`

```ts
DropdownItemAsChildProps: Omit<ButtonLikeAsChildProps, 'onPress'> & DropdownItemOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: undefined;

- `value`: value?: string | undefined;

- `variant`: variant?: DropdownItemVariant | undefined;

### `DropdownItemOwnProps`

```ts
DropdownItemOwnProps: {
  children?: unknown;
  disabled?: boolean;
  value?: string;
  variant?: DropdownItemVariant;
  onSelect?: (event: PressEvent) => void;
  /** Text used for typeahead when rendered children are not plain text. */
  textValue?: string;
}
```

Own props for Dropdown Item, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `value`: value?: string | undefined;

- `variant`: variant?: DropdownItemVariant | undefined;

### `DropdownItemProps`

```ts
DropdownItemProps: Omit<ButtonLikeProps<'button', HTMLButtonElement>, 'onPress'> & DropdownItemOwnProps
```

Props for Dropdown Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: "button" | "submit" | "reset" | undefined;

- `variant`: variant?: DropdownItemVariant | undefined;

### `DropdownItemVariant`

```ts
DropdownItemVariant: 'default' | 'destructive'
```

Dropdown Item Variant.

### `DropdownLabel`

```ts
DropdownLabel: (props: DropdownLabelProps | DropdownLabelAsChildProps) => JSX.Element
```

Renders the `dropdown-label` part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `DropdownLabelAsChildProps`

```ts
DropdownLabelAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Label.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DropdownLabelProps`

```ts
DropdownLabelProps: BoxProps<'div', HTMLDivElement>
```

Props for Dropdown Label.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `DropdownOwnProps`

```ts
DropdownOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}
```

Own props for Dropdown, before merging with native element attributes.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `DropdownPortal`

```ts
DropdownPortal: (props: DropdownPortalProps) => JSX.Element | null
```

Renders a part of `dropdown`.

### `DropdownPortalProps`

```ts
DropdownPortalProps: {
  children?: unknown;
}
```

Props for Dropdown Portal.

- `children`: children?: unknown;

### `DropdownProps`

```ts
DropdownProps: DropdownOwnProps
```

Props for `Dropdown`.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `DropdownSeparator`

```ts
DropdownSeparator: (props: DropdownSeparatorProps | DropdownSeparatorAsChildProps) => JSX.Element
```

Renders the `dropdown-separator` part of `dropdown` with `role="separator"`.

Supports polymorphic rendering via `asChild`.

### `DropdownSeparatorAsChildProps`

```ts
DropdownSeparatorAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Separator.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DropdownSeparatorProps`

```ts
DropdownSeparatorProps: BoxProps<'div', HTMLDivElement>
```

Props for Dropdown Separator.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `DropdownTrigger`

```ts
DropdownTrigger: { (props: DropdownTriggerProps): JSX.Element | null; (props: DropdownTriggerAsChildProps): JSX.Element | null; }
```

Renders the `dropdown-trigger` part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `DropdownTriggerAsChildProps`

```ts
DropdownTriggerAsChildProps: ButtonLikeAsChildProps & DropdownTriggerOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dropdown Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `size`: size?: DropdownTriggerSize | undefined;

- `type`: type?: undefined;

- `variant`: variant?: DropdownTriggerVariant | undefined;

### `DropdownTriggerOwnProps`

```ts
DropdownTriggerOwnProps: {
  variant?: DropdownTriggerVariant;
  size?: DropdownTriggerSize;
}
```

Own props for Dropdown Trigger, before merging with native element attributes.

- `size`: size?: DropdownTriggerSize | undefined;

- `variant`: variant?: DropdownTriggerVariant | undefined;

### `DropdownTriggerProps`

```ts
DropdownTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & DropdownTriggerOwnProps
```

Props for Dropdown Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `size`: size?: DropdownTriggerSize | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

- `variant`: variant?: DropdownTriggerVariant | undefined;

### `DropdownTriggerSize`

```ts
DropdownTriggerSize: 'md' | 'icon'
```

Dropdown Trigger Size.

### `DropdownTriggerVariant`

```ts
DropdownTriggerVariant: 'default' | 'ghost'
```

Dropdown Trigger Variant.

### `FOCUS_SCOPE_A11Y_CONTRACT`

```ts
FOCUS_SCOPE_A11Y_CONTRACT: { readonly FEATURES: { readonly trapped: true; readonly loop: true; readonly autoFocus: true; readonly restoreFocus: true; }; }
```

Focus scope accessibility contract.

### `FocusScope`

```ts
FocusScope: { (props: FocusScopeProps): JSX.Element; (props: FocusScopeAsChildProps): JSX.Element; }
```

Renders a part of `focus-scope`.

Supports polymorphic rendering via `asChild`.

### `FocusScopeA11yContract`

```ts
FocusScopeA11yContract: typeof FOCUS_SCOPE_A11Y_CONTRACT
```

Type of the Focus Scope A11y Contract object.

### `FocusScopeAsChildProps`

```ts
FocusScopeAsChildProps: FocusScopeOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Focus Scope.

- `asChild`: asChild: true;

- `autoFocus`: autoFocus?: boolean | undefined;

- `children`: children: JSXElement;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `restoreFocus`: restoreFocus?: boolean | undefined;

- `tabIndex`: tabIndex?: number | undefined;

- `trapped`: trapped?: boolean | undefined;

### `FocusScopeOwnProps`

```ts
FocusScopeOwnProps: {
  children?: unknown;
  trapped?: boolean;
  loop?: boolean;
  autoFocus?: boolean;
  restoreFocus?: boolean;
  id?: string;
  tabIndex?: number;
}
```

Own props for Focus Scope, before merging with native element attributes.

- `autoFocus`: autoFocus?: boolean | undefined;

- `children`: children?: unknown;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `restoreFocus`: restoreFocus?: boolean | undefined;

- `tabIndex`: tabIndex?: number | undefined;

- `trapped`: trapped?: boolean | undefined;

### `FocusScopeProps`

```ts
FocusScopeProps: Omit<JSX.IntrinsicElements['div'], 'children' | 'ref'> & FocusScopeOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}
```

Props for Focus Scope.

- `asChild`: asChild?: false | undefined;

- `autoFocus`: autoFocus?: boolean | undefined;

- `children`: children?: unknown;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `restoreFocus`: restoreFocus?: boolean | undefined;

- `tabIndex`: tabIndex?: number | undefined;

- `trapped`: trapped?: boolean | undefined;

### `Form`

```ts
Form: { (props: FormProps): JSX.Element; (props: FormAsChildProps): JSX.Element; }
```

Renders a part of `form`.

Supports polymorphic rendering via `asChild`.

### `FormAsChildProps`

```ts
FormAsChildProps: Omit<JSX.IntrinsicElements['form'], 'children' | 'ref'> & FormOwnProps & {
  asChild: true;
  children: JSX.Element;
  ref?: import('@askrjs/askr/foundations/utilities').Ref<Element>;
}
```

`asChild` keeps the form host supplied by the consumer, while retaining the
native form attribute contract (method, action, target, encoding, etc.).

- `asChild`: asChild: true;

- `children`: children: JSX.Element;

- `ref`: ref?: Ref<Element>;

### `FormProps`

```ts
FormProps: BoxProps<'form', HTMLFormElement> & FormOwnProps
```

Props for Form.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLFormElement>;

### `HoverCard`

```ts
HoverCard: (props: HoverCardProps) => JSX.Element
```

Renders a part of `hover-card`.

### `HoverCardAsChildProps`

```ts
HoverCardAsChildProps: HoverCardOwnProps & {
  asChild: true;
  children: JSX.Element;
}
```

Props for the `asChild` (polymorphic) rendering of Hover Card.

- `asChild`: asChild: true;

- `children`: children: JSX.Element;

- `closeDelay`: closeDelay?: number | undefined;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

- `openDelay`: openDelay?: number | undefined;

### `HoverCardContent`

```ts
HoverCardContent: { (props: HoverCardContentProps): JSX.Element | null; (props: HoverCardContentAsChildProps): JSX.Element | null; }
```

Renders the `hover-card-content` part of `hover-card` with `role="dialog"`.

Supports polymorphic rendering via `asChild`.

### `HoverCardContentAsChildProps`

```ts
HoverCardContentAsChildProps: BoxAsChildProps & HoverCardContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Hover Card Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `HoverCardContentProps`

```ts
HoverCardContentProps: BoxProps<'div', HTMLDivElement> & HoverCardContentOwnProps
```

Props for Hover Card Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `HoverCardOwnProps`

```ts
HoverCardOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  openDelay?: number;
  closeDelay?: number;
}
```

Own props for Hover Card, before merging with native element attributes.

- `children`: children?: unknown;

- `closeDelay`: closeDelay?: number | undefined;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

- `openDelay`: openDelay?: number | undefined;

### `HoverCardPortal`

```ts
HoverCardPortal: (props: HoverCardPortalProps) => JSX.Element | null
```

Renders a part of `hover-card`.

### `HoverCardPortalProps`

```ts
HoverCardPortalProps: {
  children?: unknown;
}
```

Props for Hover Card Portal.

- `children`: children?: unknown;

### `HoverCardProps`

```ts
HoverCardProps: HoverCardOwnProps
```

Props for Hover Card.

- `children`: children?: unknown;

- `closeDelay`: closeDelay?: number | undefined;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

- `openDelay`: openDelay?: number | undefined;

### `HoverCardTrigger`

```ts
HoverCardTrigger: { (props: HoverCardTriggerProps): JSX.Element; (props: HoverCardTriggerAsChildProps): JSX.Element; }
```

Renders the `hover-card-trigger` part of `hover-card`.

Supports polymorphic rendering via `asChild`.

### `HoverCardTriggerAsChildProps`

```ts
HoverCardTriggerAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Hover Card Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `HoverCardTriggerProps`

```ts
HoverCardTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Hover Card Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `Input`

```ts
Input: { (props: InputInputProps): JSX.Element; (props: InputAsChildProps): JSX.Element; }
```

Renders the `input` part of `input`.

Supports polymorphic rendering via `asChild`.

### `INPUT_A11Y_CONTRACT`

```ts
INPUT_A11Y_CONTRACT: { readonly HOST_ELEMENT: "input"; readonly DISABLED_ATTRIBUTES: { readonly native: "disabled"; readonly asChild: "disabled"; }; readonly DATA_ATTRIBUTES: { readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly defaultTabIndex: 0; readonly disabledTabIndex: -1; }; readonly LABELING: { readonly supportsLabelElement: true; readonly supportsAriaLabel: true; readonly supportsAriaLabelledBy: true; }; }
```

Native input semantics wrapped by askr-ui Input.

### `InputA11yContract`

```ts
InputA11yContract: typeof INPUT_A11Y_CONTRACT
```

Type of the Input A11y Contract object.

### `InputAsChildProps`

```ts
InputAsChildProps: InputOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Input.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `tabIndex`: tabIndex?: number | undefined;

### `InputEvent`

```ts
InputEvent: Event & {
  currentTarget: HTMLInputElement;
  target: HTMLInputElement;
}
```

Input Event.

### `InputInputProps`

```ts
InputInputProps: Omit<JSX.IntrinsicElements['input'], 'children' | 'ref'> & InputOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLInputElement>;
}
```

Props for Input Input.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLInputElement>;

### `InputOwnProps`

```ts
InputOwnProps: {
  children?: unknown;
  disabled?: boolean;
  tabIndex?: number;
}
```

Own props for Input, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `tabIndex`: tabIndex?: number | undefined;

### `InputProps`

```ts
InputProps: InputInputProps | InputAsChildProps
```

Props for Input.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLInputElement | null) => void) | { current: HTMLInputElement | null; } | null | undefined;

### `Label`

```ts
Label: { (props: LabelLabelProps): JSXElement; (props: LabelAsChildProps): JSXElement; }
```

Renders the `label` part of `label`.

Supports polymorphic rendering via `asChild`.

### `LABEL_A11Y_CONTRACT`

```ts
LABEL_A11Y_CONTRACT: { readonly ELEMENT: "label"; readonly ASSOCIATION_ATTRIBUTE: "for"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; }; readonly NAME_SOURCE_PRIORITY: readonly ["aria-label", "textContent"]; readonly AS_CHILD: { readonly forwardsProps: true; readonly preservesChildElement: true; }; }
```

Native label semantics for askr-ui Label.

### `LabelA11yContract`

```ts
LabelA11yContract: typeof LABEL_A11Y_CONTRACT
```

Type of the Label A11y Contract object.

### `LabelAsChildProps`

```ts
LabelAsChildProps: LabelOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Label.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `LabelLabelProps`

```ts
LabelLabelProps: Omit<Props, 'children'> & LabelOwnProps & {
  asChild?: false;
  htmlFor?: string;
  ref?: Ref<HTMLLabelElement>;
}
```

Props for Label Label.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `htmlFor`: htmlFor?: string | undefined;

- `ref`: ref?: Ref<HTMLLabelElement>;

### `LabelOwnProps`

```ts
LabelOwnProps: {
  children?: unknown;
}
```

Own props for Label, before merging with native element attributes.

- `children`: children?: unknown;

### `LabelProps`

```ts
LabelProps: LabelLabelProps | LabelAsChildProps
```

Props for Label.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLLabelElement | null) => void) | { current: HTMLLabelElement | null; } | null | undefined;

### `Menu`

```ts
Menu: (props: MenuProps) => JSX.Element
```

Renders a part of `menu`.

### `MENU_A11Y_CONTRACT`

```ts
MENU_A11Y_CONTRACT: { readonly CONTENT_ROLE: "menu"; readonly ITEM_ROLE: "menuitem"; readonly ORIENTATION_ATTRIBUTE: "aria-orientation"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }
```

Menu accessibility contract.

### `MenuA11yContract`

```ts
MenuA11yContract: typeof MENU_A11Y_CONTRACT
```

Type of the Menu A11y Contract object.

### `Menubar`

```ts
Menubar: (props: MenubarProps) => JSX.Element
```

Renders a part of `menubar`.

### `MENUBAR_A11Y_CONTRACT`

```ts
MENUBAR_A11Y_CONTRACT: { readonly ROOT_ROLE: "menubar"; readonly CONTENT_ROLE: "menu"; readonly ITEM_ROLE: "menuitem"; readonly EXPANDED_ATTRIBUTE: "aria-expanded"; readonly HAS_POPUP_ATTRIBUTE: "aria-haspopup"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; }
```

WAI-ARIA menubar contract.

### `MenubarA11yContract`

```ts
MenubarA11yContract: typeof MENUBAR_A11Y_CONTRACT
```

Type of the Menubar A11y Contract object.

### `MenubarContent`

```ts
MenubarContent: { (props: MenubarContentProps): JSX.Element | null; (props: MenubarContentAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

### `MenubarContentAsChildProps`

```ts
MenubarContentAsChildProps: BoxAsChildProps & MenubarContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarContentOwnProps`

```ts
MenubarContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}
```

Own props for Menubar Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

- `forceMount`: forceMount?: boolean | undefined;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarContentProps`

```ts
MenubarContentProps: BoxProps<'div', HTMLDivElement> & MenubarContentOwnProps
```

Props for Menubar Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarGroup`

```ts
MenubarGroup: (props: MenubarGroupProps | MenubarGroupAsChildProps) => JSX.Element
```

Renders the `menubar-group` part of `menubar` with `role="group"`.

Supports polymorphic rendering via `asChild`.

### `MenubarGroupAsChildProps`

```ts
MenubarGroupAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Group.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenubarGroupProps`

```ts
MenubarGroupProps: BoxProps<'div', HTMLDivElement>
```

Props for Menubar Group.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenubarItem`

```ts
MenubarItem: { (props: MenubarItemProps): JSX.Element | null; (props: MenubarItemAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MenubarItemAsChildProps`

```ts
MenubarItemAsChildProps: ButtonLikeAsChildProps & MenubarTextValueOwnProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: undefined;

### `MenubarItemProps`

```ts
MenubarItemProps: ButtonLikeProps<'button', HTMLButtonElement> & MenubarTextValueOwnProps
```

Props for Menubar Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `MenubarLabel`

```ts
MenubarLabel: (props: MenubarLabelProps | MenubarLabelAsChildProps) => JSX.Element
```

Renders the `menubar-label` part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MenubarLabelAsChildProps`

```ts
MenubarLabelAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Label.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenubarLabelProps`

```ts
MenubarLabelProps: BoxProps<'div', HTMLDivElement>
```

Props for Menubar Label.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenubarMenu`

```ts
MenubarMenu: (props: MenubarMenuProps) => JSX.Element
```

Renders a part of `menubar`.

### `MenubarMenuProps`

```ts
MenubarMenuProps: {
  children?: unknown;
  /** Stable and unique among sibling menus when menus are rendered dynamically. */
  value?: string;
}
```

Props for Menubar Menu.

- `children`: children?: unknown;

- `value`: Stable and unique among sibling menus when menus are rendered dynamically.

### `MenubarOwnProps`

```ts
MenubarOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  loop?: boolean;
}
```

Own props for Menubar, before merging with native element attributes.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

### `MenubarPortal`

```ts
MenubarPortal: (props: MenubarPortalProps) => JSX.Element | null
```

Renders a part of `menubar`.

### `MenubarPortalProps`

```ts
MenubarPortalProps: {
  children?: unknown;
}
```

Props for Menubar Portal.

- `children`: children?: unknown;

### `MenubarProps`

```ts
MenubarProps: BoxProps<'div', HTMLDivElement> & MenubarOwnProps
```

Props for Menubar.

- `asChild`: asChild?: false | undefined;

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenubarSeparator`

```ts
MenubarSeparator: (props: MenubarSeparatorProps | MenubarSeparatorAsChildProps) => JSX.Element
```

Renders the `menubar-separator` part of `menubar` with `role="separator"`.

Supports polymorphic rendering via `asChild`.

### `MenubarSeparatorAsChildProps`

```ts
MenubarSeparatorAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Separator.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenubarSeparatorProps`

```ts
MenubarSeparatorProps: BoxProps<'div', HTMLDivElement>
```

Props for Menubar Separator.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenubarSub`

```ts
MenubarSub: (props: MenubarSubProps) => JSX.Element
```

Renders a part of `menubar`.

### `MenubarSubContent`

```ts
MenubarSubContent: { (props: MenubarSubContentProps): JSX.Element | null; (props: MenubarSubContentAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

### `MenubarSubContentAsChildProps`

```ts
MenubarSubContentAsChildProps: BoxAsChildProps & MenubarContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Sub Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarSubContentProps`

```ts
MenubarSubContentProps: BoxProps<'div', HTMLDivElement> & MenubarContentOwnProps
```

Props for Menubar Sub Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `MenubarSubProps`

```ts
MenubarSubProps: {
  children?: unknown;
  value?: string;
}
```

Props for Menubar Sub.

- `children`: children?: unknown;

- `value`: value?: string | undefined;

### `MenubarSubTrigger`

```ts
MenubarSubTrigger: { (props: MenubarSubTriggerProps): JSX.Element | null; (props: MenubarSubTriggerAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MenubarSubTriggerAsChildProps`

```ts
MenubarSubTriggerAsChildProps: ButtonLikeAsChildProps & MenubarTextValueOwnProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Sub Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: undefined;

### `MenubarSubTriggerProps`

```ts
MenubarSubTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & MenubarTextValueOwnProps
```

Props for Menubar Sub Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `MenubarTrigger`

```ts
MenubarTrigger: { (props: MenubarTriggerProps): JSX.Element | null; (props: MenubarTriggerAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MenubarTriggerAsChildProps`

```ts
MenubarTriggerAsChildProps: ButtonLikeAsChildProps & MenubarTextValueOwnProps
```

Props for the `asChild` (polymorphic) rendering of Menubar Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: undefined;

### `MenubarTriggerProps`

```ts
MenubarTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & MenubarTextValueOwnProps
```

Props for Menubar Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `MenuContent`

```ts
MenuContent: { (props: MenuContentProps): JSX.Element; (props: MenuContentAsChildProps): JSX.Element; }
```

Renders the `menu-content` part of `menu` with `role="menu"`.

Supports polymorphic rendering via `asChild`.

### `MenuContentAsChildProps`

```ts
MenuContentAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menu Content.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuContentProps`

```ts
MenuContentProps: BoxProps<'div', HTMLDivElement>
```

Props for Menu Content.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenuGroup`

```ts
MenuGroup: { (props: MenuGroupProps): JSX.Element; (props: MenuGroupAsChildProps): JSX.Element; }
```

Renders the `menu-group` part of `menu` with `role="group"`.

Supports polymorphic rendering via `asChild`.

### `MenuGroupAsChildProps`

```ts
MenuGroupAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menu Group.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuGroupProps`

```ts
MenuGroupProps: BoxProps<'div', HTMLDivElement>
```

Props for Menu Group.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenuItem`

```ts
MenuItem: { (props: MenuItemProps): JSX.Element | null; (props: MenuItemAsChildProps): JSX.Element | null; }
```

Renders the `menu-item` part of `menu` with `role="menuitem"`.

Supports polymorphic rendering via `asChild`.

### `MenuItemAsChildProps`

```ts
MenuItemAsChildProps: Omit<ButtonLikeAsChildProps, 'onPress'> & MenuItemOwnProps
```

Props for the `asChild` (polymorphic) rendering of Menu Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: undefined;

### `MenuItemDescription`

```ts
MenuItemDescription: { (props: MenuItemPartProps): JSX.Element; (props: MenuItemPartAsChildProps): JSX.Element; }
```

Optional supporting description for a structured Menu Item.

### `MenuItemIcon`

```ts
MenuItemIcon: { (props: MenuItemPartProps): JSX.Element; (props: MenuItemPartAsChildProps): JSX.Element; }
```

Optional leading visual for a Menu Item.

### `MenuItemLabel`

```ts
MenuItemLabel: { (props: MenuItemPartProps): JSX.Element; (props: MenuItemPartAsChildProps): JSX.Element; }
```

Primary visible label for a structured Menu Item.

### `MenuItemOwnProps`

```ts
MenuItemOwnProps: {
  children?: unknown;
  disabled?: boolean;
  onSelect?: (event: PressEvent) => void;
  /** Text used for typeahead when rendered children are not plain text. */
  textValue?: string;
}
```

Own props for Menu Item, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `textValue`: Text used for typeahead when rendered children are not plain text.

### `MenuItemPartAsChildProps`

```ts
MenuItemPartAsChildProps: BoxAsChildProps
```

Props for a polymorphic presentational part within a Menu Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuItemPartProps`

```ts
MenuItemPartProps: BoxProps<'span', HTMLSpanElement>
```

Props for a presentational part within a Menu Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLSpanElement>;

### `MenuItemProps`

```ts
MenuItemProps: Omit<ButtonLikeProps<'button', HTMLButtonElement>, 'onPress'> & MenuItemOwnProps
```

Props for Menu Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onSelect`: onSelect?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `textValue`: Text used for typeahead when rendered children are not plain text.

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `MenuLabel`

```ts
MenuLabel: { (props: MenuLabelProps): JSX.Element | null; (props: MenuLabelAsChildProps): JSX.Element | null; }
```

Renders the `menu-label` part of `menu`.

Supports polymorphic rendering via `asChild`.

### `MenuLabelAsChildProps`

```ts
MenuLabelAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menu Label.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuLabelProps`

```ts
MenuLabelProps: BoxProps<'div', HTMLDivElement>
```

Props for Menu Label.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `MenuOwnProps`

```ts
MenuOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  orientation?: Orientation;
  loop?: boolean;
}
```

Own props for Menu, before merging with native element attributes.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `orientation`: orientation?: Orientation | undefined;

### `MenuProps`

```ts
MenuProps: MenuOwnProps
```

Props for Menu.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `orientation`: orientation?: Orientation | undefined;

### `MenuSeparator`

```ts
MenuSeparator: { (props: MenuSeparatorProps): JSX.Element | null; (props: MenuSeparatorAsChildProps): JSX.Element | null; }
```

Renders the `menu-separator` part of `menu` with `role="separator"`.

Supports polymorphic rendering via `asChild`.

### `MenuSeparatorAsChildProps`

```ts
MenuSeparatorAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Menu Separator.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `MenuSeparatorProps`

```ts
MenuSeparatorProps: BoxProps<'div', HTMLDivElement>
```

Props for Menu Separator.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `Popover`

```ts
Popover: (props: PopoverProps) => JSX.Element
```

Renders a part of `popover`.

### `POPOVER_A11Y_CONTRACT`

```ts
POPOVER_A11Y_CONTRACT: { readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTES: { readonly popup: "aria-haspopup"; readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; }; readonly CONTENT_ATTRIBUTES: { readonly role: "dialog"; readonly labelledBy: "aria-labelledby"; readonly tabIndex: -1; }; readonly DEFAULT_LABELING: { readonly source: "trigger-id"; readonly override: "aria-label or aria-labelledby"; }; readonly FOCUS_RULES: { readonly trapScope: true; readonly restoreFocusOnClose: true; readonly dismissableLayer: true; }; }
```

WAI-ARIA dialog-style popover contract.

### `PopoverA11yContract`

```ts
PopoverA11yContract: typeof POPOVER_A11Y_CONTRACT
```

Type of the Popover A11y Contract object.

### `PopoverClose`

```ts
PopoverClose: { (props: PopoverCloseProps): JSX.Element; (props: PopoverCloseAsChildProps): JSX.Element; }
```

Renders the `popover-close` part of `popover`.

Supports polymorphic rendering via `asChild`.

### `PopoverCloseAsChildProps`

```ts
PopoverCloseAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Popover Close.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `PopoverCloseProps`

```ts
PopoverCloseProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Popover Close.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `PopoverContent`

```ts
PopoverContent: { (props: PopoverContentProps): JSX.Element | null; (props: PopoverContentAsChildProps): JSX.Element | null; }
```

Renders the `popover-content` part of `popover` with `role="dialog"`.

Supports polymorphic rendering via `asChild`.

### `PopoverContentAsChildProps`

```ts
PopoverContentAsChildProps: BoxAsChildProps & PopoverContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Popover Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

- `width`: width?: PopoverContentWidth | undefined;

### `PopoverContentOwnProps`

```ts
PopoverContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
  width?: PopoverContentWidth;
}
```

Own props for Popover Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

- `forceMount`: forceMount?: boolean | undefined;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

- `width`: width?: PopoverContentWidth | undefined;

### `PopoverContentProps`

```ts
PopoverContentProps: BoxProps<'div', HTMLDivElement> & PopoverContentOwnProps
```

Props for Popover Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

- `width`: width?: PopoverContentWidth | undefined;

### `PopoverContentWidth`

```ts
PopoverContentWidth: 'sm' | 'md' | 'lg'
```

Popover Content Width.

### `PopoverOwnProps`

```ts
PopoverOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}
```

Own props for Popover, before merging with native element attributes.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `PopoverPortal`

```ts
PopoverPortal: (props: PopoverPortalProps) => JSX.Element | null
```

Renders a part of `popover`.

### `PopoverPortalProps`

```ts
PopoverPortalProps: {
  children?: unknown;
}
```

Props for Popover Portal.

- `children`: children?: unknown;

### `PopoverProps`

```ts
PopoverProps: PopoverOwnProps
```

Props for Popover.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `PopoverTrigger`

```ts
PopoverTrigger: { (props: PopoverTriggerProps): JSX.Element; (props: PopoverTriggerAsChildProps): JSX.Element; }
```

Renders the `popover-trigger` part of `popover`.

Supports polymorphic rendering via `asChild`.

### `PopoverTriggerAsChildProps`

```ts
PopoverTriggerAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Popover Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `PopoverTriggerProps`

```ts
PopoverTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Popover Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `PressEvent`

```ts
PressEvent: {
  preventDefault?: () => void;
  stopPropagation?: () => void;
  defaultPrevented?: boolean;
}
```

Press event passed to onPress handler

Compatible with the pressable foundation's PressEvent type.

### `Progress`

```ts
Progress: (props: ProgressProps) => JSX.Element
```

Renders the `progress` part of `progress` with `role="progressbar"`.

### `PROGRESS_A11Y_CONTRACT`

```ts
PROGRESS_A11Y_CONTRACT: { readonly ROLE: "progressbar"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly percentage: "data-percentage"; }; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly INDICATOR_MARKER: "data-progress-indicator"; readonly INDICATOR_PERCENTAGE_ATTRIBUTE: "data-percentage"; }
```

WAI-ARIA progressbar contract for linear progress.

### `PROGRESS_CIRCLE_A11Y_CONTRACT`

```ts
PROGRESS_CIRCLE_A11Y_CONTRACT: { readonly ROLE: "progressbar"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly percentage: "data-percentage"; }; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly INDICATOR_MARKER: "data-progress-circle-indicator"; }
```

WAI-ARIA progressbar contract for circular progress.

### `ProgressA11yContract`

```ts
ProgressA11yContract: typeof PROGRESS_A11Y_CONTRACT
```

Type of the Progress A11y Contract object.

### `ProgressCircle`

```ts
ProgressCircle: (props: ProgressCircleProps) => JSX.Element
```

Headless circular progress indicator root.

Normalizes value/max, computes percentage, exposes `--ak-progress-percentage`
as a dynamically injected CSS custom property, and provides progress state
to `ProgressCircleIndicator` via context.

### `ProgressCircleA11yContract`

```ts
ProgressCircleA11yContract: typeof PROGRESS_CIRCLE_A11Y_CONTRACT
```

Type of the Progress Circle A11y Contract object.

### `ProgressCircleIndicator`

```ts
ProgressCircleIndicator: { (props: ProgressCircleIndicatorProps): JSX.Element; (props: ProgressCircleIndicatorAsChildProps): JSX.Element; }
```

Visual indicator for `ProgressCircle`, rendering the fill/arc element.
Must be used within a `ProgressCircle`; reads progress state from context
and exposes it as `data-state`/`data-value`/`data-max`/`data-percentage`.

### `ProgressCircleIndicatorAsChildProps`

```ts
ProgressCircleIndicatorAsChildProps: BoxAsChildProps
```

Props for `ProgressCircleIndicator` rendered polymorphically via `asChild`.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ProgressCircleIndicatorProps`

```ts
ProgressCircleIndicatorProps: BoxProps<'div', HTMLDivElement>
```

Props for `ProgressCircleIndicator` rendered as a native `div`.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ProgressCircleOwnProps`

```ts
ProgressCircleOwnProps: {
  children?: unknown;
  id?: string;
  value?: number | null;
  max?: number;
  getValueLabel?: (value: number | null, max: number) => string;
}
```

Props specific to `ProgressCircle`, before merging with native `div` attributes.

- `children`: children?: unknown;

- `getValueLabel`: getValueLabel?: ((value: number | null, max: number) => string) | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `value`: value?: number | null | undefined;

### `ProgressCircleProps`

```ts
ProgressCircleProps: BoxProps<'div', HTMLDivElement> & ProgressCircleOwnProps
```

Props for `ProgressCircle`, combining native `div` attributes with `ProgressCircleOwnProps`.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `getValueLabel`: getValueLabel?: ((value: number | null, max: number) => string) | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `value`: value?: number | null | undefined;

### `ProgressIndicator`

```ts
ProgressIndicator: { (props: ProgressIndicatorProps): JSX.Element; (props: ProgressIndicatorAsChildProps): JSX.Element; }
```

Renders the `progress-indicator` part of `progress`.

Supports polymorphic rendering via `asChild`.

### `ProgressIndicatorAsChildProps`

```ts
ProgressIndicatorAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Progress Indicator.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ProgressIndicatorProps`

```ts
ProgressIndicatorProps: BoxProps<'div', HTMLDivElement>
```

Props for Progress Indicator.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ProgressOwnProps`

```ts
ProgressOwnProps: {
  children?: unknown;
  id?: string;
  value?: number | null;
  max?: number;
  getValueLabel?: (value: number | null, max: number) => string;
}
```

Own props for Progress, before merging with native element attributes.

- `children`: children?: unknown;

- `getValueLabel`: getValueLabel?: ((value: number | null, max: number) => string) | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `value`: value?: number | null | undefined;

### `ProgressProps`

```ts
ProgressProps: BoxProps<'div', HTMLDivElement> & ProgressOwnProps
```

Props for Progress.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `getValueLabel`: getValueLabel?: ((value: number | null, max: number) => string) | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `value`: value?: number | null | undefined;

### `RADIO_GROUP_A11Y_CONTRACT`

```ts
RADIO_GROUP_A11Y_CONTRACT: { readonly GROUP_ROLE: "radiogroup"; readonly ITEM_ROLE: "radio"; readonly CHECKED_ATTRIBUTE: "aria-checked"; readonly ORIENTATION_ATTRIBUTE: "aria-orientation"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; readonly KEYBOARD_NAVIGATION: readonly ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]; readonly ROVING_FOCUS: { readonly activeItemTabIndex: 0; readonly inactiveItemTabIndex: -1; }; readonly FORM_INTEGRATION: { readonly hiddenInputType: "hidden"; }; }
```

WAI-ARIA Radio Group Pattern

Specification: https://www.w3.org/WAI/ARIA/apg/patterns/radio/

### `RadioGroup`

```ts
RadioGroup: (props: RadioGroupProps) => JSX.Element
```

Renders a part of `radio-group`.

### `RadioGroupA11yContract`

```ts
RadioGroupA11yContract: typeof RADIO_GROUP_A11Y_CONTRACT
```

Type of the Radio Group A11y Contract object.

### `RadioGroupItem`

```ts
RadioGroupItem: { (props: RadioGroupItemProps): JSX.Element; (props: RadioGroupItemAsChildProps): JSX.Element; }
```

Renders the `radio-group-item` part of `radio-group` with `role="radio"`.

Supports polymorphic rendering via `asChild`.

### `RadioGroupItemAsChildProps`

```ts
RadioGroupItemAsChildProps: RadioGroupItemOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Radio Group Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `value`: value: string;

### `RadioGroupItemOwnProps`

```ts
RadioGroupItemOwnProps: {
  value: string;
  disabled?: boolean;
  children?: unknown;
}
```

Own props for Radio Group Item, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `value`: value: string;

### `RadioGroupItemProps`

```ts
RadioGroupItemProps: Omit<JSX.IntrinsicElements['button'], 'children' | 'ref' | 'onClick' | 'type' | 'value'> & RadioGroupItemOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLButtonElement>;
}
```

Props for Radio Group Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `value`: value: string;

### `RadioGroupOwnProps`

```ts
RadioGroupOwnProps: {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  disabled?: boolean;
  name?: string;
  orientation?: Orientation;
  loop?: boolean;
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
}
```

Own props for Radio Group, before merging with native element attributes.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: string | undefined;

- `disabled`: disabled?: boolean | undefined;

- `loop`: loop?: boolean | undefined;

- `name`: name?: string | undefined;

- `onValueChange`: onValueChange?: ((value: string) => void) | undefined;

- `orientation`: orientation?: Orientation | undefined;

- `value`: value?: string | undefined;

### `RadioGroupProps`

```ts
RadioGroupProps: Omit<JSX.IntrinsicElements['div'], 'children' | 'ref'> & RadioGroupOwnProps & {
  ref?: Ref<HTMLDivElement>;
}
```

Props for Radio Group.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: string | undefined;

- `disabled`: disabled?: boolean | undefined;

- `loop`: loop?: boolean | undefined;

- `name`: name?: string | undefined;

- `onValueChange`: onValueChange?: ((value: string) => void) | undefined;

- `orientation`: orientation?: Orientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `value`: value?: string | undefined;

### `ScrollArea`

```ts
ScrollArea: { (props: ScrollAreaProps): JSX.Element; (props: ScrollAreaAsChildProps): JSX.Element; }
```

Renders a part of `scroll-area`.

### `ScrollAreaAsChildProps`

```ts
ScrollAreaAsChildProps: ScrollAreaOwnProps & {
  asChild: true;
  children: JSX.Element;
}
```

Props for the `asChild` (polymorphic) rendering of Scroll Area.

- `asChild`: asChild: true;

- `children`: children: JSX.Element;

- `id`: id?: string | undefined;

### `ScrollAreaCorner`

```ts
ScrollAreaCorner: (props: ScrollAreaCornerProps) => JSX.Element
```

Renders the `scroll-area-corner` part of `scroll-area`.

### `ScrollAreaCornerProps`

```ts
ScrollAreaCornerProps: BoxProps<'div', HTMLDivElement>
```

Props for Scroll Area Corner.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ScrollAreaOwnProps`

```ts
ScrollAreaOwnProps: {
  children?: unknown;
  id?: string;
}
```

Own props for Scroll Area, before merging with native element attributes.

- `children`: children?: unknown;

- `id`: id?: string | undefined;

### `ScrollAreaProps`

```ts
ScrollAreaProps: ScrollAreaOwnProps
```

Props for Scroll Area.

- `children`: children?: unknown;

- `id`: id?: string | undefined;

### `ScrollAreaScrollbar`

```ts
ScrollAreaScrollbar: (props: ScrollAreaScrollbarProps) => JSX.Element
```

Renders the `scroll-area-scrollbar` part of `scroll-area` with `role="scrollbar"`.

### `ScrollAreaScrollbarProps`

```ts
ScrollAreaScrollbarProps: BoxProps<'div', HTMLDivElement> & {
  orientation?: 'vertical' | 'horizontal';
}
```

Props for Scroll Area Scrollbar.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `orientation`: orientation?: "vertical" | "horizontal" | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ScrollAreaThumb`

```ts
ScrollAreaThumb: (props: ScrollAreaThumbProps) => JSX.Element
```

Renders the `scroll-area-thumb` part of `scroll-area`.

### `ScrollAreaThumbProps`

```ts
ScrollAreaThumbProps: BoxProps<'div', HTMLDivElement>
```

Props for Scroll Area Thumb.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ScrollAreaViewport`

```ts
ScrollAreaViewport: { (props: ScrollAreaViewportProps): JSX.Element; (props: ScrollAreaViewportAsChildProps): JSX.Element; }
```

Renders a part of `scroll-area`.

### `ScrollAreaViewportAsChildProps`

```ts
ScrollAreaViewportAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Scroll Area Viewport.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ScrollAreaViewportProps`

```ts
ScrollAreaViewportProps: BoxProps<'div', HTMLDivElement>
```

Props for Scroll Area Viewport.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `Select`

```ts
Select: (props: SelectProps) => JSX.Element
```

Renders a part of `select`.

### `SELECT_A11Y_CONTRACT`

```ts
SELECT_A11Y_CONTRACT: { readonly TRIGGER_ROLE: "button"; readonly CONTENT_ROLE: "listbox"; readonly ITEM_ROLE: "option"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; readonly hasPopup: "aria-haspopup"; }; readonly ITEM_SELECTION_ATTRIBUTE: "aria-selected"; }
```

Select accessibility contract.

### `SelectA11yContract`

```ts
SelectA11yContract: typeof SELECT_A11Y_CONTRACT
```

Type of the Select A11y Contract object.

### `SelectContent`

```ts
SelectContent: { (props: SelectContentProps): JSX.Element | null; (props: SelectContentAsChildProps): JSX.Element | null; }
```

Renders a part of `select` with `role="listbox"`.

Supports polymorphic rendering via `asChild`.

### `SelectContentAsChildProps`

```ts
SelectContentAsChildProps: BoxAsChildProps & SelectContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Select Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `SelectContentOwnProps`

```ts
SelectContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}
```

Own props for Select Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

- `forceMount`: forceMount?: boolean | undefined;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `SelectContentProps`

```ts
SelectContentProps: BoxProps<'div', HTMLDivElement> & SelectContentOwnProps
```

Props for Select Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `SelectGroup`

```ts
SelectGroup: { (props: SelectGroupProps): JSX.Element; (props: SelectGroupAsChildProps): JSX.Element; }
```

Renders the `select-group` part of `select` with `role="group"`.

Supports polymorphic rendering via `asChild`.

### `SelectGroupAsChildProps`

```ts
SelectGroupAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Select Group.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SelectGroupProps`

```ts
SelectGroupProps: BoxProps<'div', HTMLDivElement>
```

Props for Select Group.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `SelectItem`

```ts
SelectItem: { (props: SelectItemProps): JSX.Element | null; (props: SelectItemAsChildProps): JSX.Element | null; }
```

Renders a part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectItemAsChildProps`

```ts
SelectItemAsChildProps: Omit<ButtonLikeAsChildProps, 'onPress'> & SelectItemOwnProps
```

Props for the `asChild` (polymorphic) rendering of Select Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `textValue`: textValue?: string | undefined;

- `type`: type?: undefined;

- `value`: value: string;

### `SelectItemOwnProps`

```ts
SelectItemOwnProps: {
  children?: unknown;
  disabled?: boolean;
  textValue?: string;
  value: string;
}
```

Own props for Select Item, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `textValue`: textValue?: string | undefined;

- `value`: value: string;

### `SelectItemProps`

```ts
SelectItemProps: Omit<ButtonLikeProps<'button', HTMLButtonElement>, 'onPress'> & SelectItemOwnProps
```

Props for Select Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `textValue`: textValue?: string | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `SelectItemText`

```ts
SelectItemText: { (props: SelectItemTextProps): JSX.Element; (props: SelectItemTextAsChildProps): JSX.Element; }
```

SelectItemText marks the item text node so Select can resolve labels and
style the text slot directly.
Renders the `select-item-text` part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectItemTextAsChildProps`

```ts
SelectItemTextAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Select Item Text.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SelectItemTextProps`

```ts
SelectItemTextProps: BoxProps<'span', HTMLSpanElement>
```

Props for Select Item Text.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLSpanElement>;

### `SelectLabel`

```ts
SelectLabel: { (props: SelectLabelProps): JSX.Element | null; (props: SelectLabelAsChildProps): JSX.Element | null; }
```

Renders the `select-label` part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectLabelAsChildProps`

```ts
SelectLabelAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Select Label.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SelectLabelProps`

```ts
SelectLabelProps: BoxProps<'div', HTMLDivElement>
```

Props for Select Label.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `SelectOwnProps`

```ts
SelectOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  name?: string;
  disabled?: boolean;
}
```

Own props for Select, before merging with native element attributes.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `defaultValue`: defaultValue?: string | undefined;

- `disabled`: disabled?: boolean | undefined;

- `id`: id?: string | undefined;

- `name`: name?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `onValueChange`: onValueChange?: ((value: string) => void) | undefined;

- `open`: open?: boolean | undefined;

- `value`: value?: string | undefined;

### `SelectPortal`

```ts
SelectPortal: (props: SelectPortalProps) => JSX.Element | null
```

Renders a part of `select`.

### `SelectPortalProps`

```ts
SelectPortalProps: {
  children?: unknown;
}
```

Props for Select Portal.

- `children`: children?: unknown;

### `SelectProps`

```ts
SelectProps: SelectOwnProps
```

Props for Select.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `defaultValue`: defaultValue?: string | undefined;

- `disabled`: disabled?: boolean | undefined;

- `id`: id?: string | undefined;

- `name`: name?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `onValueChange`: onValueChange?: ((value: string) => void) | undefined;

- `open`: open?: boolean | undefined;

- `value`: value?: string | undefined;

### `SelectSeparator`

```ts
SelectSeparator: { (props: SelectSeparatorProps): JSX.Element | null; (props: SelectSeparatorAsChildProps): JSX.Element | null; }
```

Renders the `select-separator` part of `select` with `role="separator"`.

Supports polymorphic rendering via `asChild`.

### `SelectSeparatorAsChildProps`

```ts
SelectSeparatorAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Select Separator.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SelectSeparatorProps`

```ts
SelectSeparatorProps: BoxProps<'div', HTMLDivElement>
```

Props for Select Separator.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `SelectTrigger`

```ts
SelectTrigger: { (props: SelectTriggerProps): JSX.Element | null; (props: SelectTriggerAsChildProps): JSX.Element | null; }
```

Renders the `select-trigger` part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectTriggerAsChildProps`

```ts
SelectTriggerAsChildProps: ButtonLikeAsChildProps & SelectTriggerOwnProps
```

Props for the `asChild` (polymorphic) rendering of Select Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `size`: size?: SelectTriggerSize | undefined;

- `type`: type?: undefined;

### `SelectTriggerOwnProps`

```ts
SelectTriggerOwnProps: {
  size?: SelectTriggerSize;
}
```

Own props for Select Trigger, before merging with native element attributes.

- `size`: size?: SelectTriggerSize | undefined;

### `SelectTriggerProps`

```ts
SelectTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & SelectTriggerOwnProps
```

Props for Select Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `size`: size?: SelectTriggerSize | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `SelectTriggerSize`

```ts
SelectTriggerSize: 'sm' | 'md' | 'lg'
```

Select Trigger Size.

### `SelectValue`

```ts
SelectValue: { (props: SelectValueProps): JSX.Element | null; (props: SelectValueAsChildProps): JSX.Element | null; }
```

Renders the `select-value` part of `select`.

Supports polymorphic rendering via `asChild`.

### `SelectValueAsChildProps`

```ts
SelectValueAsChildProps: BoxAsChildProps & SelectValueOwnProps
```

Props for the `asChild` (polymorphic) rendering of Select Value.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `placeholder`: placeholder?: string | undefined;

- `ref`: ref?: Ref<Element>;

### `SelectValueOwnProps`

```ts
SelectValueOwnProps: {
  placeholder?: string;
  children?: unknown;
}
```

Own props for Select Value, before merging with native element attributes.

- `children`: children?: unknown;

- `placeholder`: placeholder?: string | undefined;

### `SelectValueProps`

```ts
SelectValueProps: BoxProps<'span', HTMLSpanElement> & SelectValueOwnProps
```

Props for Select Value.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `placeholder`: placeholder?: string | undefined;

- `ref`: ref?: Ref<HTMLSpanElement>;

### `Slider`

```ts
Slider: (props: SliderProps) => JSX.Element
```

Renders the `slider` part of `slider`.

### `SLIDER_A11Y_CONTRACT`

```ts
SLIDER_A11Y_CONTRACT: { readonly THUMB_ROLE: "slider"; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly ORIENTATION_ATTRIBUTE: "aria-orientation"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }
```

Slider accessibility contract.

### `SliderA11yContract`

```ts
SliderA11yContract: typeof SLIDER_A11Y_CONTRACT
```

Type of the Slider A11y Contract object.

### `SliderOrientation`

```ts
SliderOrientation: 'horizontal' | 'vertical'
```

Slider Orientation.

### `SliderOwnProps`

```ts
SliderOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  orientation?: SliderOrientation;
  disabled?: boolean;
  name?: string;
}
```

Own props for Slider, before merging with native element attributes.

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: number | undefined;

- `disabled`: disabled?: boolean | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `min`: min?: number | undefined;

- `name`: name?: string | undefined;

- `onValueChange`: onValueChange?: ((value: number) => void) | undefined;

- `orientation`: orientation?: SliderOrientation | undefined;

- `step`: step?: number | undefined;

- `value`: value?: number | undefined;

### `SliderProps`

```ts
SliderProps: BoxProps<'div', HTMLDivElement> & SliderOwnProps
```

Props for Slider.

- `asChild`: asChild?: false | undefined;

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: number | undefined;

- `disabled`: disabled?: boolean | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `min`: min?: number | undefined;

- `name`: name?: string | undefined;

- `onValueChange`: onValueChange?: ((value: number) => void) | undefined;

- `orientation`: orientation?: SliderOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `step`: step?: number | undefined;

- `value`: value?: number | undefined;

### `SliderRange`

```ts
SliderRange: { (props: SliderRangeProps): JSX.Element; (props: SliderRangeAsChildProps): JSX.Element; }
```

Renders the `slider-range` part of `slider`.

Supports polymorphic rendering via `asChild`.

### `SliderRangeAsChildProps`

```ts
SliderRangeAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Slider Range.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SliderRangeProps`

```ts
SliderRangeProps: BoxProps<'div', HTMLDivElement>
```

Props for Slider Range.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `SliderThumb`

```ts
SliderThumb: { (props: SliderThumbProps): JSX.Element; (props: SliderThumbAsChildProps): JSX.Element; }
```

Renders the `slider-thumb` part of `slider` with `role="slider"`.

Supports polymorphic rendering via `asChild`.

### `SliderThumbAsChildProps`

```ts
SliderThumbAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Slider Thumb.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SliderThumbProps`

```ts
SliderThumbProps: BoxProps<'div', HTMLDivElement>
```

Props for Slider Thumb.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `SliderTrack`

```ts
SliderTrack: { (props: SliderTrackProps): JSX.Element; (props: SliderTrackAsChildProps): JSX.Element; }
```

Renders the `slider-track` part of `slider`.

Supports polymorphic rendering via `asChild`.

### `SliderTrackAsChildProps`

```ts
SliderTrackAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Slider Track.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `SliderTrackProps`

```ts
SliderTrackProps: BoxProps<'div', HTMLDivElement>
```

Props for Slider Track.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `Switch`

```ts
Switch: { (props: SwitchButtonProps): JSX.Element; (props: SwitchAsChildProps): JSX.Element; }
```

Renders the `switch` part of `switch` with `role="switch"`.

Supports polymorphic rendering via `asChild`.

### `SWITCH_A11Y_CONTRACT`

```ts
SWITCH_A11Y_CONTRACT: { readonly ROLE: "switch"; readonly CHECKED_ATTRIBUTE: "aria-checked"; readonly KEYBOARD_ACTIVATION: readonly ["Space"]; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly DISABLED_ATTRIBUTES: { readonly nativeButton: { readonly disabled: true; readonly "aria-disabled": "true"; }; readonly nonNative: { readonly "aria-disabled": "true"; readonly tabIndex: -1; }; }; readonly FORM_INTEGRATION: { readonly host: "button"; readonly hiddenInputType: "checkbox"; readonly hiddenInputValue: "on"; }; }
```

WAI-ARIA Switch Pattern

Specification: https://www.w3.org/WAI/ARIA/apg/patterns/switch/

### `SwitchA11yContract`

```ts
SwitchA11yContract: typeof SWITCH_A11Y_CONTRACT
```

Type of the Switch A11y Contract object.

### `SwitchAsChildProps`

```ts
SwitchAsChildProps: SwitchOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
  type?: never;
}
```

Props for the `asChild` (polymorphic) rendering of Switch.

- `asChild`: asChild: true;

- `checked`: checked?: boolean | undefined;

- `children`: children: JSXElement;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `required`: required?: boolean | undefined;

- `type`: type?: undefined;

- `value`: value?: string | undefined;

### `SwitchButtonProps`

```ts
SwitchButtonProps: Omit<JSX.IntrinsicElements['button'], 'children' | 'onClick' | 'type' | 'ref'> & SwitchOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLButtonElement>;
  type?: 'button' | 'submit' | 'reset';
}
```

Props for Switch Button.

- `asChild`: asChild?: false | undefined;

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `required`: required?: boolean | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `SwitchOwnProps`

```ts
SwitchOwnProps: {
  children?: unknown;
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  value?: string;
}
```

Own props for Switch, before merging with native element attributes.

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `disabled`: disabled?: boolean | undefined;

- `name`: name?: string | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `required`: required?: boolean | undefined;

- `value`: value?: string | undefined;

### `SwitchProps`

```ts
SwitchProps: SwitchButtonProps | SwitchAsChildProps
```

Props for Switch.

- `asChild`: asChild?: boolean | undefined;

- `checked`: checked?: boolean | undefined;

- `children`: children?: unknown;

- `defaultChecked`: defaultChecked?: boolean | undefined;

- `onCheckedChange`: onCheckedChange?: ((checked: boolean) => void) | undefined;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined;

- `required`: required?: boolean | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `Table`

```ts
Table: { (props: TableProps): JSX.Element; (props: TableAsChildProps): JSX.Element; }
```

Semantic table primitive family.
Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableAsChildProps`

```ts
TableAsChildProps: TableAsChildBaseProps
```

Props for the `asChild` (polymorphic) rendering of Table.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `TableBody`

```ts
TableBody: { (props: TableBodyProps): JSX.Element; (props: TableBodyAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableBodyAsChildProps`

```ts
TableBodyAsChildProps: TableAsChildBaseProps
```

Props for the `asChild` (polymorphic) rendering of Table Body.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `TableBodyProps`

```ts
TableBodyProps: TableNativeProps<'tbody', HTMLTableSectionElement> | TableBodyAsChildProps
```

Props for Table Body.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableSectionElement | null) => void) | { current: HTMLTableSectionElement | null; } | null | undefined;

### `TableCaption`

```ts
TableCaption: { (props: TableCaptionProps): JSX.Element; (props: TableCaptionAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableCaptionAsChildProps`

```ts
TableCaptionAsChildProps: TableAsChildBaseProps
```

Props for the `asChild` (polymorphic) rendering of Table Caption.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `TableCaptionProps`

```ts
TableCaptionProps: TableNativeProps<'caption', HTMLTableCaptionElement> | TableCaptionAsChildProps
```

Props for Table Caption.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableCaptionElement | null) => void) | { current: HTMLTableCaptionElement | null; } | null | undefined;

### `TableCell`

```ts
TableCell: { (props: TableCellProps): JSX.Element; (props: TableCellAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableCellAsChildProps`

```ts
TableCellAsChildProps: TableAsChildBaseProps
```

Props for the `asChild` (polymorphic) rendering of Table Cell.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `TableCellProps`

```ts
TableCellProps: TableNativeProps<'td', HTMLTableCellElement> | TableCellAsChildProps
```

Props for Table Cell.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableCellElement | null) => void) | { current: HTMLTableCellElement | null; } | null | undefined;

### `TableFoot`

```ts
TableFoot: { (props: TableFootProps): JSX.Element; (props: TableFootAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableFootAsChildProps`

```ts
TableFootAsChildProps: TableAsChildBaseProps
```

Props for the `asChild` (polymorphic) rendering of Table Foot.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `TableFootProps`

```ts
TableFootProps: TableNativeProps<'tfoot', HTMLTableSectionElement> | TableFootAsChildProps
```

Props for Table Foot.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableSectionElement | null) => void) | { current: HTMLTableSectionElement | null; } | null | undefined;

### `TableHead`

```ts
TableHead: { (props: TableHeadProps): JSX.Element; (props: TableHeadAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableHeadAsChildProps`

```ts
TableHeadAsChildProps: TableAsChildBaseProps
```

Props for the `asChild` (polymorphic) rendering of Table Head.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `TableHeaderCell`

```ts
TableHeaderCell: { (props: TableHeaderCellProps): JSX.Element; (props: TableHeaderCellAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableHeaderCellAsChildProps`

```ts
TableHeaderCellAsChildProps: TableAsChildBaseProps
```

Props for the `asChild` (polymorphic) rendering of Table Header Cell.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `TableHeaderCellProps`

```ts
TableHeaderCellProps: TableNativeProps<'th', HTMLTableCellElement> | TableHeaderCellAsChildProps
```

Props for Table Header Cell.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableCellElement | null) => void) | { current: HTMLTableCellElement | null; } | null | undefined;

### `TableHeadProps`

```ts
TableHeadProps: TableNativeProps<'thead', HTMLTableSectionElement> | TableHeadAsChildProps
```

Props for Table Head.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableSectionElement | null) => void) | { current: HTMLTableSectionElement | null; } | null | undefined;

### `TableProps`

```ts
TableProps: TableNativeProps<'table', HTMLTableElement> | TableAsChildBaseProps
```

Props for Table.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableElement | null) => void) | { current: HTMLTableElement | null; } | null | undefined;

### `TableRow`

```ts
TableRow: { (props: TableRowProps): JSX.Element; (props: TableRowAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableRowAsChildProps`

```ts
TableRowAsChildProps: TableAsChildBaseProps
```

Props for the `asChild` (polymorphic) rendering of Table Row.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `TableRowProps`

```ts
TableRowProps: TableNativeProps<'tr', HTMLTableRowElement> | TableRowAsChildProps
```

Props for Table Row.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableRowElement | null) => void) | { current: HTMLTableRowElement | null; } | null | undefined;

### `Textarea`

```ts
Textarea: { (props: TextareaElementProps): JSX.Element; (props: TextareaAsChildProps): JSX.Element; }
```

Renders the `textarea` part of `textarea`.

Supports polymorphic rendering via `asChild`.

### `TEXTAREA_A11Y_CONTRACT`

```ts
TEXTAREA_A11Y_CONTRACT: { readonly HOST_ELEMENT: "textarea"; readonly DISABLED_ATTRIBUTES: { readonly native: "disabled"; readonly asChild: "disabled"; }; readonly DATA_ATTRIBUTES: { readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly defaultTabIndex: 0; readonly disabledTabIndex: -1; }; readonly LABELING: { readonly supportsLabelElement: true; readonly supportsAriaLabel: true; readonly supportsAriaLabelledBy: true; }; }
```

Native textarea semantics wrapped by askr-ui Textarea.

### `TextareaA11yContract`

```ts
TextareaA11yContract: typeof TEXTAREA_A11Y_CONTRACT
```

Type of the Textarea A11y Contract object.

### `TextareaAsChildProps`

```ts
TextareaAsChildProps: TextareaOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Textarea.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `tabIndex`: tabIndex?: number | undefined;

### `TextareaElementProps`

```ts
TextareaElementProps: Omit<JSX.IntrinsicElements['textarea'], 'children' | 'ref'> & TextareaOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLTextAreaElement>;
}
```

Props for Textarea Element.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLTextAreaElement>;

### `TextareaOwnProps`

```ts
TextareaOwnProps: {
  children?: unknown;
  disabled?: boolean;
  tabIndex?: number;
}
```

Own props for Textarea, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `tabIndex`: tabIndex?: number | undefined;

### `TextareaProps`

```ts
TextareaProps: TextareaElementProps | TextareaAsChildProps
```

Props for Textarea.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTextAreaElement | null) => void) | { current: HTMLTextAreaElement | null; } | null | undefined;

### `Toast`

```ts
Toast: (props: ToastProps) => JSX.Element | null
```

Toast registers a notification entry with the host and returns no DOM on
its own.

### `TOAST_A11Y_CONTRACT`

```ts
TOAST_A11Y_CONTRACT: { readonly ROOT_ROLE: "status"; readonly LIVE_REGION_ATTRIBUTE: "aria-live"; readonly LIVE_REGION_VALUE: "polite"; readonly VIEWPORT_LABEL: "Notifications"; readonly AUTO_DISMISS_PAUSE: "pointer-or-focus"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; }
```

Toast accessibility contract.

### `ToastA11yContract`

```ts
ToastA11yContract: typeof TOAST_A11Y_CONTRACT
```

Type of the Toast A11y Contract object.

### `ToastAction`

```ts
ToastAction: { (props: ToastActionProps): JSX.Element; (props: ToastActionAsChildProps): JSX.Element; }
```

ToastAction closes the toast after handling a user-triggered action.
Renders the `toast-action` part of `toast`.

Supports polymorphic rendering via `asChild`.

### `ToastActionAsChildProps`

```ts
ToastActionAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Action.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `ToastActionProps`

```ts
ToastActionProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Toast Action.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `ToastClose`

```ts
ToastClose: { (props: ToastCloseProps): JSX.Element; (props: ToastCloseAsChildProps): JSX.Element; }
```

ToastClose is the dedicated dismiss control for a toast entry.
Renders the `toast-close` part of `toast`.

Supports polymorphic rendering via `asChild`.

### `ToastCloseAsChildProps`

```ts
ToastCloseAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Close.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `ToastCloseProps`

```ts
ToastCloseProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Toast Close.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `ToastDescription`

```ts
ToastDescription: { (props: ToastDescriptionProps): JSX.Element; (props: ToastDescriptionAsChildProps): JSX.Element; }
```

ToastDescription marks the accessible description slot for a toast entry.
Renders the `toast-description` part of `toast`.

Supports polymorphic rendering via `asChild`.

### `ToastDescriptionAsChildProps`

```ts
ToastDescriptionAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Description.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ToastDescriptionProps`

```ts
ToastDescriptionProps: BoxProps<'div', HTMLDivElement>
```

Props for Toast Description.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ToastHost`

```ts
ToastHost: (props: ToastHostProps) => JSX.Element
```

ToastHost owns the registry of active toast entries and the default
display duration for the family.

### `ToastHostOwnProps`

```ts
ToastHostOwnProps: {
  children?: unknown;
  id?: string;
  duration?: number;
}
```

Props for the host that owns toast timing defaults and the registry.

- `children`: children?: unknown;

- `duration`: duration?: number | undefined;

- `id`: id?: string | undefined;

### `ToastHostProps`

```ts
ToastHostProps: BoxProps<'div', HTMLDivElement> & ToastHostOwnProps
```

Props for Toast Host.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `duration`: duration?: number | undefined;

- `id`: id?: string | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ToastOwnProps`

```ts
ToastOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  duration?: number;
  variant?: ToastVariant;
}
```

Props for a toast registration entry declared through Toast.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `duration`: duration?: number | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

- `variant`: variant?: ToastVariant | undefined;

### `ToastProps`

```ts
ToastProps: BoxProps<'div', HTMLDivElement> & ToastOwnProps
```

Props for Toast.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `duration`: duration?: number | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `variant`: variant?: ToastVariant | undefined;

### `ToastTitle`

```ts
ToastTitle: { (props: ToastTitleProps): JSX.Element; (props: ToastTitleAsChildProps): JSX.Element; }
```

ToastTitle marks the accessible title slot for a toast entry.
Renders the `toast-title` part of `toast`.

Supports polymorphic rendering via `asChild`.

### `ToastTitleAsChildProps`

```ts
ToastTitleAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Title.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ToastTitleProps`

```ts
ToastTitleProps: BoxProps<'div', HTMLDivElement>
```

Props for Toast Title.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ToastViewport`

```ts
ToastViewport: { (props: ToastViewportProps): JSX.Element; (props: ToastViewportAsChildProps): JSX.Element; }
```

ToastViewport renders the live toast stack and the notification region.
Renders the `toast-viewport` part of `toast` with `role="region"`.

Supports polymorphic rendering via `asChild`.

### `ToastViewportAsChildProps`

```ts
ToastViewportAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Viewport.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ToastViewportProps`

```ts
ToastViewportProps: BoxProps<'div', HTMLDivElement>
```

Props for Toast Viewport.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `Toggle`

```ts
Toggle: { (props: ToggleButtonProps): JSX.Element; (props: ToggleAsChildProps): JSX.Element; }
```

Headless Toggle component

## Responsibilities
- Compose pressable foundation for interaction behavior
- Apply aria-pressed for toggle state signaling
- Enforce type="button" default to prevent accidental form submission
- Forward props and refs to native button or child element

## Non-Responsibilities (delegated to pressable foundation)
- Keyboard event handling (Enter/Space)
- Pointer event handling
- Disabled state enforcement
- Role attribute application (for non-native elements)

## Invariants
- MUST NOT contain any event handler logic
- MUST NOT check disabled or pressed props directly
- MUST use pressable() for ALL interaction behavior
- MUST use mergeProps() for ALL prop composition
- pressed state is CONTROLLED (consumer manages state)
Renders the `toggle` part of `toggle`.

Supports polymorphic rendering via `asChild`.

````tsx
Native toggle button
```tsx
const pressed = state(false);
<Toggle pressed={pressed()} onPress={() => pressed.set(!pressed())}>
Mute
</Toggle>
```
````

````tsx
Polymorphic rendering (asChild)
```tsx
<Toggle asChild pressed={muted} onPress={toggleMute}>
<span>🔇</span>
</Toggle>
```
````

### `TOGGLE_A11Y_CONTRACT`

```ts
TOGGLE_A11Y_CONTRACT: { readonly ROLE: "button"; readonly KEYBOARD_ACTIVATION: readonly ["Enter", "Space"]; readonly PRESSED_ATTRIBUTE: "aria-pressed"; readonly DISABLED_ATTRIBUTES: { readonly nativeButton: { readonly disabled: true; readonly "aria-disabled": "true"; }; readonly nonNative: { readonly "aria-disabled": "true"; readonly tabIndex: -1; }; }; readonly DATA_ATTRIBUTES: { readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly enabled: "tabIndex >= 0"; readonly disabled: "tabIndex = -1"; readonly visualIndicator: "required"; }; }
```

WAI-ARIA Toggle Button Pattern

Specification: https://www.w3.org/WAI/ARIA/apg/patterns/button/

A toggle button is a two-state button that can be either on or off.
Uses aria-pressed to communicate toggle state to assistive technology.

## Required ARIA
- aria-pressed: 'true' | 'false' (indicates toggle state)
- role: 'button' (when not native button)

## Keyboard Support
- Enter: Activates toggle (on native button and non-button elements)
- Space: Activates toggle

## Focus Management
- Toggle is focusable when not disabled
- Visual focus indicator required

## Disabled State
- aria-disabled when disabled=true
- Removed from tab order
- Visual disabled styling (consumer responsibility)

### `TOGGLE_GROUP_A11Y_CONTRACT`

```ts
TOGGLE_GROUP_A11Y_CONTRACT: { readonly GROUP_ROLE: "group"; readonly ITEM_ROLE: "button"; readonly PRESSED_ATTRIBUTE: "aria-pressed"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }
```

Accessibility contract for toggle groups.

### `ToggleA11yContract`

```ts
ToggleA11yContract: typeof TOGGLE_A11Y_CONTRACT
```

Type of the Toggle A11y Contract object.

### `ToggleAsChildProps`

```ts
ToggleAsChildProps: ToggleOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
  type?: never;
}
```

Props when rendering via asChild

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `pressed`: pressed?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `ToggleButtonProps`

```ts
ToggleButtonProps: Omit<JSX.IntrinsicElements['button'], 'children' | 'onClick' | 'disabled' | 'type' | 'ref'> & ToggleOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLButtonElement>;
  type?: 'button' | 'submit' | 'reset';
}
```

Props when rendering as a native <button> element

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `pressed`: pressed?: boolean | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `ToggleGroup`

```ts
ToggleGroup: (props: ToggleGroupProps) => JSX.Element
```

Renders a part of `toggle-group`.

### `ToggleGroupA11yContract`

```ts
ToggleGroupA11yContract: typeof TOGGLE_GROUP_A11Y_CONTRACT
```

Type of the Toggle Group A11y Contract object.

### `ToggleGroupItem`

```ts
ToggleGroupItem: { (props: ToggleGroupItemProps): JSX.Element; (props: ToggleGroupItemAsChildProps): JSX.Element; }
```

Renders a part of `toggle-group`.

Supports polymorphic rendering via `asChild`.

### `ToggleGroupItemAsChildProps`

```ts
ToggleGroupItemAsChildProps: ButtonLikeAsChildProps & ToggleGroupItemOwnProps
```

Props for the `asChild` (polymorphic) rendering of Toggle Group Item.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

- `value`: value: string;

### `ToggleGroupItemOwnProps`

```ts
ToggleGroupItemOwnProps: {
  value: string;
  disabled?: boolean;
  children?: unknown;
}
```

Own props for Toggle Group Item, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `value`: value: string;

### `ToggleGroupItemProps`

```ts
ToggleGroupItemProps: ButtonLikeProps<'button', HTMLButtonElement> & ToggleGroupItemOwnProps
```

Props for Toggle Group Item.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `ToggleGroupMultipleProps`

```ts
ToggleGroupMultipleProps: BoxProps<'div', HTMLDivElement> & ToggleGroupSharedOwnProps & {
  type: 'multiple';
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
}
```

Props for Toggle Group Multiple.

- `asChild`: asChild?: false | undefined;

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: string[] | undefined;

- `disabled`: disabled?: boolean | undefined;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `onValueChange`: onValueChange?: ((value: string[]) => void) | undefined;

- `orientation`: orientation?: ToggleGroupOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `type`: type: "multiple";

- `value`: value?: string[] | undefined;

### `ToggleGroupOrientation`

```ts
ToggleGroupOrientation: 'horizontal' | 'vertical'
```

Toggle Group Orientation.

### `ToggleGroupProps`

```ts
ToggleGroupProps: ToggleGroupSingleProps | ToggleGroupMultipleProps
```

Props for Toggle Group.

- `asChild`: asChild?: false | undefined;

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: string | string[] | undefined;

- `disabled`: disabled?: boolean | undefined;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `onValueChange`: onValueChange?: ((value: string[]) => void) | ((value: string) => void) | undefined;

- `orientation`: orientation?: ToggleGroupOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `type`: type?: "single" | "multiple" | undefined;

- `value`: value?: string | string[] | undefined;

### `ToggleGroupSingleProps`

```ts
ToggleGroupSingleProps: BoxProps<'div', HTMLDivElement> & ToggleGroupSharedOwnProps & {
  type?: 'single';
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
}
```

Props for Toggle Group Single.

- `asChild`: asChild?: false | undefined;

- `children`: Supports literal, nested, array-mapped, and `For`-rendered descendants.

- `defaultValue`: defaultValue?: string | undefined;

- `disabled`: disabled?: boolean | undefined;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `onValueChange`: onValueChange?: ((value: string) => void) | undefined;

- `orientation`: orientation?: ToggleGroupOrientation | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `type`: type?: "single" | undefined;

- `value`: value?: string | undefined;

### `ToggleOwnProps`

```ts
ToggleOwnProps: {
  children?: unknown;
  onPress?: (e: PressEvent) => void;
  pressed?: boolean;
  disabled?: boolean;
}
```

Props shared by all Toggle variants

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `pressed`: pressed?: boolean | undefined;

### `ToggleProps`

```ts
ToggleProps: ToggleButtonProps | ToggleAsChildProps
```

Discriminated union of Toggle prop types

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((e: PressEvent) => void) | undefined;

- `pressed`: pressed?: boolean | undefined;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `Tooltip`

```ts
Tooltip: (props: TooltipProps) => JSX.Element
```

Renders a part of `tooltip`.

### `TOOLTIP_A11Y_CONTRACT`

```ts
TOOLTIP_A11Y_CONTRACT: { readonly CONTENT_ROLE: "tooltip"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTE: "aria-describedby"; readonly OPEN_STATE_ATTRIBUTE: "data-state"; }
```

Tooltip accessibility contract.

### `TooltipA11yContract`

```ts
TooltipA11yContract: typeof TOOLTIP_A11Y_CONTRACT
```

Type of the Tooltip A11y Contract object.

### `TooltipContent`

```ts
TooltipContent: { (props: TooltipContentProps): JSX.Element | null; (props: TooltipContentAsChildProps): JSX.Element | null; }
```

Renders the `tooltip-content` part of `tooltip` with `role="tooltip"`.

Supports polymorphic rendering via `asChild`.

### `TooltipContentAsChildProps`

```ts
TooltipContentAsChildProps: BoxAsChildProps & TooltipContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Tooltip Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `TooltipContentOwnProps`

```ts
TooltipContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}
```

Own props for Tooltip Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

- `forceMount`: forceMount?: boolean | undefined;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `TooltipContentProps`

```ts
TooltipContentProps: BoxProps<'div', HTMLDivElement> & TooltipContentOwnProps
```

Props for Tooltip Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

### `TooltipOwnProps`

```ts
TooltipOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}
```

Own props for Tooltip, before merging with native element attributes.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `TooltipPortal`

```ts
TooltipPortal: (props: TooltipPortalProps) => JSX.Element | null
```

Renders a part of `tooltip`.

### `TooltipPortalProps`

```ts
TooltipPortalProps: {
  children?: unknown;
}
```

Props for Tooltip Portal.

- `children`: children?: unknown;

### `TooltipProps`

```ts
TooltipProps: TooltipOwnProps
```

Props for Tooltip.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `TooltipTrigger`

```ts
TooltipTrigger: { (props: TooltipTriggerProps): JSX.Element; (props: TooltipTriggerAsChildProps): JSX.Element; }
```

Renders the `tooltip-trigger` part of `tooltip`.

Supports polymorphic rendering via `asChild`.

### `TooltipTriggerAsChildProps`

```ts
TooltipTriggerAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Tooltip Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `TooltipTriggerProps`

```ts
TooltipTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Tooltip Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `VirtualList`

```ts
VirtualList: { <Item>(props: VirtualListProps<Item>): JSX.Element; <Item>(props: VirtualListAsChildProps<Item>): JSX.Element; }
```

Renders a part of `virtual-list`.

Supports polymorphic rendering via `asChild`.

### `VirtualListApi`

```ts
VirtualListApi: {
  scrollToIndex: (index: number, alignment?: VirtualScrollAlignment) => void;
  scrollToTop: () => void;
  scrollToBottom: () => void;
  getState: () => VirtualListState;
  getVisibleRange: () => VirtualRange;
  getItemCount: () => number;
  getScrollTop: () => number;
  isAtTop: () => boolean;
  isAtBottom: () => boolean;
  isFollowingBottom: () => boolean;
  getPendingUnseenCount: () => number;
  setFollowBottom: (followBottom: boolean) => void;
}
```

Virtual List Api.

### `VirtualListAsChildProps`

```ts
VirtualListAsChildProps: Omit<VirtualListRootProps, 'children'> & {
  items: readonly Item[];
  rowHeight: number;
  overscan?: VirtualOverscan;
  getKey: (item: Item, index: number) => string | number;
  rowComponent: VirtualListRowComponent<Item>;
  followBottom?: boolean | {
    threshold?: number;
  };
  onScroll?: (event: Event) => void;
  viewport?: VirtualListViewport;
  apiRef?: Ref<VirtualListApi<Item> | null>;
  ref?: Ref<HTMLElement>;
  asChild: true;
  children: JSXElement;
}
```

Props for the `asChild` (polymorphic) rendering of Virtual List.

- `apiRef`: apiRef?: Ref<VirtualListApi<Item> | null>;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `followBottom`: followBottom?: boolean | { threshold?: number; } | undefined;

- `getKey`: getKey: (item: Item, index: number) => string | number;

- `items`: items: readonly Item[];

- `onScroll`: onScroll?: ((event: Event) => void) | undefined;

- `overscan`: overscan?: VirtualOverscan | undefined;

- `ref`: ref?: Ref<HTMLElement>;

- `rowComponent`: rowComponent: VirtualListRowComponent<Item>;

- `rowHeight`: rowHeight: number;

- `viewport`: viewport?: "lg" | undefined;

### `VirtualListProps`

```ts
VirtualListProps: VirtualListRootProps & {
  items: readonly Item[];
  rowHeight: number;
  overscan?: VirtualOverscan;
  getKey: (item: Item, index: number) => string | number;
  rowComponent: VirtualListRowComponent<Item>;
  followBottom?: boolean | {
    threshold?: number;
  };
  onScroll?: (event: Event) => void;
  viewport?: VirtualListViewport;
  apiRef?: Ref<VirtualListApi<Item> | null>;
  ref?: Ref<HTMLElement>;
  asChild?: false;
}
```

Props for Virtual List.

- `apiRef`: apiRef?: Ref<VirtualListApi<Item> | null>;

- `asChild`: asChild?: false | undefined;

- `followBottom`: followBottom?: boolean | { threshold?: number; } | undefined;

- `getKey`: getKey: (item: Item, index: number) => string | number;

- `items`: items: readonly Item[];

- `onScroll`: onScroll?: ((event: Event) => void) | undefined;

- `overscan`: overscan?: VirtualOverscan | undefined;

- `ref`: ref?: Ref<HTMLElement>;

- `rowComponent`: rowComponent: VirtualListRowComponent<Item>;

- `rowHeight`: rowHeight: number;

- `viewport`: viewport?: "lg" | undefined;

### `VirtualListRowComponent`

```ts
VirtualListRowComponent: (props: VirtualListRowComponentProps<Item>) => VirtualListRowElement | null
```

Virtual List Row Component.

### `VirtualListRowComponentProps`

```ts
VirtualListRowComponentProps: {
  item: Item;
  index: number;
  rowKey: string;
  isVisible: boolean;
}
```

Props for Virtual List Row Component.

- `index`: index: number;

- `isVisible`: isVisible: boolean;

- `item`: item: Item;

- `rowKey`: rowKey: string;

### `VirtualListRowElement`

```ts
VirtualListRowElement: JSXElement | JSX.Element
```

Virtual List Row Element.

### `VirtualListState`

```ts
VirtualListState: {
  count: number;
  scrollTop: number;
  viewportHeight: number;
  totalHeight: number;
  visibleRange: VirtualRange;
  isAtTop: boolean;
  isAtBottom: boolean;
  followBottom: boolean;
  pendingUnseenCount: number;
}
```

Virtual List State.

### `VirtualListViewport`

```ts
VirtualListViewport: 'lg'
```

Virtual List Viewport.

### `VirtualTable`

```ts
VirtualTable: { <Row>(props: VirtualTableProps<Row>): JSX.Element; <Row>(props: VirtualTableAsChildProps<Row>): JSX.Element; }
```

Renders a part of `virtual-table`.

Supports polymorphic rendering via `asChild`.

### `VirtualTableApi`

```ts
VirtualTableApi: {
  scrollToIndex: (index: number, alignment?: VirtualScrollAlignment) => void;
  scrollToTop: () => void;
  scrollToBottom: () => void;
  getState: () => VirtualTableState;
  getVisibleRange: () => VirtualRange;
  getRowCount: () => number;
  getScrollTop: () => number;
  isAtTop: () => boolean;
  isAtBottom: () => boolean;
  getSelectedRowKey: () => string | null;
  getSelectedRowIndex: () => number;
  selectRowByKey: (rowKey: string) => void;
  selectRowByIndex: (index: number) => void;
  clearSelection: () => void;
}
```

Virtual Table Api.

### `VirtualTableAsChildProps`

```ts
VirtualTableAsChildProps: Omit<VirtualTableRootProps, 'children'> & {
  rows: readonly Row[];
  rowHeight: number;
  headerHeight: number;
  overscan?: VirtualOverscan;
  getKey: (row: Row, index: number) => string | number;
  columns: readonly VirtualTableColumn<Row>[];
  selectedRowKey?: string | null;
  defaultSelectedRowKey?: string | null;
  onSelectedRowKeyChange?: (next: string | null) => void;
  onRowClick?: (row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void;
  onScroll?: (event: Event) => void;
  viewport?: VirtualTableViewport;
  tableWidth?: VirtualTableWidth;
  apiRef?: Ref<VirtualTableApi<Row> | null>;
  ref?: Ref<HTMLElement>;
  asChild: true;
  children: JSXElement;
}
```

Props for the `asChild` (polymorphic) rendering of Virtual Table.

- `apiRef`: apiRef?: Ref<VirtualTableApi<Row> | null>;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `columns`: columns: readonly VirtualTableColumn<Row>[];

- `defaultSelectedRowKey`: defaultSelectedRowKey?: string | null | undefined;

- `getKey`: getKey: (row: Row, index: number) => string | number;

- `headerHeight`: headerHeight: number;

- `onRowClick`: onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) | undefined;

- `onScroll`: onScroll?: ((event: Event) => void) | undefined;

- `onSelectedRowKeyChange`: onSelectedRowKeyChange?: ((next: string | null) => void) | undefined;

- `overscan`: overscan?: VirtualOverscan | undefined;

- `ref`: ref?: Ref<HTMLElement>;

- `rowHeight`: rowHeight: number;

- `rows`: rows: readonly Row[];

- `selectedRowKey`: selectedRowKey?: string | null | undefined;

- `tableWidth`: tableWidth?: "compact" | undefined;

- `viewport`: viewport?: "lg" | undefined;

### `VirtualTableCellComponent`

```ts
VirtualTableCellComponent: (props: VirtualTableCellComponentProps<Row>) => VirtualTableCellElement | null
```

Virtual Table Cell Component.

### `VirtualTableCellComponentProps`

```ts
VirtualTableCellComponentProps: {
  row: Row;
  rowIndex: number;
  rowKey: string;
  column: VirtualTableColumn<Row>;
  selected: boolean;
}
```

Props for Virtual Table Cell Component.

- `column`: column: VirtualTableColumn<Row>;

- `row`: row: Row;

- `rowIndex`: rowIndex: number;

- `rowKey`: rowKey: string;

- `selected`: selected: boolean;

### `VirtualTableCellElement`

```ts
VirtualTableCellElement: JSXElement | JSX.Element
```

Virtual Table Cell Element.

### `VirtualTableColumn`

```ts
VirtualTableColumn: {
  id: string;
  header: JSXElement | string;
  width?: number | string;
  cellComponent: VirtualTableCellComponent<Row>;
}
```

Virtual Table Column.

### `VirtualTableProps`

```ts
VirtualTableProps: VirtualTableRootProps & {
  rows: readonly Row[];
  rowHeight: number;
  headerHeight: number;
  overscan?: VirtualOverscan;
  getKey: (row: Row, index: number) => string | number;
  columns: readonly VirtualTableColumn<Row>[];
  selectedRowKey?: string | null;
  defaultSelectedRowKey?: string | null;
  onSelectedRowKeyChange?: (next: string | null) => void;
  onRowClick?: (row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void;
  onScroll?: (event: Event) => void;
  viewport?: VirtualTableViewport;
  tableWidth?: VirtualTableWidth;
  apiRef?: Ref<VirtualTableApi<Row> | null>;
  ref?: Ref<HTMLElement>;
  asChild?: false;
}
```

Props for Virtual Table.

- `apiRef`: apiRef?: Ref<VirtualTableApi<Row> | null>;

- `asChild`: asChild?: false | undefined;

- `columns`: columns: readonly VirtualTableColumn<Row>[];

- `defaultSelectedRowKey`: defaultSelectedRowKey?: string | null | undefined;

- `getKey`: getKey: (row: Row, index: number) => string | number;

- `headerHeight`: headerHeight: number;

- `onRowClick`: onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) | undefined;

- `onScroll`: onScroll?: ((event: Event) => void) | undefined;

- `onSelectedRowKeyChange`: onSelectedRowKeyChange?: ((next: string | null) => void) | undefined;

- `overscan`: overscan?: VirtualOverscan | undefined;

- `ref`: ref?: Ref<HTMLElement>;

- `rowHeight`: rowHeight: number;

- `rows`: rows: readonly Row[];

- `selectedRowKey`: selectedRowKey?: string | null | undefined;

- `tableWidth`: tableWidth?: "compact" | undefined;

- `viewport`: viewport?: "lg" | undefined;

### `VirtualTableState`

```ts
VirtualTableState: {
  count: number;
  rowHeight: number;
  headerHeight: number;
  scrollTop: number;
  viewportHeight: number;
  totalHeight: number;
  visibleRange: VirtualRange;
  isAtTop: boolean;
  isAtBottom: boolean;
  selectedRowKey: string | null;
  selectedRowIndex: number;
}
```

Virtual Table State.

### `VirtualTableViewport`

```ts
VirtualTableViewport: 'lg'
```

Virtual Table Viewport.

### `VirtualTableWidth`

```ts
VirtualTableWidth: 'compact'
```

Virtual Table Width.

### `VISUALLY_HIDDEN_A11Y_CONTRACT`

```ts
VISUALLY_HIDDEN_A11Y_CONTRACT: { readonly STRATEGY: "visually-hidden-but-screen-reader-visible"; readonly HOST_ELEMENT: "span"; }
```

Visually hidden content accessibility contract.

### `VisuallyHidden`

```ts
VisuallyHidden: { (props: VisuallyHiddenSpanProps): JSX.Element; (props: VisuallyHiddenAsChildProps): JSX.Element; }
```

Renders a part of `visually-hidden`.

Supports polymorphic rendering via `asChild`.

### `VisuallyHiddenA11yContract`

```ts
VisuallyHiddenA11yContract: typeof VISUALLY_HIDDEN_A11Y_CONTRACT
```

Type of the Visually Hidden A11y Contract object.

### `VisuallyHiddenAsChildProps`

```ts
VisuallyHiddenAsChildProps: VisuallyHiddenOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Visually Hidden.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `VisuallyHiddenOwnProps`

```ts
VisuallyHiddenOwnProps: {
  children?: unknown;
}
```

Own props for Visually Hidden, before merging with native element attributes.

- `children`: children?: unknown;

### `VisuallyHiddenProps`

```ts
VisuallyHiddenProps: VisuallyHiddenSpanProps | VisuallyHiddenAsChildProps
```

Props for Visually Hidden.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: HTMLSpanElement | null) => void) | { current: HTMLSpanElement | null; } | ((value: Element | null) => void) | { current: Element | null; } | null | undefined;

### `VisuallyHiddenSpanProps`

```ts
VisuallyHiddenSpanProps: Omit<JSX.IntrinsicElements['span'], 'children' | 'ref'> & VisuallyHiddenOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLSpanElement>;
}
```

Props for Visually Hidden Span.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLSpanElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/default--label.css/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/avatar/index.md)