@rovula/ui 0.1.20 → 0.1.22

package/src/patterns/menu/Menu.stories.tsx

@@ -0,0 +1,1100 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Menu, MenuItemType } from "./Menu";
+import Button from "../../components/Button/Button";
+import ActionButton from "../../components/ActionButton/ActionButton";
+import Icon from "../../components/Icon/Icon";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { Switch } from "../../components/Switch/Switch";
+
+const meta = {
+  title: "Patterns/Menu",
+  component: Menu,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-10 flex gap-8 flex-wrap bg-workspace-surface min-h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+
+// ---------------------------------------------------------------------------
+// Basic — default items, separator, disabled, danger
+// ---------------------------------------------------------------------------
+export const Basic: StoryObj<typeof Menu> = {
+  name: "Basic (Default Items)",
+  render: () => (
+    <div className="flex gap-8 items-start flex-wrap">
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Icon button trigger
+        </p>
+        <Menu
+          trigger={
+            <ActionButton variant="icon">
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </ActionButton>
+          }
+          items={[
+            { type: "item", item: { value: "1", label: "Option 1" } },
+            { type: "item", item: { value: "2", label: "Option 2" } },
+            {
+              type: "item",
+              item: { value: "3", label: "Option 3 (Selected)" },
+            },
+            {
+              type: "item",
+              item: {
+                value: "4",
+                label: "Option 4 (Disabled)",
+                disabled: true,
+              },
+            },
+            { type: "separator" },
+            {
+              type: "item",
+              item: { value: "delete", label: "Delete", danger: true },
+            },
+          ]}
+          selectedValues={["3"]}
+          onSelect={(v) => console.log("selected:", v)}
+        />
+      </div>
+
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Button trigger + label section
+        </p>
+        <Menu
+          trigger={<Button variant="outline">My Account</Button>}
+          items={[
+            { type: "label", label: "My Account" },
+            { type: "item", item: { value: "profile", label: "Profile" } },
+            { type: "item", item: { value: "settings", label: "Settings" } },
+            { type: "separator" },
+            { type: "item", item: { value: "logout", label: "Logout" } },
+          ]}
+          onSelect={(v) => console.log("selected:", v)}
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// With Icons
+// ---------------------------------------------------------------------------
+export const WithIcons: StoryObj<typeof Menu> = {
+  name: "With Icons",
+  render: () => (
+    <div className="flex gap-8 items-start flex-wrap">
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Items with leading icon
+        </p>
+        <Menu
+          trigger={
+            <ActionButton variant="icon">
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </ActionButton>
+          }
+          align="end"
+          items={[
+            {
+              type: "item",
+              item: {
+                value: "profile",
+                label: "Profile",
+                icon: <Icon type="heroicons" name="user" className="size-4" />,
+              },
+            },
+            {
+              type: "item",
+              item: {
+                value: "settings",
+                label: "Settings",
+                icon: (
+                  <Icon
+                    type="heroicons"
+                    name="cog-6-tooth"
+                    className="size-4"
+                  />
+                ),
+              },
+            },
+            {
+              type: "item",
+              item: {
+                value: "billing",
+                label: "Billing",
+                icon: (
+                  <Icon
+                    type="heroicons"
+                    name="credit-card"
+                    className="size-4"
+                  />
+                ),
+              },
+            },
+            { type: "separator" },
+            {
+              type: "item",
+              item: {
+                value: "logout",
+                label: "Logout",
+                icon: (
+                  <Icon
+                    type="heroicons"
+                    name="arrow-right-on-rectangle"
+                    className="size-4"
+                  />
+                ),
+                danger: true,
+              },
+            },
+          ]}
+          onSelect={(v) => console.log("selected:", v)}
+        />
+      </div>
+
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          With icon + disabled
+        </p>
+        <Menu
+          trigger={
+            <Button variant="outline">
+              Actions <ChevronDownIcon className="size-4 ml-2" />
+            </Button>
+          }
+          items={[
+            {
+              type: "item",
+              item: {
+                value: "edit",
+                label: "Edit",
+                icon: (
+                  <Icon type="heroicons" name="pencil" className="size-4" />
+                ),
+              },
+            },
+            {
+              type: "item",
+              item: {
+                value: "duplicate",
+                label: "Duplicate",
+                icon: (
+                  <Icon
+                    type="heroicons"
+                    name="document-duplicate"
+                    className="size-4"
+                  />
+                ),
+                disabled: true,
+              },
+            },
+            {
+              type: "item",
+              item: {
+                value: "archive",
+                label: "Archive",
+                icon: (
+                  <Icon
+                    type="heroicons"
+                    name="archive-box"
+                    className="size-4"
+                  />
+                ),
+              },
+            },
+            { type: "separator" },
+            {
+              type: "item",
+              item: {
+                value: "delete",
+                label: "Delete",
+                icon: <Icon type="heroicons" name="trash" className="size-4" />,
+                danger: true,
+              },
+            },
+          ]}
+          onSelect={(v) => console.log("selected:", v)}
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// With Checkbox — multi-select toggle
+// ---------------------------------------------------------------------------
+export const WithCheckbox: StoryObj<typeof Menu> = {
+  name: "With Checkbox",
+  render: () => {
+    const [checked, setChecked] = useState({
+      notifications: true,
+      emails: false,
+      updates: true,
+    });
+
+    const items: MenuItemType[] = [
+      { type: "label", label: "Preferences" },
+      {
+        type: "item",
+        item: {
+          value: "notifications",
+          label: "Notifications",
+          type: "checkbox",
+          checked: checked.notifications,
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "emails",
+          label: "Email Alerts",
+          type: "checkbox",
+          checked: checked.emails,
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "updates",
+          label: "Product Updates",
+          type: "checkbox",
+          checked: checked.updates,
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "disabled-feature",
+          label: "Disabled Feature",
+          type: "checkbox",
+          checked: false,
+          disabled: true,
+        },
+      },
+    ];
+
+    return (
+      <div className="flex gap-8 items-start">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Click to toggle (menu stays open for checkboxes)
+          </p>
+          <Menu
+            trigger={
+              <Button variant="outline">
+                Preferences <ChevronDownIcon className="size-4 ml-2" />
+              </Button>
+            }
+            items={items}
+            onSelect={(value) => {
+              setChecked((prev) => ({
+                ...prev,
+                [value]: !prev[value as keyof typeof prev],
+              }));
+            }}
+          />
+        </div>
+        <div className="text-sm text-text-g-contrast-medium">
+          <p className="font-semibold mb-1">State:</p>
+          <pre className="text-xs">{JSON.stringify(checked, null, 2)}</pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// With Radio — single-select group
+// ---------------------------------------------------------------------------
+export const WithRadio: StoryObj<typeof Menu> = {
+  name: "With Radio",
+  render: () => {
+    const [theme, setTheme] = useState("light");
+    const [density, setDensity] = useState("comfortable");
+
+    const themeItems: MenuItemType[] = [
+      { type: "label", label: "Theme" },
+      { type: "item", item: { value: "light", label: "Light", type: "radio" } },
+      { type: "item", item: { value: "dark", label: "Dark", type: "radio" } },
+      {
+        type: "item",
+        item: { value: "system", label: "System", type: "radio" },
+      },
+    ];
+
+    const densityItems: MenuItemType[] = [
+      { type: "label", label: "Density" },
+      {
+        type: "item",
+        item: { value: "compact", label: "Compact", type: "radio" },
+      },
+      {
+        type: "item",
+        item: { value: "comfortable", label: "Comfortable", type: "radio" },
+      },
+      {
+        type: "item",
+        item: { value: "spacious", label: "Spacious", type: "radio" },
+      },
+      {
+        type: "item",
+        item: {
+          value: "disabled-opt",
+          label: "Disabled Option",
+          type: "radio",
+          disabled: true,
+        },
+      },
+    ];
+
+    return (
+      <div className="flex gap-8 items-start">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Theme selector
+          </p>
+          <Menu
+            trigger={
+              <Button variant="outline">
+                Theme: {theme} <ChevronDownIcon className="size-4 ml-2" />
+              </Button>
+            }
+            items={themeItems}
+            selectedValues={[theme]}
+            onSelect={(value) => setTheme(value)}
+          />
+        </div>
+
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Density selector + disabled
+          </p>
+          <Menu
+            trigger={
+              <Button variant="outline">
+                Density: {density} <ChevronDownIcon className="size-4 ml-2" />
+              </Button>
+            }
+            items={densityItems}
+            selectedValues={[density]}
+            onSelect={(value) => setDensity(value)}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Multiple Radio Groups — separated by separator
+// ---------------------------------------------------------------------------
+export const MultipleRadioGroups: StoryObj<typeof Menu> = {
+  name: "Multiple Radio Groups",
+  render: () => {
+    const [theme, setTheme] = useState("light");
+    const [language, setLanguage] = useState("en");
+
+    const items: MenuItemType[] = [
+      { type: "label", label: "Theme" },
+      { type: "item", item: { value: "light", label: "Light", type: "radio" } },
+      { type: "item", item: { value: "dark", label: "Dark", type: "radio" } },
+      { type: "separator" },
+      { type: "label", label: "Language" },
+      { type: "item", item: { value: "en", label: "English", type: "radio" } },
+      { type: "item", item: { value: "th", label: "ภาษาไทย", type: "radio" } },
+      { type: "item", item: { value: "ja", label: "日本語", type: "radio" } },
+    ];
+
+    const handleSelect = (value: string) => {
+      if (["light", "dark"].includes(value)) setTheme(value);
+      else if (["en", "th", "ja"].includes(value)) setLanguage(value);
+    };
+
+    return (
+      <div className="flex gap-8 items-start">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Two independent radio groups
+          </p>
+          <Menu
+            trigger={<Button variant="outline">Settings</Button>}
+            items={items}
+            selectedValues={[theme, language]}
+            onSelect={handleSelect}
+          />
+        </div>
+        <div className="text-sm text-text-g-contrast-medium">
+          <p className="font-semibold mb-1">State:</p>
+          <pre className="text-xs">
+            {JSON.stringify({ theme, language }, null, 2)}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Custom Items — type="custom" render prop
+// ---------------------------------------------------------------------------
+export const CustomItems: StoryObj<typeof Menu> = {
+  name: "Custom Items",
+  render: () => {
+    const items: MenuItemType[] = [
+      { type: "label", label: "Recent Projects" },
+      {
+        type: "custom",
+        render: () => (
+          <div className="px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-pointer transition-colors">
+            <div className="typography-subtitle4 text-text-g-contrast-high">
+              Project Alpha
+            </div>
+            <div className="typography-small4 text-text-g-contrast-medium">
+              Updated 2 hours ago
+            </div>
+          </div>
+        ),
+      },
+      {
+        type: "custom",
+        render: () => (
+          <div className="px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-pointer transition-colors">
+            <div className="typography-subtitle4 text-text-g-contrast-high">
+              Project Beta
+            </div>
+            <div className="typography-small4 text-text-g-contrast-medium">
+              Updated yesterday
+            </div>
+          </div>
+        ),
+      },
+      { type: "separator" },
+      {
+        type: "item",
+        item: {
+          value: "view-all",
+          label: "View All Projects",
+          icon: <Icon type="heroicons" name="folder-open" className="size-4" />,
+        },
+      },
+    ];
+
+    return (
+      <div>
+        <p className="typography-small4 text-text-g-contrast-medium mb-2">
+          Mix of custom render + regular items
+        </p>
+        <Menu
+          trigger={
+            <Button variant="outline">
+              Projects <ChevronDownIcon className="size-4 ml-2" />
+            </Button>
+          }
+          items={items}
+          onSelect={(v) => console.log("selected:", v)}
+        />
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// With Submenu — type="submenu" uses DropdownMenuSub natively
+// ---------------------------------------------------------------------------
+export const WithSubmenu: StoryObj<typeof Menu> = {
+  name: "With Submenu",
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null);
+    const [permission, setPermission] = useState("perm-view");
+
+    const items: MenuItemType[] = [
+      {
+        type: "item",
+        item: {
+          value: "new-file",
+          label: "New File",
+          icon: (
+            <Icon type="heroicons" name="document-plus" className="size-4" />
+          ),
+        },
+      },
+      {
+        type: "submenu",
+        label: "New From Template",
+        icon: (
+          <Icon type="heroicons" name="document-duplicate" className="size-4" />
+        ),
+        items: [
+          {
+            type: "item",
+            item: { value: "tpl-blank", label: "Blank Document" },
+          },
+          { type: "item", item: { value: "tpl-report", label: "Report" } },
+          {
+            type: "item",
+            item: { value: "tpl-presentation", label: "Presentation" },
+          },
+          { type: "separator" },
+          {
+            type: "item",
+            item: {
+              value: "tpl-browse",
+              label: "Browse Templates…",
+              icon: (
+                <Icon
+                  type="heroicons"
+                  name="arrow-top-right-on-square"
+                  className="size-4"
+                />
+              ),
+            },
+          },
+        ],
+      },
+      { type: "separator" },
+      {
+        type: "submenu",
+        label: "Share",
+        icon: <Icon type="heroicons" name="share" className="size-4" />,
+        items: [
+          {
+            type: "item",
+            item: {
+              value: "share-link",
+              label: "Copy Link",
+              icon: <Icon type="heroicons" name="link" className="size-4" />,
+            },
+          },
+          {
+            type: "item",
+            item: {
+              value: "share-email",
+              label: "Send via Email",
+              icon: (
+                <Icon type="heroicons" name="envelope" className="size-4" />
+              ),
+            },
+          },
+          { type: "separator" },
+          {
+            // Nested submenu inside submenu
+            type: "submenu",
+            label: "Permissions",
+            items: [
+              {
+                type: "item",
+                item: {
+                  value: "perm-view",
+                  label: "Viewer",
+                  type: "radio",
+                },
+              },
+              {
+                type: "item",
+                item: {
+                  value: "perm-comment",
+                  label: "Commenter",
+                  type: "radio",
+                },
+              },
+              {
+                type: "item",
+                item: {
+                  value: "perm-edit",
+                  label: "Editor",
+                  type: "radio",
+                },
+              },
+            ],
+          },
+        ],
+      },
+      { type: "separator" },
+      {
+        type: "item",
+        item: {
+          value: "delete",
+          label: "Move to Trash",
+          icon: <Icon type="heroicons" name="trash" className="size-4" />,
+          danger: true,
+        },
+      },
+    ];
+
+    const handleSelect = (value: string) => {
+      if (value.startsWith("perm-")) setPermission(value);
+      else setSelected(value);
+    };
+
+    return (
+      <div className="flex gap-8 items-start">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Submenu (hover to reveal) — 3 levels deep
+          </p>
+          <Menu
+            trigger={<Button variant="outline">File</Button>}
+            items={items}
+            selectedValues={[permission]}
+            onSelect={handleSelect}
+          />
+        </div>
+        <div className="text-sm text-text-g-contrast-medium">
+          <p className="font-semibold mb-1">State:</p>
+          <pre className="text-xs">
+            {JSON.stringify({ selected, permission }, null, 2)}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Complex — mixed types, multi-section
+// ---------------------------------------------------------------------------
+export const ComplexMenu: StoryObj<typeof Menu> = {
+  name: "Complex (Mixed Types)",
+  render: () => {
+    const [preferences, setPreferences] = useState({
+      notifications: true,
+      emails: false,
+    });
+    const [theme, setTheme] = useState("light");
+
+    const items: MenuItemType[] = [
+      { type: "label", label: "My Account" },
+      {
+        type: "item",
+        item: {
+          value: "profile",
+          label: "Profile",
+          icon: <Icon type="heroicons" name="user" className="size-4" />,
+          onClick: () => console.log("Go to profile"),
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "billing",
+          label: "Billing",
+          icon: <Icon type="heroicons" name="credit-card" className="size-4" />,
+          onClick: () => console.log("Go to billing"),
+        },
+      },
+      { type: "separator" },
+      { type: "label", label: "Notifications" },
+      {
+        type: "item",
+        item: {
+          value: "notifications",
+          label: "Push Notifications",
+          type: "checkbox",
+          checked: preferences.notifications,
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "emails",
+          label: "Email Notifications",
+          type: "checkbox",
+          checked: preferences.emails,
+        },
+      },
+      { type: "separator" },
+      { type: "label", label: "Theme" },
+      {
+        type: "item",
+        item: { value: "light", label: "Light Mode", type: "radio" },
+      },
+      {
+        type: "item",
+        item: { value: "dark", label: "Dark Mode", type: "radio" },
+      },
+      {
+        type: "item",
+        item: { value: "system", label: "System", type: "radio" },
+      },
+      { type: "separator" },
+      {
+        type: "item",
+        item: {
+          value: "logout",
+          label: "Logout",
+          icon: (
+            <Icon
+              type="heroicons"
+              name="arrow-right-on-rectangle"
+              className="size-4"
+            />
+          ),
+          danger: true,
+          onClick: () => console.log("Logout"),
+        },
+      },
+    ];
+
+    const handleSelect = (value: string, item: { type?: string }) => {
+      if (item.type === "checkbox") {
+        const key = value as keyof typeof preferences;
+        if (key in preferences)
+          setPreferences((prev) => ({ ...prev, [key]: !prev[key] }));
+      } else if (item.type === "radio") {
+        setTheme(value);
+      }
+    };
+
+    return (
+      <div className="flex gap-8 items-start">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Account menu — all item types combined
+          </p>
+          <Menu
+            trigger={
+              <Button variant="outline">
+                Account <ChevronDownIcon className="size-4 ml-2" />
+              </Button>
+            }
+            items={items}
+            selectedValues={[theme]}
+            onSelect={handleSelect}
+          />
+        </div>
+        <div className="text-sm text-text-g-contrast-medium">
+          <p className="font-semibold mb-1">State:</p>
+          <pre className="text-xs">
+            {JSON.stringify({ preferences, theme }, null, 2)}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Multi-Select via Checkbox
+// ---------------------------------------------------------------------------
+export const MultiSelectPattern: StoryObj<typeof Menu> = {
+  name: "Multi-Select Pattern",
+  render: () => {
+    const [selectedValues, setSelectedValues] = useState<string[]>(["react"]);
+
+    const options = [
+      { value: "react", label: "React" },
+      { value: "vue", label: "Vue" },
+      { value: "angular", label: "Angular" },
+      { value: "svelte", label: "Svelte" },
+      { value: "solid", label: "Solid" },
+    ];
+
+    const items: MenuItemType[] = options.map((opt) => ({
+      type: "item",
+      item: {
+        value: opt.value,
+        label: opt.label,
+        type: "checkbox" as const,
+        checked: selectedValues.includes(opt.value),
+      },
+    }));
+
+    const displayText =
+      selectedValues.length > 0
+        ? selectedValues
+            .map((v) => options.find((o) => o.value === v)?.label)
+            .join(", ")
+        : "Select frameworks…";
+
+    return (
+      <div className="flex gap-8 items-start">
+        <Menu
+          trigger={
+            <Button variant="outline" className="w-64 justify-between">
+              <span className="truncate">{displayText}</span>
+              <ChevronDownIcon className="size-4 ml-2 shrink-0" />
+            </Button>
+          }
+          items={items}
+          onSelect={(value) => {
+            setSelectedValues((prev) =>
+              prev.includes(value)
+                ? prev.filter((v) => v !== value)
+                : [...prev, value],
+            );
+          }}
+        />
+        <div className="text-sm text-text-g-contrast-medium">
+          <p className="font-semibold mb-1">Selected:</p>
+          <pre className="text-xs">
+            {JSON.stringify(selectedValues, null, 2)}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Figma: "Change Status" — header slot + section labels + custom badge items
+// ---------------------------------------------------------------------------
+export const ChangeStatus: StoryObj<typeof Menu> = {
+  name: "Figma: Change Status",
+  render: () => {
+    const [status, setStatus] = useState("todo");
+    const [open, setOpen] = useState(false);
+
+    const statusItems: MenuItemType[] = [
+      { type: "label", label: "To do" },
+      {
+        type: "item",
+        item: { value: "todo", label: "To do", type: "radio" },
+      },
+      { type: "separator" },
+      { type: "label", label: "In progress" },
+      {
+        type: "item",
+        item: {
+          value: "in-progress",
+          label: "In Progress",
+          type: "radio",
+          icon: (
+            <span className="inline-flex items-center px-3 py-0.5 rounded-lg text-xs font-medium bg-yellow-400/10 text-yellow-400">
+              In Progress
+            </span>
+          ),
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "ready-review",
+          label: "Ready to review",
+          type: "radio",
+          icon: (
+            <span className="inline-flex items-center px-3 py-0.5 rounded-lg text-xs font-medium bg-blue-400/10 text-blue-400">
+              Ready to review
+            </span>
+          ),
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "in-review",
+          label: "In review",
+          type: "radio",
+          icon: (
+            <span className="inline-flex items-center px-3 py-0.5 rounded-lg text-xs font-medium bg-red-400/10 text-red-400">
+              In review
+            </span>
+          ),
+        },
+      },
+      { type: "separator" },
+      { type: "label", label: "Completed" },
+      {
+        type: "item",
+        item: {
+          value: "completed",
+          label: "Completed",
+          type: "radio",
+          icon: (
+            <span className="inline-flex items-center px-3 py-0.5 rounded-lg text-xs font-medium bg-green-400/10 text-green-400">
+              Completed
+            </span>
+          ),
+        },
+      },
+    ];
+
+    return (
+      <div className="flex gap-8 items-start">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            With header (title + settings + close)
+          </p>
+          <Menu
+            trigger={<Button variant="outline">Change Status</Button>}
+            open={open}
+            onOpenChange={setOpen}
+            header={
+              <div className="flex items-center justify-between px-6 py-3">
+                <span className="typography-subtitle4 text-text-g-contrast-high">
+                  Status
+                </span>
+                <div className="flex items-center gap-1">
+                  <ActionButton variant="icon" size="sm">
+                    <Icon
+                      type="heroicons"
+                      name="cog6-tooth"
+                      className="size-4"
+                    />
+                  </ActionButton>
+                  {/* X ปิด menu ได้ผ่าน onOpenChange */}
+                  <ActionButton
+                    variant="icon"
+                    size="sm"
+                    onClick={() => setOpen(false)}
+                  >
+                    <Icon type="heroicons" name="xmark" className="size-4" />
+                  </ActionButton>
+                </div>
+              </div>
+            }
+            items={statusItems}
+            selectedValues={[status]}
+            onSelect={(v) => setStatus(v)}
+          />
+        </div>
+
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            No header (simple list)
+          </p>
+          <Menu
+            trigger={<Button variant="outline">Status</Button>}
+            items={statusItems}
+            selectedValues={[status]}
+            onSelect={(v) => setStatus(v)}
+          />
+        </div>
+
+        <div className="text-sm text-text-g-contrast-medium">
+          <p className="font-semibold mb-1">Selected:</p>
+          <pre className="text-xs">{status}</pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Figma: "Manage Column" — header with actions + toggle rows + drag handle
+// ---------------------------------------------------------------------------
+export const ManageColumn: StoryObj<typeof Menu> = {
+  name: "Figma: Manage Column",
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [columns, setColumns] = useState([
+      { id: "name", label: "Name", visible: true },
+      { id: "status", label: "Status", visible: true },
+      { id: "assignee", label: "Assignee", visible: false },
+      { id: "due-date", label: "Due date", visible: true },
+      { id: "priority", label: "Priority", visible: false },
+    ]);
+
+    const toggleColumn = (id: string) =>
+      setColumns((prev) =>
+        prev.map((col) =>
+          col.id === id ? { ...col, visible: !col.visible } : col,
+        ),
+      );
+
+    const showAll = () =>
+      setColumns((prev) => prev.map((col) => ({ ...col, visible: true })));
+
+    const hideAll = () =>
+      setColumns((prev) => prev.map((col) => ({ ...col, visible: false })));
+
+    const items: MenuItemType[] = columns.map((col) => ({
+      type: "custom",
+      render: () => (
+        <div
+          key={col.id}
+          className="flex items-center gap-3 px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-default transition-colors"
+        >
+          <Icon
+            type="heroicons"
+            name="bars-2"
+            className="size-4 text-text-g-contrast-medium shrink-0 cursor-grab"
+          />
+          <Switch
+            checked={col.visible}
+            onCheckedChange={() => toggleColumn(col.id)}
+          />
+          <span className="typography-subtitle4 text-text-g-contrast-high flex-1">
+            {col.label}
+          </span>
+        </div>
+      ),
+    }));
+
+    return (
+      <div className="flex gap-8 items-start">
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Manage Column panel
+          </p>
+          <Menu
+            trigger={
+              <Button variant="outline">
+                <Icon
+                  type="heroicons"
+                  name="view-columns"
+                  className="size-4 mr-2"
+                />
+                Manage Columns
+              </Button>
+            }
+            open={open}
+            onOpenChange={setOpen}
+            header={
+              <div className="flex items-center justify-between px-4 py-3">
+                <span className="typography-subtitle4 text-text-g-contrast-high">
+                  Manage column
+                </span>
+                <div className="flex items-center gap-2">
+                  <button
+                    className="typography-small4 text-text-g-contrast-medium hover:text-text-g-contrast-high transition-colors"
+                    onClick={hideAll}
+                  >
+                    Hide all
+                  </button>
+                  <button
+                    className="typography-small4 text-[var(--dropdown-menu-checkbox-checked-bg)] hover:opacity-80 transition-opacity"
+                    onClick={showAll}
+                  >
+                    Show all
+                  </button>
+                  {/* Done ปิด menu ได้ผ่าน onOpenChange */}
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => setOpen(false)}
+                  >
+                    Done
+                  </Button>
+                </div>
+              </div>
+            }
+            items={items}
+            contentClassName="w-80"
+          />
+        </div>
+
+        <div className="text-sm text-text-g-contrast-medium">
+          <p className="font-semibold mb-1">Columns:</p>
+          <pre className="text-xs">
+            {JSON.stringify(
+              columns.map((c) => ({ [c.label]: c.visible })),
+              null,
+              2,
+            )}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};