@mhome/ui 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mhome/ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "description": "mHome UI Component Library",
   "main": "dist/index.cjs.js",

package/src/components/date-picker.jsx

@@ -26,6 +26,8 @@ const DatePicker = React.forwardRef(
     const inputRef = React.useRef(null);
     const yearPickerRef = React.useRef(null);
     const currentYearButtonRef = React.useRef(null);
+    const [viewMode, setViewMode] = React.useState("month"); // "month" or "year"
+    const [showYearPicker, setShowYearPicker] = React.useState(false);
 
     React.useImperativeHandle(ref, () => inputRef.current);
 
@@ -52,7 +54,7 @@ const DatePicker = React.forwardRef(
       }
     };
 
-    const handleClickOutside = (event) => {
+    const handleClickOutside = React.useCallback((event) => {
       if (
         calendarRef.current &&
         !calendarRef.current.contains(event.target) &&
@@ -65,7 +67,7 @@ const DatePicker = React.forwardRef(
           onOpenChange(false);
         }
       }
-    };
+    }, [onOpenChange]);
 
     React.useEffect(() => {
       if (open) {
@@ -74,12 +76,10 @@ const DatePicker = React.forwardRef(
           document.removeEventListener("mousedown", handleClickOutside);
         };
       }
-    }, [open]);
+    }, [open, handleClickOutside]);
 
     const textFieldProps = slotProps?.textField || {};
     const displayValue = selectedDate ? selectedDate.format("YYYY-MM-DD") : "";
-    const [viewMode, setViewMode] = React.useState("month"); // "month" or "year"
-    const [showYearPicker, setShowYearPicker] = React.useState(false);
 
     // Scroll to current year when year picker opens
     React.useEffect(() => {

package/src/components/dialog.jsx

@@ -363,17 +363,7 @@ DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef(
   ({ className, style, sx, ...props }, ref) => {
-    const actualMode = useIsDarkMode();
-    const backgroundType = useRecoilValue(backgroundTypeState);
-    const bgColor = getBackground(backgroundType, actualMode === "dark");
-    const isGradient =
-      bgColor &&
-      typeof bgColor === "string" &&
-      (bgColor.startsWith("linear-gradient") ||
-        bgColor.startsWith("radial-gradient") ||
-        bgColor.startsWith("conic-gradient"));
-
-    // Check if DialogTitle is inside DialogHeader
+    // Check if DialogTitle is inside DialogHeader (DialogHeader already has padding)
     const isInsideDialogHeader = React.useContext(DialogHeaderContext);
 
     // Convert sx prop to style if provided, handling MUI spacing
@@ -456,42 +446,6 @@ const DialogTitle = React.forwardRef(
       return converted;
     }, [sx]);
 
-    // Extract padding from style to allow override
-    const {
-      padding,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      backgroundColor,
-      ...restStyle
-    } = style || {};
-
-    // Check if padding is explicitly set in style, sxStyles, or className
-    // Check for padding-related Tailwind classes in className
-    const hasPaddingInClassName = className && (
-      /\b(p|px|py|pt|pb|pl|pr)-\d+/.test(className) ||
-      /\bpadding/.test(className)
-    );
-    
-    const hasAnyPadding =
-      padding !== undefined ||
-      paddingTop !== undefined ||
-      paddingBottom !== undefined ||
-      paddingLeft !== undefined ||
-      paddingRight !== undefined ||
-      sxStyles.padding !== undefined ||
-      sxStyles.paddingTop !== undefined ||
-      sxStyles.paddingBottom !== undefined ||
-      sxStyles.paddingLeft !== undefined ||
-      sxStyles.paddingRight !== undefined ||
-      hasPaddingInClassName;
-
-    // DialogTitle should have default padding when used standalone (not inside DialogHeader)
-    // When inside DialogHeader, DialogHeader provides px-6 pt-6, so DialogTitle doesn't need padding
-    // When used standalone, DialogTitle should have px-6 pt-6 to match DialogHeader's padding
-    const defaultPaddingClass = !isInsideDialogHeader && !hasAnyPadding ? "px-6 pt-6" : "";
-
     return (
       <h2
         ref={ref}
@@ -499,28 +453,14 @@ const DialogTitle = React.forwardRef(
           "rounded-t-[inherit]",
           "text-lg font-semibold leading-none tracking-tight",
           "text-foreground",
-          "text-left", // Always left align
-          defaultPaddingClass,
+          "text-left",
+          !isInsideDialogHeader && "px-6 pt-6", // Default padding only when not inside DialogHeader
           className
         )}
         style={{
-          // Only set background if explicitly provided, otherwise inherit from parent
-          ...(backgroundColor !== undefined
-            ? backgroundColor.startsWith("linear-gradient") ||
-              backgroundColor.startsWith("radial-gradient") ||
-              backgroundColor.startsWith("conic-gradient")
-              ? { background: backgroundColor }
-              : { backgroundColor }
-            : {}),
-          // Allow padding override via style prop (for standalone use)
-          padding: padding,
-          paddingLeft: paddingLeft,
-          paddingRight: paddingRight,
-          paddingTop: paddingTop,
-          paddingBottom: paddingBottom,
-          textAlign: "left", // Ensure left alignment
+          textAlign: "left",
           ...sxStyles,
-          ...restStyle,
+          ...style,
         }}
         {...props}
       />

package/src/components/icon-button.jsx

@@ -70,8 +70,9 @@ const IconButton = React.forwardRef(
     }, [children, size]);
 
     // Warn if no aria-label is provided (accessibility best practice)
+    // Only warn in development mode
     React.useEffect(() => {
-      if (!ariaLabel && !props["aria-labelledby"]) {
+      if (process.env.NODE_ENV === "development" && !ariaLabel && !props["aria-labelledby"]) {
         console.warn(
           "IconButton: Missing aria-label or aria-labelledby. Icon-only buttons should have accessible labels."
         );

package/src/components/select.jsx

@@ -28,6 +28,8 @@ const Select = React.forwardRef(
       multiple = false,
       sx,
       style,
+      menuStyle, // Style for the dropdown menu (the open listbox)
+      menuClassName, // ClassName for the dropdown menu
       ...props
     },
     ref
@@ -154,7 +156,7 @@ const Select = React.forwardRef(
             paddingRight: endAdornment ? "8px" : "14px",
             paddingTop: "6px",
             paddingBottom: "6px",
-            // If borderRadius is provided in props.style, use it; otherwise let Tailwind's rounded-3xl class handle it
+            // If borderRadius is provided in props.style, use it; otherwise let Tailwind classes handle it
             ...(style?.borderRadius !== undefined
               ? { borderRadius: style.borderRadius }
               : {}),
@@ -194,16 +196,21 @@ const Select = React.forwardRef(
             id={`${selectId}-listbox`}
             role="listbox"
             aria-label={label || "Options"}
-            className="absolute z-50 w-full mt-1 rounded-lg shadow-lg"
+            className={cn(
+              "absolute z-50 w-full mt-1 shadow-lg",
+              menuClassName
+            )}
             style={{
               backgroundColor: "hsl(var(--card))",
               boxShadow: isDark
-                ? "0px 4px 12px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(255, 255, 255, 0.1)"
+                ? "0px 4px 12px rgba(0, 0, 0, 0.4)"
                 : "0px 4px 12px rgba(0, 0, 0, 0.15)",
               border: isDark
                 ? "1px solid rgba(255, 255, 255, 0.1)"
                 : "1px solid hsl(var(--border))",
               borderRadius: "8px",
+              overflow: "hidden", 
+              ...menuStyle,
             }}
           >
             {React.Children.map(children, (child) => {

package/src/components/tabs.jsx

@@ -218,7 +218,7 @@ const Tab = React.forwardRef(
             }
           }}
           className={cn(
-            "cursor-pointer transition-all duration-200 text-sm border-none bg-transparent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "cursor-pointer transition-all duration-200 text-sm border-none bg-transparent focus:outline-none",
             defaultPaddingClass,
             "min-w-[72px] min-h-[48px] flex-1",
             selected ? "font-semibold" : "font-medium",
@@ -320,7 +320,7 @@ const Tab = React.forwardRef(
             }
           }}
           className={cn(
-            "cursor-pointer transition-all duration-200 min-h-[32px] min-w-[100px] rounded-2xl text-sm border-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "cursor-pointer transition-all duration-200 min-h-[32px] min-w-[100px] rounded-2xl text-sm border-none focus:outline-none",
             defaultPaddingClass,
             defaultMarginClass,
             selected ? "font-semibold" : "font-medium",

package/src/components/text-field.jsx

@@ -74,7 +74,7 @@ const TextField = React.forwardRef(
       } else {
         // outlined (default)
         return focused
-          ? getComponentBgColor("hsl(var(--input))")
+          ? getComponentBgColor("hsl(var(--background))")
           : "transparent";
       }
     };

package/src/components/typography.jsx

@@ -46,7 +46,7 @@ const typographyVariants = cva("", {
 
 const Typography = React.forwardRef(
   (
-    { className, variant = "body1", component, style, color, noWrap, ...props },
+    { className, variant = "body1", component, style, color, noWrap, gutterBottom, ...props },
     ref
   ) => {
     // Map MUI color props to shadcn colors
@@ -68,6 +68,7 @@ const Typography = React.forwardRef(
         )}
         style={{
           ...(noWrap && { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }),
+          ...(gutterBottom && { marginBottom: "0.35em" }),
           ...style,
         }}
         {...props}