kiso 0.1.0.pre

data/app/views/kiso/components/table/_caption.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :caption,
+    class: Kiso::Themes::TableCaption.render(class: css_classes),
+    data: { component: :table, table_part: :caption },
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/table/_cell.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :td,
+    class: Kiso::Themes::TableCell.render(class: css_classes),
+    data: { component: :table, table_part: :cell },
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :tfoot,
+    class: Kiso::Themes::TableFooter.render(class: css_classes),
+    data: { component: :table, table_part: :footer },
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/table/_head.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :th,
+    class: Kiso::Themes::TableHead.render(class: css_classes),
+    data: { component: :table, table_part: :head },
+    **component_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :thead,
+    class: Kiso::Themes::TableHeader.render(class: css_classes),
+    data: { component: :table, table_part: :header },
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/table/_row.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :tr,
+    class: Kiso::Themes::TableRow.render(class: css_classes),
+    data: { component: :table, table_part: :row },
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/lib/kiso/cli/base.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require "fileutils"
+
+class Kiso::Cli::Base < Thor
+  def self.exit_on_failure? = true
+
+  private
+
+  def gem_root
+    File.expand_path("../../..", __dir__)
+  end
+
+  def write_file(path, content)
+    full_path = File.join(gem_root, path)
+
+    if File.exist?(full_path)
+      say "  exists  #{path}", :yellow
+      return false
+    end
+
+    FileUtils.mkdir_p(File.dirname(full_path))
+    File.write(full_path, content)
+    say "  create  #{path}", :green
+    true
+  end
+
+  def append_to_file(path, line)
+    full_path = File.join(gem_root, path)
+    content = File.read(full_path)
+
+    unless content.include?(line)
+      File.write(full_path, content.rstrip + "\n#{line}\n")
+      say "  update  #{path}", :green
+    end
+  end
+end

data/lib/kiso/cli/icons.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+require "kiso/icons/commands"
+
+# Delegate bin/kiso icons → kiso-icons gem's Commands class
+Kiso::Cli::Icons = Kiso::Icons::Commands

data/lib/kiso/cli/main.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Kiso::Cli::Main < Kiso::Cli::Base
+  desc "version", "Show Kiso version"
+  def version
+    puts Kiso::VERSION
+  end
+
+  desc "icons SUBCOMMAND", "Manage icon sets (pin, unpin, pristine, list)"
+  subcommand "icons", Kiso::Cli::Icons
+
+  desc "make SUBCOMMAND", "Generate component files"
+  subcommand "make", Kiso::Cli::Make
+end

data/lib/kiso/cli/make.rb

@@ -0,0 +1,369 @@
+# frozen_string_literal: true
+
+class Kiso::Cli::Make < Kiso::Cli::Base
+  desc "component NAME", "Generate a new Kiso component"
+  long_desc <<~DESC
+    Generates all files for a new component:
+      - Theme module (lib/kiso/themes/)
+      - ERB partial (app/views/kiso/components/)
+      - Lookbook preview + templates (test/components/previews/kiso/)
+      - Updates lib/kiso.rb with require
+      - Updates skills/kiso/references/components.md
+
+    Example:
+      $ bin/kiso make component alert
+      $ bin/kiso make component toggle_group
+  DESC
+  option :colored, type: :boolean, default: true, desc: "Include color + variant axes (compound variants)"
+  def component(name)
+    @name = name.underscore
+    @class_name = @name.camelize
+    @colored = options[:colored]
+
+    generate_theme
+    generate_partial
+    generate_preview
+    generate_preview_templates
+    update_requires
+    update_skill_components
+
+    say ""
+    say "Component '#{@name}' created!", :green
+    say ""
+    say "Next steps:", :cyan
+    say "  1. Edit lib/kiso/themes/#{@name}.rb — define variants"
+    say "  2. Edit app/views/kiso/components/_#{@name}.html.erb — build the markup"
+    say "  3. cd test/dummy && bin/rails tailwindcss:build"
+    say "  4. Open http://localhost:4001/lookbook"
+  end
+
+  private
+
+  def generate_theme
+    if @colored
+      write_file "lib/kiso/themes/#{@name}.rb", colored_theme_template
+    else
+      write_file "lib/kiso/themes/#{@name}.rb", simple_theme_template
+    end
+  end
+
+  def generate_partial
+    if @colored
+      write_file "app/views/kiso/components/_#{@name}.html.erb", colored_partial_template
+    else
+      write_file "app/views/kiso/components/_#{@name}.html.erb", simple_partial_template
+    end
+  end
+
+  def generate_preview
+    if @colored
+      write_file "test/components/previews/kiso/#{@name}_preview.rb", colored_preview_template
+    else
+      write_file "test/components/previews/kiso/#{@name}_preview.rb", simple_preview_template
+    end
+  end
+
+  def generate_preview_templates
+    write_file "test/components/previews/kiso/#{@name}_preview/playground.html.erb",
+      playground_template
+
+    if @colored
+      write_file "test/components/previews/kiso/#{@name}_preview/colors.html.erb",
+        colors_template
+      write_file "test/components/previews/kiso/#{@name}_preview/variants.html.erb",
+        variants_template
+    end
+
+    write_file "test/components/previews/kiso/#{@name}_preview/sizes.html.erb",
+      sizes_template
+  end
+
+  def update_requires
+    append_to_file "lib/kiso.rb", "require \"kiso/themes/#{@name}\""
+  end
+
+  def update_skill_components
+    path = File.join(gem_root, "skills/kiso/references/components.md")
+    return unless File.exist?(path)
+
+    content = File.read(path)
+    return if content.include?("### #{@class_name}")
+
+    entry = if @colored
+      <<~MD
+
+        ### #{@class_name}
+
+        **Locals:** `color:`, `variant:` (solid, outline, soft, subtle), `size:` (sm, md, lg), `css_classes:`, `**component_options`
+
+        **Defaults:** `color: :primary, variant: :soft, size: :md`
+
+        ```erb
+        <%%= kiso(:#{@name}, color: :primary, variant: :soft) { "Label" } %>
+        ```
+
+        **Theme module:** `Kiso::Themes::#{@class_name}` (`lib/kiso/themes/#{@name}.rb`)
+      MD
+    else
+      <<~MD
+
+        ### #{@class_name}
+
+        **Locals:** `variant:`, `size:` (sm, md, lg), `css_classes:`, `**component_options`
+
+        **Defaults:** `variant: :default, size: :md`
+
+        ```erb
+        <%%= kiso(:#{@name}) { "Label" } %>
+        ```
+
+        **Theme module:** `Kiso::Themes::#{@class_name}` (`lib/kiso/themes/#{@name}.rb`)
+      MD
+    end
+
+    File.write(path, content.rstrip + "\n" + entry)
+    say "  update  skills/kiso/references/components.md", :green
+  end
+
+  # -- Theme templates --
+
+  def colored_theme_template
+    <<~RUBY
+      module Kiso
+        module Themes
+          #{@class_name} = ClassVariants.build(
+            base: "",
+            variants: {
+              variant: {
+                solid: "",
+                outline: "ring ring-inset",
+                soft: "",
+                subtle: "ring ring-inset"
+              },
+              size: {
+                sm: "",
+                md: "",
+                lg: ""
+              },
+              color: COLORS.index_with { "" }
+            },
+            compound_variants: [
+              # -- solid --
+              { color: :primary, variant: :solid, class: "bg-primary text-primary-foreground" },
+              { color: :secondary, variant: :solid, class: "bg-secondary text-secondary-foreground" },
+              { color: :success, variant: :solid, class: "bg-success text-success-foreground" },
+              { color: :info, variant: :solid, class: "bg-info text-info-foreground" },
+              { color: :warning, variant: :solid, class: "bg-warning text-warning-foreground" },
+              { color: :error, variant: :solid, class: "bg-error text-error-foreground" },
+              { color: :neutral, variant: :solid, class: "bg-inverted text-inverted" },
+
+              # -- outline --
+              { color: :primary, variant: :outline, class: "text-primary ring-primary/50" },
+              { color: :secondary, variant: :outline, class: "text-secondary ring-secondary/50" },
+              { color: :success, variant: :outline, class: "text-success ring-success/50" },
+              { color: :info, variant: :outline, class: "text-info ring-info/50" },
+              { color: :warning, variant: :outline, class: "text-warning ring-warning/50" },
+              { color: :error, variant: :outline, class: "text-error ring-error/50" },
+              { color: :neutral, variant: :outline, class: "ring-accented text-foreground bg-background" },
+
+              # -- soft --
+              { color: :primary, variant: :soft, class: "bg-primary/10 text-primary" },
+              { color: :secondary, variant: :soft, class: "bg-secondary/10 text-secondary" },
+              { color: :success, variant: :soft, class: "bg-success/10 text-success" },
+              { color: :info, variant: :soft, class: "bg-info/10 text-info" },
+              { color: :warning, variant: :soft, class: "bg-warning/10 text-warning" },
+              { color: :error, variant: :soft, class: "bg-error/10 text-error" },
+              { color: :neutral, variant: :soft, class: "text-foreground bg-muted" },
+
+              # -- subtle --
+              { color: :primary, variant: :subtle, class: "bg-primary/10 text-primary ring-primary/25" },
+              { color: :secondary, variant: :subtle, class: "bg-secondary/10 text-secondary ring-secondary/25" },
+              { color: :success, variant: :subtle, class: "bg-success/10 text-success ring-success/25" },
+              { color: :info, variant: :subtle, class: "bg-info/10 text-info ring-info/25" },
+              { color: :warning, variant: :subtle, class: "bg-warning/10 text-warning ring-warning/25" },
+              { color: :error, variant: :subtle, class: "bg-error/10 text-error ring-error/25" },
+              { color: :neutral, variant: :subtle, class: "ring-accented text-foreground bg-muted" }
+            ],
+            defaults: { color: :primary, variant: :soft, size: :md }
+          )
+        end
+      end
+    RUBY
+  end
+
+  def simple_theme_template
+    <<~RUBY
+      module Kiso
+        module Themes
+          #{@class_name} = ClassVariants.build(
+            base: "",
+            variants: {
+              variant: {
+                default: ""
+              },
+              size: {
+                sm: "",
+                md: "",
+                lg: ""
+              }
+            },
+            defaults: { variant: :default, size: :md }
+          )
+        end
+      end
+    RUBY
+  end
+
+  # -- Partial templates --
+
+  def colored_partial_template
+    <<~ERB
+      <%# locals: (color: :primary, variant: :soft, size: :md, css_classes: "", **component_options) %>
+      <%= content_tag :div,
+          class: Kiso::Themes::#{@class_name}.render(color: color, variant: variant, size: size, class: css_classes),
+          data: { component: :#{@name} },
+          **component_options do %>
+        <%= yield %>
+      <% end %>
+    ERB
+  end
+
+  def simple_partial_template
+    <<~ERB
+      <%# locals: (variant: :default, size: :md, css_classes: "", **component_options) %>
+      <%= content_tag :div,
+          class: Kiso::Themes::#{@class_name}.render(variant: variant, size: size, class: css_classes),
+          data: { component: :#{@name} },
+          **component_options do %>
+        <%= yield %>
+      <% end %>
+    ERB
+  end
+
+  # -- Preview templates --
+
+  def colored_preview_template
+    <<~RUBY
+      module Kiso
+        # @label #{@class_name}
+        class #{@class_name}Preview < Lookbook::Preview
+          # @label Playground
+          # @param color select { choices: [primary, secondary, success, info, warning, error, neutral] }
+          # @param variant select { choices: [solid, outline, soft, subtle] }
+          # @param size select { choices: [sm, md, lg] }
+          # @param text text "#{@class_name}"
+          def playground(color: :primary, variant: :soft, size: :md, text: "#{@class_name}")
+            render_with_template(locals: {
+              color: color.to_sym,
+              variant: variant.to_sym,
+              size: size.to_sym,
+              text: text
+            })
+          end
+
+          # @label Colors
+          def colors
+            render_with_template
+          end
+
+          # @label Variants
+          def variants
+            render_with_template
+          end
+
+          # @label Sizes
+          def sizes
+            render_with_template
+          end
+        end
+      end
+    RUBY
+  end
+
+  def simple_preview_template
+    <<~RUBY
+      module Kiso
+        # @label #{@class_name}
+        class #{@class_name}Preview < Lookbook::Preview
+          # @label Playground
+          # @param variant select { choices: [default] }
+          # @param size select { choices: [sm, md, lg] }
+          # @param text text "#{@class_name}"
+          def playground(variant: :default, size: :md, text: "#{@class_name}")
+            render_with_template(locals: {
+              variant: variant.to_sym,
+              size: size.to_sym,
+              text: text
+            })
+          end
+
+          # @label Sizes
+          def sizes
+            render_with_template
+          end
+        end
+      end
+    RUBY
+  end
+
+  def playground_template
+    if @colored
+      <<~ERB
+        <div class="flex gap-4 items-center p-8">
+          <%%= kiso(:#{@name}, color: color, variant: variant, size: size) { text } %>
+        </div>
+      ERB
+    else
+      <<~ERB
+        <div class="flex gap-4 items-center p-8">
+          <%%= kiso(:#{@name}, variant: variant, size: size) { text } %>
+        </div>
+      ERB
+    end
+  end
+
+  def colors_template
+    colors = %w[primary secondary success info warning error neutral]
+    lines = colors.map { |c| "  <%%= kiso(:#{@name}, color: :#{c}) { \"#{c.capitalize}\" } %>" }
+
+    <<~ERB
+      <div class="flex flex-wrap gap-3 items-center p-8">
+      #{lines.join("\n")}
+      </div>
+    ERB
+  end
+
+  def variants_template
+    variants = %w[solid outline soft subtle]
+    colors = %w[primary secondary success info warning error neutral]
+
+    sections = variants.map do |v|
+      lines = colors.map { |c| "    <%%= kiso(:#{@name}, color: :#{c}, variant: :#{v}) { \"#{c.capitalize}\" } %>" }
+      <<~SECTION
+        <div>
+          <p class="text-sm text-muted-foreground mb-2">#{v.capitalize}</p>
+          <div class="flex flex-wrap gap-3 items-center">
+        #{lines.join("\n")}
+          </div>
+        </div>
+      SECTION
+    end
+
+    <<~ERB
+      <div class="space-y-6 p-8">
+      #{sections.join("\n")}
+      </div>
+    ERB
+  end
+
+  def sizes_template
+    sizes = %w[sm md lg]
+    lines = sizes.map { |s| "  <%%= kiso(:#{@name}, size: :#{s}) { \"#{s.capitalize}\" } %>" }
+
+    <<~ERB
+      <div class="flex gap-4 items-center p-8">
+      #{lines.join("\n")}
+      </div>
+    ERB
+  end
+end

data/lib/kiso/cli.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "thor"
+require "active_support/core_ext/string/inflections"
+
+module Kiso
+  module Cli
+  end
+end
+
+require_relative "cli/base"
+require_relative "cli/icons"
+require_relative "cli/make"
+require_relative "cli/main"

data/lib/kiso/engine.rb

@@ -0,0 +1,26 @@
+module Kiso
+  class Engine < ::Rails::Engine
+    isolate_namespace Kiso
+    engine_name "kiso_engine"
+
+    initializer "kiso.class_variants" do
+      ClassVariants.configure do |config|
+        merger = TailwindMerge::Merger.new
+        config.process_classes_with { |classes| merger.merge(classes) }
+      end
+    end
+
+    initializer "kiso.helpers" do
+      ActiveSupport.on_load(:action_view) do
+        include Kiso::ComponentHelper
+        include Kiso::IconHelper
+      end
+    end
+
+    initializer "kiso.lookbook", after: :load_config_initializers do
+      if defined?(Lookbook)
+        Lookbook.config.preview_paths << root.join("test/components/previews").to_s
+      end
+    end
+  end
+end

data/lib/kiso/themes/alert.rb

@@ -0,0 +1,65 @@
+module Kiso
+  module Themes
+    Alert = ClassVariants.build(
+      base: "relative w-full rounded-lg px-4 py-3 text-sm " \
+            "grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] " \
+            "has-[>svg]:gap-x-3 gap-y-0.5 items-start " \
+            "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+      variants: {
+        variant: {
+          solid: "",
+          outline: "ring ring-inset",
+          soft: "",
+          subtle: "ring ring-inset"
+        },
+        color: COLORS.index_with { "" }
+      },
+      compound_variants: [
+        # -- solid --
+        {color: :primary, variant: :solid, class: "bg-primary text-primary-foreground"},
+        {color: :secondary, variant: :solid, class: "bg-secondary text-secondary-foreground"},
+        {color: :success, variant: :solid, class: "bg-success text-success-foreground"},
+        {color: :info, variant: :solid, class: "bg-info text-info-foreground"},
+        {color: :warning, variant: :solid, class: "bg-warning text-warning-foreground"},
+        {color: :error, variant: :solid, class: "bg-error text-error-foreground"},
+        {color: :neutral, variant: :solid, class: "bg-inverted text-inverted-foreground"},
+
+        # -- outline --
+        {color: :primary, variant: :outline, class: "text-primary ring-primary/50"},
+        {color: :secondary, variant: :outline, class: "text-secondary ring-secondary/50"},
+        {color: :success, variant: :outline, class: "text-success ring-success/50"},
+        {color: :info, variant: :outline, class: "text-info ring-info/50"},
+        {color: :warning, variant: :outline, class: "text-warning ring-warning/50"},
+        {color: :error, variant: :outline, class: "text-error ring-error/50"},
+        {color: :neutral, variant: :outline, class: "text-foreground bg-background ring-accented"},
+
+        # -- soft --
+        {color: :primary, variant: :soft, class: "bg-primary/10 text-primary"},
+        {color: :secondary, variant: :soft, class: "bg-secondary/10 text-secondary"},
+        {color: :success, variant: :soft, class: "bg-success/10 text-success"},
+        {color: :info, variant: :soft, class: "bg-info/10 text-info"},
+        {color: :warning, variant: :soft, class: "bg-warning/10 text-warning"},
+        {color: :error, variant: :soft, class: "bg-error/10 text-error"},
+        {color: :neutral, variant: :soft, class: "text-foreground bg-elevated"},
+
+        # -- subtle --
+        {color: :primary, variant: :subtle, class: "bg-primary/10 text-primary ring-primary/25"},
+        {color: :secondary, variant: :subtle, class: "bg-secondary/10 text-secondary ring-secondary/25"},
+        {color: :success, variant: :subtle, class: "bg-success/10 text-success ring-success/25"},
+        {color: :info, variant: :subtle, class: "bg-info/10 text-info ring-info/25"},
+        {color: :warning, variant: :subtle, class: "bg-warning/10 text-warning ring-warning/25"},
+        {color: :error, variant: :subtle, class: "bg-error/10 text-error ring-error/25"},
+        {color: :neutral, variant: :subtle, class: "text-foreground bg-elevated ring-accented"}
+      ],
+      defaults: {color: :primary, variant: :soft}
+    )
+
+    AlertTitle = ClassVariants.build(
+      base: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"
+    )
+
+    AlertDescription = ClassVariants.build(
+      base: "col-start-2 grid justify-items-start gap-1 text-sm opacity-90 [&_p]:leading-relaxed"
+    )
+  end
+end

data/lib/kiso/themes/badge.rb

@@ -0,0 +1,66 @@
+module Kiso
+  module Themes
+    COLORS = %i[primary secondary success info warning error neutral].freeze
+
+    Badge = ClassVariants.build(
+      base: "inline-flex items-center justify-center font-medium whitespace-nowrap shrink-0 overflow-hidden " \
+            "transition-[color,box-shadow] " \
+            "[&>svg]:pointer-events-none [&>svg]:shrink-0 " \
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+      variants: {
+        variant: {
+          solid: "",
+          outline: "ring ring-inset",
+          soft: "",
+          subtle: "ring ring-inset"
+        },
+        size: {
+          xs: "px-1 py-0.5 text-[8px]/3 rounded-full gap-0.5 [&>svg]:size-2.5",
+          sm: "px-1.5 py-0.5 text-[10px]/3 rounded-full gap-0.5 [&>svg]:size-3",
+          md: "px-2 py-0.5 text-xs rounded-full gap-1 [&>svg]:size-3",
+          lg: "px-2.5 py-1 text-sm rounded-full gap-1 [&>svg]:size-3.5",
+          xl: "px-2.5 py-1 text-base rounded-full gap-1.5 [&>svg]:size-4"
+        },
+        color: COLORS.index_with { "" }
+      },
+      compound_variants: [
+        # -- solid --
+        {color: :primary, variant: :solid, class: "bg-primary text-primary-foreground"},
+        {color: :secondary, variant: :solid, class: "bg-secondary text-secondary-foreground"},
+        {color: :success, variant: :solid, class: "bg-success text-success-foreground"},
+        {color: :info, variant: :solid, class: "bg-info text-info-foreground"},
+        {color: :warning, variant: :solid, class: "bg-warning text-warning-foreground"},
+        {color: :error, variant: :solid, class: "bg-error text-error-foreground"},
+        {color: :neutral, variant: :solid, class: "bg-inverted text-inverted-foreground"},
+
+        # -- outline --
+        {color: :primary, variant: :outline, class: "text-primary ring-primary/50"},
+        {color: :secondary, variant: :outline, class: "text-secondary ring-secondary/50"},
+        {color: :success, variant: :outline, class: "text-success ring-success/50"},
+        {color: :info, variant: :outline, class: "text-info ring-info/50"},
+        {color: :warning, variant: :outline, class: "text-warning ring-warning/50"},
+        {color: :error, variant: :outline, class: "text-error ring-error/50"},
+        {color: :neutral, variant: :outline, class: "text-foreground bg-background ring-accented"},
+
+        # -- soft --
+        {color: :primary, variant: :soft, class: "bg-primary/10 text-primary"},
+        {color: :secondary, variant: :soft, class: "bg-secondary/10 text-secondary"},
+        {color: :success, variant: :soft, class: "bg-success/10 text-success"},
+        {color: :info, variant: :soft, class: "bg-info/10 text-info"},
+        {color: :warning, variant: :soft, class: "bg-warning/10 text-warning"},
+        {color: :error, variant: :soft, class: "bg-error/10 text-error"},
+        {color: :neutral, variant: :soft, class: "text-foreground bg-elevated"},
+
+        # -- subtle --
+        {color: :primary, variant: :subtle, class: "bg-primary/10 text-primary ring-primary/25"},
+        {color: :secondary, variant: :subtle, class: "bg-secondary/10 text-secondary ring-secondary/25"},
+        {color: :success, variant: :subtle, class: "bg-success/10 text-success ring-success/25"},
+        {color: :info, variant: :subtle, class: "bg-info/10 text-info ring-info/25"},
+        {color: :warning, variant: :subtle, class: "bg-warning/10 text-warning ring-warning/25"},
+        {color: :error, variant: :subtle, class: "bg-error/10 text-error ring-error/25"},
+        {color: :neutral, variant: :subtle, class: "text-foreground bg-elevated ring-accented"}
+      ],
+      defaults: {color: :primary, variant: :soft, size: :md}
+    )
+  end
+end