@rovula/ui 0.1.20 → 0.1.22

package/src/components/Menu/Menu.tsx

@@ -1,235 +0,0 @@
-import React, {
-  CSSProperties,
-  ReactNode,
-  forwardRef,
-  useCallback,
-  useState,
-} from "react";
-import { cn } from "@/utils/cn";
-import Icon from "../Icon/Icon";
-
-// ==================== Types ====================
-
-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; // สำหรับ type="checkbox" หรือ "radio"
-  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;
-};
-
-// ==================== Menu Container ====================
-
-export const Menu = forwardRef<HTMLDivElement, MenuProps>(
-  (
-    { items, selectedValues = [], onSelect, className, style, isAbove = false },
-    ref,
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-g-contrast-high",
-          "border border-modal-surface",
-          className,
-        )}
-        style={{
-          boxShadow: "var(--dropdown-menu-shadow)",
-          ...style,
-        }}
-      >
-        {items.map((item, index) => {
-          if (item.type === "separator") {
-            return <MenuSeparator key={`separator-${index}`} />;
-          }
-
-          if (item.type === "label") {
-            return <MenuLabel key={`label-${index}`}>{item.label}</MenuLabel>;
-          }
-
-          if (item.type === "custom") {
-            return (
-              <React.Fragment key={`custom-${index}`}>
-                {item.render()}
-              </React.Fragment>
-            );
-          }
-
-          const itemOption = item.item;
-          const visualType = itemOption.type || "default";
-
-          // Determine checked/selected state
-          let isChecked = false;
-          if (visualType === "checkbox" || visualType === "radio") {
-            isChecked =
-              itemOption.checked ?? selectedValues.includes(itemOption.value);
-          } else {
-            isChecked = selectedValues.includes(itemOption.value);
-          }
-
-          return (
-            <MenuItem
-              key={itemOption.value}
-              option={itemOption}
-              visualType={visualType}
-              isChecked={isChecked}
-              onSelect={() => {
-                onSelect?.(itemOption.value, itemOption);
-                itemOption.onClick?.();
-              }}
-            />
-          );
-        })}
-      </div>
-    );
-  },
-);
-
-Menu.displayName = "Menu";
-
-// ==================== Menu Item ====================
-
-type MenuItemProps = {
-  option: MenuOption;
-  visualType: "default" | "checkbox" | "radio";
-  isChecked: boolean;
-  onSelect: () => void;
-  className?: string;
-};
-
-export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
-  ({ option, visualType, isChecked, onSelect, className }, ref) => {
-    // Render indicator based on visual type
-    const renderIndicator = () => {
-      if (visualType === "checkbox" && isChecked) {
-        return (
-          <span className="absolute left-4 flex items-center justify-center">
-            <Icon type="heroicons" name="check" className="size-4" />
-          </span>
-        );
-      }
-      if (visualType === "radio" && isChecked) {
-        return (
-          <span className="absolute left-4 flex items-center justify-center">
-            <Icon
-              type="heroicons"
-              name="circle"
-              className="h-2 w-2 fill-current"
-            />
-          </span>
-        );
-      }
-      return null;
-    };
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 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-subtitle5":
-              isChecked,
-            "pointer-events-none opacity-50": option.disabled,
-            "text-red-500": option.danger,
-          },
-          className,
-        )}
-        onMouseDown={option.disabled ? undefined : onSelect}
-      >
-        {renderIndicator()}
-        {option.icon && <span className="flex-shrink-0">{option.icon}</span>}
-        {option.label}
-      </div>
-    );
-  },
-);
-
-MenuItem.displayName = "MenuItem";
-
-// ==================== Menu Separator ====================
-
-type MenuSeparatorProps = {
-  className?: string;
-};
-
-export const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(
-  ({ className }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]",
-          className,
-        )}
-      />
-    );
-  },
-);
-
-MenuSeparator.displayName = "MenuSeparator";
-
-// ==================== Menu Label ====================
-
-type MenuLabelProps = {
-  children: ReactNode;
-  className?: string;
-};
-
-export const MenuLabel = forwardRef<HTMLDivElement, MenuLabelProps>(
-  ({ children, className }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "px-3 py-2 typography-small4 text-text-g-contrast-medium",
-          className,
-        )}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-MenuLabel.displayName = "MenuLabel";
-
-// ==================== Exports ====================
-
-export default Menu;

package/src/components/Menu/helpers.ts

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

package/src/components/Menu/index.ts

@@ -1,7 +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";

package/src/theme/themes/xspector/components/dropdown-menu.css

@@ -1,28 +0,0 @@
-:root[data-theme="xspector"] {
-  /* ------------------------------------------------------------------ */
-  /* DropdownMenu Component Tokens                                      */
-  /* ------------------------------------------------------------------ */
-  /* Naming Convention: --[component]-[state]-[property]                */
-  /* Element: [default, hover, selected, disabled]                      */
-  /* ------------------------------------------------------------------ */
-
-  --dropdown-menu-seperator-bg: var(--transparent-white-8);
-  --dropdown-menu-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
-  
-  /* Default State */
-  --dropdown-menu-default-bg: transparent;
-  --dropdown-menu-default-text: inherit;
-  
-  /* Hover State */
-  --dropdown-menu-hover-bg: var(--transparent-white-8);
-  --dropdown-menu-hover-text: inherit;
-  
-  /* Selected State */
-  --dropdown-menu-selected-bg: var(--ramps-grey-150);
-  --dropdown-menu-selected-text: inherit;
-  
-  /* Disabled State */
-  --dropdown-menu-disabled-bg: transparent;
-  --dropdown-menu-disabled-text: var(--ramps-grey-140);
-  
-}