fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/carousel_previous_behavior.rb

@@ -2,38 +2,38 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Carousel Previous button
-    module UI::CarouselPreviousBehavior
-      # Base CSS classes for previous button (default horizontal positioning)
-      def carousel_previous_base_classes
-        "absolute size-8 rounded-lg top-1/2 -translate-y-1/2 -left-12"
-      end
+# Shared behavior for Carousel Previous button
+module UI::CarouselPreviousBehavior
+  # Base CSS classes for previous button (default horizontal positioning)
+  def carousel_previous_base_classes
+    "absolute size-8 !rounded-full top-1/2 -translate-y-1/2 -left-12"
+  end
 
-      # Merge base classes with custom classes
-      def carousel_previous_classes
-        TailwindMerge::Merger.new.merge([carousel_previous_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes
+  def carousel_previous_classes
+    TailwindMerge::Merger.new.merge([carousel_previous_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for Stimulus action
-      def carousel_previous_data_attributes
-        {
-          action: "click->ui--carousel#scrollPrev",
-          ui__carousel_target: "prevButton"
-        }
-      end
+  # Data attributes for Stimulus action
+  def carousel_previous_data_attributes
+    {
+      action: "click->ui--carousel#scrollPrev",
+      ui__carousel_target: "prevButton"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_carousel_previous_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(carousel_previous_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_carousel_previous_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(carousel_previous_data_attributes)
+  end
 
-      # Build complete HTML attributes hash (without class, which is handled separately)
-      def carousel_previous_html_attributes
-        base_attrs = @attributes&.except(:data, :class) || {}
-        base_attrs.merge(
-          "aria-label": "Previous slide",
-          data: merged_carousel_previous_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash (without class, which is handled separately)
+  def carousel_previous_html_attributes
+    base_attrs = @attributes&.except(:data, :class) || {}
+    base_attrs.merge(
+      "aria-label": "Previous slide",
+      data: merged_carousel_previous_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/checkbox_behavior.rb

@@ -1,48 +1,64 @@
 # frozen_string_literal: true
 
-module UI
-  # Checkbox Behavior - Shared logic for checkbox component across ERB, ViewComponent, and Phlex
-  module CheckboxBehavior
-    def checkbox_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        type: "checkbox",
-        class: checkbox_classes,
-        name: @name,
-        id: checkbox_id,
-        value: @value,
-        checked: (@checked ? true : nil),
-        disabled: (@disabled ? true : nil),
-        required: (@required ? true : nil),
-        data: checkbox_data_attributes,
-        "aria-checked": @checked ? "true" : "false"
-      }.merge(attributes_value).compact
-    end
+# UI::CheckboxBehavior
+#
+# @ui_component Checkbox
+# @ui_category forms
+#
+# @ui_anatomy Checkbox - Root checkbox element (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+#
+# @ui_aria_pattern Checkbox
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+# @ui_aria_attr aria-checked
+#
+# @ui_related switch
+# @ui_related toggle
+# @ui_related radio_button
+#
+module UI::CheckboxBehavior
+  def checkbox_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      type: "checkbox",
+      class: checkbox_classes,
+      name: @name,
+      id: checkbox_id,
+      value: @value,
+      checked: (@checked ? true : nil),
+      disabled: (@disabled ? true : nil),
+      required: (@required ? true : nil),
+      data: checkbox_data_attributes,
+      "aria-checked": @checked ? "true" : "false"
+    }.merge(attributes_value).compact
+  end
 
-    def checkbox_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        checkbox_base_classes,
-        classes_value
+  def checkbox_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      checkbox_base_classes,
+      classes_value
 
-      ].compact.join(" "))
-    end
+    ].compact.join(" "))
+  end
 
-    def checkbox_data_attributes
-      {
-        controller: "ui--checkbox",
-        state: @checked ? "checked" : "unchecked"
-      }
-    end
+  def checkbox_data_attributes
+    {
+      controller: "ui--checkbox",
+      state: @checked ? "checked" : "unchecked"
+    }
+  end
 
-    def checkbox_id
-      @id || "checkbox-#{SecureRandom.hex(4)}"
-    end
+  def checkbox_id
+    @id || "checkbox-#{SecureRandom.hex(4)}"
+  end
 
-    private
+  private
 
-    def checkbox_base_classes
-      "peer appearance-none border-input dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
-    end
+  def checkbox_base_classes
+    "peer appearance-none border-input dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
   end
 end

data/app/behaviors/ui/collapsible_behavior.rb

@@ -2,41 +2,56 @@
 
 require "tailwind_merge"
 
-    # CollapsibleBehavior
-    #
-    # Shared behavior for Collapsible root component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CollapsibleBehavior
-      def collapsible_html_attributes
-        attrs = {
-          data: collapsible_data_attributes
-        }
-        unless @as_child
-          attrs[:class] = collapsible_classes
-        end
-        attrs
-      end
+# UI::CollapsibleBehavior
+#
+# @ui_component Collapsible
+# @ui_category data-display
+#
+# @ui_anatomy Collapsible - Root container with state management (required)
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Trigger - Button or element that activates the component (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+# @ui_feature Animation support
+#
+# @ui_aria_pattern Disclosure
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+#
+# @ui_related accordion
+#
+module UI::CollapsibleBehavior
+  def collapsible_html_attributes
+    attrs = {
+      data: collapsible_data_attributes
+    }
+    unless @as_child
+      attrs[:class] = collapsible_classes
+    end
+    attrs
+  end
 
-      def collapsible_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          collapsible_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def collapsible_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      collapsible_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def collapsible_data_attributes
-        {
-          controller: "ui--collapsible",
-          slot: "collapsible",
-          state: @open ? "open" : "closed",
-          ui__collapsible_open_value: @open.to_s,
-          ui__collapsible_disabled_value: @disabled.to_s
-        }
-      end
+  def collapsible_data_attributes
+    {
+      controller: "ui--collapsible",
+      slot: "collapsible",
+      state: @open ? "open" : "closed",
+      ui__collapsible_open_value: @open.to_s,
+      ui__collapsible_disabled_value: @disabled.to_s
+    }
+  end
 
-      private
+  private
 
-      def collapsible_base_classes
-        "group/collapsible"
-      end
-    end
+  def collapsible_base_classes
+    "group/collapsible"
+  end
+end

data/app/behaviors/ui/collapsible_content_behavior.rb

@@ -2,38 +2,38 @@
 
 require "tailwind_merge"
 
-    # ContentBehavior
-    #
-    # Shared behavior for CollapsibleContent component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CollapsibleContentBehavior
-      def collapsible_content_html_attributes
-        attrs = {
-          class: collapsible_content_classes,
-          data: collapsible_content_data_attributes
-        }
-        attrs[:hidden] = true unless @force_mount
-        attrs
-      end
+# ContentBehavior
+#
+# Shared behavior for CollapsibleContent component across ERB, ViewComponent, and Phlex implementations.
+module UI::CollapsibleContentBehavior
+  def collapsible_content_html_attributes
+    attrs = {
+      class: collapsible_content_classes,
+      data: collapsible_content_data_attributes
+    }
+    attrs[:hidden] = true unless @force_mount
+    attrs
+  end
 
-      def collapsible_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          collapsible_content_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def collapsible_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      collapsible_content_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def collapsible_content_data_attributes
-        {
-          slot: "collapsible-content",
-          state: "closed",
-          ui__collapsible_target: "content"
-        }
-      end
+  def collapsible_content_data_attributes
+    {
+      slot: "collapsible-content",
+      state: "closed",
+      ui__collapsible_target: "content"
+    }
+  end
 
-      private
+  private
 
-      def collapsible_content_base_classes
-        "overflow-hidden transition-[height] duration-[var(--duration-collapsible)] ease-[var(--ease-collapsible)] data-[state=closed]:h-0"
-      end
-    end
+  def collapsible_content_base_classes
+    "overflow-hidden transition-[height] duration-[var(--duration-collapsible)] ease-[var(--ease-collapsible)] data-[state=closed]:h-0"
+  end
+end

data/app/behaviors/ui/collapsible_trigger_behavior.rb

@@ -2,54 +2,54 @@
 
 require "tailwind_merge"
 
-    # TriggerBehavior
-    #
-    # Shared behavior for CollapsibleTrigger component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CollapsibleTriggerBehavior
-      # Base classes for standalone trigger (when not using as_child with Button)
-      # Includes focus ring, sizing, and ghost-like hover styles
-      # Matches Button with variant: :ghost, size: :sm, classes: "w-9 p-0"
-      TRIGGER_BASE_CLASSES = [
-        # Focus styles
-        "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        # Base button styles (rounded-lg to match Button)
-        "inline-flex items-center justify-center rounded-lg",
-        # Size (h-8 from size: :sm, w-9 and p-0 from custom classes)
-        "h-8 w-9 p-0",
-        # Ghost variant hover
-        "hover:bg-accent hover:text-accent-foreground",
-        # Transition
-        "transition-colors"
-      ].join(" ")
+# TriggerBehavior
+#
+# Shared behavior for CollapsibleTrigger component across ERB, ViewComponent, and Phlex implementations.
+module UI::CollapsibleTriggerBehavior
+  # Base classes for standalone trigger (when not using as_child with Button)
+  # Includes focus ring, sizing, and ghost-like hover styles
+  # Matches Button with variant: :ghost, size: :sm, classes: "w-9 p-0"
+  TRIGGER_BASE_CLASSES = [
+    # Focus styles
+    "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    # Base button styles (rounded-lg to match Button)
+    "inline-flex items-center justify-center rounded-lg",
+    # Size (h-8 from size: :sm, w-9 and p-0 from custom classes)
+    "h-8 w-9 p-0",
+    # Ghost variant hover
+    "hover:bg-accent hover:text-accent-foreground",
+    # Transition
+    "transition-colors"
+  ].join(" ")
 
-      def collapsible_trigger_html_attributes
-        attrs = {
-          data: collapsible_trigger_data_attributes
-        }
-        trigger_classes = collapsible_trigger_classes
-        attrs[:class] = trigger_classes unless trigger_classes.blank?
-        attrs
-      end
+  def collapsible_trigger_html_attributes
+    attrs = {
+      data: collapsible_trigger_data_attributes
+    }
+    trigger_classes = collapsible_trigger_classes
+    attrs[:class] = trigger_classes unless trigger_classes.blank?
+    attrs
+  end
 
-      def collapsible_trigger_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        as_child_value = respond_to?(:as_child, true) ? as_child : @as_child
+  def collapsible_trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    as_child_value = respond_to?(:as_child, true) ? as_child : @as_child
 
-        # Only apply base classes when NOT using as_child mode
-        # When as_child is true, the parent component provides its own styling
-        if as_child_value
-          return nil if classes_value.blank?
-          TailwindMerge::Merger.new.merge([classes_value].compact.join(" "))
-        else
-          TailwindMerge::Merger.new.merge([TRIGGER_BASE_CLASSES, classes_value].compact.join(" "))
-        end
-      end
-
-      def collapsible_trigger_data_attributes
-        {
-          slot: "collapsible-trigger",
-          ui__collapsible_target: "trigger",
-          action: "click->ui--collapsible#toggle"
-        }
-      end
+    # Only apply base classes when NOT using as_child mode
+    # When as_child is true, the parent component provides its own styling
+    if as_child_value
+      return nil if classes_value.blank?
+      TailwindMerge::Merger.new.merge([classes_value].compact.join(" "))
+    else
+      TailwindMerge::Merger.new.merge([TRIGGER_BASE_CLASSES, classes_value].compact.join(" "))
     end
+  end
+
+  def collapsible_trigger_data_attributes
+    {
+      slot: "collapsible-trigger",
+      ui__collapsible_target: "trigger",
+      action: "click->ui--collapsible#toggle"
+    }
+  end
+end

data/app/behaviors/ui/command_behavior.rb

@@ -2,36 +2,63 @@
 
 require "tailwind_merge"
 
-    # CommandBehavior
-    #
-    # Shared behavior for Command root component.
-    module UI::CommandBehavior
-      def command_html_attributes
-        {
-          class: command_classes,
-          data: command_data_attributes
-        }
-      end
+# UI::CommandBehavior
+#
+# @ui_component Command
+# @ui_category data-display
+#
+# @ui_anatomy Command - Root container for command palette (required)
+# @ui_anatomy Empty - Content shown when no items
+# @ui_anatomy Group - Container for grouping related items
+# @ui_anatomy Input - Text input field
+# @ui_anatomy Item - Individual item element
+# @ui_anatomy List - Container for list items
+# @ui_anatomy Separator - Visual divider between sections
+# @ui_anatomy Shortcut - Keyboard shortcut indicator
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Keyboard navigation with arrow keys
+#
+# @ui_aria_pattern Listbox
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+#
+# @ui_keyboard Enter Activates the focused element
+# @ui_keyboard ArrowDown Moves focus to next item
+# @ui_keyboard ArrowUp Moves focus to previous item
+# @ui_keyboard Home Moves focus to first item
+# @ui_keyboard End Moves focus to last item
+#
+# @ui_related combobox
+# @ui_related dialog
+#
+module UI::CommandBehavior
+  def command_html_attributes
+    {
+      class: command_classes,
+      data: command_data_attributes
+    }
+  end
 
-      def command_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          command_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def command_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      command_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def command_data_attributes
-        {
-          controller: "ui--command",
-          slot: "command",
-          ui__command_loop_value: @loop.to_s
-        }
-      end
+  def command_data_attributes
+    {
+      controller: "ui--command",
+      slot: "command",
+      ui__command_loop_value: @loop.to_s,
+      ui__command_autofocus_value: @autofocus.to_s
+    }
+  end
 
-      private
+  private
 
-      def command_base_classes
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md"
-      end
-    end
+  def command_base_classes
+    "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md"
+  end
+end

data/app/behaviors/ui/command_dialog_behavior.rb

@@ -1,30 +1,54 @@
 # frozen_string_literal: true
 
-    module UI::CommandDialogBehavior
-      def command_dialog_base_classes
-        ""
-      end
-
-      def command_dialog_classes
-        UI::TailwindMerge.merge([command_dialog_base_classes, @classes].compact.join(" "))
-      end
-
-      def command_dialog_html_attributes
-        {
-          data: {
-            controller: "ui--command-dialog",
-            ui__command_dialog_shortcut_value: @shortcut,
-            action: "keydown.#{shortcut_action}@document->ui--command-dialog#toggle"
-          }
-        }
-      end
-
-      def shortcut_action
-        # Convert "meta+j" to Stimulus format "meta+j"
-        @shortcut.downcase
-      end
-
-      def command_dialog_content_classes
-        "overflow-hidden p-0"
-      end
-    end
+
+# UI::CommandDialogBehavior
+
+#
+
+# @ui_component Command Dialog
+
+# @ui_category other
+
+#
+
+# @ui_anatomy Command Dialog - Root container with state management (required)
+
+#
+
+# @ui_feature Keyboard navigation
+
+# @ui_feature Custom styling with Tailwind classes
+
+# @ui_feature Form integration
+
+# @ui_feature Animation support
+
+#
+module UI::CommandDialogBehavior
+  def command_dialog_base_classes
+    ""
+  end
+
+  def command_dialog_classes
+    UI::TailwindMerge.merge([command_dialog_base_classes, @classes].compact.join(" "))
+  end
+
+  def command_dialog_html_attributes
+    {
+      data: {
+        controller: "ui--command-dialog",
+        ui__command_dialog_shortcut_value: @shortcut,
+        action: "keydown.#{shortcut_action}@document->ui--command-dialog#toggle"
+      }
+    }
+  end
+
+  def shortcut_action
+    # Convert "meta+j" to Stimulus format "meta+j"
+    @shortcut.downcase
+  end
+
+  def command_dialog_content_classes
+    "overflow-hidden p-0"
+  end
+end