# or
yarn add @zag-js/hover-card @zag-js/svelte
```

## Anatomy

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

```jsx
import * as hoverCard from "@zag-js/hover-card"
```

The hover card package exports two key functions:

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

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

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

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

<a href="https://twitter.com/zag_js" target="_blank" {...api.getTriggerProps()}> Twitter </a>

{#if api.open}
  <div use:portal {...api.getPositionerProps()}>
    <div {...api.getPositionerProps()}>
      <div {...api.getContentProps()}>
        <div {...api.getArrowProps()}>
          <div {...api.getArrowTipProps()}></div>
        </div>
        Twitter Preview
      </div>
    </div>
  </div>
{/if}
```

### Setting the initial state

To make an hover card open by default, set the `defaultOpen` property to `true`

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

### Listening for open state changes

When the hover card is `opened` or `closed`, the `onOpenChange` callback is
invoked.

```jsx {2-5}
const service = useMachine(hoverCard.machine, {
  onOpenChange(details) {
    // details => { open: boolean }
    console.log("hovercard is:", details.open ? "opened" : "closed")
  },
})
```

## Styling guide

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

```css
[data-part="trigger"] {
  /* styles for trigger */
}

[data-part="content"] {
  /* styles for content */
}
```

### Open and closed state

The hover card exposes a `data-state` attribute that can be used to style the
hover card based on its open-close state.

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

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

### Arrow

Zag exposes some variable that can be used to style the arrow.

```css
[data-part="arrow"] {
  /* styles for arrow */
  --arrow-background: white;
  --arrow-size: 8px;
}
```

```css
[data-part="content"] {
  /* styles for content */
}
```

## Methods and Properties

### Machine Context

The hover card machine exposes the following context properties:

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

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

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

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

**`disabled`**
Type: `boolean`
Description: Whether the hover card is disabled

**`open`**
Type: `boolean`
Description: The controlled open state of the hover card

**`defaultOpen`**
Type: `boolean`
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.

**`positioning`**
Type: `PositioningOptions`
Description: The user provided options used to position the popover content

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

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

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

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

### Machine API

The hover card `api` exposes the following methods:

**`open`**
Type: `boolean`
Description: Whether the hover card is open

**`setOpen`**
Type: `(open: boolean) => void`
Description: Function to open the hover card

**`reposition`**
Type: `(options?: Partial<PositioningOptions>) => void`
Description: Function to reposition the popover

### Data Attributes

**`Trigger`**

**`data-scope`**: hover-card
**`data-part`**: trigger
**`data-placement`**: The placement of the trigger
**`data-state`**: "open" | "closed"

**`Content`**

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

### CSS Variables

<CssVarTable name="hover-card" />

## Accessibility

### Keyboard Interactions

The hover card is intended for mouse users only so will not respond to keyboard
navigation.
The image cropper machine keeps track of the crop rectangle, zoom, rotation, pan
offset, flip state, and every gesture required to edit them. It exposes a set of
DOM props so you can render your own viewport, frame, and handles in any
framework.

## Resources


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



**Features**

- Pointer, wheel, and pinch gestures that pan, zoom, rotate, and flip the image
- Handles that resize the crop area with snapping, aspect-ratio locking, and
  keyboard nudges
- Supports rectangular or circular crops, fixed crop windows, and constrained
  min/max dimensions
- Fully controllable zoom/rotation/flip values with change callbacks
- Programmatic helpers such as `api.resize` and `api.getCroppedImage`
- Accessible slider semantics, custom translations, and data attributes for
  styling

## Installation

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

```bash
npm install @zag-js/image-cropper @zag-js/svelte