shadcn_view_component 0.3.3

data/app/components/shadcn/drawer/component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Drawer
+    # Port of registry/new-york-v4/ui/drawer.tsx
+    #
+    # vaul's Drawer.Root wraps Radix's Dialog.Root, so the open/close half of
+    # this component *is* the dialog's and runs on `shadcn--dialog`: the focus
+    # trap, the scroll lock, Escape, the outside click and the exit animation
+    # are all already there and are not reimplemented. What vaul adds is the
+    # drag, and that is `shadcn--drawer`, on the content — the same arrangement
+    # the menubar has with the dropdown.
+    class Component < ApplicationViewComponent
+      include Concerns::ModalRoot
+
+      renders_one :trigger, "Shadcn::Drawer::Trigger::Component"
+      # `dialog_content` rather than `drawer_content`, which reads better here
+      # but would make this the one modal family out of four with its own name
+      # for the same slot — `ModalRoot` renders it, and Sheet and AlertDialog
+      # both call it that.
+      renders_one :dialog_content, "Shadcn::Drawer::Content::Component"
+
+      slot_name :drawer
+
+      # Two controllers on one element. `data-controller` is one of the
+      # attributes that *replaces* rather than concatenates, so the dialog's own
+      # string has to be repeated here rather than added to.
+      def element_attributes(**defaults)
+        super(**{ "data-controller" => "shadcn--dialog shadcn--drawer" }.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/drawer/content/component.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Drawer
+    module Content
+      # DrawerContent — renders its own overlay, as the TSX does, and the drag
+      # handle above the content.
+      #
+      # Unlike the Sheet, the four edges are *not* cva variants: upstream emits
+      # all four sets of classes at once and lets `data-vaul-drawer-direction`
+      # pick between them, so this element carries every one of them and the
+      # attribute does the choosing. That attribute name is vaul's, not ours —
+      # it is in the class strings this port has to reproduce byte for byte, so
+      # the markup has to speak it.
+      class Component < ApplicationViewComponent
+        DIRECTIONS = %i[top bottom left right].freeze
+
+        HANDLE_CLASSES = "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted " \
+                         "group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+
+        renders_one :header, "Shadcn::Drawer::Header::Component"
+        renders_one :footer, "Shadcn::Drawer::Footer::Component"
+
+        slot_name :"drawer-content"
+
+        style do
+          base {
+            "group/drawer-content fixed z-50 flex h-auto flex-col bg-background " \
+            "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 " \
+            "data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] " \
+            "data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b " \
+            "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 " \
+            "data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] " \
+            "data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t " \
+            "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 " \
+            "data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l " \
+            "data-[vaul-drawer-direction=right]:sm:max-w-sm " \
+            "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 " \
+            "data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r " \
+            "data-[vaul-drawer-direction=left]:sm:max-w-sm"
+          }
+        end
+
+        attr_reader :direction
+
+        def initialize(direction: :bottom, **attributes)
+          @direction = DIRECTIONS.include?(direction&.to_sym) ? direction.to_sym : :bottom
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "dialog",
+            "aria-modal" => "true",
+            tabindex: "-1",
+            "data-state" => "closed",
+            hidden: true,
+            "data-vaul-drawer" => "",
+            "data-vaul-drawer-direction" => direction,
+            # A constant, because this port has no snap points — and named
+            # rather than dropped because vaul's own selectors carry it, and the
+            # stylesheet reproduced in `shadcn.css` matches on it.
+            "data-vaul-snap-points" => "false",
+            "data-shadcn--dialog-target" => "content",
+            "data-shadcn--drawer-target" => "content",
+            "data-action" => "pointerdown->shadcn--drawer#press " \
+                             "pointermove->shadcn--drawer#move " \
+                             "pointerup->shadcn--drawer#release " \
+                             "pointercancel->shadcn--drawer#release"
+          }.merge(defaults))
+        end
+
+        # shadcn wraps the overlay and the content in a DrawerPortal, which vaul
+        # relocates to `document.body`; here it stays put, as the dialog's does,
+        # and is `display: contents` so it adds no box of its own.
+        def call
+          tag.div("data-slot": "drawer-portal", style: CONTENTS_STYLE) do
+            safe_join([
+              render(Overlay::Component.new("data-vaul-overlay": "", "data-shadcn--drawer-target": "overlay")),
+              render_element(body: safe_join([ handle, header, content, footer ].compact))
+            ])
+          end
+        end
+
+        private
+
+        # Shown only when the drawer comes up from the bottom — the class does
+        # that, so it is rendered whatever the direction, exactly as upstream.
+        def handle
+          tag.div(class: HANDLE_CLASSES)
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/drawer/header/component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Drawer
+    module Header
+      # DrawerHeader — a slot for the title and the description, as the Sheet's
+      # and the Dialog's are.
+      #
+      # The two `group-data-*` classes read the direction off the *content*,
+      # which is why that attribute lives there rather than on the root shadcn
+      # takes it on: a header centres itself only when the drawer comes from an
+      # edge that makes it the top of the panel.
+      class Component < ApplicationViewComponent
+        renders_one :title, "Shadcn::Drawer::Title::Component"
+        renders_one :description, "Shadcn::Drawer::Description::Component"
+
+        slot_name :"drawer-header"
+
+        style do
+          base {
+            "flex flex-col gap-0.5 p-4 " \
+            "group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center " \
+            "group-data-[vaul-drawer-direction=top]/drawer-content:text-center " \
+            "md:gap-1.5 md:text-left"
+          }
+        end
+
+        def call
+          render_element(body: safe_join([ title, description, content ].compact))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/drawer/preview.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Drawer
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # The other three edges, which the same class string serves — only the
+      # `data-vaul-drawer-direction` changes.
+      def sides
+        render_with_template
+      end
+
+      # A drawer taller than it can show, which is where the drag has to give
+      # way to the scroll.
+      def scrollable
+        render_with_template
+      end
+
+      # The same list, in a drawer that closes sideways — where the two gestures
+      # stop competing and the drag is let through whatever is scrolled.
+      def scrollable_side
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/drawer/previews/default.html.erb

@@ -0,0 +1,21 @@
+<%# Upstream's own example: a bottom drawer with a header, a body and a footer.
+    The handle above the header is what says it can be dragged. %>
+<%= render(Shadcn::Drawer::Component.new) do |d| %>
+  <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Open drawer" } %>
+  <% d.with_dialog_content do |c| %>
+    <% c.with_header do |h| %>
+      <% h.with_title { "Move goal" } %>
+      <% h.with_description { "Set your daily activity goal." } %>
+    <% end %>
+    <div class="p-4 pb-0">
+      <p class="text-sm text-muted-foreground">
+        Drag this panel downwards, or throw it, and it closes. Drag it up and it
+        gives a little and comes back.
+      </p>
+    </div>
+    <% c.with_footer do %>
+      <%= render(Shadcn::Button::Component.new) { "Submit" } %>
+      <%= render(Shadcn::Drawer::Close::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :outline))) { "Cancel" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/drawer/previews/scrollable.html.erb

@@ -0,0 +1,20 @@
+<%# The case the drag has to give way for: a list longer than the drawer. A
+    downward drag that starts part-way down the list scrolls it and must not
+    also throw the drawer away — which is what `shouldDrag` decides. %>
+<%= render(Shadcn::Drawer::Component.new) do |d| %>
+  <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Open a long drawer" } %>
+  <% d.with_dialog_content do |c| %>
+    <% c.with_header do |h| %>
+      <% h.with_title { "Recent activity" } %>
+      <% h.with_description { "Scroll the list; the drawer stays put." } %>
+    <% end %>
+    <div class="max-h-64 overflow-y-auto px-4">
+      <% 30.times do |i| %>
+        <div class="border-b py-3 text-sm last:border-b-0">Entry <%= i + 1 %></div>
+      <% end %>
+    </div>
+    <% c.with_footer do %>
+      <%= render(Shadcn::Drawer::Close::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :outline))) { "Close" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/drawer/previews/scrollable_side.html.erb

@@ -0,0 +1,21 @@
+<%# The same long list in a drawer that closes sideways. It is the case where
+    the two gestures stop competing: a vertical pull scrolls the list, and a
+    horizontal one can only mean the drawer, so `shouldDrag` lets it through
+    without asking what is scrolled. %>
+<%= render(Shadcn::Drawer::Component.new) do |d| %>
+  <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Open filters" } %>
+  <% d.with_dialog_content(direction: :right) do |c| %>
+    <% c.with_header do |h| %>
+      <% h.with_title { "Filters" } %>
+      <% h.with_description { "Scroll the list, or push the panel to the right." } %>
+    <% end %>
+    <div class="max-h-96 overflow-y-auto px-4">
+      <% 30.times do |i| %>
+        <div class="border-b py-3 text-sm last:border-b-0">Filter <%= i + 1 %></div>
+      <% end %>
+    </div>
+    <% c.with_footer do %>
+      <%= render(Shadcn::Drawer::Close::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :outline))) { "Close" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/drawer/previews/sides.html.erb

@@ -0,0 +1,17 @@
+<%# One class string serves all four edges; only the attribute changes. %>
+<div class="flex items-center gap-2">
+  <% %i[bottom top left right].each do |direction| %>
+    <%= render(Shadcn::Drawer::Component.new) do |d| %>
+      <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { direction.to_s.capitalize } %>
+      <% d.with_dialog_content(direction:) do |c| %>
+        <% c.with_header do |h| %>
+          <% h.with_title { "From the #{direction}" } %>
+          <% h.with_description { "Dragged towards that edge, it closes." } %>
+        <% end %>
+        <% c.with_footer do %>
+          <%= render(Shadcn::Drawer::Close::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :outline))) { "Close" } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/drawer.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Drawer family that are just an element with a `data-slot`
+  # and a fixed set of classes. Anything with variants, slots or markup of its
+  # own keeps its own `component.rb`.
+  #
+  # Upstream builds this on **vaul**, not on Radix — but vaul is itself a Radix
+  # Dialog with a drag on top (`import * as DialogPrimitive from
+  # '@radix-ui/react-dialog'` is its third line), so the parts that are only
+  # markup come from the Dialog here for the same reason the Sheet's do.
+  module Drawer
+    extend Parts
+
+    part :close, slot: "drawer-close", from: Dialog::Close::Component
+
+    part :description, tag: :p, slot: "drawer-description", classes: "text-sm text-muted-foreground"
+
+    part :footer, slot: "drawer-footer", classes: "mt-auto flex flex-col gap-2 p-4"
+
+    part :overlay, slot: "drawer-overlay", from: Dialog::Overlay::Component
+
+    part :title, tag: :h2, slot: "drawer-title", classes: "font-semibold text-foreground"
+
+    part :trigger, slot: "drawer-trigger", from: Dialog::Trigger::Component
+  end
+end

data/app/components/shadcn/dropdown_menu/checkbox_item/component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module CheckboxItem
+      # DropdownMenuCheckboxItem
+      class Component < ApplicationViewComponent
+        INDICATOR_CLASSES = "pointer-events-none absolute left-2 flex size-3.5 " \
+                            "items-center justify-center"
+
+        slot_name :"dropdown-menu-checkbox-item"
+
+        style do
+          base {
+            "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 " \
+            "text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground " \
+            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 " \
+            "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          }
+        end
+
+        attr_reader :checked, :disabled
+
+        def initialize(checked: false, disabled: false, **attributes)
+          @checked = checked
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "menuitemcheckbox",
+            tabindex: "-1",
+            "aria-checked" => checked.to_s,
+            "data-state" => (checked ? "checked" : "unchecked"),
+            "data-disabled" => (true if disabled),
+            "data-shadcn--dropdown-menu-target" => "item",
+            "data-action" => "click->shadcn--dropdown-menu#select " \
+                             "pointerenter->shadcn--dropdown-menu#pointerenter"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ indicator, content ]))
+        end
+
+        private
+
+        def indicator
+          tag.span(class: INDICATOR_CLASSES) do
+            tag.span(
+              render(Icon::Component.new("check", class: "size-4")),
+              "data-slot": "dropdown-menu-checkbox-item-indicator",
+              hidden: (true unless checked)
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu/component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    # Port of registry/new-york-v4/ui/dropdown-menu.tsx
+    class Component < ApplicationViewComponent
+      renders_one :trigger, "Shadcn::DropdownMenu::Trigger::Component"
+      renders_one :menu_content, "Shadcn::DropdownMenu::Content::Component"
+
+      slot_name :"dropdown-menu"
+
+      attr_reader :open, :side, :align, :side_offset, :align_offset, :loop
+
+      # `loop` is Radix's own prop, declared on MenuContentImpl and documented
+      # `@defaultValue false` (vendor/radix/ui/menu.tsx:363-368). It rides here
+      # rather than on Content for the same reason `side` and `align` do: one
+      # Stimulus controller owns the whole family, and the root is where it is
+      # attached.
+      def initialize(open: false, side: :bottom, align: :start, side_offset: 4,
+                     align_offset: 0, loop: false, **attributes)
+        @open = open
+        @side = side&.to_sym || :bottom
+        @align = align&.to_sym || :start
+        @side_offset = side_offset
+        @align_offset = align_offset
+        @loop = loop
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style(CONTENTS_STYLE),
+          "data-controller" => "shadcn--dropdown-menu",
+          "data-shadcn--dropdown-menu-open-value" => open,
+          "data-shadcn--dropdown-menu-side-value" => side,
+          "data-shadcn--dropdown-menu-align-value" => align,
+          "data-shadcn--dropdown-menu-side-offset-value" => side_offset,
+          "data-shadcn--dropdown-menu-align-offset-value" => align_offset,
+          "data-shadcn--dropdown-menu-loop-value" => loop
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ trigger, menu_content, content ].compact))
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu/content/component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module Content
+      # DropdownMenuContent
+      class Component < ApplicationViewComponent
+        renders_many :items, "Shadcn::DropdownMenu::Item::Component"
+
+        slot_name :"dropdown-menu-content"
+
+        style do
+          base {
+            "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] " \
+            "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden " \
+            "overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground " \
+            "shadow-md 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 data-[state=closed]:animate-out " \
+            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 " \
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 " \
+            "data-[state=open]:zoom-in-95"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "menu",
+            tabindex: "-1",
+            "aria-orientation" => "vertical",
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--dropdown-menu-target" => "content",
+            "data-action" => "keydown->shadcn--dropdown-menu#contentKeydown"
+          }.merge(defaults))
+        end
+
+        # shadcn wraps the content in a DropdownMenuPortal. Radix relocates it to
+        # `document.body`; here it stays put (see the Stimulus controller for
+        # why) and is `display: contents`, so it adds no box of its own.
+        def call
+          tag.div("data-slot": "dropdown-menu-portal", style: CONTENTS_STYLE) do
+            render_element(body: safe_join([ items, content ].flatten.compact))
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu/group/component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module Group
+      # DropdownMenuGroup
+      class Component < ApplicationViewComponent
+        slot_name :"dropdown-menu-group"
+
+        def element_attributes(**defaults)
+          super(**{ role: "group" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu/item/component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module Item
+      # DropdownMenuItem
+      class Component < ApplicationViewComponent
+        slot_name :"dropdown-menu-item"
+
+        style do
+          base {
+            "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm " \
+            "outline-hidden select-none focus:bg-accent focus:text-accent-foreground " \
+            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 " \
+            "data-[inset]:pl-8 data-[variant=destructive]:text-destructive " \
+            "data-[variant=destructive]:focus:bg-destructive/10 " \
+            "data-[variant=destructive]:focus:text-destructive " \
+            "dark:data-[variant=destructive]:focus:bg-destructive/20 " \
+            "[&_svg]:pointer-events-none [&_svg]:shrink-0 " \
+            "[&_svg:not([class*='size-'])]:size-4 " \
+            "[&_svg:not([class*='text-'])]:text-muted-foreground " \
+            "data-[variant=destructive]:*:[svg]:text-destructive!"
+          }
+        end
+
+        attr_reader :variant, :inset, :disabled
+
+        def initialize(variant: :default, inset: false, disabled: false, **attributes)
+          @variant = variant&.to_sym || :default
+          @inset = inset
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "menuitem",
+            tabindex: "-1",
+            "data-variant" => variant,
+            "data-inset" => (true if inset),
+            "data-disabled" => (true if disabled),
+            "data-shadcn--dropdown-menu-target" => "item",
+            "data-action" => "click->shadcn--dropdown-menu#select " \
+                             "pointerenter->shadcn--dropdown-menu#pointerenter"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Checkboxes", "Radio Group" and "Destructive".
+      def checkboxes_and_radio
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu/previews/checkboxes_and_radio.html.erb

@@ -0,0 +1,34 @@
+<%# Upstream's "Checkboxes", "Radio Group" and "Destructive", none of which the
+    default preview shows: it has the label, the items, the separators and the
+    shortcuts, and stops there.
+
+    A checkbox item keeps the menu open when chosen and a radio item replaces
+    whichever of its group was set — both are the menu's own behaviour rather
+    than markup, and both are the dropdown controller's. %>
+<div class="flex items-center gap-2">
+  <%= render(Shadcn::DropdownMenu::Component.new) do |m| %>
+    <% m.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "View" } %>
+    <% m.with_menu_content(class: "w-56") do %>
+      <%= render(Shadcn::DropdownMenu::Label::Component.new) { "Appearance" } %>
+      <%= render(Shadcn::DropdownMenu::Separator::Component.new) %>
+      <%= render(Shadcn::DropdownMenu::CheckboxItem::Component.new(checked: true)) { "Status bar" } %>
+      <%= render(Shadcn::DropdownMenu::CheckboxItem::Component.new) { "Activity bar" } %>
+      <%= render(Shadcn::DropdownMenu::CheckboxItem::Component.new(disabled: true)) { "Panel — not available" } %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::DropdownMenu::Component.new) do |m| %>
+    <% m.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Panel position" } %>
+    <% m.with_menu_content(class: "w-56") do %>
+      <%= render(Shadcn::DropdownMenu::Label::Component.new) { "Position" } %>
+      <%= render(Shadcn::DropdownMenu::Separator::Component.new) %>
+      <%= render(Shadcn::DropdownMenu::RadioGroup::Component.new) do %>
+        <% %w[Top Bottom Right].each do |side| %>
+          <%= render(Shadcn::DropdownMenu::RadioItem::Component.new(value: side.downcase, checked: side == "Bottom")) { side } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::DropdownMenu::Separator::Component.new) %>
+      <%= render(Shadcn::DropdownMenu::Item::Component.new(variant: :destructive)) { "Reset layout" } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/dropdown_menu/previews/default.html.erb

@@ -0,0 +1,23 @@
+<%= render(Shadcn::DropdownMenu::Component.new) do |m| %>
+  <% m.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Open menu" } %>
+  <%# Items go in the block rather than through the `item` slot, so the label
+      and separators keep their place between them. %>
+  <% m.with_menu_content(class: "w-56") do %>
+    <%= render(Shadcn::DropdownMenu::Label::Component.new) { "My Account" } %>
+    <%= render(Shadcn::DropdownMenu::Separator::Component.new) %>
+    <%= render(Shadcn::DropdownMenu::Group::Component.new) do %>
+      <%= render(Shadcn::DropdownMenu::Item::Component.new) do %>
+        Profile
+        <%= render(Shadcn::DropdownMenu::Shortcut::Component.new) { "⌘P" } %>
+      <% end %>
+      <%= render(Shadcn::DropdownMenu::Item::Component.new) { "Billing" } %>
+      <%# "Settings" and "Support" share an initial on purpose: without two
+          entries starting with the same letter, a browser spec cannot tell
+          typeahead's repeat-cycling from always landing on the first match. %>
+      <%= render(Shadcn::DropdownMenu::Item::Component.new) { "Settings" } %>
+      <%= render(Shadcn::DropdownMenu::Item::Component.new) { "Support" } %>
+    <% end %>
+    <%= render(Shadcn::DropdownMenu::Separator::Component.new) %>
+    <%= render(Shadcn::DropdownMenu::Item::Component.new(variant: :destructive)) { "Log out" } %>
+  <% end %>
+<% end %>

data/app/components/shadcn/dropdown_menu/radio_group/component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module RadioGroup
+      # DropdownMenuRadioGroup
+      class Component < ApplicationViewComponent
+        slot_name :"dropdown-menu-radio-group"
+
+        def element_attributes(**defaults)
+          super(**{ role: "group" }.merge(defaults))
+        end
+      end
+    end
+  end
+end