fernandes-ui 0.1.0

data/app/behaviors/ui/calendar_behavior.rb

@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Calendar component
+    # Handles Stimulus controller setup and data attributes
+    module UI::CalendarBehavior
+      WEEKDAYS = %w[Su Mo Tu We Th Fr Sa].freeze
+
+      # Generate Stimulus controller data attributes
+      def calendar_data_attributes
+        attrs = {
+          controller: "ui--calendar",
+          ui__calendar_mode_value: @mode.to_s,
+          ui__calendar_selected_value: selected_json,
+          ui__calendar_month_value: @month.to_s,
+          ui__calendar_number_of_months_value: @number_of_months,
+          ui__calendar_week_starts_on_value: @week_starts_on,
+          ui__calendar_locale_value: @locale,
+          ui__calendar_min_date_value: @min_date&.to_s,
+          ui__calendar_max_date_value: @max_date&.to_s,
+          ui__calendar_disabled_value: disabled_dates_json,
+          ui__calendar_show_outside_days_value: @show_outside_days,
+          ui__calendar_fixed_weeks_value: @fixed_weeks,
+          ui__calendar_year_range_value: @year_range,
+          # Range constraints
+          ui__calendar_min_range_days_value: @min_range_days,
+          ui__calendar_max_range_days_value: @max_range_days,
+          ui__calendar_exclude_disabled_value: @exclude_disabled,
+          action: "keydown->ui--calendar#handleKeydown"
+        }
+
+        # Add UI Select controller if using custom select
+        if @show_dropdowns && !use_native_select?
+          attrs[:controller] = "ui--calendar ui--select-calendar-sync"
+        end
+
+        attrs.compact
+      end
+
+      def use_native_select?
+        @use_native_select.nil? ? true : @use_native_select
+      end
+
+      # Build complete HTML attributes hash for calendar container
+      def calendar_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        user_data = @attributes&.fetch(:data, {}) || {}
+
+        # Merge data attributes, concatenating action values
+        merged_data = calendar_data_attributes.merge(user_data) do |key, calendar_val, user_val|
+          if key == :action
+            # Concatenate Stimulus actions with space separator
+            [calendar_val, user_val].compact.join(" ")
+          else
+            user_val
+          end
+        end
+
+        base_attrs.merge(
+          class: calendar_classes,
+          role: "application",
+          aria: {
+            label: aria_label_text
+          },
+          data: merged_data
+        )
+      end
+
+      # Generate aria-label based on mode
+      def aria_label_text
+        case @mode.to_s
+        when "range"
+          "Date range picker"
+        when "multiple"
+          "Multiple date picker"
+        else
+          "Date picker"
+        end
+      end
+
+      # Default calendar classes
+      def calendar_classes
+        base = "p-3"
+        if @number_of_months && @number_of_months > 1
+          "#{base} flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 #{@classes}".strip
+        else
+          "#{base} #{@classes}".strip
+        end
+      end
+
+      # Convert selected dates to JSON array
+      def selected_json
+        case @selected
+        when Date then [@selected.to_s].to_json
+        when Range then [@selected.begin.to_s, @selected.end.to_s].to_json
+        when Array then @selected.map(&:to_s).to_json
+        else [].to_json
+        end
+      end
+
+      # Convert selected dates for form value
+      def selected_value
+        case @selected
+        when Date then @selected.to_s
+        when Range then "#{@selected.begin},#{@selected.end}"
+        when Array then @selected.map(&:to_s).join(",")
+        else ""
+        end
+      end
+
+      # Convert disabled dates to JSON array
+      def disabled_dates_json
+        (@disabled_dates || []).map(&:to_s).to_json
+      end
+
+      # Get weekdays ordered by week_starts_on
+      def ordered_weekdays
+        WEEKDAYS.rotate(@week_starts_on || 0)
+      end
+    end

data/app/behaviors/ui/card_action_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # ActionBehavior
+    #
+    # Shared behavior for CardAction component across ERB, ViewComponent, and Phlex implementations.
+    module UI::CardActionBehavior
+      def render_card_action(&content_block)
+        all_attributes = card_action_html_attributes.deep_merge(@attributes)
+        content_tag(:div, **all_attributes, &content_block)
+      end
+
+      def card_action_html_attributes
+        {
+          class: card_action_classes,
+          data: { slot: "card-action" }
+        }
+      end
+
+      def card_action_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          card_action_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      def card_action_base_classes
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end"
+      end
+    end

data/app/behaviors/ui/card_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # CardBehavior
+    #
+    # Shared behavior for Card component across ERB, ViewComponent, and Phlex implementations.
+    module UI::CardBehavior
+      def render_card(&content_block)
+        all_attributes = card_html_attributes.deep_merge(@attributes)
+        content_tag(:div, **all_attributes, &content_block)
+      end
+
+      def card_html_attributes
+        {
+          class: card_classes,
+          data: { slot: "card" }
+        }
+      end
+
+      def card_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          card_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      def card_base_classes
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm"
+      end
+    end

data/app/behaviors/ui/card_content_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # ContentBehavior
+    #
+    # Shared behavior for CardContent component across ERB, ViewComponent, and Phlex implementations.
+    module UI::CardContentBehavior
+      def render_card_content(&content_block)
+        all_attributes = card_content_html_attributes.deep_merge(@attributes)
+        content_tag(:div, **all_attributes, &content_block)
+      end
+
+      def card_content_html_attributes
+        {
+          class: card_content_classes,
+          data: { slot: "card-content" }
+        }
+      end
+
+      def card_content_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          card_content_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      def card_content_base_classes
+        "px-6"
+      end
+    end

data/app/behaviors/ui/card_description_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # DescriptionBehavior
+    #
+    # Shared behavior for CardDescription component across ERB, ViewComponent, and Phlex implementations.
+    module UI::CardDescriptionBehavior
+      def render_card_description(&content_block)
+        all_attributes = card_description_html_attributes.deep_merge(@attributes)
+        content_tag(:div, **all_attributes, &content_block)
+      end
+
+      def card_description_html_attributes
+        {
+          class: card_description_classes,
+          data: { slot: "card-description" }
+        }
+      end
+
+      def card_description_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          card_description_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      def card_description_base_classes
+        "text-muted-foreground text-sm"
+      end
+    end

data/app/behaviors/ui/card_footer_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # FooterBehavior
+    #
+    # Shared behavior for CardFooter component across ERB, ViewComponent, and Phlex implementations.
+    module UI::CardFooterBehavior
+      def render_card_footer(&content_block)
+        all_attributes = card_footer_html_attributes.deep_merge(@attributes)
+        content_tag(:div, **all_attributes, &content_block)
+      end
+
+      def card_footer_html_attributes
+        {
+          class: card_footer_classes,
+          data: { slot: "card-footer" }
+        }
+      end
+
+      def card_footer_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          card_footer_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      def card_footer_base_classes
+        "flex items-center px-6 [.border-t]:pt-6"
+      end
+    end

data/app/behaviors/ui/card_header_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # HeaderBehavior
+    #
+    # Shared behavior for CardHeader component across ERB, ViewComponent, and Phlex implementations.
+    module UI::CardHeaderBehavior
+      def render_card_header(&content_block)
+        all_attributes = card_header_html_attributes.deep_merge(@attributes)
+        content_tag(:div, **all_attributes, &content_block)
+      end
+
+      def card_header_html_attributes
+        {
+          class: card_header_classes,
+          data: { slot: "card-header" }
+        }
+      end
+
+      def card_header_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          card_header_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      def card_header_base_classes
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"
+      end
+    end

data/app/behaviors/ui/card_title_behavior.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # TitleBehavior
+    #
+    # Shared behavior for CardTitle component across ERB, ViewComponent, and Phlex implementations.
+    module UI::CardTitleBehavior
+      def render_card_title(&content_block)
+        all_attributes = card_title_html_attributes.deep_merge(@attributes)
+        content_tag(:div, **all_attributes, &content_block)
+      end
+
+      def card_title_html_attributes
+        {
+          class: card_title_classes,
+          data: { slot: "card-title" }
+        }
+      end
+
+      def card_title_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          card_title_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      def card_title_base_classes
+        "leading-none font-semibold"
+      end
+    end

data/app/behaviors/ui/carousel_behavior.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Carousel root component
+    module UI::CarouselBehavior
+      # Base CSS classes for carousel container
+      def carousel_base_classes
+        "relative"
+      end
+
+      # Merge base classes with custom classes
+      def carousel_classes
+        TailwindMerge::Merger.new.merge([carousel_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for Stimulus controller
+      def carousel_data_attributes
+        attrs = {
+          controller: "ui--carousel",
+          ui__carousel_orientation_value: @orientation || "horizontal"
+        }
+
+        # Add options if provided
+        if @opts
+          attrs[:ui__carousel_opts_value] = @opts.to_json
+        end
+
+        # Add plugins if provided
+        if @plugins
+          attrs[:ui__carousel_plugins_value] = @plugins.to_json
+        end
+
+        attrs
+      end
+
+      # Merge user-provided data attributes
+      def merged_carousel_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(carousel_data_attributes)
+      end
+
+      # Build complete HTML attributes hash
+      def carousel_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: carousel_classes,
+          role: "region",
+          "aria-roledescription": "carousel",
+          data: merged_carousel_data_attributes
+        )
+      end
+    end

data/app/behaviors/ui/carousel_content_behavior.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Carousel Content component
+    module UI::CarouselContentBehavior
+      # Base CSS classes for carousel content wrapper (outer div/viewport)
+      def carousel_content_base_classes
+        "overflow-hidden"
+      end
+
+      # Base CSS classes for flex container (inner div)
+      # Includes default horizontal spacing
+      def carousel_content_container_base_classes
+        "flex -ml-4"
+      end
+
+      # Merge base classes with custom classes for outer div
+      def carousel_content_classes
+        carousel_content_base_classes
+      end
+
+      # Merge base classes with custom classes for inner flex container
+      # User classes can override the -ml-4 default (e.g., -ml-1 for custom spacing)
+      def carousel_content_container_classes
+        TailwindMerge::Merger.new.merge([carousel_content_container_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for Stimulus target (outer div)
+      def carousel_content_data_attributes
+        {
+          ui__carousel_target: "viewport"
+        }
+      end
+
+      # Data attributes for flex container (inner div)
+      def carousel_content_container_data_attributes
+        {
+          ui__carousel_target: "container"
+        }
+      end
+
+      # Build complete HTML attributes hash for inner container
+      def carousel_content_container_html_attributes
+        {
+          class: carousel_content_container_classes,
+          data: carousel_content_container_data_attributes
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_carousel_content_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(carousel_content_data_attributes)
+      end
+
+      # Build complete HTML attributes hash
+      def carousel_content_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: carousel_content_classes,
+          data: merged_carousel_content_data_attributes
+        )
+      end
+    end

data/app/behaviors/ui/carousel_item_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Carousel Item component
+    module UI::CarouselItemBehavior
+      # Base CSS classes for carousel item (slide)
+      def carousel_item_base_classes
+        "min-w-0 shrink-0 grow-0 basis-full pl-4"
+      end
+
+      # Merge base classes with custom classes
+      def carousel_item_classes
+        TailwindMerge::Merger.new.merge([carousel_item_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def carousel_item_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: carousel_item_classes,
+          role: "group",
+          "aria-roledescription": "slide"
+        )
+      end
+    end

data/app/behaviors/ui/carousel_next_behavior.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Carousel Next button
+    module UI::CarouselNextBehavior
+      # Base CSS classes for next button (default horizontal positioning)
+      def carousel_next_base_classes
+        "absolute size-8 rounded-lg top-1/2 -translate-y-1/2 -right-12"
+      end
+
+      # Merge base classes with custom classes
+      def carousel_next_classes
+        TailwindMerge::Merger.new.merge([carousel_next_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for Stimulus action
+      def carousel_next_data_attributes
+        {
+          action: "click->ui--carousel#scrollNext",
+          ui__carousel_target: "nextButton"
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_carousel_next_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(carousel_next_data_attributes)
+      end
+
+      # Build complete HTML attributes hash (without class, which is handled separately)
+      def carousel_next_html_attributes
+        base_attrs = @attributes&.except(:data, :class) || {}
+        base_attrs.merge(
+          "aria-label": "Next slide",
+          data: merged_carousel_next_data_attributes
+        )
+      end
+    end

data/app/behaviors/ui/carousel_previous_behavior.rb

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

data/app/behaviors/ui/checkbox_behavior.rb

@@ -0,0 +1,48 @@
+# 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
+
+    def checkbox_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        checkbox_base_classes,
+        classes_value
+
+      ].compact.join(" "))
+    end
+
+    def checkbox_data_attributes
+      {
+        controller: "ui--checkbox",
+        state: @checked ? "checked" : "unchecked"
+      }
+    end
+
+    def checkbox_id
+      @id || "checkbox-#{SecureRandom.hex(4)}"
+    end
+
+    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
+  end
+end

data/app/behaviors/ui/collapsible_behavior.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      private
+
+      def collapsible_base_classes
+        "group/collapsible"
+      end
+    end