loco_motion-rails 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 767e282b6b6bdd3838a976a9ee4b75e2b89d0e42282955076b00ffa9de3c092b
-  data.tar.gz: d87d11791dee9d2b92d1273d39f7eebbeffd9ff20b947ba208ae48692497d45d
+  metadata.gz: 687d91be39ee325ca12d4244a2f3f87d8fc4578b0b6c00df334851c453c6de78
+  data.tar.gz: ba936057cb428d3173bdade09ce87c168958e1d3ad8b894ed6114462e907e2fc
 SHA512:
-  metadata.gz: 949e31fa02cbf137771872b6c35c3abfc1ccbaebe065ae74076693a2b19861bd274bb00c55688c7d688dd4e92f01ae72886e9945a7b95d1f634bde95d4b67f87
-  data.tar.gz: 2072ec0b0557723d23df2d1b41af5aaa48e786f81a95715e29833aa9b33cb3b78e90a4625568756f33ec5cfcbb3624e681518aa66a329f6c38003f91791741fb
+  metadata.gz: 01d611aeba154bef36533cc860774e0c640e6e6e9417de8c3f3e060be59b4c1b33071a205b5321b6b99ec5a59814fbcb6ca230757a1d1d10b3bbdfcf1ac8d27f
+  data.tar.gz: c8e51c9a451c0199286b1b631da4e126054375113230bab242aad7c9c8387fdadc5244b80654abf0f11eb542615fef90087e522f7dddff01f7f200d3572dc91a

data/README.md

@@ -759,7 +759,7 @@ gem "loco_motion", github: "profoundry-us/loco_motion", branch: "main", require:
 
 # or
 
-gem "loco_motion-rails", "0.0.7", require: "loco_motion"
+gem "loco_motion-rails", "0.4.0", require: "loco_motion"
 ```
 
 Next add the following lines to the `contents` section of your
@@ -989,6 +989,11 @@ the GitHub Discussions feature and let us know!
       under certain conditions
 - [ ] Add title and description content_for blocks to all examples for SEO purposes
 - [ ] Update to Tailwind 4 and DaisyUI 5
+- [ ] Rename the `Dockerfile` to `Dockerfile.loco` to be more concise
+- [x] See if we can remove all of the `set_loco_parent` calls in favor of using
+      the `lib/loco_motion/patches/view_component/slot_loco_parent_patch.rb`
+- [ ] Make the tooltips documentation button a component and use it for the
+      Labelable concern docs too
 
 [1]: https://loco-motion.profoundry.us/
 [2]: https://loco-motion-demo-staging.profoundry.us/

data/app/components/daisy/actions/button_component.html.haml

@@ -2,6 +2,6 @@
   - if content?
     = content
   - else
-    = heroicon_tag(@left_icon, **left_icon_html) if @left_icon
+    = render_left_icon
     = @simple_title if @simple_title
-    = heroicon_tag(@right_icon, **right_icon_html) if @right_icon
+    = render_right_icon

data/app/components/daisy/actions/button_component.rb

@@ -3,7 +3,7 @@
 # that are styled to look like a clickable element.
 #
 # Note that we do **not** use component parts for the icons since we're calling
-# `heroicon_tag` within the component. But we **do** provide custom CSS & HTML
+# `heroicon` within the component. But we **do** provide custom CSS & HTML
 # options to allow overriding / customization.
 #
 # Includes the {LocoMotion::Concerns::TippableComponent} module to enable easy
@@ -19,8 +19,88 @@
 #
 #   = daisy_button(title: "Button with Two Icons", left_icon: "heart", right_icon: "plus")
 #
+# @loco_example Button Group
+#   = daisy_button_group do
+#     = daisy_button do
+#       Button 1
+#     = daisy_button do
+#       Button 2
+#
+# @loco_example Default Button
+#   = daisy_button { "Default Button" }
+#
+# @loco_example Primary Button
+#   = daisy_button(css: "btn-primary") { "Primary Button" }
+#
+# @loco_example Secondary Button
+#   = daisy_button(css: "btn-secondary") { "Secondary Button" }
+#
+# @loco_example Accent Button
+#   = daisy_button(css: "btn-accent") { "Accent Button" }
+#
+# @loco_example Ghost Button
+#   = daisy_button(css: "btn-ghost") { "Ghost Button" }
+#
+# @loco_example Link Button
+#   = daisy_button(css: "btn-link") { "Link Button" }
+#
+# @loco_example Info Button
+#   = daisy_button(css: "btn-info") { "Info Button" }
+#
+# @loco_example Success Button
+#   = daisy_button(css: "btn-success") { "Success Button" }
+#
+# @loco_example Warning Button
+#   = daisy_button(css: "btn-warning") { "Warning Button" }
+#
+# @loco_example Error Button
+#   = daisy_button(css: "btn-error") { "Error Button" }
+#
+# @loco_example Outline Primary Button
+#   = daisy_button(css: "btn-primary btn-outline") { "Outline Primary" }
+#
+# @loco_example Outline Success Button
+#   = daisy_button(css: "btn-success btn-outline") { "Outline Success" }
+#
+# @loco_example Outline Warning Button
+#   = daisy_button(css: "btn-warning btn-outline") { "Outline Warning" }
+#
+# @loco_example Outline Error Button
+#   = daisy_button(css: "btn-error btn-outline") { "Outline Error" }
+#
+# @loco_example Soft Primary Button
+#   = daisy_button(css: "btn-primary btn-soft") { "Soft Primary" }
+#
+# @loco_example Soft Success Button
+#   = daisy_button(css: "btn-success btn-soft") { "Soft Success" }
+#
+# @loco_example Soft Warning Button
+#   = daisy_button(css: "btn-warning btn-soft") { "Soft Warning" }
+#
+# @loco_example Soft Error Button
+#   = daisy_button(css: "btn-error btn-soft") { "Soft Error" }
+#
+# @loco_example Dash Primary Button
+#   = daisy_button(css: "btn-primary btn-dash") { "Dash Primary" }
+#
+# @loco_example Dash Success Button
+#   = daisy_button(css: "btn-success btn-dash") { "Dash Success" }
+#
+# @loco_example Dash Warning Button
+#   = daisy_button(css: "btn-warning btn-dash") { "Dash Warning" }
+#
+# @loco_example Dash Error Button
+#   = daisy_button(css: "btn-error btn-dash") { "Dash Error" }
+#
+# @loco_example Wide Button
+#   = daisy_button(css: "btn-wide") { "Wide Button" }
+#
 class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::LinkableComponent
+  include LocoMotion::Concerns::IconableComponent
+
+  define_parts :label
 
   #
   # Instantiate a new Button component.
@@ -29,20 +109,11 @@ class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
   #   of title, left icon, or right icon is provided. Will be considered the
   #   `action` parameter if **both** the title and a block are provided.
   #
-  # @param action [String] The Stimulus action that should fire when the button
-  #   is clicked.
-  #
   # @param kws    [Hash] The keyword arguments for the component.
   #
   # @option kws title           [String] The title of the button. You can also
   #   pass the title, icons, or any other HTML content as a block.
   #
-  # @option kws action          [String] The Stimulus action that should fire
-  #   when the button is clicked.
-  #
-  #   > **Note:** _You should use either the `action` or the `href` option, but
-  #   not both._
-  #
   # @option kws href            [String] A path or URL to which the user will be
   #   directed when the button is clicked. Forces the Button to use an `<a>`
   #   tag.
@@ -74,11 +145,9 @@ class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
   # @option kws right_icon      [String] The name of Hero icon to render inside
   #   the button to the right of the text.
   #
-  # @option kws right_icon_css  [String] The CSS classes to apply to the right
-  #   icon.
+  # @option kws right_icon_css  [String] Right icon CSS (via IconableComponent).
   #
-  # @option kws right_icon_html [Hash] Additional HTML attributes to apply to
-  #   the right icon.
+  # @option kws right_icon_html [Hash] Right icon HTML (via IconableComponent).
   #
   def initialize(title = nil, action = nil, **kws, &block)
     super
@@ -92,21 +161,7 @@ class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
 
     @action = config_option(:action, action)
 
-    @href = config_option(:href)
-    @target = config_option(:target)
-
-    @icon = config_option(:icon)
-    @icon_css = config_option(:icon_css, "[:where(&)]:size-5")
-    @icon_html = config_option(:icon_html, {})
-
-    @left_icon = config_option(:left_icon, @icon)
-    @left_icon_css = config_option(:left_icon_css, @icon_css)
-    @left_icon_html = config_option(:left_icon_html, @icon_html)
-
-    @right_icon = config_option(:right_icon)
-    @right_icon_css = config_option(:right_icon_css, @icon_css)
-    @right_icon_html = config_option(:right_icon_html, @icon_html)
-
+    # Initialize concerns -- handled by BaseComponent hook
     default_title = @left_icon || @right_icon ? nil : "Submit"
     @simple_title = config_option(:title, title || default_title)
   end
@@ -115,42 +170,26 @@ class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
   # Calls the {setup_component} method before rendering the component.
   #
   def before_render
+    # Run before the super so LinkableComponent can override our tag name
     setup_component
+
+    super
   end
 
   #
-  # Sets the tagname to `<a>` if an `href` is provided, otherwise sets it to
-  # `<button>`. Adds the `btn` CSS class to the component. Also adds
-  # `items-center` and `gap-2` CSS classes if an icon is present.
+  # Performs button-specific setup. Adds the `btn` CSS class to the component.
+  # Also adds `items-center` and `gap-2` CSS classes if an icon is present.
+  # Tag name setup (`<a>` vs `<button>`) and tooltip setup are handled by
+  # LinkableComponent and TippableComponent concerns via BaseComponent hooks.
   #
   def setup_component
-    if @href
-      set_tag_name(:component, :a)
-      add_html(:component, { href: @href, target: @target })
-    else
-      set_tag_name(:component, :button)
-    end
-
-    add_css(:component, "btn")
+    # Ensure tag is button if LinkableComponent didn't set it to <a>
+    set_tag_name(:component, :button)
 
-    if @icon || @left_icon || @right_icon
-      add_css(:component, "[:where(&)]:items-center [:where(&)]:gap-2")
-    end
+    # Add the btn class
+    add_css(:component, "btn") unless @skip_styling
 
-      add_html(:component, { "data-action": @action }) if @action
-  end
-
-  #
-  # Returns the HTML attributes for the left icon.
-  #
-  def left_icon_html
-    { class: @left_icon_css }.merge(@left_icon_html)
-  end
-
-  #
-  # Returns the HTML attributes for the right icon.
-  #
-  def right_icon_html
-    { class: @right_icon_css }.merge(@right_icon_html)
+    # Add data-action if specified
+    add_html(:component, { "data-action": @action }) if @action
   end
 end

data/app/components/daisy/actions/dropdown_component.html.haml

@@ -7,7 +7,6 @@
   - if items.any?
     = part(:menu) do
       - items.each do |item|
-        = part(:menu_item) do
-          = item
+        = item
   - else
     = content

data/app/components/daisy/actions/dropdown_component.rb

@@ -31,7 +31,7 @@
 # @loco_example Custom Activator
 #   = daisy_dropdown do |dropdown|
 #     - dropdown.with_activator do
-#       = heroicon_tag "bars-3", css: "size-6"
+#       = heroicon "bars-3", css: "size-6"
 #     - dropdown.with_item do
 #       Menu Item 1
 #     - dropdown.with_item do
@@ -43,26 +43,26 @@
 #       User Settings
 #     - dropdown.with_item do
 #       .flex.gap-2.items-center
-#         = heroicon_tag "user-circle"
+#         = heroicon "user-circle"
 #         Profile
 #     - dropdown.with_item do
 #       .flex.gap-2.items-center
-#         = heroicon_tag "cog-6-tooth"
+#         = heroicon "cog-6-tooth"
 #         Settings
 #     - dropdown.with_item do
 #       .flex.gap-2.items-center.text-error
-#         = heroicon_tag "arrow-right-on-rectangle"
+#         = heroicon "arrow-right-on-rectangle"
 #         Logout
 #
 class Daisy::Actions::DropdownComponent < LocoMotion::BaseComponent
 
   include ViewComponent::SlotableDefault
 
-  define_parts :menu, :menu_item
+  define_parts :menu
 
   renders_one :activator, LocoMotion::BasicComponent.build(html: { role: "button", tabindex: 0 })
   renders_one :button, Daisy::Actions::ButtonComponent
-  renders_many :items
+  renders_many :items, LocoMotion::BasicComponent.build(tag_name: :li, css: "menu-item")
 
   #
   # Creates a new instance of the DropdownComponent.
@@ -102,10 +102,7 @@ class Daisy::Actions::DropdownComponent < LocoMotion::BaseComponent
   def setup_menu
     # Setup menu itself
     set_tag_name(:menu, :ul)
-    add_css(:menu, "dropdown-content menu bg-base-100 rounded-box shadow w-52 p-2 z-[1]")
-
-    # Setup menu items
-    set_tag_name(:menu_item, :li)
+    add_css(:menu, "dropdown-content where:menu where:bg-base-100 where:rounded-box where:shadow where:w-52 where:p-2 where:z-[1]")
   end
 
   #

data/app/components/daisy/actions/modal_component.html.haml

@@ -11,7 +11,7 @@
           - if close_icon?
             = close_icon
           - else
-            = heroicon_tag "x-mark"
+            = heroicon "x-mark"
 
     - if title?
       = title
@@ -21,12 +21,14 @@
 
     = content
 
-    = part(:actions) do
-      = part(:start_actions) do
-        - if start_actions?
-          = start_actions
-      = part(:end_actions) do
-        - if end_actions?
-          = end_actions
+    - if start_actions? || end_actions?
+      = part(:actions) do
+        = part(:start_actions) do
+          - if start_actions?
+            = start_actions
+        = part(:end_actions) do
+          - if end_actions?
+            = end_actions
+
   = part(:backdrop) do
     %button close

data/app/components/daisy/actions/modal_component.rb

@@ -7,7 +7,6 @@
 # (`showModal()` and `close()`). This provides better accessibility and keyboard
 # navigation compared to div-based modals.
 #
-# @part dialog The main `<dialog>` container that wraps the modal content.
 # @part box The container for the modal content, providing padding and layout.
 # @part close_icon_wrapper The container for the close icon, positioned in the
 #   top-right corner.
@@ -55,7 +54,7 @@
 #   = daisy_modal(title: "User Details") do |modal|
 #     - modal.with_activator do
 #       .flex.items-center.gap-2.cursor-pointer
-#         = heroicon_tag "user-circle"
+#         = heroicon "user-circle"
 #         %span View Details
 #
 #     %dl.space-y-2
@@ -71,7 +70,7 @@
 class Daisy::Actions::ModalComponent < LocoMotion::BaseComponent
   set_component_name :modal
 
-  define_parts :dialog, :box, :actions, :close_icon_wrapper, :close_icon,
+  define_parts :box, :actions, :close_icon_wrapper, :close_icon,
     :backdrop, :title, :start_actions, :end_actions
 
   renders_one :activator, LocoMotion::BasicComponent.build(html: { role: "button", tabindex: 0 })
@@ -165,15 +164,16 @@ class Daisy::Actions::ModalComponent < LocoMotion::BaseComponent
     add_html(:close_icon_wrapper, { method: "dialog" })
 
     set_tag_name(:close_icon, :button)
-    add_css(:close_icon, "absolute top-2 right-2 p-1 btn btn-circle btn-ghost btn-xs")
+    add_css(:close_icon, "where:absolute where:top-2 where:right-2 where:p-1 where:btn where:btn-circle where:btn-ghost where:btn-xs")
   end
 
   def setup_title
-    add_css(:title, "mb-2 text-xl font-bold")
+    set_tag_name(:title, 'h4')
+    add_css(:title, "where:mb-2 where:text-xl where:font-bold")
   end
 
   def setup_actions
-    add_css(:actions, "mt-2 flex flex-row items-center justify-between")
+    add_css(:actions, "where:mt-2 where:flex where:flex-row where:items-center where:justify-between")
   end
 
   # Provide a default button if no button is supplied.

data/app/components/daisy/actions/swap_component.rb

@@ -32,9 +32,9 @@
 # @loco_example Icon Swap with Tooltip
 #   = daisy_swap(tip: "Toggle Theme") do |swap|
 #     - swap.with_on do
-#       = heroicon_tag "sun", css: "size-6"
+#       = heroicon "sun", css: "size-6"
 #     - swap.with_off do
-#       = heroicon_tag "moon", css: "size-6"
+#       = heroicon "moon", css: "size-6"
 #
 # @loco_example Complex Content with Animation
 #   = daisy_swap(css: "swap-flip") do |swap|
@@ -51,19 +51,19 @@
 #   = daisy_swap(css: "swap-flip", tip: "Task Status") do |swap|
 #     - swap.with_on do
 #       .text-success
-#         = heroicon_tag "check-circle"
+#         = heroicon "check-circle"
 #         %span Complete
 #     - swap.with_off do
 #       .text-error
-#         = heroicon_tag "x-circle"
+#         = heroicon "x-circle"
 #         %span Failed
 #     - swap.with_indeterminate do
 #       .text-warning
-#         = heroicon_tag "clock"
+#         = heroicon "clock"
 #         %span Processing
 #
 class Daisy::Actions::SwapComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   class SwapOn < LocoMotion::BasicComponent
     def before_render
@@ -121,6 +121,9 @@ class Daisy::Actions::SwapComponent < LocoMotion::BaseComponent
   # @option kws indeterminate [Boolean] If true, starts the swap in an indeterminate
   #   state. Requires the indeterminate slot to be meaningful.
   #
+  # @option kws tip [String] The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(on = nil, off = nil, checked = nil, **kws, &block)
     super
 
@@ -133,9 +136,10 @@ class Daisy::Actions::SwapComponent < LocoMotion::BaseComponent
   # Sets up the component with various CSS classes and HTML attributes.
   #
   def before_render
-    setup_component
-    setup_checkbox
-    setup_on_off
+    setup_component # Set tag, base CSS
+    setup_checkbox  # Setup the hidden checkbox part
+    setup_on_off    # Setup the on/off part CSS
+    super           # Run TippableComponent hook
   end
 
   private

data/app/components/daisy/actions/theme_controller.js

@@ -0,0 +1,113 @@
+/**
+ * Theme Controller
+ *
+ * A Stimulus controller that manages theme selection and persistence.
+ * It handles theme switching, localStorage persistence, and synchronization
+ * across multiple theme selectors on the same page.
+ */
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  /**
+   * Called when the controller is connected to the DOM.
+   * Sets the initial theme input state and sets up event listeners.
+   */
+  connect() {
+    this.setInput()
+
+    // Setup a custom listener to watch for changes on the page in case the
+    // page has multiple theme selectors
+    this.storageChangeListener = this.storageChanged.bind(this)
+
+    window.addEventListener('localstorage-update', this.storageChangeListener)
+  }
+
+  /**
+   * Called when the controller is disconnected from the DOM.
+   * Removes event listeners to prevent memory leaks.
+   */
+  disconnect() {
+    window.removeEventListener('localstorage-update', this.storageChangeListener)
+  }
+
+  /**
+   * Sets the appropriate radio input as checked based on the current theme.
+   * This ensures the UI reflects the active theme.
+   */
+  setInput() {
+    const theme = this.getCurrentTheme()
+    const input = this.element.querySelector(`input[value='${theme}']`);
+
+    if (input) {
+      input.checked = true;
+    }
+  }
+
+  /**
+   * Clears the user's theme preference from localStorage.
+   * Removes the saved theme and dispatches an event to notify other controllers.
+   *
+   * @param {Event} event - The triggering click event
+   */
+  clearTheme(event) {
+    // If we are passed a themeName parameter, clear all inputs with that theme
+    if (event && event.params && event.params.themeName) {
+      const inputs = document.querySelectorAll(`input[name='${event.params.themeName}']`)
+
+      if (inputs) {
+        inputs.forEach(input => {
+          input.checked = false
+        })
+      }
+    }
+
+    // Remove the savedTheme from local storage
+    localStorage.removeItem("savedTheme")
+
+    // Fire off an update
+    const updateEvent = new CustomEvent('localstorage-update', { detail: { key: 'savedTheme', newValue: null } })
+    window.dispatchEvent(updateEvent)
+  }
+
+  /**
+   * Changes the theme based on user selection.
+   * Updates localStorage and dispatches a custom event to notify other controllers.
+   *
+   * @param {Event} event - The triggering click event
+   */
+  setTheme(event) {
+    const input = event.currentTarget.querySelector('input')
+
+    if (input) {
+      localStorage.setItem("savedTheme", input.value)
+
+      const updateEvent = new CustomEvent('localstorage-update', { detail: { key: 'savedTheme', newValue: input.value } })
+      window.dispatchEvent(updateEvent)
+    }
+
+    event.preventDefault();
+  }
+
+  /**
+   * Retrieves the current theme from localStorage.
+   *
+   * @returns {string} The current theme name
+   */
+  getCurrentTheme() {
+    const savedTheme = localStorage.getItem('savedTheme')
+
+    if (savedTheme) {
+      return savedTheme
+    }
+  }
+
+  /**
+   * Event handler for 'localstorage-update' events.
+   * Updates the input state when theme changes in another controller.
+   *
+   * @param {CustomEvent} event - The storage changed event
+   */
+  storageChanged(event) {
+    this.setInput()
+  }
+}

data/app/components/daisy/actions/theme_controller_component.rb

@@ -1,31 +1,26 @@
 #
-# The Theme Controller component provides a simple interface for switching
-# between different DaisyUI themes. It renders a set of radio buttons that
-# allow users to select from a predefined list of themes.
-#
-# The component is designed to work with DaisyUI's theme system and
-# automatically updates the `data-theme` attribute on the HTML element when
-# a theme is selected.
+# The ThemeComponent serves as a foundation for building a full Theme Switcher.
+# It provides the building blocks that you will use such as the Theme Preview,
+# Theme Radio, and Stimulus ThemeController.
 #
 # @loco_example Basic Usage
-#   = daisy_theme_controller
-#
-# @loco_example Custom Theme List
-#   = daisy_theme_controller(themes: ["light", "dark", "cyberpunk"])
-#
-# @loco_example With Custom Styling
-#   = daisy_theme_controller(css: "gap-6 p-4 bg-base-200 rounded-lg")
+#   = daisy_theme_controller do |tc|
+#     - tc.themes.each do |theme|
+#       = tc.build_theme_preview(theme)
+#       = tc.build_radio_input(theme)
 #
 class Daisy::Actions::ThemeControllerComponent < LocoMotion::BaseComponent
   # Default list of themes to display in the controller
   SOME_THEMES = ["light", "dark", "synthwave", "retro", "cyberpunk", "wireframe"].freeze
 
+  attr_reader :themes
+
   #
   # Creates a new instance of the ThemeControllerComponent.
   #
   # @param kws [Hash] The keyword arguments for the component.
   #
-  # @option kws themes [Array<String>] List of DaisyUI theme names to include
+  # @option kws [Array<String>] :themes List of DaisyUI theme names to include
   #   in the controller. Defaults to {SOME_THEMES}.
   #
   def initialize(**kws, &block)
@@ -35,9 +30,55 @@ class Daisy::Actions::ThemeControllerComponent < LocoMotion::BaseComponent
   end
 
   #
-  # Sets up the component's CSS classes for proper layout and spacing.
+  # Sets up the component with theme Stimulus controller.
   #
   def before_render
-    add_css(:component, "flex flex-col lg:flex-row gap-4 items-center")
+    add_stimulus_controller(:component, "loco-theme")
+  end
+
+  #
+  # Renders the component and its content.
+  #
+  def call
+    part(:component) { content }
+  end
+
+  #
+  # Builder method to create a radio input for use in selecting themes.
+  #
+  # @param theme [String] The name of the theme that the input controls.
+  # @param options [Hash] Additional options to pass to the component.
+  #
+  # @return [Daisy::DataInput::RadioButtonComponent] A new radio button
+  #   component instance.
+  #
+  def build_radio_input(theme, **options)
+    options[:css] = (options[:css] || "").concat(" theme-controller")
+    default_options = { name: "theme", id: "theme-#{theme}", value: theme }
+
+    render Daisy::DataInput::RadioButtonComponent.new(**default_options.deep_merge(options))
+  end
+
+  #
+  # Builder method to create a theme preview showing the theme's colors in a 2x2
+  # grid.
+  #
+  # @param theme [String] The theme name to preview.
+  #
+  # @option options [Integer] :size Size of the preview in Tailwind size units.
+  #   Defaults to 4 (1rem).
+  #
+  # @option options [Boolean] :shadow Whether to add a shadow. Defaults to true.
+  #
+  # @option options [String] :css Additional CSS classes.
+  #
+  # @return [Daisy::Actions::ThemePreviewComponent] A new theme preview
+  #   component instance.
+  #
+  def build_theme_preview(theme, **options)
+    render Daisy::Actions::ThemePreviewComponent.new(
+      theme: theme,
+      **options
+    )
   end
 end

data/app/components/daisy/actions/theme_preview_component.html.haml

@@ -0,0 +1,5 @@
+= part(:component) do
+  = part(:dot_base)
+  = part(:dot_primary)
+  = part(:dot_secondary)
+  = part(:dot_accent)