shadcn_phlexcomponents 0.1.17 → 0.1.19

data/lib/shadcn_phlexcomponents/components/command.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class Command < Base
-    class_variants(base: "inline-flex max-w-fit")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:root) ||
+        {
+          base: "inline-flex max-w-fit",
+        }
+      ),
+    )
 
     MODIFIER_KEYS = [
       :ctrl,
@@ -11,9 +18,9 @@ module ShadcnPhlexcomponents
     ]
 
     def initialize(
-      open: false, 
-      modifier_key: nil, 
-      shortcut_key: nil, 
+      open: false,
+      modifier_key: nil,
+      shortcut_key: nil,
       search_path: nil,
       search_error_text: "Something went wrong, please try again.",
       search_empty_text: "No results found",
@@ -44,8 +51,8 @@ module ShadcnPhlexcomponents
         search_error_text: @search_error_text,
         search_empty_text: @search_empty_text,
         search_placeholder_text: @search_placeholder_text,
-        aria_id: @aria_id, 
-        **attributes, 
+        aria_id: @aria_id,
+        **attributes,
         &
       )
     end
@@ -69,8 +76,8 @@ module ShadcnPhlexcomponents
           command_is_open_value: @open.to_s,
           modifier_key: @modifier_key,
           shortcut_key: @shortcut_key,
-          search_path: @search_path
-        }
+          search_path: @search_path,
+        },
       }
     end
 
@@ -111,7 +118,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           command_target: "trigger",
-          action: "click->command#open"
+          action: "click->command#open",
         },
       }
     end
@@ -137,19 +144,24 @@ module ShadcnPhlexcomponents
 
   class CommandContent < Base
     class_variants(
-      base: <<~HEREDOC,
-        bg-background bg-clip-padding dark:bg-neutral-900 dark:ring-neutral-800 data-[state=closed]:animate-out#{" "}
-        data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0
-        data-[state=open]:zoom-in-95 duration-200 fixed gap-4 grid left-[50%] max-w-[calc(100%-2rem)] p-2 pb-11 ring-4 ring-neutral-200/80
-        rounded-xl shadow-2xl sm:max-w-lg top-[50%] translate-x-[-50%] translate-y-[-50%] w-full z-50 pointer-events-auto outline-none
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:content) ||
+        {
+          base: <<~HEREDOC,
+            bg-background bg-clip-padding dark:bg-neutral-900 dark:ring-neutral-800 data-[state=closed]:animate-out#{" "}
+            data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0
+            data-[state=open]:zoom-in-95 duration-200 fixed gap-4 grid left-[50%] max-w-[calc(100%-2rem)] p-2 pb-11 ring-4 ring-neutral-200/80
+            rounded-xl shadow-2xl sm:max-w-lg top-[50%] translate-x-[-50%] translate-y-[-50%] w-full z-50 pointer-events-auto outline-none
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(
       search_error_text: nil,
       search_empty_text: nil,
       search_placeholder_text: nil,
-      aria_id: nil, 
+      aria_id: nil,
       **attributes
     )
       @search_error_text = search_error_text
@@ -187,7 +199,7 @@ module ShadcnPhlexcomponents
         template do
           CommandGroup do
             CommandLabel { "" }
-          end 
+          end
         end
 
         div(class: "text-popover-foreground flex h-full w-full flex-col overflow-hidden bg-transparent") do
@@ -202,33 +214,13 @@ module ShadcnPhlexcomponents
             for: "#{@aria_id}-search",
           ) { @search_placeholder_text }
 
-          div(class: "flex h-9 items-center gap-2 border px-3 bg-input/50 border-input rounded-md") do
+          CommandSearchInputContainer do
             icon("search", class: "size-4 shrink-0 opacity-50")
 
-            input(
-              class: "placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm
-              outline-hidden disabled:cursor-not-allowed disabled:opacity-50 h-9",
-              id: "#{@aria_id}-search",
-              placeholder: @search_placeholder_text,
-              type: :text,
-              autocomplete: "off",
-              autocorrect: "off",
-              role: "combobox",
-              spellcheck: "false",
-              aria: {
-                autocomplete: "list",
-                expanded: "false",
-                controls: "#{@aria_id}-list",
-                labelledby: "#{@aria_id}-search-label",
-              },
-              data: {
-                command_target: "searchInput",
-                action: "keydown->command#inputKeydown input->command#search",
-              },
-            )
+            CommandSearchInput(aria_id: @aria_id, search_placeholder_text: @search_placeholder_text)
           end
 
-          div(class: "mt-3 p-1 max-h-80 min-h-80 overflow-y-auto", data: { command_target: "listContainer"})  do
+          CommandListContainer do
             CommandText(target: "empty") { @search_empty_text }
             CommandText(target: "error") { @search_error_text }
             CommandText(target: "loading") do
@@ -248,13 +240,18 @@ module ShadcnPhlexcomponents
 
   class CommandItem < Base
     class_variants(
-      base: <<~HEREDOC,
-        data-[highlighted=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex
-        cursor-default items-center gap-2 px-3 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none
-        data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
-        data-[highlighted=true]:border-input data-[highlighted=true]:bg-input/50 h-9 rounded-md border border-transparent
-        font-medium
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:item) ||
+        {
+          base: <<~HEREDOC,
+            data-[highlighted=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex
+            cursor-default items-center gap-2 px-3 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none
+            data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+            data-[highlighted=true]:border-input data-[highlighted=true]:bg-input/50 h-9 rounded-md border border-transparent
+            font-medium
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(value: nil, aria_id: nil, **attributes)
@@ -289,11 +286,14 @@ module ShadcnPhlexcomponents
   end
 
   class CommandLabel < Base
-    class_variants(base: "text-muted-foreground text-xs px-3 pb-1 text-xs font-medium")
-
-    def initialize( **attributes)
-      super(**attributes)
-    end
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:label) ||
+        {
+          base: "text-muted-foreground text-xs px-3 pb-1 text-xs font-medium",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -301,7 +301,14 @@ module ShadcnPhlexcomponents
   end
 
   class CommandGroup < Base
-    class_variants(base: "scroll-mt-16 first:pt-0 pt-3")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:group) ||
+        {
+          base: "scroll-mt-16 first:pt-0 pt-3",
+        }
+      ),
+    )
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
@@ -326,8 +333,15 @@ module ShadcnPhlexcomponents
   end
 
   class CommandText < Base
-    class_variants(base: "py-6 text-center text-sm hidden")
-    
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:text) ||
+        {
+          base: "py-6 text-center text-sm hidden",
+        }
+      ),
+    )
+
     def initialize(target:, **attributes)
       @target = target
       super(**attributes)
@@ -347,10 +361,15 @@ module ShadcnPhlexcomponents
 
   class CommandKbd < Base
     class_variants(
-      base: <<~HEREDOC,
-        bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded
-        border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:kbd) ||
+        {
+          base: <<~HEREDOC,
+            bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded
+            border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3
+          HEREDOC
+        }
+      ),
     )
 
     def view_template(&)
@@ -360,10 +379,15 @@ module ShadcnPhlexcomponents
 
   class CommandFooter < Base
     class_variants(
-      base: <<~HEREDOC,
-        text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t#{" "}
-        border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:footer) ||
+        {
+          base: <<~HEREDOC,
+            text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t#{" "}
+            border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800
+          HEREDOC
+        }
+      ),
     )
 
     def view_template
@@ -378,4 +402,84 @@ module ShadcnPhlexcomponents
       end
     end
   end
+
+  class CommandSearchInputContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:search_input_container) ||
+        {
+          base: "flex h-9 items-center gap-2 border px-3 bg-input/50 border-input rounded-md",
+        }
+      ),
+    )
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class CommandSearchInput < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:search_input) ||
+        {
+          base: <<~HEREDOC,
+            placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm
+            outline-hidden disabled:cursor-not-allowed disabled:opacity-50 h-9
+          HEREDOC
+        }
+      ),
+    )
+
+    def initialize(aria_id: nil, search_placeholder_text: nil, **attributes)
+      @aria_id = aria_id
+      @search_placeholder_text = search_placeholder_text
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-search",
+        placeholder: @search_placeholder_text,
+        type: :text,
+        autocomplete: "off",
+        autocorrect: "off",
+        role: "combobox",
+        spellcheck: "false",
+        aria: {
+          autocomplete: "list",
+          expanded: "false",
+          controls: "#{@aria_id}-list",
+          labelledby: "#{@aria_id}-search-label",
+        },
+        data: {
+          command_target: "searchInput",
+          action: "keydown->command#inputKeydown input->command#search",
+        },
+      }
+    end
+
+    def view_template(&)
+      input(**@attributes)
+    end
+  end
+
+  class CommandListContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.command&.dig(:list_container) ||
+        {
+          base: "mt-3 p-1 max-h-80 min-h-80 overflow-y-auto",
+        }
+      ),
+    )
+
+    def default_attributes
+      { data: { command_target: "listContainer" } }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
 end

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,
@@ -20,8 +27,13 @@ module ShadcnPhlexcomponents
       @id = id
 
       if value
-       value = if value.is_a?(String)
-          DateTime.parse(value) rescue nil
+        value = if value.is_a?(String)
+          begin
+            # Use Time.zone.parse to ensure consistent timezone handling
+            Time.zone ? Time.zone.parse(value) : Time.parse(value)
+          rescue
+            nil
+          end
         else
           value
         end
@@ -66,44 +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
@@ -112,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
 
@@ -132,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
@@ -152,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
@@ -183,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 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
+      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
-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