stimulus_plumbers_tailwind 0.3.3 → 0.4.0

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,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,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 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
+        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

@@ -9,8 +9,9 @@ module StimulusPlumbers
     module Tailwind
       module Icon
         ALIASES = {
-          "close"    => "x-mark",
-          "calendar" => "calendar-days"
+          "close"         => "x-mark",
+          "calendar"      => "calendar-days",
+          "external-link" => "arrow-top-right-on-square"
         }.freeze
 
         ICONS = StimulusPlumbers::Themes::Icons::Registry.new(

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

@@ -7,8 +7,18 @@ module StimulusPlumbers
         DIVIDER_SEPARATOR = %w[border-t border-(--sp-color-border) my-(--sp-space-1)].freeze
         DIVIDER           = %w[flex items-center gap-(--sp-space-3)].freeze
         DIVIDER_LABEL     = %w[text-(length:--sp-text-sm) text-(--sp-color-fg-muted) whitespace-nowrap font-medium].freeze
+        POPOVER_WRAPPER = %w[relative inline-block].freeze
+        POPOVER_TRIGGER = [
+          *Control::BASE,
+          "inline-flex items-center justify-center gap-(--sp-space-2)",
+          "rounded-(--sp-radius-md)",
+          "focus-visible:ring-(--sp-focus-ring-color)",
+          "border border-(--sp-color-border) bg-transparent text-(--sp-color-fg)",
+          "hover:bg-(--sp-color-muted)",
+          "h-9 px-(--sp-space-4) py-(--sp-space-2) text-(length:--sp-text-sm)"
+        ].freeze
         POPOVER = %w[
-          rounded-(--sp-radius-lg) border border-(--sp-color-border)
+          rounded-(--sp-radius-md) border border-(--sp-color-border)
           bg-(--sp-color-bg) shadow-(--sp-shadow-md) z-(--sp-z-popover)
         ].freeze
 
@@ -26,6 +36,14 @@ module StimulusPlumbers
           { classes: klasses(*DIVIDER_LABEL) }
         end
 
+        def popover_wrapper_classes
+          { classes: klasses(*POPOVER_WRAPPER) }
+        end
+
+        def popover_trigger_classes
+          { classes: klasses(*POPOVER_TRIGGER) }
+        end
+
         def popover_classes
           { classes: klasses(*POPOVER) }
         end

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

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Link
+        VARIANTS = {
+          default:     %w[
+            [--link-color:var(--sp-color-primary)]
+            [--link-ring:var(--sp-color-primary)]
+            [--link-bg:var(--sp-color-primary)]
+          ].freeze,
+          success:     %w[
+            [--link-color:var(--sp-color-success)]
+            [--link-ring:var(--sp-color-success-ring)]
+            [--link-bg:var(--sp-color-success)]
+          ].freeze,
+          destructive: %w[
+            [--link-color:var(--sp-color-destructive)]
+            [--link-ring:var(--sp-color-destructive)]
+            [--link-bg:var(--sp-color-destructive)]
+          ].freeze,
+          warning:     %w[
+            [--link-color:var(--sp-color-warning)]
+            [--link-ring:var(--sp-color-warning-ring)]
+            [--link-bg:var(--sp-color-warning)]
+          ].freeze,
+          info:        %w[
+            [--link-color:var(--sp-color-info)]
+            [--link-ring:var(--sp-color-info-ring)]
+            [--link-bg:var(--sp-color-info)]
+          ].freeze
+        }.freeze
+
+        BASE = [
+          *Control::BASE,
+          "inline-flex items-center gap-(--sp-space-1)",
+          "text-(--link-color)",
+          "hover:underline",
+          "focus-visible:ring-(--link-ring)"
+        ].freeze
+
+        BUTTON = [
+          *Control::BASE,
+          "whitespace-nowrap",
+          "inline-flex items-center justify-center gap-(--sp-space-2)",
+          "h-9 px-(--sp-space-4) text-(length:--sp-text-base)",
+          "[&:not(:has(>span))]:aspect-square",
+          "[&:not(:has(>span))]:px-0",
+          "rounded-(--sp-radius-md)",
+          "bg-(--sp-color-bg) text-(--link-color)",
+          "border border-(--link-color)",
+          "hover:bg-(--link-bg)/10",
+          "focus-visible:ring-(--link-ring)"
+        ].freeze
+
+        CARD = [
+          *Control::BASE,
+          "whitespace-nowrap",
+          *Button::CARD,
+          "rounded-(--sp-radius-md)",
+          "bg-(--sp-color-bg) text-(--link-color)",
+          "border border-(--link-color) shadow-(--sp-shadow-xs)",
+          "hover:bg-(--link-bg)/10",
+          "focus-visible:ring-(--link-ring)"
+        ].freeze
+
+        private
+
+        def link_classes(type: :default, variant: :default)
+          variant_classes = VARIANTS.fetch(variant, VARIANTS[:default])
+          case type
+          when :button then { classes: klasses(*BUTTON, *variant_classes) }
+          when :card   then { classes: klasses(*CARD, *variant_classes) }
+          else              { classes: klasses(*BASE, *variant_classes) }
+          end
+        end
+
+        def link_icon_classes
+          { classes: klasses("size-(--sp-control-size)", "stroke-current") }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module List
+        ITEM_BASE = [
+          *Control::BASE,
+          "flex items-center gap-(--sp-space-2) w-full",
+          "px-(--sp-space-2) py-(--sp-space-1)",
+          "rounded-(--sp-radius-sm) text-(length:--sp-text-sm)",
+          "cursor-pointer select-none",
+          "text-(--sp-color-fg)",
+          "focus-visible:ring-(--sp-color-primary-ring)",
+          "hover:bg-(--sp-color-muted) focus:bg-(--sp-color-muted) focus:text-(--sp-color-fg)",
+          "aria-[current]:bg-(--sp-color-primary)/10 aria-[current]:text-(--sp-color-primary)"
+        ].freeze
+
+        ITEM_CONTENT_BASE = %w[
+          flex flex-col flex-1 min-w-0
+        ].freeze
+
+        ITEM_TITLE_BASE = %w[
+          text-(length:--sp-text-sm) font-medium text-(--sp-color-fg)
+        ].freeze
+
+        ITEM_DESCRIPTION_BASE = %w[
+          text-(length:--sp-text-xs) text-(--sp-color-muted-fg)
+        ].freeze
+
+        SECTION_TITLE_BASE = %w[
+          block px-(--sp-space-2) pb-(--sp-space-1)
+          text-(length:--sp-text-xs) font-semibold uppercase tracking-wider
+          text-(--sp-color-muted-fg)
+        ].freeze
+
+        SECTION_DESCRIPTION_BASE = %w[
+          block px-(--sp-space-2) pb-(--sp-space-1)
+          text-(length:--sp-text-xs) text-(--sp-color-muted-fg)
+        ].freeze
+
+        private
+
+        def list_classes
+          { classes: klasses("py-(--sp-space-1) divide-y divide-(--sp-color-border)") }
+        end
+
+        def list_section_classes
+          { classes: klasses("py-(--sp-space-2)") }
+        end
+
+        def list_section_title_classes
+          { classes: klasses(*SECTION_TITLE_BASE) }
+        end
+
+        def list_section_description_classes
+          { classes: klasses(*SECTION_DESCRIPTION_BASE) }
+        end
+
+        def list_item_classes
+          { classes: klasses(*ITEM_BASE) }
+        end
+
+        def list_item_icon_classes
+          { classes: klasses("size-(--sp-control-size)", "stroke-current") }
+        end
+
+        def list_item_content_classes
+          { classes: klasses(*ITEM_CONTENT_BASE) }
+        end
+
+        def list_item_title_classes
+          { classes: klasses(*ITEM_TITLE_BASE) }
+        end
+
+        def list_item_description_classes
+          { classes: klasses(*ITEM_DESCRIPTION_BASE) }
+        end
+      end
+    end
+  end
+end