fernandes-ui 0.1.0

data/app/behaviors/ui/sidebar_menu_skeleton_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # MenuSkeletonBehavior
+    #
+    # Shared behavior for SidebarMenuSkeleton component.
+    module UI::SidebarMenuSkeletonBehavior
+      def sidebar_menu_skeleton_html_attributes
+        {
+          class: sidebar_menu_skeleton_classes,
+          data: sidebar_menu_skeleton_data_attributes
+        }
+      end
+
+      def sidebar_menu_skeleton_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          sidebar_menu_skeleton_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      def sidebar_menu_skeleton_data_attributes
+        {
+          slot: "sidebar-menu-skeleton"
+        }
+      end
+
+      private
+
+      def sidebar_menu_skeleton_base_classes
+        "flex h-8 items-center gap-2 rounded-md px-2"
+      end
+    end

data/app/behaviors/ui/sidebar_menu_sub_behavior.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # MenuSubBehavior
+    #
+    # Shared behavior for SidebarMenuSub component.
+    module UI::SidebarMenuSubBehavior
+      def sidebar_menu_sub_html_attributes
+        {
+          class: sidebar_menu_sub_classes,
+          data: sidebar_menu_sub_data_attributes
+        }
+      end
+
+      def sidebar_menu_sub_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          sidebar_menu_sub_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      def sidebar_menu_sub_data_attributes
+        {
+          slot: "sidebar-menu-sub"
+        }
+      end
+
+      private
+
+      def sidebar_menu_sub_base_classes
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border " \
+        "px-2.5 py-0.5 group-data-[state=collapsed]:group-data-[collapsible=icon]:hidden"
+      end
+    end

data/app/behaviors/ui/sidebar_menu_sub_button_behavior.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # MenuSubButtonBehavior
+    #
+    # Shared behavior for SidebarMenuSubButton component.
+    module UI::SidebarMenuSubButtonBehavior
+      SIZES = {
+        sm: "text-xs",
+        md: "text-sm"
+      }.freeze
+
+      def sidebar_menu_sub_button_html_attributes
+        {
+          class: sidebar_menu_sub_button_classes,
+          data: sidebar_menu_sub_button_data_attributes
+        }
+      end
+
+      def sidebar_menu_sub_button_classes
+        size_value = respond_to?(:size, true) ? size : @size
+        is_active = respond_to?(:active, true) ? active : @active
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+
+        TailwindMerge::Merger.new.merge([
+          sidebar_menu_sub_button_base_classes,
+          SIZES[size_value],
+          is_active ? sidebar_menu_sub_button_active_classes : nil,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      def sidebar_menu_sub_button_data_attributes
+        is_active = respond_to?(:active, true) ? active : @active
+        attrs = {
+          slot: "sidebar-menu-sub-button",
+          size: @size
+        }
+        attrs[:active] = true if is_active
+        attrs
+      end
+
+      private
+
+      def sidebar_menu_sub_button_base_classes
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden " \
+        "rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring " \
+        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground " \
+        "focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground " \
+        "disabled:pointer-events-none disabled:opacity-50 " \
+        "aria-disabled:pointer-events-none aria-disabled:opacity-50 " \
+        "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground"
+      end
+
+      def sidebar_menu_sub_button_active_classes
+        "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+      end
+    end

data/app/behaviors/ui/sidebar_menu_sub_item_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # MenuSubItemBehavior
+    #
+    # Shared behavior for SidebarMenuSubItem component.
+    module UI::SidebarMenuSubItemBehavior
+      def sidebar_menu_sub_item_html_attributes
+        {
+          class: sidebar_menu_sub_item_classes,
+          data: sidebar_menu_sub_item_data_attributes
+        }
+      end
+
+      def sidebar_menu_sub_item_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          sidebar_menu_sub_item_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      def sidebar_menu_sub_item_data_attributes
+        {
+          slot: "sidebar-menu-sub-item"
+        }
+      end
+
+      private
+
+      def sidebar_menu_sub_item_base_classes
+        ""
+      end
+    end

data/app/behaviors/ui/sidebar_provider_behavior.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # SidebarProviderBehavior
+    #
+    # Shared behavior for SidebarProvider component across ERB, ViewComponent, and Phlex implementations.
+    # The SidebarProvider is the root container that manages sidebar state via Stimulus controller.
+    module UI::SidebarProviderBehavior
+      def sidebar_provider_html_attributes
+        {
+          class: sidebar_provider_classes,
+          style: sidebar_provider_style,
+          data: sidebar_provider_data_attributes
+        }
+      end
+
+      def sidebar_provider_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          sidebar_provider_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      def sidebar_provider_data_attributes
+        # Only set collapsible attribute when collapsed (matches shadcn behavior)
+        # This allows CSS selectors like group-has-[[data-collapsible=icon]] to work correctly
+        attrs = {
+          slot: "sidebar-provider",
+          controller: "ui--sidebar",
+          state: @open ? "expanded" : "collapsed",
+          side: @side,
+          ui__sidebar_open_value: @open.to_s,
+          ui__sidebar_collapsible_value: @collapsible,
+          ui__sidebar_side_value: @side,
+          ui__sidebar_cookie_name_value: @cookie_name
+        }
+        attrs[:collapsible] = @collapsible unless @open
+        attrs
+      end
+
+      def sidebar_provider_style
+        [
+          "--sidebar-width: #{@sidebar_width}",
+          "--sidebar-width-mobile: #{@sidebar_width_mobile}",
+          "--sidebar-width-icon: #{@sidebar_width_icon}"
+        ].join("; ")
+      end
+
+      private
+
+      def sidebar_provider_base_classes
+        "group group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar"
+      end
+    end

data/app/behaviors/ui/sidebar_rail_behavior.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # RailBehavior
+    #
+    # Shared behavior for SidebarRail component.
+    module UI::SidebarRailBehavior
+      def sidebar_rail_html_attributes
+        {
+          class: sidebar_rail_classes,
+          data: sidebar_rail_data_attributes,
+          tabindex: "-1",
+          aria: { label: "Toggle Sidebar" }
+        }
+      end
+
+      def sidebar_rail_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          sidebar_rail_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      def sidebar_rail_data_attributes
+        {
+          slot: "sidebar-rail",
+          action: "click->ui--sidebar#toggle"
+        }
+      end
+
+      private
+
+      def sidebar_rail_base_classes
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear " \
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border " \
+        "group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex " \
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize " \
+        "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize " \
+        "group-data-[collapsible=offcanvas]:translate-x-0 " \
+        "group-data-[collapsible=offcanvas]:after:left-full " \
+        "group-data-[collapsible=offcanvas]:hover:bg-sidebar " \
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2 " \
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2"
+      end
+    end

data/app/behaviors/ui/sidebar_separator_behavior.rb

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

data/app/behaviors/ui/sidebar_trigger_behavior.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # TriggerBehavior
+    #
+    # Shared behavior for SidebarTrigger component.
+    module UI::SidebarTriggerBehavior
+      def sidebar_trigger_html_attributes
+        {
+          class: sidebar_trigger_classes,
+          data: sidebar_trigger_data_attributes
+        }
+      end
+
+      def sidebar_trigger_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          sidebar_trigger_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      def sidebar_trigger_data_attributes
+        {
+          slot: "sidebar-trigger",
+          action: "click->ui--sidebar#toggle",
+          ui__sidebar_target: "trigger"
+        }
+      end
+
+      private
+
+      def sidebar_trigger_base_classes
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium " \
+        "ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 " \
+        "focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 " \
+        "hover:bg-accent hover:text-accent-foreground h-7 w-7"
+      end
+    end

data/app/behaviors/ui/slider_behavior.rb

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

data/app/behaviors/ui/slider_range_behavior.rb

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

data/app/behaviors/ui/slider_thumb_behavior.rb

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

data/app/behaviors/ui/slider_track_behavior.rb

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

data/app/behaviors/ui/small_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Small component
+    module UI::SmallBehavior
+      # Base CSS classes for Small
+      def small_base_classes
+        "text-sm font-medium leading-none"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def small_classes
+        TailwindMerge::Merger.new.merge([small_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def small_html_attributes
+        {
+          class: small_classes
+        }
+      end
+    end

data/app/behaviors/ui/sonner_toaster_behavior.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Sonner Toaster component
+    # Provides HTML attributes for the toaster container
+    module UI::SonnerToasterBehavior
+      POSITIONS = %w[top-left top-center top-right bottom-left bottom-center bottom-right].freeze
+      THEMES = %w[light dark system].freeze
+
+      def toaster_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: toaster_classes,
+          data: toaster_data_attributes
+        )
+      end
+
+      def toaster_data_attributes
+        base_data = @attributes&.dig(:data) || {}
+        {
+          controller: "ui--sonner",
+          ui__sonner_position_value: @position,
+          ui__sonner_theme_value: @theme,
+          ui__sonner_rich_colors_value: @rich_colors,
+          ui__sonner_expand_value: @expand,
+          ui__sonner_duration_value: @duration,
+          ui__sonner_close_button_value: @close_button,
+          ui__sonner_visible_toasts_value: @visible_toasts
+        }.compact.merge(base_data)
+      end
+
+      def toaster_classes
+        TailwindMerge::Merger.new.merge(["toaster group", @classes].compact.join(" "))
+      end
+    end

data/app/behaviors/ui/spinner_behavior.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module UI
+  # SpinnerBehavior
+  #
+  # Shared behavior for Spinner component across ERB, ViewComponent, and Phlex implementations.
+  # This module provides consistent size variants and HTML attribute generation.
+  module SpinnerBehavior
+    # Returns HTML attributes for the spinner element
+    def spinner_html_attributes
+      {
+        class: spinner_classes,
+        role: "status",
+        "aria-label": "Loading",
+        data: { slot: "spinner" }
+      }
+    end
+
+    # Returns combined CSS classes for the spinner
+    def spinner_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        spinner_base_classes,
+        spinner_size_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes applied to all spinners
+    def spinner_base_classes
+      "animate-spin"
+    end
+
+    # Size-specific classes based on @size
+    def spinner_size_classes
+      case @size.to_s
+      when "sm"
+        "size-3"
+      when "lg"
+        "size-6"
+      when "xl"
+        "size-8"
+      else # default
+        "size-4"
+      end
+    end
+  end
+end

data/app/behaviors/ui/switch_behavior.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module UI
+  # SwitchBehavior
+  #
+  # Shared behavior for Switch component across ERB, ViewComponent, and Phlex implementations.
+  # This module provides consistent styling and HTML attribute generation for toggle switches.
+  module SwitchBehavior
+  # Returns HTML attributes for the switch button element
+  def switch_html_attributes
+    {
+      class: switch_classes,
+      role: "switch",
+      type: "button",
+      tabindex: @disabled ? -1 : 0,
+      "aria-checked": switch_aria_checked,
+      "data-state": switch_state,
+      "data-slot": "switch",
+      data: switch_data_attributes
+    }.tap do |attrs|
+      if @disabled
+        attrs[:disabled] = true
+        attrs["aria-disabled"] = "true"
+      end
+    end
+  end
+
+  # Returns combined CSS classes for the switch
+  def switch_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      switch_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  # Returns CSS classes for the thumb element
+  def switch_thumb_classes
+    "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+  end
+
+  private
+
+  # Base classes applied to all switches
+  def switch_base_classes
+    "peer data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+  end
+
+  # Returns the switch state (checked or unchecked)
+  def switch_state
+    @checked ? "checked" : "unchecked"
+  end
+
+  # Returns aria-checked attribute value
+  def switch_aria_checked
+    @checked.to_s
+  end
+
+  # Returns data attributes for Stimulus controller
+  def switch_data_attributes
+    {
+      controller: "ui--switch",
+      ui__switch_checked_value: @checked,
+      action: "click->ui--switch#toggle keydown->ui--switch#handleKeydown"
+    }
+  end
+  end
+end

data/app/behaviors/ui/table_behavior.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+    # TableBehavior
+    #
+    # Shared behavior for Table component across ERB, ViewComponent, and Phlex implementations.
+    module UI::TableBehavior
+      def render_table(&content_block)
+        all_attributes = table_html_attributes.deep_merge(@attributes)
+        content_tag(:table, **all_attributes, &content_block)
+      end
+
+      def table_html_attributes
+        { class: table_classes }
+      end
+
+      def table_classes
+        TailwindMerge::Merger.new.merge([
+          table_base_classes,
+          @classes
+        ].compact.join(" "))
+      end
+
+      private
+
+      def table_base_classes
+        "w-full caption-bottom text-sm"
+      end
+    end