@rovula/ui 0.1.20 → 0.1.22

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

@@ -8,27 +8,29 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuShortcut,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "./DropdownMenu";
 import Button from "../Button/Button";
-import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
-import Icon from "../Icon/Icon";
 import ActionButton from "../ActionButton/ActionButton";
+import Icon from "../Icon/Icon";
+import { Input } from "../Input/Input";
 
 const meta = {
   title: "Components/DropdownMenu",
   component: DropdownMenu,
-  // tags: ["autodocs"],
   parameters: {
     layout: "fullscreen",
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-10 flex gap-8 flex-wrap bg-workspace-surface min-h-screen">
         <Story />
       </div>
     ),
@@ -37,193 +39,453 @@ const meta = {
 
 export default meta;
 
-export const Default = {
-  args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-  },
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
-    return (
-      <div className="flex flex-row gap-4 w-full">
-        <div className="flex flex-1 justify-center items-center space-x-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem disabled>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>
-                <Icon type="heroicons" name="check" className="size-4" />
-                Option Description
-              </DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+// ---------------------------------------------------------------------------
+// Figma: Normal dropdown / action menu
+// 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">
+      {/* Static — all states visible */}
+      <div>
+        <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" }}
+          >
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem className="!bg-[var(--dropdown-menu-hover-bg)]">
+              Option Description (Hover)
+            </DropdownMenuItem>
+            <DropdownMenuItem selected>Option Description</DropdownMenuItem>
+            <DropdownMenuItem disabled>Option Description</DropdownMenuItem>
+            <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>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open Menu</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem selected>Option Description</DropdownMenuItem>
+            <DropdownMenuItem disabled>Option Description</DropdownMenuItem>
+            <DropdownMenuItem selected disabled>
+              Option Description
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  ),
 } satisfies StoryObj;
 
+// ---------------------------------------------------------------------------
+// Figma: Have icon
+// Items with leading icon
+// ---------------------------------------------------------------------------
 export const WithIcon = {
-  args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-  },
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
-    return (
-      <div className="flex flex-row gap-4 w-full">
-        <div className="flex flex-1 justify-center items-center space-x-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline">Open</Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem>
+  name: "With Icon",
+  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>
+          <DropdownMenuTrigger asChild>
+            <ActionButton variant="icon">
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </ActionButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="relative"
+            style={{ position: "static", transform: "none" }}
+          >
+            <DropdownMenuItem
+              icon={
                 <Icon
                   type="heroicons"
                   name="rocket-launch"
-                  className="size-4"
+                  className="size-4 shrink-0"
                 />
-                <span>Option Description</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem>
+              }
+            >
+              Option Description
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="!bg-[var(--dropdown-menu-hover-bg)]"
+              icon={
                 <Icon
                   type="heroicons"
                   name="rocket-launch"
-                  className="size-4"
+                  className="size-4 shrink-0"
                 />
-                <span>Option Description</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem disabled>
+              }
+            >
+              Option Description (Hover)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              selected
+              icon={
                 <Icon
                   type="heroicons"
                   name="rocket-launch"
-                  className="size-4"
+                  className="size-4 shrink-0"
                 />
-                <span>Option Description</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+              }
+            >
+              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>
+          </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>
+            <DropdownMenuItem
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Launch
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="pencil"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="document-duplicate"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Duplicate
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              disabled
+              icon={
+                <Icon
+                  type="heroicons"
+                  name="trash"
+                  className="size-4 shrink-0"
+                />
+              }
+            >
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  ),
 } satisfies StoryObj;
 
-export const WithLabel = {
-  args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-  },
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
+// ---------------------------------------------------------------------------
+// Figma: Checkbox items (Have icon=No, Checkbox=Yes)
+// ---------------------------------------------------------------------------
+export const WithCheckbox = {
+  name: "With Checkbox",
+  render: () => {
+    const [checked1, setChecked1] = useState(false);
+    const [checked2, setChecked2] = useState(true);
+    const [checked3, setChecked3] = useState(false);
+
     return (
-      <div className="flex flex-row gap-4 w-full">
-        <div className="flex flex-1 justify-center items-center space-x-2">
+      <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>
             <DropdownMenuTrigger asChild>
-              <Button variant="outline">Open</Button>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="ellipsis-vertical" />
+              </ActionButton>
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuLabel>Sort by</DropdownMenuLabel>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <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>
-    );
-  },
-} satisfies StoryObj;
 
-export const Checkboxes = {
-  args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-  },
-  render: (args) => {
-    type Checked = DropdownMenuCheckboxItemProps["checked"];
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
-    return (
-      <div className="flex flex-row gap-4 w-full">
-        <div className="flex flex-1 justify-center items-center space-x-2">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Interactive
+          </p>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="outline">Open</Button>
+              <Button variant="outline">Open Menu</Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-              <DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={checked1}
+                onCheckedChange={setChecked1}
+              >
                 Option Description
               </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem checked>
+              <DropdownMenuCheckboxItem
+                checked={checked2}
+                onCheckedChange={setChecked2}
+              >
                 Option Description
               </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem disabled>
+              <DropdownMenuCheckboxItem
+                checked={checked3}
+                onCheckedChange={setChecked3}
+              >
                 Option Description
               </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem checked disabled>
+              <DropdownMenuCheckboxItem disabled>
                 Option Description
               </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Figma: Have section (DropdownMenuLabel as section header)
+// ---------------------------------------------------------------------------
+export const WithSection = {
+  name: "Have Section",
+  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>
+          <DropdownMenuTrigger asChild>
+            <ActionButton variant="icon">
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </ActionButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="relative"
+            style={{ position: "static", transform: "none" }}
+          >
+            <DropdownMenuLabel>Section Name</DropdownMenuLabel>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Section Name</DropdownMenuLabel>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</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>
+            <DropdownMenuLabel>Section Name</DropdownMenuLabel>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Section Name</DropdownMenuLabel>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Figma: Have search
+// Dropdown with search input at the top
+// ---------------------------------------------------------------------------
+export const WithSearch = {
+  name: "Have Search",
+  render: () => {
+    const [query, setQuery] = useState("");
+    const allOptions = [
+      "Option Description",
+      "Project Alpha",
+      "Project Beta",
+      "Project Gamma",
+      "Project Delta",
+      "Project Epsilon",
+      "Project Zeta",
+      "Project Eta",
+      "Project Theta",
+    ];
+    const filtered = allOptions.filter((o) =>
+      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>
+            <DropdownMenuTrigger asChild>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="ellipsis-vertical" />
+              </ActionButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="relative w-[230px]"
+              style={{ position: "static", transform: "none" }}
+              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="rocket-launch"
-                  className="size-4"
+                  name="magnifying-glass"
+                  className="size-[14px] shrink-0 text-text-g-contrast-medium mr-1"
                 />
-                <span>Option Description</span>
-              </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem checked>
-                <Icon
-                  type="heroicons"
-                  name="rocket-launch"
-                  className="size-4"
+                <Input
+                  variant="flat"
+                  size="sm"
+                  className="flex-1 !p-0 !ring-0 typography-small1 placeholder:text-text-g-contrast-medium"
+                  placeholder="Search"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
                 />
-                <span>Option Description</span>
-              </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem disabled>
+              </div>
+              {filtered.map((label) => (
+                <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
+              ))}
+              {filtered.length === 0 && (
+                <div className="px-4 py-3 typography-subtitle4 text-text-g-contrast-medium">
+                  No results found
+                </div>
+              )}
+            </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-[230px]">
+              <div className="flex items-center px-4 py-2 border-b border-[var(--dropdown-menu-seperator-bg)]">
                 <Icon
                   type="heroicons"
-                  name="rocket-launch"
-                  className="size-4"
+                  name="magnifying-glass"
+                  className="size-[14px] shrink-0 text-text-g-contrast-medium mr-1"
                 />
-                <span>Option Description</span>
-              </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem checked disabled>
-                <Icon
-                  type="heroicons"
-                  name="rocket-launch"
-                  className="size-4"
+                <Input
+                  variant="flat"
+                  size="sm"
+                  className="flex-1 !p-0 !ring-0 typography-small1 placeholder:text-text-g-contrast-medium"
+                  placeholder="Search"
                 />
-                <span>Option Description</span>
-              </DropdownMenuCheckboxItem>
+              </div>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
@@ -232,84 +494,282 @@ export const Checkboxes = {
   },
 } satisfies StoryObj;
 
+// ---------------------------------------------------------------------------
+// Figma: Can scroll — long list, overflow-y scrollable
+// ---------------------------------------------------------------------------
+export const CanScroll = {
+  name: "Can Scroll",
+  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>
+          <DropdownMenuTrigger asChild>
+            <ActionButton variant="icon">
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </ActionButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="relative max-h-[270px] overflow-y-auto"
+            style={{ position: "static", transform: "none" }}
+          >
+            {Array.from({ length: 10 }, (_, i) => (
+              <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>
+        <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>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Figma: Double scroll — two separate scrollable sections with section headers
+// ---------------------------------------------------------------------------
+export const DoubleScroll = {
+  name: "Double Scroll",
+  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>
+          <DropdownMenuTrigger asChild>
+            <ActionButton variant="icon">
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </ActionButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="relative"
+            style={{ position: "static", transform: "none" }}
+          >
+            <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>
+              ))}
+            </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>
+              ))}
+            </div>
+          </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>
+            <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>
+              ))}
+            </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>
+              ))}
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Figma: Sub menu (existing, preserved)
+// ---------------------------------------------------------------------------
 export const SubMenu = {
-  args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-  },
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
+  name: "Sub Menu",
+  render: () => (
+    <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 flex-row gap-4 w-full">
-        <div className="flex flex-1 justify-center items-center space-x-2">
+      <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>Open</DropdownMenuTrigger>
+            <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>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Profile</DropdownMenuItem>
-              <DropdownMenuItem>Billing</DropdownMenuItem>
-              <DropdownMenuItem>Team</DropdownMenuItem>
-              <DropdownMenuItem>Subscription</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                    <span>Invite users</span>
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                    <DropdownMenuSubContent>
-                      <DropdownMenuItem>
-                        <span>Email</span>
-                      </DropdownMenuItem>
-                      <DropdownMenuItem>
-                        <span>Message</span>
-                      </DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem>
-                        <span>More...</span>
-                      </DropdownMenuItem>
-                    </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-                </DropdownMenuSub>
-                <DropdownMenuCheckboxItem>Panel</DropdownMenuCheckboxItem>
-              </DropdownMenuGroup>
+              <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>
-    );
-  },
-} satisfies StoryObj;
 
-export const OnIcon = {
-  args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-  },
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
-    return (
-      <div className="flex flex-row gap-4 w-full">
-        <div className="flex flex-1 justify-center items-center space-x-2">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Interactive — Multiple Groups
+          </p>
           <DropdownMenu>
-            <DropdownMenuTrigger>
-              <Icon type="heroicons" name="ellipsis-vertical" />
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open Menu</Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <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>
@@ -318,32 +778,160 @@ export const OnIcon = {
   },
 } satisfies StoryObj;
 
-export const AsChild = {
-  args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-  },
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
+// ---------------------------------------------------------------------------
+// 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 flex-row gap-4 w-full">
-        <div className="flex flex-1 justify-center items-center space-x-2">
+      <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>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <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>
@@ -352,21 +940,230 @@ export const AsChild = {
   },
 } satisfies StoryObj;
 
-export const Position = {
-  args: {
-    side: "bottom",
-    align: "center",
-    sideOffset: 5,
-    alignOffset: 0,
-  },
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
+// ---------------------------------------------------------------------------
+// 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;
+
+// ---------------------------------------------------------------------------
+// Trigger variants (on icon button, etc.)
+// ---------------------------------------------------------------------------
+export const TriggerVariants = {
+  name: "Trigger Variants",
+  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>
+        <DropdownMenu>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Button Trigger
+        </p>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open Menu</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Icon Button Trigger
+        </p>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <ActionButton variant="icon">
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </ActionButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+            <DropdownMenuItem>Option Description</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Horizontal dots
+        </p>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <ActionButton variant="icon">
+              <Icon type="heroicons" name="ellipsis-horizontal" />
+            </ActionButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              <Icon
+                type="heroicons"
+                name="pencil"
+                className="size-4 shrink-0"
+              />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Icon
+                type="heroicons"
+                name="document-duplicate"
+                className="size-4 shrink-0"
+              />
+              Duplicate
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem disabled>
+              <Icon type="heroicons" name="trash" className="size-4 shrink-0" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </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 flex-row gap-4 w-full">
-        <div className="flex flex-1 justify-center items-center space-x-2">
+      <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">
@@ -374,17 +1171,342 @@ export const Position = {
               </ActionButton>
             </DropdownMenuTrigger>
             <DropdownMenuContent
-              {...args}
-              side="bottom" // controls the side (top, bottom, left, right)
-              align="start" // controls the alignment (start, center, end)
-              sideOffset={5} // offset from the side
-              alignOffset={0} // offset from the alignment
+              className="relative w-[220px]"
+              style={{ position: "static", transform: "none" }}
             >
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
-              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <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>