shadcn-rails 0.1.0

data/app/components/shadcn/navigation_menu_list_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Container for navigation menu items
+  class NavigationMenuListComponent < BaseComponent
+    BASE_CLASSES = "group flex flex-1 list-none items-center justify-center space-x-1"
+
+    renders_many :items, lambda { |**options|
+      NavigationMenuItemComponent.new(**options)
+    }
+
+    def call
+      content_tag(:ul, list_content, list_attributes)
+    end
+
+    private
+
+    def list_content
+      safe_join(items)
+    end
+
+    def list_attributes
+      {
+        class: cn(BASE_CLASSES, class_name),
+        "data-shadcn--navigation-menu-target": "list"
+      }.merge(html_options).compact
+    end
+  end
+end

data/app/components/shadcn/navigation_menu_trigger_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Trigger button that opens navigation menu content
+  class NavigationMenuTriggerComponent < BaseComponent
+    TRIGGER_CLASSES = [
+      "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2",
+      "text-sm font-medium transition-colors",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground focus:outline-none",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "data-[state=open]:bg-accent/50"
+    ].join(" ").freeze
+
+    def call
+      content_tag(:button, trigger_content, trigger_attributes)
+    end
+
+    private
+
+    def trigger_content
+      safe_join([
+        content,
+        chevron_icon
+      ])
+    end
+
+    def chevron_icon
+      content_tag(:svg, chevron_path,
+        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: "relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180",
+        "aria-hidden": "true"
+      )
+    end
+
+    def chevron_path
+      content_tag(:path, nil, d: "m6 9 6 6 6-6")
+    end
+
+    def trigger_attributes
+      {
+        class: cn(TRIGGER_CLASSES, class_name),
+        type: "button",
+        "data-shadcn--navigation-menu-target": "trigger",
+        "data-action": "click->shadcn--navigation-menu#toggle mouseenter->shadcn--navigation-menu#hoverOpen",
+        "aria-expanded": "false",
+        "data-state": "closed"
+      }.merge(html_options).compact
+    end
+  end
+end

data/app/components/shadcn/pagination_component.rb

@@ -0,0 +1,195 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Pagination component for navigating paged content
+  # Matches shadcn/ui Pagination component
+  #
+  # Supports three usage patterns:
+  #
+  # 1. Slot-based API (full control):
+  #   <%= render Shadcn::PaginationComponent.new do |pagination| %>
+  #     <% pagination.with_pagination_content do |content| %>
+  #       <% content.with_previous(href: "/page/1") %>
+  #       <% content.with_item(href: "/page/1") { "1" } %>
+  #       <% content.with_item(href: "/page/2", active: true) { "2" } %>
+  #       <% content.with_item(href: "/page/3") { "3" } %>
+  #       <% content.with_ellipse %>
+  #       <% content.with_next_page(href: "/page/3") %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # 2. Collection-based API (Kaminari/will_paginate):
+  #   <%= render Shadcn::PaginationComponent.new(collection: @posts) %>
+  #
+  # 3. Pagy-based API:
+  #   <%= render Shadcn::PaginationComponent.new(pagy: @pagy) %>
+  #
+  class PaginationComponent < BaseComponent
+    BASE_CLASSES = "mx-auto flex w-full justify-center"
+
+    renders_one :pagination_content, lambda { |**options|
+      PaginationContentComponent.new(**options)
+    }
+
+    # @param collection [Object, nil] Kaminari or will_paginate collection
+    # @param pagy [Object, nil] Pagy object
+    # @param url_builder [Proc, nil] Lambda to generate page URLs, receives page number
+    # @param window [Integer] Number of pages to show around current page
+    def initialize(collection: nil, pagy: nil, url_builder: nil, window: 2, **options)
+      super(**options)
+      @collection = collection
+      @pagy = pagy
+      @url_builder = url_builder || ->(page) { "?page=#{page}" }
+      @window = window
+    end
+
+    def call
+      if auto_generate?
+        return "" if total_pages <= 1
+
+        content_tag(:nav, auto_generated_content, pagination_attributes)
+      else
+        content_tag(:nav, build_pagination_content, pagination_attributes)
+      end
+    end
+
+    private
+
+    def auto_generate?
+      @collection.present? || @pagy.present?
+    end
+
+    def auto_generated_content
+      pagination_data = extract_pagination_data
+      series = generate_page_series(pagination_data[:current_page], pagination_data[:total_pages])
+
+      # Build the items for the content component
+      items_html = []
+
+      # Previous button
+      prev_href = pagination_data[:prev_page] ? @url_builder.call(pagination_data[:prev_page]) : nil
+      items_html << PaginationPreviousComponent.new(href: prev_href, disabled: pagination_data[:prev_page].nil?).render_in(view_context)
+
+      # Page items
+      series.each do |item|
+        case item
+        when :gap
+          items_html << PaginationEllipsisComponent.new.render_in(view_context)
+        when Integer
+          items_html << PaginationItemComponent.new(href: @url_builder.call(item)).render_in(view_context) { item.to_s }
+        when String # Current page (string format)
+          page_num = item.to_i
+          items_html << PaginationItemComponent.new(href: @url_builder.call(page_num), active: true).render_in(view_context) { item }
+        end
+      end
+
+      # Next button
+      next_href = pagination_data[:next_page] ? @url_builder.call(pagination_data[:next_page]) : nil
+      items_html << PaginationNextComponent.new(href: next_href, disabled: pagination_data[:next_page].nil?).render_in(view_context)
+
+      content_tag(:ul, safe_join(items_html), class: "flex flex-row items-center gap-1")
+    end
+
+    def extract_pagination_data
+      obj = @pagy || @collection
+
+      # Pagy detection
+      if defined?(::Pagy) && obj.is_a?(::Pagy)
+        {
+          current_page: obj.page,
+          total_pages: obj.pages,
+          prev_page: obj.prev,
+          next_page: obj.next
+        }
+      # Duck typing for Pagy-like objects
+      elsif obj.respond_to?(:page) && obj.respond_to?(:pages) && obj.respond_to?(:prev) && obj.respond_to?(:next)
+        {
+          current_page: obj.page,
+          total_pages: obj.pages,
+          prev_page: obj.prev,
+          next_page: obj.next
+        }
+      # Kaminari detection
+      elsif obj.respond_to?(:current_page) && obj.respond_to?(:total_pages) && obj.respond_to?(:prev_page)
+        {
+          current_page: obj.current_page,
+          total_pages: obj.total_pages,
+          prev_page: obj.prev_page,
+          next_page: obj.next_page
+        }
+      # will_paginate detection
+      elsif obj.respond_to?(:current_page) && obj.respond_to?(:total_pages) && obj.respond_to?(:previous_page)
+        {
+          current_page: obj.current_page,
+          total_pages: obj.total_pages,
+          prev_page: obj.previous_page,
+          next_page: obj.next_page
+        }
+      # Generic fallback
+      elsif obj.respond_to?(:current_page) && obj.respond_to?(:total_pages)
+        current = obj.current_page
+        total = obj.total_pages
+        {
+          current_page: current,
+          total_pages: total,
+          prev_page: current > 1 ? current - 1 : nil,
+          next_page: current < total ? current + 1 : nil
+        }
+      else
+        raise ArgumentError, "Expected a paginated collection (Kaminari/will_paginate) or Pagy object"
+      end
+    end
+
+    def total_pages
+      extract_pagination_data[:total_pages]
+    end
+
+    def generate_page_series(current_page, total_pages)
+      return [current_page.to_s] if total_pages <= 1
+
+      series = []
+
+      # Always include first page
+      series << (current_page == 1 ? "1" : 1)
+
+      # Calculate range around current page
+      range_start = [2, current_page - @window].max
+      range_end = [total_pages - 1, current_page + @window].min
+
+      # Add gap before range if needed
+      series << :gap if range_start > 2
+
+      # Add pages in range
+      (range_start..range_end).each do |page|
+        next if page == 1 || page == total_pages
+
+        series << (page == current_page ? page.to_s : page)
+      end
+
+      # Add gap after range if needed
+      series << :gap if range_end < total_pages - 1
+
+      # Always include last page if more than 1 page
+      if total_pages > 1
+        series << (current_page == total_pages ? total_pages.to_s : total_pages)
+      end
+
+      series
+    end
+
+    def build_pagination_content
+      pagination_content || ""
+    end
+
+    def pagination_attributes
+      attrs = {
+        role: "navigation",
+        "aria-label": "pagination",
+        class: merge_classes(BASE_CLASSES)
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/pagination_content_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Pagination Content component - container for items
+  # Uses a single polymorphic slot to maintain ordering between items and ellipses
+  class PaginationContentComponent < BaseComponent
+    BASE_CLASSES = "flex flex-row items-center gap-1"
+
+    renders_one :previous, lambda { |href: nil, disabled: false, **options|
+      PaginationPreviousComponent.new(href: href, disabled: disabled, **options)
+    }
+
+    renders_one :next_page, lambda { |href: nil, disabled: false, **options|
+      PaginationNextComponent.new(href: href, disabled: disabled, **options)
+    }
+
+    # Single slot for all page elements (items and ellipses) to maintain order
+    renders_many :elements, types: {
+      item: {
+        renders: lambda { |href: nil, active: false, disabled: false, **options|
+          PaginationItemComponent.new(href: href, active: active, disabled: disabled, **options)
+        },
+        as: :item
+      },
+      ellipse: {
+        renders: lambda { |**options|
+          PaginationEllipsisComponent.new(**options)
+        },
+        as: :ellipse
+      }
+    }
+
+    def call
+      content_tag(:ul, list_content, class: merge_classes(BASE_CLASSES))
+    end
+
+    private
+
+    def list_content
+      safe_join([
+        previous,
+        elements,
+        next_page
+      ].flatten.compact)
+    end
+  end
+end

data/app/components/shadcn/pagination_ellipsis_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Pagination Ellipsis component
+  class PaginationEllipsisComponent < BaseComponent
+    BASE_CLASSES = "flex h-9 w-9 items-center justify-center"
+
+    def call
+      content_tag(:li) do
+        content_tag(:span, ellipsis_content, class: merge_classes(BASE_CLASSES), "aria-hidden": "true")
+      end
+    end
+
+    private
+
+    def ellipsis_content
+      content_tag(:svg,
+        content_tag(:circle, nil, cx: "12", cy: "12", r: "1") +
+        content_tag(:circle, nil, cx: "19", cy: "12", r: "1") +
+        content_tag(:circle, nil, cx: "5", cy: "12", r: "1"),
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        class: "h-4 w-4"
+      ) + content_tag(:span, "More pages", class: "sr-only")
+    end
+  end
+end

data/app/components/shadcn/pagination_item_component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Pagination Item component - wrapper for links
+  class PaginationItemComponent < BaseComponent
+    LINK_CLASSES = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9"
+    ACTIVE_CLASSES = "border border-input bg-background shadow-sm"
+
+    def initialize(href: nil, active: false, disabled: false, **options)
+      super(**options)
+      @href = href
+      @active = active
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:li) do
+        link_element
+      end
+    end
+
+    private
+
+    def link_element
+      classes = cn(LINK_CLASSES, @active ? ACTIVE_CLASSES : "", class_name)
+
+      if @href
+        content_tag(:a, content, link_attributes(classes))
+      else
+        content_tag(:span, content, span_attributes(classes))
+      end
+    end
+
+    def link_attributes(classes)
+      attrs = {
+        href: @href,
+        class: classes,
+        "aria-current": @active ? "page" : nil
+      }
+      attrs.merge!(html_options)
+      attrs.compact
+    end
+
+    def span_attributes(classes)
+      attrs = {
+        class: classes,
+        "aria-current": @active ? "page" : nil
+      }
+      attrs.merge!(html_options)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/pagination_next_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Pagination Next button
+  class PaginationNextComponent < BaseComponent
+    BASE_CLASSES = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 gap-1 pr-2.5"
+
+    def initialize(href: nil, disabled: false, **options)
+      super(**options)
+      @href = href
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:li) do
+        link_content
+      end
+    end
+
+    private
+
+    def link_content
+      inner = safe_join(["Next", chevron_right])
+
+      if @href && !@disabled
+        content_tag(:a, inner, href: @href, class: merge_classes(BASE_CLASSES), "aria-label": "Go to next page")
+      else
+        content_tag(:span, inner, class: cn(merge_classes(BASE_CLASSES), "pointer-events-none opacity-50"), "aria-disabled": "true")
+      end
+    end
+
+    def chevron_right
+      content_tag(:svg,
+        content_tag(:path, nil, d: "m9 18 6-6-6-6"),
+        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"
+      )
+    end
+  end
+end

data/app/components/shadcn/pagination_previous_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Pagination Previous button
+  class PaginationPreviousComponent < BaseComponent
+    BASE_CLASSES = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 gap-1 pl-2.5"
+
+    def initialize(href: nil, disabled: false, **options)
+      super(**options)
+      @href = href
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:li) do
+        link_content
+      end
+    end
+
+    private
+
+    def link_content
+      inner = safe_join([chevron_left, "Previous"])
+
+      if @href && !@disabled
+        content_tag(:a, inner, href: @href, class: merge_classes(BASE_CLASSES), "aria-label": "Go to previous page")
+      else
+        content_tag(:span, inner, class: cn(merge_classes(BASE_CLASSES), "pointer-events-none opacity-50"), "aria-disabled": "true")
+      end
+    end
+
+    def chevron_left
+      content_tag(:svg,
+        content_tag(:path, nil, d: "m15 18-6-6 6-6"),
+        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"
+      )
+    end
+  end
+end

data/app/components/shadcn/popover_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Popover component for rich content in an overlay
+  # Matches shadcn/ui Popover component
+  # Uses Stimulus for interactivity
+  #
+  # @example Basic popover
+  #   <%= render Shadcn::PopoverComponent.new do |popover| %>
+  #     <% popover.with_trigger do %>
+  #       <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Open popover" } %>
+  #     <% end %>
+  #     <% popover.with_content do %>
+  #       <div class="grid gap-4">
+  #         <h4 class="font-medium leading-none">Dimensions</h4>
+  #         <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+  #       </div>
+  #     <% end %>
+  #   <% end %>
+  #
+  class PopoverComponent < BaseComponent
+    renders_one :trigger
+    renders_one :body, lambda { |**options, &block|
+      PopoverContentComponent.new(**options, &block)
+    }
+
+    # @param open [Boolean] Whether popover starts open
+    # @param side [Symbol] Side to show content (:top, :right, :bottom, :left)
+    # @param align [Symbol] Alignment (:start, :center, :end)
+    # @param modal [Boolean] Whether to trap focus
+    def initialize(open: false, side: :bottom, align: :center, modal: false, **options)
+      super(**options)
+      @open = open
+      @side = side
+      @align = align
+      @modal = modal
+    end
+
+    def call
+      content_tag(:div, popover_structure, popover_attributes)
+    end
+
+    private
+
+    def popover_structure
+      safe_join([
+        trigger_wrapper,
+        body
+      ].compact)
+    end
+
+    def trigger_wrapper
+      return unless trigger
+
+      content_tag(:div, trigger, {
+        "data-shadcn--popover-target": "trigger",
+        "data-action": "click->shadcn--popover#toggle"
+      })
+    end
+
+    def popover_attributes
+      attrs = {
+        class: cn("relative inline-block", class_name),
+        "data-controller": "shadcn--popover",
+        "data-shadcn--popover-open-value": @open.to_s,
+        "data-shadcn--popover-side-value": @side.to_s,
+        "data-shadcn--popover-align-value": @align.to_s,
+        "data-shadcn--popover-modal-value": @modal.to_s,
+        "data-action": "keydown.escape->shadcn--popover#close"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/popover_content_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Popover Content component
+  class PopoverContentComponent < BaseComponent
+    BASE_CLASSES = "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+
+    def call
+      content_tag(:div, content, content_attributes)
+    end
+
+    private
+
+    def content_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        "data-shadcn--popover-target": "content",
+        "data-state": "closed",
+        "data-side": "bottom",
+        tabindex: "-1",
+        hidden: true
+      }
+    end
+  end
+end

data/app/components/shadcn/progress_component.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Progress component for showing completion status
+  # Matches shadcn/ui Progress component
+  #
+  # @example Basic progress
+  #   <%= render Shadcn::ProgressComponent.new(value: 60) %>
+  #
+  # @example With custom max
+  #   <%= render Shadcn::ProgressComponent.new(value: 30, max: 50) %>
+  #
+  # @example Indeterminate (loading)
+  #   <%= render Shadcn::ProgressComponent.new(indeterminate: true) %>
+  #
+  class ProgressComponent < BaseComponent
+    BASE_CLASSES = "relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
+    INDICATOR_CLASSES = "h-full w-full flex-1 bg-primary transition-all"
+
+    # @param value [Integer, Float, nil] Current progress value
+    # @param max [Integer, Float] Maximum progress value
+    # @param indeterminate [Boolean] Whether to show indeterminate state
+    def initialize(value: nil, max: 100, indeterminate: false, **options)
+      super(**options)
+      @value = value
+      @max = max
+      @indeterminate = indeterminate
+    end
+
+    def call
+      content_tag(:div, progress_indicator, progress_attributes)
+    end
+
+    private
+
+    def progress_indicator
+      content_tag(:div, "", indicator_attributes)
+    end
+
+    def progress_percentage
+      return 0 if @value.nil? || @max.zero?
+      [(@value.to_f / @max.to_f * 100).round, 100].min
+    end
+
+    def indicator_style
+      if @indeterminate
+        nil # Animation handled by CSS
+      else
+        "transform: translateX(-#{100 - progress_percentage}%)"
+      end
+    end
+
+    def progress_attributes
+      attrs = {
+        class: merge_classes(BASE_CLASSES),
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": @max,
+        "aria-valuenow": @indeterminate ? nil : @value,
+        "data-state": @indeterminate ? "indeterminate" : "determinate",
+        "data-value": @value,
+        "data-max": @max
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+
+    def indicator_attributes
+      {
+        class: cn(INDICATOR_CLASSES, @indeterminate ? "animate-progress-indeterminate" : ""),
+        style: indicator_style,
+        "data-state": @indeterminate ? "indeterminate" : "determinate"
+      }
+    end
+  end
+end