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

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/index.ts

@@ -16,6 +16,9 @@ export { MultiSearchAutocomplete } from "./components/MultiSearchAutocomplete";
 export { Modal } from "./components/Modal";
 export type { ErrorField, ErrorObject, ModalProps } from "./components/Modal";
 
+export { DropdownMultiSelect } from "./components/DropdownMultiSelect";
+export type { DropdownMultiSelectProps } from "./components/DropdownMultiSelect";
+
 export { Logo } from "./components/Logo";
 export type { LogoProps } from "./components/Logo";
 

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,14}$/;
+  // 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",