lightning_ui_kit 0.2.5 → 0.3.0

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

@@ -3,30 +3,36 @@
     <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-blue-500"}) %>
+          <%= heroicon("document", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-indigo-500"}) %>
           <div class="lui:grid lui:gap-1">
-            <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>
+            <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>
           </div>
         </div>
         <%= heroicon(
           "x-circle",
           variant: :outline,
           options: {
-            class: "lui:w-6 lui:h-6 lui:text-zinc-500 lui:hover:text-blue-500 lui:hover:cursor-pointer",
+            class: "lui:w-6 lui:h-6 lui:text-zinc-300 lui:hover:text-indigo-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-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 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>
-        <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>
+        <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>
       </div>
     </div>
   </template>
 
-  <%= render_label %>
+  <% 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,
@@ -35,15 +41,34 @@
     ) %>
   <% end %>
 
-  <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: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: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-blue-500"}) %>
+      <%= heroicon("cloud-arrow-up", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-indigo-500"}) %>
     </div>
-    <p class="lui:text-center lui:text-zinc-950 lui:text-base lui:font-medium lui:leading-snug"><%= t("dropzone.default_message") %></p>
+    <p class="lui:text-center lui:text-gray-900 lui:text-base lui:font-medium lui:leading-snug"><%= t("dropzone.default_message") %></p>
     <% if @placeholder %>
-      <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>
+      <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
+      ) %>
     <% end %>
-    <%= render_file_input %>
   </div>
 
   <% if has_errors? %>

data/app/components/lightning_ui_kit/dropzone_component.rb

@@ -26,63 +26,36 @@ class LightningUiKit::DropzoneComponent < LightningUiKit::BaseComponent
   end
 
   def input_data
-    (@options[:input_data] || {}).dup.tap do |data|
+    (@options[:input_data] || {}).tap do |data|
       data[:lui_dropzone_target] = "input"
       data[:action] = "dragover->lui-dropzone#activate drop->lui-dropzone#uploadFiles change->lui-dropzone#uploadFiles"
-      data[:invalid] = "true" if has_errors?
+      if has_errors?
+        data[:invalid] = "true"
+      end
     end
   end
 
   def label_data
-    {slot: "label"}.merge(@options[:label_data] || {}).dup.tap do |data|
-      data[:disabled] = "true" if @disabled
+    {slot: "label"}.merge(@options[:label_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
     end
   end
 
   def description_data
-    {slot: "description"}.merge(@options[:description_data] || {}).dup.tap do |data|
-      data[:disabled] = "true" if @disabled
+    {slot: "description"}.merge(@options[:description_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
     end
   end
 
   def error_data
-    {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)
+    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
     end
   end
 end

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

@@ -1,5 +1,12 @@
-<%= tag.div(class: classes, data: data) do %>
-  <%= render_label %>
+<%= 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 %>
   <% if @description %>
     <%= tag.p(
       @description,
@@ -7,8 +14,31 @@
       data: description_data
     ) %>
   <% end %>
-  <span data-slot="control" class="<%= control_classes %>">
-    <%= render_file_input %>
+  <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>
   <% if has_errors? %>
     <%= tag.p(

data/app/components/lightning_ui_kit/file_input_component.rb

@@ -22,75 +22,41 @@ class LightningUiKit::FileInputComponent < LightningUiKit::BaseComponent
   end
 
   def data
-    {controller: "lui-field"}.merge(@options[:data] || {})
+    @options[:data] || {}
   end
 
   def input_data
-    {lui_field_target: "field"}.merge(@options[:input_data] || {}).dup.tap do |data|
-      data[:disabled] = "true" if @disabled
-      data[:invalid] = "true" if has_errors?
+    (@options[:input_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+      if has_errors?
+        data[:invalid] = "true"
+      end
     end
   end
 
   def label_data
-    {slot: "label"}.merge(@options[:label_data] || {}).dup.tap do |data|
-      data[:disabled] = "true" if @disabled
+    {slot: "label"}.merge(@options[:label_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
     end
   end
 
   def description_data
-    {slot: "description"}.merge(@options[:description_data] || {}).dup.tap do |data|
-      data[:disabled] = "true" if @disabled
+    {slot: "description"}.merge(@options[:description_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
     end
   end
 
   def error_data
-    {slot: "error"}.merge(@options[:error_data] || {}).dup.tap do |data|
-      data[:disabled] = "true" if @disabled
+    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
     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

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

@@ -1,5 +1,14 @@
-<%= tag.div(class: classes, data: data) do %>
-  <%= render_label %>
+<%= tag.div(
+  class: classes,
+  data:
+) 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,
@@ -7,19 +16,94 @@
       data: description_data
     ) %>
   <% end %>
-  <% if @type == :hidden %>
-    <%= render_hidden_input %>
-  <% elsif @type == :range %>
-    <span data-slot="control" class="lui:block lui:w-full lui:py-2">
-      <%= render_range_input %>
-    </span>
-  <% elsif @type == :color %>
-    <span data-slot="control" class="lui:block lui:py-1">
-      <%= render_color_input %>
+  <% if @form %>
+    <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">
+      <% case @type %>
+      <% when :text %>
+        <%= @form.text_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: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: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/60 lui:data-disabled:border-zinc-950/20",
+          disabled: @disabled,
+          autofocus: @autofocus,
+          placeholder: @placeholder
+        ) %>
+      <% when :email %>
+        <%= @form.email_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: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: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/60 lui:data-disabled:border-zinc-950/20",
+          disabled: @disabled,
+          autofocus: @autofocus,
+          placeholder: @placeholder
+        ) %>
+      <% when :password %>
+        <%= @form.password_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: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: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/60 lui:data-disabled:border-zinc-950/20",
+          disabled: @disabled,
+          autofocus: @autofocus,
+          placeholder: @placeholder
+        ) %>
+      <% when :number %>
+        <%= @form.number_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: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: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/60 lui:data-disabled:border-zinc-950/20",
+          disabled: @disabled,
+          autofocus: @autofocus,
+          placeholder: @placeholder,
+          min: @options[:min],
+          max: @options[:max],
+          step: @options[:step]
+        ) %>
+      <% end %>
     </span>
-  <% elsif standard_input_type? %>
-    <span data-slot="control" class="<%= control_classes %>">
-      <%= render_input %>
+  <% else %>
+    <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">
+      <% case @type %>
+      <% when :text %>
+        <%= text_field_tag(
+          @name,
+          @value,
+          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: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: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/60 lui:data-disabled:border-zinc-950/20",
+          disabled: @disabled,
+          autofocus: @autofocus,
+          placeholder: @placeholder
+        ) %>
+      <% when :email %>
+        <%= email_field_tag(
+          @name,
+          @value,
+          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: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: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/60 lui:data-disabled:border-zinc-950/20",
+          disabled: @disabled,
+          autofocus: @autofocus,
+          placeholder: @placeholder
+        ) %>
+      <% when :password %>
+        <%= password_field_tag(
+          @name,
+          @value,
+          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: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: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/60 lui:data-disabled:border-zinc-950/20",
+          disabled: @disabled,
+          autofocus: @autofocus,
+          placeholder: @placeholder
+        ) %>
+      <% when :number %>
+        <%= number_field_tag(
+          @name,
+          @value,
+          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: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: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/60 lui:data-disabled:border-zinc-950/20",
+          disabled: @disabled,
+          autofocus: @autofocus,
+          placeholder: @placeholder,
+        ) %>
+      <% end %>
     </span>
   <% end %>
   <% if has_errors? %>

data/app/components/lightning_ui_kit/input_component.rb

@@ -3,36 +3,17 @@
 class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
   include LightningUiKit::Errors
 
-  INPUT_TYPES = {
-    text: :text_field,
-    email: :email_field,
-    password: :password_field,
-    number: :number_field,
-    date: :date_field,
-    datetime: :datetime_local_field,
-    datetime_local: :datetime_local_field,
-    month: :month_field,
-    week: :week_field,
-    time: :time_field,
-    url: :url_field,
-    search: :search_field,
-    telephone: :telephone_field,
-    phone: :telephone_field
-  }.freeze
-
-  STANDARD_INPUT_TYPES = INPUT_TYPES.keys.freeze
-
-  def initialize(name:, value: nil, label: nil, form: nil, type: :text, description: nil, disabled: false, placeholder: nil, error: nil, input_options: {}, **options)
+  def initialize(name:, value: nil, autofocus: false, label: nil, form: nil, type: :text, description: nil, disabled: false, placeholder: nil, error: nil, **options)
     @name = name
     @value = value
     @disabled = disabled
+    @autofocus = autofocus
     @error = error
     @label = label
     @form = form
     @type = type
     @description = description
     @placeholder = placeholder
-    @input_options = input_options
     @options = options
   end
 
@@ -41,154 +22,38 @@ class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
   end
 
   def data
-    {controller: "lui-field"}.merge(@options[:data] || {})
+    @options[:data] || {}
   end
 
   def input_data
-    {lui_field_target: "field"}.merge(@options[:input_data] || {}).dup.tap do |data|
-      data[:invalid] = "true" if has_errors?
+    (@options[:input_data] || {}).tap do |data|
+      if has_errors?
+        data[:invalid] = "true"
+      end
     end
   end
 
   def label_data
-    {slot: "label"}.merge(@options[:label_data] || {}).dup.tap do |data|
-      data[:disabled] = "true" if @disabled
+    {slot: "label"}.merge(@options[:label_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
     end
   end
 
   def description_data
-    {slot: "description"}.merge(@options[:description_data] || {}).dup.tap do |data|
-      data[:disabled] = "true" if @disabled
+    {slot: "description"}.merge(@options[:description_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
     end
   end
 
   def error_data
-    {slot: "error"}.merge(@options[:error_data] || {}).dup.tap do |data|
-      data[:disabled] = "true" if @disabled
-    end
-  end
-
-  def input_classes
-    "lui:peer 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"
-  end
-
-  def input_html_options
-    base_options = {
-      data: input_data,
-      class: input_classes,
-      disabled: @disabled,
-      placeholder: @placeholder
-    }
-
-    # Add type-specific options from **options (Rails convention)
-    case @type
-    when :number
-      base_options[:min] = @options[:min]
-      base_options[:max] = @options[:max]
-      base_options[:step] = @options[:step]
-    when :date, :datetime, :datetime_local, :month, :week, :time
-      base_options[:min] = @options[:min]
-      base_options[:max] = @options[:max]
-    end
-
-    base_options.merge(@input_options).compact
-  end
-
-  def range_html_options
-    {
-      data: input_data,
-      class: range_classes,
-      disabled: @disabled,
-      min: @options[:min],
-      max: @options[:max],
-      step: @options[:step]
-    }.merge(@input_options).compact
-  end
-
-  def hidden_html_options
-    {data: input_data}.merge(@input_options).compact
-  end
-
-  def color_html_options
-    {
-      data: {lui_field_target: "field"},
-      class: color_classes,
-      disabled: @disabled
-    }.merge(@input_options).compact
-  end
-
-  def color_classes
-    "lui:h-10 lui:w-14 lui:cursor-pointer lui:appearance-none lui:rounded-lg lui:border lui:border-zinc-950/10 lui:bg-transparent lui:p-1 " \
-    "lui:data-[hover]:border-zinc-950/20 lui:focus:outline-none lui:focus:ring-2 lui:focus:ring-blue-500 " \
-    "[&::-webkit-color-swatch-wrapper]:lui:p-0 [&::-webkit-color-swatch]:lui:rounded-md [&::-webkit-color-swatch]:lui:border-0 " \
-    "[&::-moz-color-swatch]:lui:rounded-md [&::-moz-color-swatch]:lui:border-0 " \
-    "lui:disabled:opacity-50 lui:disabled:cursor-not-allowed"
-  end
-
-  def range_classes
-    "lui:w-full lui:h-2 lui:appearance-none lui:cursor-pointer lui:bg-zinc-200 lui:rounded-full lui:focus:outline-none " \
-    "[&::-webkit-slider-thumb]:lui:appearance-none [&::-webkit-slider-thumb]:lui:w-4 [&::-webkit-slider-thumb]:lui:h-4 [&::-webkit-slider-thumb]:lui:bg-blue-600 [&::-webkit-slider-thumb]:lui:rounded-full [&::-webkit-slider-thumb]:lui:cursor-pointer [&::-webkit-slider-thumb]:lui:shadow-sm [&::-webkit-slider-thumb]:lui:transition-transform [&::-webkit-slider-thumb]:hover:lui:scale-110 " \
-    "[&::-moz-range-thumb]:lui:appearance-none [&::-moz-range-thumb]:lui:w-4 [&::-moz-range-thumb]:lui:h-4 [&::-moz-range-thumb]:lui:bg-blue-600 [&::-moz-range-thumb]:lui:rounded-full [&::-moz-range-thumb]:lui:border-0 [&::-moz-range-thumb]:lui:cursor-pointer [&::-moz-range-thumb]:lui:shadow-sm [&::-moz-range-thumb]:lui:transition-transform [&::-moz-range-thumb]:hover:lui:scale-110 " \
-    "[&::-moz-range-track]:lui:bg-zinc-200 [&::-moz-range-track]:lui:rounded-full " \
-    "lui:disabled:opacity-50 lui:disabled:cursor-not-allowed"
-  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 control_classes
-    "lui:relative lui:block lui:w-full lui:before:pointer-events-none 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"
-  end
-
-  def standard_input_type?
-    STANDARD_INPUT_TYPES.include?(@type)
-  end
-
-  def render_input
-    method_name = INPUT_TYPES[@type]
-    if @form
-      @form.public_send(method_name, @name, **input_html_options)
-    else
-      tag_method = "#{method_name}_tag"
-      helpers.public_send(tag_method, @name, @value, **input_html_options)
-    end
-  end
-
-  def render_range_input
-    if @form
-      @form.range_field(@name, **range_html_options)
-    else
-      helpers.range_field_tag(@name, @value, **range_html_options)
-    end
-  end
-
-  def render_color_input
-    if @form
-      @form.color_field(@name, **color_html_options)
-    else
-      helpers.color_field_tag(@name, @value, **color_html_options)
-    end
-  end
-
-  def render_hidden_input
-    if @form
-      @form.hidden_field(@name, **hidden_html_options)
-    else
-      helpers.hidden_field_tag(@name, @value, **hidden_html_options)
+    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
     end
   end
 end

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

@@ -1,8 +1,8 @@
 <%= tag.dialog(id: @id, open: @open, data:) do %>
   <div class="lui:fixed lui:inset-0 lui:flex lui:w-screen lui:justify-center lui:overflow-y-auto lui:bg-zinc-950/25 lui:px-2 lui:py-2 lui:transition lui:duration-100 lui:focus:outline-0 lui:data-closed:opacity-0 lui:data-enter:ease-out lui:data-leave:ease-in lui:sm:px-6 lui:sm:py-8 lg:lui:px-8 lg:lui:py-16" aria-hidden="true" data-open=""></div>
   <div class="lui:fixed lui:inset-0 lui:w-screen lui:overflow-y-auto lui:pt-6 lui:sm:pt-0">
-    <div class="lui:grid lui:min-h-full lui:grid-rows-[1fr_auto] lui:justify-items-center lui:sm:grid-rows-[1fr_auto_3fr] lui:sm:p-4" data-action="click->lui-modal#closeOnBackdrop">
-      <div class="lui:sm:max-w-3xl lui:row-start-2 lui:w-full lui:min-w-0 lui:rounded-t-3xl lui:bg-white lui:p-(--gutter) lui:ring-1 lui:shadow-lg lui:ring-zinc-950/10 lui:[--gutter:--spacing(8)] lui:sm:mb-auto lui:sm:rounded-2xl lui:forced-colors:outline lui:transition lui:duration-100 lui:will-change-transform lui:data-closed:translate-y-12 lui:data-closed:opacity-0 lui:data-enter:ease-out lui:data-leave:ease-in lui:sm:data-closed:translate-y-0 lui:sm:data-closed:data-enter:scale-95" data-open="" data-lui-modal-target="panel">
+    <div class="lui:grid lui:min-h-full lui:grid-rows-[1fr_auto] lui:justify-items-center lui:sm:grid-rows-[1fr_auto_3fr] lui:sm:p-4">
+      <div class="lui:sm:max-w-3xl lui:row-start-2 lui:w-full lui:min-w-0 lui:rounded-t-3xl lui:bg-white lui:p-(--gutter) lui:ring-1 lui:shadow-lg lui:ring-zinc-950/10 lui:[--gutter:--spacing(8)] lui:sm:mb-auto lui:sm:rounded-2xl lui:forced-colors:outline lui:transition lui:duration-100 lui:will-change-transform lui:data-closed:translate-y-12 lui:data-closed:opacity-0 lui:data-enter:ease-out lui:data-leave:ease-in lui:sm:data-closed:translate-y-0 lui:sm:data-closed:data-enter:scale-95" data-open="">
         <% if @title %>
           <h2 class="lui:text-lg/6 lui:font-semibold lui:text-balance lui:text-zinc-950 lui:sm:text-base/6" data-open="">
             <%= @title %>