shadcn-rails 0.2.0 → 0.2.1

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

@@ -65,80 +65,18 @@ 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
@@ -152,17 +90,5 @@ module Shadcn
         raw_content
       end
     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
-    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>

data/app/components/shadcn/skeleton_component.rb

@@ -22,8 +22,10 @@ module Shadcn
   class SkeletonComponent < BaseComponent
     BASE_CLASSES = "animate-pulse rounded-md bg-primary/10"
 
-    def call
-      content_tag(:div, content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+    private
+
+    def skeleton_classes
+      merge_classes(BASE_CLASSES)
     end
   end
 end

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

@@ -0,0 +1,12 @@
+<input type="range"
+       <%= "name=\"#{ERB::Util.html_escape_once(@name)}\"".html_safe if @name %>
+       value="<%= @value %>"
+       min="<%= @min %>"
+       max="<%= @max %>"
+       step="<%= @step %>"
+       <%= "disabled" if @disabled %>
+       class="<%= slider_classes %>"
+       style="<%= slider_style %>"
+       data-controller="shadcn--slider"
+       data-action="input->shadcn--slider#updateStyle"
+       <%= tag_attributes %> />

data/app/components/shadcn/slider_component.rb

@@ -38,29 +38,10 @@ module Shadcn
       @disabled = disabled
     end
 
-    def call
-      tag(:input, input_attributes)
-    end
-
     private
 
-    def input_attributes
-      attrs = {
-        type: "range",
-        name: @name,
-        value: @value,
-        min: @min,
-        max: @max,
-        step: @step,
-        disabled: @disabled ? true : nil,
-        class: merge_classes(BASE_CLASSES),
-        style: slider_style,
-        "data-controller": "shadcn--slider",
-        "data-action": "input->shadcn--slider#updateStyle"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def slider_classes
+      merge_classes(BASE_CLASSES)
     end
 
     def slider_style

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

@@ -0,0 +1,18 @@
+<svg class="<%= spinner_classes %>"
+     xmlns="http://www.w3.org/2000/svg"
+     fill="none"
+     viewBox="0 0 24 24"
+     role="status"
+     aria-label="Loading"
+     <%= tag_attributes %>>
+  <circle class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+          fill="none"></circle>
+  <path class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>

data/app/components/shadcn/spinner_component.rb

@@ -30,38 +30,10 @@ module Shadcn
       @size = size.to_sym
     end
 
-    def call
-      tag.svg(**spinner_attributes) do
-        safe_join([
-          tag.circle(
-            class: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            "stroke-width": "4",
-            fill: "none"
-          ),
-          tag.path(
-            class: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          )
-        ])
-      end
-    end
-
     private
 
-    def spinner_attributes
-      {
-        class: cn(BASE_CLASSES, SIZES[@size], class_name),
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        role: "status",
-        "aria-label": "Loading"
-      }.merge(html_options).merge(build_data).compact
+    def spinner_classes
+      cn(BASE_CLASSES, SIZES[@size], class_name)
     end
   end
 end

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

@@ -0,0 +1,72 @@
+<% if has_label? %>
+  <label class="flex items-center gap-3 cursor-pointer">
+    <span class="inline-flex items-center"
+          data-controller="shadcn--switch"
+          data-shadcn--switch-checked-value="<%= @checked %>">
+      <% if @name %>
+        <input type="hidden" name="<%= ERB::Util.html_escape_once(@name) %>" value="0" autocomplete="off">
+        <input type="checkbox"
+               class="sr-only"
+               name="<%= ERB::Util.html_escape_once(@name) %>"<% if @id %>
+               id="<%= ERB::Util.html_escape_once(@id) %>"<% end %>
+               value="<%= ERB::Util.html_escape_once(@value) %>"<% if @checked %>
+               checked<% end %><% if @disabled %>
+               disabled<% end %><% if @required %>
+               required<% end %>
+               data-shadcn--switch-target="input"
+               tabindex="-1">
+      <% end %>
+      <button type="button"
+              role="switch"
+              class="<%= switch_classes %>"<% if @disabled %>
+              disabled<% end %>
+              aria-checked="<%= @checked %>"<% if @required %>
+              aria-required="true"<% end %>
+              data-state="<%= state %>"
+              data-shadcn--switch-target="button"
+              data-action="click->shadcn--switch#toggle keydown->shadcn--switch#handleKeydown"
+              tabindex="0"
+              <%= tag_attributes %>>
+        <span class="<%= THUMB_CLASSES %>"
+              data-state="<%= state %>"
+              data-shadcn--switch-target="thumb"></span>
+      </button>
+    </span>
+    <span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      <%= content %>
+    </span>
+  </label>
+<% else %>
+  <span class="inline-flex items-center"
+        data-controller="shadcn--switch"
+        data-shadcn--switch-checked-value="<%= @checked %>">
+    <% if @name %>
+      <input type="hidden" name="<%= ERB::Util.html_escape_once(@name) %>" value="0" autocomplete="off">
+      <input type="checkbox"
+             class="sr-only"
+             name="<%= ERB::Util.html_escape_once(@name) %>"<% if @id %>
+             id="<%= ERB::Util.html_escape_once(@id) %>"<% end %>
+             value="<%= ERB::Util.html_escape_once(@value) %>"<% if @checked %>
+             checked<% end %><% if @disabled %>
+             disabled<% end %><% if @required %>
+             required<% end %>
+             data-shadcn--switch-target="input"
+             tabindex="-1">
+    <% end %>
+    <button type="button"
+            role="switch"
+            class="<%= switch_classes %>"<% if @disabled %>
+            disabled<% end %>
+            aria-checked="<%= @checked %>"<% if @required %>
+            aria-required="true"<% end %>
+            data-state="<%= state %>"
+            data-shadcn--switch-target="button"
+            data-action="click->shadcn--switch#toggle keydown->shadcn--switch#handleKeydown"
+            tabindex="0"
+            <%= tag_attributes %>>
+      <span class="<%= THUMB_CLASSES %>"
+            data-state="<%= state %>"
+            data-shadcn--switch-target="thumb"></span>
+    </button>
+  </span>
+<% end %>

data/app/components/shadcn/switch_component.rb

@@ -52,96 +52,18 @@ module Shadcn
       @required = required
     end
 
-    def call
-      if content.present?
-        # Render with integrated label
-        content_tag(:label, class: "flex items-center gap-3 cursor-pointer") do
-          safe_join([
-            switch_wrapper,
-            content_tag(:span, content, class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
-          ])
-        end
-      else
-        switch_wrapper
-      end
-    end
-
     private
 
-    def switch_wrapper
-      content_tag(:span, wrapper_attributes) do
-        safe_join([
-          hidden_unchecked_input,
-          hidden_input,
-          switch_button
-        ].compact)
-      end
-    end
-
-    def wrapper_attributes
-      {
-        class: "inline-flex items-center",
-        "data-controller": "shadcn--switch",
-        "data-shadcn--switch-checked-value": @checked.to_s
-      }
-    end
-
-    def hidden_unchecked_input
-      # Rails convention: hidden input with "0" for unchecked state
-      return unless @name
-
-      tag(:input,
-        type: "hidden",
-        name: @name,
-        value: "0",
-        autocomplete: "off"
-      )
-    end
-
-    def hidden_input
-      return unless @name
-
-      tag(:input,
-        type: "checkbox",
-        name: @name,
-        id: @id,
-        value: @value,
-        checked: @checked || nil,
-        disabled: @disabled || nil,
-        required: @required || nil,
-        class: "sr-only",
-        "data-shadcn--switch-target": "input",
-        tabindex: "-1"
-      )
-    end
-
-    def switch_button
-      content_tag(:button, switch_thumb, switch_button_attributes)
-    end
-
-    def switch_thumb
-      content_tag(:span, "", class: THUMB_CLASSES, "data-state": state, "data-shadcn--switch-target": "thumb")
+    def has_label?
+      content.present?
     end
 
     def state
       @checked ? "checked" : "unchecked"
     end
 
-    def switch_button_attributes
-      attrs = {
-        type: "button",
-        role: "switch",
-        class: cn(BASE_CLASSES, class_name),
-        disabled: @disabled || nil,
-        "aria-checked": @checked.to_s,
-        "aria-required": @required ? "true" : nil,
-        "data-state": state,
-        "data-shadcn--switch-target": "button",
-        "data-action": "click->shadcn--switch#toggle keydown->shadcn--switch#handleKeydown",
-        tabindex: "0"
-      }
-      attrs.merge!(html_options.except(:class))
-      attrs.compact
+    def switch_classes
+      cn(BASE_CLASSES, class_name)
     end
   end
 end

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

@@ -0,0 +1,9 @@
+<div class="relative w-full overflow-auto">
+  <table class="<%= table_classes %>">
+    <%= caption %>
+    <%= header %>
+    <%= body %>
+    <%= footer %>
+    <%= content %>
+  </table>
+</div>

data/app/components/shadcn/table_component.rb

@@ -40,18 +40,10 @@ module Shadcn
       TableFooterComponent.new(**options)
     }
 
-    def call
-      content_tag(:div, table_element, class: "relative w-full overflow-auto")
-    end
-
     private
 
-    def table_element
-      content_tag(:table, table_content, class: merge_classes(BASE_CLASSES))
-    end
-
-    def table_content
-      safe_join([caption, header, body, footer, content].compact)
+    def table_classes
+      merge_classes(BASE_CLASSES)
     end
   end
 end

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

@@ -0,0 +1,8 @@
+<div class="<%= tabs_classes %>"
+     data-controller="shadcn--tabs"
+     <% if @default_value %>data-shadcn--tabs-default-value="<%= @default_value %>"<% end %>
+     <% if @url_param %>data-shadcn--tabs-url-param-value="<%= @url_param %>"<% end %>
+     data-orientation="<%= @orientation %>"
+     <%= tag_attributes %>>
+  <%= tabs_content %>
+</div>

data/app/components/shadcn/tabs_component.rb

@@ -52,27 +52,14 @@ module Shadcn
       @url_param = url_param
     end
 
-    def call
-      content_tag(:div, tabs_content, tabs_attributes)
-    end
-
     private
 
-    def tabs_content
-      safe_join([list, panels, content].compact.flatten)
+    def tabs_classes
+      class_name
     end
 
-    def tabs_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--tabs",
-        "data-shadcn--tabs-default-value": @default_value,
-        "data-shadcn--tabs-url-param-value": @url_param,
-        "data-orientation": @orientation.to_s
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def tabs_content
+      safe_join([list, panels, content].compact.flatten)
     end
   end
 end