lightning_ui_kit 0.3.5 → 0.4.1

data/app/components/lightning_ui_kit/menubar_component.rb

@@ -0,0 +1,21 @@
+class LightningUiKit::MenubarComponent < LightningUiKit::BaseComponent
+  renders_many :menus, LightningUiKit::Menubar::MenuComponent
+
+  def initialize(**options)
+    @options = options
+  end
+
+  def classes
+    merge_classes([
+      "lui:flex lui:h-9 lui:items-center lui:gap-1 lui:rounded-md lui:border lui:border-border lui:bg-surface lui:p-1",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def data
+    {
+      controller: "lui-menubar",
+      action: "keydown.esc@window->lui-menubar#closeAll click@window->lui-menubar#closeOnOutside"
+    }.merge(@options[:data] || {})
+  end
+end

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

@@ -1,27 +1,47 @@
-<%= 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-surface-overlay 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" 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-surface-secondary lui:p-(--gutter) lui:ring-1 lui:shadow-lg lui:ring-border 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-foreground lui:sm:text-base/6" data-open="">
-            <%= @title %>
-          </h2>
-        <% end %>
-        <% if @description %>
-          <p data-slot="text" data-open="" class="lui:mt-2 lui:text-pretty lui:text-base/6 lui:text-foreground-muted lui:sm:text-sm/6">
-          <%= @description %>
-          </p>
-        <% end %>
-        <%= body %>
-        <% if actions.any? %>
-          <div class="lui:mt-8 lui:flex lui:flex-col-reverse lui:items-center lui:justify-end lui:gap-3 *:lui:w-full lui:sm:flex-row lui:sm:*:w-auto">
-            <% actions.each do |action| %>
-              <%= action %>
-            <% end %>
-          </div>
-        <% end %>
+<%= tag.div(id: @id, data: data) do %>
+  <% if trigger? %>
+    <div data-action="click->lui-modal#open" class="lui:inline-block lui:cursor-pointer">
+      <%= trigger %>
+    </div>
+  <% end %>
+
+  <%= tag.dialog(role: dialog_role, data: {lui_modal_target: "dialog"}, class: "lui:fixed lui:inset-0 lui:m-0 lui:h-full lui:max-h-none lui:w-full lui:max-w-none lui:overflow-hidden lui:bg-transparent lui:backdrop:bg-transparent") do %>
+    <div
+      data-lui-modal-target="overlay"
+      class="lui:fixed lui:inset-0 lui:bg-surface-overlay lui:transition-opacity lui:duration-200 <%= overlay_closed_class %>"
+    ></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" data-action="click->lui-modal#closeOnBackdrop">
+        <div class="lui:row-start-2 lui:w-full lui:min-w-0 lui:rounded-t-3xl lui:bg-surface-secondary lui:p-(--gutter) lui:ring-1 lui:shadow-lg lui:ring-border lui:[--gutter:--spacing(8)] lui:sm:mb-auto lui:sm:rounded-2xl lui:forced-colors:outline lui:transition-all lui:duration-200 lui:ease-out lui:will-change-transform <%= panel_width_class %> <%= panel_closed_class %>" data-lui-modal-target="panel">
+          <% if @title %>
+            <h2 class="lui:text-lg/6 lui:font-semibold lui:text-balance lui:text-foreground lui:sm:text-base/6">
+              <%= @title %>
+            </h2>
+          <% end %>
+          <% if @description %>
+            <p data-slot="text" class="lui:mt-2 lui:text-pretty lui:text-base/6 lui:text-foreground-muted lui:sm:text-sm/6">
+            <%= @description %>
+            </p>
+          <% end %>
+          <%= body %>
+          <% if alert? %>
+            <div class="lui:mt-8 lui:flex lui:flex-col-reverse lui:items-center lui:justify-end lui:gap-3 *:lui:w-full lui:sm:flex-row lui:sm:*:w-auto">
+              <%= render LightningUiKit::ButtonComponent.new(style: :outline, data: {action: "click->lui-modal#close"}).with_content(cancel_text) %>
+              <% if confirm? %>
+                <%= confirm %>
+              <% else %>
+                <%= render LightningUiKit::ButtonComponent.new(style: confirm_button_style, data: {action: "click->lui-modal#confirm"}).with_content(confirm_text) %>
+              <% end %>
+            </div>
+          <% elsif actions.any? %>
+            <div class="lui:mt-8 lui:flex lui:flex-col-reverse lui:items-center lui:justify-end lui:gap-3 *:lui:w-full lui:sm:flex-row lui:sm:*:w-auto">
+              <% actions.each do |action| %>
+                <%= action %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
       </div>
     </div>
-  </div>
+  <% end %>
 <% end %>

data/app/components/lightning_ui_kit/modal_component.rb

@@ -1,19 +1,59 @@
 class LightningUiKit::ModalComponent < LightningUiKit::BaseComponent
+  renders_one :trigger
   renders_one :body
   renders_many :actions
+  # Alert variant: optional custom confirm action (e.g. a `button_to`/form).
+  # When absent a default confirm button is rendered that dispatches `lui-modal:confirm`.
+  renders_one :confirm
 
-  def initialize(id:, title:, description: nil, open: false, **options)
+  VARIANTS = %i[default alert].freeze
+
+  def initialize(id: nil, title: nil, description: nil, open: false, variant: :default,
+    confirm_text: "Continue", cancel_text: "Cancel", confirm_style: :default, **options)
     @id = id
     @title = title
     @description = description
     @open = open
+    @variant = VARIANTS.include?(variant) ? variant : :default
+    @confirm_text = confirm_text
+    @cancel_text = cancel_text
+    @confirm_style = confirm_style
     @options = options
   end
 
+  attr_reader :confirm_text, :cancel_text
+
+  def alert?
+    @variant == :alert
+  end
+
+  def dialog_role
+    alert? ? "alertdialog" : nil
+  end
+
+  def panel_width_class
+    alert? ? "lui:sm:max-w-lg" : "lui:sm:max-w-3xl"
+  end
+
+  def confirm_button_style
+    (@confirm_style == :destructive) ? :destructive : :default
+  end
+
+  def panel_closed_class
+    "lui:opacity-0 lui:scale-95"
+  end
+
+  def overlay_closed_class
+    "lui:opacity-0"
+  end
+
   def data
     {
       controller: "lui-modal",
-      lui_modal_target: "dialog"
+      lui_modal_open_value: @open,
+      lui_modal_dismissable_value: !alert?,
+      lui_modal_panel_closed_class: panel_closed_class,
+      lui_modal_overlay_closed_class: overlay_closed_class
     }.merge(@options[:data] || {})
   end
 end

data/app/components/lightning_ui_kit/navigation_menu/item_component.html.erb

@@ -0,0 +1 @@
+<%= content %>

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

@@ -0,0 +1,13 @@
+class LightningUiKit::NavigationMenu::ItemComponent < LightningUiKit::BaseComponent
+  attr_reader :title, :href
+
+  def initialize(title:, href: nil, **options)
+    @title = title
+    @href = href
+    @options = options
+  end
+
+  def link?
+    @href.present?
+  end
+end

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

@@ -0,0 +1,27 @@
+<%= tag.nav(class: classes, data: data) do %>
+  <ul class="lui:flex lui:items-center lui:gap-1">
+    <% items.each do |item| %>
+      <li
+        class="lui:relative"
+        data-lui-navigation-menu-target="item"
+        data-action="mouseenter->lui-navigation-menu#open mouseleave->lui-navigation-menu#scheduleClose"
+      >
+        <% if item.link? %>
+          <a href="<%= item.href %>" class="<%= trigger_classes %>"><%= item.title %></a>
+        <% else %>
+          <button type="button" class="<%= trigger_classes %> lui:group" aria-expanded="false" data-action="click->lui-navigation-menu#toggle">
+            <%= item.title %>
+            <%= heroicon("chevron-down", variant: :outline, options: {class: "lui:size-3.5 lui:transition-transform lui:group-data-[state=open]:rotate-180"}) %>
+          </button>
+          <div
+            class="<%= content_classes %>"
+            data-lui-navigation-menu-target="content"
+            data-action="mouseenter->lui-navigation-menu#cancelClose mouseleave->lui-navigation-menu#scheduleClose"
+          >
+            <%= item %>
+          </div>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+<% end %>

data/app/components/lightning_ui_kit/navigation_menu_component.rb

@@ -0,0 +1,26 @@
+class LightningUiKit::NavigationMenuComponent < LightningUiKit::BaseComponent
+  renders_many :items, LightningUiKit::NavigationMenu::ItemComponent
+
+  def initialize(**options)
+    @options = options
+  end
+
+  def classes
+    merge_classes([
+      "lui:relative lui:z-10 lui:flex lui:max-w-max lui:flex-1 lui:items-center lui:justify-center",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def trigger_classes
+    "lui:inline-flex lui:h-9 lui:w-max lui:items-center lui:justify-center lui:gap-1 lui:rounded-md lui:px-4 lui:py-2 lui:text-sm lui:font-medium lui:text-foreground lui:transition-colors lui:hover:bg-surface-hover lui:focus:outline-none lui:data-[state=open]:bg-surface-hover"
+  end
+
+  def content_classes
+    "lui:hidden lui:absolute lui:left-0 lui:top-full lui:mt-1.5 lui:min-w-[12rem] lui:rounded-md lui:border lui:border-border lui:bg-surface lui:p-2 lui:text-foreground lui:shadow-lg"
+  end
+
+  def data
+    {controller: "lui-navigation-menu"}.merge(@options[:data] || {})
+  end
+end

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

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

data/app/components/lightning_ui_kit/pagination_component.rb

@@ -17,8 +17,7 @@ class LightningUiKit::PaginationComponent < LightningUiKit::BaseComponent
   end
 
   def link_classes
-    "lui:min-w-[2.25rem] lui:flex lui:items-center lui:justify-center lui:rounded-lg lui:border lui:text-base/6 lui:font-semibold 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:sm:text-sm/6 \
+    "lui:min-w-10 lui:h-10 lui:sm:min-w-9 lui:sm:h-9 lui:flex lui:items-center lui:justify-center lui:rounded-lg lui:border lui:text-base/6 lui:font-semibold lui:sm:text-sm/6 \
      lui:focus:outline-hidden lui:focus:outline lui:focus:outline-2 lui:focus:outline-offset-2 lui:focus:outline-focus \
      lui:data-[disabled]:opacity-50 lui:data-[disabled]:pointer-events-none lui:border-transparent lui:text-foreground \
      lui:data-[active]:bg-surface-hover lui:hover:bg-surface-hover"

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

@@ -0,0 +1,8 @@
+<%= tag.div(class: "lui:relative lui:inline-block", data: data) do %>
+  <div data-lui-popover-target="trigger" data-action="click->lui-popover#toggle">
+    <%= trigger %>
+  </div>
+  <div data-lui-popover-target="content" role="dialog" class="<%= content_classes %>">
+    <%= body %>
+  </div>
+<% end %>

data/app/components/lightning_ui_kit/popover_component.rb

@@ -0,0 +1,32 @@
+class LightningUiKit::PopoverComponent < LightningUiKit::BaseComponent
+  renders_one :trigger
+  renders_one :body
+
+  POSITIONS = %w[
+    top bottom left right
+    top-start top-end bottom-start bottom-end
+    left-start left-end right-start right-end
+  ].freeze
+
+  def initialize(position: :bottom, offset: 8, **options)
+    @position = POSITIONS.include?(position.to_s) ? position.to_s : "bottom"
+    @offset = offset
+    @options = options
+  end
+
+  def content_classes
+    merge_classes([
+      "lui:hidden lui:z-50 lui:w-72 lui:rounded-md lui:border lui:border-border lui:bg-surface lui:p-4 lui:text-foreground lui:shadow-md lui:outline-none",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def data
+    {
+      controller: "lui-popover",
+      lui_popover_position_value: @position,
+      lui_popover_offset_value: @offset,
+      action: "keydown.esc@window->lui-popover#hide click@window->lui-popover#hideOnClickOutside"
+    }.merge(@options[:data] || {})
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= tag.div(class: classes, data: data, **aria_attributes) do %>
+  <div class="lui:h-full lui:rounded-full lui:bg-surface-invert lui:transition-all lui:duration-300 lui:ease-out" style="<%= indicator_style %>"></div>
+<% end %>

data/app/components/lightning_ui_kit/progress_component.rb

@@ -0,0 +1,39 @@
+class LightningUiKit::ProgressComponent < LightningUiKit::BaseComponent
+  def initialize(value: 0, max: 100, **options)
+    @value = value.to_f
+    @max = max.to_f
+    @options = options
+  end
+
+  def percent
+    return 0 if @max <= 0
+
+    ((@value / @max) * 100).clamp(0, 100)
+  end
+
+  def classes
+    merge_classes([
+      "lui:relative lui:h-2 lui:w-full lui:overflow-hidden lui:rounded-full lui:bg-surface-tertiary",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def indicator_style
+    value = percent
+    formatted = (value % 1).zero? ? value.to_i : value.round(2)
+    "width: #{formatted}%;"
+  end
+
+  def aria_attributes
+    {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": @max.to_i,
+      "aria-valuenow": @value.to_i
+    }
+  end
+
+  def data
+    @options[:data] || {}
+  end
+end

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

@@ -0,0 +1,17 @@
+<%= tag.div(class: classes, data: data) do %>
+  <div data-lui-resizable-target="panelOne" class="lui:grow-0 lui:shrink-0 lui:overflow-auto" style="<%= panel_one_style %>">
+    <%= panel_one %>
+  </div>
+  <div
+    data-lui-resizable-target="handle"
+    data-action="pointerdown->lui-resizable#start"
+    role="separator"
+    aria-orientation="<%= horizontal? ? "vertical" : "horizontal" %>"
+    class="<%= handle_classes %>"
+  >
+    <span class="<%= grip_classes %>"></span>
+  </div>
+  <div class="lui:flex-1 lui:overflow-auto">
+    <%= panel_two %>
+  </div>
+<% end %>

data/app/components/lightning_ui_kit/resizable_component.rb

@@ -0,0 +1,52 @@
+class LightningUiKit::ResizableComponent < LightningUiKit::BaseComponent
+  renders_one :panel_one
+  renders_one :panel_two
+
+  DIRECTIONS = %i[horizontal vertical].freeze
+
+  def initialize(direction: :horizontal, initial: 50, **options)
+    @direction = DIRECTIONS.include?(direction) ? direction : :horizontal
+    @initial = initial
+    @options = options
+  end
+
+  def horizontal?
+    @direction == :horizontal
+  end
+
+  def classes
+    layout = horizontal? ? "lui:flex-row" : "lui:flex-col"
+    merge_classes([
+      "lui:flex lui:h-full lui:w-full lui:overflow-hidden lui:rounded-lg lui:border lui:border-border",
+      layout,
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def panel_one_style
+    "flex-basis: #{@initial}%;"
+  end
+
+  def handle_classes
+    if horizontal?
+      "lui:relative lui:flex lui:w-px lui:shrink-0 lui:cursor-col-resize lui:items-center lui:justify-center lui:bg-border lui:transition-colors lui:hover:bg-interactive"
+    else
+      "lui:relative lui:flex lui:h-px lui:shrink-0 lui:cursor-row-resize lui:items-center lui:justify-center lui:bg-border lui:transition-colors lui:hover:bg-interactive"
+    end
+  end
+
+  def grip_classes
+    if horizontal?
+      "lui:absolute lui:h-8 lui:w-1 lui:rounded-full lui:bg-border-hover"
+    else
+      "lui:absolute lui:h-1 lui:w-8 lui:rounded-full lui:bg-border-hover"
+    end
+  end
+
+  def data
+    {
+      controller: "lui-resizable",
+      lui_resizable_direction_value: @direction.to_s
+    }.merge(@options[:data] || {})
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= tag.div(class: classes, data: data) do %>
+  <%= content %>
+<% end %>

data/app/components/lightning_ui_kit/scroll_area_component.rb

@@ -0,0 +1,32 @@
+class LightningUiKit::ScrollAreaComponent < LightningUiKit::BaseComponent
+  ORIENTATIONS = %i[vertical horizontal both].freeze
+
+  def initialize(orientation: :vertical, **options)
+    @orientation = ORIENTATIONS.include?(orientation) ? orientation : :vertical
+    @options = options
+  end
+
+  def classes
+    scrollbar = "lui:[scrollbar-width:thin] " \
+      "lui:[&::-webkit-scrollbar]:h-2 lui:[&::-webkit-scrollbar]:w-2 " \
+      "lui:[&::-webkit-scrollbar-track]:bg-transparent " \
+      "lui:[&::-webkit-scrollbar-thumb]:rounded-full lui:[&::-webkit-scrollbar-thumb]:bg-border-hover " \
+      "lui:[&::-webkit-scrollbar-thumb:hover]:bg-foreground-faint"
+
+    merge_classes(["lui:relative", overflow_classes, scrollbar, @options[:class]].compact.join(" "))
+  end
+
+  def data
+    @options[:data] || {}
+  end
+
+  private
+
+  def overflow_classes
+    case @orientation
+    when :horizontal then "lui:overflow-x-auto lui:overflow-y-hidden"
+    when :both then "lui:overflow-auto"
+    else "lui:overflow-y-auto lui:overflow-x-hidden"
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= tag.div(class: classes, data: data, **aria_attributes) %>

data/app/components/lightning_ui_kit/separator_component.rb

@@ -0,0 +1,36 @@
+class LightningUiKit::SeparatorComponent < LightningUiKit::BaseComponent
+  ORIENTATIONS = %i[horizontal vertical].freeze
+
+  def initialize(orientation: :horizontal, decorative: true, **options)
+    @orientation = ORIENTATIONS.include?(orientation) ? orientation : :horizontal
+    @decorative = decorative
+    @options = options
+  end
+
+  def classes
+    orientation_classes =
+      if @orientation == :vertical
+        "lui:h-full lui:w-px"
+      else
+        "lui:h-px lui:w-full"
+      end
+
+    merge_classes([
+      "lui:shrink-0 lui:bg-border",
+      orientation_classes,
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def aria_attributes
+    if @decorative
+      {role: "none"}
+    else
+      {role: "separator", "aria-orientation": @orientation.to_s}
+    end
+  end
+
+  def data
+    @options[:data] || {}
+  end
+end

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

@@ -0,0 +1,53 @@
+<%= tag.div(data: data) do %>
+  <% if trigger? %>
+    <div data-action="click->lui-sheet#open" class="lui:inline-block lui:cursor-pointer">
+      <%= trigger %>
+    </div>
+  <% end %>
+
+  <dialog
+    id="<%= @id %>"
+    data-lui-sheet-target="dialog"
+    class="lui:fixed lui:inset-0 lui:m-0 lui:h-full lui:max-h-none lui:w-full lui:max-w-none lui:overflow-hidden lui:bg-transparent lui:backdrop:bg-transparent"
+  >
+    <div
+      data-lui-sheet-target="overlay"
+      data-action="click->lui-sheet#close"
+      class="lui:fixed lui:inset-0 lui:bg-surface-overlay lui:transition-opacity lui:duration-300 <%= overlay_closed_class %>"
+    ></div>
+
+    <div data-lui-sheet-target="panel" class="<%= panel_classes %> <%= panel_closed_class %>">
+      <button
+        type="button"
+        data-action="click->lui-sheet#close"
+        aria-label="Close"
+        class="lui:absolute lui:right-4 lui:top-4 lui:rounded-sm lui:text-foreground-muted lui:transition-colors lui:hover:text-foreground lui:focus:outline-focus"
+      >
+        <%= heroicon("x-mark", variant: :outline, options: {class: "lui:size-5"}) %>
+      </button>
+
+      <% if @title || @description %>
+        <div class="lui:flex lui:flex-col lui:gap-1.5">
+          <% if @title %>
+            <h2 class="lui:text-lg lui:font-semibold lui:text-foreground"><%= @title %></h2>
+          <% end %>
+          <% if @description %>
+            <p class="lui:text-sm lui:text-foreground-muted"><%= @description %></p>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div class="lui:flex-1 lui:overflow-y-auto">
+        <%= body %>
+      </div>
+
+      <% if actions.any? %>
+        <div class="lui:flex lui:flex-col-reverse lui:gap-2 lui:sm:flex-row lui:sm:justify-end">
+          <% actions.each do |action| %>
+            <%= action %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </dialog>
+<% end %>

data/app/components/lightning_ui_kit/sheet_component.rb

@@ -0,0 +1,60 @@
+class LightningUiKit::SheetComponent < LightningUiKit::BaseComponent
+  renders_one :trigger
+  renders_one :body
+  renders_many :actions
+
+  SIDES = %i[top right bottom left].freeze
+
+  def initialize(id: nil, title: nil, description: nil, side: :right, **options)
+    @id = id
+    @title = title
+    @description = description
+    @side = SIDES.include?(side) ? side : :right
+    @options = options
+  end
+
+  def panel_classes
+    merge_classes([
+      "lui:fixed lui:z-50 lui:flex lui:flex-col lui:gap-4 lui:bg-surface lui:p-6 lui:text-foreground lui:shadow-lg lui:transition-transform lui:duration-300 lui:ease-in-out",
+      side_classes,
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  # Class(es) applied to the panel while the sheet is closed (offscreen).
+  def panel_closed_class
+    case @side
+    when :left then "lui:-translate-x-full"
+    when :top then "lui:-translate-y-full"
+    when :bottom then "lui:translate-y-full"
+    else "lui:translate-x-full"
+    end
+  end
+
+  def overlay_closed_class
+    "lui:opacity-0"
+  end
+
+  def data
+    {
+      controller: "lui-sheet",
+      lui_sheet_panel_closed_class: panel_closed_class,
+      lui_sheet_overlay_closed_class: overlay_closed_class
+    }.merge(@options[:data] || {})
+  end
+
+  private
+
+  def side_classes
+    case @side
+    when :left
+      "lui:inset-y-0 lui:left-0 lui:h-full lui:w-3/4 lui:max-w-sm lui:border-r lui:border-border"
+    when :top
+      "lui:inset-x-0 lui:top-0 lui:w-full lui:border-b lui:border-border"
+    when :bottom
+      "lui:inset-x-0 lui:bottom-0 lui:w-full lui:border-t lui:border-border"
+    else
+      "lui:inset-y-0 lui:right-0 lui:h-full lui:w-3/4 lui:max-w-sm lui:border-l lui:border-border"
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<%= tag.div(class: classes, data: data) do %>
+  <div class="lui:absolute lui:inset-x-0 lui:h-1.5 lui:rounded-full lui:bg-surface-tertiary"></div>
+  <div data-lui-slider-target="fill" class="lui:absolute lui:left-0 lui:h-1.5 lui:rounded-full lui:bg-surface-invert" style="<%= fill_style %>"></div>
+  <div data-lui-slider-target="thumb" class="lui:absolute lui:size-4 lui:-translate-x-1/2 lui:rounded-full lui:border lui:border-border-invert lui:bg-surface lui:shadow-sm lui:pointer-events-none" style="<%= thumb_style %>"></div>
+  <%= tag.input(
+        type: "range",
+        name: input_name,
+        min: min,
+        max: max,
+        step: step,
+        value: value,
+        disabled: disabled,
+        role: "slider",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        data: {lui_slider_target: "input"},
+        class: "lui:absolute lui:inset-0 lui:h-full lui:w-full lui:cursor-pointer lui:opacity-0 lui:disabled:cursor-not-allowed"
+      ) %>
+<% end %>