velvetkit 0.1.0.beta

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::GroupLabel < ViewComponent::Base
+  def initialize(label, **system_args)
+    @label = label
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-group-label"
+    @system_args[:data][:sidebar] = "group-label"
+
+    @system_args[:class] = class_names(
+      "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+      @system_args[:class]
+    )
+  end
+end

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

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

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::Header < UI::Base
+  def initialize(**system_args)
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-header"
+    @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/inset.html.erb

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

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::Inset < UI::Base
+  def initialize(**system_args)
+    @system_args = system_args
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-inset"
+  end
+
+  def before_render
+    @system_args[:class] = class_names(
+      "bg-background relative flex w-full flex-1 flex-col",
+      "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+      @system_args[:class]
+    )
+  end
+end

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

@@ -0,0 +1 @@
+<%= tag.ul(**@system_args) do %><% menu_items.each do |item| %><%= item %><% end %><% end %>

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::Menu < UI::Base
+  renders_many :menu_items, UI::Sidebar::MenuItem
+
+  def initialize(**system_args)
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-menu"
+    @system_args[:data][:sidebar] = "menu"
+
+    @system_args[:class] = class_names(
+      "flex w-full min-w-0 flex-col gap-1",
+      @system_args[:class]
+    )
+  end
+end

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

@@ -0,0 +1 @@
+<%= link_to @path, **@system_args do %><%= content %><% end %>

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::MenuButton < ViewComponent::Base
+  def initialize(path, active: false, current: nil, icon: nil, **system_args)
+    @path = path
+    @is_active = active
+
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-menu-button"
+    @system_args[:data][:sidebar] = "menu-button"
+    @system_args[:data][:active] = @is_active.to_s
+
+    # An explicit `current:` always wins; an active button falls back to "page"
+    # so assistive tech announces it without the caller repeating themselves.
+    aria_current = current || ("page" if @is_active)
+    if aria_current
+      @system_args[:aria] = (@system_args[:aria] || {}).merge(current: aria_current)
+    end
+
+    @system_args[:class] = class_names(
+      "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-primary/10 data-[active=true]:font-semibold data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:stroke-current data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+      "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+      "h-8 text-sm",
+      @system_args[:class],
+      "bg-accent" => @is_active
+    )
+  end
+end

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

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

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::MenuItem < UI::Base
+  renders_one :menu_button, UI::Sidebar::MenuButton
+
+  def initialize(**system_args)
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-menu-item"
+    @system_args[:data][:sidebar] = "menu-item"
+
+    @system_args[:class] = class_names(
+      "group/menu-item relative",
+      # Active indicator: a primary bar flush with the sidebar edge.
+      "before:absolute before:-left-2 before:top-1/2 before:h-6 before:w-1 " \
+      "before:-translate-y-1/2 before:rounded-r-full before:bg-sidebar-primary " \
+      "before:opacity-0 before:transition-opacity " \
+      "has-[[data-active=true]]:before:opacity-100",
+      @system_args[:class]
+    )
+  end
+end

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

@@ -0,0 +1 @@
+<%= render(UI::Button.new(variant: :ghost, size: :icon, **@system_args)) do %><%= render(UI::Icon.new(name: "panel-left")) %><% end %>

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::Trigger < UI::Base
+  def initialize(sidebar_id: nil, expanded: true, label: nil, **system_args)
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:action] = "ui--sidebar#toggle"
+    @system_args[:data]["ui--sidebar-target"] = "trigger"
+
+    # The icon-only button needs an accessible name, and screen readers need to
+    # know which region it controls and whether that region is currently open.
+    @system_args[:aria] = {
+      controls: sidebar_id,
+      expanded: expanded.to_s,
+      label: label || I18n.t("ui.sidebar.toggle", default: "Toggle sidebar")
+    }.compact.merge(@system_args[:aria] || {})
+
+    @system_args[:class] = class_names(
+      "size-7!",
+      @system_args[:class]
+    )
+  end
+end

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

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

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class UI::Sidebar::Wrapper < UI::Base
+  SIDEBAR_WIDTH = "16rem"
+  SIDEBAR_WIDTH_MOBILE = "18rem"
+  SIDEBAR_WIDTH_ICON = "3rem"
+
+  # Written out in full so Tailwind's source scanner can see each class literally;
+  # an interpolated "min-h-#{...}" is invisible to it and never gets generated.
+  MIN_HEIGHTS = {
+    svh: "min-h-svh",
+    dvh: "min-h-dvh",
+    lvh: "min-h-lvh",
+    screen: "min-h-screen",
+    full: "min-h-full",
+    none: nil
+  }.freeze
+
+  def initialize(min_height: :svh, **system_args)
+    unless MIN_HEIGHTS.key?(min_height)
+      raise ArgumentError, "min_height must be one of #{MIN_HEIGHTS.keys.join(', ')} (got #{min_height.inspect})"
+    end
+
+    @min_height = min_height
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar-wrapper"
+    @system_args[:data][:controller] = "ui--sidebar"
+
+    @system_args[:style] ||= {}
+    @system_args[:style] = "--sidebar-width: #{SIDEBAR_WIDTH}; --sidebar-width-mobile: #{SIDEBAR_WIDTH_MOBILE}; --sidebar-width-icon: #{SIDEBAR_WIDTH_ICON}"
+
+    @system_args[:class] = class_names(
+      "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex w-full",
+      MIN_HEIGHTS[@min_height],
+      @system_args[:class]
+    )
+  end
+end

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

@@ -0,0 +1,11 @@
+<%= tag.aside(**@system_args) do %>
+  <div data-slot="sidebar-gap" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180 group-data-[collapsible=icon]:w-(--sidebar-width-icon)"></div>
+  <div data-slot="sidebar-container" class="fixed inset-y-0 z-10 h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l">
+    <div data-sidebar="sidebar" data-slot="sidebar-inner" class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm">
+      <%= sidebar_header if sidebar_header %>
+      <%= sidebar_content if sidebar_content %>
+      <%= sidebar_footer if sidebar_footer %>
+      <%= content %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class UI::Sidebar < UI::Base
+  renders_one :sidebar_header, UI::Sidebar::Header
+  renders_one :sidebar_content, UI::Sidebar::Content
+  renders_one :sidebar_footer, UI::Sidebar::Footer
+
+  def initialize(collapsible: :none, variant: :sidebar, side: :left, state: :expanded, **system_args)
+    @collapsible = collapsible
+    @variant = variant
+    @side = side
+    @state = state
+    @system_args = system_args
+
+    @system_args[:data] ||= {}
+    @system_args[:data][:slot] = "sidebar"
+    @system_args[:data][:variant] = @variant
+    @system_args[:data][:collapsible] = @collapsible
+    @system_args[:data][:side] = @side
+    @system_args[:data][:state] = @state
+    @system_args[:data]["ui--sidebar-target"] = "sidebar"
+
+
+    @system_args[:class] = class_names(
+      "group peer text-sidebar-foreground md:block",
+      @system_args[:class]
+    )
+  end
+end

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

@@ -0,0 +1 @@
+<%= tag.span role: "status", aria: { live: "polite" }, class: "inline-flex items-center" do %><span class="sr-only"><%= @label || t("ui.spinner.label", default: "Loading") %></span><%= render(icon) %><% end %>

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class UI::Spinner < UI::Base
+  def initialize(size: :default, label: nil, class: nil, **html_attrs)
+    @size = size
+    @label = label
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def icon
+    UI::Icon.new(
+      name: "loader",
+      size: @size,
+      aria: { hidden: true },
+      class: cn("animate-spin", @user_class),
+      **@html_attrs
+    )
+  end
+end

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

@@ -0,0 +1,12 @@
+<%# Always a <label>: the checkbox is visually hidden, so a click on the
+    track has to reach it through the label, visible text or not. %>
+<%= tag.label for: (@id if label.present?), class: wrapper_classes do %>
+  <%= tag.span class: root_classes do %>
+    <%= tag.input(**input_options) %>
+    <%= tag.span class: track_classes %>
+    <%= tag.span class: thumb_classes %>
+  <% end %>
+  <% if label.present? %>
+    <%= tag.span class: label_text_classes do %><%= label %><% if required? %><%= tag.span(" *", class: "text-destructive ml-0.5") %><% end %><% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+class UI::Switch < UI::Base
+  THUMB_TRANSLATE = {
+    sm:      "peer-checked:translate-x-4",
+    default: "peer-checked:translate-x-5",
+    lg:      "peer-checked:translate-x-6"
+  }.freeze
+
+  variants(
+    base: "absolute inset-0 rounded-full " \
+          "bg-input peer-checked:bg-primary " \
+          "transition-all duration-200 " \
+          "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary " \
+          "peer-focus:ring-offset-1 ring-offset-background " \
+          "peer-disabled:cursor-not-allowed",
+    variants: {
+      size: {
+        sm:      "w-8 h-4",
+        default: "w-10 h-5",
+        lg:      "w-12 h-6"
+      }
+    },
+    defaults: { size: :default }
+  )
+
+  def initialize(name: nil, value: "1", checked: false,
+                 label: nil, size: :default,
+                 required: false, disabled: false,
+                 class: nil, **html_attrs)
+    @name       = name
+    @value      = value
+    @checked    = checked
+    @label_text = label
+    @size       = size
+    @required   = required
+    @disabled   = disabled
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @id = @html_attrs[:id] || ("ui-sw-#{SecureRandom.hex(4)}" if @label_text)
+    @html_attrs[:id] = @id if @id
+  end
+
+  def label;     @label_text; end
+  def required?; @required;    end
+
+  # Visually-hidden checkbox. Owns form value, focus, and disabled state.
+  # The `peer` class lets sibling spans react to :checked / :focus-visible /
+  # :disabled. `sr-only` keeps the native check icon off-screen so the
+  # browser's UA-painted tick can never bleed through (which is what shows
+  # up when a styled <input type=checkbox> is left in flow).
+  def input_options
+    opts = @html_attrs.dup
+    opts[:type]     = :checkbox
+    opts[:role]     = :switch
+    opts[:name]     = @name if @name
+    opts[:value]    = @value
+    opts[:checked]  = true if @checked
+    opts[:disabled] = true if @disabled
+    opts[:required] = true if @required
+    opts[:class]    = "peer sr-only"
+    opts
+  end
+
+  SIZE_CLASSES = {
+    sm:      "w-8 h-4",
+    default: "w-10 h-5",
+    lg:      "w-12 h-6"
+  }.freeze
+
+  def root_classes
+    cn(
+      "relative inline-flex shrink-0 items-center",
+      SIZE_CLASSES[@size]
+    )
+  end
+
+  def track_classes
+    cn(variant_classes(size: @size), @user_class)
+  end
+
+  def thumb_classes
+    cn(
+      "pointer-events-none absolute left-0.5 top-0.5",
+      "rounded-full bg-white shadow-sm",
+      "transition-transform",
+      THUMB_TRANSLATE[@size],
+      {
+        sm:      "w-3 h-3",
+        default: "w-4 h-4",
+        lg:      "w-5 h-5"
+      }[@size]
+    )
+  end
+
+  def wrapper_classes
+    cn(
+      "inline-flex items-center gap-2 select-none cursor-pointer",
+      { "cursor-not-allowed opacity-60" => @disabled }
+    )
+  end
+
+  def label_text_classes
+    cn(
+      "text-sm leading-none",
+      { "text-muted-foreground" => @disabled }
+    )
+  end
+end

data/registry/app/components/ui/table/cell.html.erb

@@ -0,0 +1 @@
+<%= tag.td class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/table/cell.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# A data cell.
+class UI::Table::Cell < UI::Base
+  def initialize(align: :start, class: nil, **html_attrs)
+    @align      = align
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("p-2 align-middle",
+       UI::Table::Column::ALIGNMENTS.fetch(@align, UI::Table::Column::ALIGNMENTS[:start]),
+       @user_class)
+  end
+end

data/registry/app/components/ui/table/column.html.erb

@@ -0,0 +1 @@
+<%= tag.th scope: "col", class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/table/column.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# A header cell. Renders <th scope="col"> so assistive technology announces it
+# as a header rather than as data.
+class UI::Table::Column < UI::Base
+  ALIGNMENTS = { start: "text-left", center: "text-center", end: "text-right" }.freeze
+
+  def initialize(align: :start, class: nil, **html_attrs)
+    @align      = align
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("h-10 px-2 align-middle font-medium text-foreground whitespace-nowrap",
+       ALIGNMENTS.fetch(@align, ALIGNMENTS[:start]), @user_class)
+  end
+end

data/registry/app/components/ui/table/head.html.erb

@@ -0,0 +1 @@
+<%= tag.thead class: classes, **@html_attrs do %><tr><%= columns.map(&:to_s).join.html_safe %></tr><% end %>

data/registry/app/components/ui/table/head.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# The header row of a UI::Table.
+class UI::Table::Head < UI::Base
+  renders_many :columns, UI::Table::Column
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes = cn("border-b border-border bg-muted/50", @user_class)
+end

data/registry/app/components/ui/table/row.html.erb

@@ -0,0 +1 @@
+<%= tag.tr(**html_options) do %><%= cells.map(&:to_s).join.html_safe %><% end %>

data/registry/app/components/ui/table/row.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+# A body row.
+class UI::Table::Row < UI::Base
+  renders_many :cells, UI::Table::Cell
+
+  def initialize(selected: false, class: nil, **html_attrs)
+    @selected   = selected
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("border-b border-border transition-colors hover:bg-muted/50",
+       { "bg-muted" => @selected }, @user_class)
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:class] = classes
+    # aria-selected rather than colour alone, so the state is not conveyed by
+    # appearance only.
+    opts[:"aria-selected"] = "true" if @selected
+    opts
+  end
+end

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

@@ -0,0 +1,4 @@
+<%# The wrapper scrolls sideways so a wide table never breaks the page. %>
+<div class="relative w-full overflow-x-auto rounded-md border border-border">
+  <%= tag.table class: classes, **@html_attrs do %><% if caption.present? %><caption class="mt-4 px-2 text-sm text-muted-foreground text-left"><%= caption %></caption><% end %><%= head %><tbody class="[&_tr:last-child]:border-0"><% if show_empty_state? %><tr><td colspan="<%= column_count %>" class="p-8 text-center text-sm text-muted-foreground"><%= empty_state %></td></tr><% else %><%= rows.map(&:to_s).join.html_safe %><% end %></tbody><% end %>
+</div>

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+# UI::Table — a data table.
+#
+# Lists get long and phones are narrow, so the table is always wrapped in a
+# horizontal scroll container rather than allowed to break the page layout.
+#
+# Usage:
+#   <%= render(UI::Table.new(caption: "Invoices")) do |table| %>
+#     <% table.with_head do |head| %>
+#       <% head.with_column { "Customer" } %>
+#       <% head.with_column(align: :end) { "Amount" } %>
+#     <% end %>
+#     <% @invoices.each do |invoice| %>
+#       <% table.with_row do |row| %>
+#         <% row.with_cell { invoice.customer.name } %>
+#         <% row.with_cell(align: :end) { number_to_currency(invoice.amount) } %>
+#       <% end %>
+#     <% end %>
+#     <% table.with_empty_state { "No invoices yet" } %>
+#   <% end %>
+class UI::Table < UI::Base
+  renders_one :head, UI::Table::Head
+  renders_many :rows, UI::Table::Row
+  # Shown only when there are no rows, so an empty table reads as empty
+  # rather than as a header with nothing under it.
+  renders_one :empty_state
+
+  def initialize(caption: nil, class: nil, **html_attrs)
+    @caption    = caption
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  attr_reader :caption
+
+  def classes = cn("w-full caption-bottom text-sm", @user_class)
+
+  def empty? = rows.none?
+
+  def show_empty_state? = empty? && empty_state?
+
+  # Spans the full width so the message centres under the header.
+  def column_count = head? ? head.columns.size : 1
+end

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

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

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class UI::Tabs::Content < UI::Base
+  attr_reader :value
+
+  def initialize(value:, class: nil, **html_attrs)
+    @value      = value
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_tab_context(tabs); @tab_context = tabs; end
+
+  def panel_id
+    "ui-panel-#{@tab_context.id}-#{@value}"
+  end
+
+  def trigger_id
+    "ui-tab-#{@tab_context.id}-#{@value}"
+  end
+
+  def active?
+    @tab_context.initial_value.to_s == @value.to_s
+  end
+
+  def classes
+    cn("mt-2", @user_class)
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:role]                   = :tabpanel
+    opts[:id]                     = panel_id
+    opts[:class]                  = classes
+    opts[:"aria-labelledby"]      = trigger_id
+    opts[:tabindex]               = "0"
+    opts[:"data-state"]           = active? ? "active" : "inactive"
+    opts[:"data-ui--tabs-target"] = "panel"
+    opts[:"data-value"]           = @value.to_s
+    opts[:hidden]                 = true unless active?
+    opts
+  end
+end

data/registry/app/components/ui/tabs/list.html.erb

@@ -0,0 +1 @@
+<%= tag.div(role: "tablist", class: classes, **@html_attrs) do %><% triggers.each do |trigger| %><%= trigger %><% end %><% end %>

data/registry/app/components/ui/tabs/list.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class UI::Tabs::List < UI::Base
+  renders_many :triggers, ->(value:, **opts) {
+    UI::Tabs::Trigger.new(value: value, **opts).tap { |t| t.set_tab_context(@tab_context, list: self) }
+  }
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_tab_context(tabs); @tab_context = tabs; end
+
+  def first_trigger_value
+    triggers.first&.value
+  end
+
+  def classes
+    cn(LIST_VARIANT[@tab_context&.variant || :line], @user_class)
+  end
+
+  LIST_VARIANT = {
+    line:  "inline-flex items-center gap-4 border-b border-input",
+    pill:  "inline-flex items-center gap-1 rounded-md bg-muted p-1",
+    solid: "inline-flex items-center rounded-md border border-input divide-x divide-input bg-background"
+  }.freeze
+end

data/registry/app/components/ui/tabs/trigger.html.erb

@@ -0,0 +1 @@
+<%= tag.button(**html_options) do %><% if leading_icon? %><%= leading_icon %><% end %><%= content %><% end %>