velvetkit 0.1.0.beta

data/registry/app/components/ui/popover.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class UI::Popover < UI::Base
+  renders_one :trigger, ->(**opts) {
+    UI::Popover::Trigger.new(**opts).tap { |t| t.set_popover_context(self) }
+  }
+  renders_one :popover_content, ->(**opts) {
+    UI::Popover::Content.new(**opts).tap { |c| c.set_popover_context(self) }
+  }
+  # Alias for more natural API: `with_content` instead of `with_popover_content`
+  alias_method :with_content, :with_popover_content
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @id = @html_attrs[:id] || "ui-popover-#{SecureRandom.hex(4)}"
+  end
+
+  attr_reader :id
+
+  def root_classes
+    cn("inline-block", @user_class)
+  end
+end

data/registry/app/components/ui/radio_group/item.html.erb

@@ -0,0 +1,18 @@
+<% if label.present? %>
+  <%= tag.label for: id, class: wrapper_classes do %>
+    <%= tag.span class: "relative inline-flex" do %>
+      <%= tag.input(**input_options) %>
+      <%= tag.span class: dot_classes do %>
+        <%= tag.span class: dot_size_class + " rounded-full bg-primary-foreground" %>
+      <% end %>
+    <% end %>
+    <%= tag.span class: label_text_classes do %><%= label %><% if required? %><%= tag.span(" *", class: "text-destructive ml-0.5") %><% end %><% end %>
+  <% end %>
+<% else %>
+  <%= tag.span class: "relative inline-flex" do %>
+    <%= tag.input(**input_options) %>
+    <%= tag.span class: dot_classes do %>
+      <%= tag.span class: dot_size_class + " rounded-full bg-primary-foreground" %>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/app/components/ui/radio_group/item.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+class UI::RadioGroup::Item < UI::Base
+  variants(
+    base: "peer appearance-none shrink-0 rounded-full border border-input bg-background " \
+          "transition-all " \
+          "checked:bg-primary checked:border-primary " \
+          "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 " \
+          "ring-offset-background",
+    variants: {
+      size: {
+        sm:      "w-3.5 h-3.5",
+        default: "w-4 h-4",
+        lg:      "w-5 h-5"
+      }
+    },
+    defaults: { size: :default }
+  )
+
+  DOT_SIZE = { sm: "w-2 h-2", default: "w-2.5 h-2.5", lg: "w-3.5 h-3.5" }.freeze
+
+  def initialize(value:, label: nil, disabled: false, size: nil,
+                 class: nil, **html_attrs)
+    @value      = value
+    @label_text = label
+    @disabled   = disabled
+    @size       = size
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @id = @html_attrs[:id] || "ui-rg-item-#{SecureRandom.hex(4)}"
+    @html_attrs[:id] = @id
+  end
+
+  attr_reader :value
+
+  def label;     @label_text; end
+  def id;        @id;          end
+  def disabled?; @disabled;    end
+  def required?; @group_required; end
+
+  def input_options
+    opts = @html_attrs.dup
+    opts[:type]    = :radio
+    opts[:value]   = @value
+    opts[:checked] = true if @group_value == @value.to_s
+    opts[:disabled] = true if @disabled || @group_disabled
+    opts[:required] = true if @group_required
+    opts[:name]     = @group_name
+    opts[:class]    = classes
+    opts
+  end
+
+  def classes
+    cn(variant_classes(size: @size || :default), @user_class)
+  end
+
+  def dot_classes
+    cn(
+      "pointer-events-none absolute inset-0 flex items-center justify-center",
+      "opacity-0 peer-checked:opacity-100 transition-opacity"
+    )
+  end
+
+  def dot_size_class
+    DOT_SIZE[@size || :default]
+  end
+
+  def wrapper_classes
+    cn(
+      "inline-flex items-center gap-2 select-none",
+      { "cursor-not-allowed opacity-60" => @disabled || @group_disabled }
+    )
+  end
+
+  def label_text_classes
+    cn(
+      "text-sm leading-none",
+      { "text-muted-foreground" => @disabled || @group_disabled }
+    )
+  end
+
+  def checked?
+    @group_value == @value.to_s
+  end
+
+  def set_group_context(group)
+    @group_name     = group.name
+    @group_value    = group.value
+    @group_required = group.required?
+    @group_disabled = group.disabled?
+    @size         ||= group.size
+  end
+
+  def render?
+    @group_name.present?
+  end
+end

data/registry/app/components/ui/radio_group.html.erb

@@ -0,0 +1 @@
+<%= tag.div role: "radiogroup", id: group_id, class: classes, **@html_attrs.except(:id) do %><% items.each do |item| %><%= render item %><% end %><% end %>

data/registry/app/components/ui/radio_group.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class UI::RadioGroup < UI::Base
+  renders_many :items, ->(value:, **opts) {
+    item = UI::RadioGroup::Item.new(value: value, **opts)
+    item.set_group_context(self)
+    item
+  }
+
+  def initialize(name: nil, value: nil, size: :default,
+                 required: false, disabled: false,
+                 class: nil, **html_attrs)
+    @name       = name
+    @value      = value
+    @size       = size
+    @required   = required
+    @disabled   = disabled
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("flex flex-col gap-2", @user_class)
+  end
+
+  def group_id
+    @html_attrs[:id] || "ui-rg-#{SecureRandom.hex(4)}"
+  end
+
+  def required?;  @required; end
+  def disabled?;  @disabled; end
+  def name;       @name;     end
+  def value;      @value;    end
+  def size;       @size;     end
+end

data/registry/app/components/ui/select.html.erb

@@ -0,0 +1,60 @@
+<%= tag.div(class: "relative w-full", data: root_data) do %>
+  <% if render_label? %>
+    <div class="mb-2"><%= render(label_component) { label_text } %></div>
+  <% end %>
+
+  <%= tag.button(**trigger_options) do %>
+    <span data-ui--select-target="value" class="<%= placeholder_shown? ? "text-muted-foreground" : "" %> truncate"><%= current_label %></span>
+    <%= render(UI::Icon.new(name: "chevrons-up-down", size: :sm, class: "shrink-0 text-muted-foreground")) %>
+  <% end %>
+
+  <%= tag.div(hidden: true, data: { "ui--select-target": "panel", state: "closed" },
+              class: "z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md " \
+                     "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95") do %>
+    <% if searchable? %>
+      <div class="flex items-center gap-2 border-b px-3 py-2">
+        <%= render(UI::Icon.new(name: "search", size: :sm, class: "shrink-0 text-muted-foreground")) %>
+        <%= tag.input(type: "search", id: search_id, autocomplete: "off",
+                      placeholder: t("ui.select.search", default: "Search"),
+                      class: "w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
+                      aria: { label: t("ui.select.search_label", default: "Search the options"), controls: listbox_id, autocomplete: "list", expanded: "true" },
+                      role: "combobox",
+                      data: { "ui--select-target": "search",
+                              action: "input->ui--select#filter keydown->ui--select#keydown" }) %>
+      </div>
+    <% end %>
+
+    <%= tag.div(id: listbox_id, role: "listbox", tabindex: -1,
+                aria: { labelledby: (render_label? ? trigger_id : nil), multiselectable: (multiple? ? "true" : nil) },
+                data: { "ui--select-target": "listbox", action: "mousedown->ui--select#keepFocus" },
+                class: "max-h-64 overflow-y-auto p-1") do %>
+      <% listbox_options.each_with_index do |(label, value), index| %>
+        <%= tag.div(id: option_id(index), role: "option", aria: { selected: selected?(value).to_s },
+                    data: { value: value, "ui--select-target": "option",
+                            action: "click->ui--select#choose mousemove->ui--select#hover" },
+                    class: "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 #{size == :sm ? "text-xs" : "text-sm"} " \
+                           "outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium " \
+                           "#{value.to_s.empty? ? "text-muted-foreground" : ""}") do %>
+          <span class="truncate"><%= label %></span>
+          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" <%= "hidden" unless selected?(value) %>>
+            <%= render(UI::Icon.new(name: "check", size: :sm)) %>
+          </span>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <% if searchable? %>
+      <p hidden data-ui--select-target="empty" class="px-3 py-3 text-sm text-muted-foreground"><%= t("ui.select.no_matches", default: "No matches") %></p>
+    <% end %>
+  <% end %>
+
+  <% if form_field? %>
+    <%= @form.select(@field, native_choices, { selected: current_values }, native_options) %>
+  <% else %>
+    <%= tag.select(**native_options) do %>
+      <% native_choices.each do |label, value| %>
+        <%= tag.option(label, value: value, selected: selected?(value)) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/app/components/ui/select.rb

@@ -0,0 +1,181 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+# UI::Select — a dropdown for choosing one value, or several, styled to match the kit.
+#
+# The visible part is a WAI-ARIA "select-only combobox": a button with
+# role=combobox and a floating role=listbox. Focus stays on the button while
+# the arrow keys move through the options, as the pattern specifies.
+#
+# The value lives in a visually hidden native <select>. That keeps everything a
+# form already relies on: the field submits under its name, `required` blocks
+# submission, form reset works, the form builder binds it, and anything
+# listening for `change` on it still hears one. The Stimulus controller only
+# mirrors the choice into it.
+#
+# `searchable: true` adds a search box that filters the list; `multiple: true`
+# lets people pick several, posting `name[]` like a native multiple select.
+#
+# UI::NativeSelect is the browser's own control, for when a phone's system
+# picker is the better fit.
+#
+# Usage:
+#   <%= render(UI::Select.new(form: f, field: :plan, label: "Plan",
+#                             options: [["Free", "free"], ["Pro", "pro"]],
+#                             prompt: "Choose a plan")) %>
+class UI::Select < UI::Base
+  variants(
+    base: "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background " \
+          "text-left text-foreground shadow-xs " \
+          "#{UI::Base::FOCUS_RING} " \
+          "aria-expanded:ring-2 aria-expanded:ring-primary aria-expanded:ring-offset-1 " \
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
+    variants: {
+      size: {
+        sm:      "h-8 px-2.5 text-xs",
+        default: "h-9 px-3 text-sm",
+        lg:      "h-10 px-4 text-base"
+      }
+    },
+    defaults: { size: :default }
+  )
+
+  def initialize(name: nil, options: [], selected: nil, prompt: nil,
+                 label: nil, size: :default, searchable: false, multiple: false,
+                 required: false, error: false, disabled: false,
+                 form: nil, field: nil,
+                 class: nil, **html_attrs)
+    @name       = name
+    @options    = options
+    @selected   = selected
+    @prompt     = prompt
+    @label      = label
+    @size       = size
+    @searchable = searchable
+    @multiple   = multiple
+    @required   = required
+    @error      = error
+    @disabled   = disabled
+    @form       = form
+    @field      = field
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @uid        = SecureRandom.hex(4)
+  end
+
+  attr_reader :prompt, :size
+
+  def searchable? = @searchable
+  def multiple? = @multiple
+
+  def trigger_id = "ui-select-#{@uid}"
+  def listbox_id = "ui-select-#{@uid}-listbox"
+  def search_id = "ui-select-#{@uid}-search"
+  def option_id(index) = "ui-select-#{@uid}-option-#{index}"
+
+  def trigger_classes
+    cn(variant_classes(size: @size),
+       { "border-destructive focus:ring-destructive" => @error },
+       @user_class)
+  end
+
+  def trigger_options
+    {
+      type: "button",
+      id: trigger_id,
+      class: trigger_classes,
+      role: "combobox",
+      disabled: @disabled,
+      aria: { haspopup: "listbox", expanded: "false", controls: listbox_id, invalid: (@error ? "true" : nil) },
+      data: { "ui--select-target": "trigger",
+              action: "click->ui--select#toggle keydown->ui--select#keydown" }
+    }
+  end
+
+  def form_field? = @form.present? && @field.present?
+
+  # Same convention as UI::Input: bound to a form object the attribute name
+  # supplies the label; `label:` overrides, `label: false` opts out.
+  def render_label?
+    return false if @label == false
+
+    @label.present? || form_field?
+  end
+
+  def label_text
+    return @label if @label.is_a?(String) && @label.present?
+    return nil unless form_field?
+
+    object = @form.object
+    if object.respond_to?(:class) && object.class.respond_to?(:human_attribute_name)
+      object.class.human_attribute_name(@field)
+    else
+      @field.to_s.humanize
+    end
+  end
+
+  def label_component
+    UI::Label.new(for: trigger_id, required: @required, disabled: @disabled)
+  end
+
+  # Accepts [["Label", value], ...] or a plain list of scalars. A prompt
+  # becomes a first, empty option, as `include_blank` makes it natively;
+  # a multiple select has no "nothing" option, since nothing is unticking.
+  def listbox_options
+    list = @options.map { |option| option.is_a?(Array) ? option : [ option, option ] }
+    prompt.present? && !multiple? ? [ [ prompt, "" ] ] + list : list
+  end
+
+  # What the field holds now, as strings: the explicit selection, else the
+  # bound attribute, else (single only) whatever a native select shows first.
+  def current_values
+    value = @selected
+    value = @form.object.public_send(@field) if value.nil? && form_field? && @form.object.respond_to?(@field)
+    return Array(value).map(&:to_s) unless value.nil?
+
+    multiple? ? [] : [ listbox_options.first&.last.to_s ]
+  end
+
+  def selected?(value) = current_values.include?(value.to_s)
+
+  def chosen_labels = listbox_options.select { |_, value| selected?(value) && value.to_s != "" }.map(&:first)
+
+  # A multiple select names up to two choices, then counts them.
+  def current_label
+    return chosen_labels.first || prompt unless multiple?
+    return prompt || t("ui.select.placeholder", default: "Choose…") if chosen_labels.empty?
+
+    chosen_labels.size > 2 ? summary.sub("%{count}", chosen_labels.size.to_s) : chosen_labels.join(", ")
+  end
+
+  def placeholder_shown? = chosen_labels.empty?
+
+  # "%{count} selected", left for the controller to fill in as ticks change.
+  def summary = t("ui.select.selected", default: "%{count} selected", count: "%{count}")
+
+  def root_data
+    { controller: "ui--select", "ui--select-multiple-value": multiple?.to_s,
+      "ui--select-summary-value": summary,
+      "ui--select-placeholder-value": prompt || t("ui.select.placeholder", default: "Choose…") }
+  end
+
+  # The hidden native select. Everything the caller passed beyond our own
+  # arguments lands here, so ids and change listeners keep working.
+  def native_options
+    attrs = @html_attrs.dup
+    attrs[:class] = "sr-only"
+    attrs[:tabindex] = -1
+    attrs[:aria] = (attrs[:aria] || {}).merge(hidden: true)
+    attrs[:data] = (attrs[:data] || {}).merge("ui--select-target": "native")
+    attrs[:required] = true if @required
+    attrs[:disabled] = true if @disabled
+    attrs[:multiple] = true if multiple?
+    attrs[:name] = multiple? ? "#{@name}[]" : @name if @name && !form_field?
+    attrs
+  end
+
+  def native_choices
+    listbox_options.map { |label, value| [ label, value ] }
+  end
+end

data/registry/app/components/ui/sheet/close.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class UI::Sheet::Close < UI::Dialog::Close
+end

data/registry/app/components/ui/sheet/content.html.erb

@@ -0,0 +1,24 @@
+<% body = content %>
+<%= tag.dialog(**html_options) do %>
+  <%= tag.div(class: panel_classes, data: { state: "closed", "ui--dialog-part": "panel" }) do %>
+    <% if show_close? %>
+      <%= render(UI::Sheet::Close.new) %>
+    <% end %>
+    <% if title? || description? %>
+      <header class="flex flex-col space-y-1.5 text-center sm:text-left">
+        <% if title? %>
+          <%= tag.h2(title_html, id: title_id, class: "text-lg font-semibold leading-none tracking-tight") %>
+        <% end %>
+        <% if description? %>
+          <%= tag.p(description_html, id: description_id, class: "text-sm text-muted-foreground") %>
+        <% end %>
+      </header>
+    <% end %>
+    <% if body.present? %>
+      <div class="overflow-y-auto flex-1 min-h-0 <%= title? || description? ? 'mt-4' : '' %>"><%= body %></div>
+    <% end %>
+    <% if footer? %>
+      <footer class="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><%= footer_html %></footer>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/app/components/ui/sheet/content.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+# UI::Sheet::Content — the native <dialog> element with a fixed-position panel
+# anchored to a viewport edge. Inline block helpers for title, description, and
+# footer (no nested ViewComponent sub-classes).
+class UI::Sheet::Content < UI::Base
+  PANEL_BASE =
+    "fixed z-50 flex flex-col overflow-hidden border bg-background p-6 shadow-lg " \
+    "data-[state=open]:animate-in data-[state=closed]:animate-out"
+
+  variants(
+    base: PANEL_BASE,
+    variants: {
+      side: {
+        right:  "inset-y-0 right-0 h-full w-full border-l sm:max-w-md data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
+        left:   "inset-y-0 left-0 h-full w-full border-r sm:max-w-md data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+        top:    "inset-x-0 top-0 max-h-[80vh] w-full border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+        bottom: "inset-x-0 bottom-0 max-h-[80vh] w-full border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
+      }
+    },
+    defaults: { side: :right }
+  )
+
+  def initialize(side: :right, show_close: true, class: nil, **html_attrs)
+    @side       = side
+    @show_close = show_close
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_sheet_context(sheet)
+    @sheet = sheet
+  end
+
+  # ── Inline slot helpers ───────────────────────────────────────────────────
+
+  def with_title(text = nil, &block)
+    @title_text  = text
+    @title_block = block
+    self
+  end
+
+  def with_description(text = nil, &block)
+    @description_text  = text
+    @description_block = block
+    self
+  end
+
+  def with_footer(&block)
+    @footer_block = block
+    self
+  end
+
+  def title?;       @title_text.present? || @title_block.present?;             end
+  def description?; @description_text.present? || @description_block.present?; end
+  def footer?;      @footer_block.present?;                                    end
+  def show_close?;  @show_close;                                               end
+
+  def title_html
+    @title_block ? view_context.capture(&@title_block) : @title_text
+  end
+
+  def description_html
+    @description_block ? view_context.capture(&@description_block) : @description_text
+  end
+
+  def footer_html
+    view_context.capture(&@footer_block) if @footer_block
+  end
+
+  # ── Class strings ─────────────────────────────────────────────────────────
+
+  def panel_classes
+    cn(variant_classes(side: @side), @user_class)
+  end
+
+  def dialog_classes
+    "fixed inset-0 m-0 p-0 max-w-none max-h-none w-full h-full " \
+    "bg-transparent border-0 overflow-visible " \
+    "open:flex open:items-center open:justify-center " \
+    "backdrop:bg-black/60 backdrop:backdrop-blur-[1px]"
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:id]    = @sheet.id
+    opts[:class] = dialog_classes
+    opts[:"aria-labelledby"]  = @sheet.title_id       if title?
+    opts[:"aria-describedby"] = @sheet.description_id if description?
+    opts[:"data-ui--dialog-target"] = "content"
+    opts[:"data-state"] = "closed"
+    opts
+  end
+
+  def title_id;       @sheet.title_id;       end
+  def description_id; @sheet.description_id; end
+end

data/registry/app/components/ui/sheet/trigger.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class UI::Sheet::Trigger < UI::Dialog::Trigger
+end

data/registry/app/components/ui/sheet.html.erb

@@ -0,0 +1,3 @@
+<%= tag.div(class: root_classes,
+            data: { controller: "ui--dialog" }.merge(@html_attrs[:data] || {}),
+            **@html_attrs.except(:data)) do %><% if trigger? %><%= trigger %><% end %><% if body? %><%= body %><% end %><% end %>

data/registry/app/components/ui/sheet.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+# UI::Sheet — side-anchored modal panel backed by the native <dialog> element.
+#
+# Reuses the ui--dialog controller and follows the same compound API as
+# UI::Dialog, but anchors the panel to an edge of the viewport instead of
+# centering it.
+#
+# Compound:
+#   UI::Sheet
+#   UI::Sheet::Trigger  — click-to-open wrapper (inherits from Dialog::Trigger)
+#   UI::Sheet::Content  — the <dialog> + fixed panel; inline title / description / footer
+class UI::Sheet < UI::Base
+  renders_one :trigger, ->(**opts) {
+    UI::Sheet::Trigger.new(**opts).tap { |t| t.set_dialog_context(self) }
+  }
+  renders_one :body, ->(**opts) {
+    UI::Sheet::Content.new(**opts).tap { |c| c.set_sheet_context(self) }
+  }
+  alias_method :with_content, :with_body
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @id = @html_attrs[:id] || "ui-sheet-#{SecureRandom.hex(4)}"
+    @html_attrs.delete(:id)
+  end
+
+  attr_reader :id
+
+  def title_id;       "#{@id}-title";       end
+  def description_id; "#{@id}-description"; end
+
+  def root_classes
+    cn("contents", @user_class)
+  end
+end

data/registry/app/components/ui/sidebar/content.html.erb

@@ -0,0 +1 @@
+<%= tag.div(**@system_args) do %><% sidebar_groups.each do |group| %><%= group %><% end %><% end %>

data/registry/app/components/ui/sidebar/content.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::Content < UI::Base
+  renders_many :sidebar_groups, UI::Sidebar::Group
+
+  def initialize(**system_args)
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-content"
+    @system_args[:data][:sidebar] = "content"
+
+    @system_args[:class] = class_names(
+      "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+      @system_args[:class]
+    )
+  end
+end

data/registry/app/components/ui/sidebar/footer.html.erb

@@ -0,0 +1,3 @@
+<%= tag.div **@system_args do %>
+    <%= content %>
+<% end %>

data/registry/app/components/ui/sidebar/footer.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::Footer < UI::Base
+  def initialize(**system_args)
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-footer"
+    @system_args[:data][:sidebar] = "sidebar"
+
+    @system_args[:class] = class_names(
+      "flex flex-col gap-2 p-2",
+      @system_args[:class]
+    )
+  end
+end

data/registry/app/components/ui/sidebar/group.html.erb

@@ -0,0 +1 @@
+<%= tag.div(**@system_args) do %><%= label if label %><%= menu if menu %><%= content %><% end %>

data/registry/app/components/ui/sidebar/group.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::Group < UI::Base
+  renders_one :label, UI::Sidebar::GroupLabel
+  renders_one :menu, UI::Sidebar::Menu
+
+  def initialize(**system_args)
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-group"
+    @system_args[:data][:sidebar] = "group"
+
+    @system_args[:class] = class_names(
+      "relative flex w-full min-w-0 flex-col p-2",
+      @system_args[:class]
+    )
+  end
+end

data/registry/app/components/ui/sidebar/group_label.html.erb

@@ -0,0 +1 @@
+<%= tag.div(**@system_args) do %><%= @label if @label %><%= content %><% end %>