shadcn_phlexcomponents 0.1.17 → 0.1.19

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,
@@ -27,11 +34,16 @@ module ShadcnPhlexcomponents
       if value
         value = value.map do |v|
           if v.is_a?(String)
-            DateTime.parse(v) rescue nil
+            begin
+              # Use Time.zone.parse to ensure consistent timezone handling
+              Time.zone ? Time.zone.parse(v) : Time.parse(v)
+            rescue
+              nil
+            end
           else
             v
           end
-        end 
+        end
       end
 
       @name = name ? name[0] : nil
@@ -64,7 +76,7 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(**@attributes) do
-        overlay('date-range-picker')
+        overlay("date-range-picker")
 
         input(
           type: :hidden,
@@ -83,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
@@ -42,15 +49,15 @@ 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) do
         overlay("dialog")
-        
+
         yield
       end
     end
@@ -71,10 +78,10 @@ module ShadcnPhlexcomponents
           expanded: "false",
           controls: "#{@aria_id}-content",
         },
-        data: { 
+        data: {
           as_child: @as_child.to_s,
           dialog_target: "trigger",
-          action: "click->dialog#open"
+          action: "click->dialog#open",
         },
       }
     end
@@ -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)
@@ -122,7 +134,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          dialog_target: "content"
+          dialog_target: "content",
         },
       }
     end
@@ -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

data/lib/shadcn_phlexcomponents/components/dropdown_menu_sub.rb

@@ -31,10 +31,15 @@ module ShadcnPhlexcomponents
 
   class DropdownMenuSubTrigger < Base
     class_variants(
-      base: <<~HEREDOC,
-        focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground
-        flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.dropdown_menu_sub&.dig(:trigger) ||
+        {
+          base: <<~HEREDOC,
+            focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground
+            flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(aria_id: nil, **attributes)
@@ -42,14 +47,6 @@ module ShadcnPhlexcomponents
       super(**attributes)
     end
 
-    def view_template(&)
-      div(**@attributes) do
-        yield
-
-        icon("chevron-right", class: "ml-auto size-4")
-      end
-    end
-
     def default_attributes
       {
         id: "#{@aria_id}-trigger",
@@ -80,17 +77,30 @@ module ShadcnPhlexcomponents
         },
       }
     end
+
+    def view_template(&)
+      div(**@attributes) do
+        yield
+
+        icon("chevron-right", class: "ml-auto size-4")
+      end
+    end
   end
 
   class DropdownMenuSubContent < 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 min-w-[8rem]
-        origin-(--radix-popper-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.dropdown_menu_sub&.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 min-w-[8rem]
+            origin-(--radix-popper-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(aria_id: nil, side: :right, align: :start, **attributes)
@@ -124,13 +134,31 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(
-        style: { display: "none" },
-        class: "fixed top-0 left-0 w-max z-50",
-        data: { dropdown_menu_sub_target: "contentContainer" },
-      ) do
+      DropdownMenuSubContentContainer do
         div(**@attributes, &)
       end
     end
   end
+
+  class DropdownMenuSubContentContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.dropdown_menu_sub&.dig(:content_container) ||
+        {
+          base: "fixed top-0 left-0 w-max z-50",
+        }
+      ),
+    )
+
+    def default_attributes
+      {
+        style: { display: "none" },
+        data: { dropdown_menu_sub_target: "contentContainer" },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
 end

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

@@ -55,7 +55,7 @@ module ShadcnPhlexcomponents
       @id ||= field_id(@object_name, @method)
       @name ||= field_name(@object_name, @method)
 
-      div(class: "space-y-2") do
+      FormField do
         div(class: "flex items-top space-x-2") do
           div(class: "grid gap-1.5 relative", data: label_and_hint_container_attributes) do
             @attributes[:class] = "#{@attributes[:class]} -mt-[1.5px] absolute top-0 left-0"

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

@@ -81,7 +81,7 @@ module ShadcnPhlexcomponents
       @id ||= field_id(@object_name, @method)
       @name ||= field_name(@object_name, @method)
 
-      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+      FormField(data: label_and_hint_container_attributes) do
         render_label(&)
 
         CheckboxGroup(

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

@@ -49,7 +49,7 @@ module ShadcnPhlexcomponents
       @id ||= field_id(@object_name, @method)
       @name ||= field_name(@object_name, @method)
 
-      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+      FormField(data: label_and_hint_container_attributes) do
         render_label(&)
 
         Combobox(id: @id, name: @name, value: @value, aria: aria_attributes, **@attributes) do |c|

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

@@ -35,7 +35,7 @@ module ShadcnPhlexcomponents
       @id ||= field_id(@object_name, @method)
       @name ||= field_name(@object_name, @method)
 
-      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+      FormField(data: label_and_hint_container_attributes) do
         render_label(&)
         DatePicker(id: @id, name: @name, value: @value, aria: aria_attributes, **@attributes)
         render_hint(&)

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

@@ -65,7 +65,7 @@ module ShadcnPhlexcomponents
           field_name(@object_name, @end_method),
         ]
 
-      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+      FormField(data: label_and_hint_container_attributes) do
         render_label(&)
         DateRangePicker(
           id: @id,

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

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class FormError < Base
-    class_variants(base: "text-destructive text-sm")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.form&.dig(:error) ||
+        {
+          base: "text-destructive text-sm",
+        }
+      ),
+    )
 
     def initialize(message, aria_id: nil, **attributes)
       @message = message

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

@@ -25,12 +25,13 @@ module ShadcnPhlexcomponents
 
     def hint(text = nil, **attributes, &)
       @yield_hint = true
+      @hint = true
       attrs = hint_attributes(**attributes)
 
       if text
-        FormHint(text, **attrs)
+        FormHint(text, aria_id: @aria_id, **attrs)
       else
-        FormHint(**attrs, &)
+        FormHint(aria_id: @aria_id, **attrs, &)
       end
     end
 

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

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class FormHint < Base
-    class_variants(base: "text-muted-foreground text-sm")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.form&.dig(:hint) ||
+        {
+          base: "text-muted-foreground text-sm",
+        }
+      ),
+    )
 
     def initialize(message = nil, aria_id: nil, **attributes)
       @message = message

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

@@ -37,7 +37,7 @@ module ShadcnPhlexcomponents
       @id ||= field_id(@object_name, @method)
       @name ||= field_name(@object_name, @method)
 
-      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+      FormField(data: label_and_hint_container_attributes) do
         render_label(&)
         Input(type: @type, id: @id, name: @name, value: @value, aria: aria_attributes, **@attributes)
         render_hint(&)