@rovula/ui 0.1.21 → 0.1.23

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -23,45 +23,58 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 const DropdownMenuSubTrigger = React.forwardRef((_a, ref) => {
     var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.SubTrigger, Object.assign({ ref: ref, className: cn("relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className) }, props, { children: [children, _jsx(Icon, { type: "heroicons", name: "chevron-right", className: "ml-auto h-4 w-4" })] })));
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, Object.assign({ ref: ref, className: cn("relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-4 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className) }, props, { children: [children, _jsx(Icon, { type: "heroicons", name: "chevron-right", className: "ml-auto h-4 w-4" })] })));
 });
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })));
+    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })));
 });
 DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef((_a, ref) => {
     var { className, sideOffset = 4 } = _a, props = __rest(_a, ["className", "sideOffset"]);
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef((_a, ref) => {
-    var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
-    return (_jsx(DropdownMenuPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className) }, props)));
+    var { className, inset, selected, icon, children } = _a, props = __rest(_a, ["className", "inset", "selected", "icon", "children"]);
+    const hasIcon = !!icon;
+    return (_jsxs(DropdownMenuPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", selected &&
+            "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className, hasIcon ? "gap-4" : "gap-1") }, props, { children: [_jsxs("div", { className: "flex shrink-0 flex-row gap-1", children: [_jsx("span", { className: "size-4 flex items-center justify-center", children: selected && (_jsx(Icon, { type: "heroicons", name: "check", className: "size-4 text-[var(--dropdown-menu-selected-text)]" })) }), icon] }), children] })));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef((_a, ref) => {
-    var { className, children, checked } = _a, props = __rest(_a, ["className", "children", "checked"]);
-    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, Object.assign({ ref: ref, className: cn("relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", className), checked: checked }, props, { children: [_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { type: "heroicons", name: "check", className: "size-4" }) }) }), children] })));
+    var { className, children, checked, disabled } = _a, props = __rest(_a, ["className", "children", "checked", "disabled"]);
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", className), checked: checked, disabled: disabled }, props, { children: [_jsx("span", { className: cn("shrink-0 size-4 rounded-[2px] border flex items-center justify-center transition-all overflow-hidden", checked &&
+                    !disabled &&
+                    "bg-[var(--dropdown-menu-checkbox-checked-bg)] border-[var(--dropdown-menu-checkbox-checked-bg)]", checked &&
+                    disabled &&
+                    "bg-[var(--dropdown-menu-checkbox-disabled-checked-bg)] border-transparent", !checked &&
+                    disabled &&
+                    "border-[var(--dropdown-menu-checkbox-disabled-border)]", !checked &&
+                    !disabled &&
+                    "border-[var(--dropdown-menu-checkbox-border)]"), children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { type: "heroicons", name: "check", className: "size-3 text-[var(--dropdown-menu-checkbox-checked-icon)]" }) }) }), children] })));
 });
 DropdownMenuCheckboxItem.displayName =
     DropdownMenuPrimitive.CheckboxItem.displayName;
 const DropdownMenuRadioItem = React.forwardRef((_a, ref) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.RadioItem, Object.assign({ ref: ref, className: cn("relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", className) }, props, { children: [_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { type: "heroicons", name: "circle", className: "h-2 w-2 fill-current" }) }) }), children] })));
+    var { className, children, disabled, icon } = _a, props = __rest(_a, ["className", "children", "disabled", "icon"]);
+    const hasIconSlot = !!icon;
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, Object.assign({ ref: ref, className: cn("relative flex cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-radio-disabled-text)]", "data-[state='checked']:data-[disabled]:!text-[var(--dropdown-menu-radio-selected-disabled-text)]", className, hasIconSlot ? "gap-4" : "gap-1") }, props, { disabled: disabled, children: [_jsxs("div", { className: "flex shrink-0 flex-row gap-1", children: [_jsx("span", { className: "size-4", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { className: "shrink-0", children: _jsx(Icon, { type: "heroicons", name: "check", className: cn("size-4", disabled
+                                    ? "text-[var(--dropdown-menu-radio-selected-disabled-text)]"
+                                    : "text-[var(--dropdown-menu-selected-text)]") }) }) }), icon] }), children] })));
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 const DropdownMenuLabel = React.forwardRef((_a, ref) => {
     var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
-    return (_jsx(DropdownMenuPrimitive.Label, Object.assign({ ref: ref, className: cn("px-3 pt-4 pb-2 typography-small4 text-text-g-contrast-high", inset && "pl-8", className) }, props)));
+    return (_jsx(DropdownMenuPrimitive.Label, Object.assign({ ref: ref, className: cn("px-3 py-2 typography-small4 text-text-g-contrast-high", inset && "pl-8", className) }, props)));
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DropdownMenuPrimitive.Separator, Object.assign({ ref: ref, className: cn("-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]", className) }, props)));
+    return (_jsx(DropdownMenuPrimitive.Separator, Object.assign({ ref: ref, className: cn("h-px bg-[var(--dropdown-menu-seperator-bg)]", className) }, props)));
 });
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 const DropdownMenuShortcut = (_a) => {

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

@@ -1,6 +1,6 @@
 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 { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./DropdownMenu";
 import Button from "../Button/Button";
 import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
@@ -18,11 +18,11 @@ const meta = {
 export default meta;
 // ---------------------------------------------------------------------------
 // Figma: Normal dropdown / action menu
-// Shows all item states: Default, Hover (focus), Selected, Disabled, Selected+Disabled
+// 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, { 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" })] })] })] })] })),
+    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
@@ -30,7 +30,7 @@ export const AllStates = {
 // ---------------------------------------------------------------------------
 export const WithIcon = {
     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"] })] })] })] })] })),
+    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" })] })] })] })] })),
 };
 // ---------------------------------------------------------------------------
 // Figma: Checkbox items (Have icon=No, Checkbox=Yes)
@@ -41,7 +41,7 @@ export const WithCheckbox = {
         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" })] })] })] })] }));
+        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" })] })] })] })] }));
     },
 };
 // ---------------------------------------------------------------------------
@@ -49,7 +49,7 @@ export const WithCheckbox = {
 // ---------------------------------------------------------------------------
 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" })] })] })] })] })),
+    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
@@ -71,7 +71,7 @@ export const WithSearch = {
             "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" })] })] })] })] }));
+        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" })] })] })] })] }));
     },
 };
 // ---------------------------------------------------------------------------
@@ -79,21 +79,49 @@ export const WithSearch = {
 // ---------------------------------------------------------------------------
 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))) })] })] })] })),
+    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, { 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))) })] })] })] })] })),
+    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 = {
     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" })] })] })] })),
+    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" })] })] })] }) })),
+};
+// ---------------------------------------------------------------------------
+// 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" })] })] })] })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// 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" })] })] })] })] })] }));
+    },
+};
+// ---------------------------------------------------------------------------
+// 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.)
@@ -102,3 +130,19 @@ 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/TextInput/TextInput.js

@@ -10,14 +10,18 @@ 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 { CircleAlert, CircleX, Search } from "lucide-react";
 import { cn } from "@/utils/cn";
 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,9 @@ 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',