fernandes-ui 0.1.0

data/app/behaviors/ui/input_otp_slot_behavior.rb

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

data/app/behaviors/ui/item_actions_behavior.rb

@@ -0,0 +1,31 @@
+# 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
+
+        ].compact.join(" "))
+      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

data/app/behaviors/ui/item_behavior.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+    # ItemBehavior
+    #
+    # Shared behavior for Item component across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent styling and HTML attribute generation for list/menu items.
+    module UI::ItemBehavior
+      # Returns HTML attributes for the item container
+      def item_html_attributes
+        {
+          class: item_classes,
+          "data-slot": "item",
+          "data-variant": @variant,
+          "data-size": @size
+        }.compact
+      end
+
+      # Returns combined CSS classes for the item
+      def item_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          item_base_classes,
+          item_variant_classes,
+          item_size_classes,
+          classes_value
+
+        ].compact.join(" "))
+      end
+
+      # Returns HTML attributes for the media container
+      def item_media_html_attributes
+        {
+          class: "shrink-0",
+          data: { slot: "item-media" }
+        }
+      end
+
+      # Returns HTML attributes for the content container
+      def item_content_html_attributes
+        {
+          class: "min-w-0 flex-1"
+        }
+      end
+
+      # Returns HTML attributes for the content text
+      def item_content_text_html_attributes
+        {
+          class: "font-medium",
+          data: { slot: "item-content" }
+        }
+      end
+
+      # Returns HTML attributes for the description
+      def item_description_html_attributes
+        {
+          class: "text-muted-foreground text-sm",
+          data: { slot: "item-description" }
+        }
+      end
+
+      # Returns HTML attributes for the actions container
+      def item_actions_html_attributes
+        {
+          class: "shrink-0",
+          data: { slot: "item-actions" }
+        }
+      end
+
+      private
+
+      # Base classes applied to all items (from shadcn/ui v4)
+      def item_base_classes
+        "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+      end
+
+      # Variant-specific classes (from shadcn/ui v4)
+      def item_variant_classes
+        case (@variant || "default").to_s
+        when "default"
+          "bg-transparent"
+        when "outline"
+          "border-border"
+        when "muted"
+          "bg-muted/50"
+        else
+          "bg-transparent"
+        end
+      end
+
+      # Size-specific classes (from shadcn/ui v4)
+      def item_size_classes
+        case (@size || "default").to_s
+        when "sm"
+          "py-3 px-4 gap-2.5"
+        when "default"
+          "p-4 gap-4"
+        else
+          "p-4 gap-4"
+        end
+      end
+    end

data/app/behaviors/ui/item_content_behavior.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+    # ItemContentBehavior
+    #
+    # Shared behavior for Item content wrapper across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent HTML attribute generation and styling.
+    module UI::ItemContentBehavior
+      # Returns HTML attributes for the item content element
+      def item_content_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: item_content_classes
+        }.merge(attributes_value || {})
+      end
+
+      # Returns combined CSS classes
+      def item_content_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          item_content_base_classes,
+          classes_value
+
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes for item content (from shadcn/ui v4)
+      def item_content_base_classes
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none"
+      end
+    end

data/app/behaviors/ui/item_description_behavior.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+    # ItemDescriptionBehavior
+    #
+    # Shared behavior for Item description text across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent HTML attribute generation and styling.
+    module UI::ItemDescriptionBehavior
+      # Returns HTML attributes for the item description element
+      def item_description_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: item_description_classes
+        }.merge(attributes_value || {})
+      end
+
+      # Returns combined CSS classes
+      def item_description_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          item_description_base_classes,
+          classes_value
+
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes for item description (from shadcn/ui v4)
+      def item_description_base_classes
+        "line-clamp-2 text-sm text-muted-foreground [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-2"
+      end
+    end

data/app/behaviors/ui/item_footer_behavior.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+    # ItemFooterBehavior
+    #
+    # Shared behavior for Item footer section across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent HTML attribute generation and styling.
+    module UI::ItemFooterBehavior
+      # Returns HTML attributes for the item footer element
+      def item_footer_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: item_footer_classes
+        }.merge(attributes_value || {})
+      end
+
+      # Returns combined CSS classes
+      def item_footer_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          item_footer_base_classes,
+          classes_value
+
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes for item footer (from shadcn/ui v4)
+      def item_footer_base_classes
+        "flex w-full items-center justify-between pt-2"
+      end
+    end

data/app/behaviors/ui/item_group_behavior.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+    # ItemGroupBehavior
+    #
+    # Shared behavior for Item group container across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent HTML attribute generation and styling.
+    module UI::ItemGroupBehavior
+      # Returns HTML attributes for the item group element
+      def item_group_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: item_group_classes
+        }.merge(attributes_value || {})
+      end
+
+      # Returns combined CSS classes
+      def item_group_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          item_group_base_classes,
+          classes_value
+
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes for item group
+      def item_group_base_classes
+        ""
+      end
+    end

data/app/behaviors/ui/item_header_behavior.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+    # ItemHeaderBehavior
+    #
+    # Shared behavior for Item header section across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent HTML attribute generation and styling.
+    module UI::ItemHeaderBehavior
+      # Returns HTML attributes for the item header element
+      def item_header_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: item_header_classes
+        }.merge(attributes_value || {})
+      end
+
+      # Returns combined CSS classes
+      def item_header_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          item_header_base_classes,
+          classes_value
+
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes for item header (from shadcn/ui v4)
+      def item_header_base_classes
+        "flex w-full items-center justify-between pb-2"
+      end
+    end

data/app/behaviors/ui/item_media_behavior.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+    # ItemMediaBehavior
+    #
+    # Shared behavior for Item media container across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent HTML attribute generation and styling.
+    module UI::ItemMediaBehavior
+      # Returns HTML attributes for the item media element
+      def item_media_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        variant_value = respond_to?(:variant, true) ? variant : @variant
+        {
+          class: item_media_classes,
+          "data-slot": "item-media",
+          "data-variant": variant_value
+        }.merge(attributes_value || {}).compact
+      end
+
+      # Returns combined CSS classes
+      def item_media_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          item_media_base_classes,
+          item_media_variant_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes for item media (from shadcn/ui v4)
+      def item_media_base_classes
+        "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5"
+      end
+
+      # Variant-specific classes (from shadcn/ui v4)
+      def item_media_variant_classes
+        variant_value = respond_to?(:variant, true) ? variant : @variant
+        case (variant_value || "default").to_s
+        when "icon"
+          "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4"
+        when "image"
+          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
+        else
+          ""
+        end
+      end
+    end

data/app/behaviors/ui/item_separator_behavior.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+    # ItemSeparatorBehavior
+    #
+    # Shared behavior for Item separator across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent HTML attribute generation and styling.
+    module UI::ItemSeparatorBehavior
+      # Returns HTML attributes for the item separator element
+      def item_separator_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: item_separator_classes
+        }.merge(attributes_value || {})
+      end
+
+      # Returns combined CSS classes
+      def item_separator_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          item_separator_base_classes,
+          classes_value
+
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes for item separator
+      def item_separator_base_classes
+        ""
+      end
+    end

data/app/behaviors/ui/item_title_behavior.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+    # ItemTitleBehavior
+    #
+    # Shared behavior for Item title text across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent HTML attribute generation and styling.
+    module UI::ItemTitleBehavior
+      # Returns HTML attributes for the item title element
+      def item_title_html_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        {
+          class: item_title_classes
+        }.merge(attributes_value || {})
+      end
+
+      # Returns combined CSS classes
+      def item_title_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          item_title_base_classes,
+          classes_value
+
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes for item title (from shadcn/ui v4)
+      def item_title_base_classes
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium"
+      end
+    end

data/app/behaviors/ui/kbd_behavior.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module UI
+  # KbdBehavior
+  #
+  # Shared behavior for Kbd component across ERB, ViewComponent, and Phlex implementations.
+  # Displays textual user input from keyboard, helping users understand keyboard shortcuts.
+  module KbdBehavior
+    # Returns HTML attributes for the kbd element
+    def kbd_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: kbd_classes,
+        "data-slot": "kbd"
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the kbd element
+    def kbd_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none"
+      svg_sizing = "[&_svg:not([class*='size-'])]:size-3"
+      tooltip_styling = "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10"
+
+      TailwindMerge::Merger.new.merge([base, svg_sizing, tooltip_styling, classes_value].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/kbd_group_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module UI
+  # KbdGroupBehavior
+  #
+  # Shared behavior for KbdGroup component across ERB, ViewComponent, and Phlex implementations.
+  # Groups multiple keyboard keys together with consistent spacing.
+  module KbdGroupBehavior
+    # Returns HTML attributes for the kbd group element
+    def kbd_group_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: kbd_group_classes,
+        "data-slot": "kbd-group"
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the kbd group element
+    def kbd_group_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "inline-flex items-center gap-1"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/label_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+module UI
+  # LabelBehavior
+  #
+  # Shared behavior for Label component across ERB, ViewComponent, and Phlex implementations.
+  # This module provides consistent styling and HTML attribute generation for form labels.
+  module LabelBehavior
+    # Returns HTML attributes for the label element
+    def label_html_attributes
+      {
+        for: @for_id,
+        class: label_classes
+      }.compact
+    end
+
+    # Returns combined CSS classes for the label
+    def label_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        label_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes applied to all labels (from shadcn/ui)
+    def label_base_classes
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+    end
+  end
+end

data/app/behaviors/ui/large_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Large component
+    module UI::LargeBehavior
+      # Base CSS classes for Large
+      def large_base_classes
+        "text-lg font-semibold"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def large_classes
+        TailwindMerge::Merger.new.merge([large_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def large_html_attributes
+        {
+          class: large_classes
+        }
+      end
+    end

data/app/behaviors/ui/lead_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Lead component
+    module UI::LeadBehavior
+      # Base CSS classes for Lead
+      def lead_base_classes
+        "text-xl text-muted-foreground"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def lead_classes
+        TailwindMerge::Merger.new.merge([lead_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def lead_html_attributes
+        {
+          class: lead_classes
+        }
+      end
+    end

data/app/behaviors/ui/list_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for List component
+    module UI::ListBehavior
+      # Base CSS classes for List (ul)
+      def list_base_classes
+        "my-6 ml-6 list-disc [&>li]:mt-2"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def list_classes
+        TailwindMerge::Merger.new.merge([list_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def list_html_attributes
+        {
+          class: list_classes
+        }
+      end
+    end

data/app/behaviors/ui/menubar_behavior.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # MenubarBehavior
+    #
+    # Shared behavior for Menubar component across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent styling and HTML attribute generation.
+    module UI::MenubarBehavior
+      # Returns HTML attributes for the menubar container
+      def menubar_html_attributes
+        attrs = {
+          class: menubar_classes,
+          data: menubar_data_attributes,
+          role: "menubar"
+        }
+
+        # Add aria-label if provided
+        attrs[:"aria-label"] = @aria_label if defined?(@aria_label) && @aria_label
+
+        attrs
+      end
+
+      # Returns combined CSS classes for the menubar
+      def menubar_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus controller
+      def menubar_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        base_data = {
+          controller: "ui--menubar"
+        }
+
+        # Add loop value if specified
+        base_data[:"ui--menubar-loop-value"] = @loop if defined?(@loop) && @loop
+
+        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+      end
+    end