@mhome/ui 0.1.0

package/src/components/grid.jsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { useMediaQuery } from "../lib/useMediaQuery";
+
+const Grid = React.forwardRef(
+  (
+    {
+      className,
+      container = false,
+      item = false,
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      spacing,
+      sx,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Use media query strings directly
+    const isXs = useMediaQuery("@media (max-width:599px)");
+    const isSm = useMediaQuery(
+      "@media (min-width:600px) and (max-width:959px)"
+    );
+    const isMd = useMediaQuery(
+      "@media (min-width:960px) and (max-width:1279px)"
+    );
+    const isLg = useMediaQuery(
+      "@media (min-width:1280px) and (max-width:1919px)"
+    );
+    const isXl = useMediaQuery("@media (min-width:1920px)");
+
+    // Convert sx prop to style if provided
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return {};
+      const sxObj = typeof sx === "function" ? sx({}) : sx;
+      return sxObj;
+    }, [sx]);
+
+    // Convert MUI spacing to pixels (MUI spacing unit = 8px)
+    const spacingToPx = (value) => {
+      if (typeof value === "number") {
+        return `${value * 8}px`;
+      }
+      return "0px";
+    };
+
+    // Get responsive breakpoint value
+    const getBreakpointValue = () => {
+      if (isXl && xl !== undefined) return xl;
+      if (isLg && lg !== undefined) return lg;
+      if (isMd && md !== undefined) return md;
+      if (isSm && sm !== undefined) return sm;
+      if (isXs && xs !== undefined) return xs;
+      // Fallback to xs if provided, otherwise undefined
+      return xs;
+    };
+
+    const breakpointValue = getBreakpointValue();
+
+    // Calculate flex basis and max width for item
+    const getItemStyles = () => {
+      if (!item) return {};
+      if (breakpointValue === undefined) return {};
+
+      // MUI Grid uses 12 columns
+      const columns = 12;
+      const percentage = (breakpointValue / columns) * 100;
+
+      return {
+        flexBasis: `${percentage}%`,
+        maxWidth: `${percentage}%`,
+        flexGrow: 0,
+        flexShrink: 0,
+        boxSizing: "border-box",
+      };
+    };
+
+    // Get container styles
+    // MUI Grid spacing: container has negative margins only on left and top
+    // This offsets item padding to align items with container edges on left/top
+    // Right and bottom edges maintain spacing through item padding
+    const getContainerStyles = () => {
+      if (!container) return {};
+
+      const spacingPx = spacingToPx(spacing || 0);
+
+      return {
+        display: "flex",
+        flexWrap: "wrap",
+        width: "100%",
+        marginLeft: spacing ? `-${spacingPx}` : undefined,
+        marginTop: spacing ? `-${spacingPx}` : undefined,
+      };
+    };
+
+    // Get item styles with padding for spacing
+    // MUI Grid spacing: items have paddingLeft and paddingTop
+    // This creates spacing between items and from left/top edges
+    // Right and bottom spacing is maintained by the last items' padding
+    const getItemPaddingStyles = () => {
+      if (!item) return {};
+      if (!spacing) return {};
+
+      const spacingPx = spacingToPx(spacing);
+
+      return {
+        paddingLeft: spacingPx,
+        paddingTop: spacingPx,
+      };
+    };
+
+    const mergedStyle = {
+      ...getContainerStyles(),
+      ...getItemStyles(),
+      ...getItemPaddingStyles(),
+      ...sxStyles,
+      ...style,
+    };
+
+    return (
+      <div ref={ref} className={cn(className)} style={mergedStyle} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+Grid.displayName = "Grid";
+
+export { Grid };

package/src/components/icon-button.jsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { cva } from "class-variance-authority";
+
+const iconButtonVariants = cva(
+  "inline-flex items-center justify-center 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: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "hover:bg-destructive hover:text-destructive-foreground",
+        outline:
+          "border border-input hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 w-10",
+        sm: "h-8 w-8",
+        lg: "h-12 w-12",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const IconButton = React.forwardRef(
+  (
+    {
+      className,
+      variant,
+      size = "default",
+      style,
+      color,
+      "aria-label": ariaLabel,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Get color class based on color prop
+    const getColorClass = () => {
+      if (color === "primary") return "text-primary";
+      if (color === "secondary") return "text-secondary-foreground";
+      if (color === "error") return "text-destructive";
+      if (color === "inherit") return "text-inherit";
+      return "text-muted-foreground"; // Default
+    };
+
+    // Get icon size based on button size
+    const getIconSize = () => {
+      if (size === "sm") return 16;
+      if (size === "lg") return 24;
+      return 20; // default
+    };
+
+    // Clone children to apply size if it's a React element (like lucide-react icons)
+    const childrenWithSize = React.useMemo(() => {
+      if (React.isValidElement(children) && typeof children.type !== "string") {
+        // Check if the element has a size prop (like lucide-react icons)
+        if (children.props.size === undefined) {
+          return React.cloneElement(children, {
+            size: getIconSize(),
+          });
+        }
+      }
+      return children;
+    }, [children, size]);
+
+    // Warn if no aria-label is provided (accessibility best practice)
+    React.useEffect(() => {
+      if (!ariaLabel && !props["aria-labelledby"]) {
+        console.warn(
+          "IconButton: Missing aria-label or aria-labelledby. Icon-only buttons should have accessible labels."
+        );
+      }
+    }, [ariaLabel, props["aria-labelledby"]]);
+
+    return (
+      <button
+        className={cn(
+          iconButtonVariants({ variant, size }),
+          "rounded-2xl",
+          getColorClass(),
+          className
+        )}
+        ref={ref}
+        style={style}
+        aria-label={ariaLabel}
+        {...props}
+      >
+        {childrenWithSize}
+      </button>
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+export { IconButton, iconButtonVariants };

package/src/components/index.js

@@ -0,0 +1,78 @@
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardActionArea,
+} from "./card";
+export { Button } from "./button";
+// buttonVariants is exported separately if needed, but not as a component
+export {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogActions,
+} from "./dialog";
+export { IconButton } from "./icon-button";
+// iconButtonVariants is exported separately if needed, but not as a component
+export { Typography } from "./typography";
+export { Chip } from "./chip";
+export { TextField } from "./text-field";
+export { Select, FormControl } from "./select";
+export { Checkbox } from "./checkbox";
+export {
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  ListItemButton,
+  ListItemAvatar,
+} from "./list";
+export { Accordion, AccordionSummary, AccordionDetails } from "./accordion";
+export { Alert } from "./alert";
+export { Tabs, Tab } from "./tabs";
+export { Tooltip } from "./tooltip";
+export { Autocomplete } from "./autocomplete";
+export { DatePicker } from "./date-picker";
+export { Drawer } from "./drawer";
+export { FormControlLabel } from "./form-control-label";
+export { FormLabel } from "./form-label";
+export { FormGroup } from "./form-group";
+export { Radio } from "./radio";
+export { RadioGroup } from "./radio-group";
+export { Collapse } from "./collapse";
+export { DialogContentText } from "./dialog-content-text";
+export { Container } from "./container";
+export { Divider } from "./divider";
+export { Avatar } from "./avatar";
+export { Stack } from "./stack";
+export { InputAdornment } from "./input-adornment";
+export { Paper } from "./paper";
+export { AppBar } from "./app-bar";
+export { Toolbar } from "./toolbar";
+export {
+  Menu,
+  MenuItem,
+  MenuItemIcon,
+  MenuItemText,
+} from "./menu";
+// Export Select's MenuItem as SelectMenuItem to avoid naming conflict
+export { MenuItem as SelectMenuItem } from "./select";
+export {
+  Table,
+  TableContainer,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "./table";
+export { ToggleButton, ToggleButtonGroup } from "./toggle-button";
+export { Grid } from "./grid";
+export { InputLabel } from "./input-label";
+export { Slider } from "./slider";
+export { Box } from "./box";

package/src/components/input-adornment.jsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const InputAdornment = React.forwardRef(
+  (
+    {
+      className,
+      position = "end",
+      disablePointerEvents = false,
+      disableTypography = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center",
+          position === "start" ? "mr-2" : "ml-2",
+          disablePointerEvents && "pointer-events-none",
+          className
+        )}
+        style={{
+          pointerEvents: disablePointerEvents ? "none" : "auto",
+          cursor: disablePointerEvents ? "default" : "inherit",
+        }}
+        {...props}
+      >
+        {disableTypography ? (
+          children
+        ) : (
+          <span className="text-sm text-muted-foreground">{children}</span>
+        )}
+      </div>
+    );
+  }
+);
+
+InputAdornment.displayName = "InputAdornment";
+
+export { InputAdornment };

package/src/components/input-label.jsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const InputLabel = React.forwardRef(
+  (
+    {
+      children,
+      className,
+      required = false,
+      disabled = false,
+      error = false,
+      focused = false,
+      shrink = false,
+      sx,
+      style,
+      ...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]);
+
+    return (
+      <label
+        ref={ref}
+        className={cn(
+          "block text-sm font-medium mb-2 text-foreground",
+          error
+            ? "text-destructive"
+            : focused
+            ? "text-primary"
+            : "text-foreground",
+          disabled && "opacity-50",
+          className
+        )}
+        style={{
+          ...sxStyles,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+        {required && <span className="ml-1 text-destructive">*</span>}
+      </label>
+    );
+  }
+);
+
+InputLabel.displayName = "InputLabel";
+
+export { InputLabel };

package/src/components/list.jsx

@@ -0,0 +1,239 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Typography } from "./typography";
+
+const List = React.forwardRef(
+  ({ className, style, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("w-full", className)}
+        style={{
+          padding: 0,
+          margin: 0,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+List.displayName = "List";
+
+const ListItem = React.forwardRef(
+  (
+    {
+      className,
+      style,
+      alignItems = "flex-start",
+      disablePadding,
+      dense,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // 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;
+
+    // If disablePadding is true, don't apply default padding
+    // If dense is true, use smaller padding
+    let defaultPaddingClass = "";
+    if (!disablePadding && !hasPaddingInStyle) {
+      defaultPaddingClass = dense ? "py-2 px-8" : "py-4 px-8";
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex", defaultPaddingClass, className)}
+        style={{
+          alignItems: alignItems,
+          padding: disablePadding ? 0 : padding,
+          paddingTop: disablePadding ? 0 : paddingTop,
+          paddingBottom: disablePadding ? 0 : paddingBottom,
+          paddingLeft: disablePadding ? 0 : paddingLeft,
+          paddingRight: disablePadding ? 0 : paddingRight,
+          ...restStyle,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+ListItem.displayName = "ListItem";
+
+const ListItemIcon = React.forwardRef(
+  ({ className, style, children, ...props }, ref) => {
+    // Extract margin and color from style to allow override
+    const { marginRight, minWidth, color, ...restStyle } = style || {};
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex items-center justify-center", className)}
+        style={{
+          minWidth: minWidth !== undefined ? minWidth : "auto",
+          marginRight: marginRight !== undefined ? marginRight : "1rem",
+          ...(color !== undefined && { color }),
+          ...restStyle,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+ListItemIcon.displayName = "ListItemIcon";
+
+const ListItemText = React.forwardRef(
+  ({ className, style, primary, secondary, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("flex flex-col", className)}
+        style={{
+          flex: 1,
+          margin: 0,
+          ...style,
+        }}
+        {...props}
+      >
+        {primary && (
+          <div className={cn(secondary && "mb-2")}>
+            {React.isValidElement(primary) ? (
+              primary
+            ) : (
+              <Typography variant="body1" color="default">
+                {primary}
+              </Typography>
+            )}
+          </div>
+        )}
+        {secondary && (
+          <div>
+            {React.isValidElement(secondary) ? (
+              secondary
+            ) : (
+              <Typography variant="body2" color="muted">
+                {secondary}
+              </Typography>
+            )}
+          </div>
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+ListItemText.displayName = "ListItemText";
+
+const ListItemButton = React.forwardRef(
+  (
+    { className, style, selected, onClick, disabled, children, dense, disablePadding, ...props },
+    ref
+  ) => {
+    const [hovered, setHovered] = React.useState(false);
+
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      // Support Enter and Space keys for keyboard navigation
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (onClick) {
+          onClick(e);
+        }
+      }
+    };
+
+    // Calculate padding for ListItemButton
+    let paddingClass = "";
+    if (!disablePadding) {
+      paddingClass = dense ? "py-2 px-8" : "py-4 px-8";
+    }
+
+    return (
+      <div
+        ref={ref}
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
+        aria-selected={selected}
+        className={cn(
+          "flex cursor-pointer transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          paddingClass,
+          selected
+            ? "bg-primary text-primary-foreground hover:bg-primary/90"
+            : hovered
+            ? "bg-accent text-accent-foreground"
+            : "hover:bg-accent hover:text-accent-foreground",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        )}
+        style={{
+          alignItems: "center",
+          ...style,
+        }}
+        onClick={disabled ? undefined : onClick}
+        onKeyDown={handleKeyDown}
+        onMouseEnter={() => !disabled && setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+ListItemButton.displayName = "ListItemButton";
+
+const ListItemAvatar = React.forwardRef(
+  ({ className, style, children, ...props }, ref) => {
+    // Extract margin and minWidth from style to allow override
+    const { marginRight, minWidth, ...restStyle } = style || {};
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex items-center justify-center", className)}
+        style={{
+          minWidth: minWidth !== undefined ? minWidth : "40px",
+          marginRight: marginRight !== undefined ? marginRight : "1rem",
+          ...restStyle,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+ListItemAvatar.displayName = "ListItemAvatar";
+
+export {
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  ListItemButton,
+  ListItemAvatar,
+};