daisyui 1.1.1 → 1.2.0

data/lib/daisy_ui/dropdown.rb

@@ -1,15 +1,38 @@
 # frozen_string_literal: true
 
+require "securerandom"
+
 module DaisyUI
   class Dropdown < Base
     self.component_class = :dropdown
 
-    def initialize(*modifiers, as: :div, id: nil, **options)
-      super
+    # Placement modifiers that, in :popover mode, must live on the popover
+    # element itself (DaisyUI's `position-area` rule is on `.dropdown`).
+    PLACEMENT_MODIFIERS = %i[start center end top bottom left right].freeze
+
+    # Default Stimulus identifier for the opt-in popover controller. Namespaced
+    # so it never collides with a consumer app's own `dropdown` controller.
+    DEFAULT_STIMULUS_IDENTIFIER = "daisy-dropdown"
+
+    def initialize(*modifiers, as: :div, id: nil, popover_id: nil, stimulus: false, **)
+      @popover = modifiers.include?(:popover)
+      @popover_id = popover_id if @popover
+      # stimulus: true enables the controller; a String/Symbol enables AND
+      # overrides the identifier. Only meaningful in :popover mode.
+      @stimulus = stimulus
+      super(*modifiers, as:, id:, **)
     end
 
     def view_template
-      if tap_to_close?
+      if popover?
+        # DaisyUI's popover variant is a FLAT structure: the trigger button and
+        # the popover menu are siblings, and `dropdown` + the placement class
+        # ride the popover element (that is what carries `position-area`). The
+        # wrapper here is a plain, non-positioning container.
+        public_send(as, **popover_root_attributes) do
+          yield self if block_given?
+        end
+      elsif tap_to_close?
         details(class: classes, **attributes) do
           yield self if block_given?
         end
@@ -20,38 +43,132 @@ module DaisyUI
       end
     end
 
-    def button(*, **, &)
-      if tap_to_close?
-        render Button.new(*, as: :summary, **, &)
+    def button(*modifiers, **options, &)
+      if popover?
+        render Button.new(*modifiers, as: :button, **popover_button_options(options), &)
+      elsif tap_to_close?
+        render Button.new(*modifiers, as: :summary, **options, &)
       else
-        render Button.new(*, as: :div, role: :button, tabindex: 0, **, &)
+        render Button.new(*modifiers, as: :div, role: :button, tabindex: 0, **options, &)
       end
     end
 
-    def content(*, as: :div, **options, &)
+    def content(*modifiers, as: :div, **options, &)
+      return render_as(*modifiers, as:, **popover_menu_options(options), &) if popover?
+
       content_classes = component_classes("dropdown-content", options:)
 
       if tap_to_close?
-        render_as(*, as:, class: content_classes, **options, &)
+        render_as(*modifiers, as:, class: content_classes, **options, &)
       else
-        render_as(*, as:, tabindex: 0, class: content_classes, **options, &)
+        render_as(*modifiers, as:, tabindex: 0, class: content_classes, **options, &)
       end
     end
 
-    def menu(*, **options, &)
+    def menu(*modifiers, **options, &)
+      if popover?
+        options[:role] ||= "menu"
+        return render Menu.new(*modifiers, **popover_menu_options(options), &)
+      end
+
       menu_classes = component_classes("dropdown-content", options:)
 
       if tap_to_close?
-        render Menu.new(*, class: menu_classes, **options, &)
+        render Menu.new(*modifiers, class: menu_classes, **options, &)
       else
-        render Menu.new(*, tabindex: 0, class: menu_classes, **options, &)
+        render Menu.new(*modifiers, tabindex: 0, class: menu_classes, **options, &)
       end
     end
 
+    def popover?
+      modifiers.include?(:popover)
+    end
+
     def tap_to_close?
       modifiers.include?(:tap_to_close)
     end
 
+    private
+
+    # Stable id shared by the trigger (`popovertarget`) and the popover element
+    # (`id`); the matching CSS anchor pairs `anchor-name` with `position-anchor`.
+    def popover_id
+      @popover_id ||= "dropdown_#{SecureRandom.hex(8)}"
+    end
+
+    def anchor_name
+      "#{popover_id}_anchor"
+    end
+
+    # Whether the opt-in Stimulus controller is enabled (popover mode only).
+    def stimulus?
+      @popover && @stimulus
+    end
+
+    # Resolved Stimulus identifier: the default, or a caller-supplied override.
+    def stimulus_identifier
+      return DEFAULT_STIMULUS_IDENTIFIER if @stimulus == true
+
+      @stimulus.to_s
+    end
+
+    # Wrapper attributes; in opt-in Stimulus mode add `data-controller`, merged
+    # with any caller-supplied controller token (space-joined, not clobbered).
+    def popover_root_attributes
+      attrs = attributes
+      return attrs unless stimulus?
+
+      data = (attrs[:data] || {}).dup
+      data[:controller] = [data[:controller], stimulus_identifier].compact.join(" ")
+      attrs.merge(data:)
+    end
+
+    # Trigger wiring: a real <button> (required for the Popover API invoker),
+    # `popovertarget` pointing at the menu, an `anchor-name` for CSS anchor
+    # positioning, and ARIA wiring. `aria-controls`/`aria-expanded` give assistive
+    # tech the trigger<->menu relationship and open state (the native Popover API
+    # does not mirror open state onto the invoker; the Stimulus controller keeps
+    # `aria-expanded` in sync when enabled). Caller `style`/`aria` are merged.
+    def popover_button_options(options)
+      options[:popovertarget] = popover_id
+      options[:style] = merge_style(options[:style], "anchor-name:--#{anchor_name}")
+      options[:aria] = { haspopup: "menu", controls: popover_id, expanded: "false" }.merge(options[:aria] || {})
+      merge_stimulus_data(options, target: "trigger") if stimulus?
+      options
+    end
+
+    # Popover element wiring: `dropdown` + placement classes (so `position-area`
+    # applies), `popover="auto"`, the shared id, and `position-anchor`. We strip
+    # any `dropdown-content` — that descendant rule forces `position: absolute`,
+    # which conflicts with the top-layer popover. (`role="menu"` is added by
+    # `menu`, not here, so a non-menu `content` panel is not mislabeled.)
+    def popover_menu_options(options)
+      caller_classes = Array(options.delete(:class)).flat_map { |v| v.to_s.split }.reject { |c| c.empty? || c == "dropdown-content" }
+      placement = PLACEMENT_MODIFIERS.select { |m| modifiers.include?(m) }.map { |m| apply_prefix("dropdown-#{m}") }
+
+      options[:class] = merge_classes(apply_prefix("dropdown"), *placement, *caller_classes)
+      options[:id] = popover_id
+      options[:popover] = "auto"
+      options[:style] = merge_style(options[:style], "position-anchor:--#{anchor_name}")
+      merge_stimulus_data(options, target: "menu") if stimulus?
+      options
+    end
+
+    # Add a `data-<identifier>-target` to a child element's options without
+    # clobbering caller-supplied data.
+    def merge_stimulus_data(options, target:)
+      data = (options[:data] || {}).dup
+      key = :"#{stimulus_identifier}_target"
+      existing = data[key].to_s.split
+      data[key] = (existing + [target]).uniq.join(" ")
+      options[:data] = data
+      options
+    end
+
+    def merge_style(existing, added)
+      [existing&.chomp(";"), added].compact.join(";")
+    end
+
     register_modifiers(
       # Placement
       # "sm:dropdown-start"

data/lib/daisy_ui/engine.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  # Optional Rails integration. Loaded only when Rails::Engine is defined (see
+  # lib/daisy_ui.rb), so the gem stays a plain Phlex library outside Rails.
+  #
+  # It exposes the gem's bundled JavaScript (the opt-in `daisy-dropdown`
+  # Stimulus controller) to the host app:
+  #   * appends the JS dir to importmap-rails' paths and auto-pins it, so
+  #     consumers get `daisy_ui/controllers/daisy_dropdown_controller` with no
+  #     manual pin;
+  #   * appends the JS dir to the asset load path so Propshaft/Sprockets serve
+  #     the file.
+  #
+  # The controller is opt-in at the markup level (`Dropdown(:popover, stimulus:
+  # true)`), so apps that never opt in ship no extra behavior.
+  # Asset-only engine: no isolate_namespace, since it exposes no routes, models,
+  # or helpers — only static JavaScript — and namespacing would risk surprises in
+  # the host app for no benefit.
+  class Engine < ::Rails::Engine
+    JAVASCRIPT_PATH = root.join("app/javascript")
+
+    initializer "daisy_ui.assets" do |app|
+      app.config.assets.paths << JAVASCRIPT_PATH.to_s if app.config.respond_to?(:assets)
+    end
+
+    initializer "daisy_ui.importmap", before: "importmap" do |app|
+      next unless app.config.respond_to?(:importmap)
+
+      importmap = app.config.importmap
+      importmap.paths << root.join("config/importmap.rb") if importmap.respond_to?(:paths)
+      # Reload the gem's controller in development when it changes.
+      importmap.cache_sweepers << JAVASCRIPT_PATH if importmap.respond_to?(:cache_sweepers)
+    end
+  end
+end

data/lib/daisy_ui/label.rb

@@ -30,16 +30,25 @@ module DaisyUI
 
     register_modifiers(
       # "sm:floating-label"
+      # "@sm:floating-label"
       # "md:floating-label"
+      # "@md:floating-label"
       # "lg:floating-label"
+      # "@lg:floating-label"
       floating: "floating-label",
       # "sm:input"
+      # "@sm:input"
       # "md:input"
+      # "@md:input"
       # "lg:input"
+      # "@lg:input"
       input: "input",
       # "sm:select"
+      # "@sm:select"
       # "md:select"
+      # "@md:select"
       # "lg:select"
+      # "@lg:select"
       select: "select"
     )
 

data/lib/daisy_ui/link.rb

@@ -2,7 +2,7 @@
 
 module DaisyUI
   class Link < Base
-    self.component_class = "link"
+    self.component_class = :link
 
     def view_template(&)
       a(class: classes, **attributes, &)
@@ -10,24 +10,69 @@ module DaisyUI
 
     register_modifiers(
       # Style
-      # "sm:link-hover" "md:link-hover" "lg:link-hover"
+      # "sm:link-hover"
+      # "@sm:link-hover"
+      # "md:link-hover"
+      # "@md:link-hover"
+      # "lg:link-hover"
+      # "@lg:link-hover"
       hover: "link-hover",
       # Colors
-      # "sm:link-neutral" "md:link-neutral" "lg:link-neutral"
+      # "sm:link-neutral"
+      # "@sm:link-neutral"
+      # "md:link-neutral"
+      # "@md:link-neutral"
+      # "lg:link-neutral"
+      # "@lg:link-neutral"
       neutral: "link-neutral",
-      # "sm:link-primary" "md:link-primary" "lg:link-primary"
+      # "sm:link-primary"
+      # "@sm:link-primary"
+      # "md:link-primary"
+      # "@md:link-primary"
+      # "lg:link-primary"
+      # "@lg:link-primary"
       primary: "link-primary",
-      # "sm:link-secondary" "md:link-secondary" "lg:link-secondary"
+      # "sm:link-secondary"
+      # "@sm:link-secondary"
+      # "md:link-secondary"
+      # "@md:link-secondary"
+      # "lg:link-secondary"
+      # "@lg:link-secondary"
       secondary: "link-secondary",
-      # "sm:link-accent" "md:link-accent" "lg:link-accent"
+      # "sm:link-accent"
+      # "@sm:link-accent"
+      # "md:link-accent"
+      # "@md:link-accent"
+      # "lg:link-accent"
+      # "@lg:link-accent"
       accent: "link-accent",
-      # "sm:link-info" "md:link-info" "lg:link-info"
+      # "sm:link-info"
+      # "@sm:link-info"
+      # "md:link-info"
+      # "@md:link-info"
+      # "lg:link-info"
+      # "@lg:link-info"
       info: "link-info",
-      # "sm:link-success" "md:link-success" "lg:link-success"
+      # "sm:link-success"
+      # "@sm:link-success"
+      # "md:link-success"
+      # "@md:link-success"
+      # "lg:link-success"
+      # "@lg:link-success"
       success: "link-success",
-      # "sm:link-warning" "md:link-warning" "lg:link-warning"
+      # "sm:link-warning"
+      # "@sm:link-warning"
+      # "md:link-warning"
+      # "@md:link-warning"
+      # "lg:link-warning"
+      # "@lg:link-warning"
       warning: "link-warning",
-      # "sm:link-error" "md:link-error" "lg:link-error"
+      # "sm:link-error"
+      # "@sm:link-error"
+      # "md:link-error"
+      # "@md:link-error"
+      # "lg:link-error"
+      # "@lg:link-error"
       error: "link-error"
     ).freeze
   end

data/lib/daisy_ui/megamenu.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  class Megamenu < Base
+    self.component_class = :megamenu
+
+    def initialize(*, as: :div, **)
+      super
+    end
+
+    def view_template(&)
+      public_send(as, class: classes, **attributes, &)
+    end
+
+    def active_indicator(**options, &)
+      span(class: component_classes("megamenu-active", options:), **options, &)
+    end
+
+    register_modifiers(
+      # "sm:megamenu-wide"
+      # "@sm:megamenu-wide"
+      # "md:megamenu-wide"
+      # "@md:megamenu-wide"
+      # "lg:megamenu-wide"
+      # "@lg:megamenu-wide"
+      wide: "megamenu-wide",
+      # "sm:megamenu-full"
+      # "@sm:megamenu-full"
+      # "md:megamenu-full"
+      # "@md:megamenu-full"
+      # "lg:megamenu-full"
+      # "@lg:megamenu-full"
+      full: "megamenu-full",
+      # "sm:megamenu-vertical"
+      # "@sm:megamenu-vertical"
+      # "md:megamenu-vertical"
+      # "@md:megamenu-vertical"
+      # "lg:megamenu-vertical"
+      # "@lg:megamenu-vertical"
+      vertical: "megamenu-vertical",
+      # Sizes
+      # "sm:megamenu-xs"
+      # "@sm:megamenu-xs"
+      # "md:megamenu-xs"
+      # "@md:megamenu-xs"
+      # "lg:megamenu-xs"
+      # "@lg:megamenu-xs"
+      xs: "megamenu-xs",
+      # "sm:megamenu-sm"
+      # "@sm:megamenu-sm"
+      # "md:megamenu-sm"
+      # "@md:megamenu-sm"
+      # "lg:megamenu-sm"
+      # "@lg:megamenu-sm"
+      sm: "megamenu-sm",
+      # "sm:megamenu-md"
+      # "@sm:megamenu-md"
+      # "md:megamenu-md"
+      # "@md:megamenu-md"
+      # "lg:megamenu-md"
+      # "@lg:megamenu-md"
+      md: "megamenu-md",
+      # "sm:megamenu-lg"
+      # "@sm:megamenu-lg"
+      # "md:megamenu-lg"
+      # "@md:megamenu-lg"
+      # "lg:megamenu-lg"
+      # "@lg:megamenu-lg"
+      lg: "megamenu-lg",
+      # "sm:megamenu-xl"
+      # "@sm:megamenu-xl"
+      # "md:megamenu-xl"
+      # "@md:megamenu-xl"
+      # "lg:megamenu-xl"
+      # "@lg:megamenu-xl"
+      xl: "megamenu-xl"
+    )
+  end
+end

data/lib/daisy_ui/menu_item.rb

@@ -22,11 +22,26 @@ module DaisyUI
     end
 
     register_modifiers(
-      # "sm:menu-disabled" "md:menu-disabled" "lg:menu-disabled"
+      # "sm:menu-disabled"
+      # "@sm:menu-disabled"
+      # "md:menu-disabled"
+      # "@md:menu-disabled"
+      # "lg:menu-disabled"
+      # "@lg:menu-disabled"
       disabled: "menu-disabled",
-      # "sm:menu-active" "md:menu-active" "lg:menu-active"
+      # "sm:menu-active"
+      # "@sm:menu-active"
+      # "md:menu-active"
+      # "@md:menu-active"
+      # "lg:menu-active"
+      # "@lg:menu-active"
       active: "menu-active",
-      # "sm:menu-focus" "md:menu-focus" "lg:menu-focus"
+      # "sm:menu-focus"
+      # "@sm:menu-focus"
+      # "md:menu-focus"
+      # "@md:menu-focus"
+      # "lg:menu-focus"
+      # "@lg:menu-focus"
       focus: "menu-focus"
     )
   end

data/lib/daisy_ui/modal.rb

@@ -5,8 +5,7 @@ module DaisyUI
     self.component_class = :modal
 
     def initialize(*, id:, **)
-      super(*, **)
-      @id = id
+      super
     end
 
     def view_template(&block)

data/lib/daisy_ui/otp.rb

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  class Otp < Base
+    self.component_class = :otp
+
+    def initialize(*, digits: 4, as: :label, input_attributes: {}, **)
+      super(*, as:, **)
+      @digits = digits
+      @input_attributes = input_attributes
+    end
+
+    def view_template(&)
+      public_send(as, class: classes, **attributes) do
+        digits.times { span }
+        input(
+          type: :text,
+          autocomplete: "one-time-code",
+          inputmode: :numeric,
+          maxlength: digits,
+          pattern: "[0-9]{#{digits}}",
+          required: true,
+          **input_attributes
+        )
+      end
+    end
+
+    private
+
+    attr_reader :digits, :input_attributes
+
+    register_modifiers(
+      # "sm:otp-joined"
+      # "@sm:otp-joined"
+      # "md:otp-joined"
+      # "@md:otp-joined"
+      # "lg:otp-joined"
+      # "@lg:otp-joined"
+      joined: "otp-joined",
+      # Sizes
+      # "sm:otp-xs"
+      # "@sm:otp-xs"
+      # "md:otp-xs"
+      # "@md:otp-xs"
+      # "lg:otp-xs"
+      # "@lg:otp-xs"
+      xs: "otp-xs",
+      # "sm:otp-sm"
+      # "@sm:otp-sm"
+      # "md:otp-sm"
+      # "@md:otp-sm"
+      # "lg:otp-sm"
+      # "@lg:otp-sm"
+      sm: "otp-sm",
+      # "sm:otp-md"
+      # "@sm:otp-md"
+      # "md:otp-md"
+      # "@md:otp-md"
+      # "lg:otp-md"
+      # "@lg:otp-md"
+      md: "otp-md",
+      # "sm:otp-lg"
+      # "@sm:otp-lg"
+      # "md:otp-lg"
+      # "@md:otp-lg"
+      # "lg:otp-lg"
+      # "@lg:otp-lg"
+      lg: "otp-lg",
+      # "sm:otp-xl"
+      # "@sm:otp-xl"
+      # "md:otp-xl"
+      # "@md:otp-xl"
+      # "lg:otp-xl"
+      # "@lg:otp-xl"
+      xl: "otp-xl",
+      # Colors
+      # "sm:otp-neutral"
+      # "@sm:otp-neutral"
+      # "md:otp-neutral"
+      # "@md:otp-neutral"
+      # "lg:otp-neutral"
+      # "@lg:otp-neutral"
+      neutral: "otp-neutral",
+      # "sm:otp-primary"
+      # "@sm:otp-primary"
+      # "md:otp-primary"
+      # "@md:otp-primary"
+      # "lg:otp-primary"
+      # "@lg:otp-primary"
+      primary: "otp-primary",
+      # "sm:otp-secondary"
+      # "@sm:otp-secondary"
+      # "md:otp-secondary"
+      # "@md:otp-secondary"
+      # "lg:otp-secondary"
+      # "@lg:otp-secondary"
+      secondary: "otp-secondary",
+      # "sm:otp-accent"
+      # "@sm:otp-accent"
+      # "md:otp-accent"
+      # "@md:otp-accent"
+      # "lg:otp-accent"
+      # "@lg:otp-accent"
+      accent: "otp-accent",
+      # "sm:otp-success"
+      # "@sm:otp-success"
+      # "md:otp-success"
+      # "@md:otp-success"
+      # "lg:otp-success"
+      # "@lg:otp-success"
+      success: "otp-success",
+      # "sm:otp-info"
+      # "@sm:otp-info"
+      # "md:otp-info"
+      # "@md:otp-info"
+      # "lg:otp-info"
+      # "@lg:otp-info"
+      info: "otp-info",
+      # "sm:otp-warning"
+      # "@sm:otp-warning"
+      # "md:otp-warning"
+      # "@md:otp-warning"
+      # "lg:otp-warning"
+      # "@lg:otp-warning"
+      warning: "otp-warning",
+      # "sm:otp-error"
+      # "@sm:otp-error"
+      # "md:otp-error"
+      # "@md:otp-error"
+      # "lg:otp-error"
+      # "@lg:otp-error"
+      error: "otp-error"
+    )
+  end
+end

data/lib/daisy_ui/pagination.rb

@@ -3,7 +3,7 @@
 module DaisyUI
   # @component html class="join"
   class Pagination < Base
-    self.component_class = "join"
+    self.component_class = :join
 
     def view_template(&)
       public_send(as, class: classes, **attributes, &)

data/lib/daisy_ui/radial_progress.rb

@@ -18,8 +18,8 @@ module DaisyUI
       style_parts = []
       style_parts << style if style && !style.empty?
       style_parts << "--value: #{value};"
-      style_parts << "--size: #{size};" if size && !size.empty?
-      style_parts << "--thickness: #{thickness};" if thickness && !thickness.empty?
+      style_parts << "--size: #{size};" if size && !size.to_s.empty?
+      style_parts << "--thickness: #{thickness};" if thickness && !thickness.to_s.empty?
 
       public_send(as, role: :progressbar, class: classes, style: style_parts.join(" "), **attributes, &)
     end

data/lib/daisy_ui/range.rb

@@ -104,7 +104,14 @@ module DaisyUI
       # "@md:range-error"
       # "lg:range-error"
       # "@lg:range-error"
-      error: "range-error"
+      error: "range-error",
+      # "sm:range-vertical"
+      # "@sm:range-vertical"
+      # "md:range-vertical"
+      # "@md:range-vertical"
+      # "lg:range-vertical"
+      # "@lg:range-vertical"
+      vertical: "range-vertical"
     )
   end
 end

data/lib/daisy_ui/steps.rb

@@ -20,6 +20,10 @@ module DaisyUI
       li(class: step_classes, **options, &)
     end
 
+    def icon(**options, &)
+      div(class: component_classes("step-icon", options:), **options, &)
+    end
+
     private
 
     def build_step_classes(step_modifiers, options)
@@ -42,12 +46,6 @@ module DaisyUI
       }
     end
 
-    public
-
-    def icon(**options, &)
-      div(class: component_classes("step-icon", options:), **options, &)
-    end
-
     register_modifiers(
       # "sm:steps-vertical"
       # "@sm:steps-vertical"

data/lib/daisy_ui/sub_menu.rb

@@ -5,7 +5,7 @@ module DaisyUI
   class SubMenu < Base
     def initialize(*, **)
       super
-      @items ||= []
+      @items = []
     end
 
     def view_template(&)

data/lib/daisy_ui/tab_with_content.rb

@@ -3,7 +3,7 @@
 module DaisyUI
   # @private
   class TabWithContent < Base
-    self.component_class = "tab"
+    self.component_class = :tab
 
     def initialize(*, content:, label: nil, id: nil, **)
       super(*, **)

data/lib/daisy_ui/tab_without_content.rb

@@ -3,7 +3,7 @@
 module DaisyUI
   # @private
   class TabWithoutContent < Base
-    self.component_class = "tab"
+    self.component_class = :tab
 
     def initialize(*, label: nil, **)
       super(*, **)