fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/sidebar_group_content_behavior.rb

@@ -2,34 +2,34 @@
 
 require "tailwind_merge"
 
-    # GroupContentBehavior
-    #
-    # Shared behavior for SidebarGroupContent component.
-    module UI::SidebarGroupContentBehavior
-      def sidebar_group_content_html_attributes
-        {
-          class: sidebar_group_content_classes,
-          data: sidebar_group_content_data_attributes
-        }
-      end
+# GroupContentBehavior
+#
+# Shared behavior for SidebarGroupContent component.
+module UI::SidebarGroupContentBehavior
+  def sidebar_group_content_html_attributes
+    {
+      class: sidebar_group_content_classes,
+      data: sidebar_group_content_data_attributes
+    }
+  end
 
-      def sidebar_group_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_group_content_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_group_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_group_content_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_group_content_data_attributes
-        {
-          slot: "sidebar-group-content"
-        }
-      end
+  def sidebar_group_content_data_attributes
+    {
+      slot: "sidebar-group-content"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_group_content_base_classes
-        "w-full text-sm"
-      end
-    end
+  def sidebar_group_content_base_classes
+    "w-full text-sm"
+  end
+end

data/app/behaviors/ui/sidebar_group_label_behavior.rb

@@ -2,38 +2,38 @@
 
 require "tailwind_merge"
 
-    # GroupLabelBehavior
-    #
-    # Shared behavior for SidebarGroupLabel component.
-    module UI::SidebarGroupLabelBehavior
-      def sidebar_group_label_html_attributes
-        {
-          class: sidebar_group_label_classes,
-          data: sidebar_group_label_data_attributes
-        }
-      end
+# GroupLabelBehavior
+#
+# Shared behavior for SidebarGroupLabel component.
+module UI::SidebarGroupLabelBehavior
+  def sidebar_group_label_html_attributes
+    {
+      class: sidebar_group_label_classes,
+      data: sidebar_group_label_data_attributes
+    }
+  end
 
-      def sidebar_group_label_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_group_label_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_group_label_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_group_label_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_group_label_data_attributes
-        {
-          slot: "sidebar-group-label"
-        }
-      end
+  def sidebar_group_label_data_attributes
+    {
+      slot: "sidebar-group-label"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_group_label_base_classes
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium " \
-        "text-sidebar-foreground/70 outline-none ring-sidebar-ring " \
-        "transition-[margin,opacity] duration-200 ease-linear " \
-        "focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 " \
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:-mt-8 group-data-[state=collapsed]:group-data-[collapsible=icon]:opacity-0"
-      end
-    end
+  def sidebar_group_label_base_classes
+    "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium " \
+    "text-sidebar-foreground/70 outline-none ring-sidebar-ring " \
+    "transition-[margin,opacity] duration-200 ease-linear " \
+    "focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 " \
+    "group-data-[state=collapsed]:group-data-[collapsible=icon]:-mt-8 group-data-[state=collapsed]:group-data-[collapsible=icon]:opacity-0"
+  end
+end

data/app/behaviors/ui/sidebar_header_behavior.rb

@@ -2,34 +2,34 @@
 
 require "tailwind_merge"
 
-    # HeaderBehavior
-    #
-    # Shared behavior for SidebarHeader component.
-    module UI::SidebarHeaderBehavior
-      def sidebar_header_html_attributes
-        {
-          class: sidebar_header_classes,
-          data: sidebar_header_data_attributes
-        }
-      end
+# HeaderBehavior
+#
+# Shared behavior for SidebarHeader component.
+module UI::SidebarHeaderBehavior
+  def sidebar_header_html_attributes
+    {
+      class: sidebar_header_classes,
+      data: sidebar_header_data_attributes
+    }
+  end
 
-      def sidebar_header_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_header_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_header_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_header_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_header_data_attributes
-        {
-          slot: "sidebar-header"
-        }
-      end
+  def sidebar_header_data_attributes
+    {
+      slot: "sidebar-header"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_header_base_classes
-        "flex flex-col gap-2 p-2"
-      end
-    end
+  def sidebar_header_base_classes
+    "flex flex-col gap-2 p-2"
+  end
+end

data/app/behaviors/ui/sidebar_input_behavior.rb

@@ -2,35 +2,35 @@
 
 require "tailwind_merge"
 
-    # InputBehavior
-    #
-    # Shared behavior for SidebarInput component.
-    module UI::SidebarInputBehavior
-      def sidebar_input_html_attributes
-        {
-          class: sidebar_input_classes,
-          data: sidebar_input_data_attributes
-        }
-      end
+# InputBehavior
+#
+# Shared behavior for SidebarInput component.
+module UI::SidebarInputBehavior
+  def sidebar_input_html_attributes
+    {
+      class: sidebar_input_classes,
+      data: sidebar_input_data_attributes
+    }
+  end
 
-      def sidebar_input_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_input_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_input_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_input_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_input_data_attributes
-        {
-          slot: "sidebar-input"
-        }
-      end
+  def sidebar_input_data_attributes
+    {
+      slot: "sidebar-input"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_input_base_classes
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 " \
-        "focus-visible:ring-sidebar-ring"
-      end
-    end
+  def sidebar_input_base_classes
+    "h-8 w-full bg-background shadow-none focus-visible:ring-2 " \
+    "focus-visible:ring-sidebar-ring"
+  end
+end

data/app/behaviors/ui/sidebar_inset_behavior.rb

@@ -2,38 +2,44 @@
 
 require "tailwind_merge"
 
-    # SidebarInsetBehavior
-    #
-    # Shared behavior for SidebarInset component.
-    # The SidebarInset is the main content area that sits alongside the sidebar.
-    module UI::SidebarInsetBehavior
-      def sidebar_inset_html_attributes
-        {
-          class: sidebar_inset_classes,
-          data: sidebar_inset_data_attributes
-        }
-      end
+# UI::SidebarInsetBehavior
+#
+# @ui_component Sidebar Inset
+# @ui_description SidebarInset - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Sidebar Inset - Main content area that sits alongside the sidebar. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::SidebarInsetBehavior
+  def sidebar_inset_html_attributes
+    {
+      class: sidebar_inset_classes,
+      data: sidebar_inset_data_attributes
+    }
+  end
 
-      def sidebar_inset_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_inset_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_inset_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_inset_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_inset_data_attributes
-        {
-          slot: "sidebar-inset"
-        }
-      end
+  def sidebar_inset_data_attributes
+    {
+      slot: "sidebar-inset"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_inset_base_classes
-        "relative flex min-h-svh flex-1 flex-col bg-background " \
-        "peer-data-[variant=inset]:min-h-[calc(100svh-calc(var(--spacing)*4))] " \
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 " \
-        "md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow"
-      end
-    end
+  def sidebar_inset_base_classes
+    "relative flex min-h-svh flex-1 flex-col bg-background " \
+    "peer-data-[variant=inset]:min-h-[calc(100svh-calc(var(--spacing)*4))] " \
+    "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 " \
+    "md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow"
+  end
+end

data/app/behaviors/ui/sidebar_menu_action_behavior.rb

@@ -2,48 +2,48 @@
 
 require "tailwind_merge"
 
-    # MenuActionBehavior
-    #
-    # Shared behavior for SidebarMenuAction component.
-    module UI::SidebarMenuActionBehavior
-      def sidebar_menu_action_html_attributes
-        {
-          class: sidebar_menu_action_classes,
-          data: sidebar_menu_action_data_attributes
-        }
-      end
-
-      def sidebar_menu_action_classes
-        show_on_hover = respond_to?(:show_on_hover, true) ? show_on_hover : @show_on_hover
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-
-        TailwindMerge::Merger.new.merge([
-          sidebar_menu_action_base_classes,
-          show_on_hover ? sidebar_menu_action_show_on_hover_classes : nil,
-          classes_value
-        ].compact.join(" "))
-      end
-
-      def sidebar_menu_action_data_attributes
-        {
-          slot: "sidebar-menu-action"
-        }
-      end
-
-      private
-
-      def sidebar_menu_action_base_classes
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center " \
-        "rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring " \
-        "transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground " \
-        "focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground " \
-        "[&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden " \
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:hidden"
-      end
-
-      def sidebar_menu_action_show_on_hover_classes
-        "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 " \
-        "data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground " \
-        "md:opacity-0"
-      end
-    end
+# MenuActionBehavior
+#
+# Shared behavior for SidebarMenuAction component.
+module UI::SidebarMenuActionBehavior
+  def sidebar_menu_action_html_attributes
+    {
+      class: sidebar_menu_action_classes,
+      data: sidebar_menu_action_data_attributes
+    }
+  end
+
+  def sidebar_menu_action_classes
+    show_on_hover = respond_to?(:show_on_hover, true) ? show_on_hover : @show_on_hover
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+
+    TailwindMerge::Merger.new.merge([
+      sidebar_menu_action_base_classes,
+      show_on_hover ? sidebar_menu_action_show_on_hover_classes : nil,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  def sidebar_menu_action_data_attributes
+    {
+      slot: "sidebar-menu-action"
+    }
+  end
+
+  private
+
+  def sidebar_menu_action_base_classes
+    "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center " \
+    "rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring " \
+    "transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground " \
+    "focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground " \
+    "[&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden " \
+    "group-data-[state=collapsed]:group-data-[collapsible=icon]:hidden"
+  end
+
+  def sidebar_menu_action_show_on_hover_classes
+    "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 " \
+    "data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground " \
+    "md:opacity-0"
+  end
+end

data/app/behaviors/ui/sidebar_menu_badge_behavior.rb

@@ -2,38 +2,45 @@
 
 require "tailwind_merge"
 
-    # MenuBadgeBehavior
-    #
-    # Shared behavior for SidebarMenuBadge component.
-    module UI::SidebarMenuBadgeBehavior
-      def sidebar_menu_badge_html_attributes
-        {
-          class: sidebar_menu_badge_classes,
-          data: sidebar_menu_badge_data_attributes
-        }
-      end
+# UI::SidebarMenuBadgeBehavior
+#
+# @ui_component Sidebar Menu Badge
+# @ui_description MenuBadge - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Sidebar Menu Badge - Badge that appears at the end of a menu button. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::SidebarMenuBadgeBehavior
+  def sidebar_menu_badge_html_attributes
+    {
+      class: sidebar_menu_badge_classes,
+      data: sidebar_menu_badge_data_attributes
+    }
+  end
 
-      def sidebar_menu_badge_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_menu_badge_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_menu_badge_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_menu_badge_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_menu_badge_data_attributes
-        {
-          slot: "sidebar-menu-badge"
-        }
-      end
+  def sidebar_menu_badge_data_attributes
+    {
+      slot: "sidebar-menu-badge"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_menu_badge_base_classes
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none " \
-        "items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums " \
-        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground " \
-        "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground " \
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:hidden"
-      end
-    end
+  def sidebar_menu_badge_base_classes
+    "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none " \
+    "items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums " \
+    "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground " \
+    "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground " \
+    "group-data-[state=collapsed]:group-data-[collapsible=icon]:hidden"
+  end
+end

data/app/behaviors/ui/sidebar_menu_behavior.rb

@@ -2,34 +2,45 @@
 
 require "tailwind_merge"
 
-    # MenuBehavior
-    #
-    # Shared behavior for SidebarMenu component.
-    module UI::SidebarMenuBehavior
-      def sidebar_menu_html_attributes
-        {
-          class: sidebar_menu_classes,
-          data: sidebar_menu_data_attributes
-        }
-      end
+# UI::SidebarMenuBehavior
+#
+# @ui_component Sidebar Menu
+# @ui_description Menu - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Sidebar Menu - List container for sidebar menu items. (required)
+# @ui_anatomy Action - Action button within a sidebar menu item, appears on hover/focus.
+# @ui_anatomy Item - List item container for a sidebar menu entry.
+# @ui_anatomy Sub - Nested submenu container for hierarchical navigation.
+# @ui_anatomy Sub Item - List item container for a sidebar submenu entry.
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::SidebarMenuBehavior
+  def sidebar_menu_html_attributes
+    {
+      class: sidebar_menu_classes,
+      data: sidebar_menu_data_attributes
+    }
+  end
 
-      def sidebar_menu_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_menu_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_menu_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_menu_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_menu_data_attributes
-        {
-          slot: "sidebar-menu"
-        }
-      end
+  def sidebar_menu_data_attributes
+    {
+      slot: "sidebar-menu"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_menu_base_classes
-        "flex w-full min-w-0 flex-col gap-1"
-      end
-    end
+  def sidebar_menu_base_classes
+    "flex w-full min-w-0 flex-col gap-1"
+  end
+end