fernandes-ui 0.1.0

data/app/behaviors/ui/popover_trigger_behavior.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# PopoverTriggerBehavior
+#
+# Shared behavior for PopoverTrigger component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation.
+module UI::PopoverTriggerBehavior
+  # Returns HTML attributes for the popover trigger element
+  def popover_trigger_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: popover_trigger_classes,
+      data: { ui__popover_target: "trigger" }
+    }.merge(attributes_value)
+  end
+
+  # Returns combined CSS classes for the popover trigger
+  def popover_trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      popover_trigger_base_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes applied to all popover triggers - inline flex for proper alignment
+  def popover_trigger_base_classes
+    "inline-flex"
+  end
+end

data/app/behaviors/ui/progress_behavior.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Progress component
+    # Handles progress indicator styling and HTML attributes
+    module UI::ProgressBehavior
+      # Returns HTML attributes for the progress container element
+      def progress_html_attributes
+        {
+          class: progress_classes,
+          role: "progressbar",
+          "aria-valuemin": "0",
+          "aria-valuemax": "100",
+          "aria-valuenow": progress_value.to_i,
+          data: { slot: "progress" }
+        }
+      end
+
+      # Returns combined CSS classes for the progress container
+      def progress_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          progress_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns the validated progress value (between 0 and 100)
+      def progress_value
+        [[(@value || 0).to_f, 0].max, 100].min
+      end
+
+      # Returns the indicator classes
+      def progress_indicator_classes
+        "bg-primary h-full w-full flex-1 transition-all"
+      end
+
+      # Returns the transform style for the indicator
+      def progress_indicator_style
+        "transform: translateX(-#{100 - progress_value}%)"
+      end
+
+      private
+
+      # Base classes applied to all progress containers
+      def progress_base_classes
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full"
+      end
+    end

data/app/behaviors/ui/radio_button_behavior.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module UI
+  # RadioButton Behavior - Shared logic for radio button component across ERB, ViewComponent, and Phlex
+  module RadioButtonBehavior
+    def radio_button_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        type: "radio",
+        class: radio_button_classes,
+        name: @name,
+        id: radio_button_id,
+        value: @value,
+        checked: (@checked ? true : nil),
+        disabled: (@disabled ? true : nil),
+        required: (@required ? true : nil),
+        data: radio_button_data_attributes
+      }.merge(attributes_value).compact
+    end
+
+    def radio_button_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        radio_button_base_classes,
+        classes_value
+
+      ].compact.join(" "))
+    end
+
+    def radio_button_data_attributes
+      {
+        slot: "radio-group-item"
+      }
+    end
+
+    def radio_button_id
+      @id || "radio-#{SecureRandom.hex(4)}"
+    end
+
+    private
+
+    def radio_button_base_classes
+      "peer appearance-none border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
+    end
+  end
+end

data/app/behaviors/ui/resizable_handle_behavior.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+    # Shared behavior for ResizableHandle component
+    # Handles data attributes for resize handles
+    module UI::ResizableHandleBehavior
+      # Base CSS classes for the handle
+      # The handle uses a thin visual line (w-px) but has padding for easier interaction
+      def handle_base_classes
+        base = [
+          "relative z-10 flex shrink-0 items-center justify-center",
+          "w-2 -mx-[3.5px]", # 8px wide handle with negative margin to overlap panels
+          "bg-transparent cursor-col-resize",
+          "touch-none select-none", # Prevent scroll interference on touch devices
+          # The visible line is drawn with ::after
+          "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-border",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+          # Vertical direction
+          "data-[panel-group-direction=vertical]:h-2 data-[panel-group-direction=vertical]:w-full",
+          "data-[panel-group-direction=vertical]:-my-[3.5px] data-[panel-group-direction=vertical]:mx-0",
+          "data-[panel-group-direction=vertical]:cursor-row-resize",
+          "data-[panel-group-direction=vertical]:after:inset-x-0 data-[panel-group-direction=vertical]:after:inset-y-auto",
+          "data-[panel-group-direction=vertical]:after:top-1/2 data-[panel-group-direction=vertical]:after:left-0",
+          "data-[panel-group-direction=vertical]:after:h-px data-[panel-group-direction=vertical]:after:w-full",
+          "data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0",
+          "[&[data-panel-group-direction=vertical]>div]:rotate-90"
+        ]
+        base << @classes if @classes.present?
+        base.join(" ")
+      end
+
+      # Generate data attributes for the handle
+      def handle_data_attributes
+        {
+          ui__resizable_target: "handle",
+          resize_handle: "",
+          resize_handle_state: "inactive"
+        }
+      end
+
+      # Merge user-provided data attributes with handle data
+      def merged_handle_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(handle_data_attributes)
+      end
+
+      # Stimulus actions for the handle
+      def handle_actions
+        [
+          "pointerdown->ui--resizable#startDrag",
+          "pointerenter->ui--resizable#handleEnter",
+          "pointerleave->ui--resizable#handleLeave",
+          "focus->ui--resizable#handleFocus",
+          "blur->ui--resizable#handleBlur"
+        ].join(" ")
+      end
+
+      # Build complete HTML attributes hash for handle
+      def handle_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        data_attrs = merged_handle_data_attributes
+        data_attrs[:action] = handle_actions
+
+        base_attrs.merge(
+          class: handle_base_classes,
+          "data-slot": "resizable-handle",
+          tabindex: "0",
+          role: "separator",
+          "aria-valuenow": "50",
+          "aria-valuemin": "0",
+          "aria-valuemax": "100",
+          data: data_attrs
+        )
+      end
+
+      # CSS classes for the grip icon container (when with_handle is true)
+      def grip_container_classes
+        [
+          "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"
+        ].join(" ")
+      end
+    end

data/app/behaviors/ui/resizable_panel_behavior.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+    # Shared behavior for ResizablePanel component
+    # Handles data attributes for individual panels
+    module UI::ResizablePanelBehavior
+      # Base CSS classes for the panel
+      # Uses min-w-0/min-h-0 and overflow-hidden to allow panels to shrink to 0
+      def panel_base_classes
+        classes = ["relative overflow-hidden min-w-0 min-h-0"]
+        classes << @classes if @classes.present?
+        classes.join(" ")
+      end
+
+      # Generate data attributes for the panel
+      def panel_data_attributes
+        attrs = {
+          ui__resizable_target: "panel"
+        }
+        attrs[:default_size] = @default_size if @default_size
+        attrs[:min_size] = @min_size if @min_size
+        attrs[:max_size] = @max_size if @max_size
+        attrs
+      end
+
+      # Merge user-provided data attributes with panel data
+      def merged_panel_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(panel_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for panel
+      def panel_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+
+        # Use flex-grow for proportional sizing instead of flex-basis percentage
+        # This works correctly with min-height containers in vertical layouts
+        style_parts = []
+        if @default_size
+          style_parts << "flex-grow: #{@default_size}"
+          style_parts << "flex-shrink: #{@default_size}"
+          style_parts << "flex-basis: 0"
+        end
+
+        attrs = base_attrs.merge(
+          class: panel_base_classes,
+          "data-slot": "resizable-panel",
+          data: merged_panel_data_attributes
+        )
+
+        attrs[:style] = style_parts.join("; ") if style_parts.any?
+        attrs
+      end
+    end

data/app/behaviors/ui/resizable_panel_group_behavior.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+    # Shared behavior for ResizablePanelGroup container component
+    # Handles Stimulus controller setup and data attributes
+    module UI::ResizablePanelGroupBehavior
+      # Generate Stimulus controller data attributes
+      def panel_group_data_attributes
+        {
+          controller: "ui--resizable",
+          ui__resizable_direction_value: @direction || "horizontal",
+          ui__resizable_keyboard_resize_by_value: @keyboard_resize_by || 10
+        }
+      end
+
+      # Merge user-provided data attributes with panel group controller data
+      def merged_panel_group_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(panel_group_data_attributes)
+      end
+
+      # Base CSS classes for the panel group container
+      def panel_group_base_classes
+        classes = [
+          "flex h-full w-full overflow-hidden",
+          @direction == "vertical" ? "flex-col" : "flex-row"
+        ]
+        classes << @classes if @classes.present?
+        classes.join(" ")
+      end
+
+      # Build complete HTML attributes hash for panel group container
+      def panel_group_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: panel_group_base_classes,
+          "data-panel-group-direction": @direction || "horizontal",
+          "data-slot": "resizable-panel-group",
+          data: merged_panel_group_data_attributes
+        )
+      end
+    end

data/app/behaviors/ui/responsive_dialog_behavior.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for ResponsiveDialog component
+    # Combines Dialog (desktop) and Drawer (mobile) with responsive switching
+    module UI::ResponsiveDialogBehavior
+      # Generate data attributes for Stimulus controller
+      def responsive_dialog_data_attributes
+        {
+          controller: "ui--responsive-dialog",
+          ui__responsive_dialog_open_value: @open,
+          ui__responsive_dialog_breakpoint_value: @breakpoint || 768
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_responsive_dialog_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(responsive_dialog_data_attributes)
+      end
+
+      # Build complete HTML attributes hash
+      def responsive_dialog_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: responsive_dialog_classes,
+          data: merged_responsive_dialog_data_attributes
+        )
+      end
+
+      # Base CSS classes
+      def responsive_dialog_base_classes
+        ""
+      end
+
+      # Generate final classes using TailwindMerge
+      def responsive_dialog_classes
+        TailwindMerge::Merger.new.merge([responsive_dialog_base_classes, @classes].compact.join(" "))
+      end
+    end

data/app/behaviors/ui/scroll_area_behavior.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaBehavior
+#
+# Shared behavior for ScrollArea root across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaBehavior
+  # Returns HTML attributes for the scroll area root element
+  def scroll_area_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: scroll_area_classes,
+      dir: "ltr",
+      style: "position: relative; --ui-scroll-area-corner-width: 0px; --ui-scroll-area-corner-height: 0px;",
+      data: {
+        slot: "scroll-area"
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      scroll_area_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for scroll area root
+  def scroll_area_base_classes
+    "relative"
+  end
+end

data/app/behaviors/ui/scroll_area_corner_behavior.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaCornerBehavior
+#
+# Shared behavior for ScrollArea corner across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaCornerBehavior
+  # Returns HTML attributes for the corner element
+  def scroll_area_corner_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: scroll_area_corner_classes,
+      data: {
+        slot: "scroll-area-corner"
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_corner_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      scroll_area_corner_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for corner
+  def scroll_area_corner_base_classes
+    "absolute right-0 bottom-0"
+  end
+end

data/app/behaviors/ui/scroll_area_scrollbar_behavior.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaScrollbarBehavior
+#
+# Shared behavior for ScrollArea scrollbar across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaScrollbarBehavior
+  # Returns HTML attributes for the scrollbar element
+  def scroll_area_scrollbar_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    orientation_value = respond_to?(:orientation, true) ? orientation : @orientation
+
+    {
+      class: scroll_area_scrollbar_classes,
+      data: {
+        slot: "scroll-area-scrollbar",
+        orientation: orientation_value
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_scrollbar_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    orientation_value = respond_to?(:orientation, true) ? orientation : @orientation
+
+    TailwindMerge::Merger.new.merge([
+      scroll_area_scrollbar_base_classes,
+      scroll_area_scrollbar_orientation_classes(orientation_value),
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for scrollbar
+  def scroll_area_scrollbar_base_classes
+    "absolute flex touch-none p-px transition-colors select-none overflow-hidden rounded-sm"
+  end
+
+  # Orientation-specific classes
+  def scroll_area_scrollbar_orientation_classes(orientation)
+    case orientation
+    when "horizontal"
+      "bottom-0 left-0 right-0 h-2.5 flex-col border-t border-t-transparent"
+    else # vertical (default)
+      "right-0.5 top-0.5 bottom-0.5 w-2.5 border-l border-l-transparent"
+    end
+  end
+end

data/app/behaviors/ui/scroll_area_thumb_behavior.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaThumbBehavior
+#
+# Shared behavior for ScrollArea thumb across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaThumbBehavior
+  # Returns HTML attributes for the thumb element
+  def scroll_area_thumb_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: scroll_area_thumb_classes,
+      data: {
+        slot: "scroll-area-thumb"
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_thumb_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      scroll_area_thumb_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for thumb
+  def scroll_area_thumb_base_classes
+    "bg-border relative flex-1 rounded-full"
+  end
+end

data/app/behaviors/ui/scroll_area_viewport_behavior.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# UI::ScrollAreaViewportBehavior
+#
+# Shared behavior for ScrollArea viewport across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ScrollAreaViewportBehavior
+  # Returns HTML attributes for the viewport element
+  def scroll_area_viewport_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: scroll_area_viewport_classes,
+      tabindex: 0,
+      data: {
+        slot: "scroll-area-viewport",
+        ui_scroll_area_viewport: true
+      }
+    }.merge(attributes_value || {})
+  end
+
+  # Returns combined CSS classes
+  def scroll_area_viewport_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      scroll_area_viewport_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for viewport
+  def scroll_area_viewport_base_classes
+    "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:ring-ring/50"
+  end
+end

data/app/behaviors/ui/select_behavior.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+# UI::SelectBehavior
+#
+# Shared behavior for Select component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent size styling and HTML attribute generation.
+module UI::SelectBehavior
+  # Returns HTML attributes for the select element
+    def select_html_attributes
+      data_attrs = {
+        controller: "ui--select",
+        ui__select_open_value: "false"
+      }
+
+      # Add value if provided
+      if @value.present?
+        data_attrs[:ui__select_value_value] = @value.to_s
+      end
+
+      attrs = {
+        class: select_classes,
+        data: data_attrs
+      }
+
+      # Add data-placeholder attribute if there's a placeholder and no selected value
+      if @placeholder.present? && @selected.nil?
+        attrs[:"data-placeholder"] = "true"
+      end
+
+      attrs.compact
+    end
+
+    # Returns combined CSS classes for the select
+    def select_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_base_classes,
+        select_size_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes applied to all selects
+    # The select container is just a wrapper for Stimulus controller
+    # All visual styling is on the trigger button
+    # h-fit prevents wrapper from expanding to include absolutely positioned content
+    def select_base_classes
+      "relative h-fit"
+    end
+
+    # Size-specific classes based on @size
+    # No size classes needed on container, they go on trigger
+    def select_size_classes
+      ""
+    end
+
+    # Renders options for the select element
+    # Handles both array format [label, value] and hash format { label: x, value: y }
+    def render_options
+      return "" if @options.nil?
+
+      @options.map do |option|
+        label, value = extract_option_values(option)
+        selected = @selected.to_s == value.to_s ? "selected" : nil
+
+        { label: label, value: value, selected: selected }
+      end
+    end
+
+    # Extracts label and value from different option formats
+    def extract_option_values(option)
+      if option.is_a?(Array)
+        [option[0], option[1]]
+      elsif option.is_a?(Hash)
+        label = option[:label] || option["label"]
+        value = option[:value] || option["value"]
+        [label, value]
+      else
+        [option, option]
+      end
+    end
+end

data/app/behaviors/ui/select_content_behavior.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+# UI::SelectContentBehavior
+#
+# Shared behavior for Select dropdown content across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectContentBehavior
+    # Returns HTML attributes for the select content element
+    def select_content_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_content_classes,
+        data: {
+          ui__select_target: "content",
+          state: "closed",
+          slot: "select-content"
+        },
+        role: "listbox",
+        # CSS variables for positioning (set by JavaScript)
+        style: "box-sizing: border-box; display: flex; flex-direction: column; outline: none;"
+      }.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_content_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_content_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select content dropdown
+    # FIXED: overflow-x-hidden overflow-y-auto instead of overflow-hidden
+    # FIXED: removed data-[state=closed]:hidden, use invisible pattern
+    # ADDED: max-h, origin, and translate classes for proper positioning
+    def select_content_base_classes
+      "absolute z-50 flex min-w-[8rem] flex-col overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[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-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[state=closed]:invisible data-[state=open]:visible"
+    end
+  end