shadcn-rails 0.1.0 → 0.2.1

data/app/components/shadcn/alert_dialog_component.rb

@@ -34,38 +34,18 @@ module Shadcn
       @open = open
     end
 
-    def call
-      content_tag(:div, dialog_content, dialog_attributes)
-    end
-
     private
 
-    def dialog_content
-      safe_join([
-        trigger_wrapper,
-        body
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--dialog-target": "trigger",
-        "data-action": "click->shadcn--dialog#open"
-      })
+    def alert_dialog_classes
+      class_name
     end
 
-    def dialog_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--dialog",
-        "data-shadcn--dialog-open-value": @open.to_s,
-        "data-shadcn--dialog-modal-value": "true"
+    def alert_dialog_data_attrs
+      {
+        controller: "shadcn--dialog",
+        "shadcn--dialog-open-value": @open.to_s,
+        "shadcn--dialog-modal-value": "true"
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

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

@@ -0,0 +1,7 @@
+<div class="<%= wrapper_classes %>"
+     style="<%= wrapper_style %>"
+     <%= tag_attributes %>>
+  <div class="absolute inset-0" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
+    <%= content %>
+  </div>
+</div>

data/app/components/shadcn/aspect_ratio_component.rb

@@ -21,29 +21,14 @@ module Shadcn
       @ratio = ratio.to_f
     end
 
-    def call
-      content_tag(:div, wrapper_attributes) do
-        content_tag(:div, content, inner_attributes)
-      end
-    end
-
     private
 
-    def wrapper_attributes
-      attrs = {
-        class: cn("relative w-full", class_name),
-        style: "padding-bottom: #{(1.0 / @ratio) * 100}%;"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def wrapper_classes
+      cn("relative w-full", class_name)
     end
 
-    def inner_attributes
-      {
-        class: "absolute inset-0",
-        style: "position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
-      }
+    def wrapper_style
+      "padding-bottom: #{(1.0 / @ratio) * 100}%;"
     end
   end
 end

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

@@ -0,0 +1,20 @@
+<span class="<%= avatar_classes %>" <%= tag_attributes %>>
+  <% if has_image? %>
+    <span class="contents" data-controller="shadcn--avatar">
+      <img src="<%= @src %>"
+           alt="<%= @alt %>"
+           class="<%= IMAGE_CLASSES %>"
+           data-shadcn--avatar-target="image"
+           data-action="error->shadcn--avatar#handleError" />
+      <span class="<%= FALLBACK_CLASSES %> hidden" data-shadcn--avatar-target="fallback">
+        <%= fallback_text %>
+      </span>
+    </span>
+  <% elsif has_fallback_slot? %>
+    <%= fallback %>
+  <% else %>
+    <span class="<%= FALLBACK_CLASSES %>">
+      <%= fallback_text %>
+    </span>
+  <% end %>
+</span>

data/app/components/shadcn/avatar_component.rb

@@ -46,50 +46,22 @@ module Shadcn
       @size = size.to_sym
     end
 
-    def call
-      content_tag(:span, avatar_content, avatar_attributes)
-    end
-
     private
 
-    def avatar_content
-      if @src.present?
-        image_with_fallback
-      elsif fallback?
-        fallback
-      else
-        fallback_element
-      end
-    end
-
-    def image_with_fallback
-      # Use Stimulus controller to handle image loading errors
-      content_tag(:span, class: "contents", data: stimulus_data(controller: "shadcn--avatar")) do
-        safe_join([
-          tag(:img,
-            src: @src,
-            alt: @alt,
-            class: IMAGE_CLASSES,
-            data: { "shadcn--avatar-target": "image", action: "error->shadcn--avatar#handleError" }
-          ),
-          content_tag(:span, @fallback, class: "#{FALLBACK_CLASSES} hidden", data: { "shadcn--avatar-target": "fallback" })
-        ])
-      end
+    def avatar_classes
+      cn(BASE_CLASSES, SIZES[@size], class_name)
     end
 
-    def fallback_element
-      content_tag(:span, @fallback, class: FALLBACK_CLASSES)
+    def fallback_text
+      @fallback
     end
 
-    def avatar_classes
-      cn(BASE_CLASSES, SIZES[@size], class_name)
+    def has_image?
+      @src.present?
     end
 
-    def avatar_attributes
-      attrs = { class: avatar_classes }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def has_fallback_slot?
+      fallback?
     end
 
     def generate_fallback(alt)

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

@@ -0,0 +1 @@
+<span class="<%= badge_classes %>" <%= tag_attributes %>><%= content %></span>

data/app/components/shadcn/badge_component.rb

@@ -29,21 +29,10 @@ module Shadcn
       @variant = variant.to_sym
     end
 
-    def call
-      content_tag(:span, content, badge_attributes)
-    end
-
     private
 
     def badge_classes
       cn(BASE_CLASSES, VARIANTS[@variant], class_name)
     end
-
-    def badge_attributes
-      attrs = { class: badge_classes }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
-    end
   end
 end

data/app/components/shadcn/base_component.rb

@@ -10,11 +10,15 @@ module Shadcn
     # Common attributes shared by all components
     attr_reader :class_name, :data, :html_options
 
-    # @param class_name [String, nil] Additional CSS classes
+    # @param class_name [String, nil] Additional CSS classes (preferred)
+    # @param class [String, nil] Alias for class_name (for Rails-like API)
     # @param data [Hash] Data attributes (will be prefixed with data-)
     # @param html_options [Hash] Additional HTML attributes
     def initialize(class_name: nil, data: {}, **html_options, &block)
-      @class_name = class_name
+      # Support both class: and class_name: for better Rails compatibility
+      # class_name takes precedence if both are provided
+      html_class = html_options.delete(:class)
+      @class_name = class_name || html_class
       @data = data
       @html_options = html_options
       @constructor_block = block
@@ -96,5 +100,14 @@ module Shadcn
 
       classes.split.map { |c| "#{config.tailwind_prefix}#{c}" }.join(" ")
     end
+
+    # Build HTML attributes string for use in templates
+    # Combines html_options and data attributes
+    # Uses html_escape_once to avoid double-escaping already-escaped content
+    # @return [String] HTML-safe attribute string
+    def tag_attributes
+      attrs = html_options.merge(build_data)
+      attrs.map { |k, v| "#{k}=\"#{ERB::Util.html_escape_once(v)}\"" if v }.compact.join(" ").html_safe
+    end
   end
 end

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

@@ -0,0 +1,5 @@
+<nav aria-label="Breadcrumb" class="<%= breadcrumb_classes %>" <%= tag_attributes %>>
+  <ol class="flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5">
+    <%= breadcrumb_list_content %>
+  </ol>
+</nav>

data/app/components/shadcn/breadcrumb_component.rb

@@ -21,24 +21,14 @@ module Shadcn
       )
     end
 
-    def call
-      content_tag(:nav, breadcrumb_attributes) do
-        content_tag(:ol, class: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5") do
-          safe_join(items_with_separators)
-        end
-      end
-    end
-
     private
 
-    def breadcrumb_attributes
-      attrs = {
-        "aria-label": "Breadcrumb",
-        class: merge_classes("")
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def breadcrumb_classes
+      merge_classes("")
+    end
+
+    def breadcrumb_list_content
+      safe_join(items_with_separators)
     end
 
     def items_with_separators

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

@@ -0,0 +1,18 @@
+<% if @href %>
+  <a href="<%= @href %>"
+     class="<%= button_classes %>"
+     role="button"
+     <%= "aria-disabled=true tabindex=-1" if @disabled %>
+     <%= tag_attributes %>>
+    <%= button_content %>
+  </a>
+<% else %>
+  <button type="<%= @type %>"
+          class="<%= button_classes %>"
+          <%= "disabled" if @disabled || @loading %>
+          <%= "aria-disabled=true" if @disabled || @loading %>
+          <%= "aria-busy=true" if @loading %>
+          <%= tag_attributes %>>
+    <%= button_content %>
+  </button>
+<% end %>

data/app/components/shadcn/button_component.rb

@@ -75,24 +75,8 @@ module Shadcn
       @loading = loading
     end
 
-    def call
-      if @href
-        link_tag
-      else
-        button_tag
-      end
-    end
-
     private
 
-    def button_tag
-      content_tag(:button, button_content, button_attributes)
-    end
-
-    def link_tag
-      content_tag(:a, button_content, link_attributes)
-    end
-
     def button_content
       if @loading
         safe_join([loading_spinner, content])
@@ -102,7 +86,7 @@ module Shadcn
     end
 
     def loading_spinner
-      content_tag(:span, "", class: "animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full", "aria-hidden": true)
+      tag.span("", class: "animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full", "aria-hidden": true)
     end
 
     def button_classes
@@ -113,29 +97,5 @@ module Shadcn
         class_name
       )
     end
-
-    def button_attributes
-      attrs = html_options.merge(
-        type: @type,
-        class: button_classes,
-        disabled: @disabled || @loading || nil,
-        "aria-disabled": (@disabled || @loading) ? "true" : nil,
-        "aria-busy": @loading ? "true" : nil
-      )
-      attrs.merge!(build_data)
-      attrs.compact
-    end
-
-    def link_attributes
-      attrs = html_options.merge(
-        href: @href,
-        class: button_classes,
-        role: "button",
-        "aria-disabled": @disabled ? "true" : nil,
-        tabindex: @disabled ? "-1" : nil
-      )
-      attrs.merge!(build_data)
-      attrs.compact
-    end
   end
 end

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

@@ -0,0 +1,8 @@
+<div class="<%= card_classes %>" <%= tag_attributes %>>
+  <%= header %>
+  <%= title %>
+  <%= description %>
+  <%= content_slot %>
+  <%= content %>
+  <%= footer %>
+</div>

data/app/components/shadcn/card_component.rb

@@ -50,14 +50,10 @@ module Shadcn
 
     BASE_CLASSES = "rounded-xl border bg-card text-card-foreground shadow"
 
-    def call
-      content_tag(:div, card_content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
-    end
-
     private
 
-    def card_content
-      safe_join([header, title, description, content_slot, content, footer].compact)
+    def card_classes
+      merge_classes(BASE_CLASSES)
     end
   end
 end

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

@@ -0,0 +1,32 @@
+<% if has_label? %>
+  <label class="flex items-center space-x-2 cursor-pointer">
+    <% if @name %>
+      <input type="hidden" name="<%= ERB::Util.html_escape_once(@name) %>" value="0" autocomplete="off">
+    <% end %>
+    <input type="checkbox"
+           class="<%= checkbox_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 @checked %>
+           checked<% end %><% if @disabled %>
+           disabled<% end %><% if @required %>
+           required<% end %>
+           <%= tag_attributes %>>
+    <span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      <%= content %>
+    </span>
+  </label>
+<% else %>
+  <% if @name %>
+    <input type="hidden" name="<%= ERB::Util.html_escape_once(@name) %>" value="0" autocomplete="off">
+  <% end %>
+  <input type="checkbox"
+         class="<%= checkbox_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 @checked %>
+         checked<% end %><% if @disabled %>
+         disabled<% end %><% if @required %>
+         required<% end %>
+         <%= tag_attributes %>>
+<% end %>

data/app/components/shadcn/checkbox_component.rb

@@ -51,53 +51,14 @@ module Shadcn
       @required = required
     end
 
-    def call
-      if content.present?
-        # Render with integrated label
-        content_tag(:label, class: "flex items-center space-x-2 cursor-pointer") do
-          safe_join([
-            hidden_input,
-            checkbox_input,
-            content_tag(:span, content, class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
-          ])
-        end
-      else
-        # Render just the checkbox (for use with external labels)
-        safe_join([hidden_input, checkbox_input].compact)
-      end
-    end
-
     private
 
-    def hidden_input
-      # Include hidden input with "0" value for unchecked state (Rails convention)
-      return unless @name
-
-      tag(:input,
-        type: "hidden",
-        name: @name,
-        value: "0",
-        autocomplete: "off"
-      )
-    end
-
-    def checkbox_input
-      tag(:input, input_attributes)
+    def checkbox_classes
+      cn(BASE_CLASSES, class_name)
     end
 
-    def input_attributes
-      attrs = {
-        type: "checkbox",
-        name: @name,
-        id: @id,
-        value: @value,
-        class: cn(BASE_CLASSES, class_name),
-        disabled: @disabled || nil,
-        checked: @checked || nil,
-        required: @required || nil
-      }
-      attrs.merge!(html_options.except(:class))
-      attrs.compact
+    def has_label?
+      content.present?
     end
   end
 end

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

@@ -0,0 +1,8 @@
+<div class="<%= collapsible_classes %>"
+     data-controller="shadcn--collapsible"
+     data-shadcn--collapsible-open-value="<%= @open %>"
+     data-shadcn--collapsible-disabled-value="<%= @disabled %>"
+     data-state="<%= state %>"
+     <%= tag_attributes %>>
+  <%= collapsible_content %>
+</div>

data/app/components/shadcn/collapsible_component.rb

@@ -31,12 +31,12 @@ module Shadcn
       @disabled = disabled
     end
 
-    def call
-      content_tag(:div, collapsible_content, collapsible_attributes)
-    end
-
     private
 
+    def collapsible_classes
+      class_name
+    end
+
     def collapsible_content
       safe_join([trigger_wrapper, body].compact)
     end
@@ -50,17 +50,8 @@ module Shadcn
       })
     end
 
-    def collapsible_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--collapsible",
-        "data-shadcn--collapsible-open-value": @open.to_s,
-        "data-shadcn--collapsible-disabled-value": @disabled.to_s,
-        "data-state": @open ? "open" : "closed"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def state
+      @open ? "open" : "closed"
     end
   end
 end

data/app/components/shadcn/command_list_component.rb

@@ -10,19 +10,26 @@ module Shadcn
       CommandEmptyComponent.new(**options)
     }
 
-    # Groups of items
-    renders_many :groups, lambda { |heading: nil, **options|
-      CommandGroupComponent.new(heading: heading, **options)
-    }
-
-    # Direct items (without group)
-    renders_many :items, lambda { |value: nil, disabled: false, **options|
-      CommandItemComponent.new(value: value, disabled: disabled, **options)
-    }
-
-    # Separators
-    renders_many :separators, lambda { |**options|
-      CommandSeparatorComponent.new(**options)
+    # Use polymorphic slots to preserve the order of groups, items, and separators
+    renders_many :list_items, types: {
+      group: {
+        renders: lambda { |heading: nil, **options, &block|
+          CommandGroupComponent.new(heading: heading, **options, &block)
+        },
+        as: :group
+      },
+      item: {
+        renders: lambda { |value: nil, disabled: false, **options, &block|
+          CommandItemComponent.new(value: value, disabled: disabled, **options, &block)
+        },
+        as: :item
+      },
+      separator: {
+        renders: lambda { |**options|
+          CommandSeparatorComponent.new(**options)
+        },
+        as: :separator
+      }
     }
 
     def call
@@ -32,7 +39,15 @@ module Shadcn
     private
 
     def list_content
-      safe_join([empty, groups, items, separators, content].flatten.compact)
+      # Trigger slot evaluation first by accessing content
+      raw_content = content
+      # If polymorphic slots were used, render them in order with empty at the start
+      if list_items.any?
+        safe_join([empty, list_items].flatten.compact)
+      else
+        # Otherwise render the raw block content (for backwards compatibility)
+        safe_join([empty, raw_content].flatten.compact)
+      end
     end
   end
 end

data/app/components/shadcn/context_menu_checkbox_item_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Context Menu Checkbox Item component
+  # A menu item that can be checked/unchecked
+  class ContextMenuCheckboxItemComponent < 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|
+      ContextMenuShortcutComponent.new(**options)
+    }
+
+    # @param checked [Boolean] Whether item is checked
+    # @param disabled [Boolean] Whether item is disabled
+    def initialize(checked: false, disabled: false, **options, &block)
+      super(**options, &block)
+      @checked = checked
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:div, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([
+        check_indicator,
+        content,
+        shortcut
+      ].compact)
+    end
+
+    def check_indicator
+      content_tag(:span, check_icon, class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center")
+    end
+
+    def check_icon
+      return "" unless @checked
+
+      content_tag(:svg, check_svg_path, {
+        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
+
+    def check_svg_path
+      content_tag(:polyline, "", points: "20 6 9 17 4 12")
+    end
+
+    def item_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        role: "menuitemcheckbox",
+        "aria-checked": @checked.to_s,
+        tabindex: @disabled ? nil : "-1",
+        "data-disabled": @disabled ? "" : nil,
+        "data-state": @checked ? "checked" : "unchecked",
+        "data-shadcn--context-menu-target": "item",
+        "data-action": "click->shadcn--context-menu#selectItem"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<div class="<%= context_menu_classes %>"
+     data-controller="<%= context_menu_data_attrs[:controller] %>"
+     data-action="<%= context_menu_data_attrs[:action] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--context-menu-target="trigger" data-action="contextmenu->shadcn--context-menu#show:prevent">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= menu if menu? %>
+</div>