fernandes-ui 0.1.0

data/app/components/ui/scroll_area_thumb.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+    # Thumb - Phlex implementation
+    #
+    # Draggable scroll indicator inside the scrollbar.
+    #
+    # @example Default usage (automatically used by Scrollbar)
+    #   render UI::Thumb.new
+    class UI::ScrollAreaThumb < Phlex::HTML
+      include UI::ScrollAreaThumbBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, classes: "", **attributes)
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        thumb_attrs = scroll_area_thumb_html_attributes.deep_merge(@attributes)
+
+        # Add Stimulus target and action for drag
+        thumb_attrs[:data] ||= {}
+        thumb_attrs[:data][:"ui--scroll-area-target"] = "thumb"
+        thumb_attrs[:data][:action] = "pointerdown->ui--scroll-area#startDrag"
+
+        if @as_child && block_given?
+          # asChild mode: yield attributes to block
+          yield(thumb_attrs)
+        else
+          # Default mode: render as empty div
+          div(**thumb_attrs)
+        end
+      end
+    end

data/app/components/ui/scroll_area_viewport.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+    # Viewport - Phlex implementation
+    #
+    # Scrollable content container with hidden native scrollbar.
+    #
+    # @example Basic usage (automatically used by ScrollArea)
+    #   render UI::Viewport.new do
+    #     # Content here
+    #   end
+    class UI::ScrollAreaViewport < Phlex::HTML
+      include UI::ScrollAreaViewportBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, classes: "", **attributes)
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        viewport_attrs = scroll_area_viewport_html_attributes.deep_merge(@attributes)
+
+        # Add Stimulus target
+        viewport_attrs[:data] ||= {}
+        viewport_attrs[:data][:"ui--scroll-area-target"] = "viewport"
+
+        if @as_child && block_given?
+          # asChild mode: yield attributes to block
+          yield(viewport_attrs)
+        else
+          # Default mode: render as div with inner table div
+          div(**viewport_attrs) do
+            div(style: "min-width: 100%; display: table;", &block)
+          end
+        end
+      end
+    end

data/app/components/ui/select.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+    # Select - Phlex implementation
+    #
+    # A custom select component with keyboard navigation, scrollable viewport, and form integration.
+    # Root container that wraps trigger, content, and items.
+    #
+    # @example Basic usage
+    #   render UI::Select.new(value: "apple") do
+    #     render UI::Trigger.new(placeholder: "Select a fruit...")
+    #     render UI::Content.new do
+    #       render UI::Item.new(value: "apple") { "Apple" }
+    #       render UI::Item.new(value: "banana") { "Banana" }
+    #     end
+    #   end
+    #
+    # @example With groups
+    #   render UI::Select.new do
+    #     render UI::Trigger.new(placeholder: "Select timezone...")
+    #     render UI::Content.new do
+    #       render UI::Group.new do
+    #         render UI::Label.new { "North America" }
+    #         render UI::Item.new(value: "america/new_york") { "Eastern Time" }
+    #       end
+    #     end
+    #   end
+    class UI::Select < Phlex::HTML
+      include UI::SelectBehavior
+
+      # @param value [String] Currently selected value
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(value: nil, classes: "", **attributes)
+        @value = value
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**select_html_attributes.deep_merge(@attributes), &block)
+      end
+    end

data/app/components/ui/select_content.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # Select Content - Phlex implementation
+    #
+    # Dropdown container that holds items and groups.
+    # Includes scroll buttons and viewport.
+    #
+    # @example Basic usage
+    #   render UI::Content.new do
+    #     render UI::Item.new(value: "apple") { "Apple" }
+    #     render UI::Item.new(value: "banana") { "Banana" }
+    #   end
+    class UI::SelectContent < Phlex::HTML
+      include UI::SelectContentBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**select_content_html_attributes.deep_merge(@attributes)) do
+          # Scroll up button
+          render UI::ScrollUpButton.new
+
+          # Viewport with scrollable content
+          div(
+            data_radix_select_viewport: true,
+            data_ui__select_target: "viewport",
+            data_action: "scroll->ui--select#handleScroll",
+            class: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:ring-ring/50 p-1",
+            style: "overflow-y: auto; overflow-x: hidden;"
+          ) do
+            yield if block_given?
+          end
+
+          # Scroll down button
+          render UI::ScrollDownButton.new
+        end
+      end
+    end

data/app/components/ui/select_group.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+    # Select Group - Phlex implementation
+    #
+    # Container for grouping select items with a label.
+    # Supports asChild pattern for composition.
+    #
+    # @example Basic usage
+    #   render UI::Group.new do
+    #     render UI::Label.new { "North America" }
+    #     render UI::Item.new(value: "america/new_york") { "Eastern Time" }
+    #     render UI::Item.new(value: "america/chicago") { "Central Time" }
+    #   end
+    class UI::SelectGroup < Phlex::HTML
+      include UI::SelectGroupBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, classes: "", **attributes)
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        group_attrs = select_group_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          # asChild mode: yield attributes to block
+          yield(group_attrs) if block_given?
+        else
+          # Default mode: render as div
+          div(**group_attrs, &block)
+        end
+      end
+    end

data/app/components/ui/select_item.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+    # Select Item - Phlex implementation
+    #
+    # Individual selectable option in the dropdown.
+    # Supports asChild pattern for composition.
+    #
+    # @example Basic usage
+    #   render UI::Item.new(value: "apple") { "Apple" }
+    #
+    # @example Disabled item
+    #   render UI::Item.new(value: "angular", disabled: true) { "Angular (Coming Soon)" }
+    #
+    # @example With asChild (as link)
+    #   render UI::Item.new(value: "dashboard", as_child: true) do |attrs|
+    #     a(href: "#dashboard", **attrs, class: "flex items-center gap-2") do
+    #       span(class: "flex-1") { "Dashboard" }
+    #     end
+    #   end
+    class UI::SelectItem < Phlex::HTML
+      include UI::SelectItemBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @param value [String] Value of this option
+      # @param disabled [Boolean] Whether the item is disabled
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, value: nil, disabled: false, classes: "", **attributes)
+        @as_child = as_child
+        @value = value
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        item_attrs = select_item_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          # asChild mode: yield attributes to block
+          yield(item_attrs) if block_given?
+        else
+          # Default mode: render as div
+          div(**item_attrs) do
+            span(class: "flex-1") do
+              yield if block_given?
+            end
+
+            # Checkmark icon - hidden by default, shown when selected
+            svg(
+              data_ui__select_target: "itemCheck",
+              class: "ml-auto size-4 opacity-0 transition-opacity",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              stroke_width: "2",
+              stroke_linecap: "round",
+              stroke_linejoin: "round"
+            ) do |s|
+              s.path(d: "M20 6 9 17l-5-5")
+            end
+          end
+        end
+      end
+    end

data/app/components/ui/select_label.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+    # Select Label - Phlex implementation
+    #
+    # Label for a group of select items.
+    # Supports asChild pattern for composition.
+    #
+    # @example Basic usage
+    #   render UI::Label.new { "North America" }
+    class UI::SelectLabel < Phlex::HTML
+      include UI::SelectLabelBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, classes: "", **attributes)
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        label_attrs = select_label_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          # asChild mode: yield attributes to block
+          yield(label_attrs) if block_given?
+        else
+          # Default mode: render as div
+          div(**label_attrs, &block)
+        end
+      end
+    end

data/app/components/ui/select_scroll_down_button.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+    # Select Scroll Down Button - Phlex implementation
+    #
+    # Button that appears when content is scrollable downward.
+    # Automatically hidden when at bottom of list.
+    #
+    # @example Default usage (no customization needed)
+    #   render UI::ScrollDownButton.new
+    class UI::SelectScrollDownButton < Phlex::HTML
+      include UI::SelectScrollDownButtonBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, classes: "", **attributes)
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        button_attrs = select_scroll_down_button_html_attributes.deep_merge(@attributes)
+
+        if @as_child && block_given?
+          # asChild mode: yield attributes to block
+          yield(button_attrs)
+        else
+          # Default mode: render as div with chevron down icon
+          div(**button_attrs) do
+            svg(
+              class: "size-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              stroke_width: "2",
+              stroke_linecap: "round",
+              stroke_linejoin: "round"
+            ) do |s|
+              s.path(d: "m6 9 6 6 6-6")
+            end
+          end
+        end
+      end
+    end

data/app/components/ui/select_scroll_up_button.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+    # Select Scroll Up Button - Phlex implementation
+    #
+    # Button that appears when content is scrollable upward.
+    # Automatically hidden when at top of list.
+    #
+    # @example Default usage (no customization needed)
+    #   render UI::ScrollUpButton.new
+    class UI::SelectScrollUpButton < Phlex::HTML
+      include UI::SelectScrollUpButtonBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, classes: "", **attributes)
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        button_attrs = select_scroll_up_button_html_attributes.deep_merge(@attributes)
+
+        if @as_child && block_given?
+          # asChild mode: yield attributes to block
+          yield(button_attrs)
+        else
+          # Default mode: render as div with chevron up icon
+          div(**button_attrs) do
+            svg(
+              class: "size-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              stroke_width: "2",
+              stroke_linecap: "round",
+              stroke_linejoin: "round"
+            ) do |s|
+              s.path(d: "m18 15-6-6-6 6")
+            end
+          end
+        end
+      end
+    end

data/app/components/ui/select_trigger.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+    # Select Trigger - Phlex implementation
+    #
+    # Button that opens the select dropdown.
+    # Supports asChild pattern for composition.
+    #
+    # @example Default button
+    #   render UI::Trigger.new(placeholder: "Select a fruit...")
+    #
+    # @example With asChild (custom button)
+    #   render UI::Trigger.new(as_child: true, placeholder: "Select plan...") do |attrs|
+    #     button(**attrs, class: "custom-button") do
+    #       span(data_ui__select_target: "valueDisplay") { "Select plan..." }
+    #     end
+    #   end
+    class UI::SelectTrigger < Phlex::HTML
+      include UI::SelectTriggerBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering button
+      # @param placeholder [String] Placeholder text when no value selected
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, placeholder: "Select...", classes: "", **attributes)
+        @as_child = as_child
+        @placeholder = placeholder
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        trigger_attrs = select_trigger_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          # asChild mode: yield attributes to block
+          yield(trigger_attrs) if block_given?
+        else
+          # Default mode: render as button
+          button(**trigger_attrs) do
+            span(data_ui__select_target: "valueDisplay") { @placeholder }
+          end
+        end
+      end
+    end

data/app/components/ui/separator.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+    # Separator - Phlex implementation
+    #
+    # Visually or semantically separates content.
+    # Uses SeparatorBehavior module for shared styling logic.
+    #
+    # Based on shadcn/ui Separator: https://ui.shadcn.com/docs/components/separator
+    # Based on Radix UI Separator: https://www.radix-ui.com/primitives/docs/components/separator
+    #
+    # @example Horizontal separator (default)
+    #   render UI::Separator.new
+    #
+    # @example Vertical separator
+    #   render UI::Separator.new(orientation: :vertical)
+    #
+    # @example Semantic separator (for screen readers)
+    #   render UI::Separator.new(decorative: false)
+    #
+    # @example With custom classes
+    #   render UI::Separator.new(classes: "my-4")
+    class UI::Separator < Phlex::HTML
+      include UI::SeparatorBehavior
+
+      # @param orientation [Symbol, String] Direction of the separator (:horizontal, :vertical)
+      # @param decorative [Boolean] Whether the separator is purely decorative (true) or has semantic meaning (false)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(orientation: :horizontal, decorative: true, classes: "", **attributes)
+        @orientation = orientation
+        @decorative = decorative
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(**separator_html_attributes.deep_merge(@attributes))
+      end
+    end

data/app/components/ui/sheet.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+    class UI::Sheet < Phlex::HTML
+      include UI::SheetBehavior
+
+      def initialize(open: false, close_on_escape: true, close_on_overlay_click: true, classes: nil, **attributes)
+        @open = open
+        @close_on_escape = close_on_escape
+        @close_on_overlay_click = close_on_overlay_click
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**sheet_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/sheet_close.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+    class UI::SheetClose < Phlex::HTML
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering button
+      # @param variant [Symbol] Button variant (passed to Button component when not using asChild)
+      # @param size [Symbol] Button size (passed to Button component when not using asChild)
+      # @param classes [String] Additional CSS classes
+      def initialize(as_child: false, variant: :outline, size: :default, classes: nil, **attributes)
+        @as_child = as_child
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        close_attrs = {
+          data: { action: "click->ui--dialog#close" },
+          **@attributes
+        }
+
+        if @as_child
+          # Yield attributes to block - child must accept and use them
+          yield(close_attrs) if block_given?
+        else
+          # Default: render as Button component
+          render UI::Button.new(
+            variant: @variant,
+            size: @size,
+            classes: @classes,
+            **close_attrs
+          ) do
+            yield if block_given?
+          end
+        end
+      end
+    end

data/app/components/ui/sheet_content.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+    class UI::SheetContent < Phlex::HTML
+      include UI::SheetContentBehavior
+
+      # @param side [String] Position of the sheet: "top", "right", "bottom", "left"
+      # @param open [Boolean] Whether the sheet is open
+      # @param show_close [Boolean] Whether to show the built-in close button
+      # @param classes [String] Additional CSS classes
+      def initialize(side: "right", open: false, show_close: true, classes: nil, **attributes)
+        @side = side
+        @open = open
+        @show_close = show_close
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**sheet_content_html_attributes) do
+          yield if block_given?
+
+          # Built-in close button (like shadcn)
+          if @show_close
+            button(
+              class: sheet_content_close_button_classes,
+              data: { action: "click->ui--dialog#close" }
+            ) do
+              render_x_icon
+              span(class: "sr-only") { "Close" }
+            end
+          end
+        end
+      end
+
+      private
+
+      # Render X icon as inline SVG (Lucide icon)
+      def render_x_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-4"
+        ) do |s|
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
+        end
+      end
+    end

data/app/components/ui/sheet_description.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+    class UI::SheetDescription < Phlex::HTML
+      def initialize(classes: nil)
+        @classes = classes
+      end
+
+      def view_template(&block)
+        p(class: description_classes) do
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def description_classes
+        TailwindMerge::Merger.new.merge([
+          "text-muted-foreground text-sm",
+          @classes
+        ].compact.join(" "))
+      end
+    end

data/app/components/ui/sheet_footer.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+    class UI::SheetFooter < Phlex::HTML
+      include UI::SheetFooterBehavior
+
+      def initialize(classes: nil)
+        @classes = classes
+      end
+
+      def view_template(&block)
+        div(**sheet_footer_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/sheet_header.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+    class UI::SheetHeader < Phlex::HTML
+      include UI::SheetHeaderBehavior
+
+      def initialize(classes: nil)
+        @classes = classes
+      end
+
+      def view_template(&block)
+        div(**sheet_header_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/sheet_overlay.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    class UI::SheetOverlay < Phlex::HTML
+      include UI::SheetOverlayBehavior
+
+      def initialize(open: false, classes: nil, **attributes)
+        @open = open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**sheet_overlay_container_html_attributes) do
+          div(**sheet_overlay_html_attributes)
+          yield if block_given?
+        end
+      end
+    end