@rovula/ui 0.1.20 → 0.1.22

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode, CSSProperties, FC, ComponentPropsWithoutRef, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
+import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef, CSSProperties, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -17,7 +17,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { ToastProviderProps } from '@radix-ui/react-toast';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { FieldValues, UseFormReturn, DefaultValues, SubmitHandler, SubmitErrorHandler, Resolver, Mode, FieldPath, RegisterOptions, FieldPathValue } from 'react-hook-form';
+import { FieldValues, UseFormReturn, DefaultValues, SubmitHandler, SubmitErrorHandler, FormState, Resolver, Mode, FieldPath, RegisterOptions, FieldPathValue } from 'react-hook-form';
 import * as yup from 'yup';
 import Button$1 from '@/components/Button/Button';
 import { ClassValue } from 'clsx';
@@ -376,70 +376,6 @@ 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;
@@ -457,7 +393,6 @@ type DropdownProps = {
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
-    defaultMenuItemType?: MenuOption["type"];
     helperText?: string;
     errorMessage?: string;
     filterMode?: boolean;
@@ -465,6 +400,7 @@ type DropdownProps = {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
+    /** @deprecated no longer needed */
     modal?: boolean;
     className?: string;
     optionContainerClassName?: string;
@@ -479,8 +415,6 @@ type DropdownProps = {
         optionsFiltered: Options$1[];
         selectedOption: Options$1 | null | undefined;
         onClick: (option: Options$1) => void;
-        style?: CSSProperties;
-        dropdownRef?: React__default.RefObject<HTMLUListElement>;
     }) => ReactNode;
 } & Omit<InputProps, "value" | "onSelect">;
 declare const Dropdown: React__default.ForwardRefExoticComponent<{
@@ -489,7 +423,6 @@ 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;
@@ -497,6 +430,7 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
+    /** @deprecated no longer needed */
     modal?: boolean;
     className?: string;
     optionContainerClassName?: string;
@@ -511,8 +445,6 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
         optionsFiltered: Options$1[];
         selectedOption: Options$1 | null | undefined;
         onClick: (option: Options$1) => void;
-        style?: CSSProperties;
-        dropdownRef?: React__default.RefObject<HTMLUListElement>;
     }) => ReactNode;
 } & Omit<InputProps, "onSelect" | "value"> & React__default.RefAttributes<HTMLInputElement>>;
 
@@ -626,6 +558,45 @@ type AvatarGroupProps = {
 };
 declare const AvatarGroup: FC<AvatarGroupProps>;
 
+type BadgeColor = "default" | "success" | "warning" | "info" | "error";
+type BadgeProps = {
+    /** Badge text label */
+    label: string;
+    /** Color variant */
+    color?: BadgeColor;
+    /**
+     * Show a dropdown chevron — use when the badge acts as a clickable trigger.
+     * Automatically adds a border to indicate interactivity.
+     */
+    clickable?: boolean;
+    /** Optional percentage value shown below the label */
+    percent?: number;
+    className?: string;
+} & React.HTMLAttributes<HTMLSpanElement>;
+declare const Badge: React.ForwardRefExoticComponent<{
+    /** Badge text label */
+    label: string;
+    /** Color variant */
+    color?: BadgeColor;
+    /**
+     * Show a dropdown chevron — use when the badge acts as a clickable trigger.
+     * Automatically adds a border to indicate interactivity.
+     */
+    clickable?: boolean;
+    /** Optional percentage value shown below the label */
+    percent?: number;
+    className?: string;
+} & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+type SeverityLevel = "highest" | "high" | "medium" | "low" | "lowest";
+type SeverityBadgeProps = {
+    severity: SeverityLevel;
+    className?: string;
+} & React.HTMLAttributes<HTMLSpanElement>;
+declare const SeverityBadge: React.ForwardRefExoticComponent<{
+    severity: SeverityLevel;
+    className?: string;
+} & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+
 declare const CollapsibleButton: React__default.ForwardRefExoticComponent<{
     children: React__default.ReactNode;
     className?: string;
@@ -942,9 +913,13 @@ declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<Dropd
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
+    selected?: boolean;
+    icon?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    icon?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
@@ -1166,6 +1141,44 @@ type FocusedScrollViewProps = {
 };
 declare const FocusedScrollView: React__default.FC<FocusedScrollViewProps>;
 
+type ScrollbarSize = "m" | "s" | "xs";
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Scrollbar thickness.
+     * - `m`  — 12 px  (shows track border)
+     * - `s`  — 6 px   (default, shows no track border)
+     * - `xs` — 2 px   (shows no track border)
+     */
+    scrollbarSize?: ScrollbarSize;
+    /**
+     * Direction(s) the area can scroll.
+     * Defaults to `"vertical"`.
+     */
+    direction?: "vertical" | "horizontal" | "both";
+}
+/**
+ * ScrollArea
+ *
+ * A thin wrapper that applies the design-system scrollbar style to any
+ * scrollable container. Use `scrollbarSize` to pick the Figma size variant
+ * and `direction` to control which axis scrolls.
+ *
+ * **Client usage:**
+ * ```tsx
+ * <ScrollArea className="max-h-[270px]">
+ *   {items.map(item => <div key={item.id}>{item.label}</div>)}
+ * </ScrollArea>
+ * ```
+ *
+ * For a double-scroll layout (two independent sections inside one dropdown),
+ * wrap each section individually:
+ * ```tsx
+ * <ScrollArea className="max-h-[160px]">...section A items...</ScrollArea>
+ * <ScrollArea className="max-h-[160px]">...section B items...</ScrollArea>
+ * ```
+ */
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
@@ -1184,6 +1197,7 @@ type FormProps<TFieldValues extends FieldValues> = Omit<FormHTMLAttributes<HTMLF
     controllerRef?: React__default.MutableRefObject<FormController<TFieldValues> | null>;
     onSubmit: SubmitHandler<TFieldValues>;
     onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
+    onFormStateChange?: (formState: FormState<TFieldValues>) => void;
     resolver?: Resolver<TFieldValues>;
     validationSchema?: yup.ObjectSchema<any>;
     mode?: Mode;
@@ -1350,6 +1364,74 @@ type FormDialogProps = {
 };
 declare const FormDialog: React.FC<FormDialogProps>;
 
+type MenuOption = {
+    value: string;
+    label: ReactNode;
+    /**
+     * Visual type of the item
+     * - "default": selected indicator (check icon on left)
+     * - "checkbox": visual checkbox
+     * - "radio": radio selection (single-select in group)
+     */
+    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: "submenu";
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Nested items — rendered via DropdownMenuSub */
+    items: MenuItemType[];
+};
+type MenuProps = {
+    /** Trigger element — optional, ถ้าไม่ส่งให้ใช้ open/onOpenChange ควบคุมเอง */
+    trigger?: ReactNode;
+    items: MenuItemType[];
+    selectedValues?: string[];
+    /**
+     * Callback on item select
+     * - "checkbox" → caller toggles in selectedValues
+     * - "radio"    → caller sets single value in selectedValues
+     * - "default"  → same
+     */
+    onSelect?: (value: string, item: MenuOption) => void;
+    /**
+     * Optional header rendered above the item list — stays fixed while list scrolls.
+     * ใช้สำหรับ pattern เช่น "Change Status" (title + close button)
+     * หรือ "Manage Column" (title + Hide all / Show all / Done)
+     */
+    header?: ReactNode;
+    /** Controlled open state */
+    open?: boolean;
+    /** Called when open state changes (controlled or uncontrolled) */
+    onOpenChange?: (open: boolean) => void;
+    /** Alignment of the menu content relative to the trigger */
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+    contentClassName?: string;
+};
+declare const Menu: {
+    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, }: MenuProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 declare const resloveTimestamp: (timestamp: number) => number;
 declare const getStartDateOfDay: (date: Date) => Date;
 declare const getEndDateOfDay: (date: Date) => Date;
@@ -1789,4 +1871,4 @@ declare const srgbToHex: (color: string) => string;
  */
 declare function getLucideIconNames(): Promise<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, ConfirmDialog, type ConfirmDialogProps, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogBody, 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, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, FormDialog, type FormDialogAction, type FormDialogProps, type FormProps, 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, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, 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, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeColor, type BadgeProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, ConfirmDialog, type ConfirmDialogProps, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogBody, 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, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, FormDialog, type FormDialogAction, type FormDialogProps, type FormProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, DropdownMenuItem as MenuItem, type MenuItemType, DropdownMenuLabel as MenuLabel, type MenuOption, type MenuProps, DropdownMenuSeparator as MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, ScrollArea, type ScrollAreaProps, type ScrollbarSize, Search, type SearchProps, SeverityBadge, type SeverityBadgeProps, type SeverityLevel, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, 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, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };

package/dist/index.js

@@ -18,6 +18,7 @@ export { Navbar } from "./components/Navbar";
 export { Footer } from "./components/Footer";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
+export { Badge, SeverityBadge } from "./components/Badge";
 export { Collapsible } from "./components/Collapsible";
 export { Calendar } from "./components/Calendar";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
@@ -36,7 +37,6 @@ 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";
@@ -44,11 +44,13 @@ export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 export * from "./components/FocusedScrollView/FocusedScrollView";
+export * from "./components/ScrollArea/ScrollArea";
 export * from "./components/RadioGroup/RadioGroup";
 export * from "./components/Form";
 // Patterns
 export * from "./patterns/confirm-dialog/ConfirmDialog";
 export * from "./patterns/form-dialog/FormDialog";
+export * from "./patterns/menu/Menu";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 // Hooks

package/dist/patterns/menu/Menu.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "@/utils/cn";
+import { DropdownMenu as DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from "../../components/DropdownMenu/DropdownMenu";
+// ---------------------------------------------------------------------------
+// renderMenuItems — recursive, used for both root and submenu levels
+// ---------------------------------------------------------------------------
+function renderMenuItems(items, selectedValues, onSelect) {
+    const result = [];
+    let radioBuffer = [];
+    const flushRadioBuffer = (key) => {
+        var _a, _b;
+        if (radioBuffer.length === 0)
+            return;
+        const buffer = radioBuffer;
+        radioBuffer = [];
+        const radioValue = (_b = (_a = buffer.find((o) => selectedValues.includes(o.value))) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+        result.push(_jsx(DropdownMenuRadioGroup, { value: radioValue, onValueChange: (val) => {
+                var _a;
+                const opt = buffer.find((o) => o.value === val);
+                if (opt) {
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(val, opt);
+                    (_a = opt.onClick) === null || _a === void 0 ? void 0 : _a.call(opt);
+                }
+            }, children: buffer.map((opt) => (_jsx(DropdownMenuRadioItem, { value: opt.value, disabled: opt.disabled, icon: opt.icon, children: opt.label }, opt.value))) }, key));
+    };
+    items.forEach((item, index) => {
+        var _a;
+        // Accumulate consecutive radio items
+        if (item.type === "item" && item.item.type === "radio") {
+            radioBuffer.push(item.item);
+            return;
+        }
+        // Flush radio buffer before non-radio item
+        flushRadioBuffer(`radio-${index}`);
+        if (item.type === "separator") {
+            result.push(_jsx(DropdownMenuSeparator, {}, `sep-${index}`));
+            return;
+        }
+        if (item.type === "label") {
+            result.push(_jsx(DropdownMenuLabel, { children: item.label }, `lbl-${index}`));
+            return;
+        }
+        if (item.type === "custom") {
+            result.push(_jsx(React.Fragment, { children: item.render() }, `custom-${index}`));
+            return;
+        }
+        if (item.type === "submenu") {
+            result.push(_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { disabled: item.disabled, children: [_jsxs("div", { className: "flex shrink-0 flex-row gap-1", children: [_jsx("span", { className: "size-4" }), item.icon] }), item.label] }), _jsx(DropdownMenuSubContent, { children: renderMenuItems(item.items, selectedValues, onSelect) })] }, `sub-${index}`));
+            return;
+        }
+        if (item.type === "item") {
+            const opt = item.item;
+            const isSelected = (_a = opt.checked) !== null && _a !== void 0 ? _a : selectedValues.includes(opt.value);
+            if (opt.type === "checkbox") {
+                result.push(_jsx(DropdownMenuCheckboxItem, { checked: isSelected, disabled: opt.disabled, onCheckedChange: () => {
+                        var _a;
+                        onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt.value, opt);
+                        (_a = opt.onClick) === null || _a === void 0 ? void 0 : _a.call(opt);
+                    }, children: opt.label }, opt.value));
+                return;
+            }
+            // default item
+            result.push(_jsx(DropdownMenuItem, { selected: isSelected, icon: opt.icon, disabled: opt.disabled, className: cn(opt.danger && "text-red-500"), onSelect: () => {
+                    var _a;
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt.value, opt);
+                    (_a = opt.onClick) === null || _a === void 0 ? void 0 : _a.call(opt);
+                }, children: opt.label }, opt.value));
+        }
+    });
+    flushRadioBuffer("radio-end");
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Menu — top-level pattern component built on DropdownMenu
+//
+// ใช้งาน:
+//   <Menu trigger={<Button>Open</Button>} items={[...]} onSelect={...} />
+//
+// ได้ของฟรีจาก DropdownMenu:
+//   - Radix positioning (flip, scroll, sideOffset)
+//   - Portal (z-index, escape stacking context)
+//   - Escape to close, click-outside to close
+//   - Keyboard navigation (Arrow, Enter, Escape)
+//   - Full a11y / WAI-ARIA
+//   - Sub-menu support via DropdownMenuSub
+// ---------------------------------------------------------------------------
+export const Menu = ({ trigger, items, selectedValues = [], onSelect, header, open, onOpenChange, align = "start", side = "bottom", sideOffset = 4, contentClassName, }) => (_jsxs(DropdownMenuRoot, { open: open, onOpenChange: onOpenChange, children: [trigger && (_jsx(DropdownMenuTrigger, { asChild: true, children: trigger })), _jsxs(DropdownMenuContent, { align: align, side: side, sideOffset: sideOffset, className: contentClassName, children: [header && (_jsx("div", { className: "sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]", children: header })), renderMenuItems(items, selectedValues, onSelect)] })] }));
+Menu.displayName = "Menu";
+// ---------------------------------------------------------------------------
+// Re-exports — backward compat for consumers using Menu's sub-components
+// ---------------------------------------------------------------------------
+export { DropdownMenuItem as MenuItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuLabel as MenuLabel, } from "../../components/DropdownMenu/DropdownMenu";
+export default Menu;