fernandes-ui 0.1.0

data/app/view_components/ui/breadcrumb_item_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    # BreadcrumbItemComponent - ViewComponent implementation
+    #
+    # Individual breadcrumb entry within the breadcrumb list.
+    # Uses BreadcrumbItemBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::BreadcrumbItemComponent.new do %>
+    #     <%= render UI::BreadcrumbLinkComponent.new(href: "/") do %>
+    #       Home
+    #     <% end %>
+    #   <% end %>
+    class UI::BreadcrumbItemComponent < ViewComponent::Base
+      include UI::BreadcrumbItemBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :li, **breadcrumb_item_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/breadcrumb_link_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    # BreadcrumbLinkComponent - ViewComponent implementation
+    #
+    # Clickable breadcrumb link for navigation.
+    # Uses BreadcrumbLinkBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::BreadcrumbLinkComponent.new(href: "/") do %>
+    #     Home
+    #   <% end %>
+    class UI::BreadcrumbLinkComponent < ViewComponent::Base
+      include UI::BreadcrumbLinkBehavior
+
+      # @param href [String] URL for the link
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(href: "#", classes: "", **attributes)
+        @href = href
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :a, **breadcrumb_link_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/breadcrumb_list_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    # BreadcrumbListComponent - ViewComponent implementation
+    #
+    # Container for breadcrumb items, rendered as an ordered list.
+    # Uses BreadcrumbListBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::BreadcrumbListComponent.new do %>
+    #     <%= render UI::BreadcrumbItemComponent.new do %>
+    #       Item content
+    #     <% end %>
+    #   <% end %>
+    class UI::BreadcrumbListComponent < ViewComponent::Base
+      include UI::BreadcrumbListBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :ol, **breadcrumb_list_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/breadcrumb_page_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # BreadcrumbPageComponent - ViewComponent implementation
+    #
+    # Current page indicator (non-clickable) for breadcrumbs.
+    # Uses BreadcrumbPageBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::BreadcrumbPageComponent.new do %>
+    #     Current Page
+    #   <% end %>
+    class UI::BreadcrumbPageComponent < ViewComponent::Base
+      include UI::BreadcrumbPageBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :span, **breadcrumb_page_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/breadcrumb_separator_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+    # BreadcrumbSeparatorComponent - ViewComponent implementation
+    #
+    # Visual divider between breadcrumb items with default chevron icon.
+    # Uses BreadcrumbSeparatorBehavior concern for shared styling logic.
+    #
+    # @example Default separator
+    #   <%= render UI::BreadcrumbSeparatorComponent.new %>
+    #
+    # @example Custom separator
+    #   <%= render UI::BreadcrumbSeparatorComponent.new do %>
+    #     /
+    #   <% end %>
+    class UI::BreadcrumbSeparatorComponent < ViewComponent::Base
+      include UI::BreadcrumbSeparatorBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :li, **breadcrumb_separator_html_attributes do
+          if content.present?
+            content
+          else
+            default_separator_icon
+          end
+        end
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+
+      def default_separator_icon
+        content_tag :svg, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24",
+                    viewBox: "0 0 24 24", fill: "none", stroke: "currentColor",
+                    "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round",
+                    class: "lucide lucide-chevron-right" do
+          content_tag :path, nil, d: "m9 18 6-6-6-6"
+        end
+      end
+    end

data/app/view_components/ui/button_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # ButtonComponent - ViewComponent implementation
+    #
+    # A versatile button component with multiple variants and sizes.
+    # Uses ButtonBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::ButtonComponent.new do %>
+    #     Click me
+    #   <% end %>
+    #
+    # @example With variant and size
+    #   <%= render UI::ButtonComponent.new(variant: "destructive", size: "lg") do %>
+    #     Delete
+    #   <% end %>
+    #
+    # @example Disabled state
+    #   <%= render UI::ButtonComponent.new(disabled: true) do %>
+    #     Disabled
+    #   <% end %>
+    class UI::ButtonComponent < ViewComponent::Base
+      include UI::ButtonBehavior
+
+      # @param variant [String] Visual style variant (default, destructive, outline, secondary, ghost, link)
+      # @param size [String] Size variant (default, sm, lg, icon, icon-sm, icon-lg)
+      # @param type [String] Button type attribute (button, submit, reset)
+      # @param disabled [Boolean] Whether the button is disabled
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(variant: "default", size: "default", type: "button", disabled: false, classes: "", **attributes)
+        @variant = variant
+        @size = size
+        @type = type
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render_button { content }
+      end
+    end

data/app/view_components/ui/button_group_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+    # ButtonGroupComponent - ViewComponent implementation
+    #
+    # A container that groups related buttons together with consistent styling.
+    # Uses ButtonGroupBehavior module for shared styling logic.
+    #
+    # Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
+    #
+    # @example Horizontal button group (default)
+    #   <%= render UI::ButtonGroupComponent.new do %>
+    #     <%= render UI::ButtonComponent.new(variant: :outline) { "Button 1" } %>
+    #     <%= render UI::ButtonComponent.new(variant: :outline) { "Button 2" } %>
+    #   <% end %>
+    #
+    # @example Vertical button group
+    #   <%= render UI::ButtonGroupComponent.new(orientation: :vertical) do %>
+    #     <%= render UI::ButtonComponent.new(variant: :outline, size: :icon) { "+" } %>
+    #     <%= render UI::ButtonComponent.new(variant: :outline, size: :icon) { "-" } %>
+    #   <% end %>
+    class UI::ButtonGroupComponent < ViewComponent::Base
+      include UI::ButtonGroupBehavior
+
+      # @param orientation [Symbol, String] Direction of the button group (:horizontal, :vertical)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(orientation: :horizontal, classes: "", **attributes)
+        @orientation = orientation
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.div(**button_group_html_attributes.deep_merge(@attributes)) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/button_group_separator_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # SeparatorComponent - ViewComponent implementation
+    #
+    # Visually divides buttons within a button group.
+    # Extends UI::SeparatorComponent with button group specific styling.
+    #
+    # Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
+    #
+    # @example Basic separator
+    #   <%= render UI::ButtonGroupComponent.new do %>
+    #     <%= render UI::ButtonComponent.new(variant: :secondary) { "Copy" } %>
+    #     <%= render UI::SeparatorComponent.new %>
+    #     <%= render UI::ButtonComponent.new(variant: :secondary) { "Paste" } %>
+    #   <% end %>
+    class UI::ButtonGroupSeparatorComponent < ViewComponent::Base
+      include UI::SeparatorBehavior
+      include UI::SeparatorBehavior
+
+      # @param orientation [Symbol, String] Direction of the separator (:horizontal, :vertical)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(orientation: :vertical, decorative: true, classes: "", **attributes)
+        @orientation = orientation
+        @decorative = decorative
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.div(**separator_html_attributes.deep_merge(@attributes))
+      end
+    end

data/app/view_components/ui/button_group_text_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    # TextComponent - ViewComponent implementation
+    #
+    # Displays text within a button group.
+    # Uses ButtonGroupTextBehavior module for shared styling logic.
+    #
+    # Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
+    #
+    # @example Basic text
+    #   <%= render UI::ButtonGroupComponent.new do %>
+    #     <%= render UI::TextComponent.new { "Label" } %>
+    #     <%= render UI::ButtonComponent.new(variant: :outline) { "Button" } %>
+    #   <% end %>
+    class UI::ButtonGroupTextComponent < ViewComponent::Base
+      include UI::ButtonGroupTextBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.div(**text_html_attributes.deep_merge(@attributes)) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/calendar_component.rb

@@ -0,0 +1,185 @@
+# frozen_string_literal: true
+
+    # Calendar component (ViewComponent)
+    # A date picker calendar with support for single, range, and multiple selection
+    class UI::CalendarComponent < ViewComponent::Base
+      include UI::CalendarBehavior
+
+      def initialize(
+        mode: :single,
+        selected: nil,
+        month: Date.today,
+        number_of_months: 1,
+        week_starts_on: 0,
+        locale: "en-US",
+        min_date: nil,
+        max_date: nil,
+        disabled_dates: [],
+        show_outside_days: true,
+        fixed_weeks: false,
+        show_dropdowns: false,
+        year_range: 100,
+        min_range_days: 0,
+        max_range_days: 0,
+        exclude_disabled: false,
+        use_native_select: true,
+        name: nil,
+        classes: "",
+        attributes: {}
+      )
+        @mode = mode
+        @selected = selected
+        @month = month
+        @number_of_months = number_of_months
+        @week_starts_on = week_starts_on
+        @locale = locale
+        @min_date = min_date
+        @max_date = max_date
+        @disabled_dates = disabled_dates
+        @show_outside_days = show_outside_days
+        @fixed_weeks = fixed_weeks
+        @show_dropdowns = show_dropdowns
+        @year_range = year_range
+        @min_range_days = min_range_days
+        @max_range_days = max_range_days
+        @exclude_disabled = exclude_disabled
+        @use_native_select = use_native_select
+        @name = name
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def call
+        content_tag(:div, **calendar_html_attributes) do
+          safe_join([
+            live_region_html,
+            hidden_input,
+            months_html
+          ].compact)
+        end
+      end
+
+      private
+
+      def live_region_html
+        tag.div("", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", data: { ui__calendar_target: "liveRegion" })
+      end
+
+      def hidden_input
+        return unless @name
+
+        tag.input(type: "hidden", name: @name, value: selected_value, data: { ui__calendar_target: "input" })
+      end
+
+      def months_html
+        safe_join(@number_of_months.times.map { |i| month_html(i) })
+      end
+
+      def month_html(index)
+        content_tag(:div, class: "space-y-4") do
+          safe_join([header_html(index), table_html])
+        end
+      end
+
+      def header_html(_index)
+        content_tag(:div, class: "flex justify-center pt-1 relative items-center") do
+          safe_join([
+            nav_button(:previous),
+            @show_dropdowns ? dropdowns_html : month_label_html,
+            nav_button(:next)
+          ])
+        end
+      end
+
+      def nav_button(direction)
+        action = direction == :previous ? "previousMonth" : "nextMonth"
+        label = direction == :previous ? "Go to previous month" : "Go to next month"
+        position = direction == :previous ? "left" : "right"
+
+        content_tag(:button,
+          type: "button",
+          data: { action: "click->ui--calendar##{action}" },
+          class: nav_button_classes(position),
+          "aria-label": label
+        ) do
+          direction == :previous ? chevron_left_svg : chevron_right_svg
+        end
+      end
+
+      def nav_button_classes(position)
+        base = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium " \
+               "ring-offset-background transition-colors " \
+               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " \
+               "border border-input bg-background hover:bg-accent hover:text-accent-foreground " \
+               "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        position_class = position == "left" ? "absolute left-1" : "absolute right-1"
+        "#{base} #{position_class}"
+      end
+
+      def month_label_html
+        content_tag(:div, "", class: "text-sm font-medium", data: { ui__calendar_target: "monthLabel" })
+      end
+
+      def dropdowns_html
+        content_tag(:div, class: "flex items-center gap-1") do
+          safe_join([month_select_html, year_select_html])
+        end
+      end
+
+      def month_select_html
+        content_tag(:select,
+          data: { ui__calendar_target: "monthSelect", action: "change->ui--calendar#goToMonth" },
+          class: "text-sm font-medium h-7 px-2 rounded-md border border-input bg-background"
+        ) do
+          safe_join(Date::MONTHNAMES.compact.each_with_index.map { |name, i| tag.option(name, value: i) })
+        end
+      end
+
+      def year_select_html
+        current_year = Date.today.year
+        content_tag(:select,
+          data: { ui__calendar_target: "yearSelect", action: "change->ui--calendar#goToYear" },
+          class: "text-sm font-medium h-7 px-2 rounded-md border border-input bg-background"
+        ) do
+          safe_join(((current_year - @year_range)..(current_year + 10)).map { |y| tag.option(y.to_s, value: y) })
+        end
+      end
+
+      def table_html
+        content_tag(:table, class: "w-full border-collapse space-y-1", role: "grid") do
+          safe_join([
+            content_tag(:thead) { weekdays_html },
+            content_tag(:tbody, "", data: { ui__calendar_target: "grid" }, role: "rowgroup")
+          ])
+        end
+      end
+
+      def weekdays_html
+        content_tag(:tr, class: "flex", data: { ui__calendar_target: "weekdaysHeader" }) do
+          safe_join(ordered_weekdays.map { |day| tag.th(day, scope: "col", class: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]") })
+        end
+      end
+
+      def chevron_left_svg
+        tag.svg(
+          xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16",
+          viewBox: "0 0 24 24", fill: "none", stroke: "currentColor",
+          "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round",
+          class: "h-4 w-4"
+        ) do
+          tag.path(d: "m15 18-6-6 6-6")
+        end
+      end
+
+      def chevron_right_svg
+        tag.svg(
+          xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16",
+          viewBox: "0 0 24 24", fill: "none", stroke: "currentColor",
+          "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round",
+          class: "h-4 w-4"
+        ) do
+          tag.path(d: "m9 18 6-6-6-6")
+        end
+      end
+    end

data/app/view_components/ui/card_action_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardActionComponent < ViewComponent::Base
+      include UI::CardActionBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render_card_action { content }
+      end
+    end

data/app/view_components/ui/card_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardComponent < ViewComponent::Base
+      include UI::CardBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render_card { content }
+      end
+    end

data/app/view_components/ui/card_content_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardContentComponent < ViewComponent::Base
+      include UI::CardContentBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render_card_content { content }
+      end
+    end

data/app/view_components/ui/card_description_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardDescriptionComponent < ViewComponent::Base
+      include UI::CardDescriptionBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render_card_description { content }
+      end
+    end

data/app/view_components/ui/card_footer_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardFooterComponent < ViewComponent::Base
+      include UI::CardFooterBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render_card_footer { content }
+      end
+    end

data/app/view_components/ui/card_header_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardHeaderComponent < ViewComponent::Base
+      include UI::CardHeaderBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render_card_header { content }
+      end
+    end

data/app/view_components/ui/card_title_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardTitleComponent < ViewComponent::Base
+      include UI::CardTitleBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render_card_title { content }
+      end
+    end

data/app/view_components/ui/carousel_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+    class UI::CarouselComponent < ViewComponent::Base
+      def initialize(classes: nil, orientation: "horizontal", opts: {}, plugins: nil, **attributes)
+        @classes = classes
+        @orientation = orientation
+        @opts = opts
+        @plugins = plugins
+        @attributes = attributes
+      end
+
+      def call
+        extend UI::CarouselBehavior
+        content_tag :div, content, **carousel_html_attributes
+      end
+    end

data/app/view_components/ui/carousel_content_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+    class UI::CarouselContentComponent < ViewComponent::Base
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        extend UI::CarouselContentBehavior
+        content_tag :div, **carousel_content_html_attributes do
+          content_tag :div, content, **carousel_content_container_html_attributes
+        end
+      end
+    end

data/app/view_components/ui/carousel_item_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+    class UI::CarouselItemComponent < ViewComponent::Base
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        extend UI::CarouselItemBehavior
+        content_tag :div, content, **carousel_item_html_attributes
+      end
+    end