@rovula/ui 0.1.21 → 0.1.22

package/dist/cjs/types/utils/mergeRefs.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+/**
+ * Merges multiple refs into a single callback ref.
+ * NOTE: This creates a new function on every call — do NOT use inline in render.
+ * Use `useStableMergedRef` instead when you need a stable ref identity.
+ */
+export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined | null)[]): React.RefCallback<T>;
+/**
+ * Returns a **stable** callback ref (never changes identity) that forwards the
+ * node to all given refs. Safe to use inline in JSX — will not cause
+ * detach/re-attach loops in libraries like Headless UI that watch refs.
+ *
+ * @example
+ * const MyInput = forwardRef((props, ref) => {
+ *   const internalRef = useRef(null);
+ *   const stableRef = useStableMergedRef(ref, internalRef);
+ *   return <input ref={stableRef} />;
+ * });
+ */
+export declare function useStableMergedRef<T>(...refs: (React.Ref<T> | undefined | null)[]): React.RefCallback<T>;

package/dist/components/Avatar/Avatar.styles.js

@@ -1,10 +1,10 @@
 import { cva } from "class-variance-authority";
 export const avatarVariants = cva([
-    "flex items-center justify-center bg-grey2-700 text-common-black typography-subtitle2 truncate",
+    "flex items-center justify-center bg-grey2-900 text-text-white typography-subtitle6 truncate",
 ], {
     variants: {
         size: {
-            xxs: "w-[24px] h-[24px] typography-subtitle3",
+            xxs: "w-[24px] h-[24px] typography-small3",
             xs: "w-[32px] h-[32px]",
             sm: "w-[40px] h-[40px]",
             md: "w-[48px] h-[48px]",

package/dist/components/Badge/Badge.js

@@ -0,0 +1,36 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { cn } from "@/utils/cn";
+import { badgeVariants, severityBadgeVariants } from "./Badge.styles";
+const Badge = React.forwardRef((_a, ref) => {
+    var { label, color = "default", clickable = false, percent, className } = _a, props = __rest(_a, ["label", "color", "clickable", "percent", "className"]);
+    const hasPercent = percent !== undefined;
+    return (_jsxs("span", Object.assign({ ref: ref, className: cn(badgeVariants({ color, clickable }), hasPercent && "flex-col gap-0.5", clickable && "cursor-pointer gap-1", className) }, props, { children: [_jsxs("span", { className: "flex items-center gap-1", children: [label, clickable && (_jsx(ChevronDownIcon, { className: "size-4 shrink-0", "aria-hidden": true }))] }), hasPercent && (_jsxs("span", { className: "tabular-nums", children: [percent, "%"] }))] })));
+});
+Badge.displayName = "Badge";
+const SEVERITY_LABELS = {
+    highest: "Highest",
+    high: "High",
+    medium: "Medium",
+    low: "Low",
+    lowest: "Lowest",
+};
+const SeverityBadge = React.forwardRef((_a, ref) => {
+    var { severity, className } = _a, props = __rest(_a, ["severity", "className"]);
+    return (_jsx("span", Object.assign({ ref: ref, className: cn(severityBadgeVariants({ severity }), className) }, props, { children: SEVERITY_LABELS[severity] })));
+});
+SeverityBadge.displayName = "SeverityBadge";
+export { Badge, SeverityBadge };

package/dist/components/Badge/Badge.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, SeverityBadge } from "./Badge";
+const meta = {
+    title: "Components/Badge",
+    component: Badge,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-8 bg-bg-bg1", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+// ---------------------------------------------------------------------------
+// Default — single badge with controls
+// ---------------------------------------------------------------------------
+export const Default = {
+    args: {
+        label: "To do",
+        color: "default",
+        clickable: false,
+    },
+};
+// ---------------------------------------------------------------------------
+// Status Badges — all colors × clickable / static
+// ---------------------------------------------------------------------------
+const COLORS = ["default", "warning", "info", "error", "success"];
+const COLOR_LABELS = {
+    default: "To do",
+    warning: "In Progress",
+    info: "Ready to review",
+    error: "In review",
+    success: "Completed",
+};
+export const StatusBadges = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small1 text-text-g-contrast-low mb-3", children: "Clickable" }), _jsx("div", { className: "flex flex-wrap gap-3", children: COLORS.map((color) => (_jsx(Badge, { color: color, label: COLOR_LABELS[color], clickable: true }, color))) })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small1 text-text-g-contrast-low mb-3", children: "Static" }), _jsx("div", { className: "flex flex-wrap gap-3", children: COLORS.map((color) => (_jsx(Badge, { color: color, label: COLOR_LABELS[color] }, color))) })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small1 text-text-g-contrast-low mb-3", children: "With percentage" }), _jsx("div", { className: "flex flex-wrap gap-3", children: COLORS.map((color, i) => (_jsx(Badge, { color: color, label: COLOR_LABELS[color], percent: i === 0 ? 0 : i === 4 ? 100 : 50 }, color))) })] })] })),
+};
+// ---------------------------------------------------------------------------
+// Severity Badges
+// ---------------------------------------------------------------------------
+const SEVERITIES = [
+    "highest",
+    "high",
+    "medium",
+    "low",
+    "lowest",
+];
+export const SeverityBadges = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "typography-small1 text-text-g-contrast-low mb-1", children: "Severity levels" }), _jsx("div", { className: "flex flex-wrap gap-3", children: SEVERITIES.map((severity) => (_jsx(SeverityBadge, { severity: severity }, severity))) })] })),
+};

package/dist/components/Badge/Badge.styles.js

@@ -0,0 +1,62 @@
+import { cva } from "class-variance-authority";
+export const badgeVariants = cva([
+    "inline-flex items-center justify-center rounded-lg px-3 py-1",
+    "typography-body3",
+], {
+    variants: {
+        color: {
+            default: [
+                "bg-[var(--badge-default-bg)]",
+                "text-[var(--badge-default-text)]",
+            ],
+            success: [
+                "bg-[var(--badge-success-bg)]",
+                "text-[var(--badge-success-text)]",
+            ],
+            warning: [
+                "bg-[var(--badge-warning-bg)]",
+                "text-[var(--badge-warning-text)]",
+            ],
+            info: [
+                "bg-[var(--badge-info-bg)]",
+                "text-[var(--badge-info-text)]",
+            ],
+            error: [
+                "bg-[var(--badge-error-bg)]",
+                "text-[var(--badge-error-text)]",
+            ],
+        },
+        clickable: {
+            true: "border border-solid",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        { color: "default", clickable: true, className: "border-[var(--badge-default-border)]" },
+        { color: "success", clickable: true, className: "border-[var(--badge-success-border)]" },
+        { color: "warning", clickable: true, className: "border-[var(--badge-warning-border)]" },
+        { color: "info", clickable: true, className: "border-[var(--badge-info-border)]" },
+        { color: "error", clickable: true, className: "border-[var(--badge-error-border)]" },
+    ],
+    defaultVariants: {
+        color: "default",
+        clickable: false,
+    },
+});
+export const severityBadgeVariants = cva([
+    "inline-flex items-center justify-center rounded px-1 py-0.5",
+    "typography-small6 text-[var(--badge-severity-text)]",
+], {
+    variants: {
+        severity: {
+            highest: "bg-[var(--badge-severity-highest-bg)]",
+            high: "bg-[var(--badge-severity-high-bg)]",
+            medium: "bg-[var(--badge-severity-medium-bg)]",
+            low: "bg-[var(--badge-severity-low-bg)]",
+            lowest: "bg-[var(--badge-severity-lowest-bg)]",
+        },
+    },
+    defaultVariants: {
+        severity: "medium",
+    },
+});

package/dist/components/Badge/index.js

@@ -0,0 +1,2 @@
+import { Badge, SeverityBadge } from "./Badge";
+export { Badge, SeverityBadge };

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,7 +23,7 @@ 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;
@@ -39,29 +39,42 @@ const DropdownMenuContent = React.forwardRef((_a, ref) => {
 });
 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) => {