@ews-admin/global-design-system 1.1.21 → 1.1.22

package/dist/index.js

@@ -86,6 +86,36 @@ function isValidPhoneNumber(value) {
     const phoneRegex = /^(\+\d{1,17}|\d{1,17})$/;
     return phoneRegex.test(trimmedValue);
 }
+/**
+ * Blood type enum matching backend BloodTypeEnum values
+ */
+exports.BloodType = void 0;
+(function (BloodType) {
+    BloodType["A_POSITIVE"] = "A+";
+    BloodType["A_NEGATIVE"] = "A-";
+    BloodType["B_POSITIVE"] = "B+";
+    BloodType["B_NEGATIVE"] = "B-";
+    BloodType["AB_POSITIVE"] = "AB+";
+    BloodType["AB_NEGATIVE"] = "AB-";
+    BloodType["O_POSITIVE"] = "O+";
+    BloodType["O_NEGATIVE"] = "O-";
+    BloodType["UNKNOWN"] = "UNKNOWN";
+})(exports.BloodType || (exports.BloodType = {}));
+/**
+ * Ordered list of all blood type values.
+ * Use this to build select/dropdown options.
+ */
+const BLOOD_TYPES = [
+    exports.BloodType.A_POSITIVE,
+    exports.BloodType.A_NEGATIVE,
+    exports.BloodType.B_POSITIVE,
+    exports.BloodType.B_NEGATIVE,
+    exports.BloodType.AB_POSITIVE,
+    exports.BloodType.AB_NEGATIVE,
+    exports.BloodType.O_POSITIVE,
+    exports.BloodType.O_NEGATIVE,
+    exports.BloodType.UNKNOWN,
+];
 
 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";
@@ -229,11 +259,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$c = [
+const __iconNode$e = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$c);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$e);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -243,8 +273,8 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$c);
  */
 
 
-const __iconNode$b = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$b);
+const __iconNode$d = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$d);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -254,8 +284,8 @@ const Check = createLucideIcon("check", __iconNode$b);
  */
 
 
-const __iconNode$a = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$a);
+const __iconNode$c = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$c);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -265,12 +295,12 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$b = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -280,11 +310,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
  */
 
 
-const __iconNode$8 = [
+const __iconNode$a = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$8);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$a);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -294,7 +324,7 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$8);
  */
 
 
-const __iconNode$7 = [
+const __iconNode$9 = [
   [
     "path",
     {
@@ -312,7 +342,7 @@ const __iconNode$7 = [
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
 ];
-const EyeOff = createLucideIcon("eye-off", __iconNode$7);
+const EyeOff = createLucideIcon("eye-off", __iconNode$9);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -322,7 +352,7 @@ const EyeOff = createLucideIcon("eye-off", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$8 = [
   [
     "path",
     {
@@ -332,7 +362,7 @@ const __iconNode$6 = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$6);
+const Eye = createLucideIcon("eye", __iconNode$8);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -342,7 +372,7 @@ const Eye = createLucideIcon("eye", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$7 = [
   [
     "path",
     {
@@ -351,7 +381,7 @@ const __iconNode$5 = [
     }
   ]
 ];
-const Heart = createLucideIcon("heart", __iconNode$5);
+const Heart = createLucideIcon("heart", __iconNode$7);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -361,11 +391,31 @@ const Heart = createLucideIcon("heart", __iconNode$5);
  */
 
 
-const __iconNode$4 = [
+const __iconNode$6 = [
+  [
+    "path",
+    {
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      key: "1a8usu"
+    }
+  ],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
+];
+const Pencil = createLucideIcon("pencil", __iconNode$6);
+
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$4);
+const Search = createLucideIcon("search", __iconNode$5);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -375,14 +425,29 @@ const Search = createLucideIcon("search", __iconNode$4);
  */
 
 
-const __iconNode$3 = [
+const __iconNode$4 = [
   ["path", { d: "M11 2v2", key: "1539x4" }],
   ["path", { d: "M5 2v2", key: "1yf1q8" }],
   ["path", { d: "M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1", key: "rb5t3r" }],
   ["path", { d: "M8 15a6 6 0 0 0 12 0v-3", key: "x18d4x" }],
   ["circle", { cx: "20", cy: "10", r: "2", key: "ts1r5v" }]
 ];
-const Stethoscope = createLucideIcon("stethoscope", __iconNode$3);
+const Stethoscope = createLucideIcon("stethoscope", __iconNode$4);
+
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$3 = [
+  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
+];
+const Trash = createLucideIcon("trash", __iconNode$3);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -457,7 +522,7 @@ const UserIcon = ({ size = 24, color = "currentColor", className = "", ...props
     return jsxRuntime.jsx(User, { size: size, color: color, className: className, ...props });
 };
 
-const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, required = false, countryCodeSelect, id, type = "text", ...props }, ref) => {
+const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, required = false, countryCodeSelect, leftAddon, rightAddon, id, type = "text", ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
     const hasError = Boolean(error);
     const actualVariant = hasError ? "error" : variant;
@@ -516,7 +581,7 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
                                                 countryCodeSelect.onChange(item.code);
                                                 setIsDropdownOpen(false);
                                             }, className: cn("px-3 py-2 text-sm cursor-pointer transition-colors", isSelected && "bg-ews-primary text-white", !isSelected && "hover:bg-ews-gray-50"), children: [jsxRuntime.jsx("span", { className: "font-medium", children: item.code }), item.country && (jsxRuntime.jsx("span", { className: cn("ml-2 text-xs", isSelected ? "text-white/80" : "text-ews-gray-500"), children: item.country }))] }, item.code));
-                                    }) }))] }) })), leftIcon && !countryCodeSelect && (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], countryCodeSelect && "pl-24", leftIcon && !countryCodeSelect && "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 }))] }));
+                                    }) }))] }) })), leftIcon && !countryCodeSelect && !leftAddon && (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 }) })), leftAddon && !countryCodeSelect && !leftIcon && (jsxRuntime.jsx("div", { className: "flex absolute inset-y-0 left-0 items-center pointer-events-none overflow-hidden rounded-l-md", children: jsxRuntime.jsx("span", { className: "flex items-center h-full px-3 text-sm font-medium whitespace-nowrap bg-ews-gray-50 border-r border-ews-gray-300 text-ews-gray-600", children: leftAddon }) })), jsxRuntime.jsx("input", { id: inputId, type: actualType, className: cn(baseStyles, variants[actualVariant], sizes[size], countryCodeSelect && "pl-24", leftIcon && !countryCodeSelect && !leftAddon && "pl-10", leftAddon && !countryCodeSelect && !leftIcon && "pl-16", (rightIcon || shouldShowPasswordToggle) && "pr-10", rightAddon && !rightIcon && !shouldShowPasswordToggle && "pr-16", className), ref: ref, ...props }), rightAddon && !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: "text-sm font-medium text-ews-gray-500", children: rightAddon }) })), 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";
 
@@ -1712,6 +1777,65 @@ const Modal = ({ isOpen, onClose, title, children, variant = "info", size = "md"
     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 w-full bg-white rounded-lg shadow-xl transition-all transform", "duration-200 animate-in fade-in-0 zoom-in-95", getSizeClasses(), "mx-4", 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 SIZE_CLASSES = {
+    sm: "h-10 w-10",
+    md: "h-16 w-16",
+    lg: "h-32 w-32",
+};
+const INDICATOR_CLASSES = {
+    sm: "h-2 w-2",
+    md: "h-4 w-4",
+    lg: "h-8 w-8",
+};
+function UploadProgressBar({ progress, isLoading, }) {
+    const [visible, setVisible] = React.useState(false);
+    React.useEffect(() => {
+        if (isLoading) {
+            setVisible(true);
+            return;
+        }
+        // isLoading just turned false
+        if (progress >= 100) {
+            setVisible(true);
+            const t = setTimeout(() => setVisible(false), 1000);
+            return () => clearTimeout(t);
+        }
+        // Legacy path (no isLoading prop): driven purely by progress
+        if (progress > 0 && progress < 100) {
+            setVisible(true);
+            return;
+        }
+        setVisible(false);
+    }, [progress, isLoading]);
+    if (!visible)
+        return null;
+    const indeterminate = isLoading && progress === 0;
+    return (jsxRuntime.jsx("div", { className: "mt-2 h-1.5 w-32 rounded-full bg-gray-200", children: jsxRuntime.jsx("div", { className: cn("h-full rounded-full bg-ews-primary transition-all duration-300", indeterminate && "animate-pulse"), style: { width: indeterminate ? "35%" : `${progress}%` } }) }));
+}
+const ProfileImageUpload = ({ imageUrl, altText, readOnly = false, size = "lg", uploadProgress = 0, isLoading = false, showDeleteButton = true, accept = "image/*", maxFileSizeMB = 3, onFileSelect, onFileSizeExceeded, onDeleteConfirm, deleteConfirmTitle, deleteConfirmMessage, deleteConfirmLabel, cancelLabel, }) => {
+    const fileInputRef = React.useRef(null);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [showConfirm, setShowConfirm] = React.useState(false);
+    const handleEditClick = () => fileInputRef.current?.click();
+    const handleFileChange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        if (file.size > maxFileSizeMB * 1024 * 1024) {
+            onFileSizeExceeded?.();
+            e.target.value = "";
+            return;
+        }
+        onFileSelect(file);
+        e.target.value = ""; // allow re-selecting the same file
+    };
+    const handleConfirmDelete = () => {
+        setShowConfirm(false);
+        onDeleteConfirm();
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-center", children: [jsxRuntime.jsxs("div", { className: "relative", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsxRuntime.jsx("img", { src: imageUrl, alt: altText, className: cn("rounded-full border-4 border-white object-cover", SIZE_CLASSES[size]) }), jsxRuntime.jsx("div", { className: cn("absolute bottom-0 right-0 rounded-full border-4 border-white bg-green-400", INDICATOR_CLASSES[size]) }), jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: accept, className: "hidden", onChange: handleFileChange }), isHovered && !readOnly && !isLoading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleEditClick, className: "absolute left-0 top-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-ews-primary transition-colors hover:bg-ews-secondary", "aria-label": "Edit profile image", children: jsxRuntime.jsx(Pencil, { className: "h-4 w-4 text-white" }) }), showDeleteButton && (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowConfirm(true), className: "absolute left-0 top-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-red-600 transition-colors hover:bg-red-700", "aria-label": "Delete profile image", children: jsxRuntime.jsx(Trash, { className: "h-4 w-4 text-white" }) }))] }))] }), jsxRuntime.jsx(UploadProgressBar, { progress: uploadProgress, isLoading: isLoading })] }), jsxRuntime.jsx(Modal, { isOpen: showConfirm, onClose: () => setShowConfirm(false), title: deleteConfirmTitle, variant: "error", size: "sm", primaryAction: deleteConfirmLabel, secondaryAction: cancelLabel, onPrimaryAction: handleConfirmDelete, onSecondaryAction: () => setShowConfirm(false), children: jsxRuntime.jsx("p", { children: deleteConfirmMessage }) })] }));
+};
+
 const DropdownMultiSelect = ({ options, name, control, placeholder = "Select options", searchPlaceholder = "Search...", onChange, value: controlledValue, defaultValue, onValidate, disabled = false, error, label, className, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [searchTerm, setSearchTerm] = React.useState("");
@@ -1999,6 +2123,7 @@ const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesCh
 };
 
 exports.ArrowRight = ArrowRight;
+exports.BLOOD_TYPES = BLOOD_TYPES;
 exports.Button = Button;
 exports.Check = Check;
 exports.DoctorIcon = DoctorIcon;
@@ -2009,6 +2134,7 @@ exports.Logo = Logo;
 exports.Modal = Modal;
 exports.MultiSearchAutocomplete = MultiSearchAutocomplete;
 exports.PatientIcon = PatientIcon;
+exports.ProfileImageUpload = ProfileImageUpload;
 exports.Search = Search;
 exports.SearchAutocomplete = SearchAutocomplete;
 exports.Select = Select;