laif-ds/dist/agent-docs/components/Popover.md

Design System di Laif con componenti React basati su principi di Atomic Design

# Popover

## Overview

Small floating content panel anchored to a trigger. Useful for lightweight forms, hints, and quick actions.

---

## Subcomponents & Props

- **Popover**: Root container. Extends Radix Popover Root props.
- **PopoverTrigger**: The element that opens the popover (often `asChild`).
- **PopoverContent**: Floating panel.
  - `align`: `start | center | end` (default `center`)
  - `side`: `top | right | bottom | left` (Radix prop)
  - `sideOffset`: `number` (default `4`)
  - `container`: `HTMLElement | null` (portal target)
- **PopoverAnchor**: Optional explicit anchor element.

---

## Behavior

- **Positioning**: Uses Radix positioning with transform-origin aware animations.
- **Focus management**: Traps focus while open, returns focus on close.
- **Accessibility**: Proper aria attributes via Radix; close on outside click/Escape.

---

## Examples

### Basic

```tsx
import { Button, Input, Label } from "laif-ds";
import { Popover, PopoverTrigger, PopoverContent } from "laif-ds";

export function BasicPopover() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="leading-none font-medium">Dimensions</h4>
            <p className="text-d-muted-foreground text-sm">
              Set layer dimensions.
            </p>
          </div>
          <div className="grid gap-2">
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="width">Width</Label>
              <Input
                id="width"
                defaultValue="100%"
                className="col-span-2 h-8"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="maxWidth">Max. width</Label>
              <Input
                id="maxWidth"
                defaultValue="300px"
                className="col-span-2 h-8"
              />
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}
```

### Positioned

```tsx
import { Button } from "laif-ds";
import { Popover, PopoverTrigger, PopoverContent } from "laif-ds";

export function PositionedPopovers() {
  return (
    <div className="flex space-x-4">
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">Top</Button>
        </PopoverTrigger>
        <PopoverContent side="top" className="w-40">
          <p className="text-sm">Appears on top.</p>
        </PopoverContent>
      </Popover>
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">Right</Button>
        </PopoverTrigger>
        <PopoverContent side="right" className="w-40">
          <p className="text-sm">Appears on the right.</p>
        </PopoverContent>
      </Popover>
    </div>
  );
}
```

---

## Notes

- **Portal container**: Use `container` on `PopoverContent` to mount into a specific element.
- **Sizing**: Set width/height via utility classes; content scrolls when needed.