lightning_ui_kit 0.2.3 → 0.2.5

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

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

data/app/components/lightning_ui_kit/input_component.rb

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

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

@@ -0,0 +1,118 @@
+<div class="lui:relative lui:isolate lui:flex lui:h-screen lui:w-full lui:bg-white lui:max-lg:flex-col lui:max-lg:h-auto lui:max-lg:min-h-screen lui:lg:bg-zinc-100 lui:overflow-hidden" data-controller="lui-layout">
+  <%# Desktop Sidebar (fixed, hidden on mobile) %>
+  <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:max-lg:hidden lui:z-10">
+    <nav class="lui:flex lui:h-full lui:min-h-0 lui:flex-col">
+      <%# Sidebar content %>
+      <div class="lui:flex lui:flex-1 lui:flex-col lui:overflow-y-auto lui:p-4">
+        <% if header? %>
+          <div class="lui:mb-4">
+            <%= header %>
+          </div>
+        <% end %>
+        <% if sections? %>
+          <div class="lui:space-y-6">
+            <% sections.each do |section| %>
+              <%= section %>
+            <% end %>
+          </div>
+        <% end %>
+        <%= sidebar %>
+      </div>
+
+      <%# Footer at bottom of sidebar %>
+      <% if footer? %>
+        <div class="lui:border-t lui:border-zinc-950/5">
+          <%= footer %>
+        </div>
+      <% end %>
+    </nav>
+  </div>
+
+  <%# Mobile Header (hidden on desktop) %>
+  <header class="lui:flex lui:items-center lui:px-4 lui:lg:hidden">
+    <div class="lui:py-2.5">
+      <button
+        type="button"
+        aria-label="Open navigation"
+        class="lui:cursor-pointer lui:relative lui:flex lui:min-w-0 lui:items-center lui:gap-3 lui:rounded-lg lui:p-2 lui:text-left lui:text-base/6 lui:font-medium lui:text-zinc-950 lui:sm:text-sm/5 lui:hover:bg-zinc-950/5"
+        data-action="lui-layout#openSidebar"
+      >
+        <span class="lui:absolute lui:top-1/2 lui:left-1/2 lui:size-[max(100%,2.75rem)] lui:-translate-x-1/2 lui:-translate-y-1/2 [@media(pointer:fine)]:lui:hidden" aria-hidden="true"></span>
+        <svg class="lui:size-6 lui:shrink-0 lui:fill-zinc-500 lui:sm:size-5" viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z"></path>
+        </svg>
+      </button>
+    </div>
+    <div class="lui:min-w-0 lui:flex-1">
+      <nav class="lui:flex lui:flex-1 lui:items-center lui:gap-4 lui:py-2.5">
+        <% if mobile_header? %>
+          <%= mobile_header %>
+        <% end %>
+      </nav>
+    </div>
+  </header>
+
+  <%# Mobile Sidebar Overlay %>
+  <div
+    class="lui:group lui:fixed lui:inset-0 lui:z-50 lui:invisible lui:data-[open]:visible"
+    data-lui-layout-target="overlay"
+  >
+    <%# Backdrop %>
+    <div
+      class="lui:fixed lui:inset-0 lui:bg-zinc-950/25 lui:opacity-0 lui:transition-opacity lui:duration-300 lui:group-data-[open]:opacity-100"
+      data-action="click->lui-layout#closeSidebar"
+    ></div>
+
+    <%# Mobile Sidebar Panel %>
+    <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:bg-white lui:-translate-x-full lui:transition-transform lui:duration-300 lui:ease-out lui:shadow-xl lui:group-data-[open]:translate-x-0">
+      <nav class="lui:flex lui:h-full lui:min-h-0 lui:flex-col">
+        <%# Close button %>
+        <div class="lui:flex lui:items-center lui:justify-end lui:p-4">
+          <button
+            type="button"
+            aria-label="Close navigation"
+            class="lui:cursor-pointer lui:rounded-lg lui:p-2 lui:hover:bg-zinc-950/5"
+            data-action="lui-layout#closeSidebar"
+          >
+            <svg class="lui:size-6 lui:fill-zinc-500" viewBox="0 0 20 20" aria-hidden="true">
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+            </svg>
+          </button>
+        </div>
+
+        <%# Sidebar content %>
+        <div class="lui:flex lui:flex-1 lui:flex-col lui:overflow-y-auto lui:p-4">
+          <% if header? %>
+            <div class="lui:mb-4">
+              <%= header %>
+            </div>
+          <% end %>
+          <% if sections? %>
+            <div class="lui:space-y-6">
+              <% sections.each do |section| %>
+                <%= section %>
+              <% end %>
+            </div>
+          <% end %>
+          <%= sidebar %>
+        </div>
+
+        <%# Footer %>
+        <% if footer? %>
+          <div class="lui:border-t lui:border-zinc-950/5">
+            <%= footer %>
+          </div>
+        <% end %>
+      </nav>
+    </div>
+  </div>
+
+  <%# Main Content Area %>
+  <main class="lui:flex lui:flex-1 lui:flex-col lui:min-h-0 lui:pb-4 lui:lg:min-w-0 lui:lg:pt-4 lui:lg:pr-4 <%= main_padding_class %>">
+    <div class="lui:flex-1 lui:min-h-0 lui:p-6 lui:lg:rounded-lg lui:lg:bg-white lui:lg:p-10 lui:lg:shadow-xs lui:lg:ring-1 lui:lg:ring-zinc-950/5 lui:lg:overflow-y-auto">
+      <div class="lui:mx-auto lui:max-w-6xl">
+        <%= content %>
+      </div>
+    </div>
+  </main>
+</div>

data/app/components/lightning_ui_kit/layout_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class LightningUiKit::LayoutComponent < LightningUiKit::BaseComponent
+  renders_one :sidebar
+  renders_one :header
+  renders_many :sections, LightningUiKit::SidebarSectionComponent
+  renders_one :footer
+  renders_one :mobile_header
+
+  def initialize(sidebar_width: "w-64", **options)
+    @sidebar_width = sidebar_width
+    @options = options
+  end
+
+  def sidebar_width_class
+    if @sidebar_width == "w-64"
+      "lui:lg:w-64"
+    else
+      "lui:lg:#{@sidebar_width}"
+    end
+  end
+
+  def main_padding_class
+    "lui:lg:pl-64"
+  end
+end

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

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

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

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

data/app/components/lightning_ui_kit/select_component.rb

@@ -15,41 +15,83 @@ class LightningUiKit::SelectComponent < LightningUiKit::BaseComponent
     @options = options
   end
 
-  def data
-    default_data = {
-      slot: "field",
-      action: "click->switch#toggle",
-      controller: "select",
-      disabled: @disabled
-    }
+  def classes
+    "lui:[&>[data-slot=label]+[data-slot=control]]:mt-3 lui:[&>[data-slot=label]+[data-slot=description]]:mt-1 lui:[&>[data-slot=description]+[data-slot=control]]:mt-3 lui:[&>[data-slot=control]+[data-slot=description]]:mt-3 lui:[&>[data-slot=control]+[data-slot=error]]:mt-3 lui:*:data-[slot=label]:font-medium"
+  end
 
-    default_data.merge(@options[:data] || {})
+  def data
+    {controller: "lui-field"}.merge(@options[:data] || {})
   end
 
   def select_data
-    {}.tap do |data|
-      if has_errors?
-        data[:invalid] = "true"
-      end
+    {lui_field_target: "field"}.merge(@options[:select_data] || {}).tap do |data|
+      data[:invalid] = "true" if has_errors?
     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
+    {slot: "control"}.merge(@options[:control_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
+      data[:invalid] = "true" if has_errors?
     end
   end
 
   def error_data
-    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "error"}.merge(@options[:error_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def label_data
+    {slot: "label"}.merge(@options[:label_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def description_data
+    {slot: "description"}.merge(@options[:description_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def label_html_options
+    {
+      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: label_data
+    }
+  end
+
+  def render_label
+    return unless @label
+
+    if @form
+      @form.label(@name, @label, **label_html_options)
+    else
+      helpers.label_tag(@name, @label, **label_html_options)
+    end
+  end
+
+  def select_classes
+    "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:py-[calc(--spacing(2.5)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:pr-[calc(--spacing(10)-1px)] lui:pl-[calc(--spacing(3.5)-1px)] lui:sm:pr-[calc(--spacing(9)-1px)] lui:sm:pl-[calc(--spacing(3)-1px)] lui:[&_optgroup]:font-semibold lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:data-[hover]:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:data-[hover]:border-red-500 lui:data-disabled:border-zinc-950/20 lui:data-disabled:opacity-100"
+  end
+
+  def control_classes
+    "lui:relative lui:block lui:w-full lui:before:pointer-events-none lui:before:absolute lui:before:inset-px lui:before:rounded-[7px] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-inset lui:focus-within:after:ring-2 lui:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none"
+  end
+
+  def select_html_options
+    {
+      multiple: @multiple,
+      class: select_classes,
+      data: select_data
+    }
+  end
+
+  def render_select
+    if @form
+      @form.select(@name, @options_for_select, {}, select_html_options)
+    else
+      helpers.select_tag(@name, helpers.options_for_select(@options_for_select), select_html_options)
     end
   end
 end

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

@@ -0,0 +1,6 @@
+<%= link_to @url, class: classes, data: data do %>
+  <% if @icon %>
+    <%= heroicon(@icon, options: { class: icon_classes }) %>
+  <% end %>
+  <span><%= @title %></span>
+<% end %>