fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/accordion_content_behavior.rb

@@ -2,71 +2,71 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Accordion Content component
-    # Handles classes, ARIA attributes, and animations
-    module UI::AccordionContentBehavior
-      # Base CSS classes for content area with animations
-      # Using transition with Radix UI timing (300ms, cubic-bezier(0.87, 0, 0.13, 1))
-      def content_base_classes
-        "overflow-hidden text-sm transition-[height] duration-[var(--duration-accordion)] ease-[var(--ease-accordion)] data-[state=closed]:h-0"
-      end
+# Shared behavior for Accordion Content component
+# Handles classes, ARIA attributes, and animations
+module UI::AccordionContentBehavior
+  # Base CSS classes for content area with animations
+  # Using transition with Radix UI timing (300ms, cubic-bezier(0.87, 0, 0.13, 1))
+  def content_base_classes
+    "overflow-hidden text-sm transition-[height] duration-[var(--duration-accordion)] ease-[var(--ease-accordion)] data-[state=closed]:h-0"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def content_classes
-        TailwindMerge::Merger.new.merge([content_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def content_classes
+    TailwindMerge::Merger.new.merge([content_base_classes, @classes].compact.join(" "))
+  end
 
-      # Generate unique IDs for ARIA relationships (matching trigger)
-      def trigger_id
-        @trigger_id ||= "accordion-trigger-#{item_value}"
-      end
+  # Generate unique IDs for ARIA relationships (matching trigger)
+  def trigger_id
+    @trigger_id ||= "accordion-trigger-#{item_value}"
+  end
 
-      def content_id
-        @content_id ||= "accordion-content-#{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
+  # Get item value from context (set by parent AccordionItem)
+  def item_value
+    @item_value || SecureRandom.hex(4)
+  end
 
-      # Determine initial state from context
-      def content_state
-        @initial_open ? "open" : "closed"
-      end
+  # Determine initial state from context
+  def content_state
+    @initial_open ? "open" : "closed"
+  end
 
-      # Data attributes for Stimulus
-      def content_data_attributes
-        {
-          ui__accordion_target: "content"
-        }
-      end
+  # Data attributes for Stimulus
+  def content_data_attributes
+    {
+      ui__accordion_target: "content"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_content_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(content_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_content_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(content_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for content container
-      def content_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        attrs = base_attrs.merge(
-          class: content_classes,
-          id: content_id,
-          role: "region",
-          "aria-labelledby": trigger_id,
-          "data-state": content_state,
-          "data-orientation": @orientation || "vertical",
-          data: merged_content_data_attributes
-        )
+  # Build complete HTML attributes hash for content container
+  def content_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    attrs = base_attrs.merge(
+      class: content_classes,
+      id: content_id,
+      role: "region",
+      "aria-labelledby": trigger_id,
+      "data-state": content_state,
+      "data-orientation": @orientation || "vertical",
+      data: merged_content_data_attributes
+    )
 
-        # Add hidden attribute for closed state to prevent flash on initial load
-        # JavaScript will handle the CSS variable for height
-        if content_state == "closed"
-          attrs[:hidden] = true
-        end
-
-        attrs
-      end
+    # Add hidden attribute for closed state to prevent flash on initial load
+    # JavaScript will handle the CSS variable for height
+    if content_state == "closed"
+      attrs[:hidden] = true
     end
+
+    attrs
+  end
+end

data/app/behaviors/ui/accordion_item_behavior.rb

@@ -2,46 +2,46 @@
 
 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
+# 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
+  # 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
+  # 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
+  # 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
+  # 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
+  # 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

@@ -2,78 +2,78 @@
 
 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
+# 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
+  # 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
+  # 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
+  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
+  # 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 initial state from context
+  def trigger_state
+    @initial_open ? "open" : "closed"
+  end
 
-      # Determine aria-expanded value
-      def aria_expanded
-        @initial_open ? "true" : "false"
-      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
+  # 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
+  # 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
+  # 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
+  # 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

@@ -2,43 +2,60 @@
 
 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
+# UI::AlertBehavior
+#
+# @ui_component Alert
+# @ui_description Alert - Phlex implementation
+# @ui_category feedback
+#
+# @ui_anatomy Alert - A callout component for displaying important information to users. (required)
+# @ui_anatomy Description - Description text for an alert component.
+# @ui_anatomy Title - Title text for an alert component.
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+# @ui_aria_pattern Alert
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+# @ui_aria_attr role="alert"
+#
+# @ui_related alert_dialog
+# @ui_related toast
+#
+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
+  # 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
+  # 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
+  # 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
+  # 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

@@ -2,31 +2,31 @@
 
 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
+# 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
+  # 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
+  # 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
+  # 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

@@ -2,26 +2,26 @@
 
 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
+# 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
+  # 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
+  # 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