velvetkit 0.1.0.beta

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

@@ -0,0 +1,15 @@
+<%= render(UI::Sheet.new) do |sheet| %>
+  <% sheet.with_trigger(variant: :outline) { "Open sheet" } %>
+  <% sheet.with_content(side: @side) 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::Sheet::Close.new(variant: :outline)) { "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/sheet_preview/right.html.erb

@@ -0,0 +1,11 @@
+<%= render(UI::Sheet.new) do |sheet| %>
+  <% sheet.with_trigger { "Open right sheet" } %>
+  <% sheet.with_content(side: :right) do |content| %>
+    <% content.with_title { "Notifications" } %>
+    <% content.with_description { "Manage your notification preferences." } %>
+    <div class="space-y-3 text-sm text-muted-foreground">
+      <p>Right sheets work well for settings and secondary tasks.</p>
+      <p>They reuse the dialog controller but anchor the panel to a side.</p>
+    </div>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/sheet_preview/top.html.erb

@@ -0,0 +1,8 @@
+<%= render(UI::Sheet.new) do |sheet| %>
+  <% sheet.with_trigger(variant: :outline) { "Open top sheet" } %>
+  <% sheet.with_content(side: :top) do |content| %>
+    <% content.with_title { "Command palette" } %>
+    <% content.with_description { "Quick actions and navigation in a compact top sheet." } %>
+    <%= render(UI::Input.new(type: :search, placeholder: "Search commands")) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class UI::SheetPreview < ViewComponent::Preview
+  # @label Playground
+  # @param side select { choices: [right, left, top, bottom] }
+  def playground(side: :right)
+    @side = side.to_sym
+    render_with_template
+  end
+
+  # @label Right
+  def right; render_with_template; end
+
+  # @label Left
+  def left; render_with_template; end
+
+  # @label Top
+  def top; render_with_template; end
+
+  # @label Bottom
+  def bottom; render_with_template; end
+end

data/registry/test/components/previews/ui/sidebar_preview/_brand.html.erb

@@ -0,0 +1,14 @@
+<%# The VelvetKit logo for the sidebar header: the full logo while expanded,
+    the V mark once collapsed to icons. Collapsed, the mark drops the side
+    padding and sits in a box the size of a menu button, so it lines up over
+    the icons. The images are velvetkit.com's; in an app, put its own logo here. %>
+<div class="flex h-9 min-w-0 items-center px-2 group-data-[collapsible=icon]:px-0">
+  <span class="group-data-[collapsible=icon]:hidden">
+    <img src="/velvetkit/logo-light.png" alt="VelvetKit" class="h-8 w-auto max-w-none dark:hidden">
+    <img src="/velvetkit/logo-dark.png" alt="VelvetKit" class="hidden h-8 w-auto max-w-none dark:block">
+  </span>
+  <span class="hidden size-8 shrink-0 items-center justify-center group-data-[collapsible=icon]:flex">
+    <img src="/velvetkit/mark-light.png" alt="VelvetKit" class="size-7 max-w-none shrink-0 object-contain dark:hidden">
+    <img src="/velvetkit/mark-dark.png" alt="VelvetKit" class="hidden size-7 max-w-none shrink-0 object-contain dark:block">
+  </span>
+</div>

data/registry/test/components/previews/ui/sidebar_preview/_shell.html.erb

@@ -0,0 +1,60 @@
+<%# Shared chrome for every UI::Sidebar preview: the framed viewport, the
+    wrapper that carries the Stimulus controller, the sidebar itself and the
+    inset content area. Each scenario supplies only what makes it different —
+    its nav groups, an optional brand block and its main content — so this
+    scaffold is defined once instead of copied into every template.
+
+    Locals:
+      sidebar_id:  id on the <aside>; the trigger points aria-controls at it
+      collapsible: :none or :icon
+      state:       :expanded or :collapsed
+      groups:      [{ label:, items: [{ icon:, text:, active:, icon_class: }] }]
+      brand:       captured markup for the sidebar header (optional)
+      title:       text shown beside the trigger
+      main:        captured markup for the content area
+%>
+<% sidebar_id  = local_assigns.fetch(:sidebar_id, "preview-sidebar") %>
+<% collapsible = local_assigns.fetch(:collapsible, :none) %>
+<% state       = local_assigns.fetch(:state, :expanded) %>
+<% groups      = local_assigns.fetch(:groups, []) %>
+<% title       = local_assigns.fetch(:title, "Dashboard") %>
+
+<%# transform-gpu makes this frame a containing block, so the sidebar's
+    `position: fixed` inner panel resolves against the frame instead of
+    escaping to the browser viewport. Without it the sidebar renders outside
+    the preview box. %>
+<div class="relative h-[600px] overflow-hidden rounded-lg border transform-gpu">
+  <%= render(UI::Sidebar::Wrapper.new(min_height: :full)) do %>
+    <%= render(UI::Sidebar.new(id: sidebar_id, collapsible: collapsible, state: state)) do |sidebar| %>
+      <% if local_assigns[:brand].present? %>
+        <% sidebar.with_sidebar_header { local_assigns[:brand] } %>
+      <% end %>
+      <% sidebar.with_sidebar_content do |content| %>
+        <% groups.each do |group_data| %>
+          <% content.with_sidebar_group do |group| %>
+            <% group.with_label(group_data[:label]) %>
+            <% group.with_menu do |menu| %>
+              <% Array(group_data[:items]).each do |nav| %>
+                <% menu.with_menu_item do |item| %>
+                  <% item.with_menu_button("#", active: nav[:active].present?) do %>
+                    <%= render(UI::Icon.new(name: nav[:icon], size: :sm, class: nav[:icon_class])) %>
+                    <span><%= nav[:text] %></span>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render(UI::Sidebar::Inset.new) do %>
+      <%# Height is fixed: the header must not resize when the sidebar collapses. %>
+      <header class="flex h-14 shrink-0 items-center gap-2 border-b px-4">
+        <%= render(UI::Sidebar::Trigger.new(sidebar_id: sidebar_id)) %>
+        <span class="text-sm font-medium"><%= title %></span>
+      </header>
+      <div class="p-6"><%= local_assigns[:main] %></div>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/sidebar_preview/collapsible.html.erb

@@ -0,0 +1,55 @@
+<% brand = render("ui/sidebar_preview/brand") %>
+
+<% main = capture do %>
+  <div class="space-y-6">
+    <div>
+      <h2 class="text-lg font-semibold mb-2">Collapsible Sidebar</h2>
+      <p class="text-sm text-muted-foreground">Click the toggle button to collapse the sidebar to icon-only mode. State is persisted in localStorage.</p>
+    </div>
+    <%= render(UI::Tabs.new(default_value: "overview")) do |tabs| %>
+      <% tabs.with_list do |list| %>
+        <% list.with_trigger(value: "overview") { "Overview" } %>
+        <% list.with_trigger(value: "analytics") { "Analytics" } %>
+        <% list.with_trigger(value: "reports") { "Reports" } %>
+      <% end %>
+      <% tabs.with_panel(value: "overview") do %>
+        <div class="space-y-3">
+          <p class="text-sm text-muted-foreground">Project overview with key metrics and recent activity.</p>
+          <%= render(UI::Menu.new) do |menu| %>
+            <% menu.with_trigger(variant: :outline, size: :sm) { "Actions" } %>
+            <% menu.with_content do |content| %>
+              <% content.with_label("Options") %>
+              <% content.with_item("Edit project") %>
+              <% content.with_item("Share") %>
+              <% content.with_divider %>
+              <% content.with_item("Delete", variant: :destructive) %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+      <% tabs.with_panel(value: "analytics") do %>
+        <p class="text-sm text-muted-foreground">Traffic and conversion analytics over the last 30 days.</p>
+      <% end %>
+      <% tabs.with_panel(value: "reports") do %>
+        <p class="text-sm text-muted-foreground">Generated reports and scheduled exports.</p>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>
+
+<%= render "ui/sidebar_preview/shell",
+      sidebar_id: "preview-sidebar-collapsible",
+      collapsible: :icon,
+      brand: brand,
+      main: main,
+      groups: [
+        { label: "Platform", items: [
+          { icon: "layout-dashboard", text: "Dashboard", active: true },
+          { icon: "bar-chart-3",      text: "Analytics" },
+          { icon: "folder-kanban",    text: "Projects" }
+        ] },
+        { label: "Account", items: [
+          { icon: "user",        text: "Profile" },
+          { icon: "credit-card", text: "Billing" }
+        ] }
+      ] %>

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

@@ -0,0 +1,17 @@
+<% brand = render("ui/sidebar_preview/brand") %>
+
+<% main = capture do %>
+  <p class="text-muted-foreground">Main content area next to the sidebar.</p>
+<% end %>
+
+<%= render "ui/sidebar_preview/shell",
+      sidebar_id: "preview-sidebar-default",
+      brand: brand,
+      main: main,
+      groups: [
+        { label: "Applications", items: [
+          { icon: "layout-dashboard", text: "Dashboard", active: true, icon_class: "stroke-orange-500" },
+          { icon: "users",           text: "Team",                icon_class: "stroke-purple-500" },
+          { icon: "file-text",       text: "Reports" }
+        ] }
+      ] %>

data/registry/test/components/previews/ui/sidebar_preview/with_dropdown_header.html.erb

@@ -0,0 +1,33 @@
+<% brand = capture do %>
+  <%= render(UI::Menu.new) do |menu| %>
+    <% menu.with_trigger(variant: :ghost, class: "w-full justify-start px-2 h-auto py-1.5 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0") do %>
+      <img src="/velvetkit/mark-light.png" alt="" class="size-8 max-w-none shrink-0 object-contain dark:hidden"><img src="/velvetkit/mark-dark.png" alt="" class="hidden size-8 max-w-none shrink-0 object-contain dark:block">
+      <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+        <span class="truncate font-medium">VelvetKit</span>
+        <span class="truncate text-xs text-muted-foreground">Workspace</span>
+      </div>
+      <%= render(UI::Icon.new(name: "chevrons-up-down", size: :sm, class: "ml-auto group-data-[collapsible=icon]:hidden")) %>
+    <% end %>
+    <% menu.with_content(side: :right, align: :start, class: "w-56") do |content| %>
+      <% content.with_label("Workspaces") %>
+      <% content.with_item("VelvetKit") %>
+      <% content.with_item("Marketing site") %>
+      <% content.with_item("Internal tools") %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% main = capture do %>
+  <p class="text-muted-foreground">Sidebar with a dropdown menu inside the header for context switching.</p>
+<% end %>
+
+<%= render "ui/sidebar_preview/shell",
+      sidebar_id: "preview-sidebar-dropdown",
+      brand: brand,
+      main: main,
+      groups: [
+        { label: "Applications", items: [
+          { icon: "layout-dashboard", text: "Dashboard", active: true, icon_class: "stroke-orange-500" },
+          { icon: "users",            text: "Team",                icon_class: "stroke-purple-500" }
+        ] }
+      ] %>

data/registry/test/components/previews/ui/sidebar_preview/with_groups.html.erb

@@ -0,0 +1,22 @@
+<% brand = render("ui/sidebar_preview/brand") %>
+
+<% main = capture do %>
+  <p class="text-muted-foreground">Two labelled groups sharing one sidebar.</p>
+<% end %>
+
+<%= render "ui/sidebar_preview/shell",
+      sidebar_id: "preview-sidebar-groups",
+      brand: brand,
+      main: main,
+      groups: [
+        { label: "Navigation", items: [
+          { icon: "home",             text: "Home", active: true },
+          { icon: "layout-dashboard", text: "Dashboard" },
+          { icon: "mail",             text: "Messages" }
+        ] },
+        { label: "Settings", items: [
+          { icon: "settings", text: "General" },
+          { icon: "shield",   text: "Security" },
+          { icon: "bell",     text: "Notifications" }
+        ] }
+      ] %>

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class UI::SidebarPreview < ViewComponent::Preview
+  # @label Default
+  def default; render_with_template; end
+
+  # @label With Groups
+  def with_groups; render_with_template; end
+
+  # @label With Dropdown Header
+  def with_dropdown_header; render_with_template; end
+
+  # @label Collapsible
+  def collapsible; render_with_template; end
+end

data/registry/test/components/previews/ui/spinner_preview/in_buttons.html.erb

@@ -0,0 +1,7 @@
+<div class="flex flex-wrap items-center gap-3">
+  <%= render(UI::Button.new(loading: true, size: :sm))      { "Saving" } %>
+  <%= render(UI::Button.new(loading: true))                 { "Saving" } %>
+  <%= render(UI::Button.new(loading: true, size: :lg))      { "Saving" } %>
+  <%= render(UI::Button.new(loading: true, variant: :destructive)) { "Deleting" } %>
+  <%= render(UI::Button.new(loading: true, variant: :outline))     { "Loading" } %>
+</div>

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

@@ -0,0 +1,7 @@
+<div class="flex items-end gap-4">
+  <%= render(UI::Spinner.new(size: :xs)) %>
+  <%= render(UI::Spinner.new(size: :sm)) %>
+  <%= render(UI::Spinner.new(size: :default)) %>
+  <%= render(UI::Spinner.new(size: :lg)) %>
+  <%= render(UI::Spinner.new(size: :xl)) %>
+</div>

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class UI::SpinnerPreview < ViewComponent::Preview
+  # @label Playground
+  # @param size select { choices: [xs, sm, default, lg, xl] }
+  def playground(size: :default)
+    render(UI::Spinner.new(size: size.to_sym))
+  end
+
+  # @label All Sizes
+  def sizes
+    render_with_template
+  end
+
+  # @label In Buttons
+  def in_buttons
+    render_with_template
+  end
+end

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

@@ -0,0 +1,4 @@
+<div class="flex flex-col gap-4">
+  <%= render(UI::Switch.new(name: "default_off", label: "Airplane mode")) %>
+  <%= render(UI::Switch.new(name: "default_on", checked: true, label: "Wi-Fi")) %>
+</div>

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

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

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

@@ -0,0 +1,7 @@
+<div class="flex flex-col gap-4">
+  <%= render(UI::Switch.new(name: "unchecked", label: "Off")) %>
+  <%= render(UI::Switch.new(name: "checked", checked: true, label: "On")) %>
+  <%= render(UI::Switch.new(name: "disabled_off", disabled: true, label: "Disabled off")) %>
+  <%= render(UI::Switch.new(name: "disabled_on", checked: true, disabled: true, label: "Disabled on")) %>
+  <%= render(UI::Switch.new(name: "no_label")) %>
+</div>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class UI::SwitchPreview < ViewComponent::Preview
+  # @label Playground
+  # @param label    text
+  # @param size     select { choices: [sm, default, lg] }
+  # @param checked  toggle
+  # @param required toggle
+  # @param disabled toggle
+  def playground(label: "Airplane mode", size: :default,
+                 checked: false, required: false, disabled: false)
+    render(UI::Switch.new(
+      name: "demo", label: label, size: size.to_sym,
+      checked: checked, required: required, disabled: disabled
+    ))
+  end
+
+  # @label Default
+  def default; render_with_template; end
+
+  # @label Sizes
+  def sizes; render_with_template; end
+
+  # @label States
+  def states; render_with_template; end
+end

data/registry/test/components/previews/ui/table_preview/customers.html.erb

@@ -0,0 +1,15 @@
+<%= render(UI::Table.new) do |table| %>
+  <% table.with_head do |head| %>
+    <% head.with_column { "Customer" } %>
+    <% head.with_column { "Plan" } %>
+    <% head.with_column(align: :end) { "Seats" } %>
+  <% end %>
+  <% [ [ "Aditi Rao", "Business", "24" ], [ "Arjun Nair", "Team", "8" ],
+       [ "Chitra Menon", "Free", "1" ] ].each do |name, plan, seats| %>
+    <% table.with_row do |row| %>
+      <% row.with_cell { name } %>
+      <% row.with_cell { plan } %>
+      <% row.with_cell(align: :end) { seats } %>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/table_preview/empty.html.erb

@@ -0,0 +1,8 @@
+<%# An empty table should say so rather than show a bare header. %>
+<%= render(UI::Table.new) do |table| %>
+  <% table.with_head do |head| %>
+    <% head.with_column { "Customer" } %>
+    <% head.with_column(align: :end) { "Amount" } %>
+  <% end %>
+  <% table.with_empty_state { "No invoices yet" } %>
+<% end %>

data/registry/test/components/previews/ui/table_preview/with_caption.html.erb

@@ -0,0 +1,14 @@
+<%= render(UI::Table.new(caption: "Invoices this month — 2 open")) do |table| %>
+  <% table.with_head do |head| %>
+    <% head.with_column { "Invoice" } %>
+    <% head.with_column(align: :end) { "Amount" } %>
+  <% end %>
+  <% table.with_row(selected: true) do |row| %>
+    <% row.with_cell { "INV-104" } %>
+    <% row.with_cell(align: :end) { "₹12,400" } %>
+  <% end %>
+  <% table.with_row do |row| %>
+    <% row.with_cell { "INV-105" } %>
+    <% row.with_cell(align: :end) { "₹8,250" } %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::TablePreview < ViewComponent::Preview
+  # @label Customers
+  def customers; render_with_template; end
+
+  # @label Empty
+  def empty; render_with_template; end
+
+  # @label With Caption And Selection
+  def with_caption; render_with_template; end
+end

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

@@ -0,0 +1,39 @@
+<div class="max-w-lg">
+  <%= render(UI::Tabs.new(default_value: "account")) do |tabs| %>
+    <% tabs.with_list do |list| %>
+      <% list.with_trigger(value: "account") { "Account" } %>
+      <% list.with_trigger(value: "password") { "Password" } %>
+      <% list.with_trigger(value: "team") { "Team" } %>
+      <% list.with_trigger(value: "billing", disabled: true) { "Billing" } %>
+    <% end %>
+    <% tabs.with_panel(value: "account") do %>
+      <div class="space-y-4">
+        <p class="text-sm text-muted-foreground">Manage your account settings and preferences.</p>
+        <div class="p-4 border rounded-md">
+          <p class="text-sm">Account content goes here.</p>
+        </div>
+      </div>
+    <% end %>
+    <% tabs.with_panel(value: "password") do %>
+      <div class="space-y-4">
+        <p class="text-sm text-muted-foreground">Update your password and security settings.</p>
+        <div class="p-4 border rounded-md">
+          <p class="text-sm">Password content goes here.</p>
+        </div>
+      </div>
+    <% end %>
+    <% tabs.with_panel(value: "team") do %>
+      <div class="space-y-4">
+        <p class="text-sm text-muted-foreground">Manage team members and permissions.</p>
+        <div class="p-4 border rounded-md">
+          <p class="text-sm">Team content goes here.</p>
+        </div>
+      </div>
+    <% end %>
+    <% tabs.with_panel(value: "billing") do %>
+      <div class="space-y-4">
+        <p class="text-sm text-muted-foreground">View and manage billing information.</p>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/tabs_preview/pill_variant.html.erb

@@ -0,0 +1,18 @@
+<div class="max-w-lg">
+  <%= render(UI::Tabs.new(variant: :pill, default_value: "general")) do |tabs| %>
+    <% tabs.with_list do |list| %>
+      <% list.with_trigger(value: "general") { "General" } %>
+      <% list.with_trigger(value: "security") { "Security" } %>
+      <% list.with_trigger(value: "notifications") { "Notifications" } %>
+    <% end %>
+    <% tabs.with_panel(value: "general") do %>
+      <p class="text-sm text-muted-foreground">General settings for your application.</p>
+    <% end %>
+    <% tabs.with_panel(value: "security") do %>
+      <p class="text-sm text-muted-foreground">Security and privacy settings.</p>
+    <% end %>
+    <% tabs.with_panel(value: "notifications") do %>
+      <p class="text-sm text-muted-foreground">Notification preferences.</p>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,42 @@
+<div class="max-w-lg border rounded-lg p-6">
+  <h2 class="text-lg font-semibold mb-4">Settings</h2>
+  <%= render(UI::Tabs.new(variant: :line, default_value: "account")) do |tabs| %>
+    <% tabs.with_list do |list| %>
+      <% list.with_trigger(value: "account") { "Account" } %>
+      <% list.with_trigger(value: "password") { "Password" } %>
+      <% list.with_trigger(value: "billing") { "Billing" } %>
+    <% end %>
+    <% tabs.with_panel(value: "account") do %>
+      <div class="space-y-4 mt-4">
+        <div>
+          <%= label_tag :name, "Name", class: "block text-sm font-medium mb-1" %>
+          <%= text_field_tag :name, "", class: "w-full px-3 py-2 border rounded-md text-sm" %>
+        </div>
+        <div>
+          <%= label_tag :email, "Email", class: "block text-sm font-medium mb-1" %>
+          <%= email_field_tag :email, "", class: "w-full px-3 py-2 border rounded-md text-sm" %>
+        </div>
+        <%= render(UI::Button.new) { "Save Changes" } %>
+      </div>
+    <% end %>
+    <% tabs.with_panel(value: "password") do %>
+      <div class="space-y-4 mt-4">
+        <div>
+          <%= label_tag :current, "Current Password", class: "block text-sm font-medium mb-1" %>
+          <%= password_field_tag :current, "", class: "w-full px-3 py-2 border rounded-md text-sm" %>
+        </div>
+        <div>
+          <%= label_tag :new, "New Password", class: "block text-sm font-medium mb-1" %>
+          <%= password_field_tag :new, "", class: "w-full px-3 py-2 border rounded-md text-sm" %>
+        </div>
+        <%= render(UI::Button.new) { "Update Password" } %>
+      </div>
+    <% end %>
+    <% tabs.with_panel(value: "billing") do %>
+      <div class="space-y-4 mt-4">
+        <p class="text-sm text-muted-foreground">Manage your billing information and subscription.</p>
+        <%= render(UI::Button.new(variant: :outline)) { "View Invoices" } %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/tabs_preview/with_icons.html.erb

@@ -0,0 +1,34 @@
+<div class="max-w-lg">
+  <%= render(UI::Tabs.new(default_value: "profile")) do |tabs| %>
+    <% tabs.with_list do |list| %>
+      <% list.with_trigger(value: "profile") do |trigger| %>
+        <% trigger.with_leading_icon(name: "user") %>
+        Profile
+      <% end %>
+      <% list.with_trigger(value: "security") do |trigger| %>
+        <% trigger.with_leading_icon(name: "lock") %>
+        Security
+      <% end %>
+      <% list.with_trigger(value: "settings") do |trigger| %>
+        <% trigger.with_leading_icon(name: "panel-left") %>
+        Settings
+      <% end %>
+      <% list.with_trigger(value: "verified", disabled: true) do |trigger| %>
+        <% trigger.with_leading_icon(name: "badge-check") %>
+        Verified
+      <% end %>
+    <% end %>
+    <% tabs.with_panel(value: "profile") do %>
+      <p class="text-sm text-muted-foreground">Your profile information.</p>
+    <% end %>
+    <% tabs.with_panel(value: "security") do %>
+      <p class="text-sm text-muted-foreground">Security settings.</p>
+    <% end %>
+    <% tabs.with_panel(value: "settings") do %>
+      <p class="text-sm text-muted-foreground">Application settings.</p>
+    <% end %>
+    <% tabs.with_panel(value: "verified") do %>
+      <p class="text-sm text-muted-foreground">Verification status.</p>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class UI::TabsPreview < ViewComponent::Preview
+  # @label Playground
+  # @param variant select { choices: [line, pill, solid] }
+  # @param size    select { choices: [sm, default, lg] }
+  def playground(variant: :line, size: :default)
+    render(UI::Tabs.new(variant: variant.to_sym, size: size.to_sym, default_value: "account")) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "account")  { "Account" }
+        list.with_trigger(value: "password") { "Password" }
+        list.with_trigger(value: "team")     { "Team" }
+        list.with_trigger(value: "billing", disabled: true) { "Billing" }
+      end
+      tabs.with_panel(value: "account")  { "Account settings live here." }
+      tabs.with_panel(value: "password") { "Password rotation lives here." }
+      tabs.with_panel(value: "team")     { "Team membership lives here." }
+      tabs.with_panel(value: "billing")  { "Billing details live here." }
+    end
+  end
+
+  # @label Default (Line)
+  def default; render_with_template; end
+
+  # @label Pill Variant
+  def pill_variant; render_with_template; end
+
+  # @label With Icons
+  def with_icons; render_with_template; end
+
+  # @label Settings Form
+  def settings_form; render_with_template; end
+end

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

@@ -0,0 +1,10 @@
+<div class="space-y-4">
+  <%= render(UI::Text.new(size: :xs)) { "Extra Small (xs) — The quick brown fox" } %>
+  <%= render(UI::Text.new(size: :sm)) { "Small (sm) — The quick brown fox" } %>
+  <%= render(UI::Text.new(size: :base)) { "Base — The quick brown fox" } %>
+  <%= render(UI::Text.new(size: :lg)) { "Large (lg) — The quick brown fox" } %>
+  <%= render(UI::Text.new(size: :xl)) { "Extra Large (xl) — The quick brown fox" } %>
+  <%= render(UI::Text.new(size: :"2xl")) { "2XL — The quick brown fox" } %>
+  <%= render(UI::Text.new(size: :"3xl")) { "3XL — The quick brown fox" } %>
+  <%= render(UI::Text.new(size: :"4xl")) { "4XL — The quick brown fox" } %>
+</div>

data/registry/test/components/previews/ui/text_preview/tones.html.erb

@@ -0,0 +1,5 @@
+<div class="space-y-4">
+  <%= render(UI::Text.new(tone: :default)) { "Default tone — The quick brown fox" } %>
+  <%= render(UI::Text.new(tone: :muted)) { "Muted tone — The quick brown fox" } %>
+  <%= render(UI::Text.new(tone: :destructive)) { "Destructive tone — The quick brown fox" } %>
+</div>

data/registry/test/components/previews/ui/text_preview/weights.html.erb

@@ -0,0 +1,6 @@
+<div class="space-y-4">
+  <%= render(UI::Text.new(weight: :normal)) { "Normal weight — The quick brown fox" } %>
+  <%= render(UI::Text.new(weight: :medium)) { "Medium weight — The quick brown fox" } %>
+  <%= render(UI::Text.new(weight: :semibold)) { "Semibold weight — The quick brown fox" } %>
+  <%= render(UI::Text.new(weight: :bold)) { "Bold weight — The quick brown fox" } %>
+</div>