@ews-admin/global-design-system 1.13.0 → 1.17.1

package/dist/index.js

@@ -61,6 +61,56 @@ function createEnvConfig(env, overrides) {
     };
 }
 
+exports.SupportedCountry = void 0;
+(function (SupportedCountry) {
+    SupportedCountry["SENEGAL"] = "SENEGAL";
+    SupportedCountry["CHAD"] = "CHAD";
+})(exports.SupportedCountry || (exports.SupportedCountry = {}));
+const REGIONS_BY_COUNTRY = {
+    [exports.SupportedCountry.SENEGAL]: [
+        "Dakar",
+        "Thiès",
+        "Saint-Louis",
+        "Louga",
+        "Fatick",
+        "Tambacounda",
+        "Kolda",
+        "Ziguinchor",
+        "Matam",
+        "Kédougou",
+        "Sédhiou",
+        "Diourbel",
+    ],
+    [exports.SupportedCountry.CHAD]: [
+        "N'Djamena",
+        "Moundou",
+        "Sarh",
+        "Abéché",
+        "Doba",
+        "Pala",
+        "Am Timan",
+        "Mongo",
+        "Faya-Largeau",
+    ],
+};
+/**
+ * Returns the list of regions for a given country.
+ * Matching is case-insensitive; defaults to Senegal when country is unknown.
+ */
+function getRegionsByCountry(country) {
+    const key = country?.toUpperCase();
+    return REGIONS_BY_COUNTRY[key] ?? REGIONS_BY_COUNTRY[exports.SupportedCountry.SENEGAL];
+}
+/**
+ * Returns regions as SelectOption-compatible objects { value, label }.
+ */
+function getRegionOptions(country) {
+    return getRegionsByCountry(country).map((region) => ({
+        value: region,
+        label: region,
+    }));
+}
+
 /**
  * Available country codes supported by the platform
  */
@@ -27378,7 +27428,7 @@ const __iconNode$2X = [
   ],
   ["circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor", key: "kqv944" }]
 ];
-const Tag = createLucideIcon("tag", __iconNode$2X);
+const Tag$1 = createLucideIcon("tag", __iconNode$2X);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -32327,7 +32377,7 @@ var index = /*#__PURE__*/Object.freeze({
     Tablet: Tablet,
     TabletSmartphone: TabletSmartphone,
     Tablets: Tablets,
-    Tag: Tag,
+    Tag: Tag$1,
     Tags: Tags,
     Tally1: Tally1,
     Tally2: Tally2,
@@ -32623,7 +32673,7 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
 });
 Input.displayName = "Input";
 
-const Select = React.forwardRef(({ options = [], value, onChange, placeholder = "Select an option...", label, helperText, error, isError = false, size = "md", disabled = false, required = false, searchable = false, multiple: _multiple = false, selectClassName, containerClassName, dropdownClassName, maxHeight = 200, clearable = false, renderOption, renderValue, ...props }, ref) => {
+const Select = React.forwardRef(({ options = [], value, onChange, placeholder = "Select an option...", label, helperText, error, isError = false, size = "md", disabled = false, required = false, searchable = false, multiple: _multiple = false, selectClassName, containerClassName, dropdownClassName, maxHeight = 200, clearable = false, renderOption, renderValue, renderTrigger, ...props }, ref) => {
     const generatedId = React.useId();
     const selectId = `select-${generatedId}`;
     const hasError = isError || !!error;
@@ -32656,15 +32706,6 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
         const spaceAbove = containerRect.top;
         // Add some buffer (20px) to prevent edge cases
         const buffer = 20;
-        console.log("Position calculation:", {
-            spaceBelow,
-            spaceAbove,
-            dropdownHeight,
-            viewportHeight,
-            containerBottom: containerRect.bottom,
-            shouldOpenTop: spaceBelow < dropdownHeight + buffer &&
-                spaceAbove > dropdownHeight + buffer,
-        });
         // If there's not enough space below but enough space above, position on top
         if (spaceBelow < dropdownHeight + buffer &&
             spaceAbove > dropdownHeight + buffer) {
@@ -32684,13 +32725,6 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
         const spaceBelow = viewportHeight - containerRect.bottom;
         const spaceAbove = containerRect.top;
         const actualDropdownHeight = dropdownRect.height;
-        console.log("Position calculation with element:", {
-            spaceBelow,
-            spaceAbove,
-            actualDropdownHeight,
-            viewportHeight,
-            containerBottom: containerRect.bottom,
-        });
         // If there's not enough space below but enough space above, position on top
         if (spaceBelow < actualDropdownHeight &&
             spaceAbove > actualDropdownHeight) {
@@ -32846,7 +32880,7 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
                         // Text color
                         "text-ews-gray-900", 
                         // Padding for icons
-                        "pr-10", selectClassName), ...props, children: jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: selectedOption ? (renderValue ? (renderValue(selectedOption)) : (jsxRuntime.jsx("span", { className: "truncate", children: selectedOption.label }))) : (jsxRuntime.jsx("span", { className: "text-ews-gray-500", children: placeholder })) }), jsxRuntime.jsxs("div", { className: "flex items-center ml-2 space-x-1", children: [clearable && selectedOption && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "p-1 rounded hover:bg-ews-gray-100", children: jsxRuntime.jsx(X, { className: cn(iconSizeClasses[size], "text-ews-gray-400") }) })), jsxRuntime.jsx(ChevronDown, { className: cn(iconSizeClasses[size], hasError ? "text-ews-error" : "text-ews-gray-400", disabled && "text-ews-gray-300", isOpen && "rotate-180 transition-transform") })] })] }) }), isOpen && (jsxRuntime.jsxs("div", { ref: dropdownRef, role: "listbox", className: cn("absolute z-50 w-full bg-white rounded-md border shadow-lg border-ews-gray-300", "focus:outline-none", dropdownPosition === "top"
+                        "pr-10", selectClassName), ...props, children: jsxRuntime.jsx("div", { className: "flex justify-between items-center", children: renderTrigger ? (renderTrigger()) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: selectedOption ? (renderValue ? (renderValue(selectedOption)) : (jsxRuntime.jsx("span", { className: "truncate", children: selectedOption.label }))) : (jsxRuntime.jsx("span", { className: "text-ews-gray-500", children: placeholder })) }), jsxRuntime.jsxs("div", { className: "flex items-center ml-2 space-x-1", children: [clearable && selectedOption && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "p-1 rounded hover:bg-ews-gray-100", children: jsxRuntime.jsx(X, { className: cn(iconSizeClasses[size], "text-ews-gray-400") }) })), jsxRuntime.jsx(ChevronDown, { className: cn(iconSizeClasses[size], hasError ? "text-ews-error" : "text-ews-gray-400", disabled && "text-ews-gray-300", isOpen && "rotate-180 transition-transform") })] })] })) }) }), isOpen && (jsxRuntime.jsxs("div", { ref: dropdownRef, role: "listbox", className: cn("absolute z-50 w-full bg-white rounded-md border shadow-lg border-ews-gray-300", "focus:outline-none", dropdownPosition === "top"
                             ? "bottom-full mb-1"
                             : "top-full mt-1", dropdownClassName), style: { maxHeight: `${maxHeight}px` }, children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-ews-gray-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Search, { className: "absolute left-3 top-1/2 w-4 h-4 transform -translate-y-1/2 text-ews-gray-400" }), jsxRuntime.jsx(Input, { ref: inputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: "Search options...", leftIcon: jsxRuntime.jsx(Search, { className: "w-4 h-4 text-ews-gray-400" }) })] }) })), jsxRuntime.jsx("div", { className: "overflow-auto py-1", style: { maxHeight: `${maxHeight - (searchable ? 60 : 0)}px` }, children: filteredOptions.length === 0 ? (jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-ews-gray-500", children: searchTerm ? "No options found" : "No options available" })) : (filteredOptions.map((option, index) => {
                                     const isSelected = option.value === value;
@@ -33259,6 +33293,7 @@ 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 ACCEPTED_MIME_TYPES = ["image/jpeg", "image/png", "image/webp"];
 const SIZE_CLASSES = {
     sm: "h-10 w-10",
     md: "h-16 w-16",
@@ -33294,28 +33329,34 @@ function UploadProgressBar({ progress, isLoading, }) {
     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 ProfileImageUpload = ({ imageUrl, altText, readOnly = false, size = "lg", uploadProgress = 0, isLoading = false, showDeleteButton = true, acceptedFormats = [...ACCEPTED_MIME_TYPES], maxFileSizeMB = 5, aspectRatioHint, onFileSelect, onFileSizeExceeded, onInvalidFormat, onDeleteConfirm, deleteConfirmTitle, deleteConfirmMessage, deleteConfirmLabel, cancelLabel, }) => {
     const fileInputRef = React.useRef(null);
     const [isHovered, setIsHovered] = React.useState(false);
     const [showConfirm, setShowConfirm] = React.useState(false);
+    const acceptAttr = acceptedFormats.join(",");
     const handleEditClick = () => fileInputRef.current?.click();
     const handleFileChange = (e) => {
         const file = e.target.files?.[0];
         if (!file)
             return;
+        if (acceptedFormats.indexOf(file.type) === -1) {
+            onInvalidFormat?.();
+            e.target.value = "";
+            return;
+        }
         if (file.size > maxFileSizeMB * 1024 * 1024) {
             onFileSizeExceeded?.();
             e.target.value = "";
             return;
         }
         onFileSelect(file);
-        e.target.value = ""; // allow re-selecting the same file
+        e.target.value = "";
     };
     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 }) })] }));
+    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: acceptAttr, 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 }), aspectRatioHint && (jsxRuntime.jsxs("p", { className: "mt-1 text-xs text-gray-400", children: ["Ratio: ", aspectRatioHint] }))] }), 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, }) => {
@@ -33662,6 +33703,33 @@ const ThemeDebugger = ({ className = "", }) => {
                                     : "bg-gray-200 text-gray-700"}`, children: "MED" })] }), jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2 mt-4", children: [jsxRuntime.jsx("div", { className: "bg-ews-primary text-white p-2 rounded text-center", children: "Primary" }), jsxRuntime.jsx("div", { className: "bg-ews-secondary text-white p-2 rounded text-center", children: "Secondary" }), jsxRuntime.jsx("div", { className: "bg-ews-success text-white p-2 rounded text-center", children: "Success" }), jsxRuntime.jsx("div", { className: "bg-ews-warning text-white p-2 rounded text-center", children: "Warning" })] })] })] }));
 };
 
+function RegionSelect({ country = exports.SupportedCountry.SENEGAL, value, onChange, label, placeholder = "Select a region", error, isError, disabled, required, containerClassName, }) {
+    const options = getRegionOptions(country);
+    return (jsxRuntime.jsx(Select, { options: options, value: value, onChange: (val) => onChange?.(val), label: label, placeholder: placeholder, error: error, isError: isError, disabled: disabled, required: required, searchable: true, containerClassName: containerClassName }));
+}
+
+const Tag = ({ label, variant = "plain", className, }) => {
+    const variantClass = variant === "primary"
+        ? "bg-ews-primary text-white"
+        : variant === "secondary"
+            ? "bg-ews-secondary text-white"
+            : "bg-gray-200 text-gray-800";
+    return (jsxRuntime.jsx("span", { className: cn("inline-block rounded-md px-2.5 py-1 text-sm font-medium", variantClass, className), children: label }));
+};
+
+const DEFAULT_MAX = 3;
+const TagList = ({ items, maxVisible = DEFAULT_MAX, showMoreLabel, showLessLabel, variant = "secondary", className, renderTag, }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const hasMore = items.length > maxVisible;
+    const visible = expanded ? items : items.slice(0, maxVisible);
+    const handleToggle = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setExpanded(prev => !prev);
+    };
+    return (jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [visible.map((label, i) => renderTag ? (renderTag(label, i)) : (jsxRuntime.jsx(Tag, { label: label, variant: variant }, i))), hasMore && !expanded && (jsxRuntime.jsx("span", { className: "text-sm text-gray-400", children: "..." })), hasMore && (jsxRuntime.jsx("button", { onClick: handleToggle, className: "text-xs text-ews-primary hover:underline", children: expanded ? showLessLabel : showMoreLabel }))] }));
+};
+
 const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, specialties: availableSpecialties, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, title = "Medical Specialties", label = "Select Specialties", getSelectedCountText, }) => {
     const [filteredSpecialties, setFilteredSpecialties] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -37425,7 +37493,7 @@ exports.LucideTableRowsSplit = TableRowsSplit;
 exports.LucideTablet = Tablet;
 exports.LucideTabletSmartphone = TabletSmartphone;
 exports.LucideTablets = Tablets;
-exports.LucideTag = Tag;
+exports.LucideTag = Tag$1;
 exports.LucideTags = Tags;
 exports.LucideTally1 = Tally1;
 exports.LucideTally2 = Tally2;
@@ -38301,6 +38369,7 @@ exports.Refrigerator = Refrigerator;
 exports.RefrigeratorIcon = Refrigerator;
 exports.Regex = Regex;
 exports.RegexIcon = Regex;
+exports.RegionSelect = RegionSelect;
 exports.RemoveFormatting = RemoveFormatting;
 exports.RemoveFormattingIcon = RemoveFormatting;
 exports.Repeat = Repeat;
@@ -38873,7 +38942,8 @@ exports.TabletSmartphoneIcon = TabletSmartphone;
 exports.Tablets = Tablets;
 exports.TabletsIcon = Tablets;
 exports.Tag = Tag;
-exports.TagIcon = Tag;
+exports.TagIcon = Tag$1;
+exports.TagList = TagList;
 exports.Tags = Tags;
 exports.TagsIcon = Tags;
 exports.Tally1 = Tally1;
@@ -39316,6 +39386,8 @@ exports.formatNumeric = formatNumeric;
 exports.formatPhoneNumberWithCountryCode = formatPhoneNumberWithCountryCode;
 exports.generateId = generateId;
 exports.getDefaultCountryCode = getDefaultCountryCode;
+exports.getRegionOptions = getRegionOptions;
+exports.getRegionsByCountry = getRegionsByCountry;
 exports.icons = index;
 exports.isValidPhoneNumber = isValidPhoneNumber;
 exports.useDebounce = useDebounce;