keystone_ui 0.6.0

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class MobileHeaderComponent < ViewComponent::Base
+      BACK_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="M15.75 19.5 8.25 12l7.5-7.5" />
+        </svg>
+      SVG
+
+      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 = "lg:hidden"
+      BACK_LINK_CLASSES = "text-gray-500 dark:text-gray-400"
+      TITLE_CLASSES = "absolute left-1/2 -translate-x-1/2 font-semibold text-gray-900 dark:text-white lg:hidden truncate max-w-[60%]"
+      SUBTITLE_CLASSES = "block text-xs font-normal text-gray-500 dark:text-gray-400 truncate text-center"
+      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"
+
+      # Renders the left-side and title of the mobile header.
+      # Call from the left side of your navbar.
+      #
+      # Usage in navbar:
+      #   <% if content_for?(:form_page) %>
+      #     <%= ui_mobile_header_left %>
+      #   <% end %>
+      def initialize(title:, back_url:, subtitle: nil)
+        @title = title
+        @back_url = back_url
+        @subtitle = subtitle
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<div data-controller="modal" data-modal-target="backdrop" class="<%= backdrop_classes %>" data-action="click->modal#closeOnBackdrop">
+  <div class="<%= panel_classes %>">
+    <div class="<%= header_classes %>">
+      <h3 class="<%= title_classes %>"><%= title %></h3>
+      <button type="button" data-action="click->modal#close" class="<%= close_button_classes %>" aria-label="Close">
+        <%= close_icon.html_safe %>
+      </button>
+    </div>
+    <div class="<%= body_classes %>">
+      <%= content %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class ModalComponent < ViewComponent::Base
+      BACKDROP_CLASSES = "hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      PANEL_CLASSES = "rounded-xl border border-gray-200 bg-white p-6 w-full mx-4 max-h-[80vh] flex flex-col dark:border-zinc-700 dark:bg-zinc-800"
+      HEADER_CLASSES = "flex items-center justify-between mb-4"
+      TITLE_CLASSES = "text-lg font-semibold text-gray-900 dark:text-gray-200"
+      CLOSE_BUTTON_CLASSES = "text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+      BODY_CLASSES = "overflow-auto flex-1"
+
+      SIZE_CLASSES = {
+        sm: "max-w-sm",
+        md: "max-w-lg",
+        lg: "max-w-2xl",
+        xl: "max-w-4xl"
+      }.freeze
+
+      CLOSE_ICON = <<~SVG.freeze
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+      SVG
+
+      attr_reader :title
+
+      def initialize(title:, size: :md)
+        @title = title
+        @size = size
+      end
+
+      def backdrop_classes
+        BACKDROP_CLASSES
+      end
+
+      def panel_classes
+        [ PANEL_CLASSES, size_class ].join(" ")
+      end
+
+      def header_classes
+        HEADER_CLASSES
+      end
+
+      def title_classes
+        TITLE_CLASSES
+      end
+
+      def close_button_classes
+        CLOSE_BUTTON_CLASSES
+      end
+
+      def body_classes
+        BODY_CLASSES
+      end
+
+      def size_class
+        SIZE_CLASSES.fetch(@size)
+      end
+
+      def close_icon
+        CLOSE_ICON
+      end
+
+      def wrapper_data
+        { controller: "modal" }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<div class="<%= WRAPPER_CLASSES %>" data-controller="multi-select" data-multi-select-label-value="<%= @label %>">
+  <button type="button"
+          data-action="click->multi-select#toggle"
+          class="<%= TRIGGER_CLASSES %>">
+    <span data-multi-select-target="label"><%= display_text %></span>
+    <%= CARET_ICON.html_safe %>
+  </button>
+  <div data-multi-select-target="menu" class="<%= MENU_CLASSES %>">
+    <% @options.each do |opt_label, opt_value| %>
+      <label class="<%= OPTION_CLASSES %>">
+        <input type="checkbox"
+               name="<%= @name %>"
+               value="<%= opt_value %>"
+               <%= "checked" if selected?(opt_value) %>
+               data-action="change->multi-select#updateLabel"
+               class="<%= CHECKBOX_CLASSES %>">
+        <%= opt_label %>
+      </label>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class MultiSelectComponent < 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 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"
+      CARET_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="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+        </svg>
+      SVG
+
+      attr_reader :name, :label, :options, :selected
+
+      def initialize(name:, label:, options:, selected: [])
+        @name = name
+        @label = label
+        @options = options
+        @selected = Array(selected).map(&:to_s)
+      end
+
+      def selected?(value)
+        @selected.include?(value.to_s)
+      end
+
+      def display_text
+        checked = @selected.reject(&:empty?)
+        if checked.empty?
+          "All #{@label}"
+        else
+          "#{checked.length} selected"
+        end
+      end
+    end
+  end
+end

data/app/components/keystone/ui/nav_dropdown_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="<%= trigger_classes %>">
+    <%= @title %>
+    <%= CARET_ICON.html_safe %>
+  </button>
+  <nav data-dropdown-target="menu" class="<%= MENU_CLASSES %>">
+    <%= content %>
+  </nav>
+</div>

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class NavDropdownComponent < ViewComponent::Base
+      WRAPPER_CLASSES = "nav-dropdown"
+      MENU_CLASSES = "nav-dropdown-menu hidden"
+      TRIGGER_BASE = "nav-dropdown-trigger"
+      ACTIVE_CLASS = "active"
+      CARET_ICON = <<~SVG.freeze
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="nav-dropdown-caret">
+          <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+        </svg>
+      SVG
+
+      attr_reader :title, :area
+
+      def initialize(title:, area:, active: false)
+        @title = title
+        @area = area
+        @active = active
+      end
+
+      def trigger_classes
+        [ TRIGGER_BASE, (ACTIVE_CLASS if @active) ].compact.join(" ")
+      end
+
+      def wrapper_data
+        { controller: "dropdown" }
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= link_to @label, @href, class: link_classes %>

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class NavItemComponent < ViewComponent::Base
+      attr_reader :label, :href
+
+      def initialize(label:, href:, active: false)
+        @label = label
+        @href = href
+        @active = active
+      end
+
+      ACTIVE_CLASS = "active"
+
+      def link_classes
+        @active ? ACTIVE_CLASS : ""
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+<nav class="<%= nav_classes %>">
+  <% if mobile_left? %>
+    <div class="<%= MOBILE_LEFT_CLASSES %>">
+      <%= mobile_left %>
+    </div>
+  <% end %>
+
+  <% if logo? %>
+    <div class="<%= LOGO_CLASSES %>">
+      <%= logo %>
+    </div>
+  <% end %>
+
+  <% if mobile_center? %>
+    <span class="<%= MOBILE_CENTER_CLASSES %>">
+      <%= mobile_center %>
+    </span>
+  <% end %>
+
+  <% if desktop_links? %>
+    <div class="<%= DESKTOP_LINKS_CLASSES %>">
+      <nav><%= desktop_links %></nav>
+      <% if desktop_right? %>
+        <nav><%= desktop_right %></nav>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% if mobile_right? %>
+    <div class="<%= MOBILE_RIGHT_CLASSES %>">
+      <%= mobile_right %>
+    </div>
+  <% end %>
+</nav>

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class NavbarComponent < ViewComponent::Base
+      NAV_BASE = "top-nav"
+      NAV_STICKY = "sticky top-0 z-40"
+      MOBILE_LEFT_CLASSES = "lg:hidden flex items-center"
+      LOGO_CLASSES = "logo"
+      MOBILE_CENTER_CLASSES = "absolute left-1/2 -translate-x-1/2 font-semibold text-gray-900 dark:text-white lg:hidden truncate max-w-[60%]"
+      DESKTOP_LINKS_CLASSES = "nav-container hidden lg:flex"
+      MOBILE_RIGHT_CLASSES = "nav-user-controls ml-auto"
+
+      renders_one :logo
+      renders_one :desktop_links
+      renders_one :desktop_right
+      renders_one :mobile_left
+      renders_one :mobile_center
+      renders_one :mobile_right
+
+      def initialize(sticky: true)
+        @sticky = sticky
+      end
+
+      def nav_classes
+        classes = [ NAV_BASE ]
+        classes << NAV_STICKY if @sticky
+        classes.join(" ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<label class="relative cursor-pointer" <%= tag.attributes(label_data.transform_keys { |k| "data-#{k}" }) unless label_data.empty? %>>
+  <input type="radio" name="<%= name %>" value="<%= value %>"
+    <%= "checked" if selected? %>
+    class="sr-only"
+    <%= tag.attributes(input_data.transform_keys { |k| "data-#{k}" }) unless input_data.empty? %>>
+  <span class="<%= classes %>">
+    <%= content %>
+  </span>
+</label>

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class OptionCardComponent < ViewComponent::Base
+      BASE_CLASSES = "inline-flex items-center gap-2 px-3 py-2 rounded-lg border-2 transition cursor-pointer"
+
+      attr_reader :name, :value, :input_data, :label_data
+
+      def initialize(name:, value:, selected: false, input_data: {}, label_data: {})
+        @name = name
+        @value = value
+        @selected = selected
+        @input_data = input_data
+        @label_data = label_data
+      end
+
+      def selected?
+        @selected
+      end
+
+      def classes
+        border = selected? ? "border-accent-500" : "border-transparent"
+        "#{BASE_CLASSES} #{border}"
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class PageComponent < ViewComponent::Base
+      MAX_WIDTH_CLASSES = {
+        sm: "max-w-2xl",
+        md: "max-w-4xl",
+        lg: "max-w-6xl",
+        xl: "max-w-7xl",
+        full: ""
+      }.freeze
+
+      PADDING_CLASSES = "px-4 py-4 sm:px-6 lg:px-8"
+
+      TOP_OFFSET_CLASSES = {
+        sm: "pt-12",
+        md: "pt-16",
+        lg: "pt-20",
+        xl: "pt-24"
+      }.freeze
+
+      def initialize(max_width: :full, padding: :standard, top_offset: nil)
+        @max_width = max_width
+        @padding = padding
+        @top_offset = top_offset
+      end
+
+      def classes
+        tokens = []
+        tokens << PADDING_CLASSES unless @padding == :none
+        tokens << TOP_OFFSET_CLASSES.fetch(@top_offset) if @top_offset
+        width_class = MAX_WIDTH_CLASSES.fetch(@max_width)
+        tokens << width_class unless width_class.empty?
+        tokens << "mx-auto" unless @max_width == :full
+        tokens.join(" ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<% if action_url %>
+  <% content_for :mobile_action_url, action_url %>
+  <% content_for :mobile_action_label, action_label %>
+<% end %>
+<div class="<%= WRAPPER_CLASSES %>">
+  <div>
+    <h1 class="<%= TITLE_CLASSES %>"><%= @title %></h1>
+    <% if subtitle? %>
+      <p class="<%= SUBTITLE_CLASSES %>"><%= subtitle_text %></p>
+    <% end %>
+  </div>
+  <% if action? %>
+    <div class="<%= ACTIONS_CLASSES %>">
+      <%= @action_block.call %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class PageHeaderComponent < ViewComponent::Base
+      WRAPPER_CLASSES = "hidden sm:block mb-6 sm:flex sm:items-center sm:justify-between"
+      TITLE_CLASSES = "text-2xl font-bold text-gray-900 dark:text-white"
+      SUBTITLE_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400"
+      ACTIONS_CLASSES = "page-header-actions hidden sm:block mt-4 sm:mt-0 sm:ml-4 flex-shrink-0"
+
+      attr_reader :title, :action_url, :action_label
+
+      def initialize(title:, subtitle: nil, action_url: nil, action_label: "Add new")
+        @title = title
+        @subtitle = subtitle
+        @action_url = action_url
+        @action_label = action_label
+        @action_block = nil
+      end
+
+      def before_render
+        content
+      end
+
+      def action(&block)
+        @action_block = block
+      end
+
+      def action?
+        !!@action_block
+      end
+
+      def subtitle?
+        !@subtitle.nil?
+      end
+
+      def subtitle_text
+        @subtitle
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class PanelComponent < ViewComponent::Base
+      PADDING_CLASSES = { sm: "p-4", md: "p-5", lg: "p-6" }.freeze
+      RADIUS_CLASSES = { md: "rounded-lg", lg: "rounded-xl", xl: "rounded-2xl" }.freeze
+
+      def initialize(padding: :md, radius: :lg, shadow: true)
+        @padding = padding
+        @radius = radius
+        @shadow = shadow
+      end
+
+      BASE_CLASSES = "border border-gray-200 bg-white dark:bg-zinc-900 dark:border-zinc-700"
+      SHADOW_CLASS = "shadow-sm"
+
+      def classes
+        tokens = [ RADIUS_CLASSES.fetch(@radius), BASE_CLASSES, PADDING_CLASSES.fetch(@padding) ]
+        tokens << SHADOW_CLASS if @shadow
+        tokens.join(" ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+<div class="<%= CONTAINER_CLASSES %>">
+  <div class="<%= HEADER_CLASSES %>">
+    <h3 class="<%= TITLE_CLASSES %>"><%= title %></h3>
+    <% if subtitle %><p class="<%= SUBTITLE_CLASSES %>"><%= subtitle %></p><% end %>
+  </div>
+
+  <div class="<%= TRACK_CLASSES %>">
+    <% boxes.each_with_index do |box, i| %>
+      <div class="<%= BOX_CLASSES %>">
+        <span class="<%= BOX_LABEL_CLASSES %>"><%= box[:label] %></span>
+        <% unless box[:count].nil? %>
+          <span class="<%= count_class(box[:accent]) %>"><%= box[:count] %></span>
+        <% end %>
+        <% if box[:action] %>
+          <%= form_with url: box[:action][:url], method: :post do %>
+            <% box[:action].fetch(:params, {}).each do |k, v| %><%= hidden_field_tag k, v %><% end %>
+            <%= helpers.ui_button(label: box[:action][:label], type: :submit, variant: box[:action].fetch(:variant, :primary)) %>
+          <% end %>
+        <% end %>
+      </div>
+
+      <% if (link = link_after(i)) %>
+        <div class="<%= CONNECTOR_CLASSES %>">
+          <%= form_with url: link[:url], method: :post do %>
+            <% link.fetch(:params, {}).each do |k, v| %><%= hidden_field_tag k, v %><% end %>
+            <button type="submit" class="<%= link_classes(link) %>" title="<%= link[:broken] ? "Broken handoff — click to fix" : "Healthy handoff — click to break" %>">
+              <% if link[:broken] %>&#10007;<% else %>&#10003;<% end %>
+            </button>
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class PipelineComponent < ViewComponent::Base
+      CONTAINER_CLASSES = "rounded-xl border border-surface-700 bg-surface-800 p-6"
+      HEADER_CLASSES = "mb-4"
+      TITLE_CLASSES = "text-lg font-semibold text-white"
+      SUBTITLE_CLASSES = "mt-1 text-sm text-surface-400"
+      TRACK_CLASSES = "flex flex-col gap-3 sm:flex-row sm:items-stretch"
+      BOX_CLASSES = "flex flex-1 flex-col items-center gap-2 rounded-lg border border-surface-700 bg-surface-900 p-4 text-center"
+      BOX_LABEL_CLASSES = "text-xs uppercase tracking-wide text-surface-500"
+      CONNECTOR_CLASSES = "flex items-center justify-center"
+      COUNT_BASE_CLASSES = "text-3xl font-bold"
+      LINK_BASE_CLASSES = "link-toggle text-2xl leading-none"
+      LINK_HEALTHY_CLASSES = "text-accent-500"
+      LINK_BROKEN_CLASSES = "text-red-500"
+
+      COUNT_CLASSES = {
+        amber: "text-amber-400",
+        emerald: "text-accent-400",
+        danger: "text-red-400",
+        muted: "text-surface-500"
+      }.freeze
+
+      attr_reader :title, :boxes, :links, :subtitle
+
+      def initialize(title:, boxes:, links:, subtitle: nil)
+        @title = title
+        @boxes = boxes
+        @links = links
+        @subtitle = subtitle
+      end
+
+      def count_class(accent)
+        "#{COUNT_BASE_CLASSES} #{COUNT_CLASSES.fetch(accent, COUNT_CLASSES[:muted])}"
+      end
+
+      def link_after(index)
+        links[index]
+      end
+
+      def link_classes(link)
+        "#{LINK_BASE_CLASSES} #{link[:broken] ? LINK_BROKEN_CLASSES : LINK_HEALTHY_CLASSES}"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<div>
+  <% if label %>
+    <div class="<%= label_classes %>"><%= label %></div>
+  <% end %>
+  <div class="<%= track_classes %>">
+    <div class="<%= bar_classes %>" style="width: <%= percent %>%"></div>
+  </div>
+</div>

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class ProgressComponent < ViewComponent::Base
+      TRACK_CLASSES = "w-full h-2 bg-surface-200 rounded-full overflow-hidden"
+      BAR_CLASSES = "h-full bg-accent-500 rounded-full transition-all"
+      LABEL_CLASSES = "mb-1 text-sm font-medium text-surface-700"
+
+      attr_reader :value, :max, :label
+
+      def initialize(value:, max:, label: nil)
+        @value = value
+        @max = max
+        @label = label
+      end
+
+      def percent
+        [ (value.to_f / max * 100).round, 100 ].min
+      end
+
+      def track_classes
+        TRACK_CLASSES
+      end
+
+      def bar_classes
+        BAR_CLASSES
+      end
+
+      def label_classes
+        LABEL_CLASSES
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<label class="block cursor-pointer">
+  <input type="radio" name="<%= name %>" value="<%= value %>" <%= "checked" if checked? %> class="peer sr-only">
+  <span class="<%= classes %>">
+    <span class="<%= label_classes %>"><%= label %></span>
+    <% if hint? %>
+      <span class="<%= hint_classes %>"><%= hint %></span>
+    <% end %>
+  </span>
+</label>