lightning_ui_kit 0.1.2 → 0.1.4

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

@@ -2,12 +2,12 @@
   class: classes,
   data:
 ) do %>
-    <% if @label %>
-      <%= tag.label(
-        @label,
-        class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
-        data: label_data
-      ) %>
+  <% if @label %>
+    <%= tag.label(
+      @label,
+      class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
+      data: label_data
+    ) %>
   <% end %>
   <% if @description %>
     <%= tag.p(
@@ -17,13 +17,13 @@
     ) %>
   <% end %>
   <% if @form %>
-    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm dark:before:hidden after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
+    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
       <% case @type %>
       <% when :text %>
         <%= @form.text_field(
           @name,
           data: input_data,
-          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
           disabled: @disabled,
           autofocus: @autofocus,
           placeholder: @placeholder
@@ -32,68 +32,85 @@
         <%= @form.email_field(
           @name,
           data: input_data,
-          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
           disabled: @disabled,
-          autofocus: @autofocus
+          autofocus: @autofocus,
+          placeholder: @placeholder
         ) %>
       <% when :password %>
         <%= @form.password_field(
           @name,
           data: input_data,
-          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
           disabled: @disabled,
-          autofocus: @autofocus
+          autofocus: @autofocus,
+          placeholder: @placeholder
         ) %>
       <% when :number %>
         <%= @form.number_field(
           @name,
           data: input_data,
-          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
           disabled: @disabled,
-          autofocus: @autofocus
+          autofocus: @autofocus,
+          placeholder: @placeholder,
+          min: @options[:min],
+          max: @options[:max],
+          step: @options[:step]
         ) %>
       <% end %>
     </span>
   <% else %>
-    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm dark:before:hidden after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
+    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
       <% case @type %>
       <% when :text %>
         <%= text_field_tag(
           @name,
           @value,
           data: input_data,
-          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
           disabled: @disabled,
-          autofocus: @autofocus
+          autofocus: @autofocus,
+          placeholder: @placeholder
         ) %>
       <% when :email %>
         <%= email_field_tag(
           @name,
           @value,
           data: input_data,
-          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
           disabled: @disabled,
-          autofocus: @autofocus
+          autofocus: @autofocus,
+          placeholder: @placeholder
         ) %>
       <% when :password %>
         <%= password_field_tag(
           @name,
           @value,
           data: input_data,
-          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
           disabled: @disabled,
-          autofocus: @autofocus
+          autofocus: @autofocus,
+          placeholder: @placeholder
         ) %>
       <% when :number %>
         <%= number_field_tag(
           @name,
           @value,
           data: input_data,
-          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+          class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500/60 data-disabled:border-zinc-950/20",
           disabled: @disabled,
-          autofocus: @autofocus
+          autofocus: @autofocus,
+          placeholder: @placeholder,
         ) %>
       <% end %>
     </span>
   <% end %>
+  <% if has_errors? %>
+    <%= tag.p(
+      error_messages,
+      class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
+      data: error_data
+    ) %>
+  <% end %>
 <% end %>

data/app/components/lightning_ui_kit/input_component.rb

@@ -1,11 +1,14 @@
 # frozen_string_literal: true
 
 class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
-  def initialize(name:, value: nil, autofocus: false, label: nil, form: nil, type: :text, description: nil, disabled: false, placeholder: nil, **options)
+  include LightningUiKit::Errors
+
+  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
@@ -23,7 +26,11 @@ class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
   end
 
   def input_data
-    @options[:input_data] || {}
+    (@options[:input_data] || {}).tap do |data|
+      if has_errors?
+        data[:invalid] = "true"
+      end
+    end
   end
 
   def label_data
@@ -41,4 +48,12 @@ class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
       end
     end
   end
+
+  def error_data
+    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+    end
+  end
 end

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

@@ -9,12 +9,32 @@
       <%= @description %>
     </p>
   <% end %>
-  <span data-slot="control" class="group relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset has-data-focus:after:ring-2 has-data-focus:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none">
+  <span data-slot="control"
+    class="group relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset focus:after:ring-2 focus:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none">
     <% if @form %>
-      <%= @form.select(@name, @options_for_select, {multiple: @multiple}, { class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20 data-disabled:opacity-100"}) %>
+      <%= @form.select(
+        @name,
+        @options_for_select,
+        {multiple: @multiple},
+        class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20 data-disabled:opacity-100",
+        data: select_data
+      ) %>
     <% else %>
-      <%= select_tag(@name, @options_for_select, multiple: @multiple, class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20 data-disabled:opacity-100") %>
+      <%= select_tag(
+        @name,
+        @options_for_select,
+        multiple: @multiple,
+        class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20 data-disabled:opacity-100",
+        data: select_data
+      ) %>
     <% end %>
     <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg class="size-5 stroke-zinc-500 group-has-data-disabled:stroke-zinc-600 sm:size-4 forced-colors:stroke-[CanvasText]" 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>
+  <% if has_errors? %>
+    <%= tag.p(
+      error_messages,
+      class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
+      data: error_data
+    ) %>
+  <% end %>
 <% end %>

data/app/components/lightning_ui_kit/select_component.rb

@@ -1,10 +1,13 @@
 # frozen_string_literal: true
 
 class LightningUiKit::SelectComponent < LightningUiKit::BaseComponent
-  def initialize(name:, form: nil, label: nil, description: nil, disabled: false, options_for_select: [], multiple: false, **options)
+  include LightningUiKit::Errors
+
+  def initialize(name:, form: nil, label: nil, errors: nil, description: nil, disabled: false, options_for_select: [], multiple: false, **options)
     @name = name
     @form = form
     @label = label
+    @errors = errors
     @multiple = multiple
     @description = description
     @disabled = disabled
@@ -22,4 +25,31 @@ class LightningUiKit::SelectComponent < LightningUiKit::BaseComponent
 
     default_data.merge(@options[:data] || {})
   end
+
+  def select_data
+    {}.tap do |data|
+      if has_errors?
+        data[:invalid] = "true"
+      end
+    end
+  end
+
+  def control_data
+    {slot: "control"}.merge(@options[:control_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+      if has_errors?
+        data[:invalid] = "true"
+      end
+    end
+  end
+
+  def error_data
+    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+    end
+  end
 end

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

@@ -1,6 +1,6 @@
 <div
   data-slot="field"
-  class="grid grid-cols-[1fr_auto] items-center gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto] *:data-[slot=control]:col-start-2 *:data-[slot=control]:self-center *:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1 *:data-[slot=label]:justify-self-start *:data-[slot=description]:col-start-1 *:data-[slot=description]:row-start-2 has-data-[slot=description]:**:data-[slot=label]:font-medium"
+  class="grid grid-cols-[1fr_auto] items-center gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto] *:data-[slot=control]:col-start-2 *:data-[slot=control]:self-center *:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1 *:data-[slot=label]:justify-self-start *:data-[slot=description]:col-start-1 *:data-[slot=description]:row-start-2 has-data-[slot=description]:**:data-[slot=label]:font-medium *:data-[slot=error]:col-start-1 *:data-[slot=error]:row-start-3"
   data-controller="lui-switch"
   >
   <% if @label %>
@@ -13,8 +13,15 @@
       <%= @description %>
     </p>
   <% end %>
+  <% if has_errors? %>
+    <%= tag.p(
+      error_messages,
+      class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
+      data: error_data
+    ) %>
+  <% end %>
   <%= tag.button(
-    class: "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8 transition duration-0 ease-in-out data-changing:duration-200 forced-colors:outline forced-colors:[--switch-bg:Highlight] ] bg-zinc-200 ring-1 ring-black/5 ring-inset   data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) ) ) focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500 data-hover:ring-black/15 data-hover:data-checked:ring-(--switch-bg-ring)  ) data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5  [--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] ]  [--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]",
+    class: "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8 transition duration-0 ease-in-out data-changing:duration-200 forced-colors:outline forced-colors:[--switch-bg:Highlight] ] bg-zinc-200 ring-1 ring-black/5 ring-inset   data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) ) ) focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500 hover:ring-black/15 hover:data-checked:ring-(--switch-bg-ring)  ) data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5  [--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] ]  [--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]",
     aria: { checked: @enabled },
     role: "switch",
     type: "button",

data/app/components/lightning_ui_kit/switch_component.rb

@@ -1,10 +1,13 @@
 # frozen_string_literal: true
 
 class LightningUiKit::SwitchComponent < LightningUiKit::BaseComponent
-  def initialize(name:, form: nil, label: nil, description: nil, enabled: false, disabled: false, **options)
+  include LightningUiKit::Errors
+
+  def initialize(name:, form: nil, label: nil, error: nil, description: nil, enabled: false, disabled: false, **options)
     @name = name
     @form = form
     @label = label
+    @error = error
     @description = description
     @enabled = enabled
     @disabled = disabled
@@ -28,4 +31,12 @@ class LightningUiKit::SwitchComponent < LightningUiKit::BaseComponent
       end
     end
   end
+
+  def error_data
+    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+    end
+  end
 end

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

@@ -2,12 +2,12 @@
   class: "[&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3 *:data-[slot=label]:font-medium",
   data:
 ) do %>
-    <% if @label %>
-      <%= tag.label(
-        @label,
-        class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
-        data: label_data
-      ) %>
+  <% if @label %>
+    <%= tag.label(
+      @label,
+      class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
+      data: label_data
+    ) %>
   <% end %>
   <% if @description %>
     <%= tag.p(
@@ -17,7 +17,7 @@
     ) %>
   <% end %>
   <% if @form %>
-    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm dark:before:hidden after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
+    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
       <%= @form.text_area(
         @name,
         value: @value,
@@ -25,13 +25,13 @@
         cols: @cols,
         multiple: @multiple,
         data: input_data,
-        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
         disabled: @disabled,
         autofocus: @autofocus
       ) %>
     </span>
   <% else %>
-    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm dark:before:hidden after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
+    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
       <%= text_area_tag(
         @name,
         @value,
@@ -39,10 +39,17 @@
         cols: @cols,
         multiple: @multiple,
         data: input_data,
-        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
         disabled: @disabled,
         autofocus: @autofocus
       ) %>
     </span>
   <% end %>
+  <% if has_errors? %>
+    <%= tag.p(
+      error_messages,
+      class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
+      data: error_data
+    ) %>
+  <% end %>
 <% end %>

data/app/components/lightning_ui_kit/textarea_component.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
-  def initialize(name:, value: nil, autofocus: false, label: nil, form: nil, type: :text, description: nil, disabled: false, multiple: false, rows: 3, cols: nil, **options)
+  include LightningUiKit::Errors
+
+  def initialize(name:, value: nil, autofocus: false, label: nil, form: nil, type: :text, error: nil, description: nil, disabled: false, multiple: false, rows: 3, cols: nil, **options)
     @name = name
     @value = value
     @disabled = disabled
@@ -9,6 +11,7 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
     @rows = rows
     @multiple = multiple
     @cols = cols
+    @error = error
     @label = label
     @form = form
     @type = type
@@ -21,7 +24,11 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
   end
 
   def input_data
-    @options[:input_data] || {}
+    (@options[:input_data] || {}).tap do |data|
+      if has_errors?
+        data[:invalid] = "true"
+      end
+    end
   end
 
   def label_data
@@ -39,4 +46,12 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
       end
     end
   end
+
+  def error_data
+    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+    end
+  end
 end

data/app/javascript/lightning_ui_kit/controllers/accordion_controller.js

@@ -2,9 +2,14 @@ import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = ["content", "item"];
+  static values = {
+    openFirst: { type: Boolean, default: true }
+  };
 
   connect() {
-    this.openItem(this.itemTargets[0])
+    if (this.openFirstValue) {
+      this.openItem(this.itemTargets[0]);
+    }
   }
 
   toggle(e) {
@@ -24,27 +29,27 @@ export default class extends Controller {
   }
 
   openItem(item) {
-    const content = item.querySelector("[data-accordion-target=content]");
+    const content = item.querySelector("[data-lui-accordion-target=content]");
     content.classList.remove("grid-rows-[0fr]");
     content.classList.add("grid-rows-[1fr]");
     content.classList.remove("opacity-0");
     content.classList.add("opacity-100");
-    const arrow = item.querySelector("[data-accordion-target=arrow]");
+    const arrow = item.querySelector("[data-lui-accordion-target=arrow]");
     arrow.classList.add("rotate-180");
   }
 
   closeItem(item) {
-    const content = item.querySelector("[data-accordion-target=content]");
+    const content = item.querySelector("[data-lui-accordion-target=content]");
     content.classList.remove("grid-rows-[1fr]");
     content.classList.add("grid-rows-[0fr]");
     content.classList.remove("opacity-100");
     content.classList.add("opacity-0");
-    const arrow = item.querySelector("[data-accordion-target=arrow]");
+    const arrow = item.querySelector("[data-lui-accordion-target=arrow]");
     arrow.classList.remove("rotate-180");
   }
 
   isOpen(item) {
-    const content = item.querySelector("[data-accordion-target=content]");
+    const content = item.querySelector("[data-lui-accordion-target=content]");
     return content.classList.contains("grid-rows-[1fr]");
   }
 }

data/app/javascript/lightning_ui_kit/controllers/dropzone_controller.js

@@ -0,0 +1,79 @@
+import { Controller } from "@hotwired/stimulus"
+import { DirectUpload } from "@rails/activestorage"
+
+class Upload {
+  constructor(file, controller) {
+    this.controller = controller
+    this.file = file;
+    this.directUpload = new DirectUpload(file, this.controller.inputTarget.dataset.directUploadUrl, this);
+  }
+
+  process() {
+    this.insertUpload();
+
+    this.directUpload.create((error, blob) => {
+      if (error) {
+        const fileContainer = this.controller.filesTarget.querySelector(`#upload_${this.directUpload.id}`)
+        const status = fileContainer.querySelector("[data-lui-dropzone-target='status']")
+        status.textContent = "Failed. " + error
+        status.classList.add("text-red-500")
+      } else {
+        const hiddenField = document.createElement('input')
+        hiddenField.setAttribute("type", "hidden");
+        hiddenField.setAttribute("value", blob.signed_id);
+        hiddenField.name = this.controller.inputTarget.name;
+        this.controller.filesTarget
+          .querySelector(`#upload_${this.directUpload.id}`)
+          .appendChild(hiddenField);
+        this.controller.inputTarget.value = "";
+      }
+    });
+  }
+
+  insertUpload() {
+    const template = this.controller.templateTarget.content.cloneNode(true)
+    template.querySelector('#\\#NEW_FILE').id = `upload_${this.directUpload.id}`
+    template.querySelector("[data-lui-dropzone-target='filename']").textContent = this.file.name
+    template.querySelector("[data-lui-dropzone-target='status']").textContent = "Uploading..."
+
+    this.controller.filesTarget.appendChild(template)
+  }
+
+  directUploadWillStoreFileWithXHR(request) {
+    request.upload.addEventListener("progress", (event) => this.updateProgress(event));
+  }
+
+  updateProgress(event) {
+    const progress = ((event.loaded / event.total) * 100).toFixed(0)
+    const status = progress == 100 ? "Uploaded" : "Uploading..."
+
+    const fileContainer = this.controller.filesTarget.querySelector(`#upload_${this.directUpload.id}`)
+    fileContainer.querySelector("[data-lui-dropzone-target='status']").textContent = status
+    fileContainer.querySelector("[data-lui-dropzone-target='progressbar']").style.width = `${progress}%`
+    fileContainer.querySelector("[data-lui-dropzone-target='percentage-progress']").textContent = `${progress}%`
+  }
+}
+
+export default class extends Controller {
+  static targets = ["input", "template", "files"]
+
+  selectFiles(_event) {
+    this.inputTarget.click()
+  }
+
+  uploadFiles(event) {
+    event.preventDefault();
+    const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+    [...files].forEach(f => new Upload(f, this).process())
+  }
+
+  activate(event) {
+    event.preventDefault()
+  }
+
+  removeFile(event) {
+    event.preventDefault()
+    const container = event.target.closest("[data-lui-dropzone-target='file']")
+    container.remove()
+  }
+}

data/app/javascript/lightning_ui_kit/index.js

@@ -2,6 +2,9 @@ const namespace = 'lui'
 
 import { Application } from "@hotwired/stimulus"
 
+import * as ActiveStorage from "@rails/activestorage"
+ActiveStorage.start()
+
 const application = Application.start()
 window.Stimulus = application
 
@@ -14,6 +17,7 @@ import ModalController from './controllers/modal_controller'
 import RevealController from './controllers/reveal_controller'
 import SwitchController from './controllers/switch_controller'
 import DropdownController from './controllers/dropdown_controller'
+import DropzoneController from './controllers/dropzone_controller'
 
 export function registerLuiControllers(application) {
   application.register(`${namespace}-clipboard`, ClipboardController)
@@ -25,6 +29,7 @@ export function registerLuiControllers(application) {
   application.register(`${namespace}-reveal`, RevealController)
   application.register(`${namespace}-switch`, SwitchController)
   application.register(`${namespace}-dropdown`, DropdownController)
+  application.register(`${namespace}-dropzone`, DropzoneController)
 }
 registerLuiControllers(application)
 

data/config/locales/en.yml

@@ -0,0 +1,3 @@
+en:
+  dropzone:
+    default_message: "Drag and Drop your files here"

data/lib/lightning_ui_kit/engine.rb

@@ -1,5 +1,4 @@
 require "view_component"
-require "stimulus-rails"
 
 module LightningUiKit
   class Engine < ::Rails::Engine

data/lib/lightning_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module LightningUiKit
-  VERSION = "0.1.2"
+  VERSION = "0.1.4"
 end