stimulus_plumbers_tailwind 0.3.3 → 0.4.2

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

@@ -4,11 +4,24 @@ module StimulusPlumbers
   module Themes
     module Tailwind
       module Layout
-        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
+        # ── Divider ───────────────────────────────────────────────────────────
+        DIVIDER           = %w[w-full flex items-center gap-(--sp-space-3)].freeze
+        DIVIDER_SEPARATOR = %w[flex-1 h-px bg-(--sp-color-border) border-0].freeze
+        DIVIDER_LABEL     = %w[text-(length:--sp-text-sm) text-(--sp-color-muted-fg) whitespace-nowrap font-medium].freeze
+
+        # ── Popover ───────────────────────────────────────────────────────────
+        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 +39,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,87 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Link
+        # ── Type styles ───────────────────────────────────────────────────────
+        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
+
+        # ── Color tokens ──────────────────────────────────────────────────────
+        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
+
+        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-icon-size-sm)", "stroke-current") }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module List
+        # ── Section ───────────────────────────────────────────────────────────
+        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
+
+        # ── Item ──────────────────────────────────────────────────────────────
+        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
+
+        private
+
+        def list_classes
+          { classes: klasses("py-(--sp-space-1)") }
+        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-icon-size-sm)", "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

data/lib/stimulus_plumbers/themes/tailwind/timeline/group.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Timeline
+        module Group
+          WRAPPER  = %w[space-y-4].freeze
+          SECTION  = %w[
+            p-4
+            bg-(--sp-color-bg-muted)
+            border border-(--sp-color-border)
+            rounded-lg
+          ].freeze
+          DATE     = %w[text-base font-semibold text-(--sp-color-fg)].freeze
+          LIST     = %w[mt-3 divide-y divide-(--sp-color-border)].freeze
+
+          private
+
+          def timeline_group_classes              = { classes: klasses(WRAPPER) }
+          def timeline_group_section_classes      = { classes: klasses(SECTION) }
+          def timeline_group_section_date_classes = { classes: klasses(DATE) }
+          def timeline_group_section_list_classes = { classes: klasses(LIST) }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+require_relative "timeline/group"
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Timeline
+        TRACK_VERTICAL   = %w[flex flex-col gap-y-10].freeze
+        TRACK_HORIZONTAL = %w[flex].freeze
+
+        TRACK_LINE_VERTICAL = %w[absolute inset-y-0 start-3 w-px bg-(--sp-color-border)].freeze
+
+        ITEM_VERTICAL    = %w[flex gap-x-4 items-start].freeze
+        ITEM_HORIZONTAL  = %w[relative flex-1].freeze
+
+        ITEM_INDICATOR_DOT = %w[
+          mt-1 flex shrink-0 size-6 items-center justify-center rounded-full z-10
+          bg-(--sp-color-bg) ring-4 ring-(--sp-color-bg)
+        ].freeze
+        ITEM_INDICATOR_DOT_MARK = %w[size-3 rounded-full bg-(--sp-color-indicator)].freeze
+
+        ITEM_INDICATOR_ICON = %w[
+          mt-1 flex shrink-0 size-6 items-center justify-center rounded-full z-10
+          bg-(--sp-color-primary) text-(--sp-color-primary-fg)
+          ring-4 ring-(--sp-color-bg)
+        ].freeze
+
+        ITEM_INDICATOR_ICON_SLOT = %w[size-(--sp-icon-size-sm) stroke-current].freeze
+
+        ITEM_INDICATOR_DOT_HORIZONTAL = %w[
+          z-10 flex shrink-0 size-6 items-center justify-center rounded-full
+          bg-(--sp-color-bg) ring-4 ring-(--sp-color-bg)
+        ].freeze
+
+        ITEM_INDICATOR_ICON_HORIZONTAL = %w[
+          z-10 flex shrink-0 size-6 items-center justify-center rounded-full
+          bg-(--sp-color-primary) text-(--sp-color-primary-fg)
+          ring-4 ring-(--sp-color-bg)
+        ].freeze
+
+        ITEM_CONNECTOR_HORIZONTAL = %w[w-full h-px bg-(--sp-color-border) last:hidden].freeze
+        ITEM_CONTENT_HORIZONTAL   = %w[mt-3 pe-2].freeze
+
+        ITEM_TIME        = %w[mb-1 block text-sm leading-none text-(--sp-color-muted-fg)].freeze
+        ITEM_TIME_BADGE  = %w[
+          mb-1 inline-block
+          bg-(--sp-color-bg-muted) border border-(--sp-color-border)
+          text-(--sp-color-fg) text-xs font-medium px-1.5 py-0.5 rounded
+        ].freeze
+        ITEM_TITLE       = %w[mb-1 text-base font-semibold text-(--sp-color-fg)].freeze
+        ITEM_HEADING     = %w[mb-1].freeze
+        ITEM_TRIGGER     = %w[
+          w-full text-left text-base font-semibold
+          text-(--sp-color-fg)
+          hover:text-(--sp-color-primary)
+          focus-visible:outline-none focus-visible:ring-2
+          focus-visible:ring-(--sp-color-primary) focus-visible:rounded-sm
+        ].freeze
+        ITEM_DESCRIPTION = %w[text-sm text-(--sp-color-muted-fg)].freeze
+        ITEM_DETAIL      = %w[mt-2 text-sm text-(--sp-color-muted-fg)].freeze
+        ITEM_ACTIONS     = %w[mt-3 flex flex-wrap items-center gap-2].freeze
+
+        private
+
+        def timeline_classes(orientation: :vertical)
+          track = orientation.to_sym == :horizontal ? TRACK_HORIZONTAL : TRACK_VERTICAL
+          { classes: klasses(track) }
+        end
+
+        def timeline_item_classes(orientation: :vertical)
+          item = orientation.to_sym == :horizontal ? ITEM_HORIZONTAL : ITEM_VERTICAL
+          { classes: klasses(item) }
+        end
+
+        def timeline_item_indicator_classes(type: :dot, orientation: :vertical)
+          base = if orientation.to_sym == :horizontal
+                   type.to_sym == :icon ? ITEM_INDICATOR_ICON_HORIZONTAL : ITEM_INDICATOR_DOT_HORIZONTAL
+                 else
+                   type.to_sym == :icon ? ITEM_INDICATOR_ICON : ITEM_INDICATOR_DOT
+                 end
+          { classes: klasses(base) }
+        end
+
+        def timeline_item_time_classes(type: :default)
+          base = type.to_sym == :badge ? ITEM_TIME_BADGE : ITEM_TIME
+          { classes: klasses(base) }
+        end
+
+        def timeline_item_title_classes       = { classes: klasses(ITEM_TITLE) }
+        def timeline_item_heading_classes     = { classes: klasses(ITEM_HEADING) }
+        def timeline_item_trigger_classes     = { classes: klasses(ITEM_TRIGGER) }
+        def timeline_item_description_classes = { classes: klasses(ITEM_DESCRIPTION) }
+        def timeline_item_detail_classes      = { classes: klasses(ITEM_DETAIL) }
+        def timeline_item_actions_classes     = { classes: klasses(ITEM_ACTIONS) }
+        def timeline_item_indicator_dot_classes = { classes: klasses(ITEM_INDICATOR_DOT_MARK) }
+        def timeline_item_connector_classes       = { classes: klasses(ITEM_CONNECTOR_HORIZONTAL) }
+        def timeline_item_content_classes         = { classes: klasses(ITEM_CONTENT_HORIZONTAL) }
+        def timeline_track_line_classes                = { classes: klasses(TRACK_LINE_VERTICAL) }
+        def timeline_item_indicator_icon_slot_classes  = { classes: klasses(ITEM_INDICATOR_ICON_SLOT) }
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind_theme.rb

@@ -1,27 +1,39 @@
 # frozen_string_literal: true
 
-require_relative "tailwind/action_list"
+require_relative "tailwind/control"
+require_relative "tailwind/list"
 require_relative "tailwind/avatar"
 require_relative "tailwind/button"
+require_relative "tailwind/button/group"
 require_relative "tailwind/calendar"
 require_relative "tailwind/card"
 require_relative "tailwind/combobox"
 require_relative "tailwind/form"
+require_relative "tailwind/form/field"
+require_relative "tailwind/form/input"
 require_relative "tailwind/icon"
 require_relative "tailwind/layout"
+require_relative "tailwind/link"
+require_relative "tailwind/timeline"
 
 module StimulusPlumbers
   module Themes
     class TailwindTheme < Base
-      include Tailwind::ActionList
+      include Tailwind::List
       include Tailwind::Combobox
       include Tailwind::Avatar
       include Tailwind::Button
+      include Tailwind::Button::Group
       include Tailwind::Calendar
       include Tailwind::Card
       include Tailwind::Form
+      include Tailwind::Form::Field
+      include Tailwind::Form::Input
       include Tailwind::Icon
       include Tailwind::Layout
+      include Tailwind::Link
+      include Tailwind::Timeline
+      include Tailwind::Timeline::Group
 
       private
 

data/lib/stimulus_plumbers_tailwind/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module StimulusPlumbersTailwind
-  VERSION = "0.3.3"
+  VERSION = "0.4.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stimulus_plumbers_tailwind
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.4.2
 platform: ruby
 authors:
 - Ryan Chang
@@ -33,13 +33,16 @@ files:
 - CHANGELOG.md
 - LICENSE-DEPENDENCIES
 - README.md
-- lib/stimulus_plumbers/themes/tailwind/action_list.rb
 - lib/stimulus_plumbers/themes/tailwind/avatar.rb
 - lib/stimulus_plumbers/themes/tailwind/button.rb
+- lib/stimulus_plumbers/themes/tailwind/button/group.rb
 - lib/stimulus_plumbers/themes/tailwind/calendar.rb
 - lib/stimulus_plumbers/themes/tailwind/card.rb
 - lib/stimulus_plumbers/themes/tailwind/combobox.rb
+- lib/stimulus_plumbers/themes/tailwind/control.rb
 - lib/stimulus_plumbers/themes/tailwind/form.rb
+- lib/stimulus_plumbers/themes/tailwind/form/field.rb
+- lib/stimulus_plumbers/themes/tailwind/form/input.rb
 - lib/stimulus_plumbers/themes/tailwind/icon.rb
 - lib/stimulus_plumbers/themes/tailwind/icons/custom.rb
 - lib/stimulus_plumbers/themes/tailwind/icons/customs/spinner.svg
@@ -693,6 +696,10 @@ files:
 - lib/stimulus_plumbers/themes/tailwind/icons/heroicons/solid/x-circle.svg
 - lib/stimulus_plumbers/themes/tailwind/icons/heroicons/solid/x-mark.svg
 - lib/stimulus_plumbers/themes/tailwind/layout.rb
+- lib/stimulus_plumbers/themes/tailwind/link.rb
+- lib/stimulus_plumbers/themes/tailwind/list.rb
+- lib/stimulus_plumbers/themes/tailwind/timeline.rb
+- lib/stimulus_plumbers/themes/tailwind/timeline/group.rb
 - lib/stimulus_plumbers/themes/tailwind_theme.rb
 - lib/stimulus_plumbers_tailwind.rb
 - lib/stimulus_plumbers_tailwind/engine.rb

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

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Themes
-    module Tailwind
-      module ActionList
-        LIST_ITEM_ACTIVE = %w[bg-(--sp-color-primary)/10 text-(--sp-color-primary)].freeze
-        LIST_ITEM_BASE   = %w[
-          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 outline-none
-          hover:bg-(--sp-color-muted) focus:bg-(--sp-color-muted) focus:text-(--sp-color-fg)
-        ].freeze
-
-        private
-
-        def action_list_classes
-          { classes: klasses("py-(--sp-space-1)") }
-        end
-
-        def action_list_item_classes(active: false)
-          {
-            classes: klasses(
-              *LIST_ITEM_BASE,
-              *(active ? LIST_ITEM_ACTIVE : [])
-            )
-          }
-        end
-      end
-    end
-  end
-end