nexaas-ui-components 1.0.41 → 1.0.43

package/dist/index.cjs

@@ -108,7 +108,7 @@ var variants = {
     text: "shadow-button bg-surface border-[0.5px] border-rose-500 text-rose-500 hover:bg-rose-50 hover:text-rose-600 active:bg-rose-100 active:text-rose-600 disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50 active:shadow-none"
   },
   link: {
-    text: "shadow-button text-left text-blue-500 hover:text-blue-700 hover:underline active:text-blue-800 disabled:text-blue-500 disabled:no-underline shadow-none font-normal"
+    text: "shadow-button text-left text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 disabled:text-blue-400 disabled:no-underline outline-none focus:outline-none shadow-none font-normal"
   },
   dangerOutline: {
     text: "shadow-button text-dangerous-500 bg-surface border-[0.5px] border-dangerous-500 hover:bg-dangerous-100 hover:text-dangerous-600 active:bg-dangerous-500 active:text-white disabled:opacity-50 disabled:bg-white disabled:text-dangerous-500 active:shadow-none"
@@ -287,7 +287,10 @@ var variants2 = {
     text: "shadow-button bg-white border-[0.5px] border-paragraph text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-dark-blue-400 disabled:bg-white disabled:border-[0.5px] disabled:border-dark-blue-400"
   },
   link: {
-    text: "text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 active:underline disabled:text-blue-500 disabled:no-underline shadow-none font-normal"
+    text: "text-blue-500 hover:text-blue-600 hover:underline border-none active:text-blue-600 active:underline disabled:text-blue-500 disabled:no-underline shadow-none font-normal"
+  },
+  linkDanger: {
+    text: "text-dangerous-500 hover:text-dangerous-600 hover:underline border-none active:text-dangerous-600 active:underline disabled:text-dangerous-500 disabled:no-underline shadow-none font-normal"
   },
   icon: {
     text: "bg-white border-[0.5px] border-dark-blue-300 text-blue-500 hover:text-blue-600 hover:bg-[#f5f5f5] active:text-blue-600 active:bg-light-gray-100 disabled:text-dark-blue-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50"
@@ -337,6 +340,7 @@ var ButtonLink = React5.forwardRef(
     as: LinkComponent = "a",
     hotkey,
     hotkeyPosition = "bottom",
+    iconPosition = "left",
     ...props
   }, ref) => {
     var _a;
@@ -359,7 +363,9 @@ var ButtonLink = React5.forwardRef(
           if (props.onClick) {
             (_a2 = props.onClick) == null ? void 0 : _a2.call(props, event);
           } else {
-            const linkElement = document.querySelector(`a[href="${props.href}"]`);
+            const linkElement = document.querySelector(
+              `a[href="${props.href}"]`
+            );
             linkElement == null ? void 0 : linkElement.click();
           }
         }
@@ -373,7 +379,7 @@ var ButtonLink = React5.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: clsx9__default.default("inline-flex gap-[8px]", {
+        className: clsx9__default.default("inline-flex gap-[4px]", {
           "flex-col items-center justify-center": hotkeyPosition === "top" || hotkeyPosition === "bottom",
           "flex-row items-center justify-center": hotkeyPosition === "left" || hotkeyPosition === "right"
         }),
@@ -395,9 +401,10 @@ var ButtonLink = React5.forwardRef(
                   [(_a = variants2[variant]) == null ? void 0 : _a.text]: true,
                   [sizes2[size].text]: true,
                   ["pointer-events-none shadow-none text-label"]: disabled,
-                  ["px-2"]: variant !== "link"
+                  ["px-2"]: variant !== "link" && variant !== "linkDanger",
+                  ["flex-row-reverse"]: iconPosition === "right"
                 },
-                `group rounded-lg font-bold active:shadow-none font-title flex items-center justify-start cursor-pointer
+                `group rounded-lg font-bold active:shadow-none font-title flex items-center justify-start cursor-pointer outline-none focus:outline-none
             ${applyGap ? "gap-2" : "gap-0"} ${className}
             `
               ),
@@ -405,8 +412,26 @@ var ButtonLink = React5.forwardRef(
               ...props,
               download: name,
               children: [
-                icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[20px] flex items-center justify-center", children: icon }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cursor-pointer line-clamp-2", children: label })
+                icon && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: clsx9__default.default("flex items-center justify-center", {
+                      "text-[12px]": size === "sm",
+                      "text-[14px]": size === "md"
+                    }),
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: clsx9__default.default("cursor-pointer line-clamp-2", {
+                      "text-[12px]": size === "sm",
+                      "text-[14px]": size === "md"
+                    }),
+                    children: label
+                  }
+                )
               ]
             }
           ),
@@ -451,7 +476,7 @@ var Input = ({
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const [showPassword, setShowPassword] = React5__namespace.default.useState(false);
   const styles = {
-    input: `text-p-md pl-2 peer shadow-input border rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
+    input: `text-p-md pl-2 peer shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-neutral-300" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
@@ -1171,7 +1196,7 @@ var FilterCalendar = ({
   maxDate = void 0
 }) => {
   const style = {
-    filter: "rounded-3xl shadow-input bg-white hover:bg-neutral-100 border border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
+    filter: "rounded-3xl shadow-input bg-white hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
     filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
     filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
   };
@@ -1628,10 +1653,11 @@ var FilterOptions = ({
   emptyMessage,
   initialMessage,
   applyOnClick = false,
-  showFilter = false
+  showFilter = false,
+  renderOption
 }) => {
   const style = {
-    filter: "rounded-3xl shadow-input bg-white hover:bg-neutral-100 border border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
+    filter: "rounded-3xl shadow-input bg-white hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
     filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
     filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100  shadow-input hover:bg-blue-500 hover:text-white active:text-white active:bg-blue-600 active:border-blue-600"
   };
@@ -1678,7 +1704,20 @@ var FilterOptions = ({
         disabled: option.disabled,
         value: option,
         as: React5.Fragment,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
+        children: renderOption ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx9__default.default(
+              "relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
+              {
+                ["hover:bg-neutral-200"]: !option.disabled && !isSelected,
+                ["text-gray-200"]: option.disabled,
+                ["bg-blue-500 hover:bg-blue-500"]: isSelected
+              }
+            ),
+            children: renderOption(option, isSelected)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: clsx9__default.default(
@@ -1758,7 +1797,7 @@ var FilterOptions = ({
                           className: clsx9__default.default({
                             ["text-label group-active:text-blue-500"]: !field.value && !open,
                             ["text-blue-500"]: open && !field.value,
-                            ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
+                            ["text-blue-500 group-hover:text-blue-500 "]: open && field.value
                           }),
                           children: icon
                         }
@@ -1770,7 +1809,7 @@ var FilterOptions = ({
                             {
                               ["text-paragraph group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
-                              ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
+                              ["text-blue-500 group-hover:text-blue-500 "]: open && field.value
                             },
                             "truncate cursor-pointer"
                           ),
@@ -1785,7 +1824,7 @@ var FilterOptions = ({
                             {
                               ["text-label group-active:text-blue-500"]: !field.value && !open,
                               ["text-blue-500"]: open && !field.value,
-                              ["text-blue-500 group-hover:text-white group-active:text-white"]: open && field.value
+                              ["text-blue-500 group-hover:text-blue-500 "]: open && field.value
                             },
                             "uil uil-angle-down text-[18px]"
                           )
@@ -1864,16 +1903,7 @@ var FilterOptions = ({
                                 }) })
                               ] }),
                               loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 w-full my-4", children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(
-                                  "img",
-                                  {
-                                    className: "animate-spin",
-                                    src: "/spinner-gray.svg",
-                                    alt: "circle",
-                                    width: 13,
-                                    height: 13
-                                  }
-                                ),
+                                /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "animate-spin w-[16px] h-[16px]" }),
                                 "Carregando"
                               ] }),
                               (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) > 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: emptyMessage }) }),
@@ -2009,7 +2039,7 @@ function InputMoney({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph shadow-input  border  rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer text-paragraph shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
         `,
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
@@ -2027,8 +2057,7 @@ function InputMoney({
             onChangeValue(value2);
           }
         };
-        if (typeof field.value === "string")
-          field.value = Number(field.value);
+        if (typeof field.value === "string") field.value = Number(field.value);
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative outline-none", children: [
             icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2132,7 +2161,7 @@ function InputNumber({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer shadow-input  border  rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[2px] left-[1.5px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
       `,
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
@@ -2345,7 +2374,7 @@ function InputPercentage({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer shadow-input  border  rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    input: `text-p-md pl-2 peer shadow-input  border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1  ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] text-[22px] rounded-lg ${hasError ? "text-dangerous-500" : "text-label"}
     `,
     label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
@@ -2556,7 +2585,7 @@ var ModalDialog = ({
       marginRight: "-50%",
       transform: "translate(-50%, -50%)",
       border: "1px solid #E8E8E9",
-      padding: "24px",
+      padding: "20px 24px 24px 24px",
       borderRadius: "8px",
       overflow: "initial"
     },
@@ -2598,7 +2627,7 @@ var ModalDialog = ({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
-          showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-6 border-t border-t-neutral-200 flex w-full items-center justify-between", children: [
+          showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-6  flex w-full items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -6768,7 +6797,7 @@ function ControlledInput({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `text-p-md pl-2 peer shadow-input  border  rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
+    input: `text-p-md pl-2 peer shadow-input  border border-[0.5px]  rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-neutral-300" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label"}`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",