fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/sidebar_menu_button_behavior.rb

@@ -2,69 +2,78 @@
 
 require "tailwind_merge"
 
-    # MenuButtonBehavior
-    #
-    # Shared behavior for SidebarMenuButton component.
-    module UI::SidebarMenuButtonBehavior
-      VARIANTS = {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] " \
-                 "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
-      }.freeze
+# UI::SidebarMenuButtonBehavior
+#
+# @ui_component Sidebar Menu Button
+# @ui_description MenuButton - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Sidebar Menu Button - Interactive button within a sidebar menu item. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+#
+module UI::SidebarMenuButtonBehavior
+  VARIANTS = {
+    default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+    outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] " \
+             "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+  }.freeze
 
-      SIZES = {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[state=collapsed]:group-data-[collapsible=icon]:p-0!"
-      }.freeze
+  SIZES = {
+    default: "h-8 text-sm",
+    sm: "h-7 text-xs",
+    lg: "h-12 text-sm group-data-[state=collapsed]:group-data-[collapsible=icon]:p-0!"
+  }.freeze
 
-      def sidebar_menu_button_html_attributes
-        {
-          class: sidebar_menu_button_classes,
-          data: sidebar_menu_button_data_attributes
-        }
-      end
+  def sidebar_menu_button_html_attributes
+    {
+      class: sidebar_menu_button_classes,
+      data: sidebar_menu_button_data_attributes
+    }
+  end
 
-      def sidebar_menu_button_classes
-        variant_value = respond_to?(:variant, true) ? variant : @variant
-        size_value = respond_to?(:size, true) ? size : @size
-        is_active = respond_to?(:active, true) ? active : @active
-        classes_value = respond_to?(:classes, true) ? classes : @classes
+  def sidebar_menu_button_classes
+    variant_value = respond_to?(:variant, true) ? variant : @variant
+    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_button_base_classes,
-          VARIANTS[variant_value],
-          SIZES[size_value],
-          is_active ? sidebar_menu_button_active_classes : nil,
-          classes_value
-        ].compact.join(" "))
-      end
+    TailwindMerge::Merger.new.merge([
+      sidebar_menu_button_base_classes,
+      VARIANTS[variant_value],
+      SIZES[size_value],
+      is_active ? sidebar_menu_button_active_classes : nil,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_menu_button_data_attributes
-        is_active = respond_to?(:active, true) ? active : @active
-        attrs = {
-          slot: "sidebar-menu-button",
-          size: @size
-        }
-        attrs[:active] = true if is_active
-        attrs
-      end
+  def sidebar_menu_button_data_attributes
+    is_active = respond_to?(:active, true) ? active : @active
+    attrs = {
+      slot: "sidebar-menu-button",
+      size: @size
+    }
+    attrs[:active] = true if is_active
+    attrs
+  end
 
-      private
+  private
 
-      def sidebar_menu_button_base_classes
-        "group peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 " \
-        "text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] " \
-        "focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground " \
-        "disabled:pointer-events-none disabled:opacity-50 group-has-[[data-slot=sidebar-menu-action]]/menu-item:pr-8 " \
-        "aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent " \
-        "data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground " \
-        "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground " \
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:size-8! " \
-        "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"
-      end
+  def sidebar_menu_button_base_classes
+    "group peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 " \
+    "text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] " \
+    "focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground " \
+    "disabled:pointer-events-none disabled:opacity-50 group-has-[[data-slot=sidebar-menu-action]]/menu-item:pr-8 " \
+    "aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent " \
+    "data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground " \
+    "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground " \
+    "group-data-[state=collapsed]:group-data-[collapsible=icon]:size-8! " \
+    "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"
+  end
 
-      def sidebar_menu_button_active_classes
-        "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
-      end
-    end
+  def sidebar_menu_button_active_classes
+    "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+  end
+end

data/app/behaviors/ui/sidebar_menu_item_behavior.rb

@@ -2,34 +2,34 @@
 
 require "tailwind_merge"
 
-    # MenuItemBehavior
-    #
-    # Shared behavior for SidebarMenuItem component.
-    module UI::SidebarMenuItemBehavior
-      def sidebar_menu_item_html_attributes
-        {
-          class: sidebar_menu_item_classes,
-          data: sidebar_menu_item_data_attributes
-        }
-      end
+# MenuItemBehavior
+#
+# Shared behavior for SidebarMenuItem component.
+module UI::SidebarMenuItemBehavior
+  def sidebar_menu_item_html_attributes
+    {
+      class: sidebar_menu_item_classes,
+      data: sidebar_menu_item_data_attributes
+    }
+  end
 
-      def sidebar_menu_item_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_menu_item_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_menu_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_menu_item_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_menu_item_data_attributes
-        {
-          slot: "sidebar-menu-item"
-        }
-      end
+  def sidebar_menu_item_data_attributes
+    {
+      slot: "sidebar-menu-item"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_menu_item_base_classes
-        "group/menu-item relative"
-      end
-    end
+  def sidebar_menu_item_base_classes
+    "group/menu-item relative"
+  end
+end

data/app/behaviors/ui/sidebar_menu_skeleton_behavior.rb

@@ -2,34 +2,41 @@
 
 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
+# UI::SidebarMenuSkeletonBehavior
+#
+# @ui_component Sidebar Menu Skeleton
+# @ui_description MenuSkeleton - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Sidebar Menu Skeleton - Loading skeleton for sidebar menu items. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+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_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
+  def sidebar_menu_skeleton_data_attributes
+    {
+      slot: "sidebar-menu-skeleton"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_menu_skeleton_base_classes
-        "flex h-8 items-center gap-2 rounded-md px-2"
-      end
-    end
+  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

@@ -2,35 +2,35 @@
 
 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
+# 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_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
+  def sidebar_menu_sub_data_attributes
+    {
+      slot: "sidebar-menu-sub"
+    }
+  end
 
-      private
+  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
+  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

@@ -2,58 +2,67 @@
 
 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
+# UI::SidebarMenuSubButtonBehavior
+#
+# @ui_component Sidebar Menu Sub Button
+# @ui_description MenuSubButton - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Sidebar Menu Sub Button - Interactive button within a sidebar submenu item. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+#
+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

@@ -2,34 +2,34 @@
 
 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
+# 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_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
+  def sidebar_menu_sub_item_data_attributes
+    {
+      slot: "sidebar-menu-sub-item"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_menu_sub_item_base_classes
-        ""
-      end
-    end
+  def sidebar_menu_sub_item_base_classes
+    ""
+  end
+end

data/app/behaviors/ui/sidebar_provider_behavior.rb

@@ -2,55 +2,61 @@
 
 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
+# UI::SidebarProviderBehavior
+#
+# @ui_component Sidebar Provider
+# @ui_description SidebarProvider - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Sidebar Provider - Root container for sidebar that manages state via Stimulus controller. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+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_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_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
+  def sidebar_provider_style
+    [
+      "--sidebar-width: #{@sidebar_width}",
+      "--sidebar-width-mobile: #{@sidebar_width_mobile}",
+      "--sidebar-width-icon: #{@sidebar_width_icon}"
+    ].join("; ")
+  end
 
-      private
+  private
 
-      def sidebar_provider_base_classes
-        "group group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar"
-      end
-    end
+  def sidebar_provider_base_classes
+    "group group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar"
+  end
+end