shadcn-rails 0.1.0

data/app/components/shadcn/dialog_content_component.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dialog Content component
+  class DialogContentComponent < 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"
+    CONTENT_CLASSES = "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+    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-accent data-[state=open]:text-muted-foreground"
+
+    renders_one :header, lambda { |**options|
+      DialogHeaderComponent.new(**options)
+    }
+    renders_one :title, lambda { |**options|
+      DialogTitleComponent.new(**options)
+    }
+    renders_one :description, lambda { |**options|
+      DialogDescriptionComponent.new(**options)
+    }
+    renders_one :footer, lambda { |**options|
+      DialogFooterComponent.new(**options)
+    }
+    renders_one :close_button
+
+    def call
+      # Portal container that will be moved to body
+      content_tag(:template, content_wrapper, { "data-shadcn--dialog-target": "template" })
+    end
+
+    private
+
+    def content_wrapper
+      safe_join([
+        overlay,
+        dialog_panel
+      ])
+    end
+
+    def overlay
+      content_tag(:div, "", {
+        class: OVERLAY_CLASSES,
+        "data-shadcn--dialog-target": "overlay",
+        "data-action": "click->shadcn--dialog#close",
+        "data-state": "closed",
+        "aria-hidden": "true"
+      })
+    end
+
+    def dialog_panel
+      content_tag(:div, panel_content, {
+        class: cn(CONTENT_CLASSES, class_name),
+        role: "dialog",
+        "aria-modal": "true",
+        "data-shadcn--dialog-target": "content",
+        "data-state": "closed",
+        tabindex: "-1"
+      })
+    end
+
+    def panel_content
+      safe_join([
+        header,
+        title,
+        description,
+        content,
+        footer,
+        close_element
+      ].compact)
+    end
+
+    def close_element
+      content_tag(:button, close_icon, {
+        type: "button",
+        class: CLOSE_CLASSES,
+        "data-action": "click->shadcn--dialog#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/dialog_description_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dialog Description component
+  class DialogDescriptionComponent < 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/dialog_footer_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dialog Footer component
+  class DialogFooterComponent < 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/dialog_header_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dialog Header component
+  class DialogHeaderComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col space-y-1.5 text-center sm:text-left"
+
+    renders_one :title, lambda { |**options|
+      DialogTitleComponent.new(**options)
+    }
+    renders_one :description, lambda { |**options|
+      DialogDescriptionComponent.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/dialog_title_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dialog Title component
+  class DialogTitleComponent < BaseComponent
+    BASE_CLASSES = "text-lg font-semibold leading-none tracking-tight"
+
+    def call
+      content_tag(:h2, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/drawer_component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Drawer component for mobile-optimized modal panels
+  # Matches shadcn/ui Drawer component (built on Vaul)
+  #
+  # @example Basic drawer
+  #   <%= render Shadcn::DrawerComponent.new do |drawer| %>
+  #     <% drawer.with_trigger do %>
+  #       <%= render Shadcn::ButtonComponent.new { "Open Drawer" } %>
+  #     <% end %>
+  #     <% drawer.with_body do |body| %>
+  #       <% body.with_header do |header| %>
+  #         <% header.with_title { "Edit Profile" } %>
+  #         <% header.with_description { "Make changes to your profile." } %>
+  #       <% end %>
+  #       <div class="p-4">Content here</div>
+  #       <% body.with_footer do %>
+  #         <%= render Shadcn::ButtonComponent.new { "Save" } %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class DrawerComponent < BaseComponent
+    renders_one :trigger
+    renders_one :body, lambda { |**options|
+      DrawerContentComponent.new(**options)
+    }
+
+    # @param open [Boolean] Whether drawer starts open
+    # @param direction [Symbol] :bottom, :top, :left, or :right
+    def initialize(open: false, direction: :bottom, **options)
+      super(**options)
+      @open = open
+      @direction = direction
+    end
+
+    def call
+      content_tag(:div, drawer_content, drawer_attributes)
+    end
+
+    private
+
+    def drawer_content
+      safe_join([
+        trigger_wrapper,
+        body
+      ].compact)
+    end
+
+    def trigger_wrapper
+      return unless trigger
+
+      content_tag(:div, trigger, {
+        "data-shadcn--drawer-target": "trigger",
+        "data-action": "click->shadcn--drawer#open"
+      })
+    end
+
+    def drawer_attributes
+      attrs = {
+        class: class_name,
+        "data-controller": "shadcn--drawer",
+        "data-shadcn--drawer-open-value": @open.to_s,
+        "data-shadcn--drawer-direction-value": @direction.to_s
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/drawer_content_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Drawer Content component
+  class DrawerContentComponent < BaseComponent
+    OVERLAY_CLASSES = "fixed inset-0 z-50 bg-black/80"
+    CONTENT_CLASSES = {
+      bottom: "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+      top: "fixed inset-x-0 top-0 z-50 mb-24 flex h-auto flex-col rounded-b-[10px] border bg-background",
+      left: "fixed inset-y-0 left-0 z-50 h-full w-3/4 max-w-sm flex flex-col border-r bg-background",
+      right: "fixed inset-y-0 right-0 z-50 h-full w-3/4 max-w-sm flex flex-col border-l bg-background"
+    }.freeze
+
+    renders_one :header, lambda { |**options|
+      DrawerHeaderComponent.new(**options)
+    }
+    renders_one :footer, lambda { |**options|
+      DrawerFooterComponent.new(**options)
+    }
+
+    # @param direction [Symbol] :bottom, :top, :left, or :right
+    def initialize(direction: :bottom, **options, &block)
+      super(**options, &block)
+      @direction = direction
+    end
+
+    def call
+      content_tag(:template, content_wrapper, { "data-shadcn--drawer-target": "template" })
+    end
+
+    private
+
+    def content_wrapper
+      safe_join([
+        overlay,
+        drawer_panel
+      ])
+    end
+
+    def overlay
+      content_tag(:div, "", {
+        class: OVERLAY_CLASSES,
+        "data-shadcn--drawer-target": "overlay",
+        "data-action": "click->shadcn--drawer#close",
+        "data-state": "closed"
+      })
+    end
+
+    def drawer_panel
+      content_tag(:div, panel_content, {
+        class: cn(CONTENT_CLASSES[@direction] || CONTENT_CLASSES[:bottom], class_name),
+        role: "dialog",
+        "aria-modal": "true",
+        "data-shadcn--drawer-target": "content",
+        "data-state": "closed",
+        "data-direction": @direction.to_s,
+        tabindex: "-1"
+      })
+    end
+
+    def panel_content
+      safe_join([
+        handle_bar,
+        header,
+        content,
+        footer
+      ].compact)
+    end
+
+    def handle_bar
+      return unless [:bottom, :top].include?(@direction)
+
+      content_tag(:div, class: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted") { "" }
+    end
+  end
+end

data/app/components/shadcn/drawer_description_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Drawer Description component
+  class DrawerDescriptionComponent < 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/drawer_footer_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Drawer Footer component
+  class DrawerFooterComponent < BaseComponent
+    BASE_CLASSES = "mt-auto flex flex-col gap-2 p-4"
+
+    def call
+      content_tag(:div, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/drawer_header_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Drawer Header component
+  class DrawerHeaderComponent < BaseComponent
+    BASE_CLASSES = "grid gap-1.5 p-4 text-center sm:text-left"
+
+    renders_one :title, lambda { |**options|
+      DrawerTitleComponent.new(**options)
+    }
+    renders_one :description, lambda { |**options|
+      DrawerDescriptionComponent.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/drawer_title_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Drawer Title component
+  class DrawerTitleComponent < BaseComponent
+    BASE_CLASSES = "text-lg font-semibold leading-none tracking-tight"
+
+    def call
+      content_tag(:h2, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu component
+  # Matches shadcn/ui DropdownMenu component
+  # Uses Stimulus for interactivity
+  #
+  # @example Basic dropdown
+  #   <%= render Shadcn::DropdownMenuComponent.new do |menu| %>
+  #     <% menu.with_trigger do %>
+  #       <%= render Shadcn::ButtonComponent.new(variant: :outline) { "Open Menu" } %>
+  #     <% end %>
+  #     <% menu.with_content do |content| %>
+  #       <% content.with_label { "My Account" } %>
+  #       <% content.with_separator %>
+  #       <% content.with_item(href: "/profile") { "Profile" } %>
+  #       <% content.with_item(href: "/settings") { "Settings" } %>
+  #       <% content.with_separator %>
+  #       <% content.with_item(variant: :destructive) { "Log out" } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  class DropdownMenuComponent < BaseComponent
+    renders_one :trigger
+    renders_one :menu, lambda { |**options|
+      DropdownMenuContentComponent.new(**options)
+    }
+
+    # @param open [Boolean] Whether dropdown starts open
+    # @param align [Symbol] Content alignment (:start, :center, :end)
+    # @param side [Symbol] Side to show content (:top, :right, :bottom, :left)
+    def initialize(open: false, align: :end, side: :bottom, **options)
+      super(**options)
+      @open = open
+      @align = align
+      @side = side
+    end
+
+    def call
+      content_tag(:div, dropdown_content, dropdown_attributes)
+    end
+
+    private
+
+    def dropdown_content
+      safe_join([
+        trigger_wrapper,
+        menu
+      ].compact)
+    end
+
+    def trigger_wrapper
+      return unless trigger
+
+      content_tag(:div, trigger, {
+        "data-shadcn--dropdown-target": "trigger",
+        "data-action": "click->shadcn--dropdown#toggle"
+      })
+    end
+
+    def dropdown_attributes
+      attrs = {
+        class: cn("relative inline-block", class_name),
+        "data-controller": "shadcn--dropdown",
+        "data-shadcn--dropdown-open-value": @open.to_s,
+        "data-shadcn--dropdown-align-value": @align.to_s,
+        "data-shadcn--dropdown-side-value": @side.to_s,
+        "data-action": "keydown.escape->shadcn--dropdown#close clickOutside->shadcn--dropdown#close"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu_content_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Content component
+  class DropdownMenuContentComponent < BaseComponent
+    BASE_CLASSES = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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 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"
+
+    renders_many :items, lambda { |**options, &block|
+      DropdownMenuItemComponent.new(**options, &block)
+    }
+    renders_many :labels, lambda { |**options, &block|
+      DropdownMenuLabelComponent.new(**options, &block)
+    }
+    renders_many :separators, lambda { |**options|
+      DropdownMenuSeparatorComponent.new(**options)
+    }
+    renders_many :groups, lambda { |**options, &block|
+      DropdownMenuGroupComponent.new(**options, &block)
+    }
+
+    def call
+      content_tag(:div, menu_content, menu_attributes)
+    end
+
+    private
+
+    def menu_content
+      # If items/labels/separators are used, render them
+      # Otherwise render the block content
+      if items.any? || labels.any? || separators.any? || groups.any?
+        safe_join([labels, items, separators, groups, content].flatten.compact)
+      else
+        content
+      end
+    end
+
+    def menu_attributes
+      {
+        class: merge_classes(BASE_CLASSES),
+        role: "menu",
+        "aria-orientation": "vertical",
+        "data-shadcn--dropdown-target": "content",
+        "data-state": "closed",
+        "data-side": "bottom",
+        hidden: true
+      }
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu_group_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Group component
+  class DropdownMenuGroupComponent < BaseComponent
+    def call
+      content_tag(:div, content, role: "group", **html_options)
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu_item_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Item component
+  class DropdownMenuItemComponent < BaseComponent
+    BASE_CLASSES = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0"
+
+    VARIANTS = {
+      default: "",
+      destructive: "text-destructive focus:bg-destructive focus:text-destructive-foreground"
+    }.freeze
+
+    renders_one :shortcut, lambda { |**options|
+      DropdownMenuShortcutComponent.new(**options)
+    }
+
+    # @param href [String, nil] Link URL
+    # @param variant [Symbol] Item variant (:default, :destructive)
+    # @param disabled [Boolean] Whether item is disabled
+    # @param inset [Boolean] Whether to add left padding for icons
+    def initialize(href: nil, variant: :default, disabled: false, inset: false, **options, &block)
+      super(**options, &block)
+      @href = href
+      @variant = variant.to_sym
+      @disabled = disabled
+      @inset = inset
+    end
+
+    def call
+      tag_name = @href ? :a : :div
+      content_tag(tag_name, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([content, shortcut].compact)
+    end
+
+    def item_classes
+      cn(
+        BASE_CLASSES,
+        VARIANTS[@variant],
+        @inset ? "pl-8" : "",
+        class_name
+      )
+    end
+
+    def item_attributes
+      attrs = {
+        class: item_classes,
+        role: "menuitem",
+        tabindex: @disabled ? nil : "-1",
+        href: @href,
+        "data-disabled": @disabled ? "" : nil,
+        "data-action": "click->shadcn--dropdown#selectItem"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu_label_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Label component
+  class DropdownMenuLabelComponent < BaseComponent
+    BASE_CLASSES = "px-2 py-1.5 text-sm font-semibold"
+
+    # @param inset [Boolean] Whether to add left padding
+    def initialize(inset: false, **options, &block)
+      super(**options, &block)
+      @inset = inset
+    end
+
+    def call
+      content_tag(:div, content, class: cn(BASE_CLASSES, @inset ? "pl-8" : "", class_name))
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu_separator_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Separator component
+  class DropdownMenuSeparatorComponent < 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/dropdown_menu_shortcut_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Dropdown Menu Shortcut component
+  class DropdownMenuShortcutComponent < BaseComponent
+    BASE_CLASSES = "ml-auto text-xs tracking-widest opacity-60"
+
+    def call
+      content_tag(:span, content, class: merge_classes(BASE_CLASSES))
+    end
+  end
+end

data/app/components/shadcn/empty_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Empty state component for displaying placeholder content when no data is available
+  # Matches shadcn/ui Empty component
+  #
+  # @example Basic empty state
+  #   <%= render Shadcn::EmptyComponent.new do |empty| %>
+  #     <% empty.with_header do |header| %>
+  #       <% header.with_media(variant: :icon) do %>
+  #         <svg>...</svg>
+  #       <% end %>
+  #       <% header.with_title { "No Projects Yet" } %>
+  #       <% header.with_description { "Get started by creating your first project." } %>
+  #     <% end %>
+  #     <% empty.with_content do %>
+  #       <%= render Shadcn::ButtonComponent.new { "Create Project" } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example With outline style
+  #   <%= render Shadcn::EmptyComponent.new(class_name: "border border-dashed") do |empty| %>
+  #     ...
+  #   <% end %>
+  #
+  class EmptyComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col items-center justify-center gap-6 py-16 text-center"
+
+    # Header slot containing media, title, and description
+    renders_one :header, lambda { |**options|
+      EmptyHeaderComponent.new(**options)
+    }
+
+    # Content slot for action buttons
+    renders_one :content_slot, lambda { |**options|
+      EmptyContentComponent.new(**options)
+    }
+
+    # Alias for more intuitive API
+    alias_method :with_content, :with_content_slot
+
+    def call
+      content_tag(:div, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data)) do
+        safe_join([header, content_slot, content].compact)
+      end
+    end
+  end
+end

data/app/components/shadcn/empty_content_component.rb

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

data/app/components/shadcn/empty_description_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Empty Description component
+  class EmptyDescriptionComponent < BaseComponent
+    BASE_CLASSES = "text-sm text-muted-foreground max-w-sm"
+
+    def call
+      content_tag(:p, content, class: merge_classes(BASE_CLASSES), **html_options.merge(build_data))
+    end
+  end
+end