@mhome/ui 0.1.0

package/src/components/menu.jsx

@@ -0,0 +1,370 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Menu = React.forwardRef(
+  (
+    {
+      className,
+      anchorEl,
+      open = false,
+      onClose,
+      PaperProps,
+      anchorOrigin = { vertical: "bottom", horizontal: "left" },
+      transformOrigin = { vertical: "top", horizontal: "left" },
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const menuRef = React.useRef(null);
+    const [position, setPosition] = React.useState({ top: 0, left: 0 });
+
+    React.useImperativeHandle(ref, () => menuRef.current);
+
+    // Calculate position using useLayoutEffect to ensure DOM is ready
+    React.useLayoutEffect(() => {
+      if (!open || !anchorEl) {
+        setPosition({ top: 0, left: 0 });
+        return;
+      }
+
+      let isMounted = true;
+      let rafId = null;
+
+      // Use requestAnimationFrame to ensure DOM is fully updated
+      rafId = requestAnimationFrame(() => {
+        // Check if component is still mounted before updating state
+        if (!isMounted) return;
+
+        try {
+          // Check if anchorEl is still valid and connected to DOM
+          if (!anchorEl || !anchorEl.getBoundingClientRect || !anchorEl.isConnected) {
+            if (isMounted) {
+              setPosition({ top: 50, left: 0 });
+            }
+            return;
+          }
+
+          const anchorRect = anchorEl.getBoundingClientRect();
+          
+          // Validate that getBoundingClientRect returned valid values
+          if (!anchorRect || isNaN(anchorRect.bottom) || isNaN(anchorRect.left)) {
+            if (isMounted) {
+              setPosition({ top: 50, left: 0 });
+            }
+            return;
+          }
+          
+          // Find the nearest positioned ancestor (position: relative, absolute, or fixed)
+          let container = anchorEl.parentElement;
+          while (container && container !== document.body && container.isConnected) {
+            try {
+              const style = window.getComputedStyle(container);
+              if (style.position === 'relative' || style.position === 'absolute' || style.position === 'fixed') {
+                break;
+              }
+              container = container.parentElement;
+            } catch (e) {
+              // If getComputedStyle fails, break the loop
+              break;
+            }
+          }
+          
+          let containerRect = { top: 0, left: 0 };
+          if (container && container !== document.body && container.isConnected && container.getBoundingClientRect) {
+            try {
+              containerRect = container.getBoundingClientRect();
+              // Validate containerRect
+              if (!containerRect || isNaN(containerRect.top) || isNaN(containerRect.left)) {
+                containerRect = { top: 0, left: 0 };
+              }
+            } catch (e) {
+              containerRect = { top: 0, left: 0 };
+            }
+          }
+          
+          // Calculate relative position - menu appears below the button
+          const relativeTop = anchorRect.bottom - containerRect.top + 8;
+          const relativeLeft = anchorRect.left - containerRect.left;
+          
+          // Validate calculated values
+          if (isNaN(relativeTop) || isNaN(relativeLeft)) {
+            if (isMounted) {
+              setPosition({ top: 50, left: 0 });
+            }
+            return;
+          }
+          
+          // Only update state if component is still mounted
+          if (isMounted) {
+            setPosition({ top: relativeTop, left: relativeLeft });
+          }
+        } catch (e) {
+          // Fallback position - only update if mounted
+          if (isMounted) {
+            setPosition({ top: 50, left: 0 });
+          }
+        }
+      });
+
+      return () => {
+        isMounted = false;
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+      };
+    }, [open, anchorEl]);
+
+    // Handle backdrop click
+    React.useEffect(() => {
+      if (!open) return;
+
+      const handleClickOutside = (e) => {
+        if (
+          menuRef.current &&
+          !menuRef.current.contains(e.target) &&
+          anchorEl &&
+          !anchorEl.contains(e.target)
+        ) {
+          if (onClose) {
+            onClose(e, "backdropClick");
+          }
+        }
+      };
+
+      const handleEscape = (e) => {
+        if (e.key === "Escape" && onClose) {
+          onClose(e, "escapeKeyDown");
+        }
+      };
+
+      // Use capture phase to catch events before they reach other elements
+      document.addEventListener("mousedown", handleClickOutside, true);
+      document.addEventListener("keydown", handleEscape, true);
+
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside, true);
+        document.removeEventListener("keydown", handleEscape, true);
+      };
+    }, [open, onClose, anchorEl]);
+
+    if (!open || !anchorEl) return null;
+    
+    // Get theme mode for shadow
+    const isDark = document.documentElement.classList.contains('dark') || 
+                   window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    return (
+      <div
+        ref={menuRef}
+        className={cn("rounded-lg shadow-lg", className)}
+        style={{
+          position: "absolute",
+          top: `${position.top}px`,
+          left: `${position.left}px`,
+          zIndex: 1300,
+          pointerEvents: "auto",
+          visibility: "visible",
+          display: "block",
+          opacity: 1,
+          backgroundColor: "hsl(var(--card))",
+          boxShadow: isDark
+            ? "0px 4px 12px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(255, 255, 255, 0.1)"
+            : "0px 4px 12px rgba(0, 0, 0, 0.15)",
+          border: isDark
+            ? "1px solid rgba(255, 255, 255, 0.1)"
+            : "1px solid hsl(var(--border))",
+          borderRadius: PaperProps?.style?.borderRadius || "8px",
+          minWidth: PaperProps?.style?.minWidth || 180,
+          maxWidth: "calc(100vw - 32px)",
+          padding: "4px 0",
+          height: "auto",
+          overflow: "visible", // Ensure content is visible
+          ...PaperProps?.style,
+          ...props.style,
+        }}
+        {...Object.fromEntries(
+          Object.entries(props || {}).filter(([key]) => key !== "style")
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Menu.displayName = "Menu";
+
+const MenuItem = React.forwardRef(
+  (
+    { className, onClick, disabled = false, sx, style, children, ...props },
+    ref
+  ) => {
+    const [hovered, setHovered] = React.useState(false);
+
+    // Convert sx prop to style if provided
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return {};
+      const sxObj = typeof sx === "function" ? sx({}) : sx;
+      return sxObj;
+    }, [sx]);
+
+    // Use design tokens for consistent spacing and typography
+    const menuItemPadding = { x: 16, y: 12 }; // px-4 py-3 (increased from py-2)
+    const menuItemFontSize = "0.875rem"; // text-sm
+
+    const mergedStyle = {
+      display: "flex",
+      alignItems: "center",
+      minHeight: "36px", // Ensure minimum height for menu items
+      height: "auto", // Ensure height is auto
+      paddingLeft: `${menuItemPadding.x}px`,
+      paddingRight: `${menuItemPadding.x}px`,
+      paddingTop: `${menuItemPadding.y}px`,
+      paddingBottom: `${menuItemPadding.y}px`,
+      cursor: disabled ? "not-allowed" : "pointer",
+      fontSize: menuItemFontSize,
+      color: disabled
+        ? "#666666"
+        : "#000000", // Use fixed color for testing
+      backgroundColor:
+        hovered && !disabled ? "hsl(var(--accent))" : "transparent",
+      opacity: disabled
+        ? 0.5
+        : sxStyles.opacity !== undefined
+        ? sxStyles.opacity
+        : 1,
+      transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+      whiteSpace: "nowrap", // Prevent text wrapping
+      visibility: "visible",
+      textAlign: "left",
+      fontWeight: "normal",
+      width: "100%",
+      boxSizing: "border-box",
+      ...sxStyles,
+      ...style,
+    };
+
+    const handleClick = (e) => {
+      if (disabled) return;
+      if (onClick) {
+        onClick(e);
+      }
+    };
+
+    const handleMouseDown = (e) => {
+      if (disabled) return;
+      e.preventDefault(); // Prevent default behavior
+      e.stopPropagation(); // Prevent event bubbling to parent elements
+    };
+
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      // Support Enter and Space keys for keyboard navigation
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (onClick) {
+          onClick(e);
+        }
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="menuitem"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
+        className={cn(
+          "focus:outline-none focus:bg-accent focus:text-accent-foreground",
+          className
+        )}
+        style={mergedStyle}
+        onClick={handleClick}
+        onMouseDown={handleMouseDown}
+        onKeyDown={handleKeyDown}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+MenuItem.displayName = "MenuItem";
+
+const MenuItemIcon = React.forwardRef(
+  ({ className, style, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("flex items-center justify-center", className)}
+        style={{
+          minWidth: "40px",
+          marginRight: "8px",
+          color: "inherit",
+          fontSize: "1.25rem",
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+MenuItemIcon.displayName = "MenuItemIcon";
+
+const MenuItemText = React.forwardRef(
+  ({ className, style, children, primary, secondary, ...props }, ref) => {
+    // Determine what content to display
+    const content = primary !== undefined ? primary : children;
+    const hasSecondary = secondary !== undefined && secondary !== null;
+    
+    return (
+      <div
+        ref={ref}
+        className={cn("flex-1", className)}
+        style={{
+          fontSize: "0.875rem",
+          lineHeight: "1.5",
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          textAlign: "left",
+          color: "#000000", // Use fixed color for testing
+          minHeight: "1.5em", // Ensure minimum height
+          boxSizing: "border-box",
+          ...style,
+        }}
+        {...props}
+      >
+        {hasSecondary ? (
+          <>
+            <div style={{ fontSize: "0.875rem", lineHeight: "1.5", color: "#000000", textAlign: "left", display: "block" }}>
+              {content}
+            </div>
+            <div
+              style={{
+                fontSize: "0.75rem",
+                color: "#666666",
+                marginTop: "2px",
+                display: "block",
+              }}
+            >
+              {secondary}
+            </div>
+          </>
+        ) : (
+          <span style={{ color: "#000000", display: "inline-block", width: "100%" }}>{content || ""}</span>
+        )}
+      </div>
+    );
+  }
+);
+MenuItemText.displayName = "MenuItemText";
+
+export { Menu, MenuItem, MenuItemIcon, MenuItemText };

package/src/components/paper.jsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { cn, spacingToPx } from "../lib/utils";
+
+const Paper = React.forwardRef(
+  (
+    {
+      className,
+      elevation = 0,
+      square = false,
+      variant = "elevation",
+      sx,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Convert sx prop to style if provided, handling MUI spacing
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return {};
+      const sxObj = typeof sx === "function" ? sx({}) : sx;
+
+      // Convert MUI spacing properties to CSS
+      const converted = { ...sxObj };
+
+      // Padding shortcuts
+      if (converted.p !== undefined) {
+        converted.padding = spacingToPx(converted.p);
+        delete converted.p;
+      }
+      if (converted.px !== undefined) {
+        converted.paddingLeft = spacingToPx(converted.px);
+        converted.paddingRight = spacingToPx(converted.px);
+        delete converted.px;
+      }
+      if (converted.py !== undefined) {
+        converted.paddingTop = spacingToPx(converted.py);
+        converted.paddingBottom = spacingToPx(converted.py);
+        delete converted.py;
+      }
+      if (converted.pt !== undefined) {
+        converted.paddingTop = spacingToPx(converted.pt);
+        delete converted.pt;
+      }
+      if (converted.pb !== undefined) {
+        converted.paddingBottom = spacingToPx(converted.pb);
+        delete converted.pb;
+      }
+      if (converted.pl !== undefined) {
+        converted.paddingLeft = spacingToPx(converted.pl);
+        delete converted.pl;
+      }
+      if (converted.pr !== undefined) {
+        converted.paddingRight = spacingToPx(converted.pr);
+        delete converted.pr;
+      }
+
+      // Margin shortcuts
+      if (converted.m !== undefined) {
+        converted.margin = spacingToPx(converted.m);
+        delete converted.m;
+      }
+      if (converted.mx !== undefined) {
+        converted.marginLeft = spacingToPx(converted.mx);
+        converted.marginRight = spacingToPx(converted.mx);
+        delete converted.mx;
+      }
+      if (converted.my !== undefined) {
+        converted.marginTop = spacingToPx(converted.my);
+        converted.marginBottom = spacingToPx(converted.my);
+        delete converted.my;
+      }
+      if (converted.mt !== undefined) {
+        converted.marginTop = spacingToPx(converted.mt);
+        delete converted.mt;
+      }
+      if (converted.mb !== undefined) {
+        converted.marginBottom = spacingToPx(converted.mb);
+        delete converted.mb;
+      }
+      if (converted.ml !== undefined) {
+        converted.marginLeft = spacingToPx(converted.ml);
+        delete converted.ml;
+      }
+      if (converted.mr !== undefined) {
+        converted.marginRight = spacingToPx(converted.mr);
+        delete converted.mr;
+      }
+
+      // Gap
+      if (converted.gap !== undefined) {
+        converted.gap = spacingToPx(converted.gap);
+      }
+
+      return converted;
+    }, [sx]);
+
+    // Get elevation shadow
+    const getElevationShadow = () => {
+      if (variant === "outlined") {
+        return {
+          boxShadow: "none",
+          border: "1px solid hsl(var(--border))",
+        };
+      }
+      // elevation variant (default) - Material Design elevation shadows
+      const shadows = {
+        0: "none",
+        1: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
+        2: "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)",
+        3: "0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12)",
+        4: "0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)",
+        5: "0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12)",
+        6: "0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)",
+        7: "0px 4px 5px -2px rgba(0,0,0,0.2), 0px 7px 10px 1px rgba(0,0,0,0.14), 0px 2px 16px 1px rgba(0,0,0,0.12)",
+        8: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
+        9: "0px 5px 6px -3px rgba(0,0,0,0.2), 0px 9px 12px 1px rgba(0,0,0,0.14), 0px 3px 16px 2px rgba(0,0,0,0.12)",
+        10: "0px 6px 6px -3px rgba(0,0,0,0.2), 0px 10px 14px 1px rgba(0,0,0,0.14), 0px 4px 18px 3px rgba(0,0,0,0.12)",
+        11: "0px 6px 7px -4px rgba(0,0,0,0.2), 0px 11px 15px 1px rgba(0,0,0,0.14), 0px 4px 20px 3px rgba(0,0,0,0.12)",
+        12: "0px 7px 8px -4px rgba(0,0,0,0.2), 0px 12px 17px 2px rgba(0,0,0,0.14), 0px 5px 22px 4px rgba(0,0,0,0.12)",
+        13: "0px 7px 8px -4px rgba(0,0,0,0.2), 0px 13px 19px 2px rgba(0,0,0,0.14), 0px 5px 24px 4px rgba(0,0,0,0.12)",
+        14: "0px 7px 9px -4px rgba(0,0,0,0.2), 0px 14px 21px 2px rgba(0,0,0,0.14), 0px 5px 26px 4px rgba(0,0,0,0.12)",
+        15: "0px 8px 9px -5px rgba(0,0,0,0.2), 0px 15px 22px 2px rgba(0,0,0,0.14), 0px 6px 28px 5px rgba(0,0,0,0.12)",
+        16: "0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)",
+        17: "0px 8px 11px -5px rgba(0,0,0,0.2), 0px 17px 26px 2px rgba(0,0,0,0.14), 0px 6px 32px 5px rgba(0,0,0,0.12)",
+        18: "0px 9px 11px -5px rgba(0,0,0,0.2), 0px 18px 28px 2px rgba(0,0,0,0.14), 0px 7px 34px 6px rgba(0,0,0,0.12)",
+        19: "0px 9px 12px -6px rgba(0,0,0,0.2), 0px 19px 29px 2px rgba(0,0,0,0.14), 0px 7px 36px 6px rgba(0,0,0,0.12)",
+        20: "0px 10px 13px -6px rgba(0,0,0,0.2), 0px 20px 31px 3px rgba(0,0,0,0.14), 0px 8px 38px 7px rgba(0,0,0,0.12)",
+        21: "0px 10px 13px -6px rgba(0,0,0,0.2), 0px 21px 33px 3px rgba(0,0,0,0.14), 0px 8px 40px 7px rgba(0,0,0,0.12)",
+        22: "0px 10px 14px -6px rgba(0,0,0,0.2), 0px 22px 35px 3px rgba(0,0,0,0.14), 0px 8px 42px 7px rgba(0,0,0,0.12)",
+        23: "0px 11px 14px -7px rgba(0,0,0,0.2), 0px 23px 36px 3px rgba(0,0,0,0.14), 0px 9px 44px 8px rgba(0,0,0,0.12)",
+        24: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)",
+      };
+      // Clamp elevation to valid range (0-24)
+      const clampedElevation = Math.max(0, Math.min(24, elevation));
+      return { boxShadow: shadows[clampedElevation] || shadows[1] };
+    };
+
+    // Get border color based on elevation (use shadow color as border)
+    const getBorderColor = () => {
+      // Use a subtle border color similar to shadow effect
+      // elevation 1 shadow: rgba(0,0,0,0.2), rgba(0,0,0,0.14), rgba(0,0,0,0.12)
+      // Convert to a subtle border color
+      return "rgba(0, 0, 0, 0.12)"; // Light gray border, similar to shadow color
+    };
+
+    const elevationShadow = getElevationShadow();
+    
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "bg-card",
+          !square && "rounded-lg",
+          variant === "outlined" && "border border-border",
+          className
+        )}
+        style={{
+          ...elevationShadow,
+          ...sxStyles,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Paper.displayName = "Paper";
+
+export { Paper };

package/src/components/radio-group.jsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const RadioGroupContext = React.createContext({
+  value: null,
+  onChange: null,
+  name: null,
+  disabled: false,
+});
+
+const RadioGroup = React.forwardRef(
+  (
+    {
+      children,
+      value,
+      onChange,
+      name,
+      className,
+      sx,
+      style,
+      disabled = false,
+      row = false,
+      ...props
+    },
+    ref
+  ) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    const handleChange = React.useCallback(
+      (event) => {
+        if (onChange && !disabled) {
+          onChange(event);
+        }
+      },
+      [onChange, disabled]
+    );
+
+    const contextValue = React.useMemo(
+      () => ({
+        value,
+        onChange: handleChange,
+        name: name || `radio-group-${Math.random().toString(36).substr(2, 9)}`,
+        disabled,
+      }),
+      [value, handleChange, name, disabled]
+    );
+
+    return (
+      <RadioGroupContext.Provider value={contextValue}>
+        <div
+          ref={ref}
+          className={cn(
+            "flex",
+            row ? "flex-row gap-4" : "flex-col gap-2",
+            disabled && "opacity-50",
+            className
+          )}
+          style={{
+            ...mergedSx,
+            ...style,
+          }}
+          role="radiogroup"
+          {...props}
+        >
+          {children}
+        </div>
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+export { RadioGroup, RadioGroupContext };