okonomi_ui_kit 0.1.8 → 0.1.10

data/app/helpers/okonomi_ui_kit/components/alert.rb

@@ -2,7 +2,7 @@ module OkonomiUiKit
   module Components
     class Alert < OkonomiUiKit::Component
       def render(title, options = {}, &block)
-        view.render(template_path, title:, options: options.with_indifferent_access, &block)
+        view.render(template_path, title: title, options: options.with_indifferent_access, &block)
       end
     end
   end

data/app/helpers/okonomi_ui_kit/components/badge.rb

@@ -5,11 +5,11 @@ module OkonomiUiKit
         options = options.with_indifferent_access
         severity = (options.delete(:severity) || options.delete(:variant) || :default).to_sym
 
-        classes = [
+        classes = tw_merge(
           style(:base),
-          style(:severities, severity) || '',
-          options.delete(:class) || ''
-        ].reject(&:blank?).join(' ')
+          style(:severities, severity),
+          options.delete(:class)
+        )
 
         view.tag.span(text, class: classes, **options)
       end

data/app/helpers/okonomi_ui_kit/components/breadcrumbs.rb

@@ -28,7 +28,7 @@ module OkonomiUiKit
         }
       end
 
-      def initialize(template, options = {})
+      def initialize(template)
         super
         @items = []
         @builder = BreadcrumbBuilder.new(self)
@@ -36,9 +36,9 @@ module OkonomiUiKit
 
       def render(options = {}, &block)
         return "" if block.nil?
-        
+
         block.call(@builder)
-        view.render("okonomi/components/breadcrumbs/breadcrumbs", 
+        view.render("okonomi/components/breadcrumbs/breadcrumbs",
           component: self,
           items: @items,
           options: options
@@ -66,4 +66,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

data/app/helpers/okonomi_ui_kit/components/button_base.rb

@@ -1,40 +1,108 @@
 module OkonomiUiKit
   module Components
     class ButtonBase < OkonomiUiKit::Component
-      def build_button_class(variant:, color:, classes: '')
+      def build_button_class(variant:, color:, classes: "")
         [
-          style(:root) || '',
-          style(variant.to_sym, :root) || '',
-          style(variant.to_sym, :colors, color.to_sym) || '',
-          classes,
-        ].reject(&:blank?).join(' ')
+          style(:root) || "",
+          style(variant.to_sym, :root) || "",
+          style(variant.to_sym, :colors, color.to_sym) || "",
+          classes
+        ].reject(&:blank?).join(" ")
+      end
+
+      # Extracts and normalizes icon configuration from options
+      # Returns [icon_config, updated_options]
+      # icon_config will be nil or { path: "icon/path", position: :start/:end }
+      def extract_icon_config(options)
+        return [nil, options] unless options.is_a?(Hash)
+        
+        icon_option = options.delete(:icon)
+        return [nil, options] unless icon_option
+        
+        icon_config = case icon_option
+        when String
+          { path: icon_option, position: :start }
+        when Hash
+          if icon_option[:start]
+            { path: icon_option[:start], position: :start }
+          elsif icon_option[:end]
+            { path: icon_option[:end], position: :end }
+          else
+            # Invalid hash format, ignore
+            nil
+          end
+        else
+          nil
+        end
+        
+        [icon_config, options]
+      end
+
+      # Renders button content with optional icon
+      # icon_config: { path: "icon/path", position: :start/:end }
+      # content: String or block content
+      # block: Optional block for content
+      def render_button_content(icon_config, content = nil, &block)
+        icon_html = if icon_config
+          view.ui.icon(icon_config[:path], class: style(:icon, icon_config[:position]))
+        end
+        
+        content_html = if block_given?
+          view.capture(&block)
+        else
+          content
+        end
+        
+        # Check if we have actual content (not empty/nil)
+        has_content = content_html.present?
+        
+        if icon_config && has_content
+          # Both icon and content - wrap in flex container with gap
+          wrapper_class = "inline-flex items-center gap-1.5"
+          
+          if icon_config[:position] == :end
+            view.content_tag(:span, class: wrapper_class) do
+              view.safe_join([content_html, icon_html].compact)
+            end
+          else
+            view.content_tag(:span, class: wrapper_class) do
+              view.safe_join([icon_html, content_html].compact)
+            end
+          end
+        elsif icon_config
+          # Icon only - no wrapper needed
+          icon_html
+        else
+          # Content only
+          content_html
+        end
       end
 
       register_styles :default do
         {
           root: "hover:cursor-pointer text-sm",
           outlined: {
-            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
+            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none",
             colors: {
-              default: "bg-white text-default-700 border-default-700 hover:bg-default-50",
-              primary: "bg-white text-primary-600 border-primary-600 hover:bg-primary-50",
-              secondary: "bg-white text-secondary-600 border-secondary-600 hover:bg-secondary-50",
-              success: "bg-white text-success-600 border-success-600 hover:bg-success-50",
-              danger: "bg-white text-danger-600 border-danger-600 hover:bg-danger-50",
-              warning: "bg-white text-warning-600 border-warning-600 hover:bg-warning-50",
-              info: "bg-white text-info-600 border-info-600 hover:bg-info-50"
+              default: "bg-white text-default-700 border-default-700 hover:bg-default-50 active:bg-default-100",
+              primary: "bg-white text-primary-600 border-primary-600 hover:bg-primary-50 active:bg-primary-100",
+              secondary: "bg-white text-secondary-600 border-secondary-600 hover:bg-secondary-50 active:bg-secondary-100",
+              success: "bg-white text-success-600 border-success-600 hover:bg-success-50 active:bg-success-100",
+              danger: "bg-white text-danger-600 border-danger-600 hover:bg-danger-50 active:bg-danger-100",
+              warning: "bg-white text-warning-600 border-warning-600 hover:bg-warning-50 active:bg-warning-100",
+              info: "bg-white text-info-600 border-info-600 hover:bg-info-50 active:bg-info-100"
             }
           },
           contained: {
-            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
+            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none",
             colors: {
-              default: "border-default-700 bg-default-600 text-white hover:bg-default-700",
-              primary: "border-primary-700 bg-primary-600 text-white hover:bg-primary-700",
-              secondary: "border-secondary-700 bg-secondary-600 text-white hover:bg-secondary-700",
-              success: "border-success-700 bg-success-600 text-white hover:bg-success-700",
-              danger: "border-danger-700 bg-danger-600 text-white hover:bg-danger-700",
-              warning: "border-warning-700 bg-warning-600 text-white hover:bg-warning-700",
-              info: "border-info-700 bg-info-600 text-white hover:bg-info-700"
+              default: "border-default-700 bg-default-600 text-white hover:bg-default-700 active:bg-default-500",
+              primary: "border-primary-700 bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-500",
+              secondary: "border-secondary-700 bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-500",
+              success: "border-success-700 bg-success-600 text-white hover:bg-success-700 active:bg-success-500",
+              danger: "border-danger-700 bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-500",
+              warning: "border-warning-700 bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-500",
+              info: "border-info-700 bg-info-600 text-white hover:bg-info-700 active:bg-info-500"
             }
           },
           text: {
@@ -48,6 +116,10 @@ module OkonomiUiKit
               warning: "text-warning-600 hover:underline",
               info: "text-info-600 hover:underline"
             }
+          },
+          icon: {
+            start: "size-3.5",
+            end: "size-3.5"
           }
         }
       end

data/app/helpers/okonomi_ui_kit/components/button_tag.rb

@@ -2,22 +2,28 @@ module OkonomiUiKit
   module Components
     class ButtonTag < OkonomiUiKit::Components::ButtonBase
       def render(name = nil, options = {}, &block)
-        options, name = options, block if block_given?
+        # Handle different parameter patterns
+        if name.is_a?(Hash) && options.empty?
+          # Called as button_tag(options) with block
+          options = name
+          name = nil
+        end
 
         options ||= {}
         options = options.with_indifferent_access
 
-        variant = (options.delete(:variant) || 'contained').to_sym
-        color = (options.delete(:color) || 'default').to_sym
+        variant = (options.delete(:variant) || "contained").to_sym
+        color = (options.delete(:color) || "default").to_sym
+        
+        # Extract icon configuration
+        icon_config, options = extract_icon_config(options)
 
         options[:class] = build_button_class(variant: variant, color: color, classes: options[:class])
 
-        if block_given?
-          view.button_tag(options, &block)
-        else
-          view.button_tag(name, options)
+        view.button_tag(options) do
+          render_button_content(icon_config, name, &block)
         end
       end
     end
   end
-end
+end

data/app/helpers/okonomi_ui_kit/components/button_to.rb

@@ -7,17 +7,18 @@ module OkonomiUiKit
         html_options ||= {}
         html_options = html_options.with_indifferent_access
 
-        variant = (html_options.delete(:variant) || 'contained').to_sym
-        color = (html_options.delete(:color) || 'default').to_sym
+        variant = (html_options.delete(:variant) || "contained").to_sym
+        color = (html_options.delete(:color) || "default").to_sym
+        
+        # Extract icon configuration
+        icon_config, html_options = extract_icon_config(html_options)
 
         html_options[:class] = build_button_class(variant: variant, color: color, classes: html_options[:class])
 
-        if block_given?
-          view.button_to(options, html_options, &block)
-        else
-          view.button_to(name, options, html_options)
+        view.button_to(options, html_options) do
+          render_button_content(icon_config, name, &block)
         end
       end
     end
   end
-end
+end

data/app/helpers/okonomi_ui_kit/components/code.rb

@@ -8,61 +8,65 @@ module OkonomiUiKit
 
         # Extract component-specific options
         language = options.delete(:language) || options.delete(:lang)
-        variant = (options.delete(:variant) || 'default').to_sym
-        size = (options.delete(:size) || 'default').to_sym
+        variant = (options.delete(:variant) || "default").to_sym
+        size = (options.delete(:size) || "default").to_sym
         wrap = options.delete(:wrap) != false # Default to true
 
         # Build classes
         classes = build_classes(variant: variant, size: size, wrap: wrap, custom_class: options.delete(:class))
 
         # Escape HTML entities in content
-        escaped_content = if block_given?
-                            view.capture(&block)
-                          elsif content
-                            content
-                          else
-                            ""
-                          end
+        raw_content = if block_given?
+                        view.capture(&block)
+        elsif content
+                        content
+        else
+                        ""
+        end
+
+        escaped_content = html_escape(raw_content)
 
         view.render(
           template_path,
-          content: escaped_content.strip.html_safe,
+          content: escaped_content,
           options: options,
           classes: classes,
           language: language
         )
       end
 
+      register_styles :default do
+        {
+          base: "",
+          variants: {
+            default: "bg-gray-900 text-gray-100 p-4 rounded-lg",
+            inline: "bg-gray-100 text-gray-900 px-1 py-0.5 rounded text-sm font-mono",
+            minimal: "bg-gray-900 text-gray-100 p-3 rounded text-xs"
+          },
+          sizes: {
+            xs: "text-xs",
+            sm: "text-sm",
+            default: "text-sm",
+            lg: "text-base"
+          },
+          wrap: {
+            true: "overflow-x-auto",
+            false: "overflow-hidden"
+          }
+        }
+      end
+
       private
 
       def build_classes(variant:, size:, wrap:, custom_class: nil)
-        base_classes = theme.dig(:components, :code, :base) || "bg-gray-900 text-gray-100 rounded-lg"
-
-        variant_classes = case variant
-                          when :inline
-                            "bg-gray-100 text-gray-900 px-1 py-0.5 rounded text-sm font-mono"
-                          when :minimal
-                            "bg-gray-900 text-gray-100 p-3 rounded text-xs"
-                          else
-                            # :default
-                            "bg-gray-900 text-gray-100 p-4 rounded-lg"
-                          end
-
-        size_classes = case size
-                       when :xs
-                         "text-xs"
-                       when :sm
-                         "text-sm"
-                       when :lg
-                         "text-base"
-                       else
-                         # :default
-                         "text-sm"
-                       end
-
-        wrap_classes = wrap ? "overflow-x-auto" : "overflow-hidden"
+        base_classes = style(:base) || ""
+        variant_classes = style(:variants, variant) || ""
+        size_classes = style(:sizes, size) || ""
+        # Convert boolean wrap to symbol for hash access
+        wrap_key = wrap ? :true : :false
+        wrap_classes = style(:wrap, wrap_key) || ""
 
-        [base_classes, variant_classes, size_classes, wrap_classes, custom_class].compact.join(' ')
+        [ base_classes, variant_classes, size_classes, wrap_classes, custom_class ].reject(&:blank?).join(" ")
       end
 
       def html_escape(content)
@@ -70,4 +74,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

data/app/helpers/okonomi_ui_kit/components/confirmation_modal.rb

@@ -0,0 +1,130 @@
+module OkonomiUiKit
+  module Components
+    class ConfirmationModal < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        options = options.with_indifferent_access
+        
+        # Extract and validate required options
+        title = options.fetch(:title) { raise ArgumentError, "title is required" }
+        message = options.fetch(:message) { raise ArgumentError, "message is required" }
+        
+        # Extract optional parameters with defaults
+        confirm_text = options.delete(:confirm_text) || "Confirm"
+        cancel_text = options.delete(:cancel_text) || "Cancel"
+        variant = (options.delete(:variant) || :warning).to_sym
+        size = (options.delete(:size) || :md).to_sym
+        auto_open = options.delete(:auto_open) || false
+        
+        # Build component options
+        modal_options = {
+          title: title,
+          message: message,
+          confirm_text: confirm_text,
+          cancel_text: cancel_text,
+          variant: variant,
+          size: size,
+          auto_open: auto_open,
+          has_custom_actions: block_given?,
+          data: options.delete(:data) || {}
+        }.merge(options)
+        
+        view.render(template_path, component: self, options: modal_options, &block)
+      end
+      
+      # Register default styles for the confirmation modal
+      register_styles :default do
+        {
+          # Modal container and backdrop
+          backdrop: "fixed inset-0 bg-gray-500/75 transition-opacity duration-300 ease-out opacity-0",
+          container: "fixed inset-0 z-10 w-screen overflow-y-auto",
+          wrapper: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0",
+          
+          # Modal panel
+          panel: {
+            base: "relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all duration-300 ease-out sm:my-8 sm:w-full sm:p-6 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            sizes: {
+              sm: "sm:max-w-sm",
+              md: "sm:max-w-lg",
+              lg: "sm:max-w-2xl",
+              xl: "sm:max-w-4xl"
+            }
+          },
+          
+          # Close button
+          close_button: {
+            wrapper: "absolute top-0 right-0 hidden pt-4 pr-4 sm:block",
+            button: "rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none",
+            icon: {
+              file: "heroicons/outline/x-mark",
+              class: "size-6"
+            }
+          },
+          
+          # Icon configuration
+          icon: {
+            wrapper: "mx-auto flex size-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10",
+            class: "size-6",
+            variants: {
+              warning: {
+                wrapper: "bg-red-100",
+                icon: "text-red-600",
+                file: "heroicons/outline/exclamation-triangle"
+              },
+              info: {
+                wrapper: "bg-blue-100",
+                icon: "text-blue-600",
+                file: "heroicons/outline/information-circle"
+              },
+              success: {
+                wrapper: "bg-green-100",
+                icon: "text-green-600",
+                file: "heroicons/outline/check-circle"
+              }
+            }
+          },
+          
+          # Content styling
+          content: {
+            wrapper: "sm:flex sm:items-start",
+            text_wrapper: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left",
+            title: "text-base font-semibold text-gray-900",
+            message: "mt-2 text-sm text-gray-500"
+          },
+          
+          # Actions container
+          actions: {
+            wrapper: "mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"
+          }
+        }
+      end
+      
+      # Helper methods to build classes from styles
+      def modal_panel_class(size)
+        [
+          style(:panel, :base),
+          style(:panel, :sizes, size)
+        ].compact.join(" ")
+      end
+      
+      def modal_icon_wrapper_class(variant)
+        [
+          style(:icon, :wrapper),
+          style(:icon, :variants, variant, :wrapper)
+        ].compact.join(" ")
+      end
+      
+      def modal_icon_class(variant)
+        [
+          style(:icon, :class),
+          style(:icon, :variants, variant, :icon)
+        ].compact.join(" ")
+      end
+      
+      def modal_data_attributes(options)
+        return "" unless options[:data]
+        
+        options[:data].map { |k, v| "data-#{k.to_s.dasherize}=\"#{v}\"" }.join(" ").html_safe
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/dropdown_button.rb

@@ -0,0 +1,147 @@
+module OkonomiUiKit
+  module Components
+    class DropdownButton < ButtonBase
+      def render(options = {}, &block)
+        raise ArgumentError, "DropdownButton requires a block" unless block_given?
+
+        options = options.with_indifferent_access
+        variant = (options.delete(:variant) || "contained").to_sym
+        color = (options.delete(:color) || "default").to_sym
+
+        base_button_classes = build_button_class(
+          variant: variant,
+          color: color,
+          classes: options.delete(:class)
+        )
+
+        menu_classes = [
+          style(:menu, :root),
+          options.delete(:menu_class)
+        ].compact.join(" ")
+
+        dropdown_builder = DropdownBuilder.new(view)
+
+        view.render(
+          template_path,
+          base_button_classes: base_button_classes,
+          menu_classes: menu_classes,
+          dropdown_builder: dropdown_builder,
+          component: self,
+          options: options,
+          &block
+        )
+      end
+
+      register_styles :default do
+        {
+          primary: {
+            icon: "mr-1.5 size-3.5",
+            chevron: "size-3.5"
+          },
+          menu: {
+            root: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-200 focus:outline-none",
+            divider: "h-0 my-1 border-t border-gray-200",
+            item: {
+              root: "hover:cursor-pointer block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 hover:text-gray-900",
+              icon: "mr-3 h-5 w-5 text-gray-400",
+              label: "flex items-center"
+            }
+          }
+        }
+      end
+
+      class DropdownBuilder
+        attr_reader :view, :items, :is_first
+
+        def initialize(view)
+          @view = view
+          @items = []
+          @is_first = true
+        end
+
+        def link_to(name = nil, options = nil, html_options = nil, &block)
+          # Handle icon extraction
+          if html_options.is_a?(Hash)
+            icon = html_options.delete(:icon)
+          else
+            icon = nil
+          end
+
+          item = {
+            type: :link,
+            name: name,
+            options: options,
+            html_options: html_options || {},
+            block: block,
+            is_first: @is_first,
+            icon: icon
+          }
+          @items << item
+          @is_first = false
+        end
+
+        def button_to(name = nil, options = {}, html_options = {}, &block)
+          # Handle icon extraction
+          if html_options.is_a?(Hash)
+            icon = html_options.delete(:icon)
+          else
+            icon = nil
+          end
+
+          item = {
+            type: :button,
+            name: name,
+            options: options,
+            html_options: html_options,
+            block: block,
+            is_first: @is_first,
+            icon: icon
+          }
+          @items << item
+          @is_first = false
+        end
+        
+        def button_tag(content_or_options = nil, options = nil, &block)
+          # Handle the different argument patterns for button_tag
+          if content_or_options.is_a?(Hash)
+            options = content_or_options
+            content = nil
+          else
+            content = content_or_options
+          end
+          
+          options ||= {}
+          
+          # Handle icon extraction
+          icon = options.delete(:icon) if options.is_a?(Hash)
+          
+          # Ensure type is button for button_tag
+          options[:type] ||= "button"
+          
+          item = {
+            type: :button_tag,
+            name: content,
+            options: options,
+            block: block,
+            is_first: @is_first,
+            icon: icon
+          }
+          @items << item
+          @is_first = false
+        end
+
+        def divider
+          @items << { type: :divider }
+        end
+
+        def primary_item
+          @items.find { |item| item[:is_first] && item[:type] != :divider }
+        end
+
+        def menu_items
+          @items
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/check_box_with_label.rb

@@ -0,0 +1,38 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class CheckBoxWithLabel < OkonomiUiKit::FormComponent
+        def render(form, method, options = {}, checked_value = true, unchecked_value = false)
+          options = options.with_indifferent_access
+
+          view.content_tag(:div, class: style(:wrapper)) do
+            view.concat form.check_box(
+              method,
+              {
+                class: style(:input, :root)
+              }.merge(options || {}),
+              checked_value,
+              unchecked_value
+            )
+            view.concat view.render(template_path, component: self, method: method, options: options, form: form)
+          end
+        end
+
+        register_styles :default do
+          {
+            wrapper: "flex gap-x-3",
+            input: {
+              root: "size-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"
+            },
+            label: {
+              root: "text-sm/6 font-medium text-gray-900"
+            },
+            hint: {
+              root: "text-gray-500"
+            }
+          }
+        end
+      end
+    end
+  end
+end