@rovula/ui 0.1.20 → 0.1.22

package/dist/components/Dropdown/Dropdown.js

@@ -1,3 +1,4 @@
+"use client";
 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)
@@ -9,190 +10,80 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, Fragment, } from "react";
-import * as Portal from "@radix-ui/react-portal";
+import { Combobox, ComboboxInput, ComboboxOptions, ComboboxOption, } from "@headlessui/react";
 import TextInput from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant } from "./Dropdown.styles";
-import { Menu } from "../Menu/Menu";
-import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
+import Icon from "../Icon/Icon";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+// ---------------------------------------------------------------------------
+// Shared menu item styles (used by Dropdown items + renderOptions consumers)
+// ---------------------------------------------------------------------------
+export const menuItemBaseStyles = cn("relative flex gap-1 cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]");
+// ---------------------------------------------------------------------------
+// Dropdown
+// ---------------------------------------------------------------------------
 const Dropdown = forwardRef((_a, ref) => {
-    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", defaultMenuItemType = "checkbox", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal = false, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName, segmentedInput = true } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "defaultMenuItemType", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "modal", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName", "segmentedInput"]);
+    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal: _modal, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName, segmentedInput = true } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "modal", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName", "segmentedInput"]);
     const _id = id || `${label}-select`;
-    const [isFocused, setIsFocused] = useState(false);
     const [selectedOption, setSelectedOption] = useState(null);
-    const [textValue, setTextValue] = useState("");
-    const keyCode = useRef("");
-    const dropdownRef = useRef(null);
+    const [query, setQuery] = useState("");
     const inputRef = useRef(null);
-    const [dropdownStyles, setDropdownStyles] = useState({});
-    const [isAbove, setIsAbove] = useState(false);
-    const [isInsideDialog, setIsInsideDialog] = useState(false);
-    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+    // Expose the inner <input> element via forwardRef
+    useImperativeHandle(ref, () => inputRef.current, []);
+    // Sync external value prop
     useEffect(() => {
-        var _a;
-        setSelectedOption(value);
-        setTextValue((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
+        setSelectedOption(value !== null && value !== void 0 ? value : null);
     }, [value]);
-    /** ✅ Auto-detect if inside a Dialog */
-    useEffect(() => {
-        let node = inputRef.current;
-        while (node) {
-            if (node.getAttribute("role") === "dialog") {
-                setIsInsideDialog(true);
-                return;
-            }
-            node = node.parentElement;
-        }
-        setIsInsideDialog(false);
-    }, []);
-    const handleOnChangeText = useCallback((event) => {
-        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(event);
-        setTextValue(event.target.value);
-        if (!event.target.value) {
-            clearMismatchValue(event);
-        }
-    }, [onChangeText]);
-    const handleOptionClick = useCallback((option) => {
-        setSelectedOption(option);
-        setTextValue(option.label);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
-        setIsFocused(false);
-    }, [onSelect]);
     const optionsFiltered = useMemo(() => {
-        return options.filter((option) => {
-            var _a;
-            return !filterMode ||
-                ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textValue === null || textValue === void 0 ? void 0 : textValue.toLowerCase()));
-        });
-    }, [options, filterMode, textValue]);
-    const usePortal = isInsideDialog ? false : modal;
-    const updateDropdownPosition = useCallback(() => {
-        if (inputRef.current && dropdownRef.current) {
-            const rect = inputRef.current.getBoundingClientRect();
-            const dropdownHeight = dropdownRef.current.offsetHeight;
-            const spaceBelow = window.innerHeight - rect.bottom;
-            const spaceAbove = rect.top;
-            const shouldOpenAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
-            setIsAbove(shouldOpenAbove);
-            if (usePortal) {
-                setDropdownStyles({
-                    position: "absolute",
-                    top: shouldOpenAbove
-                        ? `${rect.top - dropdownHeight}px`
-                        : `${rect.bottom}px`,
-                    left: `${rect.left}px`,
-                    width: `${rect.width}px`,
-                    zIndex: 9999,
-                });
-            }
-            else {
-                setDropdownStyles({
-                    position: "absolute",
-                    top: shouldOpenAbove ? `-${dropdownHeight}px` : "100%",
-                    left: "0",
-                    width: "100%",
-                    zIndex: 9999,
-                });
-            }
-        }
-    }, [modal, isInsideDialog, usePortal]);
-    useEffect(() => {
-        if (isFocused) {
-            updateDropdownPosition();
-            window.addEventListener("resize", updateDropdownPosition);
+        if (!filterMode || !query)
+            return options;
+        return options.filter((opt) => opt.label.toLowerCase().includes(query.toLowerCase()));
+    }, [options, filterMode, query]);
+    const handleSelect = useCallback((option) => {
+        setSelectedOption(option);
+        setQuery("");
+        if (option) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+            // After selection Headless UI keeps focus on the input (via rAF refocus).
+            // Blur after that rAF so the next click triggers onFocus → immediate open.
+            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); }, 0);
         }
-        return () => {
-            window.removeEventListener("resize", updateDropdownPosition);
-        };
-    }, [isFocused, updateDropdownPosition]);
-    const renderOptions = () => {
+    }, [onSelect]);
+    const handleInputChange = useCallback((e) => {
+        if (filterMode)
+            setQuery(e.target.value);
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(e);
+    }, [filterMode, onChangeText]);
+    const renderOptionList = () => {
         if (customRenderOptions) {
             return customRenderOptions({
                 optionsFiltered,
                 selectedOption,
-                onClick: handleOptionClick,
-                style: dropdownStyles,
-                dropdownRef,
+                onClick: handleSelect,
             });
         }
-        // Convert options to MenuItemType
-        let finalMenuItems;
-        finalMenuItems = optionsFiltered.map((option) => {
+        if (optionsFiltered.length === 0) {
+            return (_jsx("div", { className: cn("px-4 py-14 text-center text-input-text", optionNotFoundItemClassName), children: "Not found" }));
+        }
+        return optionsFiltered.map((option) => {
             if (option.renderLabel) {
-                return {
-                    type: "custom",
-                    render: () => (_jsx(Fragment, { children: option.renderLabel({
-                            value: option.value,
-                            label: option.label,
-                            handleOnClick: () => handleOptionClick(option),
-                            className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]", {
-                                "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
-                            }, optionItemClassName),
-                        }) }, option.value)),
-                };
+                return (_jsx(Fragment, { children: option.renderLabel({
+                        value: option.value,
+                        label: option.label,
+                        handleOnClick: () => handleSelect(option),
+                        className: cn(menuItemBaseStyles, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value &&
+                            "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)]", optionItemClassName),
+                    }) }, option.value));
             }
-            return {
-                type: "item",
-                item: {
-                    type: defaultMenuItemType,
-                    value: option.value,
-                    label: option.label,
-                },
-            };
+            return (_jsx(ComboboxOption, { value: option, className: ({ focus, selected }) => cn(menuItemBaseStyles, (selected || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value) &&
+                    "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)]", focus &&
+                    "bg-[var(--dropdown-menu-hover-bg)] text-[var(--dropdown-menu-hover-text)]", optionItemClassName), children: ({ selected }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 size-4 flex items-center justify-center", children: (selected || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value) && (_jsx(Icon, { type: "heroicons", name: "check", className: "size-4 text-[var(--dropdown-menu-selected-text)]" })) }), option.label] })) }, option.value));
         });
-        // Add "not found" message if no results
-        if (finalMenuItems.length === 0) {
-            finalMenuItems.push({
-                type: "custom",
-                render: () => (_jsx("div", { className: cn("px-4 py-14 text-center text-input-text", optionNotFoundItemClassName), children: "Not found" }, "not-found")),
-            });
-        }
-        return (_jsx(Menu, { ref: dropdownRef, items: finalMenuItems, selectedValues: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) ? [selectedOption.value] : [], onSelect: (value) => {
-                const option = optionsFiltered.find((opt) => opt.value === value);
-                if (option) {
-                    handleOptionClick(option);
-                }
-            }, className: cn("absolute mt-1 w-full max-h-60 overflow-y-auto", !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"), optionContainerClassName), style: dropdownStyles }));
     };
-    const handleOnFocus = useCallback((e) => {
-        var _a;
-        setIsFocused(true);
-        (_a = props === null || props === void 0 ? void 0 : props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props === null || props === void 0 ? void 0 : props.onFocus]);
-    const clearMismatchValue = useCallback((e) => {
-        const matchSelectedValue = optionsFiltered.find((opt) => { var _a, _b; return opt.value === ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) || opt.label === ((_b = e.target) === null || _b === void 0 ? void 0 : _b.value); });
-        const isMatchSelectedValue = !!matchSelectedValue;
-        let option = matchSelectedValue || {
-            value: "",
-            label: "",
-        };
-        if (!isMatchSelectedValue && textValue) {
-            option = {
-                value: "",
-                label: "",
-            };
-        }
-        if (keyCode.current === "Enter") {
-            return;
-        }
-        setSelectedOption(option);
-        setTextValue(option.label);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
-    }, [optionsFiltered, textValue]);
-    const handleOnBlur = useCallback((e) => {
-        var _a;
-        setTimeout(() => setIsFocused(false), 200);
-        clearMismatchValue(e);
-        (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props === null || props === void 0 ? void 0 : props.onBlur, clearMismatchValue]);
-    const handleOnKeyDown = useCallback((e) => {
-        var _a;
-        keyCode.current = e.code;
-        (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
-    return (_jsxs("div", { className: `relative  ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: isFocused }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: segmentedInput ? customInputVariant({ size }) : undefined, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused &&
-                (usePortal ? (_jsx(Portal.Root, { container: document.body, children: renderOptions() })) : (renderOptions()))] }));
+    return (_jsx(Combobox, { value: selectedOption, onChange: handleSelect, immediate: true, by: "value", disabled: disabled, children: ({ open }) => (_jsxs("div", { className: cn("relative", fullwidth && "w-full"), children: [_jsx(ComboboxInput, Object.assign({ as: TextInput, ref: inputRef, hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: open }) }), label: label, placeholder: " ", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: segmentedInput ? customInputVariant({ size }) : undefined, displayValue: (opt) => { var _a; return (_a = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _a !== void 0 ? _a : ""; }, readOnly: !filterMode, onChange: handleInputChange }, props)), _jsx(ComboboxOptions, { className: cn("absolute top-full left-0 w-full mt-1 z-[51]", "min-w-[154px] max-h-60 overflow-y-auto", "rounded-lg bg-modal-surface text-text-g-contrast-high", optionContainerClassName), style: { boxShadow: "var(--dropdown-menu-shadow)" }, children: renderOptionList() })] })) }));
 });
+Dropdown.displayName = "Dropdown";
 export default Dropdown;

package/dist/components/Dropdown/Dropdown.stories.js

@@ -3,6 +3,7 @@ import { useRef, useState } from "react";
 import Dropdown from "./Dropdown";
 import Button from "../Button/Button";
 import { cn } from "@/utils/cn";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogTrigger, DialogClose, } from "../Dialog/Dialog";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
     title: "Components/Dropdown",
@@ -113,3 +114,31 @@ export const WithIcons = {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Dropdown, { id: "with-icons", size: "lg", label: "Select Food", fullwidth: true, options: optionsWithIcons, value: selectedValue, onSelect: (option) => setSelectedValue(option) }) }));
     },
 };
+// ---------------------------------------------------------------------------
+// Dropdown inside Dialog — showcases the fix for overflow:hidden bug
+// ---------------------------------------------------------------------------
+const dialogOptions = [
+    { value: "design", label: "Design" },
+    { value: "engineering", label: "Engineering" },
+    { value: "product", label: "Product" },
+    { value: "marketing", label: "Marketing" },
+    { value: "data", label: "Data & Analytics" },
+    { value: "ops", label: "Operations" },
+];
+const filterableOptions = new Array(20).fill("").map((_, i) => ({
+    value: `member-${i + 1}`,
+    label: `Team Member ${i + 1}`,
+}));
+export const InsideDialog = {
+    name: "Inside Dialog",
+    render: () => {
+        const [department, setDepartment] = useState();
+        const [member, setMember] = useState();
+        const [role, setRole] = useState();
+        return (_jsxs("div", { className: "flex gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Single Dropdown" }), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { showCloseButton: true, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Assign to Department" }), _jsx(DialogDescription, { children: "Dropdown popup appears above the dialog overlay \u2014 not clipped by overflow." })] }), _jsx(DialogBody, { className: "gap-4 py-2", children: _jsx(Dropdown, { id: "dept", label: "Department", size: "md", fullwidth: true, options: dialogOptions, value: department, onSelect: setDepartment }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { children: "Confirm" })] })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Multiple Dropdowns" }), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { showCloseButton: true, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Invite Team Member" }), _jsx(DialogDescription, { children: "Multiple dropdowns \u2014 each opens its own popup independently." })] }), _jsxs(DialogBody, { className: "gap-4 py-2", children: [_jsx(Dropdown, { id: "member", label: "Member", size: "md", fullwidth: true, options: filterableOptions, value: member, onSelect: setMember, filterMode: true }), _jsx(Dropdown, { id: "role", label: "Role", size: "md", fullwidth: true, options: [
+                                                        { value: "viewer", label: "Viewer" },
+                                                        { value: "editor", label: "Editor" },
+                                                        { value: "admin", label: "Admin" },
+                                                    ], value: role, onSelect: setRole })] }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { disabled: !member || !role, children: "Send Invite" })] })] })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Filter Mode" }), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Dialog" }) }), _jsxs(DialogContent, { showCloseButton: true, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Search & Select" }), _jsx(DialogDescription, { children: "filterMode=true \u2014 type to filter options, popup stays properly positioned." })] }), _jsx(DialogBody, { className: "gap-4 py-2", children: _jsx(Dropdown, { id: "member-filter", label: "Search member", size: "md", fullwidth: true, filterMode: true, options: filterableOptions, value: member, onSelect: setMember }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { disabled: !member, children: "Select" })] })] })] })] })] }));
+    },
+};

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -23,47 +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(
-        // "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary data-[state=open]:bg-primary",
-        "relative flex gap-3 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-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) })));
+    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) })));
 });
 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-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) })) }));
+    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) })) }));
 });
 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-3 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-3 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-3 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 py-2 typography-small4 text-text-g-contrast-medium", 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) => {