@mhome/ui 0.1.0

package/src/components/typography.jsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const typographyVariants = cva("", {
+  variants: {
+    variant: {
+      h1: "scroll-m-20 text-4xl font-extralight tracking-tight lg:text-5xl",
+      h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+      h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+      h5: "scroll-m-20 text-lg font-semibold tracking-tight",
+      h6: "scroll-m-20 text-base font-semibold tracking-tight",
+      p: "leading-7 [&:not(:first-child)]:mt-6",
+      blockquote: "mt-6 border-l-2 pl-6 italic",
+      list: "my-6 ml-6 list-disc [&>li]:mt-2",
+      inlineCode:
+        "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+      lead: "text-xl text-muted-foreground",
+      largeText: "text-lg font-semibold",
+      smallText: "text-sm font-medium leading-none",
+      mutedText: "text-sm text-muted-foreground",
+      // MUI compatibility variants
+      body1: "text-base leading-normal",
+      body2: "text-sm leading-normal",
+      subtitle1: "text-base font-normal leading-normal",
+      subtitle2: "text-sm font-medium leading-normal",
+      caption: "text-xs leading-normal",
+      overline: "text-xs font-normal uppercase leading-normal tracking-wide",
+    },
+    color: {
+      default: "text-foreground",
+      primary: "text-primary",
+      secondary: "text-secondary-foreground",
+      muted: "text-muted-foreground",
+      destructive: "text-destructive",
+      error: "text-destructive",
+      inherit: "text-inherit",
+    },
+  },
+  defaultVariants: {
+    variant: "body1",
+    color: "default",
+  },
+});
+
+const Typography = React.forwardRef(
+  (
+    { className, variant = "body1", component, style, color, ...props },
+    ref
+  ) => {
+    // Map MUI color props to shadcn colors
+    const mappedColor =
+      color === "text.secondary" || color === "textSecondary"
+        ? "muted"
+        : color === "text.primary" || color === "textPrimary"
+        ? "default"
+        : color;
+
+    const Component = component || (variant.startsWith("h") ? variant : "p");
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          typographyVariants({ variant, color: mappedColor }),
+          className
+        )}
+        style={style}
+        {...props}
+      />
+    );
+  }
+);
+Typography.displayName = "Typography";
+
+export { Typography, typographyVariants };

package/src/global-state.js

@@ -0,0 +1,29 @@
+// Simplified version for examples project
+// In the real project, this would use Recoil for state management
+// For examples, we'll use a simple React context or just return default values
+
+import React from "react";
+
+// Create a simple context for background type
+const BackgroundTypeContext = React.createContext("solid");
+
+export const BackgroundTypeProvider = ({ children, value = "solid" }) => {
+  return (
+    <BackgroundTypeContext.Provider value={value}>
+      {children}
+    </BackgroundTypeContext.Provider>
+  );
+};
+
+// Mock Recoil atom for background type
+export const backgroundTypeState = {
+  key: "backgroundType",
+  default: "solid",
+};
+
+// Mock useRecoilValue hook
+export const useRecoilValue = (atom) => {
+  const context = React.useContext(BackgroundTypeContext);
+  return context || atom.default || "solid";
+};
+

package/src/index.css

@@ -0,0 +1,110 @@
+/* Tailwind CSS will be imported here */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 210 40% 98%;
+    --warning: 38.9 92% 50%;
+    --warning-foreground: 210 40% 98%;
+    --info: 199.1 89.1% 48.2%;
+    --info-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    
+    /* Z-index variables */
+    --z-index-mobile-stepper: 1000;
+    --z-index-fab: 1050;
+    --z-index-speed-dial: 1050;
+    --z-index-app-bar: 1100;
+    --z-index-drawer: 1200;
+    --z-index-modal: 1300;
+    --z-index-snackbar: 1400;
+    --z-index-tooltip: 1500;
+    --z-index-automation-drawer: 1200;
+    --z-index-automation-input: 1300;
+    --z-index-important-toast: 1400;
+    --z-index-dashboard-input: 1300;
+    --z-index-dashboard-drag: 1300;
+    --z-index-snackbar-input: 1400;
+    
+    /* Background level colors (simplified) */
+    --color-background-logo1: #ffffff;
+    --color-background-logo2: #000000;
+    --color-background-l0: hsl(var(--background));
+    --color-background-l1: hsl(var(--card));
+    --color-background-l2: hsl(var(--muted));
+    --color-background-l3: hsl(var(--accent));
+    --color-background-l4: hsl(var(--muted));
+    --color-background-l5: hsl(var(--muted));
+    --color-background-l6: hsl(var(--muted));
+    --color-background-c0: hsl(var(--background));
+    --color-background-c1: hsl(var(--card));
+    --color-background-c2: hsl(var(--muted));
+    --color-background-c3: hsl(var(--accent));
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --success: 142.1 70.6% 45.3%;
+    --success-foreground: 210 40% 98%;
+    --warning: 38.9 92% 50%;
+    --warning-foreground: 210 40% 98%;
+    --info: 199.1 89.1% 48.2%;
+    --info-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    
+    /* Background level colors for dark mode */
+    --color-background-logo1: #000000;
+    --color-background-logo2: #ffffff;
+    --color-background-l0: hsl(var(--background));
+    --color-background-l1: hsl(var(--card));
+    --color-background-l2: hsl(var(--muted));
+    --color-background-l3: hsl(var(--accent));
+    --color-background-l4: hsl(var(--muted));
+    --color-background-l5: hsl(var(--muted));
+    --color-background-l6: hsl(var(--muted));
+    --color-background-c0: hsl(var(--background));
+    --color-background-c1: hsl(var(--card));
+    --color-background-c2: hsl(var(--muted));
+    --color-background-c3: hsl(var(--accent));
+  }
+}
+

package/src/index.js

@@ -0,0 +1,6 @@
+// Import CSS
+import "./index.css";
+
+// Export all components
+export * from "./components";
+

package/src/lib/useMediaQuery.js

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+
+// Simplified useMediaQuery hook to replace @mui/material's useMediaQuery
+export const useMediaQuery = (query) => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    // Extract media query from MUI format or use directly
+    let mediaQueryString = query;
+    
+    // Handle MUI format: "@media (max-width:599px)"
+    if (query.startsWith("@media")) {
+      mediaQueryString = query.replace("@media", "").trim();
+    }
+
+    const mediaQuery = window.matchMedia(mediaQueryString);
+    
+    // Set initial value
+    setMatches(mediaQuery.matches);
+
+    // Create event listener
+    const handler = (event) => {
+      setMatches(event.matches);
+    };
+
+    // Add listener
+    mediaQuery.addEventListener("change", handler);
+
+    // Cleanup
+    return () => {
+      mediaQuery.removeEventListener("change", handler);
+    };
+  }, [query]);
+
+  return matches;
+};
+

package/src/lib/utils.js

@@ -0,0 +1,113 @@
+import React from "react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// Convert MUI spacing unit to pixels (MUI spacing unit = 8px)
+export function spacingToPx(value) {
+  if (typeof value === "number") {
+    return `${value * 8}px`;
+  }
+  return value;
+}
+
+// Helper function to convert MUI sx prop to style object
+export const convertSxToStyle = (sx) => {
+  if (!sx) return {};
+  const style = {};
+  for (const key in sx) {
+    if (Object.prototype.hasOwnProperty.call(sx, key)) {
+      const value = sx[key];
+      // Handle spacing values
+      if (
+        typeof value === "number" &&
+        [
+          "p",
+          "px",
+          "py",
+          "pt",
+          "pb",
+          "pl",
+          "pr",
+          "m",
+          "mx",
+          "my",
+          "mt",
+          "mb",
+          "ml",
+          "mr",
+          "gap",
+        ].includes(key)
+      ) {
+        const cssProp = {
+          p: "padding",
+          px: ["paddingLeft", "paddingRight"],
+          py: ["paddingTop", "paddingBottom"],
+          pt: "paddingTop",
+          pb: "paddingBottom",
+          pl: "paddingLeft",
+          pr: "paddingRight",
+          m: "margin",
+          mx: ["marginLeft", "marginRight"],
+          my: ["marginTop", "marginBottom"],
+          mt: "marginTop",
+          mb: "marginBottom",
+          ml: "marginLeft",
+          mr: "marginRight",
+          gap: "gap",
+        }[key];
+
+        if (Array.isArray(cssProp)) {
+          cssProp.forEach((prop) => (style[prop] = spacingToPx(value)));
+        } else {
+          style[cssProp] = spacingToPx(value);
+        }
+      } else if (key === "bgcolor") {
+        // Handle bgcolor - convert theme paths to CSS variables
+        if (typeof value === "string" && value.includes(".")) {
+          const bgcolorMap = {
+            "background.paper": "hsl(var(--card))",
+            "background.default": "hsl(var(--background))",
+            "background.card": "hsl(var(--card))",
+          };
+          style.backgroundColor = bgcolorMap[value] || value;
+        } else {
+          style.backgroundColor = value;
+        }
+      } else {
+        style[key] = value;
+      }
+    }
+  }
+  return style;
+};
+
+// Hook to detect dark mode by checking document class
+export const useIsDarkMode = () => {
+  const [isDark, setIsDark] = React.useState(() => {
+    if (typeof document !== "undefined") {
+      return document.documentElement.classList.contains("dark");
+    }
+    return false;
+  });
+
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return isDark ? "dark" : "light";
+};