fernandes-ui 0.1.0

data/app/components/ui/tooltip_trigger.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+    # Trigger - Phlex implementation
+    #
+    # The interactive element that shows/hides the tooltip on hover/focus.
+    # Supports asChild pattern for composition with other components.
+    #
+    # @example Default trigger (renders as button)
+    #   render UI::Trigger.new { "Hover me" }
+    #
+    # @example With asChild - compose with Button
+    #   render UI::Trigger.new(as_child: true) do |attrs|
+    #     render UI::Button.new(**attrs, variant: :outline) { "Hover" }
+    #   end
+    #
+    # @example With asChild - custom element
+    #   render UI::Trigger.new(as_child: true) do |attrs|
+    #     span(**attrs, class: "cursor-help") { "Help" }
+    #   end
+    class UI::TooltipTrigger < Phlex::HTML
+      include UI::TooltipTriggerBehavior
+
+      # @param as_child [Boolean] If true, yields attributes to block instead of rendering button
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, **attributes)
+        @as_child = as_child
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        trigger_attrs = tooltip_trigger_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          # asChild mode: yield attributes to block
+          # The caller is responsible for rendering an element with these attributes
+          yield(trigger_attrs) if block_given?
+        else
+          # Default mode: render as button
+          button(**trigger_attrs, &block)
+        end
+      end
+    end

data/app/controllers/ui/application_controller.rb

@@ -0,0 +1,4 @@
+module UI
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/ui/application_helper.rb

@@ -0,0 +1,20 @@
+module UI
+  module ApplicationHelper
+    # Render a Lucide icon
+    # @param name [String, Symbol] Icon name (e.g. :check, 'chevron-right')
+    # @param options [Hash] HTML attributes to add to the SVG element
+    # @return [String] SVG markup for the icon
+    #
+    # @example Basic usage
+    #   lucide_icon(:check)
+    #
+    # @example With custom classes
+    #   lucide_icon(:check, class: "size-4")
+    #
+    # @example With multiple attributes
+    #   lucide_icon("chevron-right", class: "ml-auto h-4 w-4")
+    def ui_lucide_icon(name, options = {})
+      lucide_icon(name.to_s, options)
+    end
+  end
+end

data/app/helpers/ui/combobox_behavior.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+# ComboboxBehavior
+#
+# Shared behavior for Combobox wrapper component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent attribute generation for combobox functionality.
+#
+# The combobox pattern wraps a Popover/Drawer/DropdownMenu container and adds selection management:
+# - Maintains selected value state
+# - Updates target text when item is selected
+# - Controls check icon visibility based on selection
+# - Closes container after selection
+#
+# @example Usage with Popover (Phlex)
+#   render UI::ComboboxWrapper.new(value: "next") do |combobox_attrs|
+#     render UI::Popover.new(**combobox_attrs) do
+#       # ... popover content
+#     end
+#   end
+module UI::ComboboxBehavior
+  # Returns HTML attributes for the combobox container (Popover/Drawer/DropdownMenu)
+  # These attributes initialize the Stimulus controller and set the initial selected value
+  #
+  # @return [Hash] HTML attributes including Stimulus controller and value
+  def combobox_html_attributes
+    value = respond_to?(:value) ? value : (@value || "")
+
+    {
+      data: {
+        controller: "ui--combobox",
+        ui__combobox_value_value: value
+      }
+    }
+  end
+
+  # Returns HTML attributes for the text target element
+  # This is typically a <span> inside the trigger button that displays the selected item's label
+  #
+  # @return [Hash] HTML attributes marking element as text target
+  def combobox_text_html_attributes
+    {
+      data: { ui__combobox_target: "text" }
+    }
+  end
+
+  # Returns HTML attributes for a command item
+  # These attributes mark the item as a combobox target and associate it with a value
+  #
+  # @param value [String] The value associated with this item
+  # @return [Hash] HTML attributes marking element as item target with value
+  def combobox_item_html_attributes(value)
+    {
+      data: {
+        ui__combobox_target: "item",
+        value: value
+      }
+    }
+  end
+end

data/app/helpers/ui/empty_behavior.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+module UI
+  # EmptyBehavior - Shared behavior for Empty component
+  module EmptyBehavior
+    def empty_html_attributes
+      {
+        class: empty_classes,
+        data: { slot: "empty" }
+      }
+    end
+
+    def empty_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+
+  # EmptyHeaderBehavior - Shared behavior for EmptyHeader sub-component
+  module EmptyHeaderBehavior
+    def empty_header_html_attributes
+      {
+        class: empty_header_classes,
+        data: { slot: "empty-header" }
+      }
+    end
+
+    def empty_header_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+
+  # EmptyMediaBehavior - Shared behavior for EmptyMedia sub-component
+  module EmptyMediaBehavior
+    def empty_media_html_attributes
+      {
+        class: empty_media_classes,
+        data: { slot: "empty-media" }
+      }
+    end
+
+    def empty_media_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      variant_value = @variant.to_s
+
+      TailwindMerge::Merger.new.merge([
+        "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        empty_media_variant_classes(variant_value),
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    def empty_media_variant_classes(variant)
+      case variant
+      when "icon"
+        "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+      else # "default"
+        "bg-transparent"
+      end
+    end
+  end
+
+  # EmptyTitleBehavior - Shared behavior for EmptyTitle sub-component
+  module EmptyTitleBehavior
+    def empty_title_html_attributes
+      {
+        class: empty_title_classes,
+        data: { slot: "empty-title" }
+      }
+    end
+
+    def empty_title_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        "font-semibold tracking-tight text-base",
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+
+  # EmptyDescriptionBehavior - Shared behavior for EmptyDescription sub-component
+  module EmptyDescriptionBehavior
+    def empty_description_html_attributes
+      {
+        class: empty_description_classes,
+        data: { slot: "empty-description" }
+      }
+    end
+
+    def empty_description_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        "text-sm text-muted-foreground",
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+
+  # EmptyContentBehavior - Shared behavior for EmptyContent sub-component
+  module EmptyContentBehavior
+    def empty_content_html_attributes
+      {
+        class: empty_content_classes,
+        data: { slot: "empty-content" }
+      }
+    end
+
+    def empty_content_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+end

data/app/helpers/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/helpers/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/helpers/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/helpers/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/helpers/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/helpers/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/helpers/ui/popover_behavior.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+# PopoverBehavior
+#
+# Shared behavior for Popover component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation.
+module UI::PopoverBehavior
+  # Returns HTML attributes for the popover container element
+  def popover_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: popover_classes,
+      data: popover_data_attributes
+    }.merge(attributes_value)
+  end
+
+  # Returns combined CSS classes for the popover
+  def popover_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      popover_base_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  # Returns data attributes for the popover controller
+  def popover_data_attributes
+    {
+      controller: "ui--popover",
+      ui__popover_placement_value: normalized_placement,
+      ui__popover_offset_value: @offset,
+      ui__popover_trigger_value: @trigger,
+      ui__popover_hover_delay_value: @hover_delay
+    }
+  end
+
+  private
+
+  # Base classes applied to all popovers - relative positioning for absolute content
+  def popover_base_classes
+    "relative inline-block"
+  end
+
+  # Normalize placement from legacy align parameter
+  def normalized_placement
+    # If we have a legacy align parameter, convert it to placement
+    if @align && @align != "center"
+      "bottom-#{@align}"
+    else
+      @placement
+    end
+  end
+end