fernandes-ui 0.1.0

data/app/behaviors/ui/context_menu_radio_item_behavior.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+    # ContextMenuRadioItemBehavior
+    #
+    # Shared behavior for ContextMenuRadioItem component across ERB, ViewComponent, and Phlex implementations.
+    module UI::ContextMenuRadioItemBehavior
+      # Returns HTML attributes for the radio item
+      def context_menu_radio_item_html_attributes
+        {
+          class: context_menu_radio_item_classes,
+          data: context_menu_radio_item_data_attributes,
+          role: "menuitemradio",
+          "aria-checked": @checked.to_s,
+          tabindex: "-1"
+        }
+      end
+
+      # Returns combined CSS classes for the radio item
+      def context_menu_radio_item_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+
+      # Returns data attributes for the radio item
+      def context_menu_radio_item_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        existing_action = (attributes_value&.fetch(:data, {}) || {}).fetch(:action, "")
+        combined_action = [existing_action, "mouseenter->ui--context-menu#trackHoveredItem"].reject(&:empty?).join(" ")
+
+        (attributes_value&.fetch(:data, {}) || {}).merge({
+          "ui--context-menu-target": "item",
+          action: combined_action,
+          state: @checked ? "checked" : "unchecked"
+        })
+      end
+    end

data/app/behaviors/ui/context_menu_separator_behavior.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+    # ContextMenuSeparatorBehavior
+    #
+    # Shared behavior for ContextMenuSeparator component across ERB, ViewComponent, and Phlex implementations.
+    module UI::ContextMenuSeparatorBehavior
+      # Returns HTML attributes for the context menu separator
+      def context_menu_separator_html_attributes
+        {
+          class: context_menu_separator_classes,
+          role: "separator"
+        }
+      end
+
+      # Returns combined CSS classes for the separator
+      def context_menu_separator_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "bg-border -mx-1 my-1 h-px"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+    end

data/app/behaviors/ui/context_menu_shortcut_behavior.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # ContextMenuShortcutBehavior
+    #
+    # Shared behavior for ContextMenuShortcut component across ERB, ViewComponent, and Phlex implementations.
+    module UI::ContextMenuShortcutBehavior
+      # Returns HTML attributes for the context menu shortcut
+      def context_menu_shortcut_html_attributes
+        {
+          class: context_menu_shortcut_classes
+        }
+      end
+
+      # Returns combined CSS classes for the shortcut
+      def context_menu_shortcut_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "text-muted-foreground ml-auto text-xs tracking-widest"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+    end

data/app/behaviors/ui/context_menu_trigger_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # ContextMenuTriggerBehavior
+    #
+    # Shared behavior for ContextMenuTrigger component across ERB, ViewComponent, and Phlex implementations.
+    module UI::ContextMenuTriggerBehavior
+      # Returns HTML attributes for the context menu trigger
+      def context_menu_trigger_html_attributes
+        {
+          class: context_menu_trigger_classes,
+          data: context_menu_trigger_data_attributes
+        }
+      end
+
+      # Returns combined CSS classes for the trigger
+      def context_menu_trigger_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          "flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm",
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus action
+      def context_menu_trigger_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        (attributes_value&.fetch(:data, {}) || {}).merge({
+          action: "contextmenu->ui--context-menu#open",
+          "ui--context-menu-target": "trigger"
+        })
+      end
+    end

data/app/behaviors/ui/date_picker_behavior.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+    # Shared behavior for DatePicker container component
+    # Handles Stimulus controller setup and data attributes
+    module UI::DatePickerBehavior
+      # Generate Stimulus controller data attributes
+      def date_picker_data_attributes
+        attrs = {
+          controller: "ui--datepicker",
+          ui__datepicker_mode_value: @mode.to_s,
+          ui__datepicker_selected_value: selected_json,
+          ui__datepicker_locale_value: @locale,
+          ui__datepicker_format_value: @format,
+          ui__datepicker_placeholder_value: @placeholder,
+          ui__datepicker_range_placeholder_value: @range_placeholder,
+          ui__datepicker_close_on_select_value: @close_on_select
+        }
+        attrs.compact
+      end
+
+      # Build complete HTML attributes hash for datepicker container
+      def date_picker_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        user_data = @attributes&.fetch(:data, {}) || {}
+        base_attrs.merge(
+          class: date_picker_classes,
+          data: user_data.merge(date_picker_data_attributes)
+        )
+      end
+
+      # Default datepicker classes
+      def date_picker_classes
+        TailwindMerge::Merger.new.merge([
+          "flex flex-col gap-3",
+          @classes
+        ].compact.join(" "))
+      end
+
+      # Convert selected dates to JSON array
+      def selected_json
+        case @selected
+        when Date then [@selected.to_s].to_json
+        when Range then [@selected.begin.to_s, @selected.end.to_s].to_json
+        when Array then @selected.map(&:to_s).to_json
+        else [].to_json
+        end
+      end
+
+      # Convert selected dates for form value
+      def selected_value
+        case @selected
+        when Date then @selected.to_s
+        when Range then "#{@selected.begin},#{@selected.end}"
+        when Array then @selected.map(&:to_s).join(",")
+        else ""
+        end
+      end
+
+      # Get initial display value
+      def initial_display_value
+        return placeholder_text if @selected.nil?
+
+        case @selected
+        when Date
+          format_date(@selected)
+        when Range
+          "#{format_date(@selected.begin)} - #{format_date(@selected.end)}"
+        when Array
+          if @selected.empty?
+            placeholder_text
+          elsif @selected.length == 1
+            format_date(@selected.first)
+          else
+            "#{@selected.length} dates selected"
+          end
+        else
+          placeholder_text
+        end
+      end
+
+      def placeholder_text
+        @mode.to_s == "range" ? @range_placeholder : @placeholder
+      end
+
+      def format_date(date)
+        return "" unless date
+
+        date.strftime("%B %d, %Y")
+      end
+    end

data/app/behaviors/ui/date_picker_input_behavior.rb

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

data/app/behaviors/ui/date_picker_trigger_behavior.rb

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

data/app/behaviors/ui/dialog_behavior.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+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

data/app/behaviors/ui/dialog_content_behavior.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+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
+
+      # 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
+
+      # 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

data/app/behaviors/ui/dialog_footer_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+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
+
+      # 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

data/app/behaviors/ui/dialog_header_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+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
+
+      # 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

data/app/behaviors/ui/dialog_overlay_behavior.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Dialog Overlay component
+    # Handles backdrop/overlay styling and attributes
+    module UI::DialogOverlayBehavior
+      # Base CSS classes for overlay backdrop
+      # Use opacity-0 and pointer-events-none when closed for smooth animations
+      def 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 dialog_overlay_classes
+        TailwindMerge::Merger.new.merge([dialog_overlay_base_classes].compact.join(" "))
+      end
+
+      # Container wrapper classes
+      # Use invisible (visibility: hidden) when closed, visible when open
+      def 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 dialog_overlay_container_classes
+        TailwindMerge::Merger.new.merge([dialog_overlay_container_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for container
+      def dialog_overlay_container_data_attributes
+        {
+          ui__dialog_target: "container"
+        }
+      end
+
+      # Data attributes for overlay backdrop
+      def dialog_overlay_data_attributes
+        {
+          ui__dialog_target: "overlay",
+          action: "click->ui--dialog#closeOnOverlayClick"
+        }
+      end
+
+      # Merge user-provided data attributes for container
+      def merged_dialog_overlay_container_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(dialog_overlay_container_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for container wrapper
+      def dialog_overlay_container_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: dialog_overlay_container_classes,
+          "data-state": @open ? "open" : "closed",
+          data: merged_dialog_overlay_container_data_attributes
+        )
+      end
+
+      # Build complete HTML attributes hash for overlay backdrop
+      def dialog_overlay_html_attributes
+        {
+          class: dialog_overlay_classes,
+          "data-state": @open ? "open" : "closed",
+          data: dialog_overlay_data_attributes
+        }
+      end
+    end

data/app/behaviors/ui/drawer_behavior.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Drawer component (Root)
+    # Handles main component logic and data attributes for Vaul drawer
+    module UI::DrawerBehavior
+      # Generate data attributes for Stimulus controller
+      def drawer_data_attributes
+        attrs = {
+          controller: "ui--drawer",
+          ui__drawer_open_value: @open,
+          ui__drawer_direction_value: @direction,
+          ui__drawer_dismissible_value: @dismissible,
+          ui__drawer_modal_value: @modal
+        }
+
+        # Add snap points if provided
+        if @snap_points && !@snap_points.empty?
+          attrs[:ui__drawer_snap_points_value] = @snap_points.to_json
+          attrs[:ui__drawer_active_snap_point_value] = @active_snap_point || -1
+          attrs[:ui__drawer_fade_from_index_value] = @fade_from_index || (@snap_points.length - 1)
+          attrs[:ui__drawer_snap_to_sequential_point_value] = @snap_to_sequential_point if @snap_to_sequential_point
+        end
+
+        # Add advanced options
+        attrs[:ui__drawer_handle_only_value] = @handle_only if @handle_only
+        attrs[:ui__drawer_reposition_inputs_value] = @reposition_inputs if @reposition_inputs == false
+
+        attrs
+      end
+
+      # Merge user-provided data attributes
+      def merged_drawer_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(drawer_data_attributes)
+      end
+
+      # Build complete HTML attributes hash
+      def drawer_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: drawer_classes,
+          data: merged_drawer_data_attributes
+        )
+      end
+
+      # Base CSS classes
+      def drawer_base_classes
+        ""
+      end
+
+      # Generate final classes using TailwindMerge
+      def drawer_classes
+        TailwindMerge::Merger.new.merge([drawer_base_classes, @classes].compact.join(" "))
+      end
+    end

data/app/behaviors/ui/drawer_close_behavior.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Drawer Close component
+    # Closes drawer on click
+    module UI::DrawerCloseBehavior
+      # Data attributes for close button
+      def drawer_close_data_attributes
+        { data: { action: "click->ui--drawer#close" } }
+      end
+    end