stimulus_plumbers_tailwind 0.3.2 → 0.4.0

data/lib/stimulus_plumbers/themes/tailwind/combobox.rb

@@ -7,10 +7,21 @@ module StimulusPlumbers
         TRIGGER = %w[
           w-full rounded-(--sp-radius-md) border border-(--sp-color-muted-fg)
           px-(--sp-space-3) py-(--sp-space-2)
-          text-(--sp-text-sm) text-(--sp-color-fg) bg-(--sp-color-bg)
+          text-(length:--sp-text-sm) text-(--sp-color-fg) bg-(--sp-color-bg)
           focus:outline-none focus:ring-2 focus:ring-(--sp-focus-ring-color)
         ].freeze
 
+        TRIGGER_GROUP = %w[
+          flex items-center gap-(--sp-space-2) overflow-hidden
+          rounded-(--sp-radius-md) border border-(--sp-color-muted-fg) bg-(--sp-color-bg)
+          px-(--sp-space-3) py-(--sp-space-2)
+          focus-within:outline-none focus-within:ring-2 focus-within:ring-(--sp-focus-ring-color)
+          [&>input]:border-0 [&>input]:rounded-none
+          [&>input]:px-0 [&>input]:py-0
+          [&>input]:bg-transparent [&>input]:shadow-none
+          [&>input]:focus:ring-0
+        ].freeze
+
         LISTBOX = %w[
           py-(--sp-space-1) overflow-y-auto max-h-60
         ].freeze
@@ -18,7 +29,7 @@ module StimulusPlumbers
         OPTION_BASE = %w[
           flex items-center gap-(--sp-space-2) w-full
           px-(--sp-space-2) py-(--sp-space-1)
-          rounded-(--sp-radius-sm) text-(--sp-text-sm)
+          rounded-(--sp-radius-sm) text-(length:--sp-text-sm)
           cursor-pointer select-none outline-none
           hover:bg-(--sp-color-muted) focus:bg-(--sp-color-muted)
         ].freeze
@@ -33,24 +44,49 @@ module StimulusPlumbers
 
         OPTION_GROUP = %w[py-(--sp-space-1)].freeze
 
-        AUTOCOMPLETE_LOADING = %w[
+        TYPEAHEAD_LOADING = %w[
           flex items-center justify-center
-          py-(--sp-space-2) text-(--sp-text-sm) text-(--sp-color-muted-fg)
+          py-(--sp-space-2) text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
         ].freeze
 
-        AUTOCOMPLETE_EMPTY = %w[
+        TYPEAHEAD_EMPTY = %w[
           flex items-center justify-center
-          py-(--sp-space-2) text-(--sp-text-sm) text-(--sp-color-muted-fg)
+          py-(--sp-space-2) text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
         ].freeze
 
         TIME = %w[flex gap-(--sp-space-2) overflow-hidden].freeze
 
+        DATE_NAV = %w[flex items-center justify-between gap-(--sp-space-1) mb-(--sp-space-2)].freeze
+
+        DATE_NAV_BTN = [
+          *Control::BASE,
+          "inline-flex items-center justify-center",
+          "size-(--sp-calendar-day-size) rounded-(--sp-radius-md)",
+          "text-(--sp-color-fg) hover:bg-(--sp-color-muted)",
+          "focus-visible:ring-(--sp-focus-ring-color)"
+        ].freeze
+
+        CONTAINER = %w[relative].freeze
+        POPOVER   = %w[absolute top-full left-0 min-w-full].freeze
+
         private
 
+        def combobox_classes
+          { classes: klasses(*CONTAINER) }
+        end
+
+        def combobox_popover_classes
+          { classes: klasses(*POPOVER) }
+        end
+
         def combobox_trigger_classes
           { classes: klasses(*TRIGGER) }
         end
 
+        def combobox_trigger_group_classes
+          { classes: klasses(*TRIGGER_GROUP) }
+        end
+
         def combobox_listbox_classes
           { classes: klasses(*LISTBOX) }
         end
@@ -69,17 +105,29 @@ module StimulusPlumbers
           { classes: klasses(*OPTION_GROUP) }
         end
 
-        def combobox_autocomplete_loading_classes
-          { classes: klasses(*AUTOCOMPLETE_LOADING) }
+        def combobox_typeahead_loading_classes
+          { classes: klasses(*TYPEAHEAD_LOADING) }
+        end
+
+        def combobox_typeahead_loading_icon_classes
+          { classes: klasses("size-(--sp-icon-size)", "animate-spin") }
         end
 
-        def combobox_autocomplete_empty_classes
-          { classes: klasses(*AUTOCOMPLETE_EMPTY) }
+        def combobox_typeahead_empty_classes
+          { classes: klasses(*TYPEAHEAD_EMPTY) }
         end
 
         def combobox_time_classes
           { classes: klasses(*TIME) }
         end
+
+        def combobox_date_navigation_classes
+          { classes: klasses(*DATE_NAV) }
+        end
+
+        def combobox_date_navigation_navigator_classes
+          { classes: klasses(*DATE_NAV_BTN) }
+        end
       end
     end
   end

data/lib/stimulus_plumbers/themes/tailwind/control.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Control
+        BASE = %w[
+          font-medium transition-colors
+          focus-visible:outline-none
+          focus-visible:ring-(length:--sp-focus-ring-width)
+          focus-visible:ring-offset-(length:--sp-focus-ring-offset)
+          disabled:pointer-events-none disabled:opacity-50
+        ].freeze
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind/form/field.rb

@@ -0,0 +1,172 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Form
+        module Field
+          LABEL         = %w[text-(length:--sp-text-sm) font-medium text-(--sp-color-fg)].freeze
+          REQUIRED_MARK = %w[text-(--sp-color-error) ml-(--sp-space-0-5)].freeze
+          HINT          = %w[text-(length:--sp-text-xs) text-(--sp-color-muted-fg)].freeze
+          ERROR_TEXT    = %w[text-(length:--sp-text-xs) text-(--sp-color-error)].freeze
+
+          FLOATING_INPUT_BASE = %w[
+            peer w-full text-(length:--sp-text-sm) text-(--sp-color-fg) appearance-none
+            focus:outline-none focus:ring-0
+          ].freeze
+          FLOATING_INPUT_TYPES = {
+            filled:   %w[
+              rounded-t-(--sp-radius-md) px-(--sp-space-2-5) pb-(--sp-space-2-5) pt-(--sp-space-5)
+              bg-(--sp-color-bg-muted) border-0 border-b-2
+            ].freeze,
+            outlined: %w[
+              px-(--sp-space-2-5) pb-(--sp-space-2-5) pt-(--sp-space-4)
+              bg-transparent rounded-(--sp-radius-md) border
+            ].freeze,
+            standard: %w[
+              py-(--sp-space-2-5) px-0
+              bg-transparent border-0 border-b-2
+            ].freeze
+          }.freeze
+          FLOATING_INPUT_ERROR   = %w[border-(--sp-color-error)].freeze
+          FLOATING_INPUT_DEFAULT = %w[border-(--sp-color-muted-fg) focus:border-(--sp-color-primary)].freeze
+
+          FLOATING_GROUP_TYPES = {
+            filled:   %w[relative].freeze,
+            outlined: %w[relative].freeze,
+            standard: %w[relative z-0].freeze
+          }.freeze
+
+          FLOATING_LABEL_BASE = %w[
+            absolute text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
+            duration-300 transform origin-[0]
+          ].freeze
+          FLOATING_LABEL_FOCUS   = %w[peer-focus:text-(--sp-color-primary)].freeze
+          FLOATING_LABEL_ERROR   = %w[text-(--sp-color-error)].freeze
+          FLOATING_LABEL_TYPES = {
+            filled:   %w[
+              -translate-y-(--sp-space-4) scale-75 top-(--sp-space-4) z-10 start-(--sp-space-2-5)
+              peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0
+              peer-focus:scale-75 peer-focus:-translate-y-(--sp-space-4)
+              rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto
+            ].freeze,
+            outlined: %w[
+              -translate-y-(--sp-space-4) scale-75 top-(--sp-space-2) z-10 start-1
+              bg-(--sp-color-bg) px-(--sp-space-2) peer-focus:px-(--sp-space-2)
+              peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2
+              peer-focus:top-(--sp-space-2) peer-focus:scale-75 peer-focus:-translate-y-(--sp-space-4)
+              rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto
+            ].freeze,
+            standard: %w[
+              -translate-y-(--sp-space-6) scale-75 top-(--sp-space-3) -z-10 start-0
+              peer-focus:start-0
+              peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0
+              peer-focus:scale-75 peer-focus:-translate-y-(--sp-space-6)
+              rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto
+            ].freeze
+          }.freeze
+
+          CHECKBOX_LABEL_TYPES = {
+            default: %w[
+              flex items-center gap-(--sp-space-2) cursor-pointer py-(--sp-space-0-5) select-none
+              text-(length:--sp-text-sm) text-(--sp-color-fg)
+            ].freeze,
+            button:  %w[
+              flex items-center gap-(--sp-space-3) flex-1 p-(--sp-space-4) cursor-pointer select-none
+              text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
+              bg-(--sp-color-bg) border border-(--sp-color-border) rounded-(--sp-radius-md) shadow-(--sp-shadow-xs)
+              hover:bg-(--sp-color-muted)
+            ].freeze,
+            card:    %w[
+              flex justify-between items-start flex-1 p-(--sp-space-4) cursor-pointer select-none
+              text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
+              bg-(--sp-color-bg) border border-(--sp-color-border) rounded-(--sp-radius-md) shadow-(--sp-shadow-xs)
+              hover:bg-(--sp-color-muted) hover:border-(--sp-color-border-strong) hover:text-(--sp-color-fg)
+              has-[:checked]:border-(--card-ring) has-[:checked]:bg-(--card-ring)/10
+              has-[:checked]:text-(--sp-color-fg) has-[:checked]:hover:bg-(--card-ring)/15
+            ].freeze
+          }.freeze
+
+          RADIO_LABEL_TYPES = {
+            default: %w[
+              flex items-center gap-(--sp-space-2) cursor-pointer py-(--sp-space-0-5) select-none
+              text-(length:--sp-text-sm) text-(--sp-color-fg)
+            ].freeze,
+            button:  %w[
+              inline-flex items-center justify-between flex-1 p-(--sp-space-4) cursor-pointer select-none
+              text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
+              bg-(--sp-color-bg) border border-(--sp-color-border) rounded-(--sp-radius-md)
+              hover:bg-(--sp-color-muted)
+              peer-checked:border-(--card-ring) peer-checked:bg-(--card-ring)/10
+              peer-checked:text-(--sp-color-fg) peer-checked:hover:bg-(--card-ring)/15
+            ].freeze,
+            card:    %w[
+              flex items-start flex-1 p-(--sp-space-4) cursor-pointer select-none
+              text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
+              bg-(--sp-color-bg) border border-(--sp-color-border) rounded-(--sp-radius-md) shadow-(--sp-shadow-xs)
+              hover:bg-(--sp-color-muted) hover:border-(--sp-color-border-strong) hover:text-(--sp-color-fg)
+              peer-checked:border-(--card-ring) peer-checked:bg-(--card-ring)/10
+              peer-checked:text-(--sp-color-fg) peer-checked:hover:bg-(--card-ring)/15
+            ].freeze
+          }.freeze
+
+          CHOICE_ITEMS_LAYOUT = {
+            stacked: %w[flex flex-col gap-(--sp-space-1)].freeze,
+            inline:  %w[flex flex-row flex-wrap gap-x-(--sp-space-4) gap-y-(--sp-space-1)].freeze
+          }.freeze
+
+          private
+
+          def form_field_floating_classes(type: nil, error: false)
+            {
+              classes: klasses(
+                *FLOATING_INPUT_BASE,
+                *FLOATING_INPUT_TYPES.fetch(type, []),
+                *(error ? FLOATING_INPUT_ERROR : FLOATING_INPUT_DEFAULT)
+              )
+            }
+          end
+
+          def form_field_floating_group_classes(type: nil)
+            { classes: klasses(*FLOATING_GROUP_TYPES.fetch(type, [])) }
+          end
+
+          def form_field_floating_label_classes(type: nil, error: false)
+            color = error ? FLOATING_LABEL_ERROR : FLOATING_LABEL_FOCUS
+            { classes: klasses(*FLOATING_LABEL_BASE, *FLOATING_LABEL_TYPES.fetch(type, []), *color) }
+          end
+
+          def form_field_label_classes(hidden: false, **)
+            { classes: klasses(*LABEL, hidden ? "sr-only" : nil) }
+          end
+
+          def form_field_required_mark_classes
+            { classes: klasses(*REQUIRED_MARK) }
+          end
+
+          def form_field_hint_classes
+            { classes: klasses(*HINT) }
+          end
+
+          def form_field_error_classes
+            { classes: klasses(*ERROR_TEXT) }
+          end
+
+          def form_field_choice_items_classes(layout: :stacked)
+            { classes: klasses(*CHOICE_ITEMS_LAYOUT.fetch(layout)) }
+          end
+
+          def form_field_checkbox_label_classes(type: :default, variant: :default)
+            card_color = type == :card ? Card::VARIANTS.fetch(variant, Card::VARIANTS[:tertiary]) : []
+            { classes: klasses(*CHECKBOX_LABEL_TYPES.fetch(type), *card_color) }
+          end
+
+          def form_field_radio_label_classes(type: :default, variant: :default)
+            card_color = %i[button card].include?(type) ? Card::VARIANTS.fetch(variant, Card::VARIANTS[:tertiary]) : []
+            { classes: klasses(*RADIO_LABEL_TYPES.fetch(type), *card_color) }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind/form/input.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Form
+        module Input
+          INPUT_BASE = %w[
+            w-full rounded-(--sp-radius-md) border px-(--sp-space-3) py-(--sp-space-2) text-(length:--sp-text-sm)
+            text-(--sp-color-fg) bg-(--sp-color-bg) focus:outline-none focus:ring-2 focus:ring-offset-0
+          ].freeze
+          INPUT_ERROR   = %w[border-(--sp-color-error) focus:ring-(--sp-color-error)].freeze
+          INPUT_DEFAULT = %w[border-(--sp-color-muted-fg) focus:ring-(--sp-focus-ring-color)].freeze
+
+          CHECKBOX_TYPES = {
+            default: %w[
+              size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0
+              border border-(--sp-color-border) bg-(--sp-color-muted)
+              focus:ring-2 focus:ring-(--sp-focus-ring-color) focus:outline-none
+              disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer
+            ].freeze,
+            button:  %w[
+              size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0
+              border border-(--sp-color-border) bg-(--sp-color-muted)
+              focus:ring-2 focus:ring-(--sp-focus-ring-color) focus:outline-none
+              disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer
+            ].freeze,
+            card:    %w[
+              size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0
+              border border-(--sp-color-border) bg-(--sp-color-muted)
+              checked:border-(--card-ring)
+              focus:ring-2 focus:ring-(--card-ring) focus:outline-none
+              disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer
+            ].freeze
+          }.freeze
+
+          RADIO_TYPES = {
+            default: %w[
+              size-(--sp-control-size) rounded-full shrink-0
+              [accent-color:var(--sp-color-primary)] cursor-pointer
+              focus:ring-2 focus:ring-(--sp-focus-ring-color) focus:outline-none
+              disabled:opacity-50 disabled:cursor-not-allowed
+            ].freeze,
+            button:  %w[hidden peer].freeze,
+            card:    %w[hidden peer].freeze
+          }.freeze
+
+          INPUT_GROUP_BASE   = %w[flex items-center overflow-hidden rounded-(--sp-radius-md) border].freeze
+          INPUT_GROUP_BORDER = { error: "border-(--sp-color-error)", default: "border-(--sp-color-muted-fg)" }.freeze
+
+          COMBOBOX_INPUT = %w[
+            [&>input:not([type=hidden])]:border-0
+            [&>input:not([type=hidden])]:rounded-none
+            [&>input:not([type=hidden])]:px-0
+            [&>input:not([type=hidden])]:py-0
+            [&>input:not([type=hidden])]:bg-transparent
+            [&>input:not([type=hidden])]:shadow-none
+            [&>input:not([type=hidden])]:focus:ring-0
+          ].freeze
+          COMBOBOX_TRIGGER_GROUP = %w[
+            [&>div:first-child]:border-0
+            [&>div:first-child]:rounded-none
+            [&>div:first-child]:px-0
+            [&>div:first-child]:py-0
+            [&>div:first-child]:focus-within:ring-0
+          ].freeze
+
+          BUTTON_REVEAL = %w[
+            self-stretch border-0 bg-transparent px-(--sp-space-3) cursor-pointer text-(--sp-color-muted-fg)
+            hover:text-(--sp-color-fg) text-(length:--sp-text-sm)
+          ].freeze
+          BUTTON_CLEAR = %w[
+            self-stretch border-0 bg-transparent px-(--sp-space-2) cursor-pointer text-(--sp-color-muted-fg)
+            hover:text-(--sp-color-fg) text-(length:--sp-text-sm)
+          ].freeze
+
+          private
+
+          def form_field_input_classes(error: false)
+            { classes: klasses(*INPUT_BASE, *(error ? INPUT_ERROR : INPUT_DEFAULT)) }
+          end
+
+          def form_field_input_textarea_classes(error: false)
+            form_field_input_classes(error: error)
+          end
+
+          def form_field_input_file_classes(error: false)
+            form_field_input_classes(error: error)
+          end
+
+          def form_field_input_select_classes(error: false)
+            form_field_input_classes(error: error)
+          end
+
+          def form_field_input_checkbox_classes(type: :default, variant: :default, **)
+            card_color = type == :card ? Card::VARIANTS.fetch(variant, Card::VARIANTS[:tertiary]) : []
+            { classes: klasses(*CHECKBOX_TYPES.fetch(type), *card_color) }
+          end
+
+          def form_field_input_radio_classes(type: :default, variant: :default, **)
+            card_color = %i[button card].include?(type) ? Card::VARIANTS.fetch(variant, Card::VARIANTS[:tertiary]) : []
+            { classes: klasses(*RADIO_TYPES.fetch(type), *card_color) }
+          end
+
+          def input_group_classes(error: false)
+            { classes: klasses(*INPUT_GROUP_BASE, INPUT_GROUP_BORDER[error ? :error : :default]) }
+          end
+
+          def form_field_input_combobox_classes(error: false)
+            { classes: klasses(
+              *INPUT_BASE,
+              *(error ? INPUT_ERROR : INPUT_DEFAULT),
+              *COMBOBOX_INPUT,
+              *COMBOBOX_TRIGGER_GROUP
+            )
+}
+          end
+
+          def form_field_input_reveal_classes(**)
+            {
+              classes: klasses(
+                "[&>input]:border-0",
+                "[&>input]:rounded-none",
+                "[&>input]:bg-transparent",
+                "[&>input]:shadow-none",
+                "[&>input]:focus:ring-0"
+              )
+            }
+          end
+
+          def form_field_input_clearable_classes
+            {
+              classes: klasses(
+                "[&>input]:border-0",
+                "[&>input]:rounded-none",
+                "[&>input]:bg-transparent",
+                "[&>input]:shadow-none",
+                "[&>input]:focus:ring-0"
+              )
+            }
+          end
+
+          def form_field_input_button_reveal_classes
+            { classes: klasses(*BUTTON_REVEAL) }
+          end
+
+          def form_field_input_button_clear_classes
+            { classes: klasses(*BUTTON_CLEAR) }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind/form.rb

@@ -4,33 +4,8 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Form
-        INPUT_BASE = %w[
-          w-full rounded-md border px-3 py-2 text-sm text-gray-900
-          bg-white focus:outline-none focus:ring-2 focus:ring-offset-0
-        ].freeze
-        INPUT_ERROR   = %w[border-red-700 focus:ring-red-700].freeze
-        INPUT_DEFAULT = %w[border-gray-500 focus:ring-blue-700].freeze
-
-        GROUP_BASE    = %w[flex gap-1 mb-3].freeze
-        GROUP_INLINE  = %w[flex-row items-center].freeze
-
-        LABEL         = %w[text-sm font-medium text-gray-900].freeze
-        REQUIRED_MARK = %w[text-red-700 ml-0.5].freeze
-        DETAILS       = %w[text-xs text-gray-600].freeze
-        ERROR_TEXT    = %w[text-xs text-red-700].freeze
-        CHECKBOX      = %w[size-4 rounded border-gray-500 text-blue-700].freeze
-        RADIO         = %w[size-4 border-gray-500 text-blue-700].freeze
-
-        INPUT_GROUP_BASE   = %w[flex items-center overflow-hidden rounded-md border].freeze
-        INPUT_GROUP_BORDER = { error: "border-red-700", default: "border-gray-500" }.freeze
-
-        BUTTON_REVEAL = %w[
-          self-stretch border-0 bg-transparent px-3 cursor-pointer text-gray-600 hover:text-gray-900 text-sm
-        ].freeze
-        BUTTON_CLEAR = %w[
-          self-stretch border-0 bg-transparent px-2 cursor-pointer text-gray-500 hover:text-gray-900 text-sm
-        ].freeze
-        SUBMIT_LINK = %w[cursor-pointer text-sm font-medium text-gray-900 hover:underline].freeze
+        GROUP_BASE   = %w[flex gap-(--sp-space-1) mb-(--sp-space-3)].freeze
+        GROUP_INLINE = %w[flex-row items-center].freeze
 
         private
 
@@ -38,77 +13,15 @@ module StimulusPlumbers
           { classes: klasses(*GROUP_BASE, layout == :inline ? GROUP_INLINE : "flex-col") }
         end
 
-        def form_label_classes(hidden: false, **)
-          { classes: klasses(*LABEL, hidden ? "sr-only" : nil) }
-        end
-
-        def form_required_mark_classes
-          { classes: klasses(*REQUIRED_MARK) }
-        end
-
-        def form_details_classes
-          { classes: klasses(*DETAILS) }
-        end
-
-        def form_error_classes
-          { classes: klasses(*ERROR_TEXT) }
-        end
-
-        def form_input_classes(error: false)
-          { classes: klasses(*INPUT_BASE, *(error ? INPUT_ERROR : INPUT_DEFAULT)) }
-        end
-
-        def form_textarea_classes(error: false)
-          form_input_classes(error: error)
-        end
-
-        def form_file_classes(error: false)
-          form_input_classes(error: error)
-        end
-
-        def form_select_classes(error: false)
-          form_input_classes(error: error)
-        end
-
-        def form_checkbox_classes(**)
-          { classes: klasses(*CHECKBOX) }
-        end
-
-        def form_radio_classes(**)
-          { classes: klasses(*RADIO) }
-        end
-
-        def form_input_group_classes(error: false)
-          { classes: klasses(*INPUT_GROUP_BASE, INPUT_GROUP_BORDER[error ? :error : :default]) }
-        end
-
-        def form_combobox_classes(error: false)
-          form_input_classes(error: error)
-        end
-
-        def form_input_reveal_classes(**)
-          { classes: "" }
-        end
-
-        def form_input_search_classes
-          { classes: "" }
-        end
-
-        def form_button_reveal_classes
-          { classes: klasses(*BUTTON_REVEAL) }
-        end
-
-        def form_button_clear_classes
-          { classes: klasses(*BUTTON_CLEAR) }
-        end
-
-        def form_submit_classes(variant: :default)
-          case variant
-          when :button
-            { classes: klasses(*Button::BASE, *Button::VARIANTS[:primary], *Button::SIZES[:md]) }
-          else
-            { classes: klasses(*SUBMIT_LINK) }
-          end
+        def form_submit_classes(type: :default, variant: :primary)
+          { classes: klasses(
+            *Button::BASE,
+            *Button::LAYOUT,
+            *Button::VARIANTS.fetch(variant, Button::VARIANTS[:primary]),
+            *Button::TYPES.fetch(type, Button::TYPES[:default]),
+            *(type == :card ? [] : Button::SIZES[:md])
+          )
+}
         end
       end
     end

data/lib/stimulus_plumbers/themes/tailwind/icon.rb

@@ -1,14 +1,24 @@
 # frozen_string_literal: true
 
+require_relative "icons/heroicon"
+require_relative "icons/custom"
+require "stimulus_plumbers/themes/icons/registry"
+
 module StimulusPlumbers
   module Themes
     module Tailwind
       module Icon
-        ICONS = {
-          "arrow-left"  => { d: "M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" },
-          "arrow-right" => { d: "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" }
+        ALIASES = {
+          "close"         => "x-mark",
+          "calendar"      => "calendar-days",
+          "external-link" => "arrow-top-right-on-square"
         }.freeze
 
+        ICONS = StimulusPlumbers::Themes::Icons::Registry.new(
+          sources: [Icons::Custom, Icons::Heroicon],
+          aliases: ALIASES
+        )
+
         def icons
           ICONS
         end
@@ -16,7 +26,7 @@ module StimulusPlumbers
         private
 
         def icon_classes
-          { classes: "" }
+          { classes: "size-(--sp-icon-default)" }
         end
       end
     end

data/lib/stimulus_plumbers/themes/tailwind/icons/custom.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "stimulus_plumbers/themes/icons/external"
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Icons
+        module Custom
+          include StimulusPlumbers::Themes::Icons::External
+          extend self
+
+          private
+
+          def svg_dir
+            @svg_dir ||= File.expand_path("customs", __dir__)
+          end
+
+          def svg_path(key)
+            File.join(svg_dir, "#{key}.svg")
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind/icons/customs/spinner.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 101" fill="none" stroke="none">
+  <path fill="currentColor" opacity="0.25" d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"/>
+  <path fill="currentColor" d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"/>
+</svg>