shadcn_view_component 0.3.3

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ContextMenu
+    module Content
+      # The panel. Its own class string rather than the dropdown's, for one
+      # reason worth stating: the two differ only in which `--radix-*` custom
+      # properties they read, and those are the properties `popper.js` writes
+      # under the controller's `prefix`. Sharing the string would leave the
+      # menu reading variables nothing sets.
+      class Component < ApplicationViewComponent
+        slot_name :"context-menu-content"
+
+        style do
+          base {
+            "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] " \
+            "origin-(--radix-context-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",
+            hidden: true,
+            "data-state" => "closed",
+            "data-shadcn--dropdown-menu-target" => "content",
+            "data-action" => "keydown->shadcn--dropdown-menu#contentKeydown"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ContextMenu
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Radio", "Destructive", "Icons" and "Groups".
+      def items
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+<%# Right-click the dashed area. The trigger has no classes of its own upstream
+    — it is a region rather than a control — so the border here is the caller's,
+    which is the only way to see where the region is.
+
+    Everything below the trigger is the dropdown menu's, restamped: same items,
+    same submenu, same checkbox and radio behaviour, same controller. %>
+<div class="flex h-72 items-start justify-center pt-6">
+  <%= render(Shadcn::ContextMenu::Component.new) do |menu| %>
+    <% menu.with_trigger(class: "flex h-40 w-72 items-center justify-center rounded-md border border-dashed text-sm") do %>
+      Right-click here
+    <% end %>
+    <% menu.with_menu_content(class: "w-52") do %>
+      <%= render(Shadcn::ContextMenu::Item::Component.new) do %>
+        Back
+        <%= render(Shadcn::ContextMenu::Shortcut::Component.new) { "⌘[" } %>
+      <% end %>
+      <%= render(Shadcn::ContextMenu::Item::Component.new(disabled: true)) do %>
+        Forward
+        <%= render(Shadcn::ContextMenu::Shortcut::Component.new) { "⌘]" } %>
+      <% end %>
+      <%= render(Shadcn::ContextMenu::Separator::Component.new) %>
+      <%= render(Shadcn::ContextMenu::Sub::Component.new) do |sub| %>
+        <% sub.with_trigger { "More tools" } %>
+        <% sub.with_menu_content do %>
+          <%= render(Shadcn::ContextMenu::Item::Component.new) { "Save page" } %>
+          <%= render(Shadcn::ContextMenu::Item::Component.new) { "Create shortcut" } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::ContextMenu::Separator::Component.new) %>
+      <%= render(Shadcn::ContextMenu::CheckboxItem::Component.new(checked: true)) { "Show bookmarks" } %>
+      <%= render(Shadcn::ContextMenu::CheckboxItem::Component.new) { "Show full URLs" } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/context_menu/previews/items.html.erb

@@ -0,0 +1,35 @@
+<%# Upstream's "Radio", "Destructive", "Icons" and "Groups": the four kinds of
+    item the default preview leaves out, which has the plain items, a submenu,
+    the shortcuts and the checkboxes.
+
+    All four are the dropdown's — this family declares no controller of its own
+    — so what is worth seeing here is that a right-click reaches them at all. %>
+<%= render(Shadcn::ContextMenu::Component.new) do |menu| %>
+  <% menu.with_trigger(class: "flex h-40 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground") do %>
+    Right-click here
+  <% end %>
+  <% menu.with_menu_content(class: "w-52") do %>
+    <%= render(Shadcn::ContextMenu::Group::Component.new) do %>
+      <%= render(Shadcn::ContextMenu::Label::Component.new) { "Sort by" } %>
+      <%= render(Shadcn::ContextMenu::RadioGroup::Component.new) do %>
+        <% %w[Name Size Modified].each do |option| %>
+          <%= render(Shadcn::ContextMenu::RadioItem::Component.new(value: option.downcase, checked: option == "Name")) { option } %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= render(Shadcn::ContextMenu::Separator::Component.new) %>
+    <%= render(Shadcn::ContextMenu::Item::Component.new) do %>
+      <%= render(Shadcn::Icon::Component.new("search")) %>
+      Find in folder
+    <% end %>
+    <%= render(Shadcn::ContextMenu::Item::Component.new) do %>
+      <%= render(Shadcn::Icon::Component.new("check")) %>
+      Select all
+    <% end %>
+    <%= render(Shadcn::ContextMenu::Separator::Component.new) %>
+    <%= render(Shadcn::ContextMenu::Item::Component.new(variant: :destructive)) do %>
+      <%= render(Shadcn::Icon::Component.new("x")) %>
+      Move to bin
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/context_menu/sub/component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ContextMenu
+    module Sub
+      # A nested menu. Written out rather than subclassed: ViewComponent refuses
+      # to redeclare an inherited slot, and this one has to hold *this* family's
+      # sub-content — which differs from the dropdown's in the only way that
+      # matters here, the `--radix-*` properties it reads.
+      #
+      # Another `shadcn--dropdown-menu` controller, carrying the prefix so
+      # `popper.js` writes the properties that content looks for.
+      class Component < ApplicationViewComponent
+        renders_one :trigger, "Shadcn::ContextMenu::SubTrigger::Component"
+        renders_one :menu_content, "Shadcn::ContextMenu::SubContent::Component"
+
+        slot_name :"context-menu-sub"
+
+        attr_reader :open, :side, :align, :side_offset
+
+        def initialize(open: false, side: :right, align: :start, side_offset: 0, **attributes)
+          @open = open
+          @side = side&.to_sym || :right
+          @align = align&.to_sym || :start
+          @side_offset = side_offset
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            style: merged_style(CONTENTS_STYLE),
+            "data-controller" => "shadcn--dropdown-menu",
+            "data-shadcn--dropdown-menu-prefix-value" => "context-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
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ trigger, menu_content, content ].compact))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/context_menu/sub_content/component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ContextMenu
+    module SubContent
+      # Its own class string rather than the dropdown's, and the reason is the
+      # one thing `parity_spec` cannot see: the two differ only in which
+      # `--radix-*` custom properties they read, and those are what `popper.js`
+      # writes under the controller's prefix. Inheriting the dropdown's would
+      # leave a context submenu reading variables nothing sets — and parity
+      # would still pass, because it asks whether a token appears anywhere in
+      # the family, not whether it appears on the right element.
+      class Component < Shadcn::DropdownMenu::SubContent::Component
+        slot_name :"context-menu-sub-content"
+
+        style do
+          base {
+            "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) " \
+            "overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground " \
+            "shadow-lg 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
+      end
+    end
+  end
+end

data/app/components/shadcn/context_menu/trigger/component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ContextMenu
+    module Trigger
+      # The area you right-click. Upstream gives it no classes at all
+      # (context-menu.tsx:19) — it is a region, not a control, and what it looks
+      # like is the caller's business.
+      #
+      # A `<span>`, which is Radix's (`Primitive.span`, context-menu.tsx:151) and
+      # not a detail: a `<div>` would be block where this is inline, so the same
+      # markup would lay out differently. Measured on the live demo before it
+      # was believed.
+      #
+      # `-webkit-touch-callout: none` is Radix's too, and is the only reason a
+      # long press on iOS does not raise the system menu over this one.
+      #
+      # No `aria-haspopup` and no `role`: there is no keyboard route to a
+      # context menu, and claiming one would promise something that does not
+      # exist. Radix does not add either.
+      class Component < ApplicationViewComponent
+        default_tag :span
+        slot_name :"context-menu-trigger"
+
+        attr_reader :disabled
+
+        def initialize(disabled: false, **attributes)
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          attributes = {
+            style: merged_style("-webkit-touch-callout: none;"),
+            "data-state" => "closed",
+            "data-disabled" => (disabled.presence && ""),
+            "data-shadcn--dropdown-menu-target" => "trigger"
+          }.compact
+
+          # A disabled trigger hands the gesture back to the browser rather than
+          # swallowing it, which is Radix's own choice (`:158-161`): a region
+          # that does nothing should not also take away the menu you expected.
+          attributes["data-action"] = "contextmenu->shadcn--dropdown-menu#openAtPointer" unless disabled
+
+          super(**attributes.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/context_menu.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The ContextMenu family.
+  #
+  # Measured against `dropdown-menu.tsx`: the two files declare the same fifteen
+  # slots, and eleven of them carry byte-identical class strings once the
+  # prefix is normalised. So most of this family *is* the dropdown's, restamped
+  # — the same relationship `Sheet` has with `Dialog` here, and the reason both
+  # are driven by one controller rather than two.
+  #
+  # The four that differ: `label` gains `text-foreground`; `content` reads
+  # `--radix-context-menu-*` rather than `--radix-dropdown-menu-*`; `sub-trigger`
+  # spells the chevron's size through its own `[&_svg…]:size-4` instead of on
+  # the icon; and `trigger` is the area you right-click rather than a button.
+  module ContextMenu
+    extend Parts
+
+    part :label, slot: "context-menu-label",
+                 classes: "px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8"
+
+    part :separator, slot: "context-menu-separator", classes: "-mx-1 my-1 h-px bg-border"
+
+    part :shortcut, tag: :span, slot: "context-menu-shortcut",
+                    classes: "ml-auto text-xs tracking-widest text-muted-foreground"
+
+    part :group, slot: "context-menu-group", from: DropdownMenu::Group::Component
+
+    part :radio_group, slot: "context-menu-radio-group",
+                       from: DropdownMenu::RadioGroup::Component
+
+    part :item, slot: "context-menu-item", from: DropdownMenu::Item::Component
+
+    part :checkbox_item, slot: "context-menu-checkbox-item",
+                         from: DropdownMenu::CheckboxItem::Component
+
+    part :radio_item, slot: "context-menu-radio-item",
+                      from: DropdownMenu::RadioItem::Component
+
+    part :sub_trigger, slot: "context-menu-sub-trigger",
+                       from: DropdownMenu::SubTrigger::Component
+  end
+end

data/app/components/shadcn/dialog/close/component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Dialog
+    module Close
+      # DialogClose
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"dialog-close"
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "data-action" => "shadcn--dialog#close"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Dialog
+    # Port of registry/new-york-v4/ui/dialog.tsx
+    #
+    # Radix's Dialog.Root is a context provider and renders no DOM. Stimulus
+    # needs an element to attach to, so the root is a `display: contents`
+    # wrapper — invisible to layout, and it gives shadcn's `data-slot="dialog"`
+    # somewhere to live.
+    class Component < ApplicationViewComponent
+      include Concerns::ModalRoot
+
+      renders_one :trigger, "Shadcn::Dialog::Trigger::Component"
+      renders_one :dialog_content, "Shadcn::Dialog::Content::Component"
+
+      slot_name :dialog
+    end
+  end
+end

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

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Dialog
+    module Content
+      # DialogContent — renders its own overlay, as the TSX does, and the
+      # dismiss button in the corner unless asked not to.
+      class Component < ApplicationViewComponent
+        CLOSE_CLASSES = "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background " \
+                        "transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring " \
+                        "focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none " \
+                        "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground " \
+                        "[&_svg]:pointer-events-none [&_svg]:shrink-0 " \
+                        "[&_svg:not([class*='size-'])]:size-4"
+
+        renders_one :header, "Shadcn::Dialog::Header::Component"
+        renders_one :footer, "Shadcn::Dialog::Footer::Component"
+
+        slot_name :"dialog-content"
+
+        style do
+          base {
+            "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] " \
+            "translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 " \
+            "shadow-lg duration-200 outline-none 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 sm:max-w-lg"
+          }
+        end
+
+        attr_reader :show_close_button
+
+        def initialize(show_close_button: true, **attributes)
+          @show_close_button = show_close_button
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "dialog",
+            "aria-modal" => "true",
+            tabindex: "-1",
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--dialog-target" => "content"
+          }.merge(defaults))
+        end
+
+        # shadcn wraps the overlay and the content in a DialogPortal. Radix
+        # relocates that element to `document.body`; here it stays put (see
+        # the `shadcn--dialog` controller for why) and is `display: contents`,
+        # so it adds no box of its own.
+        def call
+          tag.div("data-slot": "dialog-portal", style: CONTENTS_STYLE) do
+            safe_join([
+              render(Overlay::Component.new),
+              render_element(body: safe_join([ header, content, footer, close_button ].compact))
+            ])
+          end
+        end
+
+        private
+
+        def close_button
+          return unless show_close_button
+
+          render(Close::Component.new(class: CLOSE_CLASSES)) do
+            safe_join([
+              render(Icon::Component.new("x")),
+              tag.span(shadcn_t("dialog.close"), class: "sr-only")
+            ])
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Dialog
+    module Header
+      # DialogHeader
+      class Component < ApplicationViewComponent
+        renders_one :title, "Shadcn::Dialog::Title::Component"
+        renders_one :description, "Shadcn::Dialog::Description::Component"
+
+        slot_name :"dialog-header"
+
+        style do
+          base { "flex flex-col gap-2 text-center sm:text-left" }
+        end
+
+        def call
+          render_element(body: safe_join([ title, description, content ].compact))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dialog/overlay/component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Dialog
+    module Overlay
+      # DialogOverlay
+      class Component < ApplicationViewComponent
+        slot_name :"dialog-overlay"
+
+        style do
+          base {
+            "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out " \
+            "data-[state=closed]:fade-out-0 data-[state=open]:animate-in " \
+            "data-[state=open]:fade-in-0"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--dialog-target" => "overlay"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Dialog
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # The case the layering has to survive: a modal opened from inside an
+      # ancestor that creates a stacking context.
+      def inside_stacking_context
+        render_with_template
+      end
+
+      # Upstream's "No Close Button": the corner dismiss left out.
+      def no_close_button
+        render_with_template
+      end
+
+      # Upstream's "Scrollable Content": a body that scrolls under a header and
+      # footer that do not.
+      def scrollable_content
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<%= render(Shadcn::Dialog::Component.new) do |d| %>
+  <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Edit profile" } %>
+  <% d.with_dialog_content do |c| %>
+    <% c.with_header do |h| %>
+      <% h.with_title { "Edit profile" } %>
+      <% h.with_description { "Make changes to your profile here. Click save when you are done." } %>
+    <% end %>
+    <div class="flex flex-col gap-4">
+      <%= render(Shadcn::Label::Component.new(for: "dlg-name")) { "Name" } %>
+      <%= render(Shadcn::Input::Component.new(id: "dlg-name", value: "Pedro Duarte")) %>
+    </div>
+    <% c.with_footer do %>
+      <%= render(Shadcn::Dialog::Close::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :outline))) { "Cancel" } %>
+      <%= render(Shadcn::Button::Component.new) { "Save changes" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/dialog/previews/inside_stacking_context.html.erb

@@ -0,0 +1,25 @@
+<%# A modal opened from inside a stacking context — a "Delete" button in a
+    sticky toolbar, say. The overlay and the content are separate fixed
+    elements, so both have to reach the top layer, and in that order. %>
+
+<div class="relative z-10 flex items-center gap-3 rounded-lg border bg-card p-4"
+     data-testid="stacking-header">
+  <span class="text-sm text-muted-foreground">A toolbar at z-10</span>
+
+  <%= render(Shadcn::Dialog::Component.new) do |dialog| %>
+    <% dialog.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) do %>
+      Open dialog
+    <% end %>
+    <% dialog.with_dialog_content do |content| %>
+      <% content.with_header do |header| %>
+        <% header.with_title { "Am I on top?" } %>
+        <% header.with_description { "If the panel below covers this, the modal lost to a stacking context." } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>
+
+<div class="relative z-20 mt-2 h-96 rounded-lg border bg-muted p-4"
+     data-testid="stacking-sibling">
+  <span class="text-sm font-medium">A sibling at z-20</span>
+</div>

data/app/components/shadcn/dialog/previews/no_close_button.html.erb

@@ -0,0 +1,15 @@
+<%# Upstream's "No Close Button": the corner dismiss is left out, so the only
+    ways out are the footer, Escape and a click outside. %>
+<%= render(Shadcn::Dialog::Component.new) do |d| %>
+  <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Open" } %>
+  <% d.with_dialog_content(show_close_button: false) do |c| %>
+    <% c.with_header do |h| %>
+      <% h.with_title { "Terms of service" } %>
+      <% h.with_description { "You have to answer before this closes from inside." } %>
+    <% end %>
+    <% c.with_footer do %>
+      <%= render(Shadcn::Dialog::Close::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :outline))) { "Decline" } %>
+      <%= render(Shadcn::Button::Component.new) { "Accept" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/dialog/previews/scrollable_content.html.erb

@@ -0,0 +1,29 @@
+<%# Upstream's "Scrollable Content": the body scrolls and the header and footer
+    stay put, which is what a dialog taller than the viewport has to do.
+
+    Two classes carry it, and the first version of this preview had neither, so
+    the panel simply grew past its own `max-h` and pushed its footer off the
+    screen. The content is a grid, so the rows have to be told which one gives —
+    `grid-rows-[auto_1fr_auto]` — and a grid item's `min-height` is `auto`,
+    which means it refuses to shrink below its content until `min-h-0` says it
+    may. Neither is upstream's markup: they are what a caller has to add, and
+    that is what this preview is for. %>
+<%= render(Shadcn::Dialog::Component.new) do |d| %>
+  <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Open a long dialog" } %>
+  <% d.with_dialog_content(class: "grid max-h-[80vh] grid-rows-[auto_1fr_auto] gap-0 p-0") do |c| %>
+    <% c.with_header(class: "border-b p-6") do |h| %>
+      <% h.with_title { "Release notes" } %>
+      <% h.with_description { "Everything that changed in this version." } %>
+    <% end %>
+    <div class="min-h-0 overflow-y-auto px-6 py-4">
+      <% 20.times do |i| %>
+        <p class="border-b py-3 text-sm text-muted-foreground last:border-b-0">
+          Change <%= i + 1 %> — a line long enough to make the body worth scrolling.
+        </p>
+      <% end %>
+    </div>
+    <% c.with_footer(class: "border-t p-6") do %>
+      <%= render(Shadcn::Dialog::Close::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :outline))) { "Close" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/dialog/trigger/component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Dialog
+    module Trigger
+      # DialogTrigger
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"dialog-trigger"
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "aria-haspopup" => "dialog",
+            "aria-expanded" => "false",
+            "data-state" => "closed",
+            "data-shadcn--dialog-target" => "trigger",
+            "data-action" => "shadcn--dialog#open"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dialog.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Dialog 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`.
+  module Dialog
+    extend Parts
+
+    part :description, tag: :p, slot: "dialog-description", classes: "text-sm text-muted-foreground"
+
+    part :footer, slot: "dialog-footer",
+                  classes: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+
+    part :title, tag: :h2, slot: "dialog-title", classes: "text-lg leading-none font-semibold"
+  end
+end