lightning_ui_kit 0.2.3 → 0.2.5

data/app/components/lightning_ui_kit/combobox_component.html.erb

@@ -0,0 +1,137 @@
+<%= tag.div(data:, class: classes) do %>
+  <% if @label %>
+    <%= tag.label(
+      @label,
+      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: label_data
+    ) %>
+  <% end %>
+
+  <% if @description %>
+    <%= tag.p(
+      @description,
+      class: "lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: description_data
+    ) %>
+  <% end %>
+
+  <div data-slot="control" class="lui:relative lui:w-full">
+    <% if @multiple %>
+      <%# Multiple selection: tags + input in a styled container %>
+      <div
+        class="lui:relative lui:flex lui:flex-wrap lui:items-center lui:gap-1.5 lui:w-full lui:min-h-[42px] lui:sm:min-h-[38px] lui:rounded-lg lui:border lui:border-zinc-950/10 lui:data-[hover]:border-zinc-950/20 lui:bg-white lui:shadow-sm lui:px-2 lui:py-1.5 lui:focus-within:ring-2 lui:focus-within:ring-blue-500 lui:focus-within:ring-offset-0 <%= 'lui:opacity-50' if @disabled %> <%= 'lui:border-red-500' if has_errors? %>"
+        data-lui-combobox-target="inputWrapper selectedTags"
+      >
+        <input
+          type="text"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          autocomplete="off"
+          class="lui:flex-1 lui:min-w-[120px] lui:border-0 lui:bg-transparent lui:p-0 lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:focus:outline-none lui:focus:ring-0"
+          placeholder="<%= @placeholder %>"
+          data-lui-combobox-target="input"
+          data-action="input->lui-combobox#onInput focus->lui-combobox#onFocus keydown->lui-combobox#onKeydown"
+          <%= "disabled" if @disabled %>
+          <%= "data-disabled=true" if @disabled %>
+          <%= "data-invalid=true" if has_errors? %>
+        />
+        <span class="lui:pointer-events-none lui:flex lui:items-center">
+          <svg class="lui:size-5 lui:stroke-zinc-500 lui:sm:size-4" viewBox="0 0 16 16" aria-hidden="true" fill="none">
+            <path d="M5.75 10.75L8 13L10.25 10.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M10.25 5.25L8 3L5.75 5.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+          </svg>
+        </span>
+      </div>
+    <% else %>
+      <%# Single selection: standard input styling %>
+      <span class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[7px] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
+        <input
+          type="text"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          autocomplete="off"
+          class="<%= input_classes %>"
+          placeholder="<%= @placeholder %>"
+          data-lui-combobox-target="input"
+          data-action="input->lui-combobox#onInput focus->lui-combobox#onFocus keydown->lui-combobox#onKeydown"
+          <%= "disabled" if @disabled %>
+          <%= "data-disabled=true" if @disabled %>
+          <%= "data-invalid=true" if has_errors? %>
+        />
+        <span class="lui:pointer-events-none lui:absolute lui:inset-y-0 lui:right-0 lui:flex lui:items-center lui:pr-2">
+          <svg class="lui:size-5 lui:stroke-zinc-500 lui:sm:size-4" viewBox="0 0 16 16" aria-hidden="true" fill="none">
+            <path d="M5.75 10.75L8 13L10.25 10.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M10.25 5.25L8 3L5.75 5.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+          </svg>
+        </span>
+      </span>
+    <% end %>
+
+    <%# Dropdown listbox %>
+    <div
+      data-lui-combobox-target="listbox"
+      role="listbox"
+      aria-label="<%= @label || 'Options' %>"
+      class="lui:hidden lui:absolute lui:z-50 lui:mt-1 lui:w-full lui:max-h-60 lui:overflow-auto lui:rounded-lg lui:bg-white lui:shadow-lg lui:ring-1 lui:ring-zinc-950/10"
+    >
+      <template data-lui-combobox-target="optionTemplate">
+        <div
+          role="option"
+          data-lui-combobox-target="option"
+          class="lui:relative lui:cursor-pointer lui:select-none lui:py-2 lui:px-3 lui:text-zinc-900 lui:hover:bg-zinc-100 lui:data-[selected]:bg-blue-50 lui:data-[highlighted]:bg-zinc-100 lui:data-[disabled]:opacity-50 lui:data-[disabled]:cursor-not-allowed"
+          data-action="click->lui-combobox#selectOption mouseenter->lui-combobox#highlightOption"
+        >
+          <span data-label class="lui:block lui:truncate"></span>
+          <span data-checkmark class="lui:hidden lui:absolute lui:inset-y-0 lui:right-0 lui:flex lui:items-center lui:pr-3 lui:text-blue-600">
+            <svg class="lui:size-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+            </svg>
+          </span>
+        </div>
+      </template>
+
+      <div data-lui-combobox-target="optionsContainer"></div>
+
+      <div data-lui-combobox-target="loading" class="lui:hidden lui:py-2 lui:px-3 lui:text-zinc-500 lui:text-sm">
+        Loading...
+      </div>
+
+      <div data-lui-combobox-target="noResults" class="lui:hidden lui:py-2 lui:px-3 lui:text-zinc-500 lui:text-sm">
+        No results found
+      </div>
+
+      <% if @allow_custom %>
+        <div
+          data-lui-combobox-target="createOption"
+          class="lui:hidden lui:cursor-pointer lui:py-2 lui:px-3 lui:text-blue-600 lui:hover:bg-blue-50 lui:border-t lui:border-zinc-100 lui:flex lui:items-center lui:gap-1.5"
+          data-action="click->lui-combobox#createCustomOption"
+        >
+          <%= heroicon "plus", variant: :solid, options: { class: "lui:size-4" } %>
+          Create "<span data-lui-combobox-target="createOptionText"></span>"
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <% if @multiple %>
+    <div data-lui-combobox-target="hiddenFields" data-name="<%= hidden_field_name %>"></div>
+  <% else %>
+    <% if @form %>
+      <%= @form.hidden_field(@name, data: { "lui-combobox-target" => "hiddenField" }, value: @selected) %>
+    <% else %>
+      <%= hidden_field_tag(@name, @selected, data: { "lui-combobox-target" => "hiddenField" }) %>
+    <% end %>
+  <% end %>
+
+  <% if has_errors? %>
+    <%= tag.p(
+      error_messages,
+      class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: error_data
+    ) %>
+  <% end %>
+<% end %>

data/app/components/lightning_ui_kit/combobox_component.rb

@@ -0,0 +1,205 @@
+# frozen_string_literal: true
+
+class LightningUiKit::ComboboxComponent < LightningUiKit::BaseComponent
+  include LightningUiKit::Errors
+
+  def initialize(
+    name: nil,
+    form: nil,
+    label: nil,
+    description: nil,
+    placeholder: nil,
+    disabled: false,
+    error: nil,
+    multiple: false,
+    allow_custom: false,
+    options: [],
+    selected: nil,
+    url: nil,
+    min_chars: 0,
+    debounce: 300,
+    association: nil,
+    foreign_key: nil,
+    nested_model: nil,
+    collection: nil,
+    label_method: :to_s,
+    value_method: :id,
+    **options_hash
+  )
+    @form = form
+    @label = label
+    @description = description
+    @placeholder = placeholder
+    @disabled = disabled
+    @error = error
+    @allow_custom = allow_custom
+    @url = url
+    @min_chars = min_chars
+    @debounce = debounce
+    @options_hash = options_hash
+
+    @association = association
+    @foreign_key = foreign_key
+    @nested_model = nested_model
+    @collection = collection
+    @label_method = label_method
+    @value_method = value_method
+
+    if association_mode?
+      @name = nested_attributes_name
+      @multiple = true
+      @options = derive_options_from_collection if @collection
+      @selected = derive_selected_from_association if @form&.object
+    else
+      @name = name
+      @multiple = multiple
+      @options = options
+      @selected = selected
+    end
+  end
+
+  def classes
+    merge_classes([
+      "lui:[&>[data-slot=label]+[data-slot=control]]:mt-3",
+      "lui:[&>[data-slot=label]+[data-slot=description]]:mt-1",
+      "lui:[&>[data-slot=description]+[data-slot=control]]:mt-3",
+      "lui:[&>[data-slot=control]+[data-slot=description]]:mt-3",
+      "lui:[&>[data-slot=control]+[data-slot=error]]:mt-3",
+      "lui:*:data-[slot=label]:font-medium",
+      @options_hash[:class]
+    ].compact.join(" "))
+  end
+
+  def data
+    default_data = {
+      controller: "lui-combobox",
+      action: "click@window->lui-combobox#clickOutside"
+    }
+    default_data.merge(@options_hash[:data] || {}).merge(combobox_values)
+  end
+
+  def combobox_values
+    base = {
+      "lui-combobox-multiple-value" => @multiple,
+      "lui-combobox-allow-custom-value" => @allow_custom,
+      "lui-combobox-url-value" => @url,
+      "lui-combobox-min-chars-value" => @min_chars,
+      "lui-combobox-debounce-value" => @debounce,
+      "lui-combobox-options-value" => options_json,
+      "lui-combobox-selected-value" => selected_json
+    }
+
+    if association_mode?
+      base["lui-combobox-foreign-key-value"] = @foreign_key.to_s
+      base["lui-combobox-nested-model-value"] = @nested_model.to_s if @nested_model
+    end
+
+    base.compact
+  end
+
+  def association_mode?
+    @association.present? && @foreign_key.present?
+  end
+
+  def input_data
+    {
+      "lui-combobox-target" => "input",
+      :action => "input->lui-combobox#onInput focus->lui-combobox#onFocus keydown->lui-combobox#onKeydown"
+    }.tap do |d|
+      d[:invalid] = "true" if has_errors?
+    end
+  end
+
+  def input_classes
+    merge_classes([
+      "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg",
+      "lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)]",
+      "lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)]",
+      "lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6",
+      "lui:border lui:border-zinc-950/10 lui:data-[hover]:border-zinc-950/20",
+      "lui:bg-transparent lui:focus:outline-hidden",
+      "lui:data-invalid:border-red-500 lui:data-invalid:data-[hover]:border-red-500/60",
+      "lui:data-disabled:border-zinc-950/20",
+      "lui:pr-10"
+    ].join(" "))
+  end
+
+  def label_data
+    {slot: "label"}.merge(@options_hash[:label_data] || {}).tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def description_data
+    {slot: "description"}.merge(@options_hash[:description_data] || {}).tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def error_data
+    {slot: "error"}.merge(@options_hash[:error_data] || {}).tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def hidden_field_name
+    base_name = scoped_field_name
+
+    if association_mode?
+      base_name
+    elsif @multiple
+      "#{base_name}[]"
+    else
+      base_name
+    end
+  end
+
+  def scoped_field_name
+    if @form
+      "#{@form.object_name}[#{@name}]"
+    else
+      @name.to_s
+    end
+  end
+
+  private
+
+  def nested_attributes_name
+    "#{@association}_attributes"
+  end
+
+  def derive_options_from_collection
+    return [] unless @collection
+
+    @collection.map do |item|
+      {value: item.public_send(@value_method), label: item.public_send(@label_method)}
+    end
+  end
+
+  def derive_selected_from_association
+    return [] unless @form&.object&.respond_to?(@association)
+
+    @form.object.public_send(@association).map do |join_record|
+      {
+        join_id: join_record.id,
+        value: join_record.public_send(@foreign_key)
+      }
+    end
+  end
+
+  def options_json
+    @options.to_json
+  end
+
+  def selected_json
+    return [].to_json if @selected.nil?
+
+    if association_mode?
+      @selected.to_json
+    elsif @selected.is_a?(Array)
+      @selected.to_json
+    else
+      [@selected].to_json
+    end
+  end
+end

data/app/components/lightning_ui_kit/dropdown_component.html.erb

@@ -27,7 +27,7 @@
     data-transition-leave-to="opacity-0 scale-95"
     >
     <% items.each do |item| %>
-      <div class="lui:px-4 lui:py-2 lui:text-sm/5 lui:font-medium lui:text-zinc-950 lui:hover:bg-zinc-950/5">
+      <div class="lui:px-4 lui:py-2 lui:text-sm/5 lui:font-medium lui:text-zinc-950 lui:hover:bg-zinc-950/5 lui:rounded-md">
         <%= item %>
       </div>
     <% end %>

data/app/components/lightning_ui_kit/dropdown_component.rb

@@ -11,7 +11,7 @@ class LightningUiKit::DropdownComponent < LightningUiKit::BaseComponent
   end
 
   def menu_classes
-    classes = %w[lui:hidden lui:transition lui:transform lui:p-1 lui:origin-top-left lui:absolute lui:left-0 lui:w-56 lui:rounded-md lui:shadow-lg lui:bg-white lui:ring-1 lui:ring-zinc-950/10 lui:focus:outline-none]
+    classes = %w[lui:hidden lui:transition lui:transform lui:p-1 lui:origin-top-left lui:absolute lui:left-0 lui:rounded-md lui:shadow-lg lui:bg-white lui:ring-1 lui:ring-zinc-950/10 lui:focus:outline-none lui:z-50]
     case @position.to_s
     when "top"
       classes << "lui:mb-2 lui:top-auto lui:bottom-full"

data/app/components/lightning_ui_kit/dropzone_component.html.erb

@@ -3,36 +3,30 @@
     <div class="lui:w-full lui:grid lui:gap-1 lui:my-4" id="#NEW_FILE" data-lui-dropzone-target="file">
       <div class="lui:flex lui:items-center lui:justify-between lui:gap-2">
         <div class="lui:flex lui:items-center lui:gap-2">
-          <%= heroicon("document", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-indigo-500"}) %>
+          <%= heroicon("document", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-blue-500"}) %>
           <div class="lui:grid lui:gap-1">
-            <h4 class="lui:text-gray-900 lui:text-sm lui:font-normal lui:leading-snug" data-lui-dropzone-target="filename"></h4>
-            <h5 class="lui:text-gray-400 lui:text-xs lui:font-normal lui:leading-[18px]" data-lui-dropzone-target="status"></h5>
+            <h4 class="lui:text-zinc-950 lui:text-sm lui:font-normal lui:leading-snug" data-lui-dropzone-target="filename"></h4>
+            <h5 class="lui:text-zinc-500 lui:text-xs lui:font-normal lui:leading-[18px]" data-lui-dropzone-target="status"></h5>
           </div>
         </div>
         <%= heroicon(
           "x-circle",
           variant: :outline,
           options: {
-            class: "lui:w-6 lui:h-6 lui:text-zinc-300 lui:hover:text-indigo-500 lui:hover:cursor-pointer",
+            class: "lui:w-6 lui:h-6 lui:text-zinc-500 lui:hover:text-blue-500 lui:hover:cursor-pointer",
             data_action: "click->lui-dropzone#removeFile"
           }) %>
       </div>
       <div class="lui:relative lui:flex lui:items-center lui:gap-2.5 lui:py-1.5">
-        <div class="lui:relative lui:w-full lui:h-2.5 lui:overflow-hidden lui:rounded-3xl lui:bg-gray-100">
-          <div data-lui-dropzone-target="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%" class="lui:flex lui:h-full lui:items-center lui:justify-center lui:bg-indigo-600 lui:text-white lui:rounded-3xl"></div>
+        <div class="lui:relative lui:w-full lui:h-2.5 lui:overflow-hidden lui:rounded-3xl lui:bg-zinc-100">
+          <div data-lui-dropzone-target="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%" class="lui:flex lui:h-full lui:items-center lui:justify-center lui:bg-blue-600 lui:text-white lui:rounded-3xl"></div>
         </div>
-        <span data-lui-dropzone-target="percentage-progress" class="lui:ml-2 lui:bg-white lui:rounded-full lui:text-gray-800 lui:text-xs lui:font-medium lui:flex lui:justify-center lui:items-center">0%</span>
+        <span data-lui-dropzone-target="percentage-progress" class="lui:ml-2 lui:bg-white lui:rounded-full lui:text-zinc-950 lui:text-xs lui:font-medium lui:flex lui:justify-center lui:items-center">0%</span>
       </div>
     </div>
   </template>
 
-  <% if @label %>
-    <%= tag.label(
-      @label,
-      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
-      data: label_data
-    ) %>
-  <% end %>
+  <%= render_label %>
   <% if @description %>
     <%= tag.p(
       @description,
@@ -41,34 +35,15 @@
     ) %>
   <% end %>
 
-  <div class="lui:py-9 lui:bg-zinc-50 lui:rounded-2xl lui:border lui:border-gray-300 lui:border-dotted lui:hover:cursor-pointer lui:hover:bg-zinc-100" data-action="click->lui-dropzone#selectFiles">
+  <div class="lui:py-9 lui:bg-zinc-50 lui:rounded-2xl lui:border lui:border-zinc-950/10 lui:border-dotted lui:hover:cursor-pointer lui:hover:bg-zinc-100" data-action="click->lui-dropzone#selectFiles">
     <div class="lui:mb-3 lui:flex lui:items-center lui:justify-center">
-      <%= heroicon("cloud-arrow-up", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-indigo-500"}) %>
+      <%= heroicon("cloud-arrow-up", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-blue-500"}) %>
     </div>
-    <p class="lui:text-center lui:text-gray-900 lui:text-base lui:font-medium lui:leading-snug"><%= t("dropzone.default_message") %></p>
+    <p class="lui:text-center lui:text-zinc-950 lui:text-base lui:font-medium lui:leading-snug"><%= t("dropzone.default_message") %></p>
     <% if @placeholder %>
-      <p class="lui:text-center lui:text-gray-400 lui:text-base lui:sm:text-sm/6 lui:font-normal lui:leading-4 lui:mt-1.5"><%= @placeholder %></p>
-    <% end %>
-    <% if @form %>
-      <%= @form.file_field(
-        @name,
-        multiple: @multiple,
-        class: "lui:hidden",
-        direct_upload: true,
-        data: input_data,
-        accept: @accept
-      ) %>
-    <% else %>
-      <%= file_field_tag(
-        @name,
-        value: @value,
-        multiple: @multiple,
-        class: "lui:hidden",
-        direct_upload: true,
-        data: input_data,
-        accept: @accept
-      ) %>
+      <p class="lui:text-center lui:text-zinc-500 lui:text-base lui:sm:text-sm/6 lui:font-normal lui:leading-4 lui:mt-1.5"><%= @placeholder %></p>
     <% end %>
+    <%= render_file_input %>
   </div>
 
   <% if has_errors? %>

data/app/components/lightning_ui_kit/dropzone_component.rb

@@ -26,36 +26,63 @@ class LightningUiKit::DropzoneComponent < LightningUiKit::BaseComponent
   end
 
   def input_data
-    (@options[:input_data] || {}).tap do |data|
+    (@options[:input_data] || {}).dup.tap do |data|
       data[:lui_dropzone_target] = "input"
       data[:action] = "dragover->lui-dropzone#activate drop->lui-dropzone#uploadFiles change->lui-dropzone#uploadFiles"
-      if has_errors?
-        data[:invalid] = "true"
-      end
+      data[:invalid] = "true" if has_errors?
     end
   end
 
   def label_data
-    {slot: "label"}.merge(@options[:label_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "label"}.merge(@options[:label_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
     end
   end
 
   def description_data
-    {slot: "description"}.merge(@options[:description_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "description"}.merge(@options[:description_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
     end
   end
 
   def error_data
-    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "error"}.merge(@options[:error_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def label_html_options
+    {
+      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: label_data
+    }
+  end
+
+  def render_label
+    return unless @label
+
+    if @form
+      @form.label(@name, @label, **label_html_options)
+    else
+      helpers.label_tag(@name, @label, **label_html_options)
+    end
+  end
+
+  def file_input_html_options
+    {
+      multiple: @multiple,
+      class: "lui:hidden",
+      direct_upload: true,
+      data: input_data,
+      accept: @accept
+    }
+  end
+
+  def render_file_input
+    if @form
+      @form.file_field(@name, **file_input_html_options)
+    else
+      helpers.file_field_tag(@name, value: @value, **file_input_html_options)
     end
   end
 end

data/app/components/lightning_ui_kit/file_input_component.html.erb

@@ -1,12 +1,5 @@
-<%= tag.div(class: classes, data:) do %>
-  <% if @label %>
-    <%= label_tag(
-      @name,
-      @label.is_a?(String) ? @label : nil,
-      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
-      data: label_data
-    ) %>
-  <% end %>
+<%= tag.div(class: classes, data: data) do %>
+  <%= render_label %>
   <% if @description %>
     <%= tag.p(
       @description,
@@ -14,31 +7,8 @@
       data: description_data
     ) %>
   <% end %>
-  <span data-slot="control" class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[calc(var(--radius-lg)-1px)] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
-    <% if @form %>
-      <%= @form.file_field(
-        @name,
-        data: input_data,
-        class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:lui:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:data-disabled:hover:none lui:data-disabled:cursor-not-allowed lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:border-zinc-950/20",
-        disabled: @disabled,
-        autofocus: @autofocus,
-        multiple: @multiple,
-        accept: @accept,
-        placeholder: @placeholder
-      ) %>
-    <% else %>
-      <%= file_field_tag(
-        @name,
-        value: @value,
-        data: input_data,
-        class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:hover:none lui:data-disabled:cursor-not-allowed lui:data-disabled:border-zinc-950/20 lui:data-disabled:file:cursor-not-allowed lui:data-disabled:file:cursor-not-allowed lui:file:cursor-pointer lui:cursor-pointer lui:file:border-0 lui:file:px-[calc(--spacing(3.5)-1px)] lui:file:py-[calc(--spacing(2.5)-1px)] lui:file:sm:px-[calc(--spacing(3)-1px)] lui:file:sm:py-[calc(--spacing(1.5)-1px)] lui:file:mr-4 lui:file:bg-zinc-100",
-        disabled: @disabled,
-        autofocus: @autofocus,
-        multiple: @multiple,
-        accept: @accept,
-        placeholder: @placeholder
-      ) %>
-    <% end %>
+  <span data-slot="control" class="<%= control_classes %>">
+    <%= render_file_input %>
   </span>
   <% if has_errors? %>
     <%= tag.p(

data/app/components/lightning_ui_kit/file_input_component.rb

@@ -22,41 +22,75 @@ class LightningUiKit::FileInputComponent < LightningUiKit::BaseComponent
   end
 
   def data
-    @options[:data] || {}
+    {controller: "lui-field"}.merge(@options[:data] || {})
   end
 
   def input_data
-    (@options[:input_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
-      if has_errors?
-        data[:invalid] = "true"
-      end
+    {lui_field_target: "field"}.merge(@options[:input_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
+      data[:invalid] = "true" if has_errors?
     end
   end
 
   def label_data
-    {slot: "label"}.merge(@options[:label_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "label"}.merge(@options[:label_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
     end
   end
 
   def description_data
-    {slot: "description"}.merge(@options[:description_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "description"}.merge(@options[:description_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
     end
   end
 
   def error_data
-    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "error"}.merge(@options[:error_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
     end
   end
+
+  def label_html_options
+    {
+      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: label_data
+    }
+  end
+
+  def render_label
+    return unless @label
+
+    if @form
+      @form.label(@name, @label, **label_html_options)
+    else
+      helpers.label_tag(@name, @label, **label_html_options)
+    end
+  end
+
+  def file_input_classes
+    "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:data-[hover]:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:data-[hover]:border-red-500 lui:data-disabled:cursor-not-allowed lui:data-disabled:border-zinc-950/20 lui:data-disabled:file:cursor-not-allowed lui:file:cursor-pointer lui:cursor-pointer lui:file:border-0 lui:file:px-[calc(--spacing(3.5)-1px)] lui:file:py-[calc(--spacing(2.5)-1px)] lui:file:sm:px-[calc(--spacing(3)-1px)] lui:file:sm:py-[calc(--spacing(1.5)-1px)] lui:file:mr-4 lui:file:bg-zinc-100 lui:file:rounded-l-[calc(var(--radius-lg)-1px)]"
+  end
+
+  def file_input_html_options
+    {
+      data: input_data,
+      class: file_input_classes,
+      disabled: @disabled,
+      autofocus: @autofocus,
+      multiple: @multiple,
+      accept: @accept
+    }
+  end
+
+  def render_file_input
+    if @form
+      @form.file_field(@name, **file_input_html_options)
+    else
+      helpers.file_field_tag(@name, value: @value, **file_input_html_options)
+    end
+  end
+
+  def control_classes
+    "lui:relative lui:block lui:w-full lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50"
+  end
 end