stimulus_plumbers 0.2.2

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

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Avatar
+        COLORS = {
+          amber:   "text-white bg-amber-600",
+          lime:    "text-white bg-lime-600",
+          sky:     "text-white bg-sky-600",
+          cyan:    "text-white bg-cyan-600",
+          teal:    "text-white bg-teal-600",
+          emerald: "text-white bg-emerald-600",
+          indigo:  "text-white bg-indigo-600",
+          fuchsia: "text-white bg-fuchsia-600",
+          rose:    "text-white bg-rose-600",
+          pink:    "text-white bg-pink-600",
+          violet:  "text-white bg-violet-600",
+          blue:    "text-white bg-blue-600"
+        }.freeze
+
+        SIZES = {
+          sm: "size-[--sp-icon-size]",
+          md: "size-[--sp-avatar-size]",
+          lg: "size-12"
+        }.freeze
+
+        BASE = %w[rounded-[--sp-radius-full] overflow-hidden inline-flex items-center justify-center].freeze
+
+        def avatar_colors
+          COLORS
+        end
+
+        def avatar_color_range
+          COLORS.values
+        end
+
+        private
+
+        def avatar_classes(size: :md, color: nil)
+          {
+            classes: klasses(
+              SIZES.fetch(size, SIZES[:md]),
+              COLORS.fetch(color, nil),
+              *BASE
+            )
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Button
+        VARIANTS = {
+          primary:     %w[
+            bg-[--sp-color-primary]
+            text-[--sp-color-primary-fg]
+            hover:bg-[--sp-color-primary]/90
+            focus-visible:ring-[--sp-focus-ring-color]
+          ].freeze,
+          secondary:   %w[
+            bg-[--sp-color-muted]
+            text-[--sp-color-fg]
+            hover:bg-[--sp-color-border]
+          ].freeze,
+          outline:     %w[
+            border border-[--sp-color-border]
+            bg-transparent
+            text-[--sp-color-fg]
+            hover:bg-[--sp-color-muted]
+          ].freeze,
+          destructive: %w[
+            bg-[--sp-color-destructive]
+            text-[--sp-color-destructive-fg]
+            hover:bg-[--sp-color-destructive]/90
+          ].freeze,
+          ghost:       %w[hover:bg-[--sp-color-muted] text-[--sp-color-fg]].freeze,
+          link:        %w[text-[--sp-color-primary] underline-offset-4 hover:underline].freeze
+        }.freeze
+
+        SIZES = {
+          sm: %w[h-8 px-[--sp-space-3] text-[--sp-text-sm]].freeze,
+          md: %w[h-9 px-[--sp-space-4] text-[--sp-text-base]].freeze,
+          lg: %w[h-11 px-[--sp-space-6] text-[--sp-text-lg]].freeze
+        }.freeze
+
+        FLEX_ALIGN = {
+          row: {
+            left:   "justify-start",
+            center: %w[justify-center items-center].freeze,
+            right:  "justify-end",
+            top:    "items-start",
+            bottom: "items-end"
+          }.freeze,
+          col: {
+            top:    "justify-start",
+            center: %w[justify-center items-center].freeze,
+            bottom: "justify-end",
+            left:   "items-start",
+            right:  "items-end"
+          }.freeze
+        }.freeze
+
+        BASE = %w[
+          inline-flex items-center justify-center gap-2 font-medium
+          rounded-[--sp-radius-md] transition-colors
+          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
+          disabled:pointer-events-none disabled:opacity-50
+        ].freeze
+
+        GROUP_BASE = %w[flex gap-[--sp-space-2]].freeze
+
+        private
+
+        def button_classes(variant: :primary, size: :md)
+          {
+            classes: klasses(
+              *BASE,
+              *VARIANTS.fetch(variant, []),
+              *SIZES.fetch(size, [])
+            )
+          }
+        end
+
+        def button_group_classes(alignment: :left, direction: :row)
+          {
+            classes: klasses(
+              *GROUP_BASE,
+              *Array(FLEX_ALIGN.dig(direction, alignment))
+            )
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Calendar
+        BASE = %w[
+          size-[--sp-calendar-day-size] rounded-[--sp-radius-md]
+          flex items-center justify-center text-[--sp-text-sm]
+          hover:bg-[--sp-color-muted] cursor-pointer
+        ].freeze
+
+        DAY_SELECTED = %w[
+          bg-[--sp-color-primary]
+          text-[--sp-color-primary-fg]
+          hover:bg-[--sp-color-primary]/90
+        ].freeze
+
+        private
+
+        def calendar_day_classes(today: false, selected: false, outside: false)
+          {
+            classes: klasses(
+              *BASE,
+              *(today    ? ["font-bold"] : []),
+              *(selected ? DAY_SELECTED : []),
+              *(outside  ? %w[text-[--sp-color-muted-fg] opacity-50] : [])
+            )
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Card
+        BASE = %w[
+          rounded-[--sp-radius-lg] border border-[--sp-color-border]
+          bg-[--sp-color-bg] shadow-[--sp-shadow-sm]
+        ].freeze
+
+        private
+
+        def card_classes
+          { classes: klasses(*BASE) }
+        end
+
+        def card_section_classes
+          { classes: klasses("p-[--sp-space-6]") }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+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
+
+        ACTOR_BASE    = %w[flex items-center overflow-hidden rounded-md border].freeze
+        ACTOR_BORDER  = { error: "border-red-700", default: "border-gray-500" }.freeze
+
+        INPUT_REVEAL = %w[
+          flex-1 border-0 bg-transparent px-3 py-2 text-sm text-gray-900 focus:outline-none
+        ].freeze
+        BUTTON_REVEAL = %w[
+          self-stretch border-0 bg-transparent px-3 cursor-pointer text-gray-600 hover:text-gray-900 text-sm
+        ].freeze
+        SUBMIT_LINK = %w[cursor-pointer text-sm font-medium text-gray-900 hover:underline].freeze
+
+        private
+
+        def form_group_classes(layout: :stacked, **_rest)
+          { classes: klasses(*GROUP_BASE, layout == :inline ? GROUP_INLINE : "flex-col") }
+        end
+
+        def form_label_classes(**)
+          { classes: klasses(*LABEL) }
+        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_actor_classes(error: false)
+          { classes: klasses(*ACTOR_BASE, ACTOR_BORDER[error ? :error : :default]) }
+        end
+
+        def form_input_reveal_classes
+          { classes: klasses(*INPUT_REVEAL) }
+        end
+
+        def form_button_reveal_classes
+          { classes: klasses(*BUTTON_REVEAL) }
+        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
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Layout
+        DIVIDER = %w[border-t border-[--sp-color-border] my-[--sp-space-1]].freeze
+        POPOVER = %w[
+          rounded-[--sp-radius-lg] border border-[--sp-color-border]
+          bg-[--sp-color-bg] shadow-[--sp-shadow-md] z-[--sp-z-popover]
+        ].freeze
+
+        private
+
+        def divider_classes
+          { classes: klasses(*DIVIDER) }
+        end
+
+        def popover_classes
+          { classes: klasses(*POPOVER) }
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind_theme.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+require_relative "tailwind/action_list"
+require_relative "tailwind/avatar"
+require_relative "tailwind/button"
+require_relative "tailwind/calendar"
+require_relative "tailwind/card"
+require_relative "tailwind/form"
+require_relative "tailwind/layout"
+
+module StimulusPlumbers
+  module Themes
+    class TailwindTheme < Base
+      include Tailwind::ActionList
+      include Tailwind::Avatar
+      include Tailwind::Button
+      include Tailwind::Calendar
+      include Tailwind::Card
+      include Tailwind::Form
+      include Tailwind::Layout
+
+      private
+
+      def klasses(*classes)
+        classes.flatten.reject(&:blank?).join(" ")
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  VERSION = "0.2.2"
+end

data/lib/stimulus_plumbers.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require_relative "stimulus_plumbers/version"
+
+require "active_support"
+require "active_support/core_ext/string"
+
+require_relative "stimulus_plumbers/configuration"
+require_relative "stimulus_plumbers/helpers"
+require_relative "stimulus_plumbers/logger"
+
+require_relative "stimulus_plumbers/components/plumber/html_options"
+require_relative "stimulus_plumbers/components/plumber/dispatcher"
+require_relative "stimulus_plumbers/components/plumber/renderer"
+require_relative "stimulus_plumbers/components/plumber/base"
+
+require_relative "stimulus_plumbers/components/icon/renderer"
+require_relative "stimulus_plumbers/components/avatar/renderer"
+require_relative "stimulus_plumbers/components/button/renderer"
+require_relative "stimulus_plumbers/components/card/renderer"
+require_relative "stimulus_plumbers/components/action_list/renderer"
+require_relative "stimulus_plumbers/components/popover/renderer"
+
+require_relative "stimulus_plumbers/components/calendar/renderer"
+require_relative "stimulus_plumbers/components/calendar/month/turbo/days_of_week"
+require_relative "stimulus_plumbers/components/calendar/month/turbo/days_of_month"
+require_relative "stimulus_plumbers/components/calendar/month/turbo/renderer"
+
+require_relative "stimulus_plumbers/components/date_picker/navigator"
+require_relative "stimulus_plumbers/components/date_picker/navigation"
+require_relative "stimulus_plumbers/components/date_picker/renderer"
+
+require_relative "stimulus_plumbers/form/field_component"
+require_relative "stimulus_plumbers/form/builder"
+
+module StimulusPlumbers
+  class << self
+    def configure
+      yield config
+    end
+
+    def config
+      @config ||= Configuration.new
+    end
+  end
+end
+
+require_relative "stimulus_plumbers/engine" if defined?(Rails::Engine)

metadata

@@ -0,0 +1,129 @@
+--- !ruby/object:Gem::Specification
+name: stimulus_plumbers
+version: !ruby/object:Gem::Version
+  version: 0.2.2
+platform: ruby
+authors:
+- Ryan Chang
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2026-04-14 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '8.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '8.2'
+description: Semantically correct, accessible UI components for Rails using ActionView
+  helpers and Stimulus
+email:
+- ryancyq@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- app/assets/javascripts/stimulus-plumbers/.keep
+- app/assets/stylesheets/stimulus_plumbers/tokens.css
+- lib/stimulus_plumbers.rb
+- lib/stimulus_plumbers/components/action_list/renderer.rb
+- lib/stimulus_plumbers/components/avatar/renderer.rb
+- lib/stimulus_plumbers/components/button/renderer.rb
+- lib/stimulus_plumbers/components/calendar/month/turbo/days_of_month.rb
+- lib/stimulus_plumbers/components/calendar/month/turbo/days_of_week.rb
+- lib/stimulus_plumbers/components/calendar/month/turbo/renderer.rb
+- lib/stimulus_plumbers/components/calendar/renderer.rb
+- lib/stimulus_plumbers/components/card/renderer.rb
+- lib/stimulus_plumbers/components/date_picker/navigation.rb
+- lib/stimulus_plumbers/components/date_picker/navigator.rb
+- lib/stimulus_plumbers/components/date_picker/renderer.rb
+- lib/stimulus_plumbers/components/icon/renderer.rb
+- lib/stimulus_plumbers/components/plumber/base.rb
+- lib/stimulus_plumbers/components/plumber/dispatcher.rb
+- lib/stimulus_plumbers/components/plumber/html_options.rb
+- lib/stimulus_plumbers/components/plumber/renderer.rb
+- lib/stimulus_plumbers/components/popover/renderer.rb
+- lib/stimulus_plumbers/configuration.rb
+- lib/stimulus_plumbers/engine.rb
+- lib/stimulus_plumbers/form/builder.rb
+- lib/stimulus_plumbers/form/field_component.rb
+- lib/stimulus_plumbers/form/fields/choice.rb
+- lib/stimulus_plumbers/form/fields/file.rb
+- lib/stimulus_plumbers/form/fields/renderer.rb
+- lib/stimulus_plumbers/form/fields/select.rb
+- lib/stimulus_plumbers/form/fields/text.rb
+- lib/stimulus_plumbers/form/fields/text_area.rb
+- lib/stimulus_plumbers/helpers.rb
+- lib/stimulus_plumbers/helpers/action_list_helper.rb
+- lib/stimulus_plumbers/helpers/avatar_helper.rb
+- lib/stimulus_plumbers/helpers/button_helper.rb
+- lib/stimulus_plumbers/helpers/calendar_helper.rb
+- lib/stimulus_plumbers/helpers/calendar_turbo_helper.rb
+- lib/stimulus_plumbers/helpers/card_helper.rb
+- lib/stimulus_plumbers/helpers/date_picker_helper.rb
+- lib/stimulus_plumbers/helpers/plumber_helper.rb
+- lib/stimulus_plumbers/helpers/popover_helper.rb
+- lib/stimulus_plumbers/logger.rb
+- lib/stimulus_plumbers/themes/action_list.rb
+- lib/stimulus_plumbers/themes/avatar.rb
+- lib/stimulus_plumbers/themes/base.rb
+- lib/stimulus_plumbers/themes/button.rb
+- lib/stimulus_plumbers/themes/calendar.rb
+- lib/stimulus_plumbers/themes/card.rb
+- lib/stimulus_plumbers/themes/form.rb
+- lib/stimulus_plumbers/themes/layout.rb
+- lib/stimulus_plumbers/themes/schema/ranges.rb
+- 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/calendar.rb
+- lib/stimulus_plumbers/themes/tailwind/card.rb
+- lib/stimulus_plumbers/themes/tailwind/form.rb
+- lib/stimulus_plumbers/themes/tailwind/layout.rb
+- lib/stimulus_plumbers/themes/tailwind_theme.rb
+- lib/stimulus_plumbers/version.rb
+homepage: https://github.com/ryancyq/stimulus-plumbers
+licenses:
+- MIT
+metadata:
+  rubygems_mfa_required: 'true'
+  allowed_push_host: https://rubygems.org
+  changelog_uri: https://github.com/ryancyq/stimulus-plumbers/blob/main/CHANGELOG.md
+  homepage_uri: https://github.com/ryancyq/stimulus-plumbers
+  source_code_uri: https://github.com/ryancyq/stimulus-plumbers/tree/main/stimulus-plumbers-rails
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.2.0
+requirements: []
+rubygems_version: 3.5.22
+signing_key:
+specification_version: 4
+summary: Accessible ActionView components for Rails with Stimulus controllers
+test_files: []