# `PhiaUi.Components.DropZone`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/interaction/drop_zone.ex#L1)

Drop zone and drag transfer list components for PhiaUI.

- `drop_zone/1` — a styled drop target for files or arbitrary drag payloads,
  backed by the `PhiaDropZone` hook.
- `drag_transfer_list/1` — a dual-list transfer widget backed by
  `PhiaDragTransferList`, with drag-and-drop and button-click fallbacks.

## drop_zone example

    <.drop_zone id="file-zone" label="Drop files here" on_drop="file_dropped"
      state={@zone_state} />

## drag_transfer_list example

    <.drag_transfer_list
      id="role-picker"
      source_label="Available roles"
      target_label="Assigned roles"
      source_items={@available}
      target_items={@assigned}
      on_transfer="roles_updated"
    />

# `drag_transfer_list`

Renders a dual-list transfer widget with drag-and-drop and button fallbacks.

Each item in `source_items` / `target_items` must be a map with `:id` and
`:label` keys. The hook emits `on_transfer` with:
`%{item_id: "...", direction: "to_target" | "to_source"}`.

## Attributes

* `id` (`:string`) (required)
* `source_label` (`:string`) - Defaults to `"Available"`.
* `target_label` (`:string`) - Defaults to `"Selected"`.
* `source_items` (`:list`) (required)
* `target_items` (`:list`) (required)
* `on_transfer` (`:string`) - Defaults to `"items_transferred"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `drop_zone`

Renders a dashed-border drop zone target.

The hook transitions `data-state` between `idle → hover → active → idle` as
the user drags over the zone, and emits `on_drop` on file release.

State colours:
- `idle`   — muted border, muted background
- `hover`  — primary/60 border, primary/5 background
- `active` — primary border, primary/10 background (animated pulse)
- `error`  — destructive border and background

## Attributes

* `id` (`:string`) (required)
* `state` (`:string`) - Defaults to `"idle"`. Must be one of `"idle"`, `"hover"`, `"active"`, or `"error"`.
* `label` (`:string`) - Defaults to `"Drop files here"`.
* `accepts` (`:string`) - Defaults to `"*"`.
* `on_drop` (`:string`) - Defaults to `"zone_drop"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`
* `icon`

---

*Consult [api-reference.md](api-reference.md) for complete listing*