fluxbit_view_components 0.3.0 → 0.4.0

data/app/components/fluxbit/timeline_item_component.html.erb

@@ -0,0 +1,64 @@
+<li <%= tag.attributes(**@props) %>>
+  <% if @variant == :activity %>
+    <div class="<%= styles[:activity][:indicator] %>"></div>
+    <div class="<%= styles[:activity][:base] %>">
+      <% if @date %>
+        <time class="<%= styles[:activity][:time] %>"><%= @date %></time>
+      <% end %>
+      <% if render_as_link? %>
+        <a href="<%= @href %>" class="<%= styles[:activity][:title] %>"><%= @title %></a>
+      <% else %>
+        <h3 class="<%= styles[:activity][:title] %>"><%= @title %></h3>
+      <% end %>
+      <% if @description %>
+        <p class="<%= styles[:activity][:description] %>"><%= @description %></p>
+      <% end %>
+    </div>
+  <% elsif @variant == :stepper %>
+    <div class="<%= styles[:stepper][:indicator_container] %>">
+      <div class="<%= stepper_indicator_classes %>">
+        <% if @icon %>
+          <%= icon(@icon, class: (@status == :completed || @status == :current) ? styles[:stepper][:icon_completed] : styles[:stepper][:icon]) %>
+        <% end %>
+      </div>
+      <% unless is_last? %>
+        <div class="<%= styles[:stepper][:connector] %>"></div>
+      <% end %>
+    </div>
+    <div class="<%= styles[:stepper][:content] %>">
+      <% if @title %>
+        <h3 class="<%= styles[:stepper][:title] %>"><%= @title %></h3>
+      <% end %>
+      <% if @date %>
+        <time class="<%= styles[:stepper][:description] %>"><%= @date %></time>
+      <% end %>
+      <% if @description %>
+        <p class="<%= styles[:stepper][:description_paragraph] %>"><%= @description %></p>
+      <% end %>
+    </div>
+  <% else %>
+    <!-- Default and vertical variants -->
+    <div class="<%= indicator_classes %>">
+      <% if @icon %>
+        <%= icon(@icon, class: styles[:item][:icon]) %>
+      <% else %>
+        <div class="<%= styles[:item][:dot] %>"></div>
+      <% end %>
+    </div>
+    <div class="<%= styles[:item][:content][:base] %>">
+      <% if @date %>
+        <time class="<%= styles[:item][:content][:date] %>"><%= @date %></time>
+      <% end %>
+      <% if @title %>
+        <% if render_as_link? %>
+          <a href="<%= @href %>" class="<%= styles[:item][:content][:title] %>"><%= @title %></a>
+        <% else %>
+          <h3 class="<%= styles[:item][:content][:title] %>"><%= @title %></h3>
+        <% end %>
+      <% end %>
+      <% if @description %>
+        <p class="<%= styles[:item][:content][:description] %>"><%= @description %></p>
+      <% end %>
+    </div>
+  <% end %>
+</li>

data/app/components/fluxbit/timeline_item_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::TimelineItemComponent` is a component for rendering individual timeline items.
+class Fluxbit::TimelineItemComponent < Fluxbit::Component
+  include Fluxbit::Config::TimelineComponent
+
+  # Initializes the TimelineItem component.
+  #
+  # @param [Hash] **props The properties to customize the timeline item.
+  # @option props [Symbol] :variant (nil) The timeline variant from parent component.
+  # @option props [String] :title (nil) The title of the timeline item.
+  # @option props [String] :description (nil) The description text.
+  # @option props [String] :date (nil) The date or time for the item.
+  # @option props [String, Symbol] :icon (nil) The icon to display in the timeline indicator.
+  # @option props [Symbol] :status (:default) The status of the item (:default, :completed, :current, :pending).
+  # @option props [Symbol] :color (:blue) The color theme (:blue, :green, :red, :yellow, :purple, :indigo).
+  # @option props [String] :href (nil) URL to make the item clickable.
+  # @option props [Symbol] :ring (:default) The ring size around indicator (:none, :small, :default, :large).
+  # @option props [String] :remove_class ('') CSS classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::TimelineItemComponent]
+  def initialize(**props)
+    super
+    @props = props
+
+    @variant = @props.delete(:variant) || :default
+    @title = @props.delete(:title)
+    @description = @props.delete(:description)
+    @date = @props.delete(:date)
+    @icon = @props.delete(:icon)
+    @status = options @props.delete(:status), collection: styles[:item][:indicator][:status].keys, default: :default
+    @color = options @props.delete(:color), collection: styles[:item][:indicator][:colors].keys, default: :blue
+    @ring = options @props.delete(:ring), collection: styles[:item][:indicator][:rings].keys, default: :default
+    @href = @props.delete(:href)
+
+    if @variant != :stepper
+      add class: styles[:item][:base], to: @props
+    end
+
+    remove_class_from_props(@props)
+  end
+
+  def before_render
+    super
+    if @variant == :stepper
+      # Add stepper classes after @is_last is set
+      add class: styles[:stepper][:item], to: @props
+    end
+  end
+
+  private
+
+  def indicator_classes
+    [
+      styles[:item][:indicator][:base],
+      styles[:item][:indicator][:status][@status],
+      styles[:item][:indicator][:colors][@color],
+      styles[:item][:indicator][:rings][@ring]
+    ].compact.join(" ")
+  end
+
+  def render_as_link?
+    @href.present?
+  end
+
+  def is_last?
+    @is_last || false
+  end
+
+  def stepper_indicator_classes
+    if @status == :completed || @status == :current
+      styles[:stepper][:indicator_completed]
+    else
+      styles[:stepper][:indicator]
+    end
+  end
+end

data/app/components/fluxbit/tooltip_component.rb

@@ -24,7 +24,7 @@ class Fluxbit::TooltipComponent < Fluxbit::Component
   end
 
   def call
-    content_tag(:div, @props) do
+    tag.div(**@props) do
       concat content
       concat arrow
     end
@@ -33,6 +33,6 @@ class Fluxbit::TooltipComponent < Fluxbit::Component
   def arrow
     return "" unless @has_arrow
 
-    content_tag :div, "", "data-popper-arrow" => true, class: "tooltip-arrow"
+    tag.div("", "data-popper-arrow" => true, class: "tooltip-arrow")
   end
 end

data/app/helpers/fluxbit/components_helper.rb

@@ -3,20 +3,59 @@
 module Fluxbit
   module ComponentsHelper
     # Components
-    [ :avatar, :avatar_group, :gravatar, :alert, :button, :button_group,
-      :badge, :card, :modal, :popover, :tooltip, :flex, :tab ].each do |component|
+    [ :accordion, :avatar, :avatar_group, :banner, :bottom_navigation, :breadcrumb, :gravatar, :alert, :button, :button_group, :link,
+      :badge, :carousel, :drawer, :dropdown, :card, :modal, :pagination, :popover, :tooltip, :flex, :tab, :table, :skeleton, :stepper, :speed_dial, :theme_button, :timeline, :spinner_percent, :progress ].each do |component|
       define_method("fx_#{component}") do |*args, **kwargs, &block|
         fluxbit_method(component.to_s.camelize, *args, **kwargs, &block)
       end
     end
 
     # Forms
-    [ :help_text, :check_box, :form_builder, :label, :range,
-      :select, :toggle, :upload_image, :dropzone ].each do |component|
+    [ :help_text, :form_builder, :label, :range,
+      :toggle, :upload_image, :dropzone, :radio_group_button ].each do |component|
       define_method("fx_#{component}") do |*args, **kwargs, &block|
         fluxbit_method("Form::#{component.to_s.camelize}", *args, **kwargs, &block)
       end
     end
+
+    # Mimics Rails' select_tag signature:
+    # select_tag(name, option_tags = nil, options = {})
+    #
+    # @param name [String, Symbol] Name attribute for the select tag
+    # @param option_tags [String, Array, Hash, nil] Pre-formatted HTML or raw options data
+    # @param options [Hash] HTML attributes and select options (prompt, class, etc.)
+    # @param block [Proc] Optional block for custom options
+    #
+    # @example Basic usage
+    #   fx_select "role", ["Admin", "User", "Guest"]
+    #
+    # @example With options
+    #   fx_select "country", countries, prompt: "Select a country", class: "custom-select"
+    #
+    # @example With pre-formatted options
+    #   fx_select "status", options_for_select(statuses, selected: "active")
+    #
+    # @example Named parameters (backwards compatible)
+    #   fx_select name: "role", options: ["Admin", "User"], prompt: "Choose..."
+    def fx_select(name = nil, option_tags = nil, options = {}, &block)
+      # Handle both positional and named parameters
+      if name.is_a?(Hash)
+        # Named parameters: fx_select(name: "role", options: [...], prompt: "...")
+        options = name
+        name = options.delete(:name)
+        option_tags = options.delete(:options) || options.delete(:choices)
+      elsif option_tags.is_a?(Hash) && options.empty?
+        # Two args with second being options: fx_select("role", prompt: "...")
+        options = option_tags
+        option_tags = options.delete(:options) || options.delete(:choices)
+      end
+
+      # Set the options/choices
+      options[:options] = option_tags if option_tags.present?
+      options[:name] = name if name.present?
+
+      fluxbit_method("Form::Select", **options, &block)
+    end
     def form_builder(...) = fluxbit_method("Form::FormBuilder", ...)
 
     Fluxbit::Form::TextFieldComponent::TYPE_OPTIONS.each do |type|
@@ -30,10 +69,41 @@ module Fluxbit
         fluxbit_method("Form::CheckBox", *args, type: type, **kwargs, &block)
       end
     end
+
     # Typography
     def fx_heading(...) = fluxbit_method("Heading", ...)
     def fx_txt(...) = fluxbit_method("Text", ...)
 
+
+    def fx_link_to_old(body, url, **kwargs, &block)
+      kwargs[:body] = body if body.is_a?(String)
+      kwargs[:url] = url if url.is_a?(String)
+      kwargs[:with_content] = block if block_given?
+      Fluxbit::TextComponent.new(body, url, **kwargs).render(&block)
+    end
+
+    def fx_link_to(body = nil, url = nil, **kwargs, &block)
+      kwargs[:as] = :a
+      if block_given? && body.is_a?(String) && (url.is_a?(String) || url.is_a?(Symbol))
+        # Handle case: fx_link_to("Link text", "/path") { ... }
+        kwargs[:href] = url
+        fluxbit_method("Link", as: :a, content: body, **kwargs, &block)
+      elsif block_given? && body.is_a?(String) && url.nil?
+        # Handle case: fx_link_to("/path") { ... content ... }
+        kwargs[:href] = body # first arg is URL
+        fluxbit_method("Link", as: :a, **kwargs, &block)
+      elsif !block_given? && body.is_a?(String) && (url.is_a?(String) || url.is_a?(Symbol))
+        # Handle case: fx_link_to("Link text", "/path", class: "...")
+        component_klass = "Fluxbit::LinkComponent".constantize
+        kwargs[:href] = url
+        render(component_klass.new(**kwargs).with_content(body))
+      else
+        # Handle other cases or provide feedback
+        raise ArgumentError, "Invalid arguments for fx_link_to"
+      end
+    end
+
+
     def fluxbit_method(method_name, *args, **kwargs, &c)
       component_klass = "Fluxbit::#{method_name}Component".constantize
       if kwargs[:with_content]

data/app/helpers/fluxbit/form_builder.rb

@@ -22,14 +22,17 @@ module Fluxbit
         within: within,
         data: { errors_summary: true }
       ) do |banner|
-        [
-          render(Fluxbit::ListComponent.new) do |list|
-            object.errors.full_messages.each do |error|
-              list.with_item { error.html_safe }
-            end
-          end,
-          (template.capture { yield(banner) } if block_given?)
-        ].compact.join.html_safe
+        parts = []
+
+        parts << render(Fluxbit::ListComponent.new) do |list|
+          object.errors.full_messages.each do |error|
+            list.with_item { template.sanitize(error.to_s, tags: [], attributes: []) }
+          end
+        end
+
+        parts << template.capture { yield(banner) } if block_given?
+
+        template.safe_join(parts)
       end
     end
 
@@ -65,7 +68,7 @@ module Fluxbit
       end
     end
 
-    [ :range, :toggle, :upload_image, :dropzone ].each do |component|
+    [ :range, :toggle, :upload_image, :dropzone, :password ].each do |component|
       define_method("fx_#{component}") do |method, **options, &block|
         options[:error] ||= error_for(method)
         options[:error] = !!options[:error] if options[:error_hidden] && options[:error]
@@ -74,14 +77,60 @@ module Fluxbit
       end
     end
 
-    # select(object, method, choices = nil, options = {}, html_options = {}, &block) public
-    def fx_select(method, **options, &block)
-      options[:error] ||= error_for(method)
-      options[:error] = !!options[:error] if options[:error_hidden] && options[:error]
+    def fx_radio_group_button(method, **options, &block)
+      options[:name] ||= "#{@object_name}[#{method}]"
+      render Fluxbit::Form::RadioGroupButtonComponent.new(**options), &block
+    end
+
+    # Mimics Rails' form.select signature:
+    # select(method, choices = nil, options = {}, html_options = {}, &block)
+    #
+    # @param method [Symbol] The attribute name
+    # @param choices [Array, Hash, String, nil] Options for the select (raw data or pre-formatted HTML)
+    # @param options [Hash] Options like prompt, include_blank, selected, disabled
+    # @param html_options [Hash] HTML attributes for the select tag
+    # @param block [Proc] Optional block for custom options
+    #
+    # @example Basic usage
+    #   form.fx_select :role, ["Admin", "User", "Guest"]
+    #
+    # @example With options
+    #   form.fx_select :country, countries, { prompt: "Select a country" }, { class: "custom-class" }
+    #
+    # @example With pre-formatted options
+    #   form.fx_select :status, options_for_select(statuses, selected: "active")
+    def fx_select(method, choices = nil, options = {}, html_options = {}, &block)
+      # Handle Rails-style signature
+      all_options = html_options.merge(options)
+
+      # Set the choices/options
+      all_options[:options] = choices if choices.present?
+
+      # Add error handling
+      all_options[:error] ||= error_for(method)
+      all_options[:error] = !!all_options[:error] if all_options[:error_hidden] && all_options[:error]
+
+      # Set selected value from object if not explicitly provided
       value = object&.public_send(method)
-      options[:selected] = value if value.present?
+      all_options[:selected] ||= value if value.present?
+
+      render Fluxbit::Form::SelectComponent.new(form: self, attribute: method, **all_options, &block)
+    end
+
+    def fx_submit(content = nil, **options, &block)
+      options[:form] = self
+      options[:content] = content if content.present?
+      options[:color] ||= :primary
+      options[:size] ||= 2
+      options[:disabled] = true if object&.persisted? && !object.valid?
 
-      render Fluxbit::Form::SelectComponent.new(form: self, attribute: method, **options, &block)
+      if block_given?
+        render Fluxbit::ButtonComponent.new(**options) do |*args|
+          yield(*args)
+        end
+      else
+        render Fluxbit::ButtonComponent.new(**options)
+      end
     end
   end
 end

data/app/helpers/fluxbit/view_helper.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Fluxbit
+  module ViewHelper
+    def fx_body_class
+      "h-full bg-slate-100 dark:bg-slate-900 dark:text-white"
+    end
+
+    def fx_sort_field(field, url, label = nil)
+      order = (request.query_parameters[:order] || "").rpartition("_")
+
+      order_direction = "asc"
+      if order.first == field.to_s
+        order_direction = order.last == "asc" ? "desc" : "asc"
+      end
+
+      link_to public_send(url, request.query_parameters.merge(order: "#{field}_#{order_direction}")), class: "order-#{order_direction} flex" do
+        label_text = label || field.to_s.titlecase
+        icon = if order.first == field.to_s
+          order_direction == "asc" ? fx_sort_up : fx_sort_down
+        else
+          fx_sort_up_down
+        end
+
+        safe_join([ h(label_text), icon ], " ")
+      end
+    end
+
+    def fx_sort_up_down
+      content_tag :svg, class: "size-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" do
+        concat(
+          content_tag(
+            :path,
+            "",
+            fill_rule: "evenodd",
+            d: "M11.47 4.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1-1.06 1.06L12 6.31 8.78 9.53a.75.75 0 0 1-1.06-1.06l3.75-3.75Zm-3.75 9.75a.75.75 0 0 1 1.06 0L12 17.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0l-3.75-3.75a.75.75 0 0 1 0-1.06Z",
+            clip_rule: "evenodd"
+          )
+        )
+      end
+    end
+
+    def fx_sort_up
+      content_tag :svg, class: "size-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" do
+        concat(
+          content_tag(
+            :path,
+            "",
+            fill_rule: "evenodd",
+            d: "M11.47 4.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1-1.06 1.06L12 6.31 8.78 9.53a.75.75 0 0 1-1.06-1.06l3.75-3.75Z",
+            clip_rule: "evenodd"
+          )
+        )
+      end
+    end
+
+    def fx_sort_down
+      content_tag :svg, class: "size-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" do
+        concat(
+          content_tag(
+            :path,
+            "",
+            fill_rule: "evenodd",
+            d: "M11.47 19.28a.75.75 0 0 1 1.06 0l3.75-3.75a.75.75 0 0 1-1.06-1.06L12 17.69l-3.22-3.22a.75.75 0 1 1-1.06 1.06l3.75 3.75Z",
+            clip_rule: "evenodd"
+          )
+        )
+      end
+    end
+  end
+end

data/config/locales/en.yml

@@ -1,6 +1,39 @@
 en:
   fluxbit:
-    form_builder:
-      errors_summary:
-        one: "There is 1 error with this %{model}:"
-        other: "There are %{count} errors with this %{model}:"
+    alert:
+      aria_close: Close
+      dismiss: Dismiss
+    banner:
+      aria_close: Close
+      dismiss: Dismiss
+    drawer:
+      dismiss: Dismiss
+    modal:
+      aria_close: Close
+      dismiss: Dismiss
+    pagination:
+      aria_label:
+        nav:
+          one: Page
+          other: Pages
+        prev: Previous
+        next: Next
+        first: First
+        last: Last
+      first: First
+      last: Last
+      prev: Previous
+      next: Next
+    skeleton:
+      loading: Loading...
+    speed_dial:
+      open_actions_menu: Open actions menu
+    form:
+      password:
+        checks:
+          length: At least %{count} characters
+          uppercase: Contains uppercase letter
+          lowercase: Contains lowercase letter
+          numbers: Contains number
+          special: Contains special character
+        strength: Password strength

data/config/locales/pt-BR.yml

@@ -0,0 +1,36 @@
+pt-BR:
+  fluxbit:
+    alert:
+      aria_close: Close
+      dismiss: Dismiss
+    drawer:
+      dismiss: Dismiss
+    modal:
+      aria_close: Close
+      dismiss: Dismiss
+    pagination:
+      aria_label:
+        nav:
+          one: Página
+          other: Páginas
+        prev: Anterior
+        next: Próximo
+        first: Primeiro
+        last: Último
+      first: Primeiro
+      last: Último
+      prev: Anterior
+      next: Próximo
+    skeleton:
+      loading: Carregando...
+    speed_dial:
+      open_actions_menu: Abrir menu de ações
+    form:
+      password:
+        checks:
+          length: Pelo menos %{count} caracteres
+          uppercase: Contém letra maiúscula
+          lowercase: Contém letra minúscula
+          numbers: Contém número
+          special: Contém caractere especial
+        strength: Força da senha

data/lib/fluxbit/config/accordion_component.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::AccordionComponent
+  mattr_accessor :flush, default: false
+  mattr_accessor :color, default: :default
+  mattr_accessor :collapse_all, default: false
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "space-y-2",
+      item: {
+        base: "",
+        header: {
+          base: "flex items-center justify-between w-full p-5 font-medium rtl:text-right border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3",
+          first: "rounded-t-xl",
+          last: "rounded-b-xl",
+          middle: "border-b-0"
+        },
+        content: {
+          base: "p-5 border border-gray-200 dark:border-gray-700",
+          first: "",
+          last: "rounded-b-xl border-t-0",
+          middle: "border-t-0 border-b-0"
+        },
+        icon: {
+          base: "w-3 h-3 rotate-180 shrink-0",
+          open: "rotate-180",
+          closed: ""
+        }
+      },
+      colors: {
+        default: {
+          header: "bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400",
+          content: "bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400"
+        },
+        light: {
+          header: "bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white",
+          content: "bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white"
+        },
+        primary: {
+          header: "bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 border-blue-200 dark:border-blue-800",
+          content: "bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 border-blue-200 dark:border-blue-800"
+        },
+        secondary: {
+          header: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-gray-700",
+          content: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-gray-700"
+        },
+        success: {
+          header: "bg-green-50 dark:bg-green-900 text-green-900 dark:text-green-100 border-green-200 dark:border-green-800",
+          content: "bg-green-50 dark:bg-green-900 text-green-900 dark:text-green-100 border-green-200 dark:border-green-800"
+        },
+        danger: {
+          header: "bg-red-50 dark:bg-red-900 text-red-900 dark:text-red-100 border-red-200 dark:border-red-800",
+          content: "bg-red-50 dark:bg-red-900 text-red-900 dark:text-red-100 border-red-200 dark:border-red-800"
+        },
+        warning: {
+          header: "bg-yellow-50 dark:bg-yellow-900 text-yellow-900 dark:text-yellow-100 border-yellow-200 dark:border-yellow-800",
+          content: "bg-yellow-50 dark:bg-yellow-900 text-yellow-900 dark:text-yellow-100 border-yellow-200 dark:border-yellow-800"
+        },
+        info: {
+          header: "bg-cyan-50 dark:bg-cyan-900 text-cyan-900 dark:text-cyan-100 border-cyan-200 dark:border-cyan-800",
+          content: "bg-cyan-50 dark:bg-cyan-900 text-cyan-900 dark:text-cyan-100 border-cyan-200 dark:border-cyan-800"
+        },
+        dark: {
+          header: "bg-gray-800 dark:bg-gray-700 text-gray-100 dark:text-gray-200 border-gray-700 dark:border-gray-600",
+          content: "bg-gray-800 dark:bg-gray-700 text-gray-100 dark:text-gray-200 border-gray-700 dark:border-gray-600"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/avatar_component.rb

@@ -32,7 +32,7 @@ module Fluxbit::Config::AvatarComponent
       },
       color: {
         dark: "ring-gray-800 dark:ring-gray-800",
-        failure: "ring-red-500 dark:ring-red-700",
+        danger: "ring-red-500 dark:ring-red-700",
         gray: "ring-gray-500 dark:ring-gray-400",
         info: "ring-cyan-400 dark:ring-cyan-800",
         light: "ring-gray-300 dark:ring-gray-500",
@@ -42,20 +42,20 @@ module Fluxbit::Config::AvatarComponent
         pink: "ring-pink-500 dark:ring-pink-500"
       },
       size: {
-        xs: "w-6 h-6",
-        sm: "w-8 h-8",
-        md: "w-10 h-10",
-        lg: "w-20 h-20",
-        xl: "w-36 h-36"
+        xs: "size-6",
+        sm: "size-8",
+        md: "size-10",
+        lg: "size-20",
+        xl: "size-36"
       },
       placeholder_icon: {
         base: "relative overflow-hidden bg-gray-200 dark:bg-gray-600",
         size: {
-          xs: "w-8 h-8",
-          sm: "w-10 h-10",
-          md: "w-12 h-12",
-          lg: "w-22 h-22",
-          xl: "w-38 h-38"
+          xs: "size-8",
+          sm: "size-10",
+          md: "size-12",
+          lg: "size-22",
+          xl: "size-38"
         }
       },
       stacked: "ring-2 ring-gray-300 dark:ring-gray-500",