phlex_kit 0.2.0 → 0.2.2

data/app/components/phlex_kit/calendar/calendar_prev.rb

@@ -20,21 +20,7 @@ module PhlexKit
     private
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "15",
-        height: "15",
-        viewbox: "0 0 15 15",
-        fill: "none",
-        "aria-hidden": "true"
-      ) do |s|
-        s.path(
-          d: "M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z",
-          fill: "currentColor",
-          fill_rule: "evenodd",
-          clip_rule: "evenodd"
-        )
-      end
+      render Icon.new(:chevron_left, size: 15)
     end
   end
 end

data/app/components/phlex_kit/card/card.css

@@ -1,15 +1,51 @@
 /* Co-located with card.rb — the UI::Card container kit (Card + Header / Title /
-   Description / Content / Footer). Namespaced .pk-card* to avoid colliding with
-   the dashboard stat-tile .card in application.css. Theme tokens come from the
-   global stylesheet; translated from ruby_ui's Tailwind:
-     rounded-xl border bg-background shadow  → border + radius + surface
-     flex flex-col space-y-1.5 p-6           → header column + gap + pad
-     font-semibold leading-none tracking-tight → title
-     text-sm text-muted-foreground           → description
-     p-6 pt-0 / items-center p-6 pt-0         → content / footer (top pad sits in header) */
-.pk-card { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: .75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
-.pk-card-header { display: flex; flex-direction: column; gap: .375rem; padding: 1.5rem; }
-.pk-card-title { margin: 0; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
-.pk-card-description { margin: 0; font-size: .85rem; color: var(--pk-muted); }
-.pk-card-content { padding: 0 1.5rem 1.5rem; }
-.pk-card-footer { display: flex; align-items: center; gap: .5rem; padding: 0 1.5rem 1.5rem; }
+   Description / Action / Content / Footer), matching shadcn/ui's current card:
+   every gap and inset derives from --pk-card-spacing (1rem; .75rem for
+   size :sm — or set it inline per card), the header becomes a 1fr/auto grid
+   when a CardAction is present, the footer is a full-bleed muted band, and a
+   leading <img> child runs edge-to-edge. Theme tokens come from the global
+   stylesheet. */
+.pk-card {
+  --pk-card-spacing: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pk-card-spacing);
+  overflow: hidden;
+  border: 1px solid var(--pk-border);
+  border-radius: calc(var(--pk-radius) + 4px);
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  padding-block: var(--pk-card-spacing);
+  font-size: .875rem;
+}
+.pk-card.sm { --pk-card-spacing: .75rem; }
+/* the footer band and a leading image supply their own inset */
+.pk-card:has(> .pk-card-footer:last-child) { padding-bottom: 0; }
+.pk-card:has(> img:first-child) { padding-top: 0; }
+.pk-card > img { width: 100%; object-fit: cover; }
+
+.pk-card-header {
+  display: grid;
+  grid-auto-rows: min-content;
+  align-items: start;
+  gap: .25rem;
+  padding-inline: var(--pk-card-spacing);
+}
+.pk-card-header:has(.pk-card-action) { grid-template-columns: 1fr auto; }
+.pk-card-title { margin: 0; font-weight: 600; line-height: 1.25; }
+.pk-card-description { margin: 0; font-size: .875rem; color: var(--pk-muted); }
+.pk-card-action {
+  grid-row: 1 / span 2;
+  grid-column: 2;
+  justify-self: end;
+  align-self: start;
+}
+.pk-card-content { padding-inline: var(--pk-card-spacing); }
+.pk-card-footer {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  border-top: 1px solid var(--pk-border);
+  background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent);
+  padding: var(--pk-card-spacing);
+}

data/app/components/phlex_kit/card/card.rb

@@ -18,12 +18,16 @@ module PhlexKit
   #     render PhlexKit::CardFooter.new { render PhlexKit::Button.new { "Action" } }
   #   end
   class Card < BaseComponent
-    def initialize(**attrs)
+    # size => modifier class; :sm tightens --pk-card-spacing (shadcn's size prop).
+    SIZES = { default: nil, sm: "sm" }.freeze
+
+    def initialize(size: :default, **attrs)
+      @size = size.to_sym
       @attrs = attrs
     end
 
     def view_template(&block)
-      div(**mix({ class: "pk-card" }, @attrs), &block)
+      div(**mix({ class: [ "pk-card", SIZES.fetch(@size) ].compact.join(" ") }, @attrs), &block)
     end
   end
 end

data/app/components/phlex_kit/card/card_action.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Top-right slot of a CardHeader (a button, link or badge) — the header
+  # becomes a 1fr/auto grid when present. Ported from shadcn/ui's CardAction
+  # (newer than ruby_ui's card). See card.rb.
+  class CardAction < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-card-action" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/carousel/carousel_next.rb

@@ -19,21 +19,7 @@ module PhlexKit
     private
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "aria-hidden": "true"
-      ) do |s|
-        s.path(d: "M5 12h14")
-        s.path(d: "m12 5 7 7-7 7")
-      end
+      render Icon.new(:arrow_right, size: 24)
     end
   end
 end

data/app/components/phlex_kit/carousel/carousel_previous.rb

@@ -20,21 +20,7 @@ module PhlexKit
     private
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "aria-hidden": "true"
-      ) do |s|
-        s.path(d: "m12 19-7-7 7-7")
-        s.path(d: "M19 12H5")
-      end
+      render Icon.new(:arrow_left, size: 24)
     end
   end
 end

data/app/components/phlex_kit/codeblock/codeblock.css

@@ -4,4 +4,4 @@
   background: var(--pk-surface-2); font-size: .875rem;
 }
 .pk-codeblock pre { margin: 0; padding: 1rem; }
-.pk-codeblock code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--pk-text); }
+.pk-codeblock code { font-family: var(--pk-font-mono, ui-monospace, monospace); color: var(--pk-text); }

data/app/components/phlex_kit/combobox/combobox_clear_button.rb

@@ -18,21 +18,7 @@ module PhlexKit
           action: "phlex-kit--combobox#clearAll"
         }
       }, @attrs)) do
-        svg(
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "24",
-          height: "24",
-          viewbox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          "stroke-width": "2",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round",
-          "aria-hidden": "true"
-        ) do |s|
-          s.path(d: "M18 6 6 18")
-          s.path(d: "m6 6 12 12")
-        end
+        render Icon.new(:x, size: 24)
       end
     end
   end

data/app/components/phlex_kit/combobox/combobox_input_trigger.rb

@@ -51,18 +51,7 @@ module PhlexKit
 
     def chevron_icon
       span(class: "pk-combobox-input-trigger-icon") do
-        svg(
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "24",
-          height: "24",
-          viewbox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          "stroke-width": "2",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round",
-          "aria-hidden": "true"
-        ) { |s| s.path(d: "m6 9 6 6 6-6") }
+        render Icon.new(:chevron_down, size: 24)
       end
     end
   end

data/app/components/phlex_kit/combobox/combobox_item_indicator.rb

@@ -7,21 +7,7 @@ module PhlexKit
     end
 
     def view_template
-      svg(**mix({
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-combobox-item-indicator",
-        "aria-hidden": "true"
-      }, @attrs)) do |s|
-        s.path(d: "M20 6 9 17l-5-5")
-      end
+      render Icon.new(:check, size: 24, **mix({ class: "pk-combobox-item-indicator" }, @attrs))
     end
   end
 end

data/app/components/phlex_kit/combobox/combobox_search_input.rb

@@ -30,20 +30,7 @@ module PhlexKit
     private
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-combobox-search-icon",
-        "aria-hidden": "true"
-      ) do |s|
-        s.circle(cx: "11", cy: "11", r: "8")
-        s.path(d: "m21 21-4.3-4.3")
-      end
+      render Icon.new(:search, size: nil, class: "pk-combobox-search-icon")
     end
   end
 end

data/app/components/phlex_kit/combobox/combobox_trigger.rb

@@ -29,20 +29,7 @@ module PhlexKit
     private
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-combobox-trigger-icon",
-        "aria-hidden": "true"
-      ) do |s|
-        s.path(d: "m7 15 5 5 5-5")
-        s.path(d: "m7 9 5-5 5 5")
-      end
+      render Icon.new(:chevrons_up_down, size: nil, class: "pk-combobox-trigger-icon")
     end
   end
 end

data/app/components/phlex_kit/command/command.css

@@ -12,8 +12,8 @@
   inset: 0;
   z-index: 50;
   pointer-events: auto;
-  background: color-mix(in oklab, var(--pk-bg) 80%, transparent);
-  backdrop-filter: blur(4px);
+  background: rgb(0 0 0 / .5);
+  backdrop-filter: blur(8px);
 }
 
 /* Centered palette panel. */

data/app/components/phlex_kit/command/command_input.rb

@@ -38,19 +38,7 @@ module PhlexKit
     private
 
     def search_icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 20 20",
-        fill: "currentColor",
-        class: "pk-command-input-icon",
-        "aria-hidden": "true"
-      ) do |s|
-        s.path(
-          fill_rule: "evenodd",
-          d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z",
-          clip_rule: "evenodd"
-        )
-      end
+      render Icon.new(:search, size: nil, class: "pk-command-input-icon")
     end
   end
 end

data/app/components/phlex_kit/context_menu/context_menu_item.rb

@@ -12,9 +12,7 @@ module PhlexKit
                 data: { action: "click->phlex-kit--context-menu#close", phlex_kit__context_menu_target: "menuItem", disabled: @disabled } }, @attrs)) do
         if @checked
           span(class: "pk-context-menu-check") do
-            svg(width: "15", height: "15", viewbox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg") do |s|
-              s.path(fill_rule: "evenodd", clip_rule: "evenodd", fill: "currentColor", d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z")
-            end
+            render Icon.new(:check, size: 15)
           end
         end
         yield

data/app/components/phlex_kit/data_table/data_table_column_toggle.rb

@@ -43,19 +43,7 @@ module PhlexKit
     private
 
     def chevron_icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-data-table-column-toggle-icon",
-        "aria-hidden": "true"
-      ) { |s| s.polyline(points: "6 9 12 15 18 9") }
+      render Icon.new(:chevron_down, class: "pk-data-table-column-toggle-icon")
     end
   end
 end

data/app/components/phlex_kit/data_table/data_table_expand_toggle.rb

@@ -23,18 +23,7 @@ module PhlexKit
     private
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "aria-hidden": "true"
-      ) { |s| s.polyline(points: "9 18 15 12 9 6") }
+      render Icon.new(:chevron_right)
     end
   end
 end

data/app/components/phlex_kit/data_table/data_table_sort_head.rb

@@ -49,34 +49,8 @@ module PhlexKit
 
     def sort_icon
       icon_class = [ "pk-data-table-sort-icon", (current_direction ? nil : "unsorted") ].compact.join(" ")
-      case current_direction
-      when "asc"
-        sort_svg(icon_class) { |s| s.polyline(points: "18 15 12 9 6 15") }
-      when "desc"
-        sort_svg(icon_class) { |s| s.polyline(points: "6 9 12 15 18 9") }
-      else
-        sort_svg(icon_class) do |s|
-          s.polyline(points: "8 15 12 19 16 15")
-          s.polyline(points: "8 9 12 5 16 9")
-        end
-      end
-    end
-
-    def sort_svg(icon_class, &)
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "12",
-        height: "12",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: icon_class,
-        "aria-hidden": "true",
-        &
-      )
+      glyph = { "asc" => :chevron_up, "desc" => :chevron_down }.fetch(current_direction, :chevrons_up_down)
+      render Icon.new(glyph, size: 12, class: icon_class)
     end
   end
 end

data/app/components/phlex_kit/dialog/dialog.css

@@ -8,14 +8,20 @@
   padding: 1.5rem; box-shadow: 0 10px 30px rgb(0 0 0 / .35);
 }
 .pk-dialog[open] { display: flex; flex-direction: column; }
-.pk-dialog::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(2px); }
+.pk-dialog::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); }
 .pk-dialog.xs { max-width: 24rem; }
 .pk-dialog.sm { max-width: 28rem; }
 .pk-dialog.lg { max-width: 42rem; }
 .pk-dialog.xl { max-width: 56rem; }
 .pk-dialog.full { max-width: 100%; }
 .pk-dialog-header { display: flex; flex-direction: column; gap: .375rem; text-align: center; }
-.pk-dialog-footer { display: flex; flex-direction: column-reverse; gap: .5rem; }
+.pk-dialog-footer {
+  display: flex; flex-direction: column-reverse; gap: .5rem;
+  margin: 0 calc(-1 * var(--pk-dialog-spacing)) calc(-1 * var(--pk-dialog-spacing));
+  padding: var(--pk-dialog-spacing);
+  border-top: 1px solid var(--pk-border);
+  background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent);
+}
 .pk-dialog-title { font-size: 1.125rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
 .pk-dialog-description { font-size: .875rem; color: var(--pk-muted); }
 .pk-dialog-middle { padding-block: 1rem; }

data/app/components/phlex_kit/dialog/dialog_content.rb

@@ -10,9 +10,7 @@ module PhlexKit
       dialog(**mix({ class: cls, data: { phlex_kit__dialog_target: "dialog", action: "click->phlex-kit--dialog#backdropClick" } }, @attrs)) do
         yield
         button(type: "button", class: "pk-overlay-close", data: { action: "click->phlex-kit--dialog#dismiss" }) do
-          svg(width: "15", height: "15", viewbox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg") do |s|
-          s.path(fill_rule: "evenodd", clip_rule: "evenodd", fill: "currentColor", d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z")
-        end
+          render Icon.new(:x, size: 15)
           span(class: "pk-sr-only") { "Close" }
         end
       end

data/app/components/phlex_kit/drawer/drawer.css

@@ -7,6 +7,7 @@
   inset: 0;
   z-index: 50;
   background: rgb(0 0 0 / .5);
+  backdrop-filter: blur(8px);
 }
 .pk-drawer {
   position: fixed;

data/app/components/phlex_kit/dropdown_menu/dropdown_menu.css

@@ -21,6 +21,7 @@
 .pk-dropdown-menu-item {
   display: flex;
   align-items: center;
+  gap: .5rem;
   width: 100%;
   cursor: pointer;
   user-select: none;
@@ -36,3 +37,66 @@
 
 .pk-dropdown-menu-label { margin: 0; padding: .375rem .5rem; font-size: .875rem; font-weight: 600; }
 .pk-dropdown-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--pk-border); }
+
+.pk-dropdown-menu-item > svg { flex: none; width: 1rem; height: 1rem; color: var(--pk-muted); }
+.pk-dropdown-menu-group { display: contents; }
+
+/* Destructive rows (irreversible actions). */
+.pk-dropdown-menu-item.destructive { color: var(--pk-red); }
+.pk-dropdown-menu-item.destructive > svg { color: var(--pk-red); }
+.pk-dropdown-menu-item.destructive:hover,
+.pk-dropdown-menu-item.destructive:focus {
+  background: color-mix(in oklab, var(--pk-red) 12%, transparent);
+  color: var(--pk-red);
+}
+
+/* Keyboard hint, pushed to the row's end. */
+.pk-dropdown-menu-shortcut {
+  margin-left: auto;
+  font-size: .75rem;
+  letter-spacing: .1em;
+  color: var(--pk-muted);
+}
+
+/* Checkbox / radio rows: real (hidden) inputs; indicator shows via :has. */
+.pk-dropdown-menu-item-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+.pk-dropdown-menu-checkbox-item,
+.pk-dropdown-menu-radio-item { position: relative; }
+.pk-dropdown-menu-item-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  visibility: hidden;
+}
+.pk-dropdown-menu-item-indicator svg { width: .875rem; height: .875rem; }
+.pk-dropdown-menu-radio-item .pk-dropdown-menu-item-indicator svg { width: .5rem; height: .5rem; }
+.pk-dropdown-menu-item:has(.pk-dropdown-menu-item-input:checked) .pk-dropdown-menu-item-indicator { visibility: visible; }
+.pk-dropdown-menu-item:has(.pk-dropdown-menu-item-input:focus-visible) {
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+
+/* Submenu: trigger row + side panel, revealed on hover/focus — pure CSS. */
+.pk-dropdown-menu-sub { position: relative; }
+.pk-dropdown-menu-sub-chevron { margin-left: auto; width: 1rem; height: 1rem; }
+.pk-dropdown-menu-sub-content {
+  position: absolute;
+  top: -0.25rem;
+  left: 100%;
+  z-index: 60;
+  min-width: 10rem;
+  padding-left: .25rem; /* hover bridge over the gap */
+  display: none;
+}
+.pk-dropdown-menu-sub:hover > .pk-dropdown-menu-sub-content,
+.pk-dropdown-menu-sub:focus-within > .pk-dropdown-menu-sub-content { display: block; }
+.pk-dropdown-menu-sub:hover > .pk-dropdown-menu-sub-trigger,
+.pk-dropdown-menu-sub:focus-within > .pk-dropdown-menu-sub-trigger { background: var(--pk-accent); }

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_checkbox_item.rb

@@ -0,0 +1,31 @@
+module PhlexKit
+  # Toggleable menu row, ported from shadcn/ui's DropdownMenuCheckboxItem: a
+  # <label> around a real (hidden) checkbox — clicking toggles it natively and
+  # the ✓ shows via CSS, without closing the menu (matching Radix). Pass
+  # `name:`/`value:` to submit the state with a form. See dropdown_menu.rb.
+  class DropdownMenuCheckboxItem < BaseComponent
+    def initialize(checked: false, name: nil, value: "1", **attrs)
+      @checked = checked
+      @name = name
+      @value = value
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      label(**mix({
+        class: "pk-dropdown-menu-item pk-dropdown-menu-checkbox-item",
+        role: "menuitemcheckbox"
+      }, @attrs)) do
+        input(type: :checkbox, class: "pk-dropdown-menu-item-input", name: @name, value: @value, checked: @checked)
+        span(class: "pk-dropdown-menu-item-indicator", aria: { hidden: "true" }) { check_icon }
+        yield if block
+      end
+    end
+
+    private
+
+    def check_icon
+      render Icon.new(:check, size: nil)
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_group.rb

@@ -0,0 +1,11 @@
+module PhlexKit
+  # Grouping wrapper for related items (with an optional leading
+  # DropdownMenuLabel). Ported from shadcn/ui's DropdownMenuGroup.
+  # See dropdown_menu.rb.
+  class DropdownMenuGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-dropdown-menu-group", role: "group" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_item.rb

@@ -2,9 +2,12 @@ module PhlexKit
   # A menu row in a PhlexKit::DropdownMenuContent. `as: :a` (default, pass `href:`) or
   # `:div` (e.g. to wrap a button_to). Closes the menu on click. See dropdown_menu.rb.
   class DropdownMenuItem < BaseComponent
-    def initialize(as: :a, href: "#", **attrs)
+    VARIANTS = { default: nil, destructive: "destructive" }.freeze
+
+    def initialize(as: :a, href: "#", variant: :default, **attrs)
       @as = as.to_sym
       @href = href
+      @variant = variant.to_sym
       @attrs = attrs
     end
 
@@ -12,7 +15,7 @@ module PhlexKit
       base = {
         role: "menuitem",
         tabindex: "-1",
-        class: "pk-dropdown-menu-item",
+        class: [ "pk-dropdown-menu-item", VARIANTS.fetch(@variant) ].compact.join(" "),
         data: { phlex_kit__dropdown_menu_target: "menuItem", action: "click->phlex-kit--dropdown-menu#close" }
       }
       base[:href] = @href unless @as == :div

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_radio_group.rb

@@ -0,0 +1,10 @@
+module PhlexKit
+  # Exclusive-choice group of DropdownMenuRadioItems (share the same `name:`).
+  # Ported from shadcn/ui's DropdownMenuRadioGroup. See dropdown_menu.rb.
+  class DropdownMenuRadioGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-dropdown-menu-group", role: "radiogroup" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/dropdown_menu/dropdown_menu_radio_item.rb

@@ -0,0 +1,31 @@
+module PhlexKit
+  # One choice in a DropdownMenuRadioGroup — a <label> around a real (hidden)
+  # radio; the ● shows via CSS and picking doesn't close the menu (matching
+  # Radix). See dropdown_menu.rb.
+  class DropdownMenuRadioItem < BaseComponent
+    def initialize(name:, value:, checked: false, **attrs)
+      @name = name
+      @value = value
+      @checked = checked
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      label(**mix({
+        class: "pk-dropdown-menu-item pk-dropdown-menu-radio-item",
+        role: "menuitemradio"
+      }, @attrs)) do
+        input(type: :radio, class: "pk-dropdown-menu-item-input", name: @name, value: @value, checked: @checked)
+        span(class: "pk-dropdown-menu-item-indicator", aria: { hidden: "true" }) do
+          # Deliberately NOT a PhlexKit::Icon: a filled selection dot is
+          # geometry, not icon-library vocabulary — it stays identical across
+          # icon_library settings (shadcn fills its Circle icon via CSS too).
+          svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "currentColor") do |s|
+            s.circle(cx: "12", cy: "12", r: "5")
+          end
+        end
+        yield if block
+      end
+    end
+  end
+end