fox_tail 0.1.1 → 0.2.0

data/app/components/fox_tail/badge_component.rb

@@ -2,12 +2,26 @@
 
 class FoxTail::BadgeComponent < FoxTail::BaseComponent
   renders_one :icon, lambda { |icon, options = {}|
-    options[:variant] ||= :mini
     options[:"aria-hidden"] = true
-    options[:class] = icon_classes options[:class]
+    options[:class] = classnames theme.apply(:icon, self), options[:class]
     FoxTail::IconBaseComponent.new icon, options
   }
 
+  renders_one :dismiss_icon, lambda { |options = {}|
+    icon_options = options.extract!(:icon, :variant).reverse_merge(icon: "x-mark", variant: :solid)
+    icon_options[:class] = classnames theme.apply(:icon, self), theme.apply(:dismiss_icon, self)
+    options[:class] = classnames theme.apply(:dismiss_button, self), options[:class]
+
+    FoxTail::WrapperComponent.new options do |wrapper|
+      content = wrapper.content? ? wrapper.content : I18n.t("components.fox_tail.close")
+
+      render FoxTail::ClickableComponent.new(wrapper.html_attributes) do
+        concat render(FoxTail::IconBaseComponent.new(icon_options[:icon], icon_options.except(:icon)))
+        concat content_tag(:div, content, class: theme.classname("accessibility.sr_only"))
+      end
+    end
+  }
+
   has_option :url
   has_option :size, default: :base
   has_option :color, default: :default
@@ -15,26 +29,22 @@ class FoxTail::BadgeComponent < FoxTail::BaseComponent
   has_option :icon_only, default: false, type: :boolean
   has_option :border, default: false, type: :boolean
 
-  def call
-    content_tag (url? ? :a : :span), html_attributes.merge(href: url, class: root_classes) do
-      concat icon if icon?
-      concat content_tag(:span, content, class: content_classes) if content?
-    end
+  def tag_name
+    url? ? :a : :span
   end
 
-  private
-
-  def root_classes
-    classnames theme.apply(:root, self), html_class
-  end
+  def before_render
+    super
 
-  def content_classes
-    classnames icon_only? && theme.classname("content.hidden")
+    html_attributes[:href] = url if url?
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
   end
 
-  def icon_classes(classes)
-    classnames theme.classname("icon.base"),
-               theme.classname(["icon", "size", size]),
-               classes
+  def call
+    content_tag tag_name, html_attributes do
+      concat icon if icon?
+      concat content_tag(:span, content, class: theme.apply(:content, self)) if content?
+      concat dismiss_icon if dismiss_icon?
+    end
   end
 end

data/app/components/fox_tail/badge_component.theme.yml

@@ -1,7 +1,7 @@
 root:
   base: font-medium h-fit rounded
   icon_only?:
-    false: inline-flex items-center gap-1
+    false: inline-flex items-center gap-1.5
     true:
       base: rounded-full inline-flex items-center justify-center
       size:
@@ -15,7 +15,7 @@ root:
   color:
     neutral: &default
       base: bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300
-      border?: bg-gray-50 text-gray-500 border-gray-500 dark:bg-gray-400 dark:text-gray-600 dark:border-gray-600
+      border?: bg-gray-50 text-gray-500 border-gray-500 dark:border-gray-600
       url?: hover:bg-gray-200 dark:hover:bg-gray-600
     dark:
       base: bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200
@@ -25,42 +25,47 @@ root:
       base: bg-gray-100 text-gray-600 dark:bg-gray-300 dark:text-gray-600
       border?: bg-gray-50 text-gray-300 border-gray-300 dark:bg-gray-500 dark:text-gray-700 dark:border-gray-700
       url?: hover:bg-gray-300 dark:hover:bg-gray-500
-    red: &red
-      base: bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-800
-      border?: bg-red-100 text-red-800 border-red-800 dark:bg-gray-700 dark:text-red-400 dark:border-red-400
-      url?: hover:bg-red-200 dark:hover:bg-red-300
-    blue: &blue
-      base: bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800
-      border?: bg-blue-100 text-blue-800 border-blue-800 dark:bg-gray-700 dark:text-blue-400 dark:border-blue-400
-      url?: hover:bg-blue-200 dark:hover:bg-blue-300
-    yellow: &yellow
-      base: bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-800
-      border?: bg-yellow-100 text-yellow-800 border-yellow-800 dark:bg-gray-700 dark:text-yellow-400 dark:border-yellow-400
-      url?: hover:bg-yellow-200 dark:hover:bg-yellow-300
-    green: &green
-      base: bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-800
-      border?: bg-green-100 text-green-800 border-green-800 dark:bg-gray-700 dark:text-green-400 dark:border-green-400
-      url?: hover:bg-green-200 dark:hover:bg-green-300
-    indigo:
-      base: bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-800
-      border?: bg-indigo-100 text-indigo-800 border-indigo-800 dark:bg-gray-700 dark:text-indigo-400 dark:border-indigo-400
-      url?: hover:bg-indigo-200 dark:hover:bg-indigo-300
-    purple:
-      base: bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-800
-      border?: bg-indigo-100 text-purple-800 border-purple-800 dark:bg-gray-700 dark:text-purple-400 dark:border-purple-400
-      url?: hover:bg-purple-200 dark:hover:bg-purple-300
-    pink:
-      base: bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-800
-      border?: bg-pink-100 text-pink-800 border-pink-800 dark:bg-gray-700 dark:text-pink-400 dark:border-pink-400
-      url?: hover:bg-pink-200 dark:hover:bg-pink-300
-    info: *blue
-    success: *green
-    warning: *yellow
-    error: *red
+    primary:
+      base: bg-primary-100 text-primary-800 dark:bg-primary-200 dark:text-primary-800
+      border?: bg-primary-100 text-primary-800 border-primary-800 dark:bg-gray-700 dark:text-primary-400 dark:border-primary-400
+      url?: hover:bg-primary-200 dark:hover:bg-primary-300
+    info:
+      base: bg-info-100 text-info-800 dark:bg-info-200 dark:text-info-800
+      border?: bg-info-100 text-info-800 border-info-800 dark:bg-gray-700 dark:text-info-400 dark:border-info-400
+      url?: hover:bg-info-200 dark:hover:bg-info-300
+    success:
+      base: bg-success-100 text-success-800 dark:bg-success-200 dark:text-success-800
+      border?: bg-success-100 text-success-800 border-success-800 dark:bg-gray-700 dark:text-success-400 dark:border-success-400
+      url?: hover:bg-success-200 dark:hover:bg-success-300
+    warning:
+      base: bg-warning-100 text-warning-800 dark:bg-warning-200 dark:text-warning-800
+      border?: bg-warning-100 text-warning-800 border-warning-800 dark:bg-gray-700 dark:text-warning-400 dark:border-warning-400
+      url?: hover:bg-warning-200 dark:hover:bg-warning-300
+    danger:
+      base: bg-danger-100 text-danger-800 dark:bg-danger-200 dark:text-danger-800
+      border?: bg-danger-100 text-danger-800 border-danger-800 dark:bg-gray-700 dark:text-danger-400 dark:border-danger-400
+      url?: hover:bg-danger-200 dark:hover:bg-danger-300
     default: *default
 icon:
   size:
-    base: w-3.5 h-3.5
-    sm: w-4 h-4
+    base: w-3 h-3
+    sm: w-3.5 h-3.5
 content:
-  hidden: sr-only
+  icon_only?: sr-only
+dismiss_button:
+  base: inline-flex items-center p-0.5 text-sm bg-transparent rounded-sm
+  pill?: rounded-full
+  color:
+    neutral: &neutral hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-300
+    dark: hover:bg-gray-500 hover:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-gray-300
+    light: hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-gray-300
+    primary: hover:bg-primary-200 hover:text-primary-900 dark:hover:bg-primary-800 dark:hover:text-primary-300
+    info: hover:bg-info-200 hover:text-info-900 dark:hover:bg-info-800 dark:hover:text-info-300
+    success: hover:bg-success-200 hover:text-success-900 dark:hover:bg-success-800 dark:hover:text-success-300
+    warning: hover:bg-warning-200 hover:text-warning-900 dark:hover:bg-warning-800 dark:hover:text-warning-300
+    danger: hover:bg-danger-200 hover:text-danger-900 dark:hover:bg-danger-800 dark:hover:text-danger-300
+    default: *neutral
+dismiss_icon:
+  size:
+    base: w-2.5 h-2.5
+    sm: w-3 h-3

data/app/components/fox_tail/breadcrumb_component.rb

@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+
+class FoxTail::BreadcrumbComponent < FoxTail::BaseComponent
+  renders_one :separator, types: {
+    icon: lambda { |icon, options = {}|
+      options[:class] = classnames(
+        theme.apply(:separator, self),
+        theme.apply("separator/icon", self),
+        options[:class]
+      )
+
+      FoxTail::IconBaseComponent.new icon, options
+    },
+    text: lambda { |text, options = {}|
+      options[:class] = classnames(
+        theme.apply(:separator, self),
+        theme.apply("separator/text", self),
+        options[:class]
+      )
+
+      content_tag :span, text, options
+    }
+  }
+
+  renders_many :items, types: {
+    link: lambda { |url, options = {}, &block|
+      options[:class] = classnames(
+        theme.apply(:item, self),
+        theme.apply("item/button", self),
+        options[:class]
+      )
+
+      FoxTail::WrapperComponent.new options do |wrapper|
+        render FoxTail::LinkComponent.new url, wrapper.html_attributes do |link|
+          capture link, &block
+        end
+      end
+    },
+    text: lambda { |text_or_options = {}, options = {}, &block|
+      if text_or_options.is_a?(Hash)
+        options = text_or_options
+        text_or_options = nil
+      end
+
+      options[:class] = classnames(
+        theme.apply(:item, self),
+        theme.apply("item/text", self),
+        options[:class]
+      )
+
+      FoxTail::WrapperComponent.new options do |wrapper|
+        content_tag :div, wrapper.html_attributes do
+          text_or_options || capture(&block)
+        end
+      end
+    },
+    button: lambda { |options = {}, &block|
+      options[:size] ||= :sm
+      options[:variant] ||= :outline
+      options[:color] ||= :neutral
+
+      options[:class] = classnames(
+        theme.apply(:item, self),
+        theme.apply("item/button", self),
+        options[:class]
+      )
+
+      FoxTail::WrapperComponent.new options do |wrapper|
+        render FoxTail::ButtonComponent.new wrapper.html_attributes do |button|
+          capture button, &block
+        end
+      end
+    }
+  }
+
+  has_option :variant, default: :default
+
+  def render?
+    items?
+  end
+
+  def before_render
+    super
+
+    with_separator_icon :chevron_right unless separator?
+
+    html_attributes[:aria] ||= {}
+    html_attributes[:aria][:label] = t("components.fox_tail.breadcrumb.label", default: "Breadcrumbs")
+  end
+
+  def call
+    content_tag :nav, html_attributes do
+      concat render_list
+      concat content if content?
+    end
+  end
+
+  private
+
+  def render_list
+    content_tag :ol, class: theme.apply("container", self) do
+      items.each_with_index do |item, index|
+        concat separator if index.positive?
+        concat render_item(item, index)
+      end
+    end
+  end
+
+  def render_item(item, index)
+    attributes = {}
+
+    if index == items.length - 1
+      attributes[:aria] = {current: :page}
+      item.with_html_class theme.apply("item/current", self)
+    end
+
+    content_tag :li, item, attributes
+  end
+end

data/app/components/fox_tail/breadcrumb_component.theme.yml

@@ -0,0 +1,19 @@
+root:
+  base: "flex flex-wrap flex-col sm:flex-row gap-3"
+  variant:
+    solid: "px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
+container:
+  base: "inline-flex items-center space-x-1 md:space-x-2"
+separator:
+  base: "text-gray-400 shrink-0 mx-2"
+separator/icon:
+  base: "w-3 h-3"
+item:
+  base: "text-gray-600 dark:text-gray-500"
+item/link:
+  base: "text-sm font-medium"
+item/button:
+  base: "border-0"
+item/current:
+  base: "text-gray-500 dark:text-gray-400"
+

data/app/components/fox_tail/button_base_component.rb

@@ -61,20 +61,24 @@ class FoxTail::ButtonBaseComponent < FoxTail::ClickableComponent
     return nil unless object_name? && html_attributes[:type]&.to_sym == :submit
 
     object = convert_to_model self.object
-    key    = object ? (object.persisted? ? :update : :create) : :submit
+    key = if object
+      object.persisted? ? :update : :create
+    else
+      :submit
+    end
 
     model = if object.respond_to?(:model_name)
-              object.model_name.human
-            else
-              object_name.to_s.humanize
-            end
+      object.model_name.human
+    else
+      object_name.to_s.humanize
+    end
 
     defaults = []
     defaults << if object.respond_to?(:model_name) && object_name.to_s == model.downcase
-                  :"helpers.submit.#{object.model_name.i18n_key}.#{key}"
-                else
-                  :"helpers.submit.#{object_name}.#{key}"
-                end
+      :"helpers.submit.#{object.model_name.i18n_key}.#{key}"
+    else
+      :"helpers.submit.#{object_name}.#{key}"
+    end
 
     defaults << :"helpers.submit.#{key}"
     defaults << "#{key.to_s.humanize} #{model}"

data/app/components/fox_tail/button_base_component.theme.yml

@@ -3,6 +3,7 @@ root:
     text-center font-medium rounded-lg 
     focus:ring-4 focus:outline-none
   pill?: rounded-full
+  indicator?: relative
   size:
     xs: px-3 py-2 text-xs
     sm: px-3 py-2 text-sm
@@ -15,7 +16,7 @@ root:
         neutral: >-
           text-gray-900 bg-white dark:bg-gray-800 dark:text-gray-400 
           border border-gray-200 dark:border-gray-600 
-          hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700
+          hover:bg-gray-100 hover:text-primary-700 dark:hover:text-white dark:hover:bg-gray-700
           focus:ring-gray-200 dark:focus:ring-gray-700
         dark: >-
           text-white bg-gray-800 dark:bg-gray-800
@@ -26,36 +27,28 @@ root:
           border border-gray-300 dark:border-gray-600 
           hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:border-gray-600
           focus:ring-gray-200 dark:focus:ring-gray-700
-        blue: &default >-
-          text-white bg-blue-700 dark:bg-blue-600
-          hover:bg-blue-800 dark:hover:bg-blue-700
-          focus:ring-blue-300 dark:focus:ring-blue-800
-        red: &red >-
-          text-white bg-red-700 dark:bg-red-600
-          hover:bg-red-800 dark:hover:bg-red-700
-          focus:ring-red-300 dark:focus:ring-red-800
-        green: &green >-
-          text-white bg-green-700 dark:bg-green-600
-          hover:bg-green-800 dark:hover:bg-green-700
-          focus:ring-green-300 dark:focus:ring-green-800
-        yellow: &yellow text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900
-        indigo: >-
-          text-white bg-indigo-700 dark:bg-indigo-600
-          hover:bg-indigo-800 dark:hover:bg-indigo-700
-          focus:ring-indigo-300 dark:focus:ring-indigo-800
-        purple: >-
-          text-white bg-purple-700 dark:bg-purple-600
-          hover:bg-purple-800 dark:hover:bg-purple-700
-          focus:ring-purple-300 dark:focus:ring-purple-800
-        pink: >-
-          text-white bg-pink-700 dark:bg-pink-600
-          hover:bg-pink-800 dark:hover:bg-pink-700
-          focus:ring-pink-300 dark:focus:ring-pink-800
-        info: *default
-        success: *green
-        warning: *yellow
-        error: *red
-        default: *default
+        primary: &primary >-
+          text-white bg-primary-700 dark:bg-primary-600
+          hover:bg-primary-800 dark:hover:bg-primary-700
+          focus:ring-primary-300 dark:focus:ring-primary-800
+        info: >-
+          text-white bg-info-700 dark:bg-info-600
+          hover:bg-info-800 dark:hover:bg-info-700
+          focus:ring-info-300 dark:focus:ring-info-800
+        success: >-
+          text-white bg-success-700 dark:bg-success-600
+          hover:bg-success-800 dark:hover:bg-success-700
+          focus:ring-success-300 dark:focus:ring-success-800
+        warning: >-
+          text-white bg-warning-700 dark:bg-warning-600
+          hover:bg-warning-800 dark:hover:bg-warning-700
+          focus:ring-warning-300 dark:focus:ring-warning-800
+        danger: &danger >-
+          text-white bg-danger-700 dark:bg-danger-600
+          hover:bg-danger-800 dark:hover:bg-danger-700
+          focus:ring-danger-300 dark:focus:ring-danger-800
+        error: *danger
+        default: *primary
     outline:
       base: border
       color:
@@ -71,39 +64,27 @@ root:
           text-gray-400 border-gray-200 dark:text-white dark:border-gray-200
           hover:text-gray-400 hover:bg-gray-200 dark:hover:text-gray-900 dark:hover:bg-white
           focus:ring-gray-200 dark:focus:ring-gray-200
-        blue: &default >-
-          text-blue-700 border-blue-700 dark:text-blue-500 dark:border-blue-500
-          hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-500 
-          focus:ring-blue-300 dark:focus:ring-blue-800
-        red: &red >-
-          text-red-700 border-red-700 dark:text-red-500 dark:border-red-500
-          hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-500 
-          focus:ring-red-300 dark:focus:ring-red-800
-        green: &green >-
-          text-green-700 border-green-700 dark:text-green-500 dark:border-green-500
-          hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-500 
-          focus:ring-green-300 dark:focus:ring-green-800
-        yellow: &yellow >-
-          text-yellow-700 border-yellow-700 dark:text-yellow-500 dark:border-yellow-500
-          hover:text-white hover:bg-yellow-800 dark:hover:text-white dark:hover:bg-yellow-500 
-          focus:ring-yellow-300 dark:focus:ring-yellow-800
-        indigo: >-
-          text-indigo-700 border-indigo-700 dark:text-indigo-500 dark:border-indigo-500
-          hover:text-white hover:bg-indigo-800 dark:hover:text-white dark:hover:bg-indigo-500 
-          focus:ring-indigo-300 dark:focus:ring-indigo-800
-        purple: >-
-          text-purple-700 border-purple-700 dark:text-purple-500 dark:border-purple-500
-          hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500 
-          focus:ring-purple-300 dark:focus:ring-purple-800
-        pink: >-
-          text-pink-700 border-pink-700 dark:text-pink-500 dark:border-pink-500
-          hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-500 
-          focus:ring-pink-300 dark:focus:ring-pink-800
-        info: *default
-        success: *green
-        warning: *yellow
-        error: *red
-        default: *default
+        primary: &primary >-
+          text-primary-700 border-primary-700 dark:text-primary-500 dark:border-primary-500
+          hover:text-white hover:bg-primary-800 dark:hover:text-white dark:hover:bg-primary-500 
+          focus:ring-primary-300 dark:focus:ring-primary-800
+        info: >-
+          text-info-700 border-info-700 dark:text-info-500 dark:border-info-500
+          hover:text-white hover:bg-info-800 dark:hover:text-white dark:hover:bg-info-500 
+          focus:ring-info-300 dark:focus:ring-info-800
+        success: >-
+          text-success-700 border-success-700 dark:text-success-500 dark:border-success-500
+          hover:text-white hover:bg-success-800 dark:hover:text-white dark:hover:bg-success-500 
+          focus:ring-success-300 dark:focus:ring-success-800
+        warning: >-
+          text-warning-700 border-warning-700 dark:text-warning-500 dark:border-warning-500
+          hover:text-white hover:bg-warning-800 dark:hover:text-white dark:hover:bg-warning-500 
+          focus:ring-warning-300 dark:focus:ring-warning-800
+        danger: >-
+          text-danger-700 border-danger-700 dark:text-danger-500 dark:border-danger-500
+          hover:text-white hover:bg-danger-800 dark:hover:text-white dark:hover:bg-danger-500 
+          focus:ring-danger-300 dark:focus:ring-danger-800
+        default: *primary
 root/disabled:
   base: pointer-events-none cursor-not-allowed opacity-50
 indicator:

data/app/components/fox_tail/button_component.rb

@@ -66,7 +66,7 @@ class FoxTail::ButtonComponent < FoxTail::ButtonBaseComponent
               :span,
               loading_label,
               class: !loading? && theme.classname("hidden"),
-              data: { stimulus_controller.target_key => "loading" }
+              data: {stimulus_controller.target_key => "loading"}
             )
           )
           concat(
@@ -74,7 +74,7 @@ class FoxTail::ButtonComponent < FoxTail::ButtonBaseComponent
               :span,
               content,
               class: loading? && theme.classname("hidden"),
-              data: { stimulus_controller.target_key => "active" }
+              data: {stimulus_controller.target_key => "active"}
             )
           )
         else
@@ -95,19 +95,18 @@ class FoxTail::ButtonComponent < FoxTail::ButtonBaseComponent
   end
 
   def loader_classes(additional_classes = nil)
-    classnames theme.apply(:visual, self, { position: :left, loader: true }),
-               controlled? && !loading? && theme.classname("hidden"),
-               additional_classes
+    classnames theme.apply(:visual, self, {position: :left, loader: true}),
+      controlled? && !loading? && theme.classname("hidden"),
+      additional_classes
   end
 
   def visual_classes(side, addition_classes = nil)
-    classnames theme.apply(:visual, self, { position: side }), addition_classes
+    classnames theme.apply(:visual, self, {position: side}), addition_classes
   end
 
   private
 
   def icon_component(side, icon, options)
-    options[:variant] ||= :mini
     options[:"aria-hidden"] = true
     options[:class] = visual_classes side, options[:class]
     options[stimulus_controller.target_key(raw: true)] = "active" if controlled?

data/app/components/fox_tail/button_component.theme.yml

@@ -2,6 +2,7 @@ root:
   visuals?: group inline-flex items-center justify-center gap-2
 hidden: "hidden"
 visual:
+  base: shrink-0
   loader: text-gray-400 dark:text-gray-500 fill-white
   size:
     xs: h-3 w-3

data/app/components/fox_tail/carousel_component.rb

@@ -5,8 +5,8 @@ class FoxTail::CarouselComponent < FoxTail::BaseComponent
 
   renders_many :slides, lambda { |options = {}, &block|
     options[:class] = classnames theme.apply(:slide, self),
-                                 hidden_slide_classes,
-                                 options[:class]
+      hidden_slide_classes,
+      options[:class]
 
     if use_stimulus?
       options[:data] ||= {}
@@ -74,7 +74,7 @@ class FoxTail::CarouselComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super(options)
+      attributes = super
       attributes[:data][value_key(:position)] = options[:position]
       attributes[:data][value_key(:interval)] = options[:interval]
       attributes[:data][classes_key(:previous_slide)] = options[:previous_slide_classes]

data/app/components/fox_tail/checkbox_component.rb

@@ -1,24 +1,69 @@
 # frozen_string_literal: true
 
 class FoxTail::CheckboxComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+  include FoxTail::Concerns::HasStimulusController
+
   has_option :color, default: :default
   has_option :size, default: :base
+  has_option :value
   has_option :unchecked_value, default: "0"
   has_option :checked_value, default: "1"
   has_option :include_hidden, type: :boolean, default: true
+  has_option :multiple, type: :boolean, default: false
+  has_option :checked, type: :boolean
+  has_option :controlled, type: :boolean, default: false
+
+  def value
+    options[:value] ||= value_from_object
+  end
+
+  def checked?
+    return !!options[:checked] if options.key? :checked
+
+    case value
+    when TrueClass, FalseClass
+      value == !!checked_value
+    when NilClass
+      false
+    when String
+      value == checked_value
+    else
+      if value.respond_to?(:include?)
+        value.map(&:to_s).include?(checked_value.to_s)
+      else
+        value.to_i == checked_value.to_i
+      end
+    end
+  end
+
+  def use_stimulus?
+    super && controlled?
+  end
+
+  def stimulus_controller_options
+    {}
+  end
 
   def before_render
     super
 
+    if multiple?
+      add_default_name_and_id_for_value checked_value
+    else
+      add_default_name_and_id
+    end
+
     html_attributes[:type] = :checkbox
     html_attributes[:class] = classnames theme.apply(:root, self), html_class
     html_attributes[:value] = checked_value
+    html_attributes[:checked] = checked?
   end
 
   def call
     capture do
-      concat tag(:input, hidden_attributes) if include_hidden?
-      concat tag(:input, html_attributes)
+      concat tag.input(hidden_attributes) if include_hidden?
+      concat tag.input(html_attributes)
     end
   end
 
@@ -26,6 +71,14 @@ class FoxTail::CheckboxComponent < FoxTail::BaseComponent
 
   def hidden_attributes
     html_attributes.slice(:name, :disabled, :form)
-                   .merge!(type: :hidden, value: unchecked_value, autocomplete: "off")
+      .merge!(type: :hidden, value: unchecked_value, autocomplete: "off")
   end
+
+  class << self
+    def stimulus_controller_name
+      "form-field"
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController; end
 end

data/app/components/fox_tail/checkbox_component.theme.yml

@@ -8,11 +8,9 @@ root:
     base: w-4 h-4
     lg: w-6 h-6
   color:
-    blue: &default text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600
-    red: text-red-600 focus:ring-red-500 dark:focus:ring-red-600
-    green: text-green-600 focus:ring-green-500 dark:focus:ring-green-600
-    yellow: text-yellow-600 focus:ring-yellow-500 dark:focus:ring-yellow-600
-    indigo: text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600
-    purple: text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600
-    pink: text-pink-600 focus:ring-pink-500 dark:focus:ring-pink-600
-    default: *default
+    primary: &primary text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600
+    info: text-info-600 focus:ring-info-500 dark:focus:ring-info-600
+    success: text-success-600 focus:ring-success-500 dark:focus:ring-success-600
+    warning: text-warning-600 focus:ring-warning-500 dark:focus:ring-warning-600
+    danger: text-danger-600 focus:ring-danger-500 dark:focus:ring-danger-600
+    default: *primary