shadcn_phlexcomponents 0.1.18 → 0.1.19

data/lib/shadcn_phlexcomponents/components/date_picker.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class DatePicker < Base
-    class_variants(base: "w-full")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.date_picker&.dig(:root) ||
+        {
+          base: "w-full",
+        }
+      ),
+    )
 
     def initialize(
       name: nil,
@@ -22,7 +29,8 @@ module ShadcnPhlexcomponents
       if value
         value = if value.is_a?(String)
           begin
-            Time.parse(value)
+            # Use Time.zone.parse to ensure consistent timezone handling
+            Time.zone ? Time.zone.parse(value) : Time.parse(value)
           rescue
             nil
           end
@@ -70,46 +78,27 @@ module ShadcnPhlexcomponents
           # label will trigger the popover to appear
           DatePickerTrigger(
             disabled: @disabled,
-            aria_id: @aria_id,
             select_only: @select_only,
             id: @id,
             placeholder: @placeholder,
+            stimulus_controller_name: "date-picker",
+            aria_id: @aria_id,
           )
         else
-          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: "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",
-                action: "input->date-picker#inputDate
-                          blur->date-picker#inputBlur
-                          focus->date-picker#setContainerFocus",
-              },
-            )
+          DatePickerInputContainer(disabled: @disabled, stimulus_controller_name: "date-picker") do
+            DatePickerInput(id: @id, placeholder: @placeholder, format: @format, disabled: @disabled, stimulus_controller_name: "date-picker", aria_id: @aria_id)
 
             DatePickerTrigger(
               disabled: @disabled,
-              aria_id: @aria_id,
               select_only: @select_only,
               placeholder: @placeholder,
+              stimulus_controller_name: "date-picker",
+              aria_id: @aria_id,
             )
           end
         end
 
-        DatePickerContent(aria_id: @aria_id)
+        DatePickerContent(stimulus_controller_name: "date-picker", aria_id: @aria_id)
       end
     end
   end
@@ -118,12 +107,14 @@ module ShadcnPhlexcomponents
     def initialize(
       select_only: true,
       placeholder: nil,
+      stimulus_controller_name: nil,
       aria_id: nil,
       **attributes
     )
       @select_only = select_only
       @placeholder = placeholder
       @aria_id = aria_id
+      @stimulus_controller_name = stimulus_controller_name
       super(**attributes)
     end
 
@@ -138,7 +129,7 @@ module ShadcnPhlexcomponents
     def view_template
       if @select_only
         button(type: :button, disabled: @disabled, **@attributes) do
-          span(class: "pointer-events-none", data: { "#{stimulus_controller_name}-target" => "triggerText" })
+          span(class: "pointer-events-none", data: { "#{@stimulus_controller_name}-target" => "triggerText" })
 
           icon("calendar", class: "size-5")
         end
@@ -158,21 +149,18 @@ module ShadcnPhlexcomponents
         },
         data: {
           placeholder: @placeholder,
-          action: "click->#{stimulus_controller_name}#toggle",
-          "#{stimulus_controller_name}-target" => "trigger",
+          action: "click->#{@stimulus_controller_name}#toggle",
+          "#{@stimulus_controller_name}-target" => "trigger",
         },
       }
     end
-
-    def stimulus_controller_name
-      "date-picker"
-    end
   end
 
   class DatePickerContent < Base
-    def initialize(side: :bottom, align: :start, aria_id: nil, **attributes)
+    def initialize(side: :bottom, align: :start, stimulus_controller_name: nil, aria_id: nil, **attributes)
       @side = side
       @align = align
+      @stimulus_controller_name = stimulus_controller_name
       @aria_id = aria_id
       super(**attributes)
     end
@@ -189,26 +177,124 @@ module ShadcnPhlexcomponents
         data: {
           side: @side,
           align: @align,
-          "#{stimulus_controller_name}-target" => "content",
-          action: "#{stimulus_controller_name}:click:outside->#{stimulus_controller_name}#clickOutside",
+          "#{@stimulus_controller_name}-target" => "content",
+          action: "#{@stimulus_controller_name}:click:outside->#{@stimulus_controller_name}#clickOutside",
         },
       }
     end
 
-    def stimulus_controller_name
-      "date-picker"
-    end
-
     def view_template(&)
-      div(
-        style: { display: "none" },
-        class: "fixed top-0 left-0 w-max z-50",
-        data: { "#{stimulus_controller_name}-target" => "contentContainer" },
-      ) do
+      DatePickerContentContainer(stimulus_controller_name: @stimulus_controller_name) do
         div(**@attributes) do
-          div(data: { "#{stimulus_controller_name}-target" => "calendar" })
+          div(data: { "#{@stimulus_controller_name}-target" => "calendar" })
         end
       end
     end
   end
+
+  class DatePickerContentContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.date_picker&.dig(:content_container) ||
+        {
+          base: "fixed top-0 left-0 w-max z-50",
+        }
+      ),
+    )
+
+    def initialize(stimulus_controller_name: nil, **attributes)
+      @stimulus_controller_name = stimulus_controller_name
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        style: { display: "none" },
+        data: { "#{@stimulus_controller_name}-target" => "contentContainer" },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class DatePickerInputContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.date_picker&.dig(:input_container) ||
+        {
+          base: <<~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
+        }
+      ),
+    )
+
+    def initialize(disabled: false, stimulus_controller_name: nil, **attributes)
+      @disabled = disabled
+      @stimulus_controller_name = stimulus_controller_name
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          "#{@stimulus_controller_name}-target" => "inputContainer",
+          disabled: @disabled,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class DatePickerInput < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.date_picker&.dig(:input) ||
+        {
+          base: <<~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
+        }
+      ),
+    )
+
+    def initialize(id: nil, placeholder: nil, format: nil, disabled: false, stimulus_controller_name: nil, aria_id: nil, **attributes)
+      @id = id
+      @placeholder = placeholder
+      @format = format
+      @disabled = disabled
+      @stimulus_controller_name = stimulus_controller_name
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: @id || "#{@aria_id}-input",
+        placeholder: @placeholder || @format,
+        type: :text,
+        disabled: @disabled,
+        data: {
+          "#{@stimulus_controller_name}-target" => "input",
+          action: "input->#{@stimulus_controller_name}#inputDate
+                    blur->#{@stimulus_controller_name}#inputBlur
+                    focus->#{@stimulus_controller_name}#setContainerFocus",
+        },
+      }
+    end
+
+    def view_template
+      input(**@attributes)
+    end
+  end
 end

data/lib/shadcn_phlexcomponents/components/date_range_picker.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class DateRangePicker < Base
-    class_variants(base: "w-full")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.date_picker&.dig(:root) ||
+        {
+          base: "w-full",
+        }
+      ),
+    )
 
     def initialize(
       name: nil,
@@ -28,7 +35,8 @@ module ShadcnPhlexcomponents
         value = value.map do |v|
           if v.is_a?(String)
             begin
-              Time.parse(v)
+              # Use Time.zone.parse to ensure consistent timezone handling
+              Time.zone ? Time.zone.parse(v) : Time.parse(v)
             rescue
               nil
             end
@@ -87,61 +95,31 @@ module ShadcnPhlexcomponents
         if @select_only
           # For select_only date picker, id is passed to button so that clicking on its
           # label will trigger the popover to appear
-          DateRangePickerTrigger(
+          DatePickerTrigger(
             disabled: @disabled,
-            aria_id: @aria_id,
             select_only: @select_only,
             id: @id,
             placeholder: @placeholder,
+            stimulus_controller_name: "date-range-picker",
+            aria_id: @aria_id,
           )
         else
-          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_range_picker_target: "inputContainer", disabled: @disabled },
-          ) do
-            input(
-              id: @id,
-              placeholder: @placeholder || "#{@format} - #{@format}",
-              type: :text,
-              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",
-                action: "input->date-range-picker#inputDate
-                          blur->date-range-picker#inputBlur
-                          focus->date-range-picker#setContainerFocus",
-              },
-            )
 
-            DateRangePickerTrigger(
+          DatePickerInputContainer(disabled: @disabled, stimulus_controller_name: "date-range-picker") do
+            DatePickerInput(id: @id, placeholder: @placeholder, format: "#{@format} - #{@format}", disabled: @disabled, stimulus_controller_name: "date-range-picker", aria_id: @aria_id)
+
+            DatePickerTrigger(
               disabled: @disabled,
-              aria_id: @aria_id,
               select_only: @select_only,
               placeholder: @placeholder,
+              stimulus_controller_name: "date-range-picker",
+              aria_id: @aria_id,
             )
           end
         end
 
-        DateRangePickerContent(aria_id: @aria_id)
+        DatePickerContent(stimulus_controller_name: "date-range-picker", aria_id: @aria_id)
       end
     end
   end
-
-  class DateRangePickerTrigger < DatePickerTrigger
-    def stimulus_controller_name
-      "date-range-picker"
-    end
-  end
-
-  class DateRangePickerContent < DatePickerContent
-    def stimulus_controller_name
-      "date-range-picker"
-    end
-  end
 end

data/lib/shadcn_phlexcomponents/components/dialog.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class Dialog < Base
-    class_variants(base: "inline-flex max-w-fit")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dialog&.dig(:root) ||
+        {
+          base: "inline-flex max-w-fit",
+        }
+      ),
+    )
 
     def initialize(open: false, **attributes)
       @open = open
@@ -97,13 +104,18 @@ module ShadcnPhlexcomponents
 
   class DialogContent < Base
     class_variants(
-      base: <<~HEREDOC,
-        bg-background 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 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 outline-none
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.dialog&.dig(:content) ||
+        {
+          base: <<~HEREDOC,
+            bg-background 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 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 outline-none
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(aria_id: nil, **attributes)
@@ -131,26 +143,20 @@ module ShadcnPhlexcomponents
       div(style: { display: "none" }, **@attributes) do
         yield
 
-        button(
-          class: <<~HEREDOC,
-            ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground
-            absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2
-            focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none
-            [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
-          HEREDOC
-          data: {
-            action: "click->dialog#close",
-          },
-        ) do
-          icon("x", class: "size-4")
-          span(class: "sr-only") { "close" }
-        end
+        DialogCloseIcon()
       end
     end
   end
 
   class DialogHeader < Base
-    class_variants(base: "flex flex-col gap-2 text-center sm:text-left")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dialog&.dig(:header) ||
+        {
+          base: "flex flex-col gap-2 text-center sm:text-left",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -158,7 +164,14 @@ module ShadcnPhlexcomponents
   end
 
   class DialogTitle < Base
-    class_variants(base: "text-lg leading-none font-semibold")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dialog&.dig(:title) ||
+        {
+          base: "text-lg leading-none font-semibold",
+        }
+      ),
+    )
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
@@ -177,7 +190,14 @@ module ShadcnPhlexcomponents
   end
 
   class DialogDescription < Base
-    class_variants(base: "text-muted-foreground text-sm")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dialog&.dig(:description) ||
+        {
+          base: "text-muted-foreground text-sm",
+        }
+      ),
+    )
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
@@ -196,7 +216,14 @@ module ShadcnPhlexcomponents
   end
 
   class DialogFooter < Base
-    class_variants(base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dialog&.dig(:footer) ||
+        {
+          base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -233,4 +260,31 @@ module ShadcnPhlexcomponents
       end
     end
   end
+
+  class DialogCloseIcon < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dialog&.dig(:close_icon) ||
+        {
+          base: <<~HEREDOC,
+            ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground
+            absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2
+            focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none
+            [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+          HEREDOC
+        }
+      ),
+    )
+
+    def default_attributes
+      { data: { action: "click->dialog#close" } }
+    end
+
+    def view_template
+      button(**@attributes) do
+        icon("x", class: "size-4")
+        span(class: "sr-only") { "close" }
+      end
+    end
+  end
 end

data/lib/shadcn_phlexcomponents/components/dropdown_menu.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class DropdownMenu < Base
-    class_variants(base: "inline-flex max-w-fit")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dropdown_menu&.dig(:root) ||
+        {
+          base: "inline-flex max-w-fit",
+        }
+      ),
+    )
 
     def initialize(open: false, **attributes)
       @aria_id = "dropdown-menu-#{SecureRandom.hex(5)}"
@@ -104,14 +111,19 @@ module ShadcnPhlexcomponents
 
   class DropdownMenuContent < Base
     class_variants(
-      base: <<~HEREDOC,
-        bg-popover text-popover-foreground 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 z-50
-        max-h-(--radix-popper-available-height) min-w-[8rem] origin-(--radix-popper-transform-origin)
-        overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md pointer-events-auto outline-none
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.dropdown_menu&.dig(:content) ||
+        {
+          base: <<~HEREDOC,
+            bg-popover text-popover-foreground 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 z-50
+            max-h-(--radix-popper-available-height) min-w-[8rem] origin-(--radix-popper-transform-origin)
+            overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md pointer-events-auto outline-none
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(side: :bottom, align: :center, aria_id: nil, **attributes)
@@ -122,11 +134,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(
-        style: { display: "none" },
-        class: "fixed top-0 left-0 w-max z-50",
-        data: { dropdown_menu_target: "contentContainer" },
-      ) do
+      DropdownMenuContentContainer do
         div(**@attributes, &)
       end
     end
@@ -156,7 +164,14 @@ module ShadcnPhlexcomponents
   end
 
   class DropdownMenuLabel < Base
-    class_variants(base: "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dropdown_menu&.dig(:label) ||
+        {
+          base: "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -165,15 +180,20 @@ module ShadcnPhlexcomponents
 
   class DropdownMenuItem < Base
     class_variants(
-      base: <<~HEREDOC,
-        focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive
-        data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20
-        data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive
-        [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2
-        rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none
-        data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0
-        [&_svg:not([class*='size-'])]:size-4
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.dropdown_menu&.dig(:item) ||
+        {
+          base: <<~HEREDOC,
+            focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive
+            data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20
+            data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive
+            [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2
+            rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none
+            data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0
+            [&_svg:not([class*='size-'])]:size-4
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(as_child: false, variant: :default, disabled: false, **attributes)
@@ -255,7 +275,14 @@ module ShadcnPhlexcomponents
   end
 
   class DropdownMenuSeparator < Base
-    class_variants(base: "bg-border -mx-1 my-1 h-px")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dropdown_menu&.dig(:separator) ||
+        {
+          base: "bg-border -mx-1 my-1 h-px",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -280,4 +307,26 @@ module ShadcnPhlexcomponents
       div(**@attributes, &)
     end
   end
+
+  class DropdownMenuContentContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dropdown_menu&.dig(:content_container) ||
+        {
+          base: "fixed top-0 left-0 w-max z-50",
+        }
+      ),
+    )
+
+    def default_attributes
+      {
+        style: { display: "none" },
+        data: { dropdown_menu_target: "contentContainer" },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
 end