stimulus_plumbers_tailwind 0.3.3 → 0.4.2

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

@@ -4,33 +4,32 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Combobox
+        # ── Container / popover ───────────────────────────────────────────────
+        CONTAINER = %w[relative].freeze
+        POPOVER   = %w[absolute top-full left-0 min-w-full].freeze
+
+        # ── Trigger ───────────────────────────────────────────────────────────
         TRIGGER = %w[
-          w-full rounded-(--sp-radius-md) border border-(--sp-color-muted-fg)
+          w-full rounded-(--sp-radius-md) border border-(--sp-color-muted-fg) hover:border-(--sp-color-fg)
           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-(--sp-focus-ring-color)
-          [.sp-form-combobox_&]:border-0 [.sp-form-combobox_&]:rounded-none
-          [.sp-form-combobox_&]:px-0 [.sp-form-combobox_&]:py-0
-          [.sp-form-combobox_&]:bg-transparent [.sp-form-combobox_&]:shadow-none
-          [.sp-form-combobox_&]:focus:ring-0
-          [.sp-combobox-group_&]:border-0 [.sp-combobox-group_&]:rounded-none
-          [.sp-combobox-group_&]:px-0 [.sp-combobox-group_&]:py-0
-          [.sp-combobox-group_&]:bg-transparent [.sp-combobox-group_&]:shadow-none
-          [.sp-combobox-group_&]:focus:ring-0
         ].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)
+          rounded-(--sp-radius-md) border border-(--sp-color-muted-fg) hover:border-(--sp-color-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)
-          sp-combobox-group
-          [.sp-form-combobox_&]:border-0 [.sp-form-combobox_&]:rounded-none
-          [.sp-form-combobox_&]:focus-within:ring-0
+          [&>input]:border-0 [&>input]:rounded-none
+          [&>input]:px-0 [&>input]:py-0
+          [&>input]:bg-transparent [&>input]:shadow-none
+          [&>input]:focus:ring-0
         ].freeze
 
+        # ── Listbox / options ─────────────────────────────────────────────────
         LISTBOX = %w[
-          py-(--sp-space-1) overflow-y-auto max-h-60
+          py-(--sp-space-1) overflow-y-auto max-h-60 min-h-(--sp-space-6)
         ].freeze
 
         OPTION_BASE = %w[
@@ -51,6 +50,7 @@ module StimulusPlumbers
 
         OPTION_GROUP = %w[py-(--sp-space-1)].freeze
 
+        # ── Typeahead states ──────────────────────────────────────────────────
         TYPEAHEAD_LOADING = %w[
           flex items-center justify-center
           py-(--sp-space-2) text-(length:--sp-text-sm) text-(--sp-color-muted-fg)
@@ -61,10 +61,26 @@ module StimulusPlumbers
           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
+        # ── Time picker ───────────────────────────────────────────────────────
+        TIME             = %w[flex gap-(--sp-space-2) overflow-hidden].freeze
+        TIME_DRUM_UNIT   = %w[flex-1 min-w-0].freeze
+        TIME_DRUM_PERIOD = %w[shrink-0].freeze
+
+        # ── Date navigation ───────────────────────────────────────────────────
+        DATE_NAV       = %w[flex items-center justify-between gap-(--sp-space-1) mb-(--sp-space-2)].freeze
+        DATE_NAV_BTN   = %w[].freeze
+        DATE_NAV_TITLE = %w[flex-1 text-center].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
@@ -95,6 +111,10 @@ module StimulusPlumbers
           { classes: klasses(*TYPEAHEAD_LOADING) }
         end
 
+        def combobox_typeahead_loading_icon_classes
+          { classes: klasses("size-(--sp-icon-size-md)", "animate-spin") }
+        end
+
         def combobox_typeahead_empty_classes
           { classes: klasses(*TYPEAHEAD_EMPTY) }
         end
@@ -102,6 +122,22 @@ module StimulusPlumbers
         def combobox_time_classes
           { classes: klasses(*TIME) }
         end
+
+        def combobox_time_drum_classes(type: :unit)
+          { classes: klasses(*(type == :period ? TIME_DRUM_PERIOD : TIME_DRUM_UNIT)) }
+        end
+
+        def combobox_date_navigation_classes
+          { classes: klasses(*DATE_NAV) }
+        end
+
+        def combobox_date_navigation_navigator_classes
+          { classes: klasses(*DATE_NAV_BTN) }
+        end
+
+        def combobox_date_navigation_title_classes
+          { classes: klasses(*DATE_NAV_TITLE) }
+        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,159 @@
+# 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_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-within: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-has-[input:not(:focus):placeholder-shown]:scale-100
+              peer-has-[input:not(:focus):placeholder-shown]:translate-y-0
+              peer-focus-within:scale-75
+              peer-focus-within:-translate-y-(--sp-space-4)
+              rtl:peer-focus-within:translate-x-1/4 rtl:peer-focus-within: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-within:px-(--sp-space-2)
+              peer-placeholder-shown:scale-100
+              peer-placeholder-shown:-translate-y-1/2
+              peer-placeholder-shown:top-1/2
+              peer-has-[input:not(:focus):placeholder-shown]:scale-100
+              peer-has-[input:not(:focus):placeholder-shown]:-translate-y-1/2
+              peer-has-[input:not(:focus):placeholder-shown]:top-1/2
+              peer-focus-within:top-(--sp-space-2) peer-focus-within:scale-75
+              peer-focus-within:-translate-y-(--sp-space-4)
+              rtl:peer-focus-within:translate-x-1/4 rtl:peer-focus-within:left-auto
+            ].freeze,
+            standard: %w[
+              -translate-y-(--sp-space-6) scale-75 top-(--sp-space-3) -z-10 start-0
+              peer-focus-within:start-0
+              peer-placeholder-shown:scale-100
+              peer-placeholder-shown:translate-y-0
+              peer-has-[input:not(:focus):placeholder-shown]:scale-100
+              peer-has-[input:not(:focus):placeholder-shown]:translate-y-0
+              peer-focus-within:scale-75
+              peer-focus-within:-translate-y-(--sp-space-6)
+              rtl:peer-focus-within:translate-x-1/4 rtl:peer-focus-within: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-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) 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)
+              group-has-[:checked]:border-(--card-ring) group-has-[:checked]:bg-(--card-ring)/10
+              group-has-[:checked]:text-(--sp-color-fg) group-has-[: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)
+              group-has-[:checked]:border-(--card-ring) group-has-[:checked]:bg-(--card-ring)/10
+              group-has-[:checked]:text-(--sp-color-fg) group-has-[: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_input_group_classes(floating: nil)
+            { classes: klasses(*FLOATING_GROUP_TYPES.fetch(floating, [])) }
+          end
+
+          def form_field_label_classes(floating: nil, hidden: false, error: false, **)
+            if floating
+              color = error ? FLOATING_LABEL_ERROR : FLOATING_LABEL_FOCUS
+              { classes: klasses(*FLOATING_LABEL_BASE, *FLOATING_LABEL_TYPES.fetch(floating, []), *color) }
+            else
+              { classes: klasses(*LABEL, hidden ? "sr-only" : nil) }
+            end
+          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
+
+          def form_field_radio_item_group_classes
+            { classes: "contents group" }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,240 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Form
+        module Input
+          # ── Standalone 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-(length:--sp-focus-ring-width) focus:ring-offset-0
+          ].freeze
+          INPUT_DEFAULT = %w[
+            border-(--sp-color-muted-fg) hover:border-(--sp-color-fg)
+            focus:ring-(--sp-focus-ring-color)
+          ].freeze
+          INPUT_ERROR = %w[border-(--sp-color-error) focus:ring-(--sp-color-error)].freeze
+
+          # ── Floating input ────────────────────────────────────────────────────
+          FLOATING_INPUT_BASE = %w[
+            peer w-full text-(length:--sp-text-sm) text-(--sp-color-fg) appearance-none
+            focus:outline-none focus:ring-0
+            focus-visible:outline-none focus-visible: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_DEFAULT = %w[
+            border-(--sp-color-muted-fg) hover:border-(--sp-color-fg)
+            focus:border-(--sp-color-primary)
+          ].freeze
+          FLOATING_INPUT_ERROR = %w[border-(--sp-color-error)].freeze
+
+          # ── Input group ───────────────────────────────────────────────────────
+          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
+
+          # ── Floating input group ──────────────────────────────────────────────
+          FLOATING_INPUT_GROUP_BASE = %w[flex items-center overflow-hidden peer].freeze
+          FLOATING_INPUT_GROUP_TYPES = {
+            filled:   %w[rounded-t-(--sp-radius-md) bg-(--sp-color-bg-muted) border-0 border-b-2].freeze,
+            outlined: %w[rounded-(--sp-radius-md) border].freeze,
+            standard: %w[rounded-none bg-transparent border-0 border-b-2].freeze
+          }.freeze
+          FLOATING_INPUT_GROUP_DEFAULT = %w[
+            border-(--sp-color-muted-fg) hover:border-(--sp-color-fg)
+            focus-within:border-(--sp-color-primary)
+          ].freeze
+          FLOATING_INPUT_GROUP_ERROR = %w[border-(--sp-color-error)].freeze
+
+          # ── Combobox wrappers ─────────────────────────────────────────────────
+          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
+
+          # ── Choice inputs ─────────────────────────────────────────────────────
+          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-(length:--sp-focus-ring-width) 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-(length:--sp-focus-ring-width) 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-(length:--sp-focus-ring-width) 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-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none
+              disabled:opacity-50 disabled:cursor-not-allowed
+            ].freeze,
+            button:  %w[hidden].freeze,
+            card:    %w[hidden].freeze
+          }.freeze
+
+          # ── Utility buttons ───────────────────────────────────────────────────
+          BUTTON_REVEAL = [
+            *Control::BASE,
+            "inline-flex items-center justify-center",
+            "focus-visible:ring-(--sp-focus-ring-color)",
+            "self-stretch px-(--sp-space-2) border-0 bg-transparent cursor-pointer text-(--sp-color-muted-fg)",
+            "rounded-(--sp-radius-sm) hover:bg-(--sp-color-muted) hover:text-(--sp-color-fg)"
+          ].freeze
+          BUTTON_CLEAR = [
+            *Control::BASE,
+            "inline-flex items-center justify-center",
+            "focus-visible:ring-(--sp-focus-ring-color)",
+            "self-stretch px-(--sp-space-2) border-0 bg-transparent cursor-pointer text-(--sp-color-muted-fg)",
+            "rounded-(--sp-radius-sm) hover:bg-(--sp-color-muted) hover:text-(--sp-color-fg)"
+          ].freeze
+
+          private
+
+          def form_field_input_classes(floating: nil, error: false)
+            if floating
+              { classes: klasses(
+                *FLOATING_INPUT_BASE,
+                *FLOATING_INPUT_TYPES.fetch(floating, []),
+                *(error ? FLOATING_INPUT_ERROR : FLOATING_INPUT_DEFAULT)
+              )
+}
+            else
+              { classes: klasses(*INPUT_BASE, *(error ? INPUT_ERROR : INPUT_DEFAULT)) }
+            end
+          end
+
+          def form_field_input_textarea_classes(floating: nil, error: false)
+            form_field_input_classes(floating: floating, error: error)
+          end
+
+          def form_field_input_file_classes(floating: nil, error: false)
+            form_field_input_classes(floating: floating, error: error)
+          end
+
+          def form_field_input_select_classes(floating: nil, error: false)
+            form_field_input_classes(floating: floating, 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, floating: nil)
+            if floating
+              color = error ? FLOATING_INPUT_GROUP_ERROR : FLOATING_INPUT_GROUP_DEFAULT
+              { classes: klasses(*FLOATING_INPUT_GROUP_BASE, *FLOATING_INPUT_GROUP_TYPES.fetch(floating, []), *color) }
+            else
+              { classes: klasses(*INPUT_GROUP_BASE, INPUT_GROUP_BORDER[error ? :error : :default]) }
+            end
+          end
+
+          def form_field_input_combobox_classes(floating: nil, error: false)
+            if floating
+              form_field_input_combobox_floating_classes(floating: floating, error: error)
+            else
+              {
+                classes: klasses(
+                  *INPUT_BASE,
+                  *(error ? INPUT_ERROR : INPUT_DEFAULT),
+                  *COMBOBOX_INPUT,
+                  *COMBOBOX_TRIGGER_GROUP
+                )
+              }
+            end
+          end
+
+          def form_field_input_combobox_floating_classes(floating: :standard, error: false)
+            {
+              classes: klasses(
+                *FLOATING_INPUT_BASE,
+                *FLOATING_INPUT_TYPES.fetch(floating, []),
+                *(error ? FLOATING_INPUT_ERROR : FLOATING_INPUT_DEFAULT),
+                *COMBOBOX_INPUT,
+                *COMBOBOX_TRIGGER_GROUP
+              )
+            }
+          end
+
+          def form_field_input_reveal_classes(**)
+            {
+              classes: klasses(
+                "peer",
+                "[&>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,38 +4,8 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Form
-        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
-          [.sp-form-input-group_&]:border-0 [.sp-form-input-group_&]:rounded-none
-          [.sp-form-input-group_&]:bg-transparent [.sp-form-input-group_&]:shadow-none
-          [.sp-form-input-group_&]:focus:ring-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
-
-        GROUP_BASE    = %w[flex gap-(--sp-space-1) mb-(--sp-space-3)].freeze
-        GROUP_INLINE  = %w[flex-row items-center].freeze
-
-        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
-        DETAILS       = %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
-        CHECKBOX      = %w[size-(--sp-control-size) rounded border-(--sp-color-muted-fg) text-(--sp-color-primary)].freeze
-        RADIO         = %w[size-(--sp-control-size) border-(--sp-color-muted-fg) text-(--sp-color-primary)].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
-
-        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
-        SUBMIT_LINK = %w[cursor-pointer text-(length:--sp-text-sm) font-medium text-(--sp-color-fg) 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
 
@@ -43,78 +13,7 @@ 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 input_group_classes(error: false)
-          { classes: klasses(*INPUT_GROUP_BASE, INPUT_GROUP_BORDER[error ? :error : :default]) }
-        end
-
-        def form_combobox_classes(error: false)
-          { classes: klasses(*INPUT_BASE, *(error ? INPUT_ERROR : INPUT_DEFAULT), "sp-form-combobox") }
-        end
-
-        def form_input_reveal_classes(**)
-          { classes: "sp-form-input-group" }
-        end
-
-        def form_input_clearable_classes
-          { classes: "sp-form-input-group" }
-        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
-        end
+        def form_submit_classes(**) = {}
       end
     end
   end

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

@@ -9,8 +9,14 @@ module StimulusPlumbers
     module Tailwind
       module Icon
         ALIASES = {
-          "close"    => "x-mark",
-          "calendar" => "calendar-days"
+          "close"         => "x-mark",
+          "download"      => "arrow-down-tray",
+          "book"          => "book-open",
+          "edit"          => "pencil",
+          "email"         => "envelope",
+          "calendar"      => "calendar-days",
+          "external-link" => "arrow-top-right-on-square",
+          "reveal"        => "eye"
         }.freeze
 
         ICONS = StimulusPlumbers::Themes::Icons::Registry.new(
@@ -25,7 +31,7 @@ module StimulusPlumbers
         private
 
         def icon_classes
-          { classes: "size-(--sp-icon-default)" }
+          { classes: "size-(--sp-icon-size-lg)" }
         end
       end
     end