@rovula/ui 0.1.21 → 0.1.22

package/dist/patterns/menu/Menu.stories.js

@@ -0,0 +1,611 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Menu } 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) => (_jsx("div", { className: "p-10 flex gap-8 flex-wrap bg-workspace-surface min-h-screen", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+// ---------------------------------------------------------------------------
+// Basic — default items, separator, disabled, danger
+// ---------------------------------------------------------------------------
+export const Basic = {
+    name: "Basic (Default Items)",
+    render: () => (_jsxs("div", { className: "flex gap-8 items-start flex-wrap", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Icon button trigger" }), _jsx(Menu, { trigger: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }), 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) })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Button trigger + label section" }), _jsx(Menu, { trigger: _jsx(Button, { variant: "outline", children: "My Account" }), 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) })] })] })),
+};
+// ---------------------------------------------------------------------------
+// With Icons
+// ---------------------------------------------------------------------------
+export const WithIcons = {
+    name: "With Icons",
+    render: () => (_jsxs("div", { className: "flex gap-8 items-start flex-wrap", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Items with leading icon" }), _jsx(Menu, { trigger: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }), align: "end", items: [
+                            {
+                                type: "item",
+                                item: {
+                                    value: "profile",
+                                    label: "Profile",
+                                    icon: _jsx(Icon, { type: "heroicons", name: "user", className: "size-4" }),
+                                },
+                            },
+                            {
+                                type: "item",
+                                item: {
+                                    value: "settings",
+                                    label: "Settings",
+                                    icon: (_jsx(Icon, { type: "heroicons", name: "cog-6-tooth", className: "size-4" })),
+                                },
+                            },
+                            {
+                                type: "item",
+                                item: {
+                                    value: "billing",
+                                    label: "Billing",
+                                    icon: (_jsx(Icon, { type: "heroicons", name: "credit-card", className: "size-4" })),
+                                },
+                            },
+                            { type: "separator" },
+                            {
+                                type: "item",
+                                item: {
+                                    value: "logout",
+                                    label: "Logout",
+                                    icon: (_jsx(Icon, { type: "heroicons", name: "arrow-right-on-rectangle", className: "size-4" })),
+                                    danger: true,
+                                },
+                            },
+                        ], onSelect: (v) => console.log("selected:", v) })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "With icon + disabled" }), _jsx(Menu, { trigger: _jsxs(Button, { variant: "outline", children: ["Actions ", _jsx(ChevronDownIcon, { className: "size-4 ml-2" })] }), items: [
+                            {
+                                type: "item",
+                                item: {
+                                    value: "edit",
+                                    label: "Edit",
+                                    icon: (_jsx(Icon, { type: "heroicons", name: "pencil", className: "size-4" })),
+                                },
+                            },
+                            {
+                                type: "item",
+                                item: {
+                                    value: "duplicate",
+                                    label: "Duplicate",
+                                    icon: (_jsx(Icon, { type: "heroicons", name: "document-duplicate", className: "size-4" })),
+                                    disabled: true,
+                                },
+                            },
+                            {
+                                type: "item",
+                                item: {
+                                    value: "archive",
+                                    label: "Archive",
+                                    icon: (_jsx(Icon, { type: "heroicons", name: "archive-box", className: "size-4" })),
+                                },
+                            },
+                            { type: "separator" },
+                            {
+                                type: "item",
+                                item: {
+                                    value: "delete",
+                                    label: "Delete",
+                                    icon: _jsx(Icon, { type: "heroicons", name: "trash", className: "size-4" }),
+                                    danger: true,
+                                },
+                            },
+                        ], onSelect: (v) => console.log("selected:", v) })] })] })),
+};
+// ---------------------------------------------------------------------------
+// With Checkbox — multi-select toggle
+// ---------------------------------------------------------------------------
+export const WithCheckbox = {
+    name: "With Checkbox",
+    render: () => {
+        const [checked, setChecked] = useState({
+            notifications: true,
+            emails: false,
+            updates: true,
+        });
+        const items = [
+            { 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 (_jsxs("div", { className: "flex gap-8 items-start", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Click to toggle (menu stays open for checkboxes)" }), _jsx(Menu, { trigger: _jsxs(Button, { variant: "outline", children: ["Preferences ", _jsx(ChevronDownIcon, { className: "size-4 ml-2" })] }), items: items, onSelect: (value) => {
+                                setChecked((prev) => (Object.assign(Object.assign({}, prev), { [value]: !prev[value] })));
+                            } })] }), _jsxs("div", { className: "text-sm text-text-g-contrast-medium", children: [_jsx("p", { className: "font-semibold mb-1", children: "State:" }), _jsx("pre", { className: "text-xs", children: JSON.stringify(checked, null, 2) })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// With Radio — single-select group
+// ---------------------------------------------------------------------------
+export const WithRadio = {
+    name: "With Radio",
+    render: () => {
+        const [theme, setTheme] = useState("light");
+        const [density, setDensity] = useState("comfortable");
+        const themeItems = [
+            { 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 = [
+            { 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 (_jsxs("div", { className: "flex gap-8 items-start", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Theme selector" }), _jsx(Menu, { trigger: _jsxs(Button, { variant: "outline", children: ["Theme: ", theme, " ", _jsx(ChevronDownIcon, { className: "size-4 ml-2" })] }), items: themeItems, selectedValues: [theme], onSelect: (value) => setTheme(value) })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Density selector + disabled" }), _jsx(Menu, { trigger: _jsxs(Button, { variant: "outline", children: ["Density: ", density, " ", _jsx(ChevronDownIcon, { className: "size-4 ml-2" })] }), items: densityItems, selectedValues: [density], onSelect: (value) => setDensity(value) })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// Multiple Radio Groups — separated by separator
+// ---------------------------------------------------------------------------
+export const MultipleRadioGroups = {
+    name: "Multiple Radio Groups",
+    render: () => {
+        const [theme, setTheme] = useState("light");
+        const [language, setLanguage] = useState("en");
+        const items = [
+            { 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) => {
+            if (["light", "dark"].includes(value))
+                setTheme(value);
+            else if (["en", "th", "ja"].includes(value))
+                setLanguage(value);
+        };
+        return (_jsxs("div", { className: "flex gap-8 items-start", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Two independent radio groups" }), _jsx(Menu, { trigger: _jsx(Button, { variant: "outline", children: "Settings" }), items: items, selectedValues: [theme, language], onSelect: handleSelect })] }), _jsxs("div", { className: "text-sm text-text-g-contrast-medium", children: [_jsx("p", { className: "font-semibold mb-1", children: "State:" }), _jsx("pre", { className: "text-xs", children: JSON.stringify({ theme, language }, null, 2) })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// Custom Items — type="custom" render prop
+// ---------------------------------------------------------------------------
+export const CustomItems = {
+    name: "Custom Items",
+    render: () => {
+        const items = [
+            { type: "label", label: "Recent Projects" },
+            {
+                type: "custom",
+                render: () => (_jsxs("div", { className: "px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-pointer transition-colors", children: [_jsx("div", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Project Alpha" }), _jsx("div", { className: "typography-small4 text-text-g-contrast-medium", children: "Updated 2 hours ago" })] })),
+            },
+            {
+                type: "custom",
+                render: () => (_jsxs("div", { className: "px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-pointer transition-colors", children: [_jsx("div", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Project Beta" }), _jsx("div", { className: "typography-small4 text-text-g-contrast-medium", children: "Updated yesterday" })] })),
+            },
+            { type: "separator" },
+            {
+                type: "item",
+                item: {
+                    value: "view-all",
+                    label: "View All Projects",
+                    icon: _jsx(Icon, { type: "heroicons", name: "folder-open", className: "size-4" }),
+                },
+            },
+        ];
+        return (_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Mix of custom render + regular items" }), _jsx(Menu, { trigger: _jsxs(Button, { variant: "outline", children: ["Projects ", _jsx(ChevronDownIcon, { className: "size-4 ml-2" })] }), items: items, onSelect: (v) => console.log("selected:", v) })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// With Submenu — type="submenu" uses DropdownMenuSub natively
+// ---------------------------------------------------------------------------
+export const WithSubmenu = {
+    name: "With Submenu",
+    render: () => {
+        const [selected, setSelected] = useState(null);
+        const [permission, setPermission] = useState("perm-view");
+        const items = [
+            {
+                type: "item",
+                item: {
+                    value: "new-file",
+                    label: "New File",
+                    icon: (_jsx(Icon, { type: "heroicons", name: "document-plus", className: "size-4" })),
+                },
+            },
+            {
+                type: "submenu",
+                label: "New From Template",
+                icon: (_jsx(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: (_jsx(Icon, { type: "heroicons", name: "arrow-top-right-on-square", className: "size-4" })),
+                        },
+                    },
+                ],
+            },
+            { type: "separator" },
+            {
+                type: "submenu",
+                label: "Share",
+                icon: _jsx(Icon, { type: "heroicons", name: "share", className: "size-4" }),
+                items: [
+                    {
+                        type: "item",
+                        item: {
+                            value: "share-link",
+                            label: "Copy Link",
+                            icon: _jsx(Icon, { type: "heroicons", name: "link", className: "size-4" }),
+                        },
+                    },
+                    {
+                        type: "item",
+                        item: {
+                            value: "share-email",
+                            label: "Send via Email",
+                            icon: (_jsx(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: _jsx(Icon, { type: "heroicons", name: "trash", className: "size-4" }),
+                    danger: true,
+                },
+            },
+        ];
+        const handleSelect = (value) => {
+            if (value.startsWith("perm-"))
+                setPermission(value);
+            else
+                setSelected(value);
+        };
+        return (_jsxs("div", { className: "flex gap-8 items-start", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Submenu (hover to reveal) \u2014 3 levels deep" }), _jsx(Menu, { trigger: _jsx(Button, { variant: "outline", children: "File" }), items: items, selectedValues: [permission], onSelect: handleSelect })] }), _jsxs("div", { className: "text-sm text-text-g-contrast-medium", children: [_jsx("p", { className: "font-semibold mb-1", children: "State:" }), _jsx("pre", { className: "text-xs", children: JSON.stringify({ selected, permission }, null, 2) })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// Complex — mixed types, multi-section
+// ---------------------------------------------------------------------------
+export const ComplexMenu = {
+    name: "Complex (Mixed Types)",
+    render: () => {
+        const [preferences, setPreferences] = useState({
+            notifications: true,
+            emails: false,
+        });
+        const [theme, setTheme] = useState("light");
+        const items = [
+            { type: "label", label: "My Account" },
+            {
+                type: "item",
+                item: {
+                    value: "profile",
+                    label: "Profile",
+                    icon: _jsx(Icon, { type: "heroicons", name: "user", className: "size-4" }),
+                    onClick: () => console.log("Go to profile"),
+                },
+            },
+            {
+                type: "item",
+                item: {
+                    value: "billing",
+                    label: "Billing",
+                    icon: _jsx(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: (_jsx(Icon, { type: "heroicons", name: "arrow-right-on-rectangle", className: "size-4" })),
+                    danger: true,
+                    onClick: () => console.log("Logout"),
+                },
+            },
+        ];
+        const handleSelect = (value, item) => {
+            if (item.type === "checkbox") {
+                const key = value;
+                if (key in preferences)
+                    setPreferences((prev) => (Object.assign(Object.assign({}, prev), { [key]: !prev[key] })));
+            }
+            else if (item.type === "radio") {
+                setTheme(value);
+            }
+        };
+        return (_jsxs("div", { className: "flex gap-8 items-start", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Account menu \u2014 all item types combined" }), _jsx(Menu, { trigger: _jsxs(Button, { variant: "outline", children: ["Account ", _jsx(ChevronDownIcon, { className: "size-4 ml-2" })] }), items: items, selectedValues: [theme], onSelect: handleSelect })] }), _jsxs("div", { className: "text-sm text-text-g-contrast-medium", children: [_jsx("p", { className: "font-semibold mb-1", children: "State:" }), _jsx("pre", { className: "text-xs", children: JSON.stringify({ preferences, theme }, null, 2) })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// Multi-Select via Checkbox
+// ---------------------------------------------------------------------------
+export const MultiSelectPattern = {
+    name: "Multi-Select Pattern",
+    render: () => {
+        const [selectedValues, setSelectedValues] = useState(["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 = options.map((opt) => ({
+            type: "item",
+            item: {
+                value: opt.value,
+                label: opt.label,
+                type: "checkbox",
+                checked: selectedValues.includes(opt.value),
+            },
+        }));
+        const displayText = selectedValues.length > 0
+            ? selectedValues
+                .map((v) => { var _a; return (_a = options.find((o) => o.value === v)) === null || _a === void 0 ? void 0 : _a.label; })
+                .join(", ")
+            : "Select frameworks…";
+        return (_jsxs("div", { className: "flex gap-8 items-start", children: [_jsx(Menu, { trigger: _jsxs(Button, { variant: "outline", className: "w-64 justify-between", children: [_jsx("span", { className: "truncate", children: displayText }), _jsx(ChevronDownIcon, { className: "size-4 ml-2 shrink-0" })] }), items: items, onSelect: (value) => {
+                        setSelectedValues((prev) => prev.includes(value)
+                            ? prev.filter((v) => v !== value)
+                            : [...prev, value]);
+                    } }), _jsxs("div", { className: "text-sm text-text-g-contrast-medium", children: [_jsx("p", { className: "font-semibold mb-1", children: "Selected:" }), _jsx("pre", { className: "text-xs", children: JSON.stringify(selectedValues, null, 2) })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// Figma: "Change Status" — header slot + section labels + custom badge items
+// ---------------------------------------------------------------------------
+export const ChangeStatus = {
+    name: "Figma: Change Status",
+    render: () => {
+        const [status, setStatus] = useState("todo");
+        const [open, setOpen] = useState(false);
+        const statusItems = [
+            { 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: (_jsx("span", { className: "inline-flex items-center px-3 py-0.5 rounded-lg text-xs font-medium bg-yellow-400/10 text-yellow-400", children: "In Progress" })),
+                },
+            },
+            {
+                type: "item",
+                item: {
+                    value: "ready-review",
+                    label: "Ready to review",
+                    type: "radio",
+                    icon: (_jsx("span", { className: "inline-flex items-center px-3 py-0.5 rounded-lg text-xs font-medium bg-blue-400/10 text-blue-400", children: "Ready to review" })),
+                },
+            },
+            {
+                type: "item",
+                item: {
+                    value: "in-review",
+                    label: "In review",
+                    type: "radio",
+                    icon: (_jsx("span", { className: "inline-flex items-center px-3 py-0.5 rounded-lg text-xs font-medium bg-red-400/10 text-red-400", children: "In review" })),
+                },
+            },
+            { type: "separator" },
+            { type: "label", label: "Completed" },
+            {
+                type: "item",
+                item: {
+                    value: "completed",
+                    label: "Completed",
+                    type: "radio",
+                    icon: (_jsx("span", { className: "inline-flex items-center px-3 py-0.5 rounded-lg text-xs font-medium bg-green-400/10 text-green-400", children: "Completed" })),
+                },
+            },
+        ];
+        return (_jsxs("div", { className: "flex gap-8 items-start", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "With header (title + settings + close)" }), _jsx(Menu, { trigger: _jsx(Button, { variant: "outline", children: "Change Status" }), open: open, onOpenChange: setOpen, header: _jsxs("div", { className: "flex items-center justify-between px-6 py-3", children: [_jsx("span", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Status" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(Icon, { type: "heroicons", name: "cog6-tooth", className: "size-4" }) }), _jsx(ActionButton, { variant: "icon", size: "sm", onClick: () => setOpen(false), children: _jsx(Icon, { type: "heroicons", name: "xmark", className: "size-4" }) })] })] }), items: statusItems, selectedValues: [status], onSelect: (v) => setStatus(v) })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "No header (simple list)" }), _jsx(Menu, { trigger: _jsx(Button, { variant: "outline", children: "Status" }), items: statusItems, selectedValues: [status], onSelect: (v) => setStatus(v) })] }), _jsxs("div", { className: "text-sm text-text-g-contrast-medium", children: [_jsx("p", { className: "font-semibold mb-1", children: "Selected:" }), _jsx("pre", { className: "text-xs", children: status })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// Figma: "Manage Column" — header with actions + toggle rows + drag handle
+// ---------------------------------------------------------------------------
+export const ManageColumn = {
+    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) => setColumns((prev) => prev.map((col) => col.id === id ? Object.assign(Object.assign({}, col), { visible: !col.visible }) : col));
+        const showAll = () => setColumns((prev) => prev.map((col) => (Object.assign(Object.assign({}, col), { visible: true }))));
+        const hideAll = () => setColumns((prev) => prev.map((col) => (Object.assign(Object.assign({}, col), { visible: false }))));
+        const items = columns.map((col) => ({
+            type: "custom",
+            render: () => (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-default transition-colors", children: [_jsx(Icon, { type: "heroicons", name: "bars-2", className: "size-4 text-text-g-contrast-medium shrink-0 cursor-grab" }), _jsx(Switch, { checked: col.visible, onCheckedChange: () => toggleColumn(col.id) }), _jsx("span", { className: "typography-subtitle4 text-text-g-contrast-high flex-1", children: col.label })] }, col.id)),
+        }));
+        return (_jsxs("div", { className: "flex gap-8 items-start", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Manage Column panel" }), _jsx(Menu, { trigger: _jsxs(Button, { variant: "outline", children: [_jsx(Icon, { type: "heroicons", name: "view-columns", className: "size-4 mr-2" }), "Manage Columns"] }), open: open, onOpenChange: setOpen, header: _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Manage column" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { className: "typography-small4 text-text-g-contrast-medium hover:text-text-g-contrast-high transition-colors", onClick: hideAll, children: "Hide all" }), _jsx("button", { className: "typography-small4 text-[var(--dropdown-menu-checkbox-checked-bg)] hover:opacity-80 transition-opacity", onClick: showAll, children: "Show all" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setOpen(false), children: "Done" })] })] }), items: items, contentClassName: "w-80" })] }), _jsxs("div", { className: "text-sm text-text-g-contrast-medium", children: [_jsx("p", { className: "font-semibold mb-1", children: "Columns:" }), _jsx("pre", { className: "text-xs", children: JSON.stringify(columns.map((c) => ({ [c.label]: c.visible })), null, 2) })] })] }));
+    },
+};