@ews-admin/global-design-system 1.1.6 → 1.1.8

package/dist/index.js

@@ -207,11 +207,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$b = [
+const __iconNode$c = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$b);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$c);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -221,8 +221,19 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$b);
  */
 
 
-const __iconNode$a = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$a);
+const __iconNode$b = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$b);
+
+/**
+ * @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$a = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$a);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -424,7 +435,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, 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, 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;
@@ -449,10 +460,237 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
         md: "h-5 w-5",
         lg: "h-6 w-6",
     };
-    return (jsxRuntime.jsxs("div", { className: cn("space-y-1", fullWidth ? "w-full" : "w-auto"), children: [label && (jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-ews-gray-700", children: label })), jsxRuntime.jsxs("div", { className: "relative", children: [leftIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center 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: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400", iconSizes[size]), children: rightIcon }) })), shouldShowPasswordToggle && (jsxRuntime.jsx("button", { type: "button", className: "absolute inset-y-0 right-0 pr-3 flex items-center", onClick: () => setShowPassword(!showPassword), tabIndex: -1, children: jsxRuntime.jsx("span", { className: cn("text-ews-gray-400 hover:text-ews-gray-600 transition-colors", 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 }))] }));
+    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";
 
+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 generatedId = React.useId();
+    const selectId = `select-${generatedId}`;
+    const hasError = isError || !!error;
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const [focusedIndex, setFocusedIndex] = React.useState(-1);
+    const [dropdownPosition, setDropdownPosition] = React.useState("bottom");
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    const optionRefs = React.useRef([]);
+    // Find selected option
+    const selectedOption = options.find((option) => option.value === value);
+    // Filter options based on search term
+    const filteredOptions = searchable
+        ? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
+        : options;
+    // Calculate dropdown position based on available space
+    const calculateDropdownPosition = () => {
+        if (!containerRef.current)
+            return;
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        // More accurate height calculation
+        const optionHeight = 40; // Approximate height per option
+        const searchHeight = searchable ? 60 : 0;
+        const padding = 16; // py-1 = 8px top + 8px bottom
+        const dropdownHeight = Math.min(maxHeight, filteredOptions.length * optionHeight + searchHeight + padding);
+        const spaceBelow = viewportHeight - containerRect.bottom;
+        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) {
+            setDropdownPosition("top");
+        }
+        else {
+            setDropdownPosition("bottom");
+        }
+    };
+    // Alternative calculation using actual dropdown element when available
+    const calculateDropdownPositionWithElement = () => {
+        if (!containerRef.current || !dropdownRef.current)
+            return;
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const dropdownRect = dropdownRef.current.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        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) {
+            setDropdownPosition("top");
+        }
+        else {
+            setDropdownPosition("bottom");
+        }
+    };
+    // Handle click outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSearchTerm("");
+                setFocusedIndex(-1);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    // Calculate position when dropdown opens
+    React.useEffect(() => {
+        if (isOpen) {
+            // First calculation based on estimated height
+            calculateDropdownPosition();
+            // Second calculation after dropdown is rendered with actual height
+            requestAnimationFrame(() => {
+                calculateDropdownPositionWithElement();
+            });
+        }
+    }, [isOpen, filteredOptions.length, searchable, maxHeight]);
+    // Recalculate position on window resize
+    React.useEffect(() => {
+        const handleResize = () => {
+            if (isOpen) {
+                calculateDropdownPosition();
+            }
+        };
+        window.addEventListener("resize", handleResize);
+        window.addEventListener("scroll", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            window.removeEventListener("scroll", handleResize);
+        };
+    }, [isOpen]);
+    // Handle keyboard navigation
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                else {
+                    setFocusedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+                }
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                else {
+                    setFocusedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+                }
+                break;
+            case "Enter":
+                event.preventDefault();
+                if (isOpen &&
+                    focusedIndex >= 0 &&
+                    focusedIndex < filteredOptions.length) {
+                    handleSelect(filteredOptions[focusedIndex]);
+                }
+                else if (!isOpen) {
+                    setIsOpen(true);
+                }
+                break;
+            case "Escape":
+                event.preventDefault();
+                setIsOpen(false);
+                setSearchTerm("");
+                setFocusedIndex(-1);
+                break;
+            case "Tab":
+                setIsOpen(false);
+                setSearchTerm("");
+                setFocusedIndex(-1);
+                break;
+        }
+    };
+    // Handle option selection
+    const handleSelect = (option) => {
+        if (option.disabled)
+            return;
+        onChange?.(option.value, option);
+        setIsOpen(false);
+        setSearchTerm("");
+        setFocusedIndex(-1);
+    };
+    // Handle clear
+    const handleClear = (event) => {
+        event.stopPropagation();
+        onChange?.(undefined, {});
+    };
+    // Handle toggle
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        setIsOpen(!isOpen);
+        if (!isOpen && searchable) {
+            setTimeout(() => inputRef.current?.focus(), 0);
+        }
+    };
+    // Scroll focused option into view
+    React.useEffect(() => {
+        if (focusedIndex >= 0 && optionRefs.current[focusedIndex]) {
+            optionRefs.current[focusedIndex]?.scrollIntoView({
+                block: "nearest",
+            });
+        }
+    }, [focusedIndex]);
+    const sizeClasses = {
+        sm: "text-sm px-3 py-1.5",
+        md: "text-sm px-3 py-2",
+        lg: "text-base px-4 py-2.5",
+    };
+    const iconSizeClasses = {
+        sm: "w-4 h-4",
+        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(
+                        // 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
+                        sizeClasses[size], 
+                        // Border and focus states
+                        hasError
+                            ? "border-ews-error focus:border-ews-error focus:ring-ews-error/20"
+                            : "border-ews-gray-300 focus:border-ews-primary focus:ring-ews-primary/20", 
+                        // Hover state
+                        !disabled && !hasError && "hover:border-ews-gray-400", 
+                        // 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"
+                            ? "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...", className: "py-2 pr-3 pl-9 w-full text-sm rounded-md border border-ews-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ews-primary/20 focus:border-ews-primary" })] }) })), 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;
+                                    const isFocused = index === focusedIndex;
+                                    return (jsxRuntime.jsx("div", { ref: (el) => (optionRefs.current[index] = el), role: "option", "aria-selected": isSelected, onClick: () => handleSelect(option), className: cn("px-3 py-2 text-sm cursor-pointer transition-colors", isSelected && "bg-ews-primary text-white", !isSelected && isFocused && "bg-ews-gray-100", !isSelected && !isFocused && "hover:bg-ews-gray-50", option.disabled && "opacity-50 cursor-not-allowed"), children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntime.jsx("span", { className: "truncate", children: option.label })) }, `${String(option.value)}-${index}`));
+                                })) })] }))] }), (helperText || error) && (jsxRuntime.jsx("div", { className: "mt-1", children: error ? (jsxRuntime.jsx("p", { className: "text-sm text-ews-error", children: error })) : (jsxRuntime.jsx("p", { className: "text-sm text-ews-gray-500", children: helperText })) }))] }));
+});
+Select.displayName = "Select";
+
 const DEFAULT_DELAY = 500;
 /**
  * A custom hook that debounces a value
@@ -501,6 +739,506 @@ function useDebouncedCallback(callback, delay) {
     return debouncedCallback;
 }
 
+var isCheckBoxInput = (element) => element.type === 'checkbox';
+
+var isDateObject = (value) => value instanceof Date;
+
+var isNullOrUndefined = (value) => value == null;
+
+const isObjectType = (value) => typeof value === 'object';
+var isObject = (value) => !isNullOrUndefined(value) &&
+    !Array.isArray(value) &&
+    isObjectType(value) &&
+    !isDateObject(value);
+
+var getEventValue = (event) => isObject(event) && event.target
+    ? isCheckBoxInput(event.target)
+        ? event.target.checked
+        : event.target.value
+    : event;
+
+var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
+
+var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+
+var isPlainObject = (tempObject) => {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+};
+
+var isWeb = typeof window !== 'undefined' &&
+    typeof window.HTMLElement !== '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) {
+        copy = new Date(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]);
+                }
+            }
+        }
+    }
+    else {
+        return data;
+    }
+    return copy;
+}
+
+var isKey = (value) => /^\w*$/.test(value);
+
+var isUndefined = (val) => val === undefined;
+
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+
+var get = (object, path, defaultValue) => {
+    if (!path || !isObject(object)) {
+        return defaultValue;
+    }
+    const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+    return isUndefined(result) || result === object
+        ? isUndefined(object[path])
+            ? defaultValue
+            : object[path]
+        : result;
+};
+
+var isBoolean = (value) => typeof value === 'boolean';
+
+var set = (object, path, value) => {
+    let index = -1;
+    const tempPath = isKey(path) ? [path] : stringToPath(path);
+    const length = tempPath.length;
+    const lastIndex = length - 1;
+    while (++index < length) {
+        const key = tempPath[index];
+        let newValue = value;
+        if (index !== lastIndex) {
+            const objValue = object[key];
+            newValue =
+                isObject(objValue) || Array.isArray(objValue)
+                    ? objValue
+                    : !isNaN(+tempPath[index + 1])
+                        ? []
+                        : {};
+        }
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+            return;
+        }
+        object[key] = newValue;
+        object = object[key];
+    }
+};
+
+const EVENTS = {
+    BLUR: 'blur',
+    CHANGE: 'change',
+};
+const VALIDATION_MODE = {
+    all: 'all',
+};
+
+const HookFormContext = React.createContext(null);
+HookFormContext.displayName = 'HookFormContext';
+/**
+ * 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 useFormContext = () => React.useContext(HookFormContext);
+
+var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
+    const result = {
+        defaultValues: control._defaultValues,
+    };
+    for (const key in formState) {
+        Object.defineProperty(result, key, {
+            get: () => {
+                const _key = key;
+                if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
+                    control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
+                }
+                localProxyFormState && (localProxyFormState[_key] = true);
+                return formState[_key];
+            },
+        });
+    }
+    return result;
+};
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+/**
+ * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
+ *
+ * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, handleSubmit, control } = useForm({
+ *     defaultValues: {
+ *     firstName: "firstName"
+ *   }});
+ *   const { dirtyFields } = useFormState({
+ *     control
+ *   });
+ *   const onSubmit = (data) => console.log(data);
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input {...register("firstName")} placeholder="First Name" />
+ *       {dirtyFields.firstName && <p>Field is dirty.</p>}
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+function useFormState(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,
+        isLoading: false,
+        dirtyFields: false,
+        touchedFields: false,
+        validatingFields: false,
+        isValidating: false,
+        isValid: false,
+        errors: false,
+    });
+    useIsomorphicLayoutEffect(() => control._subscribe({
+        name,
+        formState: _localProxyFormState.current,
+        exact,
+        callback: (formState) => {
+            !disabled &&
+                updateFormState({
+                    ...control._formState,
+                    ...formState,
+                });
+        },
+    }), [name, disabled, exact]);
+    React.useEffect(() => {
+        _localProxyFormState.current.isValid && control._setValid(true);
+    }, [control]);
+    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+}
+
+var isString = (value) => typeof value === 'string';
+
+var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
+    if (isString(names)) {
+        return get(formValues, names, defaultValue);
+    }
+    if (Array.isArray(names)) {
+        return names.map((fieldName) => (get(formValues, fieldName)));
+    }
+    return formValues;
+};
+
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
+        return true;
+    }
+    _internal_visited.add(object1);
+    _internal_visited.add(object2);
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!keys2.includes(key)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
+                ? !deepEqual(val1, val2, _internal_visited)
+                : val1 !== val2) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+/**
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ *
+ * @example
+ * ```tsx
+ * const { control } = useForm();
+ * const values = useWatch({
+ *   name: "fieldName"
+ *   control,
+ * })
+ * ```
+ */
+function useWatch(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);
+    _compute.current = compute;
+    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);
+                }
+            }
+        },
+    }), [control, disabled, name, exact]);
+    React.useEffect(() => control._removeUnmounted());
+    return value;
+}
+
+/**
+ * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns field properties, field and form state. {@link UseControllerReturn}
+ *
+ * @example
+ * ```tsx
+ * function Input(props) {
+ *   const { field, fieldState, formState } = useController(props);
+ *   return (
+ *     <div>
+ *       <input {...field} placeholder={props.name} />
+ *       <p>{fieldState.isTouched && "Touched"}</p>
+ *       <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useController(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: true,
+    });
+    const formState = useFormState({
+        control,
+        name,
+        exact: true,
+    });
+    const _props = React.useRef(props);
+    const _registerProps = React.useRef(control.register(name, {
+        ...props.rules,
+        value,
+        ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
+    }));
+    _props.current = props;
+    const fieldState = React.useMemo(() => Object.defineProperties({}, {
+        invalid: {
+            enumerable: true,
+            get: () => !!get(formState.errors, name),
+        },
+        isDirty: {
+            enumerable: true,
+            get: () => !!get(formState.dirtyFields, name),
+        },
+        isTouched: {
+            enumerable: true,
+            get: () => !!get(formState.touchedFields, name),
+        },
+        isValidating: {
+            enumerable: true,
+            get: () => !!get(formState.validatingFields, name),
+        },
+        error: {
+            enumerable: true,
+            get: () => get(formState.errors, name),
+        },
+    }), [formState, name]);
+    const onChange = React.useCallback((event) => _registerProps.current.onChange({
+        target: {
+            value: getEventValue(event),
+            name: name,
+        },
+        type: EVENTS.CHANGE,
+    }), [name]);
+    const onBlur = React.useCallback(() => _registerProps.current.onBlur({
+        target: {
+            value: get(control._formValues, name),
+            name: name,
+        },
+        type: EVENTS.BLUR,
+    }), [name, control._formValues]);
+    const ref = React.useCallback((elm) => {
+        const field = get(control._fields, name);
+        if (field && elm) {
+            field._f.ref = {
+                focus: () => elm.focus && elm.focus(),
+                select: () => elm.select && elm.select(),
+                setCustomValidity: (message) => elm.setCustomValidity(message),
+                reportValidity: () => elm.reportValidity(),
+            };
+        }
+    }, [control._fields, name]);
+    const field = React.useMemo(() => ({
+        name,
+        value,
+        ...(isBoolean(disabled) || formState.disabled
+            ? { disabled: formState.disabled || disabled }
+            : {}),
+        onChange,
+        onBlur,
+        ref,
+    }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
+    React.useEffect(() => {
+        const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+        control.register(name, {
+            ..._props.current.rules,
+            ...(isBoolean(_props.current.disabled)
+                ? { disabled: _props.current.disabled }
+                : {}),
+        });
+        const updateMounted = (name, value) => {
+            const field = get(control._fields, name);
+            if (field && field._f) {
+                field._f.mount = value;
+            }
+        };
+        updateMounted(name, true);
+        if (_shouldUnregisterField) {
+            const value = cloneObject(get(control._options.defaultValues, name));
+            set(control._defaultValues, name, value);
+            if (isUndefined(get(control._formValues, name))) {
+                set(control._formValues, name, value);
+            }
+        }
+        !isArrayField && control.register(name);
+        return () => {
+            (isArrayField
+                ? _shouldUnregisterField && !control._state.action
+                : _shouldUnregisterField)
+                ? control.unregister(name)
+                : updateMounted(name, false);
+        };
+    }, [name, control, isArrayField, shouldUnregister]);
+    React.useEffect(() => {
+        control._setDisabledField({
+            disabled,
+            name,
+        });
+    }, [disabled, name, control]);
+    return React.useMemo(() => ({
+        field,
+        formState,
+        fieldState,
+    }), [field, formState, fieldState]);
+}
+
+function useSelectField({ name, control, options: _options, rules, defaultValue, }) {
+    const { field, fieldState: { error, invalid }, } = useController({
+        name,
+        control,
+        rules,
+        defaultValue,
+    });
+    const selectProps = {
+        value: field.value,
+        onChange: (value) => field.onChange(value),
+        isError: invalid,
+        error: error?.message,
+    };
+    return {
+        selectProps,
+        field,
+        error,
+        invalid,
+    };
+}
+
 function SearchAutocomplete({ onSelect, selectedId, searchFunction, getEntityById, getDisplayValue, getSecondaryText, placeholder, icon = Search, disabled = false, minSearchLength = 2, debounceTime = 300, error, }) {
     const [searchTerm, setSearchTerm] = React.useState("");
     const [entities, setEntities] = React.useState([]);
@@ -630,7 +1368,7 @@ function SearchAutocomplete({ onSelect, selectedId, searchFunction, getEntityByI
                     : "No results found. Try a different search term." })), isLoading && showDropdown && (jsxRuntime.jsx("div", { className: "absolute z-10 p-4 mt-1 w-full text-center text-gray-500 bg-white rounded-md shadow-lg", children: jsxRuntime.jsxs("div", { className: "flex justify-center items-center", children: [jsxRuntime.jsx("div", { className: "mr-2 w-4 h-4 rounded-full border-b-2 animate-spin border-ews-primary" }), "Loading..."] }) }))] }));
 }
 
-function MultiSearchAutocomplete({ items, selectedItems, onSelectionChange, onSearch, getEntityById, getPrimaryText, getSecondaryText, placeholder, disabled = false, loading = false, multiple = true, className, renderSelectedItem, renderListItem, keepOpenOnSelect = true, error, minSearchLength = 2, debounceTime = 300, }) {
+function MultiSearchAutocomplete({ items, selectedItems, onSelectionChange, onSearch, getEntityById: _getEntityById, getPrimaryText, getSecondaryText, placeholder, disabled = false, loading = false, multiple = true, className, renderSelectedItem, renderListItem, keepOpenOnSelect = true, error, minSearchLength = 2, debounceTime = 300, }) {
     const [searchTerm, setSearchTerm] = React.useState("");
     const [isOpen, setIsOpen] = React.useState(false);
     const [filteredItems, setFilteredItems] = React.useState(items);
@@ -814,7 +1552,7 @@ const Modal = ({ isOpen, onClose, title, children, variant = "info", primaryActi
     return (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: handleOverlayClick }), jsxRuntime.jsxs("div", { className: cn("relative w-full max-w-md mx-4 bg-white rounded-lg shadow-xl transform transition-all", "animate-in fade-in-0 zoom-in-95 duration-200", 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 hover:text-gray-600 transition-colors", "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: "text-gray-700 leading-relaxed", 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 items-center justify-end space-x-3 p-6 pt-0", 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 }))] }))] })] }));
 };
 
-const Logo = ({ size = "md", showTagline = true, iconOnly = false, variant = "normal", className, onClick, }) => {
+const Logo = ({ size = "md", showTagline: _showTagline = true, iconOnly = false, variant = "normal", className, onClick, }) => {
     const sizes = {
         sm: "h-8",
         md: "h-12",
@@ -933,6 +1671,21 @@ const ThemeToggle = ({ className }) => {
                             : "text-gray-600 hover:text-gray-900"}`, children: "MED" })] })] }));
 };
 
+const ThemeDebugger = ({ className = "", }) => {
+    const { theme, themeConfig, setTheme } = useTheme();
+    const getComputedStyleValue = (property) => {
+        if (typeof window !== "undefined") {
+            return getComputedStyle(document.documentElement).getPropertyValue(property);
+        }
+        return "N/A";
+    };
+    return (jsxRuntime.jsxs("div", { className: `p-4 border rounded-lg bg-gray-50 ${className}`, children: [jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-4", children: "Theme Debugger" }), jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Current Theme:" }), " ", theme] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Theme Config:" }), jsxRuntime.jsx("pre", { className: "text-xs bg-gray-100 p-2 rounded mt-1", children: JSON.stringify(themeConfig, null, 2) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "CSS Variables:" }), jsxRuntime.jsxs("div", { className: "text-xs space-y-1 mt-1", children: [jsxRuntime.jsxs("div", { children: ["--ews-primary: ", getComputedStyleValue("--ews-primary")] }), jsxRuntime.jsxs("div", { children: ["--ews-secondary: ", getComputedStyleValue("--ews-secondary")] }), jsxRuntime.jsxs("div", { children: ["--ews-primary-hover:", " ", getComputedStyleValue("--ews-primary-hover")] }), jsxRuntime.jsxs("div", { children: ["--ews-secondary-hover:", " ", getComputedStyleValue("--ews-secondary-hover")] })] })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Data Theme Attribute:" }), " ", document.documentElement.getAttribute("data-theme")] }), jsxRuntime.jsxs("div", { className: "flex space-x-2", children: [jsxRuntime.jsx("button", { onClick: () => setTheme("PROMED"), className: `px-3 py-1 text-xs rounded ${theme === "PROMED"
+                                    ? "bg-ews-primary text-white"
+                                    : "bg-gray-200 text-gray-700"}`, children: "PROMED" }), jsxRuntime.jsx("button", { onClick: () => setTheme("MED"), className: `px-3 py-1 text-xs rounded ${theme === "MED"
+                                    ? "bg-ews-primary text-white"
+                                    : "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" })] })] })] }));
+};
+
 const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, }) => {
     const [specialties, setSpecialties] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -1004,7 +1757,9 @@ exports.MultiSearchAutocomplete = MultiSearchAutocomplete;
 exports.PatientIcon = PatientIcon;
 exports.Search = Search;
 exports.SearchAutocomplete = SearchAutocomplete;
+exports.Select = Select;
 exports.SpecialtySearchAutocomplete = SpecialtySearchAutocomplete;
+exports.ThemeDebugger = ThemeDebugger;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeToggle = ThemeToggle;
 exports.UserIcon = UserIcon;
@@ -1015,5 +1770,6 @@ exports.formatDate = formatDate;
 exports.generateId = generateId;
 exports.useDebounce = useDebounce;
 exports.useDebouncedCallback = useDebouncedCallback;
+exports.useSelectField = useSelectField;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map