@mhome/ui 0.1.0

package/src/components/divider.jsx

@@ -0,0 +1,192 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Divider = React.forwardRef(
+  (
+    {
+      className,
+      style = {},
+      orientation = "horizontal",
+      variant = "fullWidth",
+      flexItem = false,
+      light = false,
+      textAlign = "center",
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isVertical = orientation === "vertical";
+    const isInset = variant === "inset";
+    const isMiddle = variant === "middle";
+
+    // Extract margin values from style prop
+    const styleMarginLeft = style?.marginLeft;
+    const styleMarginRight = style?.marginRight;
+
+    // Get divider styles
+    const getDividerStyles = () => {
+      const baseStyles = {
+        borderColor: light ? "rgba(0, 0, 0, 0.08)" : "hsl(var(--border))",
+      };
+
+      if (isVertical) {
+        // For vertical divider, use marginLeft and marginRight for horizontal spacing
+        // Default spacing: 8px on both sides, unless variant or style specifies otherwise
+        const defaultMargin = "8px";
+        const marginLeft = styleMarginLeft || (isInset ? "16px" : defaultMargin);
+        const marginRight = styleMarginRight || (isInset ? "16px" : defaultMargin);
+        
+        return {
+          ...baseStyles,
+          borderLeftWidth: "1px",
+          borderLeftStyle: "solid",
+          height: "100%",
+          width: "1px",
+          marginLeft: marginLeft,
+          marginRight: marginRight,
+        };
+      }
+
+      // Horizontal divider
+      // Calculate width based on margins to prevent overflow
+      // inset: only left margin, middle: both margins, fullWidth: no margins
+      const marginLeft =
+        styleMarginLeft || (isInset ? "16px" : isMiddle ? "16px" : "0px");
+      const marginRight =
+        styleMarginRight || (isInset ? "0px" : isMiddle ? "16px" : "0px");
+
+      // Parse margin values to calculate total margin
+      const parseMargin = (margin) => {
+        if (!margin || margin === "0px" || margin === "0") return 0;
+        if (typeof margin === "number") return margin;
+        const match = margin.toString().match(/([\d.]+)/);
+        return match ? parseFloat(match[1]) : 0;
+      };
+
+      const marginLeftNum = parseMargin(marginLeft);
+      const marginRightNum = parseMargin(marginRight);
+      const totalMargin = marginLeftNum + marginRightNum;
+
+      const styles = {
+        ...baseStyles,
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        boxSizing: "border-box",
+      };
+      
+      // Set width and margins based on variant
+      if (flexItem) {
+        styles.width = "1px";
+      } else if (variant === "fullWidth") {
+        // fullWidth: 100% width, no horizontal margins
+        styles.width = "100%";
+        styles.marginLeft = "0px";
+        styles.marginRight = "0px";
+      } else {
+        // inset or middle: calculate width based on margins
+        styles.width = totalMargin > 0 ? `calc(100% - ${totalMargin}px)` : "100%";
+        if (marginLeft !== "0px" && marginLeft !== "0") {
+          styles.marginLeft = marginLeft;
+        }
+        if (marginRight !== "0px" && marginRight !== "0") {
+          styles.marginRight = marginRight;
+        }
+      }
+      
+      return styles;
+    };
+
+    // If has children, render as wrapper with text
+    if (children) {
+      // Calculate margin for variant
+      // inset: only left margin, middle: both margins, fullWidth: no margins
+      const leftMargin = styleMarginLeft || (isInset ? "16px" : isMiddle ? "16px" : "0px");
+      const rightMargin = styleMarginRight || (isInset ? "0px" : isMiddle ? "16px" : "0px");
+      
+      return (
+        <div
+          ref={ref}
+          className={cn("flex items-center", className)}
+          style={{
+            width: "100%",
+            margin: "8px 0",
+            ...style,
+          }}
+          {...props}
+        >
+          <div
+            style={{
+              flex: 1,
+              borderTopWidth: "1px",
+              borderTopStyle: "solid",
+              borderColor: light ? "rgba(0, 0, 0, 0.08)" : "hsl(var(--border))",
+              marginLeft: leftMargin !== "0px" ? leftMargin : undefined,
+            }}
+          />
+          <div
+            style={{
+              paddingLeft: "16px",
+              paddingRight: "16px",
+              textAlign: textAlign,
+              color: "hsl(var(--muted-foreground))",
+              fontSize: "0.875rem",
+            }}
+          >
+            {children}
+          </div>
+          <div
+            style={{
+              flex: 1,
+              borderTopWidth: "1px",
+              borderTopStyle: "solid",
+              borderColor: light ? "rgba(0, 0, 0, 0.08)" : "hsl(var(--border))",
+              marginRight: rightMargin !== "0px" ? rightMargin : undefined,
+            }}
+          />
+        </div>
+      );
+    }
+
+    // Simple divider without text
+    const dividerStyles = getDividerStyles();
+    // Add default vertical spacing for horizontal dividers if not specified
+    if (!isVertical && !flexItem) {
+      if (style.marginTop === undefined && dividerStyles.marginTop === undefined) {
+        dividerStyles.marginTop = "8px";
+      }
+      if (style.marginBottom === undefined && dividerStyles.marginBottom === undefined) {
+        dividerStyles.marginBottom = "8px";
+      }
+    }
+    
+    // For fullWidth, ensure no horizontal margins override the divider styles
+    const finalStyle = { ...dividerStyles, ...style };
+    if (!isVertical && variant === "fullWidth" && !flexItem) {
+      finalStyle.width = "100%";
+      finalStyle.marginLeft = style.marginLeft ?? "0px";
+      finalStyle.marginRight = style.marginRight ?? "0px";
+    }
+    
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          isVertical ? "inline-block" : "block",
+          flexItem && "self-stretch",
+          className
+        )}
+        style={{
+          padding: 0,
+          display: isVertical ? "inline-block" : "block",
+          ...finalStyle,
+        }}
+        {...props}
+      />
+    );
+  }
+);
+
+Divider.displayName = "Divider";
+
+export { Divider };

package/src/components/drawer.jsx

@@ -0,0 +1,255 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Drawer = React.forwardRef(
+  (
+    {
+      anchor = "left",
+      open = false,
+      onClose,
+      onOpenChange,
+      children,
+      className,
+      sx,
+      PaperProps,
+      transitionDuration = 300,
+      keepMounted = false,
+      variant = "temporary",
+      ModalProps,
+      SlideProps,
+      ...props
+    },
+    ref
+  ) => {
+    const drawerRef = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => drawerRef.current);
+
+    // Handle backdrop click - only for temporary variant
+    const handleBackdropClick = (e) => {
+      if (variant === "temporary" && e.target === e.currentTarget && onClose) {
+        onClose(e, "backdropClick");
+        if (onOpenChange) {
+          onOpenChange(false);
+        }
+      }
+    };
+    
+    // Handle open state changes
+    React.useEffect(() => {
+      if (onOpenChange) {
+        onOpenChange(open);
+      }
+    }, [open, onOpenChange]);
+
+    // Handle escape key
+    React.useEffect(() => {
+      if (!open) return;
+
+      const handleEscape = (e) => {
+        if (e.key === "Escape" && onClose) {
+          onClose(e, "escapeKeyDown");
+          if (onOpenChange) {
+            onOpenChange(false);
+          }
+        }
+      };
+
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }, [open, onClose]);
+
+    // Merge sx styles - handle root and paper selectors
+    const { rootStyles, paperStyles: sxPaperStyles } = React.useMemo(() => {
+      if (!sx) return { rootStyles: {}, paperStyles: {} };
+      const sxObj = typeof sx === "function" ? sx({}) : sx;
+
+      // Extract root-level styles (direct properties)
+      const rootStyles = {};
+      // Extract paper styles from "& .MuiDrawer-paper" selector
+      const paperStyles = {};
+
+      Object.keys(sxObj).forEach((key) => {
+        if (key === "& .MuiDrawer-paper" || key === "&.MuiDrawer-paper") {
+          Object.assign(paperStyles, sxObj[key]);
+        } else if (key.startsWith("&")) {
+          // Other selectors - could be handled here if needed
+        } else {
+          // Direct style properties go to root
+          rootStyles[key] = sxObj[key];
+        }
+      });
+
+      return { rootStyles, paperStyles };
+    }, [sx]);
+
+    // Get PaperProps styles
+    const paperPropsStyles = React.useMemo(() => {
+      const paperSx = PaperProps?.sx;
+      if (!paperSx) return {};
+      return typeof paperSx === "function" ? paperSx({}) : paperSx;
+    }, [PaperProps]);
+
+    // Get anchor styles
+    const getAnchorStyles = () => {
+      const baseStyles = {
+        position: "fixed",
+        zIndex: parseInt(
+          getComputedStyle(document.documentElement).getPropertyValue(
+            "--z-index-drawer"
+          ) || "1200",
+          10
+        ),
+        transition: `transform ${transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+      };
+
+      switch (anchor) {
+        case "left":
+          return {
+            ...baseStyles,
+            top: 0,
+            left: 0,
+            bottom: 0,
+            transform: open ? "translateX(0)" : "translateX(-100%)",
+          };
+        case "right":
+          return {
+            ...baseStyles,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            transform: open ? "translateX(0)" : "translateX(100%)",
+          };
+        case "top":
+          return {
+            ...baseStyles,
+            top: 0,
+            left: 0,
+            right: 0,
+            width: "100%",
+            transform: open ? "translateY(0)" : "translateY(-100%)",
+          };
+        case "bottom":
+          return {
+            ...baseStyles,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            width: "100%",
+            transform: open ? "translateY(0)" : "translateY(100%)",
+          };
+        default:
+          return baseStyles;
+      }
+    };
+
+    const anchorStyles = getAnchorStyles();
+
+    // Early return after all hooks
+    // For permanent variant, always render if keepMounted is true
+    if (!open && !keepMounted && variant !== "permanent") return null;
+
+    // For permanent variant, always show
+    const isPermanent = variant === "permanent";
+    const shouldShowBackdrop = variant === "temporary" || variant === "persistent";
+    const shouldShowDrawer = isPermanent || open || keepMounted;
+
+    return (
+      <>
+        {/* Backdrop - only for temporary and persistent variants */}
+        {shouldShowBackdrop && shouldShowDrawer && (
+          <div
+            className="fixed inset-0 bg-black/50"
+            style={{
+              zIndex:
+                parseInt(
+                  getComputedStyle(document.documentElement).getPropertyValue(
+                    "--z-index-drawer"
+                  ) || "1200",
+                  10
+                ) - 1,
+              opacity: open ? 1 : 0,
+              transition: `opacity ${transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+              pointerEvents: open ? "auto" : "none",
+            }}
+            onClick={handleBackdropClick}
+            aria-hidden="true"
+          />
+        )}
+
+        {/* Drawer */}
+        <div
+          ref={drawerRef}
+          className={cn(
+            "MuiDrawer-root",
+            "fixed",
+            anchor === "left" || anchor === "right" ? "h-full" : "w-full",
+            anchor === "top" || anchor === "bottom" ? "h-auto" : "w-auto",
+            !open && "pointer-events-none",
+            className
+          )}
+          style={{
+            ...anchorStyles,
+            ...rootStyles,
+            display: shouldShowDrawer ? "block" : "none",
+            // For permanent variant, always visible
+            transform: isPermanent ? "translateX(0)" : anchorStyles.transform,
+            ...props.style,
+          }}
+          role="presentation"
+          {...Object.fromEntries(
+            Object.entries(props).filter(([key]) => key !== "style")
+          )}
+        >
+          {/* Paper (drawer content) */}
+          <div
+            className={cn(
+              "MuiDrawer-paper",
+              "MuiPaper-root",
+              anchor === "left" || anchor === "right" ? "h-full" : "",
+              "w-full",
+              anchor === "left" || anchor === "right"
+                ? "overflow-y-auto"
+                : anchor === "top" || anchor === "bottom"
+                ? "overflow-y-auto"
+                : "",
+              PaperProps?.className
+            )}
+            style={{
+              backgroundColor: "hsl(var(--card))",
+              boxShadow:
+                sxPaperStyles.boxShadow !== undefined
+                  ? sxPaperStyles.boxShadow
+                  : paperPropsStyles.boxShadow !== undefined
+                  ? paperPropsStyles.boxShadow
+                  : PaperProps?.style?.boxShadow !== undefined
+                  ? PaperProps.style.boxShadow
+                  : open
+                  ? "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)"
+                  : "none", // No shadow when closed
+              ...(anchor === "left" || anchor === "right"
+                ? { 
+                    height: "100%", 
+                    width: PaperProps?.style?.width || sxPaperStyles.width || paperPropsStyles.width || "300px",
+                    minWidth: PaperProps?.style?.minWidth || sxPaperStyles.minWidth || paperPropsStyles.minWidth || "300px",
+                    maxWidth: PaperProps?.style?.maxWidth || sxPaperStyles.maxWidth || paperPropsStyles.maxWidth || "90vw"
+                  }
+                : { width: "100%" }),
+              ...sxPaperStyles,
+              ...paperPropsStyles,
+              ...PaperProps?.style,
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </>
+    );
+  }
+);
+
+Drawer.displayName = "Drawer";
+
+export { Drawer };

package/src/components/form-control-label.jsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const FormControlLabel = React.forwardRef(
+  (
+    {
+      control,
+      label,
+      labelPlacement = "end",
+      disabled = false,
+      value,
+      className,
+      sx,
+      ...props
+    },
+    ref
+  ) => {
+    // Merge sx styles
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    const isLabelStart = labelPlacement === "start";
+    const isLabelTop = labelPlacement === "top";
+    const isLabelBottom = labelPlacement === "bottom";
+
+    const controlWithValue = React.useMemo(() => {
+      if (value !== undefined && React.isValidElement(control)) {
+        return React.cloneElement(control, {
+          ...control.props,
+          value,
+        });
+      }
+      return control;
+    }, [control, value]);
+
+    return (
+      <label
+        ref={ref}
+        className={cn(
+          "inline-flex items-center cursor-pointer",
+          disabled && "opacity-50 cursor-not-allowed",
+          isLabelTop && "flex-col items-start",
+          isLabelBottom && "flex-col-reverse items-start",
+          isLabelStart && "flex-row-reverse items-center",
+          !isLabelTop && !isLabelBottom && !isLabelStart && "items-center",
+          className
+        )}
+        style={mergedSx}
+        {...props}
+      >
+        {/* Control */}
+        <span
+          className={cn(
+            "inline-flex items-center justify-center shrink-0",
+            isLabelTop && "mb-1",
+            isLabelBottom && "mt-1",
+            isLabelStart && "ml-2",
+            !isLabelStart && !isLabelTop && !isLabelBottom && "mr-2"
+          )}
+          style={{
+            minWidth: "20px",
+            minHeight: "20px",
+          }}
+        >
+          {controlWithValue}
+        </span>
+
+        {/* Label */}
+        {label && (
+          <span
+            className={cn(
+              "text-sm text-foreground",
+              disabled && "text-muted-foreground opacity-50",
+              isLabelStart && "mr-2"
+            )}
+          >
+            {label}
+          </span>
+        )}
+      </label>
+    );
+  }
+);
+
+FormControlLabel.displayName = "FormControlLabel";
+
+export { FormControlLabel };

package/src/components/form-group.jsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const FormGroup = React.forwardRef(
+  ({ children, className, sx, style, row = false, ...props }, ref) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          row ? "flex-row flex-wrap gap-4" : "flex-col gap-3",
+          className
+        )}
+        style={{
+          ...mergedSx,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+FormGroup.displayName = "FormGroup";
+
+export { FormGroup };

package/src/components/form-label.jsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const FormLabel = React.forwardRef(
+  (
+    {
+      children,
+      component = "label",
+      className,
+      sx,
+      style,
+      required = false,
+      disabled = false,
+      error = false,
+      focused = false,
+      ...props
+    },
+    ref
+  ) => {
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    const Component = component === "legend" ? "legend" : "label";
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          "block text-sm font-medium mb-1",
+          error
+            ? "text-destructive"
+            : focused
+            ? "text-primary"
+            : "text-foreground",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        )}
+        style={{
+          ...mergedSx,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+        {required && <span className="ml-1 text-destructive">*</span>}
+      </Component>
+    );
+  }
+);
+FormLabel.displayName = "FormLabel";
+
+export { FormLabel };