velvetkit 0.1.0.beta

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

@@ -0,0 +1,218 @@
+<div class="flex flex-wrap gap-8 p-8">
+  <div>
+    <h3 class="text-sm font-medium mb-3">Default trigger</h3>
+    <%= render(UI::Menu.new) do |menu| %>
+      <% menu.with_trigger { "Open Menu" } %>
+      <% menu.with_content do |content| %>
+        <% content.with_item("Profile") %>
+        <% content.with_item("Settings") %>
+      <% end %>
+    <% end %>
+  </div>
+  <div>
+    <h3 class="text-sm font-medium mb-3">Icon trigger</h3>
+    <%= render(UI::Menu.new) do |menu| %>
+      <% menu.with_trigger(variant: :outline, size: :icon) do %>
+        <%= render(UI::Icon.new(name: "ellipsis-vertical", size: :sm)) %>
+      <% end %>
+      <% menu.with_content do |content| %>
+        <% content.with_item("Edit") %>
+        <% content.with_item("Delete", variant: :destructive) %>
+      <% end %>
+    <% end %>
+  </div>
+  <div>
+    <h3 class="text-sm font-medium mb-3">Items with icons</h3>
+    <%= render(UI::Menu.new) do |menu| %>
+      <% menu.with_trigger { "Actions" } %>
+      <% menu.with_content do |content| %>
+        <% content.with_label("Account") %>
+        <% content.with_item do %>
+          <%= render(UI::Icon.new(name: "user", size: :sm)) %>
+          Profile
+        <% end %>
+        <% content.with_item do %>
+          <%= render(UI::Icon.new(name: "credit-card", size: :sm)) %>
+          Billing
+        <% end %>
+        <% content.with_item do %>
+          <%= render(UI::Icon.new(name: "settings", size: :sm)) %>
+          Settings
+        <% end %>
+        <% content.with_divider %>
+        <% content.with_label("Team") %>
+        <% content.with_item do %>
+          <%= render(UI::Icon.new(name: "users", size: :sm)) %>
+          Invite users
+        <% end %>
+        <% content.with_item do %>
+          <%= render(UI::Icon.new(name: "plus", size: :sm)) %>
+          New team
+        <% end %>
+        <% content.with_divider %>
+        <% content.with_item do %>
+          <%= render(UI::Icon.new(name: "git-branch", size: :sm)) %>
+          Repository
+        <% end %>
+        <% content.with_item do %>
+          <%= render(UI::Icon.new(name: "life-buoy", size: :sm)) %>
+          Support
+        <% end %>
+        <% content.with_item(disabled: true) do %>
+          <%= render(UI::Icon.new(name: "cloud", size: :sm)) %>
+          API
+        <% end %>
+        <% content.with_divider %>
+        <% content.with_item(variant: :destructive) do %>
+          <%= render(UI::Icon.new(name: "log-out", size: :sm)) %>
+          Log out
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+  <div>
+    <h3 class="text-sm font-medium mb-3">With links</h3>
+    <%= render(UI::Menu.new) do |menu| %>
+      <% menu.with_trigger { "Navigation" } %>
+      <% menu.with_content do |content| %>
+        <% content.with_item("Dashboard", href: "/dashboard") %>
+        <% content.with_item("Profile", href: "/profile") %>
+      <% end %>
+    <% end %>
+  </div>
+  <div>
+    <h3 class="text-sm font-medium mb-3">Disabled item</h3>
+    <%= render(UI::Menu.new) do |menu| %>
+      <% menu.with_trigger { "Options" } %>
+      <% menu.with_content do |content| %>
+        <% content.with_item("Enabled") %>
+        <% content.with_item("Disabled", disabled: true) %>
+      <% end %>
+    <% end %>
+  </div>
+</div>
+<div class="w-full">
+  <h3 class="text-sm font-medium mb-6">Positions</h3>
+  <div class="flex flex-wrap gap-12 p-8 border rounded-lg bg-muted/30 items-center justify-center">
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">bottom-start</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :bottom, align: :start) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">bottom-center</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :bottom, align: :center) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">bottom-end</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :bottom, align: :end) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">top-start</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :top, align: :start) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">top-center</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :top, align: :center) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">top-end</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :top, align: :end) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">left-start</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :left, align: :start) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">left-center</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :left, align: :center) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">left-end</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :left, align: :end) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">right-start</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :right, align: :start) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">right-center</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :right, align: :center) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="text-center">
+      <p class="text-xs text-muted-foreground mb-2">right-end</p>
+      <%= render(UI::Menu.new) do |menu| %>
+        <% menu.with_trigger { "Open" } %>
+        <% menu.with_content(side: :right, align: :end) do |content| %>
+          <% content.with_item("Item 1") %>
+          <% content.with_item("Item 2") %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class UI::MenuPreview < ViewComponent::Preview
+  # @label Playground
+  # @param side select { choices: [top, right, bottom, left] }
+  # @param align select { choices: [start, center, end] }
+  def playground(side: :bottom, align: :start)
+    render(UI::Menu.new) do |menu|
+      menu.with_trigger(variant: :outline) { "Open Menu" }
+      menu.with_content(side: side.to_sym, align: align.to_sym) do |content|
+        content.with_label("My Account")
+        content.with_item("Profile")
+        content.with_item("Billing")
+        content.with_item("Settings")
+        content.with_divider
+        content.with_item("Log out", variant: :destructive)
+      end
+    end
+  end
+
+  # @label Variants
+  def variants; render_with_template; end
+
+  # @label Positions
+  def positions; render_with_template; end
+end

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

@@ -0,0 +1,6 @@
+<div class="flex max-w-sm flex-col gap-4">
+  <% %i[sm default lg].each do |size| %>
+    <%= render(UI::NativeSelect.new(name: "s_#{size}", options: UI::NativeSelectPreview::SECTIONS,
+                              prompt: "Choose a section", size: size, label: size.to_s)) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,6 @@
+<div class="flex max-w-sm flex-col gap-4">
+  <%= render(UI::NativeSelect.new(name: "a", options: UI::NativeSelectPreview::SECTIONS, label: "Default")) %>
+  <%= render(UI::NativeSelect.new(name: "b", options: UI::NativeSelectPreview::SECTIONS, label: "Required", required: true)) %>
+  <%= render(UI::NativeSelect.new(name: "c", options: UI::NativeSelectPreview::SECTIONS, label: "Error", error: true)) %>
+  <%= render(UI::NativeSelect.new(name: "d", options: UI::NativeSelectPreview::SECTIONS, label: "Disabled", disabled: true)) %>
+</div>

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class UI::NativeSelectPreview < ViewComponent::Preview
+  SECTIONS = [ [ "Design", 1 ], [ "Engineering", 2 ], [ "Marketing", 3 ] ].freeze
+
+  # @label Playground
+  # @param size select { choices: [sm, default, lg] }
+  # @param label text
+  # @param required toggle
+  # @param disabled toggle
+  # @param error toggle
+  def playground(size: :default, label: "Team", required: false, disabled: false, error: false)
+    render(UI::NativeSelect.new(name: "team_id", options: SECTIONS, prompt: "Choose a team",
+                          size: size.to_sym, label: label, required: required,
+                          disabled: disabled, error: error))
+  end
+
+  # @label Sizes
+  def sizes; render_with_template; end
+
+  # @label States
+  def states; render_with_template; end
+end

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

@@ -0,0 +1,15 @@
+<% examples = {
+     "First page" => [240, 1],
+     "Middle" => [240, 5],
+     "Last page" => [240, 10],
+     "Long range, collapsed" => [2500, 50],
+     "Single page (renders nothing)" => [10, 1]
+   } %>
+<div class="flex flex-col gap-8">
+  <% examples.each do |label, (count, page)| %>
+    <div class="flex flex-col gap-2">
+      <span class="text-xs text-muted-foreground"><%= label %></span>
+      <%= render(UI::Pagination.new(pagy: Pagy::Offset.new(count: count, page: page, limit: 25))) %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class UI::PaginationPreview < ViewComponent::Preview
+  # @label Playground
+  # @param count number
+  # @param page number
+  # @param limit number
+  def playground(count: 240, page: 1, limit: 25)
+    render(UI::Pagination.new(pagy: Pagy::Offset.new(count: count.to_i, page: page.to_i,
+                                                     limit: limit.to_i)))
+  end
+
+  # @label States
+  def states; render_with_template; end
+end

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

@@ -0,0 +1,19 @@
+<%# Click the eye to toggle masking — driven by the ui--password-visibility controller. %>
+<div class="flex max-w-sm flex-col gap-6">
+  <div class="flex flex-col gap-2">
+    <span class="text-xs text-muted-foreground">Default</span>
+    <%= render(UI::PasswordInput.new(name: "password_default", placeholder: "Enter your password")) %>
+  </div>
+  <div class="flex flex-col gap-2">
+    <span class="text-xs text-muted-foreground">Required</span>
+    <%= render(UI::PasswordInput.new(name: "password_required", required: true)) %>
+  </div>
+  <div class="flex flex-col gap-2">
+    <span class="text-xs text-muted-foreground">Error</span>
+    <%= render(UI::PasswordInput.new(name: "password_error", error: true)) %>
+  </div>
+  <div class="flex flex-col gap-2">
+    <span class="text-xs text-muted-foreground">Disabled</span>
+    <%= render(UI::PasswordInput.new(name: "password_disabled", disabled: true)) %>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class UI::PasswordInputPreview < ViewComponent::Preview
+  # @label Playground
+  # @param placeholder text
+  # @param required toggle
+  # @param disabled toggle
+  # @param error toggle
+  def playground(placeholder: "Enter your password", required: false, disabled: false, error: false)
+    render(UI::PasswordInput.new(
+      name: "user[password]",
+      placeholder: placeholder,
+      required: required,
+      disabled: disabled,
+      error: error
+    ))
+  end
+
+  # @label States
+  def states; render_with_template; end
+end

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

@@ -0,0 +1,7 @@
+<%= render(UI::Popover.new) do |popover| %>
+  <% popover.with_trigger(variant: :default) { "Open Popover" } %>
+  <% popover.with_content do |content| %>
+    <% content.with_title { "Popover Title" } %>
+    <p>This is a simple popover with a title and some content.</p>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/popover_preview/positions.html.erb

@@ -0,0 +1,30 @@
+<div class="flex flex-wrap gap-8 p-8 items-center justify-center">
+  <%= render(UI::Popover.new) do |popover| %>
+    <% popover.with_trigger { "Top" } %>
+    <% popover.with_content(side: :top) do |content| %>
+      <% content.with_title { "Top Position" } %>
+      This popover appears above the trigger.
+    <% end %>
+  <% end %>
+  <%= render(UI::Popover.new) do |popover| %>
+    <% popover.with_trigger { "Right" } %>
+    <% popover.with_content(side: :right) do |content| %>
+      <% content.with_title { "Right Position" } %>
+      This popover appears to the right.
+    <% end %>
+  <% end %>
+  <%= render(UI::Popover.new) do |popover| %>
+    <% popover.with_trigger { "Bottom" } %>
+    <% popover.with_content(side: :bottom) do |content| %>
+      <% content.with_title { "Bottom Position" } %>
+      This popover appears below the trigger.
+    <% end %>
+  <% end %>
+  <%= render(UI::Popover.new) do |popover| %>
+    <% popover.with_trigger { "Left" } %>
+    <% popover.with_content(side: :left) do |content| %>
+      <% content.with_title { "Left Position" } %>
+      This popover appears to the left.
+    <% end %>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/popover_preview/with_close_button.html.erb

@@ -0,0 +1,8 @@
+<%= render(UI::Popover.new) do |popover| %>
+  <% popover.with_trigger { "Open Popover" } %>
+  <% popover.with_content(show_close: true) do |content| %>
+    <% content.with_title { "With Close Button" } %>
+    <p>This popover has a close button in the top-right corner.</p>
+    <p>You can also close it by clicking outside, pressing Escape, or tabbing away.</p>
+  <% end %>
+<% end %>

data/registry/test/components/previews/ui/popover_preview/with_rich_content.html.erb

@@ -0,0 +1,17 @@
+<%= render(UI::Popover.new) do |popover| %>
+  <% popover.with_trigger { "Open Rich Popover" } %>
+  <% popover.with_content(show_close: true) do |content| %>
+    <% content.with_title { "User Profile" } %>
+    <div class="flex items-center gap-3 mb-3">
+      <%= render(UI::Avatar.new(src: nil, fallback: "JD")) %>
+      <div>
+        <p class="font-medium">John Doe</p>
+        <p class="text-sm text-muted-foreground">john@example.com</p>
+      </div>
+    </div>
+    <div class="flex gap-2">
+      <%= render(UI::Button.new(size: :sm)) { "View Profile" } %>
+      <%= render(UI::Button.new(variant: :outline, size: :sm)) { "Settings" } %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,9 @@
+<%= render(UI::Popover.new) do |popover| %>
+  <% popover.with_trigger { "Open Popover" } %>
+  <% popover.with_content do %>
+    <p>This popover has no title, just content. Perfect for simple messages or actions.</p>
+    <div class="mt-2">
+      <%= render(UI::Button.new(size: :sm)) { "Take Action" } %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class UI::PopoverPreview < ViewComponent::Preview
+  # @label Playground
+  # @param side select { choices: [top, right, bottom, left] }
+  # @param align select { choices: [start, center, end] }
+  # @param show_close toggle
+  def playground(side: :top, align: :center, show_close: false)
+    render(UI::Popover.new) do |popover|
+      popover.with_trigger { "Open Popover" }
+      popover.with_content(side: side.to_sym, align: align.to_sym, show_close: show_close) do |content|
+        content.with_title { "Popover Title" }
+        "This is the popover content with rich text support."
+      end
+    end
+  end
+
+  # @label Default
+  def default; render_with_template; end
+
+  # @label Positions
+  def positions; render_with_template; end
+
+  # @label With Close Button
+  def with_close_button; render_with_template; end
+
+  # @label With Rich Content
+  def with_rich_content; render_with_template; end
+
+  # @label Without Title
+  def without_title; render_with_template; end
+end

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

@@ -0,0 +1,10 @@
+<div class="space-y-6">
+  <div>
+    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Default</h3>
+    <%= render(UI::RadioGroup.new(name: "default_plan", value: "free")) do |rg| %>
+      <% rg.with_item(value: "free", label: "Free plan") %>
+      <% rg.with_item(value: "pro", label: "Pro plan — $9/mo") %>
+      <% rg.with_item(value: "enterprise", label: "Enterprise — Contact us") %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+<div class="space-y-6">
+  <div>
+    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Disabled</h3>
+    <%= render(UI::RadioGroup.new(name: "disabled_plan", disabled: true)) do |rg| %>
+      <% rg.with_item(value: "free", label: "Free plan") %>
+      <% rg.with_item(value: "pro", label: "Pro plan (selected)", checked: true) %>
+    <% end %>
+  </div>
+  <div>
+    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Individual item disabled</h3>
+    <%= render(UI::RadioGroup.new(name: "partial_disabled", value: "free")) do |rg| %>
+      <% rg.with_item(value: "free", label: "Free plan") %>
+      <% rg.with_item(value: "pro", label: "Pro plan (unavailable)", disabled: true) %>
+      <% rg.with_item(value: "enterprise", label: "Enterprise") %>
+    <% end %>
+  </div>
+</div>

data/registry/test/components/previews/ui/radio_group_preview/with_required.html.erb

@@ -0,0 +1,10 @@
+<div class="space-y-6">
+  <div>
+    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Required</h3>
+    <%= render(UI::RadioGroup.new(name: "required_plan", value: "pro", required: true)) do |rg| %>
+      <% rg.with_item(value: "free", label: "Free plan") %>
+      <% rg.with_item(value: "pro", label: "Pro plan — $9/mo") %>
+      <% rg.with_item(value: "enterprise", label: "Enterprise — Contact us") %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class UI::RadioGroupPreview < ViewComponent::Preview
+  # @label Playground
+  # @param name    text
+  # @param value   select { choices: ["", free, pro, enterprise] }
+  # @param required toggle
+  # @param disabled toggle
+  def playground(name: "plan", value: "free", required: false, disabled: false)
+    render(UI::RadioGroup.new(name: name, value: value.presence, required: required, disabled: disabled)) do |rg|
+      rg.with_item(value: "free", label: "Free plan")
+      rg.with_item(value: "pro", label: "Pro plan — $9/mo")
+      rg.with_item(value: "enterprise", label: "Enterprise — Contact us")
+    end
+  end
+
+  # @label Default
+  def default; render_with_template; end
+
+  # @label With Required
+  def with_required; render_with_template; end
+
+  # @label Disabled
+  def disabled; render_with_template; end
+end

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

@@ -0,0 +1,4 @@
+<div class="max-w-xs">
+  <%= render(UI::Select.new(name: "plan", label: "Plan", prompt: "Choose a plan",
+                            options: [ [ "Free", "free" ], [ "Team", "team" ], [ "Business", "business" ] ])) %>
+</div>

data/registry/test/components/previews/ui/select_preview/long_list.html.erb

@@ -0,0 +1,5 @@
+<%# Searchable: open it and type to filter. Arrow keys and Enter work from the search box. %>
+<div class="max-w-xs">
+  <%= render(UI::Select.new(name: "time_zone", label: "Time zone", prompt: "Choose a time zone", searchable: true,
+                            options: %w[Auckland Bangkok Berlin Cairo Chicago Dubai Honolulu Istanbul Jakarta Kolkata Lagos Lima London Madrid Mexico\ City Moscow Nairobi New\ York Paris Santiago Seoul Singapore Sydney Tokyo Toronto])) %>
+</div>

data/registry/test/components/previews/ui/select_preview/multiple.html.erb

@@ -0,0 +1,6 @@
+<%# Stays open while you tick; past two choices the trigger counts them. %>
+<div class="max-w-xs">
+  <%= render(UI::Select.new(name: "reviewers", label: "Reviewers", prompt: "Add reviewers", multiple: true, searchable: true,
+                            options: [ [ "Asha Kulkarni", 1 ], [ "Ravi Menon", 2 ], [ "Sara Joseph", 3 ], [ "Tomás Ortega", 4 ], [ "Mei Lin", 5 ] ],
+                            selected: [ 1, 2 ])) %>
+</div>

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

@@ -0,0 +1,5 @@
+<div class="flex max-w-xs flex-col gap-5">
+  <% %i[sm default lg].each do |size| %>
+    <%= render(UI::Select.new(name: "size_#{size}", label: size.to_s, size: size, options: %w[Daily Weekly Monthly], selected: "Weekly")) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,6 @@
+<div class="flex max-w-xs flex-col gap-5">
+  <%= render(UI::Select.new(name: "a", label: "Selected", options: %w[Viewer Editor Admin], selected: "Editor")) %>
+  <%= render(UI::Select.new(name: "b", label: "Required", options: %w[Viewer Editor Admin], prompt: "Choose a role", required: true)) %>
+  <%= render(UI::Select.new(name: "c", label: "With an error", options: %w[Viewer Editor Admin], prompt: "Choose a role", error: true)) %>
+  <%= render(UI::Select.new(name: "d", label: "Disabled", options: %w[Viewer Editor Admin], selected: "Viewer", disabled: true)) %>
+</div>

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+class UI::SelectPreview < ViewComponent::Preview
+  PLANS = [ [ "Free", "free" ], [ "Team", "team" ], [ "Business", "business" ], [ "Enterprise", "enterprise" ] ].freeze
+
+  # @label Playground
+  # @param size select { choices: [sm, default, lg] }
+  # @param prompt text
+  # @param required toggle
+  # @param error toggle
+  # @param disabled toggle
+  # @param searchable toggle
+  # @param multiple toggle
+  def playground(size: :default, prompt: "Choose a plan", required: false, error: false, disabled: false,
+                 searchable: false, multiple: false)
+    render(UI::Select.new(name: "plan", label: "Plan", options: PLANS, prompt: prompt.presence,
+                          size: size.to_sym, required: required, error: error, disabled: disabled,
+                          searchable: searchable, multiple: multiple))
+  end
+
+  # @label Default
+  def default
+    render_with_template
+  end
+
+  # @label States
+  def states
+    render_with_template
+  end
+
+  # @label Sizes
+  def sizes
+    render_with_template
+  end
+
+  # @label Searchable
+  def long_list
+    render_with_template
+  end
+
+  # @label Multiple
+  def multiple
+    render_with_template
+  end
+end

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

@@ -0,0 +1,12 @@
+<%= render(UI::Sheet.new) do |sheet| %>
+  <% sheet.with_trigger(variant: :secondary) { "Open bottom sheet" } %>
+  <% sheet.with_content(side: :bottom) do |content| %>
+    <% content.with_title { "Mobile actions" } %>
+    <% content.with_description { "Bottom sheets are suited to mobile-friendly action lists." } %>
+    <% content.with_footer do %>
+      <%= render(UI::Sheet::Close.new(variant: :outline)) { "Dismiss" } %>
+      <%= render(UI::Button.new) { "Continue" } %>
+    <% end %>
+    <p class="text-sm text-muted-foreground">This panel anchors to the bottom edge with a capped height.</p>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,10 @@
+<%= render(UI::Sheet.new) do |sheet| %>
+  <% sheet.with_trigger(variant: :secondary) { "Open left sheet" } %>
+  <% sheet.with_content(side: :left) do |content| %>
+    <% content.with_title { "Project filters" } %>
+    <% content.with_description { "Filter and refine your current project list." } %>
+    <div class="space-y-3 text-sm text-muted-foreground">
+      <p>Left sheets are useful for navigation and faceted filtering.</p>
+    </div>
+  <% end %>
+<% end %>