shadcn-rails 0.1.0 → 0.2.1

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

data/app/components/shadcn/scroll_area_component.rb

@@ -33,12 +33,12 @@ module Shadcn
       @type = type.to_sym
     end
 
-    def call
-      content_tag(:div, scroll_structure, scroll_attributes)
-    end
-
     private
 
+    def scroll_classes
+      merge_classes(BASE_CLASSES)
+    end
+
     def scroll_structure
       safe_join([
         viewport,
@@ -94,17 +94,5 @@ module Shadcn
 
       content_tag(:div, "", class: "absolute right-0 bottom-0 h-2.5 w-2.5 bg-transparent")
     end
-
-    def scroll_attributes
-      attrs = {
-        class: merge_classes(BASE_CLASSES),
-        "data-controller": "shadcn--scroll-area",
-        "data-shadcn--scroll-area-orientation-value": @orientation.to_s,
-        "data-shadcn--scroll-area-type-value": @type.to_s
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
-    end
   end
 end

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

@@ -0,0 +1,46 @@
+<div class="<%= wrapper_classes %>"
+     data-controller="shadcn--select"
+     data-shadcn--select-value-value="<%= @value %>"
+     data-action="keydown.escape->shadcn--select#close"
+     <%= tag_attributes %>>
+  <input type="hidden"
+         <%= "name=\"#{ERB::Util.html_escape_once(@name)}\"".html_safe if @name %>
+         <%= "id=\"#{ERB::Util.html_escape_once(@id)}\"".html_safe if @id %>
+         <%= "value=\"#{ERB::Util.html_escape_once(@value)}\"".html_safe if @value %>
+         <%= "required" if @required %>
+         data-shadcn--select-target="input" />
+
+  <button type="button"
+          class="<%= trigger_classes %>"
+          role="combobox"
+          <%= "disabled" if @disabled %>
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          data-shadcn--select-target="trigger"
+          data-action="click->shadcn--select#toggle keydown->shadcn--select#handleKeydown"
+          data-placeholder="<%= @placeholder %>">
+    <span data-shadcn--select-target="display"><%= display_text %></span>
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="16"
+         height="16"
+         viewBox="0 0 24 24"
+         fill="none"
+         class="h-4 w-4 opacity-50">
+      <path d="m6 9 6 6 6-6"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+  </button>
+
+  <div class="<%= CONTENT_CLASSES %>"
+       role="listbox"
+       data-shadcn--select-target="content"
+       data-state="closed"
+       hidden>
+    <div class="<%= VIEWPORT_CLASSES %>">
+      <%= items_content %>
+    </div>
+  </div>
+</div>

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
@@ -56,96 +65,30 @@ module Shadcn
       @required = required
     end
 
-    def call
-      content_tag(:div, select_structure, select_attributes)
-    end
-
     private
 
-    def select_structure
-      safe_join([
-        hidden_input,
-        trigger,
-        content_wrapper
-      ])
-    end
-
-    def hidden_input
-      tag(:input,
-        type: "hidden",
-        name: @name,
-        id: @id,
-        value: @value,
-        required: @required || nil,
-        "data-shadcn--select-target": "input"
-      )
-    end
-
-    def trigger
-      content_tag(:button, trigger_content, trigger_attributes)
-    end
-
-    def trigger_content
-      safe_join([
-        content_tag(:span, @value.presence || @placeholder, "data-shadcn--select-target": "display"),
-        chevron_icon
-      ])
+    def wrapper_classes
+      cn("relative inline-block", class_name)
     end
 
-    def chevron_icon
-      content_tag(:svg,
-        content_tag(:path, nil, d: "m6 9 6 6 6-6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round"),
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        class: "h-4 w-4 opacity-50"
-      )
+    def trigger_classes
+      cn(TRIGGER_CLASSES, class_name)
     end
 
-    def trigger_attributes
-      {
-        type: "button",
-        class: cn(TRIGGER_CLASSES, class_name),
-        role: "combobox",
-        disabled: @disabled || nil,
-        "aria-expanded": "false",
-        "aria-haspopup": "listbox",
-        "data-shadcn--select-target": "trigger",
-        "data-action": "click->shadcn--select#toggle keydown->shadcn--select#handleKeydown",
-        "data-placeholder": @placeholder
-      }
-    end
-
-    def content_wrapper
-      content_tag(:div, viewport, {
-        class: CONTENT_CLASSES,
-        role: "listbox",
-        "data-shadcn--select-target": "content",
-        "data-state": "closed",
-        hidden: true
-      })
-    end
-
-    def viewport
-      content_tag(:div, items_content, class: VIEWPORT_CLASSES)
+    def display_text
+      @value.presence || @placeholder
     end
 
     def items_content
-      safe_join([items, groups, content].compact.flatten)
-    end
-
-    def select_attributes
-      attrs = {
-        class: cn("relative inline-block", class_name),
-        "data-controller": "shadcn--select",
-        "data-shadcn--select-value-value": @value,
-        "data-action": "keydown.escape->shadcn--select#close"
-      }
-      attrs.merge!(html_options.except(:class))
-      attrs.merge!(build_data)
-      attrs.compact
+      # 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
   end
 end

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

@@ -0,0 +1,5 @@
+<div class="<%= separator_classes %>"
+     role="<%= separator_role %>"<% if aria_orientation %>
+     aria-orientation="<%= aria_orientation %>"<% end %>
+     data-orientation="<%= @orientation %>"
+     <%= tag_attributes %>></div>

data/app/components/shadcn/separator_component.rb

@@ -29,26 +29,18 @@ module Shadcn
       @decorative = decorative
     end
 
-    def call
-      tag.div(**separator_attributes)
-    end
-
     private
 
     def separator_classes
       cn(BASE_CLASSES, ORIENTATIONS[@orientation], class_name)
     end
 
-    def separator_attributes
-      attrs = {
-        class: separator_classes,
-        role: @decorative ? "none" : "separator",
-        "aria-orientation": @decorative ? nil : @orientation.to_s,
-        "data-orientation": @orientation.to_s
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def separator_role
+      @decorative ? "none" : "separator"
+    end
+
+    def aria_orientation
+      @decorative ? nil : @orientation.to_s
     end
   end
 end

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

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

data/app/components/shadcn/sheet_component.rb

@@ -45,38 +45,18 @@ module Shadcn
       @open = open
     end
 
-    def call
-      content_tag(:div, sheet_structure, sheet_attributes)
-    end
-
     private
 
-    def sheet_structure
-      safe_join([
-        trigger_wrapper,
-        body
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--sheet-target": "trigger",
-        "data-action": "click->shadcn--sheet#open"
-      })
+    def sheet_classes
+      class_name
     end
 
-    def sheet_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--sheet",
-        "data-shadcn--sheet-open-value": @open.to_s,
-        "data-shadcn--sheet-side-value": @side.to_s
+    def sheet_data_attrs
+      {
+        controller: "shadcn--sheet",
+        "shadcn--sheet-open-value": @open.to_s,
+        "shadcn--sheet-side-value": @side.to_s
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

data/app/components/shadcn/sidebar_component.rb

@@ -86,12 +86,12 @@ module Shadcn
     end
 
     def call
-      content_tag(:aside, sidebar_content, sidebar_attributes)
+      content_tag(:aside, sidebar_wrapper, sidebar_attributes)
     end
 
     private
 
-    def sidebar_content
+    def sidebar_wrapper
       safe_join([
         sidebar_inner
       ].compact)

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

@@ -0,0 +1 @@
+<div class="<%= skeleton_classes %>" <%= tag_attributes %>><%= content %></div>