shadcn_phlexcomponents 0.1.11 → 0.1.14

data/lib/shadcn_phlexcomponents/components/command.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Command < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     MODIFIER_KEYS = [
       :ctrl,
@@ -10,7 +10,16 @@ module ShadcnPhlexcomponents
       :shift,
     ]
 
-    def initialize(modifier_key: nil, shortcut_key: nil, search_path: nil, open: false, **attributes)
+    def initialize(
+      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",
+      search_placeholder_text: "Search...",
+      **attributes
+    )
       if modifier_key && !MODIFIER_KEYS.include?(modifier_key)
         raise ArgumentError, "Expected one of #{MODIFIER_KEYS} for \"modifier_key\", got #{modifier_key}"
       end
@@ -19,6 +28,9 @@ module ShadcnPhlexcomponents
       @modifier_key = modifier_key
       @shortcut_key = shortcut_key
       @search_path = search_path
+      @search_error_text = search_error_text
+      @search_empty_text = search_empty_text
+      @search_placeholder_text = search_placeholder_text
       @aria_id = "command-#{SecureRandom.hex(5)}"
       super(**attributes)
     end
@@ -28,7 +40,14 @@ module ShadcnPhlexcomponents
     end
 
     def content(**attributes, &)
-      CommandContent(aria_id: @aria_id, **attributes, &)
+      CommandContent(
+        search_error_text: @search_error_text,
+        search_empty_text: @search_empty_text,
+        search_placeholder_text: @search_placeholder_text,
+        aria_id: @aria_id, 
+        **attributes, 
+        &
+      )
     end
 
     def item(**attributes, &)
@@ -43,24 +62,24 @@ module ShadcnPhlexcomponents
       CommandGroup(aria_id: @aria_id, **attributes, &)
     end
 
-    def empty(**attributes, &)
-      CommandEmpty(**attributes, &)
-    end
-
     def default_attributes
       {
         data: {
           controller: "command",
+          command_is_open_value: @open.to_s,
           modifier_key: @modifier_key,
           shortcut_key: @shortcut_key,
-          search_path: @search_path,
-          command_is_open_value: @open.to_s,
-        },
+          search_path: @search_path
+        }
       }
     end
 
     def view_template(&)
-      div(**@attributes, &)
+      div(**@attributes) do
+        overlay("command")
+
+        yield
+      end
     end
   end
 
@@ -91,9 +110,8 @@ module ShadcnPhlexcomponents
           controls: "#{@aria_id}-content",
         },
         data: {
-          action: "click->command#open",
           command_target: "trigger",
-          as_child: @as_child.to_s,
+          action: "click->command#open"
         },
       }
     end
@@ -123,18 +141,27 @@ module ShadcnPhlexcomponents
         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
+        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_placeholder: "Search...", aria_id: nil, **attributes)
-      @search_placeholder = search_placeholder
+    def initialize(
+      search_error_text: nil,
+      search_empty_text: nil,
+      search_placeholder_text: nil,
+      aria_id: nil, 
+      **attributes
+    )
+      @search_error_text = search_error_text
+      @search_empty_text = search_empty_text
+      @search_placeholder_text = search_placeholder_text
       @aria_id = aria_id
       super(**attributes)
     end
 
     def default_attributes
       {
+        style: { display: "none" },
         id: "#{@aria_id}-content",
         tabindex: -1,
         role: "dialog",
@@ -143,26 +170,29 @@ module ShadcnPhlexcomponents
           labelledby: "#{@aria_id}-title",
         },
         data: {
-          command_target: "content",
           state: "closed",
+          command_target: "content",
           action: <<~HEREDOC,
-            command:click:outside->command#close
+            command:click:outside->command#clickOutside
             keydown.up->command#highlightItem:prevent
             keydown.down->command#highlightItem:prevent
             keydown.enter->command#select
           HEREDOC
-
         },
       }
     end
 
     def view_template(&)
-      @class = @attributes.delete(:class)
+      div(**@attributes) do
+        template do
+          CommandGroup do
+            CommandLabel { "" }
+          end 
+        end
 
-      div(class: "#{@class} hidden", **@attributes) do
         div(class: "text-popover-foreground flex h-full w-full flex-col overflow-hidden bg-transparent") do
           div(class: "sr-only") do
-            h2(id: "#{@aria_id}-title") { @search_placeholder }
+            h2(id: "#{@aria_id}-title") { @search_placeholder_text }
             p(id: "#{@aria_id}-description") { "Search for a command to run..." }
           end
 
@@ -170,7 +200,7 @@ module ShadcnPhlexcomponents
             class: "sr-only",
             id: "#{@aria_id}-search-label",
             for: "#{@aria_id}-search",
-          ) { @search_placeholder }
+          ) { @search_placeholder_text }
 
           div(class: "flex h-9 items-center gap-2 border px-3 bg-input/50 border-input rounded-md") do
             icon("search", class: "size-4 shrink-0 opacity-50")
@@ -179,7 +209,7 @@ module ShadcnPhlexcomponents
               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,
+              placeholder: @search_placeholder_text,
               type: :text,
               autocomplete: "off",
               autocorrect: "off",
@@ -193,13 +223,21 @@ module ShadcnPhlexcomponents
               },
               data: {
                 command_target: "searchInput",
-                action: "input->command#search",
+                action: "keydown->command#inputKeydown input->command#search",
               },
             )
           end
 
-          div(class: "p-1 max-h-80 min-h-80 overflow-y-auto", id: "#{@aria_id}-list", data: { command_target: "list" }) do
-            div(data: { command_target: "results" }, &)
+          div(class: "mt-3 p-1 max-h-80 min-h-80 overflow-y-auto", data: { command_target: "listContainer"})  do
+            CommandText(target: "empty") { @search_empty_text }
+            CommandText(target: "error") { @search_error_text }
+            CommandText(target: "loading") do
+              div(class: "flex justify-center", aria: { label: "Loading" }) do
+                icon("loader-circle", class: "animate-spin")
+              end
+            end
+
+            div(id: "#{@aria_id}-list", data: { command_target: "list" }, &)
           end
 
           CommandFooter()
@@ -251,30 +289,21 @@ module ShadcnPhlexcomponents
   end
 
   class CommandLabel < Base
-    class_variants(base: "text-muted-foreground text-xs p-3 pb-1 text-xs font-medium")
+    class_variants(base: "text-muted-foreground text-xs px-3 pb-1 text-xs font-medium")
 
-    def initialize(aria_id: nil, **attributes)
-      @aria_id = aria_id
+    def initialize( **attributes)
       super(**attributes)
     end
 
     def view_template(&)
       div(**@attributes, &)
     end
-
-    def default_attributes
-      {
-        data: {
-          command_target: "label",
-        },
-      }
-    end
   end
 
   class CommandGroup < Base
-    class_variants(base: "scroll-mt-16")
+    class_variants(base: "scroll-mt-16 first:pt-0 pt-3")
 
-    def initialize(aria_id:, **attributes)
+    def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
       super(**attributes)
     end
@@ -296,22 +325,23 @@ module ShadcnPhlexcomponents
     end
   end
 
-  class CommandEmpty < Base
+  class CommandText < Base
     class_variants(base: "py-6 text-center text-sm hidden")
+    
+    def initialize(target:, **attributes)
+      @target = target
+      super(**attributes)
+    end
 
     def default_attributes
       {
         role: "presentation",
-        data: { command_target: "empty" },
+        data: { command_target: @target },
       }
     end
 
     def view_template(&)
-      if block_given?
-        div(**@attributes, &)
-      else
-        div(**@attributes) { "No results found" }
-      end
+      div(**@attributes, &)
     end
   end
 

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