@mhome/ui 0.1.0

package/src/components/autocomplete.jsx

@@ -0,0 +1,347 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { TextField } from "./text-field";
+
+const Autocomplete = React.forwardRef(
+  (
+    {
+      options = [],
+      getOptionLabel,
+      value,
+      onChange,
+      inputValue,
+      onInputChange,
+      filterOptions,
+      renderInput,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const [filteredOptions, setFilteredOptions] = React.useState(options);
+    const inputRef = React.useRef(null);
+    const listRef = React.useRef(null);
+
+    // Combine refs
+    React.useImperativeHandle(ref, () => inputRef.current);
+
+    // Filter options when inputValue or options change
+    React.useEffect(() => {
+      // Ensure inputValue is always a string
+      const searchValue = typeof inputValue === "string" ? inputValue : (inputValue ? String(inputValue) : "");
+      
+      if (filterOptions) {
+        const filtered = filterOptions(options, {
+          inputValue: searchValue,
+        });
+        setFilteredOptions(filtered);
+      } else {
+        // Default filtering: filter options based on inputValue
+        if (searchValue) {
+          const filtered = options.filter((option) => {
+            const optionLabel = getOptionLabel
+              ? getOptionLabel(option)
+              : option?.name || option?.label || String(option);
+            return String(optionLabel).toLowerCase().includes(searchValue.toLowerCase());
+          });
+          setFilteredOptions(filtered);
+        } else {
+          // Show all options if input is empty
+          setFilteredOptions(options);
+        }
+      }
+    }, [options, inputValue, filterOptions, getOptionLabel]);
+
+    const handleInputChange = (event) => {
+      // Extract value from event, ensuring it's always a string
+      let newValue = "";
+      if (event?.target?.value !== undefined) {
+        newValue = String(event.target.value);
+      } else if (typeof event === "string") {
+        newValue = event;
+      } else if (event) {
+        newValue = String(event);
+      }
+      
+      if (onInputChange) {
+        onInputChange(event, newValue);
+      }
+      if (!open) {
+        setOpen(true);
+      }
+    };
+
+    const handleOptionClick = (option) => {
+      if (onChange) {
+        onChange(null, option);
+      }
+      // Update inputValue when option is selected
+      const optionLabel = getOptionLabel
+        ? getOptionLabel(option)
+        : option?.name || option?.label || String(option);
+      // Ensure optionLabel is a string
+      const labelString = typeof optionLabel === "string" ? optionLabel : String(optionLabel || "");
+      if (onInputChange) {
+        onInputChange(null, labelString);
+      }
+      setOpen(false);
+    };
+
+    const handleClickOutside = (event) => {
+      if (
+        listRef.current &&
+        !listRef.current.contains(event.target) &&
+        inputRef.current &&
+        !inputRef.current.contains(event.target)
+      ) {
+        setOpen(false);
+      }
+    };
+
+    React.useEffect(() => {
+      if (open) {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+          document.removeEventListener("mousedown", handleClickOutside);
+        };
+      }
+    }, [open]);
+
+    const displayValue = value
+      ? getOptionLabel
+        ? getOptionLabel(value)
+        : value?.name || value?.label || String(value)
+      : "";
+
+    // Determine the input value: use inputValue if provided, otherwise use displayValue
+    // When value is selected, show displayValue unless user is typing
+    const getInputValue = () => {
+      // Always ensure we return a string
+      if (inputValue !== undefined && inputValue !== null) {
+        // If user is typing, show inputValue (ensure it's a string)
+        return typeof inputValue === "string" ? inputValue : String(inputValue);
+      }
+      // If value is selected, show displayValue
+      return typeof displayValue === "string" ? displayValue : String(displayValue || "");
+    };
+
+    const inputProps = {
+      ref: inputRef,
+      value: getInputValue(),
+      onChange: handleInputChange,
+      onFocus: () => setOpen(true),
+      ...props,
+    };
+
+    // If renderInput is provided, use it (for MUI compatibility)
+    if (renderInput) {
+      return (
+        <div ref={ref} className={cn("relative", className)} style={style}>
+          {renderInput({
+            ...inputProps,
+            InputProps: {
+              ...(inputProps.InputProps || {}),
+              endAdornment: (
+                <div
+                  className="absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setOpen(!open);
+                  }}
+                  onMouseDown={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                  }}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    style={{
+                      transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                      transition: "transform 0.2s",
+                    }}
+                  >
+                    <path
+                      d="M5 7.5L10 12.5L15 7.5"
+                      stroke="hsl(var(--muted-foreground))"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+              ),
+            },
+          })}
+          {open && filteredOptions.length > 0 && (
+            <div
+              ref={listRef}
+              className="absolute z-50 w-full mt-1 rounded-2xl border shadow-lg overflow-auto"
+              style={{
+                maxHeight: "200px", // Ensure at least 4 options are visible (each ~50px)
+                minHeight: "160px", // Minimum height for better UX
+                backgroundColor: "hsl(var(--card))",
+                borderColor: "hsl(var(--border))",
+                top: "100%",
+              }}
+            >
+              {filteredOptions.map((option, index) => {
+                const optionLabel = getOptionLabel
+                  ? getOptionLabel(option)
+                  : option?.name || option?.label || String(option);
+                const isSelected =
+                  value &&
+                  (getOptionLabel
+                    ? getOptionLabel(value) === optionLabel
+                    : value === option ||
+                      (value?.id && option?.id && value.id === option.id));
+
+                return (
+                  <div
+                    key={index}
+                    className="px-3 py-2 cursor-pointer hover:bg-accent transition-colors"
+                    style={{
+                      backgroundColor: isSelected
+                        ? "hsl(var(--accent))"
+                        : "transparent",
+                      color: "hsl(var(--foreground))",
+                    }}
+                    onClick={() => handleOptionClick(option)}
+                    onMouseEnter={(e) => {
+                      if (!isSelected) {
+                        e.currentTarget.style.backgroundColor =
+                          "hsl(var(--accent))";
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = isSelected
+                        ? "hsl(var(--accent))"
+                        : "transparent";
+                    }}
+                  >
+                    {optionLabel}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // Default render with TextField
+    return (
+      <div ref={ref} className={cn("relative", className)} style={style}>
+        <TextField
+          {...inputProps}
+          style={{
+            ...inputProps.style,
+            height: inputProps.style?.height || "40px",
+          }}
+          InputProps={{
+            ...inputProps.InputProps,
+            style: {
+              ...inputProps.InputProps?.style,
+              backgroundColor:
+                inputProps.InputProps?.style?.backgroundColor || "transparent",
+              height: inputProps.InputProps?.style?.height || "40px",
+            },
+            endAdornment: (
+              <div
+                className="absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  setOpen(!open);
+                }}
+                onMouseDown={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                }}
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  style={{
+                    transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                    transition: "transform 0.2s",
+                  }}
+                >
+                  <path
+                    d="M5 7.5L10 12.5L15 7.5"
+                    stroke="hsl(var(--muted-foreground))"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+            ),
+          }}
+        />
+        {open && filteredOptions.length > 0 && (
+          <div
+            ref={listRef}
+            className="absolute z-50 w-full mt-1 rounded-2xl border shadow-lg overflow-auto"
+            style={{
+              maxHeight: "200px", // Ensure at least 4 options are visible (each ~50px)
+              minHeight: "160px", // Minimum height for better UX
+              backgroundColor: "hsl(var(--card))",
+              borderColor: "hsl(var(--border))",
+              top: "100%",
+            }}
+          >
+            {filteredOptions.map((option, index) => {
+              const optionLabel = getOptionLabel
+                ? getOptionLabel(option)
+                : option?.name || option?.label || String(option);
+              const isSelected =
+                value &&
+                (getOptionLabel
+                  ? getOptionLabel(value) === optionLabel
+                  : value === option ||
+                    (value?.id && option?.id && value.id === option.id));
+
+              return (
+                <div
+                  key={index}
+                  className="px-3 py-2 cursor-pointer hover:bg-accent transition-colors"
+                  style={{
+                    backgroundColor: isSelected
+                      ? "hsl(var(--accent))"
+                      : "transparent",
+                    color: "hsl(var(--foreground))",
+                  }}
+                  onClick={() => handleOptionClick(option)}
+                  onMouseEnter={(e) => {
+                    if (!isSelected) {
+                      e.currentTarget.style.backgroundColor =
+                        "hsl(var(--accent))";
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = isSelected
+                      ? "hsl(var(--accent))"
+                      : "transparent";
+                  }}
+                >
+                  {optionLabel}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Autocomplete.displayName = "Autocomplete";
+
+export { Autocomplete };

package/src/components/avatar.jsx

@@ -0,0 +1,160 @@
+import * as React from "react";
+import { cn, useIsDarkMode } from "../lib/utils";
+
+const Avatar = React.forwardRef(
+  (
+    {
+      className,
+      style,
+      src,
+      alt,
+      children,
+      variant = "circular",
+      sizes,
+      imgProps,
+      ...props
+    },
+    ref
+  ) => {
+    // Get variant styles
+    const getVariantStyles = () => {
+      if (variant === "rounded") {
+        return { borderRadius: "8px" };
+      }
+      if (variant === "square") {
+        return { borderRadius: "0px" };
+      }
+      // circular (default)
+      return { borderRadius: "50%" };
+    };
+
+    const defaultStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      position: "relative",
+      textAlign: "center",
+      fontSize: "1.25rem",
+      lineHeight: 1,
+      overflow: "hidden",
+      userSelect: "none",
+      backgroundColor: "hsl(var(--muted))",
+      color: "hsl(var(--foreground))",
+      fontWeight: 500,
+      width: "40px",
+      height: "40px",
+      ...getVariantStyles(),
+    };
+
+    const actualMode = useIsDarkMode();
+    const isDark = actualMode === "dark";
+
+    // If has src, render as image
+    if (src) {
+      // Get text color based on theme mode if backgroundColor is set but color is not
+      const getTextColor = () => {
+        // If color is explicitly set in style, use it
+        if (style?.color) {
+          return style.color;
+        }
+        // If backgroundColor is set in style, determine text color based on dark mode
+        if (style?.backgroundColor) {
+          return isDark ? "#000000" : "#ffffff";
+        }
+        // Otherwise use default color
+        return defaultStyles.color;
+      };
+
+      // Merge styles: defaultStyles first, then style to allow overrides
+      // But preserve borderRadius and backgroundColor from defaultStyles if not explicitly set in style
+      // IMPORTANT: color must be set last to ensure it's not overridden by style spread
+      const { color: styleColor, ...styleWithoutColor } = style || {};
+      const mergedStylesWithSrc = {
+        ...defaultStyles,
+        ...styleWithoutColor, // style without color to avoid override
+        // Ensure borderRadius is preserved if not explicitly set in style
+        borderRadius: style?.borderRadius ?? defaultStyles.borderRadius,
+        // Ensure backgroundColor is preserved if not explicitly set in style
+        backgroundColor:
+          style?.backgroundColor ?? defaultStyles.backgroundColor,
+        // Get text color based on theme mode (set last to ensure it's not overridden)
+        color: getTextColor(),
+      };
+
+      return (
+        <div
+          ref={ref}
+          className={cn("relative", className)}
+          style={mergedStylesWithSrc}
+          {...props}
+        >
+          <img
+            src={src}
+            alt={alt}
+            sizes={sizes}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+            }}
+            {...imgProps}
+          />
+          {children && (
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {children}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // Render as div with children
+    // Get text color based on theme mode if backgroundColor is set but color is not
+    const getTextColor = () => {
+      // If color is explicitly set in style, use it
+      if (style?.color) {
+        return style.color;
+      }
+      // If backgroundColor is set in style, determine text color based on dark mode
+      if (style?.backgroundColor) {
+        return isDark ? "#000000" : "#ffffff";
+      }
+      // Otherwise use default color
+      return defaultStyles.color;
+    };
+
+    // Merge styles: defaultStyles first, then style to allow overrides
+    // But preserve borderRadius and backgroundColor from defaultStyles if not explicitly set in style
+    // IMPORTANT: color must be set last to ensure it's not overridden by style spread
+    const { color: styleColor, ...styleWithoutColor } = style || {};
+    const mergedStyles = {
+      ...defaultStyles,
+      ...styleWithoutColor, // style without color to avoid override
+      // Ensure borderRadius is preserved if not explicitly set in style
+      borderRadius: style?.borderRadius ?? defaultStyles.borderRadius,
+      // Ensure backgroundColor is preserved if not explicitly set in style
+      backgroundColor: style?.backgroundColor ?? defaultStyles.backgroundColor,
+      // Get text color based on theme mode (set last to ensure it's not overridden)
+      color: getTextColor(),
+    };
+
+    return (
+      <div ref={ref} className={cn(className)} style={mergedStyles} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+Avatar.displayName = "Avatar";
+
+export { Avatar };

package/src/components/box.jsx

@@ -0,0 +1,165 @@
+import * as React from "react";
+import { cn, spacingToPx } from "../lib/utils";
+
+const Box = React.forwardRef(
+  ({ className, sx, style, children, component = "div", ...props }, ref) => {
+    const Component = component;
+
+    // Convert sx prop to style if provided
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return {};
+      const sxObj = typeof sx === "function" ? sx({}) : sx;
+      const converted = { ...sxObj };
+
+      // Handle spacing 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;
+      }
+      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;
+      }
+      if (converted.gap !== undefined) {
+        converted.gap = spacingToPx(converted.gap);
+        delete converted.gap;
+      }
+
+      // Handle color shortcuts (text.primary, text.secondary, etc.)
+      if (converted.color) {
+        if (typeof converted.color === "string") {
+          if (
+            converted.color === "text.primary" ||
+            converted.color === "textPrimary"
+          ) {
+            converted.color = "hsl(var(--foreground))";
+          } else if (
+            converted.color === "text.secondary" ||
+            converted.color === "textSecondary"
+          ) {
+            converted.color = "hsl(var(--muted-foreground))";
+          } else if (converted.color === "primary") {
+            converted.color = "hsl(var(--primary))";
+          } else if (converted.color === "secondary") {
+            converted.color = "hsl(var(--secondary))";
+          } else if (converted.color === "error") {
+            converted.color = "hsl(var(--destructive))";
+          }
+        }
+      }
+
+      // Handle bgcolor - convert to CSS variable if needed
+      if (converted.bgcolor) {
+        if (
+          typeof converted.bgcolor === "string" &&
+          converted.bgcolor.includes(".")
+        ) {
+          // Map common theme paths to CSS variables
+          const bgcolorMap = {
+            "background.paper": "hsl(var(--card))",
+            "background.default": "hsl(var(--background))",
+            "background.card": "hsl(var(--card))",
+          };
+          converted.backgroundColor =
+            bgcolorMap[converted.bgcolor] || converted.bgcolor;
+        } else {
+          converted.backgroundColor = converted.bgcolor;
+        }
+        delete converted.bgcolor;
+      }
+
+      return converted;
+    }, [sx]);
+
+    const mergedStyle = {
+      ...sxStyles,
+      ...style,
+    };
+
+    // Convert display, flexDirection, etc. to Tailwind classes where possible
+    const displayClass = sxStyles.display === "flex" ? "flex" : "";
+    const flexDirectionClass =
+      sxStyles.flexDirection === "column" ? "flex-col" : "";
+    const alignItemsClass =
+      sxStyles.alignItems === "center" ? "items-center" : "";
+    const justifyContentClass =
+      sxStyles.justifyContent === "space-between"
+        ? "justify-between"
+        : sxStyles.justifyContent === "center"
+        ? "justify-center"
+        : "";
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          displayClass,
+          flexDirectionClass,
+          alignItemsClass,
+          justifyContentClass,
+          className
+        )}
+        style={mergedStyle}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Box.displayName = "Box";
+
+export { Box };