lightning_ui_kit 0.1.1

data/app/components/lightning_ui/badge_component.html.erb

@@ -0,0 +1,9 @@
+<%= tag.span class: classes do %>
+  <% if @progress %>
+    <%= tag.span class: progress_classes do %>
+    <% end %>
+  <% end %>
+  <span class="align-middle">
+    <%= content %>
+  </span>
+<% end %>

data/app/components/lightning_ui/badge_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class LightningUi::BadgeComponent < LightningUi::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 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
+      "bg-zinc-400 border-zinc-400"
+    when :incomplete
+      "bg-yellow-300 border-zinc-400"
+    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]"
+    end
+    [default_progress_classes, progress_classes].join(" ")
+  end
+
+  def default_progress_classes
+    "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
+end

data/app/components/lightning_ui/banner_component.html.erb

@@ -0,0 +1,17 @@
+<%= tag.div(class: classes, data: { type: @type, controller: "lui-banner" }) do %>
+  <div data-slot="header" class="flex items-center px-4 py-3">
+    <%= heroicon(icon, variant: :outline, options: { class: "shrink-0 w-5 h-5 me-2" }) %>
+    <span class="sr-only"><%= @type.to_s.humanize %></span>
+    <h3 class="text-md font-medium"><%= @title %></h3>
+  </div>
+
+  <div class="text-sm text-gray-800 p-4">
+    <%= content %>
+  </div>
+
+  <% if footer.present? %>
+    <div class="p-4 pt-0">
+      <%= footer %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/lightning_ui/banner_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class LightningUi::BannerComponent < LightningUi::BaseComponent
+  renders_one :footer
+
+  def initialize(title:, type: :info, **options)
+    @type = type
+    @title = title
+    @options = options
+  end
+
+  def classes
+    type_classes = case @type
+    when :error
+      "*:data-[slot=header]:bg-red-600/90 *:data-[slot=header]:text-white"
+    else
+      "*:data-[slot=header]:bg-gray-50"
+    end
+
+    merge_classes([default_classes, type_classes, @options[:class]].compact.join(" "))
+  end
+
+  def icon
+    case @type
+    when :error
+      "exclamation-triangle"
+    else
+      "info-circle"
+    end
+  end
+
+  def default_classes
+    "border border-zinc-950/10 rounded-lg overflow-hidden transition-opacity duration-300 ease-out opacity-100"
+  end
+end

data/app/components/lightning_ui/base_component.rb

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

data/app/components/lightning_ui/button_component.html.erb

@@ -0,0 +1,13 @@
+<% if @url %>
+  <%= link_to @url, class: classes, data: data_attributes do %>
+    <%= content %>
+  <% end %>
+<% else %>
+  <%= content_tag :button,
+    class: classes,
+    data: data_attributes,
+    disabled: @disabled,
+    type: @type do %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/lightning_ui/button_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+class LightningUi::ButtonComponent < LightningUi::BaseComponent
+  def initialize(type: :button, style: :default, size: :default, disabled: false, url: nil, **options)
+    @type = type
+    @style = style
+    @size = size
+    @disabled = disabled
+    @url = url
+    @options = options
+  end
+
+  def data_attributes
+    @options[:data] || {}
+  end
+
+  def classes
+    class_list = []
+    class_list << @options[:class]
+
+    case @style
+    when :outline
+      class_list << outline_classes
+    when :destructive
+      class_list << default_classes
+      class_list << destructive_classes
+    else
+      class_list << default_classes
+    end
+
+    case @size
+    when :small
+      class_list << "text-xs"
+    when :default
+      class_list << "text-base/6 font-semibold sm:text-sm/6"
+    end
+
+    merge_classes(class_list.compact.join(" "))
+  end
+
+  def destructive_classes
+    "text-white border-red-500 hover:bg-red-600 active:bg-red-700\
+      [--btn-bg:var(--color-red-600)]\
+      [--btn-border:var(--color-red-950)]/90
+      [--btn-hover-overlay:var(--color-white)]/10\
+      [--btn-icon:var(--color-red-400)]\
+      active:[--btn-icon:var(--color-zinc-300)] hover:[--btn-icon:var(--color-zinc-300)] cursor-pointer"
+  end
+
+  # TODO:
+  def default_classes
+    "relative isolate rounded-lg border inline-flex items-baseline justify-center gap-x-2 px-4 py-2 sm:px-[calc(--spacing(3)-1px)]\
+      sm:py-[calc(--spacing(1.5)-1px)] focus:outline-hidden *:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5\
+      *:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon)\
+      sm:*:data-[slot=icon]:my-1 sm:*:data-[slot=icon]:size-4 border-transparent bg-(--btn-border) before:absolute before:inset-0\
+      before:-z-10 before:rounded-[calc(var(--radius-lg)-1px)] before:bg-(--btn-bg) before:shadow-sm after:absolute after:inset-0
+      after:-z-10 after:rounded-[calc(var(--radius-lg)-1px)] after:shadow-[shadow:inset_0_1px_--theme(--color-white/15%)]\
+      active:after:bg-(--btn-hover-overlay) hover:after:bg-(--btn-hover-overlay) disabled:opacity-50 disabled:before:shadow-none disabled:after:shadow-none\
+      text-white\
+      [--btn-bg:var(--color-zinc-900)]\
+      [--btn-border:var(--color-zinc-950)]/90
+      [--btn-hover-overlay:var(--color-white)]/10\
+      [--btn-icon:var(--color-zinc-400)]\
+      active:[--btn-icon:var(--color-zinc-300)] hover:[--btn-icon:var(--color-zinc-300)] cursor-pointer"
+  end
+
+  def outline_classes
+    "relative isolate inline-flex items-baseline justify-center gap-x-2 rounded-lg border 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)] focus:outline-hidden focus:outline focus:outline-2 focus:outline-offset-2\
+      focus:outline-blue-500 disabled:opacity-50 *:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:size-5\
+      *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) sm:*:data-[slot=icon]:my-1\
+      sm:*:data-[slot=icon]:size-4 border-zinc-950/10 text-zinc-950 active:bg-zinc-950/[2.5%] hover:bg-zinc-950/[2.5%]\
+      [--btn-icon:var(--color-zinc-500)] active:[--btn-icon:var(--color-zinc-700)] hover:[--btn-icon:var(--color-zinc-700)] cursor-pointer"
+  end
+end

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

@@ -0,0 +1,37 @@
+<div data-controller="lui-checkbox" data-slot="field" class="grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr] *:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:justify-self-center *:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1 *:data-[slot=label]:justify-self-start *:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2 has-data-[slot=description]:**:data-[slot=label]:font-medium" data-headlessui-state="">
+  <span
+    data-lui-checkbox-target="control"
+    data-slot="control"
+    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">
+      <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>
+      </svg>
+    </span>
+  </span>
+  <% if @label %>
+    <label data-slot="label" class="text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6" id="headlessui-label-:r2o:" for="headlessui-control-:r2m:" data-headlessui-state=""
+      data-action="click->lui-checkbox#toggle"
+      >
+      <%= @label %>
+    </label>
+  <% end %>
+  <% if @description %>
+    <p data-slot="description" class="text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6" id="headlessui-description-:r2p:" data-headlessui-state="">
+    <%= @description %>
+    </p>
+  <% end %>
+  <% if @form %>
+    <%= @form.hidden_field(@name, value: @checked, data: { lui_checkbox_target: "field" }) %>
+  <% else %>
+    <%= hidden_field(
+      nil,
+      @name,
+      value: @checked,
+      data: { lui_checkbox_target: "field" }
+    ) %>
+<% end %>
+</div>

data/app/components/lightning_ui/checkbox_component.rb

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

data/app/components/lightning_ui/description_list/item_component.html.erb

@@ -0,0 +1,13 @@
+<dt class="col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 flex items-center">
+  <%= @label %>
+</dt>
+
+<dd class="pt-1 pb-3 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 sm:nth-2:border-none flex items-center">
+  <div class="w-full">
+    <% if @value %>
+      <%= @value %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </div>
+</dd>

data/app/components/lightning_ui/description_list/item_component.rb

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

data/app/components/lightning_ui/description_list_component.html.erb

@@ -0,0 +1,5 @@
+<dl class="grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6">
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+</dl>

data/app/components/lightning_ui/description_list_component.rb

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

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

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

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

@@ -0,0 +1,35 @@
+<div data-controller="lui-dropdown" class="relative">
+  <button type="button" data-action="lui-dropdown#toggle click@window->lui-dropdown#hide" class="flex items-center justify-between cursor-pointer w-full text-sm/6 font-medium text-zinc-700 hover:text-zinc-950">
+    <% if trigger? %>
+      <%= trigger %>
+    <% else %>
+      <%= @trigger_text %>
+    <% end %>
+
+    <% case @anchor.to_s %>
+    <% when "bottom_right" %>
+      <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+      </svg>
+    <% when "top_right" %>
+      <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 5 4-4 4 4"/>
+      </svg>
+    <% end %>
+  </button>
+
+  <div
+    data-lui-dropdown-target="menu"
+    class="<%=menu_classes %>"
+    data-transition-enter-from="opacity-0 scale-95"
+    data-transition-enter-to="opacity-100 scale-100"
+    data-transition-leave-from="opacity-100 scale-100"
+    data-transition-leave-to="opacity-0 scale-95"
+    >
+    <% items.each do |item| %>
+      <div class="px-4 py-2 text-sm/5 font-medium text-zinc-950 hover:bg-zinc-950/5">
+        <%= item %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/components/lightning_ui/dropdown_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class LightningUi::DropdownComponent < LightningUi::BaseComponent
+  renders_one :trigger
+  renders_many :items
+
+  def initialize(trigger_text: nil, anchor: :bottom_right, position: :bottom)
+    @trigger_text = trigger_text
+    @anchor = anchor
+    @position = position
+  end
+
+  def menu_classes
+    classes = %w[hidden transition transform p-1 origin-top-left absolute left-0 w-56 rounded-md shadow-lg bg-white ring-1 ring-zinc-950/10 focus:outline-none]
+    case @position.to_s
+    when "top"
+      classes << "mb-2 top-auto bottom-full"
+    when "bottom"
+      classes << "mt-2"
+    end
+    classes.join(" ")
+  end
+end

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

@@ -0,0 +1,99 @@
+<%= tag.div(
+  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
+      ) %>
+  <% 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 %>
+  <% 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">
+      <% 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",
+          disabled: @disabled,
+          autofocus: @autofocus,
+          placeholder: @placeholder
+        ) %>
+      <% when :email %>
+        <%= @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",
+          disabled: @disabled,
+          autofocus: @autofocus
+        ) %>
+      <% 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",
+          disabled: @disabled,
+          autofocus: @autofocus
+        ) %>
+      <% 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",
+          disabled: @disabled,
+          autofocus: @autofocus
+        ) %>
+      <% 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">
+      <% 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",
+          disabled: @disabled,
+          autofocus: @autofocus
+        ) %>
+      <% 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",
+          disabled: @disabled,
+          autofocus: @autofocus
+        ) %>
+      <% 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",
+          disabled: @disabled,
+          autofocus: @autofocus
+        ) %>
+      <% 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",
+          disabled: @disabled,
+          autofocus: @autofocus
+        ) %>
+      <% end %>
+    </span>
+  <% end %>
+<% end %>

data/app/components/lightning_ui/input_component.rb

@@ -0,0 +1,44 @@
+# 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)
+    @name = name
+    @value = value
+    @disabled = disabled
+    @autofocus = autofocus
+    @label = label
+    @form = form
+    @type = type
+    @description = description
+    @placeholder = placeholder
+    @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] || {}
+  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
+end

data/app/components/lightning_ui/link_component.html.erb

@@ -0,0 +1,7 @@
+<%= link_to(@url, class: "font-semibold hover:underline") do %>
+  <% if @content %>
+    <%= @content %>
+  <% else %>
+    <%= @title %>
+  <% end %>
+<% end %>

data/app/components/lightning_ui/link_component.rb

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

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

@@ -0,0 +1,27 @@
+<%= tag.dialog(id: @id, open: @open, data:) do %>
+  <div class="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16" aria-hidden="true" data-headlessui-state="open" data-open="" style=""></div>
+  <div class="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0">
+    <div class="grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4">
+      <div class="sm:max-w-3xl row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-(--gutter) ring-1 shadow-lg ring-zinc-950/10 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl forced-colors:outline transition duration-100 will-change-transform data-closed:translate-y-12 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:data-closed:translate-y-0 sm:data-closed:data-enter:scale-95" id="headlessui-dialog-panel-:r7:" data-headlessui-state="open" data-open="" style="">
+        <% if @title %>
+          <h2 class="text-lg/6 font-semibold text-balance text-zinc-950 sm:text-base/6" id="headlessui-dialog-title-:r8:" data-headlessui-state="open" data-open="">
+            <%= @title %>
+          </h2>
+        <% end %>
+        <% if @description %>
+          <p data-slot="text" id="headlessui-description-:r9:" data-headlessui-state="open" data-open="" class="mt-2 text-pretty text-base/6 text-zinc-500 sm:text-sm/6">
+          <%= @description %>
+          </p>
+        <% end %>
+        <%= body %>
+        <% if actions.any? %>
+          <div class="mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto">
+            <% actions.each do |action| %>
+              <%= action %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/lightning_ui/modal_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class LightningUi::ModalComponent < LightningUi::BaseComponent
+  renders_one :body
+  renders_many :actions
+
+  def initialize(id:, title:, description: nil, open: false, **options)
+    @id = id
+    @title = title
+    @description = description
+    @open = open
+    @options = options
+  end
+
+  def data
+    {
+      controller: "lui-modal",
+      lui_modal_target: "dialog"
+    }.merge(@options[:data] || {})
+  end
+end

data/app/components/lightning_ui/pagination_component.html.erb

@@ -0,0 +1,21 @@
+<%= tag.div(class: "items-center gap-x-2 sm:flex") do %>
+  <% if @with_arrows %>
+    <%= link_to(url(@current_page - 1), class: link_classes, data: data(disabled: @current_page == 1)) do %>
+      <%= heroicon("chevron-left", options: { class: "w-5 h-5" }) %>
+    <% end %>
+  <% end %>
+
+  <% pages_with_gaps.each do |page| %>
+    <% if page == :gap %>
+      <span aria-hidden="true" class="w-[2.25rem] text-center text-sm/6 font-semibold text-zinc-950 select-none">…</span>
+    <% else %>
+      <%= link_to(page, url(page), class: link_classes, data: data(active: @current_page == page)) %>
+    <% end %>
+  <% end %>
+
+  <% if @with_arrows %>
+    <%= link_to(url(@current_page + 1), class: link_classes, data: data(disabled: @current_page == @total_pages)) do %>
+      <%= heroicon("chevron-right", options: {class: "w-5 h-5" }) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/lightning_ui/pagination_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class LightningUi::PaginationComponent < LightningUi::BaseComponent
+  def initialize(current_page:, total_pages:, path:, page_param: "page", with_arrows: false, **options)
+    @current_page = current_page
+    @total_pages = total_pages
+    @with_arrows = with_arrows
+    @path = path
+    @page_param = page_param
+    @options = options
+  end
+
+  def data(disabled: false, active: false)
+    {}.tap do |data|
+      data[:disabled] = true if disabled
+      data[:active] = true if active
+    end
+  end
+
+  def link_classes
+    "min-w-[2.25rem] flex items-center justify-center rounded-lg border text-base/6 font-semibold 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)] sm:text-sm/6 \
+      focus:outline-hidden focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-500\
+      data-disabled:opacity-50 data-disabled:pointer-events-none border-transparent text-zinc-950 data-active:bg-zinc-950/5 hover:bg-zinc-950/5"
+  end
+
+  def pages_with_gaps
+    return (1..@total_pages).to_a if @total_pages <= 7
+
+    (1..@total_pages).to_a.each_with_object([]) do |page, pages|
+      if page == 1 || page == @total_pages || page == @current_page || (page - @current_page).abs <= 2
+        pages << page
+      elsif pages.last != :gap
+        pages << :gap
+      end
+    end
+  end
+
+  def url(page)
+    "#{@path}?#{@page_param}=#{page}"
+  end
+end