fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/sidebar_rail_behavior.rb

@@ -2,46 +2,53 @@
 
 require "tailwind_merge"
 
-    # RailBehavior
-    #
-    # Shared behavior for SidebarRail component.
-    module UI::SidebarRailBehavior
-      def sidebar_rail_html_attributes
-        {
-          class: sidebar_rail_classes,
-          data: sidebar_rail_data_attributes,
-          tabindex: "-1",
-          aria: { label: "Toggle Sidebar" }
-        }
-      end
+# UI::SidebarRailBehavior
+#
+# @ui_component Sidebar Rail
+# @ui_description Rail - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Sidebar Rail - Invisible rail on the sidebar edge for drag-to-expand interaction. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::SidebarRailBehavior
+  def sidebar_rail_html_attributes
+    {
+      class: sidebar_rail_classes,
+      data: sidebar_rail_data_attributes,
+      tabindex: "-1",
+      aria: {label: "Toggle Sidebar"}
+    }
+  end
 
-      def sidebar_rail_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_rail_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_rail_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_rail_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_rail_data_attributes
-        {
-          slot: "sidebar-rail",
-          action: "click->ui--sidebar#toggle"
-        }
-      end
+  def sidebar_rail_data_attributes
+    {
+      slot: "sidebar-rail",
+      action: "click->ui--sidebar#toggle"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_rail_base_classes
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear " \
-        "after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border " \
-        "group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex " \
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize " \
-        "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize " \
-        "group-data-[collapsible=offcanvas]:translate-x-0 " \
-        "group-data-[collapsible=offcanvas]:after:left-full " \
-        "group-data-[collapsible=offcanvas]:hover:bg-sidebar " \
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2 " \
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2"
-      end
-    end
+  def sidebar_rail_base_classes
+    "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear " \
+    "after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border " \
+    "group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex " \
+    "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize " \
+    "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize " \
+    "group-data-[collapsible=offcanvas]:translate-x-0 " \
+    "group-data-[collapsible=offcanvas]:after:left-full " \
+    "group-data-[collapsible=offcanvas]:hover:bg-sidebar " \
+    "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2 " \
+    "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2"
+  end
+end

data/app/behaviors/ui/sidebar_separator_behavior.rb

@@ -2,35 +2,35 @@
 
 require "tailwind_merge"
 
-    # SeparatorBehavior
-    #
-    # Shared behavior for SidebarSeparator component.
-    module UI::SidebarSeparatorBehavior
-      def sidebar_separator_html_attributes
-        {
-          class: sidebar_separator_classes,
-          data: sidebar_separator_data_attributes,
-          role: "separator"
-        }
-      end
+# SeparatorBehavior
+#
+# Shared behavior for SidebarSeparator component.
+module UI::SidebarSeparatorBehavior
+  def sidebar_separator_html_attributes
+    {
+      class: sidebar_separator_classes,
+      data: sidebar_separator_data_attributes,
+      role: "separator"
+    }
+  end
 
-      def sidebar_separator_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_separator_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_separator_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_separator_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_separator_data_attributes
-        {
-          slot: "sidebar-separator"
-        }
-      end
+  def sidebar_separator_data_attributes
+    {
+      slot: "sidebar-separator"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_separator_base_classes
-        "mx-2 w-auto bg-sidebar-border shrink-0 h-px"
-      end
-    end
+  def sidebar_separator_base_classes
+    "mx-2 w-auto bg-sidebar-border shrink-0 h-px"
+  end
+end

data/app/behaviors/ui/sidebar_trigger_behavior.rb

@@ -2,39 +2,39 @@
 
 require "tailwind_merge"
 
-    # TriggerBehavior
-    #
-    # Shared behavior for SidebarTrigger component.
-    module UI::SidebarTriggerBehavior
-      def sidebar_trigger_html_attributes
-        {
-          class: sidebar_trigger_classes,
-          data: sidebar_trigger_data_attributes
-        }
-      end
+# TriggerBehavior
+#
+# Shared behavior for SidebarTrigger component.
+module UI::SidebarTriggerBehavior
+  def sidebar_trigger_html_attributes
+    {
+      class: sidebar_trigger_classes,
+      data: sidebar_trigger_data_attributes
+    }
+  end
 
-      def sidebar_trigger_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_trigger_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_trigger_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_trigger_data_attributes
-        {
-          slot: "sidebar-trigger",
-          action: "click->ui--sidebar#toggle",
-          ui__sidebar_target: "trigger"
-        }
-      end
+  def sidebar_trigger_data_attributes
+    {
+      slot: "sidebar-trigger",
+      action: "click->ui--sidebar#toggle",
+      ui__sidebar_target: "trigger"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_trigger_base_classes
-        "inline-flex items-center justify-center 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 " \
-        "hover:bg-accent hover:text-accent-foreground h-7 w-7"
-      end
-    end
+  def sidebar_trigger_base_classes
+    "inline-flex items-center justify-center 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 " \
+    "hover:bg-accent hover:text-accent-foreground h-7 w-7"
+  end
+end

data/app/behaviors/ui/slider_behavior.rb

@@ -1,46 +1,46 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Slider Root component
-    # Handles Stimulus controller setup and data attributes for range slider
-    module UI::SliderBehavior
-      # Generate Stimulus controller data attributes
-      def slider_data_attributes
-        attrs = {
-          controller: "ui--slider",
-          ui__slider_min_value: @min || 0,
-          ui__slider_max_value: @max || 100,
-          ui__slider_step_value: @step || 1,
-          ui__slider_value_value: (@value || @default_value || [0]).to_json,
-          ui__slider_disabled_value: @disabled || false,
-          ui__slider_orientation_value: @orientation || "horizontal",
-          ui__slider_inverted_value: @inverted || false,
-          ui__slider_name_value: @name || ""
-        }
+# Shared behavior for Slider Root component
+# Handles Stimulus controller setup and data attributes for range slider
+module UI::SliderBehavior
+  # Generate Stimulus controller data attributes
+  def slider_data_attributes
+    attrs = {
+      controller: "ui--slider",
+      ui__slider_min_value: @min || 0,
+      ui__slider_max_value: @max || 100,
+      ui__slider_step_value: @step || 1,
+      ui__slider_value_value: (@value || @default_value || [0]).to_json,
+      ui__slider_disabled_value: @disabled || false,
+      ui__slider_orientation_value: @orientation || "horizontal",
+      ui__slider_inverted_value: @inverted || false,
+      ui__slider_name_value: @name || ""
+    }
 
-        # Add center_point if defined (for bidirectional sliders like balance/pan)
-        if @center_point
-          attrs[:ui__slider_center_point_value] = @center_point
-        end
+    # Add center_point if defined (for bidirectional sliders like balance/pan)
+    if @center_point
+      attrs[:ui__slider_center_point_value] = @center_point
+    end
 
-        attrs
-      end
+    attrs
+  end
 
-      # Merge user-provided data attributes with slider controller data
-      def merged_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(slider_data_attributes)
-      end
+  # Merge user-provided data attributes with slider controller data
+  def merged_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(slider_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for slider root
-      def slider_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col #{@classes}".strip,
-          "data-orientation": @orientation || "horizontal",
-          "data-disabled": @disabled ? "" : nil,
-          "data-slot": "slider",
-          role: "group",
-          data: merged_data_attributes
-        ).compact
-      end
-    end
+  # Build complete HTML attributes hash for slider root
+  def slider_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col #{@classes}".strip,
+      "data-orientation": @orientation || "horizontal",
+      "data-disabled": @disabled ? "" : nil,
+      "data-slot": "slider",
+      role: "group",
+      data: merged_data_attributes
+    ).compact
+  end
+end

data/app/behaviors/ui/slider_range_behavior.rb

@@ -1,18 +1,18 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Slider Range component
-    # The range is the filled portion of the track showing the selected value
-    module UI::SliderRangeBehavior
-      # Build complete HTML attributes hash for slider range
-      def slider_range_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
+# Shared behavior for Slider Range component
+# The range is the filled portion of the track showing the selected value
+module UI::SliderRangeBehavior
+  # Build complete HTML attributes hash for slider range
+  def slider_range_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
 
-        base_attrs.merge(
-          class: "bg-primary absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full #{@classes}".strip,
-          "data-slot": "slider-range",
-          "data-ui--slider-target": "range",
-          data: user_data
-        )
-      end
-    end
+    base_attrs.merge(
+      class: "bg-primary absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full #{@classes}".strip,
+      "data-slot": "slider-range",
+      "data-ui--slider-target": "range",
+      data: user_data
+    )
+  end
+end

data/app/behaviors/ui/slider_thumb_behavior.rb

@@ -1,25 +1,25 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Slider Thumb component
-    # The thumb is the draggable handle that controls the slider value
-    module UI::SliderThumbBehavior
-      # Build complete HTML attributes hash for slider thumb
-      def slider_thumb_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
+# Shared behavior for Slider Thumb component
+# The thumb is the draggable handle that controls the slider value
+module UI::SliderThumbBehavior
+  # Build complete HTML attributes hash for slider thumb
+  def slider_thumb_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
 
-        # Merge pointer event action with user data
-        thumb_data = {
-          "ui--slider-target": "thumb",
-          action: "pointerdown->ui--slider#startDrag"
-        }.merge(user_data)
+    # Merge pointer event action with user data
+    thumb_data = {
+      "ui--slider-target": "thumb",
+      action: "pointerdown->ui--slider#startDrag"
+    }.merge(user_data)
 
-        base_attrs.merge(
-          class: "border-primary ring-ring/50 absolute block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 #{@classes}".strip,
-          "data-slot": "slider-thumb",
-          role: "slider",
-          tabindex: @disabled ? -1 : 0,
-          data: thumb_data
-        )
-      end
-    end
+    base_attrs.merge(
+      class: "border-primary ring-ring/50 absolute block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 #{@classes}".strip,
+      "data-slot": "slider-thumb",
+      role: "slider",
+      tabindex: @disabled ? -1 : 0,
+      data: thumb_data
+    )
+  end
+end

data/app/behaviors/ui/slider_track_behavior.rb

@@ -1,23 +1,23 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Slider Track component
-    # The track is the background rail that contains the range
-    module UI::SliderTrackBehavior
-      # Build complete HTML attributes hash for slider track
-      def slider_track_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
+# Shared behavior for Slider Track component
+# The track is the background rail that contains the range
+module UI::SliderTrackBehavior
+  # Build complete HTML attributes hash for slider track
+  def slider_track_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
 
-        # Merge click action with user data
-        track_data = {
-          "ui--slider-target": "track",
-          action: "click->ui--slider#clickTrack"
-        }.merge(user_data)
+    # Merge click action with user data
+    track_data = {
+      "ui--slider-target": "track",
+      action: "click->ui--slider#clickTrack"
+    }.merge(user_data)
 
-        base_attrs.merge(
-          class: "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 #{@classes}".strip,
-          "data-slot": "slider-track",
-          data: track_data
-        )
-      end
-    end
+    base_attrs.merge(
+      class: "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 #{@classes}".strip,
+      "data-slot": "slider-track",
+      data: track_data
+    )
+  end
+end

data/app/behaviors/ui/small_behavior.rb

@@ -2,22 +2,30 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Small component
-    module UI::SmallBehavior
-      # Base CSS classes for Small
-      def small_base_classes
-        "text-sm font-medium leading-none"
-      end
+# UI::SmallBehavior
+#
+# @ui_component Small
+# @ui_category typography
+#
+# @ui_anatomy Small - Small component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::SmallBehavior
+  # Base CSS classes for Small
+  def small_base_classes
+    "text-sm font-medium leading-none"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def small_classes
-        TailwindMerge::Merger.new.merge([small_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def small_classes
+    TailwindMerge::Merger.new.merge([small_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash
-      def small_html_attributes
-        {
-          class: small_classes
-        }
-      end
-    end
+  # Build complete HTML attributes hash
+  def small_html_attributes
+    {
+      class: small_classes
+    }
+  end
+end

data/app/behaviors/ui/sonner_toaster_behavior.rb

@@ -1,34 +1,42 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Sonner Toaster component
-    # Provides HTML attributes for the toaster container
-    module UI::SonnerToasterBehavior
-      POSITIONS = %w[top-left top-center top-right bottom-left bottom-center bottom-right].freeze
-      THEMES = %w[light dark system].freeze
+# UI::SonnerToasterBehavior
+#
+# @ui_component Sonner Toaster
+# @ui_description Sonner Toaster component (Phlex) Container for toast notifications - render once in your layout
+# @ui_category other
+#
+# @ui_anatomy Sonner Toaster - Sonner Toaster component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::SonnerToasterBehavior
+  POSITIONS = %w[top-left top-center top-right bottom-left bottom-center bottom-right].freeze
+  THEMES = %w[light dark system].freeze
 
-      def toaster_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: toaster_classes,
-          data: toaster_data_attributes
-        )
-      end
+  def toaster_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: toaster_classes,
+      data: toaster_data_attributes
+    )
+  end
 
-      def toaster_data_attributes
-        base_data = @attributes&.dig(:data) || {}
-        {
-          controller: "ui--sonner",
-          ui__sonner_position_value: @position,
-          ui__sonner_theme_value: @theme,
-          ui__sonner_rich_colors_value: @rich_colors,
-          ui__sonner_expand_value: @expand,
-          ui__sonner_duration_value: @duration,
-          ui__sonner_close_button_value: @close_button,
-          ui__sonner_visible_toasts_value: @visible_toasts
-        }.compact.merge(base_data)
-      end
+  def toaster_data_attributes
+    base_data = @attributes&.dig(:data) || {}
+    {
+      controller: "ui--sonner",
+      ui__sonner_position_value: @position,
+      ui__sonner_theme_value: @theme,
+      ui__sonner_rich_colors_value: @rich_colors,
+      ui__sonner_expand_value: @expand,
+      ui__sonner_duration_value: @duration,
+      ui__sonner_close_button_value: @close_button,
+      ui__sonner_visible_toasts_value: @visible_toasts
+    }.compact.merge(base_data)
+  end
 
-      def toaster_classes
-        TailwindMerge::Merger.new.merge(["toaster group", @classes].compact.join(" "))
-      end
-    end
+  def toaster_classes
+    TailwindMerge::Merger.new.merge(["toaster group", @classes].compact.join(" "))
+  end
+end