@mhome/ui 0.1.0

package/src/components/button.jsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Button = React.forwardRef(
+  (
+    {
+      className,
+      variant,
+      size,
+      startIcon,
+      endIcon,
+      children,
+      style,
+      color,
+      fullWidth = false,
+      disabled = false,
+      href,
+      component,
+      ...props
+    },
+    ref
+  ) => {
+    // Map MUI variants to shadcn variants
+    const mappedVariant =
+      variant === "outlined"
+        ? "outline"
+        : variant === "contained"
+        ? "default"
+        : variant === "text"
+        ? "ghost"
+        : color === "error"
+        ? "destructive"
+        : variant;
+
+    // Map MUI size to shadcn size
+    const mappedSize =
+      size === "small"
+        ? "sm"
+        : size === "medium"
+        ? "default"
+        : size === "large"
+        ? "lg"
+        : size || "default";
+
+    const Component = component || (href ? "a" : "button");
+    const buttonProps = href
+      ? { href, ...props }
+      : { type: "button", disabled, ...props };
+
+    return (
+      <Component
+        className={cn(
+          buttonVariants({ variant: mappedVariant, size: mappedSize }),
+          fullWidth && "w-full",
+          className
+        )}
+        ref={ref}
+        style={style}
+        {...buttonProps}
+      >
+        {startIcon && (
+          <span className="mr-2 inline-flex items-center">{startIcon}</span>
+        )}
+        {children}
+        {endIcon && (
+          <span className="ml-2 inline-flex items-center">{endIcon}</span>
+        )}
+      </Component>
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/card.jsx

@@ -0,0 +1,156 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Card = React.forwardRef(
+  ({ className, elevation = 1, variant = "elevation", square = false, style, ...props }, ref) => {
+    // Get elevation shadow (Material Design elevation system)
+    const getElevationShadow = () => {
+      // If variant is "outlined", no shadow
+      if (variant === "outlined") {
+        return {
+          boxShadow: "none",
+          border: "1px solid hsl(var(--border))",
+        };
+      }
+      
+      // elevation variant (default)
+      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[1] };
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "bg-card text-card-foreground",
+          !square && "rounded-lg",
+          variant === "outlined" ? "border" : "border",
+          elevation === 0 && variant === "elevation" && "shadow-none",
+          className
+        )}
+        style={{
+          ...getElevationShadow(),
+          ...style,
+        }}
+        {...props}
+      />
+    );
+  }
+);
+Card.displayName = "Card";
+
+const CardHeader = React.memo(
+  React.forwardRef(({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  ))
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.memo(
+  React.forwardRef(({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn(
+        "text-2xl font-semibold leading-none tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  ))
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.memo(
+  React.forwardRef(({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  ))
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.memo(
+  React.forwardRef(({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn("p-6", className)} {...props} />;
+  })
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.memo(
+  React.forwardRef(({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  ))
+);
+CardFooter.displayName = "CardFooter";
+
+const CardActionArea = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      role="button"
+      tabIndex={0}
+      className={cn(
+        "cursor-pointer rounded-lg transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        className
+      )}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (props.onClick) {
+            props.onClick(e);
+          }
+        }
+      }}
+      {...props}
+    />
+  );
+});
+CardActionArea.displayName = "CardActionArea";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardActionArea,
+};

package/src/components/checkbox.jsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Check } from "lucide-react";
+
+const Checkbox = React.forwardRef(
+  (
+    {
+      className,
+      checked,
+      onChange,
+      disabled,
+      style,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...props
+    },
+    ref
+  ) => {
+    const [hovered, setHovered] = React.useState(false);
+
+    return (
+      <label
+        className={cn(
+          "relative inline-flex items-center justify-center cursor-pointer",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        )}
+        style={style}
+      >
+        <input
+          ref={ref}
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          className="sr-only"
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          {...props}
+        />
+        <div
+          className={cn(
+            "flex items-center justify-center transition-colors w-5 h-5 border-2 rounded",
+            checked
+              ? "bg-primary border-primary"
+              : hovered && !disabled
+              ? "border-primary"
+              : "border-input bg-transparent",
+            disabled && "opacity-50 cursor-not-allowed"
+          )}
+          onMouseEnter={() => !disabled && setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          aria-hidden="true"
+        >
+          {checked && <Check size={14} className="text-primary-foreground" />}
+        </div>
+      </label>
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/src/components/chip.jsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const chipVariants = cva(
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "text-white",
+        secondary: "bg-secondary text-secondary-foreground",
+        outline: "border border-input bg-background hover:bg-accent",
+        outlined: "border border-input bg-background hover:bg-accent",
+      },
+      size: {
+        small: "h-6 text-xs px-2",
+        medium: "h-7 text-sm px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "medium",
+    },
+  }
+);
+
+const Chip = React.forwardRef(
+  (
+    {
+      className,
+      variant,
+      size,
+      label,
+      onClick,
+      onDelete,
+      style,
+      icon,
+      color,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = onClick || onDelete ? "button" : "span";
+
+    // Get color classes based on color prop
+    const getColorClasses = () => {
+      if (color === "primary")
+        return "bg-primary text-primary-foreground hover:bg-primary/90";
+      if (color === "secondary")
+        return "bg-secondary text-secondary-foreground hover:bg-secondary/80";
+      if (color === "error" || color === "destructive")
+        return "bg-destructive text-destructive-foreground hover:bg-destructive/90";
+      if (color === "success")
+        return "bg-success text-success-foreground hover:bg-success/90";
+      if (color === "info")
+        return "bg-info text-info-foreground hover:bg-info/90";
+      if (color === "warning")
+        return "bg-warning text-warning-foreground hover:bg-warning/90";
+      return "bg-primary text-primary-foreground hover:bg-primary/90"; // Default
+    };
+
+    // Get border class for outlined variant
+    const getBorderClass = () => {
+      if (variant === "outlined" || variant === "outline") {
+        if (color === "primary") return "border-primary";
+        if (color === "secondary") return "border-secondary";
+        if (color === "error" || color === "destructive")
+          return "border-destructive";
+        return "border-border"; // Default border
+      }
+      return "";
+    };
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          chipVariants({ variant, size }),
+          variant !== "outline" && variant !== "outlined" && getColorClasses(),
+          getBorderClass(),
+          (onClick || onDelete) && "cursor-pointer",
+          className
+        )}
+        style={style}
+        onClick={onClick}
+        {...props}
+      >
+        {icon && React.isValidElement(icon) && (
+          <span
+            className="flex items-center justify-center flex-shrink-0 mr-1"
+            style={{
+              color: "inherit",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              lineHeight: 1,
+            }}
+          >
+            {React.cloneElement(icon, {
+              style: {
+                ...(icon.props?.style || {}),
+                width: icon.props?.style?.width || "16px",
+                height: icon.props?.style?.height || "16px",
+                fontSize: icon.props?.style?.fontSize || "16px",
+                color: "inherit",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+              },
+              sx: icon.props?.sx,
+            })}
+          </span>
+        )}
+        <span
+          className="flex items-center"
+          style={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            maxWidth: "100%",
+            lineHeight: 1,
+          }}
+        >
+          {label}
+        </span>
+        {onDelete && (
+          <span className="ml-1 cursor-pointer" onClick={onDelete}>
+            ×
+          </span>
+        )}
+      </Component>
+    );
+  }
+);
+Chip.displayName = "Chip";
+
+export { Chip };

package/src/components/collapse.jsx

@@ -0,0 +1,188 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Collapse = React.forwardRef(
+  (
+    {
+      className,
+      style,
+      in: inProp = false,
+      timeout = "auto",
+      children,
+      unmountOnExit = false,
+      orientation = "vertical",
+      collapsedSize = "0px",
+      ...props
+    },
+    ref
+  ) => {
+    const [mounted, setMounted] = React.useState(inProp || !unmountOnExit);
+    const [height, setHeight] = React.useState(() => {
+      // Initial height: if expanding, use auto (for vertical) or 0px (for horizontal); if collapsing, use collapsedSize
+      // For horizontal, we'll measure the actual width in useEffect, so start with 0px
+      return inProp ? (orientation === "vertical" ? "auto" : "0px") : collapsedSize;
+    });
+    const contentRef = React.useRef(null);
+    const isInitialMount = React.useRef(true);
+
+    React.useEffect(() => {
+      if (unmountOnExit) {
+        if (inProp) {
+          setMounted(true);
+          // Reset isInitialMount when component remounts
+          isInitialMount.current = true;
+        } else {
+          // Delay unmount to allow animation
+          const timer = setTimeout(() => {
+            setMounted(false);
+          }, 300);
+          return () => clearTimeout(timer);
+        }
+      }
+    }, [inProp, unmountOnExit]);
+
+    React.useEffect(() => {
+      const isVertical = orientation === "vertical";
+      
+      if (!contentRef.current) {
+        // Wait for content to mount, then set initial size
+        if (inProp) {
+          // Use a small delay to ensure content is rendered
+          const timer = setTimeout(() => {
+            if (contentRef.current) {
+              const size = isVertical
+                ? contentRef.current.scrollHeight
+                : contentRef.current.scrollWidth;
+              setHeight(size > 0 ? `${size}px` : (isVertical ? "auto" : "0px"));
+            }
+          }, 0);
+          return () => clearTimeout(timer);
+        }
+        return;
+      }
+
+      // Skip animation on initial mount if already expanded
+      if (isInitialMount.current && inProp) {
+        isInitialMount.current = false;
+        const size = isVertical
+          ? contentRef.current.scrollHeight
+          : contentRef.current.scrollWidth;
+        setHeight(size > 0 ? `${size}px` : (isVertical ? "auto" : "0px"));
+        // After a brief moment, set to auto for dynamic content (only for vertical)
+        if (isVertical) {
+        const timer = setTimeout(() => {
+          setHeight("auto");
+        }, 50);
+        return () => clearTimeout(timer);
+        }
+        return;
+      }
+      isInitialMount.current = false;
+
+      const element = contentRef.current;
+
+      if (inProp) {
+        // Expanding: measure current size and animate to full size
+        const currentSize = isVertical
+          ? element.scrollHeight
+          : element.scrollWidth;
+        if (currentSize > 0) {
+          setHeight(`${currentSize}px`);
+
+          // After transition, set to auto for dynamic content (only for vertical)
+          if (isVertical) {
+          const timer = setTimeout(() => {
+            setHeight("auto");
+          }, 300);
+          return () => clearTimeout(timer);
+          }
+        } else {
+          setHeight(isVertical ? "auto" : "0px");
+        }
+      } else {
+        // Collapsing: measure current size and animate to collapsed
+        const currentSize = isVertical
+          ? element.scrollHeight
+          : element.scrollWidth;
+        if (currentSize > 0) {
+          setHeight(`${currentSize}px`);
+
+          // Force reflow before collapsing
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              setHeight(collapsedSize);
+            });
+          });
+        } else {
+          setHeight(collapsedSize);
+        }
+      }
+    }, [inProp, collapsedSize, orientation]);
+
+    if (unmountOnExit && !mounted) {
+      return null;
+    }
+
+    const isVertical = orientation === "vertical";
+    
+    // Determine the actual size to use for styling
+    // When collapsed (!inProp), always use collapsedSize to ensure proper hiding
+    // When expanded (inProp), use height to support animation
+    // If height is still initial value (0px) and inProp is true, use auto temporarily to show content
+    const actualSize = inProp 
+      ? (height === "0px" ? "auto" : height) 
+      : collapsedSize;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "overflow-hidden transition-all",
+          !isVertical && "inline-block",
+          className
+        )}
+        style={{
+          ...(isVertical
+            ? {
+                height: actualSize,
+                maxHeight: inProp ? "none" : collapsedSize,
+              }
+            : {
+                width: actualSize,
+                maxWidth: inProp ? "none" : collapsedSize,
+                minWidth: 0,
+              }),
+          transitionDuration:
+            timeout === "auto"
+              ? "300ms"
+              : typeof timeout === "number"
+              ? `${timeout}ms`
+              : "300ms",
+          transitionTimingFunction: "ease-in-out",
+          ...style,
+        }}
+        {...props}
+      >
+        <div
+          ref={contentRef}
+          style={
+            !isVertical
+              ? {
+                  whiteSpace: "nowrap",
+                  display: "inline-block",
+                  width: "fit-content",
+                  minWidth: "fit-content",
+                }
+              : undefined
+          }
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+Collapse.displayName = "Collapse";
+
+export { Collapse };