shadcn-rails 0.1.0

data/app/components/shadcn/radio_group_component.rb

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Radio Group component for selecting one option from a set
+  # Uses native <input type="radio"> elements styled with CSS
+  # Works without JavaScript for progressive enhancement
+  #
+  # @example Data-driven usage (Tier 1)
+  #   <%= render Shadcn::RadioGroupComponent.new(
+  #     name: "plan",
+  #     value: "pro",
+  #     items: [
+  #       { value: "free", label: "Free" },
+  #       { value: "pro", label: "Pro" },
+  #       { value: "enterprise", label: "Enterprise", disabled: true }
+  #     ]
+  #   ) %>
+  #
+  # @example Simple DSL with labels (Tier 2)
+  #   <%= render Shadcn::RadioGroupComponent.new(name: "plan") do |group| %>
+  #     <%= group.with_item(value: "free", label: "Free") %>
+  #     <%= group.with_item(value: "pro", label: "Pro") %>
+  #   <% end %>
+  #
+  # @example With separate labels (backward compatible)
+  #   <%= render Shadcn::RadioGroupComponent.new(name: "plan") do |group| %>
+  #     <div class="flex items-center space-x-2">
+  #       <%= group.with_item(value: "free", id: "free") %>
+  #       <%= render Shadcn::LabelComponent.new(for: "free") { "Free" } %>
+  #     </div>
+  #   <% end %>
+  #
+  class RadioGroupComponent < BaseComponent
+    BASE_CLASSES = "grid gap-3"
+
+    renders_many :items, ->(value:, id: nil, label: nil, disabled: false, **options, &block) do
+      RadioGroupItemComponent.new(
+        value: value,
+        id: id || generate_item_id(value),
+        label: label,
+        disabled: @disabled || disabled,
+        group_name: @name,
+        selected: @value.to_s == value.to_s,
+        **options,
+        &block
+      )
+    end
+
+    # @param name [String] Input name attribute for form submission
+    # @param value [String, nil] Currently selected value
+    # @param items [Array<Hash>] Array of item hashes with :value, :label, :disabled keys
+    # @param disabled [Boolean] Whether the entire group is disabled
+    # @param required [Boolean] Whether a selection is required
+    # @param orientation [Symbol] :vertical or :horizontal layout
+    def initialize(
+      name:,
+      value: nil,
+      items: [],
+      disabled: false,
+      required: false,
+      orientation: :vertical,
+      **options
+    )
+      super(**options)
+      @name = name
+      @value = value
+      @items_data = items
+      @disabled = disabled
+      @required = required
+      @orientation = orientation
+    end
+
+    def call
+      content_tag(:div, group_attributes) do
+        safe_join([render_data_items, render_slot_items].compact)
+      end
+    end
+
+    private
+
+    # Render items from the items: data array
+    def render_data_items
+      return nil if @items_data.empty?
+
+      safe_join(@items_data.map do |item|
+        RadioGroupItemComponent.new(
+          value: item[:value],
+          id: generate_item_id(item[:value]),
+          label: item[:label],
+          disabled: @disabled || item[:disabled],
+          group_name: @name,
+          selected: @value.to_s == item[:value].to_s
+        ).render_in(view_context)
+      end)
+    end
+
+    # Render items from with_item slot calls
+    def render_slot_items
+      return nil if items.empty?
+
+      safe_join(items.map(&:to_s))
+    end
+
+    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

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Individual radio button item using native <input type="radio">
+  # Styled with CSS to match shadcn/ui design
+  # Works without JavaScript
+  #
+  # @example With label parameter (Tier 2 API)
+  #   <%= group.with_item(value: "free", label: "Free") %>
+  #
+  # @example With block content (backward compatible)
+  #   <%= group.with_item(value: "free") { "Free" } %>
+  #
+  # @example Without label (for external labels)
+  #   <%= group.with_item(value: "free", id: "plan-free") %>
+  #
+  class RadioGroupItemComponent < BaseComponent
+    # CSS classes for the native radio input styled as a custom circle
+    ITEM_CLASSES = [
+      # Reset native appearance
+      "appearance-none",
+      # Size and shape
+      "aspect-square h-4 w-4 shrink-0 rounded-full",
+      # Border and colors
+      "border border-primary",
+      # Ring focus style
+      "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+      # Disabled state
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      # Custom checked indicator using CSS
+      "relative",
+      # Checked state - show inner circle
+      "checked:bg-primary",
+      # Transition for smooth state changes
+      "transition-colors"
+    ].join(" ")
+
+    LABEL_CLASSES = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+
+    # @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 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
+    def initialize(
+      value:,
+      id: nil,
+      label: nil,
+      disabled: false,
+      group_name: nil,
+      selected: false,
+      **options,
+      &block
+    )
+      super(**options, &block)
+      @value = value
+      @id = id || "radio-#{value}"
+      @label = label
+      @disabled = disabled
+      @group_name = group_name
+      @selected = selected
+    end
+
+    def call
+      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)
+          ])
+        end
+      else
+        # Render just the radio input (for use with external labels)
+        radio_input
+      end
+    end
+
+    private
+
+    def radio_input
+      tag(:input, input_attributes)
+    end
+
+    def input_attributes
+      attrs = {
+        type: "radio",
+        name: @group_name,
+        value: @value,
+        id: @id,
+        class: cn(ITEM_CLASSES, "peer", class_name),
+        disabled: @disabled || nil,
+        checked: @selected || nil
+      }
+      attrs.merge!(html_options.except(:class))
+      attrs.compact
+    end
+
+    def label_wrapper_attributes
+      {
+        class: "flex items-center space-x-2 cursor-pointer",
+        for: @id
+      }
+    end
+  end
+end

data/app/components/shadcn/resizable_handle_component.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Draggable handle between resizable panels
+  class ResizableHandleComponent < BaseComponent
+    HORIZONTAL_CLASSES = "w-px bg-border cursor-col-resize hover:bg-primary/50 transition-colors"
+    VERTICAL_CLASSES = "h-px bg-border cursor-row-resize hover:bg-primary/50 transition-colors"
+
+    # @param with_handle [Boolean] Whether to show a visual handle indicator
+    # @param direction [Symbol] Direction passed from parent group
+    def initialize(with_handle: false, direction: :horizontal, **options)
+      super(**options)
+      @with_handle = with_handle
+      @direction = direction
+    end
+
+    def call
+      content_tag(:div, handle_content, handle_attributes)
+    end
+
+    private
+
+    def handle_content
+      return nil unless @with_handle
+
+      content_tag(:div, grip_icon, handle_indicator_attributes)
+    end
+
+    def handle_attributes
+      {
+        class: class_names,
+        "data-panel-resize-handle": "",
+        "data-shadcn--resizable-target": "handle",
+        "data-action": "mousedown->shadcn--resizable#startResize touchstart->shadcn--resizable#startResize",
+        role: "separator",
+        tabindex: "0",
+        "aria-orientation": @direction == :horizontal ? "vertical" : "horizontal"
+      }.merge(html_options).compact
+    end
+
+    def handle_indicator_attributes
+      {
+        class: cn(
+          "z-10 flex items-center justify-center rounded-sm border bg-border",
+          @direction == :horizontal ? "h-4 w-3" : "w-4 h-3"
+        )
+      }
+    end
+
+    def grip_icon
+      if @direction == :horizontal
+        # Vertical grip dots for horizontal resize
+        content_tag(:svg, grip_dots_vertical, xmlns: "http://www.w3.org/2000/svg", width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", class: "h-2.5 w-2.5")
+      else
+        # Horizontal grip dots for vertical resize
+        content_tag(:svg, grip_dots_horizontal, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", fill: "currentColor", class: "h-2.5 w-2.5")
+      end
+    end
+
+    def grip_dots_vertical
+      # GripVertical icon - 6 dots in 2 columns
+      safe_join([
+        content_tag(:circle, nil, cx: "3", cy: "2", r: "1"),
+        content_tag(:circle, nil, cx: "7", cy: "2", r: "1"),
+        content_tag(:circle, nil, cx: "3", cy: "8", r: "1"),
+        content_tag(:circle, nil, cx: "7", cy: "8", r: "1"),
+        content_tag(:circle, nil, cx: "3", cy: "14", r: "1"),
+        content_tag(:circle, nil, cx: "7", cy: "14", r: "1")
+      ])
+    end
+
+    def grip_dots_horizontal
+      # GripHorizontal icon - 6 dots in 2 rows
+      safe_join([
+        content_tag(:circle, nil, cx: "2", cy: "3", r: "1"),
+        content_tag(:circle, nil, cx: "8", cy: "3", r: "1"),
+        content_tag(:circle, nil, cx: "14", cy: "3", r: "1"),
+        content_tag(:circle, nil, cx: "2", cy: "7", r: "1"),
+        content_tag(:circle, nil, cx: "8", cy: "7", r: "1"),
+        content_tag(:circle, nil, cx: "14", cy: "7", r: "1")
+      ])
+    end
+
+    def class_names
+      base = @direction == :horizontal ? HORIZONTAL_CLASSES : VERTICAL_CLASSES
+      cn(
+        "relative flex items-center justify-center",
+        base,
+        @with_handle && (@direction == :horizontal ? "w-2" : "h-2"),
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+        "after:absolute",
+        @direction == :horizontal ? "after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2" : "after:inset-x-0 after:top-1/2 after:h-1 after:-translate-y-1/2",
+        "[&[data-state=dragging]]:bg-primary",
+        @class_name
+      )
+    end
+  end
+end

data/app/components/shadcn/resizable_panel_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Individual panel within a ResizablePanelGroup
+  class ResizablePanelComponent < BaseComponent
+    BASE_CLASSES = "relative"
+
+    # @param default_size [Integer] Initial size percentage (0-100)
+    # @param min_size [Integer] Minimum size percentage
+    # @param max_size [Integer] Maximum size percentage
+    # @param direction [Symbol] Direction passed from parent group
+    def initialize(default_size: nil, min_size: nil, max_size: nil, direction: :horizontal, **options)
+      super(**options)
+      @default_size = default_size
+      @min_size = min_size
+      @max_size = max_size
+      @direction = direction
+    end
+
+    def call
+      content_tag(:div, content, panel_attributes)
+    end
+
+    private
+
+    def panel_attributes
+      {
+        class: class_names,
+        style: panel_style,
+        "data-panel": "",
+        "data-panel-size": @default_size,
+        "data-shadcn--resizable-target": "panel",
+        "data-min-size": @min_size,
+        "data-max-size": @max_size
+      }.merge(html_options).compact
+    end
+
+    def panel_style
+      return unless @default_size
+
+      if @direction == :horizontal
+        "flex-basis: #{@default_size}%; flex-grow: 0; flex-shrink: 0;"
+      else
+        "flex-basis: #{@default_size}%; flex-grow: 0; flex-shrink: 0;"
+      end
+    end
+
+    def class_names
+      cn(
+        BASE_CLASSES,
+        "overflow-hidden",
+        @class_name
+      )
+    end
+  end
+end

data/app/components/shadcn/resizable_panel_group_component.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # ResizablePanelGroup component for creating resizable panel layouts
+  # Matches shadcn/ui Resizable component
+  # Uses Stimulus for interactivity
+  #
+  # @example Horizontal layout
+  #   <%= render Shadcn::ResizablePanelGroupComponent.new(direction: :horizontal) do |group| %>
+  #     <% group.with_panel(default_size: 50) do %>
+  #       <div class="flex h-full items-center justify-center p-6">
+  #         <span class="font-semibold">One</span>
+  #       </div>
+  #     <% end %>
+  #     <% group.with_handle %>
+  #     <% group.with_panel(default_size: 50) do %>
+  #       <div class="flex h-full items-center justify-center p-6">
+  #         <span class="font-semibold">Two</span>
+  #       </div>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example Vertical layout
+  #   <%= render Shadcn::ResizablePanelGroupComponent.new(direction: :vertical) do |group| %>
+  #     <% group.with_panel(default_size: 25) do %>
+  #       Header
+  #     <% end %>
+  #     <% group.with_handle %>
+  #     <% group.with_panel(default_size: 75) do %>
+  #       Content
+  #     <% end %>
+  #   <% 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
+      )
+    }
+
+    DIRECTIONS = {
+      horizontal: "flex h-full",
+      vertical: "flex flex-col"
+    }.freeze
+
+    # @param direction [Symbol] Direction of the panels (:horizontal, :vertical)
+    # @param auto_save_id [String] ID for persisting panel sizes to localStorage
+    def initialize(direction: :horizontal, auto_save_id: nil, **options)
+      super(**options)
+      @direction = direction.to_sym
+      @auto_save_id = auto_save_id
+    end
+
+    def call
+      content_tag(:div, group_content, group_attributes)
+    end
+
+    private
+
+    def group_content
+      content
+    end
+
+    def group_attributes
+      {
+        class: class_names,
+        "data-controller": "shadcn--resizable",
+        "data-shadcn--resizable-direction-value": @direction.to_s,
+        "data-shadcn--resizable-auto-save-id-value": @auto_save_id,
+        "data-panel-group": "",
+        "data-panel-group-direction": @direction.to_s
+      }.merge(html_options).compact
+    end
+
+    def class_names
+      cn(
+        DIRECTIONS[@direction],
+        @class_name
+      )
+    end
+  end
+end

data/app/components/shadcn/scroll_area_component.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Scroll Area component for custom scrollbars
+  # Matches shadcn/ui ScrollArea component
+  # Uses Stimulus for interactivity
+  #
+  # @example Basic scroll area
+  #   <%= render Shadcn::ScrollAreaComponent.new(class_name: "h-72 w-48") do %>
+  #     <div class="p-4">
+  #       Long content here...
+  #     </div>
+  #   <% end %>
+  #
+  # @example Horizontal scroll
+  #   <%= render Shadcn::ScrollAreaComponent.new(orientation: :horizontal, class_name: "w-96 whitespace-nowrap") do %>
+  #     <div class="flex space-x-4 p-4">
+  #       <!-- items -->
+  #     </div>
+  #   <% end %>
+  #
+  class ScrollAreaComponent < BaseComponent
+    BASE_CLASSES = "relative overflow-hidden"
+    VIEWPORT_CLASSES = "h-full w-full rounded-[inherit]"
+    SCROLLBAR_CLASSES = "flex touch-none select-none transition-colors"
+    THUMB_CLASSES = "relative flex-1 rounded-full bg-border"
+
+    # @param orientation [Symbol] Scroll orientation (:vertical, :horizontal, :both)
+    # @param type [Symbol] Scrollbar type (:auto, :always, :scroll, :hover)
+    def initialize(orientation: :vertical, type: :hover, **options)
+      super(**options)
+      @orientation = orientation.to_sym
+      @type = type.to_sym
+    end
+
+    def call
+      content_tag(:div, scroll_structure, scroll_attributes)
+    end
+
+    private
+
+    def scroll_structure
+      safe_join([
+        viewport,
+        scrollbars,
+        corner
+      ])
+    end
+
+    def viewport
+      content_tag(:div, content, {
+        class: cn(VIEWPORT_CLASSES, @orientation == :horizontal ? "overflow-x-auto" : "overflow-y-auto"),
+        style: "overflow: hidden scroll;",
+        "data-shadcn--scroll-area-target": "viewport"
+      })
+    end
+
+    def scrollbars
+      case @orientation
+      when :both
+        safe_join([vertical_scrollbar, horizontal_scrollbar])
+      when :horizontal
+        horizontal_scrollbar
+      else
+        vertical_scrollbar
+      end
+    end
+
+    def vertical_scrollbar
+      content_tag(:div, scrollbar_thumb, {
+        class: cn(SCROLLBAR_CLASSES, "h-full w-2.5 border-l border-l-transparent p-[1px]"),
+        "data-orientation": "vertical",
+        "data-shadcn--scroll-area-target": "scrollbar"
+      })
+    end
+
+    def horizontal_scrollbar
+      content_tag(:div, scrollbar_thumb, {
+        class: cn(SCROLLBAR_CLASSES, "h-2.5 flex-col border-t border-t-transparent p-[1px]"),
+        "data-orientation": "horizontal",
+        "data-shadcn--scroll-area-target": "scrollbar"
+      })
+    end
+
+    def scrollbar_thumb
+      content_tag(:div, "", {
+        class: THUMB_CLASSES,
+        "data-shadcn--scroll-area-target": "thumb"
+      })
+    end
+
+    def corner
+      return unless @orientation == :both
+
+      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