shadcn_phlexcomponents 0.1.11 → 0.1.16

data/lib/shadcn_phlexcomponents/components/date_picker.rb

@@ -4,74 +4,6 @@ module ShadcnPhlexcomponents
   class DatePicker < Base
     class_variants(base: "w-full")
 
-    class << self
-      button = Button.new
-
-      {
-        input_container: <<~HEREDOC,
-          focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
-          data-[focus=true]:border-ring data-[focus=true]:ring-ring/50 data-[focus=true]:ring-[3px]
-          data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 flex shadow-xs transition-[color,box-shadow]
-          rounded-md border bg-transparent dark:bg-input/30 border-input outline-none h-9 flex items-center
-          aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
-        HEREDOC
-        input: <<~HEREDOC,
-          md:text-sm placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
-          flex h-9 w-full min-w-0 text-base outline-none px-3 py-1#{" "}
-        HEREDOC
-        calendar: {
-          calendar: "relative flex flex-col outline-none",
-          controls: "absolute z-20 -left-1 -right-1 -top-1.5 flex justify-between items-center pt-1.5 px-1 pointer-events-none box-content",
-          grid: "grid gap-4 grid-cols-1 md:grid-cols-2",
-          column: "flex flex-col",
-          header: "relative flex items-center mb-4",
-          headerContent: "grid grid-flow-col gap-x-1 auto-cols-max items-center justify-center px-4 whitespace-pre-wrap grow",
-          month: button.class_variants(variant: :outline, size: :sm, class: "text-xs h-7 bg-transparent"),
-          year: button.class_variants(variant: :outline, size: :sm, class: "text-xs h-7 bg-transparent"),
-          arrowPrev: button.class_variants(variant: :outline, size: :icon, class: "pointer-events-auto size-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
-          arrowNext: button.class_variants(variant: :outline, size: :icon, class: "pointer-events-auto size-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
-          wrapper: "flex items-center content-center h-full",
-          content: "flex flex-col grow h-full",
-          months: "grid gap-2 grid-cols-4 items-center grow",
-          monthsMonth: button.class_variants(variant: :ghost, class: "aria-[selected=true]:text-primary-foreground aria-[selected=true]:bg-primary aria-[selected=true]:hover:text-primary-foreground aria-[selected=true]:hover:bg-primary"),
-          years: "grid gap-2 grid-cols-5 items-center grow",
-          yearsYear: button.class_variants(variant: :ghost, class: "aria-[selected=true]:text-primary-foreground aria-[selected=true]:bg-primary aria-[selected=true]:hover:text-primary-foreground aria-[selected=true]:hover:bg-primary"),
-          week: "grid mb-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center text-center",
-          weekDay: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-          weekNumbers: "vc-week-numbers",
-          weekNumbersTitle: "vc-week-numbers__title",
-          weekNumbersContent: "vc-week-numbers__content",
-          weekNumber: "vc-week-number",
-          dates: "grid gap-y-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center",
-          date: <<~HEREDOC,
-            vc-date data-[vc-date-selected]:[&_button]:bg-primary#{" "}
-            data-[vc-date-selected]:[&_button]:text-primary-foreground#{" "}
-            data-[vc-date-selected]:[&_button]:hover:bg-primary#{" "}
-            data-[vc-date-selected]:[&_button]:hover:text-primary-foreground#{" "}
-            data-[vc-date-selected]:[&_button]:focus:bg-primary#{" "}
-            data-[vc-date-selected]:[&_button]:focus:text-primary-foreground
-            data-[vc-date-today]:[&_button]:bg-accent
-            data-[vc-date-today]:[&_button]:text-accent-foreground
-            data-[vc-date-month=prev]:[&_button]:text-muted-foreground
-            data-[vc-date-month=next]:[&_button]:text-muted-foreground
-            data-[vc-date-selected='middle']:data-[vc-date-selected]:[&_button]:bg-accent
-            data-[vc-date-selected='middle']:data-[vc-date-selected]:[&_button]:text-accent-foreground
-            data-[vc-date-hover]:[&_button]:bg-accent data-[vc-date-hover]:[&_button]:text-accent-foreground
-          HEREDOC
-          dateBtn: button.class_variants(variant: :ghost, class: "size-8 p-0 font-normal aria-[disabled]:text-muted-foreground aria-[disabled]:opacity-50 aria-[disabled]:pointer-events-none"),
-          datePopup: "vc-date__popup",
-          dateRangeTooltip: "vc-date-range-tooltip",
-          time: "vc-time",
-          timeContent: "vc-time__content",
-          timeHour: "vc-time__hour",
-          timeMinute: "vc-time__minute",
-          timeKeeping: "vc-time__keeping",
-          timeRanges: "vc-time__ranges",
-          timeRange: "vc-time__range",
-        },
-      }
-    end
-
     def initialize(
       name: nil,
       id: nil,
@@ -86,6 +18,15 @@ module ShadcnPhlexcomponents
     )
       @name = name
       @id = id
+
+      if value
+       value = if value.is_a?(String)
+          DateTime.parse(value) rescue nil
+        else
+          value
+        end
+      end
+
       @value = value&.utc&.iso8601
       @format = format
       @select_only = select_only
@@ -93,8 +34,7 @@ module ShadcnPhlexcomponents
       @disabled = disabled
       @mask = mask
       @aria_id = "date-picker-#{SecureRandom.hex(5)}"
-      @date_picker_styles = self.class.date_picker_styles
-      @options = options.merge(styles: @date_picker_styles[:calendar])
+      @options = options
       super(**attributes)
     end
 
@@ -112,6 +52,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(**@attributes) do
+        overlay("date-picker")
+
         input(
           type: :hidden,
           name: @name,
@@ -130,12 +72,19 @@ module ShadcnPhlexcomponents
             placeholder: @placeholder,
           )
         else
-          div(class: @date_picker_styles[:input_container], data: { date_picker_target: "inputContainer", disabled: @disabled }) do
+          div(class: <<~HEREDOC,
+            focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+            data-[focus=true]:border-ring data-[focus=true]:ring-ring/50 data-[focus=true]:ring-[3px]
+            data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 flex shadow-xs transition-[color,box-shadow]
+            rounded-md border bg-transparent dark:bg-input/30 border-input outline-none h-9 flex items-center
+            aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
+          HEREDOC
+          data: { date_picker_target: "inputContainer", disabled: @disabled }) do
             input(
               id: @id,
               placeholder: @placeholder || @format,
               type: :text,
-              class: @date_picker_styles[:input],
+              class: "md:text-sm placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 text-base outline-none px-3 py-1",
               disabled: @disabled,
               data: {
                 date_picker_target: "input",
@@ -223,13 +172,7 @@ module ShadcnPhlexcomponents
     end
 
     def class_variants(**args)
-      PopoverContent.new.class_variants(
-        class: <<~HEREDOC,
-          fixed left-1/2 top-1/2 shadow-lg -translate-x-1/2 -translate-y-1/2 pointer-events-auto w-max
-          md:relative md:left-[unset] md:top-[unset] md:shadow-md md:translate-x-[unset] md:translate-y-[unset] md:pointer-events-[unset]
-          #{args[:class]}
-        HEREDOC
-      )
+      PopoverContent.new.class_variants(class: "w-fit #{args[:class]}")
     end
 
     def default_attributes
@@ -252,7 +195,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed z-50 top-1/4 left-1/2 -translate-x-1/2 pointer-events-auto md:top-auto md:left-auto md:translate-none md:pointer-events-[unset]",
         data: { "#{stimulus_controller_name}-target" => "contentContainer" },
       ) do
         div(**@attributes) do
@@ -261,4 +205,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/shadcn_phlexcomponents/components/date_range_picker.rb

@@ -24,6 +24,16 @@ module ShadcnPhlexcomponents
         raise ArgumentError, "Expected an array for \"value\", got #{value.class}"
       end
 
+      if value
+        value = value.map do |v|
+          if v.is_a?(String)
+            DateTime.parse(v) rescue nil
+          else
+            v
+          end
+        end 
+      end
+
       @name = name ? name[0] : nil
       @end_name = name ? name[1] : nil
       @value = (value ? value[0] : nil)&.utc&.iso8601
@@ -35,8 +45,7 @@ module ShadcnPhlexcomponents
       @disabled = disabled
       @mask = mask
       @aria_id = "date-range-picker-#{SecureRandom.hex(5)}"
-      @date_picker_styles = DatePicker.date_picker_styles
-      @options = options.merge(styles: @date_picker_styles[:calendar])
+      @options = options
       super(**attributes)
     end
 
@@ -55,6 +64,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(**@attributes) do
+        overlay('date-range-picker')
+
         input(
           type: :hidden,
           name: @name,
@@ -81,14 +92,20 @@ module ShadcnPhlexcomponents
           )
         else
           div(
-            class: @date_picker_styles[:input_container],
+            class: <<~HEREDOC,
+              focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+              data-[focus=true]:border-ring data-[focus=true]:ring-ring/50 data-[focus=true]:ring-[3px]
+              data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 flex shadow-xs transition-[color,box-shadow]
+              rounded-md border bg-transparent dark:bg-input/30 border-input outline-none h-9 flex items-center
+              aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
+            HEREDOC
             data: { date_range_picker_target: "inputContainer", disabled: @disabled },
           ) do
             input(
               id: @id,
               placeholder: @placeholder || "#{@format} - #{@format}",
               type: :text,
-              class: @date_picker_styles[:input],
+              class: "md:text-sm placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 text-base outline-none px-3 py-1",
               disabled: @disabled,
               data: {
                 date_range_picker_target: "input",

data/lib/shadcn_phlexcomponents/components/dialog.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Dialog < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -42,13 +42,17 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "dialog",
-          dialog_is_open_value: @open.to_s,
-        },
+          dialog_is_open_value: @open.to_s
+        }
       }
     end
 
     def view_template(&)
-      div(**@attributes, &)
+      div(**@attributes) do
+        overlay("dialog")
+        
+        yield
+      end
     end
   end
 
@@ -67,10 +71,10 @@ module ShadcnPhlexcomponents
           expanded: "false",
           controls: "#{@aria_id}-content",
         },
-        data: {
-          action: "click->dialog#open",
-          dialog_target: "trigger",
+        data: { 
           as_child: @as_child.to_s,
+          dialog_target: "trigger",
+          action: "click->dialog#open"
         },
       }
     end
@@ -98,7 +102,7 @@ module ShadcnPhlexcomponents
         data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
         data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)]
         translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg
-        pointer-events-auto
+        pointer-events-auto outline-none
       HEREDOC
     )
 
@@ -117,16 +121,14 @@ module ShadcnPhlexcomponents
           labelledby: "#{@aria_id}-title",
         },
         data: {
-          dialog_target: "content",
           state: "closed",
-          action: "dialog:click:outside->dialog#close",
+          dialog_target: "content"
         },
       }
     end
 
     def view_template(&)
-      @class = @attributes.delete(:class)
-      div(class: "#{@class} hidden", **@attributes) do
+      div(style: { display: "none" }, **@attributes) do
         yield
 
         button(

data/lib/shadcn_phlexcomponents/components/dropdown_menu.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class DropdownMenu < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @aria_id = "dropdown-menu-#{SecureRandom.hex(5)}"
@@ -93,9 +93,9 @@ module ShadcnPhlexcomponents
           dropdown_menu_target: "trigger",
           action: <<~HEREDOC,
             click->dropdown-menu#toggle
-            keydown.space->dropdown-menu#open
-            keydown.enter->dropdown-menu#open
             keydown.down->dropdown-menu#open:prevent
+            keydown.space->dropdown-menu#open:prevent
+            keydown.enter->dropdown-menu#open:prevent
           HEREDOC
         },
       }
@@ -123,7 +123,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { dropdown_menu_target: "contentContainer" },
       ) do
         div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/dropdown_menu_sub.rb

@@ -125,7 +125,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { dropdown_menu_sub_target: "contentContainer" },
       ) do
         div(**@attributes, &)

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

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormCombobox < Base
+    include FormHelpers
+
+    def initialize(
+      method = nil,
+      model: false,
+      object_name: nil,
+      collection: [],
+      value_method: nil,
+      text_method: nil,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      disabled_items: nil,
+      **attributes
+    )
+      @method = method
+      @model = model
+      @object_name = object_name
+
+      @collection = if collection.first&.is_a?(Hash)
+        convert_collection_hash_to_struct(collection, value_method: value_method, text_method: text_method)
+      else
+        collection
+      end
+
+      @value_method = value_method
+      @text_method = text_method
+      @value = default_value(value, method)
+      @name = name
+      @id = id
+      @label = label
+      @error = default_error(error, method)
+      @hint = hint
+      @disabled_items = disabled_items
+      @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(&)
+
+        Combobox(id: @id, name: @name, value: @value, aria: aria_attributes, **@attributes) do |c|
+          c.items(@collection, value_method: @value_method, text_method: @text_method, disabled_items: @disabled_items)
+        end
+
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/form.rb

@@ -11,6 +11,7 @@ require_relative "form/form_checkbox_group"
 require_relative "form/form_date_picker"
 require_relative "form/form_date_range_picker"
 require_relative "form/form_select"
+require_relative "form/form_combobox"
 require_relative "form/form_radio_group"
 require_relative "form/form_slider"
 
@@ -83,6 +84,19 @@ module ShadcnPhlexcomponents
       )
     end
 
+    def combobox(method = nil, collection = [], value_method:, text_method:, **attributes, &)
+      FormCombobox(
+        method,
+        model: @model,
+        object_name: @object_name,
+        collection: collection,
+        value_method: value_method,
+        text_method: text_method,
+        **attributes,
+        &
+      )
+    end
+
     def date_picker(method = nil, **attributes, &)
       FormDatePicker(method, model: @model, object_name: @object_name, **attributes, &)
     end

data/lib/shadcn_phlexcomponents/components/hover_card.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class HoverCard < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -88,7 +88,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { hover_card_target: "contentContainer" },
       ) do
         div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/popover.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Popover < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -23,7 +23,6 @@ module ShadcnPhlexcomponents
         data: {
           controller: "popover",
           popover_is_open_value: @open.to_s,
-          side: @side,
         },
       }
     end
@@ -92,7 +91,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { popover_target: "contentContainer" },
       ) do
         div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/select.rb

@@ -10,7 +10,6 @@ module ShadcnPhlexcomponents
       value: nil,
       placeholder: nil,
       native: false,
-      dir: "ltr",
       include_blank: false,
       disabled: false,
       **attributes
@@ -20,7 +19,6 @@ module ShadcnPhlexcomponents
       @value = value
       @placeholder = placeholder
       @native = native
-      @dir = dir
       @include_blank = include_blank
       @disabled = disabled
       @aria_id = "select-#{SecureRandom.hex(5)}"
@@ -39,7 +37,6 @@ module ShadcnPhlexcomponents
       SelectTrigger(
         id: @id,
         aria_id: @aria_id,
-        dir: @dir,
         value: @value,
         placeholder: @placeholder,
         disabled: @disabled,
@@ -49,7 +46,7 @@ module ShadcnPhlexcomponents
 
     def content(**attributes, &)
       SelectContent(
-        aria_id: @aria_id, dir: @dir, include_blank: @include_blank, native: @native, **attributes, &
+        aria_id: @aria_id, include_blank: @include_blank, native: @native, **attributes, &
       )
     end
 
@@ -75,13 +72,12 @@ module ShadcnPhlexcomponents
       SelectTrigger(
         id: @id,
         aria_id: @aria_id,
-        dir: @dir,
         value: @value,
         placeholder: @placeholder,
         disabled: @disabled,
       )
 
-      SelectContent(aria_id: @aria_id, dir: @dir, include_blank: @include_blank, native: @native) do
+      SelectContent(aria_id: @aria_id, include_blank: @include_blank, native: @native) do
         collection.each do |item|
           value = item.public_send(value_method)
           text = item.public_send(text_method)
@@ -151,7 +147,7 @@ module ShadcnPhlexcomponents
         next if content_child.is_a?(Nokogiri::XML::Text) || content_child.is_a?(Nokogiri::XML::Comment)
 
         if content_child.attributes["data-select-target"]&.value == "group"
-          group_label = content_child.at_css('[data-select-target="label"]')&.text
+          group_label = content_child.at_css('[data-shadcn-phlexcomponents="select-label"]')&.text
 
           optgroup(label: group_label, class: NATIVE_OPTION_STYLES) do
             content_child.css('[data-select-target="item"]').each do |i|
@@ -195,11 +191,10 @@ module ShadcnPhlexcomponents
       HEREDOC
     )
 
-    def initialize(id: nil, value: nil, placeholder: nil, dir: "ltr", aria_id: nil, **attributes)
+    def initialize(id: nil, value: nil, placeholder: nil, aria_id: nil, **attributes)
       @id = id
       @value = value
       @placeholder = placeholder
-      @dir = dir
       @aria_id = aria_id
       super(**attributes)
     end
@@ -218,7 +213,6 @@ module ShadcnPhlexcomponents
       {
         type: "button",
         id: @id,
-        dir: @dir,
         role: "combobox",
         aria: {
           autocomplete: "none",
@@ -230,9 +224,9 @@ module ShadcnPhlexcomponents
           has_value: @value.present?.to_s,
           action: <<~HEREDOC,
             click->select#toggle
-            keydown.space->select#open
-            keydown.enter->select#open
             keydown.down->select#open:prevent
+            keydown.space->select#open:prevent
+            keydown.enter->select#open:prevent
           HEREDOC
           select_target: "trigger",
         },
@@ -252,10 +246,9 @@ module ShadcnPhlexcomponents
       HEREDOC
     )
 
-    def initialize(include_blank: false, native: false, dir: "ltr", side: :bottom, align: :center, aria_id: nil, **attributes)
+    def initialize(include_blank: false, native: false, side: :bottom, align: :center, aria_id: nil, **attributes)
       @include_blank = include_blank
       @native = native
-      @dir = dir
       @side = side
       @align = align
       @aria_id = aria_id
@@ -264,12 +257,13 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { select_target: "contentContainer" },
       ) do
         div(**@attributes) do
           if @include_blank && !@native
-            SelectItem(aria_id: @aria_id, value: "", class: "h-8", hide_icon: true) do
+            SelectItem(aria_id: @aria_id, value: "", class: "h-8") do
               @include_blank.is_a?(String) ? @include_blank : ""
             end
           end
@@ -282,7 +276,6 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         id: "#{@aria_id}-content",
-        dir: @dir,
         tabindex: -1,
         role: "listbox",
         aria: {
@@ -316,14 +309,6 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(**@attributes, &)
     end
-
-    def default_attributes
-      {
-        data: {
-          select_target: "label",
-        },
-      }
-    end
   end
 
   class SelectItem < Base

data/lib/shadcn_phlexcomponents/components/sheet.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Sheet < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -42,12 +42,17 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "dialog",
-        },
-      }
+          dialog_is_open_value: @open.to_s
+        }
+      }  
     end
 
     def view_template(&)
-      div(**@attributes, &)
+      div(**@attributes) do
+        overlay("dialog")
+        
+        yield
+      end
     end
   end
 
@@ -66,10 +71,10 @@ module ShadcnPhlexcomponents
           expanded: false,
           controls: "#{@aria_id}-content",
         },
-        data: {
+        data: { 
           as_child: @as_child.to_s,
-          action: "click->dialog#open",
           dialog_target: "trigger",
+          action: "click->dialog#open"
         },
       }
     end
@@ -95,7 +100,7 @@ module ShadcnPhlexcomponents
       base: <<~HEREDOC,
         bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4
         shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500
-        pointer-events-auto
+        pointer-events-auto outline-none
       HEREDOC
       variants: {
         side: {
@@ -117,8 +122,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      @class = @attributes.delete(:class)
-      div(class: "#{@class} hidden", **@attributes) do
+      div(style: { display: "none" }, **@attributes) do
         yield
 
         button(
@@ -145,8 +149,8 @@ module ShadcnPhlexcomponents
           labelledby: "#{@aria_id}-title",
         },
         data: {
-          dialog_target: "content",
-          action: "dialog:click:outside->dialog#close",
+          state: "closed",
+          dialog_target: "content"
         },
       }
     end