lightning_ui_kit 0.1.2 → 0.1.3

data/app/components/lightning_ui_kit/badge_component.rb

@@ -13,7 +13,7 @@ class LightningUiKit::BadgeComponent < LightningUiKit::BaseComponent
     when :warning
       "bg-yellow-200 text-zinc-500"
     when :error
-      "bg-red-600 text-white"
+      "bg-red-600/80 text-white"
     else
       "bg-zinc-400/20 text-zinc-500"
     end
@@ -23,11 +23,37 @@ class LightningUiKit::BadgeComponent < LightningUiKit::BaseComponent
   def progress_classes
     progress_classes = case @progress
     when :complete
-      "bg-zinc-400 border-zinc-400"
+      case @status
+      when :success
+        "bg-green-600 border-green-600"
+      when :warning
+        "bg-yellow-400 border-yellow-400"
+      when :error
+        "bg-red-700 border-red-700"
+      else
+        "bg-zinc-400 border-zinc-400"
+      end
     when :incomplete
-      "bg-yellow-300 border-zinc-400"
+      case @status
+      when :error
+        "bg-transparent border-white"
+      else
+        "bg-transparent border-zinc-400"
+      end
     when :partialy_complete
-      "relative border-yellow-600 after:w-[3.75px] after:h-[8.2px] after:border-transparent after:border-l-yellow-600 after:border-r-yellow-600 after:border-[1px] after:-rotate-45 after:absolute after:-top-[1px] after:left-[1px] after:margin-0 after-margin-y-[1px]"
+      partialy_complete_classes = "relative after:w-[3.75px] after:h-[8.2px]\
+       after:border-transparent after:border-[1px] after:-rotate-45 after:absolute after:-top-[1px]\
+       after:left-[1px] after:margin-0 after-margin-y-[1px]"
+      case @status
+      when :success
+        "#{partialy_complete_classes} border-green-600 after:border-l-green-600 after:border-r-green-600"
+      when :warning
+        "#{partialy_complete_classes} border-yellow-400 after:border-l-yellow-400 after:border-r-yellow-400"
+      when :error
+        "#{partialy_complete_classes} border-white after:border-l-white after:border-r-white"
+      else
+        "#{partialy_complete_classes} border-zinc-400 after:border-l-zinc-400 after:border-r-zinc-400"
+      end
     end
     [default_progress_classes, progress_classes].join(" ")
   end
@@ -36,7 +62,6 @@ class LightningUiKit::BadgeComponent < LightningUiKit::BaseComponent
     "h-2 w-2 rounded-[3px] border-[1px]"
   end
 
-  #   hover:bg-zinc-400/30
   def defalt_classes
     "relative inline-flex items-center relative gap-x-1.5 rounded-[10px] px-2.5 py-1 text-sm font-medium sm:text-xs forced-colors:outline"
   end

data/app/components/lightning_ui_kit/banner_component.rb

@@ -12,7 +12,7 @@ class LightningUiKit::BannerComponent < LightningUiKit::BaseComponent
   def classes
     type_classes = case @type
     when :error
-      "*:data-[slot=header]:bg-red-600/90 *:data-[slot=header]:text-white"
+      "*:data-[slot=header]:bg-red-600/80 *:data-[slot=header]:text-white"
     else
       "*:data-[slot=header]:bg-gray-50"
     end

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

@@ -5,7 +5,7 @@
     class="group inline-flex focus:outline-hidden" id="headlessui-control-:r2m:" role="checkbox" aria-checked="false" tabindex="0" data-headlessui-state="" aria-labelledby="headlessui-label-:r2o:" aria-describedby="headlessui-description-:r2p:"
     data-action="click->lui-checkbox#toggle"
     >
-    <span class="relative isolate flex size-[1.125rem] items-center justify-center rounded-[0.3125rem] sm:size-4 before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow-sm group-data-checked:before:bg-(--checkbox-checked-bg) border border-zinc-950/15 group-data-checked:border-transparent group-data-hover:group-data-checked:border-transparent group-data-hover:border-zinc-950/30 group-data-checked:bg-(--checkbox-checked-border) after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_--theme(--color-white/15%)] group-data-focus:outline group-data-focus:outline-2 group-data-focus:outline-offset-2 group-data-focus:outline-blue-500 group-data-disabled:opacity-50 group-data-disabled:border-zinc-950/25 group-data-disabled:bg-zinc-950/5 group-data-disabled:[--checkbox-check:var(--color-zinc-950)]/50 group-data-disabled:before:bg-transparent forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-disabled:[--checkbox-check:Highlight] [--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90">
+    <span class="relative isolate flex size-[1.125rem] items-center justify-center rounded-[0.3125rem] sm:size-4 before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow-sm group-data-checked:before:bg-(--checkbox-checked-bg) border border-zinc-950/15 group-data-checked:border-transparent group-hover:group-data-checked:border-transparent group-hover:border-zinc-950/30 group-data-checked:bg-(--checkbox-checked-border) after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_--theme(--color-white/15%)] group-data-focus:outline group-data-focus:outline-2 group-data-focus:outline-offset-2 group-data-focus:outline-blue-500 group-data-disabled:opacity-50 group-data-disabled:border-zinc-950/25 group-data-disabled:bg-zinc-950/5 group-data-disabled:[--checkbox-check:var(--color-zinc-950)]/50 group-data-disabled:before:bg-transparent forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-disabled:[--checkbox-check:Highlight] [--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90">
       <svg class="size-4 stroke-(--checkbox-check) opacity-0 group-data-checked:opacity-100 sm:h-3.5 sm:w-3.5" viewBox="0 0 14 14" fill="none">
         <path class="opacity-100 group-data-indeterminate:opacity-0" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
         <path class="opacity-0 group-data-indeterminate:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

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

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

data/app/components/lightning_ui_kit/dropzone_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+class LightningUiKit::DropzoneComponent < LightningUiKit::BaseComponent
+  include LightningUiKit::Errors
+
+  def initialize(name:, value: nil, label: nil, form: nil, description: nil, multiple: false, accept: nil, disabled: false, placeholder: nil, error: nil, **options)
+    @name = name
+    @value = value
+    @disabled = disabled
+    @accept = accept
+    @multiple = multiple
+    @error = error
+    @label = label
+    @form = form
+    @description = description
+    @placeholder = placeholder
+    @options = options
+  end
+
+  def classes
+    merge_classes(["space-y-4 [&>[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", @options[:class]].compact.join(" "))
+  end
+
+  def data
+    {controller: "lui-dropzone"}.merge(@options[:data] || {})
+  end
+
+  def input_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"
+      if has_errors?
+        data[:invalid] = "true"
+      end
+    end
+  end
+
+  def label_data
+    {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] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "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/errors.rb

@@ -0,0 +1,34 @@
+module LightningUiKit
+  module Errors
+    def has_errors?
+      error_messages.present?
+    end
+
+    # TODO: simplify this code
+    def error_messages
+      return @error if @error.present?
+      return @error_messages if @error_messages.present?
+
+      if @form.present?
+        @error_messages = @form.object.errors.full_messages_for(@name.to_sym)
+        if @error_messages.blank?
+          @error_messages = infer_errors_from_association
+        end
+      end
+      @error_messages = @error_messages&.to_a&.join(". ")
+    end
+
+    def infer_errors_from_association
+      association = if @name.to_s.end_with?("_ids")
+        return unless @form.object.respond_to?(:reflect_on_association)
+        @form.object.class.reflect_on_association(@name.to_s.chomp("_ids").pluralize.to_sym)
+      else
+        return unless @form.object.respond_to?(:reflect_on_all_associations)
+        @form.object.class.reflect_on_all_associations.find do |a|
+          a.macro == :belongs_to && a.foreign_key.to_s == @name.to_s
+        end
+      end
+      @form.object.errors.full_messages_for(association&.name&.to_sym) if association
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+<%= tag.div(class: classes, data:) do %>
+  <% if @label %>
+    <%= label_tag(
+      @name,
+      @label.is_a?(String) ? @label : nil,
+      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(
+      @description,
+      class: "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6",
+      data: description_data
+    ) %>
+  <% end %>
+  <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">
+    <% if @form %>
+      <%= @form.file_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 hover:border-zinc-950/20 data-disabled:hover:none data-disabled:cursor-not-allowed bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 dark:data-invalid:hover:border-red-500 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: "relative block w-full appearance-none rounded-lg 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 dark:data-invalid:hover:border-red-500 data-disabled:hover:none data-disabled:cursor-not-allowed data-disabled:border-zinc-950/20 data-disabled:file:cursor-not-allowed data-disabled:file:cursor-not-allowed file:cursor-pointer cursor-pointer file:border-0 file:px-[calc(--spacing(3.5)-1px)] file:py-[calc(--spacing(2.5)-1px)] file:sm:px-[calc(--spacing(3)-1px)] file:sm:py-[calc(--spacing(1.5)-1px)] file:mr-4 file:bg-zinc-100",
+        disabled: @disabled,
+        autofocus: @autofocus,
+        multiple: @multiple,
+        accept: @accept,
+        placeholder: @placeholder
+      ) %>
+    <% end %>
+  </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/file_input_component.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+class LightningUiKit::FileInputComponent < LightningUiKit::BaseComponent
+  include LightningUiKit::Errors
+
+  def initialize(name:, value: nil, autofocus: false, label: nil, form: nil, description: nil, multiple: false, accept: nil, disabled: false, error: nil, **options)
+    @name = name
+    @value = value
+    @disabled = disabled
+    @autofocus = autofocus
+    @accept = accept
+    @multiple = multiple
+    @error = error
+    @label = label
+    @form = form
+    @description = description
+    @options = options
+  end
+
+  def classes
+    merge_classes(["[&>[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", @options[:class]].compact.join(" "))
+  end
+
+  def data
+    @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
+    end
+  end
+
+  def label_data
+    {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] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "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/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(
@@ -23,7 +23,7 @@
         <%= @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 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
           disabled: @disabled,
           autofocus: @autofocus,
           placeholder: @placeholder
@@ -32,7 +32,7 @@
         <%= @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 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
           disabled: @disabled,
           autofocus: @autofocus
         ) %>
@@ -40,7 +40,7 @@
         <%= @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 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
           disabled: @disabled,
           autofocus: @autofocus
         ) %>
@@ -48,7 +48,7 @@
         <%= @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 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
           disabled: @disabled,
           autofocus: @autofocus
         ) %>
@@ -62,7 +62,7 @@
           @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 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
           disabled: @disabled,
           autofocus: @autofocus
         ) %>
@@ -71,7 +71,7 @@
           @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 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
           disabled: @disabled,
           autofocus: @autofocus
         ) %>
@@ -80,7 +80,7 @@
           @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 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
           disabled: @disabled,
           autofocus: @autofocus
         ) %>
@@ -89,11 +89,18 @@
           @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 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
           disabled: @disabled,
           autofocus: @autofocus
         ) %>
       <% 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

@@ -14,7 +14,7 @@
     </p>
   <% 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",
@@ -35,4 +35,11 @@
       ) %>
     <% end %>
   <% 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 %>
 </div>