shadcn-rails 0.1.0 → 0.2.1

data/app/components/shadcn/context_menu_component.rb

@@ -28,37 +28,17 @@ module Shadcn
       ContextMenuContentComponent.new(**options)
     }
 
-    def call
-      content_tag(:div, context_menu_content, context_menu_attributes)
-    end
-
     private
 
-    def context_menu_content
-      safe_join([
-        trigger_wrapper,
-        menu
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--context-menu-target": "trigger",
-        "data-action": "contextmenu->shadcn--context-menu#show:prevent"
-      })
+    def context_menu_classes
+      cn("relative inline-block", class_name)
     end
 
-    def context_menu_attributes
-      attrs = {
-        class: cn("relative inline-block", class_name),
-        "data-controller": "shadcn--context-menu",
-        "data-action": "keydown.escape->shadcn--context-menu#close"
+    def context_menu_data_attrs
+      {
+        controller: "shadcn--context-menu",
+        action: "keydown.escape->shadcn--context-menu#close"
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

data/app/components/shadcn/context_menu_content_component.rb

@@ -3,16 +3,40 @@
 module Shadcn
   # Context Menu Content component
   class ContextMenuContentComponent < BaseComponent
-    BASE_CLASSES = "z-50 min-w-[8rem] 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"
+    BASE_CLASSES = "shadcn-context-menu z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
 
-    renders_many :items, lambda { |**options, &block|
-      ContextMenuItemComponent.new(**options, &block)
-    }
-    renders_many :labels, lambda { |**options, &block|
-      ContextMenuLabelComponent.new(**options, &block)
-    }
-    renders_many :separators, lambda { |**options|
-      ContextMenuSeparatorComponent.new(**options)
+    # Use polymorphic slots to preserve the order of items, labels, and separators
+    renders_many :menu_items, types: {
+      item: {
+        renders: lambda { |**options, &block|
+          ContextMenuItemComponent.new(**options, &block)
+        },
+        as: :item
+      },
+      checkbox_item: {
+        renders: lambda { |**options, &block|
+          ContextMenuCheckboxItemComponent.new(**options, &block)
+        },
+        as: :checkbox_item
+      },
+      radio_group: {
+        renders: lambda { |**options, &block|
+          ContextMenuRadioGroupComponent.new(**options, &block)
+        },
+        as: :radio_group
+      },
+      label: {
+        renders: lambda { |**options, &block|
+          ContextMenuLabelComponent.new(**options, &block)
+        },
+        as: :label
+      },
+      separator: {
+        renders: lambda { |**options|
+          ContextMenuSeparatorComponent.new(**options)
+        },
+        as: :separator
+      }
     }
 
     def call
@@ -22,11 +46,10 @@ module Shadcn
     private
 
     def menu_content
-      if items.any? || labels.any? || separators.any?
-        safe_join([labels, items, separators, content].flatten.compact)
-      else
-        content
-      end
+      # Trigger slot evaluation first
+      content
+      # Render all menu items in the order they were added
+      safe_join(menu_items)
     end
 
     def menu_attributes

data/app/components/shadcn/context_menu_item_component.rb

@@ -3,11 +3,11 @@
 module Shadcn
   # Context Menu Item component
   class ContextMenuItemComponent < BaseComponent
-    BASE_CLASSES = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0"
+    BASE_CLASSES = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 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 [&>svg]:size-4 [&>svg]:shrink-0"
 
     VARIANTS = {
       default: "",
-      destructive: "text-destructive focus:bg-destructive focus:text-destructive-foreground"
+      destructive: "text-destructive hover:bg-destructive hover:text-destructive-foreground focus:bg-destructive focus:text-destructive-foreground"
     }.freeze
 
     renders_one :shortcut, lambda { |**options|
@@ -53,6 +53,7 @@ module Shadcn
         tabindex: @disabled ? nil : "-1",
         href: @href,
         "data-disabled": @disabled ? "" : nil,
+        "data-shadcn--context-menu-target": "item",
         "data-action": "click->shadcn--context-menu#selectItem"
       }
       attrs.merge!(html_options)

data/app/components/shadcn/context_menu_radio_group_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Context Menu Radio Group component
+  # Group of mutually exclusive radio items
+  class ContextMenuRadioGroupComponent < BaseComponent
+    renders_many :items, lambda { |**options, &block|
+      ContextMenuRadioItemComponent.new(**options, &block)
+    }
+
+    # @param value [String] Currently selected value
+    def initialize(value: nil, **options, &block)
+      super(**options, &block)
+      @value = value
+    end
+
+    def call
+      content_tag(:div, group_content, group_attributes)
+    end
+
+    private
+
+    def group_content
+      if items.any?
+        safe_join(items)
+      else
+        content
+      end
+    end
+
+    def group_attributes
+      attrs = {
+        class: class_name,
+        role: "group",
+        "data-value": @value
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/context_menu_radio_item_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Context Menu Radio Item component
+  # A radio button within a radio group
+  class ContextMenuRadioItemComponent < 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 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--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/dialog_component.html.erb

@@ -0,0 +1,14 @@
+<div id="<%= @id %>"
+     class="<%= dialog_classes %>"
+     data-controller="<%= dialog_data_attrs[:controller] %>"
+     data-shadcn--dialog-open-value="<%= dialog_data_attrs[:"shadcn--dialog-open-value"] %>"
+     data-shadcn--dialog-modal-value="<%= dialog_data_attrs[:"shadcn--dialog-modal-value"] %>"
+     data-dialog-id="<%= dialog_data_attrs[:"dialog-id"] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#open">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= body if body? %>
+</div>

data/app/components/shadcn/dialog_component.rb

@@ -38,40 +38,19 @@ module Shadcn
       @modal = modal
     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 dialog_classes
+      class_name
     end
 
-    def dialog_attributes
-      attrs = {
-        id: @id,
-        class: class_name,
-        "data-controller": "shadcn--dialog",
-        "data-shadcn--dialog-open-value": @open.to_s,
-        "data-shadcn--dialog-modal-value": @modal.to_s,
-        "data-dialog-id": @id
+    def dialog_data_attrs
+      {
+        controller: "shadcn--dialog",
+        "shadcn--dialog-open-value": @open.to_s,
+        "shadcn--dialog-modal-value": @modal.to_s,
+        "dialog-id": @id
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

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

@@ -0,0 +1,12 @@
+<div class="<%= drawer_classes %>"
+     data-controller="<%= drawer_data_attrs[:controller] %>"
+     data-shadcn--drawer-open-value="<%= drawer_data_attrs[:"shadcn--drawer-open-value"] %>"
+     data-shadcn--drawer-direction-value="<%= drawer_data_attrs[:"shadcn--drawer-direction-value"] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--drawer-target="trigger" data-action="click->shadcn--drawer#open">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= body if body? %>
+</div>

data/app/components/shadcn/drawer_component.rb

@@ -35,38 +35,18 @@ module Shadcn
       @direction = direction
     end
 
-    def call
-      content_tag(:div, drawer_content, drawer_attributes)
-    end
-
     private
 
-    def drawer_content
-      safe_join([
-        trigger_wrapper,
-        body
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--drawer-target": "trigger",
-        "data-action": "click->shadcn--drawer#open"
-      })
+    def drawer_classes
+      class_name
     end
 
-    def drawer_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--drawer",
-        "data-shadcn--drawer-open-value": @open.to_s,
-        "data-shadcn--drawer-direction-value": @direction.to_s
+    def drawer_data_attrs
+      {
+        controller: "shadcn--drawer",
+        "shadcn--drawer-open-value": @open.to_s,
+        "shadcn--drawer-direction-value": @direction.to_s
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

data/app/components/shadcn/dropdown_menu_checkbox_item_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Checkbox Item component
+  # A menu item that can be checked/unchecked
+  class DropdownMenuCheckboxItemComponent < 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 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--dropdown-target": "item",
+        "data-action": "click->shadcn--dropdown#toggleCheckbox"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<div class="<%= dropdown_classes %>"
+     data-controller="<%= dropdown_data_attrs[:controller] %>"
+     data-shadcn--dropdown-open-value="<%= dropdown_data_attrs[:"shadcn--dropdown-open-value"] %>"
+     data-shadcn--dropdown-align-value="<%= dropdown_data_attrs[:"shadcn--dropdown-align-value"] %>"
+     data-shadcn--dropdown-side-value="<%= dropdown_data_attrs[:"shadcn--dropdown-side-value"] %>"
+     data-action="<%= dropdown_data_attrs[:action] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--dropdown-target="trigger" data-action="click->shadcn--dropdown#toggle">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= menu if menu? %>
+</div>

data/app/components/shadcn/dropdown_menu_component.rb

@@ -36,40 +36,20 @@ module Shadcn
       @side = side
     end
 
-    def call
-      content_tag(:div, dropdown_content, dropdown_attributes)
-    end
-
     private
 
-    def dropdown_content
-      safe_join([
-        trigger_wrapper,
-        menu
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--dropdown-target": "trigger",
-        "data-action": "click->shadcn--dropdown#toggle"
-      })
+    def dropdown_classes
+      cn("relative inline-block", class_name)
     end
 
-    def dropdown_attributes
-      attrs = {
-        class: cn("relative inline-block", class_name),
-        "data-controller": "shadcn--dropdown",
-        "data-shadcn--dropdown-open-value": @open.to_s,
-        "data-shadcn--dropdown-align-value": @align.to_s,
-        "data-shadcn--dropdown-side-value": @side.to_s,
-        "data-action": "keydown.escape->shadcn--dropdown#close clickOutside->shadcn--dropdown#close"
+    def dropdown_data_attrs
+      {
+        controller: "shadcn--dropdown",
+        "shadcn--dropdown-open-value": @open.to_s,
+        "shadcn--dropdown-align-value": @align.to_s,
+        "shadcn--dropdown-side-value": @side.to_s,
+        action: "keydown.escape->shadcn--dropdown#close clickOutside->shadcn--dropdown#close"
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

data/app/components/shadcn/dropdown_menu_content_component.rb

@@ -5,17 +5,44 @@ module Shadcn
   class DropdownMenuContentComponent < BaseComponent
     BASE_CLASSES = "z-50 min-w-[8rem] 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 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"
 
-    renders_many :items, lambda { |**options, &block|
-      DropdownMenuItemComponent.new(**options, &block)
-    }
-    renders_many :labels, lambda { |**options, &block|
-      DropdownMenuLabelComponent.new(**options, &block)
-    }
-    renders_many :separators, lambda { |**options|
-      DropdownMenuSeparatorComponent.new(**options)
-    }
-    renders_many :groups, lambda { |**options, &block|
-      DropdownMenuGroupComponent.new(**options, &block)
+    # Use polymorphic slots to preserve the order of items, labels, separators, groups, etc.
+    renders_many :menu_items, types: {
+      item: {
+        renders: lambda { |**options, &block|
+          DropdownMenuItemComponent.new(**options, &block)
+        },
+        as: :item
+      },
+      label: {
+        renders: lambda { |**options, &block|
+          DropdownMenuLabelComponent.new(**options, &block)
+        },
+        as: :label
+      },
+      separator: {
+        renders: lambda { |**options|
+          DropdownMenuSeparatorComponent.new(**options)
+        },
+        as: :separator
+      },
+      group: {
+        renders: lambda { |**options, &block|
+          DropdownMenuGroupComponent.new(**options, &block)
+        },
+        as: :group
+      },
+      checkbox_item: {
+        renders: lambda { |**options, &block|
+          DropdownMenuCheckboxItemComponent.new(**options, &block)
+        },
+        as: :checkbox_item
+      },
+      radio_group: {
+        renders: lambda { |**options, &block|
+          DropdownMenuRadioGroupComponent.new(**options, &block)
+        },
+        as: :radio_group
+      }
     }
 
     def call
@@ -25,12 +52,14 @@ module Shadcn
     private
 
     def menu_content
-      # If items/labels/separators are used, render them
-      # Otherwise render the block content
-      if items.any? || labels.any? || separators.any? || groups.any?
-        safe_join([labels, items, separators, groups, 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/dropdown_menu_radio_group_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Radio Group component
+  # Group of mutually exclusive radio items
+  class DropdownMenuRadioGroupComponent < BaseComponent
+    renders_many :items, lambda { |**options, &block|
+      DropdownMenuRadioItemComponent.new(**options, &block)
+    }
+
+    # @param value [String] Currently selected value
+    def initialize(value: nil, **options, &block)
+      super(**options, &block)
+      @value = value
+    end
+
+    def call
+      content_tag(:div, group_content, group_attributes)
+    end
+
+    private
+
+    def group_content
+      if items.any?
+        safe_join(items)
+      else
+        content
+      end
+    end
+
+    def group_attributes
+      attrs = {
+        class: class_name,
+        role: "group",
+        "data-value": @value
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end