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

## Anatomy

To set up the pagination 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 pagination package into your project

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

The pagination package exports two key functions:

- `machine` â The state machine logic for the pagination 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.

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

  const id = $props.id()
  const service = useMachine(pagination.machine, {
    id,
    count: data.length,
  })
  const api = $derived(pagination.connect(service, normalizeProps))
</script>

<div>
  {#if api.totalPages > 1}
    <nav {...api.getRootProps()}>
      <ul>
        <li>
          <a href="#previous" {...api.getPrevTriggerProps()}>
            Previous <span class="visually-hidden">Page</span>
          </a>
        </li>
        {#each api.pages as page, i}
          {#if page.type === "page"}
            <li>
              <a href={`#${page.value}`} {...api.getItemProps(page)}>
                {page.value}
              </a>
            </li>
          {:else}
            <li>
              <span {...api.getEllipsisProps({ index: i })}>&#8230;</span>
            </li>
          {/if}
        {/each}
        <li>
          <a href="#next" {...api.getNextTriggerProps()}>
            Next <span class="visually-hidden">Page</span>
          </a>
        </li>
      </ul>
    </nav>
  {/if}
</div>
```

```jsx
const api = connect(service)

// You can slice the data, to get data for current page
const currentPageData = data.slice(api.pageRange.start, api.pageRange.end)

api.page
// => 1

api.setPage(3)
// page => 3

api.previousPage
// => 2

api.nextPage
// => 4

api.pages
/*
    [
      {
        "type": "page",
        "value": 1,
      },
      {
        "type": "page",
        "value": 2,
      },
      {
        "type": "ellipsis",
      },
      {
        "type": "page",
        "value": 3,
      },
      {
        "type": "page",
        "value": 4,
      },
    ]
*/

api.pageRange
// => { start: 4, end: 13 }
```

## Styling guide

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

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

[data-part="item"] {
  /* styles for the pagination's items */
}

[data-part="ellipsis"] {
  /* styles for the pagination's ellipsis */
}

[data-part="prev-trigger"] {
  /* styles for the pagination's previous page trigger */
}

[data-part="next-trigger"] {
  /* styles for the pagination's next page trigger */
}

/* We add a data-disabled attribute to the prev/next items when on the first/last page  */

[data-part="prev-trigger"][data-disabled] {
  /* styles for the pagination's previous page trigger when on first page */
}

[data-part="next-trigger"][data-disabled] {
  /* styles for the pagination's next page trigger when on first page */
}
```

## Methods and Properties

### Machine Context

The pagination machine exposes the following context properties:

**`ids`**
Type: `Partial<{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }>`
Description: The ids of the elements in the accordion. Useful for composition.

**`translations`**
Type: `IntlTranslations`
Description: Specifies the localized strings that identifies the accessibility elements and their states

**`count`**
Type: `number`
Description: Total number of data items

**`pageSize`**
Type: `number`
Description: The controlled number of data items per page

**`defaultPageSize`**
Type: `number`
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.

**`siblingCount`**
Type: `number`
Description: Number of pages to show beside active page

**`page`**
Type: `number`
Description: The controlled active page

**`defaultPage`**
Type: `number`
Description: The initial active page when rendered.
Use when you don't need to control the active page of the pagination.

**`onPageChange`**
Type: `(details: PageChangeDetails) => void`
Description: Called when the page number is changed

**`onPageSizeChange`**
Type: `(details: PageSizeChangeDetails) => void`
Description: Called when the page size is changed

**`type`**
Type: `"button" | "link"`
Description: The type of the trigger element

**`getPageUrl`**
Type: `(details: PageUrlDetails) => string`
Description: Function to generate href attributes for pagination links.
Only used when `type` is set to "link".

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

**`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 pagination `api` exposes the following methods:

**`page`**
Type: `number`
Description: The current page.

**`count`**
Type: `number`
Description: The total number of data items.

**`pageSize`**
Type: `number`
Description: The number of data items per page.

**`totalPages`**
Type: `number`
Description: The total number of pages.

**`pages`**
Type: `Pages`
Description: The page range. Represented as an array of page numbers (including ellipsis)

**`previousPage`**
Type: `number`
Description: The previous page.

**`nextPage`**
Type: `number`
Description: The next page.

**`pageRange`**
Type: `PageRange`
Description: The page range. Represented as an object with `start` and `end` properties.

**`slice`**
Type: `<V>(data: V[]) => V[]`
Description: Function to slice an array of data based on the current page.

**`setPageSize`**
Type: `(size: number) => void`
Description: Function to set the page size.

**`setPage`**
Type: `(page: number) => void`
Description: Function to set the current page.

**`goToNextPage`**
Type: `VoidFunction`
Description: Function to go to the next page.

**`goToPrevPage`**
Type: `VoidFunction`
Description: Function to go to the previous page.

**`goToFirstPage`**
Type: `VoidFunction`
Description: Function to go to the first page.

**`goToLastPage`**
Type: `VoidFunction`
Description: Function to go to the last page.

### Data Attributes

**`Item`**

**`data-scope`**: pagination
**`data-part`**: item
**`data-index`**: The index of the item
**`data-selected`**: Present when selected

**`PrevTrigger`**

**`data-scope`**: pagination
**`data-part`**: prev-trigger
**`data-disabled`**: Present when disabled

**`NextTrigger`**

**`data-scope`**: pagination
**`data-part`**: next-trigger
**`data-disabled`**: Present when disabled
## Resources


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



**Features**

- Includes button to toggle visibility of the password
- Automatic focus restoration to the input
- Resets visibility to hidden after form submission
- Ignore password management apps like 1Password, LastPass, etc.

## Installation

To use the password-input machine in your project, run the following command in
your command line:

```bash
npm install @zag-js/password-input @zag-js/svelte