@mhome/ui 0.1.0

package/src/components/text-field.jsx

@@ -0,0 +1,289 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { useComponentBackgroundColor } from "../common/adaptive-theme-provider";
+
+const TextField = React.forwardRef(
+  (
+    {
+      className,
+      fullWidth = false,
+      variant = "outlined",
+      size = "small",
+      InputProps,
+      label,
+      error = false,
+      helperText,
+      placeholder,
+      multiline = false,
+      rows,
+      maxRows,
+      disabled = false,
+      value,
+      floatingLabel = false,
+      required = false,
+      ...props
+    },
+    ref
+  ) => {
+    const getComponentBgColor = useComponentBackgroundColor();
+    const [focused, setFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const combinedRef = React.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+
+    const hasValue = value !== undefined && value !== null && value !== "";
+    const shouldShrinkLabel = floatingLabel && (focused || hasValue);
+
+    const sizeClasses = {
+      small: "text-sm",
+      medium: "text-base",
+    };
+    
+    const sizePadding = {
+      small: "px-2.5 py-1.5",
+      medium: "px-3 py-2",
+    };
+
+    // Get background color based on variant
+    const getVariantBackgroundColor = () => {
+      if (InputProps?.style?.backgroundColor !== undefined) {
+        return InputProps.style.backgroundColor;
+      }
+      if (props.style?.backgroundColor !== undefined) {
+        return props.style.backgroundColor;
+      }
+      
+      // Variant-specific background colors
+      if (variant === "filled") {
+        return focused
+          ? getComponentBgColor("hsl(var(--input))")
+          : "hsl(var(--muted) / 0.3)"; // Light gray background for filled
+      } else if (variant === "standard") {
+        return focused
+          ? getComponentBgColor("hsl(var(--input))")
+          : "hsl(var(--muted) / 0.5)"; // More prominent gray for standard
+      } else {
+        // outlined (default)
+        return focused
+          ? getComponentBgColor("hsl(var(--input))")
+          : "transparent";
+      }
+    };
+
+    const inputBackgroundColor = getVariantBackgroundColor();
+
+    const {
+      backgroundColor: propsBgColor,
+      height: propsHeight,
+      ...restPropsStyle
+    } = props.style || {};
+
+    const finalBackgroundColor =
+      InputProps?.style?.backgroundColor !== undefined
+        ? InputProps.style.backgroundColor
+        : inputBackgroundColor;
+
+    const inputHeight = InputProps?.style?.height || propsHeight;
+
+    // Remove style and InputProps from props to avoid conflicts
+    const {
+      style: propsStyle,
+      InputProps: propsInputProps,
+      ...restProps
+    } = props;
+
+    // Get border style based on variant
+    const getVariantBorderStyle = () => {
+      if (variant === "standard") {
+        // Standard: only bottom border
+        return {
+          borderTop: "none",
+          borderLeft: "none",
+          borderRight: "none",
+          borderBottom: error
+            ? "2px solid hsl(var(--destructive))"
+            : focused
+            ? "2px solid hsl(var(--ring))"
+            : "2px solid hsl(var(--input))",
+          borderRadius: "0",
+        };
+      } else {
+        // outlined and filled: full border
+        return {
+          borderColor: error
+            ? "hsl(var(--destructive))"
+            : focused
+            ? "hsl(var(--ring))"
+            : "hsl(var(--input))",
+        };
+      }
+    };
+
+    // Build final style object - backgroundColor must come from finalBackgroundColor
+    // backgroundColor must be set explicitly to ensure it's not overridden
+    const finalStyle = {
+      ...getVariantBorderStyle(),
+      color: "hsl(var(--foreground))",
+      ...(inputHeight && { height: inputHeight }),
+      ...restPropsStyle,
+      // Ensure backgroundColor is set last to override anything from restPropsStyle
+      backgroundColor: finalBackgroundColor,
+    };
+
+    const InputComponent = multiline ? "textarea" : "input";
+    // Only show placeholder when there's no value
+    const shouldShowPlaceholder =
+      !hasValue && (placeholder || restProps.placeholder);
+    
+    // Get type from props, default to "text" for input, undefined for textarea
+    const inputType = multiline ? undefined : (restProps.type || "text");
+    
+    const inputProps = {
+      ...restProps,
+      type: inputType,
+      value,
+      placeholder: shouldShowPlaceholder
+        ? placeholder || restProps.placeholder
+        : undefined,
+      disabled,
+      rows: multiline ? rows : undefined,
+    };
+
+    if (floatingLabel) {
+      // Floating label mode: NO label displayed - user should use InputLabel component separately
+      return (
+        <div className={cn(fullWidth && "w-full", className)}>
+          <div className="relative">
+            <InputComponent
+              ref={combinedRef}
+              type={inputType}
+              className={cn(
+                "w-full transition-all",
+                variant === "standard" ? "" : "rounded-2xl border",
+                sizeClasses[size],
+                sizePadding[size],
+                "focus-visible:outline-none",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                InputProps?.startAdornment && "pl-10",
+                InputProps?.endAdornment && "pr-10",
+                multiline && "resize-none"
+              )}
+              style={{
+                ...restPropsStyle,
+                ...getVariantBorderStyle(),
+                color: "hsl(var(--foreground))",
+                backgroundColor: finalBackgroundColor,
+                ...(inputHeight && {
+                  height: inputHeight,
+                  lineHeight: inputHeight,
+                }),
+              }}
+              onFocus={(e) => {
+                setFocused(true);
+                if (props.onFocus) props.onFocus(e);
+              }}
+              onBlur={(e) => {
+                setFocused(false);
+                if (props.onBlur) props.onBlur(e);
+              }}
+              {...inputProps}
+            />
+            {InputProps?.startAdornment && (
+              <div className="absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center z-10">
+                {InputProps.startAdornment}
+              </div>
+            )}
+            {InputProps?.endAdornment && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center z-10">
+                {InputProps.endAdornment}
+              </div>
+            )}
+          </div>
+          {helperText && (
+            <div
+              className="text-xs mt-1"
+              style={{
+                color: error
+                  ? "hsl(var(--destructive))"
+                  : "hsl(var(--muted-foreground))",
+              }}
+            >
+              {helperText}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // Non-floating label version
+    return (
+      <div className={cn(fullWidth && "w-full", className)}>
+        {label && (
+          <label className="block text-sm font-medium mb-2 text-foreground">
+            {label}
+            {required && <span className="ml-1 text-destructive">*</span>}
+          </label>
+        )}
+        <div className="relative w-full">
+          <InputComponent
+            ref={combinedRef}
+            type={inputType}
+            className={cn(
+              "w-full transition-colors",
+              variant === "standard" ? "" : "rounded-2xl border",
+              sizeClasses[size],
+              sizePadding[size],
+              "focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              InputProps?.startAdornment && "pl-10",
+              InputProps?.endAdornment && "pr-10",
+              multiline && "resize-none"
+            )}
+            style={finalStyle}
+            onFocus={(e) => {
+              setFocused(true);
+              if (props.onFocus) props.onFocus(e);
+            }}
+            onBlur={(e) => {
+              setFocused(false);
+              if (props.onBlur) props.onBlur(e);
+            }}
+            {...inputProps}
+          />
+          {InputProps?.startAdornment && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center">
+              {InputProps.startAdornment}
+            </div>
+          )}
+          {InputProps?.endAdornment && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center">
+              {InputProps.endAdornment}
+            </div>
+          )}
+        </div>
+        {helperText && (
+          <div
+            className={cn(
+              "text-xs mt-1",
+              error ? "text-destructive" : "text-muted-foreground"
+            )}
+          >
+            {helperText}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+TextField.displayName = "TextField";
+
+export { TextField };

package/src/components/toggle-button.jsx

@@ -0,0 +1,209 @@
+import * as React from "react";
+import { cn, useIsDarkMode } from "../lib/utils";
+
+const ToggleButton = React.forwardRef(
+  (
+    {
+      className,
+      value,
+      selected = false,
+      onChange,
+      disabled = false,
+      size = "medium",
+      sx,
+      style,
+      children,
+      color,
+      ...props
+    },
+    ref
+  ) => {
+    const actualMode = useIsDarkMode();
+    const isDark = actualMode === "dark";
+
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    const sizeStyles = {
+      small: {
+        padding: "4px 6px",
+        fontSize: "0.75rem",
+        minHeight: "28px",
+      },
+      medium: {
+        padding: "6px 16px",
+        fontSize: "0.9375rem",
+        minHeight: "36px",
+      },
+      large: {
+        padding: "8px 22px",
+        fontSize: "1rem",
+        minHeight: "40px",
+      },
+    };
+
+    const handleClick = (e) => {
+      if (disabled) return;
+      if (onChange) {
+        onChange(e, value);
+      }
+    };
+
+    const baseStyle = {
+      ...sizeStyles[size],
+      border: "1px solid hsl(var(--border))",
+      borderRadius: "8px",
+      textTransform: "none",
+      fontWeight: 400,
+    };
+
+    const {
+      backgroundColor: styleBg,
+      color: styleColor,
+      borderColor: styleBorder,
+      ...restStyle
+    } = style || {};
+
+    const selectedStyle = selected
+      ? color
+        ? {
+            backgroundColor: color,
+            color: "white",
+            borderColor: color,
+          }
+        : {
+            backgroundColor: "hsl(var(--primary))",
+            color: "hsl(var(--primary-foreground))",
+            borderColor: "hsl(var(--primary))",
+          }
+      : {
+          backgroundColor: "transparent",
+          color: "hsl(var(--foreground))",
+          borderColor: "hsl(var(--border))",
+        };
+
+    const buttonStyle = {
+      ...baseStyle,
+      ...mergedSx,
+      ...restStyle,
+      ...selectedStyle,
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          "inline-flex items-center justify-center transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:opacity-50 disabled:pointer-events-none",
+          className
+        )}
+        style={buttonStyle}
+        onClick={handleClick}
+        disabled={disabled}
+        aria-pressed={selected}
+        onMouseEnter={(e) => {
+          if (!disabled && !selected) {
+            e.currentTarget.style.backgroundColor = "hsl(var(--accent) / 0.3)";
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!disabled && !selected) {
+            e.currentTarget.style.backgroundColor = "transparent";
+          }
+        }}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+
+const ToggleButtonGroup = React.forwardRef(
+  (
+    {
+      className,
+      value,
+      exclusive = false,
+      onChange,
+      size = "medium",
+      sx,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    const handleToggleButtonChange = (event, buttonValue) => {
+      if (!onChange) return;
+
+      if (exclusive) {
+        // Exclusive mode: single selection
+        onChange(event, buttonValue === value ? null : buttonValue);
+      } else {
+        // Multiple selection mode
+        const currentValues = Array.isArray(value) ? value : [];
+        const index = currentValues.indexOf(buttonValue);
+        const newValues = [...currentValues];
+
+        if (index === -1) {
+          newValues.push(buttonValue);
+        } else {
+          newValues.splice(index, 1);
+        }
+
+        onChange(event, newValues);
+      }
+    };
+
+    // Clone children and inject props
+    const childrenArray = React.Children.toArray(children);
+    const childrenWithProps = childrenArray.map((child, index) => {
+      if (React.isValidElement(child) && child.type === ToggleButton) {
+        const buttonValue = child.props.value;
+        const isSelected = exclusive
+          ? value === buttonValue
+          : Array.isArray(value) && value.includes(buttonValue);
+
+        return React.cloneElement(child, {
+          selected: isSelected,
+          onChange: handleToggleButtonChange,
+          size,
+          style: {
+            borderRadius: "8px",
+            ...child.props.style,
+          },
+        });
+      }
+      return child;
+    });
+
+    return (
+      <div
+        ref={ref}
+        className={cn("inline-flex gap-2", className)}
+        style={{
+          ...mergedSx,
+          ...style,
+        }}
+        role="group"
+        {...props}
+      >
+        {childrenWithProps}
+      </div>
+    );
+  }
+);
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+
+export { ToggleButton, ToggleButtonGroup };

package/src/components/toolbar.jsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Toolbar = React.forwardRef(
+  ({ className, sx, style, variant = "regular", children, ...props }, ref) => {
+    // Convert sx prop to style if provided
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return {};
+      const sxObj = typeof sx === "function" ? sx({}) : sx;
+      return sxObj;
+    }, [sx]);
+
+    // Get variant styles
+    const getVariantStyles = () => {
+      if (variant === "dense") {
+        return {
+          minHeight: "48px",
+          paddingLeft: "16px",
+          paddingRight: "16px",
+        };
+      } else {
+        return {
+          minHeight: "64px",
+          paddingLeft: "16px",
+          paddingRight: "16px",
+        };
+      }
+    };
+
+    const mergedStyle = {
+      display: "flex",
+      alignItems: "center",
+      ...getVariantStyles(),
+      ...sxStyles,
+      ...style,
+    };
+
+    return (
+      <div ref={ref} className={cn(className)} style={mergedStyle} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+Toolbar.displayName = "Toolbar";
+
+export { Toolbar };

package/src/components/tooltip.jsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import tippy, { roundArrow } from "tippy.js";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/themes/material.css";
+
+// Custom styles to match MUI Tooltip
+const tooltipStyles = `
+  .tippy-box[data-theme~='material'] {
+    font-size: 0.75rem;
+    font-weight: 400;
+    padding: 2px 6px;
+    line-height: 1.4;
+  }
+  .tippy-box[data-theme~='material'] .tippy-content {
+    padding: 0;
+  }
+`;
+
+const Tooltip = React.forwardRef(
+  (
+    {
+      title,
+      children,
+      placement = "top",
+      arrow = true,
+      delay = [100, 0],
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const childRef = React.useRef(null);
+    const tippyInstanceRef = React.useRef(null);
+
+    // Combine refs
+    React.useImperativeHandle(ref, () => childRef.current);
+
+    React.useEffect(() => {
+      if (!childRef.current) {
+        return;
+      }
+
+      // If no title, don't create tooltip
+      if (!title) {
+        // Clean up existing tooltip if title is removed
+        if (tippyInstanceRef.current) {
+          tippyInstanceRef.current.destroy();
+          tippyInstanceRef.current = null;
+        }
+        return;
+      }
+
+      // Inject custom styles if not already injected
+      if (!document.getElementById("mui-tooltip-styles")) {
+        const style = document.createElement("style");
+        style.id = "mui-tooltip-styles";
+        style.textContent = tooltipStyles;
+        document.head.appendChild(style);
+      }
+
+      // Create tippy instance
+      tippyInstanceRef.current = tippy(childRef.current, {
+        content: title,
+        placement: placement,
+        arrow: arrow ? roundArrow : false,
+        delay: delay,
+        theme: "material",
+        animation: "fade",
+        duration: [200, 150],
+        // Use theme colors
+        popperOptions: {
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 8],
+              },
+            },
+          ],
+        },
+      });
+
+      return () => {
+        if (tippyInstanceRef.current) {
+          tippyInstanceRef.current.destroy();
+          tippyInstanceRef.current = null;
+        }
+      };
+    }, [title, placement, arrow, delay]);
+
+    // Update content when title changes
+    React.useEffect(() => {
+      if (tippyInstanceRef.current && title) {
+        tippyInstanceRef.current.setContent(title);
+      }
+    }, [title]);
+
+    // Clone child element and attach ref
+    const childElement = React.Children.only(children);
+
+    if (!React.isValidElement(childElement)) {
+      return children;
+    }
+
+    return React.cloneElement(childElement, {
+      ref: (node) => {
+        childRef.current = node;
+        // Handle original ref if it exists
+        if (typeof childElement.ref === "function") {
+          childElement.ref(node);
+        } else if (childElement.ref) {
+          childElement.ref.current = node;
+        }
+      },
+      className: className
+        ? `${childElement.props.className || ""} ${className}`.trim()
+        : childElement.props.className,
+      style: { ...childElement.props.style, ...style },
+      ...props,
+    });
+  }
+);
+
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip };