senren-ui 0.1.0

data/templates/components/popover/popover_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Senren
+  class PopoverComponent < BaseComponent
+    renders_one :trigger
+    renders_one :content_panel
+
+    VARIANTS = { default: '' }.freeze
+    SIZES    = { md: '' }.freeze
+  end
+end

data/templates/components/progress/progress_component.html.erb

@@ -0,0 +1,11 @@
+<div <%= tag.attributes(**root_attrs("w-full")) %>>
+  <% if label.present? %>
+    <div class="mb-2 flex items-center justify-between text-sm">
+      <span class="font-medium text-[hsl(var(--senren-foreground))]"><%= label %></span>
+      <span class="text-[hsl(var(--senren-muted-foreground))]"><%= percent %>%</span>
+    </div>
+  <% end %>
+  <div role="progressbar" aria-valuemin="0" aria-valuemax="<%= max.to_i %>" aria-valuenow="<%= value.to_i %>" class="h-2 w-full overflow-hidden rounded-full bg-[hsl(var(--senren-muted))]">
+    <div class="h-full rounded-full transition-all <%= self.class::VARIANTS[variant] %>" style="width: <%= percent %>%"></div>
+  </div>
+</div>

data/templates/components/progress/progress_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Senren
+  class ProgressComponent < BaseComponent
+    VARIANTS = {
+      default: 'bg-[hsl(var(--senren-primary))]',
+      success: 'bg-[hsl(var(--senren-success))]',
+      warning: 'bg-[hsl(var(--senren-warning))]',
+      destructive: 'bg-[hsl(var(--senren-destructive))]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(value: 0, max: 100, label: nil, variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @value = value.to_f
+      @max = max.to_f.positive? ? max.to_f : 100.0
+      @label = label
+    end
+
+    attr_reader :value, :max, :label
+
+    def percent
+      ((value / max) * 100).clamp(0, 100).round
+    end
+  end
+end

data/templates/components/radio_button/radio_button_component.html.erb

@@ -0,0 +1,8 @@
+<label class="inline-flex items-center gap-2 cursor-pointer">
+  <%= tag.input(**root_attrs("h-4 w-4 border border-[hsl(var(--senren-input))] text-[hsl(var(--senren-primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]", type: "radio", id: id, name: name, value: value, checked: checked)) %>
+  <% if label %>
+    <span class="text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= label %></span>
+  <% else %>
+    <%= content %>
+  <% end %>
+</label>

data/templates/components/radio_button/radio_button_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Senren
+  class RadioButtonComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES    = { md: '' }.freeze
+
+    def initialize(name:, value:, checked: false, id: nil, label: nil, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @name = name
+      @value = value
+      @checked = checked
+      @id = id || "#{name.to_s.parameterize}-#{value.to_s.parameterize}"
+      @label = label
+    end
+
+    attr_reader :name, :value, :checked, :id, :label
+  end
+end

data/templates/components/rich_text_editor_lite/rich_text_editor_lite_component.html.erb

@@ -0,0 +1,32 @@
+<%= tag.div(**root_attrs("overflow-hidden rounded-(--senren-radius) border shadow-sm", data: { controller: "senren--rich-text-editor-lite", "senren--rich-text-editor-lite-debug-value": debug? })) do %>
+  <label for="<%= dom_id %>-editor" class="sr-only"><%= label %></label>
+  <textarea hidden name="<%= name %>" data-senren--rich-text-editor-lite-target="input"><%= initial_content %></textarea>
+
+  <% if toolbar? %>
+    <div class="flex flex-wrap items-center gap-1 border-b border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.35)] p-2">
+      <% [
+        ["formatBlock:p", "P", "Paragraph"],
+        ["formatBlock:h1", "H1", "Heading 1"],
+        ["formatBlock:h2", "H2", "Heading 2"],
+        ["formatBlock:h3", "H3", "Heading 3"],
+        ["bold", "B", "Bold"],
+        ["italic", "I", "Italic"],
+        ["createLink", "Link", "Create link"],
+        ["insertUnorderedList", "List", "Bulleted list"],
+        ["insertOrderedList", "1.", "Numbered list"],
+        ["align:left", "Left", "Align left"],
+        ["align:center", "Center", "Align center"],
+        ["align:right", "Right", "Align right"],
+        ["align:justify", "Justify", "Justify"]
+      ].each do |command, label_text, aria_label| %>
+        <button type="button" disabled class="inline-flex h-8 cursor-pointer items-center rounded-(--senren-radius) px-2 text-sm font-medium text-[hsl(var(--senren-foreground))] hover:bg-[hsl(var(--senren-accent))] disabled:cursor-not-allowed disabled:opacity-50 aria-pressed:bg-[hsl(var(--senren-accent))]" data-senren--rich-text-editor-lite-target="button" data-command="<%= command %>" data-action="pointerdown->senren--rich-text-editor-lite#keepSelection mousedown->senren--rich-text-editor-lite#keepSelection touchstart->senren--rich-text-editor-lite#keepSelection click->senren--rich-text-editor-lite#format" aria-label="<%= aria_label %>" aria-pressed="false">
+          <%= label_text %>
+        </button>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div id="<%= dom_id %>-editor" role="textbox" aria-multiline="true" aria-label="<%= label %>" contenteditable="true" data-placeholder="<%= placeholder %>" data-senren--rich-text-editor-lite-target="editor" data-action="click->senren--rich-text-editor-lite#openLink input->senren--rich-text-editor-lite#sync input->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#rememberSelection keyup->senren--rich-text-editor-lite#updateToolbar mouseup->senren--rich-text-editor-lite#rememberSelection mouseup->senren--rich-text-editor-lite#updateToolbar touchend->senren--rich-text-editor-lite#rememberSelection paste->senren--rich-text-editor-lite#syncSoon" class="min-h-40 cursor-text bg-[hsl(var(--senren-background))] p-4 text-left text-sm leading-6 text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-inset focus:ring-[hsl(var(--senren-ring))]">
+    <%= sanitize(initial_content, tags: %w[p br strong b em i a ul ol li h1 h2 h3], attributes: %w[href rel target data-align]) %>
+  </div>
+<% end %>

data/templates/components/rich_text_editor_lite/rich_text_editor_lite_component.rb

@@ -0,0 +1,30 @@
+module Senren
+  class RichTextEditorLiteComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(name: 'content', value: nil, label: 'Content', placeholder: 'Write something...', id: nil,
+                   toolbar: true, debug: ::Rails.env.development?, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @name = name
+      @value = value
+      @label = label
+      @placeholder = placeholder
+      @dom_id = id || "senren-editor-#{SecureRandom.hex(3)}"
+      @toolbar = toolbar
+      @debug = debug
+    end
+
+    attr_reader :name, :value, :label, :placeholder, :dom_id
+
+    def toolbar? = !!@toolbar
+
+    def debug? = !!@debug
+
+    def initial_content
+      value.presence || content.to_s.presence || "<p>#{ERB::Util.html_escape(placeholder)}</p>"
+    end
+  end
+end

data/templates/components/search_input/search_input_component.html.erb

@@ -0,0 +1,14 @@
+<%= tag.div(**root_attrs("relative")) do %>
+  <% if content? %>
+    <%= content %>
+  <% else %>
+    <label class="sr-only" for="<%= name %>"><%= label %></label>
+    <span aria-hidden="true" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[hsl(var(--senren-muted-foreground))]">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
+        <circle cx="11" cy="11" r="7"></circle>
+        <path d="m20 20-3.5-3.5"></path>
+      </svg>
+    </span>
+    <input id="<%= name %>" name="<%= name %>" type="search" value="<%= value %>" placeholder="<%= placeholder %>" aria-label="<%= label %>" class="h-10 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-9 text-sm text-[hsl(var(--senren-foreground))] outline-none placeholder:text-[hsl(var(--senren-muted-foreground))] focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+  <% end %>
+<% end %>

data/templates/components/search_input/search_input_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Senren
+  class SearchInputComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(name: 'q', value: nil, placeholder: 'Search...', label: 'Search', class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @label = label
+    end
+
+    attr_reader :name, :value, :placeholder, :label
+  end
+end

data/templates/components/select/select_component.html.erb

@@ -0,0 +1 @@
+<%= render(Senren::NativeSelectComponent.new(**native_select_args)) { content } %>

data/templates/components/select/select_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Senren
+  # Stimulus-driven styled select. v0.1 ships as a thin wrapper around the
+  # native_select with a Stimulus controller hook for future styling work.
+  class SelectComponent < BaseComponent
+    VARIANTS = NativeSelectComponent::VARIANTS
+    SIZES    = NativeSelectComponent::SIZES
+
+    def initialize(**args)
+      @args = args
+    end
+
+    def native_select_args
+      data = (@args[:data] || {}).merge(controller: 'senren--select')
+      @args.merge(data: data)
+    end
+  end
+end

data/templates/components/separator/separator_component.html.erb

@@ -0,0 +1 @@
+<%= tag.div "", **root_attrs("", role: "separator", "aria-orientation": aria_orientation) %>

data/templates/components/separator/separator_component.rb

@@ -0,0 +1,12 @@
+module Senren
+  class SeparatorComponent < BaseComponent
+    VARIANTS = {
+      horizontal: 'h-px w-full bg-[hsl(var(--senren-border))]',
+      vertical: 'w-px h-full bg-[hsl(var(--senren-border))]'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    def aria_orientation = variant == :vertical ? 'vertical' : 'horizontal'
+  end
+end

data/templates/components/settings_section/settings_section_component.html.erb

@@ -0,0 +1,20 @@
+<%= tag.section(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-5 shadow-sm")) do %>
+  <% if title.present? || description.present? || actions? %>
+    <div class="flex items-start justify-between gap-4 border-b border-[hsl(var(--senren-border))] pb-4">
+      <div class="min-w-0">
+        <% if title.present? %>
+          <h2 class="font-display text-base font-semibold text-[hsl(var(--senren-foreground))]"><%= title %></h2>
+        <% end %>
+        <% if description.present? %>
+          <p class="mt-1 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]"><%= description %></p>
+        <% end %>
+      </div>
+      <% if actions? %>
+        <div class="shrink-0"><%= actions %></div>
+      <% end %>
+    </div>
+    <div class="pt-4"><%= content %></div>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>

data/templates/components/settings_section/settings_section_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Senren
+  class SettingsSectionComponent < BaseComponent
+    renders_one :actions
+
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(title: nil, description: nil, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @title = title
+      @description = description
+    end
+
+    attr_reader :title, :description
+  end
+end

data/templates/components/sheet/sheet_component.html.erb

@@ -0,0 +1,37 @@
+<div data-controller="senren--sheet" data-senren-component="sheet" id="<%= dom_id %>">
+  <% if trigger? %>
+    <span data-action="click->senren--sheet#open" data-senren--sheet-target="trigger">
+      <%= trigger %>
+    </span>
+  <% else %>
+    <button type="button" data-action="click->senren--sheet#open" data-senren--sheet-target="trigger" class="hidden">Open</button>
+  <% end %>
+
+  <div data-senren--sheet-target="overlay" hidden
+       class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"></div>
+
+  <div data-senren--sheet-target="panel" hidden role="dialog" aria-modal="true"
+       data-open="false"
+       class="fixed z-50 bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] shadow-lg transition-transform duration-200 <%= self.class::VARIANTS[variant] %>">
+    <div class="flex h-full flex-col p-6">
+      <% if title? %>
+        <h2 class="text-lg font-semibold"><%= title %></h2>
+      <% end %>
+      <% if description? %>
+        <p class="text-sm text-[hsl(var(--senren-muted-foreground))]"><%= description %></p>
+      <% end %>
+      <div class="mt-4 flex-1 overflow-auto">
+        <%= body || content %>
+      </div>
+      <% if footer? %>
+        <div class="mt-4 border-t border-[hsl(var(--senren-border))] pt-4">
+          <%= footer %>
+        </div>
+      <% end %>
+    </div>
+    <button type="button" data-action="click->senren--sheet#close" aria-label="Close"
+            class="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100">
+      <span aria-hidden="true">×</span>
+    </button>
+  </div>
+</div>

data/templates/components/sheet/sheet_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Senren
+  class SheetComponent < BaseComponent
+    renders_one :trigger
+    renders_one :title
+    renders_one :description
+    renders_one :body
+    renders_one :footer
+
+    VARIANTS = {
+      right: 'right-0 top-0 h-full w-full max-w-md translate-x-full data-[open=true]:translate-x-0',
+      left: 'left-0  top-0 h-full w-full max-w-md -translate-x-full data-[open=true]:translate-x-0',
+      top: 'left-0 top-0 w-full h-1/2 -translate-y-full data-[open=true]:translate-y-0',
+      bottom: 'left-0 bottom-0 w-full h-1/2 translate-y-full data-[open=true]:translate-y-0'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    def initialize(side: :right, id: nil, class_name: nil, **html)
+      super(variant: side, size: :md, class_name: class_name, **html)
+      @dom_id = id || "senren-sheet-#{SecureRandom.hex(3)}"
+    end
+
+    attr_reader :dom_id
+  end
+end

data/templates/components/shortcut_key/shortcut_key_component.html.erb

@@ -0,0 +1,6 @@
+<span <%= tag.attributes(**root_attrs("inline-flex items-center gap-1 text-xs text-[hsl(var(--senren-muted-foreground))]")) %>>
+  <% (keys.presence || [content]).compact.each_with_index do |key, index| %>
+    <% if index.positive? %><span aria-hidden="true">+</span><% end %>
+    <kbd class="rounded border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted))] px-1.5 py-0.5 font-mono text-[11px] text-[hsl(var(--senren-foreground))] shadow-sm"><%= key %></kbd>
+  <% end %>
+</span>

data/templates/components/shortcut_key/shortcut_key_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Senren
+  class ShortcutKeyComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(keys: [], class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @keys = Array(keys)
+    end
+
+    attr_reader :keys
+  end
+end

data/templates/components/sidebar/sidebar_component.html.erb

@@ -0,0 +1,14 @@
+<aside <%= tag.attributes(**root_attrs("flex min-h-80 flex-col rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))] #{self.class::VARIANTS[variant]}", data: { controller: "senren--sidebar" })) %>>
+  <div class="mb-4 flex items-center justify-between gap-2 px-2">
+    <div class="truncate font-display text-sm font-semibold tracking-tight"><%= brand %></div>
+    <button type="button" class="cursor-pointer rounded-md px-2 py-1 text-xs text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))]" data-action="click->senren--sidebar#toggle" aria-label="Toggle sidebar">Toggle</button>
+  </div>
+  <nav aria-label="<%= label %>" class="space-y-1">
+    <% items.each do |item| %>
+      <%= link_to item[:label], item[:href], class: "block truncate rounded-md px-3 py-2 text-sm transition-colors #{item[:active] ? "bg-[hsl(var(--senren-primary))] text-[hsl(var(--senren-primary-foreground))]" : "text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-accent-foreground))]"}" %>
+    <% end %>
+  </nav>
+  <% if content? %>
+    <div class="mt-auto pt-4 text-xs text-[hsl(var(--senren-muted-foreground))]"><%= content %></div>
+  <% end %>
+</aside>

data/templates/components/sidebar/sidebar_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Senren
+  class SidebarComponent < BaseComponent
+    VARIANTS = {
+      default: 'w-64',
+      compact: 'w-20'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(items: [], brand: 'Senren', variant: :default, label: 'Primary', class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @items = normalize_items(items)
+      @brand = brand
+      @label = label
+    end
+
+    attr_reader :items, :brand, :label
+
+    private
+
+    def normalize_items(items)
+      Array(items).map do |item|
+        if item.is_a?(Hash)
+          {
+            label: item[:label] || item['label'],
+            href: item[:href] || item['href'] || '#',
+            active: item[:active] || item['active']
+          }
+        else
+          label, href = item
+          { label: label, href: href || '#', active: false }
+        end
+      end
+    end
+  end
+end

data/templates/components/skeleton/skeleton_component.html.erb

@@ -0,0 +1 @@
+<%= tag.div "", **root_attrs("animate-pulse bg-[hsl(var(--senren-muted))]", "aria-hidden": "true") %>

data/templates/components/skeleton/skeleton_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Senren
+  class SkeletonComponent < BaseComponent
+    VARIANTS = {
+      default: 'rounded-(--senren-radius)',
+      circle: 'rounded-full',
+      text: 'rounded-md h-4'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+  end
+end

data/templates/components/stat_card/stat_card_component.html.erb

@@ -0,0 +1,20 @@
+<%= tag.div(**root_attrs("rounded-(--senren-radius) border bg-[hsl(var(--senren-card))] p-5 shadow-sm")) do %>
+  <% if content? && label.blank? && value.blank? %>
+    <%= content %>
+  <% else %>
+    <% if label.present? %>
+      <p class="text-xs font-semibold uppercase tracking-wide text-[hsl(var(--senren-muted-foreground))]"><%= label %></p>
+    <% end %>
+    <% if value.present? %>
+      <p class="mt-2 font-display text-3xl font-semibold tracking-tight text-[hsl(var(--senren-foreground))]"><%= value %></p>
+    <% end %>
+    <div class="mt-3 flex items-center justify-between gap-3 text-sm">
+      <% if change.present? %>
+        <span class="font-medium <%= accent_class %>"><%= change %></span>
+      <% end %>
+      <% if helper_text.present? %>
+        <span class="text-[hsl(var(--senren-muted-foreground))]"><%= helper_text %></span>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/templates/components/stat_card/stat_card_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Senren
+  class StatCardComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))]',
+      success: 'border-[hsl(var(--senren-success)/0.4)]',
+      warning: 'border-[hsl(var(--senren-warning)/0.5)]',
+      destructive: 'border-[hsl(var(--senren-destructive)/0.42)]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(label: nil, value: nil, change: nil, helper_text: nil, variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @label = label
+      @value = value
+      @change = change
+      @helper_text = helper_text
+    end
+
+    attr_reader :label, :value, :change, :helper_text
+
+    def accent_class
+      {
+        success: 'text-[hsl(var(--senren-success))]',
+        warning: 'text-[hsl(var(--senren-warning))]',
+        destructive: 'text-[hsl(var(--senren-destructive))]'
+      }.fetch(variant, 'text-[hsl(var(--senren-muted-foreground))]')
+    end
+  end
+end

data/templates/components/switch/switch_component.html.erb

@@ -0,0 +1,11 @@
+<label class="inline-flex items-center gap-3 cursor-pointer">
+  <span class="relative inline-flex h-6 w-11 items-center rounded-full bg-[hsl(var(--senren-muted))] has-[:checked]:bg-[hsl(var(--senren-primary))] transition-colors">
+    <input type="checkbox" role="switch" id="<%= id %>" name="<%= name %>" value="<%= value %>" <%= "checked" if checked %> class="peer sr-only">
+    <span aria-hidden="true" class="absolute left-0.5 top-0.5 inline-block h-5 w-5 transform rounded-full bg-[hsl(var(--senren-background))] transition-transform peer-checked:translate-x-5"></span>
+  </span>
+  <% if label %>
+    <span class="text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= label %></span>
+  <% else %>
+    <%= content %>
+  <% end %>
+</label>

data/templates/components/switch/switch_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Senren
+  class SwitchComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES    = { md: '' }.freeze
+
+    def initialize(name:, checked: false, value: '1', id: nil, label: nil, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @name = name
+      @checked = checked
+      @value = value
+      @id = id || name.to_s.parameterize
+      @label = label
+    end
+
+    attr_reader :name, :checked, :value, :id, :label
+  end
+end

data/templates/components/table/table_component.html.erb

@@ -0,0 +1,26 @@
+<div <%= tag.attributes(**root_attrs("w-full overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))]")) %>>
+  <table class="w-full border-collapse text-left text-sm <%= self.class::VARIANTS[variant] %>">
+    <% if caption.present? %>
+      <caption class="sr-only"><%= caption %></caption>
+    <% end %>
+    <thead class="bg-[hsl(var(--senren-muted)/0.6)] text-[hsl(var(--senren-muted-foreground))]">
+      <tr>
+        <% columns.each do |column| %>
+          <th scope="col" class="px-4 py-3 font-medium"><%= column_label(column) %></th>
+        <% end %>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))]">
+      <% rows.each do |row| %>
+        <tr class="transition-colors hover:bg-[hsl(var(--senren-muted)/0.4)]">
+          <% columns.each do |column| %>
+            <td class="px-4 py-3"><%= cell_value(row, column) %></td>
+          <% end %>
+        </tr>
+      <% end %>
+      <% if rows.empty? && content? %>
+        <tr><td class="px-4 py-6" colspan="<%= columns.size.nonzero? || 1 %>"><%= content %></td></tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/templates/components/table/table_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Senren
+  class TableComponent < BaseComponent
+    VARIANTS = {
+      default: '',
+      compact: 'text-xs'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(columns: [], rows: [], caption: nil, variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @columns = Array(columns)
+      @rows = Array(rows)
+      @caption = caption
+    end
+
+    attr_reader :columns, :rows, :caption
+
+    def cell_value(row, column)
+      key = column_key(column)
+      row.is_a?(Hash) ? (row[key] || row[key.to_s]) : row[key.to_i]
+    end
+
+    def column_label(column)
+      column.is_a?(Hash) ? (column[:label] || column['label']) : column.to_s.titleize
+    end
+
+    private
+
+    def column_key(column)
+      column.is_a?(Hash) ? (column[:key] || column['key']) : column
+    end
+  end
+end

data/templates/components/tabs/tabs_component.html.erb

@@ -0,0 +1,18 @@
+<div <%= tag.attributes(**root_attrs("w-full", data: { controller: "senren--tabs" })) %>>
+  <div role="tablist" aria-label="<%= label %>" class="<%= self.class::VARIANTS[variant] %> flex flex-wrap items-center gap-1">
+    <% items.each do |item| %>
+      <% selected = active_item?(item) %>
+      <button type="button" role="tab" id="<%= item[:id] %>-tab" aria-selected="<%= selected %>" aria-controls="<%= item[:id] %>-panel" tabindex="<%= selected ? 0 : -1 %>" data-senren--tabs-target="tab" data-panel-id="<%= item[:id] %>" data-action="click->senren--tabs#select keydown->senren--tabs#onKey" class="cursor-pointer rounded-[calc(var(--senren-radius)-2px)] px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] <%= selected ? "bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] shadow-sm" : "text-[hsl(var(--senren-muted-foreground))] hover:text-[hsl(var(--senren-foreground))]" %>">
+        <%= item[:label] %>
+      </button>
+    <% end %>
+  </div>
+  <div class="mt-4">
+    <% items.each do |item| %>
+      <% selected = active_item?(item) %>
+      <section id="<%= item[:id] %>-panel" role="tabpanel" aria-labelledby="<%= item[:id] %>-tab" data-senren--tabs-target="panel" data-panel-id="<%= item[:id] %>" <%= "hidden" unless selected %> class="rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-4 text-sm text-[hsl(var(--senren-card-foreground))]">
+        <%= item[:content].presence || content %>
+      </section>
+    <% end %>
+  </div>
+</div>

data/templates/components/tabs/tabs_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Senren
+  class TabsComponent < BaseComponent
+    VARIANTS = {
+      default: 'rounded-(--senren-radius) bg-[hsl(var(--senren-muted))] p-1',
+      underline: 'border-b border-[hsl(var(--senren-border))]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(items: [], variant: :default, active: nil, label: 'Tabs', class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @items = normalize_items(items)
+      @active = active&.to_s || @items.first&.fetch(:id, nil)
+      @label = label
+    end
+
+    attr_reader :items, :active, :label
+
+    def active_item?(item)
+      item[:id].to_s == active.to_s
+    end
+
+    private
+
+    def normalize_items(items)
+      Array(items).map.with_index do |item, index|
+        source = item.is_a?(Hash) ? item : { label: item.to_s }
+        label = source[:label] || source['label'] || "Tab #{index + 1}"
+        id = (source[:id] || source['id'] || label.to_s.parameterize).to_s
+        { id: id, label: label, content: source[:content] || source['content'] }
+      end
+    end
+  end
+end