shadcn-rails 0.1.0 → 0.2.0

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/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/radio_group_item_component.rb

@@ -8,6 +8,9 @@ module Shadcn
   # @example With label parameter (Tier 2 API)
   #   <%= group.with_item(value: "free", label: "Free") %>
   #
+  # @example With label and description
+  #   <%= group.with_item(value: "pro", label: "Pro", description: "For professional developers") %>
+  #
   # @example With block content (backward compatible)
   #   <%= group.with_item(value: "free") { "Free" } %>
   #
@@ -36,10 +39,12 @@ module Shadcn
     ].join(" ")
 
     LABEL_CLASSES = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    DESCRIPTION_CLASSES = "text-sm text-muted-foreground"
 
     # @param value [String] The value for this radio option
     # @param id [String, nil] HTML id attribute
     # @param label [String, nil] Label text (alternative to block content)
+    # @param description [String, nil] Description text displayed below the label
     # @param disabled [Boolean] Whether this option is disabled
     # @param group_name [String, nil] The name attribute from parent group
     # @param selected [Boolean] Whether this option is selected
@@ -47,6 +52,7 @@ module Shadcn
       value:,
       id: nil,
       label: nil,
+      description: nil,
       disabled: false,
       group_name: nil,
       selected: false,
@@ -57,6 +63,7 @@ module Shadcn
       @value = value
       @id = id || "radio-#{value}"
       @label = label
+      @description = description
       @disabled = disabled
       @group_name = group_name
       @selected = selected
@@ -66,12 +73,17 @@ module Shadcn
       label_text = @label || content.presence
 
       if label_text.present?
-        # Render with integrated label
-        content_tag(:label, label_wrapper_attributes) do
-          safe_join([
-            radio_input,
-            content_tag(:span, label_text, class: LABEL_CLASSES)
-          ])
+        if @description.present?
+          # Render with label and description
+          render_with_description(label_text)
+        else
+          # Render with integrated label only
+          content_tag(:label, label_wrapper_attributes) do
+            safe_join([
+              radio_input,
+              content_tag(:span, label_text, class: LABEL_CLASSES)
+            ])
+          end
         end
       else
         # Render just the radio input (for use with external labels)
@@ -81,6 +93,20 @@ module Shadcn
 
     private
 
+    def render_with_description(label_text)
+      content_tag(:div, class: "flex items-start space-x-3") do
+        safe_join([
+          content_tag(:div, class: "mt-0.5") { radio_input },
+          content_tag(:div, class: "grid gap-1.5 leading-none") do
+            safe_join([
+              content_tag(:label, label_text, class: cn(LABEL_CLASSES, "cursor-pointer"), for: @id),
+              content_tag(:p, @description, class: DESCRIPTION_CLASSES)
+            ])
+          end
+        ])
+      end
+    end
+
     def radio_input
       tag(:input, input_attributes)
     end

data/app/components/shadcn/resizable_panel_group_component.rb

@@ -32,22 +32,30 @@ module Shadcn
   #   <% end %>
   #
   class ResizablePanelGroupComponent < BaseComponent
-    renders_many :panels, lambda { |default_size: nil, min_size: nil, max_size: nil, **options|
-      ResizablePanelComponent.new(
-        default_size: default_size,
-        min_size: min_size,
-        max_size: max_size,
-        direction: @direction,
-        **options
-      )
-    }
-
-    renders_many :handles, lambda { |with_handle: false, **options|
-      ResizableHandleComponent.new(
-        with_handle: with_handle,
-        direction: @direction,
-        **options
-      )
+    # Use polymorphic slots to preserve the order of panels and handles
+    renders_many :items, types: {
+      panel: {
+        renders: lambda { |default_size: nil, min_size: nil, max_size: nil, **options|
+          ResizablePanelComponent.new(
+            default_size: default_size,
+            min_size: min_size,
+            max_size: max_size,
+            direction: @direction,
+            **options
+          )
+        },
+        as: :panel
+      },
+      handle: {
+        renders: lambda { |with_handle: false, **options|
+          ResizableHandleComponent.new(
+            with_handle: with_handle,
+            direction: @direction,
+            **options
+          )
+        },
+        as: :handle
+      }
     }
 
     DIRECTIONS = {
@@ -70,7 +78,10 @@ module Shadcn
     private
 
     def group_content
+      # Trigger slot evaluation first
       content
+      # Render all items in the order they were added
+      safe_join(items)
     end
 
     def group_attributes

data/app/components/shadcn/select_component.rb

@@ -25,11 +25,20 @@ module Shadcn
     CONTENT_CLASSES = "absolute left-0 top-full z-50 mt-1 max-h-96 min-w-[var(--radix-select-trigger-width)] w-max overflow-hidden rounded-md border bg-popover 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"
     VIEWPORT_CLASSES = "p-1"
 
-    renders_many :items, lambda { |value:, **options, &block|
-      SelectItemComponent.new(value: value, **options, &block)
-    }
-    renders_many :groups, lambda { |label: nil, **options, &block|
-      SelectGroupComponent.new(label: label, **options, &block)
+    # Use polymorphic slots to preserve the order of items and groups
+    renders_many :select_items, types: {
+      item: {
+        renders: lambda { |value:, **options, &block|
+          SelectItemComponent.new(value: value, **options, &block)
+        },
+        as: :item
+      },
+      group: {
+        renders: lambda { |label: nil, **options, &block|
+          SelectGroupComponent.new(label: label, **options, &block)
+        },
+        as: :group
+      }
     }
 
     # @param name [String, nil] Form field name
@@ -133,7 +142,15 @@ module Shadcn
     end
 
     def items_content
-      safe_join([items, groups, content].compact.flatten)
+      # Trigger slot evaluation first by accessing content
+      raw_content = content
+      # If polymorphic slots were used, render them in order
+      if select_items.any?
+        safe_join(select_items)
+      else
+        # Otherwise render the raw block content (for backwards compatibility)
+        raw_content
+      end
     end
 
     def select_attributes