shadcn-rails 0.1.0 → 0.2.1

data/app/components/shadcn/dropdown_menu_radio_item_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Radio Item component
+  # A radio button within a radio group
+  class DropdownMenuRadioItemComponent < BaseComponent
+    BASE_CLASSES = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+
+    renders_one :shortcut, lambda { |**options|
+      DropdownMenuShortcutComponent.new(**options)
+    }
+
+    # @param value [String] Value of this radio item
+    # @param checked [Boolean] Whether item is selected
+    # @param disabled [Boolean] Whether item is disabled
+    def initialize(value: nil, checked: false, disabled: false, **options, &block)
+      super(**options, &block)
+      @value = value
+      @checked = checked
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:div, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([
+        radio_indicator,
+        content,
+        shortcut
+      ].compact)
+    end
+
+    def radio_indicator
+      content_tag(:span, radio_icon, class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center")
+    end
+
+    def radio_icon
+      return "" unless @checked
+
+      content_tag(:svg, circle_svg, {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        stroke: "none",
+        class: "h-4 w-4"
+      })
+    end
+
+    def circle_svg
+      content_tag(:circle, "", cx: "12", cy: "12", r: "6")
+    end
+
+    def item_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        role: "menuitemradio",
+        "aria-checked": @checked.to_s,
+        tabindex: @disabled ? nil : "-1",
+        "data-disabled": @disabled ? "" : nil,
+        "data-state": @checked ? "checked" : "unchecked",
+        "data-value": @value,
+        "data-shadcn--dropdown-target": "item",
+        "data-action": "click->shadcn--dropdown#selectRadio"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/field_component.rb

@@ -43,10 +43,15 @@ module Shadcn
     }
 
     # Input slot - renders an Input component
-    renders_one :input, lambda { |**options|
+    # @param error [Boolean] Whether to show error styles on the input
+    # Note: If using with_error slot, call it BEFORE with_input for automatic error detection,
+    # or pass error: true explicitly
+    renders_one :input, lambda { |error: nil, **options|
       options[:id] ||= @input_id
       options[:name] ||= @name
-      if @has_error
+      # Use explicit error param if provided, otherwise check error slot
+      has_error = error.nil? ? error? : error
+      if has_error
         options[:class_name] = cn("border-destructive focus-visible:ring-destructive", options[:class_name])
       end
       Shadcn::InputComponent.new(**options)
@@ -67,12 +72,6 @@ module Shadcn
       super(**options)
       @name = name
       @input_id = id || generate_id
-      @has_error = false
-    end
-
-    def before_render
-      # Track if error is present for styling
-      @has_error = error.present?
     end
 
     def call

data/app/components/shadcn/hover_card_component.html.erb

@@ -0,0 +1,12 @@
+<div class="<%= hover_card_classes %>"
+     data-controller="<%= hover_card_data_attrs[:controller] %>"
+     data-shadcn--hover-card-open-delay-value="<%= hover_card_data_attrs[:"shadcn--hover-card-open-delay-value"] %>"
+     data-shadcn--hover-card-close-delay-value="<%= hover_card_data_attrs[:"shadcn--hover-card-close-delay-value"] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--hover-card-target="trigger">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= card_content if card_content? %>
+</div>

data/app/components/shadcn/hover_card_component.rb

@@ -28,37 +28,18 @@ module Shadcn
       @close_delay = close_delay
     end
 
-    def call
-      content_tag(:div, build_card_content, card_attributes)
-    end
-
     private
 
-    def build_card_content
-      safe_join([
-        trigger_wrapper,
-        card_content
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--hover-card-target": "trigger"
-      })
+    def hover_card_classes
+      cn("relative inline-block", class_name)
     end
 
-    def card_attributes
-      attrs = {
-        class: cn("relative inline-block", class_name),
-        "data-controller": "shadcn--hover-card",
-        "data-shadcn--hover-card-open-delay-value": @open_delay,
-        "data-shadcn--hover-card-close-delay-value": @close_delay
+    def hover_card_data_attrs
+      {
+        controller: "shadcn--hover-card",
+        "shadcn--hover-card-open-delay-value": @open_delay,
+        "shadcn--hover-card-close-delay-value": @close_delay
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

data/app/components/shadcn/input_component.html.erb

@@ -0,0 +1,18 @@
+<input type="<%= @type %>"
+       class="<%= input_classes %>"<% if @name %>
+       name="<%= ERB::Util.html_escape_once(@name) %>"<% end %><% if @id %>
+       id="<%= ERB::Util.html_escape_once(@id) %>"<% end %><% if @value %>
+       value="<%= ERB::Util.html_escape_once(@value) %>"<% end %><% if @placeholder %>
+       placeholder="<%= ERB::Util.html_escape_once(@placeholder) %>"<% end %><% if @disabled %>
+       disabled<% end %><% if @required %>
+       required<% end %><% if @readonly %>
+       readonly<% end %><% if @autofocus %>
+       autofocus<% end %><% if @autocomplete %>
+       autocomplete="<%= ERB::Util.html_escape_once(@autocomplete) %>"<% end %><% if @pattern %>
+       pattern="<%= ERB::Util.html_escape_once(@pattern) %>"<% end %><% if @min %>
+       min="<%= ERB::Util.html_escape_once(@min) %>"<% end %><% if @max %>
+       max="<%= ERB::Util.html_escape_once(@max) %>"<% end %><% if @step %>
+       step="<%= ERB::Util.html_escape_once(@step) %>"<% end %><% if @minlength %>
+       minlength="<%= @minlength %>"<% end %><% if @maxlength %>
+       maxlength="<%= @maxlength %>"<% end %>
+       <%= tag_attributes %>>

data/app/components/shadcn/input_component.rb

@@ -74,35 +74,10 @@ module Shadcn
       @maxlength = maxlength
     end
 
-    def call
-      tag(:input, input_attributes)
-    end
-
     private
 
-    def input_attributes
-      attrs = {
-        type: @type,
-        name: @name,
-        id: @id,
-        value: @value,
-        placeholder: @placeholder,
-        disabled: @disabled || nil,
-        required: @required || nil,
-        readonly: @readonly || nil,
-        autofocus: @autofocus || nil,
-        autocomplete: @autocomplete,
-        pattern: @pattern,
-        min: @min,
-        max: @max,
-        step: @step,
-        minlength: @minlength,
-        maxlength: @maxlength,
-        class: merge_classes(BASE_CLASSES)
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def input_classes
+      merge_classes(BASE_CLASSES)
     end
   end
 end

data/app/components/shadcn/input_otp_component.rb

@@ -31,7 +31,7 @@ module Shadcn
     renders_many :groups, "GroupComponent"
 
     # Separators between groups
-    renders_many :separators, "SeparatorComponent"
+    renders_many :separators, "OtpSeparatorComponent"
 
     # @param length [Integer] Number of OTP digits
     # @param name [String] Input name for form submission
@@ -169,8 +169,8 @@ module Shadcn
       end
     end
 
-    # Separator subcomponent
-    class SeparatorComponent < BaseComponent
+    # Separator subcomponent (named OtpSeparatorComponent to avoid conflict with standalone SeparatorComponent)
+    class OtpSeparatorComponent < BaseComponent
       BASE_CLASSES = "flex items-center justify-center px-2"
 
       def call

data/app/components/shadcn/kbd_component.html.erb

@@ -0,0 +1 @@
+<kbd class="<%= kbd_classes %>" <%= tag_attributes %>><%= content %></kbd>

data/app/components/shadcn/kbd_component.rb

@@ -18,19 +18,12 @@ module Shadcn
   #   </span>
   #
   class KbdComponent < BaseComponent
-    BASE_CLASSES = "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
-
-    def call
-      tag.kbd(content, **kbd_attributes)
-    end
+    BASE_CLASSES = 'pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100'
 
     private
 
-    def kbd_attributes
-      attrs = { class: merge_classes(BASE_CLASSES) }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def kbd_classes
+      merge_classes(BASE_CLASSES)
     end
   end
 end

data/app/components/shadcn/label_component.html.erb

@@ -0,0 +1,3 @@
+<label <% if @for %>for="<%= @for %>"<% end %> class="<%= label_classes %>" <%= tag_attributes %>>
+  <%= content %><% if @required %><span class="text-destructive" aria-hidden="true"> *</span><% end %>
+</label>

data/app/components/shadcn/label_component.rb

@@ -24,26 +24,10 @@ module Shadcn
       @required = required
     end
 
-    def call
-      label_text = content
-      label_text = safe_join([label_text, required_indicator]) if @required
-      tag.label(label_text, **label_attributes)
-    end
-
     private
 
-    def required_indicator
-      content_tag(:span, " *", class: "text-destructive", "aria-hidden": "true")
-    end
-
-    def label_attributes
-      attrs = {
-        for: @for,
-        class: merge_classes(BASE_CLASSES)
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def label_classes
+      cn(BASE_CLASSES, class_name)
     end
   end
 end

data/app/components/shadcn/menubar_component.html.erb

@@ -0,0 +1,6 @@
+<div class="<%= menubar_classes %>"
+     role="menubar"
+     data-controller="shadcn--menubar"
+     <%= tag_attributes %>>
+  <%= menubar_content %>
+</div>

data/app/components/shadcn/menubar_component.rb

@@ -32,25 +32,14 @@ module Shadcn
       MenubarMenuComponent.new(**options)
     }
 
-    def call
-      content_tag(:div, menubar_content, menubar_attributes)
-    end
-
     private
 
-    def menubar_content
-      safe_join(menus)
+    def menubar_classes
+      cn(BASE_CLASSES, class_name)
     end
 
-    def menubar_attributes
-      attrs = {
-        class: cn(BASE_CLASSES, class_name),
-        role: "menubar",
-        "data-controller": "shadcn--menubar"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def menubar_content
+      safe_join(menus)
     end
   end
 end

data/app/components/shadcn/menubar_content_component.rb

@@ -6,23 +6,44 @@ module Shadcn
   class MenubarContentComponent < BaseComponent
     BASE_CLASSES = "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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"
 
-    renders_many :items, lambda { |**options, &block|
-      MenubarItemComponent.new(**options, &block)
-    }
-    renders_many :labels, lambda { |**options, &block|
-      MenubarLabelComponent.new(**options, &block)
-    }
-    renders_many :separators, lambda { |**options|
-      MenubarSeparatorComponent.new(**options)
-    }
-    renders_many :checkbox_items, lambda { |**options, &block|
-      MenubarCheckboxItemComponent.new(**options, &block)
-    }
-    renders_many :radio_groups, lambda { |**options, &block|
-      MenubarRadioGroupComponent.new(**options, &block)
-    }
-    renders_many :sub_menus, lambda { |**options, &block|
-      MenubarSubComponent.new(**options, &block)
+    # Use polymorphic slots to preserve the order of items, labels, separators, etc.
+    renders_many :menu_items, types: {
+      item: {
+        renders: lambda { |**options, &block|
+          MenubarItemComponent.new(**options, &block)
+        },
+        as: :item
+      },
+      label: {
+        renders: lambda { |**options, &block|
+          MenubarLabelComponent.new(**options, &block)
+        },
+        as: :label
+      },
+      separator: {
+        renders: lambda { |**options|
+          MenubarSeparatorComponent.new(**options)
+        },
+        as: :separator
+      },
+      checkbox_item: {
+        renders: lambda { |**options, &block|
+          MenubarCheckboxItemComponent.new(**options, &block)
+        },
+        as: :checkbox_item
+      },
+      radio_group: {
+        renders: lambda { |**options, &block|
+          MenubarRadioGroupComponent.new(**options, &block)
+        },
+        as: :radio_group
+      },
+      sub_menu: {
+        renders: lambda { |**options, &block|
+          MenubarSubComponent.new(**options, &block)
+        },
+        as: :sub_menu
+      }
     }
 
     # @param align [Symbol] Content alignment (:start, :center, :end)
@@ -40,10 +61,14 @@ module Shadcn
     private
 
     def menu_content
-      if items.any? || labels.any? || separators.any? || checkbox_items.any? || radio_groups.any? || sub_menus.any?
-        safe_join([labels, items, separators, checkbox_items, radio_groups, sub_menus, content].flatten.compact)
+      # Trigger slot evaluation first by accessing content
+      raw_content = content
+      # If polymorphic slots were used, render them in order
+      if menu_items.any?
+        safe_join(menu_items)
       else
-        content
+        # Otherwise render the raw block content (for backwards compatibility)
+        raw_content
       end
     end
 

data/app/components/shadcn/menubar_sub_content_component.rb

@@ -6,11 +6,20 @@ module Shadcn
   class MenubarSubContentComponent < BaseComponent
     BASE_CLASSES = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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"
 
-    renders_many :items, lambda { |**options, &block|
-      MenubarItemComponent.new(**options, &block)
-    }
-    renders_many :separators, lambda { |**options|
-      MenubarSeparatorComponent.new(**options)
+    # Use polymorphic slots to preserve the order of items and separators
+    renders_many :menu_items, types: {
+      item: {
+        renders: lambda { |**options, &block|
+          MenubarItemComponent.new(**options, &block)
+        },
+        as: :item
+      },
+      separator: {
+        renders: lambda { |**options|
+          MenubarSeparatorComponent.new(**options)
+        },
+        as: :separator
+      }
     }
 
     def call
@@ -20,10 +29,14 @@ module Shadcn
     private
 
     def sub_content
-      if items.any? || separators.any?
-        safe_join([items, separators, content].flatten.compact)
+      # Trigger slot evaluation first by accessing content
+      raw_content = content
+      # If polymorphic slots were used, render them in order
+      if menu_items.any?
+        safe_join(menu_items)
       else
-        content
+        # Otherwise render the raw block content (for backwards compatibility)
+        raw_content
       end
     end
 

data/app/components/shadcn/native_select_component.html.erb

@@ -0,0 +1,22 @@
+<div class="<%= WRAPPER_CLASSES %>">
+  <select <%= "name=\"#{ERB::Util.html_escape_once(@name)}\"".html_safe if @name %>
+          <%= "id=\"#{ERB::Util.html_escape_once(@id)}\"".html_safe if @id %>
+          <%= "disabled" if @disabled %>
+          <%= "required" if @required %>
+          class="<%= select_classes %>"
+          <%= tag_attributes %>>
+    <%= select_content %>
+  </select>
+  <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="<%= CHEVRON_CLASSES %>">
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+</div>

data/app/components/shadcn/native_select_component.rb

@@ -57,48 +57,18 @@ module Shadcn
       @required = required
     end
 
-    def call
-      tag.div(class: WRAPPER_CLASSES) do
-        safe_join([
-          tag.select(**select_attributes) do
-            if optgroups.any?
-              safe_join(optgroups)
-            else
-              safe_join(options)
-            end
-          end,
-          chevron_icon
-        ])
-      end
-    end
+    private
 
-    def chevron_icon
-      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: CHEVRON_CLASSES
-      ) do
-        tag.path(d: "m6 9 6 6 6-6")
-      end
+    def select_classes
+      merge_classes(SELECT_CLASSES)
     end
 
-    private
-
-    def select_attributes
-      {
-        name: @name,
-        id: @id,
-        disabled: @disabled || nil,
-        required: @required || nil,
-        class: merge_classes(SELECT_CLASSES)
-      }.merge(html_options).merge(build_data).compact
+    def select_content
+      if optgroups.any?
+        safe_join(optgroups)
+      else
+        safe_join(options)
+      end
     end
 
     # Option subcomponent

data/app/components/shadcn/navigation_menu_component.html.erb

@@ -0,0 +1,6 @@
+<nav class="<%= navigation_classes %>"
+     data-controller="shadcn--navigation-menu"
+     aria-label="Main"
+     <%= tag_attributes %>>
+  <%= navigation_content %>
+</nav>

data/app/components/shadcn/navigation_menu_component.rb

@@ -31,12 +31,12 @@ module Shadcn
       NavigationMenuListComponent.new(**options)
     }
 
-    def call
-      content_tag(:nav, navigation_content, navigation_attributes)
-    end
-
     private
 
+    def navigation_classes
+      cn(BASE_CLASSES, class_name)
+    end
+
     def navigation_content
       safe_join([list, viewport].compact)
     end
@@ -61,16 +61,5 @@ module Shadcn
         hidden: true
       }
     end
-
-    def navigation_attributes
-      attrs = {
-        class: cn(BASE_CLASSES, class_name),
-        "data-controller": "shadcn--navigation-menu",
-        "aria-label": "Main"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
-    end
   end
 end

data/app/components/shadcn/pagination_component.html.erb

@@ -0,0 +1,5 @@
+<% if @should_render %>
+  <nav role="navigation" aria-label="pagination" class="<%= pagination_classes %>" <%= tag_attributes %>>
+    <%= build_pagination_content %>
+  </nav>
+<% end %>

data/app/components/shadcn/pagination_component.rb

@@ -43,13 +43,12 @@ module Shadcn
       @window = window
     end
 
-    def call
+    def before_render
+      # Pre-compute auto-generated content if needed
       if auto_generate?
-        return "" if total_pages <= 1
-
-        content_tag(:nav, auto_generated_content, pagination_attributes)
+        @should_render = total_pages > 1
       else
-        content_tag(:nav, build_pagination_content, pagination_attributes)
+        @should_render = true
       end
     end
 
@@ -178,18 +177,15 @@ module Shadcn
     end
 
     def build_pagination_content
-      pagination_content || ""
+      if auto_generate?
+        auto_generated_content
+      else
+        pagination_content || ""
+      end
     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
+    def pagination_classes
+      merge_classes(BASE_CLASSES)
     end
   end
 end

data/app/components/shadcn/popover_component.html.erb

@@ -0,0 +1,15 @@
+<div class="<%= popover_classes %>"
+     data-controller="<%= popover_data_attrs[:controller] %>"
+     data-shadcn--popover-open-value="<%= popover_data_attrs[:"shadcn--popover-open-value"] %>"
+     data-shadcn--popover-side-value="<%= popover_data_attrs[:"shadcn--popover-side-value"] %>"
+     data-shadcn--popover-align-value="<%= popover_data_attrs[:"shadcn--popover-align-value"] %>"
+     data-shadcn--popover-modal-value="<%= popover_data_attrs[:"shadcn--popover-modal-value"] %>"
+     data-action="<%= popover_data_attrs[:action] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--popover-target="trigger" data-action="click->shadcn--popover#toggle">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= body if body? %>
+</div>