keystone_ui 0.6.0

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

@@ -0,0 +1,37 @@
+<div class="relative inline-block" data-controller="<%= controller_name %>" data-color-picker-value-value="<%= value %>">
+  <% if label %>
+    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><%= label %></label>
+  <% end %>
+
+  <div class="flex items-center gap-2">
+    <button type="button"
+      class="<%= swatch_classes %>"
+      style="background-color: <%= value %>;"
+      data-color-picker-target="swatch"
+      data-action="color-picker#toggle">
+    </button>
+    <span class="text-sm text-gray-500 dark:text-gray-400" data-color-picker-target="hexLabel"><%= value %></span>
+  </div>
+
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-color-picker-target="input">
+
+  <div class="<%= panel_classes %>" data-color-picker-target="panel">
+    <%# Saturation/Value gradient area %>
+    <div class="w-48 h-36 rounded cursor-crosshair relative mb-2"
+      data-color-picker-target="svArea"
+      data-action="pointerdown->color-picker#svDown">
+      <div class="absolute inset-0 rounded" style="background: linear-gradient(to right, #fff, hsl(0, 100%, 50%));" data-color-picker-target="svGradient"></div>
+      <div class="absolute inset-0 rounded" style="background: linear-gradient(to bottom, transparent, #000);"></div>
+      <div class="absolute w-3 h-3 rounded-full border-2 border-white shadow -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+        data-color-picker-target="svCursor"
+        style="left: 100%; top: 0;">
+      </div>
+    </div>
+
+    <%# Hue slider %>
+    <input type="range" min="0" max="360" value="0"
+      class="w-48 keystone-hue-slider"
+      data-color-picker-target="hueSlider"
+      data-action="input->color-picker#hueChanged">
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class ColorPickerComponent < ViewComponent::Base
+      SWATCH_CLASSES = "w-10 h-10 rounded-lg border border-gray-300 dark:border-zinc-600 cursor-pointer"
+
+      PANEL_CLASSES = "absolute z-50 mt-2 p-3 rounded-lg shadow-lg bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 hidden"
+
+      attr_reader :name, :value, :label
+
+      def initialize(name:, value: "#000000", label: nil)
+        @name = name
+        @value = value
+        @label = label
+      end
+
+      def controller_name
+        "color-picker"
+      end
+
+      def swatch_classes
+        SWATCH_CLASSES
+      end
+
+      def panel_classes
+        PANEL_CLASSES
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class Column
+      attr_reader :key, :header_text
+
+      def initialize(key, header_text, mobile_hidden: false, sortable: false, hideable: false)
+        @key = key
+        @header_text = header_text
+        @mobile_hidden = mobile_hidden
+        @sortable = sortable
+        @hideable = hideable
+      end
+
+      def mobile_hidden? = @mobile_hidden
+      def sortable? = @sortable
+      def hideable? = @hideable
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<div class="<%= WRAPPER_CLASSES %>" data-controller="column-picker" <% if @save_url %>data-column-picker-save-url-value="<%= @save_url %>"<% end %>>
+  <button type="button"
+          data-action="click->column-picker#toggle"
+          class="<%= TRIGGER_CLASSES %>">
+    <%= COLUMNS_ICON.html_safe %>
+    Columns
+  </button>
+  <div data-column-picker-target="menu" class="<%= MENU_CLASSES %>">
+    <% hideable_columns.each do |col| %>
+      <label class="<%= OPTION_CLASSES %>">
+        <input type="checkbox"
+               value="<%= col.key %>"
+               <%= "checked" unless hidden?(col.key) %>
+               data-action="change->column-picker#save"
+               class="<%= CHECKBOX_CLASSES %>">
+        <%= col.header_text %>
+      </label>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class ColumnPickerComponent < ViewComponent::Base
+      WRAPPER_CLASSES = "relative inline-block"
+      TRIGGER_CLASSES = "inline-flex items-center gap-1 rounded-md border px-3 py-2 text-sm border-gray-300 bg-white text-gray-900 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"
+      MENU_CLASSES = "absolute right-0 z-10 mt-1 w-56 rounded-md border border-gray-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900 hidden"
+      OPTION_CLASSES = "flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-zinc-800 cursor-pointer"
+      CHECKBOX_CLASSES = "rounded border-gray-300 text-accent-600 focus:ring-accent-500 dark:border-zinc-600"
+
+      COLUMNS_ICON = <<~SVG.freeze
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+          <path fill-rule="evenodd" d="M.99 5.24A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25l.01 9.5A2.25 2.25 0 0 1 16.76 17H3.26A2.25 2.25 0 0 1 1 14.75l-.01-9.5Zm8.26 9.52v-3.5l-2.25.01v3.5l2.25-.01Zm1.5 0 2.25.01v-3.5l-2.25-.01v3.5Zm-1.5-5v-3.5l-2.25.01v3.49l2.25.01Zm1.5-.01 2.25.01v-3.5l-2.25-.01v3.5Z" clip-rule="evenodd" />
+        </svg>
+      SVG
+
+      attr_reader :save_url
+
+      def initialize(columns:, hidden_columns: [], save_url: nil)
+        @columns = columns
+        @hidden_keys = Array(hidden_columns).map(&:to_sym).to_set
+        @save_url = save_url
+      end
+
+      def hideable_columns
+        @columns.select(&:hideable?)
+      end
+
+      def hidden?(key)
+        @hidden_keys.include?(key.to_sym)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<button
+  type="button"
+  class="<%= classes %>"
+  data-controller="clipboard"
+  data-action="click->clipboard#copy"
+  data-clipboard-text="<%= text %>"
+  data-clipboard-success-message-value="<%= success_message %>"
+  data-clipboard-error-message-value="<%= error_message %>">
+  <%= copy_icon.html_safe %>
+  <%= label %>
+</button>

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class CopyButtonComponent < ViewComponent::Base
+      BUTTON_CLASSES = "inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-zinc-600 dark:bg-zinc-800 dark:text-gray-300 dark:hover:bg-zinc-700"
+
+      COPY_ICON = <<~SVG.freeze
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+      SVG
+
+      attr_reader :text, :label, :success_message, :error_message
+
+      def initialize(text:, label: "Copy", success_message: "Copied!", error_message: "Failed!")
+        @text = text
+        @label = label
+        @success_message = success_message
+        @error_message = error_message
+      end
+
+      def classes
+        BUTTON_CLASSES
+      end
+
+      def copy_icon
+        COPY_ICON
+      end
+
+      def wrapper_data
+        {
+          controller: "clipboard",
+          "clipboard-text": @text,
+          "clipboard-success-message-value": @success_message,
+          "clipboard-error-message-value": @error_message
+        }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<div class="<%= classes %>">
+  <h2 class="<%= title_classes %>"><%= title %></h2>
+  <% if subtitle? %>
+    <p class="<%= subtitle_classes %>"><%= subtitle %></p>
+  <% end %>
+  <div class="<%= actions_classes %>">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class CtaBannerComponent < ViewComponent::Base
+      CARD_LAYOUT_CLASSES = "rounded-2xl border px-6 py-12 text-center lg:px-16 lg:py-16"
+      TITLE_BASE_CLASSES = "mb-4 text-3xl font-bold tracking-tight sm:text-4xl"
+      SUBTITLE_BASE_CLASSES = "mx-auto mb-8 max-w-2xl text-lg"
+      ACTIONS_CLASSES = "flex flex-wrap justify-center gap-4"
+
+      attr_reader :title, :subtitle
+
+      def initialize(title:, subtitle: nil)
+        @title = title
+        @subtitle = subtitle
+      end
+
+      def classes
+        "#{CARD_LAYOUT_CLASSES} border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800"
+      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 actions_classes
+        ACTIONS_CLASSES
+      end
+    end
+  end
+end

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

@@ -0,0 +1,54 @@
+<div class="overflow-hidden rounded-lg border border-gray-200 shadow-sm dark:border-zinc-700 dark:shadow-none">
+  <table class="relative min-w-full divide-y divide-gray-300 dark:divide-white/15">
+    <thead class="bg-gray-50 dark:bg-gray-800/75">
+      <tr>
+        <% header_cells.each do |cell| %>
+          <th scope="<%= cell[:scope] %>" class="<%= cell[:classes] %>">
+            <% if cell[:sort_href] %>
+              <a href="<%= cell[:sort_href] %>" class="<%= Keystone::Ui::DataTableComponent::SORT_LINK_CLASSES %>" data-turbo-action="replace">
+                <%= cell[:label] %>
+                <% if cell[:sort_active] %>
+                  <span class="<%= Keystone::Ui::DataTableComponent::SORT_ICON_CLASSES %> <%= Keystone::Ui::DataTableComponent::SORT_ICON_ACTIVE %>"><%= (cell[:sort_direction] == :asc ? Keystone::Ui::DataTableComponent::SORT_ASC_ICON : Keystone::Ui::DataTableComponent::SORT_DESC_ICON).html_safe %></span>
+                <% else %>
+                  <span class="<%= Keystone::Ui::DataTableComponent::SORT_ICON_CLASSES %> <%= Keystone::Ui::DataTableComponent::SORT_ICON_INACTIVE %>"><%= Keystone::Ui::DataTableComponent::SORT_NEUTRAL_ICON.html_safe %></span>
+                <% end %>
+              </a>
+            <% else %>
+              <%= cell[:label] %>
+            <% end %>
+          </th>
+        <% end %>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-gray-800/50">
+      <% if empty? %>
+        <% if @empty_message %>
+          <tr>
+            <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-400" colspan="<%= column_count %>">
+              <%= @empty_message %>
+            </td>
+          </tr>
+        <% end %>
+      <% else %>
+        <% @items.each_with_index do |item, idx| %>
+          <tr>
+            <% row_cells[idx].each do |cell| %>
+              <td class="<%= cell[:classes] %>">
+                <% if cell[:href] %>
+                  <a href="<%= cell[:href] %>"><%= cell[:value] %></a>
+                <% else %>
+                  <%= cell[:value] %>
+                <% end %>
+              </td>
+            <% end %>
+            <% if actions? %>
+              <td class="<%= Keystone::Ui::DataTableComponent::ROW_CLASSES_LAST %>">
+                <%= capture(item, &@actions_block) %>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      <% end %>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,173 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class DataTableComponent < ViewComponent::Base
+      HEADER_CLASSES_FIRST = "py-3.5 pr-3 pl-6 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+      HEADER_CLASSES_MIDDLE = "px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
+      HEADER_CLASSES_LAST = "py-3.5 pr-6 pl-3"
+
+      ROW_CLASSES_FIRST = "py-4 pr-3 pl-6 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white"
+      ROW_CLASSES_MIDDLE = "px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400"
+      ROW_CLASSES_LAST = "py-4 pr-6 pl-3 text-right text-sm font-medium whitespace-nowrap"
+
+      MOBILE_HIDDEN_CLASSES = "hidden sm:table-cell"
+
+      SORT_LINK_CLASSES = "group inline-flex items-center gap-1"
+      SORT_ICON_CLASSES = "h-4 w-4 flex-shrink-0"
+      SORT_ICON_ACTIVE = "text-gray-700 dark:text-gray-300"
+      SORT_ICON_INACTIVE = "text-gray-400 dark:text-gray-500 invisible group-hover:visible"
+
+      SORT_ASC_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" /></svg>'
+      SORT_DESC_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 0 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" /></svg>'
+      SORT_NEUTRAL_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .55.24l3.25 3.5a.75.75 0 1 1-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 0 1-1.1-1.02l3.25-3.5A.75.75 0 0 1 10 3Zm-3.76 9.2a.75.75 0 0 1 1.06.04l2.7 2.908 2.7-2.908a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 0 1 .04-1.06Z" clip-rule="evenodd" /></svg>'
+
+      def initialize(items:, columns:, empty_message: nil, sort: nil, sort_direction: nil, sort_url: nil, hidden_columns: [])
+        @items = items
+        all_columns = columns.map { |col| normalize_column(col) }
+        hidden_keys = Array(hidden_columns).map(&:to_sym).to_set
+        @columns = all_columns.reject { |col| col.hideable? && hidden_keys.include?(col.key) }
+        @empty_message = empty_message
+        @sort = sort&.to_sym
+        @sort_direction = sort_direction&.to_sym
+        @sort_url = sort_url
+        @actions_block = nil
+        @link_blocks = {}
+      end
+
+      def before_render
+        content
+      end
+
+      def link(column_key, &block)
+        @link_blocks[column_key] = block
+      end
+
+      def actions(&block)
+        @actions_block = block
+      end
+
+      def actions?
+        !!@actions_block
+      end
+
+      def column_keys
+        @column_keys ||= @columns.map(&:key)
+      end
+
+      def column_labels
+        @column_labels ||= @columns.map(&:header_text)
+      end
+
+      def header_cells
+        cells = @columns.map.with_index do |column, index|
+          tokens = [ header_classes_for(index) ]
+          tokens << MOBILE_HIDDEN_CLASSES if column.mobile_hidden?
+
+          cell = {
+            label: column.header_text,
+            classes: tokens.join(" "),
+            scope: "col"
+          }
+
+          if @sort_url
+            active = column.sortable? && @sort == column.key
+            cell[:sortable] = column.sortable?
+
+            if column.sortable?
+              if active
+                cell[:sort_active] = true
+                cell[:sort_direction] = @sort_direction
+                next_dir = @sort_direction == :asc ? :desc : :asc
+              else
+                cell[:sort_active] = false
+                next_dir = :asc
+              end
+              cell[:sort_href] = @sort_url.call(column.key, next_dir)
+            end
+          end
+
+          cell
+        end
+
+        if actions?
+          cells << {
+            label: "Actions",
+            classes: HEADER_CLASSES_LAST,
+            scope: "col"
+          }
+        end
+
+        cells
+      end
+
+      def row_cells
+        @row_cells ||= @items.map do |item|
+          @columns.map.with_index do |column, index|
+            tokens = [ row_classes_for(index) ]
+            tokens << MOBILE_HIDDEN_CLASSES if column.mobile_hidden?
+
+            cell = {
+              value: resolve_value(item, column.key),
+              classes: tokens.join(" ")
+            }
+
+            link_block = @link_blocks[column.key]
+            cell[:href] = link_block.call(item) if link_block
+
+            cell
+          end
+        end
+      end
+
+      def empty?
+        @items.empty?
+      end
+
+      def column_count
+        visual_column_count
+      end
+
+      private
+
+      def visual_column_count
+        @columns.length + (actions? ? 1 : 0)
+      end
+
+      def normalize_column(col)
+        case col
+        when Column then col
+        when Hash
+          key, label = col.first
+          Column.new(key, label)
+        end
+      end
+
+      def resolve_value(item, key)
+        if item.respond_to?(key)
+          item.public_send(key)
+        else
+          item[key]
+        end
+      end
+
+      def header_classes_for(index)
+        last_data_index = @columns.length - 1
+
+        return HEADER_CLASSES_FIRST if index.zero?
+        return HEADER_CLASSES_LAST if index == last_data_index && !actions?
+
+        HEADER_CLASSES_MIDDLE
+      end
+
+      def row_classes_for(index)
+        last_data_index = @columns.length - 1
+
+        return ROW_CLASSES_FIRST if index.zero?
+        return ROW_CLASSES_LAST if index == last_data_index && !actions?
+
+        ROW_CLASSES_MIDDLE
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<details class="<%= wrapper_classes %>"<% if open? %> open<% end %>>
+  <summary class="<%= summary_classes %>">
+    <span><%= summary %></span>
+    <span class="<%= icon_classes %>"><%= caret_icon.html_safe %></span>
+  </summary>
+  <div class="<%= body_classes %>">
+    <%= content %>
+  </div>
+</details>

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

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class DisclosureComponent < ViewComponent::Base
+      WRAPPER_CLASSES = "group rounded-xl border border-surface-200 dark:border-surface-700"
+      SUMMARY_CLASSES = "flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-4 font-semibold text-surface-900 [&::-webkit-details-marker]:hidden dark:text-white"
+      ICON_CLASSES = "h-4 w-4 shrink-0 text-surface-400 transition-transform group-open:rotate-180"
+      BODY_CLASSES = "px-6 pb-4 text-sm text-surface-600 dark:text-surface-400"
+
+      CARET_ICON = <<~SVG.freeze
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+      SVG
+
+      renders_one :summary
+
+      def initialize(open: false)
+        @open = open
+      end
+
+      def open?
+        @open
+      end
+
+      def wrapper_classes
+        WRAPPER_CLASSES
+      end
+
+      def summary_classes
+        SUMMARY_CLASSES
+      end
+
+      def icon_classes
+        ICON_CLASSES
+      end
+
+      def body_classes
+        BODY_CLASSES
+      end
+
+      def caret_icon
+        CARET_ICON
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<div>
+  <h2 class="<%= title_classes %>"><%= title %></h2>
+  <% if subtitle? %>
+    <p class="<%= subtitle_classes %>"><%= subtitle %></p>
+  <% end %>
+  <div class="<%= classes %>">
+    <% features.each do |feature| %>
+      <div class="<%= card_classes %>">
+        <div class="<%= icon_classes %>">
+          <%= feature[:icon].html_safe %>
+        </div>
+        <h3 class="<%= card_title_classes %>"><%= feature[:title] %></h3>
+        <p class="<%= card_description_classes %>"><%= feature[:description] %></p>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class FeatureGridComponent < ViewComponent::Base
+      GRID_CLASSES = "grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
+      TITLE_BASE_CLASSES = "mb-4 text-center text-3xl font-bold tracking-tight sm:text-4xl"
+      SUBTITLE_BASE_CLASSES = "mx-auto mb-16 max-w-2xl text-center text-lg"
+      CARD_LAYOUT_CLASSES = "rounded-xl border p-6 transition"
+      ICON_BASE_CLASSES = "mb-4 flex size-10 items-center justify-center rounded-lg text-lg"
+      CARD_TITLE_BASE_CLASSES = "mb-2 text-lg font-semibold"
+      CARD_DESCRIPTION_BASE_CLASSES = "text-sm"
+
+      attr_reader :title, :subtitle, :features
+
+      def initialize(title:, features:, subtitle: nil)
+        @title = title
+        @subtitle = subtitle
+        @features = features
+      end
+
+      def classes
+        GRID_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 card_classes
+        "#{CARD_LAYOUT_CLASSES} border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 hover:border-accent-500/50 dark:hover:border-accent-500/50"
+      end
+
+      def icon_classes
+        "#{ICON_BASE_CLASSES} bg-accent-500/10 text-accent-600 dark:text-accent-400"
+      end
+
+      def card_title_classes
+        "#{CARD_TITLE_BASE_CLASSES} text-surface-900 dark:text-white"
+      end
+
+      def card_description_classes
+        "#{CARD_DESCRIPTION_BASE_CLASSES} text-surface-500 dark:text-surface-400"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<div class="<%= WRAPPER_CLASSES %>" data-controller="file-upload">
+  <span class="<%= LABEL_CLASSES %>"><%= label_text %></span>
+
+  <label class="<%= DROP_ZONE_CLASSES %>" data-file-upload-target="dropZone">
+    <div class="<%= DROP_ZONE_INNER_CLASSES %>">
+      <%= UPLOAD_ICON.html_safe %>
+      <p class="<%= PROMPT_CLASSES %>">
+        <%= prompt_text %> <span class="<%= BROWSE_CLASSES %>">browse</span>
+      </p>
+      <p class="<%= FILE_NAME_CLASSES %>" data-file-upload-target="fileName"></p>
+    </div>
+    <%= tag.input(**tag_options) %>
+  </label>
+
+  <% if hint? %>
+    <p class="<%= HINT_CLASSES %>"><%= hint_text %></p>
+  <% end %>
+</div>