shadcn-rails 0.1.0 → 0.2.1

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

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

@@ -0,0 +1,13 @@
+<textarea class="<%= textarea_classes %>"<% if @name %>
+          name="<%= ERB::Util.html_escape_once(@name) %>"<% end %><% if @id %>
+          id="<%= ERB::Util.html_escape_once(@id) %>"<% end %><% if @placeholder %>
+          placeholder="<%= ERB::Util.html_escape_once(@placeholder) %>"<% end %><% if @rows %>
+          rows="<%= @rows %>"<% end %><% if @cols %>
+          cols="<%= @cols %>"<% end %><% if @disabled %>
+          disabled<% end %><% if @required %>
+          required<% end %><% if @readonly %>
+          readonly<% end %><% if @autofocus %>
+          autofocus<% end %><% if @minlength %>
+          minlength="<%= @minlength %>"<% end %><% if @maxlength %>
+          maxlength="<%= @maxlength %>"<% end %>
+          <%= tag_attributes %>><%= textarea_content %></textarea>

data/app/components/shadcn/textarea_component.rb

@@ -55,30 +55,14 @@ module Shadcn
       @maxlength = maxlength
     end
 
-    def call
-      content_tag(:textarea, @value || content, textarea_attributes)
-    end
-
     private
 
-    def textarea_attributes
-      attrs = {
-        name: @name,
-        id: @id,
-        placeholder: @placeholder,
-        rows: @rows,
-        cols: @cols,
-        disabled: @disabled || nil,
-        required: @required || nil,
-        readonly: @readonly || nil,
-        autofocus: @autofocus || nil,
-        minlength: @minlength,
-        maxlength: @maxlength,
-        class: merge_classes(BASE_CLASSES)
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def textarea_classes
+      merge_classes(BASE_CLASSES)
+    end
+
+    def textarea_content
+      @value || content
     end
   end
 end

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

@@ -0,0 +1,36 @@
+<li class="<%= toast_classes %>"
+    role="status"
+    aria-live="polite"
+    data-controller="shadcn--toast"
+    data-shadcn--toast-duration-value="<%= @duration %>"
+    data-shadcn--toast-open-value="<%= @open %>"
+    data-state="<%= data_state %>"
+    <%= tag_attributes %>>
+  <div class="grid gap-1">
+    <%= title %>
+    <%= description %>
+    <%= content %>
+  </div>
+  <%= action %>
+  <% if has_custom_close? %>
+    <%= close %>
+  <% else %>
+    <button type="button"
+            class="absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600"
+            data-action="click->shadcn--toast#close"
+            aria-label="Close">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           width="16"
+           height="16"
+           viewBox="0 0 24 24"
+           fill="none"
+           class="h-4 w-4">
+        <path d="M18 6 6 18M6 6l12 12"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round" />
+      </svg>
+    </button>
+  <% end %>
+</li>

data/app/components/shadcn/toast_component.rb

@@ -49,66 +49,18 @@ module Shadcn
       @open = open
     end
 
-    def call
-      content_tag(:li, toast_content, toast_attributes)
-    end
-
     private
 
-    def toast_content
-      safe_join([
-        content_wrapper,
-        action,
-        close_button
-      ].compact)
-    end
-
-    def content_wrapper
-      content_tag(:div, safe_join([title, description, content].compact), class: "grid gap-1")
-    end
-
-    def close_button
-      close || default_close_button
-    end
-
-    def default_close_button
-      content_tag(:button, close_icon, {
-        type: "button",
-        class: "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-        "data-action": "click->shadcn--toast#close",
-        "aria-label": "Close"
-      })
-    end
-
-    def close_icon
-      content_tag(:svg,
-        content_tag(:path, nil, d: "M18 6 6 18M6 6l12 12", 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"
-      )
-    end
-
     def toast_classes
       cn(BASE_CLASSES, VARIANTS[@variant], class_name)
     end
 
-    def toast_attributes
-      attrs = {
-        class: toast_classes,
-        role: "status",
-        "aria-live": "polite",
-        "data-controller": "shadcn--toast",
-        "data-shadcn--toast-duration-value": @duration,
-        "data-shadcn--toast-open-value": @open.to_s,
-        "data-state": @open ? "open" : "closed"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def has_custom_close?
+      close?
+    end
+
+    def data_state
+      @open ? "open" : "closed"
     end
   end
 end

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

@@ -0,0 +1,12 @@
+<button type="button"
+        class="<%= toggle_classes %>"
+        <%= "disabled" if @disabled %>
+        aria-pressed="<%= @pressed %>"
+        <%= "aria-label=\"#{ERB::Util.html_escape_once(@aria_label)}\"".html_safe if @aria_label %>
+        data-state="<%= data_state %>"
+        data-controller="shadcn--toggle"
+        data-action="click->shadcn--toggle#toggle"
+        data-shadcn--toggle-pressed-value="<%= @pressed %>"
+        <%= tag_attributes %>>
+  <%= content %>
+</button>

data/app/components/shadcn/toggle_component.rb

@@ -49,29 +49,14 @@ module Shadcn
       @aria_label = aria_label
     end
 
-    def call
-      content_tag(:button, toggle_attributes) do
-        content
-      end
-    end
-
     private
 
-    def toggle_attributes
-      attrs = {
-        type: "button",
-        class: cn(BASE_CLASSES, VARIANTS[@variant], SIZES[@size], class_name),
-        disabled: @disabled || nil,
-        "aria-pressed": @pressed.to_s,
-        "aria-label": @aria_label,
-        "data-state": @pressed ? "on" : "off",
-        "data-controller": "shadcn--toggle",
-        "data-action": "click->shadcn--toggle#toggle",
-        "data-shadcn--toggle-pressed-value": @pressed.to_s
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def toggle_classes
+      cn(BASE_CLASSES, VARIANTS[@variant], SIZES[@size], class_name)
+    end
+
+    def data_state
+      @pressed ? "on" : "off"
     end
   end
 end

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

@@ -0,0 +1,14 @@
+<div role="group"
+     class="<%= group_classes %>"
+     data-controller="shadcn--toggle-group"
+     data-shadcn--toggle-group-type-value="<%= @type %>"
+     data-shadcn--toggle-group-value-value="<%= value_string %>"
+     <%= tag_attributes %>>
+  <% if has_name? %>
+    <input type="hidden"
+           name="<%= @name %>"
+           value="<%= value_string %>"
+           data-shadcn--toggle-group-target="input" />
+  <% end %>
+  <%= safe_join(items.map(&:to_s)) %>
+</div>

data/app/components/shadcn/toggle_group_component.rb

@@ -56,41 +56,18 @@ module Shadcn
       @name = name
     end
 
-    def call
-      content_tag(:div, group_content, group_attributes)
-    end
-
     private
 
-    def group_content
-      safe_join([
-        hidden_input,
-        items.map(&:to_s)
-      ].flatten.compact)
+    def group_classes
+      merge_classes(BASE_CLASSES)
     end
 
-    def hidden_input
-      return unless @name
-
-      tag(:input,
-        type: "hidden",
-        name: @name,
-        value: Array(@value).join(","),
-        "data-shadcn--toggle-group-target": "input"
-      )
+    def has_name?
+      @name.present?
     end
 
-    def group_attributes
-      attrs = {
-        role: "group",
-        class: merge_classes(BASE_CLASSES),
-        "data-controller": "shadcn--toggle-group",
-        "data-shadcn--toggle-group-type-value": @type.to_s,
-        "data-shadcn--toggle-group-value-value": Array(@value).join(",")
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def value_string
+      Array(@value).join(",")
     end
   end
 end

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

@@ -0,0 +1,20 @@
+<span class="<%= tooltip_classes %>"
+      data-controller="<%= tooltip_data_attrs[:controller] %>"
+      data-shadcn--tooltip-side-value="<%= tooltip_data_attrs[:"shadcn--tooltip-side-value"] %>"
+      data-shadcn--tooltip-align-value="<%= tooltip_data_attrs[:"shadcn--tooltip-align-value"] %>"
+      data-shadcn--tooltip-delay-value="<%= tooltip_data_attrs[:"shadcn--tooltip-delay-value"] %>"
+      data-shadcn--tooltip-skip-delay-value="<%= tooltip_data_attrs[:"shadcn--tooltip-skip-delay-value"] %>"
+      <%= tag_attributes %>>
+  <span data-shadcn--tooltip-target="trigger"
+        data-action="mouseenter->shadcn--tooltip#show mouseleave->shadcn--tooltip#hide focus->shadcn--tooltip#show blur->shadcn--tooltip#hide">
+    <%= content %>
+  </span>
+  <div class="<%= tooltip_content_classes %>"
+       role="tooltip"
+       data-shadcn--tooltip-target="content"
+       data-side="<%= @side %>"
+       data-state="closed"
+       hidden>
+    <%= ERB::Util.html_escape_once(@tooltip_content) %>
+  </div>
+</span>