@rovula/ui 0.1.21 → 0.1.23

package/src/patterns/menu/Menu.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import React, { ReactNode } 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";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export 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;
+};
+
+export 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[];
+    };
+
+export 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;
+  /** data-testid attached to the menu content element */
+  testId?: string;
+};
+
+// ---------------------------------------------------------------------------
+// renderMenuItems — recursive, used for both root and submenu levels
+// ---------------------------------------------------------------------------
+
+function renderMenuItems(
+  items: MenuItemType[],
+  selectedValues: string[],
+  onSelect?: MenuProps["onSelect"],
+): ReactNode[] {
+  const result: ReactNode[] = [];
+  let radioBuffer: MenuOption[] = [];
+
+  const flushRadioBuffer = (key: string) => {
+    if (radioBuffer.length === 0) return;
+    const buffer = radioBuffer;
+    radioBuffer = [];
+
+    const radioValue =
+      buffer.find((o) => selectedValues.includes(o.value))?.value ?? "";
+
+    result.push(
+      <DropdownMenuRadioGroup
+        key={key}
+        value={radioValue}
+        onValueChange={(val: string) => {
+          const opt = buffer.find((o) => o.value === val);
+          if (opt) {
+            onSelect?.(val, opt);
+            opt.onClick?.();
+          }
+        }}
+      >
+        {buffer.map((opt) => (
+          <DropdownMenuRadioItem
+            key={opt.value}
+            value={opt.value}
+            disabled={opt.disabled}
+            icon={opt.icon as React.ReactNode}
+          >
+            {opt.label}
+          </DropdownMenuRadioItem>
+        ))}
+      </DropdownMenuRadioGroup>,
+    );
+  };
+
+  items.forEach((item, index) => {
+    // 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(<DropdownMenuSeparator key={`sep-${index}`} />);
+      return;
+    }
+
+    if (item.type === "label") {
+      result.push(
+        <DropdownMenuLabel key={`lbl-${index}`}>{item.label}</DropdownMenuLabel>,
+      );
+      return;
+    }
+
+    if (item.type === "custom") {
+      result.push(
+        <React.Fragment key={`custom-${index}`}>{item.render()}</React.Fragment>,
+      );
+      return;
+    }
+
+    if (item.type === "submenu") {
+      result.push(
+        <DropdownMenuSub key={`sub-${index}`}>
+          <DropdownMenuSubTrigger disabled={item.disabled}>
+            {/* mirror DropdownMenuItem icon layout */}
+            <div className="flex shrink-0 flex-row gap-1">
+              <span className="size-4" />
+              {item.icon}
+            </div>
+            {item.label}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            {renderMenuItems(item.items, selectedValues, onSelect)}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>,
+      );
+      return;
+    }
+
+    if (item.type === "item") {
+      const opt = item.item;
+      const isSelected = opt.checked ?? selectedValues.includes(opt.value);
+
+      if (opt.type === "checkbox") {
+        result.push(
+          <DropdownMenuCheckboxItem
+            key={opt.value}
+            checked={isSelected}
+            disabled={opt.disabled}
+            onCheckedChange={() => {
+              onSelect?.(opt.value, opt);
+              opt.onClick?.();
+            }}
+          >
+            {opt.label}
+          </DropdownMenuCheckboxItem>,
+        );
+        return;
+      }
+
+      // default item
+      result.push(
+        <DropdownMenuItem
+          key={opt.value}
+          selected={isSelected}
+          icon={opt.icon as React.ReactNode}
+          disabled={opt.disabled}
+          className={cn(opt.danger && "text-red-500")}
+          onSelect={() => {
+            onSelect?.(opt.value, opt);
+            opt.onClick?.();
+          }}
+        >
+          {opt.label}
+        </DropdownMenuItem>,
+      );
+    }
+  });
+
+  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,
+  testId,
+}: MenuProps) => (
+  <DropdownMenuRoot open={open} onOpenChange={onOpenChange}>
+    {trigger && (
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+    )}
+    <DropdownMenuContent
+      align={align}
+      side={side}
+      sideOffset={sideOffset}
+      className={contentClassName}
+      data-testid={testId}
+    >
+      {header && (
+        <div className="sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]">
+          {header}
+        </div>
+      )}
+      {renderMenuItems(items, selectedValues, onSelect)}
+    </DropdownMenuContent>
+  </DropdownMenuRoot>
+);
+
+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;

package/src/theme/presets/colors.js

@@ -159,6 +159,20 @@ module.exports = {
         "bg-stroke4": withColorMixin("--bg-stroke4"),
         "bg-stroke5": withColorMixin("--bg-stroke5"),
 
+        // Table
+        "table-bg-main": withColorMixin("--table-bg-main"),
+        "table-bg-line": withColorMixin("--table-bg-line"),
+        "table-bg-a": withColorMixin("--table-bg-a"),
+        "table-bg-b": withColorMixin("--table-bg-b"),
+        "table-bg-hover": withColorMixin("--table-bg-hover"),
+        "table-panel-hover": withColorMixin("--table-panel-hover"),
+        "table-panel-sub-line": withColorMixin("--table-panel-sub-line"),
+        "table-panel-main-line": withColorMixin("--table-panel-main-line"),
+        "table-panel-selected": withColorMixin("--table-panel-selected"),
+
+        // Modal dropdown surface
+        "modal-dropdown-surface": withColorMixin("--modal-dropdown-surface"),
+
         // Common
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

package/src/theme/themes/variable-mapping.css

@@ -353,6 +353,16 @@
   --bg-stroke3: var(--bg-stroke3-report-xspector-light-mode);
   --bg-stroke4: var(--bg-stroke4-report-xspector-light-mode);
   --bg-stroke5: var(--bg-stroke5-report-xspector-light-mode);
+  --table-bg-main: var(--table-bg-main-report-xspector-light-mode);
+  --table-bg-line: var(--table-bg-line-report-xspector-light-mode);
+  --table-bg-a: var(--table-bg-a-report-xspector-light-mode);
+  --table-bg-b: var(--table-bg-b-report-xspector-light-mode);
+  --table-bg-hover: var(--table-bg-hover-report-xspector-light-mode);
+  --table-panel-hover: var(--table-panel-hover-report-xspector-light-mode);
+  --table-panel-sub-line: var(--table-panel-sub-line-report-xspector-light-mode);
+  --table-panel-main-line: var(--table-panel-main-line-report-xspector-light-mode);
+  --table-panel-selected: var(--table-panel-selected-report-xspector-light-mode);
+  --modal-dropdown-surface: var(--modal-dropdown-surface-report-xspector-light-mode);
 }
 
 :root[data-theme="xspector"] {
@@ -707,6 +717,16 @@
   --bg-stroke3: var(--bg-stroke3-xspector);
   --bg-stroke4: var(--bg-stroke4-xspector);
   --bg-stroke5: var(--bg-stroke5-xspector);
+  --table-bg-main: var(--table-bg-main-xspector);
+  --table-bg-line: var(--table-bg-line-xspector);
+  --table-bg-a: var(--table-bg-a-xspector);
+  --table-bg-b: var(--table-bg-b-xspector);
+  --table-bg-hover: var(--table-bg-hover-xspector);
+  --table-panel-hover: var(--table-panel-hover-xspector);
+  --table-panel-sub-line: var(--table-panel-sub-line-xspector);
+  --table-panel-main-line: var(--table-panel-main-line-xspector);
+  --table-panel-selected: var(--table-panel-selected-xspector);
+  --modal-dropdown-surface: var(--modal-dropdown-surface-xspector);
 }
 
 :root[data-theme="skyller"] {
@@ -1061,4 +1081,14 @@
   --bg-stroke3: var(--bg-stroke3-skyller);
   --bg-stroke4: var(--bg-stroke4-skyller);
   --bg-stroke5: var(--bg-stroke5-skyller);
+  --table-bg-main: var(--table-bg-main-skyller);
+  --table-bg-line: var(--table-bg-line-skyller);
+  --table-bg-a: var(--table-bg-a-skyller);
+  --table-bg-b: var(--table-bg-b-skyller);
+  --table-bg-hover: var(--table-bg-hover-skyller);
+  --table-panel-hover: var(--table-panel-hover-skyller);
+  --table-panel-sub-line: var(--table-panel-sub-line-skyller);
+  --table-panel-main-line: var(--table-panel-main-line-skyller);
+  --table-panel-selected: var(--table-panel-selected-skyller);
+  --modal-dropdown-surface: var(--modal-dropdown-surface-skyller);
 }

package/src/theme/themes/variable.css

@@ -1020,13 +1020,13 @@
   --page-bg-main-xspector: #091d33;
   --page-bg-main-report-xspector-light-mode: #ffffff;
   --page-bg-main-skyller: #ffffff;
-  --page-bg-circle-top-g-in-xspector: #003d6c;
+  --page-bg-circle-top-g-in-xspector: #042c57;
   --page-bg-circle-top-g-in-report-xspector-light-mode: #adcad6;
   --page-bg-circle-top-g-in-skyller: #cfe4fd;
   --page-bg-circle-top-g-out-xspector: rgba(9 29 51 / 0);
   --page-bg-circle-top-g-out-report-xspector-light-mode: rgba(255 255 255 / 0);
   --page-bg-circle-top-g-out-skyller: rgba(255 255 255 / 0);
-  --page-bg-circle-bottom-g-in-xspector: #003d6c;
+  --page-bg-circle-bottom-g-in-xspector: #042c57;
   --page-bg-circle-bottom-g-in-report-xspector-light-mode: #adcad6;
   --page-bg-circle-bottom-g-in-skyller: #bed0f9;
   --page-bg-circle-bottom-g-out-xspector: rgba(9 29 51 / 0);
@@ -1035,7 +1035,7 @@
   --text-white-xspector: #ffffff;
   --text-white-report-xspector-light-mode: #ffffff;
   --text-white-skyller: #ffffff;
-  --modal-line-xspector: rgba(158 158 158 / 0.24);
+  --modal-line-xspector: #4a4a4a;
   --modal-line-report-xspector-light-mode: #cfcfcf;
   --modal-line-skyller: #d4d4d4;
   --bg-bg4-xspector: #0f2a46;
@@ -1044,15 +1044,46 @@
   --bg-bg5-xspector: #000000;
   --bg-bg5-report-xspector-light-mode: #000000;
   --bg-bg5-skyller: #000000;
-  --bg-stroke3-xspector: #000000;
-  --bg-stroke3-report-xspector-light-mode: #000000;
-  --bg-stroke3-skyller: #000000;
+  --bg-stroke3-xspector: #2d2e30;
+  --bg-stroke3-report-xspector-light-mode: #e5e5e5;
+  --bg-stroke3-skyller: #d4d4d4;
   --bg-stroke4-xspector: #000000;
   --bg-stroke4-report-xspector-light-mode: #000000;
   --bg-stroke4-skyller: #000000;
   --bg-stroke5-xspector: #000000;
   --bg-stroke5-report-xspector-light-mode: #000000;
   --bg-stroke5-skyller: #000000;
+  --table-bg-main-xspector: #091a2a;
+  --table-bg-main-report-xspector-light-mode: #e5e5e5;
+  --table-bg-main-skyller: #f5f5f5;
+  --table-bg-line-xspector: #1c3955;
+  --table-bg-line-report-xspector-light-mode: #d2d2d2;
+  --table-bg-line-skyller: #ececec;
+  --table-bg-a-xspector: #0c2845;
+  --table-bg-a-report-xspector-light-mode: #f3f3f3;
+  --table-bg-a-skyller: #fdfdfd;
+  --table-bg-b-xspector: #0f2f50;
+  --table-bg-b-report-xspector-light-mode: #f3f3f3;
+  --table-bg-b-skyller: #f1f1f1;
+  --table-panel-hover-xspector: #343638;
+  --table-panel-hover-report-xspector-light-mode: #d4d4d4;
+  --table-panel-hover-skyller: #eff6fe;
+  --table-bg-hover-xspector: #103861;
+  --table-bg-hover-report-xspector-light-mode: #ffffff;
+  --table-bg-hover-skyller: #eff6fe;
+  --table-panel-sub-line-xspector: #393b3f;
+  --table-panel-sub-line-report-xspector-light-mode: #d4d4d4;
+  --table-panel-sub-line-skyller: #ececec;
+  --table-panel-main-line-xspector: #606b77;
+  --table-panel-main-line-report-xspector-light-mode: #d4d4d4;
+  --table-panel-main-line-skyller: #d4d4d4;
+  --table-panel-selected-xspector: #6f6700;
+  --table-panel-selected-report-xspector-light-mode: #d4d4d4;
+  --table-panel-selected-skyller: #bfdbfd;
+  --modal-dropdown-surface-xspector: #252628;
+  --modal-dropdown-surface-report-xspector-light-mode: #ffffff;
+  --modal-dropdown-surface-skyller: #ffffff;
+  --modal-dropdown-surface-skyller: #ffffff;
 
   /* BUTTON RADIUS */
   --button-l-round: 8px;

package/src/theme/themes/xspector/baseline.css

@@ -1,5 +1,4 @@
 @import url(typography.css);
 @import url(components/action-button.css);
 @import url(components/loading.css);
-@import url(components/dropdown-menu.css);
 @import url(components/scrollbar.css);

package/src/theme/tokens/baseline.css

@@ -8,4 +8,5 @@
 @import url(components/footer.css);
 @import url(components/dropdown-menu.css);
 @import url(components/switch.css);
-@import url(components/scrollbar.css);
+@import url(components/scrollbar.css);
+@import url(components/badge.css);

package/src/theme/tokens/components/badge.css

@@ -0,0 +1,54 @@
+:root {
+  /* --------------------------------------------------------------------------------- */
+  /* Badge Component Tokens                                                            */
+  /* --------------------------------------------------------------------------------- */
+  /* Naming Convention: --badge-[color]-[property]                                    */
+  /* Colors: [default, success, warning, info, error]                                 */
+  /* Severity: [highest, high, medium, low, lowest]                                   */
+  /* --------------------------------------------------------------------------------- */
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Default (grey/white)                                 */
+  /* ------------------------------------------------------------------ */
+  --badge-default-bg: rgba(145, 158, 171, 0.12);
+  --badge-default-border: rgba(158, 158, 158, 0.48);
+  --badge-default-text: var(--text-contrast-max, white);
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Success (green)                                      */
+  /* ------------------------------------------------------------------ */
+  --badge-success-bg: rgba(84, 214, 44, 0.12);
+  --badge-success-border: rgba(84, 214, 44, 0.48);
+  --badge-success-text: var(--state-success-default);
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Warning (yellow)                                     */
+  /* ------------------------------------------------------------------ */
+  --badge-warning-bg: rgba(255, 193, 7, 0.12);
+  --badge-warning-border: rgba(255, 193, 7, 0.48);
+  --badge-warning-text: var(--state-warning-default);
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Info (blue)                                          */
+  /* ------------------------------------------------------------------ */
+  --badge-info-bg: rgba(41, 152, 255, 0.12);
+  --badge-info-border: rgba(41, 152, 255, 0.48);
+  --badge-info-text: var(--state-info-default);
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Error (red)                                          */
+  /* ------------------------------------------------------------------ */
+  --badge-error-bg: rgba(255, 72, 66, 0.12);
+  --badge-error-border: rgba(255, 72, 66, 0.48);
+  --badge-error-text: var(--state-error-default);
+
+  /* ------------------------------------------------------------------ */
+  /* Severity Badge — solid pill                                         */
+  /* ------------------------------------------------------------------ */
+  --badge-severity-text: var(--text-white, white);
+  --badge-severity-highest-bg: var(--state-error-default);
+  --badge-severity-high-bg: var(--ramps-warning-800);
+  --badge-severity-medium-bg: var(--state-warning-default);
+  --badge-severity-low-bg: var(--state-success-default);
+  --badge-severity-lowest-bg: var(--state-info-default);
+}

package/src/theme/tokens/components/dropdown-menu.css

@@ -6,22 +6,33 @@
   /* Element: [default, hover, selected, disabled]                      */
   /* ------------------------------------------------------------------ */
   
-  --dropdown-menu-seperator-bg: var(--base-color-workspace-stroke);
-  --dropdown-menu-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
+  --dropdown-menu-seperator-bg: var(--modal-line);
+  --dropdown-menu-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.12);
 
   /* Default State */
   --dropdown-menu-default-bg: transparent;
   --dropdown-menu-default-text: var(--text-g-contrast-high);
 
   /* Hover State */
-  --dropdown-menu-hover-bg: var(--state-primary-hover-bg);
+  --dropdown-menu-hover-bg: var(--modal-highlight); 
   --dropdown-menu-hover-text: var(--text-g-contrast-high);
 
   /* Selected State */
-  --dropdown-menu-selected-bg: transparent;
+  --dropdown-menu-selected-bg: var(--modal-highlight);
   --dropdown-menu-selected-text: var(--text-g-contrast-high);
 
   /* Disabled State */
   --dropdown-menu-disabled-bg: transparent;
   --dropdown-menu-disabled-text: var(--state-disable-solid);
+
+  /* Checkbox Item */
+  --dropdown-menu-checkbox-border: var(--function-default-solid);
+  --dropdown-menu-checkbox-checked-bg: var(--function-active-solid);
+  --dropdown-menu-checkbox-checked-icon: var(--function-active-icon);
+  --dropdown-menu-checkbox-disabled-border: var(--state-disable-outline);
+  --dropdown-menu-checkbox-disabled-checked-bg: var(--state-disable-solid);
+
+  /* Radio Item */
+  --dropdown-menu-radio-disabled-text: var(--state-disable-solid);
+  --dropdown-menu-radio-selected-disabled-text: var(--state-disable-outline);
 }

package/src/utils/mergeRefs.ts

@@ -0,0 +1,46 @@
+import React, { useCallback, useRef } from "react";
+
+/**
+ * Merges multiple refs into a single callback ref.
+ * NOTE: This creates a new function on every call — do NOT use inline in render.
+ * Use `useStableMergedRef` instead when you need a stable ref identity.
+ */
+export function mergeRefs<T>(
+  ...refs: (React.Ref<T> | undefined | null)[]
+): React.RefCallback<T> {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        (ref as React.MutableRefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+
+/**
+ * Returns a **stable** callback ref (never changes identity) that forwards the
+ * node to all given refs. Safe to use inline in JSX — will not cause
+ * detach/re-attach loops in libraries like Headless UI that watch refs.
+ *
+ * @example
+ * const MyInput = forwardRef((props, ref) => {
+ *   const internalRef = useRef(null);
+ *   const stableRef = useStableMergedRef(ref, internalRef);
+ *   return <input ref={stableRef} />;
+ * });
+ */
+export function useStableMergedRef<T>(
+  ...refs: (React.Ref<T> | undefined | null)[]
+): React.RefCallback<T> {
+  // Store the latest merge logic in a ref so the callback never goes stale,
+  // while the callback itself keeps a stable identity (empty useCallback deps).
+  const latestImpl = useRef<React.RefCallback<T>>();
+  latestImpl.current = mergeRefs(...refs);
+
+  return useCallback((node: T | null) => {
+    latestImpl.current?.(node);
+  }, []); // ← empty deps = identity never changes = no detach/re-attach loop
+}

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

@@ -1,65 +0,0 @@
-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/helpers.d.ts

@@ -1,19 +0,0 @@
-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

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