@ews-admin/global-design-system 1.1.14 → 1.1.16

package/dist/index.js

@@ -75,13 +75,15 @@ const formatNumeric = (value) => {
 };
 /**
  * Utility function to validate phone numbers
- * Validates phone numbers with 1-15 digits, starting with a non-zero digit
+ * Validates phone numbers with 1-17 digits, optionally starting with + symbol
  * @param value - Phone number string to validate
  * @returns Boolean indicating if the phone number is valid
  */
 function isValidPhoneNumber(value) {
     const trimmedValue = value.trim();
-    const phoneRegex = /^[0-9]\d{1,17}$/;
+    // Allow + at the beginning, followed by 1-17 digits
+    // Or just 1-17 digits without +
+    const phoneRegex = /^(\+\d{1,17}|\d{1,17})$/;
     return phoneRegex.test(trimmedValue);
 }
 
@@ -455,7 +457,7 @@ const UserIcon = ({ size = 24, color = "currentColor", className = "", ...props
     return jsxRuntime.jsx(User, { size: size, color: color, className: className, ...props });
 };
 
-const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, required = false, id, type = "text", ...props }, ref) => {
+const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, required = false, countryCodeSelect, id, type = "text", ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
     const hasError = Boolean(error);
     const actualVariant = hasError ? "error" : variant;
@@ -464,6 +466,20 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
     const isPasswordInput = type === "password";
     const shouldShowPasswordToggle = showPasswordToggle && isPasswordInput;
     const actualType = isPasswordInput && showPassword ? "text" : type;
+    // Country code dropdown state
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+    const dropdownRef = React.useRef(null);
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsDropdownOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
     const baseStyles = "block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0 hover:border-ews-primary";
     const variants = {
         default: "border-ews-gray-300 focus:border-ews-primary focus:ring-ews-primary",
@@ -494,7 +510,13 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
         }
     }
     // Default rendering for non-checkbox inputs
-    return (jsxRuntime.jsxs("div", { className: cn("space-y-1", fullWidth ? "w-full" : "w-auto"), children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-ews-gray-700", children: [label, required && jsxRuntime.jsx("span", { className: "ml-1 text-ews-error", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [leftIcon && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: leftIcon }) })), jsxRuntime.jsx("input", { id: inputId, type: actualType, className: cn(baseStyles, variants[actualVariant], sizes[size], leftIcon && "pl-10", (rightIcon || shouldShowPasswordToggle) && "pr-10", className), ref: ref, ...props }), rightIcon && !shouldShowPasswordToggle && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: rightIcon }) })), shouldShowPasswordToggle && (jsxRuntime.jsx("button", { type: "button", className: "flex absolute inset-y-0 right-0 items-center pr-3", onClick: () => setShowPassword(!showPassword), tabIndex: -1, children: jsxRuntime.jsx("span", { className: cn("transition-colors text-ews-gray-400 hover:text-ews-gray-600", iconSizes[size]), children: showPassword ? jsxRuntime.jsx(EyeOff, { size: 16 }) : jsxRuntime.jsx(Eye, { size: 16 }) }) }))] }), (error || helperText) && (jsxRuntime.jsx("p", { className: cn("text-sm", error ? "text-ews-error" : "text-ews-gray-500"), children: error || helperText }))] }));
+    return (jsxRuntime.jsxs("div", { className: cn("space-y-1", fullWidth ? "w-full" : "w-auto"), children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-ews-gray-700", children: [label, required && jsxRuntime.jsx("span", { className: "ml-1 text-ews-error", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [countryCodeSelect && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 flex items-center pl-1 z-10", ref: dropdownRef, children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => setIsDropdownOpen(!isDropdownOpen), className: cn("flex items-center gap-1 px-2 py-1 rounded text-ews-gray-700", "hover:bg-ews-gray-50 transition-colors cursor-pointer", "focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-0", "border-0 bg-transparent text-base"), children: [jsxRuntime.jsx("span", { className: "font-medium", children: countryCodeSelect.value }), jsxRuntime.jsx(ChevronDown, { className: cn("w-4 h-4 text-ews-gray-400 transition-transform", isDropdownOpen && "rotate-180") })] }), isDropdownOpen && (jsxRuntime.jsx("div", { className: cn("absolute top-full left-0 mt-1 bg-white rounded-md border shadow-lg", "border-ews-gray-300 min-w-[120px] z-50"), style: { maxHeight: "200px", overflowY: "auto" }, children: countryCodeSelect.options.map((item) => {
+                                        const isSelected = item.code === countryCodeSelect.value;
+                                        return (jsxRuntime.jsxs("div", { onClick: () => {
+                                                countryCodeSelect.onChange(item.code);
+                                                setIsDropdownOpen(false);
+                                            }, className: cn("px-3 py-2 text-sm cursor-pointer transition-colors", isSelected && "bg-ews-primary text-white", !isSelected && "hover:bg-ews-gray-50"), children: [jsxRuntime.jsx("span", { className: "font-medium", children: item.code }), item.country && (jsxRuntime.jsx("span", { className: cn("ml-2 text-xs", isSelected ? "text-white/80" : "text-ews-gray-500"), children: item.country }))] }, item.code));
+                                    }) }))] }) })), leftIcon && !countryCodeSelect && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: leftIcon }) })), jsxRuntime.jsx("input", { id: inputId, type: actualType, className: cn(baseStyles, variants[actualVariant], sizes[size], countryCodeSelect && "pl-24", leftIcon && !countryCodeSelect && "pl-10", (rightIcon || shouldShowPasswordToggle) && "pr-10", className), ref: ref, ...props }), rightIcon && !shouldShowPasswordToggle && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: rightIcon }) })), shouldShowPasswordToggle && (jsxRuntime.jsx("button", { type: "button", className: "flex absolute inset-y-0 right-0 items-center pr-3", onClick: () => setShowPassword(!showPassword), tabIndex: -1, children: jsxRuntime.jsx("span", { className: cn("transition-colors text-ews-gray-400 hover:text-ews-gray-600", iconSizes[size]), children: showPassword ? jsxRuntime.jsx(EyeOff, { size: 16 }) : jsxRuntime.jsx(Eye, { size: 16 }) }) }))] }), (error || helperText) && (jsxRuntime.jsx("p", { className: cn("text-sm", error ? "text-ews-error" : "text-ews-gray-500"), children: error || helperText }))] }));
 });
 Input.displayName = "Input";
 
@@ -517,7 +539,7 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
         ? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
         : options;
     // Calculate dropdown position based on available space
-    const calculateDropdownPosition = () => {
+    const calculateDropdownPosition = React.useCallback(() => {
         if (!containerRef.current)
             return;
         const containerRect = containerRef.current.getBoundingClientRect();
@@ -548,7 +570,7 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
         else {
             setDropdownPosition("bottom");
         }
-    };
+    }, [filteredOptions.length, searchable, maxHeight]);
     // Alternative calculation using actual dropdown element when available
     const calculateDropdownPositionWithElement = () => {
         if (!containerRef.current || !dropdownRef.current)
@@ -598,7 +620,13 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
                 calculateDropdownPositionWithElement();
             });
         }
-    }, [isOpen, filteredOptions.length, searchable, maxHeight]);
+    }, [
+        isOpen,
+        filteredOptions.length,
+        searchable,
+        maxHeight,
+        calculateDropdownPosition,
+    ]);
     // Recalculate position on window resize
     React.useEffect(() => {
         const handleResize = () => {
@@ -612,7 +640,7 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
             window.removeEventListener("resize", handleResize);
             window.removeEventListener("scroll", handleResize);
         };
-    }, [isOpen]);
+    }, [isOpen, calculateDropdownPosition]);
     // Handle keyboard navigation
     const handleKeyDown = (event) => {
         if (disabled)
@@ -1721,7 +1749,7 @@ const DropdownMultiSelect = ({ options, name, control, placeholder = "Select opt
             }), error && jsxRuntime.jsx("p", { className: "mt-1 text-sm text-ews-error", children: error })] }));
 };
 
-const Logo = ({ size = "md", showTagline: _showTagline = true, iconOnly = false, variant = "normal", className, onClick, }) => {
+const Logo = ({ size = "md", showTagline: _showTagline = true, iconOnly = false, variant = "normal", className, onClick, customSrc, alt = "MEDECINE 360 Logo", clickable = false, }) => {
     const sizes = {
         sm: "h-8",
         md: "h-12",
@@ -1734,21 +1762,47 @@ const Logo = ({ size = "md", showTagline: _showTagline = true, iconOnly = false,
         lg: "h-12 w-12",
         xl: "h-16 w-16",
     };
-    // Get the appropriate logo image based on variant
-    // For iconOnly, always use favicon.ico
-    const logoSrc = iconOnly
-        ? "/favicon.ico"
-        : variant === "white"
-            ? "/image/logoWhite.png"
-            : variant === "fullWhite"
-                ? "/image/logoFullWhite.png"
-                : variant === "favicon"
-                    ? "/favicon.ico"
-                    : "/image/logo.png";
+    // Get the appropriate logo image based on variant or custom source
+    // For iconOnly, always use favicon.ico unless customSrc is provided
+    const logoSrc = customSrc ||
+        (iconOnly
+            ? "/favicon.ico"
+            : variant === "white"
+                ? "/image/logoWhite.png"
+                : variant === "fullWhite"
+                    ? "/image/logoFullWhite.png"
+                    : variant === "favicon"
+                        ? "/favicon.ico"
+                        : "/image/logo.png");
+    const isClickable = clickable || !!onClick;
     if (iconOnly) {
-        return (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center", iconSizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: jsxRuntime.jsx("img", { src: logoSrc, alt: "MEDECINE 360 Logo", className: "w-full h-full object-contain" }) }));
+        return (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center", iconSizes[size], isClickable && "cursor-pointer", className), onClick: onClick, role: isClickable ? "button" : undefined, tabIndex: isClickable ? 0 : undefined, onKeyDown: isClickable
+                ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onClick?.();
+                    }
+                }
+                : undefined, children: jsxRuntime.jsx("img", { src: logoSrc, alt: alt, className: "object-contain w-full h-full", onError: (e) => {
+                    // Fallback to favicon if image fails to load
+                    if (logoSrc !== "/favicon.ico") {
+                        e.target.src = "/favicon.ico";
+                    }
+                } }) }));
     }
-    return (jsxRuntime.jsx("div", { className: cn("flex items-center", sizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: jsxRuntime.jsx("img", { src: logoSrc, alt: "MEDECINE 360 Logo", className: "h-full w-auto object-contain" }) }));
+    return (jsxRuntime.jsx("div", { className: cn("flex items-center", sizes[size], isClickable && "cursor-pointer", className), onClick: onClick, role: isClickable ? "button" : undefined, tabIndex: isClickable ? 0 : undefined, onKeyDown: isClickable
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onClick?.();
+                }
+            }
+            : undefined, children: jsxRuntime.jsx("img", { src: logoSrc, alt: alt, className: "object-contain w-auto h-full", onError: (e) => {
+                // Fallback to favicon if image fails to load
+                if (logoSrc !== "/favicon.ico") {
+                    e.target.src = "/favicon.ico";
+                }
+            } }) }));
 };
 
 const PROMED_THEME = {