velvetkit 0.1.0.beta

data/registry/test/components/previews/ui/alert_preview/title_only.html.erb

@@ -0,0 +1,12 @@
+<div class="flex flex-col gap-4 max-w-lg">
+  <%= render(UI::Alert.new) do |alert| %>
+    <% alert.with_title { "Title only, no description" } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :info)) do |alert| %>
+    <% alert.with_title { "Info with custom icon" } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :warning)) do |alert| %>
+    <% alert.with_icon(name: "circle-alert") %>
+    <% alert.with_title { "Warning with custom icon, title only" } %>
+  <% end %>
+</div>

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

@@ -0,0 +1,22 @@
+<div class="flex flex-col gap-4 max-w-lg">
+  <%= render(UI::Alert.new) do |alert| %>
+    <% alert.with_title { "Default" } %>
+    <% alert.with_description { "This is a default alert with important information." } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :success)) do |alert| %>
+    <% alert.with_title { "Success" } %>
+    <% alert.with_description { "Your changes have been saved successfully." } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :destructive)) do |alert| %>
+    <% alert.with_title { "Destructive" } %>
+    <% alert.with_description { "There was a problem with your request." } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :warning)) do |alert| %>
+    <% alert.with_title { "Warning" } %>
+    <% alert.with_description { "This action cannot be undone." } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :info)) do |alert| %>
+    <% alert.with_title { "Info" } %>
+    <% alert.with_description { "Here's some helpful information." } %>
+  <% end %>
+</div>

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

@@ -0,0 +1,12 @@
+<div class="flex flex-col gap-4 max-w-lg">
+  <%= render(UI::Alert.new) do |alert| %>
+    <% alert.with_icon(name: "badge-check") %>
+    <% alert.with_title { "Custom icon" } %>
+    <% alert.with_description { "Uses a custom badge-check icon instead of default." } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :success)) do |alert| %>
+    <% alert.with_icon(name: "circle-check", class: "text-emerald-600") %>
+    <% alert.with_title { "Custom colored icon" } %>
+    <% alert.with_description { "Icon color overridden via class prop." } %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/alert_preview/with_link.html.erb

@@ -0,0 +1,18 @@
+<div class="flex flex-col gap-4 max-w-lg">
+  <%= render(UI::Alert.new(variant: :info)) do |alert| %>
+    <% alert.with_title { "Did you know?" } %>
+    <% alert.with_description { "Check out the <a class='underline font-medium' href='/docs'>documentation</a> for more details.".html_safe } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :success)) do |alert| %>
+    <% alert.with_title { "Profile updated" } %>
+    <% alert.with_description { "Your changes were saved. <a class='underline font-medium' href='/settings'>View your profile</a> to confirm.".html_safe } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :warning)) do |alert| %>
+    <% alert.with_title { "Action required" } %>
+    <% alert.with_description { "Please <a class='underline font-medium' href='/verify'>verify your email</a> before continuing.".html_safe } %>
+  <% end %>
+  <%= render(UI::Alert.new(variant: :destructive)) do |alert| %>
+    <% alert.with_title { "Payment failed" } %>
+    <% alert.with_description { "Your card was declined. <a class='underline font-medium' href='/billing'>Update payment method</a> to retry.".html_safe } %>
+  <% end %>
+</div>

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class UI::AlertPreview < ViewComponent::Preview
+  # @label Playground
+  # @param variant select { choices: [default, destructive, warning, success, info] }
+  # @param title   text
+  # @param description text
+  def playground(variant: :default, title: "Heads up!", description: "This is a sample alert message.")
+    render(UI::Alert.new(variant: variant.to_sym)) do |alert|
+      alert.with_title { title }
+      alert.with_description { description }
+    end
+  end
+
+  # @label All Variants
+  def variants; render_with_template; end
+
+  # @label With Icon
+  def with_icon; render_with_template; end
+
+  # @label Title Only
+  def title_only; render_with_template; end
+
+  # @label With Link
+  def with_link; render_with_template; end
+
+  # @label Dismissible
+  def dismissible
+    render(UI::Alert.new(variant: :info, dismissible: true)) do |alert|
+      alert.with_title { "Update available" }
+      alert.with_description { "A new version of the application is ready to install." }
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<div class="space-y-8">
+  <div>
+    <p class="text-sm text-muted-foreground mb-3">4 avatars, overlapping with ring separation</p>
+    <%= render(UI::AvatarGroup.new) do |group| %>
+      <% group.with_avatar { "JD" } %>
+      <% group.with_avatar { "AS" } %>
+      <% group.with_avatar { "RM" } %>
+      <% group.with_avatar { "BK" } %>
+    <% end %>
+  </div>
+</div>

data/registry/test/components/previews/ui/avatar_group_preview/overflow.html.erb

@@ -0,0 +1,23 @@
+<div class="space-y-8">
+  <div>
+    <p class="text-sm text-muted-foreground mb-3">max=3 with 6 total → shows 3 + "+3"</p>
+    <%= render(UI::AvatarGroup.new(max: 3)) do |group| %>
+      <% group.with_avatar { "JD" } %>
+      <% group.with_avatar { "AS" } %>
+      <% group.with_avatar { "RM" } %>
+      <% group.with_avatar { "BK" } %>
+      <% group.with_avatar { "CD" } %>
+      <% group.with_avatar { "PK" } %>
+    <% end %>
+  </div>
+  <div>
+    <p class="text-sm text-muted-foreground mb-3">max=2 with 5 total → shows 2 + "+3"</p>
+    <%= render(UI::AvatarGroup.new(max: 2, size: :sm)) do |group| %>
+      <% group.with_avatar { "JD" } %>
+      <% group.with_avatar { "AS" } %>
+      <% group.with_avatar { "RM" } %>
+      <% group.with_avatar { "BK" } %>
+      <% group.with_avatar { "CD" } %>
+    <% end %>
+  </div>
+</div>

data/registry/test/components/previews/ui/avatar_group_preview/small.html.erb

@@ -0,0 +1,12 @@
+<div class="space-y-8">
+  <div>
+    <p class="text-sm text-muted-foreground mb-3">Small avatars stacked (size: :sm)</p>
+    <%= render(UI::AvatarGroup.new(size: :sm)) do |group| %>
+      <% group.with_avatar { "JD" } %>
+      <% group.with_avatar { "AS" } %>
+      <% group.with_avatar { "RM" } %>
+      <% group.with_avatar { "BK" } %>
+      <% group.with_avatar { "CD" } %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class UI::AvatarGroupPreview < ViewComponent::Preview
+  # @label Playground
+  # @param count number { min: 1, max: 8 }
+  # @param size  select { choices: [sm, default, lg, xl] }
+  def playground(count: 4, size: :default)
+    render(UI::AvatarGroup.new(size: size.to_sym)) do |group|
+      INITIALS[0...count.to_i.clamp(1, 8)].each { |init| group.with_avatar { init } }
+    end
+  end
+
+  INITIALS = %w[JD AS RM BK CD PK NP TW].freeze
+
+  # @label Default Stack
+  def default; render_with_template; end
+
+  # @label With Overflow
+  def overflow; render_with_template; end
+
+  # @label Small Stack
+  def small; render_with_template; end
+end

data/registry/test/components/previews/ui/avatar_preview/colors.html.erb

@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-center gap-6">
+  <% { default: "bg-muted", primary: "bg-primary", destructive: "bg-destructive", amber: "bg-amber-500", emerald: "bg-emerald-500", purple: "bg-purple-500", sky: "bg-sky-500" }.each do |color, label| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render(UI::Avatar.new(color: color)) { "JD" } %>
+      <span class="text-xs text-muted-foreground"><%= color %></span>
+    </div>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/avatar_preview/shapes.html.erb

@@ -0,0 +1,10 @@
+<div class="flex flex-wrap items-center gap-6">
+  <div class="flex flex-col items-center gap-2">
+    <%= render(UI::Avatar.new(shape: :circle)) { "JD" } %>
+    <span class="text-xs text-muted-foreground">Circle (People)</span>
+  </div>
+  <div class="flex flex-col items-center gap-2">
+    <%= render(UI::Avatar.new(shape: :rounded)) { "NS" } %>
+    <span class="text-xs text-muted-foreground">Rounded (Groups/Projects)</span>
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-center gap-6">
+  <% { sm: 24, default: 40, lg: 48, xl: 64 }.each do |size, px| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render(UI::Avatar.new(size: size)) { "JD" } %>
+      <span class="text-xs text-muted-foreground"><%= size %> (<%= px %>px)</span>
+    </div>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/avatar_preview/with_image.html.erb

@@ -0,0 +1,10 @@
+<div class="flex flex-wrap items-end gap-6">
+  <% { sm: 24, default: 40, lg: 48 }.each do |size, px| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render(UI::Avatar.new(size: size)) do |avatar| %>
+        <% avatar.with_image(src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=face", alt: "User") %>
+      <% end %>
+      <span class="text-xs text-muted-foreground"><%= size %> (<%= px %>px)</span>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class UI::AvatarPreview < ViewComponent::Preview
+  # @label Playground
+  # @param size  select { choices: [sm, default, lg, xl] }
+  # @param shape select { choices: [circle, rounded] }
+  # @param color select { choices: [default, primary, destructive, amber, emerald, purple, sky] }
+  # @param initials text
+  def playground(size: :default, shape: :circle, color: :default, initials: "JD")
+    render(UI::Avatar.new(size: size.to_sym, shape: shape.to_sym, color: color.to_sym)) { initials }
+  end
+
+  # @label Sizes
+  def sizes; render_with_template; end
+
+  # @label Shapes
+  def shapes; render_with_template; end
+
+  # @label Colors
+  def colors; render_with_template; end
+
+  # @label With Image
+  def with_image; render_with_template; end
+end

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

@@ -0,0 +1,5 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Badge.new(size: :sm)) { "Small" } %>
+  <%= render(UI::Badge.new(size: :default)) { "Default" } %>
+  <%= render(UI::Badge.new(size: :lg)) { "Large" } %>
+</div>

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

@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Badge.new(variant: :default)) { "Default" } %>
+  <%= render(UI::Badge.new(variant: :secondary)) { "Secondary" } %>
+  <%= render(UI::Badge.new(variant: :destructive)) { "Destructive" } %>
+  <%= render(UI::Badge.new(variant: :outline)) { "Outline" } %>
+  <%= render(UI::Badge.new(variant: :success)) { "Success" } %>
+  <%= render(UI::Badge.new(variant: :warning)) { "Warning" } %>
+</div>

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

@@ -0,0 +1,14 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Badge.new) do |badge| %>
+    <% badge.with_leading_icon(name: "badge-check") %>
+    Verified
+  <% end %>
+  <%= render(UI::Badge.new(variant: :success)) do |badge| %>
+    <% badge.with_leading_icon(name: "circle-check") %>
+    42
+  <% end %>
+  <%= render(UI::Badge.new(variant: :warning)) do |badge| %>
+    <% badge.with_leading_icon(name: "circle-alert") %>
+    Pending
+  <% end %>
+</div>

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class UI::BadgePreview < ViewComponent::Preview
+  # @label Playground
+  # @param variant select { choices: [default, secondary, destructive, outline, success, warning] }
+  # @param size    select { choices: [sm, default, lg] }
+  # @param text    text
+  def playground(variant: :default, size: :default, text: "Badge")
+    render(UI::Badge.new(variant: variant.to_sym, size: size.to_sym)) { text }
+  end
+
+  # @label All Variants
+  def variants; render_with_template; end
+
+  # @label Sizes
+  def sizes; render_with_template; end
+
+  # @label With Icon
+  def with_icon; render_with_template; end
+end

data/registry/test/components/previews/ui/banner_preview/introduction.html.erb

@@ -0,0 +1,9 @@
+<div class="space-y-4 max-w-2xl">
+  <%= render(UI::Banner.new(variant: :introduction)) do |banner| %>
+    <% banner.with_title { "Welcome to your workspace" } %>
+    Invite your team, connect your data and publish your first report.
+    <% banner.with_action do %>
+      <a href="#" class="inline-flex items-center text-sm font-medium text-primary hover:underline">Get started →</a>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/banner_preview/promotion.html.erb

@@ -0,0 +1,9 @@
+<div class="space-y-4 max-w-2xl">
+  <%= render(UI::Banner.new(variant: :promotion)) do |banner| %>
+    <% banner.with_title { "Now available: Advanced Analytics" } %>
+    Unlock powerful insights with our new analytics dashboard. Free for Pro plan users until June 30.
+    <% banner.with_action do %>
+      <a href="#" class="inline-flex items-center text-sm font-medium text-primary hover:underline">Upgrade now →</a>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/banner_preview/with_illustration.html.erb

@@ -0,0 +1,12 @@
+<div class="space-y-4 max-w-2xl">
+  <%= render(UI::Banner.new(variant: :introduction)) do |banner| %>
+    <% banner.with_illustration do %>
+      <img src="https://placehold.co/64x64/7c3aed/white?text=VK" alt="" class="h-16 w-16 rounded-lg" />
+    <% end %>
+    <% banner.with_title { "Introducing Velvet Kit" } %>
+    A modern component library for Rails. Build beautiful interfaces faster with pre-built, accessible components.
+    <% banner.with_action do %>
+      <a href="#" class="inline-flex items-center text-sm font-medium text-primary hover:underline">View docs →</a>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class UI::BannerPreview < ViewComponent::Preview
+  # @label Playground
+  # @param variant select { choices: [introduction, promotion] }
+  # @param dismissible toggle
+  def playground(variant: :introduction, dismissible: true)
+    render(UI::Banner.new(variant: variant.to_sym, dismissible: dismissible)) do |banner|
+      banner.with_title { "Try our new pipeline editor" }
+      "Visualize and edit your CI/CD pipelines with an interactive drag-and-drop editor. No YAML required."
+      banner.with_action do
+        "<a href='#' class='inline-flex items-center text-sm font-medium text-primary hover:underline'>Learn more</a>".html_safe
+      end
+    end
+  end
+
+  # @label Introduction
+  def introduction; render_with_template; end
+
+  # @label Promotion
+  def promotion; render_with_template; end
+
+  # @label With Illustration
+  def with_illustration; render_with_template; end
+end

data/registry/test/components/previews/ui/breadcrumb_preview/collapsed.html.erb

@@ -0,0 +1,50 @@
+<div class="flex flex-col gap-8 max-w-xl">
+  <div>
+    <h3 class="text-sm font-medium mb-2">Slot API — ellipsis at end</h3>
+    <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %>
+      <% bc.with_item(href: "#", text: "Projects") %>
+      <% bc.with_item(href: "#", text: "Website",  avatar_src: "/icon.png") %>
+      <% bc.with_ellipsis do %>
+        <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Settings" } %>
+        <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Members" } %>
+        <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Billing" } %>
+      <% end %>
+      <% bc.with_item(href: "#", text: "Dashboard") %>
+    <% end %>
+  </div>
+  <div>
+    <h3 class="text-sm font-medium mb-2">Compound API — ellipsis in middle</h3>
+    <%= render(UI::Breadcrumb.new(size: :sm)) do %>
+      <%= render(UI::Breadcrumb::List.new) do %>
+        <%= render(UI::Breadcrumb::Item.new) do %>
+          <%= render(UI::Link.new(href: "#", class: "text-xs text-muted-foreground max-w-32 truncate font-normal justify-start rounded-sm")) { "Handbook" } %>
+        <% end %>
+        <%= render(UI::Breadcrumb::Separator.new) %>
+        <%= render(UI::Breadcrumb::Ellipsis.new) do %>
+          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Docs" } %>
+          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "API" } %>
+          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Platform" } %>
+        <% end %>
+        <%= render(UI::Breadcrumb::Separator.new) %>
+        <%= render(UI::Breadcrumb::Item.new) do %>
+          <%= render(UI::Link.new(href: "#", class: "text-xs text-foreground font-normal justify-start rounded-sm", aria: { current: "page" })) { "Cloud providers" } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+  <div>
+    <h3 class="text-sm font-medium mb-2">Compound API — ellipsis at start</h3>
+    <%= render(UI::Breadcrumb.new(size: :sm)) do %>
+      <%= render(UI::Breadcrumb::List.new) do %>
+        <%= render(UI::Breadcrumb::Ellipsis.new) do %>
+          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Learn" } %>
+          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Tutorials" } %>
+        <% end %>
+        <%= render(UI::Breadcrumb::Separator.new) %>
+        <%= render(UI::Breadcrumb::Item.new) do %>
+          <%= render(UI::Link.new(href: "#", class: "text-xs text-foreground font-normal justify-start rounded-sm", aria: { current: "page" })) { "Getting Started" } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+<div class="max-w-2xl">
+  <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %>
+    <% bc.with_item(href: "#", text: "Workspace") %>
+    <% bc.with_item(href: "#", text: "Website") %>
+    <% bc.with_item(href: "#", text: "Issues") %>
+    <% bc.with_item(href: "#", text: "#1234") %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/breadcrumb_preview/long_path.html.erb

@@ -0,0 +1,8 @@
+<div class="max-w-80">
+  <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %>
+    <% bc.with_item(href: "#", text: "Workspace") %>
+    <% bc.with_item(href: "#", text: "Very Long Project Name That Should Truncate") %>
+    <% bc.with_item(href: "#", text: "Settings") %>
+    <% bc.with_item(href: "#", text: "General") %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/breadcrumb_preview/medium.html.erb

@@ -0,0 +1,7 @@
+<div class="max-w-2xl">
+  <%= render(UI::Breadcrumb.new(size: :md)) do |bc| %>
+    <% bc.with_item(href: "#", text: "Workspace") %>
+    <% bc.with_item(href: "#", text: "Website") %>
+    <% bc.with_item(href: "#", text: "Issues") %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/breadcrumb_preview/with_avatar.html.erb

@@ -0,0 +1,8 @@
+<div class="max-w-2xl">
+  <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %>
+    <% bc.with_item(href: "#", text: "Website", avatar_src: "/icon.png") %>
+    <% bc.with_item(href: "#", text: "Projects", avatar_src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9Y9w-vhwNHxfSOZWSDFJ-9iPU8EPY0GR47A&s") %>
+    <% bc.with_item(href: "#", text: "Dashboard") %>
+    <% bc.with_item(href: "#", text: "Settings") %>
+  <% end %>
+</div>

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

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+class UI::BreadcrumbPreview < ViewComponent::Preview
+  # @label Playground
+  # @param size select { choices: [sm, md] }
+  def playground(size: :sm)
+    render(UI::Breadcrumb.new(size: size.to_sym)) do |bc|
+      bc.with_item(href: "#", text: "Workspace")
+      bc.with_item(href: "#", text: "Website")
+      bc.with_item(href: "#", text: "Issues")
+      bc.with_item(href: "#", text: "#1234")
+    end
+  end
+
+  # @label Default (sm)
+  def default; render_with_template; end
+
+  # @label Medium (md)
+  def medium; render_with_template; end
+
+  # @label With Avatar
+  def with_avatar; render_with_template; end
+
+  # @label Long Path
+  def long_path; render_with_template; end
+
+  # @label Collapsed — middle (default)
+  # Auto-ellipsis with collapse_at: :middle. Keeps first and last segments.
+  def collapsed_middle
+    render(UI::Breadcrumb.new(max_items: 3, collapse_at: :middle)) do |bc|
+      bc.with_item(href: "#", text: "Handbook")
+      bc.with_item(href: "#", text: "Docs")
+      bc.with_item(href: "#", text: "API")
+      bc.with_item(href: "#", text: "Platform")
+      bc.with_item(href: "#", text: "Cloud providers")
+    end
+  end
+
+  # @label Collapsed — start
+  # Auto-ellipsis with collapse_at: :start. Keeps the last segments.
+  def collapsed_start
+    render(UI::Breadcrumb.new(max_items: 3, collapse_at: :start)) do |bc|
+      bc.with_item(href: "#", text: "Learn")
+      bc.with_item(href: "#", text: "Tutorials")
+      bc.with_item(href: "#", text: "Get Started")
+      bc.with_item(href: "#", text: "Components")
+      bc.with_item(href: "#", text: "Breadcrumb")
+    end
+  end
+
+  # @label Collapsed — end
+  # Auto-ellipsis with collapse_at: :end. Keeps the first segments.
+  def collapsed_end
+    render(UI::Breadcrumb.new(max_items: 3, collapse_at: :end)) do |bc|
+      bc.with_item(href: "#", text: "Home")
+      bc.with_item(href: "#", text: "Settings")
+      bc.with_item(href: "#", text: "Account")
+      bc.with_item(href: "#", text: "Billing")
+      bc.with_item(href: "#", text: "Invoices")
+    end
+  end
+
+  # @label Collapsed (legacy explicit ellipsis)
+  # Manual ellipsis slot (deprecated — use max_items + collapse_at instead)
+  def collapsed; render_with_template; end
+end

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

@@ -0,0 +1,39 @@
+<div class="flex flex-col gap-6">
+  <div>
+    <p class="text-xs text-muted-foreground mb-2">All variants — disabled</p>
+    <div class="flex flex-wrap items-center gap-3">
+      <%= render(UI::Button.new(variant: :default,     disabled: true)) { "Default" } %>
+      <%= render(UI::Button.new(variant: :destructive, disabled: true)) { "Destructive" } %>
+      <%= render(UI::Button.new(variant: :outline,     disabled: true)) { "Outline" } %>
+      <%= render(UI::Button.new(variant: :secondary,   disabled: true)) { "Secondary" } %>
+      <%= render(UI::Button.new(variant: :ghost,       disabled: true)) { "Ghost" } %>
+      <%= render(UI::Button.new(variant: :link,        disabled: true)) { "Link" } %>
+    </div>
+  </div>
+
+  <div>
+    <p class="text-xs text-muted-foreground mb-2">Disabled with icons</p>
+    <div class="flex flex-wrap items-center gap-3">
+      <%= render(UI::Button.new(disabled: true)) do |btn|
+            btn.with_leading_icon(name: "lock")
+            "Locked"
+          end %>
+      <%= render(UI::Button.new(variant: :outline, disabled: true)) do |btn|
+            btn.with_trailing_icon(name: "arrow-right")
+            "Continue"
+          end %>
+      <%= render(UI::Button.new(variant: :destructive, size: :icon, disabled: true)) do |btn|
+            btn.with_leading_icon(name: "x")
+          end %>
+    </div>
+  </div>
+
+  <div>
+    <p class="text-xs text-muted-foreground mb-2">Loading auto-disables (cursor-not-allowed shows on hover)</p>
+    <div class="flex flex-wrap items-center gap-3">
+      <%= render(UI::Button.new(loading: true)) { "Saving" } %>
+      <%= render(UI::Button.new(variant: :destructive, loading: true)) { "Deleting" } %>
+      <%= render(UI::Button.new(variant: :outline, loading: true)) { "Loading" } %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Button.new(variant: :default, size: :icon)) do |btn|
+        btn.with_leading_icon(name: "menu")
+      end %>
+  <%= render(UI::Button.new(variant: :outline, size: :icon)) do |btn|
+        btn.with_leading_icon(name: "user")
+      end %>
+  <%= render(UI::Button.new(variant: :secondary, size: :icon)) do |btn|
+        btn.with_leading_icon(name: "panel-left")
+      end %>
+  <%= render(UI::Button.new(variant: :ghost, size: :icon)) do |btn|
+        btn.with_leading_icon(name: "x")
+      end %>
+  <%= render(UI::Button.new(variant: :destructive, size: :icon)) do |btn|
+        btn.with_leading_icon(name: "x")
+      end %>
+</div>

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

@@ -0,0 +1,12 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Button.new(loading: true)) { "Saving" } %>
+  <%= render(UI::Button.new(variant: :outline, loading: true)) do |btn|
+        btn.with_leading_icon(name: "lock")
+        "Authenticating"
+      end %>
+  <%= render(UI::Button.new(variant: :destructive, loading: true)) do |btn|
+        btn.with_trailing_icon(name: "arrow-right")
+        "Deleting"
+      end %>
+  <%= render(UI::Button.new(variant: :default, size: :icon, loading: true)) %>
+</div>

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

@@ -0,0 +1,6 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Button.new(size: :sm))      { "Small" } %>
+  <%= render(UI::Button.new(size: :default)) { "Default" } %>
+  <%= render(UI::Button.new(size: :lg))      { "Large" } %>
+  <%= render(UI::Button.new(size: :icon))    { "I" } %>
+</div>

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

@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Button.new(variant: :default))     { "Default" } %>
+  <%= render(UI::Button.new(variant: :destructive)) { "Destructive" } %>
+  <%= render(UI::Button.new(variant: :outline))     { "Outline" } %>
+  <%= render(UI::Button.new(variant: :secondary))   { "Secondary" } %>
+  <%= render(UI::Button.new(variant: :ghost))       { "Ghost" } %>
+  <%= render(UI::Button.new(variant: :link))        { "Link" } %>
+</div>

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

@@ -0,0 +1,12 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Button.new(variant: :default)) do |btn|
+        btn.with_leading_icon(name: "lock")
+        btn.with_trailing_icon(name: "arrow-right")
+        "Sign in"
+      end %>
+  <%= render(UI::Button.new(variant: :outline, size: :lg)) do |btn|
+        btn.with_leading_icon(name: "eye")
+        btn.with_trailing_icon(name: "chevrons-up-down")
+        "Preview options"
+      end %>
+</div>