shadcn-rails 0.2.0 → 0.2.1

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/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>

data/app/components/shadcn/popover_component.rb

@@ -36,41 +36,21 @@ module Shadcn
       @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"
-      })
+    def popover_classes
+      cn("relative inline-block", class_name)
     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"
+    def popover_data_attrs
+      {
+        controller: "shadcn--popover",
+        "shadcn--popover-open-value": @open.to_s,
+        "shadcn--popover-side-value": @side.to_s,
+        "shadcn--popover-align-value": @align.to_s,
+        "shadcn--popover-modal-value": @modal.to_s,
+        action: "keydown.escape->shadcn--popover#close"
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

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

@@ -0,0 +1,13 @@
+<div class="<%= progress_classes %>"
+     role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="<%= @max %>"<% unless @indeterminate %>
+     aria-valuenow="<%= @value %>"<% end %>
+     data-state="<%= data_state %>"<% if @value %>
+     data-value="<%= @value %>"<% end %>
+     data-max="<%= @max %>"
+     <%= tag_attributes %>>
+  <div class="<%= indicator_classes %>"<% if indicator_style %>
+       style="<%= indicator_style %>"<% end %>
+       data-state="<%= data_state %>"></div>
+</div>

data/app/components/shadcn/progress_component.rb

@@ -27,14 +27,10 @@ module Shadcn
       @indeterminate = indeterminate
     end
 
-    def call
-      content_tag(:div, progress_indicator, progress_attributes)
-    end
-
     private
 
-    def progress_indicator
-      content_tag(:div, "", indicator_attributes)
+    def progress_classes
+      merge_classes(BASE_CLASSES)
     end
 
     def progress_percentage
@@ -50,28 +46,12 @@ module Shadcn
       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
+    def indicator_classes
+      cn(INDICATOR_CLASSES, @indeterminate ? "animate-progress-indeterminate" : "")
     end
 
-    def indicator_attributes
-      {
-        class: cn(INDICATOR_CLASSES, @indeterminate ? "animate-progress-indeterminate" : ""),
-        style: indicator_style,
-        "data-state": @indeterminate ? "indeterminate" : "determinate"
-      }
+    def data_state
+      @indeterminate ? "indeterminate" : "determinate"
     end
   end
 end

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

@@ -0,0 +1,8 @@
+<div role="radiogroup"
+     class="<%= group_classes %>"
+     <%= "aria-required=true" if @required %>
+     <%= "aria-disabled=true" if @disabled %>
+     <%= tag_attributes %>>
+  <%= render_data_items %>
+  <%= render_slot_items %>
+</div>

data/app/components/shadcn/radio_group_component.rb

@@ -70,13 +70,20 @@ module Shadcn
       @orientation = orientation
     end
 
-    def call
-      content_tag(:div, group_attributes) do
-        safe_join([render_data_items, render_slot_items].compact)
-      end
+    private
+
+    def group_classes
+      cn(BASE_CLASSES, orientation_classes, class_name)
     end
 
-    private
+    def orientation_classes
+      case @orientation
+      when :horizontal
+        "flex flex-row gap-4"
+      else
+        "grid gap-3"
+      end
+    end
 
     # Render items from the items: data array
     def render_data_items
@@ -104,26 +111,5 @@ module Shadcn
     def generate_item_id(value)
       "#{@name}-#{value}".parameterize
     end
-
-    def group_attributes
-      attrs = {
-        role: "radiogroup",
-        class: cn(BASE_CLASSES, orientation_classes, class_name),
-        "aria-required": @required ? "true" : nil,
-        "aria-disabled": @disabled ? "true" : nil
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
-    end
-
-    def orientation_classes
-      case @orientation
-      when :horizontal
-        "flex flex-row gap-4"
-      else
-        "grid gap-3"
-      end
-    end
   end
 end

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

@@ -0,0 +1,7 @@
+<div class="<%= scroll_classes %>"
+     data-controller="shadcn--scroll-area"
+     data-shadcn--scroll-area-orientation-value="<%= @orientation %>"
+     data-shadcn--scroll-area-type-value="<%= @type %>"
+     <%= tag_attributes %>>
+  <%= scroll_structure %>
+</div>