nexaas-ui-components 1.0.52 → 1.0.53

package/dist/index.cjs

@@ -75,23 +75,27 @@ var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
 var sizes = {
   xxs: {
     text: "h-[18px]",
-    icon: "text-[16px]"
+    icon: "text-[12px] leading-3"
+  },
+  xxsm: {
+    text: "h-6 min-w-6 max-w-6",
+    icon: "text-[12px] leading-3"
   },
   xs: {
     text: "h-8 min-w-8 max-w-20",
-    icon: "text-[16px]"
+    icon: "text-[16px] leading-4"
   },
   sm: {
     text: "h-[32px] text-[12px]",
-    icon: "text-[12px]"
+    icon: "text-[12px] leading-3"
   },
   md: {
     text: "h-[38px]",
-    icon: "text-[20px]"
+    icon: "text-[20px] leading-5"
   },
   lg: {
     text: "h-[46px]",
-    icon: "text-[20px]"
+    icon: "text-[20px] leading-5"
   }
 };
 var variants = {
@@ -99,7 +103,7 @@ var variants = {
     text: "bg-gradient-to-b from-[#FF4D8B] to-[#DA3063] text-white shadow-[0_2px_6px_0_rgba(218,48,99,0.25)] hover:from-[#ff4d84] hover:to-[#df4573] active:from-[#ae264f] active:to-[#ae264f] disabled:opacity-50 disabled:shadow-none active:shadow-none disabled:hover:from-[#FF4D8B] disabled:hover:to-[#DA3063]"
   },
   secondary: {
-    text: "shadow-button bg-surface border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:shadow-none disabled:text-neutral-400 disabled:opacity-50"
+    text: "shadow-button bg-surface border-[0.5px] border-neutral-300 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:bg-neutral-200 active:shadow-none disabled:text-neutral-400 disabled:opacity-50"
   },
   icon: {
     text: "shadow-button gap-1 bg-white border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-[#f5f5f5] hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
@@ -136,6 +140,9 @@ var variants = {
   },
   dangerLight: {
     text: "active:shadow-none shadow-red-sm text-danger-500 font-bold bg-white border-[0.5px] border-danger-500 hover:bg-dangerous-100 active:bg-danger-500 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-danger-500"
+  },
+  ghost: {
+    text: "bg-transparent hover:bg-neutral-100 !rounded-full text-paragraph active:bg-neutral-200 disabled:opacity-50"
   }
 };
 var paddingConfig = {
@@ -143,6 +150,10 @@ var paddingConfig = {
     normal: "",
     icon: ""
   },
+  xxsm: {
+    normal: "p-[6px]",
+    icon: "p-[6px]"
+  },
   xs: {
     normal: "p-2",
     icon: "p-2"
@@ -750,6 +761,18 @@ var DatePickerInput = React5.forwardRef(
           control,
           name,
           render: ({ field }) => {
+            const normalizeDate = (value) => {
+              if (!value) return null;
+              if (value instanceof Date) {
+                return isNaN(value.getTime()) ? null : value.toISOString();
+              }
+              if (typeof value === "string") {
+                const parsed = new Date(value);
+                return isNaN(parsed.getTime()) ? null : parsed.toISOString();
+              }
+              return null;
+            };
+            const normalizedValue = normalizeDate(field.value);
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -785,7 +808,7 @@ var DatePickerInput = React5.forwardRef(
                       outOfRangeMessage: "Data n\xE3o permitida",
                       invalidDateMessage: "Data inv\xE1lida",
                       onError: () => setInvalidDate(true),
-                      defaultValue: field.value,
+                      defaultValue: normalizedValue,
                       inputProps: {
                         className: styles.input,
                         style: { height: "46px" }
@@ -807,13 +830,13 @@ var DatePickerInput = React5.forwardRef(
                           setInvalidDate(false);
                         }
                       },
-                      value: field.value,
+                      value: normalizedValue,
                       locale: "pt-BR",
                       highlightCurrentDay: true,
                       formatDate: (value) => dateFns.format(value, dateFnsFormat),
                       parseDate: (value) => dateFns.parse(value, dateFnsFormat, /* @__PURE__ */ new Date()),
-                      maxDate,
-                      minDate
+                      maxDate: maxDate || new Date((/* @__PURE__ */ new Date()).getFullYear() + 5, 11, 31),
+                      minDate: minDate || new Date(1900, 0, 1)
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2551,6 +2574,7 @@ var alertTypes = {
 };
 var sizes3 = {
   xs: "w-[350px]",
+  xsm: "w-[470px]",
   sm: "w-[662px]",
   md: "w-[960px]",
   lg: "w-[80%] min-w-[800px]",
@@ -2618,11 +2642,12 @@ var ModalDialog = ({
               title
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              Button,
               {
                 onClick: onCancel,
-                className: "text-neutral-500 text-[24px]",
-                children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times" })
+                variant: "ghost",
+                size: "xs",
+                icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times" })
               }
             )
           ] }),
@@ -2714,7 +2739,7 @@ var customStyles = {
   }),
   menu: (provided) => ({
     ...provided,
-    marginTop: "4px",
+    marginTop: "8px",
     border: "1px solid var(--neutral-300)",
     boxShadow: "none",
     borderRadius: "8px",
@@ -2823,7 +2848,12 @@ var SelectField = ({
   icon,
   emptyMessage,
   small = false,
-  initialMessage
+  initialMessage,
+  menuIsEverOpen = false,
+  clearOnBlur = true,
+  onMenuClose,
+  clearOnMenuClose,
+  showArrow = true
 }) => {
   var _a;
   const { Option, DropdownIndicator, ClearIndicator, SingleValue } = Select.components;
@@ -2831,6 +2861,7 @@ var SelectField = ({
   const [inputValue, setInputValue] = React5.useState("");
   const [loading, setLoading] = React5.useState(false);
   const [options, setOptions] = React5.useState(() => optionsList || []);
+  const [cachedOptions, setCachedOptions] = React5.useState([]);
   const [availableHeight, setAvailableHeight] = React5.useState(300);
   const [isFocused, setIsFocused] = React5.useState(false);
   React5.useEffect(() => {
@@ -2849,17 +2880,20 @@ var SelectField = ({
       window.removeEventListener("resize", updateAvailableHeight);
     };
   }, [selectRef]);
-  const loadOptions = (inputValue2) => {
+  const loadOptions = async (inputValue2) => {
     setLoading(true);
     if (isSearchable && filterOptions) {
       if (debounce2 && inputValue2.length >= debounce2 || !debounce2) {
-        const result = filterOptions(inputValue2);
+        const result = await filterOptions(inputValue2);
+        setCachedOptions(result || []);
         setLoading(false);
         return result;
       }
     } else {
       setOptions(optionsList);
     }
+    setLoading(false);
+    return cachedOptions;
   };
   const fieldValidation = useFieldErrorsStore((state) => state.field);
   const fieldValidationMessages = [
@@ -2977,7 +3011,7 @@ var SelectField = ({
             "div",
             {
               className: clsx9__default.default(
-                "z-[70]  absolute bg-neutral-100 top-[1px] left-[1px] rounded-l-lg flex justify-center items-center h-[44px] w-[38px] text-[22px] text-dark-blue-600",
+                "z-[70]  absolute bg-neutral-100 top-[1px] left-[1px] rounded-l-lg flex justify-center items-center h-[44px] w-[38px] text-[22px] text-label",
                 {
                   "text-blue-500": isFocused && hasIcon.hasIcon,
                   "text-red-500": hasError.hasError && hasIcon.hasIcon
@@ -2998,10 +3032,27 @@ var SelectField = ({
               ...smallField,
               isDisabled: disabled,
               onFocus: () => setIsFocused(true),
-              onBlur: () => setIsFocused(false),
+              onBlur: () => {
+                setIsFocused(false);
+              },
+              onMenuClose: () => {
+                const shouldClear = typeof clearOnMenuClose !== "undefined" ? clearOnMenuClose : clearOnBlur;
+                if (shouldClear) setInputValue("");
+                if (onMenuClose) onMenuClose();
+              },
+              inputValue,
+              onInputChange: (val, meta) => {
+                if (meta.action === "input-change") {
+                  setInputValue(val);
+                } else if (meta.action === "menu-close" || meta.action === "input-blur") {
+                  const shouldClear = typeof clearOnMenuClose !== "undefined" ? clearOnMenuClose : clearOnBlur;
+                  if (shouldClear) setInputValue("");
+                }
+              },
+              menuIsOpen: menuIsEverOpen ? true : void 0,
               loadingMessage: () => /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Carregando" }),
               isLoading: loading,
-              defaultOptions: debounce2 > 0 ? false : optionsList ? options : true,
+              defaultOptions: menuIsEverOpen && cachedOptions.length > 0 ? cachedOptions : debounce2 > 0 ? false : optionsList ? options : true,
               loadOptions,
               name: field.name,
               isClearable,
@@ -3017,7 +3068,7 @@ var SelectField = ({
                 LoadingIndicator: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
                 LoadingMessage,
                 NoOptionsMessage,
-                DropdownIndicator: DropdownIndicatorCustom,
+                DropdownIndicator: showArrow ? DropdownIndicatorCustom : null,
                 ClearIndicator: ClearIndicatorCustom
               },
               closeMenuOnSelect: true,