shadcn-rails 0.1.0

data/app/components/shadcn/sidebar_menu_sub_button_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarMenuSubButton component - button within submenu item
+  class SidebarMenuSubButtonComponent < BaseComponent
+    SIZES = {
+      sm: "text-xs",
+      md: "text-sm"
+    }.freeze
+
+    BASE_CLASSES = "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground"
+    ACTIVE_CLASSES = "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground"
+
+    def initialize(size: :md, is_active: false, href: nil, **options)
+      super(**options)
+      @size = size.to_sym
+      @is_active = is_active
+      @href = href
+    end
+
+    def call
+      if @href
+        content_tag(:a, content, button_attributes.merge(href: @href))
+      else
+        content_tag(:button, content, button_attributes.merge(type: "button"))
+      end
+    end
+
+    private
+
+    def button_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, ACTIVE_CLASSES, SIZES[@size], class_name),
+        "data-sidebar": "menu-sub-button",
+        "data-size": @size,
+        "data-active": @is_active
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_menu_sub_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarMenuSub component - submenu container
+  class SidebarMenuSubComponent < BaseComponent
+    BASE_CLASSES = "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5"
+    COLLAPSED_CLASSES = "group-data-[collapsible=icon]:hidden"
+
+    renders_many :items, lambda { |**options|
+      SidebarMenuSubItemComponent.new(**options)
+    }
+
+    def call
+      content_tag(:ul, sub_content, sub_attributes)
+    end
+
+    private
+
+    def sub_content
+      items.any? ? safe_join(items) : content
+    end
+
+    def sub_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, COLLAPSED_CLASSES, class_name),
+        "data-sidebar": "menu-sub"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_menu_sub_item_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarMenuSubItem component - submenu item
+  class SidebarMenuSubItemComponent < BaseComponent
+    renders_one :button, lambda { |**options|
+      SidebarMenuSubButtonComponent.new(**options)
+    }
+
+    def call
+      content_tag(:li, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      button || content
+    end
+
+    def item_attributes
+      attrs = {
+        "data-sidebar": "menu-sub-item"
+      }
+      attrs[:class] = class_name if class_name.present?
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_provider_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarProvider component - wrapper that provides sidebar context and state
+  class SidebarProviderComponent < BaseComponent
+    BASE_CLASSES = "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar"
+
+    renders_one :sidebar, lambda { |**options|
+      SidebarComponent.new(**options)
+    }
+    renders_one :inset, lambda { |**options|
+      SidebarInsetComponent.new(**options)
+    }
+
+    def initialize(default_open: true, open: nil, keyboard_shortcut: "b", **options)
+      super(**options)
+      @default_open = default_open
+      @open = open
+      @keyboard_shortcut = keyboard_shortcut
+    end
+
+    def call
+      content_tag(:div, provider_content, provider_attributes)
+    end
+
+    private
+
+    def provider_content
+      safe_join([sidebar, inset, content].compact)
+    end
+
+    def provider_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        style: sidebar_style,
+        "data-controller": "shadcn--sidebar",
+        "data-shadcn--sidebar-open-value": initial_open_state,
+        "data-shadcn--sidebar-keyboard-shortcut-value": @keyboard_shortcut
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+
+    def sidebar_style
+      [
+        "--sidebar-width: 16rem",
+        "--sidebar-width-icon: 3rem"
+      ].join("; ")
+    end
+
+    def initial_open_state
+      # Use explicit open prop if provided, otherwise use default_open
+      @open.nil? ? @default_open : @open
+    end
+  end
+end

data/app/components/shadcn/sidebar_rail_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarRail component - thin interactive rail for expanding collapsed sidebar
+  class SidebarRailComponent < BaseComponent
+    BASE_CLASSES = "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex"
+    HOVER_EXPAND_CLASSES = "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&]:-left-2"
+
+    def call
+      content_tag(:button, nil, rail_attributes)
+    end
+
+    private
+
+    def rail_attributes
+      attrs = {
+        type: "button",
+        class: cn(BASE_CLASSES, HOVER_EXPAND_CLASSES, class_name),
+        tabindex: "-1",
+        "aria-label": "Toggle Sidebar",
+        title: "Toggle Sidebar",
+        "data-sidebar": "rail",
+        "data-action": "click->shadcn--sidebar#toggle"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_separator_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarSeparator component - visual separator for sidebar
+  class SidebarSeparatorComponent < BaseComponent
+    BASE_CLASSES = "mx-2 w-auto bg-sidebar-border"
+
+    def call
+      content_tag(:hr, nil, separator_attributes)
+    end
+
+    private
+
+    def separator_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-sidebar": "separator"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_trigger_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarTrigger component - button to toggle sidebar open/closed
+  class SidebarTriggerComponent < BaseComponent
+    BASE_CLASSES = "h-7 w-7"
+
+    def call
+      render ButtonComponent.new(
+        variant: :ghost,
+        size: :icon,
+        class_name: cn(BASE_CLASSES, class_name),
+        data: { sidebar: "trigger", action: "click->shadcn--sidebar#toggle" },
+        **html_options
+      ) do
+        trigger_content
+      end
+    end
+
+    private
+
+    def trigger_content
+      if content?
+        content
+      else
+        default_icon
+      end
+    end
+
+    def default_icon
+      # PanelLeft icon from Lucide
+      content_tag(:svg, nil,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "size-4"
+      ) do
+        safe_join([
+          content_tag(:rect, nil, width: "18", height: "18", x: "3", y: "3", rx: "2"),
+          content_tag(:path, nil, d: "M9 3v18")
+        ])
+      end
+    end
+  end
+end

data/app/components/shadcn/skeleton_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Skeleton component for loading placeholders
+  # Matches shadcn/ui Skeleton component
+  #
+  # @example Basic skeleton
+  #   <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[250px]") %>
+  #
+  # @example Circle skeleton (for avatars)
+  #   <%= render Shadcn::SkeletonComponent.new(class_name: "h-12 w-12 rounded-full") %>
+  #
+  # @example Card skeleton
+  #   <div class="flex flex-col space-y-3">
+  #     <%= render Shadcn::SkeletonComponent.new(class_name: "h-[125px] w-[250px] rounded-xl") %>
+  #     <div class="space-y-2">
+  #       <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[250px]") %>
+  #       <%= render Shadcn::SkeletonComponent.new(class_name: "h-4 w-[200px]") %>
+  #     </div>
+  #   </div>
+  #
+  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))
+    end
+  end
+end

data/app/components/shadcn/slider_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Slider component for selecting values within a range
+  # Uses a native range input with custom styling for reliability
+  # Matches shadcn/ui Slider component appearance
+  #
+  # @example Basic usage
+  #   <%= render Shadcn::SliderComponent.new(name: "volume", value: 50, max: 100) %>
+  #
+  # @example With step
+  #   <%= render Shadcn::SliderComponent.new(name: "rating", value: 3, min: 1, max: 5, step: 1) %>
+  #
+  class SliderComponent < BaseComponent
+    BASE_CLASSES = "shadcn-slider w-full h-1.5 rounded-full appearance-none cursor-pointer bg-primary/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+
+    # @param name [String] Input name attribute
+    # @param value [Numeric] Current value
+    # @param min [Numeric] Minimum value
+    # @param max [Numeric] Maximum value
+    # @param step [Numeric] Step increment
+    # @param disabled [Boolean] Whether slider is disabled
+    def initialize(
+      name: nil,
+      value: 0,
+      min: 0,
+      max: 100,
+      step: 1,
+      disabled: false,
+      **options
+    )
+      super(**options)
+      @name = name
+      @value = value.to_f
+      @min = min.to_f
+      @max = max.to_f
+      @step = step.to_f
+      @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
+    end
+
+    def slider_style
+      # CSS custom property for the fill percentage
+      "--slider-fill: #{percentage}%"
+    end
+
+    def percentage
+      return 0 if @max == @min
+      ((@value - @min) / (@max - @min) * 100).round(2)
+    end
+  end
+end

data/app/components/shadcn/spinner_component.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Spinner component for loading states
+  # Matches shadcn/ui Spinner component
+  #
+  # @example Basic spinner
+  #   <%= render Shadcn::SpinnerComponent.new %>
+  #
+  # @example With size
+  #   <%= render Shadcn::SpinnerComponent.new(size: :sm) %>
+  #   <%= render Shadcn::SpinnerComponent.new(size: :lg) %>
+  #
+  # @example Custom color
+  #   <%= render Shadcn::SpinnerComponent.new(class_name: "text-primary") %>
+  #
+  class SpinnerComponent < BaseComponent
+    SIZES = {
+      sm: "h-4 w-4",
+      default: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-12 w-12"
+    }.freeze
+
+    BASE_CLASSES = "animate-spin text-muted-foreground"
+
+    # @param size [Symbol] Spinner size (:sm, :default, :lg, :xl)
+    def initialize(size: :default, **options)
+      super(**options)
+      @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
+    end
+  end
+end

data/app/components/shadcn/switch_component.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Switch component for toggle inputs
+  # Uses a custom button element with hidden input for form submission
+  # Requires Stimulus controller for interactivity
+  #
+  # @example Basic switch
+  #   <%= render Shadcn::SwitchComponent.new(name: "notifications") %>
+  #
+  # @example With integrated label
+  #   <%= render Shadcn::SwitchComponent.new(name: "dark_mode") { "Enable dark mode" } %>
+  #
+  # @example Checked by default
+  #   <%= render Shadcn::SwitchComponent.new(name: "active", checked: true) %>
+  #
+  class SwitchComponent < BaseComponent
+    BASE_CLASSES = [
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full",
+      "border-2 border-transparent shadow-sm transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
+    ].join(" ")
+
+    THUMB_CLASSES = [
+      "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0",
+      "transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+    ].join(" ")
+
+    # @param name [String, nil] Input name attribute
+    # @param id [String, nil] Input id attribute
+    # @param value [String] Value when checked
+    # @param checked [Boolean] Whether switch is on
+    # @param disabled [Boolean] Whether switch is disabled
+    # @param required [Boolean] Whether switch is required
+    def initialize(
+      name: nil,
+      id: nil,
+      value: "1",
+      checked: false,
+      disabled: false,
+      required: false,
+      **options
+    )
+      super(**options)
+      @name = name
+      @id = id || (name ? "switch-#{name}" : nil)
+      @value = value
+      @checked = checked
+      @disabled = disabled
+      @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")
+    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
+    end
+  end
+end

data/app/components/shadcn/table_body_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Table Body component
+  class TableBodyComponent < BaseComponent
+    BASE_CLASSES = "[&_tr:last-child]:border-0"
+
+    renders_many :rows, lambda { |**options, &block|
+      TableRowComponent.new(**options, &block)
+    }
+
+    def call
+      content_tag(:tbody, safe_join([rows, content].compact.flatten), class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/table_caption_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Table Caption component
+  class TableCaptionComponent < BaseComponent
+    BASE_CLASSES = "mt-4 text-sm text-muted-foreground"
+
+    def call
+      content_tag(:caption, content, class: merge_classes(BASE_CLASSES), **html_options)
+    end
+  end
+end

data/app/components/shadcn/table_cell_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Table Cell component
+  class TableCellComponent < BaseComponent
+    BASE_CLASSES = "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
+
+    def call
+      content_tag(:td, content, class: merge_classes(BASE_CLASSES), **html_options)
+    end
+  end
+end