kiso 0.2.1.pre → 0.3.0.pre

data/app/views/kiso/components/_button.html.erb

@@ -1,19 +1,33 @@
 <%# locals: (color: :primary, variant: :solid, size: :md, block: false,
-             type: :button, href: nil, disabled: false,
-             css_classes: "", **component_options) %>
-<% tag_name = href.present? ? :a : :button
-   if tag_name == :a
-     component_options[:href] = href
-     component_options[:"aria-disabled"] = true if disabled
-   else
-     component_options[:type] = type
-     component_options[:disabled] = true if disabled
-   end %>
-<%= content_tag tag_name,
-    class: Kiso::Themes::Button.render(
-      color: color, variant: variant, size: size, block: block,
-      class: css_classes),
-    data: kiso_prepare_options(component_options, slot: "button"),
-    **component_options do %>
-  <%= yield %>
+             type: :button, href: nil, method: nil, disabled: false,
+             form: {}, css_classes: "", **component_options) %>
+<%
+  css = Kiso::Themes::Button.render(
+    color: color, variant: variant, size: size, block: block, class: css_classes)
+  data = kiso_prepare_options(component_options, slot: "button")
+  use_button_to = href.present? && method.present? && method.to_s != "get"
+%>
+<% if use_button_to %>
+  <%= button_to href,
+      method: method,
+      class: css,
+      form_class: "contents",
+      data: data,
+      disabled: disabled || nil,
+      form: form.presence,
+      **component_options do %>
+    <%= yield %>
+  <% end %>
+<% elsif href.present? %>
+  <% component_options[:href] = href
+     component_options[:"aria-disabled"] = true if disabled %>
+  <%= content_tag :a, class: css, data: data, **component_options do %>
+    <%= yield %>
+  <% end %>
+<% else %>
+  <% component_options[:type] = type
+     component_options[:disabled] = true if disabled %>
+  <%= content_tag :button, class: css, data: data, **component_options do %>
+    <%= yield %>
+  <% end %>
 <% end %>

data/app/views/kiso/components/_dialog.html.erb

@@ -0,0 +1,11 @@
+<%# locals: (open: false, css_classes: "", **component_options) %>
+<%= content_tag :dialog,
+    class: Kiso::Themes::Dialog.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dialog",
+      controller: "kiso--dialog",
+      kiso__dialog_open_value: (open ? true : nil)),
+    **component_options do %>
+  <div class="<%= Kiso::Themes::DialogContent.render %>" data-slot="dialog-content">
+    <%= yield %>
+  </div>
+<% end %>

data/app/views/kiso/components/_slider.html.erb

@@ -0,0 +1,42 @@
+<%# locals: (min: 0, max: 100, step: 1, value: nil, name: nil, id: nil, disabled: false, size: :md, aria_label: nil, css_classes: "", **component_options) %>
+<% slider_value = value || min %>
+<% percent = ((slider_value.to_f - min) / (max - min) * 100).clamp(0, 100) %>
+<%= content_tag :div,
+    class: Kiso::Themes::Slider.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "slider",
+      controller: "kiso--slider",
+      kiso__slider_min_value: min,
+      kiso__slider_max_value: max,
+      kiso__slider_step_value: step),
+    **component_options do %>
+  <%= tag.input(type: :range,
+      id: id,
+      name: name,
+      min: min,
+      max: max,
+      step: step,
+      value: slider_value,
+      disabled: disabled,
+      aria: { label: aria_label },
+      tabindex: "-1",
+      class: "sr-only",
+      data: { kiso__slider_target: "input" }) %>
+  <%= tag.div(
+      class: Kiso::Themes::SliderTrack.render(size: size),
+      data: { slot: "slider-track", kiso__slider_target: "track" }) do %>
+    <%= tag.div(
+        class: Kiso::Themes::SliderRange.render,
+        style: "width: #{percent}%",
+        data: { slot: "slider-range", kiso__slider_target: "range" }) %>
+  <% end %>
+  <%= tag.div(
+      class: Kiso::Themes::SliderThumb.render(size: size),
+      role: :slider,
+      tabindex: (disabled ? "-1" : "0"),
+      aria: { valuemin: min, valuemax: max, valuenow: slider_value,
+              label: aria_label,
+              disabled: (disabled || nil) },
+      style: "position: absolute; left: #{percent}%",
+      data: { slot: "slider-thumb", kiso__slider_target: "thumb",
+              disabled: (disabled ? "true" : nil) }) %>
+<% end %>

data/app/views/kiso/components/alert_dialog/_action.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (color: :primary, variant: :solid, size: :md, css_classes: "", **component_options) %>
+<%= tag.button type: "button",
+    class: Kiso::Themes::Button.render(color: color, variant: variant, size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-action",
+      action: "kiso--dialog#close"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/alert_dialog/_cancel.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (color: :primary, variant: :outline, size: :md, css_classes: "", **component_options) %>
+<%= tag.button type: "button",
+    class: Kiso::Themes::Button.render(color: color, variant: variant, size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-cancel",
+      action: "kiso--dialog#close"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/alert_dialog/_description.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **component_options) %>
+<% component_options[:id] = "#{@_kiso_alert_dialog_id}-description" if @_kiso_alert_dialog_id && !component_options.key?(:id) %>
+<%= content_tag :p,
+    class: Kiso::Themes::AlertDialogDescription.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-description"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/alert_dialog/_footer.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::AlertDialogFooter.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-footer"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/alert_dialog/_header.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::AlertDialogHeader.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-header"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/alert_dialog/_media.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::AlertDialogMedia.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-media"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/alert_dialog/_title.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **component_options) %>
+<% component_options[:id] = "#{@_kiso_alert_dialog_id}-title" if @_kiso_alert_dialog_id && !component_options.key?(:id) %>
+<%= content_tag :h2,
+    class: Kiso::Themes::AlertDialogTitle.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "alert-dialog-title"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/dialog/_body.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DialogBody.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dialog-body"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/dialog/_close.html.erb

@@ -0,0 +1,10 @@
+<%# locals: (css_classes: "", **component_options) %>
+<% content = capture { yield }.presence %>
+<%= tag.button type: "button",
+    class: Kiso::Themes::DialogClose.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dialog-close",
+      action: "kiso--dialog#close"),
+    **component_options do %>
+  <%= content || kiso_component_icon(:x) %>
+  <span class="sr-only">Close</span>
+<% end %>

data/app/views/kiso/components/dialog/_description.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :p,
+    class: Kiso::Themes::DialogDescription.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dialog-description"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/dialog/_footer.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DialogFooter.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dialog-footer"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/dialog/_header.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DialogHeader.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dialog-header"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/dialog/_title.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :h2,
+    class: Kiso::Themes::DialogTitle.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dialog-title"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/empty/_actions.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::EmptyActions.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "empty-actions"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/lib/kiso/themes/alert_dialog.rb

@@ -0,0 +1,78 @@
+module Kiso
+  module Themes
+    # Alert dialog for confirmations that require an explicit user action.
+    # Wraps the native +<dialog>+ element with +role="alertdialog"+.
+    # Unlike {Dialog}, cannot be dismissed by backdrop click or Escape key.
+    #
+    # Reuses the +kiso--dialog+ Stimulus controller with
+    # +dismissable: false+.
+    #
+    # Sub-parts: {AlertDialogContent}, {AlertDialogHeader},
+    # {AlertDialogTitle}, {AlertDialogDescription}, {AlertDialogMedia},
+    # {AlertDialogFooter}, {AlertDialogAction}, {AlertDialogCancel}
+    AlertDialog = ClassVariants.build(
+      base: "fixed inset-0 z-50 m-0 h-full w-full max-w-none max-h-none bg-black/50 p-0 " \
+            "items-center justify-center backdrop:bg-transparent open:flex"
+    )
+
+    # The centered panel inside the {AlertDialog} overlay. Supports
+    # +size:+ variant (+:default+ or +:sm+).
+    AlertDialogContent = ClassVariants.build(
+      base: "bg-background text-foreground relative grid w-full max-w-[calc(100%-2rem)] " \
+            "gap-4 rounded-lg border p-6 shadow-lg outline-none group/alert-dialog-content",
+      variants: {
+        size: {
+          default: "sm:max-w-lg",
+          sm: "max-w-xs"
+        }
+      },
+      defaults: {size: :default}
+    )
+
+    # Grid container for {AlertDialogTitle}, {AlertDialogDescription},
+    # and optional {AlertDialogMedia}. Adapts layout responsively when
+    # media is present via +has-[...]+ selectors.
+    AlertDialogHeader = ClassVariants.build(
+      base: "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center " \
+            "has-[[data-slot=alert-dialog-media]]:grid-rows-[auto_auto_1fr] " \
+            "has-[[data-slot=alert-dialog-media]]:gap-x-6 " \
+            "sm:group-data-[size=default]/alert-dialog-content:place-items-start " \
+            "sm:group-data-[size=default]/alert-dialog-content:text-left " \
+            "sm:group-data-[size=default]/alert-dialog-content:has-[[data-slot=alert-dialog-media]]:grid-rows-[auto_1fr]"
+    )
+
+    # Action buttons container. Reversed column on mobile, horizontal
+    # on desktop. Grid layout when parent content is +:sm+ size.
+    AlertDialogFooter = ClassVariants.build(
+      base: "flex flex-col-reverse gap-2 " \
+            "group-data-[size=sm]/alert-dialog-content:grid " \
+            "group-data-[size=sm]/alert-dialog-content:grid-cols-2 " \
+            "sm:flex-row sm:justify-end"
+    )
+
+    # The alert dialog heading. Renders as +<h2>+. Shifts to column 2
+    # when media is present in default size.
+    AlertDialogTitle = ClassVariants.build(
+      base: "text-lg font-semibold " \
+            "sm:group-data-[size=default]/alert-dialog-content:group-has-[[data-slot=alert-dialog-media]]/alert-dialog-content:col-start-2"
+    )
+
+    # Descriptive text below the {AlertDialogTitle}.
+    AlertDialogDescription = ClassVariants.build(
+      base: "text-muted-foreground text-sm"
+    )
+
+    # Optional icon or image container in the header. Renders as a
+    # rounded box with muted background. Spans 2 rows in default size.
+    AlertDialogMedia = ClassVariants.build(
+      base: "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md " \
+            "sm:group-data-[size=default]/alert-dialog-content:row-span-2 " \
+            "*:[svg:not([class*='size-'])]:size-8"
+    )
+
+    # Action and Cancel buttons are styled directly via
+    # {Kiso::Themes::Button} in their partials — no theme constants
+    # needed. See +alert_dialog/_action.html.erb+ and
+    # +alert_dialog/_cancel.html.erb+.
+  end
+end

data/lib/kiso/themes/aspect_ratio.rb

@@ -0,0 +1,16 @@
+module Kiso
+  module Themes
+    # Displays content within a desired width-to-height ratio.
+    #
+    # @example
+    #   AspectRatio.render
+    #
+    # No variants — purely structural. The ratio is set via inline style
+    # on the partial (`aspect-ratio: <ratio>`).
+    #
+    # shadcn: Radix AspectRatio primitive with data-slot="aspect-ratio"
+    AspectRatio = ClassVariants.build(
+      base: "relative w-full"
+    )
+  end
+end

data/lib/kiso/themes/dashboard.rb

@@ -9,7 +9,7 @@ module Kiso
     )
 
     DashboardNavbarToggle = ClassVariants.build(
-      base: "flex items-center justify-center w-8 h-8 rounded-md text-foreground/50 hover:text-foreground hover:bg-accent transition-colors duration-150 shrink-0"
+      base: "flex items-center justify-center w-8 h-8 rounded-md text-foreground/50 hover:text-foreground hover:bg-accent transition-colors duration-150 shrink-0 [&>svg]:size-4"
     )
 
     DashboardSidebar = ClassVariants.build(
@@ -21,19 +21,19 @@ module Kiso
     )
 
     DashboardSidebarHeader = ClassVariants.build(
-      base: "shrink-0 flex items-center gap-1.5 px-4"
+      base: "shrink-0 flex flex-col gap-2 p-2"
     )
 
     DashboardSidebarFooter = ClassVariants.build(
-      base: "shrink-0 flex items-center gap-1.5 px-4 py-2"
+      base: "shrink-0 flex flex-col gap-2 p-2"
     )
 
     DashboardSidebarToggle = ClassVariants.build(
-      base: "lg:hidden flex items-center justify-center w-8 h-8 rounded-md text-foreground/50 hover:text-foreground hover:bg-accent transition-colors duration-150 shrink-0 cursor-pointer"
+      base: "lg:hidden flex items-center justify-center w-8 h-8 rounded-md text-foreground/50 hover:text-foreground hover:bg-accent transition-colors duration-150 shrink-0 cursor-pointer [&>svg]:size-4"
     )
 
     DashboardSidebarCollapse = ClassVariants.build(
-      base: "hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-foreground/50 hover:text-foreground hover:bg-accent transition-colors duration-150 shrink-0 cursor-pointer"
+      base: "hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-foreground/50 hover:text-foreground hover:bg-accent transition-colors duration-150 shrink-0 cursor-pointer [&>svg]:size-4"
     )
 
     DashboardToolbar = ClassVariants.build(

data/lib/kiso/themes/dialog.rb

@@ -0,0 +1,57 @@
+module Kiso
+  module Themes
+    # Modal dialog wrapping the native +<dialog>+ element. Opens with
+    # +showModal()+ via a Stimulus controller for proper focus trapping,
+    # backdrop, and Escape-to-close behavior.
+    #
+    # The dialog element itself acts as the backdrop overlay (same
+    # pattern as {CommandDialog}). A {DialogContent} wrapper inside
+    # provides the centered panel.
+    #
+    # Sub-parts: {DialogContent}, {DialogHeader}, {DialogTitle},
+    # {DialogDescription}, {DialogBody}, {DialogFooter}, {DialogClose}
+    Dialog = ClassVariants.build(
+      base: "fixed inset-0 z-50 m-0 h-full w-full max-w-none max-h-none bg-black/50 p-0 " \
+            "items-center justify-center backdrop:bg-transparent open:flex"
+    )
+
+    # The centered panel inside the {Dialog} overlay.
+    DialogContent = ClassVariants.build(
+      base: "bg-background text-foreground relative grid w-full max-w-[calc(100%-2rem)] " \
+            "gap-4 rounded-lg border p-6 shadow-lg outline-none sm:max-w-lg"
+    )
+
+    # Flex column container for {DialogTitle} and {DialogDescription}.
+    DialogHeader = ClassVariants.build(
+      base: "flex flex-col gap-2 text-center sm:text-left"
+    )
+
+    # Reversed column layout on mobile, horizontal on desktop.
+    DialogFooter = ClassVariants.build(
+      base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+    )
+
+    # The dialog heading. Renders as +<h2>+.
+    DialogTitle = ClassVariants.build(
+      base: "text-lg leading-none font-semibold"
+    )
+
+    # Descriptive text below the {DialogTitle}.
+    DialogDescription = ClassVariants.build(
+      base: "text-muted-foreground text-sm"
+    )
+
+    # Main content area between header and footer.
+    DialogBody = ClassVariants.build(
+      base: "text-sm"
+    )
+
+    # Absolutely positioned close button in the top-right corner.
+    DialogClose = ClassVariants.build(
+      base: "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity " \
+            "hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 " \
+            "focus-visible:outline-ring disabled:pointer-events-none " \
+            "[&>svg]:size-4 cursor-pointer"
+    )
+  end
+end

data/lib/kiso/themes/empty.rb

@@ -9,7 +9,7 @@ module Kiso
     #   Empty.render
     #
     # Sub-parts: {EmptyHeader}, {EmptyMedia}, {EmptyTitle}, {EmptyDescription},
-    # {EmptyContent}
+    # {EmptyActions}, {EmptyContent}
     #
     # shadcn base: flex min-w-0 flex-1 flex-col ... border-dashed p-6 ... md:p-12
     Empty = ClassVariants.build(
@@ -46,6 +46,11 @@ module Kiso
       base: "text-muted-foreground text-sm/relaxed [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
     )
 
+    # Centered button group for call-to-action buttons.
+    EmptyActions = ClassVariants.build(
+      base: "flex flex-wrap items-center justify-center gap-2"
+    )
+
     # Container for action buttons or other interactive content.
     EmptyContent = ClassVariants.build(
       base: "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance"

data/lib/kiso/themes/input_otp.rb

@@ -20,9 +20,9 @@ module Kiso
     # @example
     #   InputOtpSlot.render(size: :md)
     InputOtpSlot = ClassVariants.build(
-      base: "border-accented relative flex items-center justify-center " \
-            "border-y border-r shadow-xs transition-all outline-none " \
-            "first:rounded-l-md first:border-l last:rounded-r-md " \
+      base: "border-border relative flex items-center justify-center " \
+            "border -ml-px shadow-xs transition-all outline-none " \
+            "first:ml-0 first:rounded-l-md last:rounded-r-md " \
             "data-[active=true]:z-10 data-[active=true]:border-primary " \
             "data-[active=true]:ring-[3px] data-[active=true]:ring-primary/50 " \
             "aria-invalid:border-error " \

data/lib/kiso/themes/slider.rb

@@ -0,0 +1,53 @@
+module Kiso
+  module Themes
+    # Range slider with track, filled range, and draggable thumb.
+    #
+    # @example
+    #   Slider.render(size: :md)
+    #
+    # Variants:
+    # - +size+ — :sm, :md (default), :lg
+    #
+    # Sub-parts: {SliderTrack}, {SliderRange}, {SliderThumb}
+    #
+    # shadcn base: relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50
+    Slider = ClassVariants.build(
+      base: "relative flex w-full touch-none items-center select-none"
+    )
+
+    # shadcn: relative grow overflow-hidden rounded-full bg-muted h-1.5 w-full
+    SliderTrack = ClassVariants.build(
+      base: "relative grow cursor-pointer overflow-hidden rounded-full bg-muted w-full",
+      variants: {
+        size: {
+          sm: "h-1",
+          md: "h-1.5",
+          lg: "h-2"
+        }
+      },
+      defaults: {size: :md}
+    )
+
+    # shadcn: absolute h-full bg-primary
+    SliderRange = ClassVariants.build(
+      base: "absolute h-full bg-primary"
+    )
+
+    # shadcn: block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm
+    #         ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4
+    #         focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50
+    SliderThumb = ClassVariants.build(
+      base: "block shrink-0 rounded-full border border-primary bg-white shadow-sm " \
+            "ring-ring/50 transition-[color,box-shadow] hover:ring-4 " \
+            "focus-visible:ring-4 focus-visible:outline-hidden",
+      variants: {
+        size: {
+          sm: "size-3",
+          md: "size-4",
+          lg: "size-5"
+        }
+      },
+      defaults: {size: :md}
+    )
+  end
+end

data/lib/kiso/version.rb

@@ -2,5 +2,5 @@
 
 module Kiso
   # @return [String] the current gem version
-  VERSION = "0.2.1.pre"
+  VERSION = "0.3.0.pre"
 end

data/lib/kiso.rb

@@ -10,6 +10,7 @@ require "kiso/engine"
 require "kiso/themes/shared"
 require "kiso/themes/badge"
 require "kiso/themes/alert"
+require "kiso/themes/aspect_ratio"
 require "kiso/themes/button"
 require "kiso/themes/card"
 require "kiso/themes/separator"
@@ -36,6 +37,8 @@ require "kiso/themes/select_native"
 require "kiso/themes/popover"
 require "kiso/themes/combobox"
 require "kiso/themes/command"
+require "kiso/themes/dialog"
+require "kiso/themes/alert_dialog"
 require "kiso/themes/dropdown_menu"
 require "kiso/themes/kbd"
 require "kiso/themes/color_mode_button"
@@ -43,6 +46,7 @@ require "kiso/themes/color_mode_select"
 require "kiso/themes/dashboard"
 require "kiso/themes/nav"
 require "kiso/themes/avatar"
+require "kiso/themes/slider"
 require "kiso/icons"
 
 # Kiso — a Rails engine providing UI components inspired by shadcn/ui and Nuxt UI.