# @askrjs/themes/components

> Published API exports for @askrjs/themes/components.

Source: [https://askrjs.com/docs/reference/api/themes/components](https://askrjs.com/docs/reference/api/themes/components)

Status: stable. Packages: @askrjs/themes/components.

**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 509 exports from the declarations shipped by @askrjs/themes.

### `Accordion`

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

Renders a part of `accordion`.

### `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`.

### `AccordionHeader`

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

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

Supports polymorphic rendering via `asChild`.

### `AccordionItem`

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

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

### `AccordionTrigger`

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

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

Supports polymorphic rendering via `asChild`.

### `Alert`

```ts
Alert: (props: AlertProps) => JSX.Element
```

Renders an alert/status banner with an optional icon, title, description,
actions, and a dismiss button. Automatically picks an "alert" or "status"
ARIA role from `variant` unless `role` is set explicitly.

### `AlertDescription`

```ts
AlertDescription: (props: CatalogComponentProps) => JSX.Element
```

Renders the `alert-description` part of the shadcn-compatible catalog primitives.

### `AlertDialog`

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

Renders a part of `alert-dialog`.

### `AlertDialogAction`

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

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

Supports polymorphic rendering via `asChild`.

### `AlertDialogCancel`

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

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

Supports polymorphic rendering via `asChild`.

### `AlertDialogContent`

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

Renders a part of `alert-dialog`.

Supports polymorphic rendering via `asChild`.

### `AlertDialogDescription`

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

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

Supports polymorphic rendering via `asChild`.

### `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`.

### `AlertDialogPortal`

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

Renders a part of `dialog`.

### `AlertDialogTitle`

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

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

Supports polymorphic rendering via `asChild`.

### `AlertDialogTrigger`

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

Renders a part of `alert-dialog`.

Supports polymorphic rendering via `asChild`.

### `AlertHeadingTag`

```ts
AlertHeadingTag: "h2" | "h3" | "h4" | "h5" | "h6"
```

Heading tag allowed for an alert's title via `titleAs`.

### `AlertProps`

```ts
AlertProps: DivProps & {
  actions?: unknown;
  children?: unknown;
  description?: unknown;
  dismissLabel?: string;
  icon?: unknown;
  onDismiss?: () => void;
  title?: unknown;
  titleAs?: AlertHeadingTag;
  variant?: AlertVariant;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link Alert } component.

- `actions`: actions?: unknown;

- `children`: children?: unknown;

- `description`: description?: unknown;

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

- `icon`: icon?: unknown;

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

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

- `title`: title?: unknown;

- `titleAs`: titleAs?: AlertHeadingTag | undefined;

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

### `AlertTitle`

```ts
AlertTitle: (props: CatalogComponentProps) => JSX.Element
```

Renders the `alert-title` part of the shadcn-compatible catalog primitives.

### `AlertVariant`

```ts
AlertVariant: "default" | "info" | "success" | "warning" | "danger"
```

Visual tone of an {@link AlertProps} alert; `"danger"`/`"warning"` render with `role="alert"`.

### `Aside`

```ts
Aside: (props: AsideProps) => JSX.Element
```

Renders a `<aside>`-element {@link Block } tagged with `data-slot="aside"`.

### `AsideProps`

```ts
AsideProps: Omit<BlockElementProps<"aside">, "as">
```

Props for the {@link Aside } component.

### `AspectRatio`

```ts
AspectRatio: { (props: AspectRatioProps): JSX.Element; (props: AspectRatioAsChildProps): JSX.Element; }
```

Constrains its content to a fixed width/height ratio (defaults to `1`)
using a computed `aspect-ratio` style, rendering as a `<div>` or, with
`asChild`, merging its layout into the single child element.

### `AspectRatioAsChildProps`

```ts
AspectRatioAsChildProps: AspectRatioOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link AspectRatio } rendered with `asChild`, merging layout onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ratio`: ratio?: string | number | undefined;

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

- `style`: style?: unknown;

### `AspectRatioProps`

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

Props for {@link AspectRatio } rendered as its default `<div>` element.

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

- `children`: children?: unknown;

- `ratio`: ratio?: string | number | undefined;

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

- `style`: style?: unknown;

### `Avatar`

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

Renders the `avatar` part of `avatar`.

Supports polymorphic rendering via `asChild`.

### `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`.

### `AvatarImage`

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

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

### `Badge`

```ts
Badge: { (props: BadgeProps): JSX.Element; (props: BadgeAsChildProps): JSX.Element; }
```

Renders a small status/label badge, defaulting to a `<span>` (or merging onto a child via `asChild`), with a `variant` color modifier.

### `BadgeAsChildProps`

```ts
BadgeAsChildProps: BadgeOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link Badge } rendered with `asChild`, merging its attributes onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

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

### `BadgeOwnProps`

```ts
BadgeOwnProps: {
  children?: unknown;
  variant?: BadgeVariant;
}
```

Props shared by both {@link Badge } call signatures.

- `children`: children?: unknown;

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

### `BadgeProps`

```ts
BadgeProps: Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & BadgeOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLSpanElement>;
}
```

Props for {@link Badge } rendered as its default `<span>` element.

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

- `children`: children?: unknown;

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

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

### `Block`

```ts
Block: { (props: BlockNativeProps): JSX.Element; (props: BlockAsChildProps): JSX.Element; }
```

Low-level layout primitive: renders any element in {@link BlockElement }
(default `<div>`) and turns layout-only props (spacing, alignment,
direction, sizing, etc.) into a generated utility class. With `asChild`,
the layout is merged onto a single child element instead of a wrapper.

### `BlockAlign`

```ts
BlockAlign: "start" | "end" | "center" | "stretch" | "baseline"
```

### `BlockAsChildProps`

```ts
BlockAsChildProps: Omit<BlockOwnProps, "as"> & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link Block } rendered with `asChild`, merging layout onto a single child element.

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `asChild`: asChild: true;

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children: JSXElement;

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

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

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

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockBackground`

```ts
BlockBackground: "surface" | "muted" | "selected" | "canvas" | "raised" | "overlay" | "transparent"
```

### `BlockDirection`

```ts
BlockDirection: "row" | "column" | "row-reverse" | "column-reverse"
```

### `BlockDivProps`

```ts
BlockDivProps: BlockElementProps<"div">
```

{@link Block } props specialized for a `<div>` element.

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: "div" | undefined;

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

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

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

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

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

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockElement`

```ts
BlockElement: "div" | "span" | "main" | "header" | "footer" | "section" | "aside" | "nav" | "a" | "ul" | "ol" | "li" | "form" | "article"
```

Element tags {@link Block } can render as via its `as` prop.

### `BlockElementProps`

```ts
BlockElementProps: Omit<JSX.IntrinsicElements[TElement], "children" | "ref"> & BlockOwnProps & {
  as?: TElement;
  asChild?: false;
  ref?: Ref<unknown>;
}
```

{@link Block } props specialized for a given {@link BlockElement} tag `TElement`.

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: TElement | undefined;

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

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

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

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockJustify`

```ts
BlockJustify: "start" | "end" | "center" | "between"
```

### `BlockMargin`

```ts
BlockMargin: BlockSpace | "auto"
```

### `BlockNativeProps`

```ts
BlockNativeProps: { [TElement in BlockElement]: BlockElementProps<TElement>; }[BlockElement]
```

Union of {@link BlockElementProps} across every {@link BlockElement}, used for {@link Block }'s native (non-`asChild`) overload.

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: "a" | "article" | "aside" | "div" | "form" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul" | undefined;

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

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `className`: className?: string | ((() => IntrinsicClassValue) & string) | undefined;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

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

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockOwnProps`

```ts
BlockOwnProps: BlockLayoutProps & {
  as?: BlockElement;
  children?: unknown;
  className?: string;
}
```

Layout and structural props accepted by {@link Block }, independent of the rendered element.

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: BlockElement | undefined;

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

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

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockProps`

```ts
BlockProps: BlockNativeProps | BlockAsChildProps
```

Union of all prop shapes accepted by {@link Block }.

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

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

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `className`: className?: string | ((() => IntrinsicClassValue) & string) | undefined;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

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

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockRadius`

```ts
BlockRadius: true | "sm" | "md" | "lg" | "xl" | "round"
```

### `BlockResponsiveValue`

```ts
ResponsiveValue: T | Partial<Record<LayoutBreakpoint, T>>
```

### `BlockRowFrom`

```ts
BlockRowFrom: Exclude<LayoutBreakpoint, "base">
```

### `BlockShadow`

```ts
BlockShadow: true | "sm" | "md" | "lg"
```

### `BlockSize`

```ts
BlockSize: "auto" | "full" | "screen" | "content" | "sidebar" | "page" | "sm" | "md" | "lg" | "xl"
```

### `BlockSpace`

```ts
BlockSpace: "0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "page"
```

### `BlockSpanProps`

```ts
BlockSpanProps: BlockElementProps<"span">
```

{@link Block } props specialized for a `<span>` element.

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: "span" | undefined;

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

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

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

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

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

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `BlockZIndex`

```ts
BlockZIndex: "header" | "sticky" | "fixed" | "dropdown" | "modal" | "popover" | "toast" | "tooltip"
```

### `Box`

```ts
Box: (props: LegacyLayoutProps) => JSX.Element
```

### `Brand`

```ts
Brand: <TElement extends "div" | "a" | "span" = "div">(props: BrandProps<TElement>) => JSX.Element
```

Renders a brand/logo wrapper, defaulting to a `<div>` (or `<a>`/`<span>` via `as`), or merges onto a single child via `asChild`.

### `BrandLabel`

```ts
BrandLabel: (props: BrandLabelProps) => JSX.Element
```

Renders the text label portion of a {@link Brand}.

### `BrandMark`

```ts
BrandMark: (props: BrandMarkProps) => JSX.Element
```

Renders the icon/mark portion of a {@link Brand}.

### `Breadcrumb`

```ts
Breadcrumb: (props: CatalogComponentProps) => JSX.Element
```

Renders the `breadcrumb` part of the shadcn-compatible catalog primitives.

### `BreadcrumbEllipsis`

```ts
BreadcrumbEllipsis: (props: CatalogComponentProps) => JSX.Element
```

Renders a non-interactive ellipsis marker in a breadcrumb trail.

### `BreadcrumbItem`

```ts
BreadcrumbItem: (props: CatalogComponentProps) => JSX.Element
```

Renders the `breadcrumb-item` part of the shadcn-compatible catalog primitives.

### `BreadcrumbLink`

```ts
BreadcrumbLink: (props: CatalogComponentProps) => JSX.Element
```

Renders the `breadcrumb-link` part of the shadcn-compatible catalog primitives.

### `BreadcrumbList`

```ts
BreadcrumbList: (props: CatalogComponentProps) => JSX.Element
```

Renders the `breadcrumb-list` part of the shadcn-compatible catalog primitives.

### `BreadcrumbPage`

```ts
BreadcrumbPage: (props: CatalogComponentProps) => JSX.Element
```

Renders the current (non-link) breadcrumb page, marked `aria-current="page"`.

### `BreadcrumbSeparator`

```ts
BreadcrumbSeparator: (props: CatalogComponentProps) => JSX.Element
```

Renders the separator between breadcrumb items (defaults to `"/"`).

### `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>
```
````

### `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;

### `ButtonGroup`

```ts
ButtonGroup: (props: ButtonGroupProps) => JSX.Element
```

Groups related buttons together, optionally visually attached, with a horizontal or vertical orientation and `role="group"` by default.

### `ButtonGroupOrientation`

```ts
ButtonGroupOrientation: "horizontal" | "vertical"
```

Layout direction of a {@link ButtonGroup }.

### `ButtonGroupProps`

```ts
ButtonGroupProps: DivProps & {
  children?: unknown;
  attached?: boolean;
  orientation?: ButtonGroupOrientation;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link ButtonGroup } component.

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

- `children`: children?: unknown;

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

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

### `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;

### `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.

### `Calendar`

```ts
Calendar: (props: CatalogComponentProps) => JSX.Element
```

Styling-only calendar anatomy; it does not own dates, grid focus, selection, or month navigation.

### `CalendarBody`

```ts
CalendarBody: (props: CatalogComponentProps) => JSX.Element
```

Renders the `calendar-body` part of the shadcn-compatible catalog primitives.

### `CalendarCaption`

```ts
CalendarCaption: (props: CatalogComponentProps) => JSX.Element
```

Renders the `calendar-caption` part of the shadcn-compatible catalog primitives.

### `CalendarCell`

```ts
CalendarCell: (props: CatalogComponentProps) => JSX.Element
```

Renders the `calendar-cell` part of the shadcn-compatible catalog primitives.

### `CalendarDay`

```ts
CalendarDay: (props: CatalogComponentProps & { disabled?: boolean; outside?: boolean; rangeEnd?: boolean; rangeMiddle?: boolean; rangeStart?: boolean; selected?: boolean; today?: boolean; }) => JSX.Element
```

Renders a single selectable day cell in the calendar grid, with selection/range/today state exposed as data attributes.

### `CalendarGrid`

```ts
CalendarGrid: (props: CatalogComponentProps) => JSX.Element
```

Renders the `calendar-grid` part of the shadcn-compatible catalog primitives.

### `CalendarHead`

```ts
CalendarHead: (props: CatalogComponentProps) => JSX.Element
```

Renders the `calendar-head` part of the shadcn-compatible catalog primitives.

### `CalendarHeader`

```ts
CalendarHeader: (props: CatalogComponentProps) => JSX.Element
```

Renders the `calendar-header` part of the shadcn-compatible catalog primitives.

### `CalendarNav`

```ts
CalendarNav: (props: CatalogComponentProps) => JSX.Element
```

Renders the `calendar-nav` part of the shadcn-compatible catalog primitives.

### `CalendarNextButton`

```ts
CalendarNextButton: (props: CatalogComponentProps) => JSX.Element
```

Button that navigates the calendar to the next month.

### `CalendarPreviousButton`

```ts
CalendarPreviousButton: (props: CatalogComponentProps) => JSX.Element
```

Button that navigates the calendar to the previous month.

### `CalendarRow`

```ts
CalendarRow: (props: CatalogComponentProps) => JSX.Element
```

Renders the `calendar-row` part of the shadcn-compatible catalog primitives.

### `Card`

```ts
Card: (props: CardProps) => JSX.Element
```

Root card container; applies the `card` class and an optional `variant` modifier.

### `CardAction`

```ts
CardAction: (props: CardActionProps) => JSX.Element
```

Renders an action/control region of a {@link Card}, typically positioned alongside the header.

### `CardActionProps`

```ts
CardActionProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link CardAction } component.

- `children`: children?: unknown;

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

### `CardContent`

```ts
CardContent: (props: CardContentProps) => JSX.Element
```

Renders the main content region of a {@link Card}.

### `CardContentProps`

```ts
CardContentProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link CardContent } component.

- `children`: children?: unknown;

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

### `CardDescription`

```ts
CardDescription: (props: CardDescriptionProps) => JSX.Element
```

Renders a {@link Card}'s supporting description text.

### `CardDescriptionProps`

```ts
CardDescriptionProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}
```

Props for the {@link CardDescription } component.

- `children`: children?: unknown;

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

### `CardFooter`

```ts
CardFooter: (props: CardFooterProps) => JSX.Element
```

Renders the footer region of a {@link Card}.

### `CardFooterProps`

```ts
CardFooterProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link CardFooter } component.

- `children`: children?: unknown;

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

### `CardHeader`

```ts
CardHeader: (props: CardHeaderProps) => JSX.Element
```

Renders the header region of a {@link Card}.

### `CardHeaderProps`

```ts
CardHeaderProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link CardHeader } component.

- `children`: children?: unknown;

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

### `CardProps`

```ts
CardProps: DivProps & {
  children?: unknown;
  variant?: CardVariant;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link Card } component.

- `children`: children?: unknown;

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

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

### `CardTitle`

```ts
CardTitle: (props: CardTitleProps) => JSX.Element
```

Renders a {@link Card}'s title, defaulting to an `<h3>` (override with `titleAs`).

### `CardTitleHeadingTag`

```ts
CardTitleHeadingTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
```

Heading tag allowed for a card's title via `titleAs`.

### `CardTitleProps`

```ts
CardTitleProps: HeadingProps & {
  children?: unknown;
  /** Choose the level that follows the surrounding document hierarchy. */
  titleAs?: CardTitleHeadingTag;
  ref?: Ref<HTMLHeadingElement>;
}
```

Props for the {@link CardTitle } component.

- `children`: children?: unknown;

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

- `titleAs`: Choose the level that follows the surrounding document hierarchy.

### `CardVariant`

```ts
CardVariant: "default" | "raised"
```

Visual style of a {@link CardProps} card.

### `Carousel`

```ts
Carousel: (props: CatalogComponentProps) => JSX.Element
```

Styling-only carousel anatomy; it does not own an active slide, scrolling, or keyboard navigation.

### `CarouselContent`

```ts
CarouselContent: (props: CatalogComponentProps) => JSX.Element
```

Renders the `carousel-content` part of the shadcn-compatible catalog primitives.

### `CarouselItem`

```ts
CarouselItem: (props: CatalogComponentProps) => JSX.Element
```

Renders the `carousel-item` part of the shadcn-compatible catalog primitives.

### `CarouselNext`

```ts
CarouselNext: (props: CatalogComponentProps) => JSX.Element
```

Button that navigates the carousel to the next item.

### `CarouselPrevious`

```ts
CarouselPrevious: (props: CatalogComponentProps) => JSX.Element
```

Button that navigates the carousel to the previous item.

### `CAT_THEME_NAMES`

```ts
CAT_THEME_NAMES: readonly ["tabby", "ginger", "tuxedo", "calico", "torty"]
```

Names of the built-in "cat" theme presets.

### `CAT_THEME_OPTIONS`

```ts
CAT_THEME_OPTIONS: readonly ThemeOption[]
```

Theme options for the built-in "cat" theme presets, keyed to {@link CAT_THEME_NAMES}.

### `CatalogComponentProps`

```ts
CatalogComponentProps: Record<string, unknown> & {
  as?: CatalogElement;
  asChild?: boolean;
  children?: unknown;
  class?: string;
  ref?: Ref<HTMLElement>;
}
```

Shared prop shape for the shadcn-compatible catalog primitives below: a
polymorphic `as`/`asChild` element plus passthrough attributes.

- `as`: as?: keyof JSX.IntrinsicElements | undefined;

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

- `children`: children?: unknown;

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

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

### `CatThemeName`

```ts
CatThemeName: (typeof CAT_THEME_NAMES)[number]
```

A built-in "cat" theme name, one of {@link CAT_THEME_NAMES}.

### `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>
```
````

### `Close`

```ts
Close: (props: CloseNativeProps) => JSX.Element
```

Renders a dismiss ("×") icon button, built on top of `Button`, defaulting to an icon-sized ghost variant with an accessible `label`.

### `CloseNativeProps`

```ts
CloseNativeProps: ButtonNativeProps & CloseOwnProps
```

Props for the {@link Close } component.

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

### `CloseOwnProps`

```ts
CloseOwnProps: {
  label?: string;
}
```

Props specific to {@link Close }, layered on top of {@link ButtonNativeProps}.

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

### `Collapsible`

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

Renders a part of `collapsible`.

### `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`.

### `CollapsibleTrigger`

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

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

Supports polymorphic rendering via `asChild`.

### `Combobox`

```ts
Combobox: (props: CatalogComponentProps) => JSX.Element
```

Styling-only combobox anatomy; it does not own value, popup, filtering, focus, or ARIA state.

### `ComboboxInput`

```ts
ComboboxInput: (props: CatalogComponentProps) => JSX.Element
```

Styling-only combobox input; consumers supplying behavior also own its complete ARIA contract.

### `ComboboxList`

```ts
ComboboxList: (props: CatalogComponentProps) => JSX.Element
```

Renders the `combobox-list` part of the shadcn-compatible catalog primitives.

### `ComboboxOption`

```ts
ComboboxOption: (props: CatalogComponentProps) => JSX.Element
```

Renders the `combobox-option` part of the shadcn-compatible catalog primitives.

### `Command`

```ts
Command: (props: CatalogComponentProps) => JSX.Element
```

Styling-only command anatomy; it does not own filtering, selection, focus, or keyboard commands.

### `CommandDialog`

```ts
CommandDialog: (props: CatalogComponentProps) => JSX.Element
```

Renders the `command-dialog` part of the shadcn-compatible catalog primitives.

### `CommandEmpty`

```ts
CommandEmpty: (props: CatalogComponentProps) => JSX.Element
```

Renders the `command-empty` part of the shadcn-compatible catalog primitives.

### `CommandGroup`

```ts
CommandGroup: (props: CatalogComponentProps) => JSX.Element
```

Renders the `command-group` part of the shadcn-compatible catalog primitives.

### `CommandGroupHeading`

```ts
CommandGroupHeading: (props: CatalogComponentProps) => JSX.Element
```

Renders the `command-group-heading` part of the shadcn-compatible catalog primitives.

### `CommandHeader`

```ts
CommandHeader: (props: CatalogComponentProps) => JSX.Element
```

Renders the `command-header` part of the shadcn-compatible catalog primitives.

### `CommandInput`

```ts
CommandInput: (props: CatalogComponentProps) => JSX.Element
```

Renders the command palette's search `<input>`.

### `CommandItem`

```ts
CommandItem: (props: CatalogComponentProps & { active?: boolean; disabled?: boolean; selected?: boolean; }) => JSX.Element
```

Renders a selectable command list entry, exposing `active`/`disabled`/`selected` as ARIA and data attributes.

### `CommandList`

```ts
CommandList: (props: CatalogComponentProps) => JSX.Element
```

Renders the `command-list` part of the shadcn-compatible catalog primitives.

### `CommandPalette`

```ts
CommandPalette: (props: CommandPaletteProps) => JSX.Element
```

Root dialog wrapper for a searchable command palette. Manages open state
(controlled or uncontrolled), tracks the triggering element, and restores
focus to it after the palette closes.

### `CommandPaletteContent`

```ts
CommandPaletteContent: (props: CommandPaletteContentProps) => JSX.Element
```

Dialog content for a {@link CommandPalette}: renders the overlay, an
accessible (visually hidden) title/description, and a `Command` list,
moving initial focus to `initialFocus` (defaults to the search input) once
mounted, and optionally suppressing dismiss-on-escape/backdrop.

### `CommandPaletteContentProps`

```ts
CommandPaletteContentProps: Omit<DialogContentProps, "children" | "title" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside"> & {
  children?: unknown;
  title: string;
  description?: string;
  initialFocus?: string | (() => HTMLElement | null) | false;
  closeOnBackdrop?: boolean;
  closeOnEscape?: boolean;
  overlayProps?: DialogOverlayProps;
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
}
```

Props for the {@link CommandPaletteContent } component.

- `children`: children?: unknown;

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

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

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

- `initialFocus`: initialFocus?: string | false | (() => HTMLElement | null) | undefined;

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

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

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

- `overlayProps`: overlayProps?: DialogOverlayProps | undefined;

- `title`: title: string;

### `CommandPaletteLink`

```ts
CommandPaletteLink: (props: CommandPaletteLinkProps) => JSX.Element
```

A navigable result row that closes the palette on selection (unless `closeOnSelect` is `false`) and supports cancelling navigation via `onBeforeNavigate`.

### `CommandPaletteLinkProps`

```ts
CommandPaletteLinkProps: LinkProps & {
  closeOnSelect?: boolean;
  onBeforeNavigate?: (event: Event) => void;
}
```

Props for the {@link CommandPaletteLink } component.

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

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

### `CommandPaletteList`

```ts
CommandPaletteList: (props: CommandPaletteListProps) => JSX.Element
```

Renders the `<ul>` list wrapper for {@link CommandPalette} results.

### `CommandPaletteListProps`

```ts
CommandPaletteListProps: Omit<JSX.IntrinsicElements["ul"], "children" | "ref"> & {
  children?: unknown;
  ref?: Ref<HTMLUListElement>;
}
```

Props for the {@link CommandPaletteList } component.

- `children`: children?: unknown;

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

### `CommandPaletteProps`

```ts
CommandPaletteProps: DialogProps
```

Props for the {@link CommandPalette } component.

### `CommandPaletteTrigger`

```ts
CommandPaletteTrigger: { (props: CommandPaletteTriggerProps): JSX.Element; (props: CommandPaletteTriggerAsChildProps): JSX.Element; }
```

Trigger that opens the {@link CommandPalette}, registering itself so focus returns here on close.

### `CommandPaletteTriggerAsChildProps`

```ts
CommandPaletteTriggerAsChildProps: DialogTriggerAsChildProps
```

Props for {@link CommandPaletteTrigger } rendered with `asChild`.

### `CommandPaletteTriggerProps`

```ts
CommandPaletteTriggerProps: DialogTriggerProps
```

Props for the {@link CommandPaletteTrigger } component.

### `CommandSeparator`

```ts
CommandSeparator: (props: CatalogComponentProps) => JSX.Element
```

Renders the `command-separator` part of the shadcn-compatible catalog primitives.

### `CommandShortcut`

```ts
CommandShortcut: (props: CatalogComponentProps) => JSX.Element
```

Renders the `command-shortcut` part of the shadcn-compatible catalog primitives.

### `Container`

```ts
Container: (props: ContainerProps) => JSX.Element
```

Centers content in a max-width column with page gutters (defaults to the `"page"` {@link BlockSize }).

### `ContainerProps`

```ts
ContainerProps: Omit<BlockDivProps, "maxWidth"> & {
  size?: BlockSize;
}
```

Props for the {@link Container } component.

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

### `ContextMenu`

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

Renders a part of `dropdown`.

### `ContextMenuContent`

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

Dropdown/context-menu content wrapper around `@askrjs/ui`'s `DropdownContent`.
Non-`asChild` usage lazily evaluates `children` inside a body component so
they're only rendered once the dropdown is actually open.

### `ContextMenuGroup`

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

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

Supports polymorphic rendering via `asChild`.

### `ContextMenuItem`

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

Renders a part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `ContextMenuLabel`

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

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

Supports polymorphic rendering via `asChild`.

### `ContextMenuPortal`

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

Renders a part of `dropdown`.

### `ContextMenuSeparator`

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

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

Supports polymorphic rendering via `asChild`.

### `ContextMenuTrigger`

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

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

Supports polymorphic rendering via `asChild`.

### `CopyButton`

```ts
CopyButton: (props: CopyButtonProps) => JSX.Element
```

Copies text with visual and assistive success/failure feedback.

### `CopyButtonProps`

```ts
CopyButtonProps: Omit<ButtonNativeProps, "children" | "onPress"> & {
  text: string;
  label: string;
  successMessage?: string;
  failureMessage?: string;
  resetAfter?: number;
}
```

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

- `label`: label: string;

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

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

- `text`: text: string;

### `DataTable`

```ts
DataTable: (props: CatalogComponentProps) => JSX.Element
```

Styling-only container for the `data-table` catalog slot. It does not sort, filter, select, or paginate data.
Compose semantic `Table`/`VirtualTable` primitives with application-owned data state for those behaviors.

### `DatePicker`

```ts
DatePicker: (props: CatalogComponentProps) => JSX.Element
```

Styling-only `date-picker` container. It does not implement a popup calendar, formatting, or
calendar-grid keyboard behavior; pair it with {@link DatePickerInput} for a native date input.

### `DatePickerInput`

```ts
DatePickerInput: (props: CatalogComponentProps) => JSX.Element
```

Native `<input type="date">` styling slot; browser behavior and localization remain native.

### `DebouncedInput`

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

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

### `DEFAULT_THEME_OPTIONS`

```ts
DEFAULT_THEME_OPTIONS: readonly ThemeOption[]
```

Default light/dark/system theme options used by {@link ThemeScope} and {@link ThemePicker}.

### `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>
```
````

### `DialogClose`

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

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

Supports polymorphic rendering via `asChild`.

### `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`.

### `DialogDescription`

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

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

Supports polymorphic rendering via `asChild`.

### `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`.

### `DialogPortal`

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

Renders a part of `dialog`.

### `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`.

### `DialogTrigger`

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

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

Supports polymorphic rendering via `asChild`.

### `Direction`

```ts
Direction: (props: CatalogComponentProps & { dir?: "ltr" | "rtl"; }) => JSX.Element
```

Sets the `dir` attribute (defaulting to `"ltr"`) on its wrapping element for RTL/LTR scoping.

### `Drawer`

```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>
```
````

### `DrawerClose`

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

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

Supports polymorphic rendering via `asChild`.

### `DrawerContent`

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

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

Supports polymorphic rendering via `asChild`.

### `DrawerDescription`

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

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

Supports polymorphic rendering via `asChild`.

### `DrawerOverlay`

```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`.

### `DrawerPortal`

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

Renders a part of `dialog`.

### `DrawerTitle`

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

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

Supports polymorphic rendering via `asChild`.

### `DrawerTrigger`

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

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

Supports polymorphic rendering via `asChild`.

### `Dropdown`

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

Renders a part of `dropdown`.

### `DropdownContent`

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

Dropdown/context-menu content wrapper around `@askrjs/ui`'s `DropdownContent`.
Non-`asChild` usage lazily evaluates `children` inside a body component so
they're only rendered once the dropdown is actually open.

### `DropdownGroup`

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

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

Supports polymorphic rendering via `asChild`.

### `DropdownItem`

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

Renders a part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `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`.

### `DropdownMenu`

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

Renders a part of `dropdown`.

### `DropdownMenuContent`

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

Dropdown/context-menu content wrapper around `@askrjs/ui`'s `DropdownContent`.
Non-`asChild` usage lazily evaluates `children` inside a body component so
they're only rendered once the dropdown is actually open.

### `DropdownMenuGroup`

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

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

Supports polymorphic rendering via `asChild`.

### `DropdownMenuItem`

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

Renders a part of `dropdown`.

Supports polymorphic rendering via `asChild`.

### `DropdownMenuLabel`

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

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

Supports polymorphic rendering via `asChild`.

### `DropdownMenuPortal`

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

Renders a part of `dropdown`.

### `DropdownMenuSeparator`

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

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

Supports polymorphic rendering via `asChild`.

### `DropdownMenuTrigger`

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

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

Supports polymorphic rendering via `asChild`.

### `DropdownPortal`

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

Renders a part of `dropdown`.

### `DropdownSeparator`

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

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

Supports polymorphic rendering via `asChild`.

### `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`.

### `DropdownTriggerSize`

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

Dropdown Trigger Size.

### `DropdownTriggerVariant`

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

Dropdown Trigger Variant.

### `Empty`

```ts
Empty: (props: CatalogComponentProps) => JSX.Element
```

Renders the `empty` part of the shadcn-compatible catalog primitives.

### `EmptyContent`

```ts
EmptyContent: (props: CatalogComponentProps) => JSX.Element
```

Renders the `empty-content` part of the shadcn-compatible catalog primitives.

### `EmptyDescription`

```ts
EmptyDescription: (props: CatalogComponentProps) => JSX.Element
```

Renders the `empty-description` part of the shadcn-compatible catalog primitives.

### `EmptyHeader`

```ts
EmptyHeader: (props: CatalogComponentProps) => JSX.Element
```

Renders the `empty-header` part of the shadcn-compatible catalog primitives.

### `EmptyMedia`

```ts
EmptyMedia: (props: CatalogComponentProps) => JSX.Element
```

Renders the `empty-media` part of the shadcn-compatible catalog primitives.

### `EmptyState`

```ts
EmptyState: (props: EmptyStateProps) => JSX.Element
```

Centered placeholder for empty lists/views: an icon, title (default `<h2>`), description, extra content, and an action row.

### `EmptyStateHeadingTag`

```ts
EmptyStateHeadingTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
```

Heading tag allowed for an empty state's title via `titleAs`.

### `EmptyStateProps`

```ts
EmptyStateProps: BlockDivProps & {
  icon?: unknown;
  title?: unknown;
  titleAs?: EmptyStateHeadingTag;
  description?: unknown;
  action?: unknown;
}
```

Props for the {@link EmptyState } component.

- `action`: action?: unknown;

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: "div" | undefined;

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

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

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

- `description`: description?: unknown;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `icon`: icon?: unknown;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

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

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `title`: title?: unknown;

- `titleAs`: titleAs?: EmptyStateHeadingTag | undefined;

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `EmptyTitle`

```ts
EmptyTitle: (props: CatalogComponentProps) => JSX.Element
```

Renders the `empty-title` part of the shadcn-compatible catalog primitives.

### `Field`

```ts
Field: (props: FieldProps) => JSX.Element
```

Groups a form control with its hint/error text, marking `data-invalid` when `invalid` is set.

### `FieldContent`

```ts
FieldContent: (props: CatalogComponentProps) => JSX.Element
```

Renders the `field-content` part of the shadcn-compatible catalog primitives.

### `FieldDescription`

```ts
FieldDescription: (props: CatalogComponentProps) => JSX.Element
```

Renders the `field-description` part of the shadcn-compatible catalog primitives.

### `FieldError`

```ts
FieldError: (props: FieldErrorProps) => JSX.Element
```

Renders validation error text for a {@link Field}, exposed with `role="alert"`.

### `FieldErrorProps`

```ts
FieldErrorProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}
```

Props for the {@link FieldError } component.

- `children`: children?: unknown;

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

### `FieldGroup`

```ts
FieldGroup: (props: CatalogComponentProps) => JSX.Element
```

Renders the `field-group` part of the shadcn-compatible catalog primitives.

### `FieldHint`

```ts
FieldHint: (props: FieldHintProps) => JSX.Element
```

Renders supporting hint text for a {@link Field}.

### `FieldHintProps`

```ts
FieldHintProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}
```

Props for the {@link FieldHint } component.

- `children`: children?: unknown;

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

### `FieldLabel`

```ts
FieldLabel: (props: CatalogComponentProps) => JSX.Element
```

Renders the `field-label` part of the shadcn-compatible catalog primitives.

### `FieldLegend`

```ts
FieldLegend: (props: CatalogComponentProps) => JSX.Element
```

Renders the `field-legend` part of the shadcn-compatible catalog primitives.

### `FieldProps`

```ts
FieldProps: DivProps & {
  children?: unknown;
  invalid?: boolean;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link Field } component.

- `children`: children?: unknown;

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

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

### `FieldSeparator`

```ts
FieldSeparator: (props: CatalogComponentProps) => JSX.Element
```

Renders the `field-separator` part of the shadcn-compatible catalog primitives.

### `FieldSet`

```ts
FieldSet: (props: CatalogComponentProps) => JSX.Element
```

Renders the `field-set` part of the shadcn-compatible catalog primitives.

### `FieldTitle`

```ts
FieldTitle: (props: CatalogComponentProps) => JSX.Element
```

Renders the `field-title` part of the shadcn-compatible catalog primitives.

### `Footer`

```ts
Footer: (props: FooterProps) => JSX.Element
```

Renders a `<footer>`-element {@link Block } with a muted background and top border.

### `FooterContent`

```ts
FooterContent: (props: FooterContentProps) => JSX.Element
```

Renders the main content wrapper of a {@link Footer}.

### `FooterContentProps`

```ts
FooterContentProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link FooterContent } component.

- `children`: children?: unknown;

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

### `FooterDescription`

```ts
FooterDescription: (props: FooterDescriptionProps) => JSX.Element
```

Renders supporting description text within a {@link Footer}.

### `FooterDescriptionProps`

```ts
FooterDescriptionProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}
```

Props for the {@link FooterDescription } component.

- `children`: children?: unknown;

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

### `FooterLink`

```ts
FooterLink: (props: FooterLinkProps) => JSX.Element
```

Renders a single link within a {@link Footer}.

### `FooterLinkProps`

```ts
FooterLinkProps: AnchorProps & {
  children?: unknown;
  ref?: Ref<HTMLAnchorElement>;
}
```

Props for the {@link FooterLink } component.

- `children`: children?: unknown;

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

### `FooterLinks`

```ts
FooterLinks: (props: FooterLinksProps) => JSX.Element
```

Renders a `<nav>` wrapper for a group of {@link FooterLink}s.

### `FooterLinksProps`

```ts
FooterLinksProps: NavProps & {
  children?: unknown;
  ref?: Ref<HTMLElement>;
}
```

Props for the {@link FooterLinks } component.

- `children`: children?: unknown;

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

### `FooterProps`

```ts
FooterProps: Omit<BlockElementProps<"footer">, "as">
```

Props for the {@link Footer } component.

### `FooterSection`

```ts
FooterSection: (props: FooterSectionProps) => JSX.Element
```

Renders a grouped section within a {@link Footer}.

### `FooterSectionProps`

```ts
FooterSectionProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link FooterSection } component.

- `children`: children?: unknown;

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

### `FooterTitle`

```ts
FooterTitle: (props: FooterTitleProps) => JSX.Element
```

Renders a section title (`<h2>`) within a {@link Footer}.

### `FooterTitleProps`

```ts
FooterTitleProps: HeadingProps & {
  children?: unknown;
  ref?: Ref<HTMLHeadingElement>;
}
```

Props for the {@link FooterTitle } component.

- `children`: children?: unknown;

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

### `Form`

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

Renders a part of `form`.

Supports polymorphic rendering via `asChild`.

### `Grid`

```ts
Grid: <TElement extends GridElement = "div">(props: GridProps<TElement>) => JSX.Element
```

CSS grid layout primitive: turns `columns`/`gap`/`align` (each optionally responsive) into generated grid-template styles, rendering as `<div>` by default.

### `GridAlign`

```ts
GridAlign: "start" | "center" | "end" | "stretch"
```

`align-items` value applied to a {@link Grid }.

### `GridColumns`

```ts
GridColumns: number | string
```

Column definition for {@link Grid }: a track count or a raw `grid-template-columns` string.

### `GridElement`

```ts
GridElement: "div" | "section" | "ul"
```

Element tags {@link Grid } can render as via its `as` prop.

### `GridProps`

```ts
GridProps: GridIntrinsicProps<TElement> & {
  as?: TElement;
  columns?: ResponsiveValue<GridColumns>;
  gap?: ResponsiveValue<BlockSpace>;
  align?: ResponsiveValue<GridAlign>;
  children?: unknown;
  ref?: Ref<HTMLElement>;
}
```

Props for the {@link Grid } component, specialized for a given {@link GridElement} `TElement`.

- `align`: align?: ResponsiveValue<GridAlign> | undefined;

- `as`: as?: TElement | undefined;

- `children`: children?: unknown;

- `columns`: columns?: ResponsiveValue<GridColumns> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

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

### `Header`

```ts
Header: (props: HeaderProps) => JSX.Element
```

Renders a `<header>`-element {@link Block } with a surface background and bottom border, optionally sticky-positioned via `position`/`sticky`.

### `HeaderProps`

```ts
HeaderProps: Omit<BlockElementProps<"header">, "as" | "sticky"> & {
  position?: "sticky" | "static";
  sticky?: boolean;
}
```

Props for the {@link Header } component.

- `position`: position?: "sticky" | "static" | undefined;

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

### `HoverCard`

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

Renders a part of `hover-card`.

### `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`.

### `HoverCardPortal`

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

Renders a part of `hover-card`.

### `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`.

### `Inline`

```ts
Inline: (props: LegacyLayoutProps) => JSX.Element
```

### `Input`

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

Renders the `input` part of `input`.

Supports polymorphic rendering via `asChild`.

### `InputGroup`

```ts
InputGroup: (props: InputGroupProps) => JSX.Element
```

Groups related inputs/addons together, optionally visually attached, with a horizontal or vertical orientation and `role="group"` by default.

### `InputGroupOrientation`

```ts
InputGroupOrientation: "horizontal" | "vertical"
```

Layout direction of an {@link InputGroup }.

### `InputGroupProps`

```ts
InputGroupProps: DivProps & {
  children?: unknown;
  attached?: boolean;
  orientation?: InputGroupOrientation;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link InputGroup } component.

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

- `children`: children?: unknown;

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

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

### `InputGroupText`

```ts
InputGroupText: { (props: InputGroupTextProps): JSX.Element; (props: InputGroupTextAsChildProps): JSX.Element; }
```

Renders static text/label content within an {@link InputGroup}.

### `InputGroupTextAsChildProps`

```ts
InputGroupTextAsChildProps: SpanProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link InputGroupText } rendered with `asChild`, merging its attributes onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `InputGroupTextProps`

```ts
InputGroupTextProps: SpanProps & {
  asChild?: false;
  children?: unknown;
  ref?: Ref<HTMLSpanElement>;
}
```

Props for {@link InputGroupText } rendered as its default `<span>` element.

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

- `children`: children?: unknown;

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

### `InputOTP`

```ts
InputOTP: (props: CatalogComponentProps) => JSX.Element
```

Styling-only OTP anatomy; it does not render an input or own value, focus, paste, or validation behavior.

### `InputOTPGroup`

```ts
InputOTPGroup: (props: CatalogComponentProps) => JSX.Element
```

Renders the `input-otp-group` part of the shadcn-compatible catalog primitives.

### `InputOTPSeparator`

```ts
InputOTPSeparator: (props: CatalogComponentProps) => JSX.Element
```

Renders the visual separator between InputOTP groups (defaults to `"-"`).

### `InputOTPSlot`

```ts
InputOTPSlot: (props: CatalogComponentProps) => JSX.Element
```

Renders the `input-otp-slot` part of the shadcn-compatible catalog primitives.

### `Item`

```ts
Item: (props: CatalogComponentProps & { active?: boolean; size?: "default" | "sm" | "xs"; variant?: "default" | "outline" | "muted"; }) => JSX.Element
```

Renders a generic list item part, exposing `active`/`size`/`variant` as data attributes.

### `ItemActions`

```ts
ItemActions: (props: CatalogComponentProps) => JSX.Element
```

Renders the `item-actions` part of the shadcn-compatible catalog primitives.

### `ItemContent`

```ts
ItemContent: (props: CatalogComponentProps) => JSX.Element
```

Renders the `item-content` part of the shadcn-compatible catalog primitives.

### `ItemDescription`

```ts
ItemDescription: (props: CatalogComponentProps) => JSX.Element
```

Renders the `item-description` part of the shadcn-compatible catalog primitives.

### `ItemFooter`

```ts
ItemFooter: (props: CatalogComponentProps) => JSX.Element
```

Renders the `item-footer` part of the shadcn-compatible catalog primitives.

### `ItemGroup`

```ts
ItemGroup: (props: CatalogComponentProps) => JSX.Element
```

Renders the `item-group` part of the shadcn-compatible catalog primitives.

### `ItemHeader`

```ts
ItemHeader: (props: CatalogComponentProps) => JSX.Element
```

Renders the `item-header` part of the shadcn-compatible catalog primitives.

### `ItemMedia`

```ts
ItemMedia: (props: CatalogComponentProps) => JSX.Element
```

Renders the `item-media` part of the shadcn-compatible catalog primitives.

### `ItemTitle`

```ts
ItemTitle: (props: CatalogComponentProps) => JSX.Element
```

Renders the `item-title` part of the shadcn-compatible catalog primitives.

### `Kbd`

```ts
Kbd: (props: CatalogComponentProps) => JSX.Element
```

Renders the `kbd` part of the shadcn-compatible catalog primitives.

### `Label`

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

Renders the `label` part of `label`.

Supports polymorphic rendering via `asChild`.

### `LegacyLayoutProps`

```ts
LegacyLayoutProps: Omit<BlockLayoutProps, "gap" | "padding" | "wrap"> & LegacyStructuralProps & LegacyLayoutConveniences
```

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

- `as`: as?: BlockElement | undefined;

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

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

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

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<LegacySpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `p`: p?: ResponsiveValue<LegacySpace> | undefined;

- `padding`: padding?: ResponsiveValue<LegacySpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

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

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<LegacyWrap> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `Main`

```ts
Main: (props: MainProps) => JSX.Element
```

Renders a `<main>`-element {@link Block } that grows to fill available space.

### `MainProps`

```ts
MainProps: Omit<BlockElementProps<"main">, "as">
```

Props for the {@link Main } component.

### `Menubar`

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

Renders a part of `menubar`.

### `MenubarContent`

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

Renders a part of `menubar`.

### `MenubarGroup`

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

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

Supports polymorphic rendering via `asChild`.

### `MenubarItem`

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

Renders a part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MenubarLabel`

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

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

Supports polymorphic rendering via `asChild`.

### `MenubarMenu`

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

Renders a part of `menubar`.

### `MenubarPortal`

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

Renders a part of `menubar`.

### `MenubarSeparator`

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

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

Supports polymorphic rendering via `asChild`.

### `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`.

### `MenubarSubTrigger`

```ts
MenubarSubTrigger: { (props: MenubarSubTriggerProps): JSX.Element | null; (props: MenubarSubTriggerAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MenubarTrigger`

```ts
MenubarTrigger: { (props: MenubarTriggerProps): JSX.Element | null; (props: MenubarTriggerAsChildProps): JSX.Element | null; }
```

Renders a part of `menubar`.

Supports polymorphic rendering via `asChild`.

### `MetaStrip`

```ts
MetaStrip: (props: MetaStripProps) => JSX.Element
```

Semantic compact key/value facts with consistent inline or stacked wrapping.

### `MetaStripDensity`

```ts
MetaStripDensity: "inline" | "stacked"
```

### `MetaStripItem`

```ts
MetaStripItem: {
  label: string;
  value: string | number;
  caption?: string;
  font?: "body" | "mono";
  numeric?: "normal" | "tabular";
}
```

### `MetaStripProps`

```ts
MetaStripProps: Omit<JSX.IntrinsicElements["dl"], "children" | "ref"> & {
  items: readonly MetaStripItem[];
  density?: MetaStripDensity;
  ref?: Ref<HTMLDListElement>;
}
```

- `density`: density?: MetaStripDensity | undefined;

- `items`: items: readonly MetaStripItem[];

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

### `NativeSelect`

```ts
NativeSelect: (props: CatalogComponentProps) => JSX.Element
```

Renders a styled native `<select>` element.

### `Nav`

```ts
Navbar: (props: NavbarProps) => JSX.Element
```

Horizontal navigation bar. Below `collapseAt`/`breakpoint`, non-brand
children are grouped behind a collapsible toggle so brand content stays
visible while the rest collapses on small screens.

### `Navbar`

```ts
Navbar: (props: NavbarProps) => JSX.Element
```

Horizontal navigation bar. Below `collapseAt`/`breakpoint`, non-brand
children are grouped behind a collapsible toggle so brand content stays
visible while the rest collapses on small screens.

### `NavbarCollapseBreakpoint`

```ts
NavbarCollapseBreakpoint: "sm" | "md" | "lg" | "xl"
```

Breakpoint at which a {@link Navbar } collapses non-brand content behind a toggle.

### `NavbarProps`

```ts
NavbarProps: Omit<BlockElementProps<"nav">, "as" | "direction" | "align"> & {
  breakpoint?: NavbarCollapseBreakpoint | false;
  collapseAt?: NavbarCollapseBreakpoint | false;
  collapseLabel?: string;
  collapseIcon?: unknown;
}
```

Props for the {@link Navbar } component.

- `breakpoint`: breakpoint?: false | NavbarCollapseBreakpoint | undefined;

- `collapseAt`: collapseAt?: false | NavbarCollapseBreakpoint | undefined;

- `collapseIcon`: collapseIcon?: unknown;

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

### `NavBrand`

```ts
NavBrand: (props: NavBrandProps) => JSX.Element
```

Renders the brand/logo slot of a {@link Navbar}; excluded from the collapsible section.

### `NavBrandProps`

```ts
NavBrandProps: BlockDivProps | BlockElementProps<"a"> | BlockAsChildProps
```

Props for the {@link NavBrand } component.

- `align`: align?: ResponsiveValue<BlockAlign> | undefined;

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

- `background`: background?: ResponsiveValue<BlockBackground> | undefined;

- `border`: border?: ResponsiveValue<boolean> | undefined;

- `borderBottom`: borderBottom?: ResponsiveValue<boolean> | undefined;

- `borderRight`: borderRight?: ResponsiveValue<boolean> | undefined;

- `borderTop`: borderTop?: ResponsiveValue<boolean> | undefined;

- `center`: center?: ResponsiveValue<boolean> | undefined;

- `children`: children?: unknown;

- `direction`: direction?: ResponsiveValue<BlockDirection> | undefined;

- `gap`: gap?: ResponsiveValue<BlockSpace> | undefined;

- `grow`: grow?: ResponsiveValue<number | boolean> | undefined;

- `height`: height?: ResponsiveValue<BlockSize> | undefined;

- `hide`: hide?: ResponsiveValue<boolean> | undefined;

- `justify`: justify?: ResponsiveValue<BlockJustify> | undefined;

- `margin`: margin?: ResponsiveValue<BlockMargin> | undefined;

- `marginX`: marginX?: ResponsiveValue<BlockMargin> | undefined;

- `marginY`: marginY?: ResponsiveValue<BlockMargin> | undefined;

- `maxHeight`: maxHeight?: ResponsiveValue<BlockSize> | undefined;

- `maxWidth`: maxWidth?: ResponsiveValue<BlockSize> | undefined;

- `minHeight`: minHeight?: ResponsiveValue<BlockSize> | undefined;

- `minWidth`: minWidth?: ResponsiveValue<BlockSize> | undefined;

- `padding`: padding?: ResponsiveValue<BlockSpace> | undefined;

- `paddingX`: paddingX?: ResponsiveValue<BlockSpace> | undefined;

- `paddingY`: paddingY?: ResponsiveValue<BlockSpace> | undefined;

- `radius`: radius?: ResponsiveValue<BlockRadius> | undefined;

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

- `rowFrom`: rowFrom?: BlockRowFrom | undefined;

- `shadow`: shadow?: ResponsiveValue<BlockShadow> | undefined;

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

- `top`: top?: ResponsiveValue<BlockSpace> | undefined;

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

- `wrap`: wrap?: ResponsiveValue<boolean> | undefined;

- `zIndex`: zIndex?: ResponsiveValue<BlockZIndex> | undefined;

### `NavDropdown`

```ts
NavDropdown: (props: NavDropdownProps) => JSX.Element
```

Renders a dropdown menu triggered from within a {@link Navbar}.

### `NavDropdownProps`

```ts
NavDropdownProps: Omit<DropdownProps, "children"> & Pick<DropdownContentOwnProps, "align" | "side" | "sideOffset"> & {
  label: unknown;
  children?: unknown;
}
```

Props for the {@link NavDropdown } component.

- `children`: children?: unknown;

- `label`: label: unknown;

### `NavGroup`

```ts
NavGroup: (props: NavGroupProps) => JSX.Element
```

Groups related {@link Navbar} items under an optional label.

### `NavGroupProps`

```ts
NavGroupProps: Omit<BlockDivProps, "title"> & {
  label?: unknown;
  title?: unknown;
}
```

Props for the {@link NavGroup } component.

- `label`: label?: unknown;

- `title`: title?: unknown;

### `NavigationMenu`

```ts
NavigationMenu: (props: CatalogComponentProps) => JSX.Element
```

Styling-only navigation-menu anatomy; it does not own disclosure, roving focus, or keyboard behavior.

### `NavigationMenuContent`

```ts
NavigationMenuContent: (props: CatalogComponentProps) => JSX.Element
```

Renders the `navigation-menu-content` part of the shadcn-compatible catalog primitives.

### `NavigationMenuIndicator`

```ts
NavigationMenuIndicator: (props: CatalogComponentProps) => JSX.Element
```

Renders the `navigation-menu-indicator` part of the shadcn-compatible catalog primitives.

### `NavigationMenuItem`

```ts
NavigationMenuItem: (props: CatalogComponentProps) => JSX.Element
```

Renders the `navigation-menu-item` part of the shadcn-compatible catalog primitives.

### `NavigationMenuLink`

```ts
NavigationMenuLink: (props: CatalogComponentProps) => JSX.Element
```

Renders the `navigation-menu-link` part of the shadcn-compatible catalog primitives.

### `NavigationMenuList`

```ts
NavigationMenuList: (props: CatalogComponentProps) => JSX.Element
```

Renders the `navigation-menu-list` part of the shadcn-compatible catalog primitives.

### `NavigationMenuTrigger`

```ts
NavigationMenuTrigger: (props: CatalogComponentProps) => JSX.Element
```

Renders the `navigation-menu-content` part of the shadcn-compatible catalog primitives.

### `NavigationMenuViewport`

```ts
NavigationMenuViewport: (props: CatalogComponentProps) => JSX.Element
```

Renders the `navigation-menu-viewport` part of the shadcn-compatible catalog primitives.

### `NavItem`

```ts
NavItem: { (props: NavItemProps): JSX.Element; (props: NavItemAsChildProps): JSX.Element; }
```

A generic navigation item, rendered as an `<a>` (or, with `asChild`, merged onto a child), highlighted when `active`.

### `NavItemAsChildProps`

```ts
NavItemAsChildProps: Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link NavItem } rendered with `asChild`, merging onto a single child element.

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

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `NavItemProps`

```ts
NavItemProps: Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLAnchorElement>;
}
```

Props for {@link NavItem } rendered as its default `<a>` element.

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

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

- `children`: children?: unknown;

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

### `NavLink`

```ts
NavLink: (props: NavLinkProps) => JSX.Element
```

A router-aware navigation link that highlights itself when its route matches the current location.

### `NavLinkProps`

```ts
NavLinkProps: LinkProps & NavLinkOwnProps
```

Props for the {@link NavLink } component.

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

- `match`: match?: NavLinkMatch | undefined;

### `Page`

```ts
Page: (props: PageProps) => JSX.Element
```

Top-level page wrapper: a growing `<main>` containing a {@link Container } with vertical page padding and content spacing.

### `PageHeader`

```ts
PageHeader: (props: PageHeaderProps) => JSX.Element
```

Page-level header with a title, optional description, and an actions row that wraps to a new line on small screens.

### `PageHeaderProps`

```ts
PageHeaderProps: Omit<BlockDivProps, "direction" | "rowFrom"> & {
  title: unknown;
  description?: unknown;
  actions?: unknown;
  direction?: never;
  rowFrom?: never;
}
```

Props for the {@link PageHeader } component.

- `actions`: actions?: unknown;

- `description`: description?: unknown;

- `direction`: direction?: undefined;

- `rowFrom`: rowFrom?: undefined;

- `title`: title: unknown;

### `PageProps`

```ts
PageProps: MainProps
```

Props for the {@link Page } component.

### `Pagination`

```ts
Pagination: (props: CatalogComponentProps) => JSX.Element
```

Renders the `pagination` part of the shadcn-compatible catalog primitives.

### `PaginationContent`

```ts
PaginationContent: (props: CatalogComponentProps) => JSX.Element
```

Renders the `pagination-content` part of the shadcn-compatible catalog primitives.

### `PaginationEllipsis`

```ts
PaginationEllipsis: (props: CatalogComponentProps) => JSX.Element
```

Renders a non-interactive ellipsis marker between pagination links.

### `PaginationItem`

```ts
PaginationItem: (props: CatalogComponentProps) => JSX.Element
```

Renders the `pagination-item` part of the shadcn-compatible catalog primitives.

### `PaginationLink`

```ts
PaginationLink: (props: CatalogComponentProps & { active?: boolean; }) => JSX.Element
```

Renders a pagination page link, marking it `aria-current="page"` when `active`.

### `PaginationNext`

```ts
PaginationNext: (props: CatalogComponentProps) => JSX.Element
```

Pagination link that moves to the next page.

### `PaginationPrevious`

```ts
PaginationPrevious: (props: CatalogComponentProps) => JSX.Element
```

Pagination link that moves to the previous page.

### `Pill`

```ts
Pill: (props: PillProps) => JSX.Element
```

A router-aware link styled as a pill, auto-marked active by matching the current route, with an active background highlight.

### `PillProps`

```ts
PillProps: LinkProps & NavLinkOwnProps
```

Props for the {@link Pill } component.

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

- `match`: match?: NavLinkMatch | undefined;

### `Pills`

```ts
Pills: { (props: PillsProps): JSX.Element; (props: PillsAsChildProps): JSX.Element; }
```

Renders a `<nav>` wrapper (or, with `asChild`, merges onto a child) for a set of {@link Pill} links.

### `PillsAsChildProps`

```ts
PillsAsChildProps: Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & PillsOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link Pills } rendered with `asChild`, merging onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `PillsProps`

```ts
PillsProps: Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & PillsOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLElement>;
}
```

Props for {@link Pills } rendered as its default `<nav>` element.

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

- `children`: children?: unknown;

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

### `Popover`

```ts
Popover: (props: PopoverProps) => JSX.Element
```

Renders a part of `popover`.

### `PopoverClose`

```ts
PopoverClose: { (props: PopoverCloseProps): JSX.Element; (props: PopoverCloseAsChildProps): JSX.Element; }
```

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

Supports polymorphic rendering via `asChild`.

### `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`.

### `PopoverContentWidth`

```ts
PopoverContentWidth: 'sm' | 'md' | 'lg'
```

Popover Content Width.

### `PopoverPortal`

```ts
PopoverPortal: (props: PopoverPortalProps) => JSX.Element | null
```

Renders a part of `popover`.

### `PopoverTrigger`

```ts
PopoverTrigger: { (props: PopoverTriggerProps): JSX.Element; (props: PopoverTriggerAsChildProps): JSX.Element; }
```

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

Supports polymorphic rendering via `asChild`.

### `Progress`

```ts
Progress: (props: ProgressProps) => JSX.Element
```

Renders the `progress` part of `progress` with `role="progressbar"`.

### `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.

### `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`.

### `ProgressIndicator`

```ts
ProgressIndicator: { (props: ProgressIndicatorProps): JSX.Element; (props: ProgressIndicatorAsChildProps): JSX.Element; }
```

Renders the `progress-indicator` part of `progress`.

Supports polymorphic rendering via `asChild`.

### `RadioGroup`

```ts
RadioGroup: (props: RadioGroupProps) => JSX.Element
```

Renders a part of `radio-group`.

### `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`.

### `ResizableHandle`

```ts
ResizableHandle: (props: CatalogComponentProps) => JSX.Element
```

Styling-only separator slot; it does not implement resizing, pointer dragging, or keyboard controls.

### `ResizablePanel`

```ts
ResizablePanel: (props: CatalogComponentProps) => JSX.Element
```

Styling-only `resizable-panel` slot; it does not implement resizing or manage panel dimensions.

### `ResizablePanelGroup`

```ts
ResizablePanelGroup: (props: CatalogComponentProps) => JSX.Element
```

Styling-only container for the `resizable-panel-group` catalog slot. It does not implement resizing.
Consumers own pointer, keyboard, sizing, and ARIA state until a behavior primitive exists in `@askrjs/ui`.

### `ScrollArea`

```ts
ScrollArea: { (props: ScrollAreaProps): JSX.Element; (props: ScrollAreaAsChildProps): JSX.Element; }
```

Renders a part of `scroll-area`.

### `ScrollAreaCorner`

```ts
ScrollAreaCorner: (props: ScrollAreaCornerProps) => JSX.Element
```

Renders the `scroll-area-corner` part of `scroll-area`.

### `ScrollAreaScrollbar`

```ts
ScrollAreaScrollbar: (props: ScrollAreaScrollbarProps) => JSX.Element
```

Renders the `scroll-area-scrollbar` part of `scroll-area` with `role="scrollbar"`.

### `ScrollAreaThumb`

```ts
ScrollAreaThumb: (props: ScrollAreaThumbProps) => JSX.Element
```

Renders the `scroll-area-thumb` part of `scroll-area`.

### `ScrollAreaViewport`

```ts
ScrollAreaViewport: { (props: ScrollAreaViewportProps): JSX.Element; (props: ScrollAreaViewportAsChildProps): JSX.Element; }
```

Renders a part of `scroll-area`.

### `Section`

```ts
Section: (props: SectionProps) => JSX.Element
```

Renders a `<section>`-element {@link Block } with vertical spacing between children and page padding.

### `SectionProps`

```ts
SectionProps: Omit<BlockElementProps<"section">, "as">
```

Props for the {@link Section } component.

### `Select`

```ts
Select: (props: SelectProps) => JSX.Element
```

Renders a part of `select`.

### `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`.

### `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`.

### `SelectItem`

```ts
SelectItem: { (props: SelectItemProps): JSX.Element | null; (props: SelectItemAsChildProps): JSX.Element | null; }
```

Renders a part of `select`.

Supports polymorphic rendering via `asChild`.

### `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`.

### `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`.

### `SelectPortal`

```ts
SelectPortal: (props: SelectPortalProps) => JSX.Element | null
```

Renders a part of `select`.

### `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`.

### `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`.

### `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`.

### `Separator`

```ts
Separator: { (props: SeparatorNativeProps): JSX.Element; (props: SeparatorAsChildProps): JSX.Element; }
```

Visual divider, defaulting to horizontal `role="separator"`; pass
`decorative` to drop the semantic role, or `asChild` to merge onto a
single child element.

### `SeparatorAsChildProps`

```ts
SeparatorAsChildProps: SeparatorOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link Separator } rendered with `asChild`, merging its attributes onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

- `orientation`: orientation?: "vertical" | "horizontal" | undefined;

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

### `SeparatorNativeProps`

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

Props for {@link Separator } rendered as its default `<div>` element.

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

- `children`: children?: unknown;

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

- `orientation`: orientation?: "vertical" | "horizontal" | undefined;

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

### `SeparatorOwnProps`

```ts
SeparatorOwnProps: {
  decorative?: boolean;
  orientation?: "horizontal" | "vertical";
  children?: unknown;
}
```

Props shared by both {@link Separator } call signatures.

- `children`: children?: unknown;

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

- `orientation`: orientation?: "vertical" | "horizontal" | undefined;

### `SeparatorProps`

```ts
SeparatorProps: SeparatorNativeProps | SeparatorAsChildProps
```

Union of all prop shapes accepted by {@link Separator }.

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

- `children`: children?: unknown;

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

- `orientation`: orientation?: "vertical" | "horizontal" | undefined;

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

### `Sheet`

```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>
```
````

### `SheetClose`

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

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

Supports polymorphic rendering via `asChild`.

### `SheetContent`

```ts
SheetContent: (props: CatalogComponentProps & { side?: "top" | "right" | "bottom" | "left"; }) => JSX.Element
```

Sheet variant of the dialog content part; defaults to sliding in from the right.

### `SheetDescription`

```ts
SheetDescription: (props: CatalogComponentProps) => JSX.Element
```

Sheet variant of the dialog description part.

### `SheetFooter`

```ts
SheetFooter: (props: CatalogComponentProps) => JSX.Element
```

Renders the `sheet-footer` part of the shadcn-compatible catalog primitives.

### `SheetHeader`

```ts
SheetHeader: (props: CatalogComponentProps) => JSX.Element
```

Renders the `sheet-header` part of the shadcn-compatible catalog primitives.

### `SheetOverlay`

```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`.

### `SheetPortal`

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

Renders a part of `dialog`.

### `SheetTitle`

```ts
SheetTitle: (props: CatalogComponentProps) => JSX.Element
```

Sheet variant of the dialog title part.

### `SheetTrigger`

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

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

Supports polymorphic rendering via `asChild`.

### `Shell`

```ts
Shell: (props: LegacyLayoutProps & { variant?: string; }) => JSX.Element
```

### `ShellMain`

```ts
ShellMain: (props: LegacyLayoutProps) => JSX.Element
```

### `ShellNav`

```ts
ShellNav: (props: LegacyLayoutProps) => JSX.Element
```

### `Sidebar`

```ts
Sidebar: (props: SidebarProps) => JSX.Element
```

Root `<aside>` sidebar layout with configurable width, side, collapse behavior, and visual variant, exposed as data attributes for CSS.

### `SidebarButtonProps`

```ts
SidebarButtonProps: JSX.IntrinsicElements["button"] & {
  active?: boolean;
  asChild?: boolean;
  size?: "default" | "sm" | "lg";
  tooltip?: string;
  tooltipSide?: SidebarTooltipSide;
  variant?: "default" | "outline";
}
```

Props shared by the interactive {@link Sidebar } button parts (menu button, action, trigger).

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

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

- `size`: size?: "sm" | "lg" | "default" | undefined;

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

- `tooltipSide`: tooltipSide?: SidebarTooltipSide | undefined;

- `variant`: variant?: "default" | "outline" | undefined;

### `SidebarCollapsible`

```ts
SidebarCollapsible: "offcanvas" | "icon" | "none"
```

How a {@link Sidebar } collapses: fully off-canvas, down to icons only, or not at all.

### `SidebarContent`

```ts
SidebarContent: (props: SidebarPartProps) => JSX.Element
```

Renders the scrollable content region of a {@link Sidebar}.

### `SidebarFooter`

```ts
SidebarFooter: (props: SidebarPartProps) => JSX.Element
```

Renders the footer region of a {@link Sidebar}.

### `SidebarGroup`

```ts
SidebarGroup: (props: SidebarPartProps) => JSX.Element
```

Groups related {@link SidebarMenu} items together.

### `SidebarGroupContent`

```ts
SidebarGroupContent: (props: SidebarPartProps) => JSX.Element
```

Renders the content region of a {@link SidebarGroup}.

### `SidebarGroupLabel`

```ts
SidebarGroupLabel: (props: SidebarPartProps) => JSX.Element
```

Renders the label for a {@link SidebarGroup}.

### `SidebarHeader`

```ts
SidebarHeader: (props: SidebarPartProps) => JSX.Element
```

Renders the header region of a {@link Sidebar}.

### `SidebarInset`

```ts
SidebarInset: (props: SidebarPartProps) => JSX.Element
```

Renders the `<main>` content area beside the {@link Sidebar}.

### `SidebarMenu`

```ts
SidebarMenu: (props: SidebarPartProps) => JSX.Element
```

Renders a `<ul>` list of {@link SidebarMenuItem}s.

### `SidebarMenuAction`

```ts
SidebarMenuAction: (props: SidebarButtonProps) => JSX.Element
```

Renders a secondary action button attached to a {@link SidebarMenuItem}, with an optional tooltip.

### `SidebarMenuBadge`

```ts
SidebarMenuBadge: (props: SidebarPartProps) => JSX.Element
```

Renders a status badge attached to a {@link SidebarMenuItem}.

### `SidebarMenuButton`

```ts
SidebarMenuButton: (props: SidebarButtonProps) => JSX.Element
```

Clickable menu button within a {@link SidebarMenuItem}; supports `active`/`size`/`variant` state and an optional tooltip.

### `SidebarMenuItem`

```ts
SidebarMenuItem: (props: SidebarPartProps) => JSX.Element
```

Renders a single `<li>` entry within a {@link SidebarMenu}.

### `SidebarPartProps`

```ts
SidebarPartProps: JSX.IntrinsicElements["div"] & {
  as?: keyof JSX.IntrinsicElements;
  asChild?: boolean;
}
```

Props shared by the generic {@link Sidebar } structural parts (content, header, footer, group, etc.).

- `as`: as?: keyof JSX.IntrinsicElements | undefined;

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

### `SidebarProps`

```ts
SidebarProps: Omit<BlockElementProps<"aside">, "as" | "width" | "shrink"> & {
  collapsible?: SidebarCollapsible;
  side?: SidebarSide;
  variant?: SidebarVariant;
  width?: BlockElementProps<"aside">["width"];
  shrink?: BlockElementProps<"aside">["shrink"];
}
```

Props for the {@link Sidebar } component.

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

- `shrink`: shrink?: ResponsiveValue<number | boolean> | undefined;

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

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

- `width`: width?: ResponsiveValue<BlockSize> | undefined;

### `SidebarRail`

```ts
SidebarRail: (props: SidebarButtonProps) => JSX.Element
```

Renders a draggable/clickable rail along the sidebar's edge for resizing or toggling it.

### `SidebarRailProps`

```ts
SidebarRailProps: SidebarButtonProps
```

Props for the {@link SidebarRail } component.

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

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

- `size`: size?: "sm" | "lg" | "default" | undefined;

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

- `tooltipSide`: tooltipSide?: SidebarTooltipSide | undefined;

- `variant`: variant?: "default" | "outline" | undefined;

### `SidebarScope`

```ts
SidebarScope: (props: SidebarPartProps) => JSX.Element
```

Scoping wrapper that establishes the sidebar's CSS/context boundary.

### `SidebarSide`

```ts
SidebarSide: "left" | "right"
```

Which edge of the viewport a {@link Sidebar } is docked to.

### `SidebarTooltipSide`

```ts
SidebarTooltipSide: "top" | "bottom" | "left" | "right"
```

Side a sidebar button's tooltip is positioned on.

### `SidebarTrigger`

```ts
SidebarTrigger: (props: SidebarButtonProps) => JSX.Element
```

Icon button that toggles the {@link Sidebar}'s open/collapsed state, with an optional tooltip.

### `SidebarVariant`

```ts
SidebarVariant: "sidebar" | "floating" | "inset"
```

Visual style of a {@link Sidebar }.

### `Skeleton`

```ts
Skeleton: { (props: SkeletonProps): JSX.Element; (props: SkeletonAsChildProps): JSX.Element; }
```

Loading placeholder block with configurable `width`/`height`, hidden from assistive tech via `aria-hidden`, rendered as a `<div>` or merged onto a child via `asChild`.

### `SkeletonAsChildProps`

```ts
SkeletonAsChildProps: SkeletonOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link Skeleton } rendered with `asChild`, merging its attributes onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `height`: height?: string | number | undefined;

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

- `width`: width?: string | number | undefined;

### `SkeletonOwnProps`

```ts
SkeletonOwnProps: {
  children?: unknown;
  height?: string | number;
  width?: string | number;
}
```

Props shared by both {@link Skeleton } call signatures.

- `children`: children?: unknown;

- `height`: height?: string | number | undefined;

- `width`: width?: string | number | undefined;

### `SkeletonProps`

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

Props for {@link Skeleton } rendered as its default `<div>` element.

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

- `children`: children?: unknown;

- `height`: height?: string | number | undefined;

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

- `width`: width?: string | number | undefined;

### `Slider`

```ts
Slider: (props: SliderProps) => JSX.Element
```

Renders the `slider` part of `slider`.

### `SliderRange`

```ts
SliderRange: { (props: SliderRangeProps): JSX.Element; (props: SliderRangeAsChildProps): JSX.Element; }
```

Renders the `slider-range` part of `slider`.

Supports polymorphic rendering via `asChild`.

### `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`.

### `SliderTrack`

```ts
SliderTrack: { (props: SliderTrackProps): JSX.Element; (props: SliderTrackAsChildProps): JSX.Element; }
```

Renders the `slider-track` part of `slider`.

Supports polymorphic rendering via `asChild`.

### `Sonner`

```ts
Sonner: (props: CatalogComponentProps) => JSX.Element
```

Alias of {@link Toaster} kept for shadcn/sonner API compatibility.

### `Spinner`

```ts
Spinner: (props: SpinnerProps) => JSX.Element
```

Indeterminate loading spinner built on `ProgressCircle`, with an accessible label (defaults to `"Loading"`) and a `size` modifier.

### `SpinnerOwnProps`

```ts
SpinnerOwnProps: Omit<ProgressCircleProps, "value" | "getValueLabel"> & {
  label?: string;
  size?: SpinnerSize;
}
```

Props specific to {@link Spinner }, layered on top of `ProgressCircleProps`.

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

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

### `SpinnerProps`

```ts
SpinnerProps: SpinnerOwnProps
```

Props for the {@link Spinner } component.

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

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

### `SpinnerSize`

```ts
SpinnerSize: "sm" | "md" | "lg"
```

Size modifier for {@link Spinner }.

### `Stack`

```ts
Stack: (props: LegacyLayoutProps) => JSX.Element
```

### `Stat`

```ts
Stat: (props: StatProps) => JSX.Element
```

Container for a labeled statistic (label, value, description).

### `StatDescription`

```ts
StatDescription: (props: StatDescriptionProps) => JSX.Element
```

Renders supporting description text for a {@link Stat}.

### `StatLabel`

```ts
StatLabel: (props: StatLabelProps) => JSX.Element
```

Renders the label of a {@link Stat}.

### `StatValue`

```ts
StatValue: (props: StatValueProps) => JSX.Element
```

Renders the primary value of a {@link Stat}.

### `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`.

### `Tab`

```ts
Tab: (props: TabProps) => JSX.Element
```

A router-aware link styled as a tab, auto-marked active by matching the current route (see {@link NavLinkProps.match}).

### `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`.

### `TableBody`

```ts
TableBody: { (props: TableBodyProps): JSX.Element; (props: TableBodyAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableCaption`

```ts
TableCaption: { (props: TableCaptionProps): JSX.Element; (props: TableCaptionAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableCell`

```ts
TableCell: { (props: TableCellProps): JSX.Element; (props: TableCellAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableFoot`

```ts
TableFoot: { (props: TableFootProps): JSX.Element; (props: TableFootAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableHead`

```ts
TableHead: { (props: TableHeadProps): JSX.Element; (props: TableHeadAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableHeaderCell`

```ts
TableHeaderCell: { (props: TableHeaderCellProps): JSX.Element; (props: TableHeaderCellAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TableRow`

```ts
TableRow: { (props: TableRowProps): JSX.Element; (props: TableRowAsChildProps): JSX.Element; }
```

Renders a part of `table`.

Supports polymorphic rendering via `asChild`.

### `TabProps`

```ts
TabProps: LinkProps & NavLinkOwnProps
```

Props for the {@link Tab } component.

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

- `match`: match?: NavLinkMatch | undefined;

### `Tabs`

```ts
Tabs: { (props: TabsProps): JSX.Element; (props: TabsAsChildProps): JSX.Element; }
```

Renders a `<nav>` wrapper (or, with `asChild`, merges onto a child) for a set of {@link Tab} links.

### `TabsAsChildProps`

```ts
TabsAsChildProps: Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & TabsOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link Tabs } rendered with `asChild`, merging onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

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

### `TabsContent`

```ts
TabsContent: (props: CatalogComponentProps) => JSX.Element
```

Styling-only tabs-content slot; visibility and panel association are consumer-owned.

### `TabsList`

```ts
TabsList: (props: CatalogComponentProps) => JSX.Element
```

Styling-only tabs-list slot; it does not own tab selection, ARIA state, or keyboard behavior.

### `TabsProps`

```ts
TabsProps: Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> & TabsOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLElement>;
}
```

Props for {@link Tabs } rendered as its default `<nav>` element.

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

- `children`: children?: unknown;

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

### `TabsTrigger`

```ts
TabsTrigger: (props: CatalogComponentProps) => JSX.Element
```

Styling-only trigger button; it does not select or associate a tab panel.

### `Text`

```ts
Text: <TElement extends TextElement = "p">(props: TextProps<TElement>) => JSX.Element
```

Typography primitive: renders any {@link TextElement} (default `<p>`) and turns `size`/`tone`/`weight`/`font`/`numeric`/`wrap`/`truncate` into data attributes for CSS styling.

### `Textarea`

```ts
Textarea: { (props: TextareaElementProps): JSX.Element; (props: TextareaAsChildProps): JSX.Element; }
```

Renders the `textarea` part of `textarea`.

Supports polymorphic rendering via `asChild`.

### `TextElement`

```ts
TextElement: "p" | "span" | "div" | "strong"
```

Element tags {@link Text} can render as via its `as` prop.

### `TextFont`

```ts
TextFont: "body" | "mono"
```

Font family modifier for {@link Text}.

### `TextNumeric`

```ts
TextNumeric: "normal" | "tabular"
```

Numeric glyph variant (e.g. tabular figures) for {@link Text}.

### `TextProps`

```ts
TextProps: TextIntrinsicProps<TElement> & {
  as?: TElement;
  size?: TextSize;
  tone?: TextTone;
  weight?: TextWeight;
  font?: TextFont;
  numeric?: TextNumeric;
  wrap?: TextWrap;
  truncate?: boolean;
  children?: unknown;
  ref?: Ref<HTMLElement>;
}
```

Props for the {@link Text} component, specialized for a given {@link TextElement} `TElement`.

- `as`: as?: TElement | undefined;

- `children`: children?: unknown;

- `font`: font?: TextFont | undefined;

- `numeric`: numeric?: TextNumeric | undefined;

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

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

- `tone`: tone?: TextTone | undefined;

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

- `weight`: weight?: TextWeight | undefined;

- `wrap`: wrap?: TextWrap | undefined;

### `TextSize`

```ts
TextSize: "sm" | "md" | "lg"
```

Font size modifier for {@link Text}.

### `TextTone`

```ts
TextTone: "default" | "muted" | "subtle" | "inverse" | "success" | "warning" | "danger" | "info"
```

Color tone modifier for {@link Text}.

### `TextWeight`

```ts
TextWeight: "normal" | "medium" | "semibold" | "bold"
```

Font weight modifier for {@link Text}.

### `TextWrap`

```ts
TextWrap: "normal" | "nowrap" | "anywhere"
```

White-space wrapping behavior for {@link Text}.

### `theme`

```ts
theme: () => ThemeScopeValue
```

Reads the current {@link ThemeScopeValue} from the nearest enclosing {@link ThemeScope}.

### `ThemeName`

```ts
ThemeName: "light" | "dark" | "system" | CatThemeName | (string & {})
```

Any theme identifier accepted by {@link ThemeScope}: `"light"`, `"dark"`, `"system"`, a {@link CatThemeName}, or a custom string.

### `ThemeOption`

```ts
ThemeOption: {
  value: ThemeName;
  label: string;
}
```

A theme choice offered by {@link ThemePicker}/{@link ThemeToggle}: a `value` paired with a display `label`.

### `ThemePicker`

```ts
ThemePicker: (props: ThemePickerProps) => JSX.Element
```

A `<select>` bound to the current {@link theme}, listing `themes` (defaults to the enclosing scope's options).

### `ThemePickerProps`

```ts
ThemePickerProps: Omit<JSX.IntrinsicElements["select"], "children" | "value" | "defaultValue" | "onChange"> & {
  themes?: readonly ThemeOption[];
  label?: string;
}
```

Props for the {@link ThemePicker} component.

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

- `themes`: themes?: readonly ThemeOption[] | undefined;

### `ThemeScope`

```ts
ThemeScope: (props: ThemeScopeProps) => JSX.Element
```

Establishes a theme boundary: tracks the active theme (persisted to
`localStorage` under `storageKey` and synced across tabs/scopes), resolves
the OS `"system"` preference, and reflects the choice onto the DOM via
`data-theme`/`data-theme-choice` attributes. Nested scopes cooperate
through a shared coordinator so the deepest explicitly-set scope wins.

### `ThemeScopeProps`

```ts
ThemeScopeProps: {
  children?: unknown;
  defaultTheme?: ThemeName;
  themes?: readonly ThemeOption[];
  storageKey?: string;
}
```

Props for the {@link ThemeScope} component.

- `children`: children?: unknown;

- `defaultTheme`: defaultTheme?: ThemeName | undefined;

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

- `themes`: themes?: readonly ThemeOption[] | undefined;

### `ThemeScopeValue`

```ts
ThemeScopeValue: {
  theme: () => ThemeName;
  resolvedSystemTheme: () => "light" | "dark";
  setTheme: (theme: ThemeName) => void;
  themes: readonly ThemeOption[];
  storageKey: string;
}
```

Value read from {@link theme}: the active theme, its resolved system value, a setter, and the available theme options.

### `ThemeToggle`

```ts
ThemeToggle: (props: ThemeToggleProps) => JSX.Element
```

A button that cycles through `themes` (defaults to `["light", "dark"]`) on
press. Supports icon props per theme, or a function-as-children render
prop receiving {@link ThemeToggleRenderContext}.

### `ThemeToggleProps`

```ts
ThemeToggleProps: Omit<ButtonNativeProps, "children" | "onPress"> & {
  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);
  lightIcon?: unknown;
  darkIcon?: unknown;
  systemIcon?: unknown;
  themes?: readonly ThemeName[];
  onPress?: (event: PressEvent) => void;
}
```

Props for the {@link ThemeToggle} component.

- `children`: children?: unknown;

- `darkIcon`: darkIcon?: unknown;

- `lightIcon`: lightIcon?: unknown;

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

- `systemIcon`: systemIcon?: unknown;

- `themes`: themes?: readonly ThemeName[] | undefined;

### `ThemeToggleRenderContext`

```ts
ThemeToggleRenderContext: {
  theme: ThemeName;
  nextTheme: ThemeName;
}
```

Render context passed to a function-as-children {@link ThemeToggleProps.children}.

### `Toast`

```ts
Toast: (props: ToastProps) => JSX.Element | null
```

Toast registers a notification entry with the host and returns no DOM on
its own.

### `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`.

### `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`.

### `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`.

### `Toaster`

```ts
Toaster: (props: CatalogComponentProps) => JSX.Element
```

Renders the `sonner` part of the shadcn-compatible catalog primitives.

### `ToastHost`

```ts
ToastHost: (props: ToastHostProps) => JSX.Element
```

ToastHost owns the registry of active toast entries and the default
display duration for the family.

### `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`.

### `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`.

### `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>
```
````

### `ToggleGroup`

```ts
ToggleGroup: (props: ToggleGroupProps) => JSX.Element
```

Renders a part of `toggle-group`.

### `ToggleGroupItem`

```ts
ToggleGroupItem: { (props: ToggleGroupItemProps): JSX.Element; (props: ToggleGroupItemAsChildProps): JSX.Element; }
```

Renders a part of `toggle-group`.

Supports polymorphic rendering via `asChild`.

### `Toolbar`

```ts
Toolbar: (props: ToolbarProps) => JSX.Element
```

Titled toolbar row with an actions area, wrapping to a new line on small screens.

### `ToolbarProps`

```ts
ToolbarProps: Omit<BlockDivProps, "direction" | "rowFrom"> & {
  title: unknown;
  actions?: unknown;
  direction?: never;
  rowFrom?: never;
}
```

Props for the {@link Toolbar } component.

- `actions`: actions?: unknown;

- `direction`: direction?: undefined;

- `rowFrom`: rowFrom?: undefined;

- `title`: title: unknown;

### `Tooltip`

```ts
Tooltip: (props: TooltipProps) => JSX.Element
```

Renders a part of `tooltip`.

### `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`.

### `TooltipPortal`

```ts
TooltipPortal: (props: TooltipPortalProps) => JSX.Element | null
```

Renders a part of `tooltip`.

### `TooltipTrigger`

```ts
TooltipTrigger: { (props: TooltipTriggerProps): JSX.Element; (props: TooltipTriggerAsChildProps): JSX.Element; }
```

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

Supports polymorphic rendering via `asChild`.

### `Typography`

```ts
Typography: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography` part of the shadcn-compatible catalog primitives.

### `TypographyBlockquote`

```ts
TypographyBlockquote: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography-blockquote` part of the shadcn-compatible catalog primitives.

### `TypographyH1`

```ts
TypographyH1: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography-h1` part of the shadcn-compatible catalog primitives.

### `TypographyH2`

```ts
TypographyH2: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography-h2` part of the shadcn-compatible catalog primitives.

### `TypographyH3`

```ts
TypographyH3: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography-h3` part of the shadcn-compatible catalog primitives.

### `TypographyH4`

```ts
TypographyH4: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography-h4` part of the shadcn-compatible catalog primitives.

### `TypographyLead`

```ts
TypographyLead: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography-lead` part of the shadcn-compatible catalog primitives.

### `TypographyList`

```ts
TypographyList: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography-list` part of the shadcn-compatible catalog primitives.

### `TypographyMuted`

```ts
TypographyMuted: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography-muted` part of the shadcn-compatible catalog primitives.

### `TypographyP`

```ts
TypographyP: (props: CatalogComponentProps) => JSX.Element
```

Renders the `typography-p` part of the shadcn-compatible catalog primitives.

### `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.

### `VisuallyHidden`

```ts
VisuallyHidden: { (props: VisuallyHiddenSpanProps): JSX.Element; (props: VisuallyHiddenAsChildProps): JSX.Element; }
```

Renders a part of `visually-hidden`.

Supports polymorphic rendering via `asChild`.

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/presets/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/theme/index.md)