fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/sheet_header_behavior.rb

@@ -2,26 +2,26 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Sheet Header component
-    module UI::SheetHeaderBehavior
-      # Returns HTML attributes for the sheet header
-      def sheet_header_html_attributes
-        {
-          class: sheet_header_classes
-        }
-      end
+# Shared behavior for Sheet Header component
+module UI::SheetHeaderBehavior
+  # Returns HTML attributes for the sheet header
+  def sheet_header_html_attributes
+    {
+      class: sheet_header_classes
+    }
+  end
 
-      # Returns combined CSS classes for the sheet header
-      def sheet_header_classes
-        TailwindMerge::Merger.new.merge([
-          sheet_header_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the sheet header
+  def sheet_header_classes
+    TailwindMerge::Merger.new.merge([
+      sheet_header_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      # Base classes applied to sheet header
-      # Different from Dialog: uses gap-1.5 and p-4
-      def sheet_header_base_classes
-        "flex flex-col gap-1.5 p-4"
-      end
-    end
+  # Base classes applied to sheet header
+  # Different from Dialog: uses gap-1.5 and p-4
+  def sheet_header_base_classes
+    "flex flex-col gap-1.5 p-4"
+  end
+end

data/app/behaviors/ui/sheet_overlay_behavior.rb

@@ -2,75 +2,75 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Sheet Overlay component
-    # Handles backdrop/overlay styling and attributes
-    module UI::SheetOverlayBehavior
-      # Base CSS classes for overlay backdrop
-      # data-[initial] prevents exit animation on page load
-      def sheet_overlay_base_classes
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none data-[initial]:animate-none data-[initial]:opacity-0 fixed inset-0 z-50 bg-black/50"
-      end
+# Shared behavior for Sheet Overlay component
+# Handles backdrop/overlay styling and attributes
+module UI::SheetOverlayBehavior
+  # Base CSS classes for overlay backdrop
+  # data-[initial] prevents exit animation on page load
+  def sheet_overlay_base_classes
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none data-[initial]:animate-none data-[initial]:opacity-0 fixed inset-0 z-50 bg-black/50"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def sheet_overlay_classes
-        TailwindMerge::Merger.new.merge([sheet_overlay_base_classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def sheet_overlay_classes
+    TailwindMerge::Merger.new.merge([sheet_overlay_base_classes].compact.join(" "))
+  end
 
-      # Container wrapper classes
-      # Use data-[initial]:invisible to hide on page load without animations
-      # After first open, data-initial is removed and animations work normally
-      def sheet_overlay_container_base_classes
-        "data-[initial]:invisible data-[state=closed]:pointer-events-none data-[state=open]:pointer-events-auto fixed inset-0 z-50"
-      end
+  # Container wrapper classes
+  # Use data-[initial]:invisible to hide on page load without animations
+  # After first open, data-initial is removed and animations work normally
+  def sheet_overlay_container_base_classes
+    "data-[initial]:invisible data-[state=closed]:pointer-events-none data-[state=open]:pointer-events-auto fixed inset-0 z-50"
+  end
 
-      # Merge container base classes with custom classes
-      def sheet_overlay_container_classes
-        TailwindMerge::Merger.new.merge([sheet_overlay_container_base_classes, @classes].compact.join(" "))
-      end
+  # Merge container base classes with custom classes
+  def sheet_overlay_container_classes
+    TailwindMerge::Merger.new.merge([sheet_overlay_container_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for container
-      def sheet_overlay_container_data_attributes
-        {
-          ui__dialog_target: "container"
-        }
-      end
+  # Data attributes for container
+  def sheet_overlay_container_data_attributes
+    {
+      ui__dialog_target: "container"
+    }
+  end
 
-      # Data attributes for overlay backdrop
-      def sheet_overlay_data_attributes
-        {
-          ui__dialog_target: "overlay",
-          action: "click->ui--dialog#closeOnOverlayClick"
-        }
-      end
+  # Data attributes for overlay backdrop
+  def sheet_overlay_data_attributes
+    {
+      ui__dialog_target: "overlay",
+      action: "click->ui--dialog#closeOnOverlayClick"
+    }
+  end
 
-      # Merge user-provided data attributes for container
-      def merged_sheet_overlay_container_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(sheet_overlay_container_data_attributes)
-      end
+  # Merge user-provided data attributes for container
+  def merged_sheet_overlay_container_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(sheet_overlay_container_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for container wrapper
-      def sheet_overlay_container_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        attrs = base_attrs.merge(
-          class: sheet_overlay_container_classes,
-          "data-state": @open ? "open" : "closed",
-          data: merged_sheet_overlay_container_data_attributes
-        )
-        # Add data-initial when closed to prevent exit animations on page load
-        attrs["data-initial"] = "" unless @open
-        attrs
-      end
+  # Build complete HTML attributes hash for container wrapper
+  def sheet_overlay_container_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    attrs = base_attrs.merge(
+      class: sheet_overlay_container_classes,
+      "data-state": @open ? "open" : "closed",
+      data: merged_sheet_overlay_container_data_attributes
+    )
+    # Add data-initial when closed to prevent exit animations on page load
+    attrs["data-initial"] = "" unless @open
+    attrs
+  end
 
-      # Build complete HTML attributes hash for overlay backdrop
-      def sheet_overlay_html_attributes
-        attrs = {
-          class: sheet_overlay_classes,
-          "data-state": @open ? "open" : "closed",
-          data: sheet_overlay_data_attributes
-        }
-        # Add data-initial when closed to prevent exit animations on page load
-        attrs["data-initial"] = "" unless @open
-        attrs
-      end
-    end
+  # Build complete HTML attributes hash for overlay backdrop
+  def sheet_overlay_html_attributes
+    attrs = {
+      class: sheet_overlay_classes,
+      "data-state": @open ? "open" : "closed",
+      data: sheet_overlay_data_attributes
+    }
+    # Add data-initial when closed to prevent exit animations on page load
+    attrs["data-initial"] = "" unless @open
+    attrs
+  end
+end

data/app/behaviors/ui/sidebar_behavior.rb

@@ -2,87 +2,102 @@
 
 require "tailwind_merge"
 
-    # SidebarBehavior
-    #
-    # Shared behavior for Sidebar component across ERB, ViewComponent, and Phlex implementations.
-    # The Sidebar is the main container for sidebar content with variant and collapsible support.
-    module UI::SidebarBehavior
-      def sidebar_html_attributes
-        {
-          class: sidebar_classes,
-          data: sidebar_data_attributes
-        }
-      end
+# UI::SidebarBehavior
+#
+# @ui_component Sidebar
+# @ui_description Sidebar - Phlex implementation
+# @ui_category navigation
+#
+# @ui_anatomy Sidebar - Main sidebar container with support for variants and collapsible modes. (required)
+# @ui_anatomy Content - Scrollable content area in the middle of the sidebar. (required)
+# @ui_anatomy Footer - Fixed footer section at the bottom of the sidebar.
+# @ui_anatomy Group - Container for grouping related sidebar items.
+# @ui_anatomy Group Action - Action button within a sidebar group header.
+# @ui_anatomy Group Content - Container for content within a sidebar group. (required)
+# @ui_anatomy Header - Fixed header section at the top of the sidebar.
+# @ui_anatomy Input - Input field styled for sidebar usage.
+# @ui_anatomy Separator - Visual divider within the sidebar.
+# @ui_anatomy Trigger - Button that toggles the sidebar open/closed. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::SidebarBehavior
+  def sidebar_html_attributes
+    {
+      class: sidebar_classes,
+      data: sidebar_data_attributes
+    }
+  end
 
-      def sidebar_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_base_classes,
-          sidebar_variant_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_base_classes,
+      sidebar_variant_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_data_attributes
-        {
-          slot: "sidebar",
-          variant: @variant,
-          side: @side,
-          collapsible: @collapsible,
-          ui__sidebar_target: "sidebar"
-        }
-      end
+  def sidebar_data_attributes
+    {
+      slot: "sidebar",
+      variant: @variant,
+      side: @side,
+      collapsible: @collapsible,
+      ui__sidebar_target: "sidebar"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_base_classes
-        # Base classes for the sidebar container
-        # Using group to allow child components to respond to sidebar state
-        "group peer"
-      end
+  def sidebar_base_classes
+    # Base classes for the sidebar container
+    # Using group to allow child components to respond to sidebar state
+    "group peer"
+  end
 
-      def sidebar_variant_classes
-        case @variant.to_s
-        when "floating"
-          sidebar_floating_classes
-        when "inset"
-          sidebar_inset_classes
-        else
-          sidebar_default_classes
-        end
-      end
+  def sidebar_variant_classes
+    case @variant.to_s
+    when "floating"
+      sidebar_floating_classes
+    when "inset"
+      sidebar_inset_classes
+    else
+      sidebar_default_classes
+    end
+  end
 
-      def sidebar_default_classes
-        # Default sidebar variant - fixed position with border
-        # When expanded: full width
-        # When collapsed + icon mode: icon width
-        # When collapsed + offcanvas mode: width 0
-        "hidden md:flex flex-col bg-sidebar text-sidebar-foreground " \
-        "w-[var(--sidebar-width)] h-svh border-r border-sidebar-border " \
-        "transition-[width] duration-[var(--duration-sidebar)] ease-[var(--ease-sidebar)] " \
-        "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:w-0 " \
-        "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:border-r-0 " \
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] " \
-        "group-data-[side=right]:border-l group-data-[side=right]:border-r-0"
-      end
+  def sidebar_default_classes
+    # Default sidebar variant - fixed position with border
+    # When expanded: full width
+    # When collapsed + icon mode: icon width
+    # When collapsed + offcanvas mode: width 0
+    "hidden md:flex flex-col bg-sidebar text-sidebar-foreground " \
+    "w-[var(--sidebar-width)] h-svh border-r border-sidebar-border " \
+    "transition-[width] duration-[var(--duration-sidebar)] ease-[var(--ease-sidebar)] " \
+    "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:w-0 " \
+    "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:border-r-0 " \
+    "group-data-[state=collapsed]:group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] " \
+    "group-data-[side=right]:border-l group-data-[side=right]:border-r-0"
+  end
 
-      def sidebar_floating_classes
-        # Floating variant - with margin, rounded corners, and shadow
-        "hidden md:flex flex-col bg-sidebar text-sidebar-foreground " \
-        "w-[var(--sidebar-width)] h-[calc(100svh-calc(var(--spacing)*4))] " \
-        "m-2 rounded-lg border border-sidebar-border shadow " \
-        "transition-[width] duration-[var(--duration-sidebar)] ease-[var(--ease-sidebar)] " \
-        "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:w-0 " \
-        "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:border-0 " \
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
-      end
+  def sidebar_floating_classes
+    # Floating variant - with margin, rounded corners, and shadow
+    "hidden md:flex flex-col bg-sidebar text-sidebar-foreground " \
+    "w-[var(--sidebar-width)] h-[calc(100svh-calc(var(--spacing)*4))] " \
+    "m-2 rounded-lg border border-sidebar-border shadow " \
+    "transition-[width] duration-[var(--duration-sidebar)] ease-[var(--ease-sidebar)] " \
+    "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:w-0 " \
+    "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:border-0 " \
+    "group-data-[state=collapsed]:group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
+  end
 
-      def sidebar_inset_classes
-        # Inset variant - appears inset within the layout
-        "hidden md:flex flex-col bg-sidebar text-sidebar-foreground " \
-        "w-[var(--sidebar-width)] h-svh " \
-        "transition-[width] duration-[var(--duration-sidebar)] ease-[var(--ease-sidebar)] " \
-        "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:w-0 " \
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
-      end
-    end
+  def sidebar_inset_classes
+    # Inset variant - appears inset within the layout
+    "hidden md:flex flex-col bg-sidebar text-sidebar-foreground " \
+    "w-[var(--sidebar-width)] h-svh " \
+    "transition-[width] duration-[var(--duration-sidebar)] ease-[var(--ease-sidebar)] " \
+    "group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:w-0 " \
+    "group-data-[state=collapsed]:group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
+  end
+end

data/app/behaviors/ui/sidebar_content_behavior.rb

@@ -2,35 +2,35 @@
 
 require "tailwind_merge"
 
-    # ContentBehavior
-    #
-    # Shared behavior for SidebarContent component.
-    module UI::SidebarContentBehavior
-      def sidebar_content_html_attributes
-        {
-          class: sidebar_content_classes,
-          data: sidebar_content_data_attributes
-        }
-      end
+# ContentBehavior
+#
+# Shared behavior for SidebarContent component.
+module UI::SidebarContentBehavior
+  def sidebar_content_html_attributes
+    {
+      class: sidebar_content_classes,
+      data: sidebar_content_data_attributes
+    }
+  end
 
-      def sidebar_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_content_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_content_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_content_data_attributes
-        {
-          slot: "sidebar-content"
-        }
-      end
+  def sidebar_content_data_attributes
+    {
+      slot: "sidebar-content"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_content_base_classes
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto " \
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:overflow-hidden"
-      end
-    end
+  def sidebar_content_base_classes
+    "flex min-h-0 flex-1 flex-col gap-2 overflow-auto " \
+    "group-data-[state=collapsed]:group-data-[collapsible=icon]:overflow-hidden"
+  end
+end

data/app/behaviors/ui/sidebar_footer_behavior.rb

@@ -2,34 +2,34 @@
 
 require "tailwind_merge"
 
-    # FooterBehavior
-    #
-    # Shared behavior for SidebarFooter component.
-    module UI::SidebarFooterBehavior
-      def sidebar_footer_html_attributes
-        {
-          class: sidebar_footer_classes,
-          data: sidebar_footer_data_attributes
-        }
-      end
+# FooterBehavior
+#
+# Shared behavior for SidebarFooter component.
+module UI::SidebarFooterBehavior
+  def sidebar_footer_html_attributes
+    {
+      class: sidebar_footer_classes,
+      data: sidebar_footer_data_attributes
+    }
+  end
 
-      def sidebar_footer_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_footer_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_footer_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_footer_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_footer_data_attributes
-        {
-          slot: "sidebar-footer"
-        }
-      end
+  def sidebar_footer_data_attributes
+    {
+      slot: "sidebar-footer"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_footer_base_classes
-        "flex flex-col gap-2 p-2 mt-auto"
-      end
-    end
+  def sidebar_footer_base_classes
+    "flex flex-col gap-2 p-2 mt-auto"
+  end
+end

data/app/behaviors/ui/sidebar_group_action_behavior.rb

@@ -2,39 +2,39 @@
 
 require "tailwind_merge"
 
-    # GroupActionBehavior
-    #
-    # Shared behavior for SidebarGroupAction component.
-    module UI::SidebarGroupActionBehavior
-      def sidebar_group_action_html_attributes
-        {
-          class: sidebar_group_action_classes,
-          data: sidebar_group_action_data_attributes
-        }
-      end
+# GroupActionBehavior
+#
+# Shared behavior for SidebarGroupAction component.
+module UI::SidebarGroupActionBehavior
+  def sidebar_group_action_html_attributes
+    {
+      class: sidebar_group_action_classes,
+      data: sidebar_group_action_data_attributes
+    }
+  end
 
-      def sidebar_group_action_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_group_action_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_group_action_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_group_action_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_group_action_data_attributes
-        {
-          slot: "sidebar-group-action"
-        }
-      end
+  def sidebar_group_action_data_attributes
+    {
+      slot: "sidebar-group-action"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_group_action_base_classes
-        "absolute right-3 top-3.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 [&>svg]:size-4 [&>svg]:shrink-0 " \
-        "after:absolute after:-inset-2 after:md:hidden " \
-        "group-data-[state=collapsed]:group-data-[collapsible=icon]:hidden"
-      end
-    end
+  def sidebar_group_action_base_classes
+    "absolute right-3 top-3.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 [&>svg]:size-4 [&>svg]:shrink-0 " \
+    "after:absolute after:-inset-2 after:md:hidden " \
+    "group-data-[state=collapsed]:group-data-[collapsible=icon]:hidden"
+  end
+end

data/app/behaviors/ui/sidebar_group_behavior.rb

@@ -2,34 +2,34 @@
 
 require "tailwind_merge"
 
-    # GroupBehavior
-    #
-    # Shared behavior for SidebarGroup component.
-    module UI::SidebarGroupBehavior
-      def sidebar_group_html_attributes
-        {
-          class: sidebar_group_classes,
-          data: sidebar_group_data_attributes
-        }
-      end
+# GroupBehavior
+#
+# Shared behavior for SidebarGroup component.
+module UI::SidebarGroupBehavior
+  def sidebar_group_html_attributes
+    {
+      class: sidebar_group_classes,
+      data: sidebar_group_data_attributes
+    }
+  end
 
-      def sidebar_group_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          sidebar_group_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def sidebar_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      sidebar_group_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def sidebar_group_data_attributes
-        {
-          slot: "sidebar-group"
-        }
-      end
+  def sidebar_group_data_attributes
+    {
+      slot: "sidebar-group"
+    }
+  end
 
-      private
+  private
 
-      def sidebar_group_base_classes
-        "relative flex w-full min-w-0 flex-col p-2"
-      end
-    end
+  def sidebar_group_base_classes
+    "relative flex w-full min-w-0 flex-col p-2"
+  end
+end