@rovula/ui 0.0.78 → 0.0.79

package/dist/cjs/types/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,6 @@
 import React, { CSSProperties, ReactNode } from "react";
 import { InputProps } from "../TextInput/TextInput";
+import { MenuOption } from "../Menu/Menu";
 type RenderLabelCallbackArg = {
     value: string;
     label: string;
@@ -17,6 +18,7 @@ export type DropdownProps = {
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    defaultMenuItemType?: MenuOption["type"];
     helperText?: string;
     errorMessage?: string;
     filterMode?: boolean;
@@ -47,6 +49,7 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    defaultMenuItemType?: MenuOption["type"];
     helperText?: string;
     errorMessage?: string;
     filterMode?: boolean;

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import { Options } from "./Dropdown";
+import type { StoryObj } from "@storybook/react";
+import Dropdown, { Options } from "./Dropdown";
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<{
@@ -8,6 +9,7 @@ declare const meta: {
         size?: "sm" | "md" | "lg";
         rounded?: "none" | "normal" | "full";
         variant?: "flat" | "outline" | "underline";
+        defaultMenuItemType?: import("../Menu/Menu").MenuOption["type"];
         helperText?: string;
         errorMessage?: string;
         filterMode?: boolean;
@@ -42,6 +44,7 @@ declare const meta: {
         size?: "sm" | "md" | "lg" | undefined;
         rounded?: "none" | "normal" | "full" | undefined;
         variant?: "flat" | "outline" | "underline" | undefined;
+        defaultMenuItemType?: "checkbox" | "radio" | "default" | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
         filterMode?: boolean | undefined;
@@ -405,3 +408,4 @@ export declare const CustomOption: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const WithIcons: StoryObj<typeof Dropdown>;

package/dist/cjs/types/components/Menu/Menu.d.ts

@@ -0,0 +1,65 @@
+import React, { CSSProperties, ReactNode } from "react";
+export type MenuOption = {
+    value: string;
+    label: ReactNode;
+    /**
+     * Visual type - กำหนดว่าจะแสดง icon อะไร
+     * - "default": ไม่มี icon (แค่ highlight background)
+     * - "checkbox": แสดง ✓ icon
+     * - "radio": แสดง ● icon
+     */
+    type?: "default" | "checkbox" | "radio";
+    icon?: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    checked?: boolean;
+    onClick?: () => void;
+};
+export type MenuItemType = {
+    type: "item";
+    item: MenuOption;
+} | {
+    type: "separator";
+} | {
+    type: "label";
+    label: string;
+} | {
+    type: "custom";
+    render: () => ReactNode;
+};
+export type MenuProps = {
+    items: MenuItemType[];
+    /**
+     * Selected values - ใช้กับ type="item"
+     */
+    selectedValues?: string[];
+    /**
+     * Callback เมื่อเลือก item
+     * - ถ้า item.type="checkbox" → toggle checked state
+     * - ถ้า item.type="radio" → single select (clear others)
+     * - ถ้า item.type="default" หรือไม่ระบุ → ตาม selectedValues
+     */
+    onSelect?: (value: string, item: MenuOption) => void;
+    className?: string;
+    style?: CSSProperties;
+    isAbove?: boolean;
+};
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+type MenuItemProps = {
+    option: MenuOption;
+    visualType: "default" | "checkbox" | "radio";
+    isChecked: boolean;
+    onSelect: () => void;
+    className?: string;
+};
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
+type MenuSeparatorProps = {
+    className?: string;
+};
+export declare const MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+type MenuLabelProps = {
+    children: ReactNode;
+    className?: string;
+};
+export declare const MenuLabel: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+export default Menu;

package/dist/cjs/types/components/Menu/Menu.stories.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { Menu, MenuItemType } from "./Menu";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Menu").MenuProps & React.RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        items: MenuItemType[];
+        selectedValues?: string[] | undefined;
+        onSelect?: ((value: string, item: import("./Menu").MenuOption) => void) | undefined;
+        className?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        isAbove?: boolean | undefined;
+        ref?: React.LegacyRef<HTMLDivElement> | undefined;
+        key?: React.Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Basic: StoryObj<typeof Menu>;
+export declare const WithIcons: StoryObj<typeof Menu>;
+export declare const WithCheckbox: StoryObj<typeof Menu>;
+export declare const WithRadio: StoryObj<typeof Menu>;
+export declare const ComplexMenu: StoryObj<typeof Menu>;
+export declare const WithDropdownTrigger: StoryObj<typeof Menu>;
+export declare const CustomItems: StoryObj<typeof Menu>;
+export declare const DropdownPattern: StoryObj<typeof Menu>;
+export declare const MultiSelectPattern: StoryObj<typeof Menu>;

package/dist/cjs/types/components/Menu/helpers.d.ts

@@ -0,0 +1,19 @@
+import { MenuItemType } from "./Menu";
+/**
+ * Helper function to convert simple options to MenuItemType
+ * Useful for integrating with Dropdown component
+ */
+export declare function optionsToMenuItems(options: Array<{
+    value: string;
+    label: string | React.ReactNode;
+    disabled?: boolean;
+    renderLabel?: any;
+}>): MenuItemType[];
+/**
+ * Helper to add separator between menu items
+ */
+export declare function withSeparator(items: MenuItemType[], atIndex: number): MenuItemType[];
+/**
+ * Helper to add label/header to menu items
+ */
+export declare function withLabel(label: string, items: MenuItemType[]): MenuItemType[];

package/dist/cjs/types/components/Menu/index.d.ts

@@ -0,0 +1,4 @@
+export { Menu, MenuItem, MenuSeparator, MenuLabel } from "./Menu";
+export type { MenuOption, MenuItemType, MenuProps } from "./Menu";
+export { optionsToMenuItems, withSeparator, withLabel } from "./helpers";
+export { default } from "./Menu";

package/dist/cjs/types/components/Search/Search.d.ts

@@ -1,5 +1,48 @@
 import React from "react";
-import { DropdownProps } from "../Dropdown/Dropdown";
-export type SearchProps = Omit<DropdownProps, "isFloatingLabel" | "keepCloseIconOnValue" | "hasClearIcon" | "hasSearchIcon" | "endIcon" | "filterMode" | "isFloatingLabel">;
-declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
+import { Options } from "../Dropdown/Dropdown";
+import { InputProps } from "../TextInput/TextInput";
+export type SearchProps = {
+    id?: string;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    rounded?: "none" | "normal" | "full";
+    variant?: "flat" | "outline" | "underline";
+    helperText?: string;
+    errorMessage?: string;
+    fullwidth?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    modal?: boolean;
+    className?: string;
+    optionContainerClassName?: string;
+    optionItemClassName?: string;
+    optionNotFoundItemClassName?: string;
+    options: Options[];
+    value?: Options;
+    onChangeText?: InputProps["onChange"];
+    onSelect?: (value: Options) => void;
+} & Omit<InputProps, "value" | "onSelect">;
+declare const Search: React.ForwardRefExoticComponent<{
+    id?: string;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    rounded?: "none" | "normal" | "full";
+    variant?: "flat" | "outline" | "underline";
+    helperText?: string;
+    errorMessage?: string;
+    fullwidth?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    modal?: boolean;
+    className?: string;
+    optionContainerClassName?: string;
+    optionItemClassName?: string;
+    optionNotFoundItemClassName?: string;
+    options: Options[];
+    value?: Options;
+    onChangeText?: InputProps["onChange"];
+    onSelect?: (value: Options) => void;
+} & Omit<InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
 export { Search };

package/dist/cjs/types/components/Search/Search.stories.d.ts

@@ -2,18 +2,56 @@ import React from "react";
 import { Options } from "../Dropdown/Dropdown";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./Search").SearchProps & React.RefAttributes<HTMLInputElement>>;
+    component: React.ForwardRefExoticComponent<{
+        id?: string;
+        label?: string;
+        size?: "sm" | "md" | "lg";
+        rounded?: "none" | "normal" | "full";
+        variant?: "flat" | "outline" | "underline";
+        helperText?: string;
+        errorMessage?: string;
+        fullwidth?: boolean;
+        disabled?: boolean;
+        error?: boolean;
+        required?: boolean;
+        modal?: boolean;
+        className?: string;
+        optionContainerClassName?: string;
+        optionItemClassName?: string;
+        optionNotFoundItemClassName?: string;
+        options: Options[];
+        value?: Options;
+        onChangeText?: import("../..").InputProps["onChange"];
+        onSelect?: (value: Options) => void;
+    } & Omit<import("../..").InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        id?: string | undefined;
+        label?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        rounded?: "none" | "normal" | "full" | undefined;
         variant?: "flat" | "outline" | "underline" | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
+        helperText?: string | undefined;
+        errorMessage?: string | undefined;
+        fullwidth?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        modal?: boolean | undefined;
         className?: string | undefined;
+        optionContainerClassName?: string | undefined;
+        optionItemClassName?: string | undefined;
+        optionNotFoundItemClassName?: string | undefined;
+        options: Options[];
+        value?: Options | undefined;
+        onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+        onSelect?: ((value: Options) => void) | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
         color?: string | undefined | undefined;
         height?: number | string | undefined | undefined;
-        id?: string | undefined;
         lang?: string | undefined | undefined;
         max?: number | string | undefined | undefined;
         min?: number | string | undefined | undefined;
@@ -200,7 +238,6 @@ declare const meta: {
         onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
         onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
         onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
-        onSelect?: ((value: Options) => void) | undefined;
         onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
         onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
         onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
@@ -243,18 +280,14 @@ declare const meta: {
         form?: string | undefined | undefined;
         list?: string | undefined | undefined;
         step?: number | string | undefined | undefined;
-        error?: boolean | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        disabled?: boolean | undefined;
-        fullwidth?: boolean | undefined;
         title?: string | undefined | undefined;
         startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
         formAction?: string | undefined;
         formEncType?: string | undefined | undefined;
         formMethod?: string | undefined | undefined;
         formNoValidate?: boolean | undefined | undefined;
         formTarget?: string | undefined | undefined;
-        value?: Options | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -295,7 +328,9 @@ declare const meta: {
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
-        rounded?: "none" | "normal" | "full" | undefined;
+        hasClearIcon?: boolean | undefined;
+        hasSearchIcon?: boolean | undefined;
+        isFloatingLabel?: boolean | undefined;
         accept?: string | undefined | undefined;
         alt?: string | undefined | undefined;
         autoComplete?: React.HTMLInputAutoCompleteAttribute | undefined;
@@ -307,12 +342,9 @@ declare const meta: {
         pattern?: string | undefined | undefined;
         placeholder?: string | undefined | undefined;
         readOnly?: boolean | undefined | undefined;
-        required?: boolean | undefined;
         src?: string | undefined | undefined;
-        label?: string | undefined;
         iconMode?: "flat" | "solid" | undefined;
-        helperText?: string | undefined;
-        errorMessage?: string | undefined;
+        keepCloseIconOnValue?: boolean | undefined;
         labelClassName?: string | undefined;
         classes?: {
             iconWrapper?: string;
@@ -325,19 +357,6 @@ declare const meta: {
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
-        modal?: boolean | undefined;
-        optionContainerClassName?: string | undefined;
-        optionItemClassName?: string | undefined;
-        optionNotFoundItemClassName?: string | undefined;
-        options: Options[];
-        onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
-        renderOptions?: ((value: {
-            optionsFiltered: Options[];
-            selectedOption: Options | null | undefined;
-            onClick: (option: Options) => void;
-            style?: React.CSSProperties;
-            dropdownRef?: React.RefObject<HTMLUListElement>;
-        }) => React.ReactNode) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/cjs/types/index.d.ts

@@ -30,6 +30,7 @@ export * from "./components/InputFilter/InputFilter";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
 export * from "./components/DropdownMenu/DropdownMenu";
+export * from "./components/Menu/Menu";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";

package/dist/components/Dropdown/Dropdown.js

@@ -10,14 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, Fragment, } from "react";
 import * as Portal from "@radix-ui/react-portal";
 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";
 const Dropdown = forwardRef((_a, ref) => {
-    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal = false, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName } = _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"]);
+    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 } = _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"]);
     const _id = id || `${label}-select`;
     const [isFocused, setIsFocused] = useState(false);
     const [selectedOption, setSelectedOption] = useState(null);
@@ -116,23 +117,44 @@ const Dropdown = forwardRef((_a, ref) => {
                 dropdownRef,
             });
         }
-        return (_jsxs("ul", { className: cn("absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-[9999] max-h-60 overflow-y-auto", !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"), optionContainerClassName), style: dropdownStyles, ref: dropdownRef, children: [optionsFiltered.map((option) => {
-                    if (option.renderLabel) {
-                        return (_jsx(Fragment, { children: option.renderLabel({
-                                value: option.value,
-                                label: option.label,
-                                handleOnClick: () => handleOptionClick(option),
-                                className: cn(`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`, optionItemClassName, {
-                                    "bg-base-popup-highligh": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
-                                }),
-                            }) }, option.value));
-                    }
-                    return (_jsx("li", { onMouseDown: () => {
-                            handleOptionClick(option);
-                        }, className: cn(`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`, optionItemClassName, {
-                            "bg-base-popup-highligh": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
-                        }), children: option.label }, option.value));
-                }), optionsFiltered.length === 0 && (_jsx("li", { className: cn("px-4 py-14 text-center text-input-text", optionNotFoundItemClassName), children: "Not found" }))] }));
+        // Convert options to MenuItemType
+        let finalMenuItems;
+        finalMenuItems = 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-subtitile4 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-subtitile5": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
+                            }, optionItemClassName),
+                        }) }, option.value)),
+                };
+            }
+            return {
+                type: "item",
+                item: {
+                    type: defaultMenuItemType,
+                    value: option.value,
+                    label: option.label,
+                },
+            };
+        });
+        // 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;

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

@@ -100,3 +100,16 @@ export const CustomOption = {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Dropdown, Object.assign({ id: "1", size: "lg", options: options }, args, { onChangeText: onChangeText })) }));
     },
 };
+// ==================== Advanced Menu Features ====================
+export const WithIcons = {
+    render: () => {
+        const [selectedValue, setSelectedValue] = useState();
+        const optionsWithIcons = [
+            { value: "apple", label: "🍎 Apple" },
+            { value: "banana", label: "🍌 Banana" },
+            { value: "carrot", label: "🥕 Carrot" },
+            { value: "broccoli", label: "🥦 Broccoli" },
+        ];
+        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) }) }));
+    },
+};

package/dist/components/Menu/Menu.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, } from "react";
+import { cn } from "@/utils/cn";
+import Icon from "../Icon/Icon";
+// ==================== Menu Container ====================
+export const Menu = forwardRef(({ items, selectedValues = [], onSelect, className, style, isAbove = false }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground", "border border-base-popup", className), style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, style), children: items.map((item, index) => {
+            var _a;
+            if (item.type === "separator") {
+                return _jsx(MenuSeparator, {}, `separator-${index}`);
+            }
+            if (item.type === "label") {
+                return _jsx(MenuLabel, { children: item.label }, `label-${index}`);
+            }
+            if (item.type === "custom") {
+                return (_jsx(React.Fragment, { children: item.render() }, `custom-${index}`));
+            }
+            const itemOption = item.item;
+            const visualType = itemOption.type || "default";
+            // Determine checked/selected state
+            let isChecked = false;
+            if (visualType === "checkbox" || visualType === "radio") {
+                isChecked =
+                    (_a = itemOption.checked) !== null && _a !== void 0 ? _a : selectedValues.includes(itemOption.value);
+            }
+            else {
+                isChecked = selectedValues.includes(itemOption.value);
+            }
+            return (_jsx(MenuItem, { option: itemOption, visualType: visualType, isChecked: isChecked, onSelect: () => {
+                    var _a;
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemOption.value, itemOption);
+                    (_a = itemOption.onClick) === null || _a === void 0 ? void 0 : _a.call(itemOption);
+                } }, itemOption.value));
+        }) }));
+});
+Menu.displayName = "Menu";
+export const MenuItem = forwardRef(({ option, visualType, isChecked, onSelect, className }, ref) => {
+    // Render indicator based on visual type
+    const renderIndicator = () => {
+        if (visualType === "checkbox" && isChecked) {
+            return (_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(Icon, { type: "heroicons", name: "check", className: "size-4" }) }));
+        }
+        if (visualType === "radio" && isChecked) {
+            return (_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(Icon, { type: "heroicons", name: "circle", className: "h-2 w-2 fill-current" }) }));
+        }
+        return null;
+    };
+    return (_jsxs("div", { ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 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-subtitile5": isChecked,
+            "pointer-events-none opacity-50": option.disabled,
+            "text-red-500": option.danger,
+        }, className), onClick: option.disabled ? undefined : onSelect, children: [renderIndicator(), option.icon && _jsx("span", { className: "flex-shrink-0", children: option.icon }), option.label] }));
+});
+MenuItem.displayName = "MenuItem";
+export const MenuSeparator = forwardRef(({ className }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]", className) }));
+});
+MenuSeparator.displayName = "MenuSeparator";
+export const MenuLabel = forwardRef(({ children, className }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("px-3 py-2 typography-small4 text-text-grey-medium", className), children: children }));
+});
+MenuLabel.displayName = "MenuLabel";
+// ==================== Exports ====================
+export default Menu;