Drawer

<%# The upstream demo: a right-edge drawer picking a delivery slot.
    direction: is the DISMISS direction - :right slides in from (and
    swipes out to) the right edge. The Cancel button is the DrawerClose
    equivalent: any button inside the drawer can close it by targeting
    the controller's close action. %>
<% slots = [
     ["asap", "Standard delivery", "25–35 min · Driver assigned now", "Fastest"],
     ["17:00", "5:00 PM – 5:15 PM", "Prep starts at 4:45 PM", nil],
     ["17:30", "5:30 PM – 5:45 PM", "Good if you're heading home", nil],
     ["18:00", "6:00 PM – 6:15 PM", "Most popular · High demand", nil],
     ["18:30", "6:30 PM – 6:45 PM", "Last slot before kitchen closes", nil]
   ] %>
<%= poetry_drawer(direction: :right) do |drawer| %>
  <% drawer.with_trigger(variant: :secondary) { "Open drawer" } %>
  <% drawer.with_title { "Pick a delivery time" } %>
  <% drawer.with_description { "We'll prepare your order as soon as possible." } %>
  <% drawer.with_footer do %>
    <%= poetry_button { "Confirm delivery time" } %>
    <%= poetry_button(variant: :outline, data: { action: "click->poetry--core--drawer#close" }) { "Cancel" } %>
  <% end %>
  <%= poetry_radio_group(name: "delivery_time", value: "asap", label: "Delivery time", class: "gap-2") do |group| %>
    <% slots.each do |value, title, detail, badge| %>
      <% group.with_item(
           value: value, class: "mt-0.5 self-start",
           label: tag.span(class: "grid gap-1 leading-snug") {
             safe_join([
               tag.span(class: "flex items-center gap-2 text-sm font-medium") {
                 safe_join([title, badge ? poetry_badge(variant: :secondary) { badge } : nil].compact)
               },
               tag.span(detail, class: "text-sm text-muted-foreground")
             ])
           }
         ) %>
    <% end %>
  <% end %>
<% end %>

<%= poetry_drawer(show_swipe_handle: true) do |drawer| %>
  <% drawer.with_trigger(variant: :outline) { "Edit account" } %>
  <% drawer.with_title { "Edit account" } %>
  <% drawer.with_description { "Update your details and save when you're finished." } %>
  <% drawer.with_footer do %>
    <%= poetry_button(type: :submit) { "Save changes" } %>
  <% end %>
  <div class="grid gap-4">
    <div class="grid gap-2">
      <%= poetry_label(for_id: "drawer-account-name") { "Full name" } %>
      <%= poetry_input(name: "name", value: "Jordan Ellis", id: "drawer-account-name") %>
    </div>
    <div class="grid gap-2">
      <%= poetry_label(for_id: "drawer-account-email") { "Email" } %>
      <%= poetry_input(name: "email", type: "email", value: "jordan@example.com", id: "drawer-account-email") %>
    </div>
  </div>
<% end %>

<%= poetry_drawer(show_swipe_handle: true) do |drawer| %>
  <% drawer.with_trigger(variant: :outline) { "Manage subscription" } %>
  <% drawer.with_title { "Manage subscription" } %>
  <% drawer.with_description { "Review your plan, or open billing for the details." } %>
  <% drawer.with_footer do %>
    <%= poetry_button { "Save changes" } %>
  <% end %>
  <%= poetry_drawer(show_swipe_handle: true) do |billing| %>
    <% billing.with_trigger(variant: :ghost) { "View billing history" } %>
    <% billing.with_title { "Billing history" } %>
    <% billing.with_description { "Your most recent invoices." } %>
    <% billing.with_footer do %>
      <%= poetry_button(variant: :outline) { "Back" } %>
    <% end %>
    Every invoice is available to download for your records.
  <% end %>
<% end %>

<%# modal: false leaves the page interactive while the drawer is open -
    no scrim, no focus trap, no scroll lock. There is no backdrop to
    click, so pointer dismissal is off by nature; Esc (while focus is
    inside), the swipe, and the wired Close button still exit. %>
<%= poetry_drawer(direction: :right, modal: false) do |drawer| %>
  <% drawer.with_trigger(variant: :outline) { "Non modal" } %>
  <% drawer.with_title { "Non-modal drawer" } %>
  <% drawer.with_description { "The page behind stays interactive." } %>
  <% drawer.with_footer do %>
    <%= poetry_button(data: { action: "click->poetry--core--drawer#close" }) { "Close" } %>
  <% end %>
  <div class="h-80 w-full rounded-2xl bg-muted"></div>
<% end %>

<%# direction: picks the edge AND the dismiss gesture - a left drawer
    slides in from the left and swipes left to close. :down (the default)
    and :up are the sheet shapes; :left and :right make edge panels. %>
<%= poetry_drawer(direction: :left) do |drawer| %>
  <% drawer.with_trigger(variant: :outline) { "Open left drawer" } %>
  <% drawer.with_title { "Saved filters" } %>
  <% drawer.with_description { "Swipe left to dismiss." } %>
  <div class="grid gap-2 text-sm text-muted-foreground">
    <span>Assigned to me</span>
    <span>Due this week</span>
    <span>High priority</span>
  </div>
<% end %>

<%# The responsive recipe: a Dialog on desktop, a Drawer on mobile -
    upstream swaps components with a useMediaQuery hook; server-rendered
    poetry renders BOTH and lets the breakpoint pick the visible one
    (caller classes land on each component's root wrapper). Resize the
    window across md (768px) to see the swap. %>
<%= poetry_dialog(class: "hidden md:block") do |dialog| %>
  <% dialog.with_trigger(variant: :outline) { "Edit profile" } %>
  <% dialog.with_title { "Edit profile" } %>
  <% dialog.with_description { "Make changes to your profile here. Click save when you're done." } %>
  <% dialog.with_footer do %>
    <%= poetry_button { "Save changes" } %>
  <% end %>
  <div class="grid gap-4">
    <div class="grid gap-2">
      <%= poetry_label(for_id: "responsive-dialog-email") { "Email" } %>
      <%= poetry_input(name: "email", type: "email", value: "jordan@example.com", id: "responsive-dialog-email") %>
    </div>
    <div class="grid gap-2">
      <%= poetry_label(for_id: "responsive-dialog-username") { "Username" } %>
      <%= poetry_input(name: "username", value: "@jordan", id: "responsive-dialog-username") %>
    </div>
  </div>
<% end %>
<%= poetry_drawer(class: "md:hidden") do |drawer| %>
  <% drawer.with_trigger(variant: :outline) { "Edit profile" } %>
  <% drawer.with_title { "Edit profile" } %>
  <% drawer.with_description { "Make changes to your profile here. Click save when you're done." } %>
  <% drawer.with_footer do %>
    <%= poetry_button { "Save changes" } %>
    <%= poetry_button(variant: :outline, data: { action: "click->poetry--core--drawer#close" }) { "Cancel" } %>
  <% end %>
  <div class="grid gap-4">
    <div class="grid gap-2">
      <%= poetry_label(for_id: "responsive-drawer-email") { "Email" } %>
      <%= poetry_input(name: "email", type: "email", value: "jordan@example.com", id: "responsive-drawer-email") %>
    </div>
    <div class="grid gap-2">
      <%= poetry_label(for_id: "responsive-drawer-username") { "Username" } %>
      <%= poetry_input(name: "username", value: "@jordan", id: "responsive-drawer-username") %>
    </div>
  </div>
<% end %>

<%# snap_points: preset resting heights for a bottom sheet, ascending -
    fractions of the full height or px/rem lengths. It opens at the
    first point (the compact peek); drag up to snap fuller, drag below
    the first point to dismiss. A flick steps one point in its
    direction. %>
<%= poetry_drawer(show_swipe_handle: true, snap_points: ["31rem", 1]) do |drawer| %>
  <% drawer.with_trigger(variant: :outline) { "Open snap drawer" } %>
  <% drawer.with_title { "Snap points" } %>
  <% drawer.with_description { "Drag the drawer to snap between a compact peek and a near full-height view." } %>
  <% drawer.with_footer do %>
    <%= poetry_button(data: { action: "click->poetry--core--drawer#close" }) { "Close" } %>
  <% end %>
  <div class="h-80 w-full rounded-2xl bg-muted"></div>
<% end %>

<%# show_swipe_handle: true renders the grab pill - use it on bottom
    sheets so the gesture is discoverable. A drag may always start on
    the pill, handle or not. The Close button targets the controller's
    close action (the DrawerClose equivalent). %>
<%= poetry_drawer(show_swipe_handle: true) do |drawer| %>
  <% drawer.with_trigger(variant: :secondary) { "Open bottom drawer" } %>
  <% drawer.with_title { "Drawer" } %>
  <% drawer.with_description { "Drawer with a swipe handle." } %>
  <% drawer.with_footer do %>
    <%= poetry_button(data: { action: "click->poetry--core--drawer#close" }) { "Close" } %>
  <% end %>
  <div class="h-80 w-full rounded-2xl bg-muted"></div>
<% end %>