keystone_ui 0.6.0

data/app/components/keystone/ui/file_upload_component.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class FileUploadComponent < ViewComponent::Base
+      WRAPPER_CLASSES = "space-y-1"
+      LABEL_CLASSES = "block text-sm font-medium text-gray-700 dark:text-gray-300"
+      DROP_ZONE_CLASSES = "mt-1 flex justify-center rounded-md border-2 border-dashed border-gray-300 px-6 py-8 cursor-pointer dark:border-zinc-600 transition-colors"
+      DROP_ZONE_ACTIVE_CLASSES = "border-accent-500 bg-accent-50 dark:bg-accent-900/10"
+      DROP_ZONE_INNER_CLASSES = "space-y-2 text-center"
+      ICON_CLASSES = "mx-auto h-10 w-10 text-gray-400 dark:text-gray-500"
+      PROMPT_CLASSES = "text-sm text-gray-600 dark:text-gray-400"
+      BROWSE_CLASSES = "font-semibold text-accent-600 hover:text-accent-500 dark:text-accent-400 dark:hover:text-accent-300"
+      HINT_CLASSES = "mt-1 text-xs text-gray-500 dark:text-gray-400"
+      FILE_NAME_CLASSES = "mt-2 text-sm text-gray-700 dark:text-gray-300 truncate"
+      FILE_INPUT_CLASSES = "sr-only"
+
+      UPLOAD_ICON = <<~SVG.freeze
+        <svg class="#{ICON_CLASSES}" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+          <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      SVG
+
+      def initialize(name:, label: nil, accept: nil, multiple: false, hint: nil)
+        @name = name
+        @label = label
+        @accept = accept
+        @multiple = multiple
+        @hint = hint
+      end
+
+      def input_name
+        @name
+      end
+
+      def label_text
+        @label || "Choose file"
+      end
+
+      def accept
+        @accept
+      end
+
+      def multiple?
+        @multiple
+      end
+
+      def hint?
+        !@hint.nil?
+      end
+
+      def hint_text
+        @hint
+      end
+
+      def prompt_text
+        multiple? ? "Drop files here or" : "Drop file here or"
+      end
+
+      def wrapper_data
+        { controller: "file-upload" }
+      end
+
+      def drop_zone_data
+        { "file-upload-target": "dropZone" }
+      end
+
+      def input_data
+        { "file-upload-target": "input", action: "change->file-upload#select" }
+      end
+
+      def tag_options
+        options = {
+          type: "file",
+          name: @name,
+          class: FILE_INPUT_CLASSES,
+          data: { "file-upload-target": "input", action: "change->file-upload#select" }
+        }
+        options[:accept] = @accept if @accept
+        options[:multiple] = true if @multiple
+        options
+      end
+    end
+  end
+end

data/app/components/keystone/ui/form_component.html.erb

@@ -0,0 +1,3 @@
+<%= form_with(**form_options) do %>
+  <%= content %>
+<% end %>

data/app/components/keystone/ui/form_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class FormComponent < ViewComponent::Base
+      FORM_CLASSES = "space-y-6"
+
+      def initialize(action:, method: :post, multipart: false, data: nil)
+        @action = action
+        @method = method.to_sym
+        @multipart = multipart
+        @data = data
+      end
+
+      def form_options
+        options = {
+          url: @action,
+          method: @method,
+          class: FORM_CLASSES,
+          multipart: @multipart
+        }
+        options[:data] = @data if @data
+        options
+      end
+    end
+  end
+end

data/app/components/keystone/ui/form_field_component.html.erb

@@ -0,0 +1,36 @@
+<div class="<%= WRAPPER_CLASSES %>">
+  <% unless checkbox? %>
+    <label class="<%= LABEL_CLASSES %>">
+      <%= label_text %><% if required? %><span class="<%= REQUIRED_CLASSES %>">*</span><% end %>
+    </label>
+  <% end %>
+
+  <% if checkbox? %>
+    <div class="<%= CHECKBOX_WRAPPER_CLASSES %>">
+      <input type="hidden" name="<%= @attribute %>" value="0">
+      <input type="checkbox" name="<%= @attribute %>" value="1" class="<%= CHECKBOX_CLASSES %>"<%= " checked" if @value.to_s == "1" %>>
+      <span class="text-sm text-gray-700 dark:text-gray-300"><%= label_text %></span>
+    </div>
+  <% elsif textarea? %>
+    <textarea name="<%= @attribute %>" rows="3" class="<%= Keystone::Ui::TextareaComponent::BASE_CLASSES %>"<% if @placeholder %> placeholder="<%= @placeholder %>"<% end %>><%= @value %></textarea>
+  <% elsif select? %>
+    <select name="<%= @attribute %>" class="<%= Keystone::Ui::SelectComponent::BASE_CLASSES %> <%= Keystone::Ui::SelectComponent::FOCUS_CLASSES %>">
+      <% unless required? %><option value=""></option><% end %>
+      <% select_options.each do |label, value| %>
+        <option value="<%= value %>" <%= "selected" if @value.to_s == value.to_s %>><%= label %></option>
+      <% end %>
+    </select>
+  <% else %>
+    <%= tag.input(**input_options) %>
+  <% end %>
+
+  <% if hint? %>
+    <p class="<%= HINT_CLASSES %>"><%= hint_text %></p>
+  <% end %>
+
+  <% if errors? %>
+    <% error_messages.each do |message| %>
+      <p class="<%= ERROR_CLASSES %>"><%= message %></p>
+    <% end %>
+  <% end %>
+</div>

data/app/components/keystone/ui/form_field_component.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class FormFieldComponent < ViewComponent::Base
+      WRAPPER_CLASSES = "space-y-1"
+      LABEL_CLASSES = "block text-sm font-medium text-gray-700 dark:text-gray-300"
+      REQUIRED_CLASSES = "text-red-500 ml-0.5"
+      HINT_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400"
+      ERROR_CLASSES = "mt-1 text-sm text-red-600 dark:text-red-400"
+      CHECKBOX_CLASSES = "rounded border-gray-300 text-accent-600 focus:ring-accent-500 dark:border-zinc-600 dark:bg-zinc-900"
+      CHECKBOX_WRAPPER_CLASSES = "flex items-center gap-2"
+
+      def initialize(attribute:, label: nil, type: :text, required: false, hint: nil, placeholder: nil, min: nil, max: nil, step: nil, value: nil, options: [], errors: [])
+        @attribute = attribute
+        @label = label
+        @type = type
+        @required = required
+        @hint = hint
+        @placeholder = placeholder
+        @min = min
+        @max = max
+        @step = step
+        @value = value
+        @options = options
+        @errors = Array(errors)
+      end
+
+      def label_text
+        @label || @attribute.to_s.tr("_", " ").capitalize
+      end
+
+      def required?
+        @required
+      end
+
+      def hint?
+        !@hint.nil?
+      end
+
+      def hint_text
+        @hint
+      end
+
+      def errors?
+        @errors.any?
+      end
+
+      def error_messages
+        @errors
+      end
+
+      def textarea?
+        @type == :textarea
+      end
+
+      def checkbox?
+        @type == :checkbox
+      end
+
+      def select?
+        @type == :select
+      end
+
+      def select_options
+        @options
+      end
+
+      def input_options
+        options = { name: @attribute.to_s, class: Keystone::Ui::InputComponent::BASE_CLASSES }
+        unless textarea?
+          options[:type] = Keystone::Ui::InputComponent::TYPE_MAP.fetch(@type)
+        end
+        options[:placeholder] = @placeholder unless @placeholder.nil?
+        options[:value] = @value unless @value.nil?
+        options[:min] = @min unless @min.nil?
+        options[:max] = @max unless @max.nil?
+        options[:step] = @step unless @step.nil?
+        options
+      end
+    end
+  end
+end

data/app/components/keystone/ui/form_page_component.html.erb

@@ -0,0 +1,10 @@
+<% content_for :form_page, true %>
+<% content_for :form_page_title, @title %>
+<% content_for :form_page_back_url, @back_url %>
+
+<div class="<%= DESKTOP_WRAPPER_CLASSES %>">
+  <h1 class="<%= TITLE_CLASSES %>"><%= @title %></h1>
+  <% if subtitle? %>
+    <p class="<%= SUBTITLE_CLASSES %>"><%= @subtitle %></p>
+  <% end %>
+</div>

data/app/components/keystone/ui/form_page_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class FormPageComponent < ViewComponent::Base
+      DESKTOP_WRAPPER_CLASSES = "hidden md:block"
+      TITLE_CLASSES = "text-2xl font-semibold text-gray-900 dark:text-white"
+      SUBTITLE_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400"
+
+      def initialize(title:, back_url:, subtitle: nil)
+        @title = title
+        @back_url = back_url
+        @subtitle = subtitle
+      end
+
+      def subtitle?
+        !@subtitle.nil?
+      end
+    end
+  end
+end

data/app/components/keystone/ui/funnel_component.html.erb

@@ -0,0 +1,14 @@
+<div class="<%= container_classes %>">
+  <% layers.each do |layer| %>
+    <% if layer.conversion_percent %>
+      <div class="<%= transition_classes %>">↓ <%= layer.conversion_percent %>%</div>
+    <% end %>
+    <div class="<%= layer_classes %>">
+      <div class="<%= row_classes %>">
+        <span class="<%= label_classes %>"><%= layer.label %></span>
+        <span class="<%= value_classes %>"><%= layer.value %></span>
+      </div>
+      <div class="<%= bar_classes %>" style="width: <%= layer.width_percent %>%"></div>
+    </div>
+  <% end %>
+</div>

data/app/components/keystone/ui/funnel_component.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class FunnelComponent < ViewComponent::Base
+      Layer = Struct.new(:label, :value, :width_percent, :conversion_percent, keyword_init: true)
+
+      CONTAINER_CLASSES = "space-y-2"
+      LAYER_CLASSES = "space-y-1"
+      ROW_CLASSES = "flex items-baseline justify-between gap-3"
+      LABEL_CLASSES = "text-sm font-medium text-surface-700 truncate"
+      VALUE_CLASSES = "text-sm font-semibold text-surface-900 tabular-nums"
+      BAR_CLASSES = "h-8 rounded-md bg-accent-500 transition-all"
+      TRANSITION_CLASSES = "py-1 text-center text-xs text-surface-500"
+
+      attr_reader :steps
+
+      def initialize(steps:)
+        @steps = steps
+      end
+
+      def layers
+        previous = nil
+
+        steps.map do |step|
+          layer = Layer.new(
+            label: step[:label],
+            value: step[:value],
+            width_percent: width_percent(step[:value]),
+            conversion_percent: conversion_percent(step[:value], previous)
+          )
+          previous = step[:value]
+          layer
+        end
+      end
+
+      def container_classes
+        CONTAINER_CLASSES
+      end
+
+      def layer_classes
+        LAYER_CLASSES
+      end
+
+      def row_classes
+        ROW_CLASSES
+      end
+
+      def bar_classes
+        BAR_CLASSES
+      end
+
+      def label_classes
+        LABEL_CLASSES
+      end
+
+      def value_classes
+        VALUE_CLASSES
+      end
+
+      def transition_classes
+        TRANSITION_CLASSES
+      end
+
+      private
+
+      def conversion_percent(value, previous)
+        return nil if previous.nil?
+        return 0 if previous.zero?
+
+        (value.to_f / previous * 100).round
+      end
+
+      def top_value
+        steps.first[:value].to_f
+      end
+
+      def width_percent(value)
+        return 0 if top_value.zero?
+
+        (value.to_f / top_value * 100).round
+      end
+    end
+  end
+end

data/app/components/keystone/ui/grid_component.html.erb

@@ -0,0 +1,3 @@
+<div class="<%= classes %>">
+  <%= content %>
+</div>

data/app/components/keystone/ui/grid_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class GridComponent < ViewComponent::Base
+      GAP_CLASSES = { sm: "gap-3", md: "gap-4", lg: "gap-6", xl: "gap-8" }.freeze
+      GAP_X_CLASSES = { sm: "gap-x-3", md: "gap-x-4", lg: "gap-x-6", xl: "gap-x-8" }.freeze
+      GAP_Y_CLASSES = { sm: "gap-y-3", md: "gap-y-4", lg: "gap-y-6", xl: "gap-y-8" }.freeze
+      COL_CLASSES = {
+        default: { 1 => "grid-cols-1", 2 => "grid-cols-2", 3 => "grid-cols-3", 4 => "grid-cols-4", 5 => "grid-cols-5", 6 => "grid-cols-6", 7 => "grid-cols-7", 8 => "grid-cols-8", 9 => "grid-cols-9", 10 => "grid-cols-10", 11 => "grid-cols-11", 12 => "grid-cols-12" }.freeze,
+        sm: { 1 => "sm:grid-cols-1", 2 => "sm:grid-cols-2", 3 => "sm:grid-cols-3", 4 => "sm:grid-cols-4", 5 => "sm:grid-cols-5", 6 => "sm:grid-cols-6", 7 => "sm:grid-cols-7", 8 => "sm:grid-cols-8", 9 => "sm:grid-cols-9", 10 => "sm:grid-cols-10", 11 => "sm:grid-cols-11", 12 => "sm:grid-cols-12" }.freeze,
+        md: { 1 => "md:grid-cols-1", 2 => "md:grid-cols-2", 3 => "md:grid-cols-3", 4 => "md:grid-cols-4", 5 => "md:grid-cols-5", 6 => "md:grid-cols-6", 7 => "md:grid-cols-7", 8 => "md:grid-cols-8", 9 => "md:grid-cols-9", 10 => "md:grid-cols-10", 11 => "md:grid-cols-11", 12 => "md:grid-cols-12" }.freeze,
+        lg: { 1 => "lg:grid-cols-1", 2 => "lg:grid-cols-2", 3 => "lg:grid-cols-3", 4 => "lg:grid-cols-4", 5 => "lg:grid-cols-5", 6 => "lg:grid-cols-6", 7 => "lg:grid-cols-7", 8 => "lg:grid-cols-8", 9 => "lg:grid-cols-9", 10 => "lg:grid-cols-10", 11 => "lg:grid-cols-11", 12 => "lg:grid-cols-12" }.freeze
+      }.freeze
+
+      def initialize(cols: { default: 1 }, gap: :md, gap_x: nil, gap_y: nil)
+        @cols = cols
+        @gap = gap
+        @gap_x = gap_x
+        @gap_y = gap_y
+      end
+
+      def classes
+        tokens = [ "grid" ]
+        if @gap_x || @gap_y
+          tokens << GAP_X_CLASSES.fetch(@gap_x) if @gap_x
+          tokens << GAP_Y_CLASSES.fetch(@gap_y) if @gap_y
+        else
+          tokens << GAP_CLASSES.fetch(@gap)
+        end
+        @cols.each do |breakpoint, count|
+          tokens << COL_CLASSES.fetch(breakpoint).fetch(count)
+        end
+        tokens.join(" ")
+      end
+    end
+  end
+end

data/app/components/keystone/ui/hero_component.html.erb

@@ -0,0 +1,27 @@
+<section class="<%= classes %>">
+  <div class="<%= inner_classes %>">
+    <div class="<%= content_classes %>">
+      <div class="<%= inner_content_classes %>">
+        <% if badge? %>
+          <span class="<%= badge_classes %>"><%= badge %></span>
+        <% end %>
+
+        <h1 class="<%= title_classes %>"><%= title %></h1>
+
+        <% if subtitle? %>
+          <p class="<%= subtitle_classes %>"><%= subtitle %></p>
+        <% end %>
+
+        <div class="<%= actions_classes %>">
+          <%= content %>
+        </div>
+      </div>
+
+      <% if aside? %>
+        <div class="min-w-0">
+          <%= aside %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/components/keystone/ui/hero_component.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class HeroComponent < ViewComponent::Base
+      WRAPPER_CLASSES = "relative min-h-screen pt-24"
+      INNER_CLASSES = "mx-auto max-w-6xl px-6 py-24 lg:py-32"
+
+      CONTENT_COLUMN_CLASSES = "flex flex-col gap-8"
+      CENTERED_COLUMN_CLASSES = "items-center"
+
+      SPLIT_CLASSES = "grid gap-12 lg:grid-cols-2 lg:gap-16 items-center"
+      CENTERED_CLASSES = "flex flex-col items-center text-center"
+
+      TITLE_BASE_CLASSES = "text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl"
+      SUBTITLE_BASE_CLASSES = "max-w-lg text-lg"
+      BADGE_BASE_CLASSES = "inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1.5 text-sm"
+      ACTIONS_CLASSES = "flex flex-wrap gap-4"
+
+      renders_one :aside
+
+      attr_reader :title, :subtitle, :badge
+
+      def initialize(title:, subtitle: nil, badge: nil, layout: :split)
+        @title = title
+        @subtitle = subtitle
+        @badge = badge
+        @layout = layout
+      end
+
+      def classes
+        WRAPPER_CLASSES
+      end
+
+      def inner_classes
+        INNER_CLASSES
+      end
+
+      def content_classes
+        @layout == :centered ? CENTERED_CLASSES : SPLIT_CLASSES
+      end
+
+      def inner_content_classes
+        return CONTENT_COLUMN_CLASSES unless @layout == :centered
+
+        "#{CONTENT_COLUMN_CLASSES} #{CENTERED_COLUMN_CLASSES}"
+      end
+
+      def title_classes
+        "#{TITLE_BASE_CLASSES} text-surface-900 dark:text-white"
+      end
+
+      def subtitle_classes
+        "#{SUBTITLE_BASE_CLASSES} text-surface-500 dark:text-surface-400"
+      end
+
+      def subtitle?
+        !@subtitle.nil?
+      end
+
+      def badge_classes
+        "#{BADGE_BASE_CLASSES} border-accent-500/20 bg-accent-500/10 text-accent-600 dark:text-accent-400"
+      end
+
+      def badge?
+        !@badge.nil?
+      end
+
+      def actions_classes
+        ACTIONS_CLASSES
+      end
+    end
+  end
+end

data/app/components/keystone/ui/input_component.html.erb

@@ -0,0 +1 @@
+<%= tag.input(**tag_options) %>

data/app/components/keystone/ui/input_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class InputComponent < ViewComponent::Base
+      BASE_CLASSES = "block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 dark:bg-zinc-900 dark:border-zinc-700 dark:text-white dark:placeholder:text-gray-500"
+
+      DISABLED_CLASSES = "cursor-not-allowed bg-gray-50 text-gray-500 dark:bg-zinc-800 dark:text-gray-400"
+
+      TYPE_MAP = {
+        text: "text",
+        number: "number",
+        email: "email",
+        password: "password",
+        date: "date"
+      }.freeze
+
+      def initialize(name:, type: :text, value: nil, placeholder: nil, disabled: false, min: nil, max: nil, step: nil)
+        @name = name
+        @type = type
+        @value = value
+        @placeholder = placeholder
+        @disabled = disabled
+        @min = min
+        @max = max
+        @step = step
+      end
+
+      FOCUS_CLASSES = "focus:border-accent-500 focus:ring-accent-500 dark:focus:border-accent-400 dark:focus:ring-accent-400"
+
+      def classes
+        tokens = [ BASE_CLASSES, FOCUS_CLASSES ]
+        tokens << DISABLED_CLASSES if @disabled
+        tokens.join(" ")
+      end
+
+      def input_type
+        TYPE_MAP.fetch(@type)
+      end
+
+      def tag_options
+        options = {
+          type: input_type,
+          name: @name,
+          class: classes
+        }
+        options[:value] = @value unless @value.nil?
+        options[:placeholder] = @placeholder unless @placeholder.nil?
+        options[:disabled] = true if @disabled
+        options[:min] = @min unless @min.nil?
+        options[:max] = @max unless @max.nil?
+        options[:step] = @step unless @step.nil?
+        options
+      end
+    end
+  end
+end

data/app/components/keystone/ui/line_chart_component.html.erb

@@ -0,0 +1,3 @@
+<div class="<%= container_classes %>" data-controller="line-chart" data-line-chart-data-value="<%= chart_data_json %>">
+  <canvas class="max-w-full" data-line-chart-target="canvas"></canvas>
+</div>

data/app/components/keystone/ui/line_chart_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require "json"
+
+module Keystone
+  module Ui
+    class LineChartComponent < ViewComponent::Base
+      HEIGHT_CLASSES = {
+        sm: "h-48",
+        md: "h-64",
+        lg: "h-96"
+      }.freeze
+
+      DASH_PATTERN = [ 6, 6 ].freeze
+
+      def initialize(series:, labels:, height: :md)
+        @series = series
+        @labels = labels
+        @height = height
+      end
+
+      def chart_data
+        { labels: @labels, datasets: @series.map { |s| dataset_for(s) } }
+      end
+
+      def chart_data_json
+        chart_data.to_json
+      end
+
+      def height_class
+        HEIGHT_CLASSES.fetch(@height)
+      end
+
+      def container_classes
+        "#{height_class} relative w-full min-w-0"
+      end
+
+      private
+
+      def dataset_for(series)
+        dataset = { label: series[:name], data: series[:data] }
+        dataset[:borderColor] = series[:color] if series[:color]
+        dataset[:borderDash] = DASH_PATTERN if series[:dashed]
+        dataset
+      end
+    end
+  end
+end

data/app/components/keystone/ui/mobile_actions_component.html.erb

@@ -0,0 +1,11 @@
+<div class="<%= WRAPPER_CLASSES %>" data-controller="dropdown">
+  <button type="button"
+          data-action="click->dropdown#toggle click@window->dropdown#hide"
+          class="<%= BUTTON_CLASSES %>"
+          aria-label="Actions">
+    <%= ELLIPSIS_ICON.html_safe %>
+  </button>
+  <div data-dropdown-target="menu" class="<%= DROPDOWN_CLASSES %>">
+    <%= content %>
+  </div>
+</div>

data/app/components/keystone/ui/mobile_actions_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class MobileActionsComponent < ViewComponent::Base
+      ELLIPSIS_ICON = <<~SVG.freeze
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+        </svg>
+      SVG
+
+      WRAPPER_CLASSES = "relative lg:hidden"
+      BUTTON_CLASSES = "text-gray-500 dark:text-gray-400"
+      DROPDOWN_CLASSES = "hidden absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10"
+
+      def wrapper_data
+        { controller: "dropdown" }
+      end
+    end
+  end
+end

data/app/components/keystone/ui/mobile_header_component.html.erb

@@ -0,0 +1,11 @@
+<div class="<%= WRAPPER_CLASSES %>">
+  <%= link_to @back_url, class: BACK_LINK_CLASSES, aria: { label: "Back" } do %>
+    <%= BACK_ICON.html_safe %>
+  <% end %>
+</div>
+<span class="<%= TITLE_CLASSES %>">
+  <%= @title %>
+  <% if @subtitle.present? %>
+    <span class="<%= SUBTITLE_CLASSES %>"><%= @subtitle %></span>
+  <% end %>
+</span>