fernandes-ui 0.1.0

data/app/components/ui/calendar.rb

@@ -0,0 +1,209 @@
+# frozen_string_literal: true
+
+    # Calendar component (Phlex)
+    # A date picker calendar with support for single, range, and multiple selection
+    #
+    # @example Basic usage (single date)
+    #   render UI::Calendar.new(selected: Date.today)
+    #
+    # @example Range selection
+    #   render UI::Calendar.new(mode: :range, selected: Date.today..Date.today + 7)
+    #
+    # @example Multiple months
+    #   render UI::Calendar.new(number_of_months: 2)
+    #
+    # @example With dropdowns
+    #   render UI::Calendar.new(show_dropdowns: true)
+    class UI::Calendar < Phlex::HTML
+      include UI::CalendarBehavior
+
+      # @param mode [Symbol] :single, :range, or :multiple selection mode
+      # @param selected [Date, Range, Array] initially selected date(s)
+      # @param month [Date] initially displayed month
+      # @param number_of_months [Integer] number of months to display side by side
+      # @param week_starts_on [Integer] 0 for Sunday, 1 for Monday, etc.
+      # @param locale [String] BCP 47 locale tag for formatting (default: "en-US")
+      # @param min_date [Date] minimum selectable date
+      # @param max_date [Date] maximum selectable date
+      # @param disabled_dates [Array<Date>] dates that cannot be selected
+      # @param show_outside_days [Boolean] show days from adjacent months
+      # @param fixed_weeks [Boolean] always show 6 weeks
+      # @param show_dropdowns [Boolean] show month/year dropdowns
+      # @param year_range [Integer] number of years to show in dropdown
+      # @param min_range_days [Integer] minimum days for range selection (0 = no min)
+      # @param max_range_days [Integer] maximum days for range selection (0 = no max)
+      # @param exclude_disabled [Boolean] prevent ranges that contain disabled dates
+      # @param use_native_select [Boolean] use native HTML select for dropdowns (default: true)
+      # @param name [String] form field name for hidden input
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      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 view_template
+        div(**calendar_html_attributes) do
+          # Screen reader live region for announcements
+          div(class: "sr-only", aria_live: "polite", aria_atomic: "true", data: { ui__calendar_target: "liveRegion" })
+
+          # Hidden input for form submission
+          if @name
+            input(type: "hidden", name: @name, value: selected_value, data: { ui__calendar_target: "input" })
+          end
+
+          @number_of_months.times do |i|
+            render_month(i)
+          end
+        end
+      end
+
+      private
+
+      def render_month(index)
+        div(class: "space-y-4") do
+          render_header(index)
+          render_table
+        end
+      end
+
+      def render_header(index)
+        div(class: "flex justify-center pt-1 relative items-center") do
+          # Previous button (only on first month or always)
+          button(
+            type: "button",
+            data: { action: "click->ui--calendar#previousMonth" },
+            class: nav_button_classes("left"),
+            aria: { label: "Go to previous month" }
+          ) do
+            render_chevron_left
+          end
+
+          if @show_dropdowns
+            render_dropdowns
+          else
+            div(class: "text-sm font-medium", data: { ui__calendar_target: "monthLabel" })
+          end
+
+          # Next button
+          button(
+            type: "button",
+            data: { action: "click->ui--calendar#nextMonth" },
+            class: nav_button_classes("right"),
+            aria: { label: "Go to next month" }
+          ) do
+            render_chevron_right
+          end
+        end
+      end
+
+      def render_dropdowns
+        div(class: "flex items-center gap-1") do
+          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
+            Date::MONTHNAMES.compact.each_with_index do |name, i|
+              option(value: i) { name }
+            end
+          end
+
+          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
+            current_year = Date.today.year
+            ((current_year - @year_range)..(current_year + 10)).each do |y|
+              option(value: y) { y.to_s }
+            end
+          end
+        end
+      end
+
+      def render_table
+        table(class: "w-full border-collapse space-y-1", role: "grid") do
+          thead { render_weekdays }
+          tbody(data: { ui__calendar_target: "grid" }, role: "rowgroup")
+        end
+      end
+
+      def render_weekdays
+        tr(class: "flex", data: { ui__calendar_target: "weekdaysHeader" }) do
+          ordered_weekdays.each do |day|
+            th(scope: "col", class: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]") { day }
+          end
+        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 render_chevron_left
+        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 |s|
+          s.path(d: "m15 18-6-6 6-6")
+        end
+      end
+
+      def render_chevron_right
+        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 |s|
+          s.path(d: "m9 18 6-6-6-6")
+        end
+      end
+    end

data/app/components/ui/card.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::Card < Phlex::HTML
+      include UI::CardBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**card_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/card_action.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardAction < Phlex::HTML
+      include UI::CardActionBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**card_action_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/card_content.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardContent < Phlex::HTML
+      include UI::CardContentBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**card_content_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/card_description.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardDescription < Phlex::HTML
+      include UI::CardDescriptionBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**card_description_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/card_footer.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardFooter < Phlex::HTML
+      include UI::CardFooterBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**card_footer_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/card_header.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardHeader < Phlex::HTML
+      include UI::CardHeaderBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**card_header_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/card_title.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CardTitle < Phlex::HTML
+      include UI::CardTitleBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**card_title_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/carousel.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+    class UI::Carousel < Phlex::HTML
+      def initialize(classes: nil, orientation: "horizontal", opts: {}, plugins: nil, **attributes)
+        @classes = classes
+        @orientation = orientation
+        @opts = opts
+        @plugins = plugins
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        extend UI::CarouselBehavior
+        div(**carousel_html_attributes, &block)
+      end
+    end

data/app/components/ui/carousel_content.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+    class UI::CarouselContent < Phlex::HTML
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        extend UI::CarouselContentBehavior
+        div(**carousel_content_html_attributes) do
+          div(**carousel_content_container_html_attributes, &block)
+        end
+      end
+    end

data/app/components/ui/carousel_item.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+    class UI::CarouselItem < Phlex::HTML
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        extend UI::CarouselItemBehavior
+        div(**carousel_item_html_attributes, &block)
+      end
+    end

data/app/components/ui/carousel_next.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    class UI::CarouselNext < Phlex::HTML
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        extend UI::CarouselNextBehavior
+        render UI::Button.new(**carousel_next_html_attributes, classes: carousel_next_classes, variant: :ghost, size: :icon) do
+          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: "size-4"
+          ) do |s|
+            s.path(d: "m9 18 6-6-6-6")
+          end
+          span(class: "sr-only") { "Next slide" }
+        end
+      end
+    end

data/app/components/ui/carousel_previous.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    class UI::CarouselPrevious < Phlex::HTML
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        extend UI::CarouselPreviousBehavior
+        render UI::Button.new(**carousel_previous_html_attributes, classes: carousel_previous_classes, variant: :ghost, size: :icon) do
+          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: "size-4"
+          ) do |s|
+            s.path(d: "m15 18-6-6 6-6")
+          end
+          span(class: "sr-only") { "Previous slide" }
+        end
+      end
+    end

data/app/components/ui/checkbox.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+    class UI::Checkbox < Phlex::HTML
+      include UI::CheckboxBehavior
+
+      def initialize(
+        name: nil,
+        id: nil,
+        value: nil,
+        checked: false,
+        disabled: false,
+        required: false,
+        classes: "",
+        **attributes
+      )
+        @name = name
+        @id = id
+        @value = value
+        @checked = checked
+        @disabled = disabled
+        @required = required
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(class: "relative inline-flex items-center justify-center") do
+          input(**checkbox_html_attributes)
+          checkmark_icon
+        end
+      end
+
+      private
+
+      def checkmark_icon
+        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: "size-3.5 pointer-events-none absolute text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity"
+        ) { |s| s.path(d: "M20 6 9 17l-5-5") }
+      end
+    end

data/app/components/ui/collapsible.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    class UI::Collapsible < Phlex::HTML
+      include UI::CollapsibleBehavior
+
+      def initialize(open: false, disabled: false, as_child: false, classes: "", **attributes)
+        @open = open
+        @disabled = disabled
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        collapsible_attrs = collapsible_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          yield(collapsible_attrs) if block_given?
+        else
+          div(**collapsible_attrs, &block)
+        end
+      end
+    end

data/app/components/ui/collapsible_content.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+    class UI::CollapsibleContent < Phlex::HTML
+      include UI::CollapsibleContentBehavior
+
+      def initialize(force_mount: false, classes: "", **attributes)
+        @force_mount = force_mount
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**collapsible_content_html_attributes.deep_merge(@attributes), &block)
+      end
+    end

data/app/components/ui/collapsible_trigger.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    class UI::CollapsibleTrigger < Phlex::HTML
+      include UI::CollapsibleTriggerBehavior
+
+      def initialize(as_child: false, classes: "", **attributes)
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        trigger_attrs = collapsible_trigger_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          yield(trigger_attrs) if block_given?
+        else
+          button(**trigger_attrs, type: "button", &block)
+        end
+      end
+    end

data/app/components/ui/combobox_wrapper.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+    # Wrapper - Phlex implementation
+    #
+    # Wrapper component that yields combobox attributes to be spread into a container component.
+    # Used to wrap Popover/Drawer/DropdownMenu with combobox selection functionality.
+    # Uses ComboboxBehavior concern for shared attribute generation logic.
+    #
+    # The combobox pattern provides:
+    # - Selection state management via Stimulus controller
+    # - Automatic text update when item is selected
+    # - Check icon visibility control (opacity-0/100)
+    # - Container closing after selection
+    #
+    # @example With Popover
+    #   render UI::Wrapper.new(value: "") do |combobox_attrs|
+    #     render UI::Popover.new(**combobox_attrs, placement: "bottom-start") do
+    #       render UI::PopoverTrigger.new(as_child: true) do |trigger_attrs|
+    #         render UI::Button.new(**trigger_attrs) do
+    #           span(**combobox_text_html_attributes) { "Select framework..." }
+    #         end
+    #       end
+    #
+    #       render UI::PopoverContent.new do
+    #         render UI::Command.new do
+    #           render UI::CommandItem.new(value: "next", **combobox_item_html_attributes("next")) do
+    #             span { "Next.js" }
+    #             svg(class: "ml-auto h-4 w-4 opacity-0") { path(d: "M20 6 9 17l-5-5") }
+    #           end
+    #         end
+    #       end
+    #     end
+    #   end
+    #
+    # @example With Drawer (responsive)
+    #   render UI::Wrapper.new(value: "done") do |combobox_attrs|
+    #     render UI::Drawer.new(**combobox_attrs) do
+    #       # ... drawer content
+    #     end
+    #   end
+    class UI::ComboboxWrapper < Phlex::HTML
+      include ComboboxBehavior
+
+      # @param value [String] Initial selected value (empty string for no selection)
+      # @param attributes [Hash] Additional HTML attributes to merge
+      def initialize(value: "", **attributes)
+        @value = value
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        # Yield combobox attributes to be spread into container component
+        # The block receives a hash of data attributes that should be passed
+        # to the wrapping container (Popover/Drawer/DropdownMenu)
+        yield(combobox_html_attributes.deep_merge(@attributes)) if block_given?
+      end
+    end

data/app/components/ui/command.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+    class UI::Command < Phlex::HTML
+      include UI::CommandBehavior
+
+      def initialize(loop: true, classes: "", **attributes)
+        @loop = loop
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**command_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/command_dialog.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    class UI::CommandDialog < Phlex::HTML
+      include UI::CommandDialogBehavior
+
+      def initialize(shortcut: "meta+j", classes: "", **attributes)
+        @shortcut = shortcut
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**command_dialog_html_attributes.deep_merge(@attributes)) do
+          render UI::Dialog.new(close_on_escape: true, close_on_overlay_click: true) do
+            render UI::DialogOverlay.new do
+              render UI::DialogContent.new(classes: command_dialog_content_classes) do
+                render UI::Command.new do
+                  yield if block_given?
+                end
+              end
+            end
+          end
+        end
+      end
+    end

data/app/components/ui/command_empty.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CommandEmpty < Phlex::HTML
+      include UI::CommandEmptyBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**command_empty_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/command_group.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    class UI::CommandGroup < Phlex::HTML
+      include UI::CommandGroupBehavior
+
+      def initialize(heading: nil, classes: "", **attributes)
+        @heading = heading
+        @heading_id = "command-group-#{SecureRandom.hex(4)}" if heading
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**command_group_html_attributes.deep_merge(@attributes)) do
+          if @heading
+            div(class: command_group_heading_classes, id: @heading_id) { @heading }
+          end
+          yield if block_given?
+        end
+      end
+    end