# or
yarn add @zag-js/clipboard @zag-js/react
```

## Anatomy

To set up the clipboard correctly, you'll need to understand its anatomy and how
we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM`.



## Usage

First, import the clipboard package into your project

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

The clipboard package exports two key functions:

- `machine` â The state machine logic for the clipboard 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
clipboard machine in your project ð¥

```tsx
import * as clipboard from "@zag-js/clipboard"
import { useMachine, normalizeProps } from "@zag-js/react"
import { ClipboardCheck, ClipboardCopyIcon } from "lucide-react"
import { useId } from "react"

function Clipboard() {
  const service = useMachine(clipboard.machine, {
    id: useId(),
    value: "https://github.com/chakra-ui/zag",
  })

  const api = clipboard.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <label {...api.getLabelProps()}>Copy this link</label>
      <div {...api.getControlProps()}>
        <input {...api.getInputProps()} />
        <button {...api.getTriggerProps()}>
          {api.copied ? <ClipboardCheck /> : <ClipboardCopyIcon />}
        </button>
      </div>
    </div>
  )
}
```

### Setting the clipboard value

You can set the value to copy by passing a `value` prop to the `machine`
context.

```jsx {2}
const service = useMachine(clipboard.machine, {
  value: "Hello, world!",
})
```

### Listening to copy events

When the value is copied to the clipboard, the `onStatusChange` event is fired.
You can listen to this event and perform any action you want.

```jsx {2}
const service = useMachine(clipboard.machine, {
  onStatusChange: (details) => {
    console.log("Copy status changed to", details.copied)
  },
})
```

### Checking if the value is copied

Use the `api.copied` property to check if the value is copied to the clipboard.

```jsx {2}
const api = clipboard.connect(service)

if (api.copied) {
  console.log("Value is copied to the clipboard")
}
```

### Changing the timeout

By default, the clipboard machine will automatically reset the state to `idle`
after `3000ms`. You can change this timeout by passing a `timeout` option to the
`machine` context.

```jsx {2}
const service = useMachine(clipboard.machine, {
  timeout: 5000,
})
```

## Styling guide

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

```css
[data-scope="clipboard"][data-part="root"] {
  /* styles for the root part */
}
```

## Methods and Properties

### Machine Context

The clipboard machine exposes the following context properties:

**`ids`**
Type: `Partial<{ root: string; input: string; label: string; }>`
Description: The ids of the elements in the clipboard. Useful for composition.

**`value`**
Type: `string`
Description: The controlled value of the clipboard

**`defaultValue`**
Type: `string`
Description: The initial value to be copied to the clipboard when rendered.
Use when you don't need to control the value of the clipboard.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Description: The function to be called when the value changes

**`onStatusChange`**
Type: `(details: CopyStatusDetails) => void`
Description: The function to be called when the value is copied to the clipboard

**`timeout`**
Type: `number`
Description: The timeout for the copy operation

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

### Machine API

The clipboard `api` exposes the following methods:

**`copied`**
Type: `boolean`
Description: Whether the value has been copied to the clipboard

**`value`**
Type: `string`
Description: The value to be copied to the clipboard

**`setValue`**
Type: `(value: string) => void`
Description: Set the value to be copied to the clipboard

**`copy`**
Type: `VoidFunction`
Description: Copy the value to the clipboard

### Data Attributes

**`Root`**

**`data-scope`**: clipboard
**`data-part`**: root
**`data-copied`**: Present when copied state is true

**`Label`**

**`data-scope`**: clipboard
**`data-part`**: label
**`data-copied`**: Present when copied state is true

**`Control`**

**`data-scope`**: clipboard
**`data-part`**: control
**`data-copied`**: Present when copied state is true

**`Input`**

**`data-scope`**: clipboard
**`data-part`**: input
**`data-copied`**: Present when copied state is true
**`data-readonly`**: Present when read-only

**`Trigger`**

**`data-scope`**: clipboard
**`data-part`**: trigger
**`data-copied`**: Present when copied state is true
A collapsible is a component which expands and collapses a panel.

## Resources


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



**Features**

- Can be controlled or uncontrolled
- Works for width and height collapsibles

## Installation

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

```bash
npm install @zag-js/collapsible @zag-js/react