---
title: "@kovojs/ui"
description: Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.
order: 8
---

# @kovojs/ui

Generated from 44 public subpaths — 424 exports, 424 documented. Do not edit by hand.

## `@kovojs/ui/accordion`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/accordion.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/accordion.tsx)

### Values

#### `Accordion` {#accordion}

Renders the styled accordion primitive.

**Copyable example**

```ts
import { Accordion } from "@kovojs/ui/accordion";
const component = Accordion;
```

**Signature**

```ts
const Accordion = component({
  render(props: AccordionProps) {
    const attrs = accordionRootAttributes(accordionState(props));
    const styleAttrs = style.attrs(accordionStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `AccordionItem` {#accordionitem}

Renders the styled accordion item primitive.

**Copyable example**

```ts
import { AccordionItem } from "@kovojs/ui/accordion";
const component = AccordionItem;
```

**Signature**

```ts
const AccordionItem = component({
  render(props: AccordionItemProps) {
    const attrs = accordionItemAttributes(accordionItemState(props));
    const styleAttrs = style.attrs(accordionStyles.item, props.styles?.item);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        open={attrs.open}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `AccordionHeader` {#accordionheader}

Renders the styled accordion header primitive.

**Copyable example**

```ts
import { AccordionHeader } from "@kovojs/ui/accordion";
const component = AccordionHeader;
```

**Signature**

```ts
const AccordionHeader = component({
  render(props: AccordionHeaderProps) {
    const attrs = accordionHeaderAttributes({
      ...accordionItemState(props),
      ...(props.level === undefined ? {} : { level: props.level }),
    });
    const styleAttrs = style.attrs(accordionStyles.header, props.styles?.header);

    return (
      <h3
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-level={attrs['aria-level']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        role={attrs.role}
      >
        {props.children}
      </h3>
    );
  },
});
```

#### `AccordionTrigger` {#accordiontrigger}

Renders the styled accordion trigger primitive.

**Copyable example**

```ts
import { AccordionTrigger } from "@kovojs/ui/accordion";
const component = AccordionTrigger;
```

**Signature**

```ts
const AccordionTrigger = component({
  render(props: AccordionTriggerProps) {
    const attrs = accordionTriggerAttributes({
      ...accordionItemState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.triggerId === undefined ? {} : { triggerId: props.triggerId }),
    });
    const styleAttrs = style.attrs(accordionStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={attrs.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `AccordionContent` {#accordioncontent}

Renders the styled accordion content primitive.

**Copyable example**

```ts
import { AccordionContent } from "@kovojs/ui/accordion";
const component = AccordionContent;
```

**Signature**

```ts
const AccordionContent = component({
  render(props: AccordionContentProps) {
    const attrs = accordionContentAttributes({
      ...accordionItemState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.triggerId === undefined ? {} : { triggerId: props.triggerId }),
    });
    const styleAttrs = style.attrs(accordionStyles.content, props.styles?.content);
    const innerStyleAttrs = style.attrs(accordionStyles.contentInner);

    return (
      // Outer div is the grid wrapper that animates height; it keeps the id/role/
      // aria-labelledby/data-state/hidden contract and forwards the reactive
      // data-bind stamps via passThroughProps. The inner div carries the padded
      // content and mirrors data-state so its padding collapses with the row.
      // `hidden` stays on this element for a11y + the gallery contract: the closed
      // panel is correctly removed from the accessibility tree. The StyleX
      // `display:grid` (author rule) overrides the UA `[hidden]{display:none}`, so
      // the grid-rows 0fr<->1fr transition still fires while `hidden` stays true.
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
      >
        <div
          {...innerStyleAttrs}
          {...bindingProps(props, ['data-state'])}
          data-state={attrs['data-state']}
        >
          {props.children}
        </div>
      </div>
    );
  },
});
```

### Supporting types

#### `AccordionStyleOverrides` {#accordionstyleoverrides}

Style override slots accepted by the accordion components.

**Copyable example**

```ts
import type { AccordionStyleOverrides } from "@kovojs/ui/accordion";
const styles: AccordionStyleOverrides = {};
```

**Signature**

```ts
interface AccordionStyleOverrides {
  content?: style.StyleInput;
  header?: style.StyleInput;
  item?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `AccordionStateProps` {#accordionstateprops}

Shared state props for the accordion component family.

**Copyable example**

```ts
import type { AccordionStateProps } from "@kovojs/ui/accordion";
const state: AccordionStateProps = {};
```

**Signature**

```ts
interface AccordionStateProps {
  collapsible?: boolean;
  disabled?: boolean;
  orientation?: CollectionOrientation;
  type?: AccordionType;
  value?: AccordionValue;
}
```

#### `AccordionProps` {#accordionprops}

Props for the accordion component.

**Copyable example**

```ts
import type { AccordionProps } from "@kovojs/ui/accordion";
const props: AccordionProps = { children: 'Content' };
```

**Signature**

```ts
interface AccordionProps extends AccordionStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: AccordionStyleOverrides;
}
```

#### `AccordionItemProps` {#accordionitemprops}

Props for the accordion item component.

**Copyable example**

```ts
import type { AccordionItemProps } from "@kovojs/ui/accordion";
const props: AccordionItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface AccordionItemProps extends AccordionStateProps {
  children?: ComponentChild;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: AccordionStyleOverrides;
}
```

#### `AccordionHeaderProps` {#accordionheaderprops}

Props for the accordion header component.

**Copyable example**

```ts
import type { AccordionHeaderProps } from "@kovojs/ui/accordion";
const props: AccordionHeaderProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface AccordionHeaderProps extends AccordionItemProps {
  level?: number;
}
```

#### `AccordionTriggerProps` {#accordiontriggerprops}

Props for the accordion trigger component.

**Copyable example**

```ts
import type { AccordionTriggerProps } from "@kovojs/ui/accordion";
const props: AccordionTriggerProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface AccordionTriggerProps extends AccordionItemProps {
  contentId?: string;
  triggerId?: string;
}
```

#### `AccordionContentProps` {#accordioncontentprops}

Props for the accordion content component.

**Copyable example**

```ts
import type { AccordionContentProps } from "@kovojs/ui/accordion";
const props: AccordionContentProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface AccordionContentProps extends AccordionItemProps {
  contentId?: string;
  triggerId?: string;
}
```

## `@kovojs/ui/alert`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/alert.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/alert.tsx)

### Values

#### `Alert` {#alert}

Renders the styled alert primitive.

**Copyable example**

```ts
import { Alert } from "@kovojs/ui/alert";
const component = Alert;
```

**Signature**

```ts
const Alert = component({
  render(props: AlertProps) {
    const attrs = style.attrs(base.root, variants[props.variant ?? 'info'], props.style);
    const titleAttrs = style.attrs(base.title);
    const descriptionAttrs = style.attrs(base.description);

    return (
      <div {...attrs} role={props.role ?? 'status'}>
        {props.title === undefined ? '' : <strong {...titleAttrs}>{props.title}</strong>}
        <div {...descriptionAttrs}>{props.children}</div>
      </div>
    );
  },
});
```

### Supporting types

#### `AlertVariant` {#alertvariant}

Supported alert variant values.

**Copyable example**

```ts
import type { AlertVariant } from "@kovojs/ui/alert";
const value: AlertVariant = 'info';
```

**Signature**

```ts
type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
```

#### `AlertProps` {#alertprops}

Props for the alert component.

**Copyable example**

```ts
import type { AlertProps } from "@kovojs/ui/alert";
const props: AlertProps = { children: 'Content' };
```

**Signature**

```ts
interface AlertProps {
  children?: ComponentChild;
  role?: 'alert' | 'status';
  style?: style.StyleInput;
  title?: string;
  variant?: AlertVariant;
}
```

## `@kovojs/ui/alert-dialog`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/alert-dialog.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/alert-dialog.tsx)

### Values

#### `AlertDialog` {#alertdialog}

Renders the styled alert dialog primitive.

**Copyable example**

```ts
import { AlertDialog } from "@kovojs/ui/alert-dialog";
const component = AlertDialog;
```

**Signature**

```ts
const AlertDialog = component({
  render(props: AlertDialogProps) {
    const attrs = alertDialogRootAttributes(alertDialogState(props));
    const styleAttrs = style.attrs(alertDialogStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `AlertDialogTrigger` {#alertdialogtrigger}

Renders the styled alert dialog trigger primitive.

**Copyable example**

```ts
import { AlertDialogTrigger } from "@kovojs/ui/alert-dialog";
const component = AlertDialogTrigger;
```

**Signature**

```ts
const AlertDialogTrigger = component({
  render(props: AlertDialogTriggerProps) {
    const attrs = alertDialogTriggerAttributes({
      ...alertDialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(alertDialogStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `AlertDialogContent` {#alertdialogcontent}

Renders the styled alert dialog content primitive.

**Copyable example**

```ts
import { AlertDialogContent } from "@kovojs/ui/alert-dialog";
const component = AlertDialogContent;
```

**Signature**

```ts
const AlertDialogContent = component({
  render(props: AlertDialogContentProps) {
    const attrs = alertDialogContentAttributes({
      ...alertDialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.titleId === undefined ? {} : { titleId: props.titleId }),
    });
    const styleAttrs = style.attrs(alertDialogStyles.content, props.styles?.content);
    // Top-right "X" affordance. It closes through the native invoker exactly like
    // AlertDialogCancel (command='request-close'/commandfor=contentId); reusing the
    // cancel attributes keeps that wiring in one place. An accessible name is
    // required (rules/accessibility-conformance.md). Backdrop light-dismiss is
    // enabled via `closedby="any"` on the dialog below — it fires a `cancel` event
    // the call site already syncs (same path as Escape); the explicit X / Cancel /
    // Action affordances remain the primary choices.
    const closeAttrs = alertDialogCancelAttributes({
      ...alertDialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const closeStyleAttrs = style.attrs(alertDialogStyles.close, props.styles?.close);

    return (
      <dialog
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-modal={attrs['aria-modal']}
        closedby="any"
        data-state={attrs['data-state']}
        id={attrs.id}
        open={attrs.open}
        role={attrs.role}
      >
        <button
          {...closeStyleAttrs}
          aria-label="Close"
          command={closeAttrs.command}
          commandfor={closeAttrs.commandfor}
          data-disabled={closeAttrs['data-disabled']}
          data-state={closeAttrs['data-state']}
          disabled={closeAttrs.disabled}
          type={closeAttrs.type}
        >
          <X aria-hidden="true" />
        </button>
        {props.children}
      </dialog>
    );
  },
});
```

#### `AlertDialogCancel` {#alertdialogcancel}

Renders the styled alert dialog cancel primitive.

**Copyable example**

```ts
import { AlertDialogCancel } from "@kovojs/ui/alert-dialog";
const component = AlertDialogCancel;
```

**Signature**

```ts
const AlertDialogCancel = component({
  render(props: AlertDialogCancelProps) {
    const attrs = alertDialogCancelAttributes({
      ...alertDialogState(props),
      ...(props.autoFocus === undefined ? {} : { autoFocus: props.autoFocus }),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(alertDialogStyles.cancel, props.styles?.cancel);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        autofocus={attrs.autofocus}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-intent={attrs['data-intent']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children ?? 'Cancel'}
      </button>
    );
  },
});
```

#### `AlertDialogAction` {#alertdialogaction}

Renders the styled alert dialog action primitive.

**Copyable example**

```ts
import { AlertDialogAction } from "@kovojs/ui/alert-dialog";
const component = AlertDialogAction;
```

**Signature**

```ts
const AlertDialogAction = component({
  render(props: AlertDialogActionProps) {
    const attrs = alertDialogActionAttributes({
      ...alertDialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.intent === undefined ? {} : { intent: props.intent }),
    });
    const styleAttrs = style.attrs(alertDialogStyles.action, props.styles?.action);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-intent={attrs['data-intent']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `AlertDialogHeader` {#alertdialogheader}

Renders the styled alert dialog header primitive.

**Copyable example**

```ts
import { AlertDialogHeader } from "@kovojs/ui/alert-dialog";
const component = AlertDialogHeader;
```

**Signature**

```ts
const AlertDialogHeader = component({
  render(props: AlertDialogPartProps) {
    const styleAttrs = style.attrs(alertDialogStyles.header, props.styles?.header);
    return (
      <div {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </div>
    );
  },
});
```

#### `AlertDialogTitle` {#alertdialogtitle}

Renders the styled alert dialog title primitive.

**Copyable example**

```ts
import { AlertDialogTitle } from "@kovojs/ui/alert-dialog";
const component = AlertDialogTitle;
```

**Signature**

```ts
const AlertDialogTitle = component({
  render(props: AlertDialogPartProps) {
    const styleAttrs = style.attrs(alertDialogStyles.title, props.styles?.title);
    return (
      <h2 {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </h2>
    );
  },
});
```

#### `AlertDialogDescription` {#alertdialogdescription}

Renders the styled alert dialog description primitive.

**Copyable example**

```ts
import { AlertDialogDescription } from "@kovojs/ui/alert-dialog";
const component = AlertDialogDescription;
```

**Signature**

```ts
const AlertDialogDescription = component({
  render(props: AlertDialogPartProps) {
    const styleAttrs = style.attrs(alertDialogStyles.description, props.styles?.description);
    return (
      <p {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </p>
    );
  },
});
```

#### `AlertDialogFooter` {#alertdialogfooter}

Renders the styled alert dialog footer primitive.

**Copyable example**

```ts
import { AlertDialogFooter } from "@kovojs/ui/alert-dialog";
const component = AlertDialogFooter;
```

**Signature**

```ts
const AlertDialogFooter = component({
  render(props: AlertDialogPartProps) {
    const styleAttrs = style.attrs(alertDialogStyles.footer, props.styles?.footer);
    return (
      <div {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </div>
    );
  },
});
```

### Supporting types

#### `AlertDialogStyleOverrides` {#alertdialogstyleoverrides}

Style override slots accepted by the alert dialog components.

**Copyable example**

```ts
import type { AlertDialogStyleOverrides } from "@kovojs/ui/alert-dialog";
const styles: AlertDialogStyleOverrides = {};
```

**Signature**

```ts
interface AlertDialogStyleOverrides {
  action?: style.StyleInput;
  cancel?: style.StyleInput;
  close?: style.StyleInput;
  content?: style.StyleInput;
  description?: style.StyleInput;
  footer?: style.StyleInput;
  header?: style.StyleInput;
  root?: style.StyleInput;
  title?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `AlertDialogStateProps` {#alertdialogstateprops}

Shared state props for the alert dialog component family.

**Copyable example**

```ts
import type { AlertDialogStateProps } from "@kovojs/ui/alert-dialog";
const state: AlertDialogStateProps = {};
```

**Signature**

```ts
interface AlertDialogStateProps {
  disabled?: boolean;
  open?: boolean;
}
```

#### `AlertDialogProps` {#alertdialogprops}

Props for the alert dialog component.

**Copyable example**

```ts
import type { AlertDialogProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogProps = { children: 'Content' };
```

**Signature**

```ts
interface AlertDialogProps extends AlertDialogStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: AlertDialogStyleOverrides;
}
```

#### `AlertDialogTriggerProps` {#alertdialogtriggerprops}

Props for the alert dialog trigger component.

**Copyable example**

```ts
import type { AlertDialogTriggerProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface AlertDialogTriggerProps extends AlertDialogStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: AlertDialogStyleOverrides;
}
```

#### `AlertDialogContentProps` {#alertdialogcontentprops}

Props for the alert dialog content component.

**Copyable example**

```ts
import type { AlertDialogContentProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogContentProps = { children: 'Content' };
```

**Signature**

```ts
interface AlertDialogContentProps extends AlertDialogStateProps {
  children?: ComponentChild;
  contentId?: string;
  descriptionId?: string;
  styles?: AlertDialogStyleOverrides;
  titleId?: string;
}
```

#### `AlertDialogCancelProps` {#alertdialogcancelprops}

Props for the alert dialog cancel component.

**Copyable example**

```ts
import type { AlertDialogCancelProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogCancelProps = { children: 'Content' };
```

**Signature**

```ts
interface AlertDialogCancelProps extends AlertDialogStateProps {
  autoFocus?: boolean;
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: AlertDialogStyleOverrides;
}
```

#### `AlertDialogActionProps` {#alertdialogactionprops}

Props for the alert dialog action component.

**Copyable example**

```ts
import type { AlertDialogActionProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogActionProps = { children: 'Content' };
```

**Signature**

```ts
interface AlertDialogActionProps extends AlertDialogStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  intent?: AlertDialogActionIntent;
  styles?: AlertDialogStyleOverrides;
}
```

#### `AlertDialogPartProps` {#alertdialogpartprops}

Props for the alert dialog part component.

**Copyable example**

```ts
import type { AlertDialogPartProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogPartProps = { children: 'Content' };
```

**Signature**

```ts
interface AlertDialogPartProps {
  children?: ComponentChild;
  id?: string;
  styles?: AlertDialogStyleOverrides;
}
```

## `@kovojs/ui/autocomplete`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/autocomplete.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/autocomplete.tsx)

### Values

#### `Autocomplete` {#autocomplete}

Renders the styled autocomplete primitive.

**Copyable example**

```ts
import { Autocomplete } from "@kovojs/ui/autocomplete";
const component = Autocomplete;
```

**Signature**

```ts
const Autocomplete = component({
  render(props: AutocompleteProps) {
    const attrs = autocompleteRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `AutocompleteInput` {#autocompleteinput}

Renders the styled autocomplete input primitive.

**Copyable example**

```ts
import { AutocompleteInput } from "@kovojs/ui/autocomplete";
const component = AutocompleteInput;
```

**Signature**

```ts
const AutocompleteInput = component({
  render(props: AutocompleteInputProps) {
    const attrs = autocompleteInputAttributes({
      ...(props.autocomplete === undefined ? {} : { autocomplete: props.autocomplete }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.input, props.styles?.input);

    return (
      <input
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-activedescendant={attrs['aria-activedescendant']}
        aria-autocomplete={attrs['aria-autocomplete']}
        aria-controls={attrs['aria-controls']}
        aria-describedby={attrs['aria-describedby']}
        aria-expanded={attrs['aria-expanded']}
        aria-invalid={attrs['aria-invalid']}
        aria-labelledby={attrs['aria-labelledby']}
        autocomplete={attrs.autocomplete}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        list={attrs.list}
        name={attrs.name}
        placeholder={attrs.placeholder}
        required={attrs.required}
        role={attrs.role}
        type={attrs.type}
        value={attrs.value}
      />
    );
  },
});
```

#### `AutocompleteList` {#autocompletelist}

Renders the styled autocomplete list primitive.

**Copyable example**

```ts
import { AutocompleteList } from "@kovojs/ui/autocomplete";
const component = AutocompleteList;
```

**Signature**

```ts
const AutocompleteList = component({
  render(props: AutocompleteListProps) {
    const attrs = autocompleteListAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.list, props.styles?.list);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `AutocompleteOption` {#autocompleteoption}

Renders the styled autocomplete option primitive.

**Copyable example**

```ts
import { AutocompleteOption } from "@kovojs/ui/autocomplete";
const component = AutocompleteOption;
```

**Signature**

```ts
const AutocompleteOption = component({
  render(props: AutocompleteOptionProps) {
    const attrs = autocompleteOptionAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.option, props.styles?.option);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-disabled={attrs['aria-disabled']}
        aria-selected={attrs['aria-selected']}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        id={attrs.id}
        label={attrs.label}
        role={attrs.role}
        value={attrs.value}
      >
        {props.children ?? props.itemLabel ?? props.itemValue ?? ''}
      </div>
    );
  },
});
```

#### `AutocompleteValue` {#autocompletevalue}

Renders the styled autocomplete value primitive.

**Copyable example**

```ts
import { AutocompleteValue } from "@kovojs/ui/autocomplete";
const component = AutocompleteValue;
```

**Signature**

```ts
const AutocompleteValue = component({
  render(props: AutocompleteValueProps) {
    const attrs = autocompleteValueAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.value, props.styles?.value);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        data-placeholder={attrs['data-placeholder']}
        id={attrs.id}
      >
        {autocompleteValueText(props)}
      </span>
    );
  },
});
```

### Supporting types

#### `AutocompleteStyleOverrides` {#autocompletestyleoverrides}

Style override slots accepted by the autocomplete components.

**Copyable example**

```ts
import type { AutocompleteStyleOverrides } from "@kovojs/ui/autocomplete";
const styles: AutocompleteStyleOverrides = {};
```

**Signature**

```ts
interface AutocompleteStyleOverrides {
  input?: style.StyleInput;
  list?: style.StyleInput;
  option?: style.StyleInput;
  root?: style.StyleInput;
  value?: style.StyleInput;
}
```

#### `AutocompleteStateProps` {#autocompletestateprops}

Shared state props for the autocomplete component family.

**Copyable example**

```ts
import type { AutocompleteStateProps } from "@kovojs/ui/autocomplete";
const state: AutocompleteStateProps = {};
```

**Signature**

```ts
interface AutocompleteStateProps {
  disabled?: boolean;
  form?: string;
  highlightedValue?: string;
  inputValue?: string;
  invalid?: boolean;
  items?: readonly HeadlessAutocompleteItem[];
  listId?: string;
  name?: string;
  open?: boolean;
  placeholder?: string;
  required?: boolean;
  value?: string;
}
```

#### `AutocompleteProps` {#autocompleteprops}

Props for the autocomplete component.

**Copyable example**

```ts
import type { AutocompleteProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteProps = { children: 'Content' };
```

**Signature**

```ts
interface AutocompleteProps extends AutocompleteStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: AutocompleteStyleOverrides;
}
```

#### `AutocompleteInputProps` {#autocompleteinputprops}

Props for the autocomplete input component.

**Copyable example**

```ts
import type { AutocompleteInputProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteInputProps = {};
```

**Signature**

```ts
interface AutocompleteInputProps extends AutocompleteStateProps {
  autocomplete?: string;
  descriptionId?: string;
  errorId?: string;
  id?: string;
  labelledBy?: string;
  styles?: AutocompleteStyleOverrides;
}
```

#### `AutocompleteListProps` {#autocompletelistprops}

Props for the autocomplete list component.

**Copyable example**

```ts
import type { AutocompleteListProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteListProps = { children: 'Content' };
```

**Signature**

```ts
interface AutocompleteListProps extends AutocompleteStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: AutocompleteStyleOverrides;
}
```

#### `AutocompleteOptionProps` {#autocompleteoptionprops}

Props for the autocomplete option component.

**Copyable example**

```ts
import type { AutocompleteOptionProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteOptionProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface AutocompleteOptionProps extends AutocompleteStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemLabel?: string;
  itemValue: string;
  styles?: AutocompleteStyleOverrides;
}
```

#### `AutocompleteValueProps` {#autocompletevalueprops}

Props for the autocomplete value component.

**Copyable example**

```ts
import type { AutocompleteValueProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteValueProps = {};
```

**Signature**

```ts
interface AutocompleteValueProps extends AutocompleteStateProps {
  id?: string;
  styles?: AutocompleteStyleOverrides;
}
```

## `@kovojs/ui/avatar`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/avatar.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/avatar.tsx)

### Values

#### `Avatar` {#avatar}

Renders the styled avatar primitive.

**Copyable example**

```ts
import { Avatar } from "@kovojs/ui/avatar";
const component = Avatar;
```

**Signature**

```ts
const Avatar = component({
  render(props: AvatarProps) {
    const attrs = avatarRootAttributes({
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.src === undefined ? {} : { src: props.src }),
      ...(props.status === undefined ? {} : { status: props.status }),
    });
    const styleAttrs = style.attrs(avatarStyles.root, props.styles?.root);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-label={attrs['aria-label']}
        data-state={attrs['data-state']}
        id={props.id}
        role={attrs.role}
      >
        {props.children}
      </span>
    );
  },
});
```

#### `AvatarImage` {#avatarimage}

Renders the styled avatar image primitive.

**Copyable example**

```ts
import { AvatarImage } from "@kovojs/ui/avatar";
const component = AvatarImage;
```

**Signature**

```ts
const AvatarImage = component({
  render(props: AvatarImageProps) {
    const attrs = avatarImageAttributes({
      alt: props.alt,
      ...(props.decoding === undefined ? {} : { decoding: props.decoding }),
      ...(props.loading === undefined ? {} : { loading: props.loading }),
      referrerPolicy: 'no-referrer',
      ...(props.sizes === undefined ? {} : { sizes: props.sizes }),
      src: props.src,
      ...(props.status === undefined ? {} : { status: props.status }),
    });
    return (
      <img
        {...styleAttributes(avatarStyles.image, props.styles?.image)}
        alt={attrs.alt}
        data-state={attrs['data-state']}
        decoding={attrs.decoding}
        hidden={attrs.hidden}
        loading={attrs.loading}
        referrerpolicy="no-referrer"
        sizes={attrs.sizes}
        src={trustedUrl(props.src, {
          reason: 'caller-selected avatar image',
          source: '@kovojs/ui/avatar',
        })}
      />
    );
  },
});
```

#### `AvatarFallback` {#avatarfallback}

Renders the styled avatar fallback primitive.

**Copyable example**

```ts
import { AvatarFallback } from "@kovojs/ui/avatar";
const component = AvatarFallback;
```

**Signature**

```ts
const AvatarFallback = component({
  render(props: AvatarFallbackProps) {
    const attrs = avatarFallbackAttributes({
      ...(props.delayMs === undefined ? {} : { delayMs: props.delayMs }),
      ...(props.src === undefined ? {} : { src: props.src }),
      ...(props.status === undefined ? {} : { status: props.status }),
    });
    const styleAttrs = style.attrs(avatarStyles.fallback, props.styles?.fallback);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        data-delay={attrs['data-delay']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
      >
        {props.children}
      </span>
    );
  },
});
```

### Supporting types

#### `AvatarStyleOverrides` {#avatarstyleoverrides}

Style override slots accepted by the avatar components.

**Copyable example**

```ts
import type { AvatarStyleOverrides } from "@kovojs/ui/avatar";
const styles: AvatarStyleOverrides = {};
```

**Signature**

```ts
interface AvatarStyleOverrides {
  fallback?: style.StyleInput;
  image?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `AvatarStateProps` {#avatarstateprops}

Shared state props for the avatar component family.

**Copyable example**

```ts
import type { AvatarStateProps } from "@kovojs/ui/avatar";
const state: AvatarStateProps = {};
```

**Signature**

```ts
interface AvatarStateProps {
  src?: string;
  status?: AvatarImageStatus;
}
```

#### `AvatarProps` {#avatarprops}

Props for the avatar component.

**Copyable example**

```ts
import type { AvatarProps } from "@kovojs/ui/avatar";
const props: AvatarProps = { children: 'Content' };
```

**Signature**

```ts
interface AvatarProps extends AvatarStateProps {
  children?: ComponentChild;
  id?: string;
  label?: string;
  styles?: AvatarStyleOverrides;
}
```

#### `AvatarImageProps` {#avatarimageprops}

Props for the avatar image component.

**Copyable example**

```ts
import type { AvatarImageProps } from "@kovojs/ui/avatar";
const props: AvatarImageProps = { alt: 'Profile photo', src: '/avatar.png' };
```

**Signature**

```ts
interface AvatarImageProps extends AvatarStateProps {
  alt: string;
  decoding?: 'async' | 'auto' | 'sync';
  loading?: 'eager' | 'lazy';
  sizes?: string;
  src: string;
  styles?: AvatarStyleOverrides;
}
```

#### `AvatarFallbackProps` {#avatarfallbackprops}

Props for the avatar fallback component.

**Copyable example**

```ts
import type { AvatarFallbackProps } from "@kovojs/ui/avatar";
const props: AvatarFallbackProps = { children: 'Content' };
```

**Signature**

```ts
interface AvatarFallbackProps extends AvatarStateProps {
  children?: ComponentChild;
  delayMs?: number;
  styles?: AvatarStyleOverrides;
}
```

## `@kovojs/ui/badge`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/badge.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/badge.tsx)

### Values

#### `Badge` {#badge}

Renders the styled badge primitive.

**Copyable example**

```ts
import { Badge } from "@kovojs/ui/badge";
const component = Badge;
```

**Signature**

```ts
const Badge = component({
  render(props: BadgeProps) {
    const attrs = style.attrs(base.root, variants[props.variant ?? 'neutral'], props.style);

    // SPEC.md §4.5/§5.2: the @kovojs/server JSX runtime escapes scalar text
    // children exactly once, so pass the raw value — pre-escaping here would
    // double-escape (`AT&T` → `AT&amp;amp;T`).
    return <span {...attrs}>{props.children ?? ''}</span>;
  },
});
```

### Supporting types

#### `BadgeVariant` {#badgevariant}

Supported badge variant values.

**Copyable example**

```ts
import type { BadgeVariant } from "@kovojs/ui/badge";
const value: BadgeVariant = 'neutral';
```

**Signature**

```ts
type BadgeVariant = 'neutral' | 'success' | 'warning' | 'destructive' | 'outline';
```

#### `BadgeProps` {#badgeprops}

Props for the badge component.

**Copyable example**

```ts
import type { BadgeProps } from "@kovojs/ui/badge";
const props: BadgeProps = { children: 'Content' };
```

**Signature**

```ts
interface BadgeProps {
  children?: ComponentChild;
  style?: style.StyleInput;
  variant?: BadgeVariant;
}
```

## `@kovojs/ui/breadcrumb`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/breadcrumb.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/breadcrumb.tsx)

### Values

#### `Breadcrumb` {#breadcrumb}

Renders the styled breadcrumb primitive.

**Copyable example**

```ts
import { Breadcrumb } from "@kovojs/ui/breadcrumb";
const component = Breadcrumb;
```

**Signature**

```ts
const Breadcrumb = component({
  render(props: BreadcrumbProps) {
    const rootAttrs = style.attrs(breadcrumbStyles.root, props.styles?.root);
    const listAttrs = style.attrs(breadcrumbStyles.list, props.styles?.list);

    return (
      <nav {...rootAttrs} aria-label={props.label ?? 'Breadcrumb'}>
        <ol {...listAttrs}>{props.children}</ol>
      </nav>
    );
  },
});
```

#### `BreadcrumbItem` {#breadcrumbitem}

Renders the styled breadcrumb item primitive.

**Copyable example**

```ts
import { BreadcrumbItem } from "@kovojs/ui/breadcrumb";
const component = BreadcrumbItem;
```

**Signature**

```ts
const BreadcrumbItem = component({
  render(props: BreadcrumbPartProps) {
    const attrs = style.attrs(breadcrumbStyles.item, props.styles?.item);

    return <li {...attrs}>{props.children}</li>;
  },
});
```

#### `BreadcrumbLink` {#breadcrumblink}

Renders the styled breadcrumb link primitive.

**Copyable example**

```ts
import { BreadcrumbLink } from "@kovojs/ui/breadcrumb";
const component = BreadcrumbLink;
```

**Signature**

```ts
const BreadcrumbLink = component({
  render(props: BreadcrumbLinkProps) {
    const current = props.current === true;

    return (
      <a
        {...styleAttributes(
          current ? breadcrumbStyles.current : breadcrumbStyles.link,
          current ? props.styles?.current : props.styles?.link,
        )}
        {...passThroughProps(props)}
        aria-current={current ? 'page' : undefined}
        // SECURITY_FINDINGS.md H3: route the caller href through safeUrl so a
        // `javascript:`/`data:` scheme is neutralized; keep the existing
        // undefined semantics (omit href entirely when there is none / current).
        href={current || props.href === undefined ? undefined : safeUrl(props.href)}
      >
        {props.children}
      </a>
    );
  },
});
```

#### `BreadcrumbSeparator` {#breadcrumbseparator}

Renders the styled breadcrumb separator primitive.

**Copyable example**

```ts
import { BreadcrumbSeparator } from "@kovojs/ui/breadcrumb";
const component = BreadcrumbSeparator;
```

**Signature**

```ts
const BreadcrumbSeparator = component({
  render(props: BreadcrumbPartProps) {
    const attrs = separatorRootAttributes();
    const hasText = props.children !== undefined;
    const styleAttrs = style.attrs(
      breadcrumbStyles.separator,
      hasText ? breadcrumbStyles.separatorText : undefined,
      props.styles?.separator,
    );

    return (
      <li
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-hidden="true"
        data-orientation={attrs['data-orientation']}
        role={attrs.role}
      >
        {props.children}
      </li>
    );
  },
});
```

### Supporting types

#### `BreadcrumbStyleOverrides` {#breadcrumbstyleoverrides}

Style override slots accepted by the breadcrumb components.

**Copyable example**

```ts
import type { BreadcrumbStyleOverrides } from "@kovojs/ui/breadcrumb";
const styles: BreadcrumbStyleOverrides = {};
```

**Signature**

```ts
interface BreadcrumbStyleOverrides {
  current?: style.StyleInput;
  item?: style.StyleInput;
  link?: style.StyleInput;
  list?: style.StyleInput;
  root?: style.StyleInput;
  separator?: style.StyleInput;
}
```

#### `BreadcrumbProps` {#breadcrumbprops}

Props for the breadcrumb component.

**Copyable example**

```ts
import type { BreadcrumbProps } from "@kovojs/ui/breadcrumb";
const props: BreadcrumbProps = { children: 'Content' };
```

**Signature**

```ts
interface BreadcrumbProps {
  children?: ComponentChild;
  label?: string;
  styles?: BreadcrumbStyleOverrides;
}
```

#### `BreadcrumbPartProps` {#breadcrumbpartprops}

Props for the breadcrumb part component.

**Copyable example**

```ts
import type { BreadcrumbPartProps } from "@kovojs/ui/breadcrumb";
const props: BreadcrumbPartProps = { children: 'Content' };
```

**Signature**

```ts
interface BreadcrumbPartProps {
  children?: ComponentChild;
  styles?: BreadcrumbStyleOverrides;
}
```

#### `BreadcrumbLinkProps` {#breadcrumblinkprops}

Props for the breadcrumb link component.

**Copyable example**

```ts
import type { BreadcrumbLinkProps } from "@kovojs/ui/breadcrumb";
const props: BreadcrumbLinkProps = { children: 'Content' };
```

**Signature**

```ts
interface BreadcrumbLinkProps extends BreadcrumbPartProps {
  current?: boolean;
  href?: string | TrustedUrl;
}
```

## `@kovojs/ui/button`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/button.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/button.tsx)

### Values

#### `Button` {#button}

Renders the styled button primitive.

**Copyable example**

```ts
import { Button } from "@kovojs/ui/button";
const component = Button;
```

**Signature**

```ts
const Button = component({
  render(props: ButtonProps) {
    const attrs = style.attrs(
      base.root,
      sizes[props.size ?? 'md'],
      variants[props.variant ?? 'primary'],
      props.style,
    );

    return (
      <button
        {...attrs}
        {...passThroughProps(props)}
        disabled={props.disabled}
        form={props.form}
        name={props.name}
        type={props.type ?? 'button'}
        value={props.value}
      >
        {props.children}
      </button>
    );
  },
});
```

### Supporting types

#### `ButtonVariant` {#buttonvariant}

Supported button variant values.

**Copyable example**

```ts
import type { ButtonVariant } from "@kovojs/ui/button";
const value: ButtonVariant = 'primary';
```

**Signature**

```ts
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline';
```

#### `ButtonSize` {#buttonsize}

Supported button size values.

**Copyable example**

```ts
import type { ButtonSize } from "@kovojs/ui/button";
const value: ButtonSize = 'md';
```

**Signature**

```ts
type ButtonSize = 'sm' | 'md';
```

#### `ButtonProps` {#buttonprops}

Props for the button component.

**Copyable example**

```ts
import type { ButtonProps } from "@kovojs/ui/button";
const props: ButtonProps = { children: 'Content' };
```

**Signature**

```ts
interface ButtonProps {
  children?: ComponentChild;
  disabled?: boolean;
  form?: string;
  name?: string;
  size?: ButtonSize;
  style?: style.StyleInput;
  type?: 'button' | 'submit' | 'reset';
  value?: string;
  variant?: ButtonVariant;
}
```

## `@kovojs/ui/card`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/card.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/card.tsx)

### Values

#### `Card` {#card}

Renders the styled card primitive.

**Copyable example**

```ts
import { Card } from "@kovojs/ui/card";
const component = Card;
```

**Signature**

```ts
const Card = component({
  render(props: CardProps) {
    const attrs = style.attrs(cardStyles.root, props.style);

    return <section {...attrs}>{props.children}</section>;
  },
});
```

#### `CardHeader` {#cardheader}

Groups a card title and description.

**Copyable example**

```ts
import { CardHeader } from "@kovojs/ui/card";
const component = CardHeader;
```

**Signature**

```ts
const CardHeader = component({
  render(props: CardHeaderProps) {
    return <div {...style.attrs(cardStyles.header, props.style)}>{props.children}</div>;
  },
});
```

#### `CardTitle` {#cardtitle}

Renders the card's heading.

**Copyable example**

```ts
import { CardTitle } from "@kovojs/ui/card";
const component = CardTitle;
```

**Signature**

```ts
const CardTitle = component({
  render(props: CardTitleProps) {
    return <h3 {...style.attrs(cardStyles.title, props.style)}>{props.children}</h3>;
  },
});
```

#### `CardDescription` {#carddescription}

Renders supporting text for the card title.

**Copyable example**

```ts
import { CardDescription } from "@kovojs/ui/card";
const component = CardDescription;
```

**Signature**

```ts
const CardDescription = component({
  render(props: CardDescriptionProps) {
    return <p {...style.attrs(cardStyles.description, props.style)}>{props.children}</p>;
  },
});
```

#### `CardContent` {#cardcontent}

Renders the card's primary content region.

**Copyable example**

```ts
import { CardContent } from "@kovojs/ui/card";
const component = CardContent;
```

**Signature**

```ts
const CardContent = component({
  render(props: CardContentProps) {
    return <div {...style.attrs(cardStyles.content, props.style)}>{props.children}</div>;
  },
});
```

#### `CardFooter` {#cardfooter}

Renders trailing card actions or metadata.

**Copyable example**

```ts
import { CardFooter } from "@kovojs/ui/card";
const component = CardFooter;
```

**Signature**

```ts
const CardFooter = component({
  render(props: CardFooterProps) {
    return <footer {...style.attrs(cardStyles.footer, props.style)}>{props.children}</footer>;
  },
});
```

### Supporting types

#### `CardProps` {#cardprops}

Props for the card component.

**Copyable example**

```ts
import type { CardProps } from "@kovojs/ui/card";
const props: CardProps = { children: 'Content' };
```

**Signature**

```ts
interface CardProps {
  children?: ComponentChild;
  style?: style.StyleInput;
}
```

#### `CardHeaderProps` {#cardheaderprops}

Props for the structural header region of a {@link Card}.

**Signature**

```ts
interface CardHeaderProps extends CardProps {}
```

#### `CardTitleProps` {#cardtitleprops}

Props for the heading rendered inside a {@link CardHeader}.

**Signature**

```ts
interface CardTitleProps extends CardProps {}
```

#### `CardDescriptionProps` {#carddescriptionprops}

Props for supporting copy rendered inside a {@link CardHeader}.

**Signature**

```ts
interface CardDescriptionProps extends CardProps {}
```

#### `CardContentProps` {#cardcontentprops}

Props for the primary content region of a {@link Card}.

**Signature**

```ts
interface CardContentProps extends CardProps {}
```

#### `CardFooterProps` {#cardfooterprops}

Props for the trailing actions or metadata region of a {@link Card}.

**Signature**

```ts
interface CardFooterProps extends CardProps {}
```

## `@kovojs/ui/checkbox`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/checkbox.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/checkbox.tsx)

### Values

#### `Checkbox` {#checkbox}

Renders the styled checkbox primitive.

**Copyable example**

```ts
import { Checkbox } from "@kovojs/ui/checkbox";
const component = Checkbox;
```

**Signature**

```ts
const Checkbox = component({
  render(props: CheckboxProps) {
    const attrs = checkboxRootAttributes({
      checked: props.checked ?? false,
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const rootStyleAttrs = style.attrs(checkboxStyles.root, props.styles?.root);
    const inputStyleAttrs = style.attrs(checkboxStyles.input, props.styles?.input);
    const boxStyleAttrs = style.attrs(checkboxStyles.box, props.styles?.box);

    return (
      <label
        {...rootStyleAttrs}
        {...passThroughProps(props, { events: false, bindings: false })}
        {...bindingProps(props, ['data-state'])}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
      >
        <span
          {...boxStyleAttrs}
          {...bindingProps(props, ['data-state'])}
          data-state={attrs['data-state']}
        >
          <input
            {...inputStyleAttrs}
            {...passThroughProps(props, { island: false })}
            aria-checked={attrs['aria-checked']}
            aria-describedby={props.describedBy}
            aria-labelledby={props.labelledBy}
            checked={attrs.checked}
            data-disabled={attrs['data-disabled']}
            data-state={attrs['data-state']}
            disabled={attrs.disabled}
            form={props.form}
            id={props.id}
            name={attrs.name}
            required={attrs.required}
            type={attrs.type}
            value={attrs.value}
          />
        </span>
        {props.children}
      </label>
    );
  },
});
```

### Supporting types

#### `CheckboxStyleOverrides` {#checkboxstyleoverrides}

Style override slots accepted by the checkbox components.

**Copyable example**

```ts
import type { CheckboxStyleOverrides } from "@kovojs/ui/checkbox";
const styles: CheckboxStyleOverrides = {};
```

**Signature**

```ts
interface CheckboxStyleOverrides {
  box?: style.StyleInput;
  input?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `CheckboxProps` {#checkboxprops}

Props for the checkbox component.

**Copyable example**

```ts
import type { CheckboxProps } from "@kovojs/ui/checkbox";
const props: CheckboxProps = { children: 'Content' };
```

**Signature**

```ts
interface CheckboxProps {
  describedBy?: string;
  checked?: CheckboxCheckedState;
  children?: ComponentChild;
  disabled?: boolean;
  form?: string;
  id?: string;
  labelledBy?: string;
  name?: string;
  required?: boolean;
  styles?: CheckboxStyleOverrides;
  value?: string;
}
```

## `@kovojs/ui/checkbox-group`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/checkbox-group.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/checkbox-group.tsx)

### Values

#### `CheckboxGroup` {#checkboxgroup}

Renders the styled checkbox group primitive.

**Copyable example**

```ts
import { CheckboxGroup } from "@kovojs/ui/checkbox-group";
const component = CheckboxGroup;
```

**Signature**

```ts
const CheckboxGroup = component({
  render(props: CheckboxGroupProps) {
    const attrs = checkboxGroupRootAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(checkboxGroupStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-invalid={attrs['aria-invalid']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-required={attrs['aria-required']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-orientation={attrs['data-orientation']}
        data-required={attrs['data-required']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `CheckboxGroupItem` {#checkboxgroupitem}

Renders the styled checkbox group item primitive.

**Copyable example**

```ts
import { CheckboxGroupItem } from "@kovojs/ui/checkbox-group";
const component = CheckboxGroupItem;
```

**Signature**

```ts
const CheckboxGroupItem = component({
  render(props: CheckboxGroupItemProps) {
    const attrs = checkboxGroupItemAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(checkboxGroupStyles.item, props.styles?.item);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `CheckboxGroupControl` {#checkboxgroupcontrol}

Renders the styled checkbox group control primitive.

**Copyable example**

```ts
import { CheckboxGroupControl } from "@kovojs/ui/checkbox-group";
const component = CheckboxGroupControl;
```

**Signature**

```ts
const CheckboxGroupControl = component({
  render(props: CheckboxGroupControlProps) {
    const attrs = checkboxGroupControlAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
      ...(props.controlId === undefined ? {} : { controlId: props.controlId }),
    });
    const boxStyleAttrs = style.attrs(checkboxGroupStyles.control, props.styles?.control);
    const inputStyleAttrs = style.attrs(checkboxGroupStyles.controlInput);

    // Custom box matching the standalone Checkbox (checkbox.tsx): a decorative
    // `span` paints the teal fill + check glyph driven by data-state, wrapping a
    // visually-hidden native input that remains the real checkbox — semantics,
    // form state, events, island ownership, and the single click/focus/tab
    // target. bindingProps forwards only the data-state binding stamp so the box
    // re-renders its fill client-side without becoming a second tab stop or
    // splitting the island scope (SPEC.md §4.6).
    return (
      <span
        {...boxStyleAttrs}
        {...bindingProps(props, ['data-state'])}
        data-state={attrs['data-state']}
      >
        <input
          {...inputStyleAttrs}
          {...passThroughProps(props)}
          aria-checked={attrs['aria-checked']}
          checked={attrs.checked}
          data-disabled={attrs['data-disabled']}
          data-state={attrs['data-state']}
          disabled={attrs.disabled}
          form={attrs.form}
          id={attrs.id}
          name={attrs.name}
          required={attrs.required}
          tabIndex={attrs.tabIndex}
          type={attrs.type}
          value={attrs.value}
        />
      </span>
    );
  },
});
```

#### `CheckboxGroupLabel` {#checkboxgrouplabel}

Renders the styled checkbox group label primitive.

**Copyable example**

```ts
import { CheckboxGroupLabel } from "@kovojs/ui/checkbox-group";
const component = CheckboxGroupLabel;
```

**Signature**

```ts
const CheckboxGroupLabel = component({
  render(props: CheckboxGroupLabelProps) {
    const attrs = checkboxGroupLabelAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
      ...(props.controlId === undefined ? {} : { controlId: props.controlId }),
    });
    const styleAttrs = style.attrs(checkboxGroupStyles.label, props.styles?.label);

    return (
      <label
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        for={attrs.for}
        id={attrs.id}
      >
        {props.children}
      </label>
    );
  },
});
```

### Supporting types

#### `CheckboxGroupStyleOverrides` {#checkboxgroupstyleoverrides}

Style override slots accepted by the checkbox group components.

**Copyable example**

```ts
import type { CheckboxGroupStyleOverrides } from "@kovojs/ui/checkbox-group";
const styles: CheckboxGroupStyleOverrides = {};
```

**Signature**

```ts
interface CheckboxGroupStyleOverrides {
  control?: style.StyleInput;
  item?: style.StyleInput;
  label?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `CheckboxGroupStateProps` {#checkboxgroupstateprops}

Shared state props for the checkbox group component family.

**Copyable example**

```ts
import type { CheckboxGroupStateProps } from "@kovojs/ui/checkbox-group";
const state: CheckboxGroupStateProps = {};
```

**Signature**

```ts
interface CheckboxGroupStateProps {
  activeValue?: string;
  descriptionId?: string;
  dir?: TextDirection;
  disabled?: boolean;
  errorId?: string;
  form?: string;
  invalid?: boolean;
  items?: readonly HeadlessCheckboxGroupItem[];
  loop?: boolean;
  name?: string;
  orientation?: CollectionOrientation;
  required?: boolean;
  value?: readonly string[];
}
```

#### `CheckboxGroupProps` {#checkboxgroupprops}

Props for the checkbox group component.

**Copyable example**

```ts
import type { CheckboxGroupProps } from "@kovojs/ui/checkbox-group";
const props: CheckboxGroupProps = { children: 'Content' };
```

**Signature**

```ts
interface CheckboxGroupProps extends CheckboxGroupStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: CheckboxGroupStyleOverrides;
}
```

#### `CheckboxGroupItemProps` {#checkboxgroupitemprops}

Props for the checkbox group item component.

**Copyable example**

```ts
import type { CheckboxGroupItemProps } from "@kovojs/ui/checkbox-group";
const props: CheckboxGroupItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface CheckboxGroupItemProps extends CheckboxGroupStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: CheckboxGroupStyleOverrides;
}
```

#### `CheckboxGroupControlProps` {#checkboxgroupcontrolprops}

Props for the checkbox group control component.

**Copyable example**

```ts
import type { CheckboxGroupControlProps } from "@kovojs/ui/checkbox-group";
const props: CheckboxGroupControlProps = { itemValue: 'item' };
```

**Signature**

```ts
interface CheckboxGroupControlProps extends CheckboxGroupStateProps {
  controlId?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: CheckboxGroupStyleOverrides;
}
```

#### `CheckboxGroupLabelProps` {#checkboxgrouplabelprops}

Props for the checkbox group label component.

**Copyable example**

```ts
import type { CheckboxGroupLabelProps } from "@kovojs/ui/checkbox-group";
const props: CheckboxGroupLabelProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface CheckboxGroupLabelProps extends CheckboxGroupStateProps {
  children?: ComponentChild;
  controlId?: string;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: CheckboxGroupStyleOverrides;
}
```

## `@kovojs/ui/collapsible`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/collapsible.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/collapsible.tsx)

### Values

#### `Collapsible` {#collapsible}

Renders the styled collapsible primitive.

**Copyable example**

```ts
import { Collapsible } from "@kovojs/ui/collapsible";
const component = Collapsible;
```

**Signature**

```ts
const Collapsible = component({
  render(props: CollapsibleProps) {
    const attrs = collapsibleRootAttributes(collapsibleState(props));
    const styleAttrs = style.attrs(collapsibleStyles.root, props.styles?.root);

    return (
      <details
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
        open={attrs.open}
      >
        {props.children}
      </details>
    );
  },
});
```

#### `CollapsibleTrigger` {#collapsibletrigger}

Renders the styled collapsible trigger primitive.

**Copyable example**

```ts
import { CollapsibleTrigger } from "@kovojs/ui/collapsible";
const component = CollapsibleTrigger;
```

**Signature**

```ts
const CollapsibleTrigger = component({
  render(props: CollapsibleTriggerProps) {
    const attrs = collapsibleTriggerAttributes({
      ...collapsibleState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(collapsibleStyles.trigger, props.styles?.trigger);

    return (
      <summary
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </summary>
    );
  },
});
```

#### `CollapsibleContent` {#collapsiblecontent}

Renders the styled collapsible content primitive.

**Copyable example**

```ts
import { CollapsibleContent } from "@kovojs/ui/collapsible";
const component = CollapsibleContent;
```

**Signature**

```ts
const CollapsibleContent = component({
  render(props: CollapsibleContentProps) {
    const attrs = collapsibleContentAttributes({
      ...collapsibleState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(collapsibleStyles.content, props.styles?.content);
    const innerStyleAttrs = style.attrs(collapsibleStyles.contentInner);

    return (
      // passThroughProps forwards the compiler-emitted data-bind:* reactive stamps
      // (e.g. data-bind:data-state) so the panel re-renders open/closed client-side;
      // without it the SSR value stays frozen and the content never reveals.
      // Outer div is the animatable grid wrapper; the inner div holds the padded
      // content and mirrors data-state so its padding collapses with the row.
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        <div {...innerStyleAttrs} data-state={attrs['data-state']}>
          {props.children}
        </div>
      </div>
    );
  },
});
```

### Supporting types

#### `CollapsibleStateProps` {#collapsiblestateprops}

Shared state props for the collapsible component family.

**Copyable example**

```ts
import type { CollapsibleStateProps } from "@kovojs/ui/collapsible";
const state: CollapsibleStateProps = {};
```

**Signature**

```ts
interface CollapsibleStateProps {
  disabled?: boolean;
  open?: boolean;
}
```

#### `CollapsibleStyleOverrides` {#collapsiblestyleoverrides}

Style override slots accepted by the collapsible components.

**Copyable example**

```ts
import type { CollapsibleStyleOverrides } from "@kovojs/ui/collapsible";
const styles: CollapsibleStyleOverrides = {};
```

**Signature**

```ts
interface CollapsibleStyleOverrides {
  content?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `CollapsibleProps` {#collapsibleprops}

Props for the collapsible component.

**Copyable example**

```ts
import type { CollapsibleProps } from "@kovojs/ui/collapsible";
const props: CollapsibleProps = { children: 'Content' };
```

**Signature**

```ts
interface CollapsibleProps extends CollapsibleStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: CollapsibleStyleOverrides;
}
```

#### `CollapsibleTriggerProps` {#collapsibletriggerprops}

Props for the collapsible trigger component.

**Copyable example**

```ts
import type { CollapsibleTriggerProps } from "@kovojs/ui/collapsible";
const props: CollapsibleTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface CollapsibleTriggerProps extends CollapsibleStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: CollapsibleStyleOverrides;
}
```

#### `CollapsibleContentProps` {#collapsiblecontentprops}

Props for the collapsible content component.

**Copyable example**

```ts
import type { CollapsibleContentProps } from "@kovojs/ui/collapsible";
const props: CollapsibleContentProps = { children: 'Content' };
```

**Signature**

```ts
interface CollapsibleContentProps extends CollapsibleStateProps {
  children?: ComponentChild;
  contentId?: string;
  styles?: CollapsibleStyleOverrides;
}
```

## `@kovojs/ui/combobox`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/combobox.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/combobox.tsx)

### Values

#### `Combobox` {#combobox}

Renders the styled combobox primitive.

**Copyable example**

```ts
import { Combobox } from "@kovojs/ui/combobox";
const component = Combobox;
```

**Signature**

```ts
const Combobox = component({
  render(props: ComboboxProps) {
    const attrs = comboboxRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(comboboxStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ComboboxInput` {#comboboxinput}

Renders the styled combobox input primitive.

**Copyable example**

```ts
import { ComboboxInput } from "@kovojs/ui/combobox";
const component = ComboboxInput;
```

**Signature**

```ts
const ComboboxInput = component({
  render(props: ComboboxInputProps) {
    const attrs = comboboxInputAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(comboboxStyles.input, props.styles?.input);

    return (
      <input
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-activedescendant={attrs['aria-activedescendant']}
        aria-autocomplete={attrs['aria-autocomplete']}
        aria-controls={attrs['aria-controls']}
        aria-describedby={attrs['aria-describedby']}
        aria-expanded={attrs['aria-expanded']}
        aria-invalid={attrs['aria-invalid']}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        list={attrs.list}
        name={attrs.name}
        placeholder={attrs.placeholder}
        required={attrs.required}
        role={attrs.role}
        type={attrs.type}
        value={attrs.value}
      />
    );
  },
});
```

#### `ComboboxListbox` {#comboboxlistbox}

Renders the styled combobox listbox primitive.

**Copyable example**

```ts
import { ComboboxListbox } from "@kovojs/ui/combobox";
const component = ComboboxListbox;
```

**Signature**

```ts
const ComboboxListbox = component({
  render(props: ComboboxListboxProps) {
    const attrs = comboboxListboxAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(comboboxStyles.listbox, props.styles?.listbox);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ComboboxOption` {#comboboxoption}

Renders the styled combobox option primitive.

**Copyable example**

```ts
import { ComboboxOption } from "@kovojs/ui/combobox";
const component = ComboboxOption;
```

**Signature**

```ts
const ComboboxOption = component({
  render(props: ComboboxOptionProps) {
    const attrs = comboboxOptionAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(comboboxStyles.option, props.styles?.option);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-disabled={attrs['aria-disabled']}
        aria-selected={attrs['aria-selected']}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        id={attrs.id}
        role={attrs.role}
        value={attrs.value}
      >
        {props.children ?? props.itemLabel ?? props.itemValue ?? ''}
      </div>
    );
  },
});
```

#### `ComboboxValue` {#comboboxvalue}

Renders the styled combobox value primitive.

**Copyable example**

```ts
import { ComboboxValue } from "@kovojs/ui/combobox";
const component = ComboboxValue;
```

**Signature**

```ts
const ComboboxValue = component({
  render(props: ComboboxValueProps) {
    const attrs = comboboxValueAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(comboboxStyles.value, props.styles?.value);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        data-placeholder={attrs['data-placeholder']}
        id={attrs.id}
      >
        {comboboxValueText(props)}
      </span>
    );
  },
});
```

### Supporting types

#### `ComboboxStyleOverrides` {#comboboxstyleoverrides}

Style override slots accepted by the combobox components.

**Copyable example**

```ts
import type { ComboboxStyleOverrides } from "@kovojs/ui/combobox";
const styles: ComboboxStyleOverrides = {};
```

**Signature**

```ts
interface ComboboxStyleOverrides {
  input?: style.StyleInput;
  listbox?: style.StyleInput;
  option?: style.StyleInput;
  root?: style.StyleInput;
  value?: style.StyleInput;
}
```

#### `ComboboxStateProps` {#comboboxstateprops}

Shared state props for the combobox component family.

**Copyable example**

```ts
import type { ComboboxStateProps } from "@kovojs/ui/combobox";
const state: ComboboxStateProps = {};
```

**Signature**

```ts
interface ComboboxStateProps {
  disabled?: boolean;
  form?: string;
  highlightedValue?: string;
  invalid?: boolean;
  items?: readonly HeadlessComboboxItem[];
  listboxId?: string;
  name?: string;
  open?: boolean;
  placeholder?: string;
  required?: boolean;
  value?: string;
}
```

#### `ComboboxProps` {#comboboxprops}

Props for the combobox component.

**Copyable example**

```ts
import type { ComboboxProps } from "@kovojs/ui/combobox";
const props: ComboboxProps = { children: 'Content' };
```

**Signature**

```ts
interface ComboboxProps extends ComboboxStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: ComboboxStyleOverrides;
}
```

#### `ComboboxInputProps` {#comboboxinputprops}

Props for the combobox input component.

**Copyable example**

```ts
import type { ComboboxInputProps } from "@kovojs/ui/combobox";
const props: ComboboxInputProps = {};
```

**Signature**

```ts
interface ComboboxInputProps extends ComboboxStateProps {
  descriptionId?: string;
  errorId?: string;
  id?: string;
  labelledBy?: string;
  styles?: ComboboxStyleOverrides;
}
```

#### `ComboboxListboxProps` {#comboboxlistboxprops}

Props for the combobox listbox component.

**Copyable example**

```ts
import type { ComboboxListboxProps } from "@kovojs/ui/combobox";
const props: ComboboxListboxProps = { children: 'Content' };
```

**Signature**

```ts
interface ComboboxListboxProps extends ComboboxStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: ComboboxStyleOverrides;
}
```

#### `ComboboxOptionProps` {#comboboxoptionprops}

Props for the combobox option component.

**Copyable example**

```ts
import type { ComboboxOptionProps } from "@kovojs/ui/combobox";
const props: ComboboxOptionProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface ComboboxOptionProps extends ComboboxStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemLabel?: string;
  itemValue: string;
  styles?: ComboboxStyleOverrides;
}
```

#### `ComboboxValueProps` {#comboboxvalueprops}

Props for the combobox value component.

**Copyable example**

```ts
import type { ComboboxValueProps } from "@kovojs/ui/combobox";
const props: ComboboxValueProps = {};
```

**Signature**

```ts
interface ComboboxValueProps extends ComboboxStateProps {
  id?: string;
  styles?: ComboboxStyleOverrides;
}
```

## `@kovojs/ui/command`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/command.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/command.tsx)

### Values

#### `Command` {#command}

Renders the styled command primitive.

**Copyable example**

```ts
import { Command } from "@kovojs/ui/command";
const component = Command;
```

**Signature**

```ts
const Command = component({
  render(props: CommandProps) {
    const attrs = commandRootAttributes(toCommandState(props));
    const styleAttrs = style.attrs(commandStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `CommandTrigger` {#commandtrigger}

Renders the styled command trigger primitive.

**Copyable example**

```ts
import { CommandTrigger } from "@kovojs/ui/command";
const component = CommandTrigger;
```

**Signature**

```ts
const CommandTrigger = component({
  render(props: CommandTriggerProps) {
    const attrs = commandTriggerAttributes({
      ...toCommandState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
    });
    const styleAttrs = style.attrs(commandStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        aria-labelledby={attrs['aria-labelledby']}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={attrs.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `CommandDialog` {#commanddialog}

Renders the styled command dialog primitive.

**Copyable example**

```ts
import { CommandDialog } from "@kovojs/ui/command";
const component = CommandDialog;
```

**Signature**

```ts
const CommandDialog = component({
  render(props: CommandDialogProps) {
    const attrs = commandDialogAttributes({
      ...toCommandState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.titleId === undefined ? {} : { titleId: props.titleId }),
    });
    const styleAttrs = style.attrs(commandStyles.dialog, props.styles?.dialog);

    return (
      <dialog
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-modal={attrs['aria-modal']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={attrs.id}
        open={attrs.open}
      >
        {props.children}
      </dialog>
    );
  },
});
```

#### `CommandInput` {#commandinput}

Renders the styled command input primitive.

**Copyable example**

```ts
import { CommandInput } from "@kovojs/ui/command";
const component = CommandInput;
```

**Signature**

```ts
const CommandInput = component({
  render(props: CommandInputProps) {
    const attrs = commandInputAttributes({
      ...(props.autocomplete === undefined ? {} : { autocomplete: props.autocomplete }),
      ...toCommandState(props),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
    });
    const styleAttrs = style.attrs(commandStyles.input, props.styles?.input);
    const wrapperAttrs = style.attrs(commandStyles.inputWrapper);

    return (
      <div {...wrapperAttrs}>
        <Search style={commandStyles.inputIcon} />
        <input
          {...styleAttrs}
          {...passThroughProps(props)}
          aria-activedescendant={attrs['aria-activedescendant']}
          aria-autocomplete={attrs['aria-autocomplete']}
          aria-controls={attrs['aria-controls']}
          aria-describedby={attrs['aria-describedby']}
          aria-expanded={attrs['aria-expanded']}
          aria-invalid={attrs['aria-invalid']}
          aria-labelledby={attrs['aria-labelledby']}
          autocomplete={attrs.autocomplete}
          data-disabled={attrs['data-disabled']}
          data-invalid={attrs['data-invalid']}
          data-required={attrs['data-required']}
          data-state={attrs['data-state']}
          disabled={attrs.disabled}
          form={attrs.form}
          id={attrs.id}
          name={attrs.name}
          placeholder={attrs.placeholder}
          required={attrs.required}
          role={attrs.role}
          type={attrs.type}
          value={attrs.value}
        />
      </div>
    );
  },
});
```

#### `CommandListbox` {#commandlistbox}

Renders the styled command listbox primitive.

**Copyable example**

```ts
import { CommandListbox } from "@kovojs/ui/command";
const component = CommandListbox;
```

**Signature**

```ts
const CommandListbox = component({
  render(props: CommandListboxProps) {
    const attrs = commandListboxAttributes({
      ...toCommandState(props),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
    });
    const styleAttrs = style.attrs(commandStyles.listbox, props.styles?.listbox);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `CommandItem` {#commanditem}

Renders the styled command item primitive.

**Copyable example**

```ts
import { CommandItem } from "@kovojs/ui/command";
const component = CommandItem;
```

**Signature**

```ts
const CommandItem = component({
  render(props: CommandItemProps) {
    const attrs = commandItemAttributes({
      ...toCommandState(props),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      itemValue: props.itemValue,
    });
    const styleAttrs = style.attrs(commandStyles.item, props.styles?.item);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-disabled={attrs['aria-disabled']}
        aria-selected={attrs['aria-selected']}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        disabled={attrs['data-disabled'] === '' ? true : undefined}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
        type="button"
        value={attrs.value}
      >
        {props.children ?? props.itemLabel ?? props.itemValue ?? ''}
      </button>
    );
  },
});
```

#### `CommandClose` {#commandclose}

Renders the styled command close primitive.

**Copyable example**

```ts
import { CommandClose } from "@kovojs/ui/command";
const component = CommandClose;
```

**Signature**

```ts
const CommandClose = component({
  render(props: CommandCloseProps) {
    const attrs = commandCloseAttributes({
      ...toCommandState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(commandStyles.close, props.styles?.close);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        type={attrs.type}
      >
        {props.children ?? 'Close'}
      </button>
    );
  },
});
```

#### `CommandEmpty` {#commandempty}

Renders the styled command empty primitive.

**Copyable example**

```ts
import { CommandEmpty } from "@kovojs/ui/command";
const component = CommandEmpty;
```

**Signature**

```ts
const CommandEmpty = component({
  render(props: CommandEmptyProps) {
    const attrs = commandEmptyAttributes({
      ...toCommandState(props),
      ...(props.id === undefined ? {} : { id: props.id }),
    });
    const styleAttrs = style.attrs(commandStyles.empty, props.styles?.empty);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-empty={attrs['data-empty']}
        hidden={attrs.hidden}
        id={attrs.id}
      >
        {props.children ?? 'No results'}
      </div>
    );
  },
});
```

#### `CommandValue` {#commandvalue}

Renders the styled command value primitive.

**Copyable example**

```ts
import { CommandValue } from "@kovojs/ui/command";
const component = CommandValue;
```

**Signature**

```ts
const CommandValue = component({
  render(props: CommandValueProps) {
    const styleAttrs = style.attrs(commandStyles.value, props.styles?.value);

    return (
      <span {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {commandValueText(props)}
      </span>
    );
  },
});
```

### Supporting types

#### `CommandStyleOverrides` {#commandstyleoverrides}

Style override slots accepted by the command components.

**Copyable example**

```ts
import type { CommandStyleOverrides } from "@kovojs/ui/command";
const styles: CommandStyleOverrides = {};
```

**Signature**

```ts
interface CommandStyleOverrides {
  close?: style.StyleInput;
  dialog?: style.StyleInput;
  empty?: style.StyleInput;
  input?: style.StyleInput;
  item?: style.StyleInput;
  listbox?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
  value?: style.StyleInput;
}
```

#### `CommandStateProps` {#commandstateprops}

Shared state props for the command component family.

**Copyable example**

```ts
import type { CommandStateProps } from "@kovojs/ui/command";
const state: CommandStateProps = {};
```

**Signature**

```ts
interface CommandStateProps {
  disabled?: boolean;
  form?: string;
  highlightedValue?: string;
  inputValue?: string;
  invalid?: boolean;
  items?: readonly HeadlessCommandItem[];
  name?: string;
  open?: boolean;
  placeholder?: string;
  required?: boolean;
  value?: string;
}
```

#### `CommandProps` {#commandprops}

Props for the command component.

**Copyable example**

```ts
import type { CommandProps } from "@kovojs/ui/command";
const props: CommandProps = { children: 'Content' };
```

**Signature**

```ts
interface CommandProps extends CommandStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: CommandStyleOverrides;
}
```

#### `CommandTriggerProps` {#commandtriggerprops}

Props for the command trigger component.

**Copyable example**

```ts
import type { CommandTriggerProps } from "@kovojs/ui/command";
const props: CommandTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface CommandTriggerProps extends CommandStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  labelledBy?: string;
  styles?: CommandStyleOverrides;
}
```

#### `CommandDialogProps` {#commanddialogprops}

Props for the command dialog component.

**Copyable example**

```ts
import type { CommandDialogProps } from "@kovojs/ui/command";
const props: CommandDialogProps = { children: 'Content' };
```

**Signature**

```ts
interface CommandDialogProps extends CommandStateProps {
  children?: ComponentChild;
  contentId?: string;
  descriptionId?: string;
  styles?: CommandStyleOverrides;
  titleId?: string;
}
```

#### `CommandCloseProps` {#commandcloseprops}

Props for the command close component.

**Copyable example**

```ts
import type { CommandCloseProps } from "@kovojs/ui/command";
const props: CommandCloseProps = { children: 'Content' };
```

**Signature**

```ts
interface CommandCloseProps extends CommandStateProps {
  children?: ComponentChild;
  contentId?: string;
  styles?: CommandStyleOverrides;
}
```

#### `CommandInputProps` {#commandinputprops}

Props for the command input component.

**Copyable example**

```ts
import type { CommandInputProps } from "@kovojs/ui/command";
const props: CommandInputProps = {};
```

**Signature**

```ts
interface CommandInputProps extends CommandStateProps {
  autocomplete?: string;
  descriptionId?: string;
  id?: string;
  labelledBy?: string;
  listboxId?: string;
  styles?: CommandStyleOverrides;
}
```

#### `CommandListboxProps` {#commandlistboxprops}

Props for the command listbox component.

**Copyable example**

```ts
import type { CommandListboxProps } from "@kovojs/ui/command";
const props: CommandListboxProps = { children: 'Content' };
```

**Signature**

```ts
interface CommandListboxProps extends CommandStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: CommandStyleOverrides;
}
```

#### `CommandItemProps` {#commanditemprops}

Props for the command item component.

**Copyable example**

```ts
import type { CommandItemProps } from "@kovojs/ui/command";
const props: CommandItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface CommandItemProps extends CommandStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemLabel?: string;
  itemValue: string;
  listboxId?: string;
  styles?: CommandStyleOverrides;
}
```

#### `CommandEmptyProps` {#commandemptyprops}

Props for the command empty component.

**Copyable example**

```ts
import type { CommandEmptyProps } from "@kovojs/ui/command";
const props: CommandEmptyProps = { children: 'Content' };
```

**Signature**

```ts
interface CommandEmptyProps extends CommandStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: CommandStyleOverrides;
}
```

#### `CommandValueProps` {#commandvalueprops}

Props for the command value component.

**Copyable example**

```ts
import type { CommandValueProps } from "@kovojs/ui/command";
const props: CommandValueProps = {};
```

**Signature**

```ts
interface CommandValueProps extends CommandStateProps {
  id?: string;
  styles?: CommandStyleOverrides;
}
```

## `@kovojs/ui/context-menu`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/context-menu.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/context-menu.tsx)

### Values

#### `ContextMenu` {#contextmenu}

Renders the styled context menu primitive.

**Copyable example**

```ts
import { ContextMenu } from "@kovojs/ui/context-menu";
const component = ContextMenu;
```

**Signature**

```ts
const ContextMenu = component({
  render(props: ContextMenuProps) {
    const attrs = contextMenuRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.point === undefined ? {} : { point: props.point }),
    });
    const styleAttrs = style.attrs(contextMenuStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ContextMenuTrigger` {#contextmenutrigger}

Renders the styled context menu trigger primitive.

**Copyable example**

```ts
import { ContextMenuTrigger } from "@kovojs/ui/context-menu";
const component = ContextMenuTrigger;
```

**Signature**

```ts
const ContextMenuTrigger = component({
  render(props: ContextMenuTriggerProps) {
    const attrs = contextMenuTriggerAttributes({
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.point === undefined ? {} : { point: props.point }),
    });
    const styleAttrs = style.attrs(contextMenuStyles.trigger, props.styles?.trigger);

    return (
      <div
        aria-controls={attrs['aria-controls']}
        aria-disabled={attrs['aria-disabled']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={attrs.id}
        kovo-context-menu={attrs['kovo-context-menu']}
        role={attrs.role}
        tabIndex={props.disabled === true ? -1 : 0}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ContextMenuContent` {#contextmenucontent}

Renders the styled context menu content primitive.

**Copyable example**

```ts
import { ContextMenuContent } from "@kovojs/ui/context-menu";
const component = ContextMenuContent;
```

**Signature**

```ts
const ContextMenuContent = component({
  render(props: ContextMenuContentProps) {
    const attrs = contextMenuContentAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.point === undefined ? {} : { point: props.point }),
    });
    const styleAttrs = style.attrs(contextMenuStyles.content, props.styles?.content);

    return (
      <div
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-anchor-x={attrs['data-anchor-x']}
        data-anchor-y={attrs['data-anchor-y']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ContextMenuItem` {#contextmenuitem}

Renders the styled context menu item primitive.

**Copyable example**

```ts
import { ContextMenuItem } from "@kovojs/ui/context-menu";
const component = ContextMenuItem;
```

**Signature**

```ts
const ContextMenuItem = component({
  render(props: ContextMenuItemProps) {
    const attrs = contextMenuItemAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.point === undefined ? {} : { point: props.point }),
    });
    const styleAttrs = style.attrs(contextMenuStyles.item, props.styles?.item);

    return (
      <button
        aria-disabled={attrs['aria-disabled']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        disabled={attrs['data-disabled'] === '' ? true : undefined}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
        type="button"
        value={attrs.value}
      >
        {props.children ?? props.itemLabel ?? props.itemValue}
      </button>
    );
  },
});
```

#### `ContextMenuGroup` {#contextmenugroup}

Renders the styled context menu group primitive.

**Copyable example**

```ts
import { ContextMenuGroup } from "@kovojs/ui/context-menu";
const component = ContextMenuGroup;
```

**Signature**

```ts
const ContextMenuGroup = component({
  render(props: ContextMenuGroupProps) {
    const attrs = contextMenuGroupAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.point === undefined ? {} : { point: props.point }),
    });
    const styleAttrs = style.attrs(contextMenuStyles.group, props.styles?.group);

    return (
      <div
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ContextMenuSeparator` {#contextmenuseparator}

Renders the styled context menu separator primitive.

**Copyable example**

```ts
import { ContextMenuSeparator } from "@kovojs/ui/context-menu";
const component = ContextMenuSeparator;
```

**Signature**

```ts
const ContextMenuSeparator = component({
  render(props: ContextMenuSeparatorProps) {
    const attrs = contextMenuSeparatorAttributes(props.id === undefined ? {} : { id: props.id });
    const styleAttrs = style.attrs(contextMenuStyles.separator, props.styles?.separator);

    return <div {...styleAttrs} id={attrs.id} role={attrs.role} />;
  },
});
```

### Supporting types

#### `ContextMenuStyleOverrides` {#contextmenustyleoverrides}

Style override slots accepted by the context menu components.

**Copyable example**

```ts
import type { ContextMenuStyleOverrides } from "@kovojs/ui/context-menu";
const styles: ContextMenuStyleOverrides = {};
```

**Signature**

```ts
interface ContextMenuStyleOverrides {
  content?: style.StyleInput;
  group?: style.StyleInput;
  item?: style.StyleInput;
  root?: style.StyleInput;
  separator?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `ContextMenuStateProps` {#contextmenustateprops}

Shared state props for the context menu component family.

**Copyable example**

```ts
import type { ContextMenuStateProps } from "@kovojs/ui/context-menu";
const state: ContextMenuStateProps = {};
```

**Signature**

```ts
interface ContextMenuStateProps {
  disabled?: boolean;
  highlightedValue?: string;
  items?: readonly HeadlessContextMenuItem[];
  open?: boolean;
  point?: ContextMenuPoint;
}
```

#### `ContextMenuProps` {#contextmenuprops}

Props for the context menu component.

**Copyable example**

```ts
import type { ContextMenuProps } from "@kovojs/ui/context-menu";
const props: ContextMenuProps = { children: 'Content' };
```

**Signature**

```ts
interface ContextMenuProps extends ContextMenuStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: ContextMenuStyleOverrides;
}
```

#### `ContextMenuTriggerProps` {#contextmenutriggerprops}

Props for the context menu trigger component.

**Copyable example**

```ts
import type { ContextMenuTriggerProps } from "@kovojs/ui/context-menu";
const props: ContextMenuTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface ContextMenuTriggerProps extends ContextMenuStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  labelledBy?: string;
  styles?: ContextMenuStyleOverrides;
}
```

#### `ContextMenuContentProps` {#contextmenucontentprops}

Props for the context menu content component.

**Copyable example**

```ts
import type { ContextMenuContentProps } from "@kovojs/ui/context-menu";
const props: ContextMenuContentProps = { children: 'Content' };
```

**Signature**

```ts
interface ContextMenuContentProps extends ContextMenuStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: ContextMenuStyleOverrides;
}
```

#### `ContextMenuItemProps` {#contextmenuitemprops}

Props for the context menu item component.

**Copyable example**

```ts
import type { ContextMenuItemProps } from "@kovojs/ui/context-menu";
const props: ContextMenuItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface ContextMenuItemProps extends ContextMenuStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemLabel?: string;
  itemValue: string;
  styles?: ContextMenuStyleOverrides;
}
```

#### `ContextMenuGroupProps` {#contextmenugroupprops}

Props for the context menu group component.

**Copyable example**

```ts
import type { ContextMenuGroupProps } from "@kovojs/ui/context-menu";
const props: ContextMenuGroupProps = { children: 'Content' };
```

**Signature**

```ts
interface ContextMenuGroupProps extends ContextMenuStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: ContextMenuStyleOverrides;
}
```

#### `ContextMenuSeparatorProps` {#contextmenuseparatorprops}

Props for the context menu separator component.

**Copyable example**

```ts
import type { ContextMenuSeparatorProps } from "@kovojs/ui/context-menu";
const props: ContextMenuSeparatorProps = {};
```

**Signature**

```ts
interface ContextMenuSeparatorProps {
  id?: string;
  styles?: ContextMenuStyleOverrides;
}
```

## `@kovojs/ui/dialog`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/dialog.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/dialog.tsx)

### Values

#### `Dialog` {#dialog}

Renders the styled dialog primitive.

**Copyable example**

```ts
import { Dialog } from "@kovojs/ui/dialog";
const component = Dialog;
```

**Signature**

```ts
const Dialog = component({
  render(props: DialogProps) {
    const attrs = dialogRootAttributes(dialogState(props));
    const styleAttrs = style.attrs(dialogStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `DialogTrigger` {#dialogtrigger}

Renders the styled dialog trigger primitive.

**Copyable example**

```ts
import { DialogTrigger } from "@kovojs/ui/dialog";
const component = DialogTrigger;
```

**Signature**

```ts
const DialogTrigger = component({
  render(props: DialogTriggerProps) {
    const attrs = dialogTriggerAttributes({
      ...dialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(dialogStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `DialogContent` {#dialogcontent}

Renders the styled dialog content primitive.

**Copyable example**

```ts
import { DialogContent } from "@kovojs/ui/dialog";
const component = DialogContent;
```

**Signature**

```ts
const DialogContent = component({
  render(props: DialogContentProps) {
    const attrs = dialogContentAttributes({
      ...dialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.dismissible === undefined ? {} : { dismissible: props.dismissible }),
      ...(props.titleId === undefined ? {} : { titleId: props.titleId }),
    });
    const styleAttrs = style.attrs(dialogStyles.content, props.styles?.content);

    return (
      <dialog
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-modal={attrs['aria-modal']}
        closedby={attrs.closedby}
        data-state={attrs['data-state']}
        id={attrs.id}
        open={attrs.open}
        role={attrs.role}
      >
        {props.children}
      </dialog>
    );
  },
});
```

#### `DialogClose` {#dialogclose}

Renders the styled dialog close primitive.

**Copyable example**

```ts
import { DialogClose } from "@kovojs/ui/dialog";
const component = DialogClose;
```

**Signature**

```ts
const DialogClose = component({
  render(props: DialogCloseProps) {
    const attrs = dialogCloseAttributes({
      ...dialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(dialogStyles.close, props.styles?.close);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children ?? 'Close'}
      </button>
    );
  },
});
```

#### `DialogCloseX` {#dialogclosex}

Renders the styled dialog close x primitive.

**Copyable example**

```ts
import { DialogCloseX } from "@kovojs/ui/dialog";
const component = DialogCloseX;
```

**Signature**

```ts
const DialogCloseX = component({
  render(props: DialogCloseProps) {
    const attrs = dialogCloseAttributes({
      ...dialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(dialogStyles.closeX, props.styles?.closeX);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-label="Close"
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children ?? '×'}
      </button>
    );
  },
});
```

#### `DialogHeader` {#dialogheader}

Renders the styled dialog header primitive.

**Copyable example**

```ts
import { DialogHeader } from "@kovojs/ui/dialog";
const component = DialogHeader;
```

**Signature**

```ts
const DialogHeader = component({
  render(props: DialogPartProps) {
    const styleAttrs = style.attrs(dialogStyles.header, props.styles?.header);
    return (
      <div {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </div>
    );
  },
});
```

#### `DialogTitle` {#dialogtitle}

Renders the styled dialog title primitive.

**Copyable example**

```ts
import { DialogTitle } from "@kovojs/ui/dialog";
const component = DialogTitle;
```

**Signature**

```ts
const DialogTitle = component({
  render(props: DialogPartProps) {
    const styleAttrs = style.attrs(dialogStyles.title, props.styles?.title);
    return (
      <h2 {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </h2>
    );
  },
});
```

#### `DialogDescription` {#dialogdescription}

Renders the styled dialog description primitive.

**Copyable example**

```ts
import { DialogDescription } from "@kovojs/ui/dialog";
const component = DialogDescription;
```

**Signature**

```ts
const DialogDescription = component({
  render(props: DialogPartProps) {
    const styleAttrs = style.attrs(dialogStyles.description, props.styles?.description);
    return (
      <p {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </p>
    );
  },
});
```

### Supporting types

#### `DialogStyleOverrides` {#dialogstyleoverrides}

Style override slots accepted by the dialog components.

**Copyable example**

```ts
import type { DialogStyleOverrides } from "@kovojs/ui/dialog";
const styles: DialogStyleOverrides = {};
```

**Signature**

```ts
interface DialogStyleOverrides {
  close?: style.StyleInput;
  closeX?: style.StyleInput;
  content?: style.StyleInput;
  description?: style.StyleInput;
  header?: style.StyleInput;
  root?: style.StyleInput;
  title?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `DialogStateProps` {#dialogstateprops}

Shared state props for the dialog component family.

**Copyable example**

```ts
import type { DialogStateProps } from "@kovojs/ui/dialog";
const state: DialogStateProps = {};
```

**Signature**

```ts
interface DialogStateProps {
  disabled?: boolean;
  open?: boolean;
}
```

#### `DialogProps` {#dialogprops}

Props for the dialog component.

**Copyable example**

```ts
import type { DialogProps } from "@kovojs/ui/dialog";
const props: DialogProps = { children: 'Content' };
```

**Signature**

```ts
interface DialogProps extends DialogStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: DialogStyleOverrides;
}
```

#### `DialogTriggerProps` {#dialogtriggerprops}

Props for the dialog trigger component.

**Copyable example**

```ts
import type { DialogTriggerProps } from "@kovojs/ui/dialog";
const props: DialogTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface DialogTriggerProps extends DialogStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: DialogStyleOverrides;
}
```

#### `DialogContentProps` {#dialogcontentprops}

Props for the dialog content component.

**Copyable example**

```ts
import type { DialogContentProps } from "@kovojs/ui/dialog";
const props: DialogContentProps = { children: 'Content' };
```

**Signature**

```ts
interface DialogContentProps extends DialogStateProps {
  children?: ComponentChild;
  contentId?: string;
  descriptionId?: string;
  dismissible?: boolean;
  styles?: DialogStyleOverrides;
  titleId?: string;
}
```

#### `DialogCloseProps` {#dialogcloseprops}

Props for the dialog close component.

**Copyable example**

```ts
import type { DialogCloseProps } from "@kovojs/ui/dialog";
const props: DialogCloseProps = { children: 'Content' };
```

**Signature**

```ts
interface DialogCloseProps extends DialogStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: DialogStyleOverrides;
}
```

#### `DialogPartProps` {#dialogpartprops}

Props for the dialog part component.

**Copyable example**

```ts
import type { DialogPartProps } from "@kovojs/ui/dialog";
const props: DialogPartProps = { children: 'Content' };
```

**Signature**

```ts
interface DialogPartProps {
  children?: ComponentChild;
  id?: string;
  styles?: DialogStyleOverrides;
}
```

## `@kovojs/ui/disclosure`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/disclosure.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/disclosure.tsx)

### Values

#### `Disclosure` {#disclosure}

Renders the styled disclosure primitive.

**Copyable example**

```ts
import { Disclosure } from "@kovojs/ui/disclosure";
const component = Disclosure;
```

**Signature**

```ts
const Disclosure = component({
  render(props: DisclosureProps) {
    const attrs = disclosureRootAttributes(disclosureState(props));
    const styleAttrs = style.attrs(disclosureStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `DisclosureTrigger` {#disclosuretrigger}

Renders the styled disclosure trigger primitive.

**Copyable example**

```ts
import { DisclosureTrigger } from "@kovojs/ui/disclosure";
const component = DisclosureTrigger;
```

**Signature**

```ts
const DisclosureTrigger = component({
  render(props: DisclosureTriggerProps) {
    const attrs = disclosureTriggerAttributes({
      ...disclosureState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(disclosureStyles.trigger, props.styles?.trigger);

    return (
      <button
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `DisclosureContent` {#disclosurecontent}

Renders the styled disclosure content primitive.

**Copyable example**

```ts
import { DisclosureContent } from "@kovojs/ui/disclosure";
const component = DisclosureContent;
```

**Signature**

```ts
const DisclosureContent = component({
  render(props: DisclosureContentProps) {
    const attrs = disclosureContentAttributes({
      ...disclosureState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(disclosureStyles.content, props.styles?.content);
    const innerStyleAttrs = style.attrs(disclosureStyles.contentInner);

    return (
      // passThroughProps forwards the compiler-emitted data-bind:* reactive stamps
      // (data-bind:data-state / data-bind:hidden) so the panel reveals client-side;
      // without it the SSR closed value stays frozen and clicking does nothing.
      // Outer div is the animatable grid wrapper and keeps the hidden/id/data-state
      // contract; the inner div holds the padded content and collapses with the row.
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
      >
        <div {...innerStyleAttrs} data-state={attrs['data-state']}>
          {props.children}
        </div>
      </div>
    );
  },
});
```

### Supporting types

#### `DisclosureStateProps` {#disclosurestateprops}

Shared state props for the disclosure component family.

**Copyable example**

```ts
import type { DisclosureStateProps } from "@kovojs/ui/disclosure";
const state: DisclosureStateProps = {};
```

**Signature**

```ts
interface DisclosureStateProps {
  disabled?: boolean;
  open?: boolean;
}
```

#### `DisclosureStyleOverrides` {#disclosurestyleoverrides}

Style override slots accepted by the disclosure components.

**Copyable example**

```ts
import type { DisclosureStyleOverrides } from "@kovojs/ui/disclosure";
const styles: DisclosureStyleOverrides = {};
```

**Signature**

```ts
interface DisclosureStyleOverrides {
  content?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `DisclosureProps` {#disclosureprops}

Props for the disclosure component.

**Copyable example**

```ts
import type { DisclosureProps } from "@kovojs/ui/disclosure";
const props: DisclosureProps = { children: 'Content' };
```

**Signature**

```ts
interface DisclosureProps extends DisclosureStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: DisclosureStyleOverrides;
}
```

#### `DisclosureTriggerProps` {#disclosuretriggerprops}

Props for the disclosure trigger component.

**Copyable example**

```ts
import type { DisclosureTriggerProps } from "@kovojs/ui/disclosure";
const props: DisclosureTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface DisclosureTriggerProps extends DisclosureStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: DisclosureStyleOverrides;
}
```

#### `DisclosureContentProps` {#disclosurecontentprops}

Props for the disclosure content component.

**Copyable example**

```ts
import type { DisclosureContentProps } from "@kovojs/ui/disclosure";
const props: DisclosureContentProps = { children: 'Content' };
```

**Signature**

```ts
interface DisclosureContentProps extends DisclosureStateProps {
  children?: ComponentChild;
  contentId?: string;
  styles?: DisclosureStyleOverrides;
}
```

## `@kovojs/ui/drawer`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/drawer.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/drawer.tsx)

### Values

#### `Drawer` {#drawer}

Renders the styled drawer primitive.

**Copyable example**

```ts
import { Drawer } from "@kovojs/ui/drawer";
const component = Drawer;
```

**Signature**

```ts
const Drawer = component({
  render(props: DrawerProps) {
    const open = props.open === true;
    const side = props.side ?? 'bottom';
    const titleId = `${props.contentId}-title`;
    const descriptionId =
      props.description === undefined ? undefined : `${props.contentId}-description`;
    const disabledState = props.disabled === undefined ? {} : { disabled: props.disabled };
    const descriptionState = descriptionId === undefined ? {} : { descriptionId };
    const rootAttrs = dialogRootAttributes({ ...disabledState, open });
    const triggerAttrs = dialogTriggerAttributes({
      ...disabledState,
      contentId: props.contentId,
      open,
    });
    const contentAttrs = dialogContentAttributes({
      ...descriptionState,
      contentId: props.contentId,
      open,
      titleId,
    });
    const closeAttrs = dialogCloseAttributes({
      ...disabledState,
      contentId: props.contentId,
      open,
    });
    const rootStyleAttrs = style.attrs(drawerStyles.root, props.styles?.root);
    const triggerStyleAttrs = style.attrs(drawerStyles.trigger, props.styles?.trigger);
    const contentStyleAttrs = style.attrs(
      drawerStyles.content,
      drawerSideStyles[side],
      props.styles?.content,
    );
    const handleStyleAttrs = style.attrs(drawerStyles.handle, props.styles?.handle);
    const headerStyleAttrs = style.attrs(drawerStyles.header, props.styles?.header);
    const titleStyleAttrs = style.attrs(drawerStyles.title, props.styles?.title);
    const descriptionStyleAttrs = style.attrs(drawerStyles.description, props.styles?.description);
    const bodyStyleAttrs = style.attrs(drawerStyles.body, props.styles?.body);
    const closeStyleAttrs = style.attrs(drawerStyles.close, props.styles?.close);

    return (
      <div
        {...rootStyleAttrs}
        {...passThroughProps(props)}
        data-disabled={rootAttrs['data-disabled']}
        data-state={rootAttrs['data-state']}
      >
        <button
          {...triggerStyleAttrs}
          {...passThroughProps(props)}
          aria-controls={triggerAttrs['aria-controls']}
          aria-expanded={triggerAttrs['aria-expanded']}
          aria-haspopup={triggerAttrs['aria-haspopup']}
          command={triggerAttrs.command}
          commandfor={triggerAttrs.commandfor}
          data-disabled={triggerAttrs['data-disabled']}
          data-state={triggerAttrs['data-state']}
          disabled={triggerAttrs.disabled}
          type={triggerAttrs.type}
        >
          {props.trigger ?? 'Open'}
        </button>
        <dialog
          {...contentStyleAttrs}
          {...passThroughProps(props)}
          aria-describedby={contentAttrs['aria-describedby']}
          aria-labelledby={contentAttrs['aria-labelledby']}
          aria-modal={contentAttrs['aria-modal']}
          closedby={contentAttrs.closedby}
          data-state={contentAttrs['data-state']}
          id={contentAttrs.id}
          open={contentAttrs.open}
          role={contentAttrs.role}
        >
          <div {...handleStyleAttrs} aria-hidden="true" />
          <header {...headerStyleAttrs}>
            <h2 {...titleStyleAttrs} id={titleId}>
              {props.title}
            </h2>
            {descriptionId === undefined ? (
              ''
            ) : (
              <p {...descriptionStyleAttrs} id={descriptionId}>
                {props.description ?? ''}
              </p>
            )}
          </header>
          <div {...bodyStyleAttrs}>{props.children}</div>
          <button
            {...closeStyleAttrs}
            {...passThroughProps(props)}
            command={closeAttrs.command}
            commandfor={closeAttrs.commandfor}
            data-disabled={closeAttrs['data-disabled']}
            data-state={closeAttrs['data-state']}
            disabled={closeAttrs.disabled}
            type={closeAttrs.type}
          >
            {props.closeLabel ?? 'Close'}
          </button>
        </dialog>
      </div>
    );
  },
});
```

#### `DrawerRoot` {#drawerroot}

Renders the styled drawer root primitive.

**Copyable example**

```ts
import { DrawerRoot } from "@kovojs/ui/drawer";
const component = DrawerRoot;
```

**Signature**

```ts
const DrawerRoot = component({
  render(props: DrawerRootProps) {
    const attrs = dialogRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      open: props.open === true,
    });
    const styleAttrs = style.attrs(drawerStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `DrawerTrigger` {#drawertrigger}

Renders the styled drawer trigger primitive.

**Copyable example**

```ts
import { DrawerTrigger } from "@kovojs/ui/drawer";
const component = DrawerTrigger;
```

**Signature**

```ts
const DrawerTrigger = component({
  render(props: DrawerTriggerProps) {
    const attrs = dialogTriggerAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      contentId: props.contentId,
      open: props.open === true,
    });
    const styleAttrs = style.attrs(drawerStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `DrawerContent` {#drawercontent}

Renders the styled drawer content primitive.

**Copyable example**

```ts
import { DrawerContent } from "@kovojs/ui/drawer";
const component = DrawerContent;
```

**Signature**

```ts
const DrawerContent = component({
  render(props: DrawerContentProps) {
    const side = props.side ?? 'bottom';
    const attrs = dialogContentAttributes({
      contentId: props.contentId,
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      open: props.open === true,
      titleId: props.titleId,
    });
    const styleAttrs = style.attrs(
      drawerStyles.content,
      drawerSideStyles[side],
      props.styles?.content,
    );

    return (
      <dialog
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-modal={attrs['aria-modal']}
        closedby={attrs.closedby}
        data-state={attrs['data-state']}
        id={attrs.id}
        open={attrs.open}
        role={attrs.role}
      >
        {props.children}
      </dialog>
    );
  },
});
```

#### `DrawerHandle` {#drawerhandle}

Renders the styled drawer handle primitive.

**Copyable example**

```ts
import { DrawerHandle } from "@kovojs/ui/drawer";
const component = DrawerHandle;
```

**Signature**

```ts
const DrawerHandle = component({
  render(props: DrawerPartProps) {
    const styleAttrs = style.attrs(drawerStyles.handle, props.styles?.handle);
    return <div {...styleAttrs} {...passThroughProps(props)} aria-hidden="true" id={props.id} />;
  },
});
```

#### `DrawerHeader` {#drawerheader}

Renders the styled drawer header primitive.

**Copyable example**

```ts
import { DrawerHeader } from "@kovojs/ui/drawer";
const component = DrawerHeader;
```

**Signature**

```ts
const DrawerHeader = component({
  render(props: DrawerPartProps) {
    const styleAttrs = style.attrs(drawerStyles.header, props.styles?.header);
    return (
      <header {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </header>
    );
  },
});
```

#### `DrawerTitle` {#drawertitle}

Renders the styled drawer title primitive.

**Copyable example**

```ts
import { DrawerTitle } from "@kovojs/ui/drawer";
const component = DrawerTitle;
```

**Signature**

```ts
const DrawerTitle = component({
  render(props: DrawerPartProps) {
    const styleAttrs = style.attrs(drawerStyles.title, props.styles?.title);
    return (
      <h2 {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </h2>
    );
  },
});
```

#### `DrawerDescription` {#drawerdescription}

Renders the styled drawer description primitive.

**Copyable example**

```ts
import { DrawerDescription } from "@kovojs/ui/drawer";
const component = DrawerDescription;
```

**Signature**

```ts
const DrawerDescription = component({
  render(props: DrawerPartProps) {
    const styleAttrs = style.attrs(drawerStyles.description, props.styles?.description);
    return (
      <p {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </p>
    );
  },
});
```

#### `DrawerClose` {#drawerclose}

Renders the styled drawer close primitive.

**Copyable example**

```ts
import { DrawerClose } from "@kovojs/ui/drawer";
const component = DrawerClose;
```

**Signature**

```ts
const DrawerClose = component({
  render(props: DrawerCloseProps) {
    const attrs = dialogCloseAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      contentId: props.contentId,
      open: props.open === true,
    });
    const styleAttrs = style.attrs(drawerStyles.close, props.styles?.close);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children ?? 'Close'}
      </button>
    );
  },
});
```

### Supporting types

#### `DrawerSide` {#drawerside}

Supported drawer side values.

**Copyable example**

```ts
import type { DrawerSide } from "@kovojs/ui/drawer";
const value: DrawerSide = 'right';
```

**Signature**

```ts
type DrawerSide = 'top' | 'right' | 'bottom' | 'left';
```

#### `DrawerStyleOverrides` {#drawerstyleoverrides}

Style override slots accepted by the drawer components.

**Copyable example**

```ts
import type { DrawerStyleOverrides } from "@kovojs/ui/drawer";
const styles: DrawerStyleOverrides = {};
```

**Signature**

```ts
interface DrawerStyleOverrides {
  body?: style.StyleInput;
  close?: style.StyleInput;
  content?: style.StyleInput;
  description?: style.StyleInput;
  handle?: style.StyleInput;
  header?: style.StyleInput;
  root?: style.StyleInput;
  title?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `DrawerProps` {#drawerprops}

Props for the drawer component.

**Copyable example**

```ts
import type { DrawerProps } from "@kovojs/ui/drawer";
const props: DrawerProps = { contentId: 'content-id', title: 'Title', children: 'Content' };
```

**Signature**

```ts
interface DrawerProps {
  children?: ComponentChild;
  closeLabel?: string;
  contentId: string;
  description?: string;
  disabled?: boolean;
  open?: boolean;
  side?: DrawerSide;
  styles?: DrawerStyleOverrides;
  title: string;
  trigger?: string;
}
```

#### `DrawerStateProps` {#drawerstateprops}

Shared state props for the drawer component family.

**Copyable example**

```ts
import type { DrawerStateProps } from "@kovojs/ui/drawer";
const state: DrawerStateProps = {};
```

**Signature**

```ts
interface DrawerStateProps {
  disabled?: boolean;
  open?: boolean;
  styles?: DrawerStyleOverrides;
}
```

#### `DrawerRootProps` {#drawerrootprops}

Props for the drawer root component.

**Copyable example**

```ts
import type { DrawerRootProps } from "@kovojs/ui/drawer";
const props: DrawerRootProps = { children: 'Content' };
```

**Signature**

```ts
interface DrawerRootProps extends DrawerStateProps {
  children?: ComponentChild;
  id?: string;
}
```

#### `DrawerTriggerProps` {#drawertriggerprops}

Props for the drawer trigger component.

**Copyable example**

```ts
import type { DrawerTriggerProps } from "@kovojs/ui/drawer";
const props: DrawerTriggerProps = { contentId: 'content-id', children: 'Content' };
```

**Signature**

```ts
interface DrawerTriggerProps extends DrawerStateProps {
  children?: ComponentChild;
  contentId: string;
  id?: string;
}
```

#### `DrawerContentProps` {#drawercontentprops}

Props for the drawer content component.

**Copyable example**

```ts
import type { DrawerContentProps } from "@kovojs/ui/drawer";
const props: DrawerContentProps = { contentId: 'content-id', titleId: 'title-id', children: 'Content' };
```

**Signature**

```ts
interface DrawerContentProps extends DrawerStateProps {
  children?: ComponentChild;
  contentId: string;
  descriptionId?: string;
  side?: DrawerSide;
  titleId: string;
}
```

#### `DrawerPartProps` {#drawerpartprops}

Props for the drawer part component.

**Copyable example**

```ts
import type { DrawerPartProps } from "@kovojs/ui/drawer";
const props: DrawerPartProps = { children: 'Content' };
```

**Signature**

```ts
interface DrawerPartProps {
  children?: ComponentChild;
  id?: string;
  styles?: DrawerStyleOverrides;
}
```

#### `DrawerCloseProps` {#drawercloseprops}

Props for the drawer close component.

**Copyable example**

```ts
import type { DrawerCloseProps } from "@kovojs/ui/drawer";
const props: DrawerCloseProps = { contentId: 'content-id', children: 'Content' };
```

**Signature**

```ts
interface DrawerCloseProps extends DrawerStateProps {
  children?: ComponentChild;
  contentId: string;
  id?: string;
}
```

## `@kovojs/ui/dropdown-menu`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/dropdown-menu.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/dropdown-menu.tsx)

### Values

#### `DropdownMenu` {#dropdownmenu}

Renders the styled dropdown menu primitive.

**Copyable example**

```ts
import { DropdownMenu } from "@kovojs/ui/dropdown-menu";
const component = DropdownMenu;
```

**Signature**

```ts
const DropdownMenu = component({
  render(props: DropdownMenuProps) {
    const attrs = dropdownMenuRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.open === undefined ? {} : { open: props.open }),
    });
    const styleAttrs = style.attrs(dropdownMenuStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `DropdownMenuTrigger` {#dropdownmenutrigger}

Renders the styled dropdown menu trigger primitive.

**Copyable example**

```ts
import { DropdownMenuTrigger } from "@kovojs/ui/dropdown-menu";
const component = DropdownMenuTrigger;
```

**Signature**

```ts
const DropdownMenuTrigger = component({
  render(props: DropdownMenuTriggerProps) {
    const attrs = dropdownMenuTriggerAttributes({
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.open === undefined ? {} : { open: props.open }),
    });
    const styleAttrs = style.attrs(dropdownMenuStyles.trigger, props.styles?.trigger);

    return (
      <button
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={attrs.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `DropdownMenuContent` {#dropdownmenucontent}

Renders the styled dropdown menu content primitive.

**Copyable example**

```ts
import { DropdownMenuContent } from "@kovojs/ui/dropdown-menu";
const component = DropdownMenuContent;
```

**Signature**

```ts
const DropdownMenuContent = component({
  render(props: DropdownMenuContentProps) {
    const attrs = dropdownMenuContentAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.open === undefined ? {} : { open: props.open }),
    });
    const styleAttrs = style.attrs(dropdownMenuStyles.content, props.styles?.content);

    return (
      <div
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `DropdownMenuItem` {#dropdownmenuitem}

Renders the styled dropdown menu item primitive.

**Copyable example**

```ts
import { DropdownMenuItem } from "@kovojs/ui/dropdown-menu";
const component = DropdownMenuItem;
```

**Signature**

```ts
const DropdownMenuItem = component({
  render(props: DropdownMenuItemProps) {
    const attrs = dropdownMenuItemAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.open === undefined ? {} : { open: props.open }),
    });
    const styleAttrs = style.attrs(dropdownMenuStyles.item, props.styles?.item);

    return (
      <button
        aria-disabled={attrs['aria-disabled']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        disabled={attrs['data-disabled'] === '' ? true : undefined}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
        type="button"
        value={attrs.value}
      >
        {props.children ?? props.itemLabel ?? props.itemValue}
      </button>
    );
  },
});
```

#### `DropdownMenuGroup` {#dropdownmenugroup}

Renders the styled dropdown menu group primitive.

**Copyable example**

```ts
import { DropdownMenuGroup } from "@kovojs/ui/dropdown-menu";
const component = DropdownMenuGroup;
```

**Signature**

```ts
const DropdownMenuGroup = component({
  render(props: DropdownMenuGroupProps) {
    const attrs = dropdownMenuGroupAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.open === undefined ? {} : { open: props.open }),
    });
    const styleAttrs = style.attrs(dropdownMenuStyles.group, props.styles?.group);

    return (
      <div
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `DropdownMenuSeparator` {#dropdownmenuseparator}

Renders the styled dropdown menu separator primitive.

**Copyable example**

```ts
import { DropdownMenuSeparator } from "@kovojs/ui/dropdown-menu";
const component = DropdownMenuSeparator;
```

**Signature**

```ts
const DropdownMenuSeparator = component({
  render(props: DropdownMenuSeparatorProps) {
    const attrs = dropdownMenuSeparatorAttributes(props.id === undefined ? {} : { id: props.id });
    const styleAttrs = style.attrs(dropdownMenuStyles.separator, props.styles?.separator);

    return <div {...styleAttrs} id={attrs.id} role={attrs.role} />;
  },
});
```

### Supporting types

#### `DropdownMenuStyleOverrides` {#dropdownmenustyleoverrides}

Style override slots accepted by the dropdown menu components.

**Copyable example**

```ts
import type { DropdownMenuStyleOverrides } from "@kovojs/ui/dropdown-menu";
const styles: DropdownMenuStyleOverrides = {};
```

**Signature**

```ts
interface DropdownMenuStyleOverrides {
  content?: style.StyleInput;
  group?: style.StyleInput;
  item?: style.StyleInput;
  root?: style.StyleInput;
  separator?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `DropdownMenuStateProps` {#dropdownmenustateprops}

Shared state props for the dropdown menu component family.

**Copyable example**

```ts
import type { DropdownMenuStateProps } from "@kovojs/ui/dropdown-menu";
const state: DropdownMenuStateProps = {};
```

**Signature**

```ts
interface DropdownMenuStateProps {
  disabled?: boolean;
  highlightedValue?: string;
  items?: readonly HeadlessDropdownMenuItem[];
  open?: boolean;
}
```

#### `DropdownMenuProps` {#dropdownmenuprops}

Props for the dropdown menu component.

**Copyable example**

```ts
import type { DropdownMenuProps } from "@kovojs/ui/dropdown-menu";
const props: DropdownMenuProps = { children: 'Content' };
```

**Signature**

```ts
interface DropdownMenuProps extends DropdownMenuStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: DropdownMenuStyleOverrides;
}
```

#### `DropdownMenuTriggerProps` {#dropdownmenutriggerprops}

Props for the dropdown menu trigger component.

**Copyable example**

```ts
import type { DropdownMenuTriggerProps } from "@kovojs/ui/dropdown-menu";
const props: DropdownMenuTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface DropdownMenuTriggerProps extends DropdownMenuStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  labelledBy?: string;
  styles?: DropdownMenuStyleOverrides;
}
```

#### `DropdownMenuContentProps` {#dropdownmenucontentprops}

Props for the dropdown menu content component.

**Copyable example**

```ts
import type { DropdownMenuContentProps } from "@kovojs/ui/dropdown-menu";
const props: DropdownMenuContentProps = { children: 'Content' };
```

**Signature**

```ts
interface DropdownMenuContentProps extends DropdownMenuStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: DropdownMenuStyleOverrides;
}
```

#### `DropdownMenuItemProps` {#dropdownmenuitemprops}

Props for the dropdown menu item component.

**Copyable example**

```ts
import type { DropdownMenuItemProps } from "@kovojs/ui/dropdown-menu";
const props: DropdownMenuItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface DropdownMenuItemProps extends DropdownMenuStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemLabel?: string;
  itemValue: string;
  styles?: DropdownMenuStyleOverrides;
}
```

#### `DropdownMenuGroupProps` {#dropdownmenugroupprops}

Props for the dropdown menu group component.

**Copyable example**

```ts
import type { DropdownMenuGroupProps } from "@kovojs/ui/dropdown-menu";
const props: DropdownMenuGroupProps = { children: 'Content' };
```

**Signature**

```ts
interface DropdownMenuGroupProps extends DropdownMenuStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: DropdownMenuStyleOverrides;
}
```

#### `DropdownMenuSeparatorProps` {#dropdownmenuseparatorprops}

Props for the dropdown menu separator component.

**Copyable example**

```ts
import type { DropdownMenuSeparatorProps } from "@kovojs/ui/dropdown-menu";
const props: DropdownMenuSeparatorProps = {};
```

**Signature**

```ts
interface DropdownMenuSeparatorProps {
  id?: string;
  styles?: DropdownMenuStyleOverrides;
}
```

## `@kovojs/ui/field`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/field.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/field.tsx)

### Values

#### `Field` {#field}

Renders the styled field primitive.

**Copyable example**

```ts
import { Field } from "@kovojs/ui/field";
const component = Field;
```

**Signature**

```ts
const Field = component({
  render(props: FieldProps) {
    const attrs = fieldRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.required === undefined ? {} : { required: props.required }),
    });
    const styleAttrs = style.attrs(fieldStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `FieldLabel` {#fieldlabel}

Renders the styled field label primitive.

**Copyable example**

```ts
import { FieldLabel } from "@kovojs/ui/field";
const component = FieldLabel;
```

**Signature**

```ts
const FieldLabel = component({
  render(props: FieldLabelProps) {
    const attrs = fieldLabelAttributes({
      ...(props.controlId === undefined ? {} : { controlId: props.controlId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.required === undefined ? {} : { required: props.required }),
    });
    const styleAttrs = style.attrs(fieldStyles.label, props.styles?.label);

    return (
      <label
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        for={attrs.for}
        id={attrs.id}
      >
        {props.children}
      </label>
    );
  },
});
```

#### `FieldControl` {#fieldcontrol}

Renders the styled field control primitive.

**Copyable example**

```ts
import { FieldControl } from "@kovojs/ui/field";
const component = FieldControl;
```

**Signature**

```ts
const FieldControl = component({
  render(props: FieldControlProps) {
    const attrs = fieldControlAttributes({
      ...(props.autoComplete === undefined ? {} : { autoComplete: props.autoComplete }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputMode === undefined ? {} : { inputMode: props.inputMode }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.maxLength === undefined ? {} : { maxLength: props.maxLength }),
      ...(props.minLength === undefined ? {} : { minLength: props.minLength }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.pattern === undefined ? {} : { pattern: props.pattern }),
      ...(props.required === undefined ? {} : { required: props.required }),
    });
    const styleAttrs = style.attrs(fieldStyles.control, props.styles?.control);

    return (
      <input
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-invalid={attrs['aria-invalid']}
        autoComplete={attrs.autoComplete}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        inputMode={attrs.inputMode}
        maxLength={attrs.maxLength}
        minLength={attrs.minLength}
        name={attrs.name}
        pattern={attrs.pattern}
        placeholder={props.placeholder}
        required={attrs.required}
        type={props.type ?? 'text'}
        value={props.value}
      />
    );
  },
});
```

#### `FieldTextarea` {#fieldtextarea}

Renders the styled field textarea primitive.

**Copyable example**

```ts
import { FieldTextarea } from "@kovojs/ui/field";
const component = FieldTextarea;
```

**Signature**

```ts
const FieldTextarea = component({
  render(props: FieldTextareaProps) {
    const attrs = fieldControlAttributes({
      ...(props.autoComplete === undefined ? {} : { autoComplete: props.autoComplete }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputMode === undefined ? {} : { inputMode: props.inputMode }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.maxLength === undefined ? {} : { maxLength: props.maxLength }),
      ...(props.minLength === undefined ? {} : { minLength: props.minLength }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
    });
    const styleAttrs = style.attrs(fieldStyles.textarea, props.styles?.textarea);

    return (
      <textarea
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-invalid={attrs['aria-invalid']}
        autoComplete={attrs.autoComplete}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        inputMode={attrs.inputMode}
        maxLength={attrs.maxLength}
        minLength={attrs.minLength}
        name={attrs.name}
        placeholder={props.placeholder}
        required={attrs.required}
        rows={props.rows}
      >
        {props.children}
      </textarea>
    );
  },
});
```

#### `FieldSelect` {#fieldselect}

Renders the styled field select primitive.

**Copyable example**

```ts
import { FieldSelect } from "@kovojs/ui/field";
const component = FieldSelect;
```

**Signature**

```ts
const FieldSelect = component({
  render(props: FieldSelectProps) {
    const attrs = fieldControlAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
    });
    const styleAttrs = style.attrs(fieldStyles.select, props.styles?.select);

    return (
      <select
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-invalid={attrs['aria-invalid']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        name={attrs.name}
        required={attrs.required}
        value={props.value}
      >
        {props.children}
      </select>
    );
  },
});
```

#### `FieldSelectOption` {#fieldselectoption}

Renders the styled field select option primitive.

**Copyable example**

```ts
import { FieldSelectOption } from "@kovojs/ui/field";
const component = FieldSelectOption;
```

**Signature**

```ts
const FieldSelectOption = component({
  render(props: FieldSelectOptionProps) {
    const styleAttrs = style.attrs(fieldStyles.selectOption, props.styles?.selectOption);

    return (
      <option
        {...styleAttrs}
        {...passThroughProps(props)}
        disabled={props.disabled}
        selected={props.selected}
        value={props.value}
      >
        {props.children}
      </option>
    );
  },
});
```

#### `FieldDescription` {#fielddescription}

Renders the styled field description primitive.

**Copyable example**

```ts
import { FieldDescription } from "@kovojs/ui/field";
const component = FieldDescription;
```

**Signature**

```ts
const FieldDescription = component({
  render(props: FieldMessageProps) {
    const attrs = fieldDescriptionAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.visible === undefined ? {} : { visible: props.visible }),
    });
    const styleAttrs = style.attrs(fieldStyles.description, props.styles?.description);

    return (
      <p
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        hidden={attrs.hidden}
        id={attrs.id}
      >
        {props.children}
      </p>
    );
  },
});
```

#### `FieldErrorMessage` {#fielderrormessage}

Renders the styled field error primitive.

**Copyable example**

```ts
import { FieldErrorMessage } from "@kovojs/ui/field";
const component = FieldErrorMessage;
```

**Signature**

```ts
const FieldErrorMessage = component({
  render(props: FieldMessageProps) {
    const attrs = fieldErrorAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.visible === undefined ? {} : { visible: props.visible }),
    });
    const styleAttrs = style.attrs(fieldStyles.error, props.styles?.error);

    return (
      <p
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </p>
    );
  },
});
```

#### `Fieldset` {#fieldset}

Renders the styled fieldset primitive.

**Copyable example**

```ts
import { Fieldset } from "@kovojs/ui/field";
const component = Fieldset;
```

**Signature**

```ts
const Fieldset = component({
  render(props: FieldsetProps) {
    const attrs = fieldsetRootAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
    });
    const styleAttrs = style.attrs(fieldStyles.fieldset, props.styles?.fieldset);

    return (
      <fieldset
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-invalid={attrs['aria-invalid']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        name={attrs.name}
      >
        {props.children}
      </fieldset>
    );
  },
});
```

#### `FieldsetLegend` {#fieldsetlegend}

Renders the styled fieldset legend primitive.

**Copyable example**

```ts
import { FieldsetLegend } from "@kovojs/ui/field";
const component = FieldsetLegend;
```

**Signature**

```ts
const FieldsetLegend = component({
  render(props: FieldsetLegendProps) {
    const attrs = fieldsetLegendAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.required === undefined ? {} : { required: props.required }),
    });
    const styleAttrs = style.attrs(fieldStyles.fieldsetLegend, props.styles?.fieldsetLegend);

    return (
      <legend
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        id={attrs.id}
      >
        {props.children}
      </legend>
    );
  },
});
```

### Supporting types

#### `FieldStyleOverrides` {#fieldstyleoverrides}

Style override slots accepted by the field components.

**Copyable example**

```ts
import type { FieldStyleOverrides } from "@kovojs/ui/field";
const styles: FieldStyleOverrides = {};
```

**Signature**

```ts
interface FieldStyleOverrides {
  control?: style.StyleInput;
  description?: style.StyleInput;
  error?: style.StyleInput;
  fieldset?: style.StyleInput;
  fieldsetLegend?: style.StyleInput;
  label?: style.StyleInput;
  root?: style.StyleInput;
  select?: style.StyleInput;
  selectOption?: style.StyleInput;
  textarea?: style.StyleInput;
}
```

#### `FieldStateProps` {#fieldstateprops}

Shared state props for the field component family.

**Copyable example**

```ts
import type { FieldStateProps } from "@kovojs/ui/field";
const state: FieldStateProps = {};
```

**Signature**

```ts
interface FieldStateProps {
  disabled?: boolean;
  invalid?: boolean;
  required?: boolean;
}
```

#### `FieldProps` {#fieldprops}

Props for the field component.

**Copyable example**

```ts
import type { FieldProps } from "@kovojs/ui/field";
const props: FieldProps = { children: 'Content' };
```

**Signature**

```ts
interface FieldProps extends FieldStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: FieldStyleOverrides;
}
```

#### `FieldLabelProps` {#fieldlabelprops}

Props for the field label component.

**Copyable example**

```ts
import type { FieldLabelProps } from "@kovojs/ui/field";
const props: FieldLabelProps = { children: 'Content' };
```

**Signature**

```ts
interface FieldLabelProps extends FieldStateProps {
  children?: ComponentChild;
  controlId?: string;
  id?: string;
  styles?: FieldStyleOverrides;
}
```

#### `FieldControlProps` {#fieldcontrolprops}

Props for the field control component.

**Copyable example**

```ts
import type { FieldControlProps } from "@kovojs/ui/field";
const props: FieldControlProps = {};
```

**Signature**

```ts
interface FieldControlProps extends FieldStateProps {
  autoComplete?: string;
  descriptionId?: string;
  errorId?: string;
  form?: string;
  id?: string;
  inputMode?: string;
  maxLength?: number;
  minLength?: number;
  name?: string;
  pattern?: string;
  placeholder?: string;
  styles?: FieldStyleOverrides;
  type?: string;
  value?: string;
}
```

#### `FieldTextareaProps` {#fieldtextareaprops}

Props for the field textarea component.

**Copyable example**

```ts
import type { FieldTextareaProps } from "@kovojs/ui/field";
const props: FieldTextareaProps = { children: 'Content' };
```

**Signature**

```ts
interface FieldTextareaProps extends FieldStateProps {
  autoComplete?: string;
  children?: ComponentChild;
  descriptionId?: string;
  errorId?: string;
  form?: string;
  id?: string;
  inputMode?: string;
  maxLength?: number;
  minLength?: number;
  name?: string;
  placeholder?: string;
  rows?: number;
  styles?: FieldStyleOverrides;
}
```

#### `FieldSelectProps` {#fieldselectprops}

Props for the field select component.

**Copyable example**

```ts
import type { FieldSelectProps } from "@kovojs/ui/field";
const props: FieldSelectProps = { children: 'Content' };
```

**Signature**

```ts
interface FieldSelectProps extends FieldStateProps {
  children?: ComponentChild;
  descriptionId?: string;
  errorId?: string;
  form?: string;
  id?: string;
  name?: string;
  styles?: FieldStyleOverrides;
  value?: string;
}
```

#### `FieldSelectOptionProps` {#fieldselectoptionprops}

Props for the field select option component.

**Copyable example**

```ts
import type { FieldSelectOptionProps } from "@kovojs/ui/field";
const props: FieldSelectOptionProps = { children: 'Content' };
```

**Signature**

```ts
interface FieldSelectOptionProps {
  children?: ComponentChild;
  disabled?: boolean;
  selected?: boolean;
  styles?: FieldStyleOverrides;
  value?: string;
}
```

#### `FieldMessageProps` {#fieldmessageprops}

Props for the field message component.

**Copyable example**

```ts
import type { FieldMessageProps } from "@kovojs/ui/field";
const props: FieldMessageProps = { children: 'Content' };
```

**Signature**

```ts
interface FieldMessageProps extends FieldStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: FieldStyleOverrides;
  visible?: boolean;
}
```

#### `FieldsetProps` {#fieldsetprops}

Props for the fieldset component.

**Copyable example**

```ts
import type { FieldsetProps } from "@kovojs/ui/field";
const props: FieldsetProps = { children: 'Content' };
```

**Signature**

```ts
interface FieldsetProps extends FieldStateProps {
  children?: ComponentChild;
  descriptionId?: string;
  errorId?: string;
  form?: string;
  id?: string;
  name?: string;
  styles?: FieldStyleOverrides;
}
```

#### `FieldsetLegendProps` {#fieldsetlegendprops}

Props for the fieldset legend component.

**Copyable example**

```ts
import type { FieldsetLegendProps } from "@kovojs/ui/field";
const props: FieldsetLegendProps = { children: 'Content' };
```

**Signature**

```ts
interface FieldsetLegendProps extends FieldStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: FieldStyleOverrides;
}
```

## `@kovojs/ui/hover-card`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/hover-card.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/hover-card.tsx)

### Values

#### `HoverCard` {#hovercard}

Renders the styled hover card primitive.

**Copyable example**

```ts
import { HoverCard } from "@kovojs/ui/hover-card";
const component = HoverCard;
```

**Signature**

```ts
const HoverCard = component({
  render(props: HoverCardProps) {
    const attrs = hoverCardRootAttributes(hoverCardState(props));
    const styleAttrs = style.attrs(hoverCardStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `HoverCardTrigger` {#hovercardtrigger}

Renders the styled hover card trigger primitive.

**Copyable example**

```ts
import { HoverCardTrigger } from "@kovojs/ui/hover-card";
const component = HoverCardTrigger;
```

**Signature**

```ts
const HoverCardTrigger = component({
  render(props: HoverCardTriggerProps) {
    const attrs = hoverCardTriggerAttributes({
      ...hoverCardState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    return (
      <a
        {...styleAttributes(hoverCardStyles.trigger, props.styles?.trigger)}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-disabled={props.disabled === true ? 'true' : undefined}
        aria-expanded={attrs['aria-expanded']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        // SECURITY_FINDINGS.md H3: sanitize the caller href so a dangerous
        // scheme is neutralized to the '#' fallback. Existing semantics kept:
        // omit href when disabled, default to '#' when no href is supplied.
        href={props.disabled === true ? undefined : safeUrl(props.href)}
        id={props.id}
        kovo-hover-card={attrs['kovo-hover-card']}
      >
        {props.children}
      </a>
    );
  },
});
```

#### `HoverCardContent` {#hovercardcontent}

Renders the styled hover card content primitive.

**Copyable example**

```ts
import { HoverCardContent } from "@kovojs/ui/hover-card";
const component = HoverCardContent;
```

**Signature**

```ts
const HoverCardContent = component({
  render(props: HoverCardContentProps) {
    const attrs = hoverCardContentAttributes({
      ...hoverCardState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(hoverCardStyles.content, props.styles?.content);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        popover={attrs.popover}
      >
        {props.children}
      </div>
    );
  },
});
```

### Supporting types

#### `HoverCardStyleOverrides` {#hovercardstyleoverrides}

Style override slots accepted by the hover card components.

**Copyable example**

```ts
import type { HoverCardStyleOverrides } from "@kovojs/ui/hover-card";
const styles: HoverCardStyleOverrides = {};
```

**Signature**

```ts
interface HoverCardStyleOverrides {
  content?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `HoverCardStateProps` {#hovercardstateprops}

Shared state props for the hover card component family.

**Copyable example**

```ts
import type { HoverCardStateProps } from "@kovojs/ui/hover-card";
const state: HoverCardStateProps = {};
```

**Signature**

```ts
interface HoverCardStateProps {
  disabled?: boolean;
  open?: boolean;
}
```

#### `HoverCardProps` {#hovercardprops}

Props for the hover card component.

**Copyable example**

```ts
import type { HoverCardProps } from "@kovojs/ui/hover-card";
const props: HoverCardProps = { children: 'Content' };
```

**Signature**

```ts
interface HoverCardProps extends HoverCardStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: HoverCardStyleOverrides;
}
```

#### `HoverCardTriggerProps` {#hovercardtriggerprops}

Props for the hover card trigger component.

**Copyable example**

```ts
import type { HoverCardTriggerProps } from "@kovojs/ui/hover-card";
const props: HoverCardTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface HoverCardTriggerProps extends HoverCardStateProps {
  children?: ComponentChild;
  contentId?: string;
  href?: string | TrustedUrl;
  id?: string;
  styles?: HoverCardStyleOverrides;
}
```

#### `HoverCardContentProps` {#hovercardcontentprops}

Props for the hover card content component.

**Copyable example**

```ts
import type { HoverCardContentProps } from "@kovojs/ui/hover-card";
const props: HoverCardContentProps = { children: 'Content' };
```

**Signature**

```ts
interface HoverCardContentProps extends HoverCardStateProps {
  children?: ComponentChild;
  contentId?: string;
  styles?: HoverCardStyleOverrides;
}
```

## `@kovojs/ui/kbd`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/kbd.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/kbd.tsx)

### Values

#### `Kbd` {#kbd}

Renders the styled keyboard key primitive.

**Copyable example**

```ts
import { Kbd } from "@kovojs/ui/kbd";
const component = Kbd;
```

**Signature**

```ts
const Kbd = component({
  render(props: KbdProps) {
    const attrs = style.attrs(kbdStyles.root, props.style);

    return <kbd {...attrs}>{props.children}</kbd>;
  },
});
```

### Supporting types

#### `KbdProps` {#kbdprops}

Props for the keyboard key component.

**Copyable example**

```ts
import type { KbdProps } from "@kovojs/ui/kbd";
const props: KbdProps = { children: 'Content' };
```

**Signature**

```ts
interface KbdProps {
  children?: ComponentChild;
  style?: style.StyleInput;
}
```

## `@kovojs/ui/menubar`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/menubar.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/menubar.tsx)

### Values

#### `Menubar` {#menubar}

Renders the styled menubar primitive.

**Copyable example**

```ts
import { Menubar } from "@kovojs/ui/menubar";
const component = Menubar;
```

**Signature**

```ts
const Menubar = component({
  render(props: MenubarProps) {
    const attrs = menubarRootAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.openValue === undefined ? {} : { openValue: props.openValue }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
    });
    const styleAttrs = style.attrs(menubarStyles.root, props.styles?.root);

    return (
      <div
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-label={attrs['aria-label']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-orientation={attrs['aria-orientation']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `MenubarItem` {#menubaritem}

Renders the styled menubar item primitive.

**Copyable example**

```ts
import { MenubarItem } from "@kovojs/ui/menubar";
const component = MenubarItem;
```

**Signature**

```ts
const MenubarItem = component({
  render(props: MenubarItemProps) {
    const attrs = menubarItemAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      ...(props.itemParentValue === undefined ? {} : { itemParentValue: props.itemParentValue }),
      itemValue: props.itemValue,
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.openValue === undefined ? {} : { openValue: props.openValue }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
    });
    const styleAttrs = style.attrs(menubarStyles.item, props.styles?.item);

    return (
      <button
        aria-controls={attrs['aria-controls']}
        aria-disabled={attrs['aria-disabled']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        disabled={attrs['data-disabled'] === '' ? true : undefined}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
        type="button"
        value={attrs.value}
      >
        {props.children ?? props.itemLabel ?? props.itemValue ?? ''}
      </button>
    );
  },
});
```

#### `MenubarSubmenu` {#menubarsubmenu}

Renders the styled menubar submenu primitive.

**Copyable example**

```ts
import { MenubarSubmenu } from "@kovojs/ui/menubar";
const component = MenubarSubmenu;
```

**Signature**

```ts
const MenubarSubmenu = component({
  render(props: MenubarSubmenuProps) {
    const attrs = menubarSubmenuAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.openValue === undefined ? {} : { openValue: props.openValue }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      value: props.value,
    });
    const styleAttrs = style.attrs(menubarStyles.submenu, props.styles?.submenu);

    return (
      <div
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `MenubarGroup` {#menubargroup}

Renders the styled menubar group primitive.

**Copyable example**

```ts
import { MenubarGroup } from "@kovojs/ui/menubar";
const component = MenubarGroup;
```

**Signature**

```ts
const MenubarGroup = component({
  render(props: MenubarGroupProps) {
    const attrs = menubarGroupAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.openValue === undefined ? {} : { openValue: props.openValue }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
    });
    const styleAttrs = style.attrs(menubarStyles.group, props.styles?.group);

    return (
      <div
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `MenubarSeparator` {#menubarseparator}

Renders the styled menubar separator primitive.

**Copyable example**

```ts
import { MenubarSeparator } from "@kovojs/ui/menubar";
const component = MenubarSeparator;
```

**Signature**

```ts
const MenubarSeparator = component({
  render(props: MenubarSeparatorProps) {
    const attrs = menubarSeparatorAttributes(props.id === undefined ? {} : { id: props.id });
    const styleAttrs = style.attrs(menubarStyles.separator, props.styles?.separator);

    return <div {...styleAttrs} id={attrs.id} role={attrs.role} />;
  },
});
```

### Supporting types

#### `MenubarStyleOverrides` {#menubarstyleoverrides}

Style override slots accepted by the menubar components.

**Copyable example**

```ts
import type { MenubarStyleOverrides } from "@kovojs/ui/menubar";
const styles: MenubarStyleOverrides = {};
```

**Signature**

```ts
interface MenubarStyleOverrides {
  group?: style.StyleInput;
  item?: style.StyleInput;
  root?: style.StyleInput;
  separator?: style.StyleInput;
  submenu?: style.StyleInput;
}
```

#### `MenubarStateProps` {#menubarstateprops}

Shared state props for the menubar component family.

**Copyable example**

```ts
import type { MenubarStateProps } from "@kovojs/ui/menubar";
const state: MenubarStateProps = {};
```

**Signature**

```ts
interface MenubarStateProps {
  activeValue?: string;
  dir?: TextDirection;
  disabled?: boolean;
  items?: readonly HeadlessMenubarItem[];
  loop?: boolean;
  openValue?: string | undefined;
  orientation?: CollectionOrientation;
}
```

#### `MenubarProps` {#menubarprops}

Props for the menubar component.

**Copyable example**

```ts
import type { MenubarProps } from "@kovojs/ui/menubar";
const props: MenubarProps = { children: 'Content' };
```

**Signature**

```ts
interface MenubarProps extends MenubarStateProps {
  children?: ComponentChild;
  descriptionId?: string;
  id?: string;
  label?: string;
  labelledBy?: string;
  styles?: MenubarStyleOverrides;
}
```

#### `MenubarItemProps` {#menubaritemprops}

Props for the menubar item component.

**Copyable example**

```ts
import type { MenubarItemProps } from "@kovojs/ui/menubar";
const props: MenubarItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface MenubarItemProps extends MenubarStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  itemDisabled?: boolean;
  itemLabel?: string;
  itemParentValue?: string;
  itemValue: string;
  styles?: MenubarStyleOverrides;
}
```

#### `MenubarSubmenuProps` {#menubarsubmenuprops}

Props for the menubar submenu component.

**Copyable example**

```ts
import type { MenubarSubmenuProps } from "@kovojs/ui/menubar";
const props: MenubarSubmenuProps = { value: 'value', children: 'Content' };
```

**Signature**

```ts
interface MenubarSubmenuProps extends MenubarStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: MenubarStyleOverrides;
  value: string;
}
```

#### `MenubarGroupProps` {#menubargroupprops}

Props for the menubar group component.

**Copyable example**

```ts
import type { MenubarGroupProps } from "@kovojs/ui/menubar";
const props: MenubarGroupProps = { children: 'Content' };
```

**Signature**

```ts
interface MenubarGroupProps extends MenubarStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: MenubarStyleOverrides;
}
```

#### `MenubarSeparatorProps` {#menubarseparatorprops}

Props for the menubar separator component.

**Copyable example**

```ts
import type { MenubarSeparatorProps } from "@kovojs/ui/menubar";
const props: MenubarSeparatorProps = {};
```

**Signature**

```ts
interface MenubarSeparatorProps {
  id?: string;
  styles?: MenubarStyleOverrides;
}
```

## `@kovojs/ui/meter`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/meter.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/meter.tsx)

### Values

#### `Meter` {#meter}

Renders the styled meter primitive.

**Copyable example**

```ts
import { Meter } from "@kovojs/ui/meter";
const component = Meter;
```

**Signature**

```ts
const Meter = component({
  render(props: MeterProps) {
    const attrs = meterRootAttributes({
      ...(props.high === undefined ? {} : { high: props.high }),
      ...(props.low === undefined ? {} : { low: props.low }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.optimum === undefined ? {} : { optimum: props.optimum }),
      ...(props.value === undefined ? {} : { value: props.value }),
      ...(props.valueText === undefined ? {} : { valueText: props.valueText }),
    });
    const slots = props.styles;
    // The `style` prop is NOT applied to the root track: a call-site reactive
    // `style={{ width }}` (the only way to emit a `data-bind:style`) would
    // otherwise shrink the whole track. It is forwarded as the indicator fill
    // binding below (see bindingProps) so the visible bar can animate client-side.
    const rootStyleAttrs = style.attrs(meterStyles.root, slots?.root);
    const nativeStyleAttrs = style.attrs(meterStyles.native, slots?.native);
    const indicatorStyleAttrs = style.attrs(meterStyles.indicator, slots?.indicator);
    const indicatorWidth = fillStyle(attrs['data-value'], attrs['data-min'], attrs['data-max']);

    return (
      <div {...rootStyleAttrs} data-state={attrs['data-state']}>
        <meter
          {...nativeStyleAttrs}
          {...passThroughProps(props)}
          aria-valuetext={attrs['aria-valuetext']}
          data-high={attrs['data-high']}
          data-low={attrs['data-low']}
          data-max={attrs['data-max']}
          data-min={attrs['data-min']}
          data-optimum={attrs['data-optimum']}
          data-state={attrs['data-state']}
          data-value={attrs['data-value']}
          high={attrs.high}
          low={attrs.low}
          max={attrs.max}
          min={attrs.min}
          optimum={attrs.optimum}
          value={attrs.value}
        >
          {props.children}
        </meter>
        <span
          {...indicatorStyleAttrs}
          {...bindingProps(props, ['style', 'data-state'])}
          aria-hidden="true"
          data-state={attrs['data-state']}
          style={{ width: indicatorWidth }}
        />
      </div>
    );
  },
});
```

### Supporting types

#### `MeterStyleOverrides` {#meterstyleoverrides}

Style override slots accepted by the meter components.

**Copyable example**

```ts
import type { MeterStyleOverrides } from "@kovojs/ui/meter";
const styles: MeterStyleOverrides = {};
```

**Signature**

```ts
interface MeterStyleOverrides {
  indicator?: style.StyleInput;
  native?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `MeterProps` {#meterprops}

Props for the meter component.

**Copyable example**

```ts
import type { MeterProps } from "@kovojs/ui/meter";
const props: MeterProps = { children: 'Content' };
```

**Signature**

```ts
interface MeterProps {
  children?: ComponentChild;
  high?: number;
  low?: number;
  max?: number;
  min?: number;
  optimum?: number;
  style?: style.StyleInput;
  styles?: MeterStyleOverrides;
  value?: number;
  valueText?: string;
}
```

## `@kovojs/ui/navigation-menu`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/navigation-menu.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/navigation-menu.tsx)

### Values

#### `NavigationMenu` {#navigationmenu}

Renders the styled navigation menu primitive.

**Copyable example**

```ts
import { NavigationMenu } from "@kovojs/ui/navigation-menu";
const component = NavigationMenu;
```

**Signature**

```ts
const NavigationMenu = component({
  render(props: NavigationMenuProps) {
    const attrs = navigationMenuRootAttributes({
      ...toNavigationState(props),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
    });
    const styleAttrs = style.attrs(navigationMenuStyles.root, props.styles?.root);

    return (
      <nav
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-label={attrs['aria-label']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-orientation={attrs['aria-orientation']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        data-state={attrs['data-state']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </nav>
    );
  },
});
```

#### `NavigationMenuList` {#navigationmenulist}

Renders the styled navigation menu list primitive.

**Copyable example**

```ts
import { NavigationMenuList } from "@kovojs/ui/navigation-menu";
const component = NavigationMenuList;
```

**Signature**

```ts
const NavigationMenuList = component({
  render(props: NavigationMenuListProps) {
    const attrs = navigationMenuListAttributes({
      ...toNavigationState(props),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
    });
    const styleAttrs = style.attrs(navigationMenuStyles.list, props.styles?.list);

    return (
      <div
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        data-state={attrs['data-state']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `NavigationMenuItem` {#navigationmenuitem}

Renders the styled navigation menu item primitive.

**Copyable example**

```ts
import { NavigationMenuItem } from "@kovojs/ui/navigation-menu";
const component = NavigationMenuItem;
```

**Signature**

```ts
const NavigationMenuItem = component({
  render(props: NavigationMenuItemProps) {
    const attrs = navigationMenuItemAttributes({
      ...toNavigationState(props),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      itemValue: props.itemValue,
    });
    const styleAttrs = style.attrs(navigationMenuStyles.item, props.styles?.item);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `NavigationMenuTrigger` {#navigationmenutrigger}

Renders the styled navigation menu trigger primitive.

**Copyable example**

```ts
import { NavigationMenuTrigger } from "@kovojs/ui/navigation-menu";
const component = NavigationMenuTrigger;
```

**Signature**

```ts
const NavigationMenuTrigger = component({
  render(props: NavigationMenuTriggerProps) {
    const attrs = navigationMenuTriggerAttributes({
      ...toNavigationState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      itemValue: props.itemValue,
    });
    const styleAttrs = style.attrs(navigationMenuStyles.trigger, props.styles?.trigger);

    return (
      <button
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={attrs.id}
        tabIndex={attrs.tabIndex}
        type={attrs.type}
        value={attrs.value}
      >
        {/* SPEC.md §4.5/§5.2: the @kovojs/server JSX runtime escapes scalar text
            children exactly once, so pass itemLabel/itemValue raw — pre-escaping here
            would double-escape (`AT&T` → `AT&amp;amp;T`). props.children is the
            composition slot and may carry framework-rendered HTML, so leave it raw. */}
        {props.children ?? props.itemLabel ?? props.itemValue}
        {/* shadcn-style chevron: a real (decorative) icon child carrying the trigger's
            [data-state] so triggerIcon can rotate it 180deg when the menu is open. */}
        <ChevronDown style={navigationMenuStyles.triggerIcon} data-state={attrs['data-state']} />
      </button>
    );
  },
});
```

#### `NavigationMenuContent` {#navigationmenucontent}

Renders the styled navigation menu content primitive.

**Copyable example**

```ts
import { NavigationMenuContent } from "@kovojs/ui/navigation-menu";
const component = NavigationMenuContent;
```

**Signature**

```ts
const NavigationMenuContent = component({
  render(props: NavigationMenuContentProps) {
    const attrs = navigationMenuContentAttributes({
      ...toNavigationState(props),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      value: props.value,
    });
    const styleAttrs = style.attrs(navigationMenuStyles.content, props.styles?.content);

    return (
      <div
        aria-labelledby={attrs['aria-labelledby']}
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `NavigationMenuLink` {#navigationmenulink}

Renders the styled navigation menu link primitive.

**Copyable example**

```ts
import { NavigationMenuLink } from "@kovojs/ui/navigation-menu";
const component = NavigationMenuLink;
```

**Signature**

```ts
const NavigationMenuLink = component({
  render(props: NavigationMenuLinkProps) {
    const hrefCandidate = props.href;
    const attrs = navigationMenuLinkAttributes({
      ...toNavigationState(props),
      ...(typeof hrefCandidate === 'string' ? { href: hrefCandidate } : {}),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      itemValue: props.itemValue,
    });
    return (
      <a
        {...styleAttributes(navigationMenuStyles.link, props.styles?.link)}
        {...passThroughProps(props)}
        aria-disabled={attrs['aria-disabled']}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        href={
          attrs['aria-disabled'] === 'true' || hrefCandidate === undefined
            ? undefined
            : typeof hrefCandidate === 'string'
              ? attrs.href
              : safeUrl(hrefCandidate)
        }
        id={attrs.id}
        tabIndex={attrs.tabIndex}
        value={attrs.value}
      >
        {/*
          SPEC.md §4.5/§5.2: the JSX runtime escapes the scalar itemLabel/itemValue
          text fallback exactly once, so pass it raw (pre-escaping would
          double-escape); leave props.children — the composition slot — raw.
        */}
        {props.children ?? props.itemLabel ?? props.itemValue}
      </a>
    );
  },
});
```

#### `NavigationMenuViewport` {#navigationmenuviewport}

Renders the styled navigation menu viewport primitive.

**Copyable example**

```ts
import { NavigationMenuViewport } from "@kovojs/ui/navigation-menu";
const component = NavigationMenuViewport;
```

**Signature**

```ts
const NavigationMenuViewport = component({
  render(props: NavigationMenuPartProps) {
    const attrs = navigationMenuViewportAttributes(toNavigationState(props));
    const styleAttrs = style.attrs(navigationMenuStyles.viewport, props.styles?.viewport);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `NavigationMenuIndicator` {#navigationmenuindicator}

Renders the styled navigation menu indicator primitive.

**Copyable example**

```ts
import { NavigationMenuIndicator } from "@kovojs/ui/navigation-menu";
const component = NavigationMenuIndicator;
```

**Signature**

```ts
const NavigationMenuIndicator = component({
  render(props: NavigationMenuPartProps) {
    const attrs = navigationMenuIndicatorAttributes(toNavigationState(props));
    const styleAttrs = style.attrs(navigationMenuStyles.indicator, props.styles?.indicator);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

### Supporting types

#### `NavigationMenuStyleOverrides` {#navigationmenustyleoverrides}

Style override slots accepted by the navigation menu components.

**Copyable example**

```ts
import type { NavigationMenuStyleOverrides } from "@kovojs/ui/navigation-menu";
const styles: NavigationMenuStyleOverrides = {};
```

**Signature**

```ts
interface NavigationMenuStyleOverrides {
  content?: style.StyleInput;
  indicator?: style.StyleInput;
  item?: style.StyleInput;
  link?: style.StyleInput;
  list?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
  viewport?: style.StyleInput;
}
```

#### `NavigationMenuStateProps` {#navigationmenustateprops}

Shared state props for the navigation menu component family.

**Copyable example**

```ts
import type { NavigationMenuStateProps } from "@kovojs/ui/navigation-menu";
const state: NavigationMenuStateProps = {};
```

**Signature**

```ts
interface NavigationMenuStateProps {
  activeValue?: string;
  dir?: TextDirection;
  disabled?: boolean;
  items?: readonly HeadlessNavigationMenuItem[];
  loop?: boolean;
  openValue?: string | undefined;
  orientation?: CollectionOrientation;
}
```

#### `NavigationMenuProps` {#navigationmenuprops}

Props for the navigation menu component.

**Copyable example**

```ts
import type { NavigationMenuProps } from "@kovojs/ui/navigation-menu";
const props: NavigationMenuProps = { children: 'Content' };
```

**Signature**

```ts
interface NavigationMenuProps extends NavigationMenuStateProps {
  children?: ComponentChild;
  descriptionId?: string;
  id?: string;
  label?: string;
  labelledBy?: string;
  styles?: NavigationMenuStyleOverrides;
}
```

#### `NavigationMenuListProps` {#navigationmenulistprops}

Props for the navigation menu list component.

**Copyable example**

```ts
import type { NavigationMenuListProps } from "@kovojs/ui/navigation-menu";
const props: NavigationMenuListProps = { children: 'Content' };
```

**Signature**

```ts
interface NavigationMenuListProps extends NavigationMenuStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: NavigationMenuStyleOverrides;
}
```

#### `NavigationMenuItemProps` {#navigationmenuitemprops}

Props for the navigation menu item component.

**Copyable example**

```ts
import type { NavigationMenuItemProps } from "@kovojs/ui/navigation-menu";
const props: NavigationMenuItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface NavigationMenuItemProps extends NavigationMenuStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: NavigationMenuStyleOverrides;
}
```

#### `NavigationMenuTriggerProps` {#navigationmenutriggerprops}

Props for the navigation menu trigger component.

**Copyable example**

```ts
import type { NavigationMenuTriggerProps } from "@kovojs/ui/navigation-menu";
const props: NavigationMenuTriggerProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface NavigationMenuTriggerProps extends NavigationMenuItemProps {
  contentId?: string;
  itemLabel?: string;
}
```

#### `NavigationMenuContentProps` {#navigationmenucontentprops}

Props for the navigation menu content component.

**Copyable example**

```ts
import type { NavigationMenuContentProps } from "@kovojs/ui/navigation-menu";
const props: NavigationMenuContentProps = { value: 'value', children: 'Content' };
```

**Signature**

```ts
interface NavigationMenuContentProps extends NavigationMenuStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: NavigationMenuStyleOverrides;
  value: string;
}
```

#### `NavigationMenuLinkProps` {#navigationmenulinkprops}

Props for the navigation menu link component.

**Copyable example**

```ts
import type { NavigationMenuLinkProps } from "@kovojs/ui/navigation-menu";
const props: NavigationMenuLinkProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface NavigationMenuLinkProps extends NavigationMenuItemProps {
  href?: string | TrustedUrl;
  itemLabel?: string;
}
```

#### `NavigationMenuPartProps` {#navigationmenupartprops}

Props for the navigation menu part component.

**Copyable example**

```ts
import type { NavigationMenuPartProps } from "@kovojs/ui/navigation-menu";
const props: NavigationMenuPartProps = { children: 'Content' };
```

**Signature**

```ts
interface NavigationMenuPartProps extends NavigationMenuStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: NavigationMenuStyleOverrides;
}
```

## `@kovojs/ui/number-field`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/number-field.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/number-field.tsx)

### Values

#### `NumberField` {#numberfield}

Renders the styled number field primitive.

**Copyable example**

```ts
import { NumberField } from "@kovojs/ui/number-field";
const component = NumberField;
```

**Signature**

```ts
const NumberField = component({
  render(props: NumberFieldProps) {
    const attrs = numberFieldRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(numberFieldStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `NumberFieldControl` {#numberfieldcontrol}

Renders the styled number field control primitive.

**Copyable example**

```ts
import { NumberFieldControl } from "@kovojs/ui/number-field";
const component = NumberFieldControl;
```

**Signature**

```ts
const NumberFieldControl = component({
  render(props: NumberFieldProps) {
    const attrs = numberFieldRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(numberFieldStyles.control, props.styles?.control);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `NumberFieldInput` {#numberfieldinput}

Renders the styled number field input primitive.

**Copyable example**

```ts
import { NumberFieldInput } from "@kovojs/ui/number-field";
const component = NumberFieldInput;
```

**Signature**

```ts
const NumberFieldInput = component({
  render(props: NumberFieldInputProps) {
    const attrs = numberFieldInputAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(numberFieldStyles.input, props.styles?.input);

    return (
      <input
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-invalid={attrs['aria-invalid']}
        aria-label={attrs['aria-label']}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        max={attrs.max}
        min={attrs.min}
        name={attrs.name}
        required={attrs.required}
        step={attrs.step}
        type={attrs.type}
        value={attrs.value}
      />
    );
  },
});
```

#### `NumberFieldDecrement` {#numberfielddecrement}

Renders the styled number field decrement primitive.

**Copyable example**

```ts
import { NumberFieldDecrement } from "@kovojs/ui/number-field";
const component = NumberFieldDecrement;
```

**Signature**

```ts
const NumberFieldDecrement = component({
  render(props: NumberFieldButtonProps) {
    const attrs = numberFieldDecrementAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputId === undefined ? {} : { inputId: props.inputId }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(numberFieldStyles.button, props.styles?.button);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-label={attrs['aria-label']}
        data-action={attrs['data-action']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        disabled={attrs.disabled}
        id={attrs.id}
        type={attrs.type}
      >
        {props.children ?? '-'}
      </button>
    );
  },
});
```

#### `NumberFieldIncrement` {#numberfieldincrement}

Renders the styled number field increment primitive.

**Copyable example**

```ts
import { NumberFieldIncrement } from "@kovojs/ui/number-field";
const component = NumberFieldIncrement;
```

**Signature**

```ts
const NumberFieldIncrement = component({
  render(props: NumberFieldButtonProps) {
    const attrs = numberFieldIncrementAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputId === undefined ? {} : { inputId: props.inputId }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(numberFieldStyles.button, props.styles?.button);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-label={attrs['aria-label']}
        data-action={attrs['data-action']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        disabled={attrs.disabled}
        id={attrs.id}
        type={attrs.type}
      >
        {props.children ?? '+'}
      </button>
    );
  },
});
```

### Supporting types

#### `NumberFieldStyleOverrides` {#numberfieldstyleoverrides}

Style override slots accepted by the number field components.

**Copyable example**

```ts
import type { NumberFieldStyleOverrides } from "@kovojs/ui/number-field";
const styles: NumberFieldStyleOverrides = {};
```

**Signature**

```ts
interface NumberFieldStyleOverrides {
  button?: style.StyleInput;
  control?: style.StyleInput;
  input?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `NumberFieldStateProps` {#numberfieldstateprops}

Shared state props for the number field component family.

**Copyable example**

```ts
import type { NumberFieldStateProps } from "@kovojs/ui/number-field";
const state: NumberFieldStateProps = {};
```

**Signature**

```ts
interface NumberFieldStateProps {
  disabled?: boolean;
  invalid?: boolean;
  max?: number;
  min?: number;
  name?: string;
  required?: boolean;
  step?: number;
  value?: NumberFieldValue;
}
```

#### `NumberFieldProps` {#numberfieldprops}

Props for the number field component.

**Copyable example**

```ts
import type { NumberFieldProps } from "@kovojs/ui/number-field";
const props: NumberFieldProps = { children: 'Content' };
```

**Signature**

```ts
interface NumberFieldProps extends NumberFieldStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: NumberFieldStyleOverrides;
}
```

#### `NumberFieldInputProps` {#numberfieldinputprops}

Props for the number field input component.

**Copyable example**

```ts
import type { NumberFieldInputProps } from "@kovojs/ui/number-field";
const props: NumberFieldInputProps = {};
```

**Signature**

```ts
interface NumberFieldInputProps extends NumberFieldStateProps {
  descriptionId?: string;
  errorId?: string;
  form?: string;
  id?: string;
  label?: string;
  labelledBy?: string;
  styles?: NumberFieldStyleOverrides;
}
```

#### `NumberFieldButtonProps` {#numberfieldbuttonprops}

Props for the number field button component.

**Copyable example**

```ts
import type { NumberFieldButtonProps } from "@kovojs/ui/number-field";
const props: NumberFieldButtonProps = { children: 'Content' };
```

**Signature**

```ts
interface NumberFieldButtonProps extends NumberFieldStateProps {
  children?: ComponentChild;
  id?: string;
  inputId?: string;
  label?: string;
  styles?: NumberFieldStyleOverrides;
}
```

## `@kovojs/ui/otp-field`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/otp-field.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/otp-field.tsx)

### Values

#### `OtpField` {#otpfield}

Renders the styled otp field primitive.

**Copyable example**

```ts
import { OtpField } from "@kovojs/ui/otp-field";
const component = OtpField;
```

**Signature**

```ts
const OtpField = component({
  render(props: OtpFieldProps) {
    const attrs = otpFieldRootAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputMode === undefined ? {} : { inputMode: props.inputMode }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.length === undefined ? {} : { length: props.length }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.pattern === undefined ? {} : { pattern: props.pattern }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(otpFieldStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-invalid={attrs['aria-invalid']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-required={attrs['aria-required']}
        data-complete={attrs['data-complete']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `OtpFieldGroup` {#otpfieldgroup}

Renders the styled otp field group primitive.

**Copyable example**

```ts
import { OtpFieldGroup } from "@kovojs/ui/otp-field";
const component = OtpFieldGroup;
```

**Signature**

```ts
const OtpFieldGroup = component({
  render(props: OtpFieldGroupProps) {
    const styleAttrs = style.attrs(otpFieldStyles.group, props.styles?.group);
    return <div {...styleAttrs}>{props.children}</div>;
  },
});
```

#### `OtpFieldHiddenInput` {#otpfieldhiddeninput}

Renders the styled otp field hidden input primitive.

**Copyable example**

```ts
import { OtpFieldHiddenInput } from "@kovojs/ui/otp-field";
const component = OtpFieldHiddenInput;
```

**Signature**

```ts
const OtpFieldHiddenInput = component({
  render(props: OtpFieldHiddenInputProps) {
    const attrs = otpFieldHiddenInputAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputMode === undefined ? {} : { inputMode: props.inputMode }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.length === undefined ? {} : { length: props.length }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.pattern === undefined ? {} : { pattern: props.pattern }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(otpFieldStyles.hiddenInput, props.styles?.hiddenInput);

    return (
      <input
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-hidden={attrs['aria-hidden']}
        autoComplete={attrs.autoComplete}
        data-complete={attrs['data-complete']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        data-slot={attrs['data-slot']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        inputMode={attrs.inputMode}
        maxLength={attrs.maxLength}
        minLength={attrs.minLength}
        name={attrs.name}
        pattern={attrs.pattern}
        required={attrs.required}
        tabIndex={attrs.tabIndex}
        type={attrs.type}
        value={attrs.value}
      />
    );
  },
});
```

#### `OtpFieldInput` {#otpfieldinput}

Renders the styled otp field input primitive.

**Copyable example**

```ts
import { OtpFieldInput } from "@kovojs/ui/otp-field";
const component = OtpFieldInput;
```

**Signature**

```ts
const OtpFieldInput = component({
  render(props: OtpFieldInputProps) {
    const attrs = otpFieldInputAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputMode === undefined ? {} : { inputMode: props.inputMode }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.length === undefined ? {} : { length: props.length }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.pattern === undefined ? {} : { pattern: props.pattern }),
      ...(props.required === undefined ? {} : { required: props.required }),
      slotIndex: props.slotIndex,
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const isFirst = props.slotIndex === 0;
    const isLast = props.length !== undefined && props.slotIndex === props.length - 1;
    const styleAttrs = style.attrs(
      otpFieldStyles.input,
      isFirst ? otpFieldStyles.inputFirst : null,
      isLast ? otpFieldStyles.inputLast : null,
      props.styles?.input,
    );

    return (
      <input
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-invalid={attrs['aria-invalid']}
        aria-label={attrs['aria-label']}
        aria-labelledby={attrs['aria-labelledby']}
        autoComplete={attrs.autoComplete}
        data-complete={attrs['data-complete']}
        data-disabled={attrs['data-disabled']}
        data-filled={attrs['data-filled']}
        data-invalid={attrs['data-invalid']}
        data-required={attrs['data-required']}
        data-slot={attrs['data-slot']}
        disabled={attrs.disabled}
        id={attrs.id}
        inputMode={attrs.inputMode}
        maxLength={attrs.maxLength}
        pattern={attrs.pattern}
        required={attrs.required}
        type={attrs.type}
        value={attrs.value}
      />
    );
  },
});
```

### Supporting types

#### `OtpFieldStyleOverrides` {#otpfieldstyleoverrides}

Style override slots accepted by the otp field components.

**Copyable example**

```ts
import type { OtpFieldStyleOverrides } from "@kovojs/ui/otp-field";
const styles: OtpFieldStyleOverrides = {};
```

**Signature**

```ts
interface OtpFieldStyleOverrides {
  group?: style.StyleInput;
  hiddenInput?: style.StyleInput;
  input?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `OtpFieldStateProps` {#otpfieldstateprops}

Shared state props for the otp field component family.

**Copyable example**

```ts
import type { OtpFieldStateProps } from "@kovojs/ui/otp-field";
const state: OtpFieldStateProps = {};
```

**Signature**

```ts
interface OtpFieldStateProps {
  disabled?: boolean;
  form?: string;
  inputMode?: OtpFieldInputMode;
  invalid?: boolean;
  length?: number;
  name?: string;
  pattern?: string;
  required?: boolean;
  value?: string;
}
```

#### `OtpFieldProps` {#otpfieldprops}

Props for the otp field component.

**Copyable example**

```ts
import type { OtpFieldProps } from "@kovojs/ui/otp-field";
const props: OtpFieldProps = { children: 'Content' };
```

**Signature**

```ts
interface OtpFieldProps extends OtpFieldStateProps {
  children?: ComponentChild;
  descriptionId?: string;
  errorId?: string;
  id?: string;
  labelledBy?: string;
  styles?: OtpFieldStyleOverrides;
}
```

#### `OtpFieldHiddenInputProps` {#otpfieldhiddeninputprops}

Props for the otp field hidden input component.

**Copyable example**

```ts
import type { OtpFieldHiddenInputProps } from "@kovojs/ui/otp-field";
const props: OtpFieldHiddenInputProps = {};
```

**Signature**

```ts
interface OtpFieldHiddenInputProps extends OtpFieldStateProps {
  id?: string;
  styles?: OtpFieldStyleOverrides;
}
```

#### `OtpFieldInputProps` {#otpfieldinputprops}

Props for the otp field input component.

**Copyable example**

```ts
import type { OtpFieldInputProps } from "@kovojs/ui/otp-field";
const props: OtpFieldInputProps = { slotIndex: 0 };
```

**Signature**

```ts
interface OtpFieldInputProps extends OtpFieldStateProps {
  id?: string;
  label?: string;
  labelledBy?: string;
  slotIndex: number;
  styles?: OtpFieldStyleOverrides;
}
```

## `@kovojs/ui/popover`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/popover.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/popover.tsx)

### Values

#### `Popover` {#popover}

Renders the styled popover primitive.

**Copyable example**

```ts
import { Popover } from "@kovojs/ui/popover";
const component = Popover;
```

**Signature**

```ts
const Popover = component({
  render(props: PopoverProps) {
    const attrs = popoverRootAttributes(popoverState(props));
    const styleAttrs = style.attrs(popoverStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `PopoverTrigger` {#popovertrigger}

Renders the styled popover trigger primitive.

**Copyable example**

```ts
import { PopoverTrigger } from "@kovojs/ui/popover";
const component = PopoverTrigger;
```

**Signature**

```ts
const PopoverTrigger = component({
  render(props: PopoverTriggerProps) {
    const attrs = popoverTriggerAttributes({
      ...popoverState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(popoverStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        popovertarget={attrs.popovertarget}
        popovertargetaction={attrs.popovertargetaction}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `PopoverContent` {#popovercontent}

Renders the styled popover content primitive.

**Copyable example**

```ts
import { PopoverContent } from "@kovojs/ui/popover";
const component = PopoverContent;
```

**Signature**

```ts
const PopoverContent = component({
  render(props: PopoverContentProps) {
    const attrs = popoverContentAttributes({
      ...popoverState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(popoverStyles.content, props.styles?.content);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-state={attrs['data-state']}
        id={attrs.id}
        popover={attrs.popover}
      >
        {props.children}
      </div>
    );
  },
});
```

### Supporting types

#### `PopoverStyleOverrides` {#popoverstyleoverrides}

Style override slots accepted by the popover components.

**Copyable example**

```ts
import type { PopoverStyleOverrides } from "@kovojs/ui/popover";
const styles: PopoverStyleOverrides = {};
```

**Signature**

```ts
interface PopoverStyleOverrides {
  content?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `PopoverStateProps` {#popoverstateprops}

Shared state props for the popover component family.

**Copyable example**

```ts
import type { PopoverStateProps } from "@kovojs/ui/popover";
const state: PopoverStateProps = {};
```

**Signature**

```ts
interface PopoverStateProps {
  disabled?: boolean;
  open?: boolean;
}
```

#### `PopoverProps` {#popoverprops}

Props for the popover component.

**Copyable example**

```ts
import type { PopoverProps } from "@kovojs/ui/popover";
const props: PopoverProps = { children: 'Content' };
```

**Signature**

```ts
interface PopoverProps extends PopoverStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: PopoverStyleOverrides;
}
```

#### `PopoverTriggerProps` {#popovertriggerprops}

Props for the popover trigger component.

**Copyable example**

```ts
import type { PopoverTriggerProps } from "@kovojs/ui/popover";
const props: PopoverTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface PopoverTriggerProps extends PopoverStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: PopoverStyleOverrides;
}
```

#### `PopoverContentProps` {#popovercontentprops}

Props for the popover content component.

**Copyable example**

```ts
import type { PopoverContentProps } from "@kovojs/ui/popover";
const props: PopoverContentProps = { children: 'Content' };
```

**Signature**

```ts
interface PopoverContentProps extends PopoverStateProps {
  children?: ComponentChild;
  contentId?: string;
  styles?: PopoverStyleOverrides;
}
```

## `@kovojs/ui/progress`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/progress.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/progress.tsx)

### Values

#### `Progress` {#progress}

Renders the styled progress primitive.

**Copyable example**

```ts
import { Progress } from "@kovojs/ui/progress";
const component = Progress;
```

**Signature**

```ts
const Progress = component({
  render(props: ProgressProps) {
    const attrs = progressRootAttributes({
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.value === undefined ? {} : { value: props.value }),
      ...(props.valueText === undefined ? {} : { valueText: props.valueText }),
    });
    const slots = props.styles;
    // The `style` prop is NOT applied to the root track: a call-site reactive
    // `style={{ width }}` (the only way to emit a `data-bind:style`) would
    // otherwise shrink the whole track. It is forwarded as the indicator fill
    // binding below (see bindingProps) so the visible bar can animate client-side.
    const rootStyleAttrs = style.attrs(progressStyles.root, slots?.root);
    const nativeStyleAttrs = style.attrs(progressStyles.native, slots?.native);
    const indicatorStyleAttrs = style.attrs(progressStyles.indicator, slots?.indicator);
    const indicatorWidth = fillStyle(attrs['data-value'], attrs['data-max']);

    return (
      <div {...rootStyleAttrs} data-state={attrs['data-state']}>
        <progress
          {...nativeStyleAttrs}
          {...passThroughProps(props)}
          aria-valuetext={attrs['aria-valuetext']}
          data-max={attrs['data-max']}
          data-state={attrs['data-state']}
          data-value={attrs['data-value']}
          max={attrs.max}
          value={attrs.value}
        >
          {props.children}
        </progress>
        <span
          {...indicatorStyleAttrs}
          {...bindingProps(props, ['style', 'data-state'])}
          aria-hidden="true"
          data-state={attrs['data-state']}
          style={{ width: indicatorWidth }}
        />
      </div>
    );
  },
});
```

### Supporting types

#### `ProgressStyleOverrides` {#progressstyleoverrides}

Style override slots accepted by the progress components.

**Copyable example**

```ts
import type { ProgressStyleOverrides } from "@kovojs/ui/progress";
const styles: ProgressStyleOverrides = {};
```

**Signature**

```ts
interface ProgressStyleOverrides {
  indicator?: style.StyleInput;
  native?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `ProgressProps` {#progressprops}

Props for the progress component.

**Copyable example**

```ts
import type { ProgressProps } from "@kovojs/ui/progress";
const props: ProgressProps = { children: 'Content' };
```

**Signature**

```ts
interface ProgressProps {
  children?: ComponentChild;
  max?: number;
  style?: style.StyleInput;
  styles?: ProgressStyleOverrides;
  value?: number | null;
  valueText?: string;
}
```

## `@kovojs/ui/radio-group`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/radio-group.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/radio-group.tsx)

### Values

#### `RadioGroup` {#radiogroup}

Renders the styled radio group primitive.

**Copyable example**

```ts
import { RadioGroup } from "@kovojs/ui/radio-group";
const component = RadioGroup;
```

**Signature**

```ts
const RadioGroup = component({
  render(props: RadioGroupProps) {
    const attrs = radioGroupRootAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(radioGroupStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-invalid={attrs['aria-invalid']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-required={attrs['aria-required']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-orientation={attrs['data-orientation']}
        data-required={attrs['data-required']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `RadioGroupItem` {#radiogroupitem}

Renders the styled radio group item primitive.

**Copyable example**

```ts
import { RadioGroupItem } from "@kovojs/ui/radio-group";
const component = RadioGroupItem;
```

**Signature**

```ts
const RadioGroupItem = component({
  render(props: RadioGroupItemProps) {
    const attrs = radioGroupItemAttributes({
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(radioGroupStyles.item, props.styles?.item);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `RadioGroupRadio` {#radiogroupradio}

Renders the styled radio group radio primitive.

**Copyable example**

```ts
import { RadioGroupRadio } from "@kovojs/ui/radio-group";
const component = RadioGroupRadio;
```

**Signature**

```ts
const RadioGroupRadio = component({
  render(props: RadioGroupRadioProps) {
    const attrs = radioGroupRadioAttributes({
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
      ...(props.controlId === undefined ? {} : { controlId: props.controlId }),
    });
    const styleAttrs = style.attrs(radioGroupStyles.radio, props.styles?.radio);
    const controlStyleAttrs = style.attrs(
      radioGroupStyles.radioControl,
      props.styles?.radioControl,
    );

    return (
      <span
        {...controlStyleAttrs}
        {...bindingProps(props, ['data-state'])}
        data-state={attrs['data-state']}
      >
        <input
          {...styleAttrs}
          {...passThroughProps(props, { island: false })}
          aria-checked={attrs['aria-checked']}
          checked={attrs.checked}
          data-disabled={attrs['data-disabled']}
          data-state={attrs['data-state']}
          disabled={attrs.disabled}
          form={attrs.form}
          id={attrs.id}
          name={attrs.name}
          required={attrs.required}
          tabIndex={attrs.tabIndex}
          type={attrs.type}
          value={attrs.value}
        />
      </span>
    );
  },
});
```

#### `RadioGroupLabel` {#radiogrouplabel}

Renders the styled radio group label primitive.

**Copyable example**

```ts
import { RadioGroupLabel } from "@kovojs/ui/radio-group";
const component = RadioGroupLabel;
```

**Signature**

```ts
const RadioGroupLabel = component({
  render(props: RadioGroupLabelProps) {
    const attrs = radioGroupLabelAttributes({
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
      ...(props.controlId === undefined ? {} : { controlId: props.controlId }),
    });
    const styleAttrs = style.attrs(radioGroupStyles.label, props.styles?.label);

    return (
      <label
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        for={attrs.for}
        id={attrs.id}
      >
        {props.children}
      </label>
    );
  },
});
```

### Supporting types

#### `RadioGroupStyleOverrides` {#radiogroupstyleoverrides}

Style override slots accepted by the radio group components.

**Copyable example**

```ts
import type { RadioGroupStyleOverrides } from "@kovojs/ui/radio-group";
const styles: RadioGroupStyleOverrides = {};
```

**Signature**

```ts
interface RadioGroupStyleOverrides {
  item?: style.StyleInput;
  label?: style.StyleInput;
  radio?: style.StyleInput;
  radioControl?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `RadioGroupStateProps` {#radiogroupstateprops}

Shared state props for the radio group component family.

**Copyable example**

```ts
import type { RadioGroupStateProps } from "@kovojs/ui/radio-group";
const state: RadioGroupStateProps = {};
```

**Signature**

```ts
interface RadioGroupStateProps {
  descriptionId?: string;
  dir?: TextDirection;
  disabled?: boolean;
  errorId?: string;
  form?: string;
  invalid?: boolean;
  items?: readonly HeadlessRadioGroupItem[];
  loop?: boolean;
  name?: string;
  orientation?: CollectionOrientation;
  required?: boolean;
  value?: string;
}
```

#### `RadioGroupProps` {#radiogroupprops}

Props for the radio group component.

**Copyable example**

```ts
import type { RadioGroupProps } from "@kovojs/ui/radio-group";
const props: RadioGroupProps = { children: 'Content' };
```

**Signature**

```ts
interface RadioGroupProps extends RadioGroupStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: RadioGroupStyleOverrides;
}
```

#### `RadioGroupItemProps` {#radiogroupitemprops}

Props for the radio group item component.

**Copyable example**

```ts
import type { RadioGroupItemProps } from "@kovojs/ui/radio-group";
const props: RadioGroupItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface RadioGroupItemProps extends RadioGroupStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: RadioGroupStyleOverrides;
}
```

#### `RadioGroupRadioProps` {#radiogroupradioprops}

Props for the radio group radio component.

**Copyable example**

```ts
import type { RadioGroupRadioProps } from "@kovojs/ui/radio-group";
const props: RadioGroupRadioProps = { itemValue: 'item' };
```

**Signature**

```ts
interface RadioGroupRadioProps extends RadioGroupStateProps {
  controlId?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: RadioGroupStyleOverrides;
}
```

#### `RadioGroupLabelProps` {#radiogrouplabelprops}

Props for the radio group label component.

**Copyable example**

```ts
import type { RadioGroupLabelProps } from "@kovojs/ui/radio-group";
const props: RadioGroupLabelProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface RadioGroupLabelProps extends RadioGroupStateProps {
  children?: ComponentChild;
  controlId?: string;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: RadioGroupStyleOverrides;
}
```

## `@kovojs/ui/scroll-area`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/scroll-area.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/scroll-area.tsx)

### Values

#### `ScrollArea` {#scrollarea}

Renders the styled scroll area primitive.

**Copyable example**

```ts
import { ScrollArea } from "@kovojs/ui/scroll-area";
const component = ScrollArea;
```

**Signature**

```ts
const ScrollArea = component({
  render(props: ScrollAreaProps) {
    const attrs = scrollAreaRootAttributes({
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.scrollbars === undefined ? {} : { scrollbars: props.scrollbars }),
    });
    const styleAttrs = style.attrs(scrollAreaStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props, { style: true })}
        data-disabled={attrs['data-disabled']}
        data-scrollbars={attrs['data-scrollbars']}
        dir={attrs.dir}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ScrollAreaViewport` {#scrollareaviewport}

Renders the styled scroll area viewport primitive.

**Copyable example**

```ts
import { ScrollAreaViewport } from "@kovojs/ui/scroll-area";
const component = ScrollAreaViewport;
```

**Signature**

```ts
const ScrollAreaViewport = component({
  render(props: ScrollAreaViewportProps) {
    const attrs = scrollAreaViewportAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.scrollX === undefined ? {} : { scrollX: props.scrollX }),
      ...(props.scrollbars === undefined ? {} : { scrollbars: props.scrollbars }),
      ...(props.scrollY === undefined ? {} : { scrollY: props.scrollY }),
    });
    const styleAttrs = style.attrs(scrollAreaStyles.viewport, props.styles?.viewport);

    return (
      // { style: true } forwards a consumer's inline style (e.g. the demo's
      // max-height:72px) so it can override the StyleX maxHeight default; without
      // it the inline style is dropped and the viewport keeps the 224px default,
      // leaving almost nothing to scroll (T7 / scroll-area V8).
      <div
        {...styleAttrs}
        {...passThroughProps(props, { style: true })}
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-label={attrs['aria-label']}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-scroll-x={attrs['data-scroll-x']}
        data-scroll-y={attrs['data-scroll-y']}
        data-scrollbars={attrs['data-scrollbars']}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ScrollAreaScrollbar` {#scrollareascrollbar}

Renders the styled scroll area scrollbar primitive.

**Copyable example**

```ts
import { ScrollAreaScrollbar } from "@kovojs/ui/scroll-area";
const component = ScrollAreaScrollbar;
```

**Signature**

```ts
const ScrollAreaScrollbar = component({
  render(props: ScrollAreaScrollbarProps) {
    const attrs = scrollAreaScrollbarAttributes({
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.forceMount === undefined ? {} : { forceMount: props.forceMount }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.scrollPosition === undefined ? {} : { scrollPosition: props.scrollPosition }),
      ...(props.scrollbars === undefined ? {} : { scrollbars: props.scrollbars }),
      ...(props.visible === undefined ? {} : { visible: props.visible }),
    });
    const styleAttrs = style.attrs(scrollAreaStyles.scrollbar, props.styles?.scrollbar);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-hidden={attrs['aria-hidden']}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        data-scroll-position={attrs['data-scroll-position']}
        data-scrollbars={attrs['data-scrollbars']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ScrollAreaThumb` {#scrollareathumb}

Renders the styled scroll area thumb primitive.

**Copyable example**

```ts
import { ScrollAreaThumb } from "@kovojs/ui/scroll-area";
const component = ScrollAreaThumb;
```

**Signature**

```ts
const ScrollAreaThumb = component({
  render(props: ScrollAreaThumbProps) {
    const attrs = scrollAreaThumbAttributes({
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.forceMount === undefined ? {} : { forceMount: props.forceMount }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.scrollPosition === undefined ? {} : { scrollPosition: props.scrollPosition }),
      ...(props.scrollbars === undefined ? {} : { scrollbars: props.scrollbars }),
      ...(props.visible === undefined ? {} : { visible: props.visible }),
    });
    const styleAttrs = style.attrs(scrollAreaStyles.thumb, props.styles?.thumb);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-hidden={attrs['aria-hidden']}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        data-scroll-position={attrs['data-scroll-position']}
        data-scrollbars={attrs['data-scrollbars']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
      />
    );
  },
});
```

#### `ScrollAreaCorner` {#scrollareacorner}

Renders the styled scroll area corner primitive.

**Copyable example**

```ts
import { ScrollAreaCorner } from "@kovojs/ui/scroll-area";
const component = ScrollAreaCorner;
```

**Signature**

```ts
const ScrollAreaCorner = component({
  render(props: ScrollAreaCornerProps) {
    const attrs = scrollAreaCornerAttributes({
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.forceMount === undefined ? {} : { forceMount: props.forceMount }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.scrollbars === undefined ? {} : { scrollbars: props.scrollbars }),
      ...(props.visible === undefined ? {} : { visible: props.visible }),
    });
    const styleAttrs = style.attrs(scrollAreaStyles.corner, props.styles?.corner);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-hidden={attrs['aria-hidden']}
        data-disabled={attrs['data-disabled']}
        data-scrollbars={attrs['data-scrollbars']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
      />
    );
  },
});
```

### Supporting types

#### `ScrollAreaStyleOverrides` {#scrollareastyleoverrides}

Style override slots accepted by the scroll area components.

**Copyable example**

```ts
import type { ScrollAreaStyleOverrides } from "@kovojs/ui/scroll-area";
const styles: ScrollAreaStyleOverrides = {};
```

**Signature**

```ts
interface ScrollAreaStyleOverrides {
  corner?: style.StyleInput;
  root?: style.StyleInput;
  scrollbar?: style.StyleInput;
  thumb?: style.StyleInput;
  viewport?: style.StyleInput;
}
```

#### `ScrollAreaStateProps` {#scrollareastateprops}

Shared state props for the scroll area component family.

**Copyable example**

```ts
import type { ScrollAreaStateProps } from "@kovojs/ui/scroll-area";
const state: ScrollAreaStateProps = {};
```

**Signature**

```ts
interface ScrollAreaStateProps {
  disabled?: boolean;
  dir?: TextDirection;
  scrollbars?: ScrollAreaScrollbars;
}
```

#### `ScrollAreaProps` {#scrollareaprops}

Props for the scroll area component.

**Copyable example**

```ts
import type { ScrollAreaProps } from "@kovojs/ui/scroll-area";
const props: ScrollAreaProps = { children: 'Content' };
```

**Signature**

```ts
interface ScrollAreaProps extends ScrollAreaStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: ScrollAreaStyleOverrides;
}
```

#### `ScrollAreaViewportProps` {#scrollareaviewportprops}

Props for the scroll area viewport component.

**Copyable example**

```ts
import type { ScrollAreaViewportProps } from "@kovojs/ui/scroll-area";
const props: ScrollAreaViewportProps = { children: 'Content' };
```

**Signature**

```ts
interface ScrollAreaViewportProps extends ScrollAreaStateProps {
  children?: ComponentChild;
  descriptionId?: string;
  id?: string;
  label?: string;
  labelledBy?: string;
  scrollTop?: number;
  scrollX?: ScrollAreaScrollPosition;
  scrollY?: ScrollAreaScrollPosition;
  styles?: ScrollAreaStyleOverrides;
}
```

#### `ScrollAreaScrollbarProps` {#scrollareascrollbarprops}

Props for the scroll area scrollbar component.

**Copyable example**

```ts
import type { ScrollAreaScrollbarProps } from "@kovojs/ui/scroll-area";
const props: ScrollAreaScrollbarProps = { children: 'Content' };
```

**Signature**

```ts
interface ScrollAreaScrollbarProps extends ScrollAreaStateProps {
  children?: ComponentChild;
  forceMount?: boolean;
  id?: string;
  orientation?: ScrollAreaOrientation;
  scrollPosition?: ScrollAreaScrollPosition;
  styles?: ScrollAreaStyleOverrides;
  visible?: boolean;
}
```

#### `ScrollAreaThumbProps` {#scrollareathumbprops}

Props for the scroll area thumb component.

**Copyable example**

```ts
import type { ScrollAreaThumbProps } from "@kovojs/ui/scroll-area";
const props: ScrollAreaThumbProps = { children: 'Content' };
```

**Signature**

```ts
interface ScrollAreaThumbProps extends ScrollAreaScrollbarProps {}
```

#### `ScrollAreaCornerProps` {#scrollareacornerprops}

Props for the scroll area corner component.

**Copyable example**

```ts
import type { ScrollAreaCornerProps } from "@kovojs/ui/scroll-area";
const props: ScrollAreaCornerProps = {};
```

**Signature**

```ts
interface ScrollAreaCornerProps extends ScrollAreaStateProps {
  forceMount?: boolean;
  id?: string;
  styles?: ScrollAreaStyleOverrides;
  visible?: boolean;
}
```

## `@kovojs/ui/separator`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/separator.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/separator.tsx)

### Values

#### `Separator` {#separator}

Renders the styled separator primitive.

**Copyable example**

```ts
import { Separator } from "@kovojs/ui/separator";
const component = Separator;
```

**Signature**

```ts
const Separator = component({
  render(props: SeparatorProps) {
    const orientation = props.orientation ?? 'horizontal';
    const attrs = separatorRootAttributes({
      ...(props.decorative === undefined ? {} : { decorative: props.decorative }),
      orientation,
    });
    const styleAttrs = style.attrs(base.root, orientations[orientation], props.style);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-orientation={attrs['aria-orientation']}
        data-orientation={attrs['data-orientation']}
        role={attrs.role}
      />
    );
  },
});
```

### Supporting types

#### `SeparatorProps` {#separatorprops}

Props for the separator component.

**Copyable example**

```ts
import type { SeparatorProps } from "@kovojs/ui/separator";
const props: SeparatorProps = {};
```

**Signature**

```ts
interface SeparatorProps {
  decorative?: boolean;
  orientation?: SeparatorOrientation;
  style?: style.StyleInput;
}
```

## `@kovojs/ui/sheet`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/sheet.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/sheet.tsx)

### Values

#### `Sheet` {#sheet}

Renders the styled sheet primitive.

**Copyable example**

```ts
import { Sheet } from "@kovojs/ui/sheet";
const component = Sheet;
```

**Signature**

```ts
const Sheet = component({
  render(props: SheetProps) {
    return renderDialogPanel(props, 'right');
  },
});
```

#### `SheetRoot` {#sheetroot}

Renders the styled sheet root primitive.

**Copyable example**

```ts
import { SheetRoot } from "@kovojs/ui/sheet";
const component = SheetRoot;
```

**Signature**

```ts
const SheetRoot = component({
  render(props: SheetRootProps) {
    const attrs = dialogRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      open: props.open === true,
    });
    const styleAttrs = style.attrs(sheetStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `SheetTrigger` {#sheettrigger}

Renders the styled sheet trigger primitive.

**Copyable example**

```ts
import { SheetTrigger } from "@kovojs/ui/sheet";
const component = SheetTrigger;
```

**Signature**

```ts
const SheetTrigger = component({
  render(props: SheetTriggerProps) {
    const attrs = dialogTriggerAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      contentId: props.contentId,
      open: props.open === true,
    });
    const styleAttrs = style.attrs(sheetStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `SheetContent` {#sheetcontent}

Renders the styled sheet content primitive.

**Copyable example**

```ts
import { SheetContent } from "@kovojs/ui/sheet";
const component = SheetContent;
```

**Signature**

```ts
const SheetContent = component({
  render(props: SheetContentProps) {
    const side = props.side ?? 'right';
    const attrs = dialogContentAttributes({
      contentId: props.contentId,
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      open: props.open === true,
      titleId: props.titleId,
    });
    const styleAttrs = style.attrs(
      sheetStyles.content,
      sheetSideStyles[side],
      props.styles?.content,
    );

    return (
      <dialog
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-modal={attrs['aria-modal']}
        closedby={attrs.closedby}
        data-state={attrs['data-state']}
        id={attrs.id}
        open={attrs.open}
        role={attrs.role}
      >
        {props.children}
      </dialog>
    );
  },
});
```

#### `SheetHeader` {#sheetheader}

Renders the styled sheet header primitive.

**Copyable example**

```ts
import { SheetHeader } from "@kovojs/ui/sheet";
const component = SheetHeader;
```

**Signature**

```ts
const SheetHeader = component({
  render(props: SheetPartProps) {
    const styleAttrs = style.attrs(sheetStyles.header, props.styles?.header);
    return (
      <header {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </header>
    );
  },
});
```

#### `SheetTitle` {#sheettitle}

Renders the styled sheet title primitive.

**Copyable example**

```ts
import { SheetTitle } from "@kovojs/ui/sheet";
const component = SheetTitle;
```

**Signature**

```ts
const SheetTitle = component({
  render(props: SheetPartProps) {
    const styleAttrs = style.attrs(sheetStyles.title, props.styles?.title);
    return (
      <h2 {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </h2>
    );
  },
});
```

#### `SheetDescription` {#sheetdescription}

Renders the styled sheet description primitive.

**Copyable example**

```ts
import { SheetDescription } from "@kovojs/ui/sheet";
const component = SheetDescription;
```

**Signature**

```ts
const SheetDescription = component({
  render(props: SheetPartProps) {
    const styleAttrs = style.attrs(sheetStyles.description, props.styles?.description);
    return (
      <p {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </p>
    );
  },
});
```

#### `SheetClose` {#sheetclose}

Renders the styled sheet close primitive.

**Copyable example**

```ts
import { SheetClose } from "@kovojs/ui/sheet";
const component = SheetClose;
```

**Signature**

```ts
const SheetClose = component({
  render(props: SheetCloseProps) {
    const attrs = dialogCloseAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      contentId: props.contentId,
      open: props.open === true,
    });
    const styleAttrs = style.attrs(sheetStyles.close, props.styles?.close);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-label="Close"
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {/* shadcn-style: default to an icon-only X dismiss (accessible name on the
            button's aria-label); a caller may still pass custom children. */}
        {props.children ?? <X style={sheetStyles.closeIcon} aria-hidden="true" />}
      </button>
    );
  },
});
```

### Supporting types

#### `SheetSide` {#sheetside}

Supported sheet side values.

**Copyable example**

```ts
import type { SheetSide } from "@kovojs/ui/sheet";
const value: SheetSide = 'right';
```

**Signature**

```ts
type SheetSide = 'top' | 'right' | 'bottom' | 'left';
```

#### `SheetStyleOverrides` {#sheetstyleoverrides}

Style override slots accepted by the sheet components.

**Copyable example**

```ts
import type { SheetStyleOverrides } from "@kovojs/ui/sheet";
const styles: SheetStyleOverrides = {};
```

**Signature**

```ts
interface SheetStyleOverrides {
  body?: style.StyleInput;
  close?: style.StyleInput;
  content?: style.StyleInput;
  description?: style.StyleInput;
  header?: style.StyleInput;
  root?: style.StyleInput;
  title?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `SheetProps` {#sheetprops}

Props for the sheet component.

**Copyable example**

```ts
import type { SheetProps } from "@kovojs/ui/sheet";
const props: SheetProps = { contentId: 'content-id', title: 'Title', children: 'Content' };
```

**Signature**

```ts
interface SheetProps {
  children?: ComponentChild;
  closeLabel?: string;
  contentId: string;
  description?: string;
  disabled?: boolean;
  open?: boolean;
  side?: SheetSide;
  styles?: SheetStyleOverrides;
  title: string;
  trigger?: string;
}
```

#### `SheetStateProps` {#sheetstateprops}

Shared state props for the sheet component family.

**Copyable example**

```ts
import type { SheetStateProps } from "@kovojs/ui/sheet";
const state: SheetStateProps = {};
```

**Signature**

```ts
interface SheetStateProps {
  disabled?: boolean;
  open?: boolean;
  styles?: SheetStyleOverrides;
}
```

#### `SheetRootProps` {#sheetrootprops}

Props for the sheet root component.

**Copyable example**

```ts
import type { SheetRootProps } from "@kovojs/ui/sheet";
const props: SheetRootProps = { children: 'Content' };
```

**Signature**

```ts
interface SheetRootProps extends SheetStateProps {
  children?: ComponentChild;
  id?: string;
}
```

#### `SheetTriggerProps` {#sheettriggerprops}

Props for the sheet trigger component.

**Copyable example**

```ts
import type { SheetTriggerProps } from "@kovojs/ui/sheet";
const props: SheetTriggerProps = { contentId: 'content-id', children: 'Content' };
```

**Signature**

```ts
interface SheetTriggerProps extends SheetStateProps {
  children?: ComponentChild;
  contentId: string;
  id?: string;
}
```

#### `SheetContentProps` {#sheetcontentprops}

Props for the sheet content component.

**Copyable example**

```ts
import type { SheetContentProps } from "@kovojs/ui/sheet";
const props: SheetContentProps = { contentId: 'content-id', titleId: 'title-id', children: 'Content' };
```

**Signature**

```ts
interface SheetContentProps extends SheetStateProps {
  children?: ComponentChild;
  contentId: string;
  descriptionId?: string;
  side?: SheetSide;
  titleId: string;
}
```

#### `SheetPartProps` {#sheetpartprops}

Props for the sheet part component.

**Copyable example**

```ts
import type { SheetPartProps } from "@kovojs/ui/sheet";
const props: SheetPartProps = { children: 'Content' };
```

**Signature**

```ts
interface SheetPartProps {
  children?: ComponentChild;
  id?: string;
  styles?: SheetStyleOverrides;
}
```

#### `SheetCloseProps` {#sheetcloseprops}

Props for the sheet close component.

**Copyable example**

```ts
import type { SheetCloseProps } from "@kovojs/ui/sheet";
const props: SheetCloseProps = { contentId: 'content-id', children: 'Content' };
```

**Signature**

```ts
interface SheetCloseProps extends SheetStateProps {
  children?: ComponentChild;
  contentId: string;
  id?: string;
}
```

## `@kovojs/ui/select`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/select.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/select.tsx)

### Values

#### `Select` {#select}

Renders the styled select primitive.

**Copyable example**

```ts
import { Select } from "@kovojs/ui/select";
const component = Select;
```

**Signature**

```ts
const Select = component({
  render(props: SelectProps) {
    const attrs = selectRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(selectStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `SelectTrigger` {#selecttrigger}

Renders the styled select trigger primitive.

**Copyable example**

```ts
import { SelectTrigger } from "@kovojs/ui/select";
const component = SelectTrigger;
```

**Signature**

```ts
const SelectTrigger = component({
  render(props: SelectTriggerProps) {
    const attrs = selectTriggerAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(selectStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-activedescendant={props['aria-activedescendant'] ?? attrs['aria-activedescendant']}
        aria-describedby={attrs['aria-describedby']}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        aria-invalid={attrs['aria-invalid']}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={attrs.id}
        role={attrs.role}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `SelectHiddenInput` {#selecthiddeninput}

Renders the styled select hidden input primitive.

**Copyable example**

```ts
import { SelectHiddenInput } from "@kovojs/ui/select";
const component = SelectHiddenInput;
```

**Signature**

```ts
const SelectHiddenInput = component({
  render(props: SelectHiddenInputProps) {
    const attrs = selectHiddenInputAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(selectStyles.hiddenInput, props.styles?.hiddenInput);

    return (
      <input
        {...styleAttrs}
        {...passThroughProps(props)}
        disabled={attrs.disabled}
        form={attrs.form}
        id={props.id}
        name={attrs.name}
        type={attrs.type}
        value={attrs.value}
      />
    );
  },
});
```

#### `SelectContent` {#selectcontent}

Renders the styled select content primitive.

**Copyable example**

```ts
import { SelectContent } from "@kovojs/ui/select";
const component = SelectContent;
```

**Signature**

```ts
const SelectContent = component({
  render(props: SelectContentProps) {
    const attrs = selectContentAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(selectStyles.content, props.styles?.content);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `SelectItem` {#selectitem}

Renders the styled select item primitive.

**Copyable example**

```ts
import { SelectItem } from "@kovojs/ui/select";
const component = SelectItem;
```

**Signature**

```ts
const SelectItem = component({
  render(props: SelectItemProps) {
    const attrs = selectItemAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      itemValue: props.itemValue,
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(selectStyles.item, props.styles?.item);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-disabled={attrs['aria-disabled']}
        aria-selected={attrs['aria-selected']}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        id={attrs.id}
        label={attrs.label}
        role={attrs.role}
        value={attrs.value}
      >
        {props.children ?? props.itemLabel ?? props.itemValue ?? ''}
      </div>
    );
  },
});
```

#### `SelectValue` {#selectvalue}

Renders the styled select value primitive.

**Copyable example**

```ts
import { SelectValue } from "@kovojs/ui/select";
const component = SelectValue;
```

**Signature**

```ts
const SelectValue = component({
  render(props: SelectValueProps) {
    const attrs = selectValueAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.listboxId === undefined ? {} : { listboxId: props.listboxId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(selectStyles.value, props.styles?.value);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        data-placeholder={attrs['data-placeholder']}
        id={attrs.id}
      >
        {props.children ?? selectValueText(props)}
      </span>
    );
  },
});
```

### Supporting types

#### `SelectStyleOverrides` {#selectstyleoverrides}

Style override slots accepted by the select components.

**Copyable example**

```ts
import type { SelectStyleOverrides } from "@kovojs/ui/select";
const styles: SelectStyleOverrides = {};
```

**Signature**

```ts
interface SelectStyleOverrides {
  content?: style.StyleInput;
  hiddenInput?: style.StyleInput;
  item?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
  value?: style.StyleInput;
}
```

#### `SelectStateProps` {#selectstateprops}

Shared state props for the select component family.

**Copyable example**

```ts
import type { SelectStateProps } from "@kovojs/ui/select";
const state: SelectStateProps = {
  items: [{ label: 'Standard', value: 'standard' }],
  name: 'shippingSpeed',
  value: 'standard',
};
```

**Signature**

```ts
interface SelectStateProps {
  disabled?: boolean;
  form?: string;
  highlightedValue?: string;
  invalid?: boolean;
  items?: readonly HeadlessSelectItem[];
  listboxId?: string;
  name?: string;
  open?: boolean;
  placeholder?: string;
  required?: boolean;
  value?: string;
}
```

#### `SelectProps` {#selectprops}

Props for the select component.

**Copyable example**

```ts
import type { SelectProps } from "@kovojs/ui/select";
const props: SelectProps = {
  children: 'Shipping speed',
  items: [{ label: 'Standard', value: 'standard' }],
  value: 'standard',
};
```

**Signature**

```ts
interface SelectProps extends SelectStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: SelectStyleOverrides;
}
```

#### `SelectTriggerProps` {#selecttriggerprops}

Props for the select trigger component.

**Copyable example**

```ts
import type { SelectTriggerProps } from "@kovojs/ui/select";
const props: SelectTriggerProps = {
  children: 'Standard',
  id: 'shipping-speed-trigger',
  labelledBy: 'shipping-speed-label',
  value: 'standard',
};
```

**Signature**

```ts
interface SelectTriggerProps extends SelectStateProps {
  'aria-activedescendant'?: string | undefined;
  children?: ComponentChild;
  descriptionId?: string;
  errorId?: string;
  id?: string;
  labelledBy?: string;
  styles?: SelectStyleOverrides;
}
```

#### `SelectHiddenInputProps` {#selecthiddeninputprops}

Props for the select hidden input component.

**Copyable example**

```ts
import type { SelectHiddenInputProps } from "@kovojs/ui/select";
const props: SelectHiddenInputProps = {
  id: 'shipping-speed-input',
  name: 'shippingSpeed',
  value: 'standard',
};
```

**Signature**

```ts
interface SelectHiddenInputProps extends SelectStateProps {
  id?: string;
  styles?: SelectStyleOverrides;
}
```

#### `SelectContentProps` {#selectcontentprops}

Props for the select content component.

**Copyable example**

```ts
import type { SelectContentProps } from "@kovojs/ui/select";
const props: SelectContentProps = {
  children: 'Shipping options',
  id: 'shipping-speed-listbox',
  labelledBy: 'shipping-speed-label',
  open: true,
};
```

**Signature**

```ts
interface SelectContentProps extends SelectStateProps {
  children?: ComponentChild;
  id?: string;
  label?: string;
  labelledBy?: string;
  styles?: SelectStyleOverrides;
}
```

#### `SelectItemProps` {#selectitemprops}

Props for the select item component.

**Copyable example**

```ts
import type { SelectItemProps } from "@kovojs/ui/select";
const props: SelectItemProps = {
  children: 'Standard',
  itemLabel: 'Standard',
  itemValue: 'standard',
  value: 'standard',
};
```

**Signature**

```ts
interface SelectItemProps extends SelectStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemLabel?: string;
  itemValue: string;
  styles?: SelectStyleOverrides;
}
```

#### `SelectValueProps` {#selectvalueprops}

Props for the select value component.

**Copyable example**

```ts
import type { SelectValueProps } from "@kovojs/ui/select";
const props: SelectValueProps = {
  children: 'Standard',
  placeholder: 'Choose a speed',
  value: 'standard',
};
```

**Signature**

```ts
interface SelectValueProps extends SelectStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: SelectStyleOverrides;
}
```

## `@kovojs/ui/skeleton`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/skeleton.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/skeleton.tsx)

### Values

#### `Skeleton` {#skeleton}

Renders the styled skeleton primitive.

**Copyable example**

```ts
import { Skeleton } from "@kovojs/ui/skeleton";
const component = Skeleton;
```

**Signature**

```ts
const Skeleton = component({
  render(props: SkeletonProps) {
    return <div {...style.attrs(skeletonStyles.root, props.style)} aria-hidden="true" />;
  },
});
```

### Supporting types

#### `SkeletonProps` {#skeletonprops}

Props for the skeleton component.

**Copyable example**

```ts
import type { SkeletonProps } from "@kovojs/ui/skeleton";
const props: SkeletonProps = {};
```

**Signature**

```ts
interface SkeletonProps {
  style?: style.StyleInput;
}
```

## `@kovojs/ui/slider`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/slider.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/slider.tsx)

### Values

#### `Slider` {#slider}

Renders the styled slider primitive.

**Copyable example**

```ts
import { Slider } from "@kovojs/ui/slider";
const component = Slider;
```

**Signature**

```ts
const Slider = component({
  render(props: SliderProps) {
    const attrs = sliderRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(sliderStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-max={attrs['data-max']}
        data-min={attrs['data-min']}
        data-orientation={attrs['data-orientation']}
        data-required={attrs['data-required']}
        data-value={attrs['data-value']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `SliderInput` {#sliderinput}

Renders the styled slider input primitive.

**Copyable example**

```ts
import { SliderInput } from "@kovojs/ui/slider";
const component = SliderInput;
```

**Signature**

```ts
const SliderInput = component({
  render(props: SliderInputProps) {
    const attrs = sliderInputAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
      ...(props.valueText === undefined ? {} : { valueText: props.valueText }),
    });
    const styleAttrs = style.attrs(sliderStyles.input, props.styles?.input);

    return (
      <input
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-invalid={attrs['aria-invalid']}
        aria-label={attrs['aria-label']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-orientation={attrs['aria-orientation']}
        aria-valuetext={attrs['aria-valuetext']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-max={attrs['data-max']}
        data-min={attrs['data-min']}
        data-orientation={attrs['data-orientation']}
        data-required={attrs['data-required']}
        data-value={attrs['data-value']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        max={attrs.max}
        min={attrs.min}
        name={attrs.name}
        required={attrs.required}
        step={attrs.step}
        type={attrs.type}
        value={attrs.value}
      />
    );
  },
});
```

#### `SliderTrack` {#slidertrack}

Renders the styled slider track primitive.

**Copyable example**

```ts
import { SliderTrack } from "@kovojs/ui/slider";
const component = SliderTrack;
```

**Signature**

```ts
const SliderTrack = component({
  render(props: SliderPartProps) {
    const attrs = sliderTrackAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(sliderStyles.track, props.styles?.track);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-hidden={attrs['aria-hidden']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-max={attrs['data-max']}
        data-min={attrs['data-min']}
        data-orientation={attrs['data-orientation']}
        data-part={attrs['data-part']}
        data-required={attrs['data-required']}
        data-value={attrs['data-value']}
        data-value-ratio={attrs['data-value-ratio']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `SliderRange` {#sliderrange}

Renders the styled slider range primitive.

**Copyable example**

```ts
import { SliderRange } from "@kovojs/ui/slider";
const component = SliderRange;
```

**Signature**

```ts
const SliderRange = component({
  render(props: SliderPartProps) {
    const attrs = sliderRangeAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(sliderStyles.range, props.styles?.range);
    const vertical = attrs['data-orientation'] === 'vertical';
    const pct = valuePercent(attrs['data-value-ratio']);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-hidden={attrs['aria-hidden']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-max={attrs['data-max']}
        data-min={attrs['data-min']}
        data-orientation={attrs['data-orientation']}
        data-part={attrs['data-part']}
        data-required={attrs['data-required']}
        data-value={attrs['data-value']}
        data-value-ratio={attrs['data-value-ratio']}
        id={attrs.id}
        style={{ height: vertical ? pct : undefined, width: vertical ? undefined : pct }}
      >
        {props.children}
      </span>
    );
  },
});
```

#### `SliderThumb` {#sliderthumb}

Renders the styled slider thumb primitive.

**Copyable example**

```ts
import { SliderThumb } from "@kovojs/ui/slider";
const component = SliderThumb;
```

**Signature**

```ts
const SliderThumb = component({
  render(props: SliderThumbProps) {
    const attrs = sliderThumbAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.max === undefined ? {} : { max: props.max }),
      ...(props.min === undefined ? {} : { min: props.min }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.step === undefined ? {} : { step: props.step }),
      ...(props.value === undefined ? {} : { value: props.value }),
      ...(props.valueText === undefined ? {} : { valueText: props.valueText }),
    });
    const styleAttrs = style.attrs(sliderStyles.thumb, props.styles?.thumb);
    const vertical = attrs['data-orientation'] === 'vertical';
    const pct = valuePercent(attrs['data-value-ratio']);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-invalid={attrs['aria-invalid']}
        aria-label={attrs['aria-label']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-orientation={attrs['aria-orientation']}
        aria-valuemax={attrs['aria-valuemax']}
        aria-valuemin={attrs['aria-valuemin']}
        aria-valuenow={attrs['aria-valuenow']}
        aria-valuetext={attrs['aria-valuetext']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-max={attrs['data-max']}
        data-min={attrs['data-min']}
        data-orientation={attrs['data-orientation']}
        data-part={attrs['data-part']}
        data-required={attrs['data-required']}
        data-value={attrs['data-value']}
        data-value-ratio={attrs['data-value-ratio']}
        id={attrs.id}
        role={attrs.role}
        style={{
          bottom: vertical ? pct : undefined,
          left: vertical ? undefined : pct,
          top: vertical ? 'auto' : undefined,
        }}
        tabIndex={attrs.tabIndex}
      />
    );
  },
});
```

### Supporting types

#### `SliderStyleOverrides` {#sliderstyleoverrides}

Style override slots accepted by the slider components.

**Copyable example**

```ts
import type { SliderStyleOverrides } from "@kovojs/ui/slider";
const styles: SliderStyleOverrides = {};
```

**Signature**

```ts
interface SliderStyleOverrides {
  input?: style.StyleInput;
  range?: style.StyleInput;
  root?: style.StyleInput;
  thumb?: style.StyleInput;
  track?: style.StyleInput;
}
```

#### `SliderStateProps` {#sliderstateprops}

Shared state props for the slider component family.

**Copyable example**

```ts
import type { SliderStateProps } from "@kovojs/ui/slider";
const state: SliderStateProps = {};
```

**Signature**

```ts
interface SliderStateProps {
  disabled?: boolean;
  invalid?: boolean;
  max?: number;
  min?: number;
  name?: string;
  orientation?: SliderOrientation;
  required?: boolean;
  step?: number;
  value?: number;
}
```

#### `SliderProps` {#sliderprops}

Props for the slider component.

**Copyable example**

```ts
import type { SliderProps } from "@kovojs/ui/slider";
const props: SliderProps = { children: 'Content' };
```

**Signature**

```ts
interface SliderProps extends SliderStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: SliderStyleOverrides;
}
```

#### `SliderInputProps` {#sliderinputprops}

Props for the slider input component.

**Copyable example**

```ts
import type { SliderInputProps } from "@kovojs/ui/slider";
const props: SliderInputProps = {};
```

**Signature**

```ts
interface SliderInputProps extends SliderStateProps {
  descriptionId?: string;
  errorId?: string;
  form?: string;
  id?: string;
  label?: string;
  labelledBy?: string;
  styles?: SliderStyleOverrides;
  valueText?: string;
}
```

#### `SliderPartProps` {#sliderpartprops}

Props for the slider part component.

**Copyable example**

```ts
import type { SliderPartProps } from "@kovojs/ui/slider";
const props: SliderPartProps = { children: 'Content' };
```

**Signature**

```ts
interface SliderPartProps extends SliderStateProps {
  children?: ComponentChild;
  id?: string;
  style?: unknown;
  styles?: SliderStyleOverrides;
}
```

#### `SliderThumbProps` {#sliderthumbprops}

Props for the slider thumb component.

**Copyable example**

```ts
import type { SliderThumbProps } from "@kovojs/ui/slider";
const props: SliderThumbProps = { children: 'Content' };
```

**Signature**

```ts
interface SliderThumbProps extends SliderPartProps {
  descriptionId?: string;
  errorId?: string;
  label?: string;
  labelledBy?: string;
  valueText?: string;
}
```

## `@kovojs/ui/switch`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/switch.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/switch.tsx)

### Values

#### `Switch` {#switch}

Renders the styled switch primitive.

**Copyable example**

```ts
import { Switch } from "@kovojs/ui/switch";
const component = Switch;
```

**Signature**

```ts
const Switch = component({
  render(props: SwitchProps) {
    const attrs = switchRootAttributes({
      checked: props.checked ?? false,
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const rootStyleAttrs = style.attrs(switchStyles.root, props.styles?.root);
    const inputStyleAttrs = style.attrs(switchStyles.input, props.styles?.input);
    const trackStyleAttrs = style.attrs(switchStyles.track, props.styles?.track);
    const thumbStyleAttrs = style.attrs(switchStyles.thumb, props.styles?.thumb);

    return (
      <label
        {...rootStyleAttrs}
        {...passThroughProps(props, { events: false, bindings: false })}
        {...bindingProps(props, ['data-state'])}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
      >
        <span
          {...trackStyleAttrs}
          {...bindingProps(props, ['data-state'])}
          data-state={attrs['data-state']}
        >
          <input
            {...inputStyleAttrs}
            {...passThroughProps(props, { island: false })}
            aria-checked={attrs['aria-checked']}
            aria-describedby={props.describedBy}
            aria-labelledby={props.labelledBy}
            checked={attrs.checked}
            data-disabled={attrs['data-disabled']}
            data-state={attrs['data-state']}
            disabled={attrs.disabled}
            form={attrs.form}
            id={props.id}
            name={attrs.name}
            required={attrs.required}
            role={attrs.role}
            type={attrs.type}
            value={attrs.value}
          />
          <span
            {...thumbStyleAttrs}
            {...bindingProps(props, ['data-state'])}
            aria-hidden="true"
            data-state={attrs['data-state']}
          />
        </span>
        {props.children}
      </label>
    );
  },
});
```

### Supporting types

#### `SwitchStyleOverrides` {#switchstyleoverrides}

Style override slots accepted by the switch components.

**Copyable example**

```ts
import type { SwitchStyleOverrides } from "@kovojs/ui/switch";
const styles: SwitchStyleOverrides = {};
```

**Signature**

```ts
interface SwitchStyleOverrides {
  input?: style.StyleInput;
  root?: style.StyleInput;
  thumb?: style.StyleInput;
  track?: style.StyleInput;
}
```

#### `SwitchProps` {#switchprops}

Props for the switch component.

**Copyable example**

```ts
import type { SwitchProps } from "@kovojs/ui/switch";
const props: SwitchProps = { children: 'Content' };
```

**Signature**

```ts
interface SwitchProps {
  describedBy?: string;
  checked?: boolean;
  children?: ComponentChild;
  disabled?: boolean;
  form?: string;
  id?: string;
  labelledBy?: string;
  name?: string;
  required?: boolean;
  styles?: SwitchStyleOverrides;
  value?: string;
}
```

## `@kovojs/ui/table`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/table.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/table.tsx)

### Values

#### `Table` {#table}

Renders the styled table primitive.

**Copyable example**

```ts
import { Table } from "@kovojs/ui/table";
const component = Table;
```

**Signature**

```ts
const Table = component({
  render(props: TableProps) {
    const wrapperAttrs = style.attrs(tableStyles.wrapper, props.styles?.wrapper);
    const tableAttrs = style.attrs(tableStyles.table, props.styles?.table);
    const captionAttrs = style.attrs(tableStyles.caption, props.styles?.caption);
    const caption =
      props.caption === undefined
        ? ''
        : `<caption${tableAttributes(captionAttrs)}>${escapeHtml(props.caption)}</caption>`;

    return withTableChildren(props.children, (children) =>
      tableRenderedHtml(
        `<div${tableAttributes(wrapperAttrs)}><table${tableAttributes(tableAttrs)}>${caption}${children}</table></div>`,
      ),
    );
  },
});
```

#### `TableHead` {#tablehead}

Renders the styled table head primitive.

**Copyable example**

```ts
import { TableHead } from "@kovojs/ui/table";
const component = TableHead;
```

**Signature**

```ts
const TableHead = component({
  render(props: TableSectionProps) {
    return tablePartWithChildren(
      'thead',
      style.attrs(tableStyles.head, props.styles?.head),
      props.children,
    );
  },
});
```

#### `TableBody` {#tablebody}

Renders the styled table body primitive.

**Copyable example**

```ts
import { TableBody } from "@kovojs/ui/table";
const component = TableBody;
```

**Signature**

```ts
const TableBody = component({
  render(props: TableSectionProps) {
    return tablePartWithChildren(
      'tbody',
      style.attrs(tableStyles.body, props.styles?.body),
      props.children,
    );
  },
});
```

#### `TableRow` {#tablerow}

Renders the styled table row primitive.

**Copyable example**

```ts
import { TableRow } from "@kovojs/ui/table";
const component = TableRow;
```

**Signature**

```ts
const TableRow = component({
  render(props: TableSectionProps) {
    const rowChildren = props.children;
    return tablePartWithChildren(
      'tr',
      style.attrs(tableStyles.row, props.styles?.row),
      rowChildren,
    );
  },
});
```

#### `TableHeaderCell` {#tableheadercell}

Renders the styled table header cell primitive.

**Copyable example**

```ts
import { TableHeaderCell } from "@kovojs/ui/table";
const component = TableHeaderCell;
```

**Signature**

```ts
const TableHeaderCell = component({
  render(props: TableCellProps) {
    return tablePartWithChildren(
      'th',
      {
        ...style.attrs(tableStyles.headerCell, props.styles?.headerCell),
        colspan: props.colSpan,
        scope: props.scope ?? 'col',
      },
      props.children,
    );
  },
});
```

#### `TableCell` {#tablecell}

Renders the styled table cell primitive.

**Copyable example**

```ts
import { TableCell } from "@kovojs/ui/table";
const component = TableCell;
```

**Signature**

```ts
const TableCell = component({
  render(props: TableCellProps) {
    return tablePartWithChildren(
      'td',
      { ...style.attrs(tableStyles.cell, props.styles?.cell), colspan: props.colSpan },
      props.children,
    );
  },
});
```

### Supporting types

#### `TableStyleOverrides` {#tablestyleoverrides}

Style override slots accepted by the table components.

**Copyable example**

```ts
import type { TableStyleOverrides } from "@kovojs/ui/table";
const styles: TableStyleOverrides = {};
```

**Signature**

```ts
interface TableStyleOverrides {
  body?: style.StyleInput;
  caption?: style.StyleInput;
  cell?: style.StyleInput;
  head?: style.StyleInput;
  headerCell?: style.StyleInput;
  row?: style.StyleInput;
  table?: style.StyleInput;
  wrapper?: style.StyleInput;
}
```

#### `TableProps` {#tableprops}

Props for the table component.

**Copyable example**

```ts
import type { TableProps } from "@kovojs/ui/table";
const props: TableProps = { children: 'Content' };
```

**Signature**

```ts
interface TableProps {
  caption?: string;
  children?: ComponentChild;
  styles?: TableStyleOverrides;
}
```

#### `TableSectionProps` {#tablesectionprops}

Props for the table section component.

**Copyable example**

```ts
import type { TableSectionProps } from "@kovojs/ui/table";
const props: TableSectionProps = { children: 'Content' };
```

**Signature**

```ts
interface TableSectionProps {
  children?: ComponentChild;
  styles?: TableStyleOverrides;
}
```

#### `TableCellProps` {#tablecellprops}

Props for the table cell component.

**Copyable example**

```ts
import type { TableCellProps } from "@kovojs/ui/table";
const props: TableCellProps = { children: 'Content' };
```

**Signature**

```ts
interface TableCellProps {
  children?: ComponentChild;
  colSpan?: number;
  scope?: 'col' | 'row';
  styles?: TableStyleOverrides;
}
```

## `@kovojs/ui/tabs`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/tabs.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/tabs.tsx)

### Values

#### `Tabs` {#tabs}

Renders the styled tabs primitive.

**Copyable example**

```ts
import { Tabs } from "@kovojs/ui/tabs";
const component = Tabs;
```

**Signature**

```ts
const Tabs = component({
  render(props: TabsProps) {
    const attrs = tabsRootAttributes({
      ...(props.activationMode === undefined ? {} : { activationMode: props.activationMode }),
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(tabsStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `TabsList` {#tabslist}

Renders the styled tabs list primitive.

**Copyable example**

```ts
import { TabsList } from "@kovojs/ui/tabs";
const component = TabsList;
```

**Signature**

```ts
const TabsList = component({
  render(props: TabsListProps) {
    const attrs = tabsListAttributes({
      ...(props.activationMode === undefined ? {} : { activationMode: props.activationMode }),
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(tabsStyles.list, props.styles?.list);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-label={attrs['aria-label']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-orientation={attrs['aria-orientation']}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `TabsTrigger` {#tabstrigger}

Renders the styled tabs trigger primitive.

**Copyable example**

```ts
import { TabsTrigger } from "@kovojs/ui/tabs";
const component = TabsTrigger;
```

**Signature**

```ts
const TabsTrigger = component({
  render(props: TabsTriggerProps) {
    const attrs = tabsTriggerAttributes({
      ...(props.activationMode === undefined ? {} : { activationMode: props.activationMode }),
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.panelId === undefined ? {} : { panelId: props.panelId }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(tabsStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-selected={attrs['aria-selected']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
        type={attrs.type}
        value={attrs.value}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `TabsPanel` {#tabspanel}

Renders the styled tabs panel primitive.

**Copyable example**

```ts
import { TabsPanel } from "@kovojs/ui/tabs";
const component = TabsPanel;
```

**Signature**

```ts
const TabsPanel = component({
  render(props: TabsPanelProps) {
    const attrs = tabsPanelAttributes({
      ...(props.activationMode === undefined ? {} : { activationMode: props.activationMode }),
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.triggerId === undefined ? {} : { triggerId: props.triggerId }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(tabsStyles.panel, props.styles?.panel);

    return (
      <section
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
      >
        {props.children}
      </section>
    );
  },
});
```

### Supporting types

#### `TabsStyleOverrides` {#tabsstyleoverrides}

Style override slots accepted by the tabs components.

**Copyable example**

```ts
import type { TabsStyleOverrides } from "@kovojs/ui/tabs";
const styles: TabsStyleOverrides = {};
```

**Signature**

```ts
interface TabsStyleOverrides {
  list?: style.StyleInput;
  panel?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `TabsStateProps` {#tabsstateprops}

Shared state props for the tabs component family.

**Copyable example**

```ts
import type { TabsStateProps } from "@kovojs/ui/tabs";
const state: TabsStateProps = {};
```

**Signature**

```ts
interface TabsStateProps {
  activationMode?: TabsActivationMode;
  activeValue?: string;
  dir?: TextDirection;
  disabled?: boolean;
  items?: readonly TabsItem[];
  loop?: boolean;
  orientation?: CollectionOrientation;
  value?: string;
}
```

#### `TabsProps` {#tabsprops}

Props for the tabs component.

**Copyable example**

```ts
import type { TabsProps } from "@kovojs/ui/tabs";
const props: TabsProps = { children: 'Content' };
```

**Signature**

```ts
interface TabsProps extends TabsStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: TabsStyleOverrides;
}
```

#### `TabsListProps` {#tabslistprops}

Props for the tabs list component.

**Copyable example**

```ts
import type { TabsListProps } from "@kovojs/ui/tabs";
const props: TabsListProps = { children: 'Content' };
```

**Signature**

```ts
interface TabsListProps extends TabsStateProps {
  children?: ComponentChild;
  descriptionId?: string;
  id?: string;
  label?: string;
  labelledBy?: string;
  styles?: TabsStyleOverrides;
}
```

#### `TabsTriggerProps` {#tabstriggerprops}

Props for the tabs trigger component.

**Copyable example**

```ts
import type { TabsTriggerProps } from "@kovojs/ui/tabs";
const props: TabsTriggerProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface TabsTriggerProps extends TabsStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  panelId?: string;
  styles?: TabsStyleOverrides;
}
```

#### `TabsPanelProps` {#tabspanelprops}

Props for the tabs panel component.

**Copyable example**

```ts
import type { TabsPanelProps } from "@kovojs/ui/tabs";
const props: TabsPanelProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface TabsPanelProps extends TabsStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: TabsStyleOverrides;
  triggerId?: string;
}
```

## `@kovojs/ui/tooltip`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/tooltip.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/tooltip.tsx)

### Values

#### `Tooltip` {#tooltip}

Renders the styled tooltip primitive.

**Copyable example**

```ts
import { Tooltip } from "@kovojs/ui/tooltip";
const component = Tooltip;
```

**Signature**

```ts
const Tooltip = component({
  render(props: TooltipProps) {
    const attrs = tooltipRootAttributes(tooltipState(props));
    const styleAttrs = style.attrs(tooltipStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `TooltipTrigger` {#tooltiptrigger}

Renders the styled tooltip trigger primitive.

**Copyable example**

```ts
import { TooltipTrigger } from "@kovojs/ui/tooltip";
const component = TooltipTrigger;
```

**Signature**

```ts
const TooltipTrigger = component({
  render(props: TooltipTriggerProps) {
    const attrs = tooltipTriggerAttributes({
      ...tooltipState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(tooltipStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={props.disabled === true}
        id={props.id}
        kovo-tooltip={attrs['kovo-tooltip']}
        type="button"
      >
        {props.children}
      </button>
    );
  },
});
```

#### `TooltipContent` {#tooltipcontent}

Renders the styled tooltip content primitive.

**Copyable example**

```ts
import { TooltipContent } from "@kovojs/ui/tooltip";
const component = TooltipContent;
```

**Signature**

```ts
const TooltipContent = component({
  render(props: TooltipContentProps) {
    const attrs = tooltipContentAttributes({
      ...tooltipState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(tooltipStyles.content, props.styles?.content);
    const arrowAttrs = style.attrs(tooltipStyles.arrow);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        popover={attrs.popover}
        role={attrs.role}
      >
        {props.children}
        <span {...arrowAttrs} aria-hidden="true" />
      </div>
    );
  },
});
```

### Supporting types

#### `TooltipStyleOverrides` {#tooltipstyleoverrides}

Style override slots accepted by the tooltip components.

**Copyable example**

```ts
import type { TooltipStyleOverrides } from "@kovojs/ui/tooltip";
const styles: TooltipStyleOverrides = {};
```

**Signature**

```ts
interface TooltipStyleOverrides {
  content?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
}
```

#### `TooltipStateProps` {#tooltipstateprops}

Shared state props for the tooltip component family.

**Copyable example**

```ts
import type { TooltipStateProps } from "@kovojs/ui/tooltip";
const state: TooltipStateProps = {};
```

**Signature**

```ts
interface TooltipStateProps {
  disabled?: boolean;
  open?: boolean;
}
```

#### `TooltipProps` {#tooltipprops}

Props for the tooltip component.

**Copyable example**

```ts
import type { TooltipProps } from "@kovojs/ui/tooltip";
const props: TooltipProps = { children: 'Content' };
```

**Signature**

```ts
interface TooltipProps extends TooltipStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: TooltipStyleOverrides;
}
```

#### `TooltipTriggerProps` {#tooltiptriggerprops}

Props for the tooltip trigger component.

**Copyable example**

```ts
import type { TooltipTriggerProps } from "@kovojs/ui/tooltip";
const props: TooltipTriggerProps = { children: 'Content' };
```

**Signature**

```ts
interface TooltipTriggerProps extends TooltipStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: TooltipStyleOverrides;
}
```

#### `TooltipContentProps` {#tooltipcontentprops}

Props for the tooltip content component.

**Copyable example**

```ts
import type { TooltipContentProps } from "@kovojs/ui/tooltip";
const props: TooltipContentProps = { children: 'Content' };
```

**Signature**

```ts
interface TooltipContentProps extends TooltipStateProps {
  children?: ComponentChild;
  contentId?: string;
  styles?: TooltipStyleOverrides;
}
```

## `@kovojs/ui/toggle`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/toggle.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/toggle.tsx)

### Values

#### `Toggle` {#toggle}

Renders the styled toggle primitive.

**Copyable example**

```ts
import { Toggle } from "@kovojs/ui/toggle";
const component = Toggle;
```

**Signature**

```ts
const Toggle = component({
  render(props: ToggleProps) {
    const attrs = toggleRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      pressed: props.pressed ?? false,
    });
    const styleAttrs = style.attrs(base.root, variants[props.variant ?? 'outline'], props.style);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-pressed={attrs['aria-pressed']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});
```

### Supporting types

#### `ToggleVariant` {#togglevariant}

Supported toggle variant values.

**Copyable example**

```ts
import type { ToggleVariant } from "@kovojs/ui/toggle";
const value: ToggleVariant = 'outline';
```

**Signature**

```ts
type ToggleVariant = 'outline' | 'subtle';
```

#### `ToggleProps` {#toggleprops}

Props for the toggle component.

**Copyable example**

```ts
import type { ToggleProps } from "@kovojs/ui/toggle";
const props: ToggleProps = { children: 'Content' };
```

**Signature**

```ts
interface ToggleProps {
  children?: ComponentChild;
  disabled?: boolean;
  pressed?: boolean;
  style?: style.StyleInput;
  variant?: ToggleVariant;
}
```

## `@kovojs/ui/toggle-group`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/toggle-group.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/toggle-group.tsx)

### Values

#### `ToggleGroup` {#togglegroup}

Renders the styled toggle group primitive.

**Copyable example**

```ts
import { ToggleGroup } from "@kovojs/ui/toggle-group";
const component = ToggleGroup;
```

**Signature**

```ts
const ToggleGroup = component({
  render(props: ToggleGroupProps) {
    const attrs = toggleGroupRootAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.collapsible === undefined ? {} : { collapsible: props.collapsible }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.type === undefined ? {} : { type: props.type }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });

    const styleAttrs = style.attrs(toggleGroupStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ToggleGroupItem` {#togglegroupitem}

Renders the styled toggle group item primitive.

**Copyable example**

```ts
import { ToggleGroupItem } from "@kovojs/ui/toggle-group";
const component = ToggleGroupItem;
```

**Signature**

```ts
const ToggleGroupItem = component({
  render(props: ToggleGroupItemProps) {
    const attrs = toggleGroupItemAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.collapsible === undefined ? {} : { collapsible: props.collapsible }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      itemValue: props.itemValue,
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.type === undefined ? {} : { type: props.type }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });

    const styleAttrs = style.attrs(toggleGroupStyles.item, props.styles?.item);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </span>
    );
  },
});
```

#### `ToggleGroupButton` {#togglegroupbutton}

Renders the styled toggle group button primitive.

**Copyable example**

```ts
import { ToggleGroupButton } from "@kovojs/ui/toggle-group";
const component = ToggleGroupButton;
```

**Signature**

```ts
const ToggleGroupButton = component({
  render(props: ToggleGroupButtonProps) {
    const attrs = toggleGroupButtonAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.collapsible === undefined ? {} : { collapsible: props.collapsible }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      itemValue: props.itemValue,
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.type === undefined ? {} : { type: props.type }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });

    const styleAttrs = style.attrs(toggleGroupStyles.button, props.styles?.button);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-pressed={attrs['aria-pressed']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={attrs.id}
        tabIndex={attrs.tabIndex}
        type={attrs.type}
        value={attrs.value}
      >
        {props.children}
      </button>
    );
  },
});
```

### Supporting types

#### `ToggleGroupStyleOverrides` {#togglegroupstyleoverrides}

Style override slots accepted by the toggle group components.

**Copyable example**

```ts
import type { ToggleGroupStyleOverrides } from "@kovojs/ui/toggle-group";
const styles: ToggleGroupStyleOverrides = {};
```

**Signature**

```ts
interface ToggleGroupStyleOverrides {
  button?: style.StyleInput;
  item?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `ToggleGroupStateProps` {#togglegroupstateprops}

Shared state props for the toggle group component family.

**Copyable example**

```ts
import type { ToggleGroupStateProps } from "@kovojs/ui/toggle-group";
const state: ToggleGroupStateProps = {};
```

**Signature**

```ts
interface ToggleGroupStateProps {
  activeValue?: string;
  collapsible?: boolean;
  dir?: TextDirection;
  disabled?: boolean;
  items?: readonly HeadlessToggleGroupItem[];
  loop?: boolean;
  orientation?: CollectionOrientation;
  type?: ToggleGroupType;
  value?: ToggleGroupValue;
}
```

#### `ToggleGroupProps` {#togglegroupprops}

Props for the toggle group component.

**Copyable example**

```ts
import type { ToggleGroupProps } from "@kovojs/ui/toggle-group";
const props: ToggleGroupProps = { children: 'Content' };
```

**Signature**

```ts
interface ToggleGroupProps extends ToggleGroupStateProps {
  children?: ComponentChild;
  descriptionId?: string;
  id?: string;
  labelledBy?: string;
  styles?: ToggleGroupStyleOverrides;
}
```

#### `ToggleGroupItemProps` {#togglegroupitemprops}

Props for the toggle group item component.

**Copyable example**

```ts
import type { ToggleGroupItemProps } from "@kovojs/ui/toggle-group";
const props: ToggleGroupItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface ToggleGroupItemProps extends ToggleGroupStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: ToggleGroupStyleOverrides;
}
```

#### `ToggleGroupButtonProps` {#togglegroupbuttonprops}

Props for the toggle group button component.

**Copyable example**

```ts
import type { ToggleGroupButtonProps } from "@kovojs/ui/toggle-group";
const props: ToggleGroupButtonProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface ToggleGroupButtonProps extends ToggleGroupStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: ToggleGroupStyleOverrides;
}
```

## `@kovojs/ui/toast`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/toast.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/toast.tsx)

### Values

#### `ToastViewport` {#toastviewport}

Renders the styled toast viewport primitive.

**Copyable example**

```ts
import { ToastViewport } from "@kovojs/ui/toast";
const component = ToastViewport;
```

**Signature**

```ts
const ToastViewport = component({
  render(props: ToastViewportProps) {
    const attrs = toastViewportAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.placement === undefined ? {} : { placement: props.placement }),
    });
    const styleAttrs = style.attrs(toastStyles.viewport, props.styles?.viewport);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props, { style: true })}
        aria-label={attrs['aria-label']}
        data-disabled={attrs['data-disabled']}
        data-placement={attrs['data-placement']}
        id={attrs.id}
        role={attrs.role}
        tabIndex={attrs.tabIndex}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `Toast` {#toast}

Renders the styled toast primitive.

**Copyable example**

```ts
import { Toast } from "@kovojs/ui/toast";
const component = Toast;
```

**Signature**

```ts
const Toast = component({
  render(props: ToastProps) {
    const attrs = toastRootAttributes({
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      id: props.id,
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.politeness === undefined ? {} : { politeness: props.politeness }),
      ...(props.titleId === undefined ? {} : { titleId: props.titleId }),
      ...(props.variant === undefined ? {} : { variant: props.variant }),
    });
    const styleAttrs = style.attrs(toastStyles.root, props.styles?.root);
    const ariaLive: ToastPoliteness = attrs['aria-live'] === 'assertive' ? 'assertive' : 'polite';

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-atomic={attrs['aria-atomic']}
        aria-describedby={attrs['aria-describedby']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-live={ariaLive}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        data-variant={attrs['data-variant']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ToastTitle` {#toasttitle}

Renders the styled toast title primitive.

**Copyable example**

```ts
import { ToastTitle } from "@kovojs/ui/toast";
const component = ToastTitle;
```

**Signature**

```ts
const ToastTitle = component({
  render(props: ToastPartProps) {
    const attrs = toastTitleAttributes(props.id === undefined ? {} : { id: props.id });
    const styleAttrs = style.attrs(toastStyles.title, props.styles?.title);

    return (
      <div {...styleAttrs} data-part={attrs['data-part']} id={attrs.id}>
        {props.children}
      </div>
    );
  },
});
```

#### `ToastDescription` {#toastdescription}

Renders the styled toast description primitive.

**Copyable example**

```ts
import { ToastDescription } from "@kovojs/ui/toast";
const component = ToastDescription;
```

**Signature**

```ts
const ToastDescription = component({
  render(props: ToastPartProps) {
    const attrs = toastDescriptionAttributes(props.id === undefined ? {} : { id: props.id });
    const styleAttrs = style.attrs(toastStyles.description, props.styles?.description);

    return (
      <div {...styleAttrs} data-part={attrs['data-part']} id={attrs.id}>
        {props.children}
      </div>
    );
  },
});
```

#### `ToastAction` {#toastaction}

Renders the styled toast action primitive.

**Copyable example**

```ts
import { ToastAction } from "@kovojs/ui/toast";
const component = ToastAction;
```

**Signature**

```ts
const ToastAction = component({
  render(props: ToastActionProps) {
    const attrs = toastActionAttributes({
      ...(props.actionValue === undefined ? {} : { actionValue: props.actionValue }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.dismissOnAction === undefined ? {} : { dismissOnAction: props.dismissOnAction }),
      id: props.id,
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.variant === undefined ? {} : { variant: props.variant }),
    });
    const styleAttrs = style.attrs(toastStyles.action, props.styles?.action);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        data-action={attrs['data-action']}
        data-dismiss-on-action={attrs['data-dismiss-on-action']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        data-variant={attrs['data-variant']}
        disabled={attrs.disabled}
        type={attrs.type}
        value={attrs.value}
      >
        {props.children}
      </button>
    );
  },
});
```

#### `ToastClose` {#toastclose}

Renders the styled toast close primitive.

**Copyable example**

```ts
import { ToastClose } from "@kovojs/ui/toast";
const component = ToastClose;
```

**Signature**

```ts
const ToastClose = component({
  render(props: ToastCloseProps) {
    const attrs = toastCloseAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      id: props.id,
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.variant === undefined ? {} : { variant: props.variant }),
    });
    const styleAttrs = style.attrs(toastStyles.close, props.styles?.close);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-label={props.children === undefined ? 'Dismiss notification' : undefined}
        data-disabled={attrs['data-disabled']}
        data-dismiss={attrs['data-dismiss']}
        data-state={attrs['data-state']}
        data-variant={attrs['data-variant']}
        disabled={attrs.disabled}
        type={attrs.type}
      >
        {props.children ?? X({ style: toastStyles.closeIcon })}
      </button>
    );
  },
});
```

### Supporting types

#### `ToastStyleOverrides` {#toaststyleoverrides}

Style override slots accepted by the toast components.

**Copyable example**

```ts
import type { ToastStyleOverrides } from "@kovojs/ui/toast";
const styles: ToastStyleOverrides = {};
```

**Signature**

```ts
interface ToastStyleOverrides {
  action?: style.StyleInput;
  close?: style.StyleInput;
  description?: style.StyleInput;
  root?: style.StyleInput;
  title?: style.StyleInput;
  viewport?: style.StyleInput;
}
```

#### `ToastViewportProps` {#toastviewportprops}

Props for the toast viewport component.

**Copyable example**

```ts
import type { ToastViewportProps } from "@kovojs/ui/toast";
const props: ToastViewportProps = { children: 'Content' };
```

**Signature**

```ts
interface ToastViewportProps {
  children?: ComponentChild;
  disabled?: boolean;
  id?: string;
  label?: string;
  placement?: ToastPlacement;
  styles?: ToastStyleOverrides;
}
```

#### `ToastProps` {#toastprops}

Props for the toast component.

**Copyable example**

```ts
import type { ToastProps } from "@kovojs/ui/toast";
const props: ToastProps = { id: 'id', children: 'Content' };
```

**Signature**

```ts
interface ToastProps {
  children?: ComponentChild;
  descriptionId?: string;
  disabled?: boolean;
  id: string;
  open?: boolean;
  politeness?: ToastPoliteness;
  styles?: ToastStyleOverrides;
  titleId?: string;
  variant?: ToastVariant;
}
```

#### `ToastPartProps` {#toastpartprops}

Props for the toast part component.

**Copyable example**

```ts
import type { ToastPartProps } from "@kovojs/ui/toast";
const props: ToastPartProps = { children: 'Content' };
```

**Signature**

```ts
interface ToastPartProps {
  children?: ComponentChild;
  id?: string;
  styles?: ToastStyleOverrides;
}
```

#### `ToastActionProps` {#toastactionprops}

Props for the toast action component.

**Copyable example**

```ts
import type { ToastActionProps } from "@kovojs/ui/toast";
const props: ToastActionProps = { id: 'id', children: 'Content' };
```

**Signature**

```ts
interface ToastActionProps {
  actionValue?: string;
  children?: ComponentChild;
  disabled?: boolean;
  dismissOnAction?: boolean;
  id: string;
  open?: boolean;
  styles?: ToastStyleOverrides;
  variant?: ToastVariant;
}
```

#### `ToastCloseProps` {#toastcloseprops}

Props for the toast close component.

**Copyable example**

```ts
import type { ToastCloseProps } from "@kovojs/ui/toast";
const props: ToastCloseProps = { id: 'id' };
```

**Signature**

```ts
type ToastCloseProps = ToastActionProps;
```

## `@kovojs/ui/toolbar`

**Task:** Styled Kovo server components: versioned component subpaths, StyleX slot overrides, and copy-in source surfaces.

Source: [`packages/ui/src/toolbar.tsx`](https://github.com/kovojs/kovo/blob/main/packages/ui/src/toolbar.tsx)

### Values

#### `Toolbar` {#toolbar}

Renders the styled toolbar primitive.

**Copyable example**

```ts
import { Toolbar } from "@kovojs/ui/toolbar";
const component = Toolbar;
```

**Signature**

```ts
const Toolbar = component({
  render(props: ToolbarProps) {
    const attrs = toolbarRootAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
    });

    const styleAttrs = style.attrs(toolbarStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-label={attrs['aria-label']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-orientation={attrs['aria-orientation']}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});
```

#### `ToolbarItem` {#toolbaritem}

Renders the styled toolbar item primitive.

**Copyable example**

```ts
import { ToolbarItem } from "@kovojs/ui/toolbar";
const component = ToolbarItem;
```

**Signature**

```ts
const ToolbarItem = component({
  render(props: ToolbarItemProps) {
    const attrs = toolbarItemAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      itemValue: props.itemValue,
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
    });

    const styleAttrs = style.attrs(toolbarStyles.item, props.styles?.item);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        id={attrs.id}
      >
        {props.children}
      </span>
    );
  },
});
```

#### `ToolbarButton` {#toolbarbutton}

Renders the styled toolbar button primitive.

**Copyable example**

```ts
import { ToolbarButton } from "@kovojs/ui/toolbar";
const component = ToolbarButton;
```

**Signature**

```ts
const ToolbarButton = component({
  render(props: ToolbarButtonProps) {
    const attrs = toolbarButtonAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      itemValue: props.itemValue,
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.pressed === undefined ? {} : { pressed: props.pressed }),
    });

    const styleAttrs = style.attrs(toolbarStyles.button, props.styles?.button);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-pressed={attrs['aria-pressed']}
        data-disabled={attrs['data-disabled']}
        data-pressed={attrs['data-pressed']}
        disabled={attrs.disabled}
        id={attrs.id}
        tabIndex={attrs.tabIndex}
        type={attrs.type}
        value={attrs.value}
      >
        {props.children}
      </button>
    );
  },
});
```

### Supporting types

#### `ToolbarStyleOverrides` {#toolbarstyleoverrides}

Style override slots accepted by the toolbar components.

**Copyable example**

```ts
import type { ToolbarStyleOverrides } from "@kovojs/ui/toolbar";
const styles: ToolbarStyleOverrides = {};
```

**Signature**

```ts
interface ToolbarStyleOverrides {
  button?: style.StyleInput;
  item?: style.StyleInput;
  root?: style.StyleInput;
}
```

#### `ToolbarStateProps` {#toolbarstateprops}

Shared state props for the toolbar component family.

**Copyable example**

```ts
import type { ToolbarStateProps } from "@kovojs/ui/toolbar";
const state: ToolbarStateProps = {};
```

**Signature**

```ts
interface ToolbarStateProps {
  activeValue?: string;
  dir?: TextDirection;
  disabled?: boolean;
  items?: readonly HeadlessToolbarItem[];
  loop?: boolean;
  orientation?: ToolbarOrientation;
}
```

#### `ToolbarProps` {#toolbarprops}

Props for the toolbar component.

**Copyable example**

```ts
import type { ToolbarProps } from "@kovojs/ui/toolbar";
const props: ToolbarProps = { children: 'Content' };
```

**Signature**

```ts
interface ToolbarProps extends ToolbarStateProps {
  children?: ComponentChild;
  descriptionId?: string;
  id?: string;
  label?: string;
  labelledBy?: string;
  styles?: ToolbarStyleOverrides;
}
```

#### `ToolbarItemProps` {#toolbaritemprops}

Props for the toolbar item component.

**Copyable example**

```ts
import type { ToolbarItemProps } from "@kovojs/ui/toolbar";
const props: ToolbarItemProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface ToolbarItemProps extends ToolbarStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: ToolbarStyleOverrides;
}
```

#### `ToolbarButtonProps` {#toolbarbuttonprops}

Props for the toolbar button component.

**Copyable example**

```ts
import type { ToolbarButtonProps } from "@kovojs/ui/toolbar";
const props: ToolbarButtonProps = { itemValue: 'item', children: 'Content' };
```

**Signature**

```ts
interface ToolbarButtonProps extends ToolbarItemProps {
  pressed?: boolean;
}
```