lightning_ui_kit 0.1.1 → 0.1.3

data/app/components/{lightning_ui → lightning_ui_kit}/alert_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::AlertComponent < LightningUi::BaseComponent
+class LightningUiKit::AlertComponent < LightningUiKit::BaseComponent
   def initialize(type: :info, **options)
     @type = type
     @options = options

data/app/components/{lightning_ui → lightning_ui_kit}/avatar_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::AvatarComponent < LightningUi::BaseComponent
+class LightningUiKit::AvatarComponent < LightningUiKit::BaseComponent
   SIZE_CLASSES = {
     sm: "size-6",
     md: "size-8",

data/app/components/lightning_ui_kit/badge_component.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+class LightningUiKit::BadgeComponent < LightningUiKit::BaseComponent
+  def initialize(status: :default, progress: nil)
+    @status = status
+    @progress = progress
+  end
+
+  def classes
+    status_classes = case @status
+    when :success
+      "bg-green-200 text-zinc-500"
+    when :warning
+      "bg-yellow-200 text-zinc-500"
+    when :error
+      "bg-red-600/80 text-white"
+    else
+      "bg-zinc-400/20 text-zinc-500"
+    end
+    [defalt_classes, status_classes].join(" ")
+  end
+
+  def progress_classes
+    progress_classes = case @progress
+    when :complete
+      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
+      case @status
+      when :error
+        "bg-transparent border-white"
+      else
+        "bg-transparent border-zinc-400"
+      end
+    when :partialy_complete
+      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
+
+  def default_progress_classes
+    "h-2 w-2 rounded-[3px] border-[1px]"
+  end
+
+  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
+end

data/app/components/{lightning_ui → lightning_ui_kit}/banner_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::BannerComponent < LightningUi::BaseComponent
+class LightningUiKit::BannerComponent < LightningUiKit::BaseComponent
   renders_one :footer
 
   def initialize(title:, type: :info, **options)
@@ -12,7 +12,7 @@ class LightningUi::BannerComponent < LightningUi::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 → lightning_ui_kit}/base_component.rb

@@ -1,7 +1,7 @@
 require "tailwind_merge"
 
-class LightningUi::BaseComponent < ViewComponent::Base
-  include LightningUi::HeroiconHelper
+class LightningUiKit::BaseComponent < ViewComponent::Base
+  include LightningUiKit::HeroiconHelper
 
   def merge_classes(classes)
     TailwindMerge::Merger.new.merge(classes)

data/app/components/{lightning_ui → lightning_ui_kit}/button_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::ButtonComponent < LightningUi::BaseComponent
+class LightningUiKit::ButtonComponent < LightningUiKit::BaseComponent
   def initialize(type: :button, style: :default, size: :default, disabled: false, url: nil, **options)
     @type = type
     @style = style

data/app/components/{lightning_ui → 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 → lightning_ui_kit}/checkbox_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::CheckboxComponent < LightningUi::BaseComponent
+class LightningUiKit::CheckboxComponent < LightningUiKit::BaseComponent
   def initialize(name:, value: nil, label: nil, description: nil, form: nil, checked: false, disabled: false, **options)
     @form = form
     @name = name

data/app/components/{lightning_ui → lightning_ui_kit}/description_list/item_component.rb

@@ -1,4 +1,4 @@
-class LightningUi::DescriptionList::ItemComponent < LightningUi::BaseComponent
+class LightningUiKit::DescriptionList::ItemComponent < LightningUiKit::BaseComponent
   def initialize(label:, value: nil, **options)
     @label = label
     @value = value

data/app/components/lightning_ui_kit/description_list_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class LightningUiKit::DescriptionListComponent < LightningUiKit::BaseComponent
+  renders_many :items, LightningUiKit::DescriptionList::ItemComponent
+end

data/app/components/lightning_ui_kit/dropdown/item_component.rb

@@ -0,0 +1,5 @@
+class LightningUiKit::Dropdown::ItemComponent < LightningUiKit::BaseComponent
+  def initialize(title:)
+    @title = title
+  end
+end

data/app/components/{lightning_ui → lightning_ui_kit}/dropdown_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::DropdownComponent < LightningUi::BaseComponent
+class LightningUiKit::DropdownComponent < LightningUiKit::BaseComponent
   renders_one :trigger
   renders_many :items
 

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 → 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 → lightning_ui_kit}/input_component.rb

@@ -1,11 +1,14 @@
 # frozen_string_literal: true
 
-class LightningUi::InputComponent < LightningUi::BaseComponent
-  def initialize(name:, value: nil, autofocus: false, label: nil, form: nil, type: :text, description: nil, disabled: false, placeholder: nil, **options)
+class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
+  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 LightningUi::InputComponent < LightningUi::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 LightningUi::InputComponent < LightningUi::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 → lightning_ui_kit}/link_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::LinkComponent < LightningUi::BaseComponent
+class LightningUiKit::LinkComponent < LightningUiKit::BaseComponent
   def initialize(title:, url:)
     @title = title
     @url = url

data/app/components/{lightning_ui → lightning_ui_kit}/modal_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::ModalComponent < LightningUi::BaseComponent
+class LightningUiKit::ModalComponent < LightningUiKit::BaseComponent
   renders_one :body
   renders_many :actions
 

data/app/components/{lightning_ui → lightning_ui_kit}/pagination_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::PaginationComponent < LightningUi::BaseComponent
+class LightningUiKit::PaginationComponent < LightningUiKit::BaseComponent
   def initialize(current_page:, total_pages:, path:, page_param: "page", with_arrows: false, **options)
     @current_page = current_page
     @total_pages = total_pages