senren-ui 0.1.0

data/registry/groups.yml

@@ -0,0 +1,25 @@
+groups:
+  - id: actions
+    title: Actions
+    description: Buttons, links, and clickable affordances.
+  - id: forms
+    title: Forms
+    description: Form structure, labels, inputs, selects, validation surfaces.
+  - id: overlays
+    title: Overlays
+    description: Dialogs, popovers, tooltips, sheets, menus.
+  - id: navigation
+    title: Navigation
+    description: Tabs, breadcrumbs, sidebar, theme toggle, shortcut keys.
+  - id: layout
+    title: Layout
+    description: Cards, separators, app shells, page headers, aspect ratios.
+  - id: data
+    title: Data Display
+    description: Tables, badges, avatars, progress, skeletons, pagination.
+  - id: saas
+    title: SaaS Blocks
+    description: Composite blocks for SaaS apps - settings, billing, team, search, filters.
+  - id: rich
+    title: Rich Content
+    description: Editors, code blocks, carousels, command palettes.

data/registry/recipes.yml

@@ -0,0 +1,79 @@
+recipes:
+  form_basics:
+    description: Minimal form stack - structure, primitives, and submit button.
+    components: [form, label, input, textarea, native_select, button, alert]
+
+  dashboard:
+    description: SaaS dashboard layout with shell, header, and stat cards.
+    components:
+      - app_shell
+      - top_nav
+      - sidebar
+      - page_header
+      - card
+      - badge
+      - button
+      - stat_card
+      - typography
+      - separator
+
+  settings_page:
+    description: Settings page with sectioned form and destructive action.
+    components:
+      - app_shell
+      - sidebar
+      - page_header
+      - card
+      - settings_section
+      - form
+      - input
+      - textarea
+      - switch
+      - button
+      - alert_dialog
+      - separator
+      - typography
+
+  team_management:
+    description: Team list with invite dialog and bulk actions.
+    components:
+      - app_shell
+      - page_header
+      - card
+      - team_member_list
+      - invite_member_dialog
+      - dropdown_menu
+      - bulk_action_bar
+      - search_input
+      - filter_bar
+      - badge
+      - avatar
+      - button
+
+  todolist_index:
+    description: Components used by the apps/todolist Todo index page.
+    components:
+      - app_shell
+      - top_nav
+      - sidebar
+      - page_header
+      - button
+      - card
+      - badge
+      - table
+      - dropdown_menu
+      - pagination
+      - empty_state
+      - filter_bar
+      - search_input
+
+  todolist_form:
+    description: Components used by the apps/todolist Todo new/edit pages.
+    components:
+      - form
+      - label
+      - input
+      - textarea
+      - native_select
+      - button
+      - alert

data/templates/components/accordion/accordion_component.html.erb

@@ -0,0 +1,16 @@
+<div <%= tag.attributes(**root_attrs("divide-y divide-[hsl(var(--senren-border))] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-background))]", data: { controller: "senren--accordion", "senren--accordion-multiple-value": multiple? })) %>>
+  <% items.each_with_index do |item, index| %>
+    <% expanded = open_item?(item, index) %>
+    <section>
+      <h3>
+        <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-foreground))] transition-colors hover:bg-[hsl(var(--senren-muted)/0.5)]" aria-expanded="<%= expanded %>" aria-controls="<%= item[:id] %>-panel" data-senren--accordion-target="trigger" data-panel-id="<%= item[:id] %>" data-action="click->senren--accordion#toggle">
+          <span><%= item[:title] %></span>
+          <span aria-hidden="true" class="text-[hsl(var(--senren-muted-foreground))]">+</span>
+        </button>
+      </h3>
+      <div id="<%= item[:id] %>-panel" data-senren--accordion-target="panel" data-panel-id="<%= item[:id] %>" <%= "hidden" unless expanded %> class="px-4 pb-4 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]">
+        <%= item[:content].presence || content %>
+      </div>
+    </section>
+  <% end %>
+</div>

data/templates/components/accordion/accordion_component.rb

@@ -0,0 +1,31 @@
+module Senren
+  class AccordionComponent < BaseComponent
+    VARIANTS = { single: '', multiple: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(items: [], variant: :single, open: nil, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @items = normalize_items(items)
+      @open = Array(open).map(&:to_s)
+    end
+
+    attr_reader :items, :open
+
+    def multiple? = variant == :multiple
+
+    def open_item?(item, index)
+      open.include?(item[:id]) || (open.empty? && index.zero?)
+    end
+
+    private
+
+    def normalize_items(items)
+      Array(items).map.with_index do |item, index|
+        source = item.is_a?(Hash) ? item : { title: item.to_s }
+        title = source[:title] || source['title'] || "Section #{index + 1}"
+        id = (source[:id] || source['id'] || title.to_s.parameterize).to_s
+        { id: id, title: title, content: source[:content] || source['content'] }
+      end
+    end
+  end
+end

data/templates/components/activity_feed/activity_feed_component.html.erb

@@ -0,0 +1,22 @@
+<%= tag.div(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-4 shadow-sm")) do %>
+  <% if content? && items.empty? %>
+    <%= content %>
+  <% else %>
+    <ol class="space-y-4">
+      <% items.each do |item| %>
+        <li class="relative flex gap-3">
+          <span class="mt-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--senren-muted))] text-xs font-semibold text-[hsl(var(--senren-muted-foreground))]"><%= item_value(item, :initials) || "!" %></span>
+          <div class="min-w-0 flex-1">
+            <p class="text-sm text-[hsl(var(--senren-foreground))]"><%= item_value(item, :title) %></p>
+            <% if item_value(item, :description).present? %>
+              <p class="mt-1 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]"><%= item_value(item, :description) %></p>
+            <% end %>
+            <% if item_value(item, :time).present? %>
+              <time class="mt-1 block text-xs text-[hsl(var(--senren-muted-foreground))]"><%= item_value(item, :time) %></time>
+            <% end %>
+          </div>
+        </li>
+      <% end %>
+    </ol>
+  <% end %>
+<% end %>

data/templates/components/activity_feed/activity_feed_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Senren
+  class ActivityFeedComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(items: [], class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @items = Array(items)
+    end
+
+    attr_reader :items
+
+    def item_value(item, key)
+      item.is_a?(Hash) ? (item[key] || item[key.to_s]) : nil
+    end
+  end
+end

data/templates/components/alert/alert_component.html.erb

@@ -0,0 +1,9 @@
+<%= tag.div(**root_attrs("relative w-full rounded-(--senren-radius) border p-4", role: aria_role)) do %>
+  <% if title? %>
+    <h5 class="mb-1 font-semibold leading-none tracking-tight"><%= title %></h5>
+  <% end %>
+  <% if description? %>
+    <div class="text-sm opacity-90"><%= description %></div>
+  <% end %>
+  <%= content if !title? && !description? %>
+<% end %>

data/templates/components/alert/alert_component.rb

@@ -0,0 +1,18 @@
+module Senren
+  class AlertComponent < BaseComponent
+    renders_one :title
+    renders_one :description
+
+    VARIANTS = {
+      default: 'bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] border-[hsl(var(--senren-border))]',
+      info: 'bg-[hsl(var(--senren-secondary))] text-[hsl(var(--senren-secondary-foreground))] border-transparent',
+      success: 'bg-[hsl(var(--senren-success))] text-[hsl(var(--senren-success-foreground))] border-transparent',
+      warning: 'bg-[hsl(var(--senren-warning))] text-[hsl(var(--senren-warning-foreground))] border-transparent',
+      destructive: 'bg-[hsl(var(--senren-destructive))] text-[hsl(var(--senren-destructive-foreground))] border-transparent'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+
+    def aria_role = variant == :destructive ? 'alert' : 'status'
+  end
+end

data/templates/components/alert_dialog/alert_dialog_component.html.erb

@@ -0,0 +1,34 @@
+<div data-controller="senren--alert-dialog" data-senren-component="alert_dialog" id="<%= dom_id %>">
+  <% if trigger? %>
+    <span data-action="click->senren--alert-dialog#open" data-senren--alert-dialog-target="trigger">
+      <%= trigger %>
+    </span>
+  <% else %>
+    <button type="button" data-action="click->senren--alert-dialog#open"
+            data-senren--alert-dialog-target="trigger"
+            class="hidden">Open</button>
+  <% end %>
+
+  <div data-senren--alert-dialog-target="overlay" hidden
+       class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"></div>
+
+  <div data-senren--alert-dialog-target="panel" hidden
+       role="alertdialog" aria-modal="true" aria-labelledby="<%= dom_id %>-title" aria-describedby="<%= dom_id %>-desc"
+       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))] text-[hsl(var(--senren-popover-foreground))] p-6 shadow-lg">
+    <% if title? %>
+      <h2 id="<%= dom_id %>-title" class="text-lg font-semibold"><%= title %></h2>
+    <% end %>
+    <% if description? %>
+      <p id="<%= dom_id %>-desc" class="mt-2 text-sm text-[hsl(var(--senren-muted-foreground))]"><%= description %></p>
+    <% end %>
+    <div class="mt-6 flex justify-end gap-2">
+      <% if cancel? %>
+        <span data-action="click->senren--alert-dialog#close"><%= cancel %></span>
+      <% end %>
+      <% if confirm? %>
+        <%= confirm %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/templates/components/alert_dialog/alert_dialog_component.rb

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

data/templates/components/api_key_field/api_key_field_component.html.erb

@@ -0,0 +1,13 @@
+<%= tag.div(**root_attrs("space-y-2", data: { controller: "senren--api-key-field", "senren--api-key-field-reveal-label-value": reveal_label, "senren--api-key-field-hide-label-value": hide_label, "senren--api-key-field-copy-label-value": copy_label })) do %>
+  <% if content? && value.blank? %>
+    <%= content %>
+  <% else %>
+    <label class="block text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= label %></label>
+    <div class="flex flex-col gap-2 sm:flex-row">
+      <input type="password" readonly value="<%= value %>" data-senren--api-key-field-target="input" class="h-10 min-w-0 flex-1 rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-muted)/0.35)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))] outline-none focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
+      <button type="button" data-senren--api-key-field-target="revealButton" data-action="click->senren--api-key-field#toggle" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-(--senren-radius) border border-[hsl(var(--senren-border))] px-3 text-sm font-medium hover:bg-[hsl(var(--senren-accent))]"><%= reveal_label %></button>
+      <button type="button" data-action="click->senren--api-key-field#copy" class="inline-flex h-10 cursor-pointer items-center justify-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-3 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90"><%= copy_label %></button>
+    </div>
+    <span class="sr-only" aria-live="polite" data-senren--api-key-field-target="status"></span>
+  <% end %>
+<% end %>

data/templates/components/api_key_field/api_key_field_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Senren
+  class ApiKeyFieldComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(value: nil, label: 'API key', reveal_label: 'Reveal', hide_label: 'Hide', copy_label: 'Copy',
+                   class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @value = value
+      @label = label
+      @reveal_label = reveal_label
+      @hide_label = hide_label
+      @copy_label = copy_label
+    end
+
+    attr_reader :value, :label, :reveal_label, :hide_label, :copy_label
+  end
+end

data/templates/components/app_shell/app_shell_component.html.erb

@@ -0,0 +1,28 @@
+<%= tag.div(**root_attrs("min-h-screen text-[hsl(var(--senren-foreground))]")) do %>
+  <a href="#<%= content_id %>" class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-(--senren-radius) focus:bg-[hsl(var(--senren-primary))] focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-[hsl(var(--senren-primary-foreground))]">
+    <%= skip_label %>
+  </a>
+
+  <% if top_nav? %>
+    <%= top_nav %>
+  <% end %>
+
+  <div class="mx-auto grid w-full max-w-[1400px] gap-6 px-4 py-6 md:grid-cols-[16rem_minmax(0,1fr)] lg:px-8">
+    <% if sidebar? %>
+      <aside class="min-w-0"><%= sidebar %></aside>
+    <% end %>
+
+    <main id="<%= content_id %>" class="min-w-0 <%= sidebar? ? '' : 'md:col-span-2' %>">
+      <% if header? %>
+        <div class="mb-6"><%= header %></div>
+      <% end %>
+      <%= content %>
+    </main>
+  </div>
+
+  <% if footer? %>
+    <footer class="border-t border-[hsl(var(--senren-border))] px-4 py-6 text-sm text-[hsl(var(--senren-muted-foreground))] lg:px-8">
+      <%= footer %>
+    </footer>
+  <% end %>
+<% end %>

data/templates/components/app_shell/app_shell_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Senren
+  class AppShellComponent < BaseComponent
+    renders_one :top_nav
+    renders_one :sidebar
+    renders_one :header
+    renders_one :footer
+
+    VARIANTS = {
+      default: 'bg-[hsl(var(--senren-background))]',
+      compact: 'bg-[hsl(var(--senren-muted)/0.25)]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(content_id: 'senren-main', skip_label: 'Skip to content', variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @content_id = content_id
+      @skip_label = skip_label
+    end
+
+    attr_reader :content_id, :skip_label
+  end
+end

data/templates/components/aspect_ratio/aspect_ratio_component.html.erb

@@ -0,0 +1,3 @@
+<%= tag.div(**root_attrs("relative w-full overflow-hidden rounded-(--senren-radius)")) do %>
+  <%= content %>
+<% end %>

data/templates/components/aspect_ratio/aspect_ratio_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Senren
+  class AspectRatioComponent < BaseComponent
+    VARIANTS = {
+      square: 'aspect-square',
+      video: 'aspect-video',
+      portrait: 'aspect-[3/4]',
+      ultrawide: 'aspect-[21/9]'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+  end
+end

data/templates/components/avatar/avatar_component.html.erb

@@ -0,0 +1,27 @@
+<%= tag.span(**root_attrs("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-[hsl(var(--senren-muted))] text-[hsl(var(--senren-foreground))] font-semibold shadow-sm ring-1 ring-[hsl(var(--senren-border))]", role: "img", "aria-label": alt.presence || fallback)) do %>
+  <% if src.present? %>
+    <%= image_tag src, alt: alt.to_s, class: "h-full w-full object-cover" %>
+  <% else %>
+    <svg aria-hidden="true" viewBox="0 0 64 64" preserveAspectRatio="none" class="absolute inset-0 h-full w-full">
+      <rect width="64" height="64" fill="#2b9bd7" />
+      <circle cx="42" cy="15" r="8" fill="#fffbea" />
+      <path d="M0 27 C10 20 16 22 24 17 C31 13 37 23 45 18 C54 12 58 22 64 20 L64 64 L0 64 Z" fill="#f6a4c8" />
+      <path d="M0 36 C10 29 19 35 29 29 C39 23 48 33 64 27 L64 64 L0 64 Z" fill="#86c84a" />
+      <path d="M5 46 C17 39 34 40 59 43 C50 53 23 57 5 46 Z" fill="#bdeef4" />
+      <path d="M0 50 C10 44 18 48 25 43 C28 51 42 48 46 55 C56 48 60 53 64 50 L64 64 L0 64 Z" fill="#7fc547" />
+      <path d="M2 54 C11 49 18 51 25 47 C28 55 16 60 5 61 Z" fill="#b59ce9" opacity=".9" />
+      <path d="M44 49 C52 45 59 47 64 44 L64 64 L45 64 C41 58 40 53 44 49 Z" fill="#16a060" opacity=".9" />
+      <g fill="#107e76" opacity=".45">
+        <circle cx="8" cy="12" r=".8" />
+        <circle cx="17" cy="25" r=".6" />
+        <circle cx="28" cy="9" r=".7" />
+        <circle cx="36" cy="32" r=".6" />
+        <circle cx="51" cy="25" r=".7" />
+        <circle cx="57" cy="38" r=".6" />
+      </g>
+    </svg>
+    <% if fallback.present? %>
+      <span class="relative z-10 rounded-full bg-[hsl(var(--senren-background)/0.72)] px-1.5 leading-none text-[hsl(var(--senren-foreground))] shadow-sm"><%= fallback %></span>
+    <% end %>
+  <% end %>
+<% end %>

data/templates/components/avatar/avatar_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Senren
+  class AvatarComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+
+    SIZES = {
+      sm: 'h-8 w-8 text-xs',
+      md: 'h-10 w-10 text-sm',
+      lg: 'h-14 w-14 text-base'
+    }.freeze
+
+    def initialize(src: nil, alt: nil, fallback: nil, initials: nil, size: :md, class_name: nil, **html)
+      super(variant: :default, size: size, class_name: class_name, **html)
+      @src = src
+      @alt = alt
+      @fallback = fallback.presence || initials.presence || initials_from_alt
+    end
+
+    attr_reader :src, :alt, :fallback
+
+    private
+
+    def initials_from_alt
+      return '' if alt.blank?
+
+      alt.split.map(&:first).first(2).join.upcase
+    end
+  end
+end

data/templates/components/badge/badge_component.html.erb

@@ -0,0 +1 @@
+<%= tag.span content, **root_attrs("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium") %>

data/templates/components/badge/badge_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Senren
+  class BadgeComponent < BaseComponent
+    VARIANTS = {
+      default: 'bg-[hsl(var(--senren-secondary))] text-[hsl(var(--senren-secondary-foreground))]',
+      secondary: 'bg-[hsl(var(--senren-muted))] text-[hsl(var(--senren-muted-foreground))]',
+      success: 'bg-[hsl(var(--senren-success))] text-[hsl(var(--senren-success-foreground))]',
+      warning: 'bg-[hsl(var(--senren-warning))] text-[hsl(var(--senren-warning-foreground))]',
+      destructive: 'bg-[hsl(var(--senren-destructive))] text-[hsl(var(--senren-destructive-foreground))]',
+      outline: 'border border-[hsl(var(--senren-border))] text-[hsl(var(--senren-foreground))]'
+    }.freeze
+
+    SIZES = { md: '' }.freeze
+  end
+end

data/templates/components/billing_plan_card/billing_plan_card_component.html.erb

@@ -0,0 +1,28 @@
+<%= tag.div(**root_attrs("relative rounded-(--senren-radius) border bg-[hsl(var(--senren-card))] p-6 shadow-sm")) do %>
+  <% if badge.present? %>
+    <span class="absolute right-4 top-4 rounded-full bg-[hsl(var(--senren-accent))] px-2.5 py-1 text-xs font-semibold text-[hsl(var(--senren-accent-foreground))]"><%= badge %></span>
+  <% end %>
+
+  <% if content? && name.blank? %>
+    <%= content %>
+  <% else %>
+    <% if name.present? %><h3 class="font-display text-lg font-semibold text-[hsl(var(--senren-foreground))]"><%= name %></h3><% end %>
+    <% if description.present? %><p class="mt-2 text-sm leading-6 text-[hsl(var(--senren-muted-foreground))]"><%= description %></p><% end %>
+    <% if price.present? %>
+      <div class="mt-5 flex items-end gap-1">
+        <span class="font-display text-4xl font-semibold tracking-tight text-[hsl(var(--senren-foreground))]"><%= price %></span>
+        <% if interval.present? %><span class="pb-1 text-sm text-[hsl(var(--senren-muted-foreground))]"><%= interval %></span><% end %>
+      </div>
+    <% end %>
+    <% if features.any? %>
+      <ul class="mt-5 space-y-2 text-sm text-[hsl(var(--senren-muted-foreground))]">
+        <% features.each do |feature| %>
+          <li class="flex gap-2"><span class="text-[hsl(var(--senren-success))]">+</span><span><%= feature %></span></li>
+        <% end %>
+      </ul>
+    <% end %>
+    <% if cta_label.present? %>
+      <%= link_to cta_label, cta_href || "#", class: "mt-6 inline-flex h-10 w-full 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" %>
+    <% end %>
+  <% end %>
+<% end %>

data/templates/components/billing_plan_card/billing_plan_card_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Senren
+  class BillingPlanCardComponent < BaseComponent
+    VARIANTS = {
+      default: 'border-[hsl(var(--senren-border))]',
+      current: 'border-[hsl(var(--senren-accent))]',
+      recommended: 'border-[hsl(var(--senren-primary))]'
+    }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(name: nil, price: nil, interval: nil, description: nil, features: [], cta_label: nil, cta_href: nil,
+                   badge: nil, variant: :default, class_name: nil, **html)
+      super(variant: variant, size: :md, class_name: class_name, **html)
+      @name = name
+      @price = price
+      @interval = interval
+      @description = description
+      @features = Array(features)
+      @cta_label = cta_label
+      @cta_href = cta_href
+      @badge = badge
+    end
+
+    attr_reader :name, :price, :interval, :description, :features, :cta_label, :cta_href, :badge
+  end
+end

data/templates/components/breadcrumb/breadcrumb_component.html.erb

@@ -0,0 +1,23 @@
+<% if items.any? %>
+  <nav <%= tag.attributes(**root_attrs("text-sm text-[hsl(var(--senren-muted-foreground))]", aria: { label: label })) %>>
+    <ol class="flex flex-wrap items-center gap-2">
+      <% items.each_with_index do |item, index| %>
+        <% current = index == items.length - 1 || item[:href].blank? %>
+        <li class="flex items-center gap-2">
+          <% if index.positive? %>
+            <span aria-hidden="true" class="select-none text-[hsl(var(--senren-muted-foreground)/0.7)]"><%= separator %></span>
+          <% end %>
+          <% if current %>
+            <span aria-current="page" class="font-medium text-[hsl(var(--senren-foreground))]"><%= item[:label] %></span>
+          <% else %>
+            <%= link_to item[:label], item[:href], class: "transition-colors hover:text-[hsl(var(--senren-foreground))]" %>
+          <% end %>
+        </li>
+      <% end %>
+    </ol>
+  </nav>
+<% else %>
+  <nav <%= tag.attributes(**root_attrs("text-sm text-[hsl(var(--senren-muted-foreground))]", aria: { label: label })) %>>
+    <%= content %>
+  </nav>
+<% end %>

data/templates/components/breadcrumb/breadcrumb_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Senren
+  class BreadcrumbComponent < BaseComponent
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(items: [], label: 'Breadcrumb', separator: '/', class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @items = normalize_items(items)
+      @label = label
+      @separator = separator
+    end
+
+    attr_reader :items, :label, :separator
+
+    private
+
+    def normalize_items(items)
+      Array(items).map do |item|
+        if item.is_a?(Hash)
+          { label: item.fetch(:label) { item.fetch('label') }, href: item[:href] || item['href'] }
+        else
+          label, href = item
+          { label: label, href: href }
+        end
+      end
+    end
+  end
+end

data/templates/components/bulk_action_bar/bulk_action_bar_component.html.erb

@@ -0,0 +1,12 @@
+<%= tag.div(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-foreground))] p-3 text-[hsl(var(--senren-background))] shadow-md", role: "status", "aria-live": "polite")) do %>
+  <% if content? && selected_count.nil? && !actions? %>
+    <%= content %>
+  <% else %>
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <div class="text-sm font-medium"><%= selection_text || "Selection ready" %></div>
+      <% if actions? %>
+        <div class="flex flex-wrap items-center gap-2"><%= actions %></div>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/templates/components/bulk_action_bar/bulk_action_bar_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Senren
+  class BulkActionBarComponent < BaseComponent
+    renders_one :actions
+
+    VARIANTS = { default: '' }.freeze
+    SIZES = { md: '' }.freeze
+
+    def initialize(selected_count: nil, item_label: 'items', class_name: nil, **html)
+      super(variant: :default, size: :md, class_name: class_name, **html)
+      @selected_count = selected_count
+      @item_label = item_label
+    end
+
+    attr_reader :selected_count, :item_label
+
+    def selection_text
+      return nil if selected_count.nil?
+
+      "#{selected_count} #{item_label} selected"
+    end
+  end
+end

data/templates/components/button/button_component.html.erb

@@ -0,0 +1,6 @@
+<% base = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-(--senren-radius) font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed" %>
+<% if as == :a %>
+  <%= tag.a content, **root_attrs(base, href: href) %>
+<% else %>
+  <%= tag.button content, **root_attrs(base, type: type) %>
+<% end %>