fernandes-ui 0.1.0

data/app/behaviors/ui/accordion_item_behavior.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Accordion Item component
+    # Handles classes, states, and data attributes
+    module UI::AccordionItemBehavior
+      # Base CSS classes for accordion item
+      def item_base_classes
+        "border-b border-border last:border-b-0"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def item_classes
+        TailwindMerge::Merger.new.merge([item_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for Stimulus target
+      def item_data_attributes
+        {
+          ui__accordion_target: "item",
+          value: @value || ""
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_item_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(item_data_attributes)
+      end
+
+      # Determine initial state
+      def item_state
+        @initial_open ? "open" : "closed"
+      end
+
+      # Build complete HTML attributes hash for accordion item
+      def item_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: item_classes,
+          "data-state": item_state,
+          "data-orientation": @orientation || "vertical",
+          data: merged_item_data_attributes
+        )
+      end
+    end

data/app/behaviors/ui/accordion_trigger_behavior.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Accordion Trigger (button) component
+    # Handles classes, ARIA attributes, and unique IDs
+    module UI::AccordionTriggerBehavior
+      # Base CSS classes for trigger button
+      def trigger_base_classes
+        "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:underline [&[data-state=open]>svg]:rotate-180"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def trigger_classes
+        TailwindMerge::Merger.new.merge([trigger_base_classes, @classes].compact.join(" "))
+      end
+
+      # Generate unique IDs for ARIA relationships
+      def trigger_id
+        @trigger_id ||= "accordion-trigger-#{item_value}"
+      end
+
+      def content_id
+        @content_id ||= "accordion-content-#{item_value}"
+      end
+
+      # Get item value from context (set by parent AccordionItem)
+      def item_value
+        @item_value || SecureRandom.hex(4)
+      end
+
+      # Determine initial state from context
+      def trigger_state
+        @initial_open ? "open" : "closed"
+      end
+
+      # Determine aria-expanded value
+      def aria_expanded
+        @initial_open ? "true" : "false"
+      end
+
+      # Data attributes for Stimulus
+      def trigger_data_attributes
+        {
+          ui__accordion_target: "trigger",
+          action: "click->ui--accordion#toggle"
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_trigger_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(trigger_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for trigger button
+      def trigger_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: trigger_classes,
+          type: "button",
+          id: trigger_id,
+          "aria-expanded": aria_expanded,
+          "aria-controls": content_id,
+          "data-state": trigger_state,
+          "data-orientation": @orientation || "vertical",
+          data: merged_trigger_data_attributes
+        )
+      end
+
+      # SVG caret icon (rotation handled by Tailwind's [&[data-state=open]>svg] variant)
+      def caret_svg
+        <<~SVG.html_safe
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-[var(--duration-accordion)]">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        SVG
+      end
+    end

data/app/behaviors/ui/alert_behavior.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Alert component
+    # Handles alert container styling with variants
+    module UI::AlertBehavior
+      # Base CSS classes for alert container
+      # Uses grid layout that adapts when SVG icons are present
+      def alert_base_classes
+        "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+      end
+
+      # Variant-specific classes
+      def alert_variant_classes
+        case @variant
+        when :destructive
+          "border-destructive text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+        else # :default
+          "bg-card text-card-foreground"
+        end
+      end
+
+      # Merge base classes with variant and custom classes
+      def alert_classes
+        TailwindMerge::Merger.new.merge([alert_base_classes, alert_variant_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for alert container
+      def alert_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: alert_classes,
+          role: "alert",
+          "data-slot": "alert"
+        )
+      end
+
+      # Renders the alert HTML (for ERB partials)
+      def render_alert(&content_block)
+        all_attributes = alert_html_attributes.deep_merge(@attributes || {})
+        content_tag(:div, **all_attributes, &content_block)
+      end
+    end

data/app/behaviors/ui/alert_description_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Alert Description component
+    # Handles description text styling
+    module UI::AlertDescriptionBehavior
+      # Base CSS classes for alert description
+      def alert_description_base_classes
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed"
+      end
+
+      # Merge base classes with custom classes
+      def alert_description_classes
+        TailwindMerge::Merger.new.merge([alert_description_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for alert description
+      def alert_description_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: alert_description_classes,
+          "data-slot": "alert-description"
+        )
+      end
+
+      # Renders the alert description HTML (for ERB partials)
+      def render_alert_description(&content_block)
+        all_attributes = alert_description_html_attributes.deep_merge(@attributes || {})
+        content_tag(:div, **all_attributes, &content_block)
+      end
+    end

data/app/behaviors/ui/alert_dialog_action_behavior.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog Action component
+    # This wraps the Button component with alert dialog close action
+    module UI::AlertDialogActionBehavior
+      # Data attributes for Stimulus action
+      def alert_dialog_action_data_attributes
+        {
+          action: "click->ui--alert-dialog#close"
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_alert_dialog_action_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(alert_dialog_action_data_attributes)
+      end
+
+      # Build data attributes hash to pass to Button component
+      def alert_dialog_action_button_data_attributes
+        {
+          data: merged_alert_dialog_action_data_attributes
+        }
+      end
+    end

data/app/behaviors/ui/alert_dialog_behavior.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog component
+    # Handles classes and data attributes
+    module UI::AlertDialogBehavior
+      # Base CSS classes for alert dialog container
+      def alert_dialog_base_classes
+        ""
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def alert_dialog_classes
+        TailwindMerge::Merger.new.merge([alert_dialog_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for Stimulus controller
+      def alert_dialog_data_attributes
+        {
+          controller: "ui--alert-dialog",
+          ui__alert_dialog_open_value: @open,
+          ui__alert_dialog_close_on_escape_value: @close_on_escape
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_alert_dialog_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(alert_dialog_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for alert dialog container
+      def alert_dialog_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: alert_dialog_classes,
+          data: merged_alert_dialog_data_attributes
+        )
+      end
+    end

data/app/behaviors/ui/alert_dialog_cancel_behavior.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog Cancel component
+    # This wraps the Button component with alert dialog close action
+    module UI::AlertDialogCancelBehavior
+      # Data attributes for Stimulus action
+      def alert_dialog_cancel_data_attributes
+        {
+          action: "click->ui--alert-dialog#close"
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_alert_dialog_cancel_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(alert_dialog_cancel_data_attributes)
+      end
+
+      # Build data attributes hash to pass to Button component
+      def alert_dialog_cancel_button_data_attributes
+        {
+          data: merged_alert_dialog_cancel_data_attributes
+        }
+      end
+    end

data/app/behaviors/ui/alert_dialog_content_behavior.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog Content component
+    # Handles content area styling, ARIA attributes, and animations
+    module UI::AlertDialogContentBehavior
+      # Base CSS classes for alert dialog content
+      # Use opacity-0/scale-95 and pointer-events-none when closed for smooth animations
+      def alert_dialog_content_base_classes
+        "bg-background 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 alert_dialog_content_classes
+        TailwindMerge::Merger.new.merge([alert_dialog_content_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for Stimulus target
+      def alert_dialog_content_data_attributes
+        {
+          ui__alert_dialog_target: "content"
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_alert_dialog_content_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(alert_dialog_content_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for alert dialog content
+      def alert_dialog_content_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: alert_dialog_content_classes,
+          role: "alertdialog",
+          "aria-modal": "true",
+          data: merged_alert_dialog_content_data_attributes
+        )
+      end
+    end

data/app/behaviors/ui/alert_dialog_description_behavior.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog Description component
+    # Handles description text styling
+    module UI::AlertDialogDescriptionBehavior
+      # Base CSS classes for alert dialog description
+      def alert_dialog_description_base_classes
+        "text-muted-foreground text-sm"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def alert_dialog_description_classes
+        TailwindMerge::Merger.new.merge([alert_dialog_description_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for alert dialog description
+      def alert_dialog_description_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: alert_dialog_description_classes
+        )
+      end
+    end

data/app/behaviors/ui/alert_dialog_footer_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog Footer component
+    # Handles footer section styling with action buttons
+    module UI::AlertDialogFooterBehavior
+      # Base CSS classes for alert dialog footer
+      # Note: flex-col-reverse on mobile so cancel appears below action, then row on desktop with buttons at end
+      def alert_dialog_footer_base_classes
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def alert_dialog_footer_classes
+        TailwindMerge::Merger.new.merge([alert_dialog_footer_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for alert dialog footer
+      def alert_dialog_footer_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: alert_dialog_footer_classes
+        )
+      end
+    end

data/app/behaviors/ui/alert_dialog_header_behavior.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog Header component
+    # Handles header section styling
+    module UI::AlertDialogHeaderBehavior
+      # Base CSS classes for alert dialog header
+      def alert_dialog_header_base_classes
+        "flex flex-col gap-2 text-center sm:text-left"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def alert_dialog_header_classes
+        TailwindMerge::Merger.new.merge([alert_dialog_header_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for alert dialog header
+      def alert_dialog_header_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: alert_dialog_header_classes
+        )
+      end
+    end

data/app/behaviors/ui/alert_dialog_overlay_behavior.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog Overlay component
+    # Handles backdrop/overlay styling and attributes
+    module UI::AlertDialogOverlayBehavior
+      # Base CSS classes for overlay backdrop
+      # Use opacity-0 and pointer-events-none when closed for smooth animations
+      def alert_dialog_overlay_base_classes
+        "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]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none fixed inset-0 z-50 bg-black/50"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def alert_dialog_overlay_classes
+        TailwindMerge::Merger.new.merge([alert_dialog_overlay_base_classes].compact.join(" "))
+      end
+
+      # Container wrapper classes
+      # Use invisible (visibility: hidden) when closed, visible when open
+      def alert_dialog_overlay_container_base_classes
+        "data-[state=closed]:invisible data-[state=open]:visible fixed inset-0 z-50"
+      end
+
+      # Merge container base classes with custom classes
+      def alert_dialog_overlay_container_classes
+        TailwindMerge::Merger.new.merge([alert_dialog_overlay_container_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for container
+      def alert_dialog_overlay_container_data_attributes
+        {
+          ui__alert_dialog_target: "container"
+        }
+      end
+
+      # Data attributes for overlay backdrop
+      def alert_dialog_overlay_data_attributes
+        {
+          ui__alert_dialog_target: "overlay",
+          action: "click->ui--alert-dialog#preventOverlayClose"
+        }
+      end
+
+      # Merge user-provided data attributes for container
+      def merged_alert_dialog_overlay_container_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(alert_dialog_overlay_container_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for container wrapper
+      def alert_dialog_overlay_container_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: alert_dialog_overlay_container_classes,
+          "data-state": @open ? "open" : "closed",
+          data: merged_alert_dialog_overlay_container_data_attributes
+        )
+      end
+
+      # Build complete HTML attributes hash for overlay backdrop
+      def alert_dialog_overlay_html_attributes
+        {
+          class: alert_dialog_overlay_classes,
+          data: alert_dialog_overlay_data_attributes
+        }
+      end
+    end

data/app/behaviors/ui/alert_dialog_title_behavior.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog Title component
+    # Handles title styling
+    module UI::AlertDialogTitleBehavior
+      # Base CSS classes for alert dialog title
+      def alert_dialog_title_base_classes
+        "text-lg font-semibold"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def alert_dialog_title_classes
+        TailwindMerge::Merger.new.merge([alert_dialog_title_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for alert dialog title
+      def alert_dialog_title_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: alert_dialog_title_classes
+        )
+      end
+    end

data/app/behaviors/ui/alert_dialog_trigger_behavior.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AlertDialog Trigger component
+    # Handles classes and Stimulus actions
+    module UI::AlertDialogTriggerBehavior
+      # Base CSS classes for alert dialog trigger wrapper
+      def alert_dialog_trigger_base_classes
+        "inline-flex"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def alert_dialog_trigger_classes
+        TailwindMerge::Merger.new.merge([alert_dialog_trigger_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for Stimulus action
+      def alert_dialog_trigger_data_attributes
+        {
+          action: "click->ui--alert-dialog#open"
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_alert_dialog_trigger_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(alert_dialog_trigger_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for alert dialog trigger
+      def alert_dialog_trigger_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: alert_dialog_trigger_classes,
+          data: merged_alert_dialog_trigger_data_attributes
+        )
+      end
+    end

data/app/behaviors/ui/alert_title_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Alert Title component
+    # Handles title styling
+    module UI::AlertTitleBehavior
+      # Base CSS classes for alert title
+      def alert_title_base_classes
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"
+      end
+
+      # Merge base classes with custom classes
+      def alert_title_classes
+        TailwindMerge::Merger.new.merge([alert_title_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for alert title
+      def alert_title_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: alert_title_classes,
+          "data-slot": "alert-title"
+        )
+      end
+
+      # Renders the alert title HTML (for ERB partials)
+      def render_alert_title(&content_block)
+        all_attributes = alert_title_html_attributes.deep_merge(@attributes || {})
+        content_tag(:div, **all_attributes, &content_block)
+      end
+    end

data/app/behaviors/ui/aspect_ratio_behavior.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for AspectRatio component
+    # Handles aspect ratio styling
+    module UI::AspectRatioBehavior
+      # Default aspect ratio is 1:1 (square)
+      DEFAULT_RATIO = 1.0
+
+      # Calculate padding-bottom percentage for aspect ratio
+      # Formula: (height / width) * 100
+      def aspect_ratio_padding
+        ratio_value = @ratio || DEFAULT_RATIO
+        percentage = (1.0 / ratio_value) * 100
+        "#{percentage}%"
+      end
+
+      # Merge base classes with custom classes
+      def aspect_ratio_classes
+        TailwindMerge::Merger.new.merge([@classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for aspect ratio container
+      def aspect_ratio_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: aspect_ratio_classes,
+          "data-slot": "aspect-ratio",
+          style: "position: relative; width: 100%;"
+        )
+      end
+
+      # Build attributes for the padding element
+      def aspect_ratio_padding_attributes
+        {
+          style: "padding-bottom: #{aspect_ratio_padding};"
+        }
+      end
+
+      # Build attributes for the content wrapper
+      def aspect_ratio_content_attributes
+        {
+          style: "position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
+        }
+      end
+    end