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

package/dist/styles/theme-variables.css

@@ -0,0 +1,62 @@
+/* EWS Design System - Theme CSS Variables */
+/* This file should be imported in consuming applications */
+
+:root {
+  /* PROMED Theme (Default) - Professional theme for doctors/managers */
+  --ews-primary: #21596c;
+  --ews-primary-hover: #1a4756;
+  --ews-primary-light: #c0d0d4;
+  --ews-secondary: #3ba1a1;
+  --ews-secondary-hover: #308181;
+  --ews-success: #059669;
+  --ews-success-hover: #047857;
+  --ews-warning: #d97706;
+  --ews-warning-hover: #b45309;
+  --ews-error: #dc2626;
+  --ews-error-hover: #b91c1c;
+}
+
+/* Default theme when no data-theme is set */
+html:not([data-theme]) {
+  --ews-primary: #21596c;
+  --ews-primary-hover: #1a4756;
+  --ews-primary-light: #c0d0d4;
+  --ews-secondary: #3ba1a1;
+  --ews-secondary-hover: #308181;
+  --ews-success: #059669;
+  --ews-success-hover: #047857;
+  --ews-warning: #d97706;
+  --ews-warning-hover: #b45309;
+  --ews-error: #dc2626;
+  --ews-error-hover: #b91c1c;
+}
+
+/* MED Theme - Patient-friendly theme */
+[data-theme="MED"] {
+  --ews-primary: #3ba1a1;
+  --ews-primary-hover: #308181;
+  --ews-primary-light: #a8d5d5;
+  --ews-secondary: #6b73ff;
+  --ews-secondary-hover: #5a61e6;
+  --ews-success: #059669;
+  --ews-success-hover: #047857;
+  --ews-warning: #d97706;
+  --ews-warning-hover: #b45309;
+  --ews-error: #dc2626;
+  --ews-error-hover: #b91c1c;
+}
+
+/* PROMED Theme - Professional theme */
+[data-theme="PROMED"] {
+  --ews-primary: #21596c;
+  --ews-primary-hover: #1a4756;
+  --ews-primary-light: #c0d0d4;
+  --ews-secondary: #3ba1a1;
+  --ews-secondary-hover: #308181;
+  --ews-success: #059669;
+  --ews-success-hover: #047857;
+  --ews-warning: #d97706;
+  --ews-warning-hover: #b45309;
+  --ews-error: #dc2626;
+  --ews-error-hover: #b91c1c;
+}

package/dist/utils/index.d.ts

@@ -29,7 +29,7 @@ export declare function formatDate(date: Date | string | number, options?: Intl.
  * @param wait - Wait time in milliseconds
  * @returns Debounced function
  */
-export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+export declare function debounce<T extends (...args: unknown[]) => unknown>(func: T, wait: number): (...args: Parameters<T>) => void;
 /**
  * Utility function to generate unique ID
  * @param prefix - Optional prefix for the ID
@@ -44,7 +44,7 @@ export declare function generateId(prefix?: string): string;
 export declare const formatNumeric: (value: string) => string;
 /**
  * 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
  */

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAIzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAMzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/Input/Input.tsx

@@ -1,7 +1,28 @@
-import React, { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
 import { Eye, EyeOff } from "../../icons";
 import { cn } from "../../utils";
 
+export interface CountryCodeOption {
+  code: string;
+  country: string;
+}
+
+export interface CountryCodeSelectProps {
+  /**
+   * Array of country code options
+   */
+  options: CountryCodeOption[];
+  /**
+   * Currently selected country code
+   */
+  value: string;
+  /**
+   * Handler for when country code changes
+   */
+  onChange: (code: string) => void;
+}
+
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
@@ -44,6 +65,10 @@ export interface InputProps
    * Whether the input is required (shows red asterisk)
    */
   required?: boolean;
+  /**
+   * Country code dropdown configuration for phone inputs
+   */
+  countryCodeSelect?: CountryCodeSelectProps;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -60,6 +85,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       fullWidth = false,
       showPasswordToggle = false,
       required = false,
+      countryCodeSelect,
       id,
       type = "text",
       ...props
@@ -76,6 +102,25 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const shouldShowPasswordToggle = showPasswordToggle && isPasswordInput;
     const actualType = isPasswordInput && showPassword ? "text" : type;
 
+    // Country code dropdown state
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          dropdownRef.current &&
+          !dropdownRef.current.contains(event.target as Node)
+        ) {
+          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";
 
@@ -167,7 +212,69 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           </label>
         )}
         <div className="relative">
-          {leftIcon && (
+          {countryCodeSelect && (
+            <div className="absolute inset-y-0 left-0 flex items-center pl-1 z-10" ref={dropdownRef}>
+              <div className="relative">
+                <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"
+                  )}
+                >
+                  <span className="font-medium">{countryCodeSelect.value}</span>
+                  <ChevronDown
+                    className={cn(
+                      "w-4 h-4 text-ews-gray-400 transition-transform",
+                      isDropdownOpen && "rotate-180"
+                    )}
+                  />
+                </button>
+
+                {isDropdownOpen && (
+                  <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" }}
+                  >
+                    {countryCodeSelect.options.map((item) => {
+                      const isSelected = item.code === countryCodeSelect.value;
+                      return (
+                        <div
+                          key={item.code}
+                          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"
+                          )}
+                        >
+                          <span className="font-medium">{item.code}</span>
+                          {item.country && (
+                            <span className={cn(
+                              "ml-2 text-xs",
+                              isSelected ? "text-white/80" : "text-ews-gray-500"
+                            )}>
+                              {item.country}
+                            </span>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          {leftIcon && !countryCodeSelect && (
             <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
               <span className={cn("text-ews-gray-400", iconSizes[size])}>
                 {leftIcon}
@@ -181,7 +288,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               baseStyles,
               variants[actualVariant],
               sizes[size],
-              leftIcon && "pl-10",
+              countryCodeSelect && "pl-24",
+              leftIcon && !countryCodeSelect && "pl-10",
               (rightIcon || shouldShowPasswordToggle) && "pr-10",
               className
             )}
@@ -231,3 +339,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 Input.displayName = "Input";
 
 export { Input };
+

package/src/components/Input/index.ts

@@ -1,2 +1,2 @@
 export { Input } from "./Input";
-export type { InputProps } from "./Input";
+export type { CountryCodeOption, CountryCodeSelectProps, InputProps } from "./Input";

package/src/components/Logo/Logo.tsx

@@ -1,31 +1,5 @@
 import { cn } from "../../utils";
-
-export interface LogoProps {
-  /**
-   * Logo size
-   */
-  size?: "sm" | "md" | "lg" | "xl";
-  /**
-   * Whether to show the tagline
-   */
-  showTagline?: boolean;
-  /**
-   * Whether to show only the icon (favicon version)
-   */
-  iconOnly?: boolean;
-  /**
-   * Logo variant - normal, white, or favicon
-   */
-  variant?: "normal" | "white" | "fullWhite" | "favicon";
-  /**
-   * Custom className
-   */
-  className?: string;
-  /**
-   * Click handler
-   */
-  onClick?: () => void;
-}
+import type { LogoProps } from "./Logo.types";
 
 const Logo = ({
   size = "md",
@@ -34,6 +8,9 @@ const Logo = ({
   variant = "normal",
   className,
   onClick,
+  customSrc,
+  alt = "MEDECINE 360 Logo",
+  clickable = false,
 }: LogoProps) => {
   const sizes = {
     sm: "h-8",
@@ -49,17 +26,21 @@ const Logo = ({
     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"
+  // 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";
+      ? "/image/logoFullWhite.png"
+      : variant === "favicon"
+      ? "/favicon.ico"
+      : "/image/logo.png");
+
+  const isClickable = clickable || !!onClick;
 
   if (iconOnly) {
     return (
@@ -67,16 +48,33 @@ const Logo = ({
         className={cn(
           "flex items-center justify-center",
           iconSizes[size],
+          isClickable && "cursor-pointer",
           className
         )}
         onClick={onClick}
-        role={onClick ? "button" : undefined}
-        tabIndex={onClick ? 0 : undefined}
+        role={isClickable ? "button" : undefined}
+        tabIndex={isClickable ? 0 : undefined}
+        onKeyDown={
+          isClickable
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onClick?.();
+                }
+              }
+            : undefined
+        }
       >
         <img
           src={logoSrc}
-          alt="MEDECINE 360 Logo"
-          className="w-full h-full object-contain"
+          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 as unknown as { src: string }).src = "/favicon.ico";
+            }
+          }}
         />
       </div>
     );
@@ -84,19 +82,41 @@ const Logo = ({
 
   return (
     <div
-      className={cn("flex items-center", sizes[size], className)}
+      className={cn(
+        "flex items-center",
+        sizes[size],
+        isClickable && "cursor-pointer",
+        className
+      )}
       onClick={onClick}
-      role={onClick ? "button" : undefined}
-      tabIndex={onClick ? 0 : undefined}
+      role={isClickable ? "button" : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onKeyDown={
+        isClickable
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick?.();
+              }
+            }
+          : undefined
+      }
     >
       {/* Logo Image */}
       <img
         src={logoSrc}
-        alt="MEDECINE 360 Logo"
-        className="h-full w-auto object-contain"
+        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 as unknown as { src: string }).src = "/favicon.ico";
+          }
+        }}
       />
     </div>
   );
 };
 
+export type { LogoProps, LogoSize, LogoVariant } from "./Logo.types";
 export { Logo };

package/src/components/Logo/Logo.types.ts

@@ -0,0 +1,42 @@
+export type LogoSize = "sm" | "md" | "lg" | "xl";
+
+export type LogoVariant = "normal" | "white" | "fullWhite" | "favicon";
+
+export interface LogoProps {
+  /**
+   * Logo size
+   */
+  size?: LogoSize;
+  /**
+   * Whether to show the tagline
+   */
+  showTagline?: boolean;
+  /**
+   * Whether to show only the icon (favicon version)
+   */
+  iconOnly?: boolean;
+  /**
+   * Logo variant - normal, white, or favicon
+   */
+  variant?: LogoVariant;
+  /**
+   * Custom className
+   */
+  className?: string;
+  /**
+   * Click handler
+   */
+  onClick?: () => void;
+  /**
+   * Custom logo source URL (overrides variant)
+   */
+  customSrc?: string;
+  /**
+   * Alt text for the logo image
+   */
+  alt?: string;
+  /**
+   * Whether the logo is clickable (adds cursor pointer)
+   */
+  clickable?: boolean;
+}

package/src/components/Logo/index.ts

@@ -1,2 +1,2 @@
 export { Logo } from "./Logo";
-export type { LogoProps } from "./Logo";
+export type { LogoProps, LogoSize, LogoVariant } from "./Logo";

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -6,7 +6,7 @@ import { Input } from "../Input/Input";
 // Generic interface for searchable entities
 export interface SearchableEntity {
   id: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 interface SearchAutocompleteProps<T extends SearchableEntity> {

package/src/components/Select/Select.tsx

@@ -1,15 +1,22 @@
 import { ChevronDown, Search, X } from "lucide-react";
-import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
 import { cn } from "../../utils";
 import { Input } from "../Input";
 
-export interface SelectOption<T = any> {
+export interface SelectOption<T = unknown> {
   value: T;
   label: string;
   disabled?: boolean;
 }
 
-export interface SelectProps<T = any> {
+export interface SelectProps<T = unknown> {
   /**
    * Array of options to display
    */
@@ -149,7 +156,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       : options;
 
     // Calculate dropdown position based on available space
-    const calculateDropdownPosition = () => {
+    const calculateDropdownPosition = useCallback(() => {
       if (!containerRef.current) return;
 
       const containerRect = containerRef.current.getBoundingClientRect();
@@ -190,7 +197,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       } else {
         setDropdownPosition("bottom");
       }
-    };
+    }, [filteredOptions.length, searchable, maxHeight]);
 
     // Alternative calculation using actual dropdown element when available
     const calculateDropdownPositionWithElement = () => {
@@ -252,7 +259,13 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
           calculateDropdownPositionWithElement();
         });
       }
-    }, [isOpen, filteredOptions.length, searchable, maxHeight]);
+    }, [
+      isOpen,
+      filteredOptions.length,
+      searchable,
+      maxHeight,
+      calculateDropdownPosition,
+    ]);
 
     // Recalculate position on window resize
     useEffect(() => {
@@ -269,7 +282,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
         window.removeEventListener("resize", handleResize);
         window.removeEventListener("scroll", handleResize);
       };
-    }, [isOpen]);
+    }, [isOpen, calculateDropdownPosition]);
 
     // Handle keyboard navigation
     const handleKeyDown = (event: React.KeyboardEvent) => {
@@ -335,7 +348,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
     // Handle clear
     const handleClear = (event: React.MouseEvent) => {
       event.stopPropagation();
-      onChange?.(undefined as any, {} as SelectOption);
+      onChange?.(undefined as unknown, {} as SelectOption);
     };
 
     // Handle toggle

package/src/hooks/useSelectField.ts

@@ -1,7 +1,9 @@
 import {
   Control,
   FieldPath,
+  FieldPathValue,
   FieldValues,
+  RegisterOptions,
   useController,
 } from "react-hook-form";
 import { SelectOption, SelectProps } from "../components/Select";
@@ -13,8 +15,11 @@ export interface UseSelectFieldProps<
   name: TName;
   control: Control<TFieldValues>;
   options: SelectOption[];
-  rules?: any;
-  defaultValue?: any;
+  rules?: Omit<
+    RegisterOptions<TFieldValues, TName>,
+    "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"
+  >;
+  defaultValue?: FieldPathValue<TFieldValues, TName>;
 }
 
 export function useSelectField<

package/src/icons/Icon.tsx

@@ -29,7 +29,7 @@ export interface SimpleIconProps {
   /**
    * Other props passed to the underlying icon
    */
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 const Icon = React.forwardRef<SVGSVGElement, IconProps>(

package/src/styles/index.css

@@ -287,36 +287,4 @@ div[tabindex]:focus {
   .hover-scale:hover {
     transform: scale(1.02);
   }
-
-  /* Custom checkbox styling for better control */
-  input[type="checkbox"] {
-    width: 1rem;
-    height: 1rem;
-    border-radius: 0.25rem;
-    border: 2px solid var(--ews-gray-300);
-    background-color: white;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    accent-color: var(--ews-primary);
-  }
-
-  input[type="checkbox"]:hover {
-    border-color: var(--ews-primary);
-  }
-
-  input[type="checkbox"]:focus {
-    outline: none;
-    border-color: var(--ews-primary);
-    box-shadow: 0 0 0 2px var(--ews-primary);
-  }
-
-  input[type="checkbox"]:checked {
-    background-color: var(--ews-primary);
-    border-color: var(--ews-primary);
-  }
-
-  input[type="checkbox"]:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
 }

package/src/utils/index.ts

@@ -52,7 +52,7 @@ export function formatDate(
  * @param wait - Wait time in milliseconds
  * @returns Debounced function
  */
-export function debounce<T extends (...args: any[]) => any>(
+export function debounce<T extends (...args: unknown[]) => unknown>(
   func: T,
   wait: number
 ): (...args: Parameters<T>) => void {
@@ -83,12 +83,14 @@ export const formatNumeric = (value: string): string => {
 
 /**
  * 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
  */
 export function isValidPhoneNumber(value: string): boolean {
   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);
 }