velvetkit 0.1.0.beta

data/registry/test/components/previews/ui/button_preview/with_leading_icon.html.erb

@@ -0,0 +1,22 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Button.new(variant: :default)) do |btn|
+        btn.with_leading_icon(name: "lock")
+        "Sign in"
+      end %>
+  <%= render(UI::Button.new(variant: :outline)) do |btn|
+        btn.with_leading_icon(name: "eye")
+        "Preview"
+      end %>
+  <%= render(UI::Button.new(variant: :secondary)) do |btn|
+        btn.with_leading_icon(name: "badge-check")
+        "Verified"
+      end %>
+  <%= render(UI::Button.new(variant: :destructive)) do |btn|
+        btn.with_leading_icon(name: "x")
+        "Delete"
+      end %>
+  <%= render(UI::Button.new(variant: :ghost)) do |btn|
+        btn.with_leading_icon(name: "user")
+        "Profile"
+      end %>
+</div>

data/registry/test/components/previews/ui/button_preview/with_trailing_icon.html.erb

@@ -0,0 +1,14 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Button.new(variant: :default)) do |btn|
+        btn.with_trailing_icon(name: "arrow-right")
+        "Continue"
+      end %>
+  <%= render(UI::Button.new(variant: :outline)) do |btn|
+        btn.with_trailing_icon(name: "chevrons-up-down")
+        "Sort"
+      end %>
+  <%= render(UI::Button.new(variant: :link)) do |btn|
+        btn.with_trailing_icon(name: "arrow-right")
+        "Read more"
+      end %>
+</div>

data/registry/test/components/previews/ui/button_preview.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+class UI::ButtonPreview < ViewComponent::Preview
+  # @label Playground
+  # @param text text "Button text"
+  # @param variant select { choices: [default, destructive, outline, secondary, ghost, link] }
+  # @param size select { choices: [default, sm, lg, icon] }
+  # @param leading_icon select { choices: [none, lock, arrow-right, badge-check, eye, user] }
+  # @param trailing_icon select { choices: [none, arrow-right, chevrons-up-down, eye, x] }
+  # @param full_width toggle
+  # @param loading toggle
+  # @param disabled toggle
+  def playground(text: "Click me", variant: :default, size: :default,
+                 leading_icon: :none, trailing_icon: :none,
+                 full_width: false, loading: false, disabled: false)
+    render(UI::Button.new(
+      variant: variant.to_sym, size: size.to_sym,
+      full_width: full_width, loading: loading, disabled: disabled
+    )) do |btn|
+      btn.with_leading_icon(name: leading_icon.to_s)  unless leading_icon.to_s == "none"
+      btn.with_trailing_icon(name: trailing_icon.to_s) unless trailing_icon.to_s == "none"
+      text
+    end
+  end
+
+  # @label All Variants
+  def variants
+    render_with_template
+  end
+
+  # @label All Sizes
+  def sizes
+    render_with_template
+  end
+
+  # @label With Leading Icon
+  def with_leading_icon
+    render_with_template
+  end
+
+  # @label With Trailing Icon
+  def with_trailing_icon
+    render_with_template
+  end
+
+  # @label With Both Icons
+  def with_both_icons
+    render_with_template
+  end
+
+  # @label Icon Only
+  def icon_only
+    render_with_template
+  end
+
+  # @label Loading
+  def loading
+    render_with_template
+  end
+
+  # @label Disabled
+  def disabled
+    render_with_template
+  end
+end

data/registry/test/components/previews/ui/button_to_preview/states.html.erb

@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::ButtonTo.new("#")) { "Default" } %>
+  <%= render(UI::ButtonTo.new("#", loading: true)) { "Loading" } %>
+  <%= render(UI::ButtonTo.new("#", disabled: true)) { "Disabled" } %>
+</div>
+<div class="mt-6 max-w-xs">
+  <%= render(UI::ButtonTo.new("#", variant: :outline, full_width: true, form_class: "w-full")) { "Full width" } %>
+</div>

data/registry/test/components/previews/ui/button_to_preview/variants.html.erb

@@ -0,0 +1,5 @@
+<div class="flex flex-wrap items-center gap-3">
+  <% %i[default destructive outline secondary ghost link].each do |v| %>
+    <%= render(UI::ButtonTo.new("#", variant: v)) { v.to_s.capitalize } %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/button_to_preview/with_icon.html.erb

@@ -0,0 +1,11 @@
+<%# Icon slots render here, unlike the Velvet component this replaces. %>
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::ButtonTo.new("#", variant: :outline)) do |button| %>
+    <% button.with_leading_icon(name: "mail") %>
+    Sign in with email
+  <% end %>
+  <%= render(UI::ButtonTo.new("#")) do |button| %>
+    <% button.with_trailing_icon(name: "arrow-right") %>
+    Continue
+  <% end %>
+</div>

data/registry/test/components/previews/ui/button_to_preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class UI::ButtonToPreview < ViewComponent::Preview
+  # @label Playground
+  # @param variant select { choices: [default, destructive, outline, secondary, ghost, link] }
+  # @param size select { choices: [sm, default, lg] }
+  # @param full_width toggle
+  # @param text text
+  def playground(variant: :default, size: :default, full_width: false, text: "Submit")
+    render(UI::ButtonTo.new("#", variant: variant.to_sym, size: size.to_sym, full_width: full_width)) { text }
+  end
+
+  # @label Variants
+  def variants; render_with_template; end
+
+  # @label With Icon
+  def with_icon; render_with_template; end
+
+  # @label States
+  def states; render_with_template; end
+end

data/registry/test/components/previews/ui/card_preview/complete.html.erb

@@ -0,0 +1,31 @@
+<div class="max-w-sm">
+  <%= render(UI::Card.new) do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title { "Team Members" } %>
+      <% header.with_description { "Manage your team and permissions." } %>
+    <% end %>
+    <% card.with_content do %>
+      <div class="space-y-3">
+        <div class="flex items-center gap-3">
+          <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium text-primary">JD</div>
+          <div>
+            <p class="text-sm font-medium">John Doe</p>
+            <p class="text-xs text-muted-foreground">Admin</p>
+          </div>
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium text-primary">AS</div>
+          <div>
+            <p class="text-sm font-medium">Alice Smith</p>
+            <p class="text-xs text-muted-foreground">Editor</p>
+          </div>
+        </div>
+      </div>
+    <% end %>
+    <% card.with_footer do %>
+      <div class="flex gap-2 w-full">
+        <%= render(UI::Button.new(variant: :outline, size: :sm, class: "w-full")) { "Invite Member" } %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/card_preview/default.html.erb

@@ -0,0 +1,7 @@
+<div class="max-w-sm">
+  <%= render(UI::Card.new) do |card| %>
+    <% card.with_content do %>
+      <p class="text-sm text-muted-foreground">A simple card with only body content.</p>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/card_preview/settings_form.html.erb

@@ -0,0 +1,25 @@
+<div class="max-w-sm">
+  <%= render(UI::Card.new) do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title { "Account Settings" } %>
+      <% header.with_description { "Update your account preferences." } %>
+    <% end %>
+    <% card.with_content do %>
+      <div class="space-y-4">
+        <div class="space-y-2">
+          <%= render(UI::Label.new(for: "name")) { "Display Name" } %>
+          <%= render(UI::Input.new(id: "name", placeholder: "Enter your name")) %>
+        </div>
+        <div class="space-y-2">
+          <%= render(UI::Label.new(for: "username")) { "Username" } %>
+          <%= render(UI::Input.new(id: "username", placeholder: "@username")) %>
+        </div>
+      </div>
+    <% end %>
+    <% card.with_footer do %>
+      <div class="flex gap-2">
+        <%= render(UI::Button.new(variant: :primary, size: :sm)) { "Save Changes" } %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/card_preview/with_footer.html.erb

@@ -0,0 +1,13 @@
+<div class="max-w-sm">
+  <%= render(UI::Card.new) do |card| %>
+    <% card.with_content do %>
+      <p class="text-sm text-muted-foreground">Card with body content and a footer containing actions.</p>
+    <% end %>
+    <% card.with_footer do %>
+      <div class="flex gap-2">
+        <%= render(UI::Button.new(variant: :primary, size: :sm)) { "Save" } %>
+        <%= render(UI::Button.new(variant: :outline, size: :sm)) { "Cancel" } %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/card_preview/with_header.html.erb

@@ -0,0 +1,11 @@
+<div class="max-w-sm">
+  <%= render(UI::Card.new) do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title { "Notifications" } %>
+      <% header.with_description { "Configure how you receive notifications." } %>
+    <% end %>
+    <% card.with_content do %>
+      <p class="text-sm text-muted-foreground">Card with a header containing a title and description.</p>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/card_preview.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+class UI::CardPreview < ViewComponent::Preview
+  # @label Playground
+  # @param title text
+  # @param description text
+  # @param show_footer toggle
+  def playground(title: "Create project", description: "Deploy your new project in one click.", show_footer: true)
+    render(UI::Card.new) do |card|
+      card.with_header do |header|
+        header.with_title { title }
+        header.with_description { description }
+      end
+      card.with_content do
+        tag.p(class: "text-sm text-muted-foreground") { "Card body content goes here." }
+      end
+      if show_footer
+        card.with_footer do
+          tag.div(class: "flex gap-2") do
+            safe_join([
+              render(UI::Button.new(variant: :primary, size: :sm)) { "Deploy" },
+              render(UI::Button.new(variant: :outline, size: :sm)) { "Cancel" }
+            ])
+          end
+        end
+      end
+    end
+  end
+
+  # @label Default (content only)
+  def default; render_with_template; end
+
+  # @label With Header
+  def with_header; render_with_template; end
+
+  # @label With Footer
+  def with_footer; render_with_template; end
+
+  # @label Complete (all sections)
+  def complete; render_with_template; end
+
+  # @label Settings Form
+  def settings_form; render_with_template; end
+end

data/registry/test/components/previews/ui/checkbox_preview/in_form.html.erb

@@ -0,0 +1,9 @@
+<form class="space-y-4 border rounded-md p-6 max-w-sm" action="#" method="post">
+  <fieldset class="space-y-3">
+    <legend class="text-sm font-medium mb-2">Notification preferences</legend>
+    <%= render(UI::Checkbox.new(name: "prefs[email]", checked: true, label: "Email notifications")) %>
+    <%= render(UI::Checkbox.new(name: "prefs[push]", label: "Push notifications")) %>
+    <%= render(UI::Checkbox.new(name: "prefs[sms]", disabled: true, label: "SMS (unavailable)")) %>
+  </fieldset>
+  <%= render(UI::Button.new(type: :submit)) { "Save preferences" } %>
+</form>

data/registry/test/components/previews/ui/checkbox_preview/states.html.erb

@@ -0,0 +1,22 @@
+<div class="flex flex-col gap-4">
+  <div class="flex items-center gap-4">
+    <%= render(UI::Checkbox.new(name: "unchecked")) %>
+    <span class="text-sm text-muted-foreground">Unchecked</span>
+  </div>
+  <div class="flex items-center gap-4">
+    <%= render(UI::Checkbox.new(name: "checked", checked: true)) %>
+    <span class="text-sm text-muted-foreground">Checked</span>
+  </div>
+  <div class="flex items-center gap-4">
+    <%= render(UI::Checkbox.new(name: "disabled", disabled: true)) %>
+    <span class="text-sm text-muted-foreground">Disabled</span>
+  </div>
+  <div class="flex items-center gap-4">
+    <%= render(UI::Checkbox.new(name: "disabled-checked", disabled: true, checked: true)) %>
+    <span class="text-sm text-muted-foreground">Disabled + Checked</span>
+  </div>
+  <div class="flex items-center gap-4">
+    <%= render(UI::Checkbox.new(name: "error", error: true)) %>
+    <span class="text-sm text-destructive">Error</span>
+  </div>
+</div>

data/registry/test/components/previews/ui/checkbox_preview/with_label.html.erb

@@ -0,0 +1,5 @@
+<div class="flex flex-col gap-4">
+  <%= render(UI::Checkbox.new(name: "small", label: "Small checkbox", size: :sm)) %>
+  <%= render(UI::Checkbox.new(name: "default", label: "Default checkbox", size: :default)) %>
+  <%= render(UI::Checkbox.new(name: "large", label: "Large checkbox", size: :lg)) %>
+</div>

data/registry/test/components/previews/ui/checkbox_preview.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class UI::CheckboxPreview < ViewComponent::Preview
+  # @label Playground
+  # @param label    text
+  # @param size     select { choices: [sm, default, lg] }
+  # @param checked  toggle
+  # @param required toggle
+  # @param error    toggle
+  # @param disabled toggle
+  def playground(label: "Accept terms", size: :default,
+                 checked: false, required: false, error: false, disabled: false)
+    render(UI::Checkbox.new(
+      name: "demo", label: label, size: size.to_sym,
+      checked: checked, required: required, error: error, disabled: disabled
+    ))
+  end
+
+  # @label States
+  def states; render_with_template; end
+
+  # @label With Label
+  def with_label; render_with_template; end
+
+  # @label In Form
+  def in_form; render_with_template; end
+end

data/registry/test/components/previews/ui/data_grid_preview.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class UI::DataGridPreview < ViewComponent::Preview
+  # The grid fetches its rows from the server, so a preview needs a real class
+  # endpoint to point at, so here it shows the markup and the reserved height.
+  # velvetkit.com's Data grid page has a live one.
+  #
+  # @label Playground
+  # @param page_size number
+  def playground(page_size: 15)
+    render(UI::DataGrid.new(url: "/customers.json", page_size: page_size.to_i)) do |grid|
+      grid.column(:id, "ID", width: 90, type: :number)
+      grid.column(:name, "Name")
+      grid.column(:plan, "Plan")
+      grid.column(:owner, "Owner", sortable: false, filterable: false)
+    end
+  end
+end

data/registry/test/components/previews/ui/date_picker_preview/default.html.erb

@@ -0,0 +1,3 @@
+<div class="max-w-xs">
+  <%= render(UI::DatePicker.new(name: "event[date]", label: "Date of birth", value: Date.new(2012, 5, 2))) %>
+</div>

data/registry/test/components/previews/ui/date_picker_preview/states.html.erb

@@ -0,0 +1,7 @@
+<div class="flex max-w-xs flex-col gap-6">
+  <%= render(UI::DatePicker.new(name: "a", label: "Empty")) %>
+  <%= render(UI::DatePicker.new(name: "b", label: "Required", required: true)) %>
+  <%= render(UI::DatePicker.new(name: "c", label: "With an error", error: true, value: Date.new(2026, 10, 21))) %>
+  <%= render(UI::DatePicker.new(name: "d", label: "Disabled", disabled: true, value: Date.new(2026, 10, 21))) %>
+  <%= render(UI::DatePicker.new(name: "e", label: "Without the hint", hint: false)) %>
+</div>

data/registry/test/components/previews/ui/date_picker_preview.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class UI::DatePickerPreview < ViewComponent::Preview
+  # @label Default
+  def default
+    render_with_template
+  end
+
+  # @label States
+  def states
+    render_with_template
+  end
+end

data/registry/test/components/previews/ui/dialog_preview/confirmation.html.erb

@@ -0,0 +1,11 @@
+<%= render(UI::Dialog.new) do |dialog| %>
+  <% dialog.with_trigger(variant: :destructive) { "Delete project" } %>
+  <% dialog.with_content(size: :sm) do |content| %>
+    <% content.with_title { "Delete this project?" } %>
+    <% content.with_description { "This action cannot be undone. All project data will be removed permanently." } %>
+    <% content.with_footer do %>
+      <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %>
+      <%= render(UI::Button.new(variant: :destructive)) { "Delete" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/dialog_preview/custom_trigger.html.erb

@@ -0,0 +1,16 @@
+<%= render(UI::Dialog.new) do |dialog| %>
+  <% dialog.with_trigger(as_child: true, variant: :ghost) do %>
+    <a href="#dialog-demo" class="inline-flex items-center gap-2 text-sm font-medium underline underline-offset-4">
+      Review release notes
+      <%= render(UI::Icon.new(name: "arrow-right", size: :sm)) %>
+    </a>
+  <% end %>
+  <% dialog.with_content do |content| %>
+    <% content.with_title { "Release notes" } %>
+    <% content.with_description { "A custom trigger can adopt the dialog semantics without rendering a nested button." } %>
+    <div class="space-y-2 text-sm text-muted-foreground">
+      <p>Dialog trigger attributes are merged into the anchor element.</p>
+      <p>The trigger keeps its own classes while inheriting the chosen button variant tokens.</p>
+    </div>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/dialog_preview/default.html.erb

@@ -0,0 +1,15 @@
+<%= render(UI::Dialog.new) do |dialog| %>
+  <% dialog.with_trigger(variant: :outline) { "Open dialog" } %>
+  <% dialog.with_content do |content| %>
+    <% content.with_title { "Edit profile" } %>
+    <% content.with_description { "Make changes to your profile here. Click save when you're done." } %>
+    <% content.with_footer do %>
+      <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %>
+      <%= render(UI::Button.new) { "Save changes" } %>
+    <% end %>
+    <div class="grid gap-3">
+      <%= render(UI::Input.new(type: :text, value: "Rain Root")) %>
+      <%= render(UI::Input.new(type: :email, value: "rainroot@example.com")) %>
+    </div>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/dialog_preview/long_content.html.erb

@@ -0,0 +1,16 @@
+<%= render(UI::Dialog.new) do |dialog| %>
+  <% dialog.with_trigger(variant: :secondary) { "Open policy dialog" } %>
+  <% dialog.with_content(size: :lg) do |content| %>
+    <% content.with_title { "Usage policy" } %>
+    <% content.with_description { "Long-form modal content should remain readable and keep actions pinned at the end." } %>
+    <div class="space-y-4 text-sm leading-6 text-muted-foreground">
+      <p>Dialogs are best reserved for focused tasks, decisions, or short forms.</p>
+      <p>Because the component uses the native dialog element, focus is moved into the modal and restored to the opener when it closes.</p>
+      <p>The content element is portaled under <code>body</code> at runtime so the backdrop and stacking context stay predictable.</p>
+    </div>
+    <% content.with_footer do %>
+      <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Close" } %>
+      <%= render(UI::Button.new(variant: :secondary)) { "Acknowledge" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/dialog_preview/playground.html.erb

@@ -0,0 +1,12 @@
+<%= render(UI::Dialog.new) do |dialog| %>
+  <% dialog.with_trigger(variant: @trigger_variant) { "Open dialog" } %>
+  <% dialog.with_content(size: @size, show_close: @show_close) do |content| %>
+    <% content.with_title { "Edit profile" } %>
+    <% content.with_description { "Make changes to your profile here. Click save when you're done." } %>
+    <% content.with_footer do %>
+      <%= render(UI::Dialog::Close.new(variant: :outline)) { "Cancel" } %>
+      <%= render(UI::Button.new) { "Save changes" } %>
+    <% end %>
+    Dialog body content lives here.
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/dialog_preview/scrollable_body.html.erb

@@ -0,0 +1,29 @@
+<%= render(UI::Dialog.new) do |dialog| %>
+  <% dialog.with_trigger(variant: :secondary) { "Open scrollable dialog" } %>
+  <% dialog.with_content(size: :lg) do |content| %>
+    <% content.with_title { "Terms of Service" } %>
+    <% content.with_description { "Please review the full terms before continuing." } %>
+    <div class="space-y-4 text-sm leading-6 text-muted-foreground">
+      <p><strong>1. Acceptance of Terms</strong><br>
+        By accessing or using our services, you agree to be bound by these Terms of Service. If you do not agree to all the terms and conditions, you may not access the service.</p>
+      <p><strong>2. Changes to Terms</strong><br>
+        We reserve the right, at our sole discretion, to modify or replace these Terms at any time. It is your responsibility to review these Terms periodically for changes.</p>
+      <p><strong>3. Use License</strong><br>
+        Permission is granted to temporarily use the materials on our website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title.</p>
+      <p><strong>4. Disclaimer</strong><br>
+        The materials on our website are provided on an 'as is' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.</p>
+      <p><strong>5. Limitations</strong><br>
+        In no event shall we or our suppliers be liable for any damages arising out of the use or inability to use the materials on our website, even if we or an authorized representative has been notified orally or in writing of the possibility of such damage.</p>
+      <p><strong>6. Accuracy of Materials</strong><br>
+        The materials appearing on our website could include technical, typographical, or photographic errors. We do not warrant that any of the materials on our website are accurate, complete, or current.</p>
+      <p><strong>7. Links</strong><br>
+        We have not reviewed all of the sites linked to our website and are not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by us of the site.</p>
+      <p><strong>8. Governing Law</strong><br>
+        These terms and conditions are governed by and construed in accordance with the laws of the jurisdiction in which we operate, and you irrevocably submit to the exclusive jurisdiction of the courts in that location.</p>
+    </div>
+    <% content.with_footer do %>
+      <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Decline" } %>
+      <%= render(UI::Button.new) { "Accept" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/dialog_preview/sizes.html.erb

@@ -0,0 +1,46 @@
+<div class="flex flex-wrap gap-4">
+  <%= render(UI::Dialog.new) do |dialog| %>
+    <% dialog.with_trigger(variant: :outline, size: :sm) { "Open sm" } %>
+    <% dialog.with_content(size: :sm) do |content| %>
+      <% content.with_title { "Small dialog" } %>
+      <% content.with_description { "This is the smallest dialog size, great for confirmations." } %>
+      <% content.with_footer do %>
+        <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %>
+        <%= render(UI::Button.new(size: :sm)) { "Confirm" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render(UI::Dialog.new) do |dialog| %>
+    <% dialog.with_trigger(variant: :outline) { "Open default" } %>
+    <% dialog.with_content do |content| %>
+      <% content.with_title { "Default dialog" } %>
+      <% content.with_description { "This is the default dialog size for most use cases." } %>
+      <% content.with_footer do %>
+        <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %>
+        <%= render(UI::Button.new) { "Confirm" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render(UI::Dialog.new) do |dialog| %>
+    <% dialog.with_trigger(variant: :outline) { "Open lg" } %>
+    <% dialog.with_content(size: :lg) do |content| %>
+      <% content.with_title { "Large dialog" } %>
+      <% content.with_description { "This is a large dialog, useful for forms and detailed content." } %>
+      <% content.with_footer do %>
+        <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %>
+        <%= render(UI::Button.new) { "Confirm" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render(UI::Dialog.new) do |dialog| %>
+    <% dialog.with_trigger(variant: :outline) { "Open xl" } %>
+    <% dialog.with_content(size: :xl) do |content| %>
+      <% content.with_title { "Extra large dialog" } %>
+      <% content.with_description { "This is the largest dialog size, ideal for complex workflows." } %>
+      <% content.with_footer do %>
+        <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %>
+        <%= render(UI::Button.new) { "Confirm" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/dialog_preview/without_close_button.html.erb

@@ -0,0 +1,11 @@
+<%= render(UI::Dialog.new) do |dialog| %>
+  <% dialog.with_trigger(variant: :outline) { "Open dialog" } %>
+  <% dialog.with_content(show_close: false) do |content| %>
+    <% content.with_title { "No close button" } %>
+    <% content.with_description { "This dialog hides the default close button. Users must interact with the footer actions to dismiss it." } %>
+    <% content.with_footer do %>
+      <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Dismiss" } %>
+      <%= render(UI::Button.new) { "Continue" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/dialog_preview/without_title.html.erb

@@ -0,0 +1,13 @@
+<%= render(UI::Dialog.new) do |dialog| %>
+  <% dialog.with_trigger(variant: :outline) { "Open dialog" } %>
+  <% dialog.with_content do %>
+    <div class="space-y-3 text-sm text-muted-foreground">
+      <p>This dialog has no title or description header.</p>
+      <p>Use this pattern when the content speaks for itself or when you want a cleaner, minimal modal.</p>
+    </div>
+    <div class="mt-4 flex justify-end gap-2">
+      <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Close" } %>
+      <%= render(UI::Button.new) { "Okay" } %>
+    </div>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/dialog_preview.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class UI::DialogPreview < ViewComponent::Preview
+  # @label Playground
+  # @param trigger_variant select { choices: [default, outline, secondary, ghost] }
+  # @param size select { choices: [sm, default, lg, xl] }
+  # @param show_close toggle
+  def playground(trigger_variant: :outline, size: :default, show_close: true)
+    @trigger_variant = trigger_variant.to_sym
+    @size = size.to_sym
+    @show_close = show_close
+    render_with_template
+  end
+
+  # @label Default
+  def default; render_with_template; end
+
+  # @label Confirmation
+  def confirmation; render_with_template; end
+
+  # @label Custom Trigger
+  def custom_trigger; render_with_template; end
+
+  # @label Long Content
+  def long_content; render_with_template; end
+
+  # @label Sizes
+  def sizes; render_with_template; end
+
+  # @label Without Close Button
+  def without_close_button; render_with_template; end
+
+  # @label Without Title
+  def without_title; render_with_template; end
+
+  # @label Scrollable Body
+  def scrollable_body; render_with_template; end
+end

data/registry/test/components/previews/ui/divider_preview/horizontal.html.erb

@@ -0,0 +1,5 @@
+<div class="space-y-4">
+  <%= render(UI::Divider.new) %>
+  <p class="text-sm text-muted-foreground">Content between dividers</p>
+  <%= render(UI::Divider.new) %>
+</div>