unmagic-components 0.3.0 → 0.4.0

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_welcome/_suggestions.html.erb

@@ -0,0 +1,11 @@
+<div class="mx-auto max-w-2xl">
+  <%= ai_chat_welcome heading: "What can I help with?", composer: "welcome_page_composer" do |welcome| %>
+    <% welcome.body "It can search your jobs and candidates, draft messages, and keep track of who has replied." %>
+    <% welcome.suggestion "Who hasn't replied yet?", icon: :messages_square %>
+    <% welcome.suggestion "Draft a follow-up for Ana", icon: :pencil %>
+    <% welcome.suggestion "Invite someone to…", icon: :lightbulb, fill: true, value: "Invite someone to " %>
+  <% end %>
+  <%= form_with url: "#", id: "welcome_page_composer", data: { turbo: false } do |form| %>
+    <%= ai_chat_composer form: form, field: :content, placeholder: "Message the assistant…", rows: 1 %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_welcome/_thumbnail.html.erb

@@ -0,0 +1,6 @@
+<div class="w-64 origin-center scale-90 text-xs">
+  <%= ai_chat_welcome heading: "What can I help with?", class: "py-0" do |welcome| %>
+    <% welcome.suggestion "Who hasn't replied?" %>
+    <% welcome.suggestion "Draft a nudge" %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_workspace/_files.html.erb

@@ -0,0 +1,12 @@
+<div class="w-80 rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+  <%= ai_chat_plan id: "workspace_plan", open: false do |plan| %>
+    <% plan.step "Gather references", state: :completed %>
+    <% plan.step "Draft the scene", state: :in_progress %>
+  <% end %>
+  <%= ai_chat_workspace id: "workspace_files" do |workspace| %>
+    <% workspace.file "references/lantern-red.png", size: 1_480_000, url: "#" %>
+    <% workspace.file "references/market-night.jpg", size: 2_210_000, url: "#" %>
+    <% workspace.file "scene.json", size: 6_120 %>
+    <% workspace.file "notes.md", size: 812, icon: :pencil %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/ai_chat_workspace/_thumbnail.html.erb

@@ -0,0 +1,7 @@
+<div class="w-56 rounded-xl border border-neutral-200 bg-white text-xs dark:border-neutral-800 dark:bg-neutral-900">
+  <%= ai_chat_workspace class: "p-3" do |workspace| %>
+    <% workspace.file "lantern.png", size: 1_480_000 %>
+    <% workspace.file "scene.json", size: 6_120 %>
+    <% workspace.file "notes.md", size: 812, icon: :pencil %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/avatar/_group.html.erb

@@ -0,0 +1,5 @@
+<%= avatar_group max: 3 do |group| %>
+  <% [ "Ada Lovelace", "Grace Hopper", "Katherine Johnson", "Alan Turing", "Margaret Hamilton", "Barbara Liskov" ].each do |name| %>
+    <% group.avatar name %>
+  <% end %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/avatar/_sizes.html.erb

@@ -0,0 +1,8 @@
+<div class="flex items-center gap-4">
+  <%= avatar "Ada Lovelace", size: :small %>
+  <%= avatar "Ada Lovelace" %>
+  <%= avatar "Ada Lovelace", size: :large %>
+  <%= avatar "Grace Hopper", size: :large, src: "/missing-picture.png" %>
+  <%= avatar "Acme Ltd", size: :large, shape: :square %>
+  <%= avatar "Ada Lovelace", size: :large, skeleton: true %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/avatar/_thumbnail.html.erb

@@ -0,0 +1,5 @@
+<%= avatar_group max: 4, size: :large do |group| %>
+  <% [ "Ada Lovelace", "Grace Hopper", "Katherine Johnson", "Alan Turing", "Margaret Hamilton" ].each do |name| %>
+    <% group.avatar name %>
+  <% end %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/avatar/_tints.html.erb

@@ -0,0 +1,7 @@
+<div class="flex flex-wrap items-center gap-3">
+  <% [ "Ada Lovelace", "Grace Hopper", "Katherine Johnson", "Alan Turing", "Margaret Hamilton",
+       "Dennis Ritchie", "Barbara Liskov", "Ken Thompson" ].each do |name| %>
+    <%= avatar name %>
+  <% end %>
+  <%= avatar "Neutral Person", tint: false %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/badge/_in_context.html.erb

@@ -0,0 +1,14 @@
+<ul class="grid w-80 gap-3">
+  <li class="flex items-center justify-between gap-3">
+    <span>Webhook to Slack</span>
+    <%= badge "Failing", tone: :bad %>
+  </li>
+  <li class="flex items-center justify-between gap-3">
+    <span>Nightly export</span>
+    <%= badge "Healthy", tone: :good %>
+  </li>
+  <li class="flex items-center justify-between gap-3">
+    <span>Pull requests</span>
+    <%= badge "12" %>
+  </li>
+</ul>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/badge/_thumbnail.html.erb

@@ -0,0 +1,5 @@
+<div class="flex flex-wrap items-center justify-center gap-2">
+  <%= badge "Active", tone: :good %>
+  <%= badge "Pending", tone: :warn %>
+  <%= badge "Archived" %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/badge/_tones.html.erb

@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-center gap-2">
+  <%= badge "Neutral" %>
+  <%= badge "Good", tone: :good %>
+  <%= badge "Warn", tone: :warn %>
+  <%= badge "Bad", tone: :bad %>
+  <%= badge "Info", tone: :info %>
+  <%= badge "Accent", tone: :accent %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/board/_handles.html.erb

@@ -0,0 +1,13 @@
+<%= board id: "handles", sortable_columns: false do |b| %>
+  <% [ [ "Inbox", [ "Reply to Ana about Friday", "Send Grace the brief" ] ],
+       [ "Waiting", [ "Tom's corrected address" ] ] ].each do |title, cards| %>
+    <% b.column title: title, params: { column: title.downcase } do |col| %>
+      <% cards.each_with_index do |text, index| %>
+        <% col.card key: "#{title}-#{index}", class: "flex cursor-default items-center gap-2 p-2" do %>
+          <%= sortable_handle label: "Move #{text}" %>
+          <%= link_to text, "#", class: "min-w-0 flex-1 truncate font-medium text-neutral-900 underline-offset-2 hover:underline dark:text-neutral-100" %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/board/_live.html.erb

@@ -0,0 +1,34 @@
+<div class="flex flex-col gap-4">
+  <div class="flex items-center justify-between gap-3">
+    <p class="text-sm text-neutral-500">Roadmap · <%= pluralize(@board.columns.sum { |c| @board.cards_in(c).size }, "card") %></p>
+    <%= button_to "Reset the board", board_path, method: :delete, class: button_classes(size: :small),
+          form: { data: { turbo_confirm: "Put every card back where it started?" } } %>
+  </div>
+
+  <%= board id: "roadmap", url: board_order_path, column_height: "32rem" do |b| %>
+    <% @board.columns.each do |column| %>
+      <% cards = @board.cards_in(column) %>
+      <% b.column key: column["key"], rank: column["rank"], title: column["title"], params: { column: column["key"] } do |col| %>
+        <% col.actions do %>
+          <%= menu do |m| %>
+            <% m.link "Rename", "#" %>
+            <% m.link "Archive", "#", tone: :danger %>
+          <% end %>
+        <% end %>
+        <% cards.each do |card| %>
+          <% col.card key: card["key"], rank: card["rank"], label: card["title"], id: "board_#{card["key"]}" do %>
+            <p class="m-0 leading-snug"><%= card["title"] %></p>
+            <% if card["tag"] || card["owner"] %>
+              <div class="mt-2.5 flex items-center justify-between gap-2">
+                <%= badge card["tag"] if card["tag"] %>
+                <%= avatar card["owner"], size: :small, "aria-hidden": true if card["owner"] %>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+        <% col.add url: board_cards_path, field: "card[title]", params: { "card[column]" => column["key"] } %>
+      <% end %>
+    <% end %>
+    <% b.add_column url: board_columns_path, field: "column[title]" %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/board/_thumbnail.html.erb

@@ -0,0 +1,10 @@
+<div class="flex w-72 gap-2 text-xs">
+  <% [ [ "To do", [ "Write the ad", "Book the room" ] ], [ "Doing", [ "Shortlist" ] ] ].each do |title, cards| %>
+    <div class="UnmagicBoard__panel w-1/2 shrink-0">
+      <div class="UnmagicBoard__head"><h3 class="UnmagicBoard__title text-xs"><%= title %></h3><span class="UnmagicBoard__count"><%= cards.size %></span></div>
+      <div class="UnmagicBoard__cards pb-2">
+        <% cards.each do |card| %><div class="UnmagicBoard__card p-2 text-xs"><%= card %></div><% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/button/_sizes.html.erb

@@ -0,0 +1,12 @@
+<div class="flex flex-col items-center gap-3">
+  <div class="flex flex-wrap items-center gap-2">
+    <%= tag.button "Small", type: "button", class: button_classes(:default, size: :small) %>
+    <%= tag.button "Default", type: "button", class: button_classes %>
+    <%= tag.button "Large", type: "button", class: button_classes(:default, size: :large) %>
+  </div>
+  <div class="flex flex-wrap items-center gap-2">
+    <%= tag.button "Small", type: "button", class: button_classes(:primary, size: :small) %>
+    <%= tag.button "Default", type: "button", class: button_classes(:primary) %>
+    <%= tag.button "Large", type: "button", class: button_classes(:primary, size: :large) %>
+  </div>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/button/_thumbnail.html.erb

@@ -0,0 +1,4 @@
+<div class="flex items-center gap-2">
+  <%= tag.span "Stage", class: button_classes(:default, size: :small) %>
+  <%= tag.span "Publish", class: button_classes(:primary, size: :small) %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/button/_variants.html.erb

@@ -0,0 +1,6 @@
+<div class="flex flex-wrap items-center gap-2">
+  <%= tag.button "Default", type: "button", class: button_classes %>
+  <%= tag.button "Primary", type: "button", class: button_classes(:primary) %>
+  <%= tag.button "Ghost", type: "button", class: button_classes(:ghost) %>
+  <%= tag.button "Danger", type: "button", class: button_classes(:danger) %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/callout/_neutral.html.erb

@@ -0,0 +1,3 @@
+<%= callout "Heads up" do %>
+  Exports run overnight, so today's changes show up tomorrow.
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/callout/_thumbnail.html.erb

@@ -0,0 +1,5 @@
+<div class="w-60 text-xs">
+  <%= callout "DNS isn't verified", tone: :warn, badge: "Pending" do %>
+    Add the TXT record, then check again.
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/callout/_tones.html.erb

@@ -0,0 +1,14 @@
+<div class="grid gap-3">
+  <%= callout "DNS verified", tone: :good do %>
+    Mail from this domain is signed and will land in inboxes.
+  <% end %>
+  <%= callout "DNS isn't verified", tone: :warn, badge: "Pending" do %>
+    Add the TXT record below, then check again. Changes can take an hour to spread.
+  <% end %>
+  <%= callout "Webhook failing", tone: :bad, badge: "12 errors" do %>
+    The last delivery returned 500. We'll retry for another 24 hours.
+  <% end %>
+  <%= callout "How scopes work", tone: :info do %>
+    A scope limits what a token can do.
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/card/_actions_and_footer.html.erb

@@ -0,0 +1,7 @@
+<div class="w-80">
+  <%= card title: "Members" do |card| %>
+    <% card.actions { tag.button "Invite", type: "button", class: button_classes(:default, size: :small) } %>
+    <% card.footer { "3 of 5 seats used" } %>
+    Ada, Grace and Katherine can see everything in this workspace.
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/card/_flush_table.html.erb

@@ -0,0 +1,6 @@
+<%= card title: "Usage this month", flush: true do %>
+  <%= table_tag [ "Metric", "Value" ],
+        [ [ "Requests", { content: "1,204", class: "is-right is-numeric" } ],
+          [ "Errors", { content: "3", class: "is-right is-numeric" } ] ],
+        aligns: [ nil, :right ] %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/card/_link.html.erb

@@ -0,0 +1,6 @@
+<div class="w-80">
+  <%= card href: request.path do %>
+    <strong>Quarterly review</strong><br>
+    Due in 3 days · 4 of 6 sections complete
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/card/_thumbnail.html.erb

@@ -0,0 +1,6 @@
+<div class="w-56 text-xs">
+  <%= card title: "Members" do |card| %>
+    <% card.footer { "3 of 5 seats used" } %>
+    Ada, Grace and Katherine.
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/confirm/_danger.html.erb

@@ -0,0 +1,3 @@
+<%= button_to "Reset profile", profile_dialog_path, method: :delete, class: button_classes(:danger),
+      form: { data: { turbo_confirm: "Reset the profile to its defaults?",
+                      turbo_confirm_accept: "Reset", turbo_confirm_variant: "danger" } } %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/confirm/_plain.html.erb

@@ -0,0 +1,2 @@
+<%= button_to "Reset profile", profile_dialog_path, method: :delete, class: button_classes,
+      form: { data: { turbo_confirm: "Reset the profile?" } } %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/confirm/_thumbnail.html.erb

@@ -0,0 +1,7 @@
+<%= dialog title: "Reset the profile?", close: false, class: "w-60 origin-center scale-[0.8] text-xs shadow-md" do |dialog| %>
+  This can't be undone.
+  <% dialog.footer do %>
+    <%= tag.span "Cancel", class: button_classes(:default, size: :small) %>
+    <%= tag.span "Reset", class: button_classes(:danger, size: :small) %>
+  <% end %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/copy_button/_from_element.html.erb

@@ -0,0 +1,4 @@
+<div class="flex flex-wrap items-center gap-3">
+  <code id="install_command" class="rounded-md bg-neutral-100 px-2 py-1 text-sm dark:bg-neutral-800">bundle add unmagic-components</code>
+  <%= copy_button from: "install_command" %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/copy_button/_thumbnail.html.erb

@@ -0,0 +1,4 @@
+<div class="flex items-center gap-2">
+  <code class="rounded-md bg-neutral-100 px-2 py-1 text-xs dark:bg-neutral-800">bundle add unmagic-components</code>
+  <%= copy_button "bundle add unmagic-components" %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/copy_button/_with_label.html.erb

@@ -0,0 +1,3 @@
+<%= copy_button "deploy-key-preview-0000", class: button_classes(:default, size: :small) do %>
+  Copy key
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/detail_list/_inline.html.erb

@@ -0,0 +1,5 @@
+<%= detail_list do |list| %>
+  <% list.item "Name", "Ada Lovelace" %>
+  <% list.item "Role", "Engineer" %>
+  <% list.item "Notes", nil %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/detail_list/_stacked.html.erb

@@ -0,0 +1,7 @@
+<%= detail_list variant: :stacked do |list| %>
+  <% list.item "Client ID", "abc123", class: "font-mono" %>
+  <% list.item "Scopes", "read write" %>
+  <% list.item "Redirect URIs", span: :full do %>
+    https://example.com/callback
+  <% end %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/detail_list/_thumbnail.html.erb

@@ -0,0 +1,5 @@
+<%= detail_list class: "w-56 text-xs" do |list| %>
+  <% list.item "Name", "Ada Lovelace" %>
+  <% list.item "Role", "Engineer" %>
+  <% list.item "Notes", nil %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/dialog/_dialog_tag.html.erb

@@ -0,0 +1,8 @@
+<%= dialog_button "What's a scope?", dialog: "scopes_help", class: button_classes %>
+
+<%= dialog_tag "scopes_help", title: "Scopes" do |dialog| %>
+  <p>A scope limits what a token can do. Grant the fewest that get the job done.</p>
+  <% dialog.footer do %>
+    <%= tag.button "Got it", type: "button", class: button_classes(:primary), data: { unmagic_dialog_close: "" } %>
+  <% end %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/dialog/_modal.html.erb

@@ -0,0 +1,10 @@
+<%= detail_list do |list| %>
+  <% list.item "Name", @profile.name %>
+  <% list.item "Role", @profile.role %>
+<% end %>
+
+<div class="mt-4 flex flex-wrap gap-2">
+  <%= modal_link_to "Edit profile", profile_dialog_path, class: button_classes(:primary) %>
+  <%= modal_link_to "Slow (skeleton)", slow_dialog_path, class: button_classes %>
+  <%= modal_link_to "Forbidden (error)", forbidden_dialog_path, class: button_classes %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/dialog/_thumbnail.html.erb

@@ -0,0 +1,4 @@
+<%= dialog title: "Edit profile", class: "w-60 origin-center scale-[0.8] text-xs shadow-md" do |dialog| %>
+  Ada Lovelace · Engineer
+  <% dialog.footer { tag.span "Save", class: button_classes(:primary, size: :small) } %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/elapsed/_countdown.html.erb

@@ -0,0 +1,3 @@
+<p class="text-sm text-neutral-600 dark:text-neutral-400">
+  This link expires in <%= elapsed_tag @now + 45, direction: :down, class: "font-semibold text-neutral-900 dark:text-neutral-100" %>.
+</p>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/elapsed/_running.html.erb

@@ -0,0 +1,8 @@
+<dl class="grid grid-cols-[auto_auto] gap-x-6 gap-y-2 text-sm">
+  <dt class="text-neutral-500">Started just now</dt>
+  <dd><%= elapsed_tag @now - 4 %></dd>
+  <dt class="text-neutral-500">A slow tool</dt>
+  <dd><%= elapsed_tag @now - 185 %></dd>
+  <dt class="text-neutral-500">Probably hung</dt>
+  <dd><%= elapsed_tag @now - 3842 %></dd>
+</dl>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/elapsed/_thumbnail.html.erb

@@ -0,0 +1,4 @@
+<span class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-3 py-1.5 text-neutral-600 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-300">
+  <%= Unmagic::Components::Icons.svg(self, :timer) %>
+  <%= elapsed_tag @now - 185, class: "text-sm" %>
+</span>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/empty_state/_default.html.erb

@@ -0,0 +1 @@
+<%= empty_state "No invitations yet." %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/empty_state/_thumbnail.html.erb

@@ -0,0 +1,3 @@
+<div class="w-56 text-xs">
+  <%= empty_state "No invitations yet." %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/forms/_autogrow.html.erb

@@ -0,0 +1,4 @@
+<%= form_with url: request.path, method: :get, scope: :note, builder: Unmagic::Components::FormBuilder do |form| %>
+  <%= form.field :body, "Message", as: :autogrow_text_area, rows: 2, class: "max-h-40",
+        placeholder: "Type a few lines, then keep going past ten rems…" %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/forms/_control_classes.html.erb

@@ -0,0 +1,54 @@
+<div class="grid gap-4">
+  <div class="flex flex-wrap items-center gap-2">
+    <%= search_field_tag "people[q]", nil, placeholder: "Search people", "aria-label": "Search people",
+          class: control_classes(:input, size: :small) %>
+    <%= select_tag "people[status]", options_for_select(%w[Active Invited Removed]), "aria-label": "Status",
+          class: control_classes(:select, size: :small) %>
+    <%= tag.button "Filter", type: "button", class: button_classes(:default, size: :small) %>
+  </div>
+
+  <div class="flex flex-wrap items-center gap-2">
+    <%= text_field_tag "key[slug]", "deploy-key", "aria-label": "Slug", class: control_classes(:input) %>
+    <%= select_tag "key[scope]", options_for_select([ "Read", "Read and write" ]), "aria-label": "Scope",
+          class: control_classes(:select) %>
+    <%= tag.button "Save", type: "button", class: button_classes(:primary) %>
+  </div>
+
+  <div class="flex flex-wrap items-center gap-2">
+    <%= text_field_tag "report[title]", "Quarterly review", "aria-label": "Title",
+          class: control_classes(:input, size: :large) %>
+    <%= tag.button "Publish", type: "button", class: button_classes(:primary, size: :large) %>
+  </div>
+
+  <fieldset class="m-0 border-0 p-0">
+    <legend class="UnmagicLabel mb-2">Notify me</legend>
+    <div class="UnmagicCheckList--inline">
+      <% [ "Immediately", "Daily", "Never" ].each_with_index do |choice, index| %>
+        <label class="UnmagicCheckField">
+          <%= radio_button_tag "notify", choice.downcase, index.zero?, class: control_classes(:radio) %>
+          <span class="UnmagicCheckField__label"><%= choice %></span>
+        </label>
+      <% end %>
+      <label class="UnmagicCheckField">
+        <%= radio_button_tag "notify", "paused", false, disabled: true, class: control_classes(:radio) %>
+        <span class="UnmagicCheckField__label">Paused (disabled)</span>
+      </label>
+    </div>
+  </fieldset>
+
+  <div class="UnmagicCheckList--inline">
+    <label class="UnmagicCheckField">
+      <%= check_box_tag "all_teams", "1", false, id: "control_classes_all_teams", class: control_classes(:check) %>
+      <span class="UnmagicCheckField__label">All teams (indeterminate)</span>
+    </label>
+    <label class="UnmagicCheckField">
+      <%= check_box_tag "archived", "1", true, id: "control_classes_archived", class: control_classes(:check),
+            "aria-invalid": "true" %>
+      <span class="UnmagicCheckField__label">Invalid</span>
+    </label>
+  </div>
+
+  <%= javascript_tag nonce: true do %>
+    document.getElementById("control_classes_all_teams").indeterminate = true
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/forms/_fields.html.erb

@@ -0,0 +1,28 @@
+<%= form_with url: request.path, method: :get, scope: :person, builder: Unmagic::Components::FormBuilder do |form| %>
+  <%= form.group do %>
+    <%= form.field :first_name, "First name", required: true, placeholder: "Ada" %>
+    <%= form.field :last_name, "Last name", placeholder: "Lovelace" %>
+  <% end %>
+
+  <%= form.field :email, "Email", as: :email_field, placeholder: "ada@example.com",
+        hint: "Only used to sign you in." %>
+
+  <%= form.group do %>
+    <%= form.field :password, "Password", as: :password_field %>
+    <%= form.field :starts_on, "Starts on", as: :date_field %>
+  <% end %>
+
+  <%= form.field :role, "Role" do %>
+    <%= form.select :role, [ "Engineer", "Designer", "Manager" ], include_blank: "Choose a role" %>
+  <% end %>
+
+  <%= form.field :bio, "Bio", as: :text_area, rows: 3, placeholder: "A line or two about yourself." %>
+
+  <div class="mb-4 grid gap-3">
+    <%= form.check_box_field :releases, "Email me about new releases", hint: "Roughly once a month." %>
+    <%= form.check_box_collection :teams, [ [ 1, "Platform" ], [ 2, "Billing" ], [ 3, "Growth" ] ],
+          :first, :last, inline: true %>
+  </div>
+
+  <%= form.submit "Save" %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/forms/_states.html.erb

@@ -0,0 +1,11 @@
+<%= form_with model: @invalid_profile, url: request.path, method: :get,
+      builder: Unmagic::Components::FormBuilder do |form| %>
+  <%= form.field :name, "Name", required: true %>
+  <%= form.field :role, "Role", disabled: true, hint: "Set by your administrator." %>
+<% end %>
+
+<%= form_with model: @profile, url: request.path, method: :get, namespace: :locked,
+      builder: Unmagic::Components::FormBuilder do |form| %>
+  <%= form.field :role, "Role (read-only)", readonly: true %>
+  <%= form.check_box_field :name, "Locked option", disabled: true, checked: true %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/forms/_thumbnail.html.erb

@@ -0,0 +1,8 @@
+<div class="grid w-56 gap-2">
+  <span class="UnmagicLabel text-xs">Email</span>
+  <input type="email" value="ada@example.com" aria-label="Email" class="<%= control_classes(:input, size: :small) %>">
+  <label class="UnmagicCheckField items-center">
+    <input type="checkbox" checked aria-label="Email me about releases" class="<%= control_classes(:check) %>">
+    <span class="UnmagicCheckField__label text-xs">Email me about releases</span>
+  </label>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/forms/_uuid_field.html.erb

@@ -0,0 +1,9 @@
+<%= form_with url: request.path, method: :get, scope: :message, builder: Unmagic::Components::FormBuilder do |form| %>
+  <%= form.uuid_field :id %>
+  <%= form.field :body, "Message", hint: "Submits with a client-minted id; resetting the form mints another." %>
+
+  <div class="flex gap-2">
+    <%= form.submit "Send" %>
+    <button type="reset" class="<%= button_classes %>">Reset the form</button>
+  </div>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/local_time/_absolute.html.erb

@@ -0,0 +1,5 @@
+<%= table_tag [ "format:", "Rendered" ],
+      %i[short medium long full date time].map { |format|
+        [ tag.code(":#{format}"), local_time_tag(@now, format: format) ]
+      },
+      widths: [ "30%", "70%" ] %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/local_time/_relative.html.erb

@@ -0,0 +1,14 @@
+<%= table_tag [ "Rendered for", "format: :relative", "compact: true" ],
+      [
+        [ "10 seconds ago", @now - 10.seconds ],
+        [ "5 minutes ago", @now - 5.minutes ],
+        [ "3 hours ago", @now - 3.hours ],
+        [ "1 day ago", @now - 1.day ],
+        [ "3 days ago", @now - 3.days ],
+        [ "40 days ago", @now - 40.days ],
+        [ "In 2 hours", @now + 2.hours ],
+        [ "In 400 days", @now + 400.days ]
+      ].map { |label, at|
+        [ label, local_time_tag(at, format: :relative), local_time_tag(at, format: :relative, compact: true) ]
+      },
+      widths: [ "30%", "40%", "30%" ] %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/local_time/_thumbnail.html.erb

@@ -0,0 +1,14 @@
+<div class="grid w-56 gap-1.5 text-xs">
+  <div class="flex justify-between gap-4">
+    <span class="text-neutral-500">Commented</span>
+    <%= local_time_tag @now - 5.minutes, format: :relative %>
+  </div>
+  <div class="flex justify-between gap-4">
+    <span class="text-neutral-500">Deployed</span>
+    <%= local_time_tag @now - 3.hours, format: :relative, compact: true %>
+  </div>
+  <div class="flex justify-between gap-4">
+    <span class="text-neutral-500">Due</span>
+    <%= local_time_tag @now + 2.days, format: :date %>
+  </div>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/menu/_actions.html.erb

@@ -0,0 +1,10 @@
+<div class="pb-28">
+  <%= menu do |menu| %>
+    <% menu.button "Send a toast", stream_toast_path, params: { tone: "good", message: "Sent from a menu." } %>
+    <% menu.divider %>
+    <% menu.button "Delete", stream_toast_path, tone: :danger,
+         params: { tone: "bad", message: "Deleted (not really)." },
+         form: { data: { turbo_confirm: "Delete this thing?", turbo_confirm_accept: "Delete",
+                         turbo_confirm_variant: "danger" } } %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/menu/_labelled.html.erb

@@ -0,0 +1,6 @@
+<div class="pb-24">
+  <%= menu "Options", align: :start do |menu| %>
+    <% menu.link "Go to toasts", component_path("toast") %>
+    <% menu.link "Go to dialogs", component_path("dialog") %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/menu/_thumbnail.html.erb

@@ -0,0 +1,14 @@
+<%# A static open menu: the real one starts closed, and its element closes it on connect.
+    The trigger and panel share a positioned wrapper, so the panel hangs off the trigger. %>
+<div class="h-28 w-44 text-xs">
+  <div class="relative inline-block">
+    <%= tag.span class: button_classes(:default, size: :small) do %>
+      Options <%= Unmagic::Components::Icons.svg(self, :chevron_down, class: "size-3") %>
+    <% end %>
+    <div class="UnmagicMenu__panel UnmagicMenu__panel--start min-w-36">
+      <span class="UnmagicMenu__item text-xs">Edit</span>
+      <hr class="UnmagicMenu__divider">
+      <span class="UnmagicMenu__item UnmagicMenu__item--danger text-xs">Delete</span>
+    </div>
+  </div>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/page_header/_default.html.erb

@@ -0,0 +1,7 @@
+<%= page_header title: "Deploy keys", back: { text: "Settings", path: request.path },
+      description: "Keys that can pull from this repository. Anyone holding one can read every branch, " \
+                   "so revoke a key as soon as the machine using it is retired." do |header| %>
+  <% header.badge "3 active", tone: :good %>
+  <% header.badge "Beta", tone: :info %>
+  <%= tag.button "Add key", type: "button", class: button_classes(:primary) %>
+<% end %>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/page_header/_thumbnail.html.erb

@@ -0,0 +1,5 @@
+<div class="w-60">
+  <%= page_header title: "Deploy keys", description: "Keys that can pull from this repository." do |header| %>
+    <% header.badge "3 active", tone: :good %>
+  <% end %>
+</div>

data/lib/unmagic/components/browser/app/views/unmagic/components/browser/examples/page_header/_with_leading.html.erb

@@ -0,0 +1,14 @@
+<%= page_header back: { text: "People", path: request.path } do |header| %>
+  <% header.leading do %>
+    <span class="flex size-12 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-semibold text-indigo-700">AL</span>
+  <% end %>
+  <% header.title { "Ada Lovelace" } %>
+  <% header.description do %>
+    Engineer · London · joined <strong>10 December 1815</strong>
+  <% end %>
+  <% header.badge "Admin", tone: :accent %>
+  <%= menu do |menu| %>
+    <% menu.link "Edit", request.path %>
+    <% menu.link "Send a message", request.path %>
+  <% end %>
+<% end %>