fernandes-ui 0.1.0

data/app/components/ui/aspect_ratio.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # AspectRatio - Phlex implementation
+    #
+    # Displays content within a desired aspect ratio.
+    # Uses AspectRatioBehavior module for shared styling logic.
+    #
+    # @example Basic usage with 16:9 ratio
+    #   render UI::AspectRatio.new(ratio: 16.0/9.0) do
+    #     img src: "image.jpg", class: "h-full w-full object-cover"
+    #   end
+    class UI::AspectRatio < Phlex::HTML
+      include UI::AspectRatioBehavior
+
+      # @param ratio [Float] The desired aspect ratio (width/height, e.g., 16/9)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(ratio: 1.0, classes: "", **attributes)
+        @ratio = ratio
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**aspect_ratio_html_attributes) do
+          div(**aspect_ratio_padding_attributes)
+          div(**aspect_ratio_content_attributes) do
+            yield if block_given?
+          end
+        end
+      end
+    end

data/app/components/ui/avatar.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+    # Avatar - Phlex implementation
+    #
+    # Displays an image element with a fallback for representing users.
+    # Uses AvatarBehavior module for shared styling logic.
+    #
+    # Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
+    # Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
+    #
+    # @example Basic usage
+    #   render UI::Avatar.new do
+    #     render UI::Image.new(src: "https://github.com/shadcn.png", alt: "User")
+    #     render UI::Fallback.new { "CN" }
+    #   end
+    class UI::Avatar < Phlex::HTML
+      include UI::AvatarBehavior
+
+      # @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)
+        span(**avatar_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/avatar_fallback.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # Avatar Fallback - Phlex implementation
+    #
+    # Displays fallback content when the image hasn't loaded or fails to load.
+    # Uses AvatarFallbackBehavior module for shared styling logic.
+    #
+    # Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
+    # Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
+    #
+    # @example Basic usage
+    #   render UI::Fallback.new { "CN" }
+    #
+    # @example With custom styling
+    #   render UI::Fallback.new(classes: "bg-primary text-primary-foreground") do
+    #     "AB"
+    #   end
+    class UI::AvatarFallback < Phlex::HTML
+      include UI::AvatarFallbackBehavior
+
+      # @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)
+        span(**avatar_fallback_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/avatar_image.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # Avatar Image - Phlex implementation
+    #
+    # Displays the avatar image. Only renders when it has loaded successfully.
+    # Uses AvatarImageBehavior module for shared styling logic.
+    #
+    # Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
+    # Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
+    #
+    # @example Basic usage
+    #   render UI::Image.new(
+    #     src: "https://github.com/shadcn.png",
+    #     alt: "User avatar"
+    #   )
+    class UI::AvatarImage < Phlex::HTML
+      include UI::AvatarImageBehavior
+
+      # @param src [String] Image source URL
+      # @param alt [String] Alternative text for the image
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(src:, alt: "", classes: "", **attributes)
+        @src = src
+        @alt = alt
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        img(**avatar_image_html_attributes.deep_merge(@attributes))
+      end
+    end

data/app/components/ui/badge.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+    # Badge - Phlex implementation
+    #
+    # Displays a badge or a component that looks like a badge.
+    # Uses BadgeBehavior module for shared styling logic.
+    #
+    # Based on shadcn/ui Badge: https://ui.shadcn.com/docs/components/badge
+    #
+    # @example Basic usage
+    #   render UI::Badge.new { "New" }
+    #
+    # @example With variant
+    #   render UI::Badge.new(variant: :destructive) { "Error" }
+    #
+    # @example As a link
+    #   a(href: "/notifications", class: "no-underline") do
+    #     render UI::Badge.new { "5" }
+    #   end
+    class UI::Badge < Phlex::HTML
+      include UI::BadgeBehavior
+
+      # @param variant [Symbol, String] Visual style variant (:default, :secondary, :destructive, :outline)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(variant: :default, classes: "", **attributes)
+        @variant = variant
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        span(**badge_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/blockquote.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UI
+  class UI::Blockquote < Phlex::HTML
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def view_template(&block)
+      extend UI::BlockquoteBehavior
+      blockquote(**blockquote_html_attributes.merge(@attributes), &block)
+    end
+  end
+end

data/app/components/ui/breadcrumb.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+    # Breadcrumb - Phlex implementation
+    #
+    # A navigation breadcrumb component for displaying hierarchical navigation.
+    # Uses BreadcrumbBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Breadcrumb.new do
+    #     render UI::List.new do
+    #       render UI::Item.new do
+    #         render UI::Link.new(href: "/") { "Home" }
+    #       end
+    #     end
+    #   end
+    class UI::Breadcrumb < Phlex::HTML
+      include UI::BreadcrumbBehavior
+
+      # @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)
+        nav(**breadcrumb_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/breadcrumb_ellipsis.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+    # Ellipsis - Phlex implementation
+    #
+    # Indicator for collapsed/hidden breadcrumb items.
+    # Uses BreadcrumbEllipsisBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Ellipsis.new
+    class UI::BreadcrumbEllipsis < Phlex::HTML
+      include UI::BreadcrumbEllipsisBehavior
+
+      # @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)
+        span(**breadcrumb_ellipsis_html_attributes) do
+          if block_given?
+            yield
+          else
+            ellipsis_icon
+            screen_reader_text
+          end
+        end
+      end
+
+      private
+
+      def ellipsis_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: "lucide lucide-ellipsis h-4 w-4"
+        ) do |s|
+          s.circle(cx: "12", cy: "12", r: "1")
+          s.circle(cx: "19", cy: "12", r: "1")
+          s.circle(cx: "5", cy: "12", r: "1")
+        end
+      end
+
+      def screen_reader_text
+        span(class: "sr-only") { "More" }
+      end
+    end

data/app/components/ui/breadcrumb_item.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Item - Phlex implementation
+    #
+    # Individual breadcrumb entry within the breadcrumb list.
+    # Uses BreadcrumbItemBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Item.new do
+    #     render UI::Link.new(href: "/") { "Home" }
+    #   end
+    class UI::BreadcrumbItem < Phlex::HTML
+      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 view_template(&block)
+        li(**breadcrumb_item_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/breadcrumb_link.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Link - Phlex implementation
+    #
+    # Clickable breadcrumb link for navigation.
+    # Uses BreadcrumbLinkBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Link.new(href: "/") { "Home" }
+    class UI::BreadcrumbLink < Phlex::HTML
+      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 view_template(&block)
+        a(**breadcrumb_link_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/breadcrumb_list.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # List - Phlex implementation
+    #
+    # Container for breadcrumb items, rendered as an ordered list.
+    # Uses BreadcrumbListBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::List.new do
+    #     render UI::Item.new { "Item content" }
+    #   end
+    class UI::BreadcrumbList < Phlex::HTML
+      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 view_template(&block)
+        ol(**breadcrumb_list_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/breadcrumb_page.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Page - Phlex implementation
+    #
+    # Current page indicator (non-clickable) for breadcrumbs.
+    # Uses BreadcrumbPageBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Page.new { "Current Page" }
+    class UI::BreadcrumbPage < Phlex::HTML
+      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 view_template(&block)
+        span(**breadcrumb_page_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/breadcrumb_separator.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+    # Separator - Phlex implementation
+    #
+    # Visual divider between breadcrumb items with default chevron icon.
+    # Uses BreadcrumbSeparatorBehavior concern for shared styling logic.
+    #
+    # @example Default separator
+    #   render UI::Separator.new
+    #
+    # @example Custom separator
+    #   render UI::Separator.new { "/" }
+    class UI::BreadcrumbSeparator < Phlex::HTML
+      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 view_template(&block)
+        li(**breadcrumb_separator_html_attributes) do
+          if block_given?
+            yield
+          else
+            default_separator_icon
+          end
+        end
+      end
+
+      private
+
+      def default_separator_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: "lucide lucide-chevron-right"
+        ) do |s|
+          s.path(d: "m9 18 6-6-6-6")
+        end
+      end
+    end

data/app/components/ui/button.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+    # Button - Phlex implementation
+    #
+    # A versatile button component with multiple variants and sizes.
+    # Uses ButtonBehavior module for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Button.new { "Click me" }
+    #
+    # @example With variant and size
+    #   render UI::Button.new(variant: "destructive", size: "lg") { "Delete" }
+    #
+    # @example Disabled state
+    #   render UI::Button.new(disabled: true) { "Disabled" }
+    class UI::Button < Phlex::HTML
+      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 view_template(&block)
+        all_attributes = button_html_attributes
+
+        # Merge classes with TailwindMerge before deep_merge
+        if @attributes.key?(:class)
+          button_class = all_attributes[:class] || ""
+          attr_class = @attributes[:class] || ""
+          merged_class = TailwindMerge::Merger.new.merge([button_class, attr_class].join(" "))
+          all_attributes = all_attributes.merge(class: merged_class)
+        end
+
+        # Deep merge other attributes (excluding class which we already handled)
+        all_attributes = all_attributes.deep_merge(@attributes.except(:class))
+
+        button(**all_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/button_group.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+    # ButtonGroup - Phlex 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::ButtonGroup.new do
+    #     render UI::Button.new(variant: :outline) { "Button 1" }
+    #     render UI::Button.new(variant: :outline) { "Button 2" }
+    #   end
+    #
+    # @example Vertical button group
+    #   render UI::ButtonGroup.new(orientation: :vertical) do
+    #     render UI::Button.new(variant: :outline, size: :icon) { "+" }
+    #     render UI::Button.new(variant: :outline, size: :icon) { "-" }
+    #   end
+    #
+    # @example Nested button groups
+    #   render UI::ButtonGroup.new do
+    #     render UI::ButtonGroup.new do
+    #       render UI::Button.new(variant: :outline) { "1" }
+    #       render UI::Button.new(variant: :outline) { "2" }
+    #     end
+    #     render UI::ButtonGroup.new do
+    #       render UI::Button.new(variant: :outline) { "Previous" }
+    #       render UI::Button.new(variant: :outline) { "Next" }
+    #     end
+    #   end
+    class UI::ButtonGroup < Phlex::HTML
+      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 view_template(&block)
+        div(**button_group_html_attributes.deep_merge(@attributes), &block)
+      end
+    end

data/app/components/ui/button_group_separator.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # Separator - Phlex implementation
+    #
+    # Visually divides buttons within a button group.
+    # Extends UI::Separator with button group specific styling.
+    #
+    # Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
+    #
+    # @example Basic separator
+    #   render UI::ButtonGroup.new do
+    #     render UI::Button.new(variant: :secondary) { "Copy" }
+    #     render UI::Separator.new
+    #     render UI::Button.new(variant: :secondary) { "Paste" }
+    #   end
+    class UI::ButtonGroupSeparator < UI::Separator
+      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 view_template
+        div(**separator_html_attributes.deep_merge(@attributes))
+      end
+    end

data/app/components/ui/button_group_text.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+    # Text - Phlex implementation
+    #
+    # Displays text within a button group.
+    # Uses TextBehavior module for shared styling logic.
+    # Supports asChild pattern for rendering custom components.
+    #
+    # Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
+    #
+    # @example Basic text
+    #   render UI::ButtonGroup.new do
+    #     render UI::Text.new { "Label" }
+    #     render UI::Button.new(variant: :outline) { "Button" }
+    #   end
+    #
+    # @example With asChild (render as label)
+    #   render UI::ButtonGroup.new do
+    #     render UI::Text.new(as_child: true) do |attrs|
+    #       label(**attrs, for: "name") { "Name" }
+    #     end
+    #     input(type: "text", id: "name")
+    #   end
+    class UI::ButtonGroupText < Phlex::HTML
+      include UI::ButtonGroupTextBehavior
+
+      # @param as_child [Boolean] Whether to yield attributes to a child component
+      # @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)
+        if @as_child
+          # Yield attributes to the block for custom rendering
+          yield(text_html_attributes.deep_merge(@attributes))
+        else
+          # Render as a div
+          div(**text_html_attributes.deep_merge(@attributes), &block)
+        end
+      end
+    end