fernandes-ui 0.1.0

data/app/behaviors/ui/tooltip_content_behavior.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # TooltipContentBehavior
+    #
+    # Shared behavior for TooltipContent component.
+    # The content is the popup that displays tooltip information.
+    module UI::TooltipContentBehavior
+      # Returns HTML attributes for the tooltip content element
+      def tooltip_content_html_attributes
+        {
+          class: tooltip_content_classes,
+          data: tooltip_content_data_attributes
+        }.compact
+      end
+
+      # Returns combined CSS classes for the tooltip content
+      def tooltip_content_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          tooltip_content_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for the tooltip content
+      def tooltip_content_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        base_data = (attributes_value&.fetch(:data, {}) || {})
+
+        side_value = respond_to?(:side, true) ? side : @side
+        align_value = respond_to?(:align, true) ? align : @align
+        side_offset_value = respond_to?(:side_offset, true) ? side_offset : @side_offset
+
+        base_data.merge({
+          ui__tooltip_target: "content",
+          state: "closed",
+          side: side_value || "top",
+          align: align_value || "center",
+          ui__tooltip_side_offset_value: side_offset_value || 4
+        }).compact
+      end
+
+      private
+
+      # Base classes applied to all tooltip content (from shadcn/ui)
+      def tooltip_content_base_classes
+        "z-50 invisible overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md " \
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 " \
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 " \
+        "data-[state=closed]:opacity-0 data-[state=open]:opacity-100 " \
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 " \
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 " \
+        "data-[state=open]:visible"
+      end
+    end

data/app/behaviors/ui/tooltip_trigger_behavior.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # TooltipTriggerBehavior
+    #
+    # Shared behavior for TooltipTrigger component.
+    # The trigger activates the tooltip on hover/focus.
+    # Supports asChild pattern for composition.
+    module UI::TooltipTriggerBehavior
+      # Returns HTML attributes for the tooltip trigger element
+      def tooltip_trigger_html_attributes
+        as_child_value = instance_variable_defined?(:@as_child) ? @as_child : false
+
+        attrs = {
+          data: tooltip_trigger_data_attributes
+        }.compact
+
+        # Only add button styling when not using asChild
+        # (asChild delegates styling to the child component)
+        unless as_child_value
+          attrs[:class] = tooltip_trigger_classes
+        end
+
+        attrs
+      end
+
+      # Returns combined CSS classes for the trigger button
+      def tooltip_trigger_classes
+        classes_value = instance_variable_defined?(:@classes) ? @classes : nil
+        TailwindMerge::Merger.new.merge([
+          tooltip_trigger_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for the tooltip trigger
+      def tooltip_trigger_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        base_data = (attributes_value&.fetch(:data, {}) || {})
+
+        base_data.merge({
+          ui__tooltip_target: "trigger",
+          action: [base_data[:action], "mouseenter->ui--tooltip#show mouseleave->ui--tooltip#hide focus->ui--tooltip#show blur->ui--tooltip#hide"].compact.join(" ")
+        }).compact
+      end
+
+      private
+
+      # Base classes for trigger button - matches Button styling with focus ring
+      def tooltip_trigger_base_classes
+        [
+          "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium",
+          "transition-all",
+          "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "h-9 px-4 py-2",
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+        ].join(" ")
+      end
+    end

data/app/components/ui/accordion.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+    # Accordion container component (Phlex)
+    # Wraps collapsible accordion items with Stimulus controller
+    #
+    # @example Basic usage
+    #   render UI::Accordion.new do
+    #     render UI::Item.new(value: "item-1") do
+    #       render UI::Trigger.new { "Is it accessible?" }
+    #       render UI::Content.new { "Yes. It adheres to the WAI-ARIA design pattern." }
+    #     end
+    #   end
+    #
+    # @example Multiple items open
+    #   render UI::Accordion.new(type: "multiple") do
+    #     # Multiple items can be open at once
+    #   end
+    class UI::Accordion < Phlex::HTML
+      include UI::AccordionBehavior
+
+      # @param type [String] "single" (only one item open at a time) or "multiple" (multiple items can be open)
+      # @param collapsible [Boolean] whether the open item can be collapsed in "single" mode
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(type: "single", collapsible: false, classes: "", attributes: {}, **)
+        @type = type
+        @collapsible = collapsible
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&block)
+        div(**accordion_html_attributes, &block)
+      end
+    end

data/app/components/ui/accordion_content.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    # Accordion Content component (Phlex)
+    # Collapsible content area within an accordion item
+    #
+    # @example Basic usage
+    #   render UI::Content.new(item_value: "item-1") do
+    #     "This is the accordion content"
+    #   end
+    class UI::AccordionContent < Phlex::HTML
+      include UI::AccordionContentBehavior
+
+      # @param item_value [String] value from parent Item
+      # @param initial_open [Boolean] initial state from parent Item
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(item_value: nil, initial_open: false, classes: "", attributes: {}, **)
+        @item_value = item_value
+        @initial_open = initial_open
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&block)
+        div(**content_html_attributes) do
+          div(class: "pt-0 pb-4", &block)
+        end
+      end
+    end

data/app/components/ui/accordion_item.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+    # Accordion Item component (Phlex)
+    # Individual collapsible item within an accordion
+    #
+    # @example Basic usage
+    #   render UI::Item.new(value: "item-1") do
+    #     render UI::Trigger.new { "Trigger text" }
+    #     render UI::Content.new { "Content text" }
+    #   end
+    #
+    # @example Start open
+    #   render UI::Item.new(value: "item-1", initial_open: true) do
+    #     # Item will be open by default
+    #   end
+    class UI::AccordionItem < Phlex::HTML
+      include UI::AccordionItemBehavior
+
+      attr_reader :value, :initial_open
+
+      # @param value [String] unique identifier for this item
+      # @param initial_open [Boolean] whether this item starts open
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(value: "", initial_open: false, classes: "", attributes: {}, **)
+        @value = value
+        @initial_open = initial_open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**item_html_attributes) do
+          # Pass context to child components by rendering the block
+          # Child components will receive item_value and initial_open through helpers
+          instance_exec(&block) if block
+        end
+      end
+
+      # Helper methods that child components can call to get parent context
+      def item_value_context
+        @value
+      end
+
+      def initial_open_context
+        @initial_open
+      end
+    end

data/app/components/ui/accordion_trigger.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+    # Accordion Trigger component (Phlex)
+    # Button that toggles accordion item open/closed
+    #
+    # @example Basic usage
+    #   render UI::Trigger.new(item_value: "item-1") do
+    #     "Click to toggle"
+    #   end
+    class UI::AccordionTrigger < Phlex::HTML
+      include UI::AccordionTriggerBehavior
+
+      # @param item_value [String] value from parent Item
+      # @param initial_open [Boolean] initial state from parent Item
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(item_value: nil, initial_open: false, classes: "", attributes: {}, **)
+        @item_value = item_value
+        @initial_open = initial_open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        h3(class: "flex", "data-orientation": @orientation || "vertical", "data-state": trigger_state) do
+          button(**trigger_html_attributes) do
+            yield if block_given?
+            # Render caret icon using Phlex DSL
+            render_caret_icon
+          end
+        end
+      end
+
+      private
+
+      def render_caret_icon
+        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)]"
+        ) do |s|
+          s.polyline(points: "6 9 12 15 18 9")
+        end
+      end
+    end

data/app/components/ui/alert.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+    # Alert - Phlex implementation
+    #
+    # A callout component for displaying important information to users.
+    # Uses AlertBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Alert.new do
+    #     svg class: "lucide lucide-circle-check" # Your icon here
+    #     render UI::Title.new { "Success" }
+    #     render UI::Description.new { "Your changes have been saved." }
+    #   end
+    class UI::Alert < Phlex::HTML
+      include UI::AlertBehavior
+
+      # @param variant [Symbol] Visual style variant (:default, :destructive)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(variant: :default, classes: "", **attributes)
+        @variant = variant
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**alert_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_description.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+    # Alert Description - Phlex implementation
+    #
+    # Description text for an alert component.
+    #
+    # @example
+    #   render UI::Description.new do
+    #     "Your account has been successfully updated."
+    #   end
+    class UI::AlertDescription < Phlex::HTML
+      include UI::AlertDescriptionBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**alert_description_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # AlertDialog - Phlex implementation
+    #
+    # A modal alert dialog component for important confirmations and alerts.
+    # Uses AlertDialogBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::AlertDialog.new do
+    #     render UI::Trigger.new { "Open Alert Dialog" }
+    #     render UI::Overlay.new
+    #     render UI::Content.new { "Alert dialog content here" }
+    #   end
+    class UI::AlertDialog < Phlex::HTML
+      include UI::AlertDialogBehavior
+
+      # @param open [Boolean] Whether the alert dialog is initially open
+      # @param close_on_escape [Boolean] Whether pressing Escape closes the dialog
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(open: false, close_on_escape: true, classes: "", **attributes)
+        @open = open
+        @close_on_escape = close_on_escape
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**alert_dialog_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog_action.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+    # Action - Phlex implementation
+    #
+    # Primary action button for the alert dialog.
+    # Wraps the Button component with alert dialog close action.
+    #
+    # @example Basic usage
+    #   render UI::Action.new { "Continue" }
+    class UI::AlertDialogAction < Phlex::HTML
+      include UI::AlertDialogActionBehavior
+
+      # @param variant [String, Symbol] Button variant
+      # @param size [String, Symbol] Button size
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(variant: :default, size: :default, classes: "", **attributes)
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        render UI::Button.new(
+          variant: @variant,
+          size: @size,
+          classes: @classes,
+          **alert_dialog_action_button_data_attributes.merge(@attributes)
+        ) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog_cancel.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+    # Cancel - Phlex implementation
+    #
+    # Cancel button for the alert dialog.
+    # Wraps the Button component with alert dialog close action.
+    #
+    # @example Basic usage
+    #   render UI::Cancel.new { "Cancel" }
+    class UI::AlertDialogCancel < Phlex::HTML
+      include UI::AlertDialogCancelBehavior
+
+      # @param variant [String, Symbol] Button variant
+      # @param size [String, Symbol] Button size
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(variant: :outline, size: :default, classes: "", **attributes)
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        render UI::Button.new(
+          variant: @variant,
+          size: @size,
+          classes: @classes,
+          **alert_dialog_cancel_button_data_attributes.merge(@attributes)
+        ) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog_content.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Content - Phlex implementation
+    #
+    # Main alert dialog content area with proper ARIA attributes.
+    # Uses AlertDialogContentBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Content.new { "Alert dialog content here" }
+    class UI::AlertDialogContent < Phlex::HTML
+      include UI::AlertDialogContentBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**alert_dialog_content_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog_description.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Description - Phlex implementation
+    #
+    # Description text for the alert dialog.
+    # Uses AlertDialogDescriptionBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Description.new { "This action cannot be undone." }
+    class UI::AlertDialogDescription < Phlex::HTML
+      include UI::AlertDialogDescriptionBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        p(**alert_dialog_description_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog_footer.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+    # Footer - Phlex implementation
+    #
+    # Footer section with action buttons for the alert dialog.
+    # Uses AlertDialogFooterBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Footer.new do
+    #     render UI::Cancel.new { "Cancel" }
+    #     render UI::Action.new { "Continue" }
+    #   end
+    class UI::AlertDialogFooter < Phlex::HTML
+      include UI::AlertDialogFooterBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**alert_dialog_footer_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog_header.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Header - Phlex implementation
+    #
+    # Header section of the alert dialog.
+    # Uses AlertDialogHeaderBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Header.new do
+    #     render UI::Title.new { "Alert Title" }
+    #   end
+    class UI::AlertDialogHeader < Phlex::HTML
+      include UI::AlertDialogHeaderBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**alert_dialog_header_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog_overlay.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    # Overlay - Phlex implementation
+    #
+    # Container wrapper with backdrop and content for the alert dialog overlay.
+    # Uses AlertDialogOverlayBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Overlay.new do
+    #     render UI::Content.new { "Content here" }
+    #   end
+    class UI::AlertDialogOverlay < Phlex::HTML
+      include UI::AlertDialogOverlayBehavior
+
+      # @param open [Boolean] Whether the overlay is initially visible
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(open: false, classes: "", **attributes)
+        @open = open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**alert_dialog_overlay_container_html_attributes) do
+          div(**alert_dialog_overlay_html_attributes) {}
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog_title.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Title - Phlex implementation
+    #
+    # Title text for the alert dialog.
+    # Uses AlertDialogTitleBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Title.new { "Are you absolutely sure?" }
+    class UI::AlertDialogTitle < Phlex::HTML
+      include UI::AlertDialogTitleBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        h2(**alert_dialog_title_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_dialog_trigger.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Trigger - Phlex implementation
+    #
+    # A wrapper that adds the alert dialog open action to its child element.
+    # Uses AlertDialogTriggerBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Trigger.new do
+    #     render UI::Button.new { "Open Alert Dialog" }
+    #   end
+    class UI::AlertDialogTrigger < Phlex::HTML
+      include UI::AlertDialogTriggerBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**alert_dialog_trigger_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/alert_title.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+    # Alert Title - Phlex implementation
+    #
+    # Title text for an alert component.
+    #
+    # @example
+    #   render UI::Title.new { "Important Notice" }
+    class UI::AlertTitle < Phlex::HTML
+      include UI::AlertTitleBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**alert_title_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end