<.button variant="ghost" size="sm" class="w-full justify-start" phx-click={JS.navigate(~p"/settings")}>
<.icon name="settings" size="sm" /> Settings
<.button variant="ghost" size="sm" class="w-full justify-start text-destructive" phx-click="sign-out">
<.icon name="log-out" size="sm" /> Sign out
```
### Required hook
```javascript
import PhiaPopover from "./phia_hooks/popover"
```
---
## Toast
Non-blocking notifications triggered from the server via `push_event`. Supports auto-dismiss, stacking, and 4 variants.
```heex
<%!-- Mount the viewport once (e.g. in root.html.heex) --%>
<.toast id="toast-viewport" />
```
### Trigger from LiveView
```elixir
# Success toast
{:noreply, push_event(socket, "phia-toast", %{
title: "Saved",
description: "Your changes have been saved.",
variant: "success",
duration: 4000
})}
# Error toast
{:noreply, push_event(socket, "phia-toast", %{
title: "Error",
description: "Failed to process payment.",
variant: "destructive"
})}
# Warning toast
{:noreply, push_event(socket, "phia-toast", %{
title: "Storage limit",
description: "You are nearing your storage quota.",
variant: "warning"
})}
# Plain default
{:noreply, push_event(socket, "phia-toast", %{
title: "Import started",
description: "We'll notify you when it's ready."
})}
```
### Variants
| Variant | Use case |
|---------|----------|
| `"default"` | Neutral information |
| `"success"` | Successful actions |
| `"destructive"` | Errors and failures |
| `"warning"` | Non-blocking warnings |
### Required hook
```javascript
import PhiaToast from "./phia_hooks/toast"
```
---
## Command Menu (Ctrl+K)
Global search palette with keyboard navigation. Hook registers `Ctrl+K` / `Cmd+K` globally. Results are filtered server-side via `phx-change`.
```heex
<%!-- Mount the command modal once in your root layout --%>
<.command id="command-menu">
<.command_input
id="command-search"
on_change="command-search"
placeholder="Search commands…"
/>
<.command_list id="command-results">
<.command_empty>No results found.
<.command_group label="Navigation">
<.command_item on_click="navigate" value="/dashboard">
<.icon name="layout-dashboard" size="sm" />
Dashboard
<.command_shortcut>G D
<.command_item on_click="navigate" value="/reports">
<.icon name="bar-chart-2" size="sm" />
Reports
<.command_separator />
<.command_group label="Actions" :if={@command_results != []}>
<.command_item :for={item <- @command_results} on_click="run-command" value={item.id}>
<.icon name={item.icon} size="sm" />
<%= item.label %>
```
### LiveView handler
```elixir
def handle_event("command-search", %{"value" => query}, socket) do
results = Commands.search(query)
{:noreply, assign(socket, command_results: results)}
end
def handle_event("run-command", %{"value" => id}, socket) do
Commands.execute(id, socket.assigns.current_user)
{:noreply, push_event(socket, "close-command", %{})}
end
```
### Required hook
```javascript
import PhiaCommand from "./phia_hooks/command"
```
---
## Date Range Picker
Dual-calendar server-side picker for booking and reporting flows. Calendar grid rendered in Elixir, state managed in your LiveView.
```heex
<.date_range_picker
id="booking-range"
view_month={@view_month}
from={@date_from}
to={@date_to}
on_change="select-date"
on_month_change="change-month"
min_date={Date.utc_today()}
/>
```
### With max date
```heex
<.date_range_picker
id="report-range"
view_month={@view_month}
from={@from}
to={@to}
on_change="range-selected"
on_month_change="change-month"
min_date={~D[2024-01-01]}
max_date={Date.utc_today()}
/>
```
### LiveView handlers
```elixir
def mount(_params, _session, socket) do
{:ok, assign(socket,
view_month: Date.utc_today(),
date_from: nil,
date_to: nil
)}
end
def handle_event("select-date", %{"date" => date_str}, socket) do
date = Date.from_iso8601!(date_str)
socket = cond do
is_nil(socket.assigns.date_from) ->
assign(socket, date_from: date, date_to: nil)
is_nil(socket.assigns.date_to) and Date.compare(date, socket.assigns.date_from) != :lt ->
assign(socket, date_to: date)
true ->
assign(socket, date_from: date, date_to: nil)
end
{:noreply, socket}
end
def handle_event("change-month", %{"dir" => "next"}, socket) do
{:noreply, assign(socket, view_month: Date.shift(socket.assigns.view_month, month: 1))}
end
def handle_event("change-month", %{"dir" => "prev"}, socket) do
{:noreply, assign(socket, view_month: Date.shift(socket.assigns.view_month, month: -1))}
end
```
### Booking form example
```heex
<.card>
<.card_header>
<.card_title>Book a stay
<.card_content class="space-y-4">
<.date_range_picker
id="stay-range"
view_month={@view_month}
from={@check_in}
to={@check_out}
on_change="select-date"
on_month_change="change-month"
min_date={Date.utc_today()}
/>
This content is hidden by default and revealed when triggered.
<%!-- Server-controlled state (LiveView assign) --%>
def handle_event("toggle-panel", _, socket) do
{:noreply, assign(socket, :panel_open, !socket.assigns.panel_open)}
end
```
### LiveView integration
The collapsible state lives in the LiveView. Pass the current `:open` assign to both trigger and content:
```elixir
# mount/3
assign(conn, :panel_open, false)
# handle_event
def handle_event("toggle-" <> id, _, socket) do
key = String.to_existing_atom("#{id}_open")
{:noreply, assign(socket, key, !socket.assigns[key])}
end
```
---
## Alert Dialog
Confirmation modal for destructive or irreversible actions. Uses `role="alertdialog"` and reuses the `PhiaDialog` JS hook.
```heex
<%!-- Delete confirmation --%>
<.alert_dialog id="delete-confirm" open={@show_delete_confirm}
aria-labelledby="delete-title" aria-describedby="delete-desc">
<.alert_dialog_header>
<.alert_dialog_title id="delete-title">Delete project?
<.alert_dialog_description id="delete-desc">
This will permanently delete Content for the first slide.
<.carousel_item>
<.card>
<.card_content class="p-6">
Content for the second slide.
<.carousel_item>
Adjust your search filters.
<.drawer_close />
<.field>
<.field_label>Category
<.phia_select field={@form[:category]} options={@categories} />
<.field>
<.field_label>Price Range
<.drawer_footer>
<.button phx-click="apply-filters">Apply Filters
<.button variant="outline" phx-click="reset-filters">Reset
<%!-- Side panel (right) --%>
<.drawer_content id="details-panel" open={@panel_open} direction="right">
<.drawer_header>
<.carousel_previous />
<.carousel_next />
<%!-- Loop mode with vertical orientation --%>
<.carousel id="vert" orientation="vertical" loop={true} class="h-80">
<.carousel_content>
<.carousel_item :for={item <- @items}>