@ews-admin/global-design-system 1.6.0 → 1.8.0

package/dist/index.esm.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, createElement, useState, useRef, useEffect, useId, useCallback, createContext, useContext } from 'react';
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const LOCAL_PORTS = {
     bff: 8082,
     loginBff: 8080,
     app: 3000,
-    login: 3001,
+    login: 4001,
     dashboard: 3002,
     admin: 3008,
 };
@@ -62,7 +62,7 @@ function createEnvConfig(env, overrides) {
  * Available country codes supported by the platform
  */
 const COUNTRY_CODES = [
-    { code: "+221", country: "SN" }, // Senegal
+    { code: "+221", country: "SN" },
     { code: "+235", country: "TD" }, // Chad
 ];
 /**
@@ -32606,11 +32606,11 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
         if (label) {
             // Render checkbox with built-in label
             return (jsx("div", { className: cn("space-y-1", fullWidth ? "w-full" : "w-auto"), children: jsxs("div", { className: "flex items-start space-x-3", children: [jsx("input", { id: inputId, type: actualType, className: cn("mt-0.5", // Slight top margin to align with first line of text
-                            className), ref: ref, ...props }), jsxs("div", { className: "flex-1", children: [jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium cursor-pointer text-ews-gray-700", children: [label, required && jsx("span", { className: "ml-1 text-ews-error", children: "*" })] }), (error || helperText) && (jsx("p", { className: cn("mt-1 text-sm", error ? "text-ews-error" : "text-ews-gray-500"), children: error || helperText }))] })] }) }));
+                            className), ref: ref, onChange: onChange, onBlur: onBlur, ...props }), jsxs("div", { className: "flex-1", children: [jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium cursor-pointer text-ews-gray-700", children: [label, required && jsx("span", { className: "ml-1 text-ews-error", children: "*" })] }), (error || helperText) && (jsx("p", { className: cn("mt-1 text-sm", error ? "text-ews-error" : "text-ews-gray-500"), children: error || helperText }))] })] }) }));
         }
         else {
             // Render just the checkbox for external label usage
-            return (jsx("input", { id: inputId, type: actualType, className: cn(className), ref: ref, ...props }));
+            return (jsx("input", { id: inputId, type: actualType, className: cn(className), ref: ref, onChange: onChange, onBlur: onBlur, ...props }));
         }
     }
     // Default rendering for non-checkbox inputs
@@ -32937,23 +32937,29 @@ var isWeb = typeof window !== 'undefined' &&
     typeof document !== 'undefined';
 
 function cloneObject(data) {
+    let copy;
+    const isArray = Array.isArray(data);
+    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
     if (data instanceof Date) {
-        return new Date(data);
+        copy = new Date(data);
     }
-    const isFileListInstance = typeof FileList !== 'undefined' && data instanceof FileList;
-    if (isWeb && (data instanceof Blob || isFileListInstance)) {
-        return data;
+    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
+        (isArray || isObject(data))) {
+        copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+        if (!isArray && !isPlainObject(data)) {
+            copy = data;
+        }
+        else {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    copy[key] = cloneObject(data[key]);
+                }
+            }
+        }
     }
-    const isArray = Array.isArray(data);
-    if (!isArray && !(isObject(data) && isPlainObject(data))) {
+    else {
         return data;
     }
-    const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
-    for (const key in data) {
-        if (Object.prototype.hasOwnProperty.call(data, key)) {
-            copy[key] = cloneObject(data[key]);
-        }
-    }
     return copy;
 }
 
@@ -32979,8 +32985,6 @@ var get = (object, path, defaultValue) => {
 
 var isBoolean = (value) => typeof value === 'boolean';
 
-var isFunction = (value) => typeof value === 'function';
-
 var set = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -33008,21 +33012,50 @@ var set = (object, path, value) => {
 
 const EVENTS = {
     BLUR: 'blur',
-    CHANGE: 'change'};
+    FOCUS_OUT: 'focusout',
+    CHANGE: 'change',
+};
 const VALIDATION_MODE = {
+    onBlur: 'onBlur',
+    onChange: 'onChange',
+    onSubmit: 'onSubmit',
+    onTouched: 'onTouched',
     all: 'all',
 };
 
+const HookFormContext = React.createContext(null);
+HookFormContext.displayName = 'HookFormContext';
 /**
- * Separate context for `control` to prevent unnecessary rerenders.
- * Internal hooks that only need control use this instead of full form context.
- */
-const HookFormControlContext = React.createContext(null);
-HookFormControlContext.displayName = 'HookFormControlContext';
-/**
- * @internal Internal hook to access only control from context.
+ * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @returns return all useForm methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
  */
-const useFormControlContext = () => React.useContext(HookFormControlContext);
+const useFormContext = () => React.useContext(HookFormContext);
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
     const result = {
@@ -33076,8 +33109,8 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
  * ```
  */
 function useFormState(props) {
-    const formControl = useFormControlContext();
-    const { control = formControl, disabled, name, exact } = props || {};
+    const methods = useFormContext();
+    const { control = methods.control, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React.useState(control._formState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
@@ -33111,11 +33144,14 @@ var isString = (value) => typeof value === 'string';
 
 var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
     if (isString(names)) {
+        isGlobal && _names.watch.add(names);
         return get(formValues, names, defaultValue);
     }
     if (Array.isArray(names)) {
-        return names.map((fieldName) => (get(formValues, fieldName)));
+        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName),
+            get(formValues, fieldName)));
     }
+    isGlobal && (_names.watchAll = true);
     return formValues;
 };
 
@@ -33123,10 +33159,10 @@ var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
     if (isPrimitive(object1) || isPrimitive(object2)) {
-        return Object.is(object1, object2);
+        return object1 === object2;
     }
     if (isDateObject(object1) && isDateObject(object2)) {
-        return Object.is(object1.getTime(), object2.getTime());
+        return object1.getTime() === object2.getTime();
     }
     const keys1 = Object.keys(object1);
     const keys2 = Object.keys(object2);
@@ -33149,7 +33185,7 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
                 (isObject(val1) && isObject(val2)) ||
                 (Array.isArray(val1) && Array.isArray(val2))
                 ? !deepEqual(val1, val2, _internal_visited)
-                : !Object.is(val1, val2)) {
+                : val1 !== val2) {
                 return false;
             }
         }
@@ -33174,73 +33210,38 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
  * ```
  */
 function useWatch(props) {
-    const formControl = useFormControlContext();
-    const { control = formControl, name, defaultValue, disabled, exact, compute, } = props || {};
+    const methods = useFormContext();
+    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
     const _defaultValue = React.useRef(defaultValue);
     const _compute = React.useRef(compute);
     const _computeFormValues = React.useRef(undefined);
-    const _prevControl = React.useRef(control);
-    const _prevName = React.useRef(name);
     _compute.current = compute;
-    const [value, updateValue] = React.useState(() => {
-        const defaultValue = control._getWatch(name, _defaultValue.current);
-        return _compute.current ? _compute.current(defaultValue) : defaultValue;
-    });
-    const getCurrentOutput = React.useCallback((values) => {
-        const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
-        return _compute.current ? _compute.current(formValues) : formValues;
-    }, [control._formValues, control._names, name]);
-    const refreshValue = React.useCallback((values) => {
-        if (!disabled) {
-            const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
-            if (_compute.current) {
-                const computedFormValues = _compute.current(formValues);
-                if (!deepEqual(computedFormValues, _computeFormValues.current)) {
-                    updateValue(computedFormValues);
-                    _computeFormValues.current = computedFormValues;
+    const defaultValueMemo = React.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
+    const [value, updateValue] = React.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
+    useIsomorphicLayoutEffect(() => control._subscribe({
+        name,
+        formState: {
+            values: true,
+        },
+        exact,
+        callback: (formState) => {
+            if (!disabled) {
+                const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
+                if (_compute.current) {
+                    const computedFormValues = _compute.current(formValues);
+                    if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+                        updateValue(computedFormValues);
+                        _computeFormValues.current = computedFormValues;
+                    }
+                }
+                else {
+                    updateValue(formValues);
                 }
             }
-            else {
-                updateValue(formValues);
-            }
-        }
-    }, [control._formValues, control._names, disabled, name]);
-    useIsomorphicLayoutEffect(() => {
-        if (_prevControl.current !== control ||
-            !deepEqual(_prevName.current, name)) {
-            _prevControl.current = control;
-            _prevName.current = name;
-            refreshValue();
-        }
-        return control._subscribe({
-            name,
-            formState: {
-                values: true,
-            },
-            exact,
-            callback: (formState) => {
-                refreshValue(formState.values);
-            },
-        });
-    }, [control, exact, name, refreshValue]);
+        },
+    }), [control, disabled, name, exact]);
     React.useEffect(() => control._removeUnmounted());
-    // If name or control changed for this render, synchronously reflect the
-    // latest value so callers (like useController) see the correct value
-    // immediately on the same render.
-    // Optimize: Check control reference first before expensive deepEqual
-    const controlChanged = _prevControl.current !== control;
-    const prevName = _prevName.current;
-    // Cache the computed output to avoid duplicate calls within the same render
-    // We include shouldReturnImmediate in deps to ensure proper recomputation
-    const computedOutput = React.useMemo(() => {
-        if (disabled) {
-            return null;
-        }
-        const nameChanged = !controlChanged && !deepEqual(prevName, name);
-        const shouldReturnImmediate = controlChanged || nameChanged;
-        return shouldReturnImmediate ? getCurrentOutput() : null;
-    }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
-    return computedOutput !== null ? computedOutput : value;
+    return value;
 }
 
 /**
@@ -33268,20 +33269,20 @@ function useWatch(props) {
  * ```
  */
 function useController(props) {
-    const formControl = useFormControlContext();
-    const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true, } = props;
+    const methods = useFormContext();
+    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
     const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
         defaultValue: defaultValueMemo,
-        exact,
+        exact: true,
     });
     const formState = useFormState({
         control,
         name,
-        exact,
+        exact: true,
     });
     const _props = React.useRef(props);
     const _previousNameRef = React.useRef(undefined);
@@ -33329,12 +33330,12 @@ function useController(props) {
     }), [name, control._formValues]);
     const ref = React.useCallback((elm) => {
         const field = get(control._fields, name);
-        if (field && field._f && elm) {
+        if (field && elm) {
             field._f.ref = {
-                focus: () => isFunction(elm.focus) && elm.focus(),
-                select: () => isFunction(elm.select) && elm.select(),
-                setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
-                reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity(),
+                focus: () => elm.focus && elm.focus(),
+                select: () => elm.select && elm.select(),
+                setCustomValidity: (message) => elm.setCustomValidity(message),
+                reportValidity: () => elm.reportValidity(),
             };
         }
     }, [control._fields, name]);
@@ -33368,7 +33369,7 @@ function useController(props) {
         };
         updateMounted(name, true);
         if (_shouldUnregisterField) {
-            const value = cloneObject(get(control._options.defaultValues, name, _props.current.defaultValue));
+            const value = cloneObject(get(control._options.defaultValues, name));
             set(control._defaultValues, name, value);
             if (isUndefined(get(control._formValues, name))) {
                 set(control._formValues, name, value);
@@ -33441,9 +33442,6 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
-const HookFormContext = React.createContext(null);
-HookFormContext.displayName = 'HookFormContext';
-
 function useSelectField({ name, control, options: _options, rules, defaultValue, }) {
     const { field, fieldState: { error, invalid }, } = useController({
         name,
@@ -33967,7 +33965,14 @@ const PhoneInput = React.forwardRef(({ countryCode, onCountryCodeChange, onChang
         // when the user changes the dropdown without retyping the number.
         const el = nativeRef.current;
         if (el && onChange) {
-            const numeric = formatNumeric(el.value);
+            let numeric = formatNumeric(el.value);
+            // Strip new country code digits if already present at the start
+            // (e.g. local part "221778384499" when switching to +221).
+            const newCodeDigits = formatNumeric(newCode);
+            if (newCodeDigits && numeric.startsWith(newCodeDigits)) {
+                numeric = numeric.slice(newCodeDigits.length);
+                el.value = numeric;
+            }
             const fullValue = numeric ? `${newCode}${numeric}` : "";
             // Pass the value string directly — RHF's Controller field.onChange
             // accepts raw values, avoiding unreliable fake-event parsing.
@@ -33985,7 +33990,14 @@ const PhoneInput = React.forwardRef(({ countryCode, onCountryCodeChange, onChang
     }, [value]);
     const handleChange = (e) => {
         // Enforce digits-only in the displayed field.
-        const numeric = formatNumeric(e.target.value);
+        let numeric = formatNumeric(e.target.value);
+        // Strip country code digits if user typed or pasted the full number
+        // (e.g. typed "+221778384499" → formatNumeric gives "221778384499"
+        // which would produce "+221221778384499" without this guard).
+        const codeDigits = formatNumeric(activeCode);
+        if (codeDigits && numeric.startsWith(codeDigits)) {
+            numeric = numeric.slice(codeDigits.length);
+        }
         if (e.target.value !== numeric) {
             e.target.value = numeric;
         }
@@ -34093,8 +34105,8 @@ const PROMED_THEME = {
 const MED_THEME = {
     name: "MED",
     colors: {
-        primary: "#3BA1A1", // Teal for patients (calming, trustworthy)
-        secondary: "#6B73FF", // Soft purple-blue (suggested secondary for MED)
+        primary: "#3BA1A1",
+        secondary: "#6B73FF",
         primaryHover: "#308181",
         secondaryHover: "#5a61e6",
         primaryLight: "#a8d5d5",