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

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.15",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

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);
 }

package/tailwind.preset.js

@@ -4,18 +4,18 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        // EWS Theme Colors - These work with Tailwind opacity modifiers
-        "ews-primary": "rgb(33 89 108)",
-        "ews-primary-hover": "rgb(26 71 86)",
-        "ews-primary-light": "rgb(192 208 212)",
-        "ews-secondary": "rgb(59 161 161)",
-        "ews-secondary-hover": "rgb(48 129 129)",
-        "ews-success": "rgb(5 150 105)",
-        "ews-success-hover": "rgb(4 120 87)",
-        "ews-warning": "rgb(217 119 6)",
-        "ews-warning-hover": "rgb(180 83 9)",
-        "ews-error": "rgb(220 38 38)",
-        "ews-error-hover": "rgb(185 28 28)",
+        // EWS Theme Colors - These will be available as CSS variables
+        "ews-primary": "var(--ews-primary, #21596c)",
+        "ews-primary-hover": "var(--ews-primary-hover, #1a4756)",
+        "ews-primary-light": "var(--ews-primary-light, #c0d0d4)",
+        "ews-secondary": "var(--ews-secondary, #3ba1a1)",
+        "ews-secondary-hover": "var(--ews-secondary-hover, #308181)",
+        "ews-success": "var(--ews-success, #059669)",
+        "ews-success-hover": "var(--ews-success-hover, #047857)",
+        "ews-warning": "var(--ews-warning, #d97706)",
+        "ews-warning-hover": "var(--ews-warning-hover, #b45309)",
+        "ews-error": "var(--ews-error, #dc2626)",
+        "ews-error-hover": "var(--ews-error-hover, #b91c1c)",
 
         // EWS Gray Scale
         "ews-gray-50": "#f8fafc",
@@ -36,9 +36,9 @@ module.exports = {
           200: "#bae6fd",
           300: "#7dd3fc",
           400: "#38bdf8",
-          500: "rgb(33 89 108)",
-          600: "rgb(26 71 86)",
-          700: "rgb(26 71 86)",
+          500: "var(--ews-primary, #21596c)",
+          600: "var(--ews-primary-hover, #1a4756)",
+          700: "var(--ews-primary-hover, #1a4756)",
           800: "#0f2d36",
           900: "#0a1f26",
         },
@@ -48,8 +48,8 @@ module.exports = {
           200: "#99f6e4",
           300: "#5eead4",
           400: "#2dd4bf",
-          500: "rgb(59 161 161)",
-          600: "rgb(48 129 129)",
+          500: "var(--ews-secondary, #3ba1a1)",
+          600: "var(--ews-secondary-hover, #308181)",
           700: "#0f766e",
           800: "#115e59",
           900: "#134e4a",
@@ -60,8 +60,8 @@ module.exports = {
           200: "#bbf7d0",
           300: "#86efac",
           400: "#4ade80",
-          500: "rgb(5 150 105)",
-          600: "rgb(4 120 87)",
+          500: "var(--ews-success, #059669)",
+          600: "var(--ews-success-hover, #047857)",
           700: "#15803d",
           800: "#166534",
           900: "#14532d",
@@ -72,8 +72,8 @@ module.exports = {
           200: "#fde68a",
           300: "#fcd34d",
           400: "#fbbf24",
-          500: "rgb(217 119 6)",
-          600: "rgb(180 83 9)",
+          500: "var(--ews-warning, #d97706)",
+          600: "var(--ews-warning-hover, #b45309)",
           700: "#b45309",
           800: "#92400e",
           900: "#78350f",
@@ -84,8 +84,8 @@ module.exports = {
           200: "#fecaca",
           300: "#fca5a5",
           400: "#f87171",
-          500: "rgb(220 38 38)",
-          600: "rgb(185 28 28)",
+          500: "var(--ews-error, #dc2626)",
+          600: "var(--ews-error-hover, #b91c1c)",
           700: "#b91c1c",
           800: "#991b1b",
           900: "#7f1d1d",