@mhome/ui 0.1.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@mhome/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "mHome UI Component Library",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "shadcn"
+  ],
+  "author": "mhome.ai",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.22.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "autoprefixer": "^10.4.0",
+    "rollup": "^4.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
+    "tailwindcss": "^3.4.0"
+  }
+}
+

package/src/common/adaptive-theme-provider.js

@@ -0,0 +1,19 @@
+// Simplified version for examples project
+import React from "react";
+
+export const getBackground = (backgroundType, isDark) => {
+  // Return null for solid backgrounds, or gradient strings for gradient backgrounds
+  // This is a simplified version - in the real project this would handle theme logic
+  return null;
+};
+
+// Hook for getting component background color
+export const useComponentBackgroundColor = () => {
+  // Simplified version - return a function that accepts a default color
+  // In the real project, this would use theme context or state management
+  return (defaultColor) => {
+    // Return the default color passed in, or fallback to background
+    return defaultColor || "hsl(var(--background))";
+  };
+};
+

package/src/components/accordion.jsx

@@ -0,0 +1,306 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { ChevronDown } from "lucide-react";
+
+const Accordion = React.forwardRef(
+  (
+    {
+      className,
+      style,
+      expanded,
+      onChange,
+      children,
+      defaultExpanded,
+      ...props
+    },
+    ref
+  ) => {
+    const [isExpanded, setIsExpanded] = React.useState(
+      defaultExpanded || false
+    );
+    const accordionId = React.useId();
+
+    // Use ref to store latest onChange and expanded to avoid stale closures
+    const onChangeRef = React.useRef(onChange);
+    const expandedRef = React.useRef(expanded);
+    React.useEffect(() => {
+      onChangeRef.current = onChange;
+      expandedRef.current = expanded;
+    }, [onChange, expanded]);
+
+    const handleChange = React.useCallback(
+      (event) => {
+        if (event) {
+          event.preventDefault?.();
+          event.stopPropagation?.();
+        }
+
+        // Use ref to get the latest expanded value to avoid stale closures
+        const currentExpandedValue = expandedRef.current;
+        const currentState =
+          currentExpandedValue !== undefined
+            ? currentExpandedValue
+            : isExpanded;
+        const newExpanded = !currentState;
+
+        // Always update internal state for uncontrolled mode
+        setIsExpanded(newExpanded);
+
+        // Always call onChange with the new state
+        // The parent component will update the expanded prop if it's controlled
+        if (onChangeRef.current) {
+          // MUI Accordion onChange signature: onChange(event, expanded)
+          onChangeRef.current(event, newExpanded);
+        }
+      },
+      [isExpanded]
+    );
+
+    const currentExpanded = expanded !== undefined ? expanded : isExpanded;
+
+    const finalBackgroundColor = style?.backgroundColor || "hsl(var(--card))";
+
+    const {
+      marginBottom,
+      border,
+      borderRadius,
+      boxShadow,
+      backgroundColor,
+      ...restStyle
+    } = style || {};
+
+    return (
+      <div
+        ref={ref}
+        role="region"
+        className={cn(
+          "overflow-hidden rounded-2xl",
+          marginBottom === undefined && "mb-2",
+          className
+        )}
+        style={{
+          border:
+            border !== undefined ? border : "1px solid hsl(var(--border))",
+          borderRadius: borderRadius !== undefined ? borderRadius : 16,
+          boxShadow: boxShadow !== undefined ? boxShadow : "none",
+          backgroundColor:
+            backgroundColor !== undefined
+              ? backgroundColor
+              : "hsl(var(--card))",
+          marginBottom: marginBottom,
+          ...restStyle,
+        }}
+        {...props}
+      >
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child)) {
+            if (child.type === AccordionSummary) {
+              return React.cloneElement(child, {
+                expanded: currentExpanded,
+                onChange: handleChange,
+                id: `${accordionId}-summary`,
+              });
+            }
+            if (child.type === AccordionDetails) {
+              return React.cloneElement(child, {
+                expanded: currentExpanded,
+                id: `${accordionId}-content`,
+              });
+            }
+          }
+          return child;
+        })}
+      </div>
+    );
+  }
+);
+Accordion.displayName = "Accordion";
+
+const AccordionSummary = React.forwardRef(
+  (
+    {
+      className,
+      style,
+      expandIcon,
+      children,
+      expanded,
+      onChange,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    // AccordionSummary receives onChange from Accordion which is handleChange
+    // handleChange expects (event) and will handle the expanded state internally
+    // Extract padding and backgroundColor from style to allow override
+    const {
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      backgroundColor,
+      ...restStyle
+    } = style || {};
+
+    // Check if padding is explicitly set in style
+    const hasPaddingInStyle =
+      padding !== undefined ||
+      paddingTop !== undefined ||
+      paddingBottom !== undefined ||
+      paddingLeft !== undefined ||
+      paddingRight !== undefined;
+
+    const defaultPaddingClass = hasPaddingInStyle ? "" : "py-2 px-4";
+    const minHeight = style?.minHeight !== undefined ? style.minHeight : "auto";
+
+    const contentId = id ? `${id}-content` : undefined;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        id={id}
+        aria-expanded={expanded}
+        aria-controls={contentId}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (onChange) {
+            // AccordionSummary receives onChange from Accordion, which expects (event, expanded)
+            // But we need to call it with just the event, and Accordion will handle the expanded state
+            onChange(e);
+          }
+        }}
+        className={cn(
+          "w-full flex items-center justify-between transition-colors focus:outline-none",
+          defaultPaddingClass,
+          className
+        )}
+        style={{
+          border: "none",
+          borderTop: "none",
+          borderBottom: "none",
+          cursor: "pointer",
+          textAlign: "left",
+          backgroundColor:
+            backgroundColor !== undefined ? backgroundColor : "transparent",
+          minHeight: minHeight,
+          padding: padding,
+          paddingTop: paddingTop,
+          paddingBottom: paddingBottom,
+          paddingLeft: paddingLeft,
+          paddingRight: paddingRight,
+          ...restStyle,
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (onChange) {
+              onChange(e);
+            }
+          }
+        }}
+        {...props}
+      >
+        <div style={{ flex: 1 }}>{children}</div>
+        {expandIcon !== false &&
+          (expandIcon || (
+            <ChevronDown
+              size={20}
+              className="text-foreground"
+              style={{
+                transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 0.2s",
+                marginLeft: "0.5rem",
+              }}
+            />
+          ))}
+      </button>
+    );
+  }
+);
+AccordionSummary.displayName = "AccordionSummary";
+
+const AccordionDetails = React.forwardRef(
+  ({ className, style, expanded, children, id, ...props }, ref) => {
+    if (!expanded) return null;
+
+    const {
+      backgroundColor: styleBackgroundColor,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...restStyle
+    } = style || {};
+
+    // Remove padding-related properties from restStyle to avoid conflicts
+    const {
+      padding: _,
+      paddingTop: __,
+      paddingBottom: ___,
+      paddingLeft: ____,
+      paddingRight: _____,
+      ...cleanRestStyle
+    } = restStyle;
+
+    // Check if padding (all sides) is explicitly set
+    const hasPadding = padding !== undefined;
+
+    // Check if individual padding sides are set
+    const hasIndividualPadding =
+      paddingTop !== undefined ||
+      paddingBottom !== undefined ||
+      paddingLeft !== undefined ||
+      paddingRight !== undefined;
+
+    // Default padding: use "1rem" (16px) for all sides if no padding is set
+    // If padding is explicitly set, use it
+    // If individual paddings are set, don't set padding (let individual ones work)
+    // Otherwise use default "1rem"
+    const finalPadding = hasPadding
+      ? padding
+      : hasIndividualPadding
+      ? undefined
+      : "1rem";
+
+    // Build style object, only include padding properties if they are defined
+    const styleObj = {
+      backgroundColor: styleBackgroundColor || "transparent",
+      ...cleanRestStyle,
+    };
+
+    // Only set padding if finalPadding is defined
+    if (finalPadding !== undefined) {
+      styleObj.padding = finalPadding;
+    }
+
+    // Only set individual padding properties if they are defined
+    if (paddingTop !== undefined) styleObj.paddingTop = paddingTop;
+    if (paddingBottom !== undefined) styleObj.paddingBottom = paddingBottom;
+    if (paddingLeft !== undefined) styleObj.paddingLeft = paddingLeft;
+    if (paddingRight !== undefined) styleObj.paddingRight = paddingRight;
+
+    return (
+      <div
+        ref={ref}
+        id={id}
+        role="region"
+        aria-labelledby={id ? id.replace("-content", "-summary") : undefined}
+        className={cn("text-foreground", className)}
+        style={{
+          ...styleObj,
+          borderTop: "none",
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+AccordionDetails.displayName = "AccordionDetails";
+
+export { Accordion, AccordionSummary, AccordionDetails };

package/src/components/alert.jsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { AlertCircle, CheckCircle, Info, AlertTriangle, X } from "lucide-react";
+
+const Alert = React.forwardRef(
+  (
+    {
+      className,
+      severity = "info",
+      variant = "standard",
+      onClose,
+      action,
+      icon,
+      iconMapping,
+      children,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    // Default icon mapping
+    const defaultIconMapping = {
+      error: AlertCircle,
+      warning: AlertTriangle,
+      info: Info,
+      success: CheckCircle,
+    };
+
+    // Check if icon is a React element (already rendered) or a component
+    const isReactElement = icon && typeof icon === "object" && icon.$$typeof;
+    const IconComponent =
+      !isReactElement &&
+      (icon || iconMapping?.[severity] || defaultIconMapping[severity] || Info);
+
+    // Get severity classes
+    const getSeverityClasses = () => {
+      const classes = {
+        error: {
+          standard: "bg-destructive/10 text-destructive",
+          filled: "bg-destructive text-destructive-foreground",
+          outlined: "border-destructive text-destructive bg-transparent",
+        },
+        warning: {
+          standard: "bg-warning/10 text-warning",
+          filled: "bg-warning text-warning-foreground",
+          outlined: "border-warning text-warning bg-transparent",
+        },
+        info: {
+          standard: "bg-info/10 text-info",
+          filled: "bg-info text-info-foreground",
+          outlined: "border-info text-info bg-transparent",
+        },
+        success: {
+          standard: "bg-success/10 text-success",
+          filled: "bg-success text-success-foreground",
+          outlined: "border-success text-success bg-transparent",
+        },
+      };
+      return classes[severity]?.[variant] || classes.info.standard;
+    };
+
+    const severityClasses = getSeverityClasses();
+
+    // Extract padding from style to allow override
+    const {
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...restStyle
+    } = style || {};
+
+    const hasPaddingInStyle =
+      padding !== undefined ||
+      paddingTop !== undefined ||
+      paddingBottom !== undefined ||
+      paddingLeft !== undefined ||
+      paddingRight !== undefined;
+
+    // Default padding class, but allow override
+    const defaultPaddingClass = hasPaddingInStyle ? "" : "p-4";
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(
+          "relative flex items-center gap-3 rounded-2xl text-sm",
+          defaultPaddingClass,
+          variant === "outlined" && "border",
+          severityClasses,
+          className
+        )}
+        style={{
+          padding: padding,
+          paddingTop: paddingTop,
+          paddingBottom: paddingBottom,
+          paddingLeft: paddingLeft,
+          paddingRight: paddingRight,
+          ...restStyle,
+        }}
+        {...props}
+      >
+        {icon !== false &&
+          (isReactElement ? (
+            <div className="flex-shrink-0 flex items-center text-current">
+              {icon}
+            </div>
+          ) : (
+            <IconComponent
+              size={20}
+              className="flex-shrink-0 text-current"
+            />
+          ))}
+        <div className="flex-1 flex items-center">{children}</div>
+        {(onClose || action) && (
+          <div className="flex items-center gap-1">
+            {action}
+            {onClose && (
+              <button
+                onClick={onClose}
+                className="flex items-center justify-center rounded-sm opacity-70 hover:opacity-100 transition-opacity p-2 text-current"
+                aria-label="Close"
+              >
+                <X size={16} />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+export { Alert };

package/src/components/app-bar.jsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const AppBar = React.forwardRef(
+  (
+    {
+      className,
+      position = "fixed",
+      color = "default",
+      elevation = 4,
+      sx,
+      style,
+      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 elevation shadow (Material Design elevation system)
+    const getElevationShadow = () => {
+      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 and get shadow
+      const clampedElevation = Math.max(0, Math.min(24, Math.round(elevation)));
+      return { boxShadow: shadows[clampedElevation] || shadows[4] };
+    };
+
+    // Get color classes
+    const getColorClasses = () => {
+      if (color === "primary") return "bg-primary text-primary-foreground";
+      if (color === "secondary")
+        return "bg-secondary text-secondary-foreground";
+      if (color === "transparent") return "bg-transparent text-foreground";
+      return "bg-card text-foreground"; // default
+    };
+
+    // Set position styles for fixed/absolute/sticky positions
+    const positionStyles = 
+      position === "fixed" || position === "absolute" || position === "sticky"
+        ? {
+            top: 0,
+            left: 0,
+            right: 0,
+            width: "100%",
+          }
+        : {};
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          getColorClasses(),
+          "z-app-bar",
+          position === "static" || position === "relative" ? "w-full" : "",
+          className
+        )}
+        style={{
+          position: position,
+          ...positionStyles,
+          ...getElevationShadow(),
+          ...sxStyles,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+AppBar.displayName = "AppBar";
+
+export { AppBar };