handleSort(key as keyof User)}> {label} {getSortIcon(key as keyof User)}
{user.name}	{user.username}	{user.email}

setFormContent(e.currentTarget.value)}
                  placeholder="Enter some text..."
                  rows={4}
                />
              </div>
            </Dialog.Content>
          </Dialog.Positioner>
        </Portal>
      </Dialog.RootProvider>

<Dialog.RootProvider value={confirmDialog}>
        <Portal>
          <Dialog.Backdrop class={styles.Backdrop} />
          <Dialog.Positioner class={styles.Positioner}>
            <Dialog.Content class={styles.Content}>
              <Dialog.Title class={styles.Title}>Unsaved Changes</Dialog.Title>
              <Dialog.Description class={styles.Description}>
                You have unsaved changes. Are you sure you want to discard them?
              </Dialog.Description>
              <div class={styles.Actions}>
                <button class={button.Root} onClick={() => confirmDialog().setOpen(false)}>
                  Keep Editing
                </button>
                <button class={button.Root} onClick={handleConfirmClose}>
                  Discard
                </button>
              </div>
            </Dialog.Content>
          </Dialog.Positioner>
        </Portal>
      </Dialog.RootProvider>
    </>
  )
}
```

## Guides

### Close Behavior

- `closeOnEscape={false}` - Prevent closing on <kbd>Escape</kbd>
- `closeOnInteractOutside={false}` - Prevent closing on outside click

For conditional control, use `onEscapeKeyDown` or `onInteractOutside` with `e.preventDefault()`.

### Conditional Rendering

Unmounting `Dialog.Root` when toggling open state can break focus, scroll lock, and cleanup. Keep the root mounted and
control it with `open` / `onOpenChange`.

When you want portal content out of the DOM while closed, add `lazyMount` and `unmountOnExit` to the root.

```tsx
import { Dialog } from '@ark-ui/react/dialog'
import { Portal } from '@ark-ui/react/portal'

// ❌ Avoid
const Dont = () => {
  if (isOpen) {
    return (
      <Dialog.Root open={isOpen} onOpenChange={(e) => setOpen(e.open)}>
        <Portal>...</Portal>
      </Dialog.Root>
    )
  }
  return null
}

// ✅ Prefer
const Do = () => {
  return (
    <Dialog.Root open={isOpen} onOpenChange={(e) => setOpen(e.open)} lazyMount unmountOnExit>
      <Portal>...</Portal>
    </Dialog.Root>
  )
}
```

### Z-Index Stacking

Use a shared overlay z-index with `--layer-index` to keep stacked dialogs and nested overlays in order:

```css
[data-scope='dialog'][data-part='content'] {
  z-index: calc(var(--z-index-overlay) + var(--layer-index, 0));
}

[data-scope='dialog'][data-part='positioner'] {
  z-index: var(--z-index, var(--z-index-overlay));
}

[data-scope='dialog'][data-part='backdrop'] {
  z-index: calc(var(--z-index, var(--z-index-overlay)) - 1);
}
```

Read the [Styling guide](/docs/guides/styling#z-index) for more details.

### Dynamic Imports

When using `lazyMount` with `React.lazy` or Next.js `dynamic`, wrap the imported component in `Suspense`:

```tsx
import { Dialog } from '@ark-ui/react/dialog'
import { Suspense } from 'react'
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'))

export const Demo = () => (
  <Dialog.Root lazyMount>
    <Dialog.Trigger>Open</Dialog.Trigger>
    <Dialog.Content>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </Dialog.Content>
  </Dialog.Root>
)
```

## API Reference

### Props

### Root

#### Props

**`aria-label`**
Type: `string`
Required: false
Default Value: `undefined`
Description: Human readable label for the dialog, in event the dialog title is not rendered

**`closeOnEscape`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to close the dialog when the escape key is pressed

**`closeOnInteractOutside`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to close the dialog when the outside is clicked

**`defaultOpen`**
Type: `boolean`
Required: false
Default Value: `false`
Description: The initial open state of the dialog when rendered.
Use when you don't need to control the open state of the dialog.

**`defaultTriggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial active trigger value when rendered.
Use when you don't need to control the active trigger value.

**`finalFocusEl`**
Type: `() => MaybeElement`
Required: false
Default Value: `undefined`
Description: Element to receive focus when the dialog is closed

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  trigger: string | ((value?: string | undefined) => string)
  positioner: string
  backdrop: string
  content: string
  closeTrigger: string
  title: string
  description: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the dialog. Useful for composition.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`initialFocusEl`**
Type: `() => MaybeElement`
Required: false
Default Value: `undefined`
Description: Element to receive focus when the dialog is opened

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`modal`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to prevent pointer interaction outside the element and hide all content below it

**`onEscapeKeyDown`**
Type: `(event: KeyboardEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the escape key is pressed

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`onFocusOutside`**
Type: `(event: FocusOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the focus is moved outside the component

**`onInteractOutside`**
Type: `(event: InteractOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when an interaction happens outside the component

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function to call when the dialog's open state changes

**`onPointerDownOutside`**
Type: `(event: PointerDownOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the pointer is pressed down outside the component

**`onRequestDismiss`**
Type: `(event: LayerDismissEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when this layer is closed due to a parent layer being closed

**`onTriggerValueChange`**
Type: `(details: TriggerValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function to call when the active trigger changes

**`open`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The controlled open state of the dialog

**`persistentElements`**
Type: `(() => Element | null)[]`
Required: false
Default Value: `undefined`
Description: Returns the persistent elements that:
- should not have pointer-events disabled
- should not trigger the dismiss event

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`preventScroll`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to prevent scrolling behind the dialog when it's opened

**`restoreFocus`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to restore focus to the element that had focus before the dialog was opened

**`role`**
Type: `'dialog' | 'alertdialog'`
Required: false
Default Value: `"dialog"`
Description: The dialog's role

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`trapFocus`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to trap focus inside the dialog when it's opened

**`triggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled active trigger value

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Backdrop

#### Props

**`asChild`**
Type: `(props: ParentProps<'div'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: dialog
**`data-part`**: backdrop
**`data-state`**: "open" | "closed"

### CloseTrigger

#### Props

**`asChild`**
Type: `(props: ParentProps<'button'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Content

#### Props

#### Data Attributes

**`data-scope`**: dialog
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-nested`**: dialog
**`data-has-nested`**: dialog

### Description

#### Props

### Positioner

#### Props

### RootProvider

#### Props

**`value`**
Type: `UseDialogReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Title

#### Props

**`asChild`**
Type: `(props: ParentProps<'h2'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Trigger

#### Props

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value that identifies this specific trigger

#### Data Attributes

**`data-scope`**: dialog
**`data-part`**: trigger
**`data-value`**: The value of the item
**`data-state`**: "open" | "closed"
**`data-current`**: Present when current

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `open` | `boolean` | Whether the dialog is open |
| `setOpen` | `(open: boolean) => void` | Function to open or close the dialog |
| `triggerValue` | `string | null` | The active trigger value |
| `setTriggerValue` | `(value: string | null) => void` | Function to set the active trigger value |

## Accessibility

Complies with the [Dialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).

### Keyboard Support

**`Enter`**
Description: When focus is on the trigger, opens the dialog.

**`Tab`**
Description: Moves focus to the next focusable element within the content. Focus is trapped within the dialog.

**`Shift + Tab`**
Description: Moves focus to the previous focusable element. Focus is trapped within the dialog.

**`Esc`**
Description: Closes the dialog and moves focus to trigger or the defined final focus element

# Drawer

## Anatomy

```tsx
<Drawer.Root>
  <Drawer.Trigger />
  <Drawer.Backdrop />
  <Drawer.Positioner>
    <Drawer.Content>
      <Drawer.Grabber>
        <Drawer.GrabberIndicator />
      </Drawer.Grabber>
      <Drawer.Title />
      <Drawer.Description />
      <Drawer.CloseTrigger />
    </Drawer.Content>
  </Drawer.Positioner>
</Drawer.Root>
```

## Examples

```tsx
import { Drawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import styles from 'styles/drawer.module.css'

export const Basic = () => (
  <Drawer.Root>
    <Drawer.Trigger class={styles.Trigger}>Open</Drawer.Trigger>
    <Drawer.Backdrop class={styles.Backdrop} />
    <Drawer.Positioner class={styles.Positioner}>
      <Drawer.Content class={styles.Content}>
        <Drawer.Grabber class={styles.Grabber}>
          <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
        </Drawer.Grabber>
        <Drawer.Title class={styles.Title}>Drawer Title</Drawer.Title>
        <p>This is the content of the drawer.</p>
        <Drawer.CloseTrigger class={styles.CloseTrigger}>
          <XIcon />
        </Drawer.CloseTrigger>
      </Drawer.Content>
    </Drawer.Positioner>
  </Drawer.Root>
)
```

### Swipe Direction

Use the `swipeDirection` prop to control which edge the drawer slides in from.

```tsx
import { Drawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import styles from 'styles/drawer.module.css'

export const SwipeDirection = () => (
  <Drawer.Root swipeDirection="end">
    <Drawer.Trigger class={styles.Trigger}>Open Right</Drawer.Trigger>
    <Drawer.Backdrop class={styles.Backdrop} />
    <Drawer.Positioner class={styles.Positioner}>
      <Drawer.Content class={styles.Content}>
        <Drawer.Title class={styles.Title}>Right Drawer</Drawer.Title>
        <p>This drawer slides in from the right side.</p>
        <Drawer.CloseTrigger class={styles.CloseTrigger}>
          <XIcon />
        </Drawer.CloseTrigger>
      </Drawer.Content>
    </Drawer.Positioner>
  </Drawer.Root>
)
```

### Snap Points

Use the `snapPoints` prop to define intermediate positions the drawer can snap to.

```tsx
import { Drawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import styles from 'styles/drawer.module.css'

export const SnapPoints = () => (
  <Drawer.Root snapPoints={[0.25, 0.5, 1]} defaultSnapPoint={0.5}>
    <Drawer.Trigger class={styles.Trigger}>Open</Drawer.Trigger>
    <Drawer.Backdrop class={styles.Backdrop} />
    <Drawer.Positioner class={styles.Positioner}>
      <Drawer.Content class={styles.Content}>
        <Drawer.Grabber class={styles.Grabber}>
          <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
        </Drawer.Grabber>
        <Drawer.Title class={styles.Title}>Drawer with Snap Points</Drawer.Title>
        <p>This drawer has multiple snap points at 25%, 50%, and 100% of the viewport height.</p>
        <p>Drag the grabber to snap between different heights, or swipe to dismiss.</p>
        <Drawer.CloseTrigger class={styles.CloseTrigger}>
          <XIcon />
        </Drawer.CloseTrigger>
      </Drawer.Content>
    </Drawer.Positioner>
  </Drawer.Root>
)
```

### Modal

Set `modal` to `false` to allow interaction with the rest of the page while the drawer is open.

```tsx
import { Drawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import styles from 'styles/drawer.module.css'

export const Modal = () => (
  <Drawer.Root modal>
    <Drawer.Trigger class={styles.Trigger}>Open</Drawer.Trigger>
    <Drawer.Backdrop class={styles.Backdrop} />
    <Drawer.Positioner class={styles.Positioner}>
      <Drawer.Content class={styles.Content}>
        <Drawer.Grabber class={styles.Grabber}>
          <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
        </Drawer.Grabber>
        <Drawer.Title class={styles.Title}>Modal Drawer</Drawer.Title>
        <Drawer.CloseTrigger class={styles.CloseTrigger}>
          <XIcon />
        </Drawer.CloseTrigger>
      </Drawer.Content>
    </Drawer.Positioner>
  </Drawer.Root>
)
```

### Controlled

Use the `open` and `onOpenChange` props to control the drawer state.

```tsx
import { Drawer, type DrawerOpenChangeDetails } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/drawer.module.css'

export const Controlled = () => {
  const [open, setOpen] = createSignal(false)

return (
    <>
      <button class={button.Root} onClick={() => setOpen(!open())}>
        {open() ? 'Close' : 'Open'} Drawer
      </button>

<Drawer.Root open={open()} onOpenChange={(details: DrawerOpenChangeDetails) => setOpen(details.open)}>
        <Drawer.Backdrop class={styles.Backdrop} />
        <Drawer.Positioner class={styles.Positioner}>
          <Drawer.Content class={styles.Content}>
            <Drawer.Grabber class={styles.Grabber}>
              <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
            </Drawer.Grabber>
            <Drawer.Title class={styles.Title}>Controlled Drawer</Drawer.Title>
            <p>This drawer is controlled via state.</p>
            <Drawer.CloseTrigger class={styles.CloseTrigger}>
              <XIcon />
            </Drawer.CloseTrigger>
          </Drawer.Content>
        </Drawer.Positioner>
      </Drawer.Root>
    </>
  )
}
```

### Scrollable

```tsx
import { Drawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import { For } from 'solid-js'
import styles from 'styles/drawer.module.css'

export const Scrollable = () => (
  <Drawer.Root>
    <Drawer.Trigger class={styles.Trigger}>Open</Drawer.Trigger>
    <Drawer.Backdrop class={styles.Backdrop} />
    <Drawer.Positioner class={styles.Positioner}>
      <Drawer.Content class={styles.Content}>
        <Drawer.Grabber class={styles.Grabber}>
          <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
        </Drawer.Grabber>
        <Drawer.Title class={styles.Title}>Scrollable Drawer</Drawer.Title>
        <Drawer.CloseTrigger class={styles.CloseTrigger}>
          <XIcon />
        </Drawer.CloseTrigger>
        <div class={styles.Scrollable}>
          <For each={Array.from({ length: 50 })}>
            {(_, index) => <div class={styles.ScrollableItem}>Item {index() + 1}</div>}
          </For>
        </div>
      </Drawer.Content>
    </Drawer.Positioner>
  </Drawer.Root>
)
```

### No Drag Area

Apply the `data-no-drag` attribute to any element inside the drawer to prevent dragging from starting on it.

```tsx
import { Drawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import styles from 'styles/drawer.module.css'

export const NoDragArea = () => (
  <Drawer.Root>
    <Drawer.Trigger class={styles.Trigger}>Open</Drawer.Trigger>
    <Drawer.Backdrop class={styles.Backdrop} />
    <Drawer.Positioner class={styles.Positioner}>
      <Drawer.Content class={styles.Content}>
        <Drawer.Grabber class={styles.Grabber}>
          <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
        </Drawer.Grabber>
        <Drawer.Title class={styles.Title}>Drawer Title</Drawer.Title>
        <p data-no-drag>This is the no drag area of the drawer.</p>
        <Drawer.CloseTrigger class={styles.CloseTrigger}>
          <XIcon />
        </Drawer.CloseTrigger>
      </Drawer.Content>
    </Drawer.Positioner>
  </Drawer.Root>
)
```

### Non Draggable

Set `draggable` to `false` to disable drag-to-dismiss entirely.

```tsx
import { Drawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import styles from 'styles/drawer.module.css'

export const NonDraggable = () => (
  <Drawer.Root>
    <Drawer.Trigger class={styles.Trigger}>Open</Drawer.Trigger>
    <Drawer.Backdrop class={styles.Backdrop} />
    <Drawer.Positioner class={styles.Positioner}>
      <Drawer.Content class={styles.Content} draggable={false}>
        <Drawer.Grabber class={styles.Grabber}>
          <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
        </Drawer.Grabber>
        <Drawer.Title class={styles.Title}>Drawer Title</Drawer.Title>
        <p>This is the content of the drawer.</p>
        <Drawer.CloseTrigger class={styles.CloseTrigger}>
          <XIcon />
        </Drawer.CloseTrigger>
      </Drawer.Content>
    </Drawer.Positioner>
  </Drawer.Root>
)
```

### Indent Background

Use `Drawer.IndentBackground` to create a visual indent effect on the page behind the drawer.

```tsx
import { Drawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import styles from 'styles/drawer.module.css'

export const IndentBackground = () => (
  <Drawer.Stack>
    <Drawer.IndentBackground class={styles.IndentBackground} />
    <Drawer.Indent class={styles.Indent}>
      <Drawer.Root>
        <Drawer.Trigger class={styles.Trigger}>Open Drawer</Drawer.Trigger>
        <Drawer.Backdrop class={styles.Backdrop} />
        <Drawer.Positioner class={styles.Positioner}>
          <Drawer.Content class={styles.Content}>
            <Drawer.Grabber class={styles.Grabber}>
              <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
            </Drawer.Grabber>
            <Drawer.Title class={styles.Title}>Stacked Drawer</Drawer.Title>
            <p>This drawer uses indent background and indent effects when swiped.</p>
            <Drawer.CloseTrigger class={styles.CloseTrigger}>
              <XIcon />
            </Drawer.CloseTrigger>
          </Drawer.Content>
        </Drawer.Positioner>
      </Drawer.Root>
    </Drawer.Indent>
  </Drawer.Stack>
)
```

### Multiple Triggers

Use the `value` prop on `Drawer.Trigger` to share a single drawer across multiple trigger elements. The
`onTriggerValueChange` callback fires when a different trigger is activated.

```tsx
import { Drawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import { For, Show, createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/drawer.module.css'
import field from 'styles/field.module.css'

interface User {
  id: string
  name: string
  email: string
}

const users: User[] = [
  { id: '1', name: 'Alice Johnson', email: 'alice@example.com' },
  { id: '2', name: 'Bob Smith', email: 'bob@example.com' },
  { id: '3', name: 'Carol Davis', email: 'carol@example.com' },
]

export const MultipleTriggers = () => {
  const [activeUser, setActiveUser] = createSignal<User | null>(null)

return (
    <Drawer.Root
      swipeDirection="end"
      onTriggerValueChange={(e) => {
        setActiveUser(users.find((u) => u.id === e.value) ?? null)
      }}
    >
      <div class={button.Group}>
        <For each={users}>
          {(user) => (
            <Drawer.Trigger value={user.id} class={button.Root}>
              Edit {user.name}
            </Drawer.Trigger>
          )}
        </For>
      </div>
      <Drawer.Backdrop class={styles.Backdrop} />
      <Drawer.Positioner class={styles.Positioner}>
        <Drawer.Content class={styles.Content}>
          <Drawer.Grabber class={styles.Grabber}>
            <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
          </Drawer.Grabber>
          <Drawer.Title class={styles.Title}>Edit User</Drawer.Title>
          <Show when={activeUser()}>
            {(user) => (
              <div class="stack">
                <div class={field.Root}>
                  <label class={field.Label}>Name</label>
                  <input class={field.Input} value={user().name} />
                </div>
                <div class={field.Root}>
                  <label class={field.Label}>Email</label>
                  <input class={field.Input} value={user().email} />
                </div>
                <div class={button.Group}>
                  <Drawer.CloseTrigger class={button.Root}>Cancel</Drawer.CloseTrigger>
                  <Drawer.CloseTrigger class={button.Root} data-variant="solid">
                    Save Changes
                  </Drawer.CloseTrigger>
                </div>
              </div>
            )}
          </Show>
          <Drawer.CloseTrigger class={styles.CloseTrigger}>
            <XIcon />
          </Drawer.CloseTrigger>
        </Drawer.Content>
      </Drawer.Positioner>
    </Drawer.Root>
  )
}
```

### Using the Root Provider

Use the `useDrawer` hook and `Drawer.RootProvider` to control the drawer from outside the component tree.

```tsx
import { Drawer, useDrawer } from '@ark-ui/solid/drawer'
import { XIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/drawer.module.css'

export const RootProvider = () => {
  const drawer = useDrawer({
    defaultSnapPoint: 0.5,
    snapPoints: [0.25, 0.5, 1],
  })

return (
    <div class="stack">
      <div class="hstack">
        <button class={button.Root} onClick={() => drawer().setOpen(true)}>
          Open via API
        </button>
        <button class={button.Root} onClick={() => drawer().setSnapPoint(0.25)}>
          Set to 25%
        </button>
        <button class={button.Root} onClick={() => drawer().setSnapPoint(1)}>
          Set to 100%
        </button>
      </div>

<Drawer.RootProvider value={drawer}>
        <Drawer.Backdrop class={styles.Backdrop} />
        <Drawer.Positioner class={styles.Positioner}>
          <Drawer.Content class={styles.Content}>
            <Drawer.Grabber class={styles.Grabber}>
              <Drawer.GrabberIndicator class={styles.GrabberIndicator} />
            </Drawer.Grabber>
            <Drawer.Title class={styles.Title}>Drawer with RootProvider</Drawer.Title>
            <p>This drawer is controlled via the useDrawer hook and RootProvider.</p>
            <p>Active snap point: {drawer().snapPoint}</p>
            <Drawer.CloseTrigger class={styles.CloseTrigger}>
              <XIcon />
            </Drawer.CloseTrigger>
          </Drawer.Content>
        </Drawer.Positioner>
      </Drawer.RootProvider>
    </div>
  )
}
```

## Guides

### Styling by Swipe Direction

The `Drawer.Content` elements expose a `data-swipe-direction` attribute (`up` | `down` | `left` | `right`) that reflects
the resolved physical direction the drawer slides in from.

Target it to apply direction-aware styles — for example, rounded corners on the side facing the viewport:

```css
[data-scope='drawer'][data-part='content'] {
  /* Top drawer */
  &[data-swipe-direction='up'] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }

/* Bottom drawer */
  &[data-swipe-direction='down'] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

/* Left drawer */
  &[data-swipe-direction='left'] {
    border-top-left-radius: 0;
    border-bottom-right-radius: 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 0;
  }

/* Right drawer */
  &[data-swipe-direction='right'] {
    border-top-right-radius: 0;
    border-bottom-left-radius: 16px;
    border-top-left-radius: 0;
    border-top-right-radius: 16px;
  }
}
```

### Preventing Overdrag Gaps

When a user drags the drawer past its open position, a small gap can appear between the drawer content and the viewport
edge. To prevent this, extend the drawer's background beyond its visible bounds using a CSS `::after` pseudo-element:

```css
[data-scope='drawer'][data-part='content'] {
  --bleed: 3rem;
  position: relative;

/* Bleed effect */
  &::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: var(--bleed);
    background-color: inherit;
    pointer-events: none;
  }
}
```

For side drawers, adjust the pseudo-element to extend horizontally:

```css
[data-scope='drawer'][data-part='content'] {
  /* Right drawer */
  &[data-swipe-direction='right']::after {
    inset-inline: auto;
    inset-block: 0;
    top: 0;
    left: 100%;
    width: var(--bleed);
    height: auto;
  }

/* Left drawer */
  &[data-swipe-direction='left']::after {
    inset-inline: auto;
    inset-block: 0;
    top: 0;
    right: 100%;
    width: var(--bleed);
    height: auto;
  }
}
```

The `::after` element inherits the drawer's background color and sits just outside the content bounds. During overdrag,
the dampened movement reveals this extension instead of an empty gap.

## API Reference

### Props

### Root

#### Props

**`closeOnEscape`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to close the drawer when the escape key is pressed.

**`closeOnInteractOutside`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to close the drawer when the outside is clicked.

**`closeThreshold`**
Type: `number`
Required: false
Default Value: `0.25`
Description: The threshold distance for dismissing the drawer.

**`defaultOpen`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The initial open state of the drawer.

**`defaultSnapPoint`**
Type: `SnapPoint`
Required: false
Default Value: `undefined`
Description: undefined

**`defaultTriggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The default trigger value (uncontrolled).

**`finalFocusEl`**
Type: `() => MaybeElement`
Required: false
Default Value: `undefined`
Description: Element to receive focus when the sheet is closed.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  backdrop: string
  positioner: string
  content: string
  title: string
  description: string
  header: string
  trigger: string | ((value?: string | undefined) => string)
  grabber: string
  grabberIndicator: string
  closeTrigger: string
  swipeArea: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the drawer. Useful for composition.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`initialFocusEl`**
Type: `() => MaybeElement`
Required: false
Default Value: `undefined`
Description: Element to receive focus when the sheet is opened.

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`modal`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to prevent pointer interaction outside the element and hide all content below it.

**`onEscapeKeyDown`**
Type: `(event: KeyboardEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the escape key is pressed

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`onFocusOutside`**
Type: `(event: FocusOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the focus is moved outside the component

**`onInteractOutside`**
Type: `(event: InteractOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when an interaction happens outside the component

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the open state changes.

**`onRequestDismiss`**
Type: `(event: LayerDismissEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when this layer is closed due to a parent layer being closed

**`onSnapPointChange`**
Type: `(details: SnapPointChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when the snap point changes.

**`onTriggerValueChange`**
Type: `(details: TriggerValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback when the active trigger value changes.

**`open`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the drawer is open.

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`preventDragOnScroll`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to prevent dragging on scrollable elements.
When enabled, the sheet will not start dragging if the user is interacting with a scrollable element.

**`preventScroll`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to prevent scrolling behind the sheet when it's opened

**`restoreFocus`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to restore focus to the element that had focus before the sheet was opened.

**`role`**
Type: `'dialog' | 'alertdialog'`
Required: false
Default Value: `"dialog"`
Description: The sheet's role

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`snapPoint`**
Type: `SnapPoint`
Required: false
Default Value: `undefined`
Description: The currently active snap point.

**`snapPoints`**
Type: `SnapPoint[]`
Required: false
Default Value: `[1]`
Description: The snap points of the drawer.
Array of numbers or strings representing the snap points.

**`snapToSequentialPoints`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether the drawer should snap to sequential points when swiping.

**`stack`**
Type: `DrawerStack`
Required: false
Default Value: `undefined`
Description: Optional external store for coordinating app-level drawer stack visuals
(e.g. indent and background layers).

**`swipeDirection`**
Type: `SwipeDirection`
Required: false
Default Value: `"down"`
Description: The direction in which the drawer can be swiped.

**`swipeVelocityThreshold`**
Type: `number`
Required: false
Default Value: `700`
Description: The threshold velocity (in pixels/s) for closing the drawer.

**`trapFocus`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to trap focus inside the sheet when it's opened.

**`triggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value of the trigger that currently controls the drawer.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Backdrop

#### Props

#### Data Attributes

**`data-scope`**: drawer
**`data-part`**: backdrop
**`data-state`**: "open" | "closed"
**`data-swiping`**:

### CloseTrigger

#### Props

### Content

#### Props

**`draggable`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the drawer content is draggable.
If false, the drawer can only be dragged by the grabber.

#### Data Attributes

**`data-scope`**: drawer
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-expanded`**: Present when expanded
**`data-swipe-direction`**: 
**`data-swiping`**: 
**`data-dragging`**: Present when in the dragging state
**`data-nested-drawer-open`**: 
**`data-nested-drawer-swiping`**:

### Description

#### Props

### GrabberIndicator

#### Props

### Grabber

#### Props

### IndentBackground

#### Props

### Indent

#### Props

### Positioner

#### Props

#### Data Attributes

**`data-scope`**: drawer
**`data-part`**: positioner
**`data-state`**: "open" | "closed"
**`data-swipe-direction`**:

### RootProvider

#### Props

**`value`**
Type: `UseDrawerReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### SwipeArea

#### Props

#### Data Attributes

**`data-scope`**: drawer
**`data-part`**: swipe-area
**`data-state`**: "open" | "closed"
**`data-swiping`**: 
**`data-swipe-direction`**: 
**`data-disabled`**: Present when disabled

### Title

#### Props

### Trigger

#### Props

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value that identifies this specific trigger

#### Data Attributes

**`data-scope`**: drawer
**`data-part`**: trigger
**`data-value`**: The value of the item
**`data-state`**: "open" | "closed"
**`data-current`**: Present when current

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `open` | `boolean` | Whether the drawer is open. |
| `dragging` | `boolean` | Whether the drawer is currently being dragged. |
| `triggerValue` | `string | null` | The value of the active trigger. |
| `setTriggerValue` | `(value: string | null) => void` | Set the active trigger value. |
| `setOpen` | `(open: boolean) => void` | Function to open or close the menu. |
| `snapPoints` | `SnapPoint[]` | The snap points of the drawer. |
| `swipeDirection` | `SwipeDirection` | The swipe direction of the drawer. |
| `snapPoint` | `SnapPoint | null` | The currently active snap point. |
| `setSnapPoint` | `(snapPoint: SnapPoint | null) => void` | Function to set the active snap point. |
| `getOpenPercentage` | `() => number` | Get the current open percentage of the drawer. |
| `getSnapPointIndex` | `() => number` | Get the index of the currently active snap point. |
| `getContentSize` | `() => number | null` | Get the current main-axis size of the drawer content. |

## Accessibility

Complies with the [Dialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).

**`Enter`**
Description: When focus is on the trigger, opens the dialog.

**`Tab`**
Description: Moves focus to the next focusable element within the content. Focus is trapped within the dialog.

**`Shift + Tab`**
Description: Moves focus to the previous focusable element. Focus is trapped within the dialog.

**`Esc`**
Description: Closes the dialog and moves focus to trigger or the defined final focus element

# Editable

## Anatomy

```tsx
<Editable.Root>
  <Editable.Label />
  <Editable.Area>
    <Editable.Input />
    <Editable.Preview />
  </Editable.Area>
  <Editable.Control>
    <Editable.EditTrigger />
    <Editable.SubmitTrigger />
    <Editable.CancelTrigger />
  </Editable.Control>
</Editable.Root>
```

## Examples

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { PencilIcon } from 'lucide-solid'
import styles from 'styles/editable.module.css'

export const Basic = () => (
  <Editable.Root class={styles.Root} placeholder="Enter text..." defaultValue="Hello World">
    <Editable.Label class={styles.Label}>Label</Editable.Label>
    <Editable.Area class={styles.Area}>
      <Editable.Input class={styles.Input} />
      <Editable.Preview class={styles.Preview} />
    </Editable.Area>
    <Editable.Control class={styles.Control}>
      <Editable.EditTrigger class={styles.EditTrigger}>
        <PencilIcon />
      </Editable.EditTrigger>
    </Editable.Control>
  </Editable.Root>
)
```

### Controlled

Use the `value` and `onValueChange` props to control the editable state.

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { PencilIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/editable.module.css'

export const Controlled = () => {
  const [value, setValue] = createSignal('Hello World')

return (
    <Editable.Root
      class={styles.Root}
      placeholder="Enter text..."
      value={value()}
      onValueChange={(e) => setValue(e.value)}
    >
      <Editable.Label class={styles.Label}>Label</Editable.Label>
      <Editable.Area class={styles.Area}>
        <Editable.Input class={styles.Input} />
        <Editable.Preview class={styles.Preview} />
      </Editable.Area>
      <Editable.Control class={styles.Control}>
        <Editable.EditTrigger class={styles.EditTrigger}>
          <PencilIcon />
        </Editable.EditTrigger>
      </Editable.Control>
    </Editable.Root>
  )
}
```

### Root Provider

An alternative way to control the editable is to use the `RootProvider` component and the `useEditable` hook. This way
you can access the state and methods from outside the component.

```tsx
import { Editable, useEditable } from '@ark-ui/solid/editable'
import { PencilIcon } from 'lucide-solid'
import styles from 'styles/editable.module.css'

export const RootProvider = () => {
  const editable = useEditable({ defaultValue: 'Hello World' })

return (
    <Editable.RootProvider class={styles.Root} value={editable}>
      <Editable.Label class={styles.Label}>Label</Editable.Label>
      <Editable.Area class={styles.Area}>
        <Editable.Input class={styles.Input} />
        <Editable.Preview class={styles.Preview} />
      </Editable.Area>
      <Editable.Control class={styles.Control}>
        <Editable.EditTrigger class={styles.EditTrigger}>
          <PencilIcon />
        </Editable.EditTrigger>
      </Editable.Control>
    </Editable.RootProvider>
  )
}
```

### Context

Access the editable's state with `Editable.Context` or the `useEditableContext` hook—great for showing keyboard hints
when editing.

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { PencilIcon } from 'lucide-solid'
import { Show } from 'solid-js'
import styles from 'styles/editable.module.css'

export const Context = () => (
  <Editable.Root class={styles.Root} placeholder="Enter text..." defaultValue="Hello World">
    <Editable.Label class={styles.Label}>Label</Editable.Label>
    <Editable.Area class={styles.Area}>
      <Editable.Input class={styles.Input} />
      <Editable.Preview class={styles.Preview} />
    </Editable.Area>
    <Editable.Context>
      {(editable) => (
        <Show
          when={editable().editing}
          fallback={
            <Editable.Control class={styles.Control}>
              <Editable.EditTrigger class={styles.EditTrigger}>
                <PencilIcon />
              </Editable.EditTrigger>
            </Editable.Control>
          }
        >
          <span class={styles.HelperText}>Enter to save, Esc to cancel</span>
        </Show>
      )}
    </Editable.Context>
  </Editable.Root>
)
```

### Controls

In some cases, you might need to use custom controls to toggle the edit and read mode. We use the render prop pattern to
provide access to the internal state of the component.

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { CheckIcon, PencilIcon, XIcon } from 'lucide-solid'
import { Show } from 'solid-js'
import styles from 'styles/editable.module.css'

export const Controls = () => (
  <Editable.Root class={styles.Root} defaultValue="Click edit to start">
    <Editable.Label class={styles.Label}>Label</Editable.Label>
    <Editable.Area class={styles.Area}>
      <Editable.Input class={styles.Input} />
      <Editable.Preview class={styles.Preview} />
    </Editable.Area>
    <Editable.Context>
      {(editable) => (
        <Editable.Control class={styles.Control}>
          <Show
            when={editable().editing}
            fallback={
              <Editable.EditTrigger class={styles.EditTrigger}>
                <PencilIcon />
              </Editable.EditTrigger>
            }
          >
            <Editable.SubmitTrigger class={styles.SubmitTrigger}>
              <CheckIcon />
            </Editable.SubmitTrigger>
            <Editable.CancelTrigger class={styles.CancelTrigger}>
              <XIcon />
            </Editable.CancelTrigger>
          </Show>
        </Editable.Control>
      )}
    </Editable.Context>
  </Editable.Root>
)
```

### Textarea

Use the `asChild` prop on `Editable.Input` to render a textarea for multi-line editing.

```tsx
import { Editable } from '@ark-ui/solid/editable'
import styles from 'styles/editable.module.css'

export const Textarea = () => (
  <Editable.Root
    class={styles.Root}
    placeholder="Enter a description..."
    defaultValue="Ark UI is a headless component library for building reusable, scalable design systems."
    activationMode="dblclick"
  >
    <Editable.Label class={styles.Label}>Description</Editable.Label>
    <Editable.Area class={styles.Area}>
      <Editable.Input class={styles.Textarea} asChild={(props) => <textarea {...props()} />} />
      <Editable.Preview class={styles.Textarea} />
    </Editable.Area>
    <div class={styles.HelperText}>Press Cmd + Enter to save</div>
  </Editable.Root>
)
```

### Field

The `Field` component helps manage form-related state and accessibility attributes of an editable. It includes handling
ARIA labels, helper text, and error text to ensure proper accessibility.

```tsx
import { Editable } from '@ark-ui/solid/editable'
import { Field } from '@ark-ui/solid/field'
import field from 'styles/field.module.css'
import styles from 'styles/editable.module.css'

export const WithField = () => (
  <Field.Root class={field.Root}>
    <Editable.Root class={styles.Root} placeholder="Enter your bio">
      <Editable.Label class={field.Label}>Bio</Editable.Label>
      <Editable.Area class={styles.Area}>
        <Editable.Input class={styles.Input} />
        <Editable.Preview class={styles.Preview} />
      </Editable.Area>
    </Editable.Root>
    <Field.HelperText class={field.HelperText}>Double-click to edit your bio</Field.HelperText>
    <Field.ErrorText class={field.ErrorText}>Bio is required</Field.ErrorText>
  </Field.Root>
)
```

## Guides

### Auto-resizing

To auto-grow the editable as the content changes, set the `autoResize` prop to `true`.

```tsx
<Editable.Root placeholder="Placeholder" autoResize>
  {/*...*/}
</Editable.Root>
```

### Max Length

Use the `maxLength` prop to set a maximum number of characters that can be entered into the editable.

```tsx
<Editable.Root placeholder="Placeholder" autoResize maxLength={10}>
  {/*...*/}
</Editable.Root>
```

### Double Click

The editable supports two modes of activating the "edit" state:

- when the preview part is focused (with pointer or keyboard).
- when the preview part is double-clicked.

To change the mode to double-click, pass the prop `activationMode="dblclick"`.

```tsx
<Editable.Root placeholder="Placeholder" activationMode="dblclick">
  {/*...*/}
</Editable.Root>
```

## API Reference

### Props

### Root

#### Props

**`activationMode`**
Type: `ActivationMode`
Required: false
Default Value: `"focus"`
Description: The activation mode for the preview element.

- "focus" - Enter edit mode when the preview is focused
- "dblclick" - Enter edit mode when the preview is double-clicked
- "click" - Enter edit mode when the preview is clicked
- "none" - Edit can be triggered programmatically only

**`autoResize`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the editable should auto-resize to fit the content.

**`defaultEdit`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the editable is in edit mode by default.

**`defaultValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial value of the editable when rendered.
Use when you don't need to control the value of the editable.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the editable is disabled.

**`edit`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the editable is in edit mode.

**`finalFocusEl`**
Type: `() => HTMLElement | null`
Required: false
Default Value: `undefined`
Description: The element to receive focus when the editable is closed.

**`form`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The associate form of the underlying input.

**`ids`**
Type: `Partial<{
  root: string
  area: string
  label: string
  preview: string
  input: string
  control: string
  submitTrigger: string
  cancelTrigger: string
  editTrigger: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the editable. Useful for composition.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the input's value is invalid.

**`maxLength`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The maximum number of characters allowed in the editable

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name attribute of the editable component. Used for form submission.

**`onEditChange`**
Type: `(details: EditChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function to call when the edit mode changes.

**`onFocusOutside`**
Type: `(event: FocusOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the focus is moved outside the component

**`onInteractOutside`**
Type: `(event: InteractOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when an interaction happens outside the component

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function to call when the value changes.

**`onValueCommit`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function to call when the value is committed.

**`onValueRevert`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function to call when the value is reverted.

**`placeholder`**
Type: `string | { edit: string; preview: string }`
Required: false
Default Value: `undefined`
Description: The placeholder text for the editable.

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the editable is read-only.

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the editable is required.

**`selectOnFocus`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to select the text in the input when it is focused.

**`submitMode`**
Type: `SubmitMode`
Required: false
Default Value: `"both"`
Description: The action that triggers submit in the edit mode:

- "enter" - Trigger submit when the enter key is pressed
- "blur" - Trigger submit when the editable is blurred
- "none" - No action will trigger submit. You need to use the submit button
- "both" - Pressing `Enter` and blurring the input will trigger submit

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: The translations for the editable.

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled value of the editable.

### Area

#### Props

#### Data Attributes

**`data-scope`**: editable
**`data-part`**: area
**`data-focus`**: Present when focused
**`data-disabled`**: Present when disabled
**`data-placeholder-shown`**: Present when placeholder is shown

### CancelTrigger

#### Props

### Control

#### Props

### EditTrigger

#### Props

### Input

#### Props

**`asChild`**
Type: `(props: ParentProps<'input'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: editable
**`data-part`**: input
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid
**`data-autoresize`**:

### Label

#### Props

**`asChild`**
Type: `(props: ParentProps<'label'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: editable
**`data-part`**: label
**`data-focus`**: Present when focused
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

### Preview

#### Props

**`asChild`**
Type: `(props: ParentProps<'span'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: editable
**`data-part`**: preview
**`data-placeholder-shown`**: Present when placeholder is shown
**`data-readonly`**: Present when read-only
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-autoresize`**:

### RootProvider

#### Props

**`value`**
Type: `UseEditableReturn`
Required: true
Default Value: `undefined`
Description: undefined

### SubmitTrigger

#### Props

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `editing` | `boolean` | Whether the editable is in edit mode |
| `empty` | `boolean` | Whether the editable value is empty |
| `value` | `string` | The current value of the editable |
| `valueText` | `string` | The current value of the editable, or the placeholder if the value is empty |
| `setValue` | `(value: string) => void` | Function to set the value of the editable |
| `clearValue` | `VoidFunction` | Function to clear the value of the editable |
| `edit` | `VoidFunction` | Function to enter edit mode |
| `cancel` | `VoidFunction` | Function to exit edit mode, and discard any changes |
| `submit` | `VoidFunction` | Function to exit edit mode, and submit any changes |

## Accessibility

### Keyboard Support

**`Enter`**
Description: Saves the edited content and exits edit mode.

**`Escape`**
Description: Discards the changes and exits edit mode.

# Field

## Anatomy

```tsx
<Field.Root>
  <Field.Label />
  <Field.Input />
  <Field.Textarea />
  <Field.Select />
  <Field.HelperText />
  <Field.ErrorText />
</Field.Root>
```

## Examples

The `Field` component provides contexts such as `invalid`, `disabled`, `required`, and `readOnly` for form elements.
While most Ark UI components natively support these contexts, you can also use the `Field` component with standard HTML
form elements.

### Input

This example shows how to use the `Field` component with a standard input field.

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const Input = () => (
  <Field.Root class={styles.Root}>
    <Field.Label class={styles.Label}>Label</Field.Label>
    <Field.Input class={styles.Input} />
    <Field.HelperText class={styles.HelperText}>Some additional Info</Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Textarea

This example illustrates how to use the `Field` component with a textarea element.

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const Textarea = () => (
  <Field.Root class={styles.Root}>
    <Field.Label class={styles.Label}>Label</Field.Label>
    <Field.Textarea class={styles.Textarea} />
    <Field.HelperText class={styles.HelperText}>Some additional Info</Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Textarea Autoresize

Pass the `autoresize` prop to the `Textarea` component to enable automatic resizing as the user types.

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const TextareaAutoresize = () => (
  <Field.Root class={styles.Root}>
    <Field.Label class={styles.Label}>Label</Field.Label>
    <Field.Textarea class={styles.Textarea} autoresize />
    <Field.HelperText class={styles.HelperText}>Some additional Info</Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Select

This example demonstrates how to integrate the `Field` component with a select dropdown.

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const Select = () => (
  <Field.Root class={styles.Root}>
    <Field.Label class={styles.Label}>Label</Field.Label>
    <Field.Select class={styles.Select}>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </Field.Select>
    <Field.HelperText class={styles.HelperText}>Some additional Info</Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Checkbox

This example demonstrates how to integrate the `Field` and `Checkbox` components.

```tsx
import { Checkbox } from '@ark-ui/solid/checkbox'
import { Field } from '@ark-ui/solid/field'
import { CheckIcon, MinusIcon } from 'lucide-solid'
import styles from 'styles/checkbox.module.css'
import field from 'styles/field.module.css'

export const WithField = () => (
  <Field.Root class={field.Root} data-inline>
    <Checkbox.Root class={styles.Root}>
      <Checkbox.Control class={styles.Control}>
        <Checkbox.Indicator class={styles.Indicator}>
          <CheckIcon />
        </Checkbox.Indicator>
        <Checkbox.Indicator class={styles.Indicator} indeterminate>
          <MinusIcon />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label class={styles.Label}>Label</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
    <Field.HelperText class={field.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText class={field.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Root Provider

An alternative way to control the field is to use the `RootProvider` component and the `useField` hook. This way you can
access the state and methods from outside the component.

```tsx
import { Field, useField } from '@ark-ui/solid/field'
import { createMemo, createSignal } from 'solid-js'
import styles from 'styles/field.module.css'
import button from 'styles/button.module.css'

export const RootProvider = () => {
  const [invalid, setInvalid] = createSignal(false)
  const fieldProps = createMemo(() => ({
    invalid: invalid(),
  }))
  const value = useField(fieldProps)

return (
    <>
      <button class={button.Root} style={{ 'margin-bottom': '1rem' }} onClick={() => setInvalid((prev) => !prev)}>
        Toggle Invalid
      </button>
      <Field.RootProvider class={styles.Root} value={value}>
        <Field.Label class={styles.Label}>Label</Field.Label>
        <Field.Input class={styles.Input} />
        <Field.HelperText class={styles.HelperText}>Some additional Info</Field.HelperText>
        <Field.ErrorText class={styles.ErrorText}>Error Info</Field.ErrorText>
      </Field.RootProvider>
    </>
  )
}
```

### Custom Control

Use the `Field.Context` or `useFieldContext` hook to access the internal state of the field.This can help you wire up
custom controls with the `Field` component.

```tsx
import { Field } from '@ark-ui/solid/field'
import styles from 'styles/field.module.css'

export const CustomControl = () => (
  <Field.Root class={styles.Root} invalid>
    <Field.Label class={styles.Label}>Any Control</Field.Label>
    <Field.Context>{(field) => <input {...field().getInputProps()} />}</Field.Context>
    <Field.HelperText class={styles.HelperText}>Uses getInputProps() for maximum flexibility</Field.HelperText>
    <Field.ErrorText class={styles.ErrorText}>This field has an error</Field.ErrorText>
  </Field.Root>
)
```

## API Reference

### Root

#### Props

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Indicates whether the field is disabled.

**`ids`**
Type: `ElementIds`
Required: false
Default Value: `undefined`
Description: The ids of the field parts.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Indicates whether the field is invalid.

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Indicates whether the field is read-only.

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Indicates whether the field is required.

**`target`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The target field item value the label should point to.

### ErrorText

#### Props

### HelperText

#### Props

### Input

#### Props

### Item

#### Props

**`value`**
Type: `string`
Required: true
Default Value: `undefined`
Description: undefined

### Label

#### Props

### RequiredIndicator

#### Props

**`fallback`**
Type: `number | boolean | Node | ArrayElement | (string & {})`
Required: false
Default Value: `undefined`
Description: undefined

### RootProvider

#### Props

**`value`**
Type: `Accessor<{ ariaDescribedby: string | undefined; ids: { control: string; label: string; errorText: string; helperText: string; }; refs: { rootRef: Setter<HTMLDivElement | undefined>; }; ... 11 more ...; getRequiredIndicatorProps: () => { ...; }; }>`
Required: true
Default Value: `undefined`
Description: undefined

### Select

#### Props

**`asChild`**
Type: `(props: ParentProps<'select'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Textarea

#### Props

**`asChild`**
Type: `(props: ParentProps<'textarea'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`autoresize`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether the textarea should autoresize

# Fieldset

## Anatomy

```tsx
<Fieldset.Root>
  <Fieldset.Legend />
  <Fieldset.HelperText />
  <Fieldset.ErrorText />
</Fieldset.Root>
```

## Examples

The `Fieldset` component provides contexts such as `invalid` and `disabled` for form elements. While most Ark UI
components natively support these contexts, you can also use the `Field` component with standard HTML form elements.

### Basic

```tsx
import { Field } from '@ark-ui/solid/field'
import { Fieldset } from '@ark-ui/solid/fieldset'
import field from 'styles/field.module.css'
import styles from 'styles/fieldset.module.css'

export const Basic = () => {
  return (
    <Fieldset.Root class={styles.Root}>
      <Fieldset.Legend class={styles.Legend}>Contact Details</Fieldset.Legend>

<Field.Root class={field.Root}>
        <Field.Label class={field.Label}>Name</Field.Label>
        <Field.Input class={field.Input} placeholder="John Doe" />
      </Field.Root>

<Field.Root class={field.Root}>
        <Field.Label class={field.Label}>Email</Field.Label>
        <Field.Input class={field.Input} type="email" placeholder="john@example.com" />
      </Field.Root>
    </Fieldset.Root>
  )
}
```

### Field

This example demonstrates how to use the `Field` component with a standard input field within a `Fieldset`.

```tsx
import { Field } from '@ark-ui/solid/field'
import { Fieldset } from '@ark-ui/solid/fieldset'
import field from 'styles/field.module.css'
import styles from 'styles/fieldset.module.css'

export const WithField = () => {
  return (
    <Fieldset.Root class={styles.Root}>
      <Fieldset.Legend class={styles.Legend}>Personal Information</Fieldset.Legend>

<Field.Root class={field.Root}>
        <Field.Label class={field.Label}>First Name</Field.Label>
        <Field.Input class={field.Input} placeholder="Enter your first name" />
        <Field.HelperText class={field.HelperText}>As it appears on your ID</Field.HelperText>
      </Field.Root>

<Field.Root class={field.Root}>
        <Field.Label class={field.Label}>Last Name</Field.Label>
        <Field.Input class={field.Input} placeholder="Enter your last name" />
      </Field.Root>
    </Fieldset.Root>
  )
}
```

### Checkbox

This example shows how to use the `Fieldset` component with other Ark UI form elements like `Checkbox`.

```tsx
import { Checkbox } from '@ark-ui/solid/checkbox'
import { Fieldset } from '@ark-ui/solid/fieldset'
import { CheckIcon } from 'lucide-solid'
import checkbox from 'styles/checkbox.module.css'
import styles from 'styles/fieldset.module.css'

export const WithCheckbox = () => {
  return (
    <Fieldset.Root class={styles.Root}>
      <Fieldset.Legend class={styles.Legend}>Email Preferences</Fieldset.Legend>

<Checkbox.Root class={checkbox.Root} defaultChecked>
        <Checkbox.Control class={checkbox.Control}>
          <Checkbox.Indicator class={checkbox.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label class={checkbox.Label}>Product updates</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>

<Checkbox.Root class={checkbox.Root}>
        <Checkbox.Control class={checkbox.Control}>
          <Checkbox.Indicator class={checkbox.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Control>
        <Checkbox.Label class={checkbox.Label}>Marketing emails</Checkbox.Label>
        <Checkbox.HiddenInput />
      </Checkbox.Root>
    </Fieldset.Root>
  )
}
```

### Root Provider

An alternative way to control the fieldset is to use the `RootProvider` component and the `useFieldset` hook. This way
you can access the state and methods from outside the component.

```tsx
import { Field } from '@ark-ui/solid/field'
import { Fieldset, useFieldset } from '@ark-ui/solid/fieldset'
import field from 'styles/field.module.css'
import styles from 'styles/fieldset.module.css'

export const RootProvider = () => {
  const fieldset = useFieldset()

return (
    <Fieldset.RootProvider class={styles.Root} value={fieldset}>
      <Fieldset.Legend class={styles.Legend}>Contact Details</Fieldset.Legend>

<Field.Root class={field.Root}>
        <Field.Label class={field.Label}>Name</Field.Label>
        <Field.Input class={field.Input} placeholder="John Doe" />
      </Field.Root>

### Input with Select

This example shows how to use the `Fieldset` component with `Field.Input` and `Select` to create a interactive phone
input component.

```tsx
import { Field } from '@ark-ui/solid/field'
import { Fieldset } from '@ark-ui/solid/fieldset'
import { Select, createListCollection } from '@ark-ui/solid/select'
import { ChevronsUpDownIcon } from 'lucide-solid'
import { Index, createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import field from 'styles/field.module.css'
import styles from 'styles/fieldset.module.css'
import select from 'styles/select.module.css'

export const PhoneInput = () => {
  const extensions = createListCollection({
    items: [
      { label: '+1', value: '+1' },
      { label: '+44', value: '+44' },
      { label: '+49', value: '+49' },
      { label: '+41', value: '+41' },
    ],
  })

const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null)

const focusInput = () => {
    setTimeout(() => {
      inputRef()?.focus()
    })
  }

return (
    <Fieldset.Root class={styles.Root}>
      <Fieldset.Legend class={styles.Legend} onClick={focusInput}>
        Mobile Number
      </Fieldset.Legend>

<div style={{ display: 'flex', 'align-items': 'flex-start', gap: '0.5rem' }}>
        <Field.Root>
          <Select.Root class={select.Root} collection={extensions} defaultValue={['+1']} onValueChange={focusInput}>
            <Select.Control class={select.Control}>
              <Select.Trigger class={select.Trigger}>
                <Select.ValueText placeholder="Select" />
                <ChevronsUpDownIcon />
              </Select.Trigger>
            </Select.Control>
            <Portal>
              <Select.Positioner>
                <Select.Content class={select.Content}>
                  <Index each={extensions.items}>
                    {(item) => (
                      <Select.Item class={select.Item} item={item()}>
                        <Select.ItemText class={select.ItemText}>{item().label}</Select.ItemText>
                      </Select.Item>
                    )}
                  </Index>
                </Select.Content>
              </Select.Positioner>
            </Portal>
            <Select.HiddenSelect />
          </Select.Root>
        </Field.Root>

<Field.Root class={field.Root}>
          <Field.Input class={field.Input} ref={setInputRef} />
        </Field.Root>
      </div>
    </Fieldset.Root>
  )
}
```

## API Reference

### Root

#### Props

**`asChild`**
Type: `(props: ParentProps<'fieldset'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Indicates whether the fieldset is invalid.

### ErrorText

#### Props

### HelperText

#### Props

### Legend

#### Props

**`asChild`**
Type: `(props: ParentProps<'legend'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### RootProvider

#### Props

**`value`**
Type: `Accessor<{ refs: { rootRef: Setter<HTMLFieldSetElement | undefined>; }; ids: { legend: string; errorText: string; helperText: string; }; disabled: boolean; invalid: boolean; getRootProps: () => { ...; }; getLegendProps: () => { ...; }; getHelperTextProps: () => { ...; }; getErrorTextProps: () => { ...; }; }>`
Required: true
Default Value: `undefined`
Description: undefined

# File Upload

## Anatomy

```tsx
<FileUpload.Root>
  <FileUpload.Label />
  <FileUpload.Dropzone>
    <FileUpload.Trigger />
  </FileUpload.Dropzone>
  <FileUpload.ItemGroup>
    <FileUpload.Item>
      <FileUpload.ItemPreview>
        <FileUpload.ItemPreviewImage />
      </FileUpload.ItemPreview>
      <FileUpload.ItemName />
      <FileUpload.ItemSizeText />
      <FileUpload.ItemDeleteTrigger />
    </FileUpload.Item>
  </FileUpload.ItemGroup>
  <FileUpload.ClearTrigger />
  <FileUpload.HiddenInput />
</FileUpload.Root>
```

## Examples

```tsx
import { FileUpload } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

export const Basic = () => (
  <FileUpload.Root maxFiles={5}>
    <FileUpload.Label>File Upload</FileUpload.Label>
    <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
    <FileUpload.ItemGroup>
      <FileUpload.Context>
        {(context) => (
          <For each={context().acceptedFiles}>
            {(file) => (
              <FileUpload.Item file={file}>
                <FileUpload.ItemName />
                <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
              </FileUpload.Item>
            )}
          </For>
        )}
      </FileUpload.Context>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.Root>
)
```

### Initial Files

Use the `defaultAcceptedFiles` prop to set the initial files in the file upload component.

```tsx
import { FileUpload } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

export const InitialFiles = () => (
  <FileUpload.Root defaultAcceptedFiles={[new File(['Welcome to Ark UI Solid'], 'README.md', { type: 'text/plain' })]}>
    <FileUpload.Label>File Upload</FileUpload.Label>
    <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
    <FileUpload.ItemGroup>
      <FileUpload.Context>
        {(context) => (
          <For each={context().acceptedFiles}>
            {(file) => (
              <FileUpload.Item file={file}>
                <div>📄</div>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
              </FileUpload.Item>
            )}
          </For>
        )}
      </FileUpload.Context>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.Root>
)
```

### Clear Trigger

Use the `ClearTrigger` to remove all uploaded files at once.

```tsx
import { FileUpload } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

export const ClearTrigger = () => (
  <FileUpload.Root maxFiles={5} accept="image/png,image/jpeg">
    <FileUpload.Label>File Upload</FileUpload.Label>
    <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
    <FileUpload.ClearTrigger>Clear Files</FileUpload.ClearTrigger>
    <FileUpload.ItemGroup>
      <FileUpload.Context>
        {(context) => (
          <For each={context().acceptedFiles}>
            {(file) => (
              <FileUpload.Item file={file}>
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemName />
              </FileUpload.Item>
            )}
          </For>
        )}
      </FileUpload.Context>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.Root>
)
```

### Dropzone

Use the `Dropzone` to enable drag-and-drop. It exposes a `data-dragging` attribute for styling.

```tsx
import { FileUpload } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

export const Dropzone = () => (
  <FileUpload.Root maxFiles={5}>
    <FileUpload.Label>File Upload</FileUpload.Label>
    <FileUpload.Dropzone>Drag and drop files here</FileUpload.Dropzone>
    <FileUpload.ItemGroup>
      <FileUpload.Context>
        {(context) => (
          <For each={context().acceptedFiles}>
            {(file) => (
              <FileUpload.Item file={file}>
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemPreview type=".*">File</FileUpload.ItemPreview>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
              </FileUpload.Item>
            )}
          </For>
        )}
      </FileUpload.Context>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.Root>
)
```

### Directory Upload

Use the `directory` prop to upload entire folders. Access file paths through `file.webkitRelativePath`.

```tsx
import { FileUpload } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

export const DirectoryUpload = () => (
  <FileUpload.Root directory>
    <FileUpload.Trigger>Upload Folder</FileUpload.Trigger>
    <FileUpload.ItemGroup>
      <FileUpload.Context>
        {(fileUpload) => (
          <For each={fileUpload().acceptedFiles}>
            {(file) => (
              <FileUpload.Item file={file}>
                <FileUpload.ItemName>{file.webkitRelativePath ?? file.name}</FileUpload.ItemName>
              </FileUpload.Item>
            )}
          </For>
        )}
      </FileUpload.Context>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.Root>
)
```

> When uploading directories with many files, set `maxFiles` to a higher value or remove it entirely to prevent
> rejections.

### Accepted File Types

Use the `accept` prop to restrict file types. Accepts MIME types (`image/png`) or extensions (`.pdf`).

```tsx
import { FileUpload } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

export const AcceptedFileTypes = () => (
  <FileUpload.Root accept="image/png,image/jpeg">
    <FileUpload.Label>File Upload (PNG and JPEG only)</FileUpload.Label>
    <FileUpload.Dropzone>Drop your files here</FileUpload.Dropzone>
    <FileUpload.Trigger>Select Files</FileUpload.Trigger>

<FileUpload.ItemGroup>
      <FileUpload.Context>
        {(context) => (
          <For each={context().acceptedFiles}>
            {(file) => (
              <FileUpload.Item file={file}>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
              </FileUpload.Item>
            )}
          </For>
        )}
      </FileUpload.Context>
    </FileUpload.ItemGroup>

<FileUpload.ItemGroup>
      <FileUpload.Context>
        {(context) => (
          <For each={context().rejectedFiles}>
            {(fileRejection) => (
              <FileUpload.Item file={fileRejection.file}>
                <FileUpload.ItemName />
                <FileUpload.ItemSizeText />
                <div>
                  <For each={fileRejection.errors}>{(error) => <div style={{ color: 'red' }}>{error}</div>}</For>
                </div>
              </FileUpload.Item>
            )}
          </For>
        )}
      </FileUpload.Context>
    </FileUpload.ItemGroup>

<FileUpload.HiddenInput />
  </FileUpload.Root>
)
```

### Error Handling

Set constraints with `maxFiles`, `maxFileSize`, `minFileSize`, and `accept`. Rejected files include error codes like
`TOO_MANY_FILES`, `FILE_INVALID_TYPE`, `FILE_TOO_LARGE`, or `FILE_EXISTS`.

```tsx
import { FileUpload, type FileUploadFileError } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

const errorMessages: Record<FileUploadFileError, string> = {
  TOO_MANY_FILES: '📊 Too many files selected (max 3 allowed)',
  FILE_INVALID_TYPE: '🚫 Invalid file type (only images and PDFs allowed)',
  FILE_TOO_LARGE: '📏 File too large (max 1MB)',
  FILE_TOO_SMALL: '📐 File too small (min 1KB)',
  FILE_INVALID: '⚠️ Invalid file',
  FILE_EXISTS: '🔄 File already exists',
}

export const ErrorHandling = () => (
  <FileUpload.Root
    maxFiles={3}
    maxFileSize={1024 * 1024} // 1MB
    minFileSize={1024} // 1KB
    accept="image/*,application/pdf"
  >
    <FileUpload.Label>File Upload with Validation</FileUpload.Label>
    <FileUpload.Trigger>Select Files</FileUpload.Trigger>

{/* Accepted Files Section */}
    <div data-status="accepted">
      <h3>✅ Accepted Files</h3>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {(fileUpload) =>
            fileUpload().acceptedFiles.length === 0 ? (
              <div>No files uploaded yet</div>
            ) : (
              <For each={fileUpload().acceptedFiles}>
                {(file) => (
                  <FileUpload.Item file={file} class="file-item" data-status="accepted">
                    <FileUpload.ItemPreview type="image/*">
                      <FileUpload.ItemPreviewImage />
                    </FileUpload.ItemPreview>
                    <FileUpload.ItemPreview type="application/pdf">
                      <div data-type="pdf">PDF</div>
                    </FileUpload.ItemPreview>
                    <FileUpload.ItemName />
                    <FileUpload.ItemSizeText />
                    <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
                  </FileUpload.Item>
                )}
              </For>
            )
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>
    </div>

{/* Rejected Files Section */}
    <div data-status="rejected">
      <h3>❌ Rejected Files</h3>
      <FileUpload.ItemGroup>
        <FileUpload.Context>
          {(fileUpload) =>
            fileUpload().rejectedFiles.length === 0 ? (
              <div>No rejected files</div>
            ) : (
              <For each={fileUpload().rejectedFiles}>
                {(fileRejection) => (
                  <FileUpload.Item file={fileRejection.file} class="file-item" data-status="rejected">
                    <FileUpload.ItemName />
                    <FileUpload.ItemSizeText />
                    <div>
                      <strong>Validation Errors:</strong>
                      <For each={fileRejection.errors}>
                        {(error) => <div data-error-code={error}>{errorMessages[error] || `❓ ${error}`}</div>}
                      </For>
                    </div>
                  </FileUpload.Item>
                )}
              </For>
            )
          }
        </FileUpload.Context>
      </FileUpload.ItemGroup>
    </div>

<FileUpload.HiddenInput />
  </FileUpload.Root>
)
```

### File Transformations

Use `transformFiles` to process files before they're added. Useful for image compression, format conversion, or
resizing.

```tsx
import { FileUpload } from '@ark-ui/solid/file-upload'
import { compressAccurately } from 'image-conversion'
import { For } from 'solid-js'

export const TransformFiles = () => {
  const transformFiles = async (files: File[]) => {
    return Promise.all(
      files.map(async (file) => {
        if (file.type.startsWith('image/')) {
          try {
            const blob = await compressAccurately(file, 200)
            return new File([blob], file.name, { type: blob.type })
          } catch (error) {
            console.error('Compression failed for:', file.name, error)
            return file
          }
        }
        return file
      }),
    )
  }

return (
    <FileUpload.Root accept="image/*" maxFiles={5} transformFiles={transformFiles}>
      <FileUpload.Label>File Upload with Compression</FileUpload.Label>
      <FileUpload.Trigger>Choose Images</FileUpload.Trigger>

<FileUpload.ItemGroup>
        <FileUpload.Context>
          {(fileUpload) => (
            <For each={fileUpload().acceptedFiles}>
              {(file) => (
                <FileUpload.Item file={file} class="file-item">
                  <FileUpload.ItemPreview type="image/*">
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemName />
                  <FileUpload.ItemSizeText />
                  <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
                </FileUpload.Item>
              )}
            </For>
          )}
        </FileUpload.Context>
      </FileUpload.ItemGroup>

<FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}
```

### Field

Use `Field` to add helper text and error handling.

```tsx
import { Field } from '@ark-ui/solid/field'
import { FileUpload } from '@ark-ui/solid/file-upload'

export const WithField = (props: Field.RootProps) => (
  <Field.Root {...props}>
    <FileUpload.Root maxFiles={5}>
      <FileUpload.Label>Label</FileUpload.Label>
      <FileUpload.Trigger>Select</FileUpload.Trigger>
      <FileUpload.ItemGroup />
      <FileUpload.HiddenInput data-testid="input" />
    </FileUpload.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Root Provider

An alternative way to control the file upload is to use the `RootProvider` component and the `useFileUpload` hook. This
way you can access the state and methods from outside the component.

```tsx
import { FileUpload, useFileUpload } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

export const RootProvider = () => {
  const fileUpload = useFileUpload({ maxFiles: 5 })

return (
    <>
      <button onClick={() => fileUpload().clearFiles()}>Clear</button>

<FileUpload.RootProvider value={fileUpload}>
        <FileUpload.Label>File Upload</FileUpload.Label>
        <FileUpload.Dropzone>Drag your file(s)here</FileUpload.Dropzone>
        <FileUpload.Trigger>Choose file(s)</FileUpload.Trigger>
        <FileUpload.ItemGroup>
          <FileUpload.Context>
            {(context) => (
              <For each={context().acceptedFiles}>
                {(file) => (
                  <FileUpload.Item file={file}>
                    <FileUpload.ItemPreview type="image/*">
                      <FileUpload.ItemPreviewImage />
                    </FileUpload.ItemPreview>
                    <FileUpload.ItemPreview type=".*">Any Icon</FileUpload.ItemPreview>
                    <FileUpload.ItemName />
                    <FileUpload.ItemSizeText />
                    <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
                  </FileUpload.Item>
                )}
              </For>
            )}
          </FileUpload.Context>
        </FileUpload.ItemGroup>
        <FileUpload.HiddenInput />
      </FileUpload.RootProvider>
    </>
  )
}
```

### Pasting Files

Use `setClipboardFiles` to enable pasting images from the clipboard.

```tsx
import { FileUpload, useFileUpload } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

export const PastingFiles = () => {
  const fileUpload = useFileUpload({ maxFiles: 3, accept: 'image/*' })

return (
    <FileUpload.RootProvider value={fileUpload}>
      <FileUpload.Label>File Upload with Paste</FileUpload.Label>
      <textarea
        placeholder="Paste image here..."
        onPaste={(e) => {
          fileUpload().setClipboardFiles(e.clipboardData)
        }}
      />
      <FileUpload.ItemGroup>
        <For each={fileUpload().acceptedFiles}>
          {(file) => (
            <FileUpload.Item file={file}>
              <FileUpload.ItemPreview type="image/*">
                <FileUpload.ItemPreviewImage />
              </FileUpload.ItemPreview>
              <FileUpload.ItemDeleteTrigger>X</FileUpload.ItemDeleteTrigger>
            </FileUpload.Item>
          )}
        </For>
      </FileUpload.ItemGroup>
      <FileUpload.HiddenInput />
    </FileUpload.RootProvider>
  )
}
```

### Media Capture

Use `capture` to access the device camera. Set to `"environment"` for back camera or `"user"` for front camera.

```tsx
import { FileUpload } from '@ark-ui/solid/file-upload'
import { For } from 'solid-js'

export const MediaCapture = () => (
  <FileUpload.Root capture="environment">
    <FileUpload.Trigger>Open Camera</FileUpload.Trigger>
    <FileUpload.ItemGroup>
      <FileUpload.Context>
        {(context) => (
          <For each={context().acceptedFiles}>
            {(file) => (
              <FileUpload.Item file={file}>
                <FileUpload.ItemPreview type="image/*">
                  <FileUpload.ItemPreviewImage />
                </FileUpload.ItemPreview>
                <FileUpload.ItemName>{file.webkitRelativePath || file.name}</FileUpload.ItemName>
              </FileUpload.Item>
            )}
          </For>
        )}
      </FileUpload.Context>
    </FileUpload.ItemGroup>
    <FileUpload.HiddenInput />
  </FileUpload.Root>
)
```

### Rejected Files

Access `rejectedFiles` from the context to display validation errors.

```tsx
import { FileUpload } from '@ark-ui/solid'
import { XIcon } from 'lucide-solid'
import { For } from 'solid-js'

export const RejectedFiles = () => {
  return (
    <FileUpload.Root
      maxFiles={2}
      onFileReject={(fileRejection) => {
        console.log(fileRejection)
      }}
    >
      <FileUpload.Dropzone>Drag and drop your images here</FileUpload.Dropzone>

{/* Accepted Files */}
      <FileUpload.ItemGroup type="accepted">
        <h3>Accepted Files</h3>
        <FileUpload.Context>
          {(context) => (
            <For each={context().acceptedFiles}>
              {(file) => (
                <FileUpload.Item file={file}>
                  <FileUpload.ItemPreview type="image/*">
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemName />
                  <FileUpload.ItemDeleteTrigger>
                    <XIcon />
                  </FileUpload.ItemDeleteTrigger>
                </FileUpload.Item>
              )}
            </For>
          )}
        </FileUpload.Context>
      </FileUpload.ItemGroup>

{/* Rejected Files */}
      <FileUpload.ItemGroup type="rejected">
        <h3>Rejected Files</h3>
        <FileUpload.Context>
          {(context) => (
            <For each={context().rejectedFiles}>
              {(fileRejection) => (
                <FileUpload.Item file={fileRejection.file}>
                  <FileUpload.ItemName />
                  <FileUpload.ItemSizeText />
                  <FileUpload.ItemDeleteTrigger>
                    <XIcon />
                  </FileUpload.ItemDeleteTrigger>
                </FileUpload.Item>
              )}
            </For>
          )}
        </FileUpload.Context>
      </FileUpload.ItemGroup>

<FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}
```

## Guides

### File Previews

Use `ItemPreview` with type matching to show appropriate previews based on file format.

- `type="image/*"`: Shows image thumbnails using `ItemPreviewImage`
- `type="video/*"`: For video file previews
- `type="application/pdf"`: For PDF files
- `type=".*"`: Generic fallback for any file type

```tsx
<FileUpload.ItemPreview type="image/*">
  <FileUpload.ItemPreviewImage />
</FileUpload.ItemPreview>

<FileUpload.ItemPreview type="video/*">
  <VideoIcon />
</FileUpload.ItemPreview>

<FileUpload.ItemPreview type="application/pdf">
  <PdfIcon />
</FileUpload.ItemPreview>

<FileUpload.ItemPreview type=".*">
  <FileIcon />
</FileUpload.ItemPreview>
```

### Disable Dropzone

To disable drag-and-drop functionality, set `allowDrop` to `false`.

```tsx
<FileUpload.Root allowDrop={false}>{/* ... */}</FileUpload.Root>
```

### Prevent Document Drop

By default, we prevent accidental navigation when files are dropped outside the dropzone. Set `preventDocumentDrop` to
`false` to disable this.

```tsx
<FileUpload.Root preventDocumentDrop={false}>{/* ... */}</FileUpload.Root>
```

### Prevent Double Open

Use `disableClick` on `Dropzone` when delegating clicks to a nested `Trigger`. This prevents the file picker from
opening twice.

```tsx
<FileUpload.Dropzone disableClick>
  <FileUpload.Trigger>Choose Files</FileUpload.Trigger>
  Drag files here
</FileUpload.Dropzone>
```

## API Reference

### Props

### Root

#### Props

**`accept`**
Type: `Record<string, string[]> | FileMimeType | FileMimeType[]`
Required: false
Default Value: `undefined`
Description: The accept file types

**`acceptedFiles`**
Type: `File[]`
Required: false
Default Value: `undefined`
Description: The controlled accepted files

**`allowDrop`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to allow drag and drop in the dropzone element

**`capture`**
Type: `'user' | 'environment'`
Required: false
Default Value: `undefined`
Description: The default camera to use when capturing media

**`defaultAcceptedFiles`**
Type: `File[]`
Required: false
Default Value: `undefined`
Description: The default accepted files when rendered.
Use when you don't need to control the accepted files of the input.

**`directory`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to accept directories, only works in webkit browsers

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the file input is disabled

**`ids`**
Type: `Partial<{
  root: string
  dropzone: string
  hiddenInput: string
  trigger: string
  label: string
  item: (id: string) => string
  itemName: (id: string) => string
  itemSizeText: (id: string) => string
  itemPreview: (id: string) => string
  itemDeleteTrigger: (id: string) => string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements. Useful for composition.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the file input is invalid

**`locale`**
Type: `string`
Required: false
Default Value: `"en-US"`
Description: The current locale. Based on the BCP 47 definition.

**`maxFiles`**
Type: `number`
Required: false
Default Value: `1`
Description: The maximum number of files

**`maxFileSize`**
Type: `number`
Required: false
Default Value: `Infinity`
Description: The maximum file size in bytes

**`minFileSize`**
Type: `number`
Required: false
Default Value: `0`
Description: The minimum file size in bytes

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name of the underlying file input

**`onFileAccept`**
Type: `(details: FileAcceptDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the file is accepted

**`onFileChange`**
Type: `(details: FileChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the value changes, whether accepted or rejected

**`onFileReject`**
Type: `(details: FileRejectDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the file is rejected

**`preventDocumentDrop`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to prevent the drop event on the document

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the file input is read-only

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the file input is required

**`transformFiles`**
Type: `(files: File[]) => Promise<File[]>`
Required: false
Default Value: `undefined`
Description: Function to transform the accepted files to apply transformations

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: The localized messages to use.

**`validate`**
Type: `(file: File, details: FileValidateDetails) => FileError[] | null`
Required: false
Default Value: `undefined`
Description: Function to validate a file

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: root
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-dragging`**: Present when in the dragging state

### ClearTrigger

#### Props

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: clear-trigger
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only

### Dropzone

#### Props

**`disableClick`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to disable the click event on the dropzone

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: dropzone
**`data-invalid`**: Present when invalid
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-dragging`**: Present when in the dragging state

### HiddenInput

#### Props

### ItemDeleteTrigger

#### Props

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: item-delete-trigger
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-type`**: The type of the item

### ItemGroup

#### Props

**`asChild`**
Type: `(props: ParentProps<'ul'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`type`**
Type: `ItemType`
Required: false
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: item-group
**`data-disabled`**: Present when disabled
**`data-type`**: The type of the item

### ItemName

#### Props

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: item-name
**`data-disabled`**: Present when disabled
**`data-type`**: The type of the item

### ItemPreviewImage

#### Props

**`asChild`**
Type: `(props: ParentProps<'img'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: item-preview-image
**`data-disabled`**: Present when disabled
**`data-type`**: The type of the item

### ItemPreview

#### Props

**`type`**
Type: `string`
Required: false
Default Value: `'.*'`
Description: The file type to match against. Matches all file types by default.

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: item-preview
**`data-disabled`**: Present when disabled
**`data-type`**: The type of the item

### Item

#### Props

**`file`**
Type: `File`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `(props: ParentProps<'li'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: item
**`data-disabled`**: Present when disabled
**`data-type`**: The type of the item

### ItemSizeText

#### Props

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: item-size-text
**`data-disabled`**: Present when disabled
**`data-type`**: The type of the item

### Label

#### Props

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: label
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

### RootProvider

#### Props

**`value`**
Type: `UseFileUploadReturn`
Required: true
Default Value: `undefined`
Description: undefined

### Trigger

#### Props

#### Data Attributes

**`data-scope`**: file-upload
**`data-part`**: trigger
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `dragging` | `boolean` | Whether the user is dragging something over the root element |
| `focused` | `boolean` | Whether the user is focused on the dropzone element |
| `disabled` | `boolean` | Whether the file input is disabled |
| `readOnly` | `boolean` | Whether the file input is in read-only mode |
| `transforming` | `boolean` | Whether files are currently being transformed via `transformFiles` |
| `maxFilesReached` | `boolean` | Whether the maximum number of files has been reached |
| `remainingFiles` | `number` | The number of files that can still be added |
| `openFilePicker` | `VoidFunction` | Function to open the file dialog |
| `deleteFile` | `(file: File, type?: ItemType | undefined) => void` | Function to delete the file from the list |
| `acceptedFiles` | `File[]` | The accepted files that have been dropped or selected |
| `rejectedFiles` | `FileRejection[]` | The files that have been rejected |
| `setFiles` | `(files: File[]) => void` | Sets the accepted files |
| `clearFiles` | `VoidFunction` | Clears the accepted files |
| `clearRejectedFiles` | `VoidFunction` | Clears the rejected files |
| `getFileSize` | `(file: File) => string` | Returns the formatted file size (e.g. 1.2MB) |
| `createFileUrl` | `(file: File, cb: (url: string) => void) => VoidFunction` | Returns the preview url of a file.
Returns a function to revoke the url. |
| `setClipboardFiles` | `(dt: DataTransfer | null) => boolean` | Sets the clipboard files
Returns `true` if the clipboard data contains files, `false` otherwise. |

# Floating Panel

## Anatomy

```tsx
<FloatingPanel.Root>
  <FloatingPanel.Trigger />
  <FloatingPanel.Positioner>
    <FloatingPanel.Content>
      <FloatingPanel.DragTrigger>
        <FloatingPanel.Header>
          <FloatingPanel.Title />
          <FloatingPanel.Control>
            <FloatingPanel.StageTrigger />
            <FloatingPanel.CloseTrigger />
          </FloatingPanel.Control>
        </FloatingPanel.Header>
      </FloatingPanel.DragTrigger>
      <FloatingPanel.Body />
      <FloatingPanel.ResizeTrigger />
    </FloatingPanel.Content>
  </FloatingPanel.Positioner>
</FloatingPanel.Root>
```

## Examples

```tsx
import { FloatingPanel } from '@ark-ui/solid/floating-panel'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-solid'
import { Portal } from 'solid-js/web'
import styles from 'styles/floating-panel.module.css'

export const Basic = () => (
  <FloatingPanel.Root>
    <FloatingPanel.Trigger class={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
    <Portal>
      <FloatingPanel.Positioner class={styles.Positioner}>
        <FloatingPanel.Content class={styles.Content}>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header class={styles.Header}>
              <FloatingPanel.Title class={styles.Title}>
                <GripVertical />
                Floating Panel
              </FloatingPanel.Title>
              <FloatingPanel.Control class={styles.Control}>
                <FloatingPanel.StageTrigger stage="minimized" class={styles.ControlButton}>
                  <Minus />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="maximized" class={styles.ControlButton}>
                  <Maximize2 />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="default" class={styles.ControlButton}>
                  <ArrowDownLeft />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.CloseTrigger class={styles.ControlButton}>
                  <XIcon />
                </FloatingPanel.CloseTrigger>
              </FloatingPanel.Control>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body class={styles.Body}>
            <p>Some content</p>
          </FloatingPanel.Body>

<FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
          <FloatingPanel.ResizeTrigger axis="nw" class={styles.ResizeTrigger} />
        </FloatingPanel.Content>
      </FloatingPanel.Positioner>
    </Portal>
  </FloatingPanel.Root>
)
```

### Controlled size

To control the size of the floating panel programmatically, you can pass the `size` `onResize` prop to the machine.

```tsx
import { FloatingPanel } from '@ark-ui/solid/floating-panel'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import styles from 'styles/floating-panel.module.css'

export const ControlledSize = () => {
  const [size, setSize] = createSignal({ width: 400, height: 300 })

return (
    <FloatingPanel.Root size={size()} onSizeChange={(e) => setSize(e.size)}>
      <FloatingPanel.Trigger class={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
      <Portal>
        <FloatingPanel.Positioner class={styles.Positioner}>
          <FloatingPanel.Content class={styles.Content}>
            <FloatingPanel.DragTrigger>
              <FloatingPanel.Header class={styles.Header}>
                <FloatingPanel.Title class={styles.Title}>
                  <GripVertical />
                  Floating Panel
                </FloatingPanel.Title>
                <FloatingPanel.Control class={styles.Control}>
                  <FloatingPanel.StageTrigger stage="minimized" class={styles.ControlButton}>
                    <Minus />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="maximized" class={styles.ControlButton}>
                    <Maximize2 />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="default" class={styles.ControlButton}>
                    <ArrowDownLeft />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.CloseTrigger class={styles.ControlButton}>
                    <XIcon />
                  </FloatingPanel.CloseTrigger>
                </FloatingPanel.Control>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body class={styles.Body}>
              <p>Some content</p>
            </FloatingPanel.Body>

<FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="nw" class={styles.ResizeTrigger} />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </Portal>
    </FloatingPanel.Root>
  )
}
```

### Controlled position

To control the position of the floating panel programmatically, you can pass the `position` and `onPositionChange` prop
to the machine.

export const ControlledPosition = () => {
  const [position, setPosition] = createSignal({ x: 200, y: 200 })

return (
    <FloatingPanel.Root position={position()} onPositionChange={(e) => setPosition(e.position)}>
      <FloatingPanel.Trigger class={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
      <Portal>
        <FloatingPanel.Positioner class={styles.Positioner}>
          <FloatingPanel.Content class={styles.Content}>
            <FloatingPanel.DragTrigger>
              <FloatingPanel.Header class={styles.Header}>
                <FloatingPanel.Title class={styles.Title}>
                  <GripVertical />
                  Floating Panel
                </FloatingPanel.Title>
                <FloatingPanel.Control class={styles.Control}>
                  <FloatingPanel.StageTrigger stage="minimized" class={styles.ControlButton}>
                    <Minus />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="maximized" class={styles.ControlButton}>
                    <Maximize2 />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="default" class={styles.ControlButton}>
                    <ArrowDownLeft />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.CloseTrigger class={styles.ControlButton}>
                    <XIcon />
                  </FloatingPanel.CloseTrigger>
                </FloatingPanel.Control>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body class={styles.Body}>
              <p>Some content</p>
            </FloatingPanel.Body>

<FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="nw" class={styles.ResizeTrigger} />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </Portal>
    </FloatingPanel.Root>
  )
}
```

### Anchor Position

Use the `getAnchorPosition` function to compute the initial position of the floating panel. This function is called when
the panel is opened and receives the `triggerRect` and `boundaryRect`.

export const AnchorPosition = () => (
  <FloatingPanel.Root
    getAnchorPosition={({ triggerRect }) => {
      if (!triggerRect) return { x: 0, y: 0 }
      return {
        x: triggerRect.x + triggerRect.width / 2,
        y: triggerRect.y + triggerRect.height / 2,
      }
    }}
  >
    <FloatingPanel.Trigger class={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
    <Portal>
      <FloatingPanel.Positioner class={styles.Positioner}>
        <FloatingPanel.Content class={styles.Content}>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header class={styles.Header}>
              <FloatingPanel.Title class={styles.Title}>
                <GripVertical />
                Floating Panel
              </FloatingPanel.Title>
              <FloatingPanel.Control class={styles.Control}>
                <FloatingPanel.StageTrigger stage="minimized" class={styles.ControlButton}>
                  <Minus />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="maximized" class={styles.ControlButton}>
                  <Maximize2 />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="default" class={styles.ControlButton}>
                  <ArrowDownLeft />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.CloseTrigger class={styles.ControlButton}>
                  <XIcon />
                </FloatingPanel.CloseTrigger>
              </FloatingPanel.Control>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body class={styles.Body}>
            <p>Some content</p>
          </FloatingPanel.Body>

### Open State

To control the open state of the floating panel programmatically, you can pass the `open` and `onOpenChange` prop to the
machine.

export const ControlledOpen = () => {
  const [open, setOpen] = createSignal(false)

return (
    <FloatingPanel.Root open={open()} onOpenChange={(e) => setOpen(e.open)}>
      <FloatingPanel.Trigger class={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
      <Portal>
        <FloatingPanel.Positioner class={styles.Positioner}>
          <FloatingPanel.Content class={styles.Content}>
            <FloatingPanel.DragTrigger>
              <FloatingPanel.Header class={styles.Header}>
                <FloatingPanel.Title class={styles.Title}>
                  <GripVertical />
                  Floating Panel
                </FloatingPanel.Title>
                <FloatingPanel.Control class={styles.Control}>
                  <FloatingPanel.StageTrigger stage="minimized" class={styles.ControlButton}>
                    <Minus />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="maximized" class={styles.ControlButton}>
                    <Maximize2 />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.StageTrigger stage="default" class={styles.ControlButton}>
                    <ArrowDownLeft />
                  </FloatingPanel.StageTrigger>
                  <FloatingPanel.CloseTrigger class={styles.ControlButton}>
                    <XIcon />
                  </FloatingPanel.CloseTrigger>
                </FloatingPanel.Control>
              </FloatingPanel.Header>
            </FloatingPanel.DragTrigger>
            <FloatingPanel.Body class={styles.Body}>
              <p>Some content</p>
            </FloatingPanel.Body>

<FloatingPanel.ResizeTrigger axis="n" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="e" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="w" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="s" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="ne" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="se" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="sw" class={styles.ResizeTrigger} />
            <FloatingPanel.ResizeTrigger axis="nw" class={styles.ResizeTrigger} />
          </FloatingPanel.Content>
        </FloatingPanel.Positioner>
      </Portal>
    </FloatingPanel.Root>
  )
}
```

### Lazy Mount

To lazy mount the floating panel, you can pass the `lazyMount` prop to the machine.

export const LazyMount = () => (
  <FloatingPanel.Root lazyMount onExitComplete={() => console.log('onExitComplete invoked')}>
    <FloatingPanel.Trigger class={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
    <Portal>
      <FloatingPanel.Positioner class={styles.Positioner}>
        <FloatingPanel.Content class={styles.Content}>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header class={styles.Header}>
              <FloatingPanel.Title class={styles.Title}>
                <GripVertical />
                Floating Panel
              </FloatingPanel.Title>
              <FloatingPanel.Control class={styles.Control}>
                <FloatingPanel.StageTrigger stage="minimized" class={styles.ControlButton}>
                  <Minus />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="maximized" class={styles.ControlButton}>
                  <Maximize2 />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="default" class={styles.ControlButton}>
                  <ArrowDownLeft />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.CloseTrigger class={styles.ControlButton}>
                  <XIcon />
                </FloatingPanel.CloseTrigger>
              </FloatingPanel.Control>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body class={styles.Body}>
            <p>Some content</p>
          </FloatingPanel.Body>

### Context

To access the context of the floating panel, you can use the `useFloatingPanelContext` hook or the
`FloatingPanel.Context` component.

export const Context = () => (
  <FloatingPanel.Root>
    <FloatingPanel.Trigger class={styles.Trigger}>Toggle Panel</FloatingPanel.Trigger>
    <FloatingPanel.Context>
      {(floatingPanel) => <p>floatingPanel is {floatingPanel().open ? 'open' : 'closed'}</p>}
    </FloatingPanel.Context>
    <Portal>
      <FloatingPanel.Positioner class={styles.Positioner}>
        <FloatingPanel.Content class={styles.Content}>
          <FloatingPanel.DragTrigger>
            <FloatingPanel.Header class={styles.Header}>
              <FloatingPanel.Title class={styles.Title}>
                <GripVertical />
                Floating Panel
              </FloatingPanel.Title>
              <FloatingPanel.Control class={styles.Control}>
                <FloatingPanel.StageTrigger stage="minimized" class={styles.ControlButton}>
                  <Minus />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="maximized" class={styles.ControlButton}>
                  <Maximize2 />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.StageTrigger stage="default" class={styles.ControlButton}>
                  <ArrowDownLeft />
                </FloatingPanel.StageTrigger>
                <FloatingPanel.CloseTrigger class={styles.ControlButton}>
                  <XIcon />
                </FloatingPanel.CloseTrigger>
              </FloatingPanel.Control>
            </FloatingPanel.Header>
          </FloatingPanel.DragTrigger>
          <FloatingPanel.Body class={styles.Body}>
            <p>Some content</p>
          </FloatingPanel.Body>

## API Reference

### Props

### Root

#### Props

**`allowOverflow`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the panel should be strictly contained within the boundary when dragging

**`closeOnEscape`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the panel should close when the escape key is pressed

**`defaultOpen`**
Type: `boolean`
Required: false
Default Value: `false`
Description: The initial open state of the panel when rendered.
Use when you don't need to control the open state of the panel.

**`defaultPosition`**
Type: `Point`
Required: false
Default Value: `undefined`
Description: The initial position of the panel when rendered.
Use when you don't need to control the position of the panel.

**`defaultSize`**
Type: `Size`
Required: false
Default Value: `undefined`
Description: The default size of the panel

**`dir`**
Type: `'ltr' | 'rtl'`
Required: false
Default Value: `"ltr"`
Description: The document's text/writing direction.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the panel is disabled

**`draggable`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the panel is draggable

**`finalFocusEl`**
Type: `() => HTMLElement | null`
Required: false
Default Value: `undefined`
Description: Element to receive focus when the panel is closed.
By default, the trigger element is focused.

**`getAnchorPosition`**
Type: `(details: AnchorPositionDetails) => Point`
Required: false
Default Value: `undefined`
Description: Function that returns the initial position of the panel when it is opened.
If provided, will be used instead of the default position.

**`getBoundaryEl`**
Type: `() => HTMLElement | null`
Required: false
Default Value: `undefined`
Description: The boundary of the panel. Useful for recalculating the boundary rect when
the it is resized.

**`gridSize`**
Type: `number`
Required: false
Default Value: `1`
Description: The snap grid for the panel

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{ trigger: string; positioner: string; content: string; title: string; header: string }>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the floating panel. Useful for composition.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`initialFocusEl`**
Type: `() => HTMLElement | null`
Required: false
Default Value: `undefined`
Description: Element to receive focus when the panel is opened.
By default, the first focusable element in the content is focused.

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`lockAspectRatio`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the panel is locked to its aspect ratio

**`maxSize`**
Type: `Size`
Required: false
Default Value: `undefined`
Description: The maximum size of the panel

**`minSize`**
Type: `Size`
Required: false
Default Value: `undefined`
Description: The minimum size of the panel

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the panel is opened or closed

**`onPositionChange`**
Type: `(details: PositionChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the position of the panel changes via dragging

**`onPositionChangeEnd`**
Type: `(details: PositionChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the position of the panel changes via dragging ends

**`onSizeChange`**
Type: `(details: SizeChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the size of the panel changes via resizing

**`onSizeChangeEnd`**
Type: `(details: SizeChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the size of the panel changes via resizing ends

**`onStageChange`**
Type: `(details: StageChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the stage of the panel changes

**`open`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The controlled open state of the panel

**`persistRect`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the panel size and position should be preserved when it is closed

**`position`**
Type: `Point`
Required: false
Default Value: `undefined`
Description: The controlled position of the panel

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`resizable`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the panel is resizable

**`restoreFocus`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to restore focus to the trigger when the panel is closed.

**`size`**
Type: `Size`
Required: false
Default Value: `undefined`
Description: The size of the panel

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`strategy`**
Type: `'absolute' | 'fixed'`
Required: false
Default Value: `"fixed"`
Description: The strategy to use for positioning

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: The translations for the floating panel.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Body

#### Props

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: body
**`data-dragging`**: Present when in the dragging state
**`data-minimized`**: Present when minimized
**`data-maximized`**: Present when maximized
**`data-staged`**: Present when not in default stage

### CloseTrigger

#### Props

### Content

#### Props

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-dragging`**: Present when in the dragging state
**`data-topmost`**: Present when topmost
**`data-behind`**: Present when not topmost
**`data-minimized`**: Present when minimized
**`data-maximized`**: Present when maximized
**`data-staged`**: Present when not in default stage

### Control

#### Props

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: control
**`data-disabled`**: Present when disabled
**`data-stage`**: The stage of the control
**`data-minimized`**: Present when minimized
**`data-maximized`**: Present when maximized
**`data-staged`**: Present when not in default stage

### DragTrigger

#### Props

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: drag-trigger
**`data-disabled`**: Present when disabled

### Header

#### Props

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: header
**`data-dragging`**: Present when in the dragging state
**`data-topmost`**: Present when topmost
**`data-behind`**: Present when not topmost
**`data-minimized`**: Present when minimized
**`data-maximized`**: Present when maximized
**`data-staged`**: Present when not in default stage

### Positioner

#### Props

### ResizeTrigger

#### Props

**`axis`**
Type: `ResizeTriggerAxis`
Required: true
Default Value: `undefined`
Description: The axis of the resize handle

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: resize-trigger
**`data-disabled`**: Present when disabled
**`data-axis`**: The axis to resize

### RootProvider

#### Props

**`value`**
Type: `UseFloatingPanelReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### StageTrigger

#### Props

**`stage`**
Type: `Stage`
Required: true
Default Value: `undefined`
Description: The stage of the panel

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: stage-trigger
**`data-stage`**: The stage of the stagetrigger

### Title

#### Props

### Trigger

#### Props

#### Data Attributes

**`data-scope`**: floating-panel
**`data-part`**: trigger
**`data-state`**: "open" | "closed"
**`data-dragging`**: Present when in the dragging state

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `open` | `boolean` | Whether the panel is open |
| `setOpen` | `(open: boolean) => void` | Function to open or close the panel |
| `dragging` | `boolean` | Whether the panel is being dragged |
| `resizing` | `boolean` | Whether the panel is being resized |
| `position` | `Point` | The position of the panel |
| `setPosition` | `(position: Point) => void` | Function to set the position of the panel |
| `size` | `Size` | The size of the panel |
| `setSize` | `(size: Size) => void` | Function to set the size of the panel |
| `minimize` | `VoidFunction` | Function to minimize the panel |
| `maximize` | `VoidFunction` | Function to maximize the panel |
| `restore` | `VoidFunction` | Function to restore the panel before it was minimized or maximized |
| `resizable` | `boolean` | Whether the panel is resizable |
| `draggable` | `boolean` | Whether the panel is draggable |

# Image Cropper

## Anatomy

```tsx
<ImageCropper.Root>
  <ImageCropper.Viewport>
    <ImageCropper.Image />
    <ImageCropper.Selection>
      <ImageCropper.Handle />
      <ImageCropper.Grid />
    </ImageCropper.Selection>
  </ImageCropper.Viewport>
</ImageCropper.Root>
```

## Examples

### Basic

Set up a basic image cropper. Drag the handles to resize the selection, or drag inside to pan the image.

```tsx
import { For } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import styles from 'styles/image-cropper.module.css'

export const Basic = () => {
  return (
    <div class={styles.Layout}>
      <ImageCropper.Root class={styles.Root}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Aspect Ratio

Lock the crop area to a specific aspect ratio. Use the `aspectRatio` prop—pass a number like `16/9` for widescreen or
`1` for square.

```tsx
import { For, createSignal } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import { RectangleHorizontalIcon, SquareIcon, RectangleVerticalIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/image-cropper.module.css'

const aspects = [
  { label: '16:9', value: 16 / 9, icon: RectangleHorizontalIcon },
  { label: '1:1', value: 1, icon: SquareIcon },
  { label: '9:16', value: 9 / 16, icon: RectangleVerticalIcon },
]

export const AspectRatio = () => {
  const [aspectRatio, setAspectRatio] = createSignal(16 / 9)

return (
    <div class={styles.Layout}>
      <div class={button.Group}>
        <For each={aspects}>
          {(aspect) => (
            <button
              class={button.Root}
              data-variant={aspectRatio() === aspect.value ? 'solid' : undefined}
              onClick={() => setAspectRatio(aspect.value)}
            >
              <aspect.icon />
              {aspect.label}
            </button>
          )}
        </For>
      </div>

<ImageCropper.Root class={styles.Root} aspectRatio={aspectRatio()}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Circle Crop

Use `cropShape="circle"` for profile pictures or avatars. The selection becomes a circle instead of a rectangle.

```tsx
import { For } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import styles from 'styles/image-cropper.module.css'

export const Circle = () => {
  return (
    <div class={styles.Layout}>
      <ImageCropper.Root class={styles.Root} cropShape="circle">
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Initial Crop

Start with a pre-defined crop area using the `initialCrop` prop. Pass an object with `x`, `y`, `width`, and `height` in
pixels.

```tsx
import { For } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import styles from 'styles/image-cropper.module.css'

export const InitialCrop = () => {
  return (
    <div class={styles.Layout}>
      <p class={styles.Description}>Starts with a pre-defined crop area</p>

<ImageCropper.Root class={styles.Root} initialCrop={{ x: 50, y: 30, width: 200, height: 120 }}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Controlled Zoom

Control zoom programmatically with the `zoom` and `onZoomChange` props. Useful when you want external buttons to zoom in
and out.

```tsx
import { For, createSignal } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import { ZoomInIcon, ZoomOutIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/image-cropper.module.css'

export const ControlledZoom = () => {
  const [zoom, setZoom] = createSignal(1)

return (
    <div class={styles.Layout}>
      <div class={button.Group}>
        <button class={button.Root} onClick={() => setZoom(zoom() - 0.1)}>
          <ZoomOutIcon />
        </button>
        <span style={{ 'font-size': '0.875rem', 'min-width': '3rem', 'text-align': 'center' }}>
          {zoom().toFixed(1)}x
        </span>
        <button class={button.Root} onClick={() => setZoom(zoom() + 0.1)}>
          <ZoomInIcon />
        </button>
      </div>

<ImageCropper.Root class={styles.Root} zoom={zoom()} onZoomChange={(e) => setZoom(e.zoom)}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Zoom Limits

Set `minZoom` and `maxZoom` to constrain how far users can zoom. Prevents over-zooming or zooming out past the image
bounds.

export const ZoomLimits = () => {
  const [zoom, setZoom] = createSignal(1)
  const minZoom = 0.5
  const maxZoom = 2

return (
    <div class={styles.Layout}>
      <div class={button.Group}>
        <button class={button.Root} onClick={() => setZoom(Math.max(minZoom, zoom() - 0.1))}>
          <ZoomOutIcon />
        </button>
        <span style={{ 'font-size': '0.875rem', padding: '0 0.5rem', 'min-width': '3rem', 'text-align': 'center' }}>
          {zoom().toFixed(1)}x
        </span>
        <button class={button.Root} onClick={() => setZoom(Math.min(maxZoom, zoom() + 0.1))}>
          <ZoomInIcon />
        </button>
      </div>

<p class={styles.Description}>
        Zoom constrained between {minZoom}x and {maxZoom}x
      </p>

<ImageCropper.Root
        class={styles.Root}
        zoom={zoom()}
        onZoomChange={(e) => setZoom(e.zoom)}
        minZoom={minZoom}
        maxZoom={maxZoom}
      >
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Rotation

Rotate the image with the `rotation` and `onRotationChange` props. Values are in degrees—common increments are 90
or 180.

```tsx
import { For, createSignal } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import { RotateCcwIcon, RotateCwIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/image-cropper.module.css'

export const Rotation = () => {
  const [rotation, setRotation] = createSignal(0)

return (
    <div class={styles.Layout}>
      <div class={button.Group}>
        <button class={button.Root} onClick={() => setRotation(rotation() - 90)}>
          <RotateCcwIcon />
        </button>
        <button class={button.Root} onClick={() => setRotation(rotation() + 90)}>
          <RotateCwIcon />
        </button>
        <span style={{ 'font-size': '0.875rem', padding: '0 0.5rem' }}>{rotation()}deg</span>
      </div>

<ImageCropper.Root class={styles.Root} rotation={rotation()} onRotationChange={(e) => setRotation(e.rotation)}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Flip

Flip the image horizontally or vertically using the `flip` prop. Pass an object with `horizontal` and `vertical`
booleans.

```tsx
import { For, createSignal } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import { FlipHorizontalIcon, FlipVerticalIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/image-cropper.module.css'

export const Flip = () => {
  const [flip, setFlip] = createSignal({ horizontal: false, vertical: false })

return (
    <div class={styles.Layout}>
      <div class={button.Group}>
        <button
          class={button.Root}
          data-variant={flip().horizontal ? 'solid' : undefined}
          onClick={() => setFlip({ ...flip(), horizontal: !flip().horizontal })}
        >
          <FlipHorizontalIcon />
          Horizontal
        </button>
        <button
          class={button.Root}
          data-variant={flip().vertical ? 'solid' : undefined}
          onClick={() => setFlip({ ...flip(), vertical: !flip().vertical })}
        >
          <FlipVerticalIcon />
          Vertical
        </button>
      </div>

<ImageCropper.Root class={styles.Root} flip={flip()} onFlipChange={(e) => setFlip(e.flip)}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Min and Max Size

Constrain the crop area size with `minWidth`, `minHeight`, `maxWidth`, and `maxHeight`. Keeps the selection within
sensible bounds.

```tsx
import { For } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import styles from 'styles/image-cropper.module.css'

export const MinMaxSize = () => {
  return (
    <div class={styles.Layout}>
      <p class={styles.Description}>Crop area constrained to min 80px and max 200px</p>

<ImageCropper.Root class={styles.Root} minWidth={80} minHeight={80} maxWidth={200} maxHeight={200}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Fixed Crop Area

Set `fixedCropArea` to `true` when the crop area should stay fixed while the image moves underneath. Useful for
overlay-style cropping.

```tsx
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import styles from 'styles/image-cropper.module.css'

export const Fixed = () => {
  return (
    <div class={styles.Layout}>
      <ImageCropper.Root class={styles.Root} fixedCropArea>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Crop Preview

Use `getCroppedImage()` from the context to get the cropped result. Call it with `{ output: 'dataUrl' }` for a base64
string you can use in an `img` src.

```tsx
import { For, createSignal, Show } from 'solid-js'
import { ImageCropper, useImageCropper } from '@ark-ui/solid/image-cropper'
import { CropIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/image-cropper.module.css'

export const CropPreview = () => {
  const imageCropper = useImageCropper()
  const [preview, setPreview] = createSignal<string | null>(null)

const handleCrop = async () => {
    const result = await imageCropper().getCroppedImage({ output: 'dataUrl' })
    if (typeof result === 'string') {
      setPreview(result)
    }
  }

return (
    <div class={styles.Layout}>
      <div class={button.Group}>
        <button class={button.Root} data-variant="solid" onClick={handleCrop}>
          <CropIcon />
          Crop Image
        </button>
      </div>

<ImageCropper.RootProvider class={styles.Root} value={imageCropper}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
            crossOrigin="anonymous"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.RootProvider>

<div class={styles.Preview}>
        <span class={styles.PreviewLabel}>Preview</span>
        <Show when={preview()}>
          <img src={preview()!} alt="Cropped preview" class={styles.PreviewImage} />
        </Show>
      </div>
    </div>
  )
}
```

### Reset

The context exposes a `reset()` method that restores the image to its initial state. Handy for an "undo" or "start over"
button.

```tsx
import { For } from 'solid-js'
import { ImageCropper, useImageCropper } from '@ark-ui/solid/image-cropper'
import { FlipHorizontalIcon, RotateCwIcon, RotateCcwIcon, RefreshCwIcon, ZoomInIcon, ZoomOutIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/image-cropper.module.css'

export const Reset = () => {
  const imageCropper = useImageCropper()

return (
    <div class={styles.Layout}>
      <div class={button.Group}>
        <button class={button.Root} onClick={() => imageCropper().zoomBy(-0.1)}>
          <ZoomOutIcon />
        </button>
        <button class={button.Root} onClick={() => imageCropper().zoomBy(0.1)}>
          <ZoomInIcon />
        </button>
        <button class={button.Root} onClick={() => imageCropper().rotateBy(-90)}>
          <RotateCcwIcon />
        </button>
        <button class={button.Root} onClick={() => imageCropper().rotateBy(90)}>
          <RotateCwIcon />
        </button>
        <button class={button.Root} onClick={() => imageCropper().flipHorizontally()}>
          <FlipHorizontalIcon />
        </button>
        <button class={button.Root} data-variant="surface" onClick={() => imageCropper().reset()}>
          <RefreshCwIcon />
          Reset
        </button>
      </div>

<ImageCropper.RootProvider class={styles.Root} value={imageCropper}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.RootProvider>
    </div>
  )
}
```

### Events

Listen to `onCropChange` and `onZoomChange` to track crop position and zoom level. Use these to sync with external state
or show live previews.

```tsx
import { For, createSignal } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import styles from 'styles/image-cropper.module.css'

export const Events = () => {
  const [cropData, setCropData] = createSignal({ x: 0, y: 0, width: 0, height: 0 })
  const [zoom, setZoom] = createSignal(1)

return (
    <div class={styles.Layout}>
      <ImageCropper.Root
        class={styles.Root}
        onCropChange={(e) => setCropData(e.crop)}
        onZoomChange={(e) => setZoom(e.zoom)}
      >
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>

<div class={styles.DataDisplay}>
        <div class={styles.DataItem}>
          <span class={styles.DataLabel}>Zoom</span>
          <span class={styles.DataValue}>{zoom().toFixed(2)}x</span>
        </div>
        <div class={styles.DataItem}>
          <span class={styles.DataLabel}>Position</span>
          <span class={styles.DataValue}>
            {Math.round(cropData().x)}, {Math.round(cropData().y)}
          </span>
        </div>
        <div class={styles.DataItem}>
          <span class={styles.DataLabel}>Size</span>
          <span class={styles.DataValue}>
            {Math.round(cropData().width)} x {Math.round(cropData().height)}
          </span>
        </div>
      </div>
    </div>
  )
}
```

### Context

Use `ImageCropper.Context` to access the cropper API from anywhere inside the root. You get methods like `zoomBy`,
`rotateBy`, and `setZoom`.

```tsx
import { For } from 'solid-js'
import { ImageCropper } from '@ark-ui/solid/image-cropper'
import { ZoomInIcon, ZoomOutIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/image-cropper.module.css'

export const Context = () => {
  return (
    <div class={styles.Layout}>
      <ImageCropper.Root class={styles.Root}>
        <ImageCropper.Context>
          {(context) => (
            <div class={button.Group}>
              <button class={button.Root} onClick={() => context().zoomBy(-0.1)}>
                <ZoomOutIcon />
              </button>
              <span
                style={{ 'font-size': '0.875rem', padding: '0 0.5rem', 'min-width': '3rem', 'text-align': 'center' }}
              >
                {context().zoom.toFixed(1)}x
              </span>
              <button class={button.Root} onClick={() => context().zoomBy(0.1)}>
                <ZoomInIcon />
              </button>
            </div>
          )}
        </ImageCropper.Context>

<ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
    </div>
  )
}
```

### Root Provider

Use `RootProvider` with `useImageCropper` when you need to control the cropper from outside the component tree. Build
custom toolbars or integrate with form state.

```tsx
import { For } from 'solid-js'
import { ImageCropper, useImageCropper } from '@ark-ui/solid/image-cropper'
import { ZoomInIcon, ZoomOutIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/image-cropper.module.css'

export const RootProvider = () => {
  const imageCropper = useImageCropper()

return (
    <div class={styles.Layout}>
      <div class={button.Group}>
        <button class={button.Root} onClick={() => imageCropper().setZoom(imageCropper().zoom - 0.1)}>
          <ZoomOutIcon />
        </button>
        <span style={{ 'font-size': '0.875rem', 'min-width': '3rem', 'text-align': 'center' }}>
          {imageCropper().zoom.toFixed(1)}x
        </span>
        <button class={button.Root} onClick={() => imageCropper().setZoom(imageCropper().zoom + 0.1)}>
          <ZoomInIcon />
        </button>
      </div>

<ImageCropper.RootProvider class={styles.Root} value={imageCropper}>
        <ImageCropper.Viewport class={styles.Viewport}>
          <ImageCropper.Image
            class={styles.Image}
            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
            alt="Sample"
          />
          <ImageCropper.Selection class={styles.Selection}>
            <For each={ImageCropper.handles}>
              {(position) => (
                <ImageCropper.Handle class={styles.Handle} position={position}>
                  <div />
                </ImageCropper.Handle>
              )}
            </For>
            <ImageCropper.Grid class={styles.Grid} axis="horizontal" />
            <ImageCropper.Grid class={styles.Grid} axis="vertical" />
          </ImageCropper.Selection>
        </ImageCropper.Viewport>
      </ImageCropper.RootProvider>
    </div>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`aspectRatio`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The aspect ratio to maintain for the crop area (width / height).
For example, an aspect ratio of 16 / 9 will maintain a width to height ratio of 16:9.
If not provided, the crop area can be freely resized.

**`cropShape`**
Type: `'rectangle' | 'circle'`
Required: false
Default Value: `"rectangle"`
Description: The shape of the crop area.

**`defaultFlip`**
Type: `FlipState`
Required: false
Default Value: `{ horizontal: false, vertical: false }`
Description: The initial flip state to apply to the image.

**`defaultRotation`**
Type: `number`
Required: false
Default Value: `0`
Description: The initial rotation to apply to the image in degrees.

**`defaultZoom`**
Type: `number`
Required: false
Default Value: `1`
Description: The initial zoom factor to apply to the image.

**`fixedCropArea`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether the crop area is fixed in size and position.

**`flip`**
Type: `FlipState`
Required: false
Default Value: `undefined`
Description: The controlled flip state of the image.

**`ids`**
Type: `Partial<{
  root: string
  viewport: string
  image: string
  selection: string
  handle: (position: string) => string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the image cropper elements

**`initialCrop`**
Type: `Rect`
Required: false
Default Value: `undefined`
Description: The initial rectangle of the crop area.
If not provided, a smart default will be computed based on viewport size and aspect ratio.

**`maxHeight`**
Type: `number`
Required: false
Default Value: `Infinity`
Description: The maximum height of the crop area

**`maxWidth`**
Type: `number`
Required: false
Default Value: `Infinity`
Description: The maximum width of the crop area

**`maxZoom`**
Type: `number`
Required: false
Default Value: `5`
Description: The maximum zoom factor allowed.

**`minHeight`**
Type: `number`
Required: false
Default Value: `40`
Description: The minimum height of the crop area

**`minWidth`**
Type: `number`
Required: false
Default Value: `40`
Description: The minimum width of the crop area

**`minZoom`**
Type: `number`
Required: false
Default Value: `1`
Description: The minimum zoom factor allowed.

**`nudgeStep`**
Type: `number`
Required: false
Default Value: `1`
Description: The base nudge step for keyboard arrow keys (in pixels).

**`nudgeStepCtrl`**
Type: `number`
Required: false
Default Value: `50`
Description: The nudge step when Ctrl/Cmd key is held (in pixels).

**`nudgeStepShift`**
Type: `number`
Required: false
Default Value: `10`
Description: The nudge step when Shift key is held (in pixels).

**`onCropChange`**
Type: `(details: CropChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when the crop area changes.

**`onFlipChange`**
Type: `(details: FlipChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when the flip state changes.

**`onRotationChange`**
Type: `(details: RotationChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when the rotation changes.

**`onZoomChange`**
Type: `(details: ZoomChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when the zoom level changes.

**`rotation`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The controlled rotation of the image in degrees (0 - 360).

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: Specifies the localized strings that identify accessibility elements and their states.

**`zoom`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The controlled zoom level of the image.

**`zoomSensitivity`**
Type: `number`
Required: false
Default Value: `2`
Description: Controls how responsive pinch-to-zoom is.

**`zoomStep`**
Type: `number`
Required: false
Default Value: `0.1`
Description: The amount of zoom applied per wheel step.

#### Data Attributes

**`data-scope`**: image-cropper
**`data-part`**: root
**`data-fixed`**: 
**`data-shape`**: 
**`data-pinch`**: 
**`data-dragging`**: Present when in the dragging state
**`data-panning`**:

### Grid

#### Props

**`axis`**
Type: `'horizontal' | 'vertical'`
Required: true
Default Value: `undefined`
Description: The axis of the grid lines to display

#### Data Attributes

**`data-scope`**: image-cropper
**`data-part`**: grid
**`data-axis`**: The axis to resize
**`data-dragging`**: Present when in the dragging state
**`data-panning`**:

### Handle

#### Props

**`position`**
Type: `HandlePosition`
Required: true
Default Value: `undefined`
Description: The position of the handle

#### Data Attributes

**`data-scope`**: image-cropper
**`data-part`**: handle
**`data-position`**: 
**`data-disabled`**: Present when disabled

### Image

#### Props

#### Data Attributes

**`data-scope`**: image-cropper
**`data-part`**: image
**`data-ready`**: 
**`data-flip-horizontal`**: 
**`data-flip-vertical`**:

### RootProvider

#### Props

**`value`**
Type: `UseImageCropperReturn`
Required: true
Default Value: `undefined`
Description: undefined

### Selection

#### Props

#### Data Attributes

**`data-scope`**: image-cropper
**`data-part`**: selection
**`data-disabled`**: Present when disabled
**`data-shape`**: 
**`data-measured`**: 
**`data-dragging`**: Present when in the dragging state
**`data-panning`**:

### Viewport

#### Props

#### Data Attributes

**`data-scope`**: image-cropper
**`data-part`**: viewport
**`data-disabled`**: Present when disabled

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `zoom` | `number` | The current zoom level of the image. |
| `rotation` | `number` | The current rotation of the image in degrees. |
| `flip` | `FlipState` | The current flip state of the image. |
| `crop` | `Rect` | The current crop area rectangle in viewport coordinates. |
| `offset` | `Point` | The current offset (pan position) of the image. |
| `naturalSize` | `Size` | The natural (original) size of the image. |
| `viewportRect` | `BoundingRect` | The viewport rectangle dimensions and position. |
| `dragging` | `boolean` | Whether the crop area is currently being dragged. |
| `panning` | `boolean` | Whether the image is currently being panned. |
| `setZoom` | `(zoom: number) => void` | Function to set the zoom level of the image. |
| `zoomBy` | `(delta: number) => void` | Function to zoom the image by a relative amount. |
| `setRotation` | `(rotation: number) => void` | Function to set the rotation of the image. |
| `rotateBy` | `(degrees: number) => void` | Function to rotate the image by a relative amount in degrees. |
| `setFlip` | `(flip: Partial<FlipState>) => void` | Function to set the flip state of the image. |
| `flipHorizontally` | `(value?: boolean) => void` | Function to flip the image horizontally. Pass a boolean to set explicitly or omit to toggle. |
| `flipVertically` | `(value?: boolean) => void` | Function to flip the image vertically. Pass a boolean to set explicitly or omit to toggle. |
| `resize` | `(handlePosition: HandlePosition, delta: number) => void` | Function to resize the crop area from a handle programmatically. |
| `reset` | `() => void` | Function to reset the cropper to its initial state. |
| `getCroppedImage` | `(options?: GetCroppedImageOptions) => Promise<Blob | string | null>` | Function to get the cropped image with all transformations applied.
Returns a Promise that resolves to either a Blob or data URL. |
| `getCropData` | `() => CropData` | Function to get the crop geometry in natural image pixels.
The rect is axis-aligned; `corners` preserves the exact source quad. |

# Hover Card

## Anatomy

```tsx
<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Positioner>
    <HoverCard.Arrow>
      <HoverCard.ArrowTip />
    </HoverCard.Arrow>
    <HoverCard.Content />
  </HoverCard.Positioner>
</HoverCard.Root>
```

## Examples

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const Basic = () => (
  <HoverCard.Root>
    <p>
      Liked by{' '}
      <HoverCard.Trigger
        class={styles.Trigger}
        asChild={(props) => (
          <a href="#profile" {...props()}>
            @sarah_chen
          </a>
        )}
      />{' '}
      and 3 others
    </p>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content class={styles.Content}>
          <HoverCard.Arrow class={styles.Arrow}>
            <HoverCard.ArrowTip class={styles.ArrowTip} />
          </HoverCard.Arrow>
          <div class={styles.Body}>
            <div class={styles.Header}>
              <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
              <button type="button" class={styles.FollowButton}>
                Follow
              </button>
            </div>
            <div>
              <p class={styles.Name}>Sarah Chen</p>
              <p class={styles.Username}>@sarah_chen</p>
            </div>
            <p class={styles.Bio}>Design Engineer at Acme Inc. Building beautiful interfaces and design systems.</p>
            <div class={styles.Stats}>
              <div class={styles.Stat}>
                <span class={styles.StatValue}>2,456</span>
                <span class={styles.StatLabel}>Following</span>
              </div>
              <div class={styles.Stat}>
                <span class={styles.StatValue}>14.5K</span>
                <span class={styles.StatLabel}>Followers</span>
              </div>
            </div>
          </div>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
)
```

### Controlled

The controlled `HoverCard` component provides an interface for managing the state of the hover card using the `open` and
`onOpenChange` props:

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import styles from 'styles/hover-card.module.css'

export const Controlled = () => {
  const [open, setOpen] = createSignal(false)

return (
    <div class="stack">
      <button type="button" class={button.Root} onClick={() => setOpen(!open())}>
        Toggle
      </button>
      <HoverCard.Root open={open()} onOpenChange={(e) => setOpen(e.open)}>
        <p>
          Liked by{' '}
          <HoverCard.Trigger
            class={styles.Trigger}
            asChild={(props) => (
              <a href="#profile" {...props()}>
                @sarah_chen
              </a>
            )}
          />{' '}
          and 3 others
        </p>
        <Portal>
          <HoverCard.Positioner>
            <HoverCard.Content class={styles.Content}>
              <HoverCard.Arrow class={styles.Arrow}>
                <HoverCard.ArrowTip class={styles.ArrowTip} />
              </HoverCard.Arrow>
              <div class={styles.Body}>
                <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
                <div>
                  <p class={styles.Name}>Sarah Chen</p>
                  <p class={styles.Username}>@sarah_chen</p>
                </div>
                <p class={styles.Bio}>Design Engineer at Acme Inc.</p>
              </div>
            </HoverCard.Content>
          </HoverCard.Positioner>
        </Portal>
      </HoverCard.Root>
    </div>
  )
}
```

### Root Provider

An alternative way to control the hover card is to use the `RootProvider` component and the `useHoverCard` hook. This
way you can access the state and methods from outside the component.

```tsx
import { HoverCard, useHoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const RootProvider = () => {
  const hoverCard = useHoverCard()

return (
    <div class="stack">
      <output>Open: {String(hoverCard().open)}</output>
      <HoverCard.RootProvider value={hoverCard}>
        <p>
          Liked by{' '}
          <HoverCard.Trigger
            class={styles.Trigger}
            asChild={(props) => (
              <a href="#profile" {...props()}>
                @sarah_chen
              </a>
            )}
          />{' '}
          and 3 others
        </p>
        <Portal>
          <HoverCard.Positioner>
            <HoverCard.Content class={styles.Content}>
              <HoverCard.Arrow class={styles.Arrow}>
                <HoverCard.ArrowTip class={styles.ArrowTip} />
              </HoverCard.Arrow>
              <div class={styles.Body}>
                <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
                <div>
                  <p class={styles.Name}>Sarah Chen</p>
                  <p class={styles.Username}>@sarah_chen</p>
                </div>
                <p class={styles.Bio}>Design Engineer at Acme Inc.</p>
              </div>
            </HoverCard.Content>
          </HoverCard.Positioner>
        </Portal>
      </HoverCard.RootProvider>
    </div>
  )
}
```

### Delay

Control the open and close delay of the hover card using the `openDelay` and `closeDelay` props:

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const Delay = () => (
  <HoverCard.Root openDelay={200} closeDelay={500}>
    <p>
      Liked by{' '}
      <HoverCard.Trigger
        class={styles.Trigger}
        asChild={(props) => (
          <a href="#profile" {...props()}>
            @sarah_chen
          </a>
        )}
      />{' '}
      and 3 others
    </p>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content class={styles.Content}>
          <HoverCard.Arrow class={styles.Arrow}>
            <HoverCard.ArrowTip class={styles.ArrowTip} />
          </HoverCard.Arrow>
          <div class={styles.Body}>
            <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
            <div>
              <p class={styles.Name}>Sarah Chen</p>
              <p class={styles.Username}>@sarah_chen</p>
            </div>
            <p class={styles.Bio}>Design Engineer at Acme Inc.</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
)
```

### Positioning

The `HoverCard` component can be customized in its placement and distance from the trigger element through the
`positioning` prop:

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const Positioning = () => (
  <HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
    <p>
      Liked by{' '}
      <HoverCard.Trigger
        class={styles.Trigger}
        asChild={(props) => (
          <a href="#profile" {...props()}>
            @sarah_chen
          </a>
        )}
      />{' '}
      and 3 others
    </p>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content class={styles.Content}>
          <HoverCard.Arrow class={styles.Arrow}>
            <HoverCard.ArrowTip class={styles.ArrowTip} />
          </HoverCard.Arrow>
          <div class={styles.Body}>
            <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
            <div>
              <p class={styles.Name}>Sarah Chen</p>
              <p class={styles.Username}>@sarah_chen</p>
            </div>
            <p class={styles.Bio}>Design Engineer at Acme Inc.</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
)
```

### Context

Access the hover card's state with `HoverCard.Context` or the `useHoverCardContext` hook:

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const Context = () => (
  <HoverCard.Root>
    <HoverCard.Context>
      {(context) => (
        <p>
          Liked by{' '}
          <HoverCard.Trigger
            class={styles.Trigger}
            asChild={(props) => (
              <a href="#profile" {...props()}>
                @sarah_chen {context().open ? <ChevronUpIcon /> : <ChevronDownIcon />}
              </a>
            )}
          />{' '}
          and 3 others
        </p>
      )}
    </HoverCard.Context>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content class={styles.Content}>
          <HoverCard.Arrow class={styles.Arrow}>
            <HoverCard.ArrowTip class={styles.ArrowTip} />
          </HoverCard.Arrow>
          <div class={styles.Body}>
            <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
            <div>
              <p class={styles.Name}>Sarah Chen</p>
              <p class={styles.Username}>@sarah_chen</p>
            </div>
            <p class={styles.Bio}>Design Engineer at Acme Inc.</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
)
```

### Multiple Triggers

Share a single hover card across multiple trigger elements. Pass a `value` to each `HoverCard.Trigger` — the card
repositions to the active trigger without closing.

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import { Show, createSignal } from 'solid-js'
import styles from 'styles/hover-card.module.css'

interface Profile {
  id: string
  name: string
  username: string
  avatar: string
  bio: string
}

const profiles: Profile[] = [
  {
    id: 'sarah',
    name: 'Sarah Chen',
    username: '@sarah_chen',
    avatar: 'https://i.pravatar.cc/300?u=sarah',
    bio: 'Design Engineer at Acme Inc. Building beautiful interfaces.',
  },
  {
    id: 'alex',
    name: 'Alex Rivera',
    username: '@alex_r',
    avatar: 'https://i.pravatar.cc/300?u=alex',
    bio: 'Full-stack developer and open source contributor.',
  },
  {
    id: 'jordan',
    name: 'Jordan Lee',
    username: '@jordan_lee',
    avatar: 'https://i.pravatar.cc/300?u=jordan',
    bio: 'DevOps lead. Automating all the things.',
  },
]

export const MultipleTriggers = () => {
  const [activeProfile, setActiveProfile] = createSignal<Profile | null>(null)

return (
    <HoverCard.Root
      onTriggerValueChange={(e) => {
        setActiveProfile(profiles.find((p) => p.id === e.value) ?? null)
      }}
    >
      <p class={styles.Paragraph}>
        Reviewed by{' '}
        <HoverCard.Trigger
          value="sarah"
          asChild={(props) => (
            <a href="#" class={styles.Trigger} {...props()}>
              @sarah_chen
            </a>
          )}
        />
        ,{' '}
        <HoverCard.Trigger
          value="alex"
          asChild={(props) => (
            <a href="#" class={styles.Trigger} {...props()}>
              @alex_r
            </a>
          )}
        />
        , and{' '}
        <HoverCard.Trigger
          value="jordan"
          asChild={(props) => (
            <a href="#" class={styles.Trigger} {...props()}>
              @jordan_lee
            </a>
          )}
        />
      </p>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content class={styles.Content}>
            <HoverCard.Arrow class={styles.Arrow}>
              <HoverCard.ArrowTip class={styles.ArrowTip} />
            </HoverCard.Arrow>
            <Show when={activeProfile()}>
              {(profile) => (
                <div class={styles.Body}>
                  <div class={styles.Header}>
                    <img class={styles.Avatar} src={profile().avatar} alt={profile().name} />
                  </div>
                  <div>
                    <p class={styles.Name}>{profile().name}</p>
                    <p class={styles.Username}>{profile().username}</p>
                  </div>
                  <p class={styles.Bio}>{profile().bio}</p>
                </div>
              )}
            </Show>
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`closeDelay`**
Type: `number`
Required: false
Default Value: `300`
Description: The duration from when the mouse leaves the trigger or content until the hover card closes.

**`defaultOpen`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The initial open state of the hover card when rendered.
Use when you don't need to control the open state of the hover card.

**`defaultTriggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial trigger value when rendered.
Use when you don't need to control the trigger value.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the hover card is disabled

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  trigger: string | ((value?: string | undefined) => string)
  content: string
  positioner: string
  arrow: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the popover. Useful for composition.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`onFocusOutside`**
Type: `(event: FocusOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the focus is moved outside the component

**`onInteractOutside`**
Type: `(event: InteractOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when an interaction happens outside the component

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the hover card opens or closes.

**`onTriggerValueChange`**
Type: `(details: TriggerValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the trigger value changes.

**`open`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The controlled open state of the hover card

**`openDelay`**
Type: `number`
Required: false
Default Value: `600`
Description: The duration from when the mouse enters the trigger until the hover card opens.

**`positioning`**
Type: `PositioningOptions`
Required: false
Default Value: `undefined`
Description: The user provided options used to position the popover content

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`triggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled trigger value

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Arrow

#### Props

### ArrowTip

#### Props

### Content

#### Props

#### Data Attributes

**`data-scope`**: hover-card
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-nested`**: popover
**`data-has-nested`**: popover
**`data-placement`**: The placement of the content
**`data-side`**: The side of the trigger that the content is positioned on

### Positioner

#### Props

### RootProvider

#### Props

**`value`**
Type: `UseHoverCardReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Trigger

#### Props

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value that identifies this specific trigger

#### Data Attributes

**`data-scope`**: hover-card
**`data-part`**: trigger
**`data-placement`**: The placement of the trigger
**`data-side`**: The side of the trigger that the trigger is positioned on
**`data-value`**: The value of the item
**`data-current`**: Present when current
**`data-state`**: "open" | "closed"

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `open` | `boolean` | Whether the hover card is open |
| `setOpen` | `(open: boolean) => void` | Function to open the hover card |
| `triggerValue` | `string | null` | The trigger value |
| `setTriggerValue` | `(value: string | null) => void` | Function to set the trigger value |
| `reposition` | `(options?: Partial<PositioningOptions>) => void` | Function to reposition the popover |

# Listbox

## Anatomy

{/*  */}

```tsx
<Listbox.Root>
  <Listbox.Label />
  <Listbox.Content>
    <Listbox.ItemGroup>
      <Listbox.ItemGroupLabel />
      <Listbox.Item>
        <Listbox.ItemText />
        <Listbox.ItemIndicator />
      </Listbox.Item>
    </Listbox.ItemGroup>
  </Listbox.Content>
  <Listbox.ValueText />
</Listbox.Root>
```

## Examples

### Basic

Here's a basic example of the Listbox component.

```tsx
import { Listbox, createListCollection } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/listbox.module.css'

export const Basic = () => {
  const collection = createListCollection({
    items: [
      { label: 'United States', value: 'us' },
      { label: 'United Kingdom', value: 'uk' },
      { label: 'Canada', value: 'ca' },
      { label: 'Australia', value: 'au' },
      { label: 'Germany', value: 'de' },
      { label: 'France', value: 'fr' },
      { label: 'Japan', value: 'jp' },
    ],
  })

return (
    <Listbox.Root class={styles.Root} collection={collection}>
      <Listbox.Label class={styles.Label}>Select Country</Listbox.Label>
      <Listbox.Content class={styles.Content}>
        <Index each={collection.items}>
          {(item) => (
            <Listbox.Item class={styles.Item} item={item()}>
              <Listbox.ItemText class={styles.ItemText}>{item().label}</Listbox.ItemText>
              <Listbox.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Listbox.ItemIndicator>
            </Listbox.Item>
          )}
        </Index>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

### Controlled

The Listbox component can be controlled by using the `value` and `onValueChange` props. This allows you to manage the
selected value externally.

```tsx
import { Listbox, createListCollection } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { Index, createSignal } from 'solid-js'
import styles from 'styles/listbox.module.css'

export const Controlled = () => {
  const collection = createListCollection({
    items: [
      { label: 'Small', value: 'sm' },
      { label: 'Medium', value: 'md' },
      { label: 'Large', value: 'lg' },
      { label: 'Extra Large', value: 'xl' },
    ],
  })
  const [value, setValue] = createSignal(['md'])

return (
    <Listbox.Root class={styles.Root} collection={collection} value={value()} onValueChange={(e) => setValue(e.value)}>
      <Listbox.Label class={styles.Label}>Select Size</Listbox.Label>
      <Listbox.Content class={styles.Content}>
        <Index each={collection.items}>
          {(item) => (
            <Listbox.Item class={styles.Item} item={item()}>
              <Listbox.ItemText class={styles.ItemText}>{item().label}</Listbox.ItemText>
              <Listbox.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Listbox.ItemIndicator>
            </Listbox.Item>
          )}
        </Index>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

### Root Provider

An alternative way to control the listbox is to use the `RootProvider` component and the `useListbox` hook. This way you
can access the state and methods from outside the component.

```tsx
import { Listbox, createListCollection, useListbox } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/listbox.module.css'

export const RootProvider = () => {
  const collection = createListCollection({
    items: [
      { label: 'Low', value: 'low' },
      { label: 'Medium', value: 'medium' },
      { label: 'High', value: 'high' },
      { label: 'Critical', value: 'critical' },
    ],
  })
  const listbox = useListbox({ collection })

return (
    <div class="stack">
      <button class={button.Root} onClick={() => listbox().setValue(['high'])}>
        Set to High
      </button>
      <Listbox.RootProvider class={styles.Root} value={listbox}>
        <Listbox.Label class={styles.Label}>Select Priority</Listbox.Label>
        <Listbox.Content class={styles.Content}>
          <Index each={collection.items}>
            {(item) => (
              <Listbox.Item class={styles.Item} item={item()}>
                <Listbox.ItemText class={styles.ItemText}>{item().label}</Listbox.ItemText>
                <Listbox.ItemIndicator class={styles.ItemIndicator}>
                  <CheckIcon />
                </Listbox.ItemIndicator>
              </Listbox.Item>
            )}
          </Index>
        </Listbox.Content>
      </Listbox.RootProvider>
    </div>
  )
}
```

### Disabled Item

Listbox items can be disabled using the `disabled` prop on the collection item.

```tsx
import { Listbox, createListCollection } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/listbox.module.css'

export const DisabledItem = () => {
  const collection = createListCollection({
    items: [
      { label: 'Free', value: 'free' },
      { label: 'Pro', value: 'pro' },
      { label: 'Enterprise', value: 'enterprise', disabled: true },
      { label: 'Custom', value: 'custom' },
    ],
  })

return (
    <Listbox.Root class={styles.Root} collection={collection}>
      <Listbox.Label class={styles.Label}>Select Plan</Listbox.Label>
      <Listbox.Content class={styles.Content}>
        <Index each={collection.items}>
          {(item) => (
            <Listbox.Item class={styles.Item} item={item()}>
              <Listbox.ItemText class={styles.ItemText}>{item().label}</Listbox.ItemText>
              <Listbox.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Listbox.ItemIndicator>
            </Listbox.Item>
          )}
        </Index>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

> You can also use the `isItemDisabled` within the `createListCollection` to disable items based on a condition.

### Multiple

You can set the `selectionMode` property as `multiple` to allow the user to select multiple items at a time.

```tsx
import { Listbox, createListCollection } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/listbox.module.css'

export const Multiple = () => {
  const collection = createListCollection({
    items: [
      { label: 'Monday', value: 'mon' },
      { label: 'Tuesday', value: 'tue' },
      { label: 'Wednesday', value: 'wed' },
      { label: 'Thursday', value: 'thu' },
      { label: 'Friday', value: 'fri' },
      { label: 'Saturday', value: 'sat' },
      { label: 'Sunday', value: 'sun' },
    ],
  })

return (
    <Listbox.Root class={styles.Root} collection={collection} selectionMode="multiple">
      <Listbox.Label class={styles.Label}>Select Days</Listbox.Label>
      <Listbox.Content class={styles.Content}>
        <Index each={collection.items}>
          {(item) => (
            <Listbox.Item class={styles.Item} item={item()}>
              <Listbox.ItemText class={styles.ItemText}>{item().label}</Listbox.ItemText>
              <Listbox.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Listbox.ItemIndicator>
            </Listbox.Item>
          )}
        </Index>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

### Grouping

The Listbox component supports grouping items. You can use the `groupBy` function to group items based on a specific
property.

```tsx
import { Listbox, createListCollection } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { For } from 'solid-js'
import styles from 'styles/listbox.module.css'

export const Group = () => {
  const collection = createListCollection({
    items: [
      { label: 'New York', value: 'nyc', region: 'North America' },
      { label: 'Los Angeles', value: 'lax', region: 'North America' },
      { label: 'Toronto', value: 'yyz', region: 'North America' },
      { label: 'London', value: 'lhr', region: 'Europe' },
      { label: 'Paris', value: 'cdg', region: 'Europe' },
      { label: 'Berlin', value: 'ber', region: 'Europe' },
      { label: 'Tokyo', value: 'nrt', region: 'Asia Pacific' },
      { label: 'Singapore', value: 'sin', region: 'Asia Pacific' },
      { label: 'Sydney', value: 'syd', region: 'Asia Pacific' },
    ],
    groupBy: (item) => item.region,
  })

return (
    <Listbox.Root class={styles.Root} collection={collection}>
      <Listbox.Label class={styles.Label}>Select Region</Listbox.Label>
      <Listbox.Content class={styles.Content}>
        <For each={collection.group()}>
          {([region, items]) => (
            <Listbox.ItemGroup class={styles.ItemGroup}>
              <Listbox.ItemGroupLabel class={styles.ItemGroupLabel}>{region}</Listbox.ItemGroupLabel>
              <For each={items}>
                {(item) => (
                  <Listbox.Item class={styles.Item} item={item}>
                    <Listbox.ItemText class={styles.ItemText}>{item.label}</Listbox.ItemText>
                    <Listbox.ItemIndicator class={styles.ItemIndicator}>
                      <CheckIcon />
                    </Listbox.ItemIndicator>
                  </Listbox.Item>
                )}
              </For>
            </Listbox.ItemGroup>
          )}
        </For>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

### Extended Selection

The extended selection mode allows users to select multiple items using keyboard modifiers like `Cmd` (Mac) or `Ctrl`
(Windows/Linux).

```tsx
import { Listbox, createListCollection } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/listbox.module.css'

export const ExtendedSelect = () => {
  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Vue', value: 'vue' },
      { label: 'Angular', value: 'angular' },
      { label: 'Svelte', value: 'svelte' },
      { label: 'Solid', value: 'solid' },
      { label: 'Preact', value: 'preact' },
    ],
  })

return (
    <Listbox.Root class={styles.Root} collection={collection} selectionMode="extended">
      <Listbox.Label class={styles.Label}>
        Hold <kbd>⌘</kbd> or <kbd>Ctrl</kbd> to select multiple
      </Listbox.Label>
      <Listbox.Content class={styles.Content}>
        <Index each={collection.items}>
          {(item) => (
            <Listbox.Item class={styles.Item} item={item()}>
              <Listbox.ItemText class={styles.ItemText}>{item().label}</Listbox.ItemText>
              <Listbox.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Listbox.ItemIndicator>
            </Listbox.Item>
          )}
        </Index>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

### Horizontal

Use the `orientation` prop to display the listbox items horizontally.

```tsx
import { Listbox, createListCollection } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/listbox.module.css'

export const Horizontal = () => {
  const collection = createListCollection({
    items: [
      {
        title: 'Midnight Dreams',
        artist: 'Luna Ray',
        image: 'https://picsum.photos/seed/album1/300/300',
      },
      {
        title: 'Neon Skyline',
        artist: 'The Electric',
        image: 'https://picsum.photos/seed/album2/300/300',
      },
      {
        title: 'Acoustic Sessions',
        artist: 'Sarah Woods',
        image: 'https://picsum.photos/seed/album3/300/300',
      },
      {
        title: 'Urban Echoes',
        artist: 'Metro Collective',
        image: 'https://picsum.photos/seed/album4/300/300',
      },
      {
        title: 'Summer Vibes',
        artist: 'Coastal Waves',
        image: 'https://picsum.photos/seed/album5/300/300',
      },
    ],
    itemToValue: (item) => item.title,
    itemToString: (item) => item.title,
  })

return (
    <Listbox.Root class={styles.Root} collection={collection} orientation="horizontal">
      <Listbox.Label class={styles.Label}>Select Album</Listbox.Label>
      <Listbox.Content class={styles.Content}>
        <Index each={collection.items}>
          {(item) => (
            <Listbox.Item class={styles.ItemCard} item={item()}>
              <Listbox.ItemIndicator class={styles.ItemCardIndicator}>
                <CheckIcon />
              </Listbox.ItemIndicator>
              <img class={styles.ItemCardImage} src={item().image} alt={item().title} />
              <span class={styles.ItemCardTitle}>{item().title}</span>
              <span class={styles.ItemCardArtist}>{item().artist}</span>
            </Listbox.Item>
          )}
        </Index>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

### Grid Layout

Use `createGridCollection` to display items in a grid layout with keyboard navigation support.

```tsx
import { createGridCollection } from '@ark-ui/solid/collection'
import { Listbox } from '@ark-ui/solid/listbox'
import { Index } from 'solid-js'
import styles from 'styles/listbox.module.css'

export const Grid = () => {
  const collection = createGridCollection({
    items: [
      { label: '😀', value: 'grinning' },
      { label: '😍', value: 'heart-eyes' },
      { label: '🥳', value: 'partying' },
      { label: '😎', value: 'sunglasses' },
      { label: '🤩', value: 'star-struck' },
      { label: '😂', value: 'joy' },
      { label: '🥰', value: 'smiling-hearts' },
      { label: '😊', value: 'blush' },
      { label: '🤗', value: 'hugging' },
      { label: '😇', value: 'innocent' },
      { label: '🔥', value: 'fire' },
      { label: '✨', value: 'sparkles' },
      { label: '💯', value: 'hundred' },
      { label: '🎉', value: 'tada' },
      { label: '❤️', value: 'heart' },
      { label: '👍', value: 'thumbs-up' },
      { label: '👏', value: 'clap' },
      { label: '🚀', value: 'rocket' },
      { label: '⭐', value: 'star' },
      { label: '🌈', value: 'rainbow' },
    ],
    columnCount: 5,
  })

return (
    <Listbox.Root class={styles.Root} collection={collection}>
      <Listbox.Label class={styles.Label}>Pick a reaction</Listbox.Label>
      <Listbox.Content class={styles.GridContent}>
        <Index each={collection.items}>
          {(item) => (
            <Listbox.Item class={styles.GridItem} item={item()}>
              <Listbox.ItemText>{item().label}</Listbox.ItemText>
            </Listbox.Item>
          )}
        </Index>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

### Filtering

Use `useListCollection` with the `filter` function to enable filtering of items.

```tsx
import { useListCollection } from '@ark-ui/solid/collection'
import { Listbox } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import field from 'styles/field.module.css'
import styles from 'styles/listbox.module.css'

export const Filtering = () => {
  const { collection, filter } = useListCollection({
    initialItems: [
      { label: 'React', value: 'react' },
      { label: 'Vue', value: 'vue' },
      { label: 'Angular', value: 'angular' },
      { label: 'Svelte', value: 'svelte' },
      { label: 'Solid', value: 'solid' },
      { label: 'Next.js', value: 'nextjs' },
      { label: 'Nuxt.js', value: 'nuxtjs' },
      { label: 'Remix', value: 'remix' },
      { label: 'Gatsby', value: 'gatsby' },
      { label: 'Preact', value: 'preact' },
    ],
    filter: (itemText, filterText) => itemText.toLowerCase().includes(filterText.toLowerCase()),
  })

return (
    <Listbox.Root class={styles.Root} collection={collection()}>
      <Listbox.Label class={styles.Label}>Select Framework</Listbox.Label>
      <Listbox.Input class={field.Input} placeholder="Search frameworks..." onInput={(e) => filter(e.target.value)} />
      <Listbox.Content class={styles.Content}>
        <Index each={collection().items}>
          {(item) => (
            <Listbox.Item class={styles.Item} item={item()}>
              <Listbox.ItemText class={styles.ItemText}>{item().label}</Listbox.ItemText>
              <Listbox.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Listbox.ItemIndicator>
            </Listbox.Item>
          )}
        </Index>
        <Listbox.Empty class={styles.Empty}>No frameworks found</Listbox.Empty>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

### Select All

Use `useListboxContext` to implement a "Select All" functionality that allows users to select or deselect all items at
once.

```tsx
import { Listbox, createListCollection, useListboxContext } from '@ark-ui/solid/listbox'
import { CheckIcon, MinusIcon } from 'lucide-solid'
import { Index, Show } from 'solid-js'
import styles from 'styles/listbox.module.css'

const frameworks = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Vue', value: 'vue' },
    { label: 'Angular', value: 'angular' },
    { label: 'Svelte', value: 'svelte' },
    { label: 'Next.js', value: 'nextjs' },
    { label: 'Nuxt.js', value: 'nuxtjs' },
    { label: 'Remix', value: 'remix' },
    { label: 'Gatsby', value: 'gatsby' },
  ],
})

const SelectAllHeader = () => {
  const listbox = useListboxContext()
  const isAllSelected = () => listbox().value.length === frameworks.items.length
  const isSomeSelected = () => listbox().value.length > 0 && listbox().value.length < frameworks.items.length

const handleSelectAll = () => {
    if (isAllSelected()) {
      listbox().setValue([])
    } else {
      listbox().setValue(frameworks.items.map((item) => item.value))
    }
  }

return (
    <button class={styles.SelectAllHeader} type="button" onClick={handleSelectAll}>
      <span class={styles.SelectAllHeaderIndicator}>
        <Show when={isAllSelected()}>
          <CheckIcon />
        </Show>
        <Show when={isSomeSelected()}>
          <MinusIcon />
        </Show>
      </span>
      <span class={styles.Label}>Select All</span>
    </button>
  )
}

export const SelectAll = () => {
  return (
    <Listbox.Root class={styles.Root} collection={frameworks} selectionMode="multiple">
      <SelectAllHeader />
      <Listbox.Content class={styles.Content}>
        <Index each={frameworks.items}>
          {(item) => (
            <Listbox.Item class={styles.Item} item={item()}>
              <Listbox.ItemText class={styles.ItemText}>{item().label}</Listbox.ItemText>
              <Listbox.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Listbox.ItemIndicator>
            </Listbox.Item>
          )}
        </Index>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

### Value Text

Use `Listbox.ValueText` to display the selected values as a comma-separated string.

```tsx
import { Listbox, createListCollection } from '@ark-ui/solid/listbox'
import { CheckIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/listbox.module.css'

export const ValueText = () => {
  const collection = createListCollection({
    items: [
      { label: 'Red', value: 'red' },
      { label: 'Blue', value: 'blue' },
      { label: 'Green', value: 'green' },
      { label: 'Yellow', value: 'yellow' },
      { label: 'Purple', value: 'purple' },
    ],
  })

return (
    <Listbox.Root class={styles.Root} collection={collection} selectionMode="multiple" defaultValue={['red', 'blue']}>
      <Listbox.Label class={styles.Label}>
        Colors: <Listbox.ValueText class={styles.ValueText} />
      </Listbox.Label>
      <Listbox.Content class={styles.Content}>
        <Index each={collection.items}>
          {(item) => (
            <Listbox.Item class={styles.Item} item={item()}>
              <Listbox.ItemText class={styles.ItemText}>{item().label}</Listbox.ItemText>
              <Listbox.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Listbox.ItemIndicator>
            </Listbox.Item>
          )}
        </Index>
      </Listbox.Content>
    </Listbox.Root>
  )
}
```

## Guides

### Type Safety

The `Listbox.RootComponent` type enables you to create typed wrapper components that maintain full type safety for
collection items.

```tsx
const Listbox: ArkListbox.RootComponent = (props) => {
  return <ArkListbox.Root {...props}>{/* ... */}</ArkListbox.Root>
}
```

Use the wrapper with full type inference on `onValueChange` and other callbacks:

```tsx
const App = () => {
  const collection = createListCollection({
    initialItems: [
      { label: 'React', value: 'react' },
      { label: 'Vue', value: 'vue' },
    ],
  })
  return (
    <Listbox
      collection={collection}
      onValueChange={(e) => {
        // e.items is typed as Array<{ label: string, value: string }>
        console.log(e.items)
      }}
    >
      {/* ... */}
    </Listbox>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`collection`**
Type: `ListCollection<T>`
Required: true
Default Value: `undefined`
Description: The collection of items

**`defaultHighlightedValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial value of the highlighted item when opened.
Use when you don't need to control the highlighted value of the listbox.

**`defaultValue`**
Type: `string[]`
Required: false
Default Value: `[]`
Description: The initial default value of the listbox when rendered.
Use when you don't need to control the value of the listbox.

**`deselectable`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to disallow empty selection

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the listbox is disabled

**`disallowSelectAll`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to disallow selecting all items when `meta+a` is pressed

**`highlightedValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled key of the highlighted item

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  root: string
  content: string
  label: string
  item: (id: string | number) => string
  itemGroup: (id: string | number) => string
  itemGroupLabel: (id: string | number) => string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the listbox. Useful for composition.

**`loopFocus`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to loop the keyboard navigation through the options

**`onHighlightChange`**
Type: `(details: HighlightChangeDetails<T>) => void`
Required: false
Default Value: `undefined`
Description: The callback fired when the highlighted item changes.

**`onSelect`**
Type: `(details: SelectionDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when an item is selected

**`onValueChange`**
Type: `(details: ValueChangeDetails<T>) => void`
Required: false
Default Value: `undefined`
Description: The callback fired when the selected item changes.

**`orientation`**
Type: `'horizontal' | 'vertical'`
Required: false
Default Value: `"vertical"`
Description: The orientation of the listbox.

**`scrollToIndexFn`**
Type: `(details: ScrollToIndexDetails) => void`
Required: false
Default Value: `undefined`
Description: Function to scroll to a specific index

**`selectionMode`**
Type: `SelectionMode`
Required: false
Default Value: `"single"`
Description: How multiple selection should behave in the listbox.

- `single`: The user can select a single item.
- `multiple`: The user can select multiple items without using modifier keys.
- `extended`: The user can select multiple items by using modifier keys.

**`selectOnHighlight`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to select the item when it is highlighted

**`typeahead`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to enable typeahead on the listbox

**`value`**
Type: `string[]`
Required: false
Default Value: `undefined`
Description: The controlled keys of the selected items

#### Data Attributes

**`data-scope`**: listbox
**`data-part`**: root
**`data-orientation`**: The orientation of the listbox
**`data-disabled`**: Present when disabled

### Content

#### Props

#### Data Attributes

**`data-scope`**: listbox
**`data-part`**: content
**`data-activedescendant`**: The id the active descendant of the content
**`data-orientation`**: The orientation of the content
**`data-layout`**: 
**`data-empty`**: Present when the content is empty

### Empty

#### Props

### Input

#### Props

**`autoHighlight`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to automatically highlight the item when typing

**`keyboardPriority`**
Type: `'caret' | 'navigate'`
Required: false
Default Value: `"caret"`
Description: Determines how keyboard conflicts in the input are resolved.
- "caret": keep native text-editing behavior
- "navigate": forward supported keys to listbox navigation

#### Data Attributes

**`data-scope`**: listbox
**`data-part`**: input
**`data-disabled`**: Present when disabled

### ItemGroupLabel

#### Props

### ItemGroup

#### Props

#### Data Attributes

**`data-scope`**: listbox
**`data-part`**: item-group
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the item
**`data-empty`**: Present when the content is empty

### ItemIndicator

#### Props

#### Data Attributes

**`data-scope`**: listbox
**`data-part`**: item-indicator
**`data-state`**: "checked" | "unchecked"

### Item

#### Props

**`highlightOnHover`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to highlight the item on hover

**`item`**
Type: `any`
Required: false
Default Value: `undefined`
Description: The item to render

#### Data Attributes

**`data-scope`**: listbox
**`data-part`**: item
**`data-value`**: The value of the item
**`data-selected`**: Present when selected
**`data-layout`**: 
**`data-state`**: "checked" | "unchecked"
**`data-orientation`**: The orientation of the item
**`data-highlighted`**: Present when highlighted
**`data-disabled`**: Present when disabled

### ItemText

#### Props

#### Data Attributes

**`data-scope`**: listbox
**`data-part`**: item-text
**`data-state`**: "checked" | "unchecked"
**`data-disabled`**: Present when disabled
**`data-highlighted`**: Present when highlighted

### Label

#### Props

#### Data Attributes

**`data-scope`**: listbox
**`data-part`**: label
**`data-disabled`**: Present when disabled

### RootProvider

#### Props

**`value`**
Type: `UseListboxReturn<T>`
Required: true
Default Value: `undefined`
Description: undefined

### ValueText

#### Props

**`placeholder`**
Type: `string`
Required: false
Default Value: `undefined`
Description: Text to display when no value is selected.

#### Data Attributes

**`data-scope`**: listbox
**`data-part`**: value-text
**`data-disabled`**: Present when disabled

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `empty` | `boolean` | Whether the select value is empty |
| `highlightedValue` | `string | null` | The value of the highlighted item |
| `highlightedItem` | `V | null` | The highlighted item |
| `highlightValue` | `(value: string) => void` | Function to highlight a value |
| `highlightFirst` | `VoidFunction` | Function to highlight the first value |
| `highlightLast` | `VoidFunction` | Function to highlight the last value |
| `highlightNext` | `VoidFunction` | Function to highlight the next value |
| `highlightPrevious` | `VoidFunction` | Function to highlight the previous value |
| `clearHighlightedValue` | `VoidFunction` | Function to clear the highlighted value |
| `selectedItems` | `V[]` | The selected items |
| `hasSelectedItems` | `boolean` | Whether there's a selected option |
| `value` | `string[]` | The selected item keys |
| `valueAsString` | `string` | The string representation of the selected items |
| `selectValue` | `(value: string) => void` | Function to select a value |
| `selectAll` | `VoidFunction` | Function to select all values.

# Marquee

## Anatomy

{/*  */}

```tsx
<Marquee.Root>
  <Marquee.Edge />
  <Marquee.Viewport>
    <Marquee.Content>
      <Marquee.Item />
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>
```

## Examples

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const Basic = () => (
  <Marquee.Root class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)
```

### Auto Fill

Use the `autoFill` prop to automatically duplicate content to fill the viewport. The `spacing` prop controls the gap
between duplicated content instances:

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
]

export const AutoFill = () => (
  <Marquee.Root autoFill spacing="2rem" class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)
```

### Reverse

Set the `reverse` prop to reverse the scroll direction:

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

export const Reverse = () => (
  <Marquee.Root reverse class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)
```

### Vertical

Set `side="bottom"` (or `side="top"`) to create a vertical marquee:

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

export const Vertical = () => (
  <Marquee.Root side="bottom" class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)
```

### Speed

Control the animation speed using the `speed` prop, which accepts values in pixels per second:

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

export const Speed = () => (
  <div class="stack">
    <div>
      <h3>Slow (25px/s)</h3>
      <Marquee.Root speed={25} class={styles.Root}>
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>

<div>
      <h3>Normal (50px/s)</h3>
      <Marquee.Root speed={50} class={styles.Root}>
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>

<div>
      <h3>Fast (100px/s)</h3>
      <Marquee.Root speed={100} class={styles.Root}>
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>
  </div>
)
```

### Pause on Interaction

Enable `pauseOnInteraction` to pause the marquee when users hover or focus on it, improving accessibility:

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

export const PauseOnInteraction = () => (
  <Marquee.Root pauseOnInteraction class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)
```

### Programmatic Control

Use the `useMarquee` hook with `Marquee.RootProvider` to access the marquee API and control playback programmatically:

```tsx
import { For } from 'solid-js'
import { Marquee, useMarquee } from '@ark-ui/solid/marquee'
import button from 'styles/button.module.css'
import styles from 'styles/marquee.module.css'

export const ProgrammaticControl = () => {
  const marquee = useMarquee()

return (
    <div class="stack">
      <Marquee.RootProvider value={marquee} class={styles.Root}>
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.RootProvider>

<div class="hstack">
        <button class={button.Root} onClick={() => marquee().pause()}>
          Pause
        </button>
        <button class={button.Root} onClick={() => marquee().resume()}>
          Resume
        </button>
      </div>
    </div>
  )
}
```

> If you're using the `Marquee.RootProvider` component, you don't need to use the `Marquee.Root` component.

### Loops

Set the `loopCount` prop to run the marquee a specific number of times. Use `onLoopComplete` to track each loop
iteration and `onComplete` to know when all loops finish:

```tsx
import { For, createSignal } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

export const FiniteLoops = () => {
  const [loopCount, setLoopCount] = createSignal(0)
  const [completedCount, setCompletedCount] = createSignal(0)

return (
    <div class="stack">
      <Marquee.Root
        loopCount={3}
        onLoopComplete={() => setLoopCount((prev) => prev + 1)}
        onComplete={() => setCompletedCount((prev) => prev + 1)}
        class={styles.Root}
      >
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>

<div>
        <p>Loop completed: {loopCount()} times</p>
        <p>Animation completed: {completedCount()} times</p>
      </div>
    </div>
  )
}
```

### Edges

Add `Marquee.Edge` components to create fade effects at the start and end of the scrolling area:

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

export const WithEdges = () => (
  <Marquee.Root class={styles.Root}>
    <Marquee.Edge side="start" class={styles.Edge} />
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
    <Marquee.Edge side="end" class={styles.Edge} />
  </Marquee.Root>
)
```

## Guides

### Content Animation

The Marquee component requires CSS keyframe animations to function properly. You'll need to define animations for both
horizontal and vertical scrolling:

```css
@keyframes marqueeX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--marquee-translate));
  }
}

@keyframes marqueeY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--marquee-translate));
  }
}
```

The component automatically applies the appropriate animation (`marqueeX` or `marqueeY`) based on the scroll direction
and uses the `--marquee-translate` CSS variable for seamless looping.

You can target specific parts of the marquee using `data-part` attributes for custom styling:

- `[data-part="root"]` - The root container
- `[data-part="viewport"]` - The scrolling viewport
- `[data-part="content"]` - The content wrapper (receives animation)
- `[data-part="item"]` - Individual marquee items
- `[data-part="edge"]` - Edge gradient overlays

### Best Practices

- **Enable pause-on-interaction**: Use `pauseOnInteraction` to allow users to pause animations on hover or focus,
  improving accessibility and readability
- **Use descriptive labels**: Provide meaningful `aria-label` values that describe the marquee content (e.g., "Partner
  logos", "Latest announcements")
- **Avoid for critical information**: Don't use marquees for essential content that users must read, as continuously
  moving text can be difficult to process. Consider static displays for important information

## API Reference

### Props

### Root

#### Props

**`autoFill`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to automatically duplicate content to fill the container.

**`defaultPaused`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether the marquee is paused by default.

**`delay`**
Type: `number`
Required: false
Default Value: `0`
Description: The delay before the animation starts (in seconds).

**`ids`**
Type: `Partial<{ root: string; viewport: string; content: (index: number) => string }>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the marquee. Useful for composition.

**`loopCount`**
Type: `number`
Required: false
Default Value: `0`
Description: The number of times to loop the animation (0 = infinite).

**`onComplete`**
Type: `() => void`
Required: false
Default Value: `undefined`
Description: Function called when the marquee completes all loops and stops.
Only fires for finite loops (loopCount > 0).

**`onLoopComplete`**
Type: `() => void`
Required: false
Default Value: `undefined`
Description: Function called when the marquee completes one loop iteration.

**`onPauseChange`**
Type: `(details: PauseStatusDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the pause status changes.

**`paused`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the marquee is paused.

**`pauseOnInteraction`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to pause the marquee on user interaction (hover, focus).

**`reverse`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to reverse the animation direction.

**`side`**
Type: `Side`
Required: false
Default Value: `"start"`
Description: The side/direction the marquee scrolls towards.

**`spacing`**
Type: `string`
Required: false
Default Value: `"1rem"`
Description: The spacing between marquee items.

**`speed`**
Type: `number`
Required: false
Default Value: `50`
Description: The speed of the marquee animation in pixels per second.

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: The localized messages to use.

#### Data Attributes

**`data-scope`**: marquee
**`data-part`**: root
**`data-state`**: "paused" | "idle"
**`data-orientation`**: The orientation of the marquee
**`data-paused`**: Present when paused

### Content

#### Props

#### Data Attributes

**`data-scope`**: marquee
**`data-part`**: 
**`data-index`**: The index of the item
**`data-orientation`**: The orientation of the content
**`data-side`**: The side of the trigger that the content is positioned on
**`data-reverse`**: 
**`data-clone`**:

### Edge

#### Props

**`side`**
Type: `Side`
Required: true
Default Value: `undefined`
Description: The side where the edge gradient should appear.

#### Data Attributes

**`data-scope`**: marquee
**`data-part`**: 
**`data-side`**: The side of the trigger that the edge is positioned on
**`data-orientation`**: The orientation of the edge

### Item

#### Props

### RootProvider

#### Props

**`value`**
Type: `UseMarqueeReturn`
Required: true
Default Value: `undefined`
Description: undefined

### Viewport

#### Props

#### Data Attributes

**`data-scope`**: marquee
**`data-part`**: 
**`data-orientation`**: The orientation of the viewport
**`data-side`**: The side of the trigger that the viewport is positioned on

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `paused` | `boolean` | Whether the marquee is currently paused. |
| `orientation` | `"horizontal" | "vertical"` | The current orientation of the marquee. |
| `side` | `Side` | The current side/direction of the marquee. |
| `multiplier` | `number` | The multiplier for auto-fill. Indicates how many times to duplicate content.
When autoFill is enabled and content is smaller than container, this returns
the number of additional copies needed. Otherwise returns 1. |
| `contentCount` | `number` | The total number of content elements to render (original + clones).
Use this value when rendering your content in a loop. |
| `pause` | `VoidFunction` | Pause the marquee animation. |
| `resume` | `VoidFunction` | Resume the marquee animation. |
| `togglePause` | `VoidFunction` | Toggle the pause state. |
| `restart` | `VoidFunction` | Restart the marquee animation from the beginning. |

# Menu

## Anatomy

```tsx
<Menu.Root>
  <Menu.Trigger>
    <Menu.Indicator />
  </Menu.Trigger>
  <Menu.Positioner>
    <Menu.Content>
      <Menu.Arrow>
        <Menu.ArrowTip />
      </Menu.Arrow>
      <Menu.Item />
      <Menu.ItemGroup>
        <Menu.ItemGroupLabel />
        <Menu.Item />
      </Menu.ItemGroup>
      <Menu.Separator />
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>
```

## Examples

```tsx
import { Menu } from '@ark-ui/solid/menu'
import { ChevronDownIcon } from 'lucide-solid'
import styles from 'styles/menu.module.css'

export const Basic = () => (
  <Menu.Root>
    <Menu.Trigger class={styles.Trigger}>
      File
      <Menu.Indicator class={styles.Indicator}>
        <ChevronDownIcon />
      </Menu.Indicator>
    </Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content class={styles.Content}>
        <Menu.Arrow class={styles.Arrow}>
          <Menu.ArrowTip class={styles.ArrowTip} />
        </Menu.Arrow>
        <Menu.Item class={styles.Item} value="new-file">
          New File
        </Menu.Item>
        <Menu.Item class={styles.Item} value="open">
          Open...
        </Menu.Item>
        <Menu.Item class={styles.Item} value="save">
          Save
        </Menu.Item>
        <Menu.Item class={styles.Item} value="save-as">
          Save As...
        </Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
)
```

### Item Selection

Use `onSelect` to handle item selection. The callback receives the item's `id`.

```tsx
import { Menu } from '@ark-ui/solid/menu'
import { ChevronDownIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/menu.module.css'

export const Controlled = () => {
  const [open, setOpen] = createSignal(false)

return (
    <div class="stack">
      <button type="button" class={button.Root} onClick={() => setOpen(!open())}>
        Toggle
      </button>
      <Menu.Root open={open()} onOpenChange={(e) => setOpen(e.open)}>
        <Menu.Trigger class={styles.Trigger}>
          Actions
          <Menu.Indicator class={styles.Indicator}>
            <ChevronDownIcon />
          </Menu.Indicator>
        </Menu.Trigger>
        <Menu.Positioner>
          <Menu.Content class={styles.Content}>
            <Menu.Item class={styles.Item} value="edit">
              Edit
            </Menu.Item>
            <Menu.Item class={styles.Item} value="duplicate">
              Duplicate
            </Menu.Item>
            <Menu.Item class={styles.Item} value="archive">
              Archive
            </Menu.Item>
            <Menu.Item class={styles.Item} value="delete">
              Delete
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.Root>
    </div>
  )
}
```

### Root Provider

An alternative way to control the menu is to use the `RootProvider` component and the `useMenu` hook. This way you can
access the state and methods from outside the component.

```tsx
import { Menu, useMenu } from '@ark-ui/solid/menu'
import { ChevronDownIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/menu.module.css'

export const RootProvider = () => {
  const menu = useMenu()

return (
    <div class="stack">
      <button class={button.Root} onClick={() => menu.api().setHighlightedValue('copy')}>
        Highlight Copy
      </button>
      <Menu.RootProvider value={menu}>
        <Menu.Trigger class={styles.Trigger}>
          Edit
          <Menu.Indicator class={styles.Indicator}>
            <ChevronDownIcon />
          </Menu.Indicator>
        </Menu.Trigger>
        <Menu.Positioner>
          <Menu.Content class={styles.Content}>
            <Menu.Item class={styles.Item} value="cut">
              Cut
            </Menu.Item>
            <Menu.Item class={styles.Item} value="copy">
              Copy
            </Menu.Item>
            <Menu.Item class={styles.Item} value="paste">
              Paste
            </Menu.Item>
            <Menu.Item class={styles.Item} value="delete">
              Delete
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.RootProvider>
    </div>
  )
}
```

### Grouping

Use `Menu.ItemGroup` and `Menu.ItemGroupLabel` to organize related menu items.

```tsx
import { Menu } from '@ark-ui/solid/menu'
import { ChevronDownIcon } from 'lucide-solid'
import styles from 'styles/menu.module.css'

export const Group = () => (
  <Menu.Root>
    <Menu.Trigger class={styles.Trigger}>
      Edit
      <Menu.Indicator class={styles.Indicator}>
        <ChevronDownIcon />
      </Menu.Indicator>
    </Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content class={styles.Content}>
        <Menu.ItemGroup class={styles.ItemGroup}>
          <Menu.ItemGroupLabel class={styles.ItemGroupLabel}>Clipboard</Menu.ItemGroupLabel>
          <Menu.Item class={styles.Item} value="cut">
            Cut
          </Menu.Item>
          <Menu.Item class={styles.Item} value="copy">
            Copy
          </Menu.Item>
          <Menu.Item class={styles.Item} value="paste">
            Paste
          </Menu.Item>
        </Menu.ItemGroup>
        <Menu.ItemGroup class={styles.ItemGroup}>
          <Menu.ItemGroupLabel class={styles.ItemGroupLabel}>Selection</Menu.ItemGroupLabel>
          <Menu.Item class={styles.Item} value="select-all">
            Select All
          </Menu.Item>
          <Menu.Item class={styles.Item} value="deselect">
            Deselect
          </Menu.Item>
        </Menu.ItemGroup>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
)
```

### Links

To render menu items as links, use the `asChild` prop to replace the default element with an anchor tag.

```tsx
import { Menu } from '@ark-ui/solid/menu'
import { ChevronDownIcon } from 'lucide-solid'
import styles from 'styles/menu.module.css'

export const Links = () => (
  <Menu.Root>
    <Menu.Trigger class={styles.Trigger}>
      Help
      <Menu.Indicator class={styles.Indicator}>
        <ChevronDownIcon />
      </Menu.Indicator>
    </Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content class={styles.Content}>
        <Menu.Item class={styles.Item} value="docs" asChild={(props) => <a href="https://ark-ui.com" {...props()} />}>
          Documentation
        </Menu.Item>
        <Menu.Item
          class={styles.Item}
          value="github"
          asChild={(props) => <a href="https://github.com/chakra-ui/ark" {...props()} />}
        >
          GitHub
        </Menu.Item>
        <Menu.Separator class={styles.Separator} />
        <Menu.Item
          class={styles.Item}
          value="changelog"
          asChild={(props) => <a href="https://github.com/chakra-ui/ark/releases" {...props()} />}
        >
          Changelog
        </Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
)
```

### Checkbox

To add a checkbox to a menu item, use the `Menu.Checkbox` component.

```tsx
import { Menu } from '@ark-ui/solid/menu'
import { CheckIcon, ChevronDownIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/menu.module.css'

export const CheckboxItems = () => {
  const [showToolbar, setShowToolbar] = createSignal(true)
  const [showStatusBar, setShowStatusBar] = createSignal(false)

return (
    <Menu.Root>
      <Menu.Trigger class={styles.Trigger}>
        View
        <Menu.Indicator class={styles.Indicator}>
          <ChevronDownIcon />
        </Menu.Indicator>
      </Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content class={styles.Content}>
          <Menu.CheckboxItem
            class={styles.CheckboxItem}
            checked={showToolbar()}
            onCheckedChange={setShowToolbar}
            value="toolbar"
          >
            <Menu.ItemIndicator class={styles.ItemIndicator}>
              <CheckIcon />
            </Menu.ItemIndicator>
            <Menu.ItemText class={styles.ItemText}>Show Toolbar</Menu.ItemText>
          </Menu.CheckboxItem>
          <Menu.CheckboxItem
            class={styles.CheckboxItem}
            checked={showStatusBar()}
            onCheckedChange={setShowStatusBar}
            value="status-bar"
          >
            <Menu.ItemIndicator class={styles.ItemIndicator}>
              <CheckIcon />
            </Menu.ItemIndicator>
            <Menu.ItemText class={styles.ItemText}>Show Status Bar</Menu.ItemText>
          </Menu.CheckboxItem>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}
```

### Radio Group

To group radio option items, use the `Menu.RadioGroup` component.

```tsx
import { Menu } from '@ark-ui/solid/menu'
import { CheckIcon, ChevronDownIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/menu.module.css'

export const RadioItems = () => {
  const [sortBy, setSortBy] = createSignal('date')

return (
    <Menu.Root>
      <Menu.Trigger class={styles.Trigger}>
        Sort
        <Menu.Indicator class={styles.Indicator}>
          <ChevronDownIcon />
        </Menu.Indicator>
      </Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content class={styles.Content}>
          <Menu.RadioItemGroup class={styles.ItemGroup} value={sortBy()} onValueChange={(e) => setSortBy(e.value)}>
            <Menu.ItemGroupLabel class={styles.ItemGroupLabel}>Sort By</Menu.ItemGroupLabel>
            <Menu.RadioItem class={styles.RadioItem} value="name">
              <Menu.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Menu.ItemIndicator>
              <Menu.ItemText class={styles.ItemText}>Name</Menu.ItemText>
            </Menu.RadioItem>
            <Menu.RadioItem class={styles.RadioItem} value="date">
              <Menu.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Menu.ItemIndicator>
              <Menu.ItemText class={styles.ItemText}>Date Modified</Menu.ItemText>
            </Menu.RadioItem>
            <Menu.RadioItem class={styles.RadioItem} value="size">
              <Menu.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Menu.ItemIndicator>
              <Menu.ItemText class={styles.ItemText}>Size</Menu.ItemText>
            </Menu.RadioItem>
            <Menu.RadioItem class={styles.RadioItem} value="type">
              <Menu.ItemIndicator class={styles.ItemIndicator}>
                <CheckIcon />
              </Menu.ItemIndicator>
              <Menu.ItemText class={styles.ItemText}>Type</Menu.ItemText>
            </Menu.RadioItem>
          </Menu.RadioItemGroup>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}
```

### Context Menu

To show the menu when a trigger element is right-clicked, use the `Menu.ContextTrigger` component.

Context menus are also opened during a long-press of roughly `700ms` when the pointer is pen or touch.

```tsx
import { Menu } from '@ark-ui/solid/menu'
import styles from 'styles/menu.module.css'

export const Context = () => (
  <Menu.Root>
    <Menu.ContextTrigger class={styles.ContextTrigger}>Right click here</Menu.ContextTrigger>
    <Menu.Positioner>
      <Menu.Content class={styles.Content}>
        <Menu.Item class={styles.Item} value="cut">
          Cut
        </Menu.Item>
        <Menu.Item class={styles.Item} value="copy">
          Copy
        </Menu.Item>
        <Menu.Item class={styles.Item} value="paste">
          Paste
        </Menu.Item>
        <Menu.Separator class={styles.Separator} />
        <Menu.Item class={styles.Item} value="delete">
          Delete
        </Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
)
```

### Nested

To show a nested menu, render another `Menu` component and use the `Menu.TriggerItem` component to open the submenu.

```tsx
import { Menu } from '@ark-ui/solid/menu'
import { ChevronDownIcon } from 'lucide-solid'
import { Portal } from 'solid-js/web'
import styles from 'styles/menu.module.css'

export const Nested = () => (
  <Menu.Root>
    <Menu.Trigger class={styles.Trigger}>
      File
      <Menu.Indicator class={styles.Indicator}>
        <ChevronDownIcon />
      </Menu.Indicator>
    </Menu.Trigger>
    <Portal>
      <Menu.Positioner>
        <Menu.Content class={styles.Content}>
          <Menu.Item class={styles.Item} value="new">
            New File
          </Menu.Item>
          <Menu.Item class={styles.Item} value="open">
            Open...
          </Menu.Item>
          <Menu.Separator class={styles.Separator} />
          <Menu.Root>
            <Menu.TriggerItem class={styles.TriggerItem}>Share</Menu.TriggerItem>
            <Portal>
              <Menu.Positioner>
                <Menu.Content class={styles.Content}>
                  <Menu.Item class={styles.Item} value="email">
                    Email
                  </Menu.Item>
                  <Menu.Item class={styles.Item} value="message">
                    Message
                  </Menu.Item>
                  <Menu.Item class={styles.Item} value="airdrop">
                    AirDrop
                  </Menu.Item>
                </Menu.Content>
              </Menu.Positioner>
            </Portal>
          </Menu.Root>
          <Menu.Root>
            <Menu.TriggerItem class={styles.TriggerItem}>Export</Menu.TriggerItem>
            <Portal>
              <Menu.Positioner>
                <Menu.Content class={styles.Content}>
                  <Menu.Item class={styles.Item} value="pdf">
                    PDF
                  </Menu.Item>
                  <Menu.Item class={styles.Item} value="png">
                    PNG
                  </Menu.Item>
                  <Menu.Item class={styles.Item} value="svg">
                    SVG
                  </Menu.Item>
                </Menu.Content>
              </Menu.Positioner>
            </Portal>
          </Menu.Root>
          <Menu.Separator class={styles.Separator} />
          <Menu.Item class={styles.Item} value="print">
            Print...
          </Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Portal>
  </Menu.Root>
)
```

### Menu in Dialog

When rendering a menu inside a dialog, use `lazyMount` and `unmountOnExit` to ensure proper cleanup when the dialog
closes.

```tsx
import { Dialog } from '@ark-ui/solid/dialog'
import { Menu } from '@ark-ui/solid/menu'
import { ChevronDownIcon, XIcon } from 'lucide-solid'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import dialog from 'styles/dialog.module.css'
import styles from 'styles/menu.module.css'

export const MenuInDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger class={button.Root}>Open Dialog</Dialog.Trigger>
    <Portal>
      <Dialog.Backdrop class={dialog.Backdrop} />
      <Dialog.Positioner class={dialog.Positioner}>
        <Dialog.Content class={dialog.Content}>
          <Dialog.Title class={dialog.Title}>Settings</Dialog.Title>
          <Dialog.Description class={dialog.Description}>Configure your preferences below.</Dialog.Description>
          <Dialog.CloseTrigger class={dialog.CloseTrigger}>
            <XIcon />
          </Dialog.CloseTrigger>
          <div class={dialog.Body}>
            <Menu.Root lazyMount unmountOnExit>
              <Menu.Trigger class={styles.Trigger}>
                Select theme
                <Menu.Indicator class={styles.Indicator}>
                  <ChevronDownIcon />
                </Menu.Indicator>
              </Menu.Trigger>
              <Portal>
                <Menu.Positioner>
                  <Menu.Content class={styles.Content}>
                    <Menu.Arrow class={styles.Arrow}>
                      <Menu.ArrowTip class={styles.ArrowTip} />
                    </Menu.Arrow>
                    <Menu.Item class={styles.Item} value="light">
                      Light
                    </Menu.Item>
                    <Menu.Item class={styles.Item} value="dark">
                      Dark
                    </Menu.Item>
                    <Menu.Item class={styles.Item} value="system">
                      System
                    </Menu.Item>
                  </Menu.Content>
                </Menu.Positioner>
              </Portal>
            </Menu.Root>
          </div>
        </Dialog.Content>
      </Dialog.Positioner>
    </Portal>
  </Dialog.Root>
)
```

### Menu Item Dialog

Open a confirmation dialog from a menu item. This pattern is useful for destructive actions like delete that require
user confirmation.

```tsx
import { Dialog } from '@ark-ui/solid/dialog'
import { Menu } from '@ark-ui/solid/menu'
import { ChevronDownIcon, XIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import dialog from 'styles/dialog.module.css'
import styles from 'styles/menu.module.css'

export const MenuItemDialog = () => {
  const [dialogOpen, setDialogOpen] = createSignal(false)

return (
    <>
      <Menu.Root>
        <Menu.Trigger class={styles.Trigger}>
          Actions
          <Menu.Indicator class={styles.Indicator}>
            <ChevronDownIcon />
          </Menu.Indicator>
        </Menu.Trigger>
        <Portal>
          <Menu.Positioner>
            <Menu.Content class={styles.Content}>
              <Menu.Item class={styles.Item} value="edit">
                Edit
              </Menu.Item>
              <Menu.Item class={styles.Item} value="duplicate">
                Duplicate
              </Menu.Item>
              <Menu.Separator class={styles.Separator} />
              <Menu.Item class={styles.Item} value="delete" onClick={() => setDialogOpen(true)}>
                Delete...
              </Menu.Item>
            </Menu.Content>
          </Menu.Positioner>
        </Portal>
      </Menu.Root>

<Dialog.Root open={dialogOpen()} onOpenChange={(e) => setDialogOpen(e.open)} role="alertdialog">
        <Portal>
          <Dialog.Backdrop class={dialog.Backdrop} />
          <Dialog.Positioner class={dialog.Positioner}>
            <Dialog.Content class={dialog.Content}>
              <Dialog.Title class={dialog.Title}>Confirm Delete</Dialog.Title>
              <Dialog.Description class={dialog.Description}>
                Are you sure you want to delete this item? This action cannot be undone.
              </Dialog.Description>
              <Dialog.CloseTrigger class={dialog.CloseTrigger}>
                <XIcon />
              </Dialog.CloseTrigger>
              <div class={dialog.Actions}>
                <button class={button.Root} onClick={() => setDialogOpen(false)}>
                  Cancel
                </button>
                <button class={button.Root} data-variant="solid" onClick={() => setDialogOpen(false)}>
                  Delete
                </button>
              </div>
            </Dialog.Content>
          </Dialog.Positioner>
        </Portal>
      </Dialog.Root>
    </>
  )
}
```

### Multiple Triggers

Share a single menu across multiple trigger elements. Pass a `value` to each `Menu.Trigger` — the menu repositions to
whichever trigger is activated.

```tsx
import { Menu } from '@ark-ui/solid/menu'
import { Portal } from 'solid-js/web'
import { EllipsisVerticalIcon } from 'lucide-solid'
import { For } from 'solid-js'
import styles from 'styles/menu.module.css'

interface Message {
  id: string
  sender: string
  preview: string
}

const messages: Message[] = [
  { id: '1', sender: 'Alice Johnson', preview: 'Hey, can you review the latest PR?' },
  { id: '2', sender: 'Bob Smith', preview: 'Meeting notes from today are attached.' },
  { id: '3', sender: 'Carol Davis', preview: 'The deploy finished successfully!' },
]

export const MultipleTriggers = () => (
  <Menu.Root positioning={{ placement: 'right-start' }}>
    <div class={styles.MessageList}>
      <For each={messages}>
        {(msg) => (
          <div class={styles.MessageItem}>
            <div class={styles.MessageContent}>
              <div class={styles.MessageSender}>{msg.sender}</div>
              <div class={styles.MessagePreview}>{msg.preview}</div>
            </div>
            <Menu.Trigger value={msg.id} class={styles.MessageAction}>
              <EllipsisVerticalIcon />
            </Menu.Trigger>
          </div>
        )}
      </For>
    </div>
    <Portal>
      <Menu.Positioner class={styles.Positioner}>
        <Menu.Content class={styles.Content}>
          <Menu.Item class={styles.Item} value="reply">
            Reply
          </Menu.Item>
          <Menu.Item class={styles.Item} value="forward">
            Forward
          </Menu.Item>
          <Menu.Item class={styles.Item} value="archive">
            Archive
          </Menu.Item>
          <Menu.Separator class={styles.Separator} />
          <Menu.Item class={styles.Item} value="delete">
            Delete
          </Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Portal>
  </Menu.Root>
)
```

## Guides

### Custom IDs

Ark UI autogenerates ids for menu items internally. Passing a custom `id` prop breaks the internal `getElementById`
functionality used by the component.

```tsx
// ❌ Don't do this
<Menu.Item id="custom-id" value="custom-value">
  Custom Item
</Menu.Item>

// ✅ Do this
<Menu.Item value="custom-value">
  Custom Item
</Menu.Item>
```

### Links

To render a menu item as a link, render the link as the menu item itself using the `asChild` prop, not as a child of the
menu item.

> This pattern ensures the link element receives the correct ARIA attributes and keyboard interactions from the menu
> item.

Here's an example of a reusable `MenuItemLink` component:

```tsx
interface MenuItemLinkProps extends Menu.ItemProps {
  href?: string
  target?: string
}

export const MenuItemLink = (props: MenuItemLinkProps) => {
  const { href, target, children, ...rest } = props
  return (
    <Menu.Item {...rest} asChild>
      <a href={href} target={target}>
        {children}
      </a>
    </Menu.Item>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`anchorPoint`**
Type: `Point`
Required: false
Default Value: `undefined`
Description: The positioning point for the menu. Can be set by the context menu trigger or the button trigger.

**`aria-label`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The accessibility label for the menu

**`closeOnSelect`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to close the menu when an option is selected

**`composite`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the menu is a composed with other composite widgets like a combobox or tabs

**`defaultHighlightedValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial highlighted value of the menu item when rendered.
Use when you don't need to control the highlighted value of the menu item.

**`defaultOpen`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The initial open state of the menu when rendered.
Use when you don't need to control the open state of the menu.

**`defaultTriggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial trigger value when rendered.
Use when you don't need to control the trigger value.

**`highlightedValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled highlighted value of the menu item.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  trigger: string | ((value?: string | undefined) => string)
  contextTrigger: string | ((value?: string | undefined) => string)
  content: string
  groupLabel: (id: string) => string
  group: (id: string) => string
  positioner: string
  arrow: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the menu. Useful for composition.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`loopFocus`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to loop the keyboard navigation.

**`navigate`**
Type: `(details: NavigateDetails) => void`
Required: false
Default Value: `undefined`
Description: Function to navigate to the selected item if it's an anchor element

**`onEscapeKeyDown`**
Type: `(event: KeyboardEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the escape key is pressed

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`onFocusOutside`**
Type: `(event: FocusOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the focus is moved outside the component

**`onHighlightChange`**
Type: `(details: HighlightChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the highlighted menu item changes.

**`onInteractOutside`**
Type: `(event: InteractOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when an interaction happens outside the component

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the menu opens or closes

**`onRequestDismiss`**
Type: `(event: LayerDismissEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when this layer is closed due to a parent layer being closed

**`onSelect`**
Type: `(details: SelectionDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when a menu item is selected.

**`onTriggerValueChange`**
Type: `(details: TriggerValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the trigger value changes.

**`open`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The controlled open state of the menu

**`positioning`**
Type: `PositioningOptions`
Required: false
Default Value: `undefined`
Description: The options used to dynamically position the menu

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`triggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled trigger value

**`typeahead`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the pressing printable characters should trigger typeahead navigation

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Arrow

#### Props

### ArrowTip

#### Props

### CheckboxItem

#### Props

**`checked`**
Type: `boolean`
Required: true
Default Value: `undefined`
Description: Whether the option is checked

**`value`**
Type: `string`
Required: true
Default Value: `undefined`
Description: The value of the option

**`closeOnSelect`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the menu should be closed when the option is selected.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the menu item is disabled

**`onCheckedChange`**
Type: `(checked: boolean) => void`
Required: false
Default Value: `undefined`
Description: Function called when the option state is changed

**`valueText`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The textual value of the option. Used in typeahead navigation of the menu.
If not provided, the text content of the menu item will be used.

### Content

#### Props

#### Data Attributes

**`data-scope`**: menu
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-nested`**: menu
**`data-has-nested`**: menu
**`data-placement`**: The placement of the content
**`data-side`**: The side of the trigger that the content is positioned on

### ContextTrigger

#### Props

#### Data Attributes

**`data-scope`**: menu
**`data-part`**: context-trigger
**`data-value`**: The value of the item
**`data-current`**: Present when current
**`data-state`**: "open" | "closed"

### Indicator

#### Props

#### Data Attributes

**`data-scope`**: menu
**`data-part`**: indicator
**`data-state`**: "open" | "closed"

### ItemGroupLabel

#### Props

### ItemGroup

#### Props

### ItemIndicator

#### Props

#### Data Attributes

**`data-scope`**: menu
**`data-part`**: item-indicator
**`data-disabled`**: Present when disabled
**`data-highlighted`**: Present when highlighted
**`data-state`**: "checked"

### Item

#### Props

**`value`**
Type: `string`
Required: true
Default Value: `undefined`
Description: The unique value of the menu item option.

**`closeOnSelect`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the menu should be closed when the option is selected.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the menu item is disabled

**`onSelect`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: The function to call when the item is selected

#### Data Attributes

**`data-scope`**: menu
**`data-part`**: item
**`data-disabled`**: Present when disabled
**`data-highlighted`**: Present when highlighted
**`data-value`**: The value of the item
**`data-valuetext`**: The human-readable value

### ItemText

#### Props

#### Data Attributes

**`data-scope`**: menu
**`data-part`**: item-text
**`data-disabled`**: Present when disabled
**`data-highlighted`**: Present when highlighted
**`data-state`**: "checked"

### Positioner

#### Props

### RadioItemGroup

#### Props

**`onValueChange`**
Type: `(e: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: undefined

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: undefined

### RadioItem

#### Props

**`value`**
Type: `string`
Required: true
Default Value: `undefined`
Description: The value of the option

**`closeOnSelect`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the menu should be closed when the option is selected.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the menu item is disabled

### RootProvider

#### Props

**`value`**
Type: `UseMenuReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Separator

#### Props

**`asChild`**
Type: `(props: ParentProps<'hr'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### TriggerItem

#### Props

### Trigger

#### Props

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value that identifies this specific trigger

#### Data Attributes

**`data-scope`**: menu
**`data-part`**: trigger
**`data-placement`**: The placement of the trigger
**`data-side`**: The side of the trigger that the trigger is positioned on
**`data-value`**: The value of the item
**`data-current`**: Present when current
**`data-controls`**: 
**`data-state`**: "open" | "closed"

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `open` | `boolean` | Whether the menu is open |
| `setOpen` | `(open: boolean) => void` | Function to open or close the menu |
| `triggerValue` | `string | null` | The trigger value |
| `setTriggerValue` | `(value: string | null) => void` | Function to set the trigger value |
| `highlightedValue` | `string | null` | The id of the currently highlighted menuitem |
| `setHighlightedValue` | `(value: string) => void` | Function to set the highlighted menuitem |
| `setParent` | `(parent: MenuService) => void` | Function to register a parent menu. This is used for submenus |
| `setChild` | `(child: MenuService) => void` | Function to register a child menu. This is used for submenus |
| `reposition` | `(options?: Partial<PositioningOptions>) => void` | Function to reposition the popover |
| `getOptionItemState` | `(props: OptionItemProps) => OptionItemState` | Returns the state of the option item |
| `getItemState` | `(props: ItemProps) => ItemState` | Returns the state of the menu item |
| `addItemListener` | `(props: ItemListenerProps) => VoidFunction | undefined` | Setup the custom event listener for item selection event |

## Accessibility

Complies with the [Menu WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).

### Keyboard Support

**`Space`**
Description: Activates/Selects the highlighted item

**`Enter`**
Description: Activates/Selects the highlighted item

**`ArrowDown`**
Description: Highlights the next item in the menu

**`ArrowUp`**
Description: Highlights the previous item in the menu

**`ArrowRight + ArrowLeft`**
Description: <span>When focus is on trigger, opens or closes the submenu depending on reading direction.</span>

**`Esc`**
Description: Closes the menu and moves focus to the trigger

# Navigation Menu

## Anatomy

```tsx
<NavigationMenu.Root>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger />
      <NavigationMenu.ItemIndicator />
      <NavigationMenu.Content>
        <NavigationMenu.Link />
      </NavigationMenu.Content>
    </NavigationMenu.Item>
    <NavigationMenu.Indicator>
      <NavigationMenu.Arrow />
    </NavigationMenu.Indicator>
  </NavigationMenu.List>
  <NavigationMenu.ViewportPositioner>
    <NavigationMenu.Viewport />
  </NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
```

## Examples

```tsx
import { NavigationMenu } from '@ark-ui/solid/navigation-menu'
import {
  AccessibilityIcon,
  ChevronDownIcon,
  ClapperboardIcon,
  LayersIcon,
  ListChecksIcon,
  PaletteIcon,
  RocketIcon,
  SparklesIcon,
} from 'lucide-solid'
import { For } from 'solid-js'
import { Dynamic } from 'solid-js/web'
import styles from 'styles/navigation-menu.module.css'

const overviewSections = [
  {
    label: 'Get started',
    links: [
      { href: '#quick-start', title: 'Quick Start', description: 'Install and assemble', icon: RocketIcon },
      { href: '#styling', title: 'Styling', description: 'CSS, CSS-in-JS, or utilities', icon: PaletteIcon },
    ],
  },
  {
    label: 'Learn',
    links: [
      {
        href: '#accessibility',
        title: 'Accessibility',
        description: 'Keyboard and ARIA support',
        icon: AccessibilityIcon,
      },
      { href: '#releases', title: 'Releases', description: "What's new in Ark UI", icon: SparklesIcon },
    ],
  },
]

const guideLinks = [
  { href: '#animation', title: 'Animation', description: 'CSS or JavaScript', icon: ClapperboardIcon },
  { href: '#composition', title: 'Composition', description: 'Replace and compose parts', icon: LayersIcon },
  { href: '#forms', title: 'Forms', description: 'Native and library forms', icon: ListChecksIcon },
]

export const Basic = () => (
  <NavigationMenu.Root class={styles.Root}>
    <NavigationMenu.List class={styles.List}>
      <NavigationMenu.Item class={styles.Item} value="overview">
        <NavigationMenu.Trigger class={styles.Trigger}>
          Overview
          <span class={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content class={styles.Content}>
          <div class={styles.MenuColumns}>
            <For each={overviewSections}>
              {(section) => (
                <div class={styles.MenuSection}>
                  <span class={styles.MenuLabel}>{section.label}</span>
                  <For each={section.links}>
                    {(item) => (
                      <NavigationMenu.Link class={styles.LinkCard} href={item.href}>
                        <span class={styles.LinkIcon}>
                          <Dynamic component={item.icon} />
                        </span>
                        <span class={styles.LinkCopy}>
                          <span class={styles.LinkTitle}>{item.title}</span>
                          <span class={styles.LinkDescription}>{item.description}</span>
                        </span>
                      </NavigationMenu.Link>
                    )}
                  </For>
                </div>
              )}
            </For>
          </div>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="guides">
        <NavigationMenu.Trigger class={styles.Trigger}>
          Guides
          <span class={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content class={styles.Content}>
          <div class={styles.MenuSection} data-single="">
            <span class={styles.MenuLabel}>Guides</span>
            <For each={guideLinks}>
              {(item) => (
                <NavigationMenu.Link class={styles.LinkCard} href={item.href}>
                  <span class={styles.LinkIcon}>
                    <Dynamic component={item.icon} />
                  </span>
                  <span class={styles.LinkCopy}>
                    <span class={styles.LinkTitle}>{item.title}</span>
                    <span class={styles.LinkDescription}>{item.description}</span>
                  </span>
                </NavigationMenu.Link>
              )}
            </For>
          </div>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="docs">
        <NavigationMenu.Link class={styles.Link} href="https://ark-ui.com">
          Documentation
        </NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.Root>
)
```

### Viewport

Render `NavigationMenu.Viewport` to share one animated panel across menu items. The viewport resizes as you move between
triggers.

export const Viewport = () => (
  <div class={styles.Frame}>
    <NavigationMenu.Root class={styles.Root}>
      <NavigationMenu.List class={styles.List}>
        <NavigationMenu.Item class={styles.Item} value="overview">
          <NavigationMenu.Trigger class={styles.Trigger}>
            Overview
            <span class={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content class={styles.Content}>
            <div class={styles.MenuColumns}>
              <For each={overviewSections}>
                {(section) => (
                  <div class={styles.MenuSection}>
                    <span class={styles.MenuLabel}>{section.label}</span>
                    <For each={section.links}>
                      {(item) => (
                        <NavigationMenu.Link class={styles.LinkCard} href={item.href}>
                          <span class={styles.LinkIcon}>
                            <Dynamic component={item.icon} />
                          </span>
                          <span class={styles.LinkCopy}>
                            <span class={styles.LinkTitle}>{item.title}</span>
                            <span class={styles.LinkDescription}>{item.description}</span>
                          </span>
                        </NavigationMenu.Link>
                      )}
                    </For>
                  </div>
                )}
              </For>
            </div>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="guides">
          <NavigationMenu.Trigger class={styles.Trigger}>
            Guides
            <span class={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content class={styles.Content}>
            <div class={styles.MenuSection} data-single="">
              <span class={styles.MenuLabel}>Guides</span>
              <For each={guideLinks}>
                {(item) => (
                  <NavigationMenu.Link class={styles.LinkCard} href={item.href}>
                    <span class={styles.LinkIcon}>
                      <Dynamic component={item.icon} />
                    </span>
                    <span class={styles.LinkCopy}>
                      <span class={styles.LinkTitle}>{item.title}</span>
                      <span class={styles.LinkDescription}>{item.description}</span>
                    </span>
                  </NavigationMenu.Link>
                )}
              </For>
            </div>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="docs">
          <NavigationMenu.Link class={styles.Link} href="https://ark-ui.com">
            Documentation
          </NavigationMenu.Link>
        </NavigationMenu.Item>

<NavigationMenu.Indicator class={styles.Indicator}>
          <NavigationMenu.Arrow class={styles.Arrow} />
        </NavigationMenu.Indicator>
      </NavigationMenu.List>

<NavigationMenu.ViewportPositioner class={styles.ViewportPositioner} align="start">
        <NavigationMenu.Viewport class={styles.Viewport} />
      </NavigationMenu.ViewportPositioner>
    </NavigationMenu.Root>
  </div>
)
```

### Current link

Pass the `current` prop to the link that represents the page the user is on. It renders `aria-current="page"` for
assistive technology and a `data-current` attribute for styling.

```tsx
import { NavigationMenu } from '@ark-ui/solid/navigation-menu'
import { ChevronDownIcon } from 'lucide-solid'
import styles from 'styles/navigation-menu.module.css'

export const CurrentLink = () => (
  <NavigationMenu.Root class={styles.Root}>
    <NavigationMenu.List class={styles.List}>
      <NavigationMenu.Item class={styles.Item} value="home">
        <NavigationMenu.Link class={styles.Link} href="#home" current>
          Home
        </NavigationMenu.Link>
      </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="products">
        <NavigationMenu.Trigger class={styles.Trigger}>
          Products
          <span class={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content class={styles.Content}>
          <NavigationMenu.Link class={styles.ContentLink} href="#analytics">
            Analytics
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#commerce">
            Commerce
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#payments">
            Payments
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="about">
        <NavigationMenu.Link class={styles.Link} href="#about">
          About
        </NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.Root>
)
```

### Vertical

Set `orientation="vertical"` on the root to build sidebar-style navigation. Panels open to the side, and the keyboard
model adapts: ArrowUp and ArrowDown move between triggers, ArrowRight enters the open panel.

```tsx
import { NavigationMenu } from '@ark-ui/solid/navigation-menu'
import { ChevronRightIcon } from 'lucide-solid'
import styles from 'styles/navigation-menu-vertical.module.css'

export const Vertical = () => (
  <NavigationMenu.Root class={styles.Root} orientation="vertical">
    <NavigationMenu.List class={styles.List}>
      <NavigationMenu.Item class={styles.Item} value="products">
        <NavigationMenu.Trigger class={styles.Trigger}>
          Products
          <span class={styles.TriggerIcon}>
            <ChevronRightIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content class={styles.Content}>
          <NavigationMenu.Link class={styles.ContentLink} href="#analytics">
            Analytics
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#commerce">
            Commerce
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#payments">
            Payments
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="resources">
        <NavigationMenu.Trigger class={styles.Trigger}>
          Resources
          <span class={styles.TriggerIcon}>
            <ChevronRightIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content class={styles.Content}>
          <NavigationMenu.Link class={styles.ContentLink} href="#blog">
            Blog
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#changelog">
            Changelog
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#support">
            Support
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="docs">
        <NavigationMenu.Link class={styles.Link} href="#docs">
          Documentation
        </NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.Root>
)
```

### Indicator

Render `NavigationMenu.Indicator` inside the list to highlight the active trigger, tab-style. The machine exposes
`--trigger-x` and `--trigger-width` CSS variables, so the indicator slides between triggers with a plain CSS transition.
For a static per-item marker, use `NavigationMenu.ItemIndicator` instead.

```tsx
import { NavigationMenu } from '@ark-ui/solid/navigation-menu'
import { ChevronDownIcon } from 'lucide-solid'
import styles from 'styles/navigation-menu.module.css'

export const Indicator = () => (
  <NavigationMenu.Root class={styles.Root}>
    <NavigationMenu.List class={styles.List}>
      <NavigationMenu.Item class={styles.Item} value="products">
        <NavigationMenu.Trigger class={styles.Trigger}>
          Products
          <span class={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content class={styles.Content}>
          <NavigationMenu.Link class={styles.ContentLink} href="#analytics">
            Analytics
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#commerce">
            Commerce
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#payments">
            Payments
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="resources">
        <NavigationMenu.Trigger class={styles.Trigger}>
          Resources
          <span class={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content class={styles.Content}>
          <NavigationMenu.Link class={styles.ContentLink} href="#blog">
            Blog
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#changelog">
            Changelog
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#support">
            Support
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

<NavigationMenu.Indicator class={styles.Indicator} />
    </NavigationMenu.List>
  </NavigationMenu.Root>
)
```

### Controlled

Use the `value` and `onValueChange` props to control the active menu item.

```tsx
import { NavigationMenu } from '@ark-ui/solid/navigation-menu'
import { ChevronDownIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/navigation-menu.module.css'

export const Controlled = () => {
  const [value, setValue] = createSignal('')

return (
    <NavigationMenu.Root class={styles.Root} value={value()} onValueChange={(e) => setValue(e.value)}>
      <output>value: {value()}</output>
      <NavigationMenu.List class={styles.List}>
        <NavigationMenu.Item class={styles.Item} value="features">
          <NavigationMenu.Trigger class={styles.Trigger}>
            Features
            <span class={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content class={styles.Content}>
            <NavigationMenu.Link class={styles.ContentLink} href="#overview">
              Overview
            </NavigationMenu.Link>
            <NavigationMenu.Link class={styles.ContentLink} href="#features">
              Features
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="docs">
          <NavigationMenu.Trigger class={styles.Trigger}>
            Documentation
            <span class={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content class={styles.Content}>
            <NavigationMenu.Link class={styles.ContentLink} href="#introduction">
              Introduction
            </NavigationMenu.Link>
            <NavigationMenu.Link class={styles.ContentLink} href="#installation">
              Installation
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="about">
          <NavigationMenu.Link class={styles.Link} href="#about">
            About
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.Root>
  )
}
```

### Root Provider

An alternative way to control the navigation menu is to use the `RootProvider` component and the `useNavigationMenu`
hook. This way you can access the state and methods from outside the component.

```tsx
import { NavigationMenu, useNavigationMenu } from '@ark-ui/solid/navigation-menu'
import { ChevronDownIcon } from 'lucide-solid'
import styles from 'styles/navigation-menu.module.css'

export const RootProvider = () => {
  const navigationMenu = useNavigationMenu()

return (
    <NavigationMenu.RootProvider value={navigationMenu} class={styles.Root}>
      <output>value: {navigationMenu().value}</output>
      <NavigationMenu.List class={styles.List}>
        <NavigationMenu.Item class={styles.Item} value="features">
          <NavigationMenu.Trigger class={styles.Trigger}>
            Features
            <span class={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content class={styles.Content}>
            <NavigationMenu.Link class={styles.ContentLink} href="#overview">
              Overview
            </NavigationMenu.Link>
            <NavigationMenu.Link class={styles.ContentLink} href="#features">
              Features
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="about">
          <NavigationMenu.Link class={styles.Link} href="#about">
            About
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.RootProvider>
  )
}
```

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

### Context

Access the navigation menu's state with `NavigationMenu.Context` or the `useNavigationMenuContext` hook:

```tsx
import { NavigationMenu } from '@ark-ui/solid/navigation-menu'
import { ChevronDownIcon } from 'lucide-solid'
import styles from 'styles/navigation-menu.module.css'

export const Context = () => (
  <NavigationMenu.Root class={styles.Root}>
    <NavigationMenu.Context>{(api) => <output>value: {api().value || 'none'}</output>}</NavigationMenu.Context>
    <NavigationMenu.List class={styles.List}>
      <NavigationMenu.Item class={styles.Item} value="features">
        <NavigationMenu.Trigger class={styles.Trigger}>
          Features
          <span class={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content class={styles.Content}>
          <NavigationMenu.Link class={styles.ContentLink} href="#overview">
            Overview
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#features">
            Features
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

<NavigationMenu.Item class={styles.Item} value="docs">
        <NavigationMenu.Trigger class={styles.Trigger}>
          Documentation
          <span class={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content class={styles.Content}>
          <NavigationMenu.Link class={styles.ContentLink} href="#introduction">
            Introduction
          </NavigationMenu.Link>
          <NavigationMenu.Link class={styles.ContentLink} href="#installation">
            Installation
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

## Guides

### Custom links

Use the `asChild` prop to render `NavigationMenu.Link` as your framework's link component for client-side routing.

```tsx
import { Link as RouterLink } from 'react-router-dom'
import { NavigationMenu } from '@ark-ui/<framework>/navigation-menu'

export const MenuLink = (props: NavigationMenu.LinkProps) => {
  return (
    <NavigationMenu.Link {...props} asChild>
      <RouterLink to={props.href ?? '#'}>{props.children}</RouterLink>
    </NavigationMenu.Link>
  )
}
```

### Viewport size

The following CSS variables are exposed on `NavigationMenu.Root` and `NavigationMenu.Viewport`:

```css
/* size and position of the active trigger */
--trigger-width: <pixel-value>;
--trigger-height: <pixel-value>;
--trigger-x: <pixel-value>;
--trigger-y: <pixel-value>;

/* size and position of the active content */
--viewport-width: <pixel-value>;
--viewport-height: <pixel-value>;
--viewport-x: <pixel-value>;
--viewport-y: <pixel-value>;
```

Use `--viewport-width` and `--viewport-height` to animate the shared panel as the active item changes:

```css
[data-scope='navigation-menu'][data-part='viewport'] {
  width: var(--viewport-width);
  height: var(--viewport-height);
  transition:
    width 250ms ease,
    height 250ms ease;
}
```

### Large menus

When menu content is taller than the viewport, constrain the panel and scroll the content:

```css
[data-scope='navigation-menu'][data-part='viewport'] {
  max-height: min(var(--viewport-height), 70vh);
}

[data-scope='navigation-menu'][data-part='content'] {
  max-height: 70vh;
  overflow-y: auto;
}
```

## API Reference

### Props

### Root

#### Props

**`asChild`**
Type: `(props: ParentProps<'nav'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`closeDelay`**
Type: `number`
Required: false
Default Value: `300`
Description: The delay before the menu closes

**`defaultValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The default value of the navigation menu.
Use when you don't want to control the value of the menu.

**`disableClickTrigger`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to disable the click trigger

**`disableHoverTrigger`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to disable the hover trigger

**`disablePointerLeaveClose`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to disable the pointer leave close

**`ids`**
Type: `Partial<{
  root: string
  list: string
  item: string
  trigger: (value: string) => string
  content: (value: string) => string
  viewport: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the machine.

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the value of the menu changes

**`openDelay`**
Type: `number`
Required: false
Default Value: `200`
Description: The delay before the menu opens

**`orientation`**
Type: `'horizontal' | 'vertical'`
Required: false
Default Value: `"horizontal"`
Description: The orientation of the element.

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: Specifies the localized strings that identifies the accessibility elements and their states

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled value of the navigation menu

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: root
**`data-orientation`**: The orientation of the navigation-menu

### Arrow

#### Props

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: arrow
**`data-orientation`**: The orientation of the arrow

### Content

#### Props

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value of the item this content belongs to

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the content
**`data-value`**: The value of the item

### Indicator

#### Props

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: indicator
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the indicator

### ItemIndicator

#### Props

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: item-indicator
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the item
**`data-value`**: The value of the item

### Item

#### Props

**`value`**
Type: `string`
Required: true
Default Value: `undefined`
Description: The value of the item

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the item is disabled

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: item
**`data-value`**: The value of the item
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the item
**`data-disabled`**: Present when disabled

### Link

#### Props

**`asChild`**
Type: `(props: ParentProps<'a'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`closeOnClick`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to close the navigation menu when the link is clicked.

**`current`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the link is the current link

**`onSelect`**
Type: `(event: CustomEvent<any>) => void`
Required: false
Default Value: `undefined`
Description: Function called when the link is selected

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value of the item this link belongs to

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: link
**`data-value`**: The value of the item
**`data-current`**: Present when current

### List

#### Props

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: list
**`data-orientation`**: The orientation of the list

### RootProvider

#### Props

**`value`**
Type: `UseNavigationMenuReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Trigger

#### Props

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the item is disabled

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: trigger
**`data-trigger-proxy-id`**: 
**`data-value`**: The value of the item
**`data-state`**: "open" | "closed"
**`data-disabled`**: Present when disabled

### ViewportPositioner

#### Props

**`align`**
Type: `'start' | 'center' | 'end'`
Required: false
Default Value: `undefined`
Description: Placement of the viewport for css variables `(--viewport-x, --viewport-y)`.

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: viewport-positioner
**`data-orientation`**: The orientation of the viewportpositioner
**`data-align`**:

### Viewport

#### Props

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: viewport
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the viewport
**`data-align`**:

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `string | null` | The current value of the menu |
| `setValue` | `(value: string) => void` | Sets the value of the menu |
| `open` | `boolean` | Whether the menu is open |
| `isViewportRendered` | `boolean` | Whether the viewport is rendered |
| `getViewportNode` | `() => HTMLElement | null` | Gets the viewport node element |
| `orientation` | `Orientation` | The orientation of the menu |
| `reposition` | `VoidFunction` | Function to reposition the viewport |

## Accessibility

Complies with the [Navigation Menubar WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).

### Keyboard Support

**`ArrowDown`**
Description: When focus is on trigger (vertical orientation), moves focus to the next trigger.

**`ArrowUp`**
Description: When focus is on trigger (vertical orientation), moves focus to the previous trigger.

**`ArrowRight`**
Description: <span>When focus is on trigger (horizontal orientation), moves focus to the next trigger.<br />When focus is on content, moves focus to the next link.</span>

**`ArrowLeft`**
Description: <span>When focus is on trigger (horizontal orientation), moves focus to the previous trigger.<br />When focus is on content, moves focus to the previous link.</span>

**`Home`**
Description: <span>When focus is on trigger, moves focus to the first trigger.<br />When focus is on content, moves focus to the first link.</span>

**`End`**
Description: <span>When focus is on trigger, moves focus to the last trigger.<br />When focus is on content, moves focus to the last link.</span>

# Number Input

## Anatomy

```tsx
<NumberInput.Root>
  <NumberInput.Label />
  <NumberInput.Scrubber />
  <NumberInput.Control>
    <NumberInput.Input />
    <NumberInput.IncrementTrigger />
    <NumberInput.DecrementTrigger />
  </NumberInput.Control>
</NumberInput.Root>
```

## Examples

```tsx
import { NumberInput } from '@ark-ui/solid/number-input'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import styles from 'styles/number-input.module.css'

export const Basic = () => (
  <NumberInput.Root class={styles.Root}>
    <NumberInput.Label class={styles.Label}>Label</NumberInput.Label>
    <NumberInput.Control class={styles.Control}>
      <NumberInput.Input class={styles.Input} />
      <div class={styles.TriggerGroup}>
        <NumberInput.IncrementTrigger class={styles.IncrementTrigger}>
          <ChevronUpIcon />
        </NumberInput.IncrementTrigger>
        <NumberInput.DecrementTrigger class={styles.DecrementTrigger}>
          <ChevronDownIcon />
        </NumberInput.DecrementTrigger>
      </div>
    </NumberInput.Control>
  </NumberInput.Root>
)
```

### Min and Max

Pass the `min` prop or `max` prop to set an upper and lower limit for the input. By default, the input will restrict the
value to stay within the specified range.

```tsx
import { NumberInput } from '@ark-ui/solid/number-input'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import styles from 'styles/number-input.module.css'

export const MinMax = () => (
  <NumberInput.Root class={styles.Root} min={0} max={10}>
    <NumberInput.Label class={styles.Label}>Label</NumberInput.Label>
    <NumberInput.Control class={styles.Control}>
      <NumberInput.Input class={styles.Input} />
      <div class={styles.TriggerGroup}>
        <NumberInput.IncrementTrigger class={styles.IncrementTrigger}>
          <ChevronUpIcon />
        </NumberInput.IncrementTrigger>
        <NumberInput.DecrementTrigger class={styles.DecrementTrigger}>
          <ChevronDownIcon />
        </NumberInput.DecrementTrigger>
      </div>
    </NumberInput.Control>
  </NumberInput.Root>
)
```

> To allow values outside the min/max range, set `clampValueOnBlur` to `false`.

### Precision

In some cases, you might need the value to be rounded to specific decimal points. Set the `formatOptions` and provide
`Intl.NumberFormatOptions` such as `maximumFractionDigits` or `minimumFractionDigits`.

```tsx
import { NumberInput } from '@ark-ui/solid/number-input'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import styles from 'styles/number-input.module.css'

export const FractionDigits = () => (
  <NumberInput.Root
    class={styles.Root}
    formatOptions={{ minimumFractionDigits: 2, maximumFractionDigits: 3 }}
    defaultValue="1.00"
  >
    <NumberInput.Label class={styles.Label}>Label</NumberInput.Label>
    <NumberInput.Control class={styles.Control}>
      <NumberInput.Input class={styles.Input} />
      <div class={styles.TriggerGroup}>
        <NumberInput.IncrementTrigger class={styles.IncrementTrigger}>
          <ChevronUpIcon />
        </NumberInput.IncrementTrigger>
        <NumberInput.DecrementTrigger class={styles.DecrementTrigger}>
          <ChevronDownIcon />
        </NumberInput.DecrementTrigger>
      </div>
    </NumberInput.Control>
  </NumberInput.Root>
)
```

### Scrubbing

The NumberInput supports the scrubber interaction pattern. To use this pattern, render the `NumberInput.Scrubber`
component. It uses the Pointer lock API and tracks the pointer movement. It also renders a virtual cursor which mimics
the real cursor's pointer.

```tsx
import { NumberInput } from '@ark-ui/solid/number-input'
import { ArrowLeftRightIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import styles from 'styles/number-input.module.css'

export const Scrubber = () => (
  <NumberInput.Root class={styles.Root} defaultValue="32">
    <NumberInput.Label class={styles.Label}>Label</NumberInput.Label>
    <NumberInput.Control class={styles.Control}>
      <NumberInput.Scrubber class={styles.Scrubber}>
        <ArrowLeftRightIcon />
      </NumberInput.Scrubber>
      <NumberInput.Input class={styles.Input} data-has-scrubber />
      <div class={styles.TriggerGroup}>
        <NumberInput.IncrementTrigger class={styles.IncrementTrigger}>
          <ChevronUpIcon />
        </NumberInput.IncrementTrigger>
        <NumberInput.DecrementTrigger class={styles.DecrementTrigger}>
          <ChevronDownIcon />
        </NumberInput.DecrementTrigger>
      </div>
    </NumberInput.Control>
  </NumberInput.Root>
)
```

### Mouse Wheel

The NumberInput exposes a way to increment/decrement the value using the mouse wheel event. To activate this, set the
`allowMouseWheel` prop to `true`.

```tsx
import { NumberInput } from '@ark-ui/solid/number-input'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import styles from 'styles/number-input.module.css'

export const MouseWheel = () => (
  <NumberInput.Root class={styles.Root} allowMouseWheel>
    <NumberInput.Label class={styles.Label}>Label</NumberInput.Label>
    <NumberInput.Control class={styles.Control}>
      <NumberInput.Input class={styles.Input} />
      <div class={styles.TriggerGroup}>
        <NumberInput.IncrementTrigger class={styles.IncrementTrigger}>
          <ChevronUpIcon />
        </NumberInput.IncrementTrigger>
        <NumberInput.DecrementTrigger class={styles.DecrementTrigger}>
          <ChevronDownIcon />
        </NumberInput.DecrementTrigger>
      </div>
    </NumberInput.Control>
  </NumberInput.Root>
)
```

### Formatting

To apply custom formatting to the input's value, set the `formatOptions` and provide `Intl.NumberFormatOptions` such as
`style` and `currency`.

```tsx
import { NumberInput } from '@ark-ui/solid/number-input'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import styles from 'styles/number-input.module.css'

export const Formatting = () => (
  <NumberInput.Root
    class={styles.Root}
    formatOptions={{
      style: 'currency',
      currency: 'USD',
    }}
  >
    <NumberInput.Label class={styles.Label}>Label</NumberInput.Label>
    <NumberInput.Control class={styles.Control}>
      <NumberInput.Input class={styles.Input} />
      <div class={styles.TriggerGroup}>
        <NumberInput.IncrementTrigger class={styles.IncrementTrigger}>
          <ChevronUpIcon />
        </NumberInput.IncrementTrigger>
        <NumberInput.DecrementTrigger class={styles.DecrementTrigger}>
          <ChevronDownIcon />
        </NumberInput.DecrementTrigger>
      </div>
    </NumberInput.Control>
  </NumberInput.Root>
)
```

### Field

The `Field` component helps manage form-related state and accessibility attributes of a number input. It includes
handling ARIA labels, helper text, and error text to ensure proper accessibility.

```tsx
import { Field } from '@ark-ui/solid/field'
import { NumberInput } from '@ark-ui/solid/number-input'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import field from 'styles/field.module.css'
import styles from 'styles/number-input.module.css'

export const WithField = () => (
  <Field.Root class={field.Root}>
    <NumberInput.Root class={styles.Root}>
      <NumberInput.Label class={styles.Label}>Label</NumberInput.Label>
      <NumberInput.Control class={styles.Control}>
        <NumberInput.Input class={styles.Input} />
        <div class={styles.TriggerGroup}>
          <NumberInput.IncrementTrigger class={styles.IncrementTrigger}>
            <ChevronUpIcon />
          </NumberInput.IncrementTrigger>
          <NumberInput.DecrementTrigger class={styles.DecrementTrigger}>
            <ChevronDownIcon />
          </NumberInput.DecrementTrigger>
        </div>
      </NumberInput.Control>
    </NumberInput.Root>
    <Field.HelperText class={field.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText class={field.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Root Provider

An alternative way to control the number input is to use the `RootProvider` component and the `useNumberInput` hook.
This way you can access the state and methods from outside the component.

```tsx
import { NumberInput, useNumberInput } from '@ark-ui/solid/number-input'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import styles from 'styles/number-input.module.css'

export const RootProvider = () => {
  const numberInput = useNumberInput()

return (
    <div class="stack">
      <output>valueAsNumber: {numberInput().valueAsNumber}</output>
      <NumberInput.RootProvider class={styles.Root} value={numberInput}>
        <NumberInput.Label class={styles.Label}>Label</NumberInput.Label>
        <NumberInput.Control class={styles.Control}>
          <NumberInput.Input class={styles.Input} />
          <div class={styles.TriggerGroup}>
            <NumberInput.IncrementTrigger class={styles.IncrementTrigger}>
              <ChevronUpIcon />
            </NumberInput.IncrementTrigger>
            <NumberInput.DecrementTrigger class={styles.DecrementTrigger}>
              <ChevronDownIcon />
            </NumberInput.DecrementTrigger>
          </div>
        </NumberInput.Control>
      </NumberInput.RootProvider>
    </div>
  )
}
```

## Guides

### Scrubber

The `NumberInput.Scrubber` component provides an interactive scrub area that allows users to drag to change the input
value. It renders as a `<div>` element and displays a custom cursor element during scrubbing interactions.

This component utilizes the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) for
smooth dragging interactions.

> **Note:** Browsers may show a notification when the Pointer Lock API is activated. The scrubber is automatically
> disabled in Safari to prevent layout shifts.

### Controlled

When controlling the NumberInput component, it's recommended to use string values instead of converting to numbers. This
is especially important when using `formatOptions` for currency or locale-specific formatting.

```tsx
const [value, setValue] = useState('0')

<NumberInput.Root value={value} onValueChange={(details) => setValue(details.value)}>
  {/* ... */}
</NumberInput.Root>
```

Converting values to numbers can cause issues with locale-specific formatting, particularly for currencies that use
different decimal and thousands separators (e.g., `1.523,30` vs `1,523.30`). By keeping values as strings, you preserve
the correct formatting and avoid parsing issues.

If you need to submit a numeric value in your form, use a hidden input that reads `valueAsNumber` from
`NumberInput.Context`:

```tsx
<NumberInput.Root value={value} onValueChange={(details) => setValue(details.value)}>
  <NumberInput.Input />
  <NumberInput.Context>
    {(context) => <input type="hidden" name="amount" value={context.valueAsNumber} />}
  </NumberInput.Context>
</NumberInput.Root>
```

## API Reference

### Props

### Root

#### Props

**`allowMouseWheel`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to allow mouse wheel to change the value

**`allowOverflow`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to allow the value overflow the min/max range

**`clampValueOnBlur`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to clamp the value when the input loses focus (blur)

**`defaultValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial value of the input when rendered.
Use when you don't need to control the value of the input.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the number input is disabled.

**`focusInputOnChange`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to focus input when the value changes

**`form`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The associate form of the input element.

**`formatOptions`**
Type: `NumberFormatOptions`
Required: false
Default Value: `undefined`
Description: The options to pass to the `Intl.NumberFormat` constructor

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  root: string
  label: string
  input: string
  incrementTrigger: string
  decrementTrigger: string
  scrubber: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the number input. Useful for composition.

**`inputMode`**
Type: `InputMode`
Required: false
Default Value: `"decimal"`
Description: Hints at the type of data that might be entered by the user. It also determines
the type of keyboard shown to the user on mobile devices

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the number input value is invalid.

**`largeStep`**
Type: `number`
Required: false
Default Value: `10 * step`
Description: The amount to increment or decrement the value by when the `Shift` key is held.

**`locale`**
Type: `string`
Required: false
Default Value: `"en-US"`
Description: The current locale. Based on the BCP 47 definition.

**`max`**
Type: `number`
Required: false
Default Value: `Number.MAX_SAFE_INTEGER`
Description: The maximum value of the number input

**`min`**
Type: `number`
Required: false
Default Value: `Number.MIN_SAFE_INTEGER`
Description: The minimum value of the number input

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name attribute of the number input. Useful for form submission.

**`onFocusChange`**
Type: `(details: FocusChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function invoked when the number input is focused

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function invoked when the value changes

**`onValueCommit`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function invoked when the value is committed (when the input is blurred or the Enter key is pressed)

**`onValueInvalid`**
Type: `(details: ValueInvalidDetails) => void`
Required: false
Default Value: `undefined`
Description: Function invoked when the value overflows or underflows the min/max range

**`pattern`**
Type: `string`
Required: false
Default Value: `"-?[0-9]*(.[0-9]+)?"`
Description: The pattern used to check the <input> element's value against

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the number input is readonly

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the number input is required

**`smallStep`**
Type: `number`
Required: false
Default Value: `step / 10`
Description: The amount to increment or decrement the value by when the `Alt` key is held.

**`spinOnPress`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to spin the value when the increment/decrement button is pressed

**`step`**
Type: `number`
Required: false
Default Value: `1`
Description: The amount to increment or decrement the value by

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: Specifies the localized strings that identifies the accessibility elements and their states

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled value of the input

#### Data Attributes

**`data-scope`**: number-input
**`data-part`**: root
**`data-disabled`**: Present when disabled
**`data-focus`**: Present when focused
**`data-invalid`**: Present when invalid
**`data-scrubbing`**:

### Control

#### Props

#### Data Attributes

**`data-scope`**: number-input
**`data-part`**: control
**`data-focus`**: Present when focused
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-scrubbing`**:

### DecrementTrigger

#### Props

#### Data Attributes

**`data-scope`**: number-input
**`data-part`**: decrement-trigger
**`data-disabled`**: Present when disabled
**`data-scrubbing`**:

### IncrementTrigger

#### Props

#### Data Attributes

**`data-scope`**: number-input
**`data-part`**: increment-trigger
**`data-disabled`**: Present when disabled
**`data-scrubbing`**:

### Input

#### Props

#### Data Attributes

**`data-scope`**: number-input
**`data-part`**: input
**`data-invalid`**: Present when invalid
**`data-disabled`**: Present when disabled
**`data-scrubbing`**:

### Label

#### Props

#### Data Attributes

**`data-scope`**: number-input
**`data-part`**: label
**`data-disabled`**: Present when disabled
**`data-focus`**: Present when focused
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required
**`data-scrubbing`**:

### RootProvider

#### Props

**`value`**
Type: `UseNumberInputReturn`
Required: true
Default Value: `undefined`
Description: undefined

### Scrubber

#### Props

#### Data Attributes

**`data-scope`**: number-input
**`data-part`**: scrubber
**`data-disabled`**: Present when disabled
**`data-scrubbing`**:

### ValueText

#### Props

#### Data Attributes

**`data-scope`**: number-input
**`data-part`**: value-text
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-focus`**: Present when focused
**`data-scrubbing`**:

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `focused` | `boolean` | Whether the input is focused. |
| `invalid` | `boolean` | Whether the input is invalid. |
| `empty` | `boolean` | Whether the input value is empty. |
| `value` | `string` | The formatted value of the input. |
| `valueAsNumber` | `number` | The value of the input as a number. |
| `setValue` | `(value: number) => void` | Function to set the value of the input. |
| `clearValue` | `VoidFunction` | Function to clear the value of the input. |
| `increment` | `VoidFunction` | Function to increment the value of the input by the step. |
| `decrement` | `VoidFunction` | Function to decrement the value of the input by the step. |
| `setToMax` | `VoidFunction` | Function to set the value of the input to the max. |
| `setToMin` | `VoidFunction` | Function to set the value of the input to the min. |
| `focus` | `VoidFunction` | Function to focus the input. |

## Accessibility

Complies with the [Spinbutton WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).

### Keyboard Support

**`ArrowUp`**
Description: Increments the value of the number input by a predefined step.

**`ArrowDown`**
Description: Decrements the value of the number input by a predefined step.

**`Shift + ArrowUp`**
Description: Increments the value of the number input by the `largeStep` amount.

**`Shift + ArrowDown`**
Description: Decrements the value of the number input by the `largeStep` amount.

**`Alt + ArrowUp`**
Description: Increments the value of the number input by the `smallStep` amount.

**`Alt + ArrowDown`**
Description: Decrements the value of the number input by the `smallStep` amount.

**`Home`**
Description: Sets the value of the number input to its minimum allowed value.

**`End`**
Description: Sets the value of the number input to its maximum allowed value.

**`Enter`**
Description: Submits the value entered in the number input.

# Pagination

## Anatomy

```tsx
<Pagination.Root>
  <Pagination.PrevTrigger />
  <Pagination.Item />
  <Pagination.Ellipsis />
  <Pagination.NextTrigger />
</Pagination.Root>
```

## Examples

```tsx
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid'
import { Pagination } from '@ark-ui/solid/pagination'
import { For } from 'solid-js'
import styles from 'styles/pagination.module.css'

export const Basic = () => (
  <Pagination.Root count={5000} pageSize={10} siblingCount={2} class={styles.Root}>
    <div class={styles.Controls}>
      <Pagination.PrevTrigger class={styles.Trigger}>
        <ChevronLeftIcon />
      </Pagination.PrevTrigger>
      <Pagination.Context>
        {(pagination) => (
          <For each={pagination().pages}>
            {(page, index) =>
              page.type === 'page' ? (
                <Pagination.Item {...page} class={styles.Item}>
                  {page.value}
                </Pagination.Item>
              ) : (
                <Pagination.Ellipsis index={index()} class={styles.Ellipsis}>
                  …
                </Pagination.Ellipsis>
              )
            }
          </For>
        )}
      </Pagination.Context>
      <Pagination.NextTrigger class={styles.Trigger}>
        <ChevronRightIcon />
      </Pagination.NextTrigger>
    </div>
  </Pagination.Root>
)
```

### Controlled

To create a controlled Pagination component, manage the state of the current page using the `page` prop and update it
when the `onPageChange` event handler is called:

```tsx
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid'
import { Pagination } from '@ark-ui/solid/pagination'
import { For, createSignal } from 'solid-js'
import styles from 'styles/pagination.module.css'

export const Controlled = () => {
  const [currentPage, setCurrentPage] = createSignal(1)

return (
    <Pagination.Root
      count={5000}
      pageSize={10}
      siblingCount={2}
      page={currentPage()}
      onPageChange={(details) => setCurrentPage(details.page)}
      class={styles.Root}
    >
      <div class={styles.Controls}>
        <Pagination.PrevTrigger class={styles.Trigger}>
          <ChevronLeftIcon />
        </Pagination.PrevTrigger>
        <Pagination.Context>
          {(pagination) => (
            <For each={pagination().pages}>
              {(page, index) =>
                page.type === 'page' ? (
                  <Pagination.Item {...page} class={styles.Item}>
                    {page.value}
                  </Pagination.Item>
                ) : (
                  <Pagination.Ellipsis index={index()} class={styles.Ellipsis}>
                    …
                  </Pagination.Ellipsis>
                )
              }
            </For>
          )}
        </Pagination.Context>
        <Pagination.NextTrigger class={styles.Trigger}>
          <ChevronRightIcon />
        </Pagination.NextTrigger>
      </div>
    </Pagination.Root>
  )
}
```

### Root Provider

An alternative way to control the pagination is to use the `RootProvider` component and the `usePagination` hook. This
way you can access the state and methods from outside the component.

```tsx
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid'
import { Pagination, usePagination } from '@ark-ui/solid/pagination'
import { For } from 'solid-js'
import styles from 'styles/pagination.module.css'

export const RootProvider = () => {
  const pagination = usePagination({ count: 5000, pageSize: 10, siblingCount: 2 })

return (
    <div class="stack">
      <button class={styles.Trigger} onClick={() => pagination().goToNextPage()}>
        Next Page
      </button>

<Pagination.RootProvider value={pagination} class={styles.Root}>
        <div class={styles.Controls}>
          <Pagination.PrevTrigger class={styles.Trigger}>
            <ChevronLeftIcon />
          </Pagination.PrevTrigger>
          <Pagination.Context>
            {(pagination) => (
              <For each={pagination().pages}>
                {(page, index) =>
                  page.type === 'page' ? (
                    <Pagination.Item {...page} class={styles.Item}>
                      {page.value}
                    </Pagination.Item>
                  ) : (
                    <Pagination.Ellipsis index={index()} class={styles.Ellipsis}>
                      …
                    </Pagination.Ellipsis>
                  )
                }
              </For>
            )}
          </Pagination.Context>
          <Pagination.NextTrigger class={styles.Trigger}>
            <ChevronRightIcon />
          </Pagination.NextTrigger>
        </div>
      </Pagination.RootProvider>
    </div>
  )
}
```

### Customization

You can customize the Pagination component by setting various props such as `dir`, `pageSize`, `siblingCount`, and
`translations`. Here's an example of a customized Pagination:

export const Customized = () => {
  return (
    <Pagination.Root
      count={5000}
      pageSize={20}
      siblingCount={3}
      translations={{
        nextTriggerLabel: 'Next',
        prevTriggerLabel: 'Prev',
        itemLabel: (details) => `Page ${details.page}`,
      }}
      class={styles.Root}
    >
      <div class={styles.Controls}>
        <Pagination.PrevTrigger class={styles.Trigger}>
          <ChevronLeftIcon />
        </Pagination.PrevTrigger>
        <Pagination.Context>
          {(pagination) => (
            <For each={pagination().pages}>
              {(page, index) =>
                page.type === 'page' ? (
                  <Pagination.Item {...page} class={styles.Item}>
                    {page.value}
                  </Pagination.Item>
                ) : (
                  <Pagination.Ellipsis index={index()} class={styles.Ellipsis}>
                    …
                  </Pagination.Ellipsis>
                )
              }
            </For>
          )}
        </Pagination.Context>
        <Pagination.NextTrigger class={styles.Trigger}>
          <ChevronRightIcon />
        </Pagination.NextTrigger>
      </div>
    </Pagination.Root>
  )
}
```

### Context

Access pagination state and methods with `Pagination.Context` or the `usePaginationContext` hook. You get methods like
`setPage`, `setPageSize`, `goToNextPage`, `goToPrevPage`, `goToFirstPage`, `goToLastPage`, as well as properties like
`totalPages` and `pageRange`.

```tsx
import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from 'lucide-solid'
import { Pagination } from '@ark-ui/solid/pagination'
import styles from 'styles/pagination.module.css'

export const Context = () => {
  return (
    <Pagination.Root count={100} pageSize={10} class={styles.Root}>
      <Pagination.Context>
        {(pagination) => (
          <div class={styles.Controls}>
            <button class={styles.Trigger} onClick={() => pagination().goToFirstPage()}>
              <ChevronsLeftIcon />
            </button>
            <button class={styles.Trigger} onClick={() => pagination().goToPrevPage()}>
              <ChevronLeftIcon />
            </button>
            <p class={styles.Text} style={{ 'min-width': '120px', 'text-align': 'center' }}>
              Page {pagination().page} of {pagination().totalPages}
            </p>
            <button class={styles.Trigger} onClick={() => pagination().goToNextPage()}>
              <ChevronRightIcon />
            </button>
            <button class={styles.Trigger} onClick={() => pagination().goToLastPage()}>
              <ChevronsRightIcon />
            </button>
          </div>
        )}
      </Pagination.Context>
    </Pagination.Root>
  )
}
```

### Data Slicing

Use the `slice()` method to paginate actual data arrays. This method automatically slices your data based on the current
page and page size.

const users = [
  { id: 1, name: 'Emma Wilson', email: 'emma@example.com' },
  { id: 2, name: 'Liam Johnson', email: 'liam@example.com' },
  { id: 3, name: 'Olivia Brown', email: 'olivia@example.com' },
  { id: 4, name: 'Noah Davis', email: 'noah@example.com' },
  { id: 5, name: 'Ava Martinez', email: 'ava@example.com' },
  { id: 6, name: 'Ethan Garcia', email: 'ethan@example.com' },
  { id: 7, name: 'Sophia Rodriguez', email: 'sophia@example.com' },
  { id: 8, name: 'Mason Lee', email: 'mason@example.com' },
  { id: 9, name: 'Isabella Walker', email: 'isabella@example.com' },
  { id: 10, name: 'James Hall', email: 'james@example.com' },
  { id: 11, name: 'Mia Allen', email: 'mia@example.com' },
  { id: 12, name: 'Benjamin Young', email: 'benjamin@example.com' },
  { id: 13, name: 'Charlotte King', email: 'charlotte@example.com' },
  { id: 14, name: 'William Wright', email: 'william@example.com' },
  { id: 15, name: 'Amelia Scott', email: 'amelia@example.com' },
  { id: 16, name: 'Henry Green', email: 'henry@example.com' },
  { id: 17, name: 'Harper Adams', email: 'harper@example.com' },
  { id: 18, name: 'Sebastian Baker', email: 'sebastian@example.com' },
  { id: 19, name: 'Evelyn Nelson', email: 'evelyn@example.com' },
  { id: 20, name: 'Jack Carter', email: 'jack@example.com' },
]

export const DataSlicing = () => {
  return (
    <Pagination.Root count={users.length} pageSize={5} class={styles.Root}>
      <Pagination.Context>
        {(pagination) => (
          <>
            <div class={styles.Grid}>
              <For each={pagination().slice(users)}>
                {(user) => (
                  <div class={styles.GridItem}>
                    <span class={styles.GridItemTitle}>{user.name}</span>
                    <span class={styles.GridItemText}>{user.email}</span>
                  </div>
                )}
              </For>
            </div>

<For each={pagination().pages}>
                {(page, index) =>
                  page.type === 'page' ? (
                    <Pagination.Item {...page} class={styles.Item}>
                      {page.value}
                    </Pagination.Item>
                  ) : (
                    <Pagination.Ellipsis index={index()} class={styles.Ellipsis}>
                      …
                    </Pagination.Ellipsis>
                  )
                }
              </For>

<Pagination.NextTrigger class={styles.Trigger}>
                <ChevronRightIcon />
              </Pagination.NextTrigger>
            </div>
          </>
        )}
      </Pagination.Context>
    </Pagination.Root>
  )
}
```

### Page Range

Display the current page range information using the `pageRange` property. This shows which items are currently visible
(e.g., "Showing 1-10 of 100 results").

export const PageRange = () => {
  return (
    <Pagination.Root count={100} pageSize={10} class={styles.Root}>
      <Pagination.Context>
        {(pagination) => (
          <>
            <div class={styles.Controls}>
              <Pagination.PrevTrigger class={styles.Trigger}>
                <ChevronLeftIcon />
              </Pagination.PrevTrigger>

<Pagination.NextTrigger class={styles.Trigger}>
                <ChevronRightIcon />
              </Pagination.NextTrigger>
            </div>

<div class="stack">
              <p class={styles.Text}>
                Showing {pagination().pageRange.start + 1}-{pagination().pageRange.end} of {pagination().count} results
              </p>
              <p class={styles.Text}>
                Page {pagination().page} of {pagination().totalPages}
              </p>
            </div>
          </>
        )}
      </Pagination.Context>
    </Pagination.Root>
  )
}
```

### Page Size

Control the number of items per page dynamically using `setPageSize()`. This example shows how to integrate a native
select element to change the page size.

> **Note:** For uncontrolled behavior, use `defaultPageSize` to set the initial value. For controlled behavior, use
> `pageSize` and `onPageSizeChange` to programmatically manage the page size.

export const PageSizeControl = () => {
  return (
    <Pagination.Root count={100} defaultPageSize={10} class={styles.Root}>
      <Pagination.Context>
        {(pagination) => (
          <>
            <div class="hstack">
              <label class={styles.Text}>Items per page:</label>
              <select
                class={styles.PageSizeSelect}
                value={pagination().pageSize}
                onChange={(e) => pagination().setPageSize(Number(e.target.value))}
              >
                <option value={5}>5</option>
                <option value={10}>10</option>
                <option value={20}>20</option>
                <option value={50}>50</option>
              </select>
            </div>

<Pagination.NextTrigger class={styles.Trigger}>
                <ChevronRightIcon />
              </Pagination.NextTrigger>
            </div>

<p class={styles.Text}>
              Page {pagination().page} of {pagination().totalPages}
            </p>
          </>
        )}
      </Pagination.Context>
    </Pagination.Root>
  )
}
```

### Links

Create pagination with link navigation for better SEO and accessibility. This example shows how to use the pagination
component with anchor links instead of buttons.

export const Link = () => {
  const pagination = usePagination({
    type: 'link',
    count: 100,
    pageSize: 10,
    siblingCount: 2,
    getPageUrl: ({ page }) => `/page=${page}`,
  })

return (
    <Pagination.RootProvider value={pagination} class={styles.Root}>
      <div class={styles.Controls}>
        <a class={styles.Trigger} {...pagination().getPrevTriggerProps()}>
          <ChevronLeftIcon />
        </a>
        <For each={pagination().pages}>
          {(page, index) =>
            page.type === 'page' ? (
              <a class={styles.Item} {...pagination().getItemProps(page)}>
                {page.value}
              </a>
            ) : (
              <span class={styles.Ellipsis} {...pagination().getEllipsisProps({ index: index() })}>
                …
              </span>
            )
          }
        </For>
        <a class={styles.Trigger} {...pagination().getNextTriggerProps()}>
          <ChevronRightIcon />
        </a>
      </div>
    </Pagination.RootProvider>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`boundaryCount`**
Type: `number`
Required: false
Default Value: `1`
Description: Number of pages to show at the beginning and end

**`count`**
Type: `number`
Required: false
Default Value: `undefined`
Description: Total number of data items

**`defaultPage`**
Type: `number`
Required: false
Default Value: `1`
Description: The initial active page when rendered.
Use when you don't need to control the active page of the pagination.

**`defaultPageSize`**
Type: `number`
Required: false
Default Value: `10`
Description: The initial number of data items per page when rendered.
Use when you don't need to control the page size of the pagination.

**`getPageUrl`**
Type: `(details: PageUrlDetails) => string`
Required: false
Default Value: `undefined`
Description: Function to generate href attributes for pagination links.
Only used when `type` is set to "link".

**`ids`**
Type: `Partial<{
  root: string
  ellipsis: (index: number) => string
  firstTrigger: string
  prevTrigger: string
  nextTrigger: string
  lastTrigger: string
  item: (page: number) => string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the accordion. Useful for composition.

**`onPageChange`**
Type: `(details: PageChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Called when the page number is changed

**`onPageSizeChange`**
Type: `(details: PageSizeChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Called when the page size is changed

**`page`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The controlled active page

**`pageSize`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The controlled number of data items per page

**`siblingCount`**
Type: `number`
Required: false
Default Value: `1`
Description: Number of pages to show beside active page

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: Specifies the localized strings that identifies the accessibility elements and their states

**`type`**
Type: `'link' | 'button'`
Required: false
Default Value: `"button"`
Description: The type of the trigger element

### Ellipsis

#### Props

**`index`**
Type: `number`
Required: true
Default Value: `undefined`
Description: undefined

### FirstTrigger

#### Props

#### Data Attributes

**`data-scope`**: pagination
**`data-part`**: first-trigger
**`data-disabled`**: Present when disabled

### Item

#### Props

**`type`**
Type: `'page'`
Required: true
Default Value: `undefined`
Description: undefined

**`value`**
Type: `number`
Required: true
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: pagination
**`data-part`**: item
**`data-index`**: The index of the item
**`data-selected`**: Present when selected

### LastTrigger

#### Props

#### Data Attributes

**`data-scope`**: pagination
**`data-part`**: last-trigger
**`data-disabled`**: Present when disabled

### NextTrigger

#### Props

#### Data Attributes

**`data-scope`**: pagination
**`data-part`**: next-trigger
**`data-disabled`**: Present when disabled

### PrevTrigger

#### Props

#### Data Attributes

**`data-scope`**: pagination
**`data-part`**: prev-trigger
**`data-disabled`**: Present when disabled

### RootProvider

#### Props

**`value`**
Type: `UsePaginationReturn`
Required: true
Default Value: `undefined`
Description: undefined

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `page` | `number` | The current page. |
| `count` | `number` | The total number of data items. |
| `pageSize` | `number` | The number of data items per page. |
| `totalPages` | `number` | The total number of pages. |
| `pages` | `Pages` | The page range. Represented as an array of page numbers (including ellipsis) |
| `previousPage` | `number | null` | The previous page. |
| `nextPage` | `number | null` | The next page. |
| `pageRange` | `PageRange` | The page range. Represented as an object with `start` and `end` properties. |
| `slice` | `<V>(data: V[]) => V[]` | Function to slice an array of data based on the current page. |
| `setPageSize` | `(size: number) => void` | Function to set the page size. |
| `setPage` | `(page: number) => void` | Function to set the current page. |
| `goToNextPage` | `VoidFunction` | Function to go to the next page. |
| `goToPrevPage` | `VoidFunction` | Function to go to the previous page. |
| `goToFirstPage` | `VoidFunction` | Function to go to the first page. |
| `goToLastPage` | `VoidFunction` | Function to go to the last page. |

# Password Input

## Anatomy

```tsx
<PasswordInput.Root>
  <PasswordInput.Label />
  <PasswordInput.Control>
    <PasswordInput.Input />
    <PasswordInput.VisibilityTrigger>
      <PasswordInput.Indicator />
    </PasswordInput.VisibilityTrigger>
  </PasswordInput.Control>
</PasswordInput.Root>
```

## Examples

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import styles from 'styles/password-input.module.css'

export const Basic = () => (
  <PasswordInput.Root class={styles.Root}>
    <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
    <PasswordInput.Control class={styles.Control}>
      <PasswordInput.Input class={styles.Input} />
      <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
        <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
)
```

### Autocomplete

Use the `autoComplete` prop to manage autocompletion in the input.

- `new-password` — The user is creating a new password.
- `current-password` — The user is entering an existing password.

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import styles from 'styles/password-input.module.css'

export const Autocomplete = () => (
  <PasswordInput.Root class={styles.Root} autoComplete="new-password">
    <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
    <PasswordInput.Control class={styles.Control}>
      <PasswordInput.Input class={styles.Input} />
      <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
        <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
)
```

### Controlled Visibility

Use the `visible` and `onVisibilityChange` props to control the visibility of the password input.

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/password-input.module.css'

export const ControlledVisibility = () => {
  const [visible, setVisible] = createSignal(false)
  return (
    <PasswordInput.Root class={styles.Root} visible={visible()} onVisibilityChange={(e) => setVisible(e.visible)}>
      <PasswordInput.Label class={styles.Label}>Password is {visible() ? 'visible' : 'hidden'}</PasswordInput.Label>
      <PasswordInput.Control class={styles.Control}>
        <PasswordInput.Input class={styles.Input} />
        <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
          <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}
```

### Root Provider

An alternative way to control the password input is to use the `RootProvider` component and the `usePasswordInput` hook.
This way you can access the state and methods from outside the component.

```tsx
import { PasswordInput, usePasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import styles from 'styles/password-input.module.css'

export const RootProvider = () => {
  const passwordInput = usePasswordInput()

return (
    <div class="stack">
      <output>password input is {passwordInput().visible ? 'visible' : 'hidden'}</output>
      <PasswordInput.RootProvider class={styles.Root} value={passwordInput}>
        <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
        <PasswordInput.Control class={styles.Control}>
          <PasswordInput.Input class={styles.Input} />
          <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
            <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
              <EyeIcon />
            </PasswordInput.Indicator>
          </PasswordInput.VisibilityTrigger>
        </PasswordInput.Control>
      </PasswordInput.RootProvider>
    </div>
  )
}
```

### Field

Here's an example of how to use the `PasswordInput` component with the `Field` component.

```tsx
import { Field } from '@ark-ui/solid/field'
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import field from 'styles/field.module.css'
import styles from 'styles/password-input.module.css'

export const WithField = () => (
  <Field.Root class={field.Root}>
    <PasswordInput.Root class={styles.Root}>
      <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
      <PasswordInput.Control class={styles.Control}>
        <PasswordInput.Input class={styles.Input} />
        <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
          <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
    <Field.HelperText class={field.HelperText}>Enter your password</Field.HelperText>
    <Field.ErrorText class={field.ErrorText}>Password is required</Field.ErrorText>
  </Field.Root>
)
```

### Password Managers

Use the `ignorePasswordManager` prop to ignore password managers like 1Password, LastPass, etc. This is useful for
non-login scenarios (e.g., "api keys", "secure notes", "temporary passwords")

> **Currently, this only works for 1Password, LastPass, Bitwarden, Dashlane, and Proton Pass.**

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import styles from 'styles/password-input.module.css'

export const IgnorePasswordManager = () => (
  <PasswordInput.Root class={styles.Root} ignorePasswordManagers>
    <PasswordInput.Label class={styles.Label}>API Key</PasswordInput.Label>
    <PasswordInput.Control class={styles.Control}>
      <PasswordInput.Input class={styles.Input} value="spd_1234567890" />
      <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
        <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
)
```

### Strength Meter

Combine the `PasswordInput` with a password strength library to show visual feedback about password strength. This
example uses the [`check-password-strength`](https://www.npmjs.com/package/check-password-strength) package to provide
real-time strength validation.

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { passwordStrength, type Options } from 'check-password-strength'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import { createMemo, createSignal, Show } from 'solid-js'
import styles from 'styles/password-input.module.css'

const strengthOptions: Options<string> = [
  { id: 0, value: 'weak', minDiversity: 0, minLength: 0 },
  { id: 1, value: 'medium', minDiversity: 2, minLength: 6 },
  { id: 2, value: 'strong', minDiversity: 4, minLength: 8 },
]

export const StrengthMeter = () => {
  const [password, setPassword] = createSignal('asdfasdf')

const strength = createMemo(() => {
    if (!password()) return null
    const { value } = passwordStrength(password(), strengthOptions)
    return value
  })

return (
    <PasswordInput.Root class={styles.Root}>
      <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
      <PasswordInput.Control class={styles.Control}>
        <PasswordInput.Input
          class={styles.Input}
          value={password()}
          onInput={(e) => setPassword(e.currentTarget.value)}
          placeholder="Enter your password"
        />
        <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
          <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
      <Show when={strength()}>
        {(value) => (
          <div class={styles.StrengthMeter}>
            <div class={styles.StrengthBar}>
              <div class={styles.StrengthFill} data-strength={value()} />
            </div>
            <div class={styles.StrengthLabel}>{value()} password</div>
          </div>
        )}
      </Show>
    </PasswordInput.Root>
  )
}
```

### Validation

Combine with custom validation logic to show real-time feedback. Use the `invalid` prop to indicate validation errors.

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import { createMemo, createSignal } from 'solid-js'
import styles from 'styles/password-input.module.css'

export const WithValidation = () => {
  const [password, setPassword] = createSignal('')
  const isValid = createMemo(() => password().length >= 8)

return (
    <PasswordInput.Root class={styles.Root} invalid={!isValid() && password().length > 0}>
      <PasswordInput.Label class={styles.Label}>Password (min 8 characters)</PasswordInput.Label>
      <PasswordInput.Control class={styles.Control}>
        <PasswordInput.Input
          class={styles.Input}
          onInput={(e) => setPassword(e.currentTarget.value)}
          placeholder="Enter your password"
        />
        <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
          <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
      {password().length > 0 && !isValid() && (
        <p class={styles.ValidationMessage} data-valid="false">
          Password must be at least 8 characters
        </p>
      )}
      {isValid() && password().length > 0 && (
        <p class={styles.ValidationMessage} data-valid="true">
          Password is valid
        </p>
      )}
    </PasswordInput.Root>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`autoComplete`**
Type: `'current-password' | 'new-password'`
Required: false
Default Value: `"current-password"`
Description: The autocomplete attribute for the password input.

**`defaultVisible`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The default visibility of the password input.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the password input is disabled.

**`ids`**
Type: `Partial<{ input: string; visibilityTrigger: string }>`
Required: false
Default Value: `undefined`
Description: The ids of the password input parts

**`ignorePasswordManagers`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: When `true`, the input will ignore password managers.

**Only works for the following password managers**
- 1Password, LastPass, Bitwarden, Dashlane, Proton Pass

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The invalid state of the password input.

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name of the password input.

**`onVisibilityChange`**
Type: `(details: VisibilityChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the visibility changes.

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the password input is read only.

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the password input is required.

**`translations`**
Type: `Partial<{ visibilityTrigger: ((visible: boolean) => string) | undefined }>`
Required: false
Default Value: `undefined`
Description: The localized messages to use.

**`visible`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the password input is visible.

#### Data Attributes

**`data-scope`**: password-input
**`data-part`**: root
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

### Control

#### Props

#### Data Attributes

**`data-scope`**: password-input
**`data-part`**: control
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

### Indicator

#### Props

**`fallback`**
Type: `number | boolean | Node | ArrayElement | (string & {})`
Required: false
Default Value: `undefined`
Description: The fallback content to display when the password is not visible.

#### Data Attributes

**`data-scope`**: password-input
**`data-part`**: indicator
**`data-state`**: "visible" | "hidden"
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

### Input

#### Props

#### Data Attributes

**`data-scope`**: password-input
**`data-part`**: input
**`data-state`**: "visible" | "hidden"
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

### Label

#### Props

#### Data Attributes

**`data-scope`**: password-input
**`data-part`**: label
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only
**`data-required`**: Present when required

### RootProvider

#### Props

**`value`**
Type: `UsePasswordInputReturn`
Required: true
Default Value: `undefined`
Description: undefined

### VisibilityTrigger

#### Props

#### Data Attributes

**`data-scope`**: password-input
**`data-part`**: visibility-trigger
**`data-readonly`**: Present when read-only
**`data-disabled`**: Present when disabled
**`data-state`**: "visible" | "hidden"

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `visible` | `boolean` | Whether the password input is visible. |
| `disabled` | `boolean` | Whether the password input is disabled. |
| `invalid` | `boolean` | Whether the password input is invalid. |
| `focus` | `VoidFunction` | Focus the password input. |
| `setVisible` | `(value: boolean) => void` | Set the visibility of the password input. |
| `toggleVisible` | `VoidFunction` | Toggle the visibility of the password input. |

# Pin Input

## Anatomy

```tsx
<PinInput.Root>
  <PinInput.Label />
  <PinInput.Control>
    <PinInput.Input />
  </PinInput.Control>
  <PinInput.HiddenInput />
</PinInput.Root>
```

## Examples

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const Basic = () => (
  <PinInput.Root class={styles.Root}>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)
```

### Placeholder

To customize the default pin input placeholder `○` for each input, pass the placeholder prop and set it to your desired
value.

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const CustomPlaceholder = () => (
  <PinInput.Root class={styles.Root} placeholder="*">
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)
```

### Blur on Complete

By default, the last input maintains focus when filled, and we invoke the `onValueComplete` callback. To blur the last
input when the user completes the input, set the prop `blurOnComplete` to `true`.

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const BlurOnComplete = () => (
  <PinInput.Root class={styles.Root} blurOnComplete>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)
```

### OTP Mode

To trigger smartphone OTP auto-suggestion, it is recommended to set the `autocomplete` attribute to "one-time-code". The
pin input component provides support for this automatically when you set the `otp` prop to true.

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const OTPMode = () => (
  <PinInput.Root class={styles.Root} otp>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)
```

### Masking

When collecting private or sensitive information using the pin input, you might need to mask the value entered, similar
to `<input type="password"/>`. Pass the `mask` prop to `true`.

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const Mask = () => (
  <PinInput.Root class={styles.Root} mask>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)
```

### Change Events

The pin input component invokes several callback functions when the user enters:

- `onValueChange` — Callback invoked when the value is changed.
- `onValueComplete` — Callback invoked when all fields have been completed (by typing or pasting).
- `onValueInvalid` — Callback invoked when an invalid value is entered into the input. An invalid value is any value
  that doesn't match the specified "type".

### Field

The `Field` component helps manage form-related state and accessibility attributes of a pin input. It includes handling
ARIA labels, helper text, and error text to ensure proper accessibility.

```tsx
import { Field } from '@ark-ui/solid/field'
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import fieldStyles from 'styles/field.module.css'
import styles from 'styles/pin-input.module.css'

export const WithField = () => (
  <Field.Root class={fieldStyles.Root}>
    <PinInput.Root class={styles.Root}>
      <PinInput.Label class={styles.Label}>Label</PinInput.Label>
      <PinInput.Control class={styles.Control}>
        <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
      </PinInput.Control>
      <PinInput.HiddenInput />
    </PinInput.Root>
    <Field.HelperText class={fieldStyles.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText class={fieldStyles.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Root Provider

An alternative way to control the pin input is to use the `RootProvider` component and the `usePinInput` hook. This way
you can access the state and methods from outside the component.

```tsx
import { PinInput, usePinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const RootProvider = () => {
  const pinInput = usePinInput({ onValueComplete: (e) => alert(e.valueAsString) })

return (
    <div class="stack">
      <button onClick={() => pinInput().focus()}>Focus</button>

<PinInput.RootProvider value={pinInput} class={styles.Root}>
        <PinInput.Label class={styles.Label}>Label</PinInput.Label>
        <PinInput.Control class={styles.Control}>
          <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
        </PinInput.Control>
        <PinInput.HiddenInput />
      </PinInput.RootProvider>
    </div>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`autoFocus`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to auto-focus the first input.

**`autoSubmit`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to auto-submit the owning form when all inputs are filled.

**`blurOnComplete`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to blur the input when the value is complete

**`count`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The number of inputs to render to improve SSR aria attributes.
This will be required in next major version.

**`defaultValue`**
Type: `string[]`
Required: false
Default Value: `undefined`
Description: The initial value of the the pin input when rendered.
Use when you don't need to control the value of the pin input.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the inputs are disabled

**`form`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The associate form of the underlying input element.

**`ids`**
Type: `Partial<{
  root: string
  hiddenInput: string
  label: string
  control: string
  input: (id: string) => string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the pin input. Useful for composition.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the pin input is in the invalid state

**`mask`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: If `true`, the input's value will be masked just like `type=password`

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name of the input element. Useful for form submission.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called on input change

**`onValueComplete`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when all inputs have valid values

**`onValueInvalid`**
Type: `(details: ValueInvalidDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when an invalid value is entered

**`otp`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: If `true`, the pin input component signals to its fields that they should
use `autocomplete="one-time-code"`.

**`pattern`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The regular expression that the user-entered input value is checked against.

**`placeholder`**
Type: `string`
Required: false
Default Value: `"○"`
Description: The placeholder text for the input

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the pin input is in the valid state

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the pin input is required

**`sanitizeValue`**
Type: `(value: string) => string`
Required: false
Default Value: `undefined`
Description: Function to sanitize pasted values before validation.
Useful for stripping dashes, spaces, or other formatting.

**`selectOnFocus`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to select input value when input is focused

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: Specifies the localized strings that identifies the accessibility elements and their states

**`type`**
Type: `'numeric' | 'alphanumeric' | 'alphabetic'`
Required: false
Default Value: `"numeric"`
Description: The type of value the pin-input should allow

**`value`**
Type: `string[]`
Required: false
Default Value: `undefined`
Description: The controlled value of the the pin input.

#### Data Attributes

**`data-scope`**: pin-input
**`data-part`**: root
**`data-invalid`**: Present when invalid
**`data-disabled`**: Present when disabled
**`data-complete`**: Present when the pin-input value is complete
**`data-readonly`**: Present when read-only

### Control

#### Props

### HiddenInput

#### Props

### Input

#### Props

**`index`**
Type: `number`
Required: true
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: pin-input
**`data-part`**: input
**`data-disabled`**: Present when disabled
**`data-complete`**: Present when the input value is complete
**`data-filled`**: 
**`data-index`**: The index of the item
**`data-invalid`**: Present when invalid

### Label

#### Props

#### Data Attributes

**`data-scope`**: pin-input
**`data-part`**: label
**`data-invalid`**: Present when invalid
**`data-disabled`**: Present when disabled
**`data-complete`**: Present when the label value is complete
**`data-required`**: Present when required
**`data-readonly`**: Present when read-only

### RootProvider

#### Props

**`value`**
Type: `UsePinInputReturn`
Required: true
Default Value: `undefined`
Description: undefined

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `string[]` | The value of the input as an array of strings. |
| `valueAsString` | `string` | The value of the input as a string. |
| `complete` | `boolean` | Whether all inputs are filled. |
| `count` | `number` | The number of inputs to render |
| `items` | `number[]` | The array of input values. |
| `setValue` | `(value: string[]) => void` | Function to set the value of the inputs. |
| `clearValue` | `VoidFunction` | Function to clear the value of the inputs. |
| `setValueAtIndex` | `(index: number, value: string) => void` | Function to set the value of the input at a specific index. |
| `focus` | `VoidFunction` | Function to focus the pin-input. This will focus the first input. |

## Accessibility

### Keyboard Support

**`ArrowLeft`**
Description: Moves focus to the previous input

**`ArrowRight`**
Description: Moves focus to the next input

**`Backspace`**
Description: Deletes the value in the current input and moves focus to the previous input

**`Delete`**
Description: Deletes the value in the current input

**`Control + V`**
Description: Pastes the value into the input fields

# Popover

## Anatomy

```tsx
<Popover.Root>
  <Popover.Trigger />
  <Popover.Anchor />
  <Popover.Positioner>
    <Popover.Arrow>
      <Popover.ArrowTip />
    </Popover.Arrow>
    <Popover.Content>
      <Popover.Title />
      <Popover.Description />
      <Popover.CloseTrigger />
    </Popover.Content>
  </Popover.Positioner>
</Popover.Root>
```

## Examples

```tsx
import { Popover } from '@ark-ui/solid/popover'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import styles from 'styles/popover.module.css'

export const Basic = () => (
  <Popover.Root>
    <Popover.Trigger class={button.Root}>Click Me</Popover.Trigger>
    <Portal>
      <Popover.Positioner class={styles.Positioner}>
        <Popover.Content class={styles.Content}>
          <Popover.Title class={styles.Title}>Favorite Frameworks</Popover.Title>
          <Popover.Description class={styles.Description}>
            Manage and organize your favorite web frameworks.
          </Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover.Root>
)
```

### Controlled

Use the `open` and `onOpenChange` props to control the open state of the popover.

```tsx
import { Popover } from '@ark-ui/solid/popover'
import { XIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import styles from 'styles/popover.module.css'

export const Controlled = () => {
  const [open, setOpen] = createSignal(false)
  return (
    <Popover.Root open={open()} onOpenChange={(e) => setOpen(e.open)}>
      <Popover.Trigger class={button.Root}>Click Me</Popover.Trigger>
      <Portal>
        <Popover.Positioner class={styles.Positioner}>
          <Popover.Content class={styles.Content}>
            <Popover.CloseTrigger class={styles.CloseTrigger}>
              <XIcon />
            </Popover.CloseTrigger>
            <Popover.Title class={styles.Title}>Team Members</Popover.Title>
            <Popover.Description class={styles.Description}>
              Invite colleagues to collaborate on this project.
            </Popover.Description>
          </Popover.Content>
        </Popover.Positioner>
      </Portal>
    </Popover.Root>
  )
}
```

### Root Provider

An alternative way to control the popover is to use the `RootProvider` component and the `usePopover` hook. This way you
can access the state and methods from outside the component.

```tsx
import { Popover, usePopover } from '@ark-ui/solid/popover'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import styles from 'styles/popover.module.css'

export const RootProvider = () => {
  const popover = usePopover()

return (
    <div class="stack">
      <div>Popover is {popover().open ? 'open' : 'closed'}</div>
      <Popover.RootProvider value={popover}>
        <Popover.Trigger class={button.Root}>Toggle Popover</Popover.Trigger>
        <Portal>
          <Popover.Positioner class={styles.Positioner}>
            <Popover.Content class={styles.Content}>
              <Popover.Title class={styles.Title}>Controlled Externally</Popover.Title>
              <Popover.Description class={styles.Description}>
                This popover is controlled via the usePopover hook.
              </Popover.Description>
            </Popover.Content>
          </Popover.Positioner>
        </Portal>
      </Popover.RootProvider>
    </div>
  )
}
```

### Arrow

Use `Popover.Arrow` and `Popover.ArrowTip` to render an arrow pointing to the trigger.

```tsx
import { Popover } from '@ark-ui/solid/popover'
import { XIcon } from 'lucide-solid'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import styles from 'styles/popover.module.css'

export const Arrow = () => (
  <Popover.Root>
    <Popover.Trigger class={button.Root}>Click Me</Popover.Trigger>
    <Portal>
      <Popover.Positioner class={styles.Positioner}>
        <Popover.Content class={styles.Content}>
          <Popover.Arrow class={styles.Arrow}>
            <Popover.ArrowTip class={styles.ArrowTip} />
          </Popover.Arrow>
          <Popover.CloseTrigger class={styles.CloseTrigger}>
            <XIcon />
          </Popover.CloseTrigger>
          <Popover.Title class={styles.Title}>Notifications</Popover.Title>
          <Popover.Description class={styles.Description}>
            You have 3 unread messages in your inbox.
          </Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover.Root>
)
```

### Placement

To change the placement of the popover, set the `positioning` prop.

export const Positioning = () => (
  <Popover.Root
    positioning={{
      placement: 'left-start',
      offset: { mainAxis: 12, crossAxis: 12 },
    }}
  >
    <Popover.Trigger class={button.Root}>Click Me</Popover.Trigger>
    <Portal>
      <Popover.Positioner class={styles.Positioner}>
        <Popover.Content class={styles.Content}>
          <Popover.CloseTrigger class={styles.CloseTrigger}>
            <XIcon />
          </Popover.CloseTrigger>
          <Popover.Title class={styles.Title}>Left Placement</Popover.Title>
          <Popover.Description class={styles.Description}>
            This popover appears on the left with custom offset values.
          </Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover.Root>
)
```

### Close Behavior

The popover is designed to close on blur and when the <kbd>esc</kbd> key is pressed.

- To prevent it from closing on blur (clicking or focusing outside), pass the `closeOnInteractOutside` prop and set it
  to `false`.
- To prevent it from closing when the <kbd>esc</kbd> key is pressed, pass the `closeOnEsc` prop and set it to `false`.

export const CloseBehavior = () => (
  <Popover.Root closeOnEscape closeOnInteractOutside>
    <Popover.Trigger class={button.Root}>Click Me</Popover.Trigger>
    <Portal>
      <Popover.Positioner class={styles.Positioner}>
        <Popover.Content class={styles.Content}>
          <Popover.CloseTrigger class={styles.CloseTrigger}>
            <XIcon />
          </Popover.CloseTrigger>
          <Popover.Title class={styles.Title}>Quick Actions</Popover.Title>
          <Popover.Description class={styles.Description}>
            Press Escape or click outside to close this popover.
          </Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover.Root>
)
```

### Modality

In some cases, you might want the popover to be modal. This means that it'll:

- trap focus within its content
- block scrolling on the body
- disable pointer interactions outside the popover
- hide content behind the popover from screen readers

To make the popover modal, set the `modal` prop to `true`. When `modal={true}`, we set the `portalled` attribute to
`true` as well.

export const Modal = () => (
  <Popover.Root modal>
    <Popover.Trigger class={button.Root}>Click Me</Popover.Trigger>
    <Portal>
      <Popover.Positioner class={styles.Positioner}>
        <Popover.Content class={styles.Content}>
          <Popover.CloseTrigger class={styles.CloseTrigger}>
            <XIcon />
          </Popover.CloseTrigger>
          <Popover.Title class={styles.Title}>Confirm Action</Popover.Title>
          <Popover.Description class={styles.Description}>
            Focus is trapped inside this modal popover until dismissed.
          </Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover.Root>
)
```

### Anchor

Use `Popover.Anchor` to position the popover relative to a different element than the trigger.

```tsx
import { Popover } from '@ark-ui/solid/popover'
import { XIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import field from 'styles/field.module.css'
import styles from 'styles/popover.module.css'

export const Anchor = () => (
  <Popover.Root>
    <div class="hstack">
      <Popover.Trigger class={button.Root}>Click Me</Popover.Trigger>
      <Popover.Anchor class={styles.Anchor}>
        <input class={field.Input} placeholder="Type here..." />
      </Popover.Anchor>
    </div>

<Popover.Positioner class={styles.Positioner}>
      <Popover.Content class={styles.Content}>
        <Popover.CloseTrigger class={styles.CloseTrigger}>
          <XIcon />
        </Popover.CloseTrigger>
        <Popover.Title class={styles.Title}>Title</Popover.Title>
        <Popover.Description class={styles.Description}>Description</Popover.Description>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
)
```

### Same Width

Use `positioning.sameWidth` to make the popover match the width of its trigger element.

export const SameWidth = () => (
  <Popover.Root positioning={{ sameWidth: true }}>
    <Popover.Trigger class={button.Root} style={{ 'min-width': '200px' }}>
      Click Me
    </Popover.Trigger>
    <Portal>
      <Popover.Positioner class={styles.Positioner}>
        <Popover.Content class={styles.Content}>
          <Popover.CloseTrigger class={styles.CloseTrigger}>
            <XIcon />
          </Popover.CloseTrigger>
          <Popover.Title class={styles.Title}>Matched Width</Popover.Title>
          <Popover.Description class={styles.Description}>
            This popover matches the width of its trigger element.
          </Popover.Description>
        </Popover.Content>
      </Popover.Positioner>
    </Portal>
  </Popover.Root>
)
```

### Dialog Integration

When rendering a popover inside a dialog, you have two options for proper layering:

1. **Keep the Portal with `lazyMount` and `unmountOnExit`** - This ensures the popover is properly unmounted when the
   dialog closes, preventing stale DOM nodes.

2. **Remove the Portal** - Render the popover inline within the dialog content. This works well but may have z-index
   considerations.

```tsx
import { Dialog } from '@ark-ui/solid/dialog'
import { Popover } from '@ark-ui/solid/popover'
import { XIcon } from 'lucide-solid'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import dialog from 'styles/dialog.module.css'
import styles from 'styles/popover.module.css'

export const WithDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger class={button.Root}>Open Dialog</Dialog.Trigger>
    <Portal>
      <Dialog.Backdrop class={dialog.Backdrop} />
      <Dialog.Positioner class={dialog.Positioner}>
        <Dialog.Content class={dialog.Content}>
          <Dialog.CloseTrigger class={dialog.CloseTrigger}>
            <XIcon />
          </Dialog.CloseTrigger>
          <Dialog.Title class={dialog.Title}>Edit Profile</Dialog.Title>
          <Dialog.Description class={dialog.Description}>Update your profile information below.</Dialog.Description>
          <div class={dialog.Body}>
            <Popover.Root lazyMount unmountOnExit>
              <Popover.Trigger class={button.Root}>More Options</Popover.Trigger>
              <Portal>
                <Popover.Positioner class={styles.Positioner}>
                  <Popover.Content class={styles.Content}>
                    <Popover.Arrow class={styles.Arrow}>
                      <Popover.ArrowTip class={styles.ArrowTip} />
                    </Popover.Arrow>
                    <Popover.CloseTrigger class={styles.CloseTrigger}>
                      <XIcon />
                    </Popover.CloseTrigger>
                    <Popover.Title class={styles.Title}>Additional Settings</Popover.Title>
                    <Popover.Description class={styles.Description}>
                      This popover renders correctly above the dialog.
                    </Popover.Description>
                  </Popover.Content>
                </Popover.Positioner>
              </Portal>
            </Popover.Root>
          </div>
        </Dialog.Content>
      </Dialog.Positioner>
    </Portal>
  </Dialog.Root>
)
```

### Nested

Popovers can be nested within each other. Each nested popover maintains its own open state and positioning.

```tsx
import { Popover } from '@ark-ui/solid/popover'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import styles from 'styles/popover.module.css'

export const Nested = () => {
  return (
    <Popover.Root>
      <Popover.Trigger class={button.Root}>Click Me</Popover.Trigger>
      <Portal>
        <Popover.Positioner class={styles.Positioner}>
          <Popover.Content class={styles.Content}>
            <Popover.Title class={styles.Title}>Settings</Popover.Title>
            <Popover.Description class={styles.Description}>
              Manage your preferences and account settings.
            </Popover.Description>
            <Popover.Root lazyMount unmountOnExit positioning={{ placement: 'right' }}>
              <Popover.Trigger class={button.Root}>Advanced</Popover.Trigger>
              <Portal>
                <Popover.Positioner class={styles.Positioner}>
                  <Popover.Content class={styles.Content}>
                    <Popover.Title class={styles.Title}>Advanced Settings</Popover.Title>
                    <Popover.Description class={styles.Description}>
                      Configure advanced options for power users.
                    </Popover.Description>
                  </Popover.Content>
                </Popover.Positioner>
              </Portal>
            </Popover.Root>
          </Popover.Content>
        </Popover.Positioner>
      </Portal>
    </Popover.Root>
  )
}
```

### Multiple Triggers

Share a single popover across multiple trigger elements. Pass a `value` to each `Popover.Trigger` — the popover
repositions to whichever trigger is activated without closing.

```tsx
import { Popover } from '@ark-ui/solid/popover'
import { Portal } from 'solid-js/web'
import { For, createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/popover.module.css'

interface Item {
  id: string
  label: string
  detail: string
}

const items: Item[] = [
  { id: 'share', label: 'Share', detail: 'Share this item with others via link or email.' },
  { id: 'export', label: 'Export', detail: 'Export this item as PDF, CSV, or JSON.' },
  { id: 'archive', label: 'Archive', detail: 'Move this item to the archive for later reference.' },
]

export const MultipleTriggers = () => {
  const [activeItem, setActiveItem] = createSignal<Item | null>(null)

return (
    <Popover.Root
      onTriggerValueChange={(e) => {
        setActiveItem(items.find((i) => i.id === e.value) ?? null)
      }}
    >
      <div class={button.Group}>
        <For each={items}>
          {(item) => (
            <Popover.Trigger value={item.id} class={button.Root}>
              {item.label}
            </Popover.Trigger>
          )}
        </For>
      </div>
      <Portal>
        <Popover.Positioner class={styles.Positioner}>
          <Popover.Content class={styles.Content}>
            <Popover.Title class={styles.Title}>{activeItem()?.label ?? 'Select an action'}</Popover.Title>
            <Popover.Description class={styles.Description}>
              {activeItem()?.detail ?? 'Click a button above'}
            </Popover.Description>
          </Popover.Content>
        </Popover.Positioner>
      </Portal>
    </Popover.Root>
  )
}
```

## Guides

### Available Size

The following css variables are exposed to the `Popover.Positioner` which you can use to style the `Popover.Content`

```css
/* width of the popover trigger */
--reference-width: <pixel-value>;
/* width of the available viewport */
--available-width: <pixel-value>;
/* height of the available viewport */
--available-height: <pixel-value>;
```

For example, if you want to make sure the maximum height doesn't exceed the available height, use the following css:

```css
[data-scope='popover'][data-part='content'] {
  max-height: calc(var(--available-height) - 100px);
}
```

## API Reference

### Props

### Root

#### Props

**`autoFocus`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to automatically set focus on the first focusable
content within the popover when opened.

**`closeOnEscape`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to close the popover when the escape key is pressed.

**`closeOnInteractOutside`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to close the popover when the user clicks outside of the popover.

**`defaultOpen`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The initial open state of the popover when rendered.
Use when you don't need to control the open state of the popover.

**`defaultTriggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial trigger value when rendered.
Use when you don't need to control the trigger value.

**`finalFocusEl`**
Type: `() => MaybeElement`
Required: false
Default Value: `undefined`
Description: Element to receive focus when the popover is closed.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  anchor: string
  trigger: string | ((value?: string | undefined) => string)
  content: string
  title: string
  description: string
  closeTrigger: string
  positioner: string
  arrow: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the popover. Useful for composition.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`initialFocusEl`**
Type: `() => HTMLElement | null`
Required: false
Default Value: `undefined`
Description: The element to focus on when the popover is opened.

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`modal`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether the popover should be modal. When set to `true`:
- interaction with outside elements will be disabled
- only popover content will be visible to screen readers
- scrolling is blocked
- focus is trapped within the popover

**`onEscapeKeyDown`**
Type: `(event: KeyboardEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the escape key is pressed

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`onFocusOutside`**
Type: `(event: FocusOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the focus is moved outside the component

**`onInteractOutside`**
Type: `(event: InteractOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when an interaction happens outside the component

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function invoked when the popover opens or closes

**`onRequestDismiss`**
Type: `(event: LayerDismissEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when this layer is closed due to a parent layer being closed

**`onTriggerValueChange`**
Type: `(details: TriggerValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the trigger value changes.

**`open`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The controlled open state of the popover

**`portalled`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
of the popover content.

**`positioning`**
Type: `PositioningOptions`
Required: false
Default Value: `undefined`
Description: The user provided options used to position the popover content

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`restoreFocus`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to restore focus to the element that had focus before the popover was opened.

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: Specifies the localized strings that identifies the accessibility elements and their states

**`triggerValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled trigger value

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Anchor

#### Props

### Arrow

#### Props

### ArrowTip

#### Props

### CloseTrigger

#### Props

### Content

#### Props

#### Data Attributes

**`data-scope`**: popover
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-nested`**: popover
**`data-has-nested`**: popover
**`data-expanded`**: Present when expanded
**`data-placement`**: The placement of the content
**`data-side`**: The side of the trigger that the content is positioned on

### Description

#### Props

### Indicator

#### Props

#### Data Attributes

**`data-scope`**: popover
**`data-part`**: indicator
**`data-state`**: "open" | "closed"

### Positioner

#### Props

### RootProvider

#### Props

**`value`**
Type: `UsePopoverReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Title

#### Props

### Trigger

#### Props

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value that identifies this specific trigger

#### Data Attributes

**`data-scope`**: popover
**`data-part`**: trigger
**`data-placement`**: The placement of the trigger
**`data-side`**: The side of the trigger that the trigger is positioned on
**`data-value`**: The value of the item
**`data-current`**: Present when current
**`data-state`**: "open" | "closed"

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `portalled` | `boolean` | Whether the popover is portalled. |
| `open` | `boolean` | Whether the popover is open |
| `setOpen` | `(open: boolean) => void` | Function to open or close the popover |
| `triggerValue` | `string | null` | The trigger value |
| `setTriggerValue` | `(value: string | null) => void` | Function to set the trigger value |
| `reposition` | `(options?: Partial<PositioningOptions>) => void` | Function to reposition the popover |

## Accessibility

### Keyboard Support

**`Space`**
Description: Opens/closes the popover.

**`Enter`**
Description: Opens/closes the popover.

**`Tab`**
Description: <span>Moves focus to the next focusable element within the content.<br /><strong>Note:</strong> If there are no focusable elements, focus is moved to the next focusable element after the trigger.</span>

**`Shift + Tab`**
Description: <span>Moves focus to the previous focusable element within the content<br /><strong>Note:</strong> If there are no focusable elements, focus is moved to the trigger.</span>

**`Esc`**
Description: <span>Closes the popover and moves focus to the trigger.</span>

# Progress - Circular

## Anatomy

```tsx
<Progress.Root>
  <Progress.Label />
  <Progress.ValueText />
  <Progress.Circle>
    <Progress.CircleTrack />
    <Progress.CircleRange />
  </Progress.Circle>
</Progress.Root>
```

## Examples

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress-circular.module.css'

export const Basic = () => (
  <Progress.Root class={styles.Root} defaultValue={42}>
    <div class={styles.CircleContainer}>
      <Progress.Circle class={styles.Circle}>
        <Progress.CircleTrack class={styles.CircleTrack} />
        <Progress.CircleRange class={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText class={styles.ValueText} />
    </div>
  </Progress.Root>
)
```

### Min and Max

By default, the maximum is `100`. If that's not what you want, you can easily specify a different bound by changing the
value of the `max` prop. You can do the same with the minimum value by setting the `min` prop.

For example, to show the user a progress from `10` to `30`, you can use:

```tsx
import { Progress } from '@ark-ui/solid/progress'

export const MinMax = () => (
  <Progress.Root defaultValue={20} min={10} max={30}>
    <Progress.Label>Label</Progress.Label>
    <Progress.ValueText />
    <Progress.Circle>
      <Progress.CircleTrack />
      <Progress.CircleRange />
    </Progress.Circle>
  </Progress.Root>
)
```

### Indeterminate

The progress component is determinate by default, with the value and max set to 50 and 100 respectively. To render an
indeterminate progress, you will have to set the `value` to `null`.

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress-circular.module.css'

export const Indeterminate = () => (
  <Progress.Root class={styles.Root} defaultValue={null}>
    <div class={styles.CircleContainer}>
      <Progress.Circle class={styles.Circle}>
        <Progress.CircleTrack class={styles.CircleTrack} />
        <Progress.CircleRange class={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText class={styles.ValueText} />
    </div>
  </Progress.Root>
)
```

### Label

Add a label to provide additional context for the progress indicator.

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress-circular.module.css'

export const WithLabel = () => (
  <Progress.Root class={styles.Root} defaultValue={42}>
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <div class={styles.CircleContainer}>
      <Progress.Circle class={styles.Circle}>
        <Progress.CircleTrack class={styles.CircleTrack} />
        <Progress.CircleRange class={styles.CircleRange} />
      </Progress.Circle>
      <Progress.ValueText class={styles.ValueText} />
    </div>
  </Progress.Root>
)
```

### Root Provider

An alternative way to control the progress is to use the `RootProvider` component and the `useProgress` hook. This way
you can access the state and methods from outside the component.

```tsx
import { Progress, useProgress } from '@ark-ui/solid/progress'
import button from 'styles/button.module.css'
import styles from 'styles/progress-circular.module.css'

export const RootProvider = () => {
  const progress = useProgress()

return (
    <div class="stack">
      <button class={button.Root} onClick={() => progress().setToMax()}>
        Set to Max
      </button>
      <Progress.RootProvider class={styles.Root} value={progress}>
        <div class={styles.CircleContainer}>
          <Progress.Circle class={styles.Circle}>
            <Progress.CircleTrack class={styles.CircleTrack} />
            <Progress.CircleRange class={styles.CircleRange} />
          </Progress.Circle>
          <Progress.ValueText class={styles.ValueText} />
        </div>
      </Progress.RootProvider>
    </div>
  )
}
```

## Guides

### Styling the Circle

The circular progress component uses CSS variables to control the size and thickness of the circle. Set these variables
on `Progress.Circle` to customize the appearance:

```css
[data-scope='progress'][data-part='circle'] {
  --size: 120px;
  --thickness: 10px;
}
```

| Variable      | Description                          |
| ------------- | ------------------------------------ |
| `--size`      | The width and height of the circle   |
| `--thickness` | The stroke width of the circle track |

## API Reference

### Root

#### Props

**`defaultValue`**
Type: `number`
Required: false
Default Value: `50`
Description: The initial value of the progress bar when rendered.
Use when you don't need to control the value of the progress bar.

**`formatOptions`**
Type: `NumberFormatOptions`
Required: false
Default Value: `{ style: "percent" }`
Description: The options to use for formatting the value.

**`ids`**
Type: `Partial<{ root: string; track: string; label: string; circle: string }>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the progress bar. Useful for composition.

**`locale`**
Type: `string`
Required: false
Default Value: `"en-US"`
Description: The locale to use for formatting the value.

**`max`**
Type: `number`
Required: false
Default Value: `100`
Description: The maximum allowed value of the progress bar.

**`min`**
Type: `number`
Required: false
Default Value: `0`
Description: The minimum allowed value of the progress bar.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when the value changes.

**`orientation`**
Type: `'horizontal' | 'vertical'`
Required: false
Default Value: `"horizontal"`
Description: The orientation of the element.

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: The localized messages to use.

**`value`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The controlled value of the progress bar.

#### Data Attributes

**`data-scope`**: progress
**`data-part`**: root
**`data-max`**: 
**`data-value`**: The value of the item
**`data-state`**: 
**`data-orientation`**: The orientation of the progress

### Circle

#### Props

**`asChild`**
Type: `(props: ParentProps<'svg'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### CircleRange

#### Props

**`asChild`**
Type: `(props: ParentProps<'circle'>) => Element`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: progress
**`data-part`**: circle-range
**`data-state`**:

### CircleTrack

#### Props

#### Data Attributes

**`data-scope`**: progress
**`data-part`**: circle-track
**`data-orientation`**: The orientation of the circletrack

### Label

#### Props

#### Data Attributes

**`data-scope`**: progress
**`data-part`**: label
**`data-orientation`**: The orientation of the label

### Range

#### Props

#### Data Attributes

**`data-scope`**: progress
**`data-part`**: range
**`data-orientation`**: The orientation of the range
**`data-state`**:

### RootProvider

#### Props

**`value`**
Type: `UseProgressReturn`
Required: true
Default Value: `undefined`
Description: undefined

### Track

#### Props

### ValueText

#### Props

### View

#### Props

**`state`**
Type: `ProgressState`
Required: true
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: progress
**`data-part`**: view
**`data-state`**:

## Accessibility

Complies with the [the progressbar role requirements.](https://w3c.github.io/aria/#progressbar).

# Progress - Linear

## Anatomy

```tsx
<Progress.Root>
  <Progress.Label />
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>
```

## Examples

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress.module.css'

export const Basic = () => (
  <Progress.Root class={styles.Root} defaultValue={42}>
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)
```

### Min and Max

For example, to show the user a progress from `10` to `30`, you can use:

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress.module.css'

export const MinMax = () => (
  <Progress.Root class={styles.Root} defaultValue={20} min={10} max={30}>
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)
```

### Indeterminate

The progress component is determinate by default, with the value and max set to 50 and 100 respectively. To render an
indeterminate progress, you will have to set the `value` to `null`.

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress.module.css'

export const Indeterminate = () => (
  <Progress.Root class={styles.Root} value={null}>
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)
```

### Value Text

Progress bars can only be interpreted by sighted users. To include a text description to support assistive technologies
like screen readers, use the `value` part in `translations`.

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress.module.css'

export const ValueText = () => (
  <Progress.Root
    class={styles.Root}
    translations={{
      value({ value, max }) {
        if (value === null) return 'Loading...'
        return `${value} of ${max} items loaded`
      },
    }}
  >
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)
```

### Orientation

By default, the progress is assumed to be horizontal. To change the orientation to vertical, set the orientation
property in the machine's context to vertical.

> Don't forget to change the styles of the vertical progress by specifying its height

```tsx
import { Progress } from '@ark-ui/solid/progress'
import styles from 'styles/progress.module.css'

export const Vertical = () => (
  <Progress.Root class={styles.Root} orientation="vertical">
    <Progress.Label class={styles.Label}>Label</Progress.Label>
    <Progress.ValueText class={styles.ValueText} />
    <Progress.Track class={styles.Track}>
      <Progress.Range class={styles.Range} />
    </Progress.Track>
  </Progress.Root>
)
```

### Root Provider

An alternative way to control the progress is to use the `RootProvider` component and the `useProgress` hook. This way
you can access the state and methods from outside the component.

```tsx
import { Progress, useProgress } from '@ark-ui/solid/progress'
import button from 'styles/button.module.css'
import styles from 'styles/progress.module.css'

export const RootProvider = () => {
  const progress = useProgress()

return (
    <div class="stack">
      <button class={button.Root} onClick={() => progress().setToMax()}>
        Set to Max
      </button>
      <Progress.RootProvider class={styles.Root} value={progress}>
        <Progress.Label class={styles.Label}>Label</Progress.Label>
        <Progress.ValueText class={styles.ValueText} />
        <Progress.Track class={styles.Track}>
          <Progress.Range class={styles.Range} />
        </Progress.Track>
      </Progress.RootProvider>
    </div>
  )
}
```