velvetkit 0.1.0.beta

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

@@ -0,0 +1,9 @@
+<div class="flex gap-4 h-32">
+  <div class="flex-1 bg-muted/50 rounded p-4">
+    <p class="text-sm">Left content</p>
+  </div>
+  <%= render(UI::Divider.new(orientation: :vertical)) %>
+  <div class="flex-1 bg-muted/50 rounded p-4">
+    <p class="text-sm">Right content</p>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+<div class="space-y-4">
+  <%= render(UI::Divider.new(label: "OR")) %>
+  <%= render(UI::Divider.new(label: "Section Divider")) %>
+  <%= render(UI::Divider.new(label: "Continue")) %>
+</div>

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class UI::DividerPreview < ViewComponent::Preview
+  # @label Playground
+  # @param orientation select { choices: [horizontal, vertical] }
+  # @param label text
+  def playground(orientation: :horizontal, label: nil)
+    render(UI::Divider.new(orientation: orientation.to_sym, label: label.presence))
+  end
+
+  # @label Horizontal
+  def horizontal; render_with_template; end
+
+  # @label Vertical
+  def vertical; render_with_template; end
+
+  # @label With Label
+  def with_label; render_with_template; end
+end

data/registry/test/components/previews/ui/icon_preview/common.html.erb

@@ -0,0 +1,8 @@
+<div class="grid grid-cols-6 gap-4">
+  <% %w[menu arrow-right globe badge-check circle-alert x circle-check eye eye-off lock chevrons-up-down layout-dashboard panel-left user loader].each do |name| %>
+    <div class="flex flex-col items-center gap-1 p-2 border rounded-md">
+      <%= render(UI::Icon.new(name: name)) %>
+      <span class="text-xs text-muted-foreground"><%= name %></span>
+    </div>
+  <% end %>
+</div>

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

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

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class UI::IconPreview < ViewComponent::Preview
+  # @label Playground
+  # @param name text "Lucide icon name (must be registered in app/javascript/lucide-icon.ts)"
+  # @param size select { choices: [xs, sm, default, lg, xl] }
+  def playground(name: "menu", size: :default)
+    render(UI::Icon.new(name: name, size: size.to_sym))
+  end
+
+  # @label All Sizes
+  def sizes
+    render_with_template
+  end
+
+  # @label Common Icons
+  def common
+    render_with_template
+  end
+end

data/registry/test/components/previews/ui/image_preview/radii.html.erb

@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-end gap-6">
+  <% %i[none sm md lg xl full].each do |r| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render(UI::Image.new(src: "/icon.png", rounded: r, width: "48px", height: "48px")) %>
+      <span class="text-xs text-muted-foreground"><%= r %></span>
+    </div>
+  <% end %>
+</div>

data/registry/test/components/previews/ui/image_preview/sizing.html.erb

@@ -0,0 +1,9 @@
+<%# Dimensions land on the <img> itself, not on a wrapper. %>
+<div class="flex flex-wrap items-end gap-6">
+  <% ["48px", "96px", "160px"].each do |w| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render(UI::Image.new(src: "/icon.png", rounded: :md, width: w)) %>
+      <span class="text-xs text-muted-foreground">width: <%= w %></span>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class UI::ImagePreview < ViewComponent::Preview
+  # @label Playground
+  # @param rounded select { choices: [none, xs, sm, md, lg, xl, full] }
+  # @param width text
+  def playground(rounded: :sm, width: "160px")
+    render(UI::Image.new(src: "/icon.png", rounded: rounded.to_sym, width: width))
+  end
+
+  # @label Radii
+  def radii; render_with_template; end
+
+  # @label Sizing
+  def sizing; render_with_template; end
+end

data/registry/test/components/previews/ui/input_group_preview/addons.html.erb

@@ -0,0 +1,29 @@
+<%# Gallery of all addon configurations %>
+<div class="flex flex-col gap-4 max-w-sm">
+  <%# Icon prefix %>
+  <%= render(UI::InputGroup.new) do |g| %>
+    <%= g.with_addon(align: "inline-start") { |a| a.with_icon(name: "mail") } %>
+    <%= g.with_field(type: :email, placeholder: "Email") %>
+  <% end %>
+  <%# Text prefix %>
+  <%= render(UI::InputGroup.new) do |g| %>
+    <%= g.with_addon(align: "inline-start") { "https://" } %>
+    <%= g.with_field(placeholder: "yoursite.com") %>
+  <% end %>
+  <%# Icon suffix %>
+  <%= render(UI::InputGroup.new) do |g| %>
+    <%= g.with_field(placeholder: "Search…") %>
+    <%= g.with_addon(align: "inline-end") { |a| a.with_icon(name: "search") } %>
+  <% end %>
+  <%# Both sides %>
+  <%= render(UI::InputGroup.new) do |g| %>
+    <%= g.with_addon(align: "inline-start") { "$" } %>
+    <%= g.with_field(type: :number, placeholder: "0.00") %>
+    <%= g.with_addon(align: "inline-end") { "USD" } %>
+  <% end %>
+  <%# Error state %>
+  <%= render(UI::InputGroup.new) do |g| %>
+    <%= g.with_addon(align: "inline-start") { |a| a.with_icon(name: "mail") } %>
+    <%= g.with_field(type: :email, placeholder: "Invalid email", error: true) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,12 @@
+<%# Playground template for UI::InputGroupPreview %>
+<div class="max-w-sm">
+  <%= render(UI::InputGroup.new) do |g| %>
+    <% if left_icon %>
+      <%= g.with_addon(align: "inline-start") { render(UI::Icon.new(name: icon_name)) } %>
+    <% end %>
+    <%= g.with_field(type: :email, placeholder: "you@example.com", error: error, disabled: disabled) %>
+    <% if right_icon %>
+      <%= g.with_addon(align: "inline-end") { render(UI::Icon.new(name: icon_name)) } %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class UI::InputGroupPreview < ViewComponent::Preview
+  # @label Playground
+  # @param left_icon toggle
+  # @param right_icon toggle
+  # @param icon_name text
+  # @param align select { choices: [inline-start, inline-end] }
+  # @param error toggle
+  # @param disabled toggle
+  def playground(left_icon: true, right_icon: false, icon_name: "mail", align: "inline-start", error: false, disabled: false)
+    render_with_template(locals: { left_icon: left_icon, right_icon: right_icon, icon_name: icon_name, align: align, error: error, disabled: disabled })
+  end
+
+  # @label All Addons
+  def addons; render_with_template; end
+end

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

@@ -0,0 +1,5 @@
+<div class="flex flex-col gap-3 max-w-sm">
+  <%= render(UI::Input.new(size: :sm, placeholder: "Small (sm)")) %>
+  <%= render(UI::Input.new(size: :default, placeholder: "Default")) %>
+  <%= render(UI::Input.new(size: :lg, placeholder: "Large (lg)")) %>
+</div>

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

@@ -0,0 +1,7 @@
+<div class="flex flex-col gap-3 max-w-sm">
+  <%= render(UI::Input.new(placeholder: "Default")) %>
+  <%= render(UI::Input.new(placeholder: "With value", value: "hello@example.com")) %>
+  <%= render(UI::Input.new(placeholder: "Error state", variant: :error, error: true)) %>
+  <%= render(UI::Input.new(placeholder: "Disabled", disabled: true)) %>
+  <%= render(UI::Input.new(type: :password, placeholder: "Password")) %>
+</div>

data/registry/test/components/previews/ui/input_preview/with_labels.html.erb

@@ -0,0 +1,10 @@
+<div class="flex flex-col gap-4 max-w-sm">
+  <%= render(UI::Input.new(label: "Email", placeholder: "you@example.com")) %>
+  <%= render(UI::Input.new(label: "Password", type: :password, placeholder: "Enter password")) %>
+  <%= render(UI::Input.new(label: "Required field", required: true, placeholder: "Cannot be blank")) %>
+  <%= render(UI::Input.new(label: "Required + error", required: true, error: true, variant: :error, placeholder: "Invalid value")) %>
+  <%= render(UI::Input.new(label: "Disabled", disabled: true, placeholder: "Locked")) %>
+  <%= render(UI::Input.new(label: "Small label", label_size: :sm, placeholder: "Small")) %>
+  <%= render(UI::Input.new(label: "Large label", label_size: :lg, placeholder: "Large")) %>
+  <%= render(UI::Input.new(label: "Semibold label", label_weight: :semibold, placeholder: "Bolder label")) %>
+</div>

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class UI::InputPreview < ViewComponent::Preview
+  # @label Playground
+  # @param type    select { choices: [text, email, password, number, search] }
+  # @param size    select { choices: [sm, default, lg] }
+  # @param variant select { choices: [default, error, with_label] }
+  # @param label text
+  # @param label_size select { choices: [xs, sm, default, lg] }
+  # @param label_weight select { choices: [normal, medium, semibold] }
+  # @param required toggle
+  # @param error   toggle
+  # @param disabled toggle
+  # @param placeholder text
+  def playground(type: :text, size: :default, variant: :default,
+                 label: nil, label_size: :default, label_weight: :medium,
+                 required: false, error: false, disabled: false,
+                 placeholder: "Enter value…")
+    render(UI::Input.new(type: type.to_sym, size: size.to_sym, variant: variant.to_sym,
+                         label: label, label_size: label_size.to_sym, label_weight: label_weight.to_sym,
+                         required: required, error: error, disabled: disabled,
+                         placeholder: placeholder))
+  end
+
+  # @label All Sizes
+  def sizes; render_with_template; end
+
+  # @label States
+  def states; render_with_template; end
+
+  # @label With Labels
+  def with_labels; render_with_template; end
+end

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

@@ -0,0 +1,6 @@
+<div class="flex flex-col gap-3">
+  <%= render(UI::Label.new(size: :xs)) { "Extra Small (xs)" } %>
+  <%= render(UI::Label.new(size: :sm)) { "Small (sm)" } %>
+  <%= render(UI::Label.new(size: :default)) { "Default (sm)" } %>
+  <%= render(UI::Label.new(size: :lg)) { "Large (base)" } %>
+</div>

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

@@ -0,0 +1,6 @@
+<div class="flex flex-col gap-3">
+  <%= render(UI::Label.new) { "Default" } %>
+  <%= render(UI::Label.new(required: true)) { "Required field" } %>
+  <%= render(UI::Label.new(disabled: true)) { "Disabled" } %>
+  <%= render(UI::Label.new(for: "email")) { "With for attribute" } %>
+</div>

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

@@ -0,0 +1,5 @@
+<div class="flex flex-col gap-3">
+  <%= render(UI::Label.new(weight: :normal)) { "Normal weight" } %>
+  <%= render(UI::Label.new(weight: :medium)) { "Medium weight (default)" } %>
+  <%= render(UI::Label.new(weight: :semibold)) { "Semibold weight" } %>
+</div>

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class UI::LabelPreview < ViewComponent::Preview
+  # @label Playground
+  # @param size    select { choices: [xs, sm, default, lg] }
+  # @param weight  select { choices: [normal, medium, semibold] }
+  # @param required toggle
+  # @param disabled toggle
+  def playground(size: :default, weight: :medium, required: false, disabled: false)
+    render(UI::Label.new(size: size.to_sym, weight: weight.to_sym,
+                         required: required, disabled: disabled)) { "Email address" }
+  end
+
+  # @label All Sizes
+  def sizes; render_with_template; end
+
+  # @label All Weights
+  def weights; render_with_template; end
+
+  # @label States
+  def states; render_with_template; end
+end

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

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

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

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

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

@@ -0,0 +1,11 @@
+<div class="flex flex-wrap items-center gap-4">
+  <%= render(UI::Link.new(href: "#", variant: :link)) do |link| %>
+    <% link.with_leading_icon(name: :info) %>
+    Learn more
+  <% end %>
+
+  <%= render(UI::Link.new(href: "#", variant: :default)) do |link| %>
+    <% link.with_trailing_icon(name: "arrow-right") %>
+    Continue
+  <% end %>
+</div>

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class UI::LinkPreview < ViewComponent::Preview
+  # @label Playground
+  # @param variant select { choices: [link, default, destructive, outline, secondary, ghost] }
+  # @param size select { choices: [sm, default, lg] }
+  # @param button_variant select { choices: [true, false] }
+  def playground(variant: :link, size: :default, button_variant: false)
+    render(UI::Link.new(href: "#", variant: variant.to_sym, size: size.to_sym, button_variant: button_variant == "true")) { "Click here" }
+  end
+
+  # @label Variants
+  def variants; render_with_template; end
+
+  # @label Sizes
+  def sizes; render_with_template; end
+
+  # @label With Icons
+  def with_icons; render_with_template; end
+end

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

@@ -0,0 +1,122 @@
+<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>