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

package/dist/index.js

@@ -65,16 +65,35 @@ 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";
+const Button = React.forwardRef(({ className, variant = "ews-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 disabled:opacity-50 disabled:pointer-events-none";
     const variants = {
-        primary: "bg-ews-primary text-white hover:bg-ews-primary-hover focus:ring-ews-primary",
-        secondary: "bg-ews-secondary text-white hover:bg-ews-secondary-hover focus:ring-ews-secondary",
-        success: "bg-ews-success text-white hover:bg-ews-success-hover focus:ring-ews-success",
-        warning: "bg-ews-warning text-white hover:bg-ews-warning-hover focus:ring-ews-warning",
-        error: "bg-ews-error text-white hover:bg-ews-error-hover focus:ring-ews-error",
-        ghost: "bg-transparent text-ews-gray-700 hover:bg-ews-gray-100 focus:ring-ews-gray-500",
+        "ews-primary": "bg-ews-primary text-white hover:bg-ews-primary-hover",
+        "ews-secondary": "bg-ews-secondary text-white hover:bg-ews-secondary-hover",
+        success: "bg-ews-success text-white hover:bg-ews-success-hover",
+        warning: "bg-ews-warning text-white hover:bg-ews-warning-hover",
+        error: "bg-ews-error text-white hover:bg-ews-error-hover",
+        outline: "bg-transparent text-sm font-medium text-ews-primary hover:text-ews-primary/80",
     };
     const sizes = {
         sm: "px-3 py-1.5 text-sm",
@@ -86,7 +105,7 @@ const Button = React.forwardRef(({ className, variant = "primary", size = "md",
         md: "h-5 w-5",
         lg: "h-6 w-6",
     };
-    return (jsxRuntime.jsxs("button", { className: cn(baseStyles, variants[variant], sizes[size], fullWidth && "w-full", className), ref: ref, disabled: disabled || loading, ...props, children: [loading && (jsxRuntime.jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), !loading && leftIcon && (jsxRuntime.jsx("span", { className: cn("mr-2 flex items-center", iconSizes[size]), children: leftIcon })), children, !loading && rightIcon && (jsxRuntime.jsx("span", { className: cn("ml-2 flex items-center", iconSizes[size]), children: rightIcon }))] }));
+    return (jsxRuntime.jsxs("button", { className: cn(baseStyles, variants[variant], sizes[size], fullWidth && "w-full", className), ref: ref, disabled: disabled || loading, ...props, children: [loading && (jsxRuntime.jsxs("svg", { className: "mr-2 -ml-1 w-4 h-4 animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), !loading && leftIcon && (jsxRuntime.jsx("span", { className: cn("flex items-center mr-2", iconSizes[size]), children: leftIcon })), children, !loading && rightIcon && (jsxRuntime.jsx("span", { className: cn("flex items-center ml-2", iconSizes[size]), children: rightIcon }))] }));
 });
 Button.displayName = "Button";
 
@@ -1125,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,
@@ -1190,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)
@@ -1211,6 +1235,7 @@ function useController(props) {
             }
         }
         !isArrayField && control.register(name);
+        _previousNameRef.current = name;
         return () => {
             (isArrayField
                 ? _shouldUnregisterField && !control._state.action
@@ -1565,7 +1590,7 @@ const Modal = ({ isOpen, onClose, title, children, variant = "info", primaryActi
             onClose();
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "flex fixed inset-0 z-50 justify-center items-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 backdrop-blur-sm bg-black/50", onClick: handleOverlayClick }), jsxRuntime.jsxs("div", { className: cn("relative mx-4 w-full max-w-md bg-white rounded-lg shadow-xl transition-all transform", "duration-200 animate-in fade-in-0 zoom-in-95", className), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", children: [jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between p-6 border-b", variantStyles.borderColor), children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("p-2 rounded-full", variantStyles.iconBg), children: variantStyles.icon }), jsxRuntime.jsx("h2", { id: "modal-title", className: cn("text-lg font-semibold", variantStyles.titleColor), children: title })] }), jsxRuntime.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 transition-colors hover:text-gray-600", "aria-label": "Close modal", children: jsxRuntime.jsx(X, { className: "w-5 h-5" }) })] }), jsxRuntime.jsx("div", { className: cn("p-6", contentClassName), children: jsxRuntime.jsx("div", { className: "leading-relaxed text-gray-700", children: error && variant === "error" ? (jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsx("p", { children: error.message }), error.fields && error.fields.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "font-semibold text-gray-900", children: "Erreurs de champ:" }), jsxRuntime.jsx("ul", { className: "mt-2 space-y-1", children: error.fields.map((field, index) => (jsxRuntime.jsxs("li", { className: "text-ews-error", children: ["\u2022 ", field.path, ": ", field.message] }, index))) })] }))] })) : (children) }) }), (primaryAction || secondaryAction) && (jsxRuntime.jsxs("div", { className: "flex justify-end items-center p-6 pt-0 space-x-3", children: [secondaryAction && (jsxRuntime.jsx(Button, { variant: "ghost", onClick: onSecondaryAction || onClose, disabled: isLoading, children: secondaryAction })), primaryAction && (jsxRuntime.jsx(Button, { variant: variant === "error" ? "error" : "primary", onClick: onPrimaryAction, loading: isLoading, children: primaryAction }))] }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex fixed inset-0 z-50 justify-center items-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 backdrop-blur-sm bg-black/50", onClick: handleOverlayClick }), jsxRuntime.jsxs("div", { className: cn("relative mx-4 w-full max-w-md bg-white rounded-lg shadow-xl transition-all transform", "duration-200 animate-in fade-in-0 zoom-in-95", className), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", children: [jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between p-6 border-b", variantStyles.borderColor), children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("p-2 rounded-full", variantStyles.iconBg), children: variantStyles.icon }), jsxRuntime.jsx("h2", { id: "modal-title", className: cn("text-lg font-semibold", variantStyles.titleColor), children: title })] }), jsxRuntime.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 transition-colors hover:text-gray-600", "aria-label": "Close modal", children: jsxRuntime.jsx(X, { className: "w-5 h-5" }) })] }), jsxRuntime.jsx("div", { className: cn("p-6", contentClassName), children: jsxRuntime.jsx("div", { className: "leading-relaxed text-gray-700", children: error && variant === "error" ? (jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsx("p", { children: error.message }), error.fields && error.fields.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "font-semibold text-gray-900", children: "Erreurs de champ:" }), jsxRuntime.jsx("ul", { className: "mt-2 space-y-1", children: error.fields.map((field, index) => (jsxRuntime.jsxs("li", { className: "text-ews-error", children: ["\u2022 ", field.path, ": ", field.message] }, index))) })] }))] })) : (children) }) }), (primaryAction || secondaryAction) && (jsxRuntime.jsxs("div", { className: "flex justify-end items-center p-6 pt-0 space-x-3", children: [secondaryAction && (jsxRuntime.jsx(Button, { variant: "outline", onClick: onSecondaryAction || onClose, disabled: isLoading, children: secondaryAction })), primaryAction && (jsxRuntime.jsx(Button, { variant: variant === "error" ? "error" : "ews-primary", onClick: onPrimaryAction, loading: isLoading, children: primaryAction }))] }))] })] }));
 };
 
 const Logo = ({ size = "md", showTagline: _showTagline = true, iconOnly = false, variant = "normal", className, onClick, }) => {
@@ -1785,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;