view_primitives 0.1.0

data/lib/generators/view_primitives/add/templates/sheet/sheet_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel"]
+
+  open() {
+    this.panelTarget.hidden = false
+    document.body.style.overflow = "hidden"
+  }
+
+  close() {
+    this.panelTarget.hidden = true
+    document.body.style.overflow = ""
+  }
+}

data/lib/generators/view_primitives/add/templates/sidebar/sidebar_component.rb.tt

@@ -0,0 +1,169 @@
+# frozen_string_literal: true
+
+module UI
+  class SidebarComponent < ApplicationComponent
+    # Collapsible application sidebar with nav groups.
+    #
+    # Usage:
+    #   ui :sidebar do |s|
+    #     s.with_group(label: "Main") do |g|
+    #       g.with_item(label: "Dashboard", href: "/", icon: :home, active: true)
+    #       g.with_item(label: "Settings",  href: "/settings", icon: :settings)
+    #     end
+    #   end
+
+    RAIL_CLS = "group peer fixed inset-y-0 left-0 z-30 flex h-full flex-col " \
+               "border-r border-border bg-background transition-[width] duration-300 " \
+               "data-[collapsed=true]:w-16 data-[collapsed=false]:w-64"
+
+    HEADER_CLS = "flex h-14 items-center justify-between border-b border-border px-4"
+
+    TOGGLE_CLS = "inline-flex size-8 items-center justify-center rounded-md " \
+                 "text-muted-foreground hover:bg-accent hover:text-accent-foreground " \
+                 "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition"
+
+    NAV_CLS = "flex-1 overflow-y-auto px-2 py-3"
+
+    GROUP_LABEL = "mb-1 px-3 text-xs font-medium uppercase tracking-wide text-muted-foreground " \
+                  "transition-opacity group-data-[collapsed=true]:opacity-0 group-data-[collapsed=true]:h-0 " \
+                  "group-data-[collapsed=true]:overflow-hidden group-data-[collapsed=true]:mb-0"
+
+    ITEM_CLS = "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors " \
+               "overflow-hidden " \
+               "group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:gap-0 " \
+               "hover:bg-accent hover:text-accent-foreground " \
+               "aria-[current]:bg-accent aria-[current]:text-foreground aria-[current]:font-semibold " \
+               "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none"
+
+    ITEM_LABEL = "transition-[opacity,width] group-data-[collapsed=true]:w-0 " \
+                 "group-data-[collapsed=true]:opacity-0 group-data-[collapsed=true]:overflow-hidden " \
+                 "whitespace-nowrap"
+
+    renders_many :groups, "UI::SidebarComponent::GroupComponent"
+    renders_many :items,  "UI::SidebarComponent::ItemComponent"
+
+    # brand:     text shown in the header
+    # collapsed: initial collapsed state (default: false)
+    def initialize(brand: nil, collapsed: false, **html_attrs)
+      @brand       = brand
+      @collapsed   = collapsed
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:aside,
+        class: cn(RAIL_CLS, @extra_class),
+        "data-collapsed": @collapsed.to_s,
+        data: { controller: "sidebar" },
+        **@html_attrs) do
+        concat header
+        concat nav_body
+      end
+    end
+
+    private
+
+    def header
+      content_tag(:div, class: HEADER_CLS) do
+        concat content_tag(:span, @brand,
+          class: "truncate font-semibold group-data-[collapsed=true]:hidden") if @brand
+        concat toggle_btn
+      end
+    end
+
+    def toggle_btn
+      content_tag(:button, type: "button",
+        class: TOGGLE_CLS,
+        "aria-label": "Toggle sidebar",
+        data: { action: "click->sidebar#toggle" }) { chevron_icon }
+    end
+
+    def nav_body
+      content_tag(:nav, class: NAV_CLS) do
+        concat safe_join(groups) if groups.any?
+        concat content_tag(:div, safe_join(items), class: "space-y-0.5") if items.any?
+        concat content if content?
+      end
+    end
+
+    def chevron_icon
+      content_tag(:svg,
+        content_tag(:path, nil, d: "m15 18-6-6 6-6", "stroke-linecap": "round", "stroke-linejoin": "round"),
+        xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24",
+        fill: "none", stroke: "currentColor", "stroke-width": "2",
+        class: "size-4 transition-transform group-data-[collapsed=true]:rotate-180",
+        "aria-hidden": "true")
+    end
+
+    class GroupComponent < ApplicationComponent
+      renders_many :items, "UI::SidebarComponent::ItemComponent"
+
+      def initialize(label: nil, **html_attrs)
+        @label      = label
+        @html_attrs = html_attrs
+      end
+
+      def call
+        content_tag(:div, class: "mb-4", **@html_attrs) do
+          concat content_tag(:p, @label, class: SidebarComponent::GROUP_LABEL) if @label
+          concat content_tag(:div, safe_join(items), class: "space-y-0.5")
+          concat content if content?
+        end
+      end
+    end
+
+    class ItemComponent < ApplicationComponent
+      ICONS = {
+        home:        "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10",
+        dashboard:   "M3 3h7v9H3z M14 3h7v5h-7z M14 12h7v9h-7z M3 16h7v6H3z",
+        folder:      "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z",
+        tasks:       "M9 11l3 3L22 4 M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",
+        settings:    "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z",
+        users:       "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75",
+        chart:       "M18 20V10 M12 20V4 M6 20v-6",
+        mail:        "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6",
+        bell:        "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0",
+        credit_card: "M1 4h22v16H1z M1 10h22",
+        logout:      "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4 M16 17l5-5-5-5 M21 12H9",
+      }.freeze
+
+      def initialize(label:, href: "#", active: false, icon: nil, **html_attrs)
+        @label      = label
+        @href       = href
+        @active     = active
+        @icon       = icon
+        @html_attrs = html_attrs
+      end
+
+      def call
+        content_tag(:a,
+          href: @href,
+          class: SidebarComponent::ITEM_CLS,
+          "aria-current": (@active ? "page" : nil),
+          **@html_attrs) do
+          concat icon_or_fallback
+          concat content_tag(:span, @label, class: SidebarComponent::ITEM_LABEL)
+        end
+      end
+
+      private
+
+      def icon_or_fallback
+        path = @icon && ICONS[@icon.to_sym]
+        if path
+          content_tag(:svg,
+            content_tag(:path, nil, d: path, "stroke-linecap": "round", "stroke-linejoin": "round"),
+            xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24",
+            fill: "none", stroke: "currentColor", "stroke-width": "2",
+            class: "size-4 shrink-0",
+            "aria-hidden": "true")
+        else
+          content_tag(:span, @label[0],
+            class: "hidden size-5 shrink-0 items-center justify-center rounded text-xs font-semibold group-data-[collapsed=true]:flex",
+            "aria-hidden": "true")
+        end
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/sidebar/sidebar_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  toggle() {
+    const collapsed = this.element.dataset.collapsed === "true"
+    this.element.dataset.collapsed = String(!collapsed)
+  }
+
+  open()  { this.element.dataset.collapsed = "false" }
+  close() { this.element.dataset.collapsed = "true"  }
+}

data/lib/generators/view_primitives/add/templates/skeleton/skeleton_component.rb.tt

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module UI
+  class SkeletonComponent < ApplicationComponent
+    BASE = "bg-accent animate-pulse rounded-md"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, nil, class: cn(BASE, @extra_class), **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/speed_dial/speed_dial_component.rb.tt

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module UI
+  class SpeedDialComponent < ApplicationComponent
+    # Floating action button that expands into a stack of sub-action buttons.
+    #
+    # Usage:
+    #   ui :speed_dial, icon: :plus do |dial|
+    #     dial.with_action(label: "New document", icon: :file, href: "/docs/new")
+    #     dial.with_action(label: "Upload",        icon: :upload, data: { action: "..." })
+    #   end
+
+    FAB_CLS = "relative z-50 inline-flex size-14 items-center justify-center rounded-full " \
+              "bg-primary text-primary-foreground shadow-lg transition-transform " \
+              "hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-[3px] " \
+              "focus-visible:ring-ring/50 active:scale-95"
+
+    PANEL_CLS = "absolute bottom-16 right-0 flex flex-col-reverse items-end gap-2"
+
+    ACTION_CLS = "flex items-center gap-2 rounded-full bg-background px-4 py-2 text-sm font-medium " \
+                 "shadow-md border border-border transition-all " \
+                 "hover:bg-accent hover:text-accent-foreground " \
+                 "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none " \
+                 "whitespace-nowrap"
+
+    PLUS_PATH  = "M12 5v14M5 12h14"
+
+    renders_many :actions, "UI::SpeedDialComponent::ActionComponent"
+
+    # position: :bottom_right (default) | :bottom_left | :bottom_center
+    def initialize(position: :bottom_right, **html_attrs)
+      @position    = position.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      position_cls = {
+        bottom_right:  "fixed bottom-6 right-6",
+        bottom_left:   "fixed bottom-6 left-6",
+        bottom_center: "fixed bottom-6 left-1/2 -translate-x-1/2"
+      }.fetch(@position, "fixed bottom-6 right-6")
+
+      content_tag(:div,
+        class: cn("relative", position_cls, @extra_class),
+        data: {
+          controller: "speed-dial",
+          action: "click@document->speed-dial#closeOnClickOutside"
+        },
+        **@html_attrs) do
+        concat action_panel
+        concat fab_button
+      end
+    end
+
+    private
+
+    def fab_button
+      content_tag(:button,
+        type: "button",
+        class: FAB_CLS,
+        "aria-expanded": "false",
+        "aria-label": "Open actions",
+        data: {
+          speed_dial_target: "fab",
+          action: "click->speed-dial#toggle"
+        }) do
+        plus_icon
+      end
+    end
+
+    def action_panel
+      content_tag(:div,
+        class: PANEL_CLS,
+        hidden: true,
+        data: { speed_dial_target: "panel" }) do
+        safe_join(actions)
+      end
+    end
+
+    def plus_icon
+      content_tag(:svg,
+        content_tag(:path, nil, d: PLUS_PATH, "stroke-linecap": "round", "stroke-linejoin": "round"),
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        class: "size-6 transition-transform duration-200",
+        "aria-hidden": "true",
+        data: { speed_dial_target: "icon" })
+    end
+
+    class ActionComponent < ApplicationComponent
+      def initialize(label:, href: nil, icon: nil, **html_attrs)
+        @label      = label
+        @href       = href
+        @icon       = icon
+        @html_attrs = html_attrs
+      end
+
+      def call
+        tag_name = @href ? :a : :button
+        attrs    = { class: SpeedDialComponent::ACTION_CLS, **@html_attrs }
+        attrs[:href] = @href if @href
+        attrs[:type] = "button" if tag_name == :button
+        content_tag(tag_name, @label, **attrs)
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/speed_dial/speed_dial_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["fab", "panel", "icon"]
+
+  toggle() {
+    const open = this.panelTarget.hidden
+    this._setOpen(open)
+  }
+
+  closeOnClickOutside(event) {
+    if (!this.element.contains(event.target)) this._setOpen(false)
+  }
+
+  _setOpen(open) {
+    this.panelTarget.hidden = !open
+    this.fabTarget.setAttribute("aria-expanded", String(open))
+    if (this.hasIconTarget) {
+      this.iconTarget.style.transform = open ? "rotate(45deg)" : ""
+    }
+  }
+}

data/lib/generators/view_primitives/add/templates/spinner/spinner_component.rb.tt

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module UI
+  class SpinnerComponent < ApplicationComponent
+    BASE = "inline-block animate-spin rounded-full border-2 border-current border-t-transparent"
+
+    SIZES = {
+      sm: "size-4",
+      default: "size-6",
+      lg: "size-10"
+    }.freeze
+
+    def initialize(size: :default, **html_attrs)
+      @size = size.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:span,
+        content_tag(:span, "Loading...", class: "sr-only"),
+        class: cn(BASE, SIZES.fetch(@size, SIZES[:default]), @extra_class),
+        role: "status",
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/stepper/stepper_component.rb.tt

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module UI
+  class StepperComponent < ApplicationComponent
+    # steps: [{ label:, description: (optional), status: :complete | :current | :pending }]
+    def initialize(steps:, orientation: :horizontal, **html_attrs)
+      @steps = steps
+      @orientation = orientation.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      wrapper_class = @orientation == :vertical \
+        ? "flex flex-col gap-0" \
+        : "flex items-start gap-0"
+
+      content_tag(:ol,
+        class: cn(wrapper_class, @extra_class),
+        "aria-label": "Progress",
+        **@html_attrs) do
+        safe_join(@steps.each_with_index.map { |step, i| step_item(step, i) })
+      end
+    end
+
+    private
+
+    def step_item(step, index)
+      is_last = index == @steps.size - 1
+      status  = step.fetch(:status, :pending).to_sym
+
+      if @orientation == :vertical
+        vertical_item(step, status, is_last)
+      else
+        horizontal_item(step, status, is_last)
+      end
+    end
+
+    def horizontal_item(step, status, is_last)
+      content_tag(:li, class: "flex items-center #{is_last ? '' : 'flex-1'}") do
+        concat step_circle(status, step[:label])
+        concat content_tag(:p, step[:label], class: cn("ml-2 text-sm font-medium whitespace-nowrap", label_color(status))) unless step[:label].nil?
+        concat connector(:horizontal, status) unless is_last
+      end
+    end
+
+    def vertical_item(step, status, is_last)
+      content_tag(:li, class: "relative flex gap-4") do
+        concat content_tag(:div, class: "flex flex-col items-center") {
+          concat step_circle(status, step[:label])
+          concat connector(:vertical, status) unless is_last
+        }
+        concat content_tag(:div, class: "pb-6 pt-0.5 min-w-0") {
+          concat content_tag(:p, step[:label], class: cn("text-sm font-medium", label_color(status)))
+          concat content_tag(:p, step[:description], class: "mt-0.5 text-xs text-muted-foreground") if step[:description]
+        }
+      end
+    end
+
+    def step_circle(status, label)
+      base = "flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold border-2"
+      case status
+      when :complete
+        content_tag(:span, check_svg,
+          class: cn(base, "border-primary bg-primary text-primary-foreground"),
+          "aria-label": "Completed")
+      when :current
+        content_tag(:span, "●",
+          class: cn(base, "border-primary text-primary"),
+          "aria-current": "step")
+      else
+        content_tag(:span, "○",
+          class: cn(base, "border-muted-foreground text-muted-foreground"),
+          "aria-label": "Pending")
+      end
+    end
+
+    def connector(direction, status)
+      filled = status == :complete
+      if direction == :horizontal
+        content_tag(:div, nil, class: cn("h-0.5 flex-1 mx-2", filled ? "bg-primary" : "bg-border"))
+      else
+        content_tag(:div, nil, class: cn("w-0.5 flex-1 my-1", filled ? "bg-primary" : "bg-border"))
+      end
+    end
+
+    def label_color(status)
+      case status
+      when :complete then "text-foreground"
+      when :current  then "text-primary"
+      else "text-muted-foreground"
+      end
+    end
+
+    def check_svg
+      raw('<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>')
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/switch/switch_component.rb.tt

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module UI
+  class SwitchComponent < ApplicationComponent
+    # sr-only input, track label, and thumb are all siblings inside a relative wrapper
+    # so every element can use peer-checked: / peer-focus-visible: / peer-disabled: directly.
+    WRAPPER = "relative inline-flex h-[1.15rem] w-8 shrink-0"
+    TRACK   = "absolute inset-0 cursor-pointer rounded-full border border-transparent shadow-xs " \
+              "transition-all bg-input peer-checked:bg-primary dark:bg-input/80 " \
+              "peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 " \
+              "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+    THUMB   = "pointer-events-none absolute inset-y-0 left-[1px] my-auto z-10 block size-4 rounded-full " \
+              "bg-background ring-0 transition-transform " \
+              "translate-x-0 peer-checked:translate-x-[calc(100%-2px)]"
+
+    def initialize(label: nil, checked: false, **html_attrs)
+      @label = label
+      @checked = checked
+      @id = html_attrs[:id] || html_attrs[:name]&.gsub(/[\[\]]+/, "_") || "switch_#{object_id}"
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, class: cn("inline-flex items-center gap-2", @extra_class)) do
+        concat switch_widget
+        concat text_label if @label
+      end
+    end
+
+    private
+
+    def switch_widget
+      content_tag(:div, class: WRAPPER) do
+        input_attrs = { type: "checkbox", id: @id, class: "peer sr-only", role: "switch",
+                        "aria-checked": @checked.to_s }
+        input_attrs[:checked] = true if @checked
+        input_attrs.merge!(@html_attrs)
+        concat content_tag(:input, nil, **input_attrs)
+        concat content_tag(:label, nil, for: @id, class: TRACK)
+        concat content_tag(:span, nil, class: THUMB, "aria-hidden": "true")
+      end
+    end
+
+    def text_label
+      content_tag(:label, @label,
+        for: @id,
+        class: "cursor-pointer text-sm font-medium leading-none")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/tabs/tabs_component.html.erb

@@ -0,0 +1,50 @@
+<%= tag.div(
+  class: cn("w-full", @extra_class),
+  data: { controller: "tabs", tabs_index_value: @default_index },
+  **@html_attrs
+) do %>
+  <div role="tablist"
+       class="inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground">
+    <% @items_data.each_with_index do |item, i| %>
+      <button type="button"
+              role="tab"
+              data-action="click->tabs#select"
+              data-tabs-index-param="<%= i %>"
+              data-tabs-target="trigger"
+              data-state="<%= i == @default_index ? 'active' : 'inactive' %>"
+              aria-selected="<%= i == @default_index %>"
+              class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow">
+        <%= item[:title] %>
+      </button>
+    <% end %>
+    <% tabs.each_with_index do |tab, i| %>
+      <button type="button"
+              role="tab"
+              data-action="click->tabs#select"
+              data-tabs-index-param="<%= @items_data.size + i %>"
+              data-tabs-target="trigger"
+              data-state="<%= (@items_data.size + i) == @default_index ? 'active' : 'inactive' %>"
+              aria-selected="<%= (@items_data.size + i) == @default_index %>"
+              class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow">
+        <%= tab.title %>
+      </button>
+    <% end %>
+  </div>
+
+  <% @items_data.each_with_index do |item, i| %>
+    <div role="tabpanel"
+         data-tabs-target="panel"
+         class="mt-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+         <%= i != @default_index ? "hidden" : "" %>>
+      <%= item[:content] %>
+    </div>
+  <% end %>
+  <% tabs.each_with_index do |tab, i| %>
+    <div role="tabpanel"
+         data-tabs-target="panel"
+         class="mt-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+         <%= (@items_data.size + i) != @default_index ? "hidden" : "" %>>
+      <%= tab.call %>
+    </div>
+  <% end %>
+<% end %>

data/lib/generators/view_primitives/add/templates/tabs/tabs_component.rb.tt

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module UI
+  class TabsComponent < ApplicationComponent
+    renders_many :tabs, "UI::TabsItemComponent"
+
+    # items:         array shorthand — [{ title:, content: }]
+    # default_index: which tab is open on load (0-based)
+    def initialize(items: nil, default_index: 0, **html_attrs)
+      @items_data    = Array(items)
+      @default_index = default_index.to_i
+      @extra_class   = html_attrs.delete(:class)
+      @html_attrs    = html_attrs
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/tabs/tabs_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { index: Number }
+  static targets = ["trigger", "panel"]
+
+  connect() {
+    this.#render(this.indexValue)
+  }
+
+  select({ params: { index } }) {
+    this.indexValue = index
+    this.#render(index)
+  }
+
+  #render(active) {
+    this.triggerTargets.forEach((trigger, i) => {
+      const isActive = i === active
+      trigger.dataset.state = isActive ? "active" : "inactive"
+      trigger.setAttribute("aria-selected", isActive)
+    })
+    this.panelTargets.forEach((panel, i) => {
+      panel.hidden = i !== active
+    })
+  }
+}

data/lib/generators/view_primitives/add/templates/tabs/tabs_item_component.rb.tt

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UI
+  class TabsItemComponent < ApplicationComponent
+    attr_reader :title
+
+    def initialize(title:)
+      @title = title
+    end
+
+    def call
+      content
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/textarea/textarea_component.rb.tt

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module UI
+  class TextareaComponent < ApplicationComponent
+    BASE = "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 " \
+           "text-base shadow-xs transition-[color,box-shadow] outline-none " \
+           "placeholder:text-muted-foreground " \
+           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+           "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
+           "disabled:cursor-not-allowed disabled:opacity-50 " \
+           "md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:textarea, content,
+        class: cn(BASE, @extra_class),
+        **@html_attrs)
+    end
+  end
+end