@rovula/ui 0.0.78 → 0.0.80

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/index.d.ts

@@ -298,6 +298,70 @@ type TabsProps = {
 };
 declare const Tabs: React__default.FC<TabsProps>;
 
+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;
+};
+type MenuItemType = {
+    type: "item";
+    item: MenuOption;
+} | {
+    type: "separator";
+} | {
+    type: "label";
+    label: string;
+} | {
+    type: "custom";
+    render: () => ReactNode;
+};
+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;
+};
+declare const Menu: React__default.ForwardRefExoticComponent<MenuProps & React__default.RefAttributes<HTMLDivElement>>;
+type MenuItemProps = {
+    option: MenuOption;
+    visualType: "default" | "checkbox" | "radio";
+    isChecked: boolean;
+    onSelect: () => void;
+    className?: string;
+};
+declare const MenuItem: React__default.ForwardRefExoticComponent<MenuItemProps & React__default.RefAttributes<HTMLDivElement>>;
+type MenuSeparatorProps = {
+    className?: string;
+};
+declare const MenuSeparator: React__default.ForwardRefExoticComponent<MenuSeparatorProps & React__default.RefAttributes<HTMLDivElement>>;
+type MenuLabelProps = {
+    children: ReactNode;
+    className?: string;
+};
+declare const MenuLabel: React__default.ForwardRefExoticComponent<MenuLabelProps & React__default.RefAttributes<HTMLDivElement>>;
+
 type RenderLabelCallbackArg$1 = {
     value: string;
     label: string;
@@ -315,6 +379,7 @@ type DropdownProps = {
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    defaultMenuItemType?: MenuOption["type"];
     helperText?: string;
     errorMessage?: string;
     filterMode?: boolean;
@@ -345,6 +410,7 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    defaultMenuItemType?: MenuOption["type"];
     helperText?: string;
     errorMessage?: string;
     filterMode?: boolean;
@@ -588,8 +654,50 @@ declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<Alert
 declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type SearchProps = Omit<DropdownProps, "isFloatingLabel" | "keepCloseIconOnValue" | "hasClearIcon" | "hasSearchIcon" | "endIcon" | "filterMode" | "isFloatingLabel">;
-declare const Search: React__default.ForwardRefExoticComponent<SearchProps & React__default.RefAttributes<HTMLInputElement>>;
+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$1[];
+    value?: Options$1;
+    onChangeText?: InputProps["onChange"];
+    onSelect?: (value: Options$1) => void;
+} & Omit<InputProps, "value" | "onSelect">;
+declare const Search: React__default.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$1[];
+    value?: Options$1;
+    onChangeText?: InputProps["onChange"];
+    onSelect?: (value: Options$1) => void;
+} & Omit<InputProps, "onSelect" | "value"> & React__default.RefAttributes<HTMLInputElement>>;
 
 type RenderLabelCallbackArg = {
     value: string;
@@ -918,4 +1026,4 @@ declare function usePrevious<T>(value: T): T | undefined;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Navbar, type NavbarProps, NumberInput, type NumberInputProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, MenuItem, type MenuItemType, MenuLabel, type MenuOption, type MenuProps, MenuSeparator, Navbar, type NavbarProps, NumberInput, type NumberInputProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };

package/dist/index.js

@@ -32,6 +32,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/src/theme/global.css

@@ -2344,6 +2344,10 @@ input[type=number] {
   z-index: 10;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -2356,10 +2360,6 @@ input[type=number] {
   z-index: 100;
 }
 
-.z-\[9999\] {
-  z-index: 9999;
-}
-
 .col-span-3 {
   grid-column: span 3 / span 3;
 }
@@ -2712,6 +2712,10 @@ input[type=number] {
   width: 2rem;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
 .w-\[100px\] {
   width: 100px;
 }
@@ -6060,6 +6064,10 @@ input[type=number] {
   caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .opacity-60 {
   opacity: 0.6;
 }
@@ -6570,6 +6578,10 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.hover\:bg-\[var\(--dropdown-menu-hover-bg\)\]:hover {
+  background-color: var(--dropdown-menu-hover-bg);
+}
+
 .hover\:bg-action-button-icon-active-hover:hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6841,6 +6853,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
 }
 
+.hover\:text-\[var\(--dropdown-menu-hover-text\)\]:hover {
+  color: var(--dropdown-menu-hover-text);
+}
+
 .hover\:text-action-button-icon-active-hover:hover {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Dropdown, { Options } from "./Dropdown";
 import Button from "../Button/Button";
 import { cn } from "@/utils/cn";
+import { MenuItemType } from "../Menu/Menu";
+import Icon from "../Icon/Icon";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -167,3 +169,32 @@ export const CustomOption = {
     );
   },
 } satisfies StoryObj;
+
+// ==================== Advanced Menu Features ====================
+
+export const WithIcons: StoryObj<typeof Dropdown> = {
+  render: () => {
+    const [selectedValue, setSelectedValue] = useState<Options | undefined>();
+
+    const optionsWithIcons: Options[] = [
+      { value: "apple", label: "🍎 Apple" },
+      { value: "banana", label: "🍌 Banana" },
+      { value: "carrot", label: "🥕 Carrot" },
+      { value: "broccoli", label: "🥦 Broccoli" },
+    ];
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Dropdown
+          id="with-icons"
+          size="lg"
+          label="Select Food"
+          fullwidth
+          options={optionsWithIcons}
+          value={selectedValue}
+          onSelect={(option) => setSelectedValue(option)}
+        />
+      </div>
+    );
+  },
+};