# or
yarn add @zag-js/collapsible @zag-js/svelte
```

## Usage

First, import the collapsible package into your project

```jsx
import * as collapsible from "@zag-js/collapsible"
```

The collapsible package exports two key functions:

- `machine` â The state machine logic for the collapsible widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

> You'll also need to provide a unique `id` to the `useMachine` hook. This is
> used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the
collapsible machine in your project ð¥

```svelte
<script lang="ts">
  import * as collapsible from "@zag-js/collapsible"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(collapsible.machine, ({ id }))
  const api = $derived(collapsible.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <button {...api.getTriggerProps()}>Collapse Trigger</button>
  <div {...api.getContentProps()}>Collape Content</div>
</div>
```

### Setting the initial state

Pass the `defaultOpen` machine context property to the machine function to set
the initial state.

```jsx
const service = useMachine(collapsible.machine, {
  defaultOpen: true,
})
```

### Controlled collapsible

To control the open state programmatically, pass the `open` and `onOpenChange`
properties to the machine function.

```svelte
<script lang="ts">
  let open = $state(false)

  const service = useMachine(collapsible.machine, {
    get open() {
      return open
    },
    onOpenChange(details) {
      open = details.open
    },
  })
</script>
```

### Listening for changes

When the collapsible state changes, the `onOpenChange` callback is invoked.

```jsx {2-5}
const service = useMachine(collapsible.machine, {
  onOpenChange(details) {
    // details => { open: boolean }
    console.log("collapsible open:", details.open)
  },
})
```

### Disabling the collapsible

Set the `disabled` machine context property to `true` to disable the
collapsible.

```jsx {2}
const service = useMachine(collapsible.machine, {
  disabled: true,
})
```

### Partial collapse (setting minimum dimensions)

Use the `collapsedHeight` or `collapsedWidth` machine context properties to
create a "partially collapsed" state. When collapsed, the content will maintain
the specified minimum dimensions instead of collapsing to `0px`.

```jsx {3}
const service = useMachine(collapsible.machine, {
  // Content shows 100px height when collapsed
  collapsedHeight: "100px",
})
```

This is useful for creating "show more/less" content sections or preview states
where a portion of the content shows even when collapsed.

### Animating the collapsible

Use CSS animations to animate the collapsible when it expands and collapses. The
`--height` and `--width` custom properties are attached to the content part.

```css
@keyframes expand {
  from {
    height: var(--collapsed-height, 0);
  }
  to {
    height: var(--height);
  }
}

@keyframes collapse {
  from {
    height: var(--height);
  }
  to {
    height: var(--collapsed-height, 0);
  }
}

[data-scope="collapsible"][data-part="content"] {
  overflow: hidden;
  max-width: 400px;
}

[data-scope="collapsible"][data-part="content"][data-state="open"] {
  animation: expand 110ms cubic-bezier(0, 0, 0.38, 0.9);
}

[data-scope="collapsible"][data-part="content"][data-state="closed"] {
  animation: collapse 110ms cubic-bezier(0, 0, 0.38, 0.9);
}
```

## Styling guide

Earlier, we mentioned that each collapsible part has a `data-part` attribute
added to them to select and style them in the DOM.

### Open and closed state

When a collapsible is expanded or collapsed, a `data-state` attribute is set on
the root, trigger and content elements. This attribute is removed when it is
closed.

```css
[data-part="root"][data-state="open|closed"] {
  /* styles for the collapsible is open or closed state */
}

[data-part="trigger"][data-state="open|closed"] {
  /* styles for the collapsible is open or closed state */
}

[data-part="content"][data-state="open|closed"] {
  /* styles for the collapsible is open or closed state */
}
```

### Focused state

When a collapsible's trigger is focused, a `data-focus` attribute is set on the
root, trigger and content.

```css
[data-part="root"][data-focus] {
  /* styles for the item's focus state */
}

[data-part="trigger"][data-focus] {
  /* styles for the content's focus state */
}

[data-part="content"][data-focus] {
  /* styles for the content's focus state */
}
```

### Collapse animation

The collapsible content provides `--width`, `--height`, `--collapsed-width`, and
`--collapsed-height` CSS variables that can be used to create smooth animations.
These variables are automatically calculated and updated based on the content's
dimensions.

```css
[data-scope="collapsible"][data-part="content"][data-state="open"] {
  animation: slideDown 200ms ease;
}

[data-scope="collapsible"][data-part="content"][data-state="closed"] {
  animation: slideUp 200ms ease;
}

@keyframes slideDown {
  from {
    opacity: 0.01;
    height: 0;
  }
  to {
    opacity: 1;
    height: var(--height);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    height: var(--height);
  }
  to {
    opacity: 0.01;
    height: 0;
  }
}
```

## Methods and Properties

The collapsible's `api` exposes the following methods and properties:

### Machine Context

The collapsible machine exposes the following context properties:

**`ids`**
Type: `Partial<{ root: string; content: string; trigger: string; }>`
Description: The ids of the elements in the collapsible. Useful for composition.

**`open`**
Type: `boolean`
Description: The controlled open state of the collapsible.

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

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Description: The callback invoked when the open state changes.

**`onExitComplete`**
Type: `VoidFunction`
Description: The callback invoked when the exit animation completes.

**`disabled`**
Type: `boolean`
Description: Whether the collapsible is disabled.

**`collapsedHeight`**
Type: `string | number`
Description: The height of the content when collapsed.

**`collapsedWidth`**
Type: `string | number`
Description: The width of the content when collapsed.

**`id`**
Type: `string`
Description: The unique identifier of the machine.

**`getRootNode`**
Type: `() => ShadowRoot | Node | Document`
Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

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

### Machine API

The collapsible `api` exposes the following methods:

**`open`**
Type: `boolean`
Description: Whether the collapsible is open.

**`visible`**
Type: `boolean`
Description: Whether the collapsible is visible (open or closing)

**`disabled`**
Type: `boolean`
Description: Whether the collapsible is disabled

**`setOpen`**
Type: `(open: boolean) => void`
Description: Function to open or close the collapsible.

**`measureSize`**
Type: `VoidFunction`
Description: Function to measure the size of the content.

### Data Attributes

**`Root`**

**`data-scope`**: collapsible
**`data-part`**: root
**`data-state`**: "open" | "closed"

**`Content`**

**`data-scope`**: collapsible
**`data-part`**: content
**`data-collapsible`**: 
**`data-state`**: "open" | "closed"
**`data-disabled`**: Present when disabled
**`data-has-collapsed-size`**: Present when the content has collapsed width or height

**`Trigger`**

**`data-scope`**: collapsible
**`data-part`**: trigger
**`data-state`**: "open" | "closed"
**`data-disabled`**: Present when disabled

**`Indicator`**

**`data-scope`**: collapsible
**`data-part`**: indicator
**`data-state`**: "open" | "closed"
**`data-disabled`**: Present when disabled

### CSS Variables

<CssVarTable name="collapsible" />

## Accessibility

Adheres to the
[Disclosure WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure).

### Keyboard Interactions

**`Space`**
Description: Opens/closes the collapsible.

**`Enter`**
Description: Opens/closes the collapsible.
The color picker is an input widget used to select a color value from a
predefined list or a color area.

This component builds on top of the native `<input type=color>` experience and
provides a more customizable and consistent user experience.

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/color-picker)
[Logic Visualizer](https://zag-visualizer.vercel.app/color-picker)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/color-picker)



**Features**

- Support for custom color area
- Support for RGBA, HSLA, HEX, and HSBA formats
- Support for channel inputs and sliders
- Support for mouse, touch, and keyboard interactions
- Support for form submission and reset events
- Support for named css colors

## Installation

To use the color picker machine in your project, run the following command in
your command line:

```bash
npm install @zag-js/color-picker @zag-js/svelte