senren-ui 0.1.0

data/templates/components/data_table/data_table_component.rb

@@ -0,0 +1,42 @@
+module Senren
+  class DataTableComponent < BaseComponent
+    renders_one :toolbar
+    renders_one :footer
+
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(columns: [], rows: [], caption: nil, empty_text: 'No records found.', sortable: true,
+                   variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @columns = Array(columns)
+      @rows = Array(rows)
+      @caption = caption
+      @empty_text = empty_text
+      @sortable = sortable
+    end
+
+    attr_reader :columns, :rows, :caption, :empty_text
+
+    def sortable? = !!@sortable
+
+    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.tr('_', ' ').capitalize
+    end
+
+    def column_sort_key(column)
+      column_key(column).to_s
+    end
+
+    private
+
+    def column_key(column)
+      column.is_a?(Hash) ? (column[:key] || column['key']) : column
+    end
+  end
+end

data/templates/components/date_picker/date_picker_component.html.erb

@@ -0,0 +1,5 @@
+<div <%= tag.attributes(**root_attrs("flex w-full items-center gap-2", data: { controller: "senren--date-picker" })) %>>
+  <input type="date" id="<%= id %>" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" data-senren--date-picker-target="input" class="hover:cursor-pointerh-10 w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] px-3 text-sm text-[hsl(var(--senren-foreground))] outline-none transition-colors focus:ring-2 focus:ring-[hsl(var(--senren-ring))] <%= self.class::VARIANTS[variant] %>">
+  <button type="button" data-action="click->senren--date-picker#today" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] px-3 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]">Today</button>
+  <button type="button" data-action="click->senren--date-picker#clear" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) px-3 text-sm text-[hsl(var(--senren-muted-foreground))] hover:bg-[hsl(var(--senren-accent))]">Clear</button>
+</div>

data/templates/components/date_picker/date_picker_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Senren
+  class DatePickerComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-input))]',
+      error: 'border-[hsl(var(--senren-destructive))]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(name:, value: nil, id: nil, placeholder: 'Select date', variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @name = name
+      @value = value
+      @id = id || name
+      @placeholder = placeholder
+    end
+
+    attr_reader :name, :value, :id, :placeholder
+  end
+end

data/templates/components/dialog/dialog_component.html.erb

@@ -0,0 +1,38 @@
+<div data-controller="senren--dialog" data-senren-component="dialog" data-senren--dialog-open-value="<%= open %>" id="<%= dom_id %>">
+  <% if trigger? %>
+    <span data-action="click->senren--dialog#open" data-senren--dialog-target="trigger" aria-controls="<%= dom_id %>-panel">
+      <%= trigger %>
+    </span>
+  <% else %>
+    <button type="button" data-action="click->senren--dialog#open"
+            class="hidden" data-senren--dialog-target="trigger" aria-controls="<%= dom_id %>-panel">Open</button>
+  <% end %>
+
+  <div data-senren--dialog-target="overlay" hidden
+       class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"></div>
+
+  <div data-senren--dialog-target="panel" hidden
+       role="dialog" aria-modal="true" aria-labelledby="<%= dom_id %>-title"
+       id="<%= dom_id %>-panel"
+       tabindex="-1"
+       class="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-6 shadow-lg focus:outline-none">
+    <% if title? %>
+      <h2 id="<%= dom_id %>-title" class="text-lg font-semibold leading-none tracking-tight"><%= title %></h2>
+    <% end %>
+    <% if description? %>
+      <p class="mt-1.5 text-sm text-[hsl(var(--senren-muted-foreground))]"><%= description %></p>
+    <% end %>
+    <% if body? %>
+      <div class="mt-4"><%= body %></div>
+    <% end %>
+    <% if footer? %>
+      <div class="mt-6 flex justify-end gap-2"><%= footer %></div>
+    <% end %>
+
+    <button type="button" data-action="click->senren--dialog#close"
+            aria-label="Close"
+            class="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+      <span aria-hidden="true">×</span>
+    </button>
+  </div>
+</div>

data/templates/components/dialog/dialog_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Senren
+  class DialogComponent < BaseComponent
+    renders_one :trigger
+    renders_one :title
+    renders_one :description
+    renders_one :body
+    renders_one :footer
+
+    VARIANTS = { default: '' }.freeze
+    SIZES    = { md: '' }.freeze
+
+    def initialize(open: false, id: nil, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @open = open
+      @dom_id = id || "senren-dialog-#{SecureRandom.hex(3)}"
+    end
+
+    attr_reader :open, :dom_id
+  end
+end

data/templates/components/dropdown_menu/dropdown_menu_component.html.erb

@@ -0,0 +1,12 @@
+<div data-controller="senren--dropdown-menu" class="relative inline-block" data-state="closed" data-senren-component="dropdown_menu">
+  <div class="inline-flex cursor-pointer" data-state="closed" aria-haspopup="menu" aria-expanded="false" data-senren--dropdown-menu-target="trigger" data-action="click->senren--dropdown-menu#toggle keydown->senren--dropdown-menu#onTriggerKey">
+    <%= trigger %>
+  </div>
+
+  <div data-senren--dropdown-menu-target="menu" role="menu" hidden
+       class="absolute right-0 z-50 mt-2 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/dropdown_menu/dropdown_menu_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Senren
+  class DropdownMenuComponent < BaseComponent
+    renders_one  :trigger
+    renders_many :items, 'ItemTag'
+
+    VARIANTS = { default: '' }.freeze
+    SIZES    = { md: '' }.freeze
+
+    def initialize(class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+    end
+
+    class ItemTag < ViewComponent::Base
+      def initialize(href: nil, method: nil, destructive: false, **opts)
+        @href = href
+        @method = method
+        @destructive = destructive
+        @opts = opts
+      end
+
+      def call
+        klass = 'block w-full text-left px-3 py-2 text-sm rounded-sm hover:bg-[hsl(var(--senren-accent))] focus:bg-[hsl(var(--senren-accent))] outline-none cursor-pointer'
+        klass += ' text-[hsl(var(--senren-destructive))]' if @destructive
+        if @href
+          link_to(content, @href, role: 'menuitem', method: @method, class: klass,
+                                  data: { action: 'click->senren--dropdown-menu#close keydown->senren--dropdown-menu#onItemKey' })
+        else
+          tag.button(content, type: 'button', role: 'menuitem', class: klass,
+                              data: { action: 'click->senren--dropdown-menu#close keydown->senren--dropdown-menu#onItemKey' }, **@opts)
+        end
+      end
+    end
+  end
+end

data/templates/components/empty_state/empty_state_component.html.erb

@@ -0,0 +1,18 @@
+<%= tag.div(**root_attrs("rounded-(--senren-radius) border border-dashed p-8 text-center text-[hsl(var(--senren-muted-foreground))]")) do %>
+  <% if content? && title.blank? && description.blank? %>
+    <%= content %>
+  <% else %>
+    <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[hsl(var(--senren-accent))] text-[hsl(var(--senren-accent-foreground))]">
+      <% if icon? %><%= icon %><% else %><span class="text-lg font-semibold">+</span><% end %>
+    </div>
+    <% if title.present? %>
+      <h2 class="mt-4 font-display text-lg font-semibold text-[hsl(var(--senren-foreground))]"><%= title %></h2>
+    <% end %>
+    <% if description.present? %>
+      <p class="mx-auto mt-2 max-w-sm text-sm leading-6"><%= description %></p>
+    <% end %>
+    <% if actions? %>
+      <div class="mt-5 flex justify-center gap-2"><%= actions %></div>
+    <% end %>
+  <% end %>
+<% end %>

data/templates/components/empty_state/empty_state_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Senren
+  class EmptyStateComponent < BaseComponent
+    renders_one :icon
+    renders_one :actions
+
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))]',
+      illustrated: 'border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.35)]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(title: nil, description: nil, variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @title = title
+      @description = description
+    end
+
+    attr_reader :title, :description
+  end
+end

data/templates/components/filter_bar/filter_bar_component.html.erb

@@ -0,0 +1,5 @@
+<%= tag.div(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 shadow-sm", role: "search", "aria-label": label)) do %>
+  <div class="flex flex-wrap items-center gap-2">
+    <%= content %>
+  </div>
+<% end %>

data/templates/components/filter_bar/filter_bar_component.rb

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

data/templates/components/form/form_component.html.erb

@@ -0,0 +1,3 @@
+<%= form_with(model: model, url: url, method: method, multipart: multipart, **root_attrs("space-y-4")) do |f| %>
+  <%= content || capture(f, &Proc.new) %>
+<% end %>

data/templates/components/form/form_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Senren
+  class FormComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES    = { md: '' }.freeze
+
+    def initialize(model: nil, url: nil, method: :post, multipart: false, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @model = model
+      @url   = url
+      @method = method
+      @multipart = multipart
+    end
+
+    attr_reader :model, :url, :method, :multipart
+  end
+end

data/templates/components/hover_card/hover_card_component.html.erb

@@ -0,0 +1,10 @@
+<span data-controller="senren--hover-card" class="relative inline-block" data-senren-component="hover_card">
+  <span tabindex="0"
+        data-action="mouseenter->senren--hover-card#show mouseleave->senren--hover-card#hide focus->senren--hover-card#show blur->senren--hover-card#hide">
+    <%= trigger %>
+  </span>
+  <span hidden data-senren--hover-card-target="panel"
+        class="absolute z-40 mt-2 w-64 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-4 shadow-md">
+    <%= content_panel || content %>
+  </span>
+</span>

data/templates/components/hover_card/hover_card_component.rb

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

data/templates/components/input/input_component.html.erb

@@ -0,0 +1 @@
+<%= tag.input(**root_attrs("flex w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[hsl(var(--senren-muted-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50", id: id, name: name, type: type, value: value, placeholder: placeholder, "aria-invalid": variant == :error)) %>

data/templates/components/input/input_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Senren
+  class InputComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-input))] focus-visible:ring-[hsl(var(--senren-ring))]',
+      error: 'border-[hsl(var(--senren-destructive))] focus-visible:ring-[hsl(var(--senren-destructive))]'
+    }.freeze
+
+    SIZES = {
+      sm: 'h-8  text-sm  px-2.5',
+      md: 'h-10 text-sm  px-3',
+      lg: 'h-12 text-base px-4'
+    }.freeze
+
+    def initialize(name:, type: 'text', value: nil, placeholder: nil, id: nil, variant: :default, size: :md,
+                   class_name: nil, **html)
+      super(variant: variant, size: size, class_name: class_name, **html)
+      @name = name
+      @type = type
+      @value = value
+      @placeholder = placeholder
+      @id = id || name.to_s.parameterize
+    end
+
+    attr_reader :name, :type, :value, :placeholder, :id
+  end
+end

data/templates/components/invite_member_dialog/invite_member_dialog_component.html.erb

@@ -0,0 +1,35 @@
+<%= tag.div(**root_attrs("inline-block", data: { controller: "senren--invite-member-dialog" })) do %>
+  <% if trigger? %>
+    <span data-action="click->senren--invite-member-dialog#open" data-senren--invite-member-dialog-target="trigger"><%= trigger %></span>
+  <% else %>
+    <button type="button" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90" data-action="click->senren--invite-member-dialog#open" data-senren--invite-member-dialog-target="trigger">
+      <%= button_label %>
+    </button>
+  <% end %>
+
+  <div hidden data-senren--invite-member-dialog-target="overlay" class="fixed inset-0 z-40 bg-[hsl(var(--senren-foreground)/0.42)] backdrop-blur-sm"></div>
+  <div hidden id="<%= dom_id %>" data-senren--invite-member-dialog-target="panel" role="dialog" aria-modal="true" aria-labelledby="<%= dom_id %>-title" tabindex="-1" class="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] p-6 text-[hsl(var(--senren-popover-foreground))] shadow-lg">
+    <h2 id="<%= dom_id %>-title" class="font-display text-lg font-semibold"><%= title %></h2>
+    <% if description.present? %>
+      <p class="mt-1.5 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]"><%= description %></p>
+    <% end %>
+
+    <div class="mt-5 space-y-4">
+      <% if content? %>
+        <%= content %>
+      <% else %>
+        <label class="block text-sm font-medium text-[hsl(var(--senren-foreground))]" for="<%= dom_id %>-email">Email</label>
+        <input id="<%= dom_id %>-email" name="<%= email_name %>" type="email" placeholder="teammate@company.com" class="h-10 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-3 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+        <label class="block text-sm font-medium text-[hsl(var(--senren-foreground))]" for="<%= dom_id %>-role">Role</label>
+        <select id="<%= dom_id %>-role" name="<%= role_name %>" class="h-10 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-3 text-sm outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+          <% roles.each do |role| %><option><%= role %></option><% end %>
+        </select>
+      <% end %>
+    </div>
+
+    <div class="mt-6 flex justify-end gap-2">
+      <button type="button" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) px-4 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]" data-action="click->senren--invite-member-dialog#close">Cancel</button>
+      <% if footer? %><%= footer %><% else %><button type="submit" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-4 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90">Send invite</button><% end %>
+    </div>
+  </div>
+<% end %>

data/templates/components/invite_member_dialog/invite_member_dialog_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Senren
+  class InviteMemberDialogComponent < BaseComponent
+    renders_one :trigger
+    renders_one :footer
+
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(title: 'Invite teammate', description: 'Send an invitation to join this workspace.',
+                   email_name: 'email', role_name: 'role', roles: %w[Member
+                                                                     Admin], button_label: 'Invite member', id: nil, class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @title = title
+      @description = description
+      @email_name = email_name
+      @role_name = role_name
+      @roles = Array(roles)
+      @button_label = button_label
+      @dom_id = id || "senren-invite-member-#{SecureRandom.hex(3)}"
+    end
+
+    attr_reader :title, :description, :email_name, :role_name, :roles, :button_label, :dom_id
+  end
+end

data/templates/components/label/label_component.html.erb

@@ -0,0 +1,4 @@
+<%= tag.label(**root_attrs("text-sm font-medium leading-none text-[hsl(var(--senren-foreground))] peer-disabled:cursor-not-allowed peer-disabled:opacity-70", for: for_field)) do %>
+  <%= content %>
+  <% if variant == :required %><span class="text-[hsl(var(--senren-destructive))]" aria-hidden="true"> *</span><% end %>
+<% end %>

data/templates/components/label/label_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Senren
+  class LabelComponent < BaseComponent
+    VARIANTS = {
+      default: '',
+      required: ''
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    def initialize(for_field:, variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @for_field = for_field
+    end
+
+    attr_reader :for_field
+  end
+end

data/templates/components/link/link_component.html.erb

@@ -0,0 +1 @@
+<%= tag.a content, **root_attrs("inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] rounded-sm", href: href, **external_attrs) %>

data/templates/components/link/link_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Senren
+  class LinkComponent < BaseComponent
+    VARIANTS = {
+      default: 'text-[hsl(var(--senren-primary))] hover:underline underline-offset-4',
+      muted: 'text-[hsl(var(--senren-muted-foreground))] hover:underline underline-offset-4',
+      destructive: 'text-[hsl(var(--senren-destructive))] hover:underline underline-offset-4'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    def initialize(href:, variant: :default, external: false, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @href = href
+      @external = external
+    end
+
+    attr_reader :href, :external
+
+    def external_attrs
+      external ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+    end
+  end
+end

data/templates/components/masked_input/masked_input_component.html.erb

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

data/templates/components/masked_input/masked_input_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Senren
+  class MaskedInputComponent < BaseComponent
+    VARIANTS = InputComponent::VARIANTS
+    SIZES    = InputComponent::SIZES
+
+    def initialize(mask:, **args)
+      @mask = mask
+      @args = args
+    end
+
+    def input_args
+      data = (@args[:data] || {}).merge(controller: 'senren--masked-input', 'senren--masked-input-mask-value': @mask)
+      @args.merge(data: data)
+    end
+  end
+end

data/templates/components/native_select/native_select_component.html.erb

@@ -0,0 +1,14 @@
+<%= tag.div(**wrapper_attrs) do %>
+  <%= tag.select(**select_attrs) do %>
+    <% if prompt %>
+      <option value=""><%= prompt %></option>
+    <% end %>
+    <% options.each do |opt| %>
+      <% value, label = Array === opt ? opt : [opt, opt] %>
+      <option value="<%= value %>" <%= "selected" if selected.to_s == value.to_s %>><%= label %></option>
+    <% end %>
+  <% end %>
+  <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[hsl(var(--senren-muted-foreground))] transition-transform duration-150 group-focus-within:rotate-180">
+    <path d="m5 8 5 5 5-5"></path>
+  </svg>
+<% end %>

data/templates/components/native_select/native_select_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Senren
+  class NativeSelectComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-input))] focus-visible:ring-[hsl(var(--senren-ring))]',
+      error: 'border-[hsl(var(--senren-destructive))] focus-visible:ring-[hsl(var(--senren-destructive))]'
+    }.freeze
+
+    SIZES = {
+      sm: 'h-8  text-sm  px-2.5',
+      md: 'h-10 text-sm  px-3',
+      lg: 'h-12 text-base px-4'
+    }.freeze
+
+    def initialize(name:, options:, selected: nil, id: nil, prompt: nil, variant: :default, size: :md, class_name: nil,
+                   **html)
+      super(variant: variant, size: size, class_name: class_name, **html)
+      @name = name
+      @options = options
+      @selected = selected
+      @id = id || name.to_s.parameterize
+      @prompt = prompt
+    end
+
+    attr_reader :name, :options, :selected, :id, :prompt
+
+    def wrapper_attrs
+      { class: 'group relative w-full', data: { senren_component: senren_component_name } }
+    end
+
+    def select_attrs
+      attrs = html_attrs.except(:class)
+      attrs.merge(
+        id: id,
+        name: name,
+        class: select_classes,
+        'aria-invalid': variant == :error
+      )
+    end
+
+    def select_classes
+      [
+        'flex w-full cursor-pointer appearance-none rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] pr-9 text-[hsl(var(--senren-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+        self.class::VARIANTS[variant],
+        self.class::SIZES[size],
+        class_name,
+        html_attrs[:class]
+      ].compact.join(' ')
+    end
+  end
+end

data/templates/components/page_header/page_header_component.html.erb

@@ -0,0 +1,20 @@
+<%= tag.header(**root_attrs("flex flex-col gap-4 border-b border-[hsl(var(--senren-border))] pb-6 sm:flex-row sm:items-end sm:justify-between")) do %>
+  <% if content? && title.blank? && description.blank? %>
+    <%= content %>
+  <% else %>
+    <div class="min-w-0">
+      <% if eyebrow? %>
+        <div class="mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-[hsl(var(--senren-muted-foreground))]"><%= eyebrow %></div>
+      <% end %>
+      <% if title.present? %>
+        <h1 class="font-display text-3xl font-semibold tracking-tight text-[hsl(var(--senren-foreground))]"><%= title %></h1>
+      <% end %>
+      <% if description.present? %>
+        <p class="mt-2 max-w-2xl text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]"><%= description %></p>
+      <% end %>
+    </div>
+    <% if actions? %>
+      <div class="flex shrink-0 flex-wrap items-center gap-2"><%= actions %></div>
+    <% end %>
+  <% end %>
+<% end %>

data/templates/components/page_header/page_header_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Senren
+  class PageHeaderComponent < BaseComponent
+    renders_one :actions
+    renders_one :eyebrow
+
+    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/pagination/pagination_component.html.erb

@@ -0,0 +1,11 @@
+<nav <%= tag.attributes(**root_attrs("flex items-center justify-center gap-1", aria: { label: label })) %>>
+  <% prev_page = current_page - 1 %>
+  <%= link_to "Previous", page_url(prev_page), class: "rounded-md border border-[hsl(var(--senren-border))] px-3 py-2 text-sm #{current_page == 1 ? "pointer-events-none opacity-50" : "hover:bg-[hsl(var(--senren-accent))]"}", aria: { disabled: current_page == 1 } %>
+
+  <% (1..total_pages).each do |page| %>
+    <%= link_to page, page_url(page), class: "inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium #{page == current_page ? "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))]"}", aria: { current: (page == current_page ? "page" : nil) } %>
+  <% end %>
+
+  <% next_page = current_page + 1 %>
+  <%= link_to "Next", page_url(next_page), class: "rounded-md border border-[hsl(var(--senren-border))] px-3 py-2 text-sm #{current_page == total_pages ? "pointer-events-none opacity-50" : "hover:bg-[hsl(var(--senren-accent))]"}", aria: { disabled: current_page == total_pages } %>
+</nav>

data/templates/components/pagination/pagination_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Senren
+  class PaginationComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(current_page: 1, total_pages: 1, path: nil, label: 'Pagination', class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @total_pages = [total_pages.to_i, 1].max
+      @current_page = current_page.to_i.clamp(1, @total_pages)
+      @path = path
+      @label = label
+    end
+
+    attr_reader :current_page, :total_pages, :path, :label
+
+    def page_url(page)
+      return '#' unless path
+
+      path.respond_to?(:call) ? path.call(page) : path.to_s.gsub(':page', page.to_s)
+    end
+  end
+end

data/templates/components/popover/popover_component.html.erb

@@ -0,0 +1,9 @@
+<div data-controller="senren--popover" class="relative inline-block" data-senren-component="popover">
+  <div data-senren--popover-target="trigger" data-action="click->senren--popover#toggle">
+    <%= trigger %>
+  </div>
+  <div data-senren--popover-target="panel" hidden role="dialog"
+       class="absolute z-40 mt-2 min-w-[12rem] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-4 shadow-md">
+    <%= content_panel || content %>
+  </div>
+</div>