senren-ui 0.1.0

data/templates/components/button/button_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Senren
+  class ButtonComponent < BaseComponent
+    VARIANTS = {
+      default: 'bg-[hsl(var(--senren-secondary))] text-[hsl(var(--senren-secondary-foreground))] hover:opacity-90',
+      primary: 'bg-[hsl(var(--senren-primary))] text-[hsl(var(--senren-primary-foreground))] hover:opacity-90',
+      secondary: 'bg-[hsl(var(--senren-secondary))] text-[hsl(var(--senren-secondary-foreground))] hover:opacity-90',
+      destructive: 'bg-[hsl(var(--senren-destructive))] text-[hsl(var(--senren-destructive-foreground))] hover:opacity-90',
+      ghost: 'bg-transparent text-[hsl(var(--senren-foreground))] hover:bg-[hsl(var(--senren-accent))]',
+      link: 'bg-transparent text-[hsl(var(--senren-primary))] underline-offset-4 hover:underline'
+    }.freeze
+
+    SIZES = {
+      sm: 'h-8  px-3 text-sm',
+      md: 'h-10 px-4 text-sm',
+      lg: 'h-12 px-6 text-base'
+    }.freeze
+
+    def initialize(variant: :default, size: :md, type: 'button', as: :button, href: nil, class_name: nil, **html)
+      super(variant: variant, size: size, class_name: class_name, **html)
+      @type = type
+      @as   = href ? :a : as
+      @href = href
+    end
+
+    attr_reader :type, :as, :href
+  end
+end

data/templates/components/calendar/calendar_component.html.erb

@@ -0,0 +1,21 @@
+<div <%= tag.attributes(**root_attrs("w-72 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 text-[hsl(var(--senren-card-foreground))]", data: { controller: "senren--calendar" })) %>>
+  <% if name.present? %>
+    <input type="hidden" name="<%= name %>" value="<%= selected&.iso8601 %>" data-senren--calendar-target="value">
+  <% end %>
+  <div class="mb-3 flex items-center justify-between">
+    <p class="font-display text-sm font-semibold tracking-tight"><%= title %></p>
+  </div>
+  <div class="grid grid-cols-7 gap-1 text-center text-xs text-[hsl(var(--senren-muted-foreground))]">
+    <% weekday_labels.each do |day| %>
+      <div class="py-1"><%= day %></div>
+    <% end %>
+  </div>
+  <div role="grid" class="mt-1 grid grid-cols-7 gap-1">
+    <% calendar_days.each do |day| %>
+      <% outside = day.month != date.month %>
+      <button type="button" role="gridcell" data-senren--calendar-target="day" data-date="<%= day.iso8601 %>" data-action="click->senren--calendar#select" class="h-9 cursor-pointer rounded-md text-sm transition-colors <%= selected?(day) ? "bg-[hsl(var(--senren-primary))] text-[hsl(var(--senren-primary-foreground))]" : "hover:bg-[hsl(var(--senren-accent))] hover:text-[hsl(var(--senren-accent-foreground))]" %> <%= outside ? "text-[hsl(var(--senren-muted-foreground)/0.45)]" : "text-[hsl(var(--senren-foreground))]" %>">
+        <%= day.day %>
+      </button>
+    <% end %>
+  </div>
+</div>

data/templates/components/calendar/calendar_component.rb

@@ -0,0 +1,30 @@
+module Senren
+  class CalendarComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(date: Date.current, selected: nil, name: nil, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @date = date.to_date
+      @selected = selected&.to_date
+      @name = name
+    end
+
+    attr_reader :date, :selected, :name
+
+    def month_start = date.beginning_of_month
+    def month_end = date.end_of_month
+    def title = date.strftime('%B %Y')
+    def weekday_labels = Date::ABBR_DAYNAMES
+
+    def calendar_days
+      start_day = month_start.beginning_of_week(:sunday)
+      end_day = month_end.end_of_week(:sunday)
+      (start_day..end_day).to_a
+    end
+
+    def selected?(day)
+      selected && day == selected
+    end
+  end
+end

data/templates/components/card/card_component.html.erb

@@ -0,0 +1,13 @@
+<%= tag.div(**root_attrs("rounded-(--senren-radius) border shadow-sm")) do %>
+  <% if header? %>
+    <div class="flex flex-col space-y-1.5 p-6 border-b border-[hsl(var(--senren-border))]"><%= header %></div>
+  <% end %>
+  <% if body? %>
+    <div class="p-6"><%= body %></div>
+  <% else %>
+    <div class="p-6"><%= content %></div>
+  <% end %>
+  <% if footer? %>
+    <div class="flex items-center p-6 pt-0 border-t border-[hsl(var(--senren-border))]"><%= footer %></div>
+  <% end %>
+<% end %>

data/templates/components/card/card_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Senren
+  class CardComponent < BaseComponent
+    renders_one :header
+    renders_one :body
+    renders_one :footer
+
+    VARIANTS = {
+      default: 'bg-[hsl(var(--senren-card))] text-[hsl(var(--senren-card-foreground))] border-[hsl(var(--senren-border))]',
+      muted: 'bg-[hsl(var(--senren-muted))] text-[hsl(var(--senren-muted-foreground))] border-transparent',
+      outline: 'bg-transparent text-[hsl(var(--senren-foreground))] border-[hsl(var(--senren-border))]'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+  end
+end

data/templates/components/carousel/carousel_component.html.erb

@@ -0,0 +1,68 @@
+<%= tag.section(**root_attrs("relative overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] text-[hsl(var(--senren-card-foreground))] shadow-sm", data: { controller: "senren--carousel" }, role: "region", "aria-roledescription": "carousel", "aria-label": label)) do %>
+  <% if content? && slides.empty? %>
+    <%= content %>
+  <% else %>
+    <div class="relative" data-action="keydown->senren--carousel#onKey" tabindex="0">
+      <% slides.each_with_index do |slide, index| %>
+        <article data-senren--carousel-target="slide" data-index="<%= index %>" class="<%= index.zero? ? '' : 'hidden' %>">
+          <% if slide[:image_url].present? %>
+            <img src="<%= slide[:image_url] %>" alt="<%= slide[:alt] || slide[:title] %>" class="aspect-video w-full object-cover">
+          <% else %>
+            <div class="relative flex aspect-video items-end overflow-hidden bg-[hsl(var(--senren-muted)/0.45)] p-6">
+              <svg aria-hidden="true" viewBox="0 0 960 540" preserveAspectRatio="none" class="absolute inset-0 h-full w-full">
+                <rect width="960" height="540" fill="#2397cf" />
+                <circle cx="486" cy="75" r="55" fill="#fffbea" />
+                <path d="M0 181 C72 158 111 165 156 124 C206 82 243 133 291 113 C340 92 383 159 437 127 C486 98 521 145 565 120 C611 94 649 151 704 92 C755 38 798 94 830 134 C880 127 912 153 960 137 L960 315 L0 315 Z" fill="#f4a6c8" />
+                <path d="M0 255 C72 214 124 230 193 205 C251 184 280 227 332 199 C398 165 449 215 520 190 C608 158 642 232 728 197 C817 159 867 224 960 178 L960 540 L0 540 Z" fill="#8fd04e" />
+                <path d="M118 313 C213 276 366 272 538 294 C691 314 792 288 883 318 C764 384 546 401 348 380 C235 368 160 350 118 313 Z" fill="#b9edf5" />
+                <path d="M0 350 C73 321 145 352 217 318 C287 285 336 340 413 324 C474 311 520 341 570 319 C661 279 737 343 805 313 C864 287 912 321 960 301 L960 540 L0 540 Z" fill="#79c945" />
+                <path d="M0 427 C61 391 102 415 150 383 C187 430 247 424 287 470 C216 500 102 514 0 490 Z" fill="#b59ce9" />
+                <path d="M657 394 C733 356 804 380 862 342 C901 403 934 398 960 421 L960 540 L676 540 C622 491 615 428 657 394 Z" fill="#b59ce9" opacity=".86" />
+                <path d="M0 456 C57 434 105 459 163 428 C186 482 261 469 298 517 C218 539 95 552 0 527 Z" fill="#f29bc7" opacity=".86" />
+                <path d="M752 423 C812 395 879 415 960 381 L960 540 L725 540 C706 499 715 449 752 423 Z" fill="#129b5a" opacity=".92" />
+                <g fill="#0a7f77" opacity=".48">
+                  <circle cx="44" cy="93" r="1.2" /><circle cx="86" cy="143" r="1.4" /><circle cx="140" cy="238" r="1.1" /><circle cx="212" cy="168" r="1.5" />
+                  <circle cx="318" cy="74" r="1.1" /><circle cx="384" cy="218" r="1.4" /><circle cx="470" cy="158" r="1.2" /><circle cx="548" cy="251" r="1.5" />
+                  <circle cx="635" cy="118" r="1.1" /><circle cx="716" cy="230" r="1.4" /><circle cx="803" cy="152" r="1.2" /><circle cx="899" cy="260" r="1.5" />
+                  <circle cx="110" cy="438" r="1.4" /><circle cx="248" cy="468" r="1.2" /><circle cx="406" cy="423" r="1.5" /><circle cx="592" cy="460" r="1.2" />
+                  <circle cx="742" cy="445" r="1.5" /><circle cx="884" cy="420" r="1.2" />
+                </g>
+              </svg>
+              <div class="relative z-10 max-w-md rounded-(--senren-radius) bg-[hsl(var(--senren-background)/0.78)] p-4 shadow-sm ring-1 ring-[hsl(var(--senren-border)/0.7)] backdrop-blur">
+                <% if slide[:badge].present? %>
+                  <span class="mb-3 inline-flex rounded-full bg-[hsl(var(--senren-accent))] px-2.5 py-1 text-xs font-semibold text-[hsl(var(--senren-accent-foreground))]"><%= slide[:badge] %></span>
+                <% end %>
+                <h3 class="font-display text-2xl font-semibold tracking-tight text-[hsl(var(--senren-foreground))]"><%= slide[:title] %></h3>
+                <% if slide[:description].present? %>
+                  <p class="mt-2 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]"><%= slide[:description] %></p>
+                <% end %>
+              </div>
+            </div>
+          <% end %>
+        </article>
+      <% end %>
+    </div>
+
+    <% if slides.size > 1 %>
+      <div class="pointer-events-none absolute inset-x-0 top-1/2 z-10 flex -translate-y-1/2 justify-between px-3">
+        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#previous" aria-label="Previous slide">
+          <svg aria-hidden="true" viewBox="0 0 20 20" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12.5 4.5 7 10l5.5 5.5" />
+          </svg>
+        </button>
+        <button type="button" class="pointer-events-auto inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background)/0.88)] text-[hsl(var(--senren-foreground))] shadow-sm transition hover:-translate-y-0.5 hover:bg-[hsl(var(--senren-accent))] hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]" data-action="click->senren--carousel#next" aria-label="Next slide">
+          <svg aria-hidden="true" viewBox="0 0 20 20" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M7.5 4.5 13 10l-5.5 5.5" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="absolute bottom-3 left-0 right-0 z-10 flex justify-center gap-1.5">
+        <% slides.each_with_index do |_slide, index| %>
+          <button type="button" class="h-2.5 w-2.5 cursor-pointer rounded-full bg-[hsl(var(--senren-background)/0.72)] ring-1 ring-[hsl(var(--senren-border))] transition-all aria-current:w-6 aria-current:bg-[hsl(var(--senren-primary))]" data-senren--carousel-target="dot" data-index="<%= index %>" data-action="click->senren--carousel#goTo" aria-label="Go to slide <%= index + 1 %>" aria-current="<%= index.zero? ? 'true' : 'false' %>"></button>
+        <% end %>
+      </div>
+    <% end %>
+    <p class="sr-only" aria-live="polite" data-senren--carousel-target="status">Slide 1 of <%= slides.size %></p>
+  <% end %>
+<% end %>

data/templates/components/carousel/carousel_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Senren
+  class CarouselComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(slides: [], label: 'Carousel', class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @slides = normalize_slides(slides)
+      @label = label
+    end
+
+    attr_reader :slides, :label
+
+    private
+
+    def normalize_slides(slides)
+      Array(slides).map do |slide|
+        if slide.is_a?(Hash)
+          {
+            title: slide[:title] || slide['title'],
+            description: slide[:description] || slide['description'],
+            image_url: slide[:image_url] || slide['image_url'],
+            alt: slide[:alt] || slide['alt'],
+            badge: slide[:badge] || slide['badge']
+          }
+        else
+          { title: slide.to_s, description: nil, image_url: nil, alt: nil, badge: nil }
+        end
+      end
+    end
+  end
+end

data/templates/components/checkbox/checkbox_component.html.erb

@@ -0,0 +1,8 @@
+<label class="inline-flex items-center gap-2 cursor-pointer">
+  <%= tag.input(**root_attrs("peer h-4 w-4 rounded 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))] disabled:cursor-not-allowed disabled:opacity-50", type: "checkbox", 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/checkbox/checkbox_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Senren
+  class CheckboxComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES    = { md: '' }.freeze
+
+    def initialize(name:, value: '1', 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}-#{SecureRandom.hex(2)}"
+      @label = label
+    end
+
+    attr_reader :name, :value, :checked, :id, :label
+  end
+end

data/templates/components/checkbox_group/checkbox_group_component.html.erb

@@ -0,0 +1,10 @@
+<%= tag.fieldset(**root_attrs("space-y-2")) do %>
+  <% if legend? %>
+    <legend class="text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= legend %></legend>
+  <% end %>
+  <div class="flex flex-col gap-2">
+    <% options.each do |opt| %>
+      <%= opt %>
+    <% end %>
+  </div>
+<% end %>

data/templates/components/checkbox_group/checkbox_group_component.rb

@@ -0,0 +1,30 @@
+module Senren
+  class CheckboxGroupComponent < BaseComponent
+    renders_one  :legend
+    renders_many :options, 'OptionTag'
+
+    VARIANTS = { default: '' }.freeze
+    SIZES    = { md: '' }.freeze
+
+    class OptionTag < ViewComponent::Base
+      def initialize(name:, value:, label:, checked: false)
+        @name = name
+        @value = value
+        @label = label
+        @checked = checked
+      end
+
+      def call
+        content_tag(:label, class: 'inline-flex items-center gap-2 cursor-pointer') do
+          tag.input(type: 'checkbox', name: name, value: @value, checked: @checked,
+                    class: 'h-4 w-4 rounded 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))]') +
+            content_tag(:span, @label, class: 'text-sm text-[hsl(var(--senren-foreground))]')
+        end
+      end
+
+      private
+
+      attr_reader :name
+    end
+  end
+end

data/templates/components/clipboard/clipboard_component.html.erb

@@ -0,0 +1,7 @@
+<div <%= tag.attributes(**root_attrs("inline-flex items-center gap-2", data: { controller: "senren--clipboard", "senren--clipboard-copied-label-value": copied_label })) %>>
+  <input type="text" readonly value="<%= value %>" data-senren--clipboard-target="source" class="h-10 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.4)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))]">
+  <button type="button" data-senren--clipboard-target="button" data-action="click->senren--clipboard#copy" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-3 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90">
+    <%= label %>
+  </button>
+  <span class="sr-only" aria-live="polite" data-senren--clipboard-target="status"></span>
+</div>

data/templates/components/clipboard/clipboard_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Senren
+  class ClipboardComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(value:, label: 'Copy', copied_label: 'Copied', class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @label = label
+      @value = value
+      @copied_label = copied_label
+    end
+
+    attr_reader :label, :value, :copied_label
+  end
+end

data/templates/components/codeblock/codeblock_component.html.erb

@@ -0,0 +1,11 @@
+<%= tag.figure(**root_attrs("overflow-hidden rounded-(--senren-radius) border")) do %>
+  <% if filename.present? || language_label.present? || caption.present? %>
+    <figcaption class="flex items-center justify-between gap-3 border-b border-[hsl(var(--senren-border))] px-4 py-2 text-xs text-[hsl(var(--senren-muted-foreground))]">
+      <span class="min-w-0 truncate font-medium text-[hsl(var(--senren-foreground))]"><%= filename.presence || caption %></span>
+      <% if language_label.present? %>
+        <span class="shrink-0 rounded bg-[hsl(var(--senren-muted))] px-1.5 py-0.5 font-mono uppercase tracking-wide"><%= language_label %></span>
+      <% end %>
+    </figcaption>
+  <% end %>
+  <pre class="overflow-x-auto p-4 text-left text-sm leading-6 text-[hsl(var(--senren-foreground))] <%= wrap? ? 'whitespace-pre-wrap break-words' : '' %>"><code class="font-mono"><%= code_text %></code></pre>
+<% end %>

data/templates/components/codeblock/codeblock_component.rb

@@ -0,0 +1,31 @@
+module Senren
+  class CodeblockComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.35)]',
+      elevated: 'border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] shadow-sm'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(source: nil, language: nil, filename: nil, caption: nil, wrap: false, variant: :default,
+                   class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @source = source
+      @language = language
+      @filename = filename
+      @caption = caption
+      @wrap = wrap
+    end
+
+    attr_reader :source, :language, :filename, :caption
+
+    def wrap? = !!@wrap
+
+    def code_text
+      source.presence || content.to_s
+    end
+
+    def language_label
+      language.to_s.presence
+    end
+  end
+end

data/templates/components/collapsible/collapsible_component.html.erb

@@ -0,0 +1,9 @@
+<div <%= tag.attributes(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))]", data: { controller: "senren--collapsible" })) %>>
+  <button type="button" class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium text-[hsl(var(--senren-card-foreground))]" aria-expanded="<%= open? %>" data-senren--collapsible-target="trigger" data-action="click->senren--collapsible#toggle">
+    <span><%= trigger || title %></span>
+    <span aria-hidden="true" class="text-[hsl(var(--senren-muted-foreground))]">+</span>
+  </button>
+  <div data-senren--collapsible-target="panel" <%= "hidden" unless open? %> class="border-t border-[hsl(var(--senren-border))] px-4 py-3 text-sm text-[hsl(var(--senren-muted-foreground))]">
+    <%= body || content %>
+  </div>
+</div>

data/templates/components/collapsible/collapsible_component.rb

@@ -0,0 +1,19 @@
+module Senren
+  class CollapsibleComponent < BaseComponent
+    renders_one :trigger
+    renders_one :body
+
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(title: 'Details', open: false, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @title = title
+      @open = open
+    end
+
+    attr_reader :title
+
+    def open? = @open
+  end
+end

data/templates/components/combobox/combobox_component.html.erb

@@ -0,0 +1,19 @@
+<div <%= tag.attributes(**root_attrs("relative w-full", data: { controller: "senren--combobox" })) %>>
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-senren--combobox-target="value">
+  <button type="button" class="group flex h-10 w-full cursor-pointer items-center justify-between rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] px-3 text-left text-sm text-[hsl(var(--senren-foreground))] transition-colors hover:bg-[hsl(var(--senren-muted)/0.35)] <%= self.class::VARIANTS[variant] %>" aria-haspopup="listbox" aria-expanded="false" data-state="closed" data-senren--combobox-target="button" data-action="click->senren--combobox#toggle">
+    <span data-senren--combobox-target="label"><%= selected_label || placeholder %></span>
+    <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 shrink-0 text-[hsl(var(--senren-muted-foreground))] transition-transform duration-150 data-[state=open]:rotate-180" data-state="closed" data-senren--combobox-target="chevron">
+      <path d="m5 8 5 5 5-5"></path>
+    </svg>
+  </button>
+  <div data-senren--combobox-target="panel" hidden class="absolute z-50 mt-2 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] p-2 shadow-md">
+    <input type="text" placeholder="<%= placeholder %>" data-senren--combobox-target="search" data-action="input->senren--combobox#filter keydown->senren--combobox#onKey" class="mb-2 h-9 w-full rounded-md border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-2 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+    <div role="listbox" class="max-h-56 overflow-auto">
+      <% options.each do |option| %>
+        <button type="button" role="option" data-senren--combobox-target="option" data-value="<%= option[:value] %>" data-label="<%= option[:label] %>" data-action="click->senren--combobox#choose" class="block w-full cursor-pointer rounded-md px-2 py-2 text-left text-sm text-[hsl(var(--senren-popover-foreground))] hover:bg-[hsl(var(--senren-accent))]">
+          <%= option[:label] %>
+        </button>
+      <% end %>
+    </div>
+  </div>
+</div>

data/templates/components/combobox/combobox_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Senren
+  class ComboboxComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))]',
+      error: 'border-[hsl(var(--senren-destructive))]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(name:, options:, value: nil, placeholder: 'Search...', variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @name = name
+      @options = normalize_options(options)
+      @value = value
+      @placeholder = placeholder
+    end
+
+    attr_reader :name, :options, :value, :placeholder
+
+    def selected_label
+      options.find { |option| option[:value].to_s == value.to_s }&.dig(:label)
+    end
+
+    private
+
+    def normalize_options(options)
+      Array(options).map do |option|
+        if option.is_a?(Hash)
+          { value: option[:value] || option['value'], label: option[:label] || option['label'] }
+        else
+          value, label = option
+          { value: value, label: label || value }
+        end
+      end
+    end
+  end
+end

data/templates/components/command/command_component.html.erb

@@ -0,0 +1,22 @@
+<%= tag.div(**root_attrs("overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] shadow-sm", data: { controller: "senren--command" })) do %>
+  <% if content? && items.empty? %>
+    <%= content %>
+  <% else %>
+    <label for="<%= dom_id %>-input" class="sr-only"><%= label %></label>
+    <div class="border-b border-[hsl(var(--senren-border))] p-2">
+      <input id="<%= dom_id %>-input" type="search" autocomplete="off" placeholder="<%= placeholder %>" aria-label="<%= label %>" aria-controls="<%= dom_id %>-list" aria-activedescendant="" data-senren--command-target="input" data-action="input->senren--command#filter keydown->senren--command#onKey" class="h-10 w-full rounded-(--senren-radius) bg-[hsl(var(--senren-background))] px-3 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))]">
+    </div>
+    <div id="<%= dom_id %>-list" role="listbox" aria-label="<%= label %>" data-senren--command-target="list" class="max-h-72 overflow-y-auto p-1.5">
+      <% items.each_with_index do |item, index| %>
+        <% tag_name = item[:href].present? ? :a : :button %>
+        <%= tag.public_send(tag_name, href: item[:href], type: (tag_name == :button ? "button" : nil), id: item[:id], role: "option", data: { "senren--command-target": "option", action: "click->senren--command#choose", label: item[:keywords] }, class: "block w-full cursor-pointer rounded-(--senren-radius) px-3 py-2 text-left text-sm transition-colors hover:bg-[hsl(var(--senren-accent))] aria-selected:bg-[hsl(var(--senren-accent))] aria-selected:text-[hsl(var(--senren-accent-foreground))]", "aria-selected": (index.zero? ? "true" : "false")) do %>
+          <span class="block font-medium"><%= item[:label] %></span>
+          <% if item[:description].present? %>
+            <span class="mt-0.5 block text-xs text-[hsl(var(--senren-muted-foreground))]"><%= item[:description] %></span>
+          <% end %>
+        <% end %>
+      <% end %>
+      <div hidden data-senren--command-target="empty" class="px-3 py-8 text-center text-sm text-[hsl(var(--senren-muted-foreground))]"><%= empty_text %></div>
+    </div>
+  <% end %>
+<% end %>

data/templates/components/command/command_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Senren
+  class CommandComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(items: [], placeholder: 'Type a command...', label: 'Command menu', empty_text: 'No results found.',
+                   id: nil, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @placeholder = placeholder
+      @label = label
+      @empty_text = empty_text
+      @dom_id = id || "senren-command-#{SecureRandom.hex(3)}"
+      @items = normalize_items(items)
+    end
+
+    attr_reader :items, :placeholder, :label, :empty_text, :dom_id
+
+    private
+
+    def normalize_items(items)
+      Array(items).map.with_index do |item, index|
+        data = item.is_a?(Hash) ? item : { label: item.to_s }
+        label = data[:label] || data['label']
+        description = data[:description] || data['description']
+        keywords = data[:keywords] || data['keywords']
+        {
+          id: data[:id] || data['id'] || "#{dom_id}-option-#{index}",
+          label: label,
+          description: description,
+          href: data[:href] || data['href'],
+          keywords: [label, description, keywords].flatten.compact.join(' ')
+        }
+      end
+    end
+  end
+end

data/templates/components/context_menu/context_menu_component.html.erb

@@ -0,0 +1,11 @@
+<div data-controller="senren--context-menu" class="relative" data-senren-component="context_menu">
+  <div data-senren--context-menu-target="trigger" data-action="contextmenu->senren--context-menu#open">
+    <%= trigger %>
+  </div>
+  <div data-senren--context-menu-target="menu" role="menu" hidden
+       class="absolute z-50 w-56 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-1 shadow-md">
+    <% items.each do |it| %>
+      <%= it %>
+    <% end %>
+  </div>
+</div>

data/templates/components/context_menu/context_menu_component.rb

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

data/templates/components/data_table/data_table_component.html.erb

@@ -0,0 +1,50 @@
+<%= tag.div(**root_attrs("overflow-hidden rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] shadow-sm", data: { controller: "senren--data-table" })) do %>
+  <% if toolbar? %>
+    <div class="border-b border-[hsl(var(--senren-border))] p-3"><%= toolbar %></div>
+  <% end %>
+
+  <% if content? && columns.empty? %>
+    <div class="p-3"><%= content %></div>
+  <% else %>
+    <div class="overflow-x-auto">
+      <table class="w-full border-collapse text-left text-sm">
+        <% 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">
+                <% if sortable? %>
+                  <button type="button" class="inline-flex cursor-pointer items-center gap-1 rounded-sm hover:text-[hsl(var(--senren-foreground))]" data-action="click->senren--data-table#sort" data-sort-key="<%= column_sort_key(column) %>">
+                    <%= column_label(column) %>
+                    <span aria-hidden="true">Sort</span>
+                  </button>
+                <% else %>
+                  <%= column_label(column) %>
+                <% end %>
+              </th>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-[hsl(var(--senren-border))] text-[hsl(var(--senren-foreground))]" data-senren--data-table-target="body">
+          <% rows.each do |row| %>
+            <tr class="transition-colors hover:bg-[hsl(var(--senren-muted)/0.35)]" data-senren--data-table-target="row">
+              <% columns.each do |column| %>
+                <% value = cell_value(row, column) %>
+                <td class="px-4 py-3" data-sort-key="<%= column_sort_key(column) %>" data-sort-value="<%= value %>"><%= value %></td>
+              <% end %>
+            </tr>
+          <% end %>
+          <% if rows.empty? %>
+            <tr><td class="px-4 py-8 text-center text-[hsl(var(--senren-muted-foreground))]" colspan="<%= columns.size.nonzero? || 1 %>"><%= empty_text %></td></tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% end %>
+
+  <% if footer? %>
+    <div class="border-t border-[hsl(var(--senren-border))] p-3"><%= footer %></div>
+  <% end %>
+<% end %>