@rovula/ui 0.1.20 → 0.1.21

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

@@ -1,116 +1,104 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, 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 (focus), 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, { open: true, 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(DropdownMenuCheckboxItem, { checked: true, children: "Option Description" }), _jsx(DropdownMenuItem, { 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(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { checked: true, children: "Option Description" }), _jsx(DropdownMenuItem, { disabled: true, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { checked: 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, { open: true, 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: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), "Option Description"] }), _jsxs(DropdownMenuItem, { className: "!bg-[var(--dropdown-menu-hover-bg)]", children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), "Option Description (Hover)"] }), _jsxs(DropdownMenuCheckboxItem, { checked: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), "Option Description"] }), _jsxs(DropdownMenuItem, { disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), "Option Description"] }), _jsxs(DropdownMenuCheckboxItem, { checked: true, disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), "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: [_jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4 shrink-0" }), "Option Description"] }), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "pencil", className: "size-4 shrink-0" }), "Option Description"] }), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "trash", className: "size-4 shrink-0" }), "Option Description"] }), _jsxs(DropdownMenuItem, { disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "arrow-path", className: "size-4 shrink-0" }), "Option Description"] })] })] })] })] })),
 };
-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, { open: true, 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, { open: true, 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" })] })] })] })] })),
 };
-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" })] })] })] }) }) }));
+// ---------------------------------------------------------------------------
+// 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, { open: true, 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" })] })] })] })] }));
     },
 };
-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: 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, { open: true, 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))) })] })] })] })),
 };
-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" })] })] }) }) }));
-    },
+// ---------------------------------------------------------------------------
+// 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, { open: true, 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))) })] })] })] })] })),
 };
-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" })] }))] }) }) }));
-    },
+// ---------------------------------------------------------------------------
+// Figma: Sub menu (existing, preserved)
+// ---------------------------------------------------------------------------
+export const SubMenu = {
+    name: "Sub Menu",
+    render: () => (_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" })] })] })] })),
+};
+// ---------------------------------------------------------------------------
+// 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"] })] })] })] })] })),
 };

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))) })] })] })] })] }));
+    },
+};