@rovula/ui 0.0.77 → 0.0.79

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

@@ -2,6 +2,7 @@ import "./theme/global.css";
 import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as MaskedTextInput } from "./components/MaskedTextInput";
 export { NumberInput } from "./components/NumberInput/NumberInput";
 export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
@@ -29,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";
@@ -39,6 +41,7 @@ export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { MaskedTextInputProps, MaskRule, } from "./components/MaskedTextInput";
 export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

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) }) }));
+    },
+};