shadcn_phlexcomponents 0.1.5 → 0.1.9

data/lib/shadcn_phlexcomponents/components/form/form_switch.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormSwitch < Base
+    include FormHelpers
+
+    def initialize(
+      method = nil,
+      model: false,
+      object_name: nil,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      **attributes
+    )
+      @method = method
+      @model = model
+      @object_name = object_name
+      @value = value
+      @model_value = model&.public_send(method)
+      @name = name
+      @id = id
+      @label = label
+      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @hint = hint
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def label_attributes(use_label_styles: false, **attributes)
+      attributes[:class] = [
+        use_label_styles ? Label::STYLES : nil,
+        attributes[:class],
+      ].compact.join(" ")
+      attributes[:for] ||= @id
+      attributes
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+      @name ||= field_name(@object_name, @method)
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        div(class: "flex items-center gap-2") do
+          Switch(
+            id: @id,
+            name: @name,
+            value: @value || "1",
+            checked: !!@model_value,
+            aria: aria_attributes,
+            disabled: @disabled,
+            **@attributes,
+          )
+          render_label(&)
+        end
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/form/form_textarea.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormTextarea < Base
+    include FormHelpers
+
+    def initialize(
+      method = nil,
+      model: false,
+      object_name: nil,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      **attributes
+    )
+      @method = method
+      @model = model
+      @object_name = object_name
+      @value = value
+      @model_value = model&.public_send(method)
+      @name = name
+      @id = id
+      @label = label
+      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @hint = hint
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+      @name ||= field_name(@object_name, @method)
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        render_label(&)
+
+        # Wrap textarea in div to ensure spacing is correct as there were instances where certain browser extensions
+        # injecting html before/after the textarea causing the spacing to go weird.
+        div do
+          Textarea(
+            type: @type,
+            id: @id,
+            name: @name,
+            value: @value || @model_value,
+            aria: aria_attributes,
+            **@attributes,
+          )
+        end
+
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

data/lib/{components → shadcn_phlexcomponents/components/hover_card}/hover_card.rb

@@ -20,7 +20,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "shadcn-phlexcomponents--hover-card",
+          controller: "hover-card",
           side: @side,
         },
       }

data/lib/{components → shadcn_phlexcomponents/components/hover_card}/hover_card_content.rb

@@ -15,7 +15,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(class: "hidden", data: { "shadcn-phlexcomponents--hover-card-target": "content" }) do
+      div(class: "hidden", data: { "hover-card-target": "content" }) do
         div(**@attributes, &)
       end
     end

data/lib/{components → shadcn_phlexcomponents/components/hover_card}/hover_card_trigger.rb

@@ -36,7 +36,7 @@ module ShadcnPhlexcomponents
         role: "button",
         data: {
           as_child: @as_child.to_s,
-          "shadcn-phlexcomponents--hover-card-target": "trigger",
+          "hover-card-target": "trigger",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/input}/input.rb

@@ -4,7 +4,7 @@ module ShadcnPhlexcomponents
   class Input < Base
     STYLES = <<~HEREDOC
       flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1
-      text-base shadow-sm transition-colors file:border-0 file:bg-transparent
+      text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:pt-1
       file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground
       focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
       disabled:cursor-not-allowed disabled:opacity-50 md:text-sm

data/lib/{components → shadcn_phlexcomponents/components/loading_button}/loading_button.rb

@@ -6,7 +6,7 @@ module ShadcnPhlexcomponents
       {
         type: @type,
         data: {
-          controller: "shadcn-phlexcomponents--loading-button",
+          controller: "loading-button",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/popover}/popover.rb

@@ -21,7 +21,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "shadcn-phlexcomponents--popover",
+          controller: "popover",
           side: @side,
         },
       }

data/lib/{components → shadcn_phlexcomponents/components/popover}/popover_content.rb

@@ -3,11 +3,11 @@
 module ShadcnPhlexcomponents
   class PopoverContent < Base
     STYLES = <<~HEREDOC
-      z-50 rounded-md border w-72 bg-popover p-4 text-popover-foreground shadow-md outline-none#{" "}
-      data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0#{" "}
-      data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95#{" "}
+      z-50 rounded-md border w-72 bg-popover p-4 text-popover-foreground shadow-md outline-none
+      data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+      data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
       data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
-      data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2#{" "}
+      data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
     HEREDOC
 
     def initialize(side: :bottom, aria_id: nil, **attributes)
@@ -19,7 +19,7 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(
         class: "hidden fixed top-0 left-0 w-max z-50",
-        data: { "shadcn-phlexcomponents--popover-target": "contentWrapper" },
+        data: { "popover-target": "contentWrapper" },
       ) do
         div(**@attributes, &)
       end
@@ -32,7 +32,7 @@ module ShadcnPhlexcomponents
         role: "dialog",
         data: {
           side: @side,
-          "shadcn-phlexcomponents--popover-target": "content",
+          "popover-target": "content",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/popover}/popover_trigger.rb

@@ -33,7 +33,6 @@ module ShadcnPhlexcomponents
 
     def default_attributes
       {
-        id: @id,
         role: "button",
         aria: {
           haspopup: "dialog",
@@ -42,8 +41,8 @@ module ShadcnPhlexcomponents
         },
         data: {
           as_child: @as_child.to_s,
-          action: "click->shadcn-phlexcomponents--popover#toggle",
-          "shadcn-phlexcomponents--popover-target": "trigger",
+          action: "click->popover#toggle",
+          "popover-target": "trigger",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/progress}/progress.rb

@@ -18,8 +18,8 @@ module ShadcnPhlexcomponents
           valuenow: @value,
         },
         data: {
-          controller: "shadcn-phlexcomponents--progress",
-          "shadcn-phlexcomponents--progress-progress-value": @value,
+          controller: "progress",
+          "progress-progress-value": @value,
         },
       }
     end
@@ -29,7 +29,7 @@ module ShadcnPhlexcomponents
         div(
           class: "h-full w-full flex-1 bg-primary transition-all",
           style: "transform: translateX(-#{100 - @value}%)",
-          data: { "shadcn-phlexcomponents--progress-target": "bar" },
+          data: { "progress-target": "bar" },
         )
       end
     end

data/lib/{components → shadcn_phlexcomponents/components/radio_group}/radio_group.rb

@@ -4,19 +4,32 @@ module ShadcnPhlexcomponents
   class RadioGroup < Base
     STYLES = "grid gap-2 outline-none"
 
-    def initialize(name: nil, value: nil, dir: "ltr", include_hidden: true, **attributes)
+    def initialize(name: nil, value: nil, dir: "ltr", include_hidden: true, item_id_prefix: nil, **attributes)
       @name = name
       @value = value
       @dir = dir
       @include_hidden = include_hidden
+      @item_id_prefix = item_id_prefix
       super(**attributes)
     end
 
+    def label(**attributes)
+      @label_attributes = attributes
+      nil
+    end
+
+    def radio(**attributes)
+      @radio_attributes = attributes
+      nil
+    end
+
     def item(name: nil, value: nil, **attributes)
       RadioGroupItem(name: name || @name, value: value, checked: @value == value, **attributes)
     end
 
-    def items(collection, value_method:, text_method:, wrapper_class: nil)
+    def items(collection, value_method:, text_method:, wrapper_class: nil, disabled_items: nil, &)
+      vanish(&)
+
       wrapper_class = TAILWIND_MERGER.merge("flex items-center space-x-2 #{wrapper_class}")
 
       if collection.first&.is_a?(Hash)
@@ -26,13 +39,26 @@ module ShadcnPhlexcomponents
       collection.each do |item|
         value = item.public_send(value_method)
         text = item.public_send(text_method)
-        id = "#{@name.parameterize.underscore}_#{value}"
+        id = if @item_id_prefix
+          "#{@item_id_prefix.parameterize.underscore}_#{value}"
+        else
+          "#{@name.parameterize.underscore}_#{value}"
+        end
 
         div(class: wrapper_class) do
-          RadioGroupItem(name: @name, value: value, checked: @value == value, id: id)
-          Label(for: id) { text }
+          RadioGroupItem(
+            name: @name,
+            value: value,
+            checked: @value == value,
+            id: id,
+            disabled: item_disabled?(disabled_items, value),
+**@radio_attributes,
+          )
+          Label(for: id, **@label_attributes) { text }
         end
       end
+
+      nil
     end
 
     def view_template(&)
@@ -53,8 +79,8 @@ module ShadcnPhlexcomponents
           required: false,
         },
         data: {
-          controller: "shadcn-phlexcomponents--radio-group",
-          "shadcn-phlexcomponents--radio-group-selected-value": @value,
+          controller: "radio-group",
+          "radio-group-selected-value": @value,
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/radio_group}/radio_group_item.rb

@@ -50,14 +50,14 @@ module ShadcnPhlexcomponents
         data: {
           checked: @checked.to_s,
           value: @value,
-          "shadcn-phlexcomponents--radio-group-target": "item",
+          "radio-group-target": "item",
           action: <<~HEREDOC,
-            click->shadcn-phlexcomponents--radio-group#setChecked
-            keydown.right->shadcn-phlexcomponents--radio-group#setCheckedToNext:prevent
-            keydown.down->shadcn-phlexcomponents--radio-group#setCheckedToNext:prevent
-            keydown.up->shadcn-phlexcomponents--radio-group#setCheckedToPrev:prevent
-            keydown.left->shadcn-phlexcomponents--radio-group#setCheckedToPrev:prevent
-            keydown.enter->shadcn-phlexcomponents--radio-group#preventDefault
+            click->radio-group#setChecked
+            keydown.right->radio-group#setCheckedToNext:prevent
+            keydown.down->radio-group#setCheckedToNext:prevent
+            keydown.up->radio-group#setCheckedToPrev:prevent
+            keydown.left->radio-group#setCheckedToPrev:prevent
+            keydown.enter->radio-group#preventDefault
           HEREDOC
         },
       }

data/lib/{components → shadcn_phlexcomponents/components/select}/select.rb

@@ -9,7 +9,7 @@ module ShadcnPhlexcomponents
       text-base shadow-sm transition-colors placeholder:text-muted-foreground
       focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
       disabled:cursor-not-allowed disabled:opacity-50 md:text-sm appearance-none
-      relative#{" "}
+      relative
     HEREDOC
 
     NATIVE_OPTION_STYLES = "bg-popover text-popover-foreground"
@@ -68,7 +68,13 @@ module ShadcnPhlexcomponents
       SelectGroup(aria_id: @aria_id, **attributes, &)
     end
 
-    def items(collection)
+    def items(collection, value_method:, text_method:, disabled_items: nil, &)
+      vanish(&)
+
+      if collection.first&.is_a?(Hash)
+        collection = convert_collection_hash_to_struct(collection, value_method: value_method, text_method: text_method)
+      end
+
       SelectTrigger(
         id: @id,
         aria_id: @aria_id,
@@ -79,8 +85,11 @@ module ShadcnPhlexcomponents
       )
 
       SelectContent(aria_id: @aria_id, dir: @dir, include_blank: @include_blank, native: @native) do
-        collection.each do |option|
-          SelectItem(value: option[:value], aria_id: @aria_id, disabled: option[:disabled]) { option[:name] }
+        collection.each do |item|
+          value = item.public_send(value_method)
+          text = item.public_send(text_method)
+
+          SelectItem(value: value, aria_id: @aria_id, disabled: item_disabled?(disabled_items, value)) { text }
         end
       end
     end
@@ -88,7 +97,7 @@ module ShadcnPhlexcomponents
     def view_template(&)
       content = capture(&)
       element = Nokogiri::HTML.fragment(content.to_s)
-      content_element = element.css('[data-shadcn-phlexcomponents--select-target="content"]')
+      content_element = element.css('[data-select-target="content"]')
 
       if @native
         div(class: "relative") do
@@ -110,8 +119,9 @@ module ShadcnPhlexcomponents
             name: @name,
             disabled: @disabled,
             class: "sr-only",
+            tabindex: -1,
             data: {
-              "shadcn-phlexcomponents--select-target": "select",
+              "select-target": "select",
             },
           ) do
             option(value: "")
@@ -141,8 +151,8 @@ module ShadcnPhlexcomponents
           data: {
             side: @side,
             aria_id: @aria_id,
-            controller: "shadcn-phlexcomponents--select",
-            "shadcn-phlexcomponents--select-selected-value": @value,
+            controller: "select",
+            "select-selected-value": @value,
           },
         }
       end
@@ -152,11 +162,11 @@ module ShadcnPhlexcomponents
       content_element.children.each do |content_child|
         next if content_child.is_a?(Nokogiri::XML::Text) || content_child.is_a?(Nokogiri::XML::Comment)
 
-        if content_child.attributes["data-shadcn-phlexcomponents--select-target"]&.value == "group"
-          group_label = content_child.at_css('[data-shadcn-phlexcomponents--select-target="label"]')&.text
+        if content_child.attributes["data-select-target"]&.value == "group"
+          group_label = content_child.at_css('[data-select-target="label"]')&.text
 
           optgroup(label: group_label, class: NATIVE_OPTION_STYLES) do
-            content_child.css('[data-shadcn-phlexcomponents--select-target="item"]').each do |i|
+            content_child.css('[data-select-target="item"]').each do |i|
               option(
                 value: i.attributes["data-value"].value,
                 class: NATIVE_OPTION_STYLES,
@@ -167,7 +177,7 @@ module ShadcnPhlexcomponents
               end
             end
           end
-        elsif content_child.attributes["data-shadcn-phlexcomponents--select-target"]&.value == "item"
+        elsif content_child.attributes["data-select-target"]&.value == "item"
 
           option(
             value: content_child.attributes["data-value"].value,

data/lib/{components → shadcn_phlexcomponents/components/select}/select_content.rb

@@ -4,12 +4,12 @@ module ShadcnPhlexcomponents
   class SelectContent < Base
     STYLES = <<~HEREDOC
       relative z-50 min-w-[8rem] max-h-108 overflow-y-auto overflow-x-hidden rounded-md border
-      bg-popover text-popover-foreground  p-1 shadow-md outline-none
+      bg-popover text-popover-foreground  p-1 shadow-md outline-none pointer-events-auto
       data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0
       data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
       data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
       data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
-      data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1#{" "}
+      data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1
       data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1
     HEREDOC
 
@@ -25,7 +25,7 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(
         class: "hidden fixed top-0 left-0 w-max z-50",
-        data: { "shadcn-phlexcomponents--select-target": "contentWrapper" },
+        data: { "select-target": "contentWrapper" },
       ) do
         div(**@attributes) do
           if @include_blank && !@native
@@ -52,10 +52,10 @@ module ShadcnPhlexcomponents
         data: {
           state: "closed",
           side: @side,
-          "shadcn-phlexcomponents--select-target": "content",
+          "select-target": "content",
           action: <<~HEREDOC,
-            keydown.up->shadcn-phlexcomponents--select#focusLastItem:prevent
-            keydown.down->shadcn-phlexcomponents--select#focusFirstItem:prevent
+            keydown.up->select#focusLastItem:prevent
+            keydown.down->select#focusFirstItem:prevent
           HEREDOC
         },
       }

data/lib/{components → shadcn_phlexcomponents/components/select}/select_group.rb

@@ -15,7 +15,7 @@ module ShadcnPhlexcomponents
       {
         role: "group",
         data: {
-          "shadcn-phlexcomponents--select-target": "group",
+          "select-target": "group",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/select}/select_item.rb

@@ -43,15 +43,15 @@ module ShadcnPhlexcomponents
           disabled: @disabled,
           value: @value,
           action: <<~HEREDOC,
-            click->shadcn-phlexcomponents--select#selectItem
-            keydown.up->shadcn-phlexcomponents--select#focusPrevItem:prevent:stop
-            keydown.down->shadcn-phlexcomponents--select#focusNextItem:prevent:stop
-            keydown.enter->shadcn-phlexcomponents--select#selectItem:prevent
-            keydown.space->shadcn-phlexcomponents--select#selectItem:prevent
-            mouseover->shadcn-phlexcomponents--select#focusItem
-            mouseout->shadcn-phlexcomponents--select#focusContent
+            click->select#selectItem
+            keydown.up->select#focusPrevItem:prevent:stop
+            keydown.down->select#focusNextItem:prevent:stop
+            keydown.enter->select#selectItem:prevent
+            keydown.space->select#selectItem:prevent
+            mouseover->select#focusItem
+            mouseout->select#focusContent
           HEREDOC
-          "shadcn-phlexcomponents--select-target": "item",
+          "select-target": "item",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/select}/select_label.rb

@@ -16,7 +16,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          "shadcn-phlexcomponents--select-target": "label",
+          "select-target": "label",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/select}/select_trigger.rb

@@ -4,8 +4,8 @@ module ShadcnPhlexcomponents
   class SelectTrigger < Base
     STYLES = <<~HEREDOC
       flex h-9 items-center justify-between whitespace-nowrap rounded-md border
-      border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background#{" "}
-      data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1
+      border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background
+      data-[placeholder]:data-[has-value=false]:text-muted-foreground focus:outline-none focus:ring-1
       focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
       w-full cursor-pointer
     HEREDOC
@@ -21,11 +21,11 @@ module ShadcnPhlexcomponents
 
     def view_template
       button(**@attributes) do
-        span(class: "pointer-events-none", data: { "shadcn-phlexcomponents--select-target": "triggerText" }) do
+        span(class: "pointer-events-none", data: { "select-target": "triggerText" }) do
           @value || @placeholder
         end
 
-        icon("chevron-down", class: "size-4 opacity-50")
+        icon("chevron-down", class: "size-4 opacity-50 text-foreground")
       end
     end
 
@@ -41,14 +41,14 @@ module ShadcnPhlexcomponents
           controls: "#{@aria_id}-content",
         },
         data: {
-          placeholder: @placeholder.present?,
-          placeholder_text: @placeholder,
+          placeholder: @placeholder,
+          has_value: @value.present?.to_s,
           action: <<~HEREDOC,
-            click->shadcn-phlexcomponents--select#toggle
-            keydown.down->shadcn-phlexcomponents--select#toggle:prevent
-            keydown.up->shadcn-phlexcomponents--select#toggle:prevent
+            click->select#toggle
+            keydown.down->select#toggle:prevent
+            keydown.up->select#toggle:prevent
           HEREDOC
-          "shadcn-phlexcomponents--select-target": "trigger",
+          "select-target": "trigger",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/sheet}/sheet.rb

@@ -45,7 +45,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "shadcn-phlexcomponents--sheet",
+          controller: "dialog",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/sheet}/sheet_close.rb

@@ -34,7 +34,7 @@ module ShadcnPhlexcomponents
       {
         role: "button",
         data: {
-          action: "click->shadcn-phlexcomponents--sheet#close",
+          action: "click->dialog#close",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/sheet}/sheet_content.rb

@@ -5,7 +5,7 @@ module ShadcnPhlexcomponents
     STYLES = <<~HEREDOC
       fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out
       data-[state=closed]:duration-300 data-[state=open]:duration-500
-      data-[state=open]:animate-in data-[state=closed]:animate-out
+      data-[state=open]:animate-in data-[state=closed]:animate-out pointer-events-auto
     HEREDOC
 
     CLOSE_BUTTON_STYLES = <<~HEREDOC
@@ -36,7 +36,7 @@ module ShadcnPhlexcomponents
       div(class: "#{@class} hidden", **@attributes) do
         yield
 
-        button(class: CLOSE_BUTTON_STYLES, data: { action: "click->shadcn-phlexcomponents--sheet#close" }) do
+        button(class: CLOSE_BUTTON_STYLES, data: { action: "click->dialog#close" }) do
           icon("x", class: "size-4")
           span(class: "sr-only") { "close" }
         end
@@ -53,7 +53,7 @@ module ShadcnPhlexcomponents
           labelledby: "#{@aria_id}-title",
         },
         data: {
-          "shadcn-phlexcomponents--sheet-target": "content",
+          "dialog-target": "content",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/sheet}/sheet_trigger.rb

@@ -41,8 +41,8 @@ module ShadcnPhlexcomponents
         },
         data: {
           as_child: @as_child.to_s,
-          action: "click->shadcn-phlexcomponents--sheet#open",
-          "shadcn-phlexcomponents--sheet-target": "trigger",
+          action: "click->dialog#open",
+          "dialog-target": "trigger",
         },
       }
     end