@ews-admin/global-design-system 1.1.10 → 1.1.12

package/dist/index.js

@@ -65,6 +65,25 @@ function debounce(func, wait) {
 function generateId(prefix = "ews") {
     return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
 }
+/**
+ * Utility function to format numeric input by removing non-digit characters
+ * @param value - String value to format
+ * @returns String with only numeric characters
+ */
+const formatNumeric = (value) => {
+    return value.replace(/\D/g, "");
+};
+/**
+ * Utility function to validate phone numbers
+ * Validates phone numbers with 1-15 digits, starting with a non-zero digit
+ * @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,14}$/;
+    return phoneRegex.test(trimmedValue);
+}
 
 const Button = React.forwardRef(({ className, variant = "primary", size = "md", loading = false, fullWidth = false, leftIcon, rightIcon, children, disabled, ...props }, ref) => {
     const baseStyles = "inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
@@ -460,6 +479,20 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
         md: "h-5 w-5",
         lg: "h-6 w-6",
     };
+    const isCheckbox = type === "checkbox";
+    // For checkboxes, render with or without label based on label prop
+    if (isCheckbox) {
+        if (label) {
+            // Render checkbox with built-in label
+            return (jsxRuntime.jsx("div", { className: cn("space-y-1", fullWidth ? "w-full" : "w-auto"), children: jsxRuntime.jsxs("div", { className: "flex items-start space-x-3", children: [jsxRuntime.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 }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium cursor-pointer text-ews-gray-700", children: [label, required && jsxRuntime.jsx("span", { className: "ml-1 text-ews-error", children: "*" })] }), (error || helperText) && (jsxRuntime.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 (jsxRuntime.jsx("input", { id: inputId, type: actualType, className: cn(className), ref: ref, ...props }));
+        }
+    }
+    // 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 }))] }));
 });
 Input.displayName = "Input";
@@ -667,7 +700,7 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
         md: "w-4 h-4",
         lg: "w-5 h-5",
     };
-    return (jsxRuntime.jsxs("div", { className: cn("w-full", containerClassName), ref: containerRef, children: [label && (jsxRuntime.jsxs("label", { htmlFor: selectId, className: cn("block text-sm font-medium mb-1", hasError ? "text-ews-error" : "text-ews-gray-700", disabled && "text-ews-gray-400"), children: [label, required && jsxRuntime.jsx("span", { className: "ml-1 text-ews-error", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("div", { ref: ref, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-labelledby": label ? selectId : undefined, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onClick: handleToggle, className: cn(
+    return (jsxRuntime.jsxs("div", { className: cn("w-full", containerClassName), ref: containerRef, children: [label && (jsxRuntime.jsxs("label", { htmlFor: selectId, className: cn("block text-sm font-medium mb-1", "text-ews-gray-700", disabled && "text-ews-gray-400"), children: [label, required && jsxRuntime.jsx("span", { className: "ml-1 text-ews-error", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("div", { ref: ref, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-labelledby": label ? selectId : undefined, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onClick: handleToggle, className: cn(
                         // Base styles
                         "ews-select-trigger w-full bg-white border rounded-md shadow-sm transition-colors cursor-pointer", "focus:outline-none focus:ring-2 focus:ring-offset-0", "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-ews-gray-50", 
                         // Size
@@ -1111,6 +1144,7 @@ function useController(props) {
         exact: true,
     });
     const _props = React.useRef(props);
+    const _previousNameRef = React.useRef(undefined);
     const _registerProps = React.useRef(control.register(name, {
         ...props.rules,
         value,
@@ -1176,6 +1210,10 @@ function useController(props) {
     }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+        const previousName = _previousNameRef.current;
+        if (previousName && previousName !== name && !isArrayField) {
+            control.unregister(previousName);
+        }
         control.register(name, {
             ..._props.current.rules,
             ...(isBoolean(_props.current.disabled)
@@ -1197,6 +1235,7 @@ function useController(props) {
             }
         }
         !isArrayField && control.register(name);
+        _previousNameRef.current = name;
         return () => {
             (isArrayField
                 ? _shouldUnregisterField && !control._state.action
@@ -1475,17 +1514,19 @@ function MultiSearchAutocomplete({ items, selectedItems, onSelectionChange, onSe
         };
     }, [isOpen]);
     // Default render functions
-    const defaultRenderSelectedItem = (entity) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-ews-primary/10 text-ews-primary border border-ews-primary/20", children: [getPrimaryText(entity), jsxRuntime.jsx("button", { type: "button", onClick: () => handleRemoveItem(entity), className: "ml-2 text-ews-primary/60 hover:text-ews-primary", disabled: disabled, title: "Remove item", children: jsxRuntime.jsx(X, { className: "w-3 h-3" }) })] }));
-    const defaultRenderListItem = (entity, isSelected) => (jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("w-5 h-5 border-2 rounded flex items-center justify-center", isSelected ? "bg-ews-primary border-ews-primary" : "border-gray-300"), children: isSelected && jsxRuntime.jsx(Check, { className: "w-3 h-3 text-white" }) }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: getPrimaryText(entity) }), getSecondaryText && (jsxRuntime.jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: getSecondaryText(entity) }))] })] }));
+    const defaultRenderSelectedItem = (entity) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center px-3 py-1 text-sm font-medium rounded-full border bg-ews-primary/10 text-ews-primary border-ews-primary/20", children: [getPrimaryText(entity), jsxRuntime.jsx("button", { type: "button", onClick: () => handleRemoveItem(entity), className: "ml-2 text-ews-primary/60 hover:text-ews-primary", disabled: disabled, title: "Remove item", children: jsxRuntime.jsx(X, { className: "w-3 h-3" }) })] }));
+    const defaultRenderListItem = (entity, isSelected) => (jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("flex justify-center items-center w-5 h-5 rounded border-2", isSelected
+                    ? "bg-ews-primary border-ews-primary"
+                    : "border-ews-gray-300"), children: isSelected && jsxRuntime.jsx(Check, { className: "w-3 h-3 text-white" }) }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: getPrimaryText(entity) }), getSecondaryText && (jsxRuntime.jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: getSecondaryText(entity) }))] })] }));
     return (jsxRuntime.jsxs("div", { className: cn("relative", className), ref: dropdownRef, children: [selectedItems.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: selectedItems.map((item) => (jsxRuntime.jsx("div", { children: renderSelectedItem
                         ? renderSelectedItem(item)
-                        : defaultRenderSelectedItem(item) }, item.id))) })), jsxRuntime.jsx(Input, { ref: inputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, disabled: disabled, leftIcon: jsxRuntime.jsx(Search, { className: "w-4 h-4" }), className: "w-full" }), isOpen && !disabled && (jsxRuntime.jsx("div", { className: "absolute z-10 mt-1 w-full max-h-60 bg-white rounded-lg border border-gray-200 shadow-lg overflow-auto", children: loading || isSearching ? (jsxRuntime.jsxs("div", { className: "px-4 py-3 text-sm text-gray-500 flex items-center", children: [jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-ews-primary mr-2" }), isSearching ? "Searching..." : "Loading..."] })) : searchError ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-red-600", children: jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(X, { className: "w-4 h-4 mr-2" }), "Error: ", searchError] }) })) : error ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-red-600", children: jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(X, { className: "w-4 h-4 mr-2" }), error] }) })) : filteredItems.length === 0 ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-gray-500", children: searchTerm.length < minSearchLength
+                        : defaultRenderSelectedItem(item) }, item.id))) })), jsxRuntime.jsx(Input, { ref: inputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, disabled: disabled, leftIcon: jsxRuntime.jsx(Search, { className: "w-4 h-4" }), className: "w-full" }), isOpen && !disabled && (jsxRuntime.jsx("div", { className: "overflow-auto absolute z-10 mt-1 w-full max-h-60 bg-white rounded-lg border border-gray-200 shadow-lg", children: loading || isSearching ? (jsxRuntime.jsxs("div", { className: "flex items-center px-4 py-3 text-sm text-gray-500", children: [jsxRuntime.jsx("div", { className: "mr-2 w-4 h-4 rounded-full border-b-2 animate-spin border-ews-primary" }), isSearching ? "Searching..." : "Loading..."] })) : searchError ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-red-600", children: jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(X, { className: "mr-2 w-4 h-4" }), "Error: ", searchError] }) })) : error ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-red-600", children: jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(X, { className: "mr-2 w-4 h-4" }), error] }) })) : filteredItems.length === 0 ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-gray-500", children: searchTerm.length < minSearchLength
                         ? `Type at least ${minSearchLength} characters to search`
                         : "No items found" })) : (jsxRuntime.jsx("div", { className: "py-1", children: filteredItems.map((item) => {
                         const isSelected = selectedItems.some((selected) => selected.id === item.id);
-                        return (jsxRuntime.jsx("button", { type: "button", onClick: () => handleItemToggle(item), className: cn("w-full px-4 py-3 text-left flex items-center transition-colors", isSelected
-                                ? "bg-ews-primary/10 text-ews-primary border-l-4 border-ews-primary"
-                                : "hover:bg-ews-primary/5 text-gray-900"), children: renderListItem
+                        return (jsxRuntime.jsx("button", { type: "button", onClick: () => handleItemToggle(item), className: cn("flex items-center px-4 py-3 w-full text-left transition-colors", isSelected
+                                ? "border-l-4 bg-ews-primary/10 text-ews-primary border-ews-primary"
+                                : "text-gray-900 hover:bg-ews-primary/5"), children: renderListItem
                                 ? renderListItem(item, isSelected)
                                 : defaultRenderListItem(item, isSelected) }, item.id));
                     }) })) }))] }));
@@ -1744,7 +1785,7 @@ const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesCh
     }, [specialties]);
     return (jsxRuntime.jsxs("div", { className: cn("space-y-3", className), children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx("div", { className: "flex justify-center items-center w-8 h-8 rounded-lg bg-secondary-100", children: jsxRuntime.jsx(Stethoscope, { className: "w-4 h-4 text-secondary-600" }) }), jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Medical Specialties" })] }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Select Specialties" }) }), jsxRuntime.jsx(MultiSearchAutocomplete, { items: specialties, selectedItems: selectedSpecialties, onSelectionChange: handleSelectionChange, onSearch: fetchSpecialties, getEntityById: getEntityById, getPrimaryText: (specialty) => specialty.label, getSecondaryText: (specialty) => specialty.code, placeholder: placeholder, disabled: disabled, loading: isLoading, multiple: true, keepOpenOnSelect: true, className: "w-full", renderSelectedItem: (specialty) => (jsxRuntime.jsx("span", { className: "inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-ews-primary/10 text-ews-primary border border-ews-primary/20", children: specialty.label })), renderListItem: (specialty, isSelected) => (jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("w-5 h-5 border-2 rounded flex items-center justify-center", isSelected
                                 ? "bg-ews-primary border-ews-primary"
-                                : "border-gray-300"), children: isSelected && (jsxRuntime.jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: specialty.label }), jsxRuntime.jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: specialty.code })] })] })) }), showSelectedCount && selectedSpecialties.length > 0 && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm text-gray-600", children: [jsxRuntime.jsxs("span", { children: [selectedSpecialties.length, " specialty", selectedSpecialties.length !== 1 ? "ies" : "", " selected"] }), maxSelections && (jsxRuntime.jsxs("span", { className: "text-gray-400", children: [selectedSpecialties.length, "/", maxSelections] }))] }))] }));
+                                : "border-ews-gray-300"), children: isSelected && (jsxRuntime.jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: specialty.label }), jsxRuntime.jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: specialty.code })] })] })) }), showSelectedCount && selectedSpecialties.length > 0 && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm text-gray-600", children: [jsxRuntime.jsxs("span", { children: [selectedSpecialties.length, " specialty", selectedSpecialties.length !== 1 ? "ies" : "", " selected"] }), maxSelections && (jsxRuntime.jsxs("span", { className: "text-gray-400", children: [selectedSpecialties.length, "/", maxSelections] }))] }))] }));
 };
 
 exports.ArrowRight = ArrowRight;
@@ -1769,7 +1810,9 @@ exports.cn = cn;
 exports.debounce = debounce;
 exports.formatCurrency = formatCurrency;
 exports.formatDate = formatDate;
+exports.formatNumeric = formatNumeric;
 exports.generateId = generateId;
+exports.isValidPhoneNumber = isValidPhoneNumber;
 exports.useDebounce = useDebounce;
 exports.useDebouncedCallback = useDebouncedCallback;
 exports.useSelectField = useSelectField;