fernandes-ui 0.1.0

data/app/behaviors/ui/h4_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for H4 component
+    module UI::H4Behavior
+      # Base CSS classes for H4
+      def h4_base_classes
+        "scroll-m-20 text-xl font-semibold tracking-tight"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def h4_classes
+        TailwindMerge::Merger.new.merge([h4_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def h4_html_attributes
+        {
+          class: h4_classes
+        }
+      end
+    end

data/app/behaviors/ui/hover_card_behavior.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    # Shared behavior for HoverCard component
+    # Provides HTML attributes and styling for the root container
+    module UI::HoverCardBehavior
+      # Returns HTML attributes for the hover card container element
+      def hover_card_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: hover_card_classes,
+          data: hover_card_data_attributes
+        }.merge(attributes_value)
+      end
+
+      # Returns combined CSS classes for the hover card
+      def hover_card_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for the hover card controller
+      def hover_card_data_attributes
+        {
+          controller: "ui--hover-card"
+        }
+      end
+    end

data/app/behaviors/ui/hover_card_content_behavior.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+    # Shared behavior for HoverCardContent component
+    # Provides HTML attributes and styling for the content element
+    module UI::HoverCardContentBehavior
+      # Returns HTML attributes for the hover card content element
+      def content_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: content_classes,
+          data: content_data_attributes
+        }.merge(attributes_value)
+      end
+
+      # Returns combined CSS classes for the hover card content
+      def content_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          content_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for the hover card content
+      def content_data_attributes
+        {
+          "ui__hover_card_target": "content",
+          "align": @align,
+          "side_offset": @side_offset,
+          "action": "mouseenter->ui--hover-card#keepOpen mouseleave->ui--hover-card#scheduleHide"
+        }
+      end
+
+      private
+
+      # Base classes from shadcn/ui - exact match for hover card content
+      # These match the Hover Card content styling from shadcn
+      def content_base_classes
+        "bg-popover text-popover-foreground 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 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden invisible"
+      end
+    end

data/app/behaviors/ui/hover_card_trigger_behavior.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+    # Shared behavior for HoverCardTrigger component
+    # Provides HTML attributes and styling for the trigger element
+    # Supports asChild pattern for composition
+    module UI::HoverCardTriggerBehavior
+      # Returns HTML attributes for the hover card trigger element
+      def trigger_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: trigger_classes,
+          data: trigger_data_attributes
+        }.merge(attributes_value)
+      end
+
+      # Returns combined CSS classes for the hover card trigger
+      def trigger_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          trigger_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for the hover card trigger
+      def trigger_data_attributes
+        {
+          "ui__hover_card_target": "trigger",
+          "action": "mouseenter->ui--hover-card#show mouseleave->ui--hover-card#hide"
+        }
+      end
+
+      private
+
+      # Base classes applied to all hover card triggers
+      # Includes inline-flex for alignment and focus ring for keyboard navigation
+      def trigger_base_classes
+        [
+          "inline-flex",
+          "rounded-sm",
+          "outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+        ].join(" ")
+      end
+    end

data/app/behaviors/ui/inline_code_behavior.rb

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

data/app/behaviors/ui/input_behavior.rb

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

data/app/behaviors/ui/input_group_addon_behavior.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# 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.
+module UI::InputGroupAddonBehavior
+  # Returns HTML attributes for the addon element
+  def input_group_addon_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": @align,
+      class: input_group_addon_classes
+    }.merge(attributes_value).compact
+  end
+
+  # Returns combined CSS classes for the addon
+  def input_group_addon_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_group_addon_base_classes,
+      input_group_addon_align_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes - exact match from shadcn/ui
+  def input_group_addon_base_classes
+    "text-muted-foreground flex h-auto cursor-text items-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50"
+  end
+
+  # Alignment-specific classes
+  def input_group_addon_align_classes
+    case @align.to_s
+    when "inline-start"
+      "order-first justify-center pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]"
+    when "inline-end"
+      "order-last justify-center pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]"
+    when "block-start"
+      "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5"
+    when "block-end"
+      "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+    else
+      "order-first justify-center pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]"
+    end
+  end
+end

data/app/behaviors/ui/input_group_behavior.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+# UI::InputGroupBehavior
+#
+# Shared behavior for InputGroup component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation for input groups.
+module UI::InputGroupBehavior
+  # Returns HTML attributes for the input group wrapper
+  def input_group_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      "data-slot": "input-group",
+      role: "group",
+      class: input_group_classes
+    }.merge(attributes_value).compact
+  end
+
+  # Returns combined CSS classes for the input group
+  def input_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_group_base_classes,
+      input_group_height_classes,
+      input_group_alignment_classes,
+      input_group_focus_classes,
+      input_group_error_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes - exact match from shadcn/ui
+  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"
+  end
+
+  # Height classes
+  def input_group_height_classes
+    "h-9 min-w-0 has-[>textarea]:h-auto"
+  end
+
+  # Alignment-specific classes for addon positioning
+  def input_group_alignment_classes
+    [
+      "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+      "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+      "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+      "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3"
+    ].join(" ")
+  end
+
+  # Focus state classes
+  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
+
+  # Error state classes
+  def input_group_error_classes
+    "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40"
+  end
+end

data/app/behaviors/ui/input_group_button_behavior.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+# 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.
+module UI::InputGroupButtonBehavior
+  # Returns HTML attributes for the input group button
+  def input_group_button_html_attributes
+    input_group_button_attributes
+  end
+
+  # Returns attributes to pass to the button component
+  def input_group_button_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      type: @type,
+      variant: @variant,
+      classes: input_group_button_classes,
+      "data-size": @size
+    }.merge(attributes_value).compact
+  end
+
+  # Returns combined CSS classes for the button
+  def input_group_button_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_group_button_base_classes,
+      input_group_button_variant_classes,
+      input_group_button_size_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for input group buttons - includes focus ring for accessibility
+  def input_group_button_base_classes
+    [
+      "text-sm shadow-none flex gap-2 items-center justify-center",
+      "transition-all [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      "disabled:pointer-events-none disabled:opacity-50"
+    ].join(" ")
+  end
+
+  # Variant-specific classes based on @variant
+  def input_group_button_variant_classes
+    case @variant.to_s
+    when "default"
+      "bg-primary text-primary-foreground hover:bg-primary/90"
+    when "destructive"
+      "bg-destructive text-destructive-foreground hover:bg-destructive/90 text-white"
+    when "outline"
+      "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+    when "secondary"
+      "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+    when "ghost"
+      "hover:bg-accent hover:text-accent-foreground"
+    when "link"
+      "text-primary underline-offset-4 hover:underline"
+    else
+      "hover:bg-accent hover:text-accent-foreground" # default to ghost for input group
+    end
+  end
+
+  # Size-specific classes
+  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"
+    when "sm"
+      "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5"
+    when "icon-xs"
+      "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0"
+    when "icon-sm"
+      "size-8 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"
+    end
+  end
+end

data/app/behaviors/ui/input_group_input_behavior.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+# UI::InputGroupInputBehavior
+#
+# Shared behavior for InputGroupInput component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation for input group inputs.
+module UI::InputGroupInputBehavior
+  # Returns HTML attributes for the input group input
+  def input_group_input_html_attributes
+    input_group_input_attributes
+  end
+
+  # Returns attributes to pass to the input component
+  def input_group_input_attributes
+    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" } }
+
+    # 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)
+
+    {
+      type: @type,
+      placeholder: @placeholder,
+      value: @value,
+      name: @name,
+      id: @id,
+      classes: input_group_input_classes,
+      attributes: merged_attrs
+    }.compact.merge(data_slot_override)
+  end
+
+  # Returns combined CSS classes for the input
+  def input_group_input_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_group_input_base_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for input group input - removes border, shadow and adds flex-1
+  def input_group_input_base_classes
+    "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"
+  end
+end

data/app/behaviors/ui/input_group_text_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+# UI::InputGroupTextBehavior
+#
+# Shared behavior for InputGroupText component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation for input group text elements.
+module UI::InputGroupTextBehavior
+  # Returns HTML attributes for the text element
+  def input_group_text_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: input_group_text_classes
+    }.merge(attributes_value).compact
+  end
+
+  # Returns combined CSS classes for the text element
+  def input_group_text_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_group_text_base_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes - exact match from shadcn/ui
+  def input_group_text_base_classes
+    "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+  end
+end

data/app/behaviors/ui/input_group_textarea_behavior.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+# 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.
+module UI::InputGroupTextareaBehavior
+  # Returns HTML attributes for the input group textarea
+  def input_group_textarea_html_attributes
+    input_group_textarea_attributes
+  end
+
+  # Returns attributes to pass to the textarea component
+  def input_group_textarea_attributes
+    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" } }
+
+    # 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)
+
+    {
+      placeholder: @placeholder,
+      value: @value,
+      name: @name,
+      id: @id,
+      rows: @rows,
+      classes: input_group_textarea_classes,
+      attributes: merged_attrs
+    }.compact.merge(data_slot_override)
+  end
+
+  # Returns combined CSS classes for the textarea
+  def input_group_textarea_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      input_group_textarea_base_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  private
+
+  # Base classes for input group textarea - removes border, shadow and adds flex-1
+  def input_group_textarea_base_classes
+    "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent"
+  end
+end

data/app/behaviors/ui/input_otp_behavior.rb

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

data/app/behaviors/ui/input_otp_group_behavior.rb

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+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
+
+      # 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
+
+      # Base classes applied to all input OTP separators
+      def input_otp_separator_base_classes
+        "flex items-center justify-center"
+      end
+    end