shadcn-rails 0.1.0

data/app/components/shadcn/select_component.rb

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Select component for dropdown selection
+  # Matches shadcn/ui Select component
+  # Uses Stimulus for interactivity
+  #
+  # @example Basic select
+  #   <%= render Shadcn::SelectComponent.new(name: "fruit", placeholder: "Select a fruit") do |select| %>
+  #     <% select.with_item(value: "apple") { "Apple" } %>
+  #     <% select.with_item(value: "banana") { "Banana" } %>
+  #     <% select.with_item(value: "orange") { "Orange" } %>
+  #   <% end %>
+  #
+  # @example With groups
+  #   <%= render Shadcn::SelectComponent.new(name: "timezone") do |select| %>
+  #     <% select.with_group(label: "North America") do |group| %>
+  #       <% group.with_item(value: "est") { "Eastern" } %>
+  #       <% group.with_item(value: "pst") { "Pacific" } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class SelectComponent < BaseComponent
+    TRIGGER_CLASSES = "flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
+    CONTENT_CLASSES = "absolute left-0 top-full z-50 mt-1 max-h-96 min-w-[var(--radix-select-trigger-width)] w-max overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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"
+    VIEWPORT_CLASSES = "p-1"
+
+    renders_many :items, lambda { |value:, **options, &block|
+      SelectItemComponent.new(value: value, **options, &block)
+    }
+    renders_many :groups, lambda { |label: nil, **options, &block|
+      SelectGroupComponent.new(label: label, **options, &block)
+    }
+
+    # @param name [String, nil] Form field name
+    # @param id [String, nil] Element ID
+    # @param value [String, nil] Currently selected value
+    # @param placeholder [String] Placeholder text
+    # @param disabled [Boolean] Whether select is disabled
+    # @param required [Boolean] Whether select is required
+    def initialize(
+      name: nil,
+      id: nil,
+      value: nil,
+      placeholder: "Select...",
+      disabled: false,
+      required: false,
+      **options
+    )
+      super(**options)
+      @name = name
+      @id = id
+      @value = value
+      @placeholder = placeholder
+      @disabled = disabled
+      @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
+      ])
+    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"
+      )
+    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)
+    end
+
+    def items_content
+      safe_join([items, groups, content].compact.flatten)
+    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/select_group_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Select Group component
+  class SelectGroupComponent < BaseComponent
+    LABEL_CLASSES = "px-2 py-1.5 text-sm font-semibold"
+
+    renders_many :items, lambda { |value:, **options, &block|
+      SelectItemComponent.new(value: value, **options, &block)
+    }
+
+    # @param label [String, nil] Group label
+    def initialize(label: nil, **options, &block)
+      super(**options, &block)
+      @label = label
+    end
+
+    def call
+      content_tag(:div, group_content, role: "group")
+    end
+
+    private
+
+    def group_content
+      safe_join([
+        (@label ? content_tag(:div, @label, class: LABEL_CLASSES) : nil),
+        items,
+        content
+      ].compact.flatten)
+    end
+  end
+end

data/app/components/shadcn/select_item_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Select Item component
+  class SelectItemComponent < BaseComponent
+    BASE_CLASSES = "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+
+    # @param value [String] The value for this option
+    # @param disabled [Boolean] Whether this option is disabled
+    def initialize(value:, disabled: false, **options, &block)
+      super(**options, &block)
+      @value = value
+      @disabled = disabled
+    end
+
+    def call
+      content_tag(:div, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([
+        check_indicator,
+        content_tag(:span, content)
+      ])
+    end
+
+    def check_indicator
+      content_tag(:span, check_icon, class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center")
+    end
+
+    def check_icon
+      content_tag(:svg,
+        content_tag(:path, nil, d: "M20 6 9 17l-5-5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round"),
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "12",
+        height: "12",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        class: "h-4 w-4 opacity-0",
+        "data-shadcn--select-target": "checkIcon"
+      )
+    end
+
+    def item_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        role: "option",
+        "aria-selected": "false",
+        "data-shadcn--select-target": "item",
+        "data-value": @value,
+        "data-disabled": @disabled ? "" : nil,
+        "data-action": "click->shadcn--select#select",
+        tabindex: @disabled ? nil : "-1"
+      }
+    end
+  end
+end

data/app/components/shadcn/select_separator_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Select Separator component
+  class SelectSeparatorComponent < BaseComponent
+    BASE_CLASSES = "-mx-1 my-1 h-px bg-muted"
+
+    def call
+      content_tag(:div, "", class: merge_classes(BASE_CLASSES), role: "separator")
+    end
+  end
+end

data/app/components/shadcn/separator_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Separator component for visually dividing content
+  # Matches shadcn/ui Separator component
+  #
+  # @example Horizontal separator
+  #   <%= render Shadcn::SeparatorComponent.new %>
+  #
+  # @example Vertical separator
+  #   <%= render Shadcn::SeparatorComponent.new(orientation: :vertical) %>
+  #
+  # @example Decorative separator (no semantic meaning)
+  #   <%= render Shadcn::SeparatorComponent.new(decorative: true) %>
+  #
+  class SeparatorComponent < BaseComponent
+    ORIENTATIONS = {
+      horizontal: "h-[1px] w-full",
+      vertical: "h-full w-[1px]"
+    }.freeze
+
+    BASE_CLASSES = "shrink-0 bg-border"
+
+    # @param orientation [Symbol] Separator orientation (:horizontal, :vertical)
+    # @param decorative [Boolean] Whether the separator is purely decorative
+    def initialize(orientation: :horizontal, decorative: false, **options)
+      super(**options)
+      @orientation = orientation.to_sym
+      @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
+    end
+  end
+end

data/app/components/shadcn/sheet_component.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Sheet component for slide-out panels
+  # Matches shadcn/ui Sheet component
+  # Uses Stimulus for interactivity
+  #
+  # @example Basic sheet
+  #   <%= render Shadcn::SheetComponent.new(side: :right) do |sheet| %>
+  #     <% sheet.with_trigger do %>
+  #       <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Open Sheet" } %>
+  #     <% end %>
+  #     <% sheet.with_content do |content| %>
+  #       <% content.with_header do %>
+  #         <% content.with_title { "Edit Profile" } %>
+  #         <% content.with_description { "Make changes to your profile." } %>
+  #       <% end %>
+  #       <div class="py-4">
+  #         Sheet body content
+  #       </div>
+  #       <% content.with_footer do %>
+  #         <%= render Shadcn::ButtonComponent.new { "Save changes" } %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class SheetComponent < BaseComponent
+    SIDES = {
+      top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+      bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+      right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+    }.freeze
+
+    renders_one :trigger
+    renders_one :body, lambda { |**options|
+      SheetContentComponent.new(side: @side, **options)
+    }
+
+    # @param side [Symbol] Side to show sheet (:top, :right, :bottom, :left)
+    # @param open [Boolean] Whether sheet starts open
+    def initialize(side: :right, open: false, **options)
+      super(**options)
+      @side = side.to_sym
+      @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"
+      })
+    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
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sheet_content_component.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Sheet Content component
+  class SheetContentComponent < BaseComponent
+    OVERLAY_CLASSES = "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    BASE_CONTENT_CLASSES = "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out"
+    CLOSE_CLASSES = "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+
+    renders_one :header, lambda { |**options|
+      SheetHeaderComponent.new(**options)
+    }
+    renders_one :title, lambda { |**options|
+      SheetTitleComponent.new(**options)
+    }
+    renders_one :description, lambda { |**options|
+      SheetDescriptionComponent.new(**options)
+    }
+    renders_one :footer, lambda { |**options|
+      SheetFooterComponent.new(**options)
+    }
+
+    # @param side [Symbol] Side the sheet appears from
+    def initialize(side: :right, **options)
+      super(**options)
+      @side = side.to_sym
+    end
+
+    def call
+      content_tag(:template, content_wrapper, { "data-shadcn--sheet-target": "template" })
+    end
+
+    private
+
+    def content_wrapper
+      safe_join([overlay, sheet_panel])
+    end
+
+    def overlay
+      content_tag(:div, "", {
+        class: OVERLAY_CLASSES,
+        "data-shadcn--sheet-target": "overlay",
+        "data-action": "click->shadcn--sheet#close",
+        "data-state": "closed"
+      })
+    end
+
+    def sheet_panel
+      content_tag(:div, panel_content, panel_attributes)
+    end
+
+    def panel_content
+      safe_join([
+        header,
+        title,
+        description,
+        content,
+        footer,
+        close_button
+      ].compact)
+    end
+
+    def panel_attributes
+      {
+        class: cn(BASE_CONTENT_CLASSES, SheetComponent::SIDES[@side], class_name),
+        role: "dialog",
+        "aria-modal": "true",
+        "data-shadcn--sheet-target": "content",
+        "data-state": "closed",
+        tabindex: "-1"
+      }
+    end
+
+    def close_button
+      content_tag(:button, close_icon, {
+        type: "button",
+        class: CLOSE_CLASSES,
+        "data-action": "click->shadcn--sheet#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
+  end
+end

data/app/components/shadcn/sheet_description_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Sheet Description component
+  class SheetDescriptionComponent < BaseComponent
+    BASE_CLASSES = "text-sm text-muted-foreground"
+
+    def call
+      content_tag(:p, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/sheet_footer_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Sheet Footer component
+  class SheetFooterComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/sheet_header_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Sheet Header component
+  class SheetHeaderComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col space-y-2 text-center sm:text-left"
+
+    renders_one :title, lambda { |**options|
+      SheetTitleComponent.new(**options)
+    }
+    renders_one :description, lambda { |**options|
+      SheetDescriptionComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, safe_join([title, description, content].compact), class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/sheet_title_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Sheet Title component
+  class SheetTitleComponent < BaseComponent
+    BASE_CLASSES = "text-lg font-semibold text-foreground"
+
+    def call
+      content_tag(:h2, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end