@rovula/ui 0.1.21 → 0.1.22

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -8,7 +8,10 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuShortcut,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
@@ -38,34 +41,45 @@ export default meta;
 
 // ---------------------------------------------------------------------------
 // Figma: Normal dropdown / action menu
-// Shows all item states: Default, Hover (focus), Selected, Disabled, Selected+Disabled
+// Shows all item states: Default, Hover, Selected, Disabled, Selected+Disabled
 // ---------------------------------------------------------------------------
 export const AllStates = {
   name: "All States (Normal)",
   render: () => (
     <div className="flex gap-8 items-start flex-wrap">
-      {/* Default open — all states visible */}
+      {/* Static — all states visible */}
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">All States</p>
-        <DropdownMenu open>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          All States
+        </p>
+        <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <ActionButton variant="icon">
               <Icon type="heroicons" name="ellipsis-vertical" />
             </ActionButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="relative" style={{ position: "static", transform: "none" }}>
+          <DropdownMenuContent
+            className="relative"
+            style={{ position: "static", transform: "none" }}
+          >
             <DropdownMenuItem>Option Description</DropdownMenuItem>
-            <DropdownMenuItem className="!bg-[var(--dropdown-menu-hover-bg)]">Option Description (Hover)</DropdownMenuItem>
-            <DropdownMenuCheckboxItem checked>Option Description</DropdownMenuCheckboxItem>
+            <DropdownMenuItem className="!bg-[var(--dropdown-menu-hover-bg)]">
+              Option Description (Hover)
+            </DropdownMenuItem>
+            <DropdownMenuItem selected>Option Description</DropdownMenuItem>
             <DropdownMenuItem disabled>Option Description</DropdownMenuItem>
-            <DropdownMenuCheckboxItem checked disabled>Option Description</DropdownMenuCheckboxItem>
+            <DropdownMenuItem selected disabled>
+              Option Description
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
 
       {/* Interactive version */}
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Interactive</p>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Interactive
+        </p>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline">Open Menu</Button>
@@ -73,9 +87,11 @@ export const AllStates = {
           <DropdownMenuContent>
             <DropdownMenuItem>Option Description</DropdownMenuItem>
             <DropdownMenuItem>Option Description</DropdownMenuItem>
-            <DropdownMenuCheckboxItem checked>Option Description</DropdownMenuCheckboxItem>
+            <DropdownMenuItem selected>Option Description</DropdownMenuItem>
             <DropdownMenuItem disabled>Option Description</DropdownMenuItem>
-            <DropdownMenuCheckboxItem checked disabled>Option Description</DropdownMenuCheckboxItem>
+            <DropdownMenuItem selected disabled>
+              Option Description
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
@@ -92,60 +108,136 @@ export const WithIcon = {
   render: () => (
     <div className="flex gap-8 items-start flex-wrap">
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">All States — With Icon</p>
-        <DropdownMenu open>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          All States — With Icon
+        </p>
+        <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <ActionButton variant="icon">
               <Icon type="heroicons" name="ellipsis-vertical" />
             </ActionButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="relative" style={{ position: "static", transform: "none" }}>
-            <DropdownMenuItem>
-              <Icon type="heroicons" name="rocket-launch" className="size-4 shrink-0" />
+          <DropdownMenuContent
+            className="relative"
+            style={{ position: "static", transform: "none" }}
+          >
+            <DropdownMenuItem
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
               Option Description
             </DropdownMenuItem>
-            <DropdownMenuItem className="!bg-[var(--dropdown-menu-hover-bg)]">
-              <Icon type="heroicons" name="rocket-launch" className="size-4 shrink-0" />
+            <DropdownMenuItem
+              className="!bg-[var(--dropdown-menu-hover-bg)]"
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
               Option Description (Hover)
             </DropdownMenuItem>
-            <DropdownMenuCheckboxItem checked>
-              <Icon type="heroicons" name="rocket-launch" className="size-4 shrink-0" />
-              Option Description
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuItem disabled>
-              <Icon type="heroicons" name="rocket-launch" className="size-4 shrink-0" />
-              Option Description
+            <DropdownMenuItem
+              selected
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Option Description (Selected)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              disabled
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Option Description (Disabled)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              selected
+              disabled
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Option Description (Selected + Disabled)
             </DropdownMenuItem>
-            <DropdownMenuCheckboxItem checked disabled>
-              <Icon type="heroicons" name="rocket-launch" className="size-4 shrink-0" />
-              Option Description
-            </DropdownMenuCheckboxItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
 
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Interactive</p>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Interactive
+        </p>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline">Open Menu</Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
-            <DropdownMenuItem>
-              <Icon type="heroicons" name="rocket-launch" className="size-4 shrink-0" />
-              Option Description
+            <DropdownMenuItem
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Launch
             </DropdownMenuItem>
-            <DropdownMenuItem>
-              <Icon type="heroicons" name="pencil" className="size-4 shrink-0" />
-              Option Description
+            <DropdownMenuItem
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="pencil"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Edit
             </DropdownMenuItem>
-            <DropdownMenuItem>
-              <Icon type="heroicons" name="trash" className="size-4 shrink-0" />
-              Option Description
+            <DropdownMenuItem
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="document-duplicate"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Duplicate
             </DropdownMenuItem>
-            <DropdownMenuItem disabled>
-              <Icon type="heroicons" name="arrow-path" className="size-4 shrink-0" />
-              Option Description
+            <DropdownMenuItem
+              disabled
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="trash"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Delete
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -167,40 +259,68 @@ export const WithCheckbox = {
     return (
       <div className="flex gap-8 items-start flex-wrap">
         <div>
-          <p className="typography-small4 text-text-g-contrast-medium mb-2">All States — Checkbox</p>
-          <DropdownMenu open>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            All States — Checkbox
+          </p>
+          <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <ActionButton variant="icon">
                 <Icon type="heroicons" name="ellipsis-vertical" />
               </ActionButton>
             </DropdownMenuTrigger>
-            <DropdownMenuContent className="relative" style={{ position: "static", transform: "none" }}>
-              <DropdownMenuCheckboxItem>Option Description</DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem className="!bg-[var(--dropdown-menu-hover-bg)]">Option Description (Hover)</DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem checked>Option Description</DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem disabled>Option Description</DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem checked disabled>Option Description</DropdownMenuCheckboxItem>
+            <DropdownMenuContent
+              className="relative"
+              style={{ position: "static", transform: "none" }}
+            >
+              <DropdownMenuCheckboxItem>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem className="!bg-[var(--dropdown-menu-hover-bg)]">
+                Option Description (Hover)
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem disabled>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked disabled>
+                Option Description
+              </DropdownMenuCheckboxItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
 
         <div>
-          <p className="typography-small4 text-text-g-contrast-medium mb-2">Interactive</p>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Interactive
+          </p>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="outline">Open Menu</Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-              <DropdownMenuCheckboxItem checked={checked1} onCheckedChange={setChecked1}>
+              <DropdownMenuCheckboxItem
+                checked={checked1}
+                onCheckedChange={setChecked1}
+              >
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={checked2}
+                onCheckedChange={setChecked2}
+              >
                 Option Description
               </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem checked={checked2} onCheckedChange={setChecked2}>
+              <DropdownMenuCheckboxItem
+                checked={checked3}
+                onCheckedChange={setChecked3}
+              >
                 Option Description
               </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem checked={checked3} onCheckedChange={setChecked3}>
+              <DropdownMenuCheckboxItem disabled>
                 Option Description
               </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem disabled>Option Description</DropdownMenuCheckboxItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
@@ -217,14 +337,19 @@ export const WithSection = {
   render: () => (
     <div className="flex gap-8 items-start flex-wrap">
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">With Section Header</p>
-        <DropdownMenu open>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          With Section Header
+        </p>
+        <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <ActionButton variant="icon">
               <Icon type="heroicons" name="ellipsis-vertical" />
             </ActionButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="relative" style={{ position: "static", transform: "none" }}>
+          <DropdownMenuContent
+            className="relative"
+            style={{ position: "static", transform: "none" }}
+          >
             <DropdownMenuLabel>Section Name</DropdownMenuLabel>
             <DropdownMenuItem>Option Description</DropdownMenuItem>
             <DropdownMenuItem>Option Description</DropdownMenuItem>
@@ -241,7 +366,9 @@ export const WithSection = {
       </div>
 
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Interactive</p>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Interactive
+        </p>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline">Open Menu</Button>
@@ -285,14 +412,16 @@ export const WithSearch = {
       "Project Theta",
     ];
     const filtered = allOptions.filter((o) =>
-      o.toLowerCase().includes(query.toLowerCase())
+      o.toLowerCase().includes(query.toLowerCase()),
     );
 
     return (
       <div className="flex gap-8 items-start flex-wrap">
         <div>
-          <p className="typography-small4 text-text-g-contrast-medium mb-2">With Search Field</p>
-          <DropdownMenu open>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            With Search Field
+          </p>
+          <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <ActionButton variant="icon">
                 <Icon type="heroicons" name="ellipsis-vertical" />
@@ -304,7 +433,11 @@ export const WithSearch = {
               onInteractOutside={(e: Event) => e.preventDefault()}
             >
               <div className="flex items-center px-4 py-2 border-b border-[var(--dropdown-menu-seperator-bg)]">
-                <Icon type="heroicons" name="magnifying-glass" className="size-[14px] shrink-0 text-text-g-contrast-medium mr-1" />
+                <Icon
+                  type="heroicons"
+                  name="magnifying-glass"
+                  className="size-[14px] shrink-0 text-text-g-contrast-medium mr-1"
+                />
                 <Input
                   variant="flat"
                   size="sm"
@@ -327,14 +460,20 @@ export const WithSearch = {
         </div>
 
         <div>
-          <p className="typography-small4 text-text-g-contrast-medium mb-2">Interactive</p>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Interactive
+          </p>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="outline">Open Menu</Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-[230px]">
               <div className="flex items-center px-4 py-2 border-b border-[var(--dropdown-menu-seperator-bg)]">
-                <Icon type="heroicons" name="magnifying-glass" className="size-[14px] shrink-0 text-text-g-contrast-medium mr-1" />
+                <Icon
+                  type="heroicons"
+                  name="magnifying-glass"
+                  className="size-[14px] shrink-0 text-text-g-contrast-medium mr-1"
+                />
                 <Input
                   variant="flat"
                   size="sm"
@@ -363,8 +502,10 @@ export const CanScroll = {
   render: () => (
     <div className="flex gap-8 items-start flex-wrap">
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Scrollable List</p>
-        <DropdownMenu open>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Scrollable List
+        </p>
+        <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <ActionButton variant="icon">
               <Icon type="heroicons" name="ellipsis-vertical" />
@@ -375,21 +516,27 @@ export const CanScroll = {
             style={{ position: "static", transform: "none" }}
           >
             {Array.from({ length: 10 }, (_, i) => (
-              <DropdownMenuItem key={i}>Option Description {i + 1}</DropdownMenuItem>
+              <DropdownMenuItem key={i}>
+                Option Description {i + 1}
+              </DropdownMenuItem>
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
 
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Interactive</p>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Interactive
+        </p>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline">Open Menu</Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="max-h-[270px] overflow-y-auto">
             {Array.from({ length: 10 }, (_, i) => (
-              <DropdownMenuItem key={i}>Option Description {i + 1}</DropdownMenuItem>
+              <DropdownMenuItem key={i}>
+                Option Description {i + 1}
+              </DropdownMenuItem>
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
@@ -406,8 +553,10 @@ export const DoubleScroll = {
   render: () => (
     <div className="flex gap-8 items-start flex-wrap">
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Two Scrollable Sections</p>
-        <DropdownMenu open>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Two Scrollable Sections
+        </p>
+        <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <ActionButton variant="icon">
               <Icon type="heroicons" name="ellipsis-vertical" />
@@ -420,14 +569,18 @@ export const DoubleScroll = {
             <DropdownMenuLabel>Section A</DropdownMenuLabel>
             <div className="max-h-[270px] overflow-y-auto">
               {Array.from({ length: 5 }, (_, i) => (
-                <DropdownMenuItem key={i}>Option Description {i + 1}</DropdownMenuItem>
+                <DropdownMenuItem key={i}>
+                  Option Description {i + 1}
+                </DropdownMenuItem>
               ))}
             </div>
             <DropdownMenuSeparator />
             <DropdownMenuLabel>Section B</DropdownMenuLabel>
             <div className="max-h-[216px] overflow-y-auto">
               {Array.from({ length: 4 }, (_, i) => (
-                <DropdownMenuItem key={i}>Option Description {i + 1}</DropdownMenuItem>
+                <DropdownMenuItem key={i}>
+                  Option Description {i + 1}
+                </DropdownMenuItem>
               ))}
             </div>
           </DropdownMenuContent>
@@ -435,7 +588,9 @@ export const DoubleScroll = {
       </div>
 
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Interactive</p>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Interactive
+        </p>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline">Open Menu</Button>
@@ -444,14 +599,18 @@ export const DoubleScroll = {
             <DropdownMenuLabel>Section A</DropdownMenuLabel>
             <div className="max-h-[270px] overflow-y-auto">
               {Array.from({ length: 5 }, (_, i) => (
-                <DropdownMenuItem key={i}>Option Description {i + 1}</DropdownMenuItem>
+                <DropdownMenuItem key={i}>
+                  Option Description {i + 1}
+                </DropdownMenuItem>
               ))}
             </div>
             <DropdownMenuSeparator />
             <DropdownMenuLabel>Section B</DropdownMenuLabel>
             <div className="max-h-[216px] overflow-y-auto">
               {Array.from({ length: 4 }, (_, i) => (
-                <DropdownMenuItem key={i}>Option Description {i + 1}</DropdownMenuItem>
+                <DropdownMenuItem key={i}>
+                  Option Description {i + 1}
+                </DropdownMenuItem>
               ))}
             </div>
           </DropdownMenuContent>
@@ -467,36 +626,426 @@ export const DoubleScroll = {
 export const SubMenu = {
   name: "Sub Menu",
   render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open Menu</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>Profile</DropdownMenuItem>
-        <DropdownMenuItem>Billing</DropdownMenuItem>
-        <DropdownMenuItem>Team</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <Icon type="heroicons" name="user-group" className="size-4 shrink-0" />
-              Invite users
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem>Email</DropdownMenuItem>
-                <DropdownMenuItem>Message</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>More...</DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuCheckboxItem>Panel</DropdownMenuCheckboxItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <div className="flex gap-8 items-center flex-wrap">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Open Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Billing</DropdownMenuItem>
+          <DropdownMenuItem>Team</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <Icon
+                  type="heroicons"
+                  name="user-group"
+                  className="size-4 shrink-0"
+                />
+                Invite users
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem>Email</DropdownMenuItem>
+                  <DropdownMenuItem>Message</DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>More...</DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+            <DropdownMenuCheckboxItem>Panel</DropdownMenuCheckboxItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Figma: Radio items — single select via DropdownMenuRadioGroup
+// ---------------------------------------------------------------------------
+export const WithRadio = {
+  name: "With Radio",
+  render: () => {
+    const [theme, setTheme] = useState("light");
+    const [position, setPosition] = useState("top");
+
+    return (
+      <div className="flex gap-8 items-start flex-wrap">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            All States — Radio
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="ellipsis-vertical" />
+              </ActionButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="relative"
+              style={{ position: "static", transform: "none" }}
+            >
+              <DropdownMenuRadioGroup value="light">
+                <DropdownMenuRadioItem value="unselected">
+                  Option Description
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="unselected2"
+                  className="!bg-[var(--dropdown-menu-hover-bg)]"
+                >
+                  Option Description (Hover)
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="light">
+                  Option Description (Selected)
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="dis" disabled>
+                  Option Description (Disabled)
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="light" disabled>
+                  Option Description (Selected + Disabled)
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Interactive — Theme
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Theme: {theme}</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>Theme</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                <DropdownMenuRadioItem value="light">
+                  Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="system">
+                  System
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Interactive — Multiple Groups
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>Theme</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                <DropdownMenuRadioItem value="light">
+                  Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="system">
+                  System
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Position</DropdownMenuLabel>
+              <DropdownMenuRadioGroup
+                value={position}
+                onValueChange={setPosition}
+              >
+                <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="bottom">
+                  Bottom
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="right">
+                  Right
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Radio with Icon — single select with leading icon via icon prop
+// ---------------------------------------------------------------------------
+export const WithRadioAndIcon = {
+  name: "With Radio + Icon",
+  render: () => {
+    const [theme, setTheme] = useState("dark");
+
+    return (
+      <div className="flex gap-8 items-start flex-wrap">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            All States — Radio + Icon
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="ellipsis-vertical" />
+              </ActionButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="relative"
+              style={{ position: "static", transform: "none" }}
+            >
+              <DropdownMenuRadioGroup value="dark">
+                <DropdownMenuRadioItem
+                  value="light"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="sun"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="system"
+                  className="!bg-[var(--dropdown-menu-hover-bg)]"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="computer-desktop"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  System (Hover)
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="dark"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="moon"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Dark (Selected)
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="custom"
+                  disabled
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="paint-brush"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Custom (Disabled)
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="dark"
+                  disabled
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="moon"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Dark (Selected + Disabled)
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Interactive
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Theme: {theme}</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>Theme</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                <DropdownMenuRadioItem
+                  value="light"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="sun"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="dark"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="moon"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Dark
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="system"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="computer-desktop"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  System
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="custom"
+                  disabled
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="paint-brush"
+                      className="size-4"
+                    />
+                  }
+                >
+                  Custom
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// DropdownMenuShortcut — keyboard shortcut label on the right side of item
+// ---------------------------------------------------------------------------
+export const WithShortcut = {
+  name: "With Shortcut",
+  render: () => (
+    <div className="flex gap-8 items-start flex-wrap">
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          All States — Shortcut
+        </p>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <ActionButton variant="icon">
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </ActionButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="relative"
+            style={{ position: "static", transform: "none" }}
+          >
+            <DropdownMenuItem>
+              New Tab
+              <DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="!bg-[var(--dropdown-menu-hover-bg)]">
+              New Window (Hover)
+              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Icon
+                type="heroicons"
+                name="pencil"
+                className="size-4 shrink-0"
+              />
+              Edit
+              <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Icon
+                type="heroicons"
+                name="document-duplicate"
+                className="size-4 shrink-0"
+              />
+              Duplicate
+              <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem disabled>
+              <Icon type="heroicons" name="trash" className="size-4 shrink-0" />
+              Delete
+              <DropdownMenuShortcut>⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Interactive
+        </p>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open Menu</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-52">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              New Tab
+              <DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              New Window
+              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Icon
+                type="heroicons"
+                name="pencil"
+                className="size-4 shrink-0"
+              />
+              Edit
+              <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Icon
+                type="heroicons"
+                name="document-duplicate"
+                className="size-4 shrink-0"
+              />
+              Duplicate
+              <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem disabled>
+              <Icon type="heroicons" name="trash" className="size-4 shrink-0" />
+              Delete
+              <DropdownMenuShortcut>⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
   ),
 } satisfies StoryObj;
 
@@ -508,7 +1057,9 @@ export const TriggerVariants = {
   render: () => (
     <div className="flex gap-8 items-center flex-wrap">
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Text Trigger</p>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Text Trigger
+        </p>
         <DropdownMenu>
           <DropdownMenuTrigger>Open</DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -520,7 +1071,9 @@ export const TriggerVariants = {
       </div>
 
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Button Trigger</p>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Button Trigger
+        </p>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline">Open Menu</Button>
@@ -534,7 +1087,9 @@ export const TriggerVariants = {
       </div>
 
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Icon Button Trigger</p>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Icon Button Trigger
+        </p>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <ActionButton variant="icon">
@@ -550,7 +1105,9 @@ export const TriggerVariants = {
       </div>
 
       <div>
-        <p className="typography-small4 text-text-g-contrast-medium mb-2">Horizontal dots</p>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Horizontal dots
+        </p>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <ActionButton variant="icon">
@@ -559,11 +1116,19 @@ export const TriggerVariants = {
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem>
-              <Icon type="heroicons" name="pencil" className="size-4 shrink-0" />
+              <Icon
+                type="heroicons"
+                name="pencil"
+                className="size-4 shrink-0"
+              />
               Edit
             </DropdownMenuItem>
             <DropdownMenuItem>
-              <Icon type="heroicons" name="document-duplicate" className="size-4 shrink-0" />
+              <Icon
+                type="heroicons"
+                name="document-duplicate"
+                className="size-4 shrink-0"
+              />
               Duplicate
             </DropdownMenuItem>
             <DropdownMenuSeparator />
@@ -577,3 +1142,375 @@ export const TriggerVariants = {
     </div>
   ),
 } satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Complex showcase — real-world patterns combining all item types
+// ---------------------------------------------------------------------------
+export const ComplexShowcase = {
+  name: "Complex Showcase",
+  render: () => {
+    const [theme, setTheme] = useState("dark");
+    const [density, setDensity] = useState("comfortable");
+    const [sortBy, setSortBy] = useState("name");
+    const [sortDir, setSortDir] = useState("asc");
+    const [showHidden, setShowHidden] = useState(false);
+    const [showExtensions, setShowExtensions] = useState(true);
+    const [showPreview, setShowPreview] = useState(true);
+
+    return (
+      <div className="flex gap-8 items-start flex-wrap">
+        {/* Static: File manager — MenuItem + RadioGroup + CheckboxItem */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            File Manager Actions
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="ellipsis-vertical" />
+              </ActionButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="relative w-[220px]"
+              style={{ position: "static", transform: "none" }}
+            >
+              <DropdownMenuItem
+                icon={
+                  <Icon
+                    type="heroicons"
+                    name="pencil"
+                    className="size-4 shrink-0"
+                  />
+                }
+              >
+                Rename
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                icon={
+                  <Icon
+                    type="heroicons"
+                    name="document-duplicate"
+                    className="size-4 shrink-0"
+                  />
+                }
+              >
+                Duplicate
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Sort By</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value="name">
+                <DropdownMenuRadioItem value="name">Name</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="date">
+                  Date Modified
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="size">Size</DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Show</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem>Hidden Files</DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked>
+                File Extensions
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked>
+                Preview Panel
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                disabled
+                icon={
+                  <Icon
+                    type="heroicons"
+                    name="trash"
+                    className="size-4 shrink-0"
+                  />
+                }
+              >
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* Static: Editor settings — multiple RadioGroups per section */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Editor Settings (Multiple RadioGroups)
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="cog-6-tooth" />
+              </ActionButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="relative w-[220px]"
+              style={{ position: "static", transform: "none" }}
+            >
+              <DropdownMenuLabel>Theme</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value="dark">
+                <DropdownMenuRadioItem
+                  value="light"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="sun"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="dark"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="moon"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Dark
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="system"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="computer-desktop"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  System
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Density</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value="comfortable">
+                <DropdownMenuRadioItem value="compact">
+                  Compact
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="comfortable">
+                  Comfortable
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="spacious">
+                  Spacious
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Sort Direction</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value="asc">
+                <DropdownMenuRadioItem
+                  value="asc"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="bars-arrow-up"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Ascending
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="desc"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="bars-arrow-down"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Descending
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* Interactive: File Manager */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Interactive — File Manager
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Options</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-[220px]">
+              <DropdownMenuItem
+                icon={
+                  <Icon
+                    type="heroicons"
+                    name="pencil"
+                    className="size-4 shrink-0"
+                  />
+                }
+              >
+                Rename
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                icon={
+                  <Icon
+                    type="heroicons"
+                    name="document-duplicate"
+                    className="size-4 shrink-0"
+                  />
+                }
+              >
+                Duplicate
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Sort By</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value={sortBy} onValueChange={setSortBy}>
+                <DropdownMenuRadioItem value="name">Name</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="date">
+                  Date Modified
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="size">Size</DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Show</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem
+                checked={showHidden}
+                onCheckedChange={setShowHidden}
+                onSelect={(e) => e.preventDefault()}
+              >
+                Hidden Files
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={showExtensions}
+                onCheckedChange={setShowExtensions}
+                onSelect={(e) => e.preventDefault()}
+              >
+                File Extensions
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={showPreview}
+                onCheckedChange={setShowPreview}
+                onSelect={(e) => e.preventDefault()}
+              >
+                Preview Panel
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                disabled
+                icon={
+                  <Icon
+                    type="heroicons"
+                    name="trash"
+                    className="size-4 shrink-0"
+                  />
+                }
+              >
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* Interactive: Editor Settings */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Interactive — Editor Settings
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Settings</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-[220px]">
+              <DropdownMenuLabel>Theme</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                <DropdownMenuRadioItem
+                  value="light"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="sun"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="dark"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="moon"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Dark
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="system"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="computer-desktop"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  System
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Density</DropdownMenuLabel>
+              <DropdownMenuRadioGroup
+                value={density}
+                onValueChange={setDensity}
+              >
+                <DropdownMenuRadioItem value="compact">
+                  Compact
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="comfortable">
+                  Comfortable
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="spacious">
+                  Spacious
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Sort Direction</DropdownMenuLabel>
+              <DropdownMenuRadioGroup
+                value={sortDir}
+                onValueChange={setSortDir}
+              >
+                <DropdownMenuRadioItem
+                  value="asc"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="bars-arrow-up"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Ascending
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem
+                  value="desc"
+                  icon={
+                    <Icon
+                      type="heroicons"
+                      name="bars-arrow-down"
+                      className="size-4 shrink-0"
+                    />
+                  }
+                >
+                  Descending
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;