@rovula/ui 0.1.20 → 0.1.22

package/dist/components/DropdownMenu/DropdownMenu.stories.js

@@ -1,116 +1,148 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./DropdownMenu";
+import { useState } from "react";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./DropdownMenu";
 import Button from "../Button/Button";
-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) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-10 flex gap-8 flex-wrap bg-workspace-surface min-h-screen", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-export const Default = {
-    args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-    },
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: "Open" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { disabled: true, children: "Option Description" }), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "check", className: "size-4" }), "Option Description"] }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] }) }) }));
-    },
+// ---------------------------------------------------------------------------
+// Figma: Normal dropdown / action menu
+// Shows all item states: Default, Hover, Selected, Disabled, Selected+Disabled
+// ---------------------------------------------------------------------------
+export const AllStates = {
+    name: "All States (Normal)",
+    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: "All States" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { className: "relative", style: { position: "static", transform: "none" }, children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { className: "!bg-[var(--dropdown-menu-hover-bg)]", children: "Option Description (Hover)" }), _jsx(DropdownMenuItem, { selected: true, children: "Option Description" }), _jsx(DropdownMenuItem, { disabled: true, children: "Option Description" }), _jsx(DropdownMenuItem, { selected: true, disabled: true, children: "Option Description" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { selected: true, children: "Option Description" }), _jsx(DropdownMenuItem, { disabled: true, children: "Option Description" }), _jsx(DropdownMenuItem, { selected: true, disabled: true, children: "Option Description" })] })] })] })] })),
 };
+// ---------------------------------------------------------------------------
+// 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 = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open" }) }), _jsxs(DropdownMenuContent, { children: [_jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuItem, { disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] })] })] }) }) }));
-    },
+    name: "With Icon",
+    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: "All States \u2014 With Icon" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { className: "relative", style: { position: "static", transform: "none" }, children: [_jsx(DropdownMenuItem, { icon: _jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), children: "Option Description" }), _jsx(DropdownMenuItem, { className: "!bg-[var(--dropdown-menu-hover-bg)]", icon: _jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), children: "Option Description (Hover)" }), _jsx(DropdownMenuItem, { selected: true, icon: _jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), children: "Option Description (Selected)" }), _jsx(DropdownMenuItem, { disabled: true, icon: _jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), children: "Option Description (Disabled)" }), _jsx(DropdownMenuItem, { selected: true, disabled: true, icon: _jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), children: "Option Description (Selected + Disabled)" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { icon: _jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), children: "Launch" }), _jsx(DropdownMenuItem, { icon: _jsx(Icon, { type: "heroicons", name: "pencil", className: "size-4 shrink-0" }), children: "Edit" }), _jsx(DropdownMenuItem, { icon: _jsx(Icon, { type: "heroicons", name: "document-duplicate", className: "size-4 shrink-0" }), children: "Duplicate" }), _jsx(DropdownMenuItem, { disabled: true, icon: _jsx(Icon, { type: "heroicons", name: "trash", className: "size-4 shrink-0" }), children: "Delete" })] })] })] })] })),
 };
-export const WithLabel = {
-    args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-    },
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Sort by" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] }) }) }));
+// ---------------------------------------------------------------------------
+// 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 (_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: "All States \u2014 Checkbox" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { className: "relative", style: { position: "static", transform: "none" }, children: [_jsx(DropdownMenuCheckboxItem, { children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { className: "!bg-[var(--dropdown-menu-hover-bg)]", children: "Option Description (Hover)" }), _jsx(DropdownMenuCheckboxItem, { checked: true, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { disabled: true, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { checked: true, disabled: true, children: "Option Description" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuCheckboxItem, { checked: checked1, onCheckedChange: setChecked1, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { checked: checked2, onCheckedChange: setChecked2, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { checked: checked3, onCheckedChange: setChecked3, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { disabled: true, children: "Option Description" })] })] })] })] }));
     },
 };
-export const Checkboxes = {
-    args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-    },
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuCheckboxItem, { children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { checked: true, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { disabled: true, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { checked: true, disabled: true, children: "Option Description" }), _jsxs(DropdownMenuCheckboxItem, { children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuCheckboxItem, { checked: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuCheckboxItem, { disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuCheckboxItem, { checked: true, disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] })] })] }) }) }));
+// ---------------------------------------------------------------------------
+// Figma: Have section (DropdownMenuLabel as section header)
+// ---------------------------------------------------------------------------
+export const WithSection = {
+    name: "Have Section",
+    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: "With Section Header" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { className: "relative", style: { position: "static", transform: "none" }, children: [_jsx(DropdownMenuLabel, { children: "Section Name" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Section Name" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Section Name" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Section Name" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] })] })] })),
+};
+// ---------------------------------------------------------------------------
+// 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 (_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: "With Search Field" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { className: "relative w-[230px]", style: { position: "static", transform: "none" }, onInteractOutside: (e) => e.preventDefault(), children: [_jsxs("div", { className: "flex items-center px-4 py-2 border-b border-[var(--dropdown-menu-seperator-bg)]", children: [_jsx(Icon, { type: "heroicons", name: "magnifying-glass", className: "size-[14px] shrink-0 text-text-g-contrast-medium mr-1" }), _jsx(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) })] }), filtered.map((label) => (_jsx(DropdownMenuItem, { children: label }, label))), filtered.length === 0 && (_jsx("div", { className: "px-4 py-3 typography-subtitle4 text-text-g-contrast-medium", children: "No results found" }))] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { className: "w-[230px]", children: [_jsxs("div", { className: "flex items-center px-4 py-2 border-b border-[var(--dropdown-menu-seperator-bg)]", children: [_jsx(Icon, { type: "heroicons", name: "magnifying-glass", className: "size-[14px] shrink-0 text-text-g-contrast-medium mr-1" }), _jsx(Input, { variant: "flat", size: "sm", className: "flex-1 !p-0 !ring-0 typography-small1 placeholder:text-text-g-contrast-medium", placeholder: "Search" })] }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] })] })] }));
     },
 };
+// ---------------------------------------------------------------------------
+// Figma: Can scroll — long list, overflow-y scrollable
+// ---------------------------------------------------------------------------
+export const CanScroll = {
+    name: "Can Scroll",
+    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: "Scrollable List" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsx(DropdownMenuContent, { className: "relative max-h-[270px] overflow-y-auto", style: { position: "static", transform: "none" }, children: Array.from({ length: 10 }, (_, i) => (_jsxs(DropdownMenuItem, { children: ["Option Description ", i + 1] }, i))) })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsx(DropdownMenuContent, { className: "max-h-[270px] overflow-y-auto", children: Array.from({ length: 10 }, (_, i) => (_jsxs(DropdownMenuItem, { children: ["Option Description ", i + 1] }, i))) })] })] })] })),
+};
+// ---------------------------------------------------------------------------
+// Figma: Double scroll — two separate scrollable sections with section headers
+// ---------------------------------------------------------------------------
+export const DoubleScroll = {
+    name: "Double Scroll",
+    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: "Two Scrollable Sections" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { className: "relative", style: { position: "static", transform: "none" }, children: [_jsx(DropdownMenuLabel, { children: "Section A" }), _jsx("div", { className: "max-h-[270px] overflow-y-auto", children: Array.from({ length: 5 }, (_, i) => (_jsxs(DropdownMenuItem, { children: ["Option Description ", i + 1] }, i))) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Section B" }), _jsx("div", { className: "max-h-[216px] overflow-y-auto", children: Array.from({ length: 4 }, (_, i) => (_jsxs(DropdownMenuItem, { children: ["Option Description ", i + 1] }, i))) })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Section A" }), _jsx("div", { className: "max-h-[270px] overflow-y-auto", children: Array.from({ length: 5 }, (_, i) => (_jsxs(DropdownMenuItem, { children: ["Option Description ", i + 1] }, i))) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Section B" }), _jsx("div", { className: "max-h-[216px] overflow-y-auto", children: Array.from({ length: 4 }, (_, i) => (_jsxs(DropdownMenuItem, { children: ["Option Description ", i + 1] }, i))) })] })] })] })] })),
+};
+// ---------------------------------------------------------------------------
+// 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 = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: "Open" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "My Account" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Profile" }), _jsx(DropdownMenuItem, { children: "Billing" }), _jsx(DropdownMenuItem, { children: "Team" }), _jsx(DropdownMenuItem, { children: "Subscription" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsx("span", { children: "Invite users" }) }), _jsx(DropdownMenuPortal, { children: _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuItem, { children: _jsx("span", { children: "Email" }) }), _jsx(DropdownMenuItem, { children: _jsx("span", { children: "Message" }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: _jsx("span", { children: "More..." }) })] }) })] }), _jsx(DropdownMenuCheckboxItem, { children: "Panel" })] })] })] }) }) }));
-    },
+    name: "Sub Menu",
+    render: () => (_jsx("div", { className: "flex gap-8 items-center flex-wrap", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "My Account" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Profile" }), _jsx(DropdownMenuItem, { children: "Billing" }), _jsx(DropdownMenuItem, { children: "Team" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(Icon, { type: "heroicons", name: "user-group", className: "size-4 shrink-0" }), "Invite users"] }), _jsx(DropdownMenuPortal, { children: _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuItem, { children: "Email" }), _jsx(DropdownMenuItem, { children: "Message" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "More..." })] }) })] }), _jsx(DropdownMenuCheckboxItem, { children: "Panel" })] })] })] }) })),
 };
-export const OnIcon = {
-    args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-    },
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] }) }) }));
+// ---------------------------------------------------------------------------
+// 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 (_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: "All States \u2014 Radio" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsx(DropdownMenuContent, { className: "relative", style: { position: "static", transform: "none" }, children: _jsxs(DropdownMenuRadioGroup, { value: "light", children: [_jsx(DropdownMenuRadioItem, { value: "unselected", children: "Option Description" }), _jsx(DropdownMenuRadioItem, { value: "unselected2", className: "!bg-[var(--dropdown-menu-hover-bg)]", children: "Option Description (Hover)" }), _jsx(DropdownMenuRadioItem, { value: "light", children: "Option Description (Selected)" }), _jsx(DropdownMenuRadioItem, { value: "dis", disabled: true, children: "Option Description (Disabled)" }), _jsx(DropdownMenuRadioItem, { value: "light", disabled: true, children: "Option Description (Selected + Disabled)" })] }) })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive \u2014 Theme" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", children: ["Theme: ", theme] }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Theme" }), _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: setTheme, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Light" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Dark" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "System" })] })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive \u2014 Multiple Groups" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Theme" }), _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: setTheme, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Light" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Dark" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "System" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Position" }), _jsxs(DropdownMenuRadioGroup, { value: position, onValueChange: setPosition, children: [_jsx(DropdownMenuRadioItem, { value: "top", children: "Top" }), _jsx(DropdownMenuRadioItem, { value: "bottom", children: "Bottom" }), _jsx(DropdownMenuRadioItem, { value: "right", children: "Right" })] })] })] })] })] }));
     },
 };
-export const AsChild = {
-    args: {
-    // DropdownMenu: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-    },
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] }) }) }));
+// ---------------------------------------------------------------------------
+// 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 (_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: "All States \u2014 Radio + Icon" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsx(DropdownMenuContent, { className: "relative", style: { position: "static", transform: "none" }, children: _jsxs(DropdownMenuRadioGroup, { value: "dark", children: [_jsx(DropdownMenuRadioItem, { value: "light", icon: _jsx(Icon, { type: "heroicons", name: "sun", className: "size-4 shrink-0" }), children: "Light" }), _jsx(DropdownMenuRadioItem, { value: "system", className: "!bg-[var(--dropdown-menu-hover-bg)]", icon: _jsx(Icon, { type: "heroicons", name: "computer-desktop", className: "size-4 shrink-0" }), children: "System (Hover)" }), _jsx(DropdownMenuRadioItem, { value: "dark", icon: _jsx(Icon, { type: "heroicons", name: "moon", className: "size-4 shrink-0" }), children: "Dark (Selected)" }), _jsx(DropdownMenuRadioItem, { value: "custom", disabled: true, icon: _jsx(Icon, { type: "heroicons", name: "paint-brush", className: "size-4 shrink-0" }), children: "Custom (Disabled)" }), _jsx(DropdownMenuRadioItem, { value: "dark", disabled: true, icon: _jsx(Icon, { type: "heroicons", name: "moon", className: "size-4 shrink-0" }), children: "Dark (Selected + Disabled)" })] }) })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", children: ["Theme: ", theme] }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Theme" }), _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: setTheme, children: [_jsx(DropdownMenuRadioItem, { value: "light", icon: _jsx(Icon, { type: "heroicons", name: "sun", className: "size-4 shrink-0" }), children: "Light" }), _jsx(DropdownMenuRadioItem, { value: "dark", icon: _jsx(Icon, { type: "heroicons", name: "moon", className: "size-4 shrink-0" }), children: "Dark" }), _jsx(DropdownMenuRadioItem, { value: "system", icon: _jsx(Icon, { type: "heroicons", name: "computer-desktop", className: "size-4 shrink-0" }), children: "System" }), _jsx(DropdownMenuRadioItem, { value: "custom", disabled: true, icon: _jsx(Icon, { type: "heroicons", name: "paint-brush", className: "size-4" }), children: "Custom" })] })] })] })] })] }));
     },
 };
-export const Position = {
-    args: {
-        side: "bottom",
-        align: "center",
-        sideOffset: 5,
-        alignOffset: 0,
-    },
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, Object.assign({}, args, { side: "bottom" // controls the side (top, bottom, left, right)
-                            , align: "start" // controls the alignment (start, center, end)
-                            , sideOffset: 5, alignOffset: 0, children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] }))] }) }) }));
+// ---------------------------------------------------------------------------
+// DropdownMenuShortcut — keyboard shortcut label on the right side of item
+// ---------------------------------------------------------------------------
+export const WithShortcut = {
+    name: "With Shortcut",
+    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: "All States \u2014 Shortcut" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { className: "relative", style: { position: "static", transform: "none" }, children: [_jsxs(DropdownMenuItem, { children: ["New Tab", _jsx(DropdownMenuShortcut, { children: "\u2318T" })] }), _jsxs(DropdownMenuItem, { className: "!bg-[var(--dropdown-menu-hover-bg)]", children: ["New Window (Hover)", _jsx(DropdownMenuShortcut, { children: "\u2318N" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "pencil", className: "size-4 shrink-0" }), "Edit", _jsx(DropdownMenuShortcut, { children: "\u2318E" })] }), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "document-duplicate", className: "size-4 shrink-0" }), "Duplicate", _jsx(DropdownMenuShortcut, { children: "\u2318D" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "trash", className: "size-4 shrink-0" }), "Delete", _jsx(DropdownMenuShortcut, { children: "\u232B" })] })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { className: "w-52", children: [_jsx(DropdownMenuLabel, { children: "Actions" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { children: ["New Tab", _jsx(DropdownMenuShortcut, { children: "\u2318T" })] }), _jsxs(DropdownMenuItem, { children: ["New Window", _jsx(DropdownMenuShortcut, { children: "\u2318N" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "pencil", className: "size-4 shrink-0" }), "Edit", _jsx(DropdownMenuShortcut, { children: "\u2318E" })] }), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "document-duplicate", className: "size-4 shrink-0" }), "Duplicate", _jsx(DropdownMenuShortcut, { children: "\u2318D" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "trash", className: "size-4 shrink-0" }), "Delete", _jsx(DropdownMenuShortcut, { children: "\u232B" })] })] })] })] })] })),
+};
+// ---------------------------------------------------------------------------
+// Trigger variants (on icon button, etc.)
+// ---------------------------------------------------------------------------
+export const TriggerVariants = {
+    name: "Trigger Variants",
+    render: () => (_jsxs("div", { className: "flex gap-8 items-center flex-wrap", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Text Trigger" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: "Open" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Button Trigger" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Icon Button Trigger" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Horizontal dots" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-horizontal" }) }) }), _jsxs(DropdownMenuContent, { children: [_jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "pencil", className: "size-4 shrink-0" }), "Edit"] }), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "document-duplicate", className: "size-4 shrink-0" }), "Duplicate"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "trash", className: "size-4 shrink-0" }), "Delete"] })] })] })] })] })),
+};
+// ---------------------------------------------------------------------------
+// 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 (_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: "File Manager Actions" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { className: "relative w-[220px]", style: { position: "static", transform: "none" }, children: [_jsx(DropdownMenuItem, { icon: _jsx(Icon, { type: "heroicons", name: "pencil", className: "size-4 shrink-0" }), children: "Rename" }), _jsx(DropdownMenuItem, { icon: _jsx(Icon, { type: "heroicons", name: "document-duplicate", className: "size-4 shrink-0" }), children: "Duplicate" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Sort By" }), _jsxs(DropdownMenuRadioGroup, { value: "name", children: [_jsx(DropdownMenuRadioItem, { value: "name", children: "Name" }), _jsx(DropdownMenuRadioItem, { value: "date", children: "Date Modified" }), _jsx(DropdownMenuRadioItem, { value: "size", children: "Size" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Show" }), _jsx(DropdownMenuCheckboxItem, { children: "Hidden Files" }), _jsx(DropdownMenuCheckboxItem, { checked: true, children: "File Extensions" }), _jsx(DropdownMenuCheckboxItem, { checked: true, children: "Preview Panel" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { disabled: true, icon: _jsx(Icon, { type: "heroicons", name: "trash", className: "size-4 shrink-0" }), children: "Delete" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Editor Settings (Multiple RadioGroups)" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "cog-6-tooth" }) }) }), _jsxs(DropdownMenuContent, { className: "relative w-[220px]", style: { position: "static", transform: "none" }, children: [_jsx(DropdownMenuLabel, { children: "Theme" }), _jsxs(DropdownMenuRadioGroup, { value: "dark", children: [_jsx(DropdownMenuRadioItem, { value: "light", icon: _jsx(Icon, { type: "heroicons", name: "sun", className: "size-4 shrink-0" }), children: "Light" }), _jsx(DropdownMenuRadioItem, { value: "dark", icon: _jsx(Icon, { type: "heroicons", name: "moon", className: "size-4 shrink-0" }), children: "Dark" }), _jsx(DropdownMenuRadioItem, { value: "system", icon: _jsx(Icon, { type: "heroicons", name: "computer-desktop", className: "size-4 shrink-0" }), children: "System" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Density" }), _jsxs(DropdownMenuRadioGroup, { value: "comfortable", children: [_jsx(DropdownMenuRadioItem, { value: "compact", children: "Compact" }), _jsx(DropdownMenuRadioItem, { value: "comfortable", children: "Comfortable" }), _jsx(DropdownMenuRadioItem, { value: "spacious", children: "Spacious" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Sort Direction" }), _jsxs(DropdownMenuRadioGroup, { value: "asc", children: [_jsx(DropdownMenuRadioItem, { value: "asc", icon: _jsx(Icon, { type: "heroicons", name: "bars-arrow-up", className: "size-4 shrink-0" }), children: "Ascending" }), _jsx(DropdownMenuRadioItem, { value: "desc", icon: _jsx(Icon, { type: "heroicons", name: "bars-arrow-down", className: "size-4 shrink-0" }), children: "Descending" })] })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive \u2014 File Manager" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Options" }) }), _jsxs(DropdownMenuContent, { className: "w-[220px]", children: [_jsx(DropdownMenuItem, { icon: _jsx(Icon, { type: "heroicons", name: "pencil", className: "size-4 shrink-0" }), children: "Rename" }), _jsx(DropdownMenuItem, { icon: _jsx(Icon, { type: "heroicons", name: "document-duplicate", className: "size-4 shrink-0" }), children: "Duplicate" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Sort By" }), _jsxs(DropdownMenuRadioGroup, { value: sortBy, onValueChange: setSortBy, children: [_jsx(DropdownMenuRadioItem, { value: "name", children: "Name" }), _jsx(DropdownMenuRadioItem, { value: "date", children: "Date Modified" }), _jsx(DropdownMenuRadioItem, { value: "size", children: "Size" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Show" }), _jsx(DropdownMenuCheckboxItem, { checked: showHidden, onCheckedChange: setShowHidden, onSelect: (e) => e.preventDefault(), children: "Hidden Files" }), _jsx(DropdownMenuCheckboxItem, { checked: showExtensions, onCheckedChange: setShowExtensions, onSelect: (e) => e.preventDefault(), children: "File Extensions" }), _jsx(DropdownMenuCheckboxItem, { checked: showPreview, onCheckedChange: setShowPreview, onSelect: (e) => e.preventDefault(), children: "Preview Panel" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { disabled: true, icon: _jsx(Icon, { type: "heroicons", name: "trash", className: "size-4 shrink-0" }), children: "Delete" })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Interactive \u2014 Editor Settings" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Settings" }) }), _jsxs(DropdownMenuContent, { className: "w-[220px]", children: [_jsx(DropdownMenuLabel, { children: "Theme" }), _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: setTheme, children: [_jsx(DropdownMenuRadioItem, { value: "light", icon: _jsx(Icon, { type: "heroicons", name: "sun", className: "size-4 shrink-0" }), children: "Light" }), _jsx(DropdownMenuRadioItem, { value: "dark", icon: _jsx(Icon, { type: "heroicons", name: "moon", className: "size-4 shrink-0" }), children: "Dark" }), _jsx(DropdownMenuRadioItem, { value: "system", icon: _jsx(Icon, { type: "heroicons", name: "computer-desktop", className: "size-4 shrink-0" }), children: "System" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Density" }), _jsxs(DropdownMenuRadioGroup, { value: density, onValueChange: setDensity, children: [_jsx(DropdownMenuRadioItem, { value: "compact", children: "Compact" }), _jsx(DropdownMenuRadioItem, { value: "comfortable", children: "Comfortable" }), _jsx(DropdownMenuRadioItem, { value: "spacious", children: "Spacious" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Sort Direction" }), _jsxs(DropdownMenuRadioGroup, { value: sortDir, onValueChange: setSortDir, children: [_jsx(DropdownMenuRadioItem, { value: "asc", icon: _jsx(Icon, { type: "heroicons", name: "bars-arrow-up", className: "size-4 shrink-0" }), children: "Ascending" }), _jsx(DropdownMenuRadioItem, { value: "desc", icon: _jsx(Icon, { type: "heroicons", name: "bars-arrow-down", className: "size-4 shrink-0" }), children: "Descending" })] })] })] })] })] }));
     },
 };

package/dist/components/Form/Form.js

@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { FormProvider, useForm, } from "react-hook-form";
+import { FormProvider, useForm, useFormContext, } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 export const createYupResolver = (schema) => yupResolver(schema);
 export const createControlledForm = ({ methods, defaultValues, controllerRef, }) => {
@@ -52,8 +52,15 @@ export const useControlledForm = ({ defaultValues, controllerRef, resolver, vali
         FormRoot: stableRef.current.FormRoot,
     };
 };
+const FormStateObserver = ({ onFormStateChange, }) => {
+    const { formState } = useFormContext();
+    React.useEffect(() => {
+        onFormStateChange(formState);
+    }, [formState, onFormStateChange]);
+    return null;
+};
 const FormInner = (_a, ref) => {
-    var { children, defaultValues, methods: externalMethods, controllerRef, onSubmit, onInvalidSubmit, resolver, validationSchema, mode = "onSubmit", reValidateMode = "onChange", noValidate = true } = _a, formProps = __rest(_a, ["children", "defaultValues", "methods", "controllerRef", "onSubmit", "onInvalidSubmit", "resolver", "validationSchema", "mode", "reValidateMode", "noValidate"]);
+    var { children, defaultValues, methods: externalMethods, controllerRef, onSubmit, onInvalidSubmit, onFormStateChange, resolver, validationSchema, mode = "onSubmit", reValidateMode = "onChange", noValidate = true } = _a, formProps = __rest(_a, ["children", "defaultValues", "methods", "controllerRef", "onSubmit", "onInvalidSubmit", "onFormStateChange", "resolver", "validationSchema", "mode", "reValidateMode", "noValidate"]);
     const resolvedResolver = resolver !== null && resolver !== void 0 ? resolver : (validationSchema
         ? createYupResolver(validationSchema)
         : undefined);
@@ -82,7 +89,7 @@ const FormInner = (_a, ref) => {
             controllerRef.current = null;
         };
     }, [controllerRef, controller]);
-    return (_jsx(FormProvider, Object.assign({}, methods, { children: _jsx("form", Object.assign({}, formProps, { noValidate: noValidate, onSubmit: methods.handleSubmit(onSubmit, onInvalidSubmit), children: typeof children === "function" ? children(methods) : children })) })));
+    return (_jsx(FormProvider, Object.assign({}, methods, { children: _jsxs("form", Object.assign({}, formProps, { noValidate: noValidate, onSubmit: methods.handleSubmit(onSubmit, onInvalidSubmit), children: [onFormStateChange && (_jsx(FormStateObserver, { onFormStateChange: onFormStateChange })), typeof children === "function" ? children(methods) : children] })) })));
 };
 export const Form = React.forwardRef(FormInner);
 export default Form;

package/dist/components/Form/Form.stories.js

@@ -162,6 +162,33 @@ export const RenderPropsCodeControl = {
                         } }), _jsx("div", { className: "flex gap-2", children: _jsx(Button, { type: "submit", disabled: !formState.isValid || formState.isSubmitting, isLoading: formState.isSubmitting, children: "Submit with code" }) })] })) }));
     },
 };
+export const FormStateChangeCallback = {
+    args: {},
+    render: () => {
+        const [isFormValid, setIsFormValid] = useState(false);
+        const [isDirty, setIsDirty] = useState(false);
+        const [submitCount, setSubmitCount] = useState(0);
+        const schema = yup.object({
+            title: yup.string().required("Title is required"),
+            description: yup
+                .string()
+                .required("Description is required")
+                .min(10, "Description must be at least 10 characters"),
+        });
+        return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "rounded-md border border-bg-stroke1 bg-bg-bg2 p-3 text-xs text-text-g-contrast-medium space-y-1", children: [_jsxs("div", { children: ["Validity:", " ", _jsx("span", { className: isFormValid ? "text-state-success-default" : "text-state-error-default", children: isFormValid ? "valid" : "invalid" })] }), _jsxs("div", { children: ["Dirty: ", isDirty ? "yes" : "no"] }), _jsxs("div", { children: ["Submit count: ", submitCount] })] }), _jsxs(Form, { className: "flex flex-col gap-3", defaultValues: { title: "", description: "" }, mode: "onTouched", reValidateMode: "onChange", validationSchema: schema, onSubmit: (values) => {
+                        setSubmitCount((prev) => prev + 1);
+                        // eslint-disable-next-line no-console
+                        console.log("Submitted:", values);
+                    }, onFormStateChange: (formState) => {
+                        setIsFormValid(formState.isValid);
+                        setIsDirty(formState.isDirty);
+                    }, children: [_jsx(Field, { name: "title", component: TextInput, componentProps: { label: "Title", required: true } }), _jsx(Field, { name: "description", component: TextInput, componentProps: {
+                                label: "Description",
+                                helperText: "At least 10 characters",
+                                required: true,
+                            } }), _jsx(Button, { type: "submit", disabled: !isFormValid, children: "Submit" })] })] }));
+    },
+};
 export const HigherLayerCodeControl = {
     args: {},
     render: () => {

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@/utils/cn";
+const sizeClass = {
+    m: "ui-scrollbar ui-scrollbar-m",
+    s: "ui-scrollbar ui-scrollbar-s",
+    xs: "ui-scrollbar ui-scrollbar-xs",
+};
+const directionClass = {
+    vertical: "overflow-y-auto overflow-x-hidden",
+    horizontal: "overflow-x-auto overflow-y-hidden",
+    both: "overflow-auto",
+};
+/**
+ * ScrollArea
+ *
+ * A thin wrapper that applies the design-system scrollbar style to any
+ * scrollable container. Use `scrollbarSize` to pick the Figma size variant
+ * and `direction` to control which axis scrolls.
+ *
+ * **Client usage:**
+ * ```tsx
+ * <ScrollArea className="max-h-[270px]">
+ *   {items.map(item => <div key={item.id}>{item.label}</div>)}
+ * </ScrollArea>
+ * ```
+ *
+ * For a double-scroll layout (two independent sections inside one dropdown),
+ * wrap each section individually:
+ * ```tsx
+ * <ScrollArea className="max-h-[160px]">...section A items...</ScrollArea>
+ * <ScrollArea className="max-h-[160px]">...section B items...</ScrollArea>
+ * ```
+ */
+export const ScrollArea = React.forwardRef((_a, ref) => {
+    var { className, scrollbarSize = "s", direction = "vertical", children } = _a, props = __rest(_a, ["className", "scrollbarSize", "direction", "children"]);
+    return (_jsx("div", Object.assign({ ref: ref, className: cn(directionClass[direction], sizeClass[scrollbarSize], className) }, props, { children: children })));
+});
+ScrollArea.displayName = "ScrollArea";

package/dist/components/ScrollArea/ScrollArea.stories.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "./ScrollArea";
+const meta = {
+    title: "Components/ScrollArea",
+    component: ScrollArea,
+    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;
+const ITEMS = Array.from({ length: 12 }, (_, i) => `Option Description ${i + 1}`);
+// ---------------------------------------------------------------------------
+// Size variants  (Figma: Size=M / S / XS)
+// ---------------------------------------------------------------------------
+export const Sizes = {
+    name: "Size Variants",
+    render: () => (_jsx("div", { className: "flex gap-10 items-start", children: ["m", "s", "xs"].map((size) => (_jsxs("div", { children: [_jsxs("p", { className: "typography-small4 text-text-g-contrast-medium mb-2 uppercase", children: ["Size ", size] }), _jsx(ScrollArea, { scrollbarSize: size, className: "max-h-[270px] w-[200px] rounded-lg bg-modal-surface", children: ITEMS.map((label) => (_jsx("div", { className: "px-4 py-3 typography-subtitle4 text-text-g-contrast-high", children: label }, label))) })] }, size))) })),
+};
+// ---------------------------------------------------------------------------
+// Vertical scroll  (Figma: Can Scroll)
+// ---------------------------------------------------------------------------
+export const VerticalScroll = {
+    name: "Vertical Scroll",
+    render: () => (_jsxs("div", { children: [_jsxs("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: ["Single scrollable list \u2014 use", " ", _jsx("code", { className: "text-xs", children: "<ScrollArea className=\"max-h-[...]\">" })] }), _jsx(ScrollArea, { className: "max-h-[270px] w-[230px] rounded-lg bg-modal-surface", children: ITEMS.map((label) => (_jsx("div", { className: "px-4 py-3 typography-subtitle4 text-text-g-contrast-high", children: label }, label))) })] })),
+};
+// ---------------------------------------------------------------------------
+// Horizontal scroll  (Figma: Horizontal=Yes)
+// ---------------------------------------------------------------------------
+export const HorizontalScroll = {
+    name: "Horizontal Scroll",
+    render: () => (_jsxs("div", { children: [_jsxs("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: ["Horizontal \u2014 pass", " ", _jsx("code", { className: "text-xs", children: "direction=\"horizontal\"" })] }), _jsx(ScrollArea, { direction: "horizontal", className: "max-w-[300px] rounded-lg bg-modal-surface", children: _jsx("div", { className: "flex", children: ITEMS.map((label) => (_jsx("div", { className: "shrink-0 w-[140px] px-4 py-3 typography-subtitle4 text-text-g-contrast-high border-r border-[var(--dropdown-menu-seperator-bg)]", children: label }, label))) }) })] })),
+};
+// ---------------------------------------------------------------------------
+// Double scroll  (Figma: Double Scroll — two independent sections)
+// ---------------------------------------------------------------------------
+export const DoubleScroll = {
+    name: "Double Scroll",
+    render: () => (_jsxs("div", { children: [_jsxs("p", { className: "typography-small4 text-text-g-contrast-medium mb-4", children: ["Two independent scrollable sections inside one container.", _jsx("br", {}), "Wrap each section in its own", " ", _jsx("code", { className: "text-xs", children: "<ScrollArea>" }), "."] }), _jsxs("div", { className: "w-[230px] rounded-lg bg-modal-surface overflow-hidden", children: [_jsx("div", { className: "px-3 pt-4 pb-2 typography-small4 text-text-g-contrast-high", children: "Section A" }), _jsx(ScrollArea, { className: "max-h-[160px]", children: ITEMS.slice(0, 8).map((label) => (_jsx("div", { className: "px-4 py-3 typography-subtitle4 text-text-g-contrast-high", children: label }, label))) }), _jsx("div", { className: "h-px bg-[var(--dropdown-menu-seperator-bg)] my-2" }), _jsx("div", { className: "px-3 pt-2 pb-2 typography-small4 text-text-g-contrast-high", children: "Section B" }), _jsx(ScrollArea, { className: "max-h-[160px]", children: ITEMS.slice(0, 8).map((label) => (_jsx("div", { className: "px-4 py-3 typography-subtitle4 text-text-g-contrast-high", children: label }, label))) })] })] })),
+};
+// ---------------------------------------------------------------------------
+// Usage with DropdownMenu  (Figma: Can Scroll / Double Scroll in dropdown)
+// ---------------------------------------------------------------------------
+export const WithDropdownMenu = {
+    name: "Usage with DropdownMenu",
+    render: () => {
+        // Inline-import to avoid circular storybook deps — client should import from "@core/ui"
+        const { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+         } = require("../DropdownMenu/DropdownMenu");
+        const Button = require("../Button/Button").default;
+        return (_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: "Can Scroll" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsx(DropdownMenuContent, { children: _jsx(ScrollArea, { className: "max-h-[270px]", children: ITEMS.map((label) => (_jsx(DropdownMenuItem, { children: label }, label))) }) })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Double Scroll" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Section A" }), _jsx(ScrollArea, { className: "max-h-[160px]", children: ITEMS.slice(0, 8).map((label) => (_jsx(DropdownMenuItem, { children: label }, label))) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Section B" }), _jsx(ScrollArea, { className: "max-h-[160px]", children: ITEMS.slice(0, 8).map((label) => (_jsx(DropdownMenuItem, { children: label }, label))) })] })] })] })] }));
+    },
+};

package/dist/components/TextInput/TextInput.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, } from "react";
+import { forwardRef, useCallback, useMemo, useRef, } from "react";
+import { useStableMergedRef } from "@/utils/mergeRefs";
 import { helperTextVariant, iconActionVariant, inlineEndIconWrapperVariant, inlineStartIconWrapperVariant, inputVariant, labelVariant, searchIconVariant, segmentedIconWrapperVariant, } from "./TextInput.styles";
 import { CircleAlert, CircleX, Search, } from "lucide-react";
 import { cn } from "@/utils/cn";
@@ -18,6 +19,9 @@ export const TextInput = forwardRef((_a, ref) => {
     var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, warningMessage, status, fullwidth = true, disabled = false, error = false, warning = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, keepFooterSpace = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes, normalize, format, trimOnCommit, normalizeOnCommit } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "warningMessage", "status", "fullwidth", "disabled", "error", "warning", "required", "isFloatingLabel", "keepCloseIconOnValue", "keepFooterSpace", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes", "normalize", "format", "trimOnCommit", "normalizeOnCommit"]);
     const inputRef = useRef(null);
     const _id = id || `${type}-${label}-input`;
+    // Stable merged ref — identity never changes so Headless UI (or any library
+    // that watches refs) won't trigger detach/re-attach loops.
+    const stableRef = useStableMergedRef(ref, inputRef);
     const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
     const hasRightSectionIcon = !!endIcon || !!renderEndIcon;
     const feedbackStatus = status ||
@@ -81,7 +85,6 @@ export const TextInput = forwardRef((_a, ref) => {
         warning: isWarning,
         position: "end",
     });
-    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
     const handleChange = useCallback((e) => {
         var _a;
         if (normalize) {
@@ -183,7 +186,7 @@ export const TextInput = forwardRef((_a, ref) => {
         renderEndIcon,
         handleOnClickRightSectionIcon,
     ]);
-    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, value: displayValue, className: cn(inputClassname, props.className), onChange: normalize ? handleChange : props.onChange, onBlur: trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur, onKeyDown: trimOnCommit || normalizeOnCommit ? handleKeyDown : props.onKeyDown })), hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(searchIconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: stableRef, type: type, id: _id, disabled: disabled, value: displayValue, className: cn(inputClassname, props.className), onChange: normalize ? handleChange : props.onChange, onBlur: trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur, onKeyDown: trimOnCommit || normalizeOnCommit ? handleKeyDown : props.onKeyDown })), hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(searchIconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
                         }, children: _jsx(CircleX, { className: cn(iconActionClassname, 
                             // 'fill-none stroke-current',