@mhome/ui 0.1.0

package/src/components/slider.jsx

@@ -0,0 +1,382 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Slider = React.forwardRef(
+  (
+    {
+      value,
+      onChange,
+      onChangeCommitted,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      orientation = "horizontal",
+      className,
+      style,
+      sx,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-valuetext": ariaValueText,
+      ...props
+    },
+    ref
+  ) => {
+    const containerRef = React.useRef(null);
+    const draggingRef = React.useRef(false);
+    const [localValue, setLocalValue] = React.useState(value);
+
+    // Convert sx to style if provided
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return { container: {} };
+      const sxObj = typeof sx === "function" ? sx({}) : sx;
+      // Convert MUI sx object to style object
+      const converted = { container: {} };
+
+      // Container-level styles (position, top, transform, width, left, etc.)
+      if (sxObj.position) converted.container.position = sxObj.position;
+      if (sxObj.top !== undefined) converted.container.top = sxObj.top;
+      if (sxObj.left !== undefined) converted.container.left = sxObj.left;
+      if (sxObj.width) converted.container.width = sxObj.width;
+      if (sxObj.height) converted.container.height = sxObj.height;
+      if (sxObj.transform) converted.container.transform = sxObj.transform;
+
+      // Internal component styles
+      if (sxObj["& .MuiSlider-rail"]) {
+        converted.rail = sxObj["& .MuiSlider-rail"];
+      }
+      if (sxObj["& .MuiSlider-track"]) {
+        converted.track = sxObj["& .MuiSlider-track"];
+      }
+      if (sxObj["& .MuiSlider-thumb"]) {
+        converted.thumb = sxObj["& .MuiSlider-thumb"];
+      }
+      return converted;
+    }, [sx, localValue]);
+
+    // Sync localValue with value prop
+    React.useEffect(() => {
+      if (!draggingRef.current) {
+        setLocalValue(value);
+      }
+    }, [value]);
+
+    const isVertical = orientation === "vertical";
+    const percent = Math.max(0, Math.min(1, (localValue - min) / (max - min)));
+
+    const handleMouseDown = (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      draggingRef.current = true;
+      handleMove(e);
+      // Use capture phase to ensure we get the events
+      document.addEventListener("mousemove", handleMouseMove, {
+        capture: true,
+      });
+      document.addEventListener("mouseup", handleMouseUp, { capture: true });
+    };
+
+    const handleTouchStart = (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      draggingRef.current = true;
+      handleMove(e.touches[0]);
+      // Use capture phase to ensure we get the events
+      document.addEventListener("touchmove", handleTouchMove, {
+        capture: true,
+        passive: false,
+      });
+      document.addEventListener("touchend", handleTouchEnd, { capture: true });
+    };
+
+    const handleMouseMove = (e) => {
+      if (!draggingRef.current) return;
+      e.preventDefault();
+      handleMove(e);
+    };
+
+    const handleTouchMove = (e) => {
+      if (!draggingRef.current) return;
+      e.preventDefault();
+      handleMove(e.touches[0]);
+    };
+
+    const handleMouseUp = () => {
+      if (draggingRef.current && onChangeCommitted) {
+        onChangeCommitted(null, localValue);
+      }
+      draggingRef.current = false;
+      document.removeEventListener("mousemove", handleMouseMove, {
+        capture: true,
+      });
+      document.removeEventListener("mouseup", handleMouseUp, { capture: true });
+    };
+
+    const handleTouchEnd = () => {
+      if (draggingRef.current && onChangeCommitted) {
+        onChangeCommitted(null, localValue);
+      }
+      draggingRef.current = false;
+      document.removeEventListener("touchmove", handleTouchMove, {
+        capture: true,
+      });
+      document.removeEventListener("touchend", handleTouchEnd, {
+        capture: true,
+      });
+    };
+
+    const handleMove = (e) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+
+      if (isVertical) {
+        let y = rect.bottom - e.clientY;
+        y = Math.max(0, Math.min(rect.height, y));
+        const newPercent = y / rect.height;
+        const newValue = Math.round(newPercent * (max - min) + min);
+        const clampedValue = Math.max(min, Math.min(max, newValue));
+        setLocalValue(clampedValue);
+        if (onChange) onChange(null, clampedValue);
+      } else {
+        let x = e.clientX - rect.left;
+        x = Math.max(0, Math.min(rect.width, x));
+        const newPercent = x / rect.width;
+        const newValue = Math.round(newPercent * (max - min) + min);
+        const clampedValue = Math.max(min, Math.min(max, newValue));
+        setLocalValue(clampedValue);
+        if (onChange) onChange(null, clampedValue);
+      }
+    };
+
+    const railStyle = {
+      ...(isVertical
+        ? {
+            width: "100%",
+            height: "100%",
+            borderRadius: sxStyles.rail?.borderRadius || "10px",
+            backgroundColor:
+              sxStyles.rail?.backgroundColor || "hsl(var(--muted))",
+            border: sxStyles.rail?.border || "none",
+            position: "relative",
+            zIndex: 0,
+          }
+        : {
+            width: "100%",
+            height: sxStyles.rail?.height || "4px",
+            borderRadius: sxStyles.rail?.borderRadius || "2px",
+            backgroundColor:
+              sxStyles.rail?.backgroundColor || "hsl(var(--muted))",
+            border: sxStyles.rail?.border || "none",
+            position: "relative",
+            zIndex: 0,
+          }),
+    };
+
+    // Get track display value (handle dynamic display based on value)
+    const getTrackDisplay = () => {
+      if (sxStyles.track?.display !== undefined) {
+        // Handle function or conditional display
+        if (typeof sxStyles.track.display === "function") {
+          return sxStyles.track.display(localValue) ? "block" : "none";
+        }
+        return sxStyles.track.display;
+      }
+      // Default: hide track when value is 0 (for vertical sliders)
+      return isVertical && localValue === 0 ? "none" : "block";
+    };
+
+    const trackStyle = {
+      ...(isVertical
+        ? {
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            height: `${percent * 100}%`,
+            borderRadius: sxStyles.track?.borderRadius || "10px",
+            backgroundColor:
+              sxStyles.track?.backgroundColor || "hsl(var(--primary))",
+            display: getTrackDisplay(),
+            border: sxStyles.track?.border || "none",
+            zIndex: 1,
+            pointerEvents: "none",
+          }
+        : {
+            position: "absolute",
+            top: "50%",
+            left: 0,
+            transform: "translateY(-50%)",
+            width: `${percent * 100}%`,
+            height: sxStyles.track?.height || "4px",
+            borderRadius: sxStyles.track?.borderRadius || "2px",
+            backgroundColor:
+              sxStyles.track?.backgroundColor || "hsl(var(--primary))",
+            border: sxStyles.track?.border || "none",
+            zIndex: 1,
+            pointerEvents: "none",
+          }),
+    };
+
+    // Get thumb display value (handle dynamic display based on value)
+    const getThumbDisplay = () => {
+      if (sxStyles.thumb?.display !== undefined) {
+        // Handle function or conditional display
+        if (typeof sxStyles.thumb.display === "function") {
+          return sxStyles.thumb.display(localValue) ? "block" : "none";
+        }
+        return sxStyles.thumb.display;
+      }
+      // Default: hide thumb when value <= 3 (for vertical sliders)
+      return isVertical && localValue <= 3 ? "none" : "block";
+    };
+
+    const thumbStyle = {
+      ...(isVertical
+        ? {
+            position: "absolute",
+            left: "50%",
+            bottom: `${percent * 100}%`,
+            transform:
+              sxStyles.thumb?.transform || "translateX(-50%) translateY(50%)",
+            width: sxStyles.thumb?.width || 20,
+            height: sxStyles.thumb?.height || 2,
+            backgroundColor: sxStyles.thumb?.backgroundColor || "#ffffff",
+            boxShadow:
+              sxStyles.thumb?.boxShadow || "0 0 4px rgba(0, 0, 0, 0.3)",
+            borderRadius: sxStyles.thumb?.borderRadius || "1px",
+            marginBottom: sxStyles.thumb?.marginBottom || "-4px",
+            display: getThumbDisplay(),
+            cursor: disabled ? "default" : "pointer",
+            zIndex: 2,
+            pointerEvents: "auto",
+          }
+        : {
+            position: "absolute",
+            top: "50%",
+            left: `${percent * 100}%`,
+            transform: "translate(-50%, -50%)",
+            width: sxStyles.thumb?.width || 16,
+            height: sxStyles.thumb?.height || 16,
+            backgroundColor:
+              sxStyles.thumb?.backgroundColor || "hsl(var(--primary))",
+            boxShadow: sxStyles.thumb?.boxShadow || "0 2px 4px rgba(0,0,0,0.2)",
+            borderRadius: sxStyles.thumb?.borderRadius || "50%",
+            border: "2px solid hsl(var(--background))",
+            cursor: disabled ? "default" : "pointer",
+            zIndex: 2,
+            pointerEvents: "auto",
+          }),
+    };
+
+    const sliderId = React.useId();
+    const currentValue = localValue !== undefined ? localValue : value;
+
+    return (
+      <div
+        ref={containerRef}
+        role="slider"
+        id={sliderId}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={currentValue}
+        aria-valuetext={ariaValueText || String(currentValue)}
+        aria-orientation={orientation}
+        aria-disabled={disabled}
+        tabIndex={disabled ? -1 : 0}
+        className={cn(
+          "relative select-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          isVertical ? "h-full w-full" : "w-full",
+          className
+        )}
+        style={{
+          ...(isVertical ? { height: "100%", width: "100%" } : {}),
+          ...sxStyles.container,
+          ...style,
+          // Ensure slider can receive pointer events
+          pointerEvents: disabled ? "none" : "auto",
+          // Prevent touch scrolling that might interfere with slider dragging
+          touchAction: disabled ? "auto" : "none",
+          // Ensure container is above background layers
+          zIndex: 1,
+        }}
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
+        onKeyDown={(e) => {
+          if (disabled) return;
+          let newValue = currentValue;
+          const stepSize = step || 1;
+
+          if (orientation === "horizontal") {
+            if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+              e.preventDefault();
+              newValue = Math.min(max, currentValue + stepSize);
+            } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+              e.preventDefault();
+              newValue = Math.max(min, currentValue - stepSize);
+            } else if (e.key === "Home") {
+              e.preventDefault();
+              newValue = min;
+            } else if (e.key === "End") {
+              e.preventDefault();
+              newValue = max;
+            }
+          } else {
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              newValue = Math.min(max, currentValue + stepSize);
+            } else if (e.key === "ArrowDown") {
+              e.preventDefault();
+              newValue = Math.max(min, currentValue - stepSize);
+            } else if (e.key === "Home") {
+              e.preventDefault();
+              newValue = min;
+            } else if (e.key === "End") {
+              e.preventDefault();
+              newValue = max;
+            }
+          }
+
+          if (newValue !== currentValue) {
+            setLocalValue(newValue);
+            if (onChange) {
+              onChange(newValue);
+            }
+          }
+        }}
+        {...props}
+      >
+        {/* Rail */}
+        <div style={railStyle} />
+        {/* Track */}
+        <div style={trackStyle} />
+        {/* Thumb */}
+        <div
+          style={thumbStyle}
+          // Let container handle all mouse/touch events for consistency
+          onMouseEnter={(e) => {
+            if (!disabled && sxStyles.thumb?.["&:hover"]) {
+              e.currentTarget.style.boxShadow =
+                sxStyles.thumb["&:hover"].boxShadow ||
+                e.currentTarget.style.boxShadow;
+            }
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.boxShadow =
+              sxStyles.thumb?.boxShadow ||
+              (isVertical
+                ? "0 0 4px rgba(0, 0, 0, 0.3)"
+                : "0 1px 3px rgba(0,0,0,0.4)");
+          }}
+        />
+      </div>
+    );
+  }
+);
+
+Slider.displayName = "Slider";
+
+export { Slider };

package/src/components/stack.jsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Stack = React.forwardRef(
+  (
+    {
+      className,
+      direction = "column",
+      spacing = 0,
+      justifyContent,
+      alignItems,
+      flexWrap,
+      gap,
+      sx,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Convert MUI spacing to pixels (MUI spacing unit = 8px)
+    const spacingPx = typeof spacing === "number" ? spacing * 8 : 0;
+
+    // Use gap if provided, otherwise use spacing
+    const gapValue = gap !== undefined ? gap : spacingPx;
+
+    // Convert sx prop to style if provided
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return {};
+      const sxObj = typeof sx === "function" ? sx({}) : sx;
+      return sxObj;
+    }, [sx]);
+
+    // Build flex direction class
+    const directionClass =
+      direction === "row"
+        ? "flex-row"
+        : direction === "row-reverse"
+        ? "flex-row-reverse"
+        : direction === "column-reverse"
+        ? "column-reverse"
+        : "flex-col";
+
+    // Build flex wrap class
+    const wrapClass =
+      flexWrap === "wrap"
+        ? "flex-wrap"
+        : flexWrap === "nowrap"
+        ? "flex-nowrap"
+        : "";
+
+    // Build justifyContent class
+    const justifyContentClass =
+      justifyContent === "flex-start"
+        ? "justify-start"
+        : justifyContent === "flex-end"
+        ? "justify-end"
+        : justifyContent === "center"
+        ? "justify-center"
+        : justifyContent === "space-between"
+        ? "justify-between"
+        : justifyContent === "space-around"
+        ? "justify-around"
+        : justifyContent === "space-evenly"
+        ? "justify-evenly"
+        : "";
+
+    // Build alignItems class
+    const alignItemsClass =
+      alignItems === "flex-start"
+        ? "items-start"
+        : alignItems === "flex-end"
+        ? "items-end"
+        : alignItems === "center"
+        ? "items-center"
+        : alignItems === "baseline"
+        ? "items-baseline"
+        : alignItems === "stretch"
+        ? "items-stretch"
+        : "";
+
+    const mergedStyle = {
+      display: "flex",
+      ...(gapValue && { gap: `${gapValue}px` }),
+      ...sxStyles,
+      ...style,
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          directionClass,
+          wrapClass,
+          justifyContentClass,
+          alignItemsClass,
+          className
+        )}
+        style={mergedStyle}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Stack.displayName = "Stack";
+
+export { Stack };