<button onClick={() => setTrapped(false)}>End Trap</button>
        </div>
      </FocusTrap>
    </>
  )
}
```

### Autofocus

The focus trap respects elements with the `autofocus` attribute.

```tsx
import { FocusTrap } from '@ark-ui/solid/focus-trap'
import { Show, createSignal } from 'solid-js'

export const Autofocus = () => {
  const [trapped, setTrapped] = createSignal(false)
  let buttonRef!: HTMLButtonElement

return (
    <div>
      <button ref={buttonRef} onClick={() => setTrapped((v) => !v)}>
        {trapped() ? 'End Trap' : 'Start Trap'}
      </button>
      <Show when={trapped()}>
        <FocusTrap disabled={!trapped()} setReturnFocus={buttonRef}>
          <div
            style={{
              display: 'flex',
              'flex-direction': 'column',
              gap: '1rem',
              'padding-block': '1rem',
            }}
          >
            <input type="text" placeholder="Regular input" />
            <input type="text" placeholder="Autofocused input" autofocus />
            <button onClick={() => setTrapped(false)}>End Trap</button>
          </div>
        </FocusTrap>
      </Show>
    </div>
  )
}
```

### Initial Focus

Use the `initialFocus` prop to set the element that should receive initial focus when the trap is activated.

```tsx
import { FocusTrap } from '@ark-ui/solid/focus-trap'
import { createSignal } from 'solid-js'

export const InitialFocus = () => {
  const [trapped, setTrapped] = createSignal(false)
  const toggle = () => setTrapped((v) => !v)

let inputRef!: HTMLInputElement

return (
    <div>
      <button onClick={toggle}>{trapped() ? 'End Trap' : 'Start Trap'}</button>
      <FocusTrap disabled={!trapped()} initialFocus={() => inputRef}>
        <div
          style={{
            display: 'flex',
            'flex-direction': 'column',
            gap: '1rem',
            'padding-block': '1rem',
          }}
        >
          <input type="text" placeholder="First input" />
          <input ref={inputRef} type="text" placeholder="Second input (initial focus)" />
          <textarea placeholder="textarea" />
          <button onClick={toggle}>End Trap</button>
        </div>
      </FocusTrap>
    </div>
  )
}
```

## API Reference

# Format Byte

## Usage

The byte formatting component extends the number formatting capabilities to handle byte-specific formatting, including
automatic unit conversion and display options.

```jsx
import { Format } from '@ark-ui/react'
```

## Examples

### Basic

Use the `Format.Byte` component to format a byte value with default options.

```tsx
import { Format } from '@ark-ui/solid/format'

export const ByteBasic = () => {
  return (
    <div>
      File size: <Format.Byte value={1450.45} />
    </div>
  )
}
```

### Sizes

Use the `sizes` prop to specify custom byte sizes for formatting.

```tsx
import { Format } from '@ark-ui/solid/format'
import { For } from 'solid-js'

export const ByteSizes = () => {
  const byteSizes = [50, 5000, 5000000, 5000000000]

return (
    <div>
      <For each={byteSizes}>
        {(size) => (
          <div>
            <Format.Byte value={size} />
          </div>
        )}
      </For>
    </div>
  )
}
```

### Locale

Use the `locale` prop to format the byte value according to a specific locale.

```tsx
import { Format } from '@ark-ui/solid/format'
import { LocaleProvider } from '@ark-ui/solid/locale'
import { For } from 'solid-js'

export const ByteWithLocale = () => {
  const locales = ['de-DE', 'zh-CN']
  const value = 1450.45

return (
    <div>
      <For each={locales}>
        {(locale) => (
          <LocaleProvider locale={locale}>
            <Format.Byte value={value} />
          </LocaleProvider>
        )}
      </For>
    </div>
  )
}
```

### Unit

Use the `unit` prop to specify the unit of the byte value.

```tsx
import { Format } from '@ark-ui/solid/format'

export const ByteWithUnit = () => {
  const value = 1450.45
  const unit = 'bit'

return (
    <div>
      File size: <Format.Byte value={value} unit={unit} />
    </div>
  )
}
```

### Unit Display

Use the `unitDisplay` prop to specify the display of the unit.

```tsx
import { Format } from '@ark-ui/solid/format'
import { For } from 'solid-js'

export const ByteWithUnitDisplay = () => {
  const value = 50345.53
  const unitDisplays = ['narrow', 'short', 'long'] as const

return (
    <div>
      <For each={unitDisplays}>{(unitDisplay) => <Format.Byte value={value} unitDisplay={unitDisplay} />}</For>
    </div>
  )
}
```

# Format Number

## Usage

The number formatting logic is handled by the native `Intl.NumberFormat` API and smartly cached to avoid performance
issues when using the same locale and options.

```jsx
import { Format } from '@ark-ui/react'
```

## Examples

### Basic

Use the `Format.Number` component to format a number with default options.

```tsx
import { Format } from '@ark-ui/solid/format'

export const NumberBasic = () => {
  return <Format.Number value={1450.45} />
}
```

### Percentage

Use the `style="percent"` prop to format the number as a percentage.

```tsx
import { Format } from '@ark-ui/solid/format'

export const NumberWithPercentage = () => {
  return <Format.Number value={0.145} style="percent" maximumFractionDigits={2} minimumFractionDigits={2} />
}
```

### Currency

Use the `style="currency"` prop along with the `currency` prop to format the number as a currency.

```tsx
import { Format } from '@ark-ui/solid/format'

export const NumberWithCurrency = () => {
  return <Format.Number value={1234.45} style="currency" currency="USD" />
}
```

### Locale

Use the `locale` prop to format the number according to a specific locale.

```tsx
import { Format } from '@ark-ui/solid/format'
import { LocaleProvider } from '@ark-ui/solid/locale'

export const NumberWithLocale = () => {
  return (
    <LocaleProvider locale="de-DE">
      <Format.Number value={1450.45} />
    </LocaleProvider>
  )
}
```

### Unit

Use the `style="unit"` prop along with the `unit` prop to format the number with a specific unit.

```tsx
import { Format } from '@ark-ui/solid/format'

export const NumberWithUnit = () => {
  return <Format.Number value={384.4} style="unit" unit="kilometer" />
}
```

### Compact Notation

Use the `notation="compact"` prop to format the number in compact notation.

```tsx
import { Format } from '@ark-ui/solid/format'

export const NumberWithCompact = () => {
  return <Format.Number value={1500000} notation="compact" compactDisplay="short" />
}
```

# Format Relative Time

## Usage

The relative time formatting logic is handled by the native `Intl.RelativeTimeFormat` API and smartly cached to avoid
performance issues when using the same locale and options.

```jsx
import { Format } from '@ark-ui/react'
```

## Examples

### Basic

Use the `Format.RelativeTime` component to format a relative time with default options.

```tsx
import { Format } from '@ark-ui/solid/format'

export const RelativeTimeBasic = () => {
  return (
    <div>
      Edited <Format.RelativeTime value={new Date('2025-05-05')} />
    </div>
  )
}
```

### Short

Use the `style="short"` prop to format the relative time in short format.

```tsx
import { Format } from '@ark-ui/solid/format'

export const RelativeTimeShort = () => {
  return (
    <div>
      Edited <Format.RelativeTime value={new Date('2025-05-05')} style="short" />
    </div>
  )
}
```

# Frame

## Usage

The `Frame` component is used to render a component in an iframe.

- Tracks the size of the content and exposes them via css variables.
- Support for `head` prop to inject scripts and styles.
- Support for mount and unmount callbacks.

```jsx
import { Frame } from '@ark-ui/react'
```

## Examples

### Basic

Wrap your component in the `Frame` component to render it in an iframe.

```tsx
import { Frame } from '@ark-ui/solid/frame'

export const Basic = () => {
  return (
    <Frame
      title="Custom Frame"
      style={{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }}
      head={<style>{'body { background-color: #f0f0f0; }'}</style>}
    >
      <div style={{ padding: '40px' }}>
        <h1>Hello from inside the frame!</h1>
        <p>This content is rendered within our custom frame component using a Portal.</p>
      </div>
    </Frame>
  )
}
```

### Injecting Script

Using the `onMount` prop, you can inject a script into the iframe.

```tsx
import { Frame } from '@ark-ui/solid/frame'

export const Script = () => {
  let ref: HTMLIFrameElement | undefined
  return (
    <Frame
      ref={ref}
      title="Custom Frame"
      onMount={() => {
        const doc = ref?.contentDocument
        if (!doc) return
        const script = doc.createElement('script')
        script.innerHTML = 'console.log("Hello from inside the frame!")'
        doc.body.appendChild(script)
      }}
      style={{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }}
    >
      <div style={{ padding: '40px' }}>
        <h1>Hello from inside the frame!</h1>
        <p>This content is rendered within our custom frame component using a Portal.</p>
      </div>
    </Frame>
  )
}
```

### Custom src doc

Use the `srcDoc` prop to specify the HTML content of the page to use in the iframe.

```tsx
import { Frame } from '@ark-ui/solid/frame'

const srcDoc = `<html><head>
<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<base target=_blank>
</head><body style='overflow: hidden'><div></div></body></html>`

export const SrcDoc = () => {
  return (
    <Frame title="Custom Frame" style={{ border: '1px solid #ccc', width: '100%' }} srcdoc={srcDoc}>
      <h1 style={{ 'font-family': 'Open Sans, sans-serif' }}>Hello from inside the frame!</h1>
      <p>This content is rendered within our custom frame component using a Portal.</p>
      <p>The frame has custom initial content, including Font Awesome and Open Sans font.</p>
    </Frame>
  )
}
```

# Highlight

## Usage

The Highlight component takes a `text` prop containing the full text and a `query` prop specifying the text to
highlight. It then renders the text with highlighted portions wrapped in `<mark>` tags.

```tsx
import { Highlight } from '@ark-ui/solid/highlight'

export const Basic = () => {
  return (
    <Highlight
      query="ipsum"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
    />
  )
}
```

### Multiple Queries

You can highlight multiple terms by passing an array of strings to the `query` prop.

```tsx
import { Highlight } from '@ark-ui/solid/highlight'

export const Multiple = () => {
  return (
    <Highlight
      query={['ipsum', 'amet']}
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
    />
  )
}
```

### Case Sensitivity

By default, the highlighting is case-sensitive. Use the `ignoreCase` prop to make it case-insensitive.

```tsx
import { Highlight } from '@ark-ui/solid/highlight'

export const IgnoreCase = () => (
  <Highlight text="The quick brown Fox jumps over the lazy Dog." query={['fox', 'dog']} ignoreCase />
)
```

### Match All

By default, the Highlight component matches the first occurrence of the query. To highlight all occurrences of the
query, set the `matchAll` prop to `true`.

```tsx
import { Highlight } from '@ark-ui/solid/highlight'

export const MatchAll = () => (
  <div>
    <h3>Match All</h3>
    <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={true} />

<h3>Match First Occurrence Only</h3>
    <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={false} />
  </div>
)
```

## API Reference

### Highlight

#### Props

**`query`**
Type: `string | string[]`
Required: true
Default Value: `undefined`
Description: The query to highlight in the text

**`text`**
Type: `string`
Required: true
Default Value: `undefined`
Description: The text to highlight

**`ignoreCase`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to ignore case while matching

**`matchAll`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to match multiple instances of the query

## Customization

The Highlight component wraps matched text in `<mark>` tags.

```tsx
<Highlight text="The quick brown fox jumps over the lazy fox." query="fox" className="highlighted-text" />
```

Style the `mark` tags using CSS to customize the appearance of highlighted text.

```css
.highlighted-text {
  background-color: yellow;
}
```

# Locale

## Setup

The `LocaleProvider` component sets the locale for your app, formatting dates, numbers, and other locale-specific data.

> **Note:** If no `LocaleProvider` is setup, the default locale for the app will be `en-US` and therefore the direction
> will be `ltr`.

```tsx
import { LocaleProvider } from '@ark-ui/solid/locale'

export const App = () => {
  return <LocaleProvider locale="de-DE">{/* Your App */}</LocaleProvider>
}
```

## Usage

To access the current locale and direction settings, use the `useLocaleContext` hook.

```tsx
import { useLocaleContext } from '@ark-ui/solid/locale'

export const Usage = () => {
  const locale = useLocaleContext()

return <pre>{JSON.stringify(locale(), null, 2)}</pre>
}
```

## API Reference

### LocaleProvider

#### Props

**`locale`**
Type: `string`
Required: true
Default Value: `'en-US'`
Description: The locale to use for the application.

# Presence

## Examples

By default the child component starts out as hidden and remains hidden after the `present` state is toggled off. This is
useful for situations where the element needs to be hidden initially and continue to stay hidden after its presence is
no longer required.

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'

export const Basic = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present())}>
        Toggle
      </button>
      <Presence present={present()}>Hidden and Hidden</Presence>
    </>
  )
}
```

### Lazy Mount

To delay the mounting of a child component until the `present` prop is set to true, use the `lazyMount` prop:

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'

export const LazyMount = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present())}>
        Toggle
      </button>
      <Presence present={present()} lazyMount>
        Unmounted and Hidden
      </Presence>
    </>
  )
}
```

### Unmount on Exit

To remove the child component from the DOM when it's not present, use the `unmountOnExit` prop:

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'

export const UnmountOnExit = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present())}>
        Toggle
      </button>
      <Presence present={present()} unmountOnExit>
        Hidden and Unmounted on Exit
      </Presence>
    </>
  )
}
```

### Combining Lazy Mount and Unmount on Exit

Both `lazyMount` and `unmountOnExit` can be combined for a component to be mounted only when it's present and to be
unmounted when it's no longer present:

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'

export const LazyMountAndUnmountOnExit = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present())}>
        Toggle
      </button>
      <Presence present={present()} lazyMount unmountOnExit>
        Lazy Mount and Unmounted on Exit
      </Presence>
    </>
  )
}
```

## API Reference

### Presence

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

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