@mhome/ui 0.1.0

package/src/components/radio.jsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { RadioGroupContext } from "./radio-group";
+
+const Radio = React.forwardRef(
+  (
+    {
+      className,
+      checked: checkedProp,
+      onChange: onChangeProp,
+      disabled: disabledProp,
+      value,
+      size = "medium",
+      sx,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [hovered, setHovered] = React.useState(false);
+    const radioGroup = React.useContext(RadioGroupContext);
+
+    const checked =
+      checkedProp !== undefined ? checkedProp : radioGroup?.value === value;
+
+    const disabled =
+      disabledProp !== undefined ? disabledProp : radioGroup?.disabled || false;
+
+    const handleChange = React.useCallback(
+      (event) => {
+        if (onChangeProp) {
+          onChangeProp(event);
+        } else if (radioGroup?.onChange) {
+          radioGroup.onChange(event);
+        }
+      },
+      [onChangeProp, radioGroup]
+    );
+
+    const mergedSx = React.useMemo(() => {
+      if (!sx) return {};
+      return typeof sx === "function" ? sx({}) : sx;
+    }, [sx]);
+
+    const sizeMap = {
+      small: 18,
+      medium: 20,
+      large: 24,
+    };
+
+    const radioSize = sizeMap[size] || sizeMap.medium;
+    const dotSize = checked ? radioSize * 0.5 : 0;
+
+    return (
+      <label
+        className={cn(
+          "relative inline-flex items-center justify-center cursor-pointer",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        )}
+        style={{ ...mergedSx, ...style }}
+      >
+        <input
+          ref={ref}
+          type="radio"
+          checked={checked}
+          onChange={handleChange}
+          disabled={disabled}
+          value={value}
+          name={radioGroup?.name}
+          className="sr-only"
+          {...props}
+        />
+        <div
+          className={cn(
+            "flex items-center justify-center transition-all duration-200 border-2 rounded-full bg-transparent transition-colors",
+            disabled && "opacity-50 cursor-not-allowed",
+            className,
+            checked
+              ? "border-primary"
+              : hovered && !disabled
+              ? "border-primary"
+              : "border-input"
+          )}
+          style={{
+            width: `${radioSize}px`,
+            height: `${radioSize}px`,
+          }}
+          onMouseEnter={() => !disabled && setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+        >
+          {checked && (
+            <div
+              className="bg-primary rounded-full transition-all"
+              style={{
+                width: `${dotSize}px`,
+                height: `${dotSize}px`,
+              }}
+            />
+          )}
+        </div>
+      </label>
+    );
+  }
+);
+Radio.displayName = "Radio";
+
+export { Radio };

package/src/components/select.jsx

@@ -0,0 +1,308 @@
+import * as React from "react";
+import {
+  cn,
+  spacingToPx,
+  convertSxToStyle,
+  useIsDarkMode,
+} from "../lib/utils";
+import { useComponentBackgroundColor } from "../common/adaptive-theme-provider";
+import { ChevronDown } from "lucide-react";
+
+const Select = React.forwardRef(
+  (
+    {
+      className,
+      children,
+      value,
+      onChange,
+      size = "small",
+      label,
+      error = false,
+      helperText,
+      disabled = false,
+      displayEmpty = false,
+      native = false,
+      renderValue,
+      startAdornment,
+      endAdornment,
+      multiple = false,
+      sx,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const getComponentBgColor = useComponentBackgroundColor();
+    const actualMode = useIsDarkMode();
+    const isDark = actualMode === "dark";
+    const [focused, setFocused] = React.useState(false);
+    const [hovered, setHovered] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
+    const selectRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const selectId = React.useId();
+
+    React.useImperativeHandle(ref, () => selectRef.current);
+
+    // Convert sx prop to style if provided
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return {};
+      const sxObj = typeof sx === "function" ? sx({}) : sx;
+      return convertSxToStyle(sxObj, {});
+    }, [sx]);
+
+    const sizeClasses = {
+      small: "h-9 text-sm",
+      medium: "h-10",
+    };
+
+    const isMultiple = multiple && Array.isArray(value);
+    const selectedValues = isMultiple ? value : [value];
+
+    const selectedOption = React.useMemo(() => {
+      if (!children) return "";
+      if (isMultiple) {
+        return ""; // For multiple, always use renderValue
+      }
+      const childrenArray = React.Children.toArray(children);
+      const selected = childrenArray.find(
+        (child) => React.isValidElement(child) && child.props.value === value
+      );
+      return selected && React.isValidElement(selected)
+        ? selected.props.children
+        : "";
+    }, [children, value, isMultiple]);
+
+    // Handle click outside
+    React.useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (
+          menuRef.current &&
+          !menuRef.current.contains(event.target) &&
+          selectRef.current &&
+          !selectRef.current.contains(event.target)
+        ) {
+          setOpen(false);
+        }
+      };
+
+      if (open) {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () =>
+          document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, [open]);
+
+    const handleOptionClick = (optionValue) => {
+      if (onChange) {
+        if (isMultiple) {
+          const currentValues = Array.isArray(value) ? value : [];
+          const newValues = currentValues.includes(optionValue)
+            ? currentValues.filter((v) => v !== optionValue)
+            : [...currentValues, optionValue];
+          onChange({ target: { value: newValues } });
+        } else {
+          onChange({ target: { value: optionValue } });
+          setOpen(false);
+        }
+      }
+    };
+
+    return (
+      <div className="relative w-full" style={{ overflow: "visible" }}>
+        {label && (
+          <label className="block text-sm font-medium mb-1 text-foreground">
+            {label}
+          </label>
+        )}
+        <button
+          ref={selectRef}
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-label={label || "Select an option"}
+          aria-controls={open ? `${selectId}-listbox` : undefined}
+          onClick={() => !disabled && setOpen(!open)}
+          disabled={disabled}
+          className={cn(
+            "w-full rounded-3xl border transition-colors flex items-center",
+            sizeClasses[size],
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          style={{
+            borderColor: error
+              ? "hsl(var(--destructive))"
+              : focused || open
+              ? "hsl(var(--primary))"
+              : hovered
+              ? "hsl(var(--primary))"
+              : "hsl(var(--input))",
+            backgroundColor:
+              focused || open
+                ? getComponentBgColor("hsl(var(--input))")
+                : hovered
+                ? "hsl(var(--accent))"
+                : "transparent",
+            color: "hsl(var(--foreground))",
+            textAlign: "left",
+            fontWeight: "normal",
+            // Use consistent padding: 14px (0.875rem) horizontal, 6px (0.375rem) vertical
+            paddingLeft: startAdornment ? "8px" : "14px",
+            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
+            ...(style?.borderRadius !== undefined
+              ? { borderRadius: style.borderRadius }
+              : {}),
+            ...sxStyles,
+            ...Object.fromEntries(
+              Object.entries(style || {}).filter(
+                ([key]) => key !== "borderRadius"
+              )
+            ),
+          }}
+          onFocus={() => !disabled && setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onMouseEnter={() => !disabled && setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          {...props}
+        >
+          {startAdornment}
+          <span style={{ flex: 1, textAlign: "left" }}>
+            {renderValue
+              ? renderValue(value)
+              : selectedOption || (displayEmpty ? "" : "Select...")}
+          </span>
+          {endAdornment || (
+            <ChevronDown
+              size={16}
+              className={cn(
+                "transition-transform text-foreground",
+                open && "rotate-180"
+              )}
+            />
+          )}
+        </button>
+
+        {open && (
+          <div
+            ref={menuRef}
+            id={`${selectId}-listbox`}
+            role="listbox"
+            aria-label={label || "Options"}
+            className="absolute z-50 w-full mt-1 rounded-lg shadow-lg"
+            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.15)",
+              border: isDark
+                ? "1px solid rgba(255, 255, 255, 0.1)"
+                : "1px solid hsl(var(--border))",
+              borderRadius: "8px",
+            }}
+          >
+            {React.Children.map(children, (child) => {
+              if (!React.isValidElement(child)) return null;
+              const isSelected = isMultiple
+                ? selectedValues.includes(child.props.value)
+                : child.props.value === value;
+              const menuBgColor = "hsl(var(--card))";
+
+              return (
+                <div
+                  key={child.props.value}
+                  role="option"
+                  aria-selected={isSelected}
+                  onClick={() => handleOptionClick(child.props.value)}
+                  className="cursor-pointer transition-colors focus:outline-none focus:bg-accent"
+                  style={{
+                    backgroundColor: isSelected
+                      ? "hsl(var(--accent))"
+                      : menuBgColor,
+                    color: "hsl(var(--foreground))",
+                    paddingLeft: "0.875rem",
+                    paddingRight: "0.875rem",
+                    paddingTop: "0.5rem",
+                    paddingBottom: "0.5rem",
+                    fontSize: "0.875rem",
+                    fontWeight: "normal",
+                    textAlign: "left",
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleOptionClick(child.props.value);
+                    }
+                  }}
+                  tabIndex={0}
+                  onMouseEnter={(e) => {
+                    if (!isSelected) {
+                      e.currentTarget.style.backgroundColor =
+                        "hsl(var(--accent))";
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isSelected) {
+                      e.currentTarget.style.backgroundColor = menuBgColor;
+                    } else {
+                      e.currentTarget.style.backgroundColor =
+                        "hsl(var(--accent))";
+                    }
+                  }}
+                >
+                  {child.props.children}
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {helperText && (
+          <div
+            className="text-xs mt-1"
+            style={{
+              color: error
+                ? "hsl(var(--destructive))"
+                : "hsl(var(--muted-foreground))",
+            }}
+          >
+            {helperText}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Select.displayName = "Select";
+
+const MenuItem = React.forwardRef(
+  ({ className, value, children, ...props }, ref) => {
+    return null;
+  }
+);
+MenuItem.displayName = "MenuItem";
+
+const FormControl = React.forwardRef(
+  ({ className, fullWidth = false, size, children, style, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(fullWidth && "w-full", className)}
+        style={{
+          position: "relative",
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+FormControl.displayName = "FormControl";
+
+export { Select, MenuItem, FormControl };