fernandes-ui 0.1.0

data/app/behaviors/ui/sidebar_behavior.rb

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

data/app/behaviors/ui/sidebar_content_behavior.rb

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

data/app/behaviors/ui/sidebar_footer_behavior.rb

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

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

data/app/behaviors/ui/sidebar_group_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      private
+
+      def sidebar_group_base_classes
+        "relative flex w-full min-w-0 flex-col p-2"
+      end
+    end

data/app/behaviors/ui/sidebar_group_content_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      private
+
+      def sidebar_group_content_base_classes
+        "w-full text-sm"
+      end
+    end

data/app/behaviors/ui/sidebar_group_label_behavior.rb

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

data/app/behaviors/ui/sidebar_header_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      private
+
+      def sidebar_header_base_classes
+        "flex flex-col gap-2 p-2"
+      end
+    end

data/app/behaviors/ui/sidebar_input_behavior.rb

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

data/app/behaviors/ui/sidebar_inset_behavior.rb

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

data/app/behaviors/ui/sidebar_menu_action_behavior.rb

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

data/app/behaviors/ui/sidebar_menu_badge_behavior.rb

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

data/app/behaviors/ui/sidebar_menu_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      private
+
+      def sidebar_menu_base_classes
+        "flex w-full min-w-0 flex-col gap-1"
+      end
+    end

data/app/behaviors/ui/sidebar_menu_button_behavior.rb

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

data/app/behaviors/ui/sidebar_menu_item_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      private
+
+      def sidebar_menu_item_base_classes
+        "group/menu-item relative"
+      end
+    end