shadcn-rails 0.1.0

data/app/components/shadcn/empty_header_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Empty Header component - wraps media, title, and description
+  class EmptyHeaderComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col items-center gap-2"
+
+    # Media slot for icon, image, or avatar
+    renders_one :media, lambda { |variant: :default, **options|
+      EmptyMediaComponent.new(variant: variant, **options)
+    }
+
+    # Title slot
+    renders_one :title, lambda { |**options|
+      EmptyTitleComponent.new(**options)
+    }
+
+    # Description slot
+    renders_one :description, lambda { |**options|
+      EmptyDescriptionComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data)) do
+        safe_join([media, title, description, content].compact)
+      end
+    end
+  end
+end

data/app/components/shadcn/empty_media_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Empty Media component - displays icon, image, or avatar
+  class EmptyMediaComponent < BaseComponent
+    VARIANTS = {
+      default: "",
+      icon: "flex size-12 items-center justify-center rounded-full bg-muted [&>svg]:size-6 [&>svg]:text-muted-foreground"
+    }.freeze
+
+    # @param variant [Symbol] :default or :icon
+    def initialize(variant: :default, **options)
+      super(**options)
+      @variant = variant.to_sym
+    end
+
+    def call
+      content_tag(:div, content, class: merge_classes(VARIANTS[@variant]), **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/empty_title_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Empty Title component
+  class EmptyTitleComponent < BaseComponent
+    BASE_CLASSES = "text-lg font-semibold"
+
+    def call
+      content_tag(:h3, content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+    end
+  end
+end

data/app/components/shadcn/field_component.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Field component for form field wrapper with label, input, description, and error
+  # Provides a consistent pattern for form fields
+  #
+  # @example Basic field
+  #   <%= render Shadcn::FieldComponent.new do |field| %>
+  #     <% field.with_label { "Email" } %>
+  #     <% field.with_input(type: :email, placeholder: "you@example.com") %>
+  #   <% end %>
+  #
+  # @example With description
+  #   <%= render Shadcn::FieldComponent.new do |field| %>
+  #     <% field.with_label { "Username" } %>
+  #     <% field.with_input %>
+  #     <% field.with_description { "This is your public display name." } %>
+  #   <% end %>
+  #
+  # @example With error
+  #   <%= render Shadcn::FieldComponent.new do |field| %>
+  #     <% field.with_label { "Password" } %>
+  #     <% field.with_input(type: :password) %>
+  #     <% field.with_error { "Password is required." } %>
+  #   <% end %>
+  #
+  # @example With custom content
+  #   <%= render Shadcn::FieldComponent.new do |field| %>
+  #     <% field.with_label { "Bio" } %>
+  #     <% field.with_control do %>
+  #       <%= render Shadcn::TextareaComponent.new(placeholder: "Tell us about yourself") %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class FieldComponent < BaseComponent
+    BASE_CLASSES = "space-y-2"
+
+    # Label slot
+    renders_one :label, lambda { |required: false, **options, &block|
+      options[:for] ||= @input_id
+      options[:required] = required
+      Shadcn::LabelComponent.new(**options, &block)
+    }
+
+    # Input slot - renders an Input component
+    renders_one :input, lambda { |**options|
+      options[:id] ||= @input_id
+      options[:name] ||= @name
+      if @has_error
+        options[:class_name] = cn("border-destructive focus-visible:ring-destructive", options[:class_name])
+      end
+      Shadcn::InputComponent.new(**options)
+    }
+
+    # Control slot - for custom controls (textarea, select, etc.)
+    renders_one :control
+
+    # Description slot
+    renders_one :description, "DescriptionComponent"
+
+    # Error slot
+    renders_one :error, "ErrorComponent"
+
+    # @param name [String, nil] Input name attribute
+    # @param id [String, nil] Input ID (auto-generated if not provided)
+    def initialize(name: nil, id: nil, **options)
+      super(**options)
+      @name = name
+      @input_id = id || generate_id
+      @has_error = false
+    end
+
+    def before_render
+      # Track if error is present for styling
+      @has_error = error.present?
+    end
+
+    def call
+      tag.div(class: merge_classes(BASE_CLASSES), **html_options.merge(build_data)) do
+        safe_join([
+          label,
+          control || input,
+          description,
+          error
+        ].compact)
+      end
+    end
+
+    private
+
+    def generate_id
+      "field-#{SecureRandom.hex(4)}"
+    end
+
+    # Description subcomponent
+    class DescriptionComponent < BaseComponent
+      BASE_CLASSES = "text-[0.8rem] text-muted-foreground"
+
+      def call
+        tag.p(content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+      end
+    end
+
+    # Error subcomponent
+    class ErrorComponent < BaseComponent
+      BASE_CLASSES = "text-[0.8rem] font-medium text-destructive"
+
+      def call
+        tag.p(content, class: merge_classes(BASE_CLASSES), role: "alert", **html_options.merge(build_data))
+      end
+    end
+  end
+end

data/app/components/shadcn/hover_card_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Hover Card component for displaying rich content on hover
+  # Matches shadcn/ui HoverCard component
+  #
+  # @example Basic usage
+  #   <%= render Shadcn::HoverCardComponent.new do |card| %>
+  #     <% card.with_trigger do %>
+  #       <a href="#">@username</a>
+  #     <% end %>
+  #     <% card.with_card_content do %>
+  #       <div>User profile preview</div>
+  #     <% end %>
+  #   <% end %>
+  #
+  class HoverCardComponent < BaseComponent
+    renders_one :trigger
+    renders_one :card_content, lambda { |**options|
+      HoverCardContentComponent.new(**options)
+    }
+
+    # @param open_delay [Integer] Delay in ms before opening
+    # @param close_delay [Integer] Delay in ms before closing
+    def initialize(open_delay: 700, close_delay: 300, **options)
+      super(**options)
+      @open_delay = open_delay
+      @close_delay = close_delay
+    end
+
+    def call
+      content_tag(:div, build_card_content, card_attributes)
+    end
+
+    private
+
+    def build_card_content
+      safe_join([
+        trigger_wrapper,
+        card_content
+      ].compact)
+    end
+
+    def trigger_wrapper
+      return unless trigger
+
+      content_tag(:div, trigger, {
+        "data-shadcn--hover-card-target": "trigger"
+      })
+    end
+
+    def card_attributes
+      attrs = {
+        class: cn("relative inline-block", class_name),
+        "data-controller": "shadcn--hover-card",
+        "data-shadcn--hover-card-open-delay-value": @open_delay,
+        "data-shadcn--hover-card-close-delay-value": @close_delay
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/hover_card_content_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Hover Card Content component
+  class HoverCardContentComponent < BaseComponent
+    BASE_CLASSES = "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+
+    # @param side [Symbol] :top, :right, :bottom, or :left
+    # @param align [Symbol] :start, :center, or :end
+    def initialize(side: :bottom, align: :center, **options, &block)
+      super(**options, &block)
+      @side = side
+      @align = align
+    end
+
+    def call
+      content_tag(:div, content, content_attributes)
+    end
+
+    private
+
+    def content_attributes
+      attrs = {
+        class: merge_classes(BASE_CLASSES),
+        role: "tooltip",
+        "data-state": "closed",
+        "data-side": @side.to_s,
+        "data-align": @align.to_s,
+        "data-shadcn--hover-card-target": "content",
+        style: "display: none; position: absolute;"
+      }
+      attrs.merge!(html_options)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/input_component.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Input component for form fields
+  # Matches shadcn/ui Input component
+  #
+  # @example Basic input
+  #   <%= render Shadcn::InputComponent.new(name: "email", type: "email", placeholder: "Email") %>
+  #
+  # @example With label
+  #   <%= render Shadcn::LabelComponent.new(for: "email") { "Email" } %>
+  #   <%= render Shadcn::InputComponent.new(id: "email", name: "email", type: "email") %>
+  #
+  # @example Disabled input
+  #   <%= render Shadcn::InputComponent.new(name: "locked", disabled: true, value: "Can't change") %>
+  #
+  # @example File input
+  #   <%= render Shadcn::InputComponent.new(name: "file", type: "file") %>
+  #
+  class InputComponent < BaseComponent
+    BASE_CLASSES = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+
+    # @param type [String] Input type (text, email, password, etc.)
+    # @param name [String, nil] Input name attribute
+    # @param id [String, nil] Input id attribute
+    # @param value [String, nil] Input value
+    # @param placeholder [String, nil] Placeholder text
+    # @param disabled [Boolean] Whether input is disabled
+    # @param required [Boolean] Whether input is required
+    # @param readonly [Boolean] Whether input is readonly
+    # @param autofocus [Boolean] Whether to autofocus
+    # @param autocomplete [String, nil] Autocomplete attribute
+    # @param pattern [String, nil] Validation pattern
+    # @param min [String, Integer, nil] Minimum value (for number/date inputs)
+    # @param max [String, Integer, nil] Maximum value (for number/date inputs)
+    # @param step [String, Integer, nil] Step value (for number inputs)
+    # @param minlength [Integer, nil] Minimum length
+    # @param maxlength [Integer, nil] Maximum length
+    def initialize(
+      type: "text",
+      name: nil,
+      id: nil,
+      value: nil,
+      placeholder: nil,
+      disabled: false,
+      required: false,
+      readonly: false,
+      autofocus: false,
+      autocomplete: nil,
+      pattern: nil,
+      min: nil,
+      max: nil,
+      step: nil,
+      minlength: nil,
+      maxlength: nil,
+      **options
+    )
+      super(**options)
+      @type = type
+      @name = name
+      @id = id
+      @value = value
+      @placeholder = placeholder
+      @disabled = disabled
+      @required = required
+      @readonly = readonly
+      @autofocus = autofocus
+      @autocomplete = autocomplete
+      @pattern = pattern
+      @min = min
+      @max = max
+      @step = step
+      @minlength = minlength
+      @maxlength = maxlength
+    end
+
+    def call
+      tag(:input, input_attributes)
+    end
+
+    private
+
+    def input_attributes
+      attrs = {
+        type: @type,
+        name: @name,
+        id: @id,
+        value: @value,
+        placeholder: @placeholder,
+        disabled: @disabled || nil,
+        required: @required || nil,
+        readonly: @readonly || nil,
+        autofocus: @autofocus || nil,
+        autocomplete: @autocomplete,
+        pattern: @pattern,
+        min: @min,
+        max: @max,
+        step: @step,
+        minlength: @minlength,
+        maxlength: @maxlength,
+        class: merge_classes(BASE_CLASSES)
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/input_group_component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Input Group component for inputs with prefix/suffix addons
+  # Matches shadcn/ui Input Group pattern
+  #
+  # @example With prefix icon
+  #   <%= render Shadcn::InputGroupComponent.new do |group| %>
+  #     <% group.with_prefix do %>
+  #       <svg><!-- search icon --></svg>
+  #     <% end %>
+  #     <% group.with_input(placeholder: "Search...") %>
+  #   <% end %>
+  #
+  # @example With suffix icon
+  #   <%= render Shadcn::InputGroupComponent.new do |group| %>
+  #     <% group.with_input(type: :email, placeholder: "Email") %>
+  #     <% group.with_suffix do %>
+  #       <svg><!-- mail icon --></svg>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example With prefix text
+  #   <%= render Shadcn::InputGroupComponent.new do |group| %>
+  #     <% group.with_prefix { "https://" } %>
+  #     <% group.with_input(placeholder: "example.com") %>
+  #   <% end %>
+  #
+  # @example With both prefix and suffix
+  #   <%= render Shadcn::InputGroupComponent.new do |group| %>
+  #     <% group.with_prefix { "$" } %>
+  #     <% group.with_input(type: :number, placeholder: "0.00") %>
+  #     <% group.with_suffix { "USD" } %>
+  #   <% end %>
+  #
+  class InputGroupComponent < BaseComponent
+    BASE_CLASSES = "flex items-center rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
+
+    # Prefix addon slot
+    renders_one :prefix, "AddonComponent"
+
+    # Input slot
+    renders_one :input, lambda { |**options|
+      # Remove border, ring, rounded corners and shadow from input since the group handles it
+      options[:class_name] = cn(
+        "border-0 rounded-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:ring-0 focus:outline-none",
+        options[:class_name]
+      )
+      Shadcn::InputComponent.new(**options)
+    }
+
+    # Suffix addon slot
+    renders_one :suffix, "AddonComponent"
+
+    def call
+      tag.div(class: merge_classes(BASE_CLASSES), **html_options.merge(build_data)) do
+        safe_join([prefix, input, suffix].compact)
+      end
+    end
+
+    # Addon subcomponent for prefix/suffix
+    class AddonComponent < BaseComponent
+      BASE_CLASSES = "flex items-center justify-center px-3 text-sm text-muted-foreground"
+
+      def call
+        tag.span(content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+      end
+    end
+  end
+end

data/app/components/shadcn/input_otp_component.rb

@@ -0,0 +1,183 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Input OTP component for one-time password entry
+  # Matches shadcn/ui Input OTP component
+  #
+  # @example Basic 6-digit OTP
+  #   <%= render Shadcn::InputOtpComponent.new(length: 6, name: "otp") %>
+  #
+  # @example With groups (3 + 3)
+  #   <%= render Shadcn::InputOtpComponent.new(length: 6, name: "otp") do |otp| %>
+  #     <% otp.with_group(slots: 3) %>
+  #     <% otp.with_separator %>
+  #     <% otp.with_group(slots: 3) %>
+  #   <% end %>
+  #
+  # @example 4-digit PIN
+  #   <%= render Shadcn::InputOtpComponent.new(length: 4, name: "pin", pattern: "^[0-9]*$") %>
+  #
+  # @example Disabled
+  #   <%= render Shadcn::InputOtpComponent.new(length: 6, name: "otp", disabled: true) %>
+  #
+  class InputOtpComponent < BaseComponent
+    BASE_CLASSES = "flex items-center gap-2"
+    SLOT_CLASSES = "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md"
+    SLOT_ACTIVE_CLASSES = "z-10 ring-1 ring-ring"
+    CARET_CLASSES = "pointer-events-none absolute inset-0 flex items-center justify-center"
+    CARET_BLINK_CLASSES = "animate-caret-blink h-4 w-px bg-foreground duration-1000"
+
+    # Groups for visual grouping of slots
+    renders_many :groups, "GroupComponent"
+
+    # Separators between groups
+    renders_many :separators, "SeparatorComponent"
+
+    # @param length [Integer] Number of OTP digits
+    # @param name [String] Input name for form submission
+    # @param pattern [String] Regex pattern for validation (defaults to alphanumeric)
+    # @param disabled [Boolean] Whether the input is disabled
+    # @param required [Boolean] Whether the input is required
+    # @param autocomplete [String] Autocomplete attribute (defaults to "one-time-code")
+    def initialize(length: 6, name: nil, pattern: nil, disabled: false, required: false, autocomplete: "one-time-code", **options)
+      super(**options)
+      @length = length
+      @name = name
+      @pattern = pattern
+      @disabled = disabled
+      @required = required
+      @autocomplete = autocomplete
+    end
+
+    def call
+      tag.div(**container_attributes) do
+        safe_join([
+          hidden_input,
+          groups.any? ? render_with_groups : render_default_slots
+        ])
+      end
+    end
+
+    private
+
+    def container_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        data: {
+          controller: "shadcn--input-otp",
+          "shadcn--input-otp-length-value": @length,
+          "shadcn--input-otp-pattern-value": @pattern,
+          "shadcn--input-otp-disabled-value": @disabled
+        }
+      }.merge(html_options).merge(build_data).compact
+    end
+
+    def hidden_input
+      tag.input(
+        type: "hidden",
+        name: @name,
+        data: { "shadcn--input-otp-target": "hiddenInput" }
+      )
+    end
+
+    def render_with_groups
+      parts = []
+      slot_index = 0
+
+      groups.each_with_index do |group, group_index|
+        # Render the group with its slots
+        group_slots = group.slots.times.map do |_|
+          slot = render_slot(slot_index)
+          slot_index += 1
+          slot
+        end
+
+        parts << tag.div(class: "flex items-center") { safe_join(group_slots) }
+
+        # Add separator after group if there's another group
+        if group_index < groups.size - 1
+          separator = separators[group_index]
+          parts << (separator || default_separator)
+        end
+      end
+
+      safe_join(parts)
+    end
+
+    def default_separator
+      tag.div(class: "flex items-center justify-center px-2", role: "separator") do
+        tag.span(class: "text-muted-foreground") { "-" }
+      end
+    end
+
+    def render_default_slots
+      # Render all slots in one group
+      slots = @length.times.map do |index|
+        render_slot(index)
+      end
+
+      tag.div(class: "flex items-center") { safe_join(slots) }
+    end
+
+    def render_slot(index)
+      tag.div(
+        class: SLOT_CLASSES,
+        data: {
+          "shadcn--input-otp-target": "slot",
+          index: index,
+          action: "click->shadcn--input-otp#focusSlot"
+        }
+      ) do
+        safe_join([
+          tag.input(
+            type: "text",
+            maxlength: 1,
+            inputmode: "numeric",
+            autocomplete: index == 0 ? @autocomplete : "off",
+            disabled: @disabled || nil,
+            required: @required && index == 0 || nil,
+            class: "absolute inset-0 w-full h-full text-center bg-transparent outline-none border-0 focus:ring-0",
+            data: {
+              "shadcn--input-otp-target": "input",
+              index: index,
+              action: "input->shadcn--input-otp#handleInput keydown->shadcn--input-otp#handleKeydown focus->shadcn--input-otp#handleFocus blur->shadcn--input-otp#handleBlur paste->shadcn--input-otp#handlePaste"
+            }
+          ),
+          tag.div(class: CARET_CLASSES, data: { "shadcn--input-otp-target": "caret" }) do
+            tag.div(class: CARET_BLINK_CLASSES)
+          end
+        ])
+      end
+    end
+
+    # Group subcomponent
+    class GroupComponent < BaseComponent
+      BASE_CLASSES = "flex items-center"
+
+      # @param slots [Integer] Number of slots in this group
+      def initialize(slots: 3, **options)
+        super(**options)
+        @slots = slots
+      end
+
+      attr_reader :slots
+
+      def call
+        tag.div(class: merge_classes(BASE_CLASSES), **html_options.merge(build_data)) do
+          content
+        end
+      end
+    end
+
+    # Separator subcomponent
+    class SeparatorComponent < BaseComponent
+      BASE_CLASSES = "flex items-center justify-center px-2"
+
+      def call
+        tag.div(class: merge_classes(BASE_CLASSES), role: "separator", **html_options.merge(build_data)) do
+          content.presence || tag.span(class: "text-muted-foreground") { "-" }
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/item_actions_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Item Actions component - container for action buttons
+  class ItemActionsComponent < BaseComponent
+    BASE_CLASSES = "shrink-0 flex items-center gap-2"
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+    end
+  end
+end