fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/inline_code_behavior.rb

@@ -2,22 +2,30 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for InlineCode component
-    module UI::InlineCodeBehavior
-      # Base CSS classes for InlineCode
-      def inline_code_base_classes
-        "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
-      end
+# UI::InlineCodeBehavior
+#
+# @ui_component Inline Code
+# @ui_category typography
+#
+# @ui_anatomy Inline Code - Inline Code component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::InlineCodeBehavior
+  # Base CSS classes for InlineCode
+  def inline_code_base_classes
+    "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def inline_code_classes
-        TailwindMerge::Merger.new.merge([inline_code_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def inline_code_classes
+    TailwindMerge::Merger.new.merge([inline_code_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash
-      def inline_code_html_attributes
-        {
-          class: inline_code_classes
-        }
-      end
-    end
+  # Build complete HTML attributes hash
+  def inline_code_html_attributes
+    {
+      class: inline_code_classes
+    }
+  end
+end

data/app/behaviors/ui/input_behavior.rb

@@ -1,52 +1,62 @@
 # frozen_string_literal: true
 
-module UI
-  # InputBehavior
-  #
-  # Shared behavior for Input component across ERB, ViewComponent, and Phlex implementations.
-  # This module provides consistent styling and HTML attribute generation for form inputs.
-  module InputBehavior
-    # Returns HTML attributes for the input element
-    def input_html_attributes
-      {
-        type: @type,
-        class: input_classes,
-        placeholder: @placeholder,
-        value: @value,
-        name: @name,
-        id: @id,
-        readonly: @readonly,
-        data: { slot: "input" }
-      }.compact
-    end
+# UI::InputBehavior
+#
+# @ui_component Input
+# @ui_category forms
+#
+# @ui_anatomy Input - Text input field (required)
+# @ui_anatomy Group - A wrapper component for grouping inputs with addons, buttons, and text.
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Form integration
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+#
+# @ui_related textarea
+# @ui_related field
+#
+module UI::InputBehavior
+  # Returns HTML attributes for the input element
+  def input_html_attributes
+    {
+      type: @type,
+      class: input_classes,
+      placeholder: @placeholder,
+      value: @value,
+      name: @name,
+      id: @id,
+      readonly: @readonly,
+      data: {slot: "input"}
+    }.compact
+  end
 
-    # Returns combined CSS classes for the input
-    def input_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        input_base_classes,
-        input_focus_classes,
-        input_validation_classes,
-        classes_value
+  # Returns combined CSS classes for the input
+  def input_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_base_classes,
+      input_focus_classes,
+      input_validation_classes,
+      classes_value
 
-      ].compact.join(" "))
-    end
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes applied to all inputs (from shadcn/ui)
-    def input_base_classes
-      "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
-    end
+  # Base classes applied to all inputs (from shadcn/ui)
+  def input_base_classes
+    "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+  end
 
-    # Focus state classes
-    def input_focus_classes
-      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-    end
+  # Focus state classes
+  def input_focus_classes
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+  end
 
-    # Validation state classes
-    def input_validation_classes
-      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-    end
+  # Validation state classes
+  def input_validation_classes
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
   end
 end

data/app/behaviors/ui/input_group_addon_behavior.rb

@@ -2,8 +2,15 @@
 
 # UI::InputGroupAddonBehavior
 #
-# Shared behavior for InputGroupAddon component across ERB, ViewComponent, and Phlex implementations.
-# This module provides consistent styling and HTML attribute generation for input group addons.
+# @ui_component Input Group Addon
+# @ui_description Addon - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Input Group Addon - An addon element for input groups that can contain text, icons, or other elements. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+#
 module UI::InputGroupAddonBehavior
   # Returns HTML attributes for the addon element
   def input_group_addon_html_attributes

data/app/behaviors/ui/input_group_behavior.rb

@@ -32,8 +32,9 @@ module UI::InputGroupBehavior
   private
 
   # Base classes - exact match from shadcn/ui
+  # Uses CSS variable --radius for customizable border radius (defaults to 0.375rem / rounded-md)
   def input_group_base_classes
-    "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none"
+    "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-[var(--radius,0.375rem)] border shadow-xs transition-[color,box-shadow] outline-none"
   end
 
   # Height classes
@@ -52,6 +53,7 @@ module UI::InputGroupBehavior
   end
 
   # Focus state classes
+  # Uses box-shadow for focus ring which automatically follows border-radius
   def input_group_focus_classes
     "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]"
   end

data/app/behaviors/ui/input_group_button_behavior.rb

@@ -2,8 +2,15 @@
 
 # UI::InputGroupButtonBehavior
 #
-# Shared behavior for InputGroupButton component across ERB, ViewComponent, and Phlex implementations.
-# This module provides consistent styling and HTML attribute generation for input group buttons.
+# @ui_component Input Group Button
+# @ui_description Button - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Input Group Button - A button component specifically styled for use within input groups. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+#
 module UI::InputGroupButtonBehavior
   # Returns HTML attributes for the input group button
   def input_group_button_html_attributes
@@ -18,7 +25,7 @@ module UI::InputGroupButtonBehavior
       variant: @variant,
       classes: input_group_button_classes,
       "data-size": @size
-    }.merge(attributes_value).compact
+    }.deep_merge(attributes_value).compact
   end
 
   # Returns combined CSS classes for the button
@@ -65,18 +72,19 @@ module UI::InputGroupButtonBehavior
   end
 
   # Size-specific classes
+  # Uses calc(var(--radius, 0.375rem) - 5px) to create slightly smaller rounded corners for nested buttons
   def input_group_button_size_classes
     case @size.to_s
     when "xs"
-      "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
+      "h-6 gap-1 px-2 rounded-[calc(var(--radius,0.375rem)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
     when "sm"
-      "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5"
+      "h-8 px-2.5 gap-1.5 rounded-[calc(var(--radius,0.375rem)-5px)] has-[>svg]:px-2.5"
     when "icon-xs"
-      "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0"
+      "size-6 rounded-[calc(var(--radius,0.375rem)-5px)] p-0 has-[>svg]:p-0"
     when "icon-sm"
-      "size-8 p-0 has-[>svg]:p-0"
+      "size-8 rounded-[calc(var(--radius,0.375rem)-5px)] p-0 has-[>svg]:p-0"
     else
-      "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
+      "h-6 gap-1 px-2 rounded-[calc(var(--radius,0.375rem)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
     end
   end
 end

data/app/behaviors/ui/input_group_input_behavior.rb

@@ -15,7 +15,7 @@ module UI::InputGroupInputBehavior
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
     # Merge data-slot to override the default "input" slot with "input-group-control"
     # For Phlex: merge at top level, for ERB/VC: merge inside attributes hash
-    data_slot_override = { data: { slot: "input-group-control" } }
+    data_slot_override = {data: {slot: "input-group-control"}}
 
     # Merge the data-slot both at top level (for Phlex) and in attributes (for ERB/VC)
     merged_attrs = attributes_value.deep_merge(data_slot_override)

data/app/behaviors/ui/input_group_textarea_behavior.rb

@@ -2,8 +2,14 @@
 
 # UI::InputGroupTextareaBehavior
 #
-# Shared behavior for InputGroupTextarea component across ERB, ViewComponent, and Phlex implementations.
-# This module provides consistent styling and HTML attribute generation for input group textareas.
+# @ui_component Input Group Textarea
+# @ui_description Textarea - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Input Group Textarea - A textarea element styled for use within input groups. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
 module UI::InputGroupTextareaBehavior
   # Returns HTML attributes for the input group textarea
   def input_group_textarea_html_attributes
@@ -15,7 +21,7 @@ module UI::InputGroupTextareaBehavior
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
     # Merge data-slot to override the default textarea slot with "input-group-control"
     # For Phlex: merge at top level, for ERB/VC: merge inside attributes hash
-    data_slot_override = { data: { slot: "input-group-control" } }
+    data_slot_override = {data: {slot: "input-group-control"}}
 
     # Merge the data-slot both at top level (for Phlex) and in attributes (for ERB/VC)
     merged_attrs = attributes_value.deep_merge(data_slot_override)

data/app/behaviors/ui/input_otp_behavior.rb

@@ -2,43 +2,57 @@
 
 require "tailwind_merge"
 
-    # InputOtpBehavior
-    #
-    # Shared behavior for InputOtp component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling for OTP input containers.
-    module UI::InputOtpBehavior
-      # Returns HTML attributes for the input OTP container element
-      def input_otp_html_attributes
-        attrs = {
-          class: input_otp_classes,
-          data: input_otp_data_attributes
-        }
-        attrs[:id] = @id if @id
-        attrs
-      end
+# UI::InputOtpBehavior
+#
+# @ui_component Input OTP
+# @ui_description InputOtp - Phlex implementation
+# @ui_category forms
+#
+# @ui_anatomy Input OTP - Accessible one-time password container component. (required)
+# @ui_anatomy Group - Container for grouping OTP input slots together visually.
+# @ui_anatomy Separator - Visual divider between OTP input groups.
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+#
+# @ui_keyboard ArrowLeft Moves focus left or decreases value
+# @ui_keyboard ArrowRight Moves focus right or increases value
+# @ui_keyboard Home Moves focus to first item
+# @ui_keyboard End Moves focus to last item
+#
+module UI::InputOtpBehavior
+  # Returns HTML attributes for the input OTP container element
+  def input_otp_html_attributes
+    attrs = {
+      class: input_otp_classes,
+      data: input_otp_data_attributes
+    }
+    attrs[:id] = @id if @id
+    attrs
+  end
 
-      # Returns combined CSS classes for the input OTP container
-      def input_otp_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          input_otp_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the input OTP container
+  def input_otp_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_otp_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus controller
-      def input_otp_data_attributes
-        {
-          controller: "ui--input-otp",
-          "ui__input_otp_length_value": @length,
-          "ui__input_otp_pattern_value": @pattern
-        }.compact
-      end
+  # Returns data attributes for Stimulus controller
+  def input_otp_data_attributes
+    {
+      controller: "ui--input-otp",
+      ui__input_otp_length_value: @length,
+      ui__input_otp_pattern_value: @pattern
+    }.compact
+  end
 
-      private
+  private
 
-      # Base classes applied to all input OTP containers
-      def input_otp_base_classes
-        "flex items-center gap-2 has-[:disabled]:opacity-50"
-      end
-    end
+  # Base classes applied to all input OTP containers
+  def input_otp_base_classes
+    "flex items-center gap-2 has-[:disabled]:opacity-50"
+  end
+end

data/app/behaviors/ui/input_otp_group_behavior.rb

@@ -2,31 +2,31 @@
 
 require "tailwind_merge"
 
-    # InputOtpGroupBehavior
-    #
-    # Shared behavior for InputOtpGroup component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation for grouping OTP slots.
-    module UI::InputOtpGroupBehavior
-      # Returns HTML attributes for the input OTP group element
-      def input_otp_group_html_attributes
-        {
-          class: input_otp_group_classes
-        }
-      end
+# InputOtpGroupBehavior
+#
+# Shared behavior for InputOtpGroup component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation for grouping OTP slots.
+module UI::InputOtpGroupBehavior
+  # Returns HTML attributes for the input OTP group element
+  def input_otp_group_html_attributes
+    {
+      class: input_otp_group_classes
+    }
+  end
 
-      # Returns combined CSS classes for the input OTP group
-      def input_otp_group_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          input_otp_group_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the input OTP group
+  def input_otp_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_otp_group_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to all input OTP groups
-      def input_otp_group_base_classes
-        "flex items-center"
-      end
-    end
+  # Base classes applied to all input OTP groups
+  def input_otp_group_base_classes
+    "flex items-center"
+  end
+end

data/app/behaviors/ui/input_otp_separator_behavior.rb

@@ -2,32 +2,32 @@
 
 require "tailwind_merge"
 
-    # InputOtpSeparatorBehavior
-    #
-    # Shared behavior for InputOtpSeparator component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation for OTP slot separators.
-    module UI::InputOtpSeparatorBehavior
-      # Returns HTML attributes for the input OTP separator element
-      def input_otp_separator_html_attributes
-        {
-          class: input_otp_separator_classes,
-          role: "separator"
-        }
-      end
+# InputOtpSeparatorBehavior
+#
+# Shared behavior for InputOtpSeparator component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation for OTP slot separators.
+module UI::InputOtpSeparatorBehavior
+  # Returns HTML attributes for the input OTP separator element
+  def input_otp_separator_html_attributes
+    {
+      class: input_otp_separator_classes,
+      role: "separator"
+    }
+  end
 
-      # Returns combined CSS classes for the input OTP separator
-      def input_otp_separator_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          input_otp_separator_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the input OTP separator
+  def input_otp_separator_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_otp_separator_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to all input OTP separators
-      def input_otp_separator_base_classes
-        "flex items-center justify-center"
-      end
-    end
+  # Base classes applied to all input OTP separators
+  def input_otp_separator_base_classes
+    "flex items-center justify-center"
+  end
+end

data/app/behaviors/ui/input_otp_slot_behavior.rb

@@ -2,48 +2,56 @@
 
 require "tailwind_merge"
 
-    # InputOtpSlotBehavior
-    #
-    # Shared behavior for InputOtpSlot component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling for individual OTP input slots.
-    module UI::InputOtpSlotBehavior
-      # Returns HTML attributes for the input OTP slot element
-      def input_otp_slot_html_attributes
-        {
-          type: "text",
-          maxlength: 1,
-          inputmode: "numeric",
-          autocomplete: "one-time-code",
-          value: @value,
-          name: @name,
-          id: @id,
-          disabled: @disabled,
-          class: input_otp_slot_classes,
-          data: input_otp_slot_data_attributes
-        }.compact
-      end
+# UI::InputOtpSlotBehavior
+#
+# @ui_component Input OTP Slot
+# @ui_description Slot - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Input OTP Slot - Individual OTP input slot for a single character. (required)
+#
+# @ui_feature Keyboard navigation
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+#
+module UI::InputOtpSlotBehavior
+  # Returns HTML attributes for the input OTP slot element
+  def input_otp_slot_html_attributes
+    {
+      type: "text",
+      maxlength: 1,
+      inputmode: "numeric",
+      autocomplete: "one-time-code",
+      value: @value,
+      name: @name,
+      id: @id,
+      disabled: @disabled,
+      class: input_otp_slot_classes,
+      data: input_otp_slot_data_attributes
+    }.compact
+  end
 
-      # Returns combined CSS classes for the input OTP slot
-      def input_otp_slot_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          input_otp_slot_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the input OTP slot
+  def input_otp_slot_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_otp_slot_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus integration
-      def input_otp_slot_data_attributes
-        {
-          "ui__input_otp_target": "input",
-          action: "input->ui--input-otp#input keydown->ui--input-otp#keydown paste->ui--input-otp#paste"
-        }
-      end
+  # Returns data attributes for Stimulus integration
+  def input_otp_slot_data_attributes
+    {
+      ui__input_otp_target: "input",
+      action: "input->ui--input-otp#input keydown->ui--input-otp#keydown paste->ui--input-otp#paste"
+    }
+  end
 
-      private
+  private
 
-      # Base classes applied to all input OTP slots (from shadcn/ui)
-      def input_otp_slot_base_classes
-        "border-input relative flex size-9 items-center justify-center border-y border-r text-sm text-center shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:z-10 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
-      end
-    end
+  # Base classes applied to all input OTP slots (from shadcn/ui)
+  def input_otp_slot_base_classes
+    "border-input relative flex size-9 items-center justify-center border-y border-r text-sm text-center shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:z-10 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+  end
+end

data/app/behaviors/ui/item_actions_behavior.rb

@@ -1,31 +1,37 @@
 # frozen_string_literal: true
-    # ItemActionsBehavior
-    #
-    # Shared behavior for Item actions container across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling.
-    module UI::ItemActionsBehavior
-      # Returns HTML attributes for the item actions element
-      def item_actions_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: item_actions_classes
-        }.merge(attributes_value || {})
-      end
 
-      # Returns combined CSS classes
-      def item_actions_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_actions_base_classes,
-          classes_value
+# UI::ItemActionsBehavior
+#
+# @ui_component Item Actions
+# @ui_category other
+#
+# @ui_anatomy Item Actions - Individual item element (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::ItemActionsBehavior
+  # Returns HTML attributes for the item actions element
+  def item_actions_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: item_actions_classes
+    }.merge(attributes_value || {})
+  end
 
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes
+  def item_actions_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_actions_base_classes,
+      classes_value
 
-      private
+    ].compact.join(" "))
+  end
 
-      # Base classes for item actions (from shadcn/ui v4)
-      def item_actions_base_classes
-        "flex shrink-0 items-center gap-2"
-      end
-    end
+  private
+
+  # Base classes for item actions (from shadcn/ui v4)
+  def item_actions_base_classes
+    "flex shrink-0 items-center gap-2"
+  end
+end