fernandes-ui 0.1.1 → 0.1.2

data/app/behaviors/ui/date_picker_input_behavior.rb

@@ -1,62 +1,62 @@
 # frozen_string_literal: true
 
-    # Shared behavior for DatePicker input mode (text input + icon button)
-    module UI::DatePickerInputBehavior
-      # Generate data attributes for text input
-      def date_picker_input_data_attributes
-        {
-          ui__datepicker_target: "input",
-          action: "input->ui--datepicker#handleInput keydown->ui--datepicker#handleInputKeydown"
-        }
-      end
+# Shared behavior for DatePicker input mode (text input + icon button)
+module UI::DatePickerInputBehavior
+  # Generate data attributes for text input
+  def date_picker_input_data_attributes
+    {
+      ui__datepicker_target: "input",
+      action: "input->ui--datepicker#handleInput keydown->ui--datepicker#handleInputKeydown"
+    }
+  end
 
-      # Build complete HTML attributes hash for text input
-      def date_picker_input_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
-        base_attrs.merge(
-          class: date_picker_input_classes,
-          type: "text",
-          placeholder: @placeholder,
-          value: @value,
-          data: user_data.merge(date_picker_input_data_attributes)
-        )
-      end
+  # Build complete HTML attributes hash for text input
+  def date_picker_input_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
+    base_attrs.merge(
+      class: date_picker_input_classes,
+      type: "text",
+      placeholder: @placeholder,
+      value: @value,
+      data: user_data.merge(date_picker_input_data_attributes)
+    )
+  end
 
-      # Input classes
-      def date_picker_input_classes
-        TailwindMerge::Merger.new.merge([
-          # Input base styles
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-          "ring-offset-background",
-          "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
-          "placeholder:text-muted-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          # Extra padding for icon button
-          "pr-10",
-          @classes
-        ].compact.join(" "))
-      end
+  # Input classes
+  def date_picker_input_classes
+    TailwindMerge::Merger.new.merge([
+      # Input base styles
+      "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+      "ring-offset-background",
+      "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+      "placeholder:text-muted-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      # Extra padding for icon button
+      "pr-10",
+      @classes
+    ].compact.join(" "))
+  end
 
-      # Icon button data attributes
-      def date_picker_icon_button_data_attributes
-        {
-          ui__datepicker_target: "trigger",
-          ui__popover_target: "trigger"
-        }
-      end
+  # Icon button data attributes
+  def date_picker_icon_button_data_attributes
+    {
+      ui__datepicker_target: "trigger",
+      ui__popover_target: "trigger"
+    }
+  end
 
-      # Icon button classes (positioned inside input)
-      def date_picker_icon_button_classes
-        TailwindMerge::Merger.new.merge([
-          "absolute top-1/2 right-2 -translate-y-1/2",
-          "inline-flex items-center justify-center",
-          "h-6 w-6 rounded-sm",
-          "hover:bg-accent hover:text-accent-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "transition-colors",
-          @icon_classes
-        ].compact.join(" "))
-      end
-    end
+  # Icon button classes (positioned inside input)
+  def date_picker_icon_button_classes
+    TailwindMerge::Merger.new.merge([
+      "absolute top-1/2 right-2 -translate-y-1/2",
+      "inline-flex items-center justify-center",
+      "h-6 w-6 rounded-sm",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "transition-colors",
+      @icon_classes
+    ].compact.join(" "))
+  end
+end

data/app/behaviors/ui/date_picker_trigger_behavior.rb

@@ -1,62 +1,62 @@
 # frozen_string_literal: true
 
-    # Shared behavior for DatePicker trigger component (button)
-    module UI::DatePickerTriggerBehavior
-      # Generate data attributes for trigger
-      def date_picker_trigger_data_attributes
-        {
-          ui__datepicker_target: "trigger",
-          ui__popover_target: "trigger"
-        }
-      end
+# Shared behavior for DatePicker trigger component (button)
+module UI::DatePickerTriggerBehavior
+  # Generate data attributes for trigger
+  def date_picker_trigger_data_attributes
+    {
+      ui__datepicker_target: "trigger",
+      ui__popover_target: "trigger"
+    }
+  end
 
-      # Build complete HTML attributes hash for trigger
-      def date_picker_trigger_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
-        base_attrs.merge(
-          class: date_picker_trigger_classes,
-          type: "button",
-          data: user_data.merge(date_picker_trigger_data_attributes)
-        )
-      end
+  # Build complete HTML attributes hash for trigger
+  def date_picker_trigger_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
+    base_attrs.merge(
+      class: date_picker_trigger_classes,
+      type: "button",
+      data: user_data.merge(date_picker_trigger_data_attributes)
+    )
+  end
 
-      # Trigger classes - button with outline variant style
-      def date_picker_trigger_classes
-        TailwindMerge::Merger.new.merge([
-          # Button base styles
-          "inline-flex items-center justify-between gap-2 whitespace-nowrap rounded-md text-sm font-medium",
-          "ring-offset-background transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "disabled:pointer-events-none disabled:opacity-50",
-          # Outline variant
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-          # Size default
-          "h-10 px-4 py-2",
-          # Width
-          "w-[280px]",
-          @classes
-        ].compact.join(" "))
-      end
+  # Trigger classes - button with outline variant style
+  def date_picker_trigger_classes
+    TailwindMerge::Merger.new.merge([
+      # Button base styles
+      "inline-flex items-center justify-between gap-2 whitespace-nowrap rounded-md text-sm font-medium",
+      "ring-offset-background transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      # Outline variant
+      "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+      # Size default
+      "h-10 px-4 py-2",
+      # Width
+      "w-[280px]",
+      @classes
+    ].compact.join(" "))
+  end
 
-      # ChevronDown icon SVG
-      def chevron_down_icon
-        <<~SVG.html_safe
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50">
-            <path d="m6 9 6 6 6-6"/>
-          </svg>
-        SVG
-      end
+  # ChevronDown icon SVG
+  def chevron_down_icon
+    <<~SVG.html_safe
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50">
+        <path d="m6 9 6 6 6-6"/>
+      </svg>
+    SVG
+  end
 
-      # Calendar icon SVG
-      def calendar_icon
-        <<~SVG.html_safe
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50">
-            <path d="M8 2v4"/>
-            <path d="M16 2v4"/>
-            <rect width="18" height="18" x="3" y="4" rx="2"/>
-            <path d="M3 10h18"/>
-          </svg>
-        SVG
-      end
-    end
+  # Calendar icon SVG
+  def calendar_icon
+    <<~SVG.html_safe
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50">
+        <path d="M8 2v4"/>
+        <path d="M16 2v4"/>
+        <rect width="18" height="18" x="3" y="4" rx="2"/>
+        <path d="M3 10h18"/>
+      </svg>
+    SVG
+  end
+end

data/app/behaviors/ui/dialog_behavior.rb

@@ -2,45 +2,70 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Dialog component
-    # Handles main component logic and data attributes
-    module UI::DialogBehavior
-      # Generate data attributes for Stimulus controller
-      def dialog_data_attributes
-        attrs = {
-          controller: "ui--dialog",
-          ui__dialog_open_value: @open.to_s
-        }
-
-        # Only add optional values if they are explicitly set (not nil)
-        attrs[:ui__dialog_close_on_escape_value] = @close_on_escape.to_s unless @close_on_escape.nil?
-        attrs[:ui__dialog_close_on_overlay_click_value] = @close_on_overlay_click.to_s unless @close_on_overlay_click.nil?
-
-        attrs
-      end
-
-      # Merge user-provided data attributes
-      def merged_dialog_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(dialog_data_attributes)
-      end
-
-      # Build complete HTML attributes hash
-      def dialog_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: dialog_classes,
-          data: merged_dialog_data_attributes
-        )
-      end
-
-      # Base CSS classes
-      def dialog_base_classes
-        ""
-      end
-
-      # Generate final classes using TailwindMerge
-      def dialog_classes
-        TailwindMerge::Merger.new.merge([dialog_base_classes, @classes].compact.join(" "))
-      end
-    end
+# UI::DialogBehavior
+#
+# @ui_component Dialog
+# @ui_category overlay
+#
+# @ui_anatomy Dialog - Root container with state management (required)
+# @ui_anatomy Close - Button to close/dismiss the component
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Description - Descriptive text element
+# @ui_anatomy Footer - Footer section with actions
+# @ui_anatomy Header - Header section with title and controls
+# @ui_anatomy Overlay - Background overlay that dims the page
+# @ui_anatomy Title - Title text element
+# @ui_anatomy Trigger - Button or element that activates the component (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Focus management
+#
+# @ui_aria_pattern Dialog (Modal)
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+#
+# @ui_keyboard Escape Closes the component
+#
+# @ui_related alert_dialog
+# @ui_related drawer
+# @ui_related sheet
+#
+module UI::DialogBehavior
+  # Generate data attributes for Stimulus controller
+  def dialog_data_attributes
+    attrs = {
+      controller: "ui--dialog",
+      ui__dialog_open_value: @open.to_s
+    }
+
+    # Only add optional values if they are explicitly set (not nil)
+    attrs[:ui__dialog_close_on_escape_value] = @close_on_escape.to_s unless @close_on_escape.nil?
+    attrs[:ui__dialog_close_on_overlay_click_value] = @close_on_overlay_click.to_s unless @close_on_overlay_click.nil?
+
+    attrs
+  end
+
+  # Merge user-provided data attributes
+  def merged_dialog_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(dialog_data_attributes)
+  end
+
+  # Build complete HTML attributes hash
+  def dialog_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: dialog_classes,
+      data: merged_dialog_data_attributes
+    )
+  end
+
+  # Base CSS classes
+  def dialog_base_classes
+    ""
+  end
+
+  # Generate final classes using TailwindMerge
+  def dialog_classes
+    TailwindMerge::Merger.new.merge([dialog_base_classes, @classes].compact.join(" "))
+  end
+end

data/app/behaviors/ui/dialog_content_behavior.rb

@@ -2,45 +2,45 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Dialog Content component
-    # Handles content area styling, ARIA attributes, and animations
-    module UI::DialogContentBehavior
-      # Base CSS classes for dialog content
-      # Use opacity-0/scale-95 and pointer-events-none when closed for smooth animations
-      def dialog_content_base_classes
-        "bg-background data-[state=closed]:invisible data-[state=open]:visible data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg"
-      end
+# Shared behavior for Dialog Content component
+# Handles content area styling, ARIA attributes, and animations
+module UI::DialogContentBehavior
+  # Base CSS classes for dialog content
+  # Use opacity-0/scale-95 and pointer-events-none when closed for smooth animations
+  def dialog_content_base_classes
+    "bg-background data-[state=closed]:invisible data-[state=open]:visible data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def dialog_content_classes
-        TailwindMerge::Merger.new.merge([dialog_content_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def dialog_content_classes
+    TailwindMerge::Merger.new.merge([dialog_content_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for Stimulus target
-      def dialog_content_data_attributes
-        {
-          ui__dialog_target: "content"
-        }
-      end
+  # Data attributes for Stimulus target
+  def dialog_content_data_attributes
+    {
+      ui__dialog_target: "content"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_dialog_content_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(dialog_content_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_dialog_content_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(dialog_content_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for dialog content
-      def dialog_content_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        attrs = base_attrs.merge(
-          class: dialog_content_classes,
-          role: "dialog",
-          "aria-modal": "true",
-          "data-state": @open ? "open" : "closed",
-          data: merged_dialog_content_data_attributes
-        )
-        # Add inert when closed to prevent focus on elements inside
-        attrs[:inert] = true unless @open
-        attrs
-      end
-    end
+  # Build complete HTML attributes hash for dialog content
+  def dialog_content_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    attrs = base_attrs.merge(
+      class: dialog_content_classes,
+      role: "dialog",
+      "aria-modal": "true",
+      "data-state": @open ? "open" : "closed",
+      data: merged_dialog_content_data_attributes
+    )
+    # Add inert when closed to prevent focus on elements inside
+    attrs[:inert] = true unless @open
+    attrs
+  end
+end

data/app/behaviors/ui/dialog_footer_behavior.rb

@@ -2,25 +2,25 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Dialog Footer component
-    module UI::DialogFooterBehavior
-      # Returns HTML attributes for the dialog footer
-      def dialog_footer_html_attributes
-        {
-          class: dialog_footer_classes
-        }
-      end
+# Shared behavior for Dialog Footer component
+module UI::DialogFooterBehavior
+  # Returns HTML attributes for the dialog footer
+  def dialog_footer_html_attributes
+    {
+      class: dialog_footer_classes
+    }
+  end
 
-      # Returns combined CSS classes for the dialog footer
-      def dialog_footer_classes
-        TailwindMerge::Merger.new.merge([
-          dialog_footer_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the dialog footer
+  def dialog_footer_classes
+    TailwindMerge::Merger.new.merge([
+      dialog_footer_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      # Base classes applied to dialog footer
-      def dialog_footer_base_classes
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
-      end
-    end
+  # Base classes applied to dialog footer
+  def dialog_footer_base_classes
+    "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+  end
+end

data/app/behaviors/ui/dialog_header_behavior.rb

@@ -2,25 +2,25 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Dialog Header component
-    module UI::DialogHeaderBehavior
-      # Returns HTML attributes for the dialog header
-      def dialog_header_html_attributes
-        {
-          class: dialog_header_classes
-        }
-      end
+# Shared behavior for Dialog Header component
+module UI::DialogHeaderBehavior
+  # Returns HTML attributes for the dialog header
+  def dialog_header_html_attributes
+    {
+      class: dialog_header_classes
+    }
+  end
 
-      # Returns combined CSS classes for the dialog header
-      def dialog_header_classes
-        TailwindMerge::Merger.new.merge([
-          dialog_header_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the dialog header
+  def dialog_header_classes
+    TailwindMerge::Merger.new.merge([
+      dialog_header_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      # Base classes applied to dialog header
-      def dialog_header_base_classes
-        "flex flex-col gap-2 text-center sm:text-left"
-      end
-    end
+  # Base classes applied to dialog header
+  def dialog_header_base_classes
+    "flex flex-col gap-2 text-center sm:text-left"
+  end
+end