@charlesgomes/leafcode-shared-lib-react 1.0.95 → 1.0.97

package/dist/assets/lotties/RezzutSmartLab.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","ddd":0,"h":135,"w":120,"meta":{"g":"@lottiefiles/creator 1.77.0"},"layers":[{"ty":3,"nm":"Group Layer 1","sr":1,"st":0,"op":280,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[191.62,81]},"s":{"a":0,"k":[19.285714,19.285714]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[120,135]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ind":1},{"ty":4,"nm":"Shape Layer 5","sr":1,"st":0,"op":280,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[60,67.5]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[60,67.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 20","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 9","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 30","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[100,45],[80,56.25],[60,45],[40,56.25],[20,45],[40,33.75],[60,22.5],[80,33.75],[100,45]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.0471,0.5529,0.9333]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[60,39.375]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[60,39.375],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[60,39.375],"t":50},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[60,16.875],"t":100},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[60,16.875],"t":150},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[60,17.101202],"t":180},{"s":[60,39.375],"t":229.99999999999997}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 10","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 31","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[40,78.75],[60,90],[60,112.5],[60,135],[40,123.75],[40,101.25],[40,78.75]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.7137,0.7255,0.8275]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[50,106.875]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,106.875]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 11","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 32","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[20,45],[40,56.25],[40,78.75],[40,101.25],[40,123.75],[20,112.5],[20,90],[20,67.5],[20,45]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.0392,0.4392,0.7412]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[30,84.375]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[30,84.375],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[30,84.375],"t":50},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[30,84.375],"t":70,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[10,73.125],"t":120,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[10,73.351202],"t":180,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[10,73.125],"t":200,"ti":[0,0],"to":[0,0]},{"s":[30,84.375],"t":260}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 12","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 33","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[120,33.75],[100,45],[80,33.75],[60,22.5],[40,33.75],[20,45],[0,33.75],[20,22.5],[40,11.25],[60,0],[80,11.25],[100,22.5],[120,33.75]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.8392,0.8431,0.902]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[60,22.5]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[60,22.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 13","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 34","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[60,45],[80,56.25],[80,78.75],[60,67.5],[60,45]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.7137,0.7255,0.8275]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[70,61.875]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[70,61.875]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 14","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 35","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[60,67.5],[40,78.75],[40,56.25],[60,45],[60,67.5]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.7804,0.7882,0.8667]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[50,61.875]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,61.875]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 15","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 36","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[60,90],[40,78.75],[60,67.5],[80,78.75],[60,90]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.8392,0.8431,0.902]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[60,78.75]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[60,78.75]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 16","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 37","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0,33.75],[20,45],[20,67.5],[20,90],[20,112.5],[0,101.25],[0,78.75],[0,56.25],[0,33.75]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.7137,0.7255,0.8275]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[10,73.125]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[10,73.125]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 17","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 38","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[80,123.75],[60,135],[60,112.5],[80,123.75]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.7804,0.7882,0.8667]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[70,123.75]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[70,123.75]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 18","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 39","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[60,90],[80,78.75],[80,56.25],[100,45],[100,67.5],[100,90],[80,101.25],[100,112.5],[80,123.75],[60,112.5],[60,90]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.0431,0.4902,0.8275]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[80,84.375]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[80,84.375],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[80,84.375],"t":50},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[80,84.375],"t":90,"ti":[0,0],"to":[1.863486,-1.027135]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,73.351202],"t":150,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,73.125],"t":200,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,73.125],"t":220.00000000000003,"ti":[0,0],"to":[0,0]},{"s":[80,84.375],"t":280}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 19","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 40","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[100,45],[120,33.75],[120,56.25],[120,78.75],[120,101.25],[100,112.5],[80,101.25],[100,90],[100,67.5],[100,45]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.7804,0.7882,0.8667]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[100,73.125]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[100,73.125]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2}],"v":"5.7.0","fr":100,"op":280,"ip":0,"assets":[]}

package/dist/index.d.mts

@@ -6,6 +6,7 @@ export { DataTableProps } from 'primereact/datatable';
 export { ColumnProps } from 'primereact/column';
 export { FilterMatchMode, FilterOperator } from 'primereact/api';
 
+type LottieAnimationData = Record<string, unknown>;
 interface ButtonProps {
     disabled?: boolean;
     loading?: boolean;
@@ -14,8 +15,11 @@ interface ButtonProps {
     type?: "button" | "reset" | "submit";
     color?: "danger";
     onClick?: () => void;
+    loadingLottieFileName?: string;
+    loadingLottieBasePath?: string;
+    loadingLottieData?: LottieAnimationData;
 }
-declare function Button({ disabled, loading, color, type, onClick, title, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ disabled, loading, color, type, onClick, title, className, loadingLottieFileName, loadingLottieBasePath, loadingLottieData, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface Props$1 {
     id: string;
@@ -340,6 +344,11 @@ interface LeafcodeTheme {
         minWidth: string | number;
         radius: string;
       };
+
+      lottie?: {
+        basePath?: string;
+        fileName?: string;
+      };
     };
     table: {
       colors: {

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { DataTableProps } from 'primereact/datatable';
 export { ColumnProps } from 'primereact/column';
 export { FilterMatchMode, FilterOperator } from 'primereact/api';
 
+type LottieAnimationData = Record<string, unknown>;
 interface ButtonProps {
     disabled?: boolean;
     loading?: boolean;
@@ -14,8 +15,11 @@ interface ButtonProps {
     type?: "button" | "reset" | "submit";
     color?: "danger";
     onClick?: () => void;
+    loadingLottieFileName?: string;
+    loadingLottieBasePath?: string;
+    loadingLottieData?: LottieAnimationData;
 }
-declare function Button({ disabled, loading, color, type, onClick, title, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ disabled, loading, color, type, onClick, title, className, loadingLottieFileName, loadingLottieBasePath, loadingLottieData, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface Props$1 {
     id: string;
@@ -340,6 +344,11 @@ interface LeafcodeTheme {
         minWidth: string | number;
         radius: string;
       };
+
+      lottie?: {
+        basePath?: string;
+        fileName?: string;
+      };
     };
     table: {
       colors: {

package/dist/index.js

@@ -63,6 +63,10 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/components/Button/Button.tsx
+var import_react2 = require("react");
+var import_lottie_react = __toESM(require("lottie-react"));
+
 // src/provider/ThemeProvider.tsx
 var import_lodash = __toESM(require("lodash.merge"));
 var import_react = require("react");
@@ -76,7 +80,7 @@ var defaultTheme = {
     secundaryHover: "",
     danger: "#ED202E",
     dangerHover: "#f35353",
-    borderDisabledBg: "#D4D4D8",
+    borderDisabledBg: "#ebebeb",
     text: "#18181B",
     light: "#FFFFFF",
     background: "#FFFFFF",
@@ -141,6 +145,9 @@ var defaultTheme = {
         height: "2.5rem",
         minWidth: "8rem",
         radius: "6px"
+      },
+      lottie: {
+        basePath: "/lotties"
       }
     },
     table: {
@@ -192,6 +199,20 @@ var useLeafcodeTheme = () => (0, import_react.useContext)(ThemeContext);
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_meta = {};
+var DEFAULT_LOTTIE_BASE_PATH = "/lotties";
+function normalizeLottieFileName(fileName) {
+  return fileName.endsWith(".json") ? fileName : `${fileName}.json`;
+}
+function resolveLottieFileUrl(basePath, fileName) {
+  const normalizedBasePath = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
+  const normalizedFileName = normalizeLottieFileName(fileName);
+  const fullPath = `${normalizedBasePath}/${normalizedFileName}`;
+  if (normalizedBasePath.startsWith("./") || normalizedBasePath.startsWith("../")) {
+    return new URL(fullPath, import_meta.url).href;
+  }
+  return fullPath;
+}
 function Button({
   disabled,
   loading,
@@ -199,9 +220,46 @@ function Button({
   type,
   onClick,
   title,
+  className,
+  loadingLottieFileName,
+  loadingLottieBasePath,
+  loadingLottieData,
   ...rest
 }) {
   const theme = useLeafcodeTheme();
+  const themeButtonLottie = theme.components.button.lottie;
+  const [resolvedLottieData, setResolvedLottieData] = (0, import_react2.useState)(loadingLottieData ?? null);
+  const resolvedLottieFileName = loadingLottieFileName ?? themeButtonLottie?.fileName;
+  const resolvedLottieBasePath = loadingLottieBasePath ?? themeButtonLottie?.basePath ?? DEFAULT_LOTTIE_BASE_PATH;
+  (0, import_react2.useEffect)(() => {
+    if (loadingLottieData) {
+      setResolvedLottieData(loadingLottieData);
+      return;
+    }
+    if (!resolvedLottieFileName) {
+      setResolvedLottieData(null);
+      return;
+    }
+    const controller = new AbortController();
+    const lottieUrl = resolveLottieFileUrl(
+      resolvedLottieBasePath,
+      resolvedLottieFileName
+    );
+    fetch(lottieUrl, { signal: controller.signal }).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to load lottie file: ${lottieUrl}`);
+      }
+      return response.json();
+    }).then((data) => {
+      setResolvedLottieData(data);
+    }).catch((error) => {
+      if (error instanceof DOMException && error.name === "AbortError") {
+        return;
+      }
+      setResolvedLottieData(null);
+    });
+    return () => controller.abort();
+  }, [loadingLottieData, resolvedLottieFileName, resolvedLottieBasePath]);
   const styleVars = {
     "--button-font-family": theme.components.button.fonts.family,
     "--button-font-weight": theme.components.button.fonts.weight,
@@ -217,16 +275,29 @@ function Button({
     "--button-min-width": theme.components.button.sizes.minWidth,
     "--button-border-radius": theme.components.button.sizes.radius
   };
+  const resolvedClassName = [
+    "box-button",
+    disabled || loading ? "button-disabled" : color === "danger" ? "button-secundary" : "button-primary",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       type,
       style: styleVars,
-      className: `box-button ${disabled || loading ? "button-disabled" : color === "danger" ? "button-secundary" : "button-primary"}`,
+      className: resolvedClassName,
       onClick: !loading ? onClick : void 0,
       disabled: disabled || loading,
       ...rest,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "box-loading", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "box-loading", children: resolvedLottieData ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_lottie_react.default,
+        {
+          animationData: resolvedLottieData,
+          autoplay: true,
+          loop: true,
+          className: "button-lottie-loading"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "svg",
         {
           className: "animate-spin",
@@ -282,11 +353,11 @@ function TooltipCustom({ label, id }) {
 }
 
 // src/components/Input/Input.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/Tooltips/TooltipErrorInput.tsx
-var import_react2 = require("@phosphor-icons/react");
-var import_react3 = require("react");
+var import_react3 = require("@phosphor-icons/react");
+var import_react4 = require("react");
 var import_react_tooltip2 = require("react-tooltip");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function TooltipErrorInput({
@@ -307,9 +378,9 @@ function TooltipErrorInput({
     "--input-error-border": theme.colors.danger,
     "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
   };
-  const [isTooltipOpen, setIsTooltipOpen] = (0, import_react3.useState)(true);
+  const [isTooltipOpen, setIsTooltipOpen] = (0, import_react4.useState)(true);
   const handleClose = () => setIsTooltipOpen(false);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setIsTooltipOpen(true);
   }, [error]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -325,7 +396,7 @@ function TooltipErrorInput({
             "data-tooltip-content": "",
             "data-tooltip-place": "top-end",
             onClick: () => setIsTooltipOpen(true),
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.WarningCircle, { size: 22, className: "tooltip-icon" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.WarningCircle, { size: 22, className: "tooltip-icon" })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -356,7 +427,7 @@ function TooltipErrorInput({
                     background: "transparent",
                     cursor: "pointer"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.X, { size: 16, weight: "bold" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.X, { size: 16, weight: "bold" })
                 }
               )
             ] })
@@ -368,7 +439,7 @@ function TooltipErrorInput({
 }
 
 // src/components/Input/Input.tsx
-var import_react5 = require("@phosphor-icons/react");
+var import_react6 = require("@phosphor-icons/react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var InputBase = ({
   name,
@@ -422,7 +493,7 @@ var InputBase = ({
     e.target.value = val;
     onChange?.(e);
   };
-  const [show, setShow] = (0, import_react4.useState)(false);
+  const [show, setShow] = (0, import_react5.useState)(false);
   const isPassword = showPasswordToggle;
   const handleClick = () => setShow(!show);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -462,7 +533,7 @@ var InputBase = ({
             {
               onClick: () => handleClick(),
               className: `password-toggle ${error ? "error" : "no-error"}`,
-              children: show ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Eye, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.EyeSlash, { size: 21 })
+              children: show ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react6.Eye, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react6.EyeSlash, { size: 21 })
             }
           )
         ] }),
@@ -471,10 +542,10 @@ var InputBase = ({
     }
   );
 };
-var Input = (0, import_react4.forwardRef)(InputBase);
+var Input = (0, import_react5.forwardRef)(InputBase);
 
 // src/components/Input/TextArea.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var TextAreaBase = ({
   name,
@@ -546,12 +617,12 @@ var TextAreaBase = ({
     }
   );
 };
-var TextArea = (0, import_react6.forwardRef)(
+var TextArea = (0, import_react7.forwardRef)(
   TextAreaBase
 );
 
 // src/components/Input/InputSelect.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import_react_select = __toESM(require("react-select"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -597,10 +668,10 @@ var InputBase2 = ({
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
   };
-  const [menuPortalTarget, setMenuPortalTarget] = (0, import_react7.useState)(
+  const [menuPortalTarget, setMenuPortalTarget] = (0, import_react8.useState)(
     null
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setMenuPortalTarget(document.body);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "input-wrapper", style: styleVars, children: [
@@ -674,10 +745,10 @@ var InputBase2 = ({
     )
   ] });
 };
-var InputSelect = (0, import_react7.forwardRef)(InputBase2);
+var InputSelect = (0, import_react8.forwardRef)(InputBase2);
 
 // src/components/ModalBase/ModalBase.tsx
-var import_react8 = require("@phosphor-icons/react");
+var import_react9 = require("@phosphor-icons/react");
 
 // src/components/ModalBase/FooterButtons.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -686,7 +757,7 @@ function FooterButtons({ children }) {
 }
 
 // src/components/ModalBase/ModalBase.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function ModalBase({
   show,
@@ -716,7 +787,7 @@ function ModalBase({
     // Sizes
     "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onHide();
@@ -731,7 +802,7 @@ function ModalBase({
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "modal-overlay", style: styleVars, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "modal-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "modal-content", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "modal-header", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "modal-title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "modal-close", type: "button", onClick: onHide, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.X, { size: 18, className: "button-close" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "modal-close", type: "button", onClick: onHide, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react9.X, { size: 18, className: "button-close" }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "modal-body", children }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FooterButtons, { children: [
@@ -761,15 +832,15 @@ function ModalBase({
 }
 
 // src/components/Input/InputAutocomplete.tsx
-var import_react11 = require("@phosphor-icons/react");
+var import_react12 = require("@phosphor-icons/react");
 var import_lodash2 = __toESM(require("lodash"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_query = require("@tanstack/react-query");
 
 // src/components/Loading/Loading.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react10.memo)(({ size = 20 }) => {
+var LoadingSpinner = (0, import_react11.memo)(({ size = 20 }) => {
   const theme = useLeafcodeTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "span",
@@ -811,8 +882,8 @@ function AutoCompleteInner(props, ref) {
     ...inputProps
   } = props;
   const theme = useLeafcodeTheme();
-  const inputRef = (0, import_react12.useRef)(null);
-  const [placement, setPlacement] = (0, import_react12.useState)("bottom");
+  const inputRef = (0, import_react13.useRef)(null);
+  const [placement, setPlacement] = (0, import_react13.useState)("bottom");
   const styleVars = {
     // Fonts
     "--label-font-family": theme.components.input.fonts.label,
@@ -832,11 +903,11 @@ function AutoCompleteInner(props, ref) {
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
   };
-  const [items, setItems] = (0, import_react12.useState)([]);
-  const [pageNumber, setPageNumber] = (0, import_react12.useState)(1);
-  const [search, setSearch] = (0, import_react12.useState)("");
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
-  const listRef = (0, import_react12.useRef)(null);
+  const [items, setItems] = (0, import_react13.useState)([]);
+  const [pageNumber, setPageNumber] = (0, import_react13.useState)(1);
+  const [search, setSearch] = (0, import_react13.useState)("");
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+  const listRef = (0, import_react13.useRef)(null);
   const calculatePlacement = () => {
     const input = inputRef.current;
     if (!input) return;
@@ -850,7 +921,7 @@ function AutoCompleteInner(props, ref) {
       setPlacement("bottom");
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!isOpen) return;
     calculatePlacement();
     window.addEventListener("resize", calculatePlacement);
@@ -883,13 +954,13 @@ function AutoCompleteInner(props, ref) {
     enabled: isOpen
   });
   const { data, isLoading } = query;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!data) return;
     setItems(
       (prev) => pageNumber === 1 ? data.items : [...prev, ...data.items]
     );
   }, [data, pageNumber]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const debounced = import_lodash2.default.debounce(() => {
       setPageNumber(1);
       setSearch(value ?? "");
@@ -964,7 +1035,7 @@ function AutoCompleteInner(props, ref) {
                 onChange?.("");
                 onSelect(null);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.X, { size: 16, color: "#bf1717" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react12.X, { size: 16, color: "#bf1717" })
             }
           ),
           isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `dropdown-container dropdown-${placement}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
@@ -986,13 +1057,13 @@ function AutoCompleteInner(props, ref) {
     }
   );
 }
-var InputAutoComplete = (0, import_react12.forwardRef)(AutoCompleteInner);
+var InputAutoComplete = (0, import_react13.forwardRef)(AutoCompleteInner);
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
 
 // src/primereact-compat.ts
@@ -1004,7 +1075,7 @@ var import_calendar = require("primereact/calendar");
 var import_api = require("primereact/api");
 
 // src/components/DataTableAdvancedFilter/TableHeader.tsx
-var import_react13 = require("@phosphor-icons/react");
+var import_react14 = require("@phosphor-icons/react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var TableHeader = ({
   globalFilterValue,
@@ -1026,16 +1097,16 @@ var TableHeader = ({
         className: "custom-input input-search"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react13.X, { size: 16, className: "close-search", onClick: limparCampo })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react14.X, { size: 16, className: "close-search", onClick: limparCampo })
   ] });
 };
 var TableHeader_default = TableHeader;
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-var import_react18 = require("@phosphor-icons/react");
+var import_react19 = require("@phosphor-icons/react");
 
 // src/components/DataTableAdvancedFilter/TableActions.tsx
-var import_react14 = require("@phosphor-icons/react");
+var import_react15 = require("@phosphor-icons/react");
 
 // src/utils/utils.ts
 var import_clsx = require("clsx");
@@ -1079,7 +1150,7 @@ function TableActions({
             enableButtonsNotMultiplesSelecteds && "disable-button-table-actions"
           ),
           disabled: enableButtonsNotMultiplesSelecteds,
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.Plus, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react15.Plus, { size: 18 })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -1102,7 +1173,7 @@ function TableActions({
         ),
         disabled: disableButtonsNotMultiplesSelecteds,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.PencilSimple, { size: 18 }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react15.PencilSimple, { size: 18 }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             TooltipCustom,
             {
@@ -1125,7 +1196,7 @@ function TableActions({
         ),
         disabled: !enableButtonsNotMultiplesSelecteds,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.Trash, { size: 18 }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react15.Trash, { size: 18 }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             TooltipCustom,
             {
@@ -1157,7 +1228,7 @@ function TableActions({
 }
 
 // src/components/DataTableAdvancedFilter/ActionsColumn.tsx
-var import_react15 = require("@phosphor-icons/react");
+var import_react16 = require("@phosphor-icons/react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function ActionsColumn({
   row,
@@ -1179,7 +1250,7 @@ function ActionsColumn({
           onEdit && onEdit([row]);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.PencilSimple, { size: 17, weight: "regular" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react16.PencilSimple, { size: 17, weight: "regular" }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             TooltipCustom,
             {
@@ -1201,7 +1272,7 @@ function ActionsColumn({
           onDelete && onDelete([row]);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.Trash, { size: 17, weight: "regular" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react16.Trash, { size: 17, weight: "regular" }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             TooltipCustom,
             {
@@ -1318,10 +1389,10 @@ function DynamicColumns({
 }
 
 // src/hooks/use-debounce.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = (0, import_react16.useState)(value);
-  (0, import_react16.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react17.useState)(value);
+  (0, import_react17.useEffect)(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay || 500);
@@ -1353,8 +1424,8 @@ function DataTableAdvancedFilterWrapper({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = (0, import_react17.useState)(false);
-  (0, import_react17.useEffect)(() => {
+  const [isClient, setIsClient] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
     setIsClient(true);
   }, []);
   const initialState = state ?? {
@@ -1364,30 +1435,30 @@ function DataTableAdvancedFilterWrapper({
     sortOrder: sortOrderInitial,
     filter: ""
   };
-  const [page, setPage] = (0, import_react17.useState)(initialState.page);
-  const [rows, setRows] = (0, import_react17.useState)(initialState.rows);
-  const [first, setFirst] = (0, import_react17.useState)(
+  const [page, setPage] = (0, import_react18.useState)(initialState.page);
+  const [rows, setRows] = (0, import_react18.useState)(initialState.rows);
+  const [first, setFirst] = (0, import_react18.useState)(
     (initialState.page - 1) * initialState.rows
   );
-  const [sortField, setSortField] = (0, import_react17.useState)(initialState.sortField);
-  const [sortOrder, setSortOrder] = (0, import_react17.useState)(
+  const [sortField, setSortField] = (0, import_react18.useState)(initialState.sortField);
+  const [sortOrder, setSortOrder] = (0, import_react18.useState)(
     initialState.sortOrder ?? 1
   );
-  const [searchText, setSearchText] = (0, import_react17.useState)(initialState.filter ?? "");
-  const [filters, setFilters] = (0, import_react17.useState)({
+  const [searchText, setSearchText] = (0, import_react18.useState)(initialState.filter ?? "");
+  const [filters, setFilters] = (0, import_react18.useState)({
     ...initFilters,
     global: { value: initialState.filter, matchMode: "contains" }
   });
-  const [selectedRowsData, setSelectedRowsData] = (0, import_react17.useState)([]);
+  const [selectedRowsData, setSelectedRowsData] = (0, import_react18.useState)([]);
   const debouncedSearch = useDebounce(searchText, 500);
-  const debouncedFilters = (0, import_react17.useMemo)(() => {
+  const debouncedFilters = (0, import_react18.useMemo)(() => {
     const f = { ...filters };
     if (!f.global) f.global = { value: "", matchMode: "contains" };
     f.global.value = debouncedSearch;
     return f;
   }, [filters, debouncedSearch]);
   const filtersKey = JSON.stringify(debouncedFilters);
-  const globalFilterFields = (0, import_react17.useMemo)(() => {
+  const globalFilterFields = (0, import_react18.useMemo)(() => {
     return columns?.filter(
       (col) => col.filterGlobal === true && (col.field !== "acoes" || col.field !== "actions")
     ).map((col) => col.field) ?? [];
@@ -1403,7 +1474,7 @@ function DataTableAdvancedFilterWrapper({
       globalFilterFields
     )
   });
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!state) return;
     setPage(state.page);
     setRows(state.rows);
@@ -1459,7 +1530,7 @@ function DataTableAdvancedFilterWrapper({
       filter: searchText
     });
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     emitStateChange({
       page,
       rows,
@@ -1468,7 +1539,7 @@ function DataTableAdvancedFilterWrapper({
       filter: debouncedSearch
     });
   }, [debouncedSearch]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (customers?.items && selectedRowsData.length > 0) {
       const currentIds = new Set(customers.items.map((item) => item.id));
       const filteredSelection = selectedRowsData.filter(
@@ -1479,7 +1550,7 @@ function DataTableAdvancedFilterWrapper({
       }
     }
   }, [customers?.items, selectedRowsData]);
-  const TableHeaderAndTableActions = (0, import_react17.useMemo)(
+  const TableHeaderAndTableActions = (0, import_react18.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
       globalFilterFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         TableHeader_default,
@@ -1540,7 +1611,7 @@ function DataTableAdvancedFilterWrapper({
     "--p-datepicker-prev-next": theme.colors.primary,
     "--p-datepicker-button": theme.colors.primary
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const root = document.documentElement;
     root.style.setProperty(
       "--p-column-filter-add-button-color",
@@ -1609,7 +1680,7 @@ function DataTableAdvancedFilterWrapper({
               onClick: options.onClick,
               disabled: options.disabled,
               className: `PrevPage ${options.disabled ? "PrevPageDisabled" : "PrevPageEnabled"}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react18.CaretLeft, { size: 18, color: "#fff" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react19.CaretLeft, { size: 18, color: "#fff" })
             }
           ),
           CurrentPageReport: (options) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "pageReport", children: [
@@ -1632,7 +1703,7 @@ function DataTableAdvancedFilterWrapper({
               onClick: options.onClick,
               disabled: options.disabled,
               className: `NextPage ${options.disabled ? "NextPageDisabled" : "NextPageEnabled"}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react18.CaretRight, { size: 18, color: "#fff" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react19.CaretRight, { size: 18, color: "#fff" })
             }
           )
         },
@@ -1858,14 +1929,14 @@ function DataTableAdvancedFilter({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = (0, import_react19.useState)(false);
-  (0, import_react19.useEffect)(() => {
+  const [isClient, setIsClient] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     (0, import_api2.addLocale)("pt", localePtBr);
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     (0, import_api2.locale)(isLanguagePtBr ? "pt" : "en");
   }, [isLanguagePtBr]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setIsClient(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(

package/dist/index.mjs

@@ -1,3 +1,7 @@
+// src/components/Button/Button.tsx
+import { useEffect, useState } from "react";
+import Lottie from "lottie-react";
+
 // src/provider/ThemeProvider.tsx
 import merge from "lodash.merge";
 import { createContext, useContext } from "react";
@@ -11,7 +15,7 @@ var defaultTheme = {
     secundaryHover: "",
     danger: "#ED202E",
     dangerHover: "#f35353",
-    borderDisabledBg: "#D4D4D8",
+    borderDisabledBg: "#ebebeb",
     text: "#18181B",
     light: "#FFFFFF",
     background: "#FFFFFF",
@@ -76,6 +80,9 @@ var defaultTheme = {
         height: "2.5rem",
         minWidth: "8rem",
         radius: "6px"
+      },
+      lottie: {
+        basePath: "/lotties"
       }
     },
     table: {
@@ -127,6 +134,19 @@ var useLeafcodeTheme = () => useContext(ThemeContext);
 
 // src/components/Button/Button.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DEFAULT_LOTTIE_BASE_PATH = "/lotties";
+function normalizeLottieFileName(fileName) {
+  return fileName.endsWith(".json") ? fileName : `${fileName}.json`;
+}
+function resolveLottieFileUrl(basePath, fileName) {
+  const normalizedBasePath = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
+  const normalizedFileName = normalizeLottieFileName(fileName);
+  const fullPath = `${normalizedBasePath}/${normalizedFileName}`;
+  if (normalizedBasePath.startsWith("./") || normalizedBasePath.startsWith("../")) {
+    return new URL(fullPath, import.meta.url).href;
+  }
+  return fullPath;
+}
 function Button({
   disabled,
   loading,
@@ -134,9 +154,46 @@ function Button({
   type,
   onClick,
   title,
+  className,
+  loadingLottieFileName,
+  loadingLottieBasePath,
+  loadingLottieData,
   ...rest
 }) {
   const theme = useLeafcodeTheme();
+  const themeButtonLottie = theme.components.button.lottie;
+  const [resolvedLottieData, setResolvedLottieData] = useState(loadingLottieData ?? null);
+  const resolvedLottieFileName = loadingLottieFileName ?? themeButtonLottie?.fileName;
+  const resolvedLottieBasePath = loadingLottieBasePath ?? themeButtonLottie?.basePath ?? DEFAULT_LOTTIE_BASE_PATH;
+  useEffect(() => {
+    if (loadingLottieData) {
+      setResolvedLottieData(loadingLottieData);
+      return;
+    }
+    if (!resolvedLottieFileName) {
+      setResolvedLottieData(null);
+      return;
+    }
+    const controller = new AbortController();
+    const lottieUrl = resolveLottieFileUrl(
+      resolvedLottieBasePath,
+      resolvedLottieFileName
+    );
+    fetch(lottieUrl, { signal: controller.signal }).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to load lottie file: ${lottieUrl}`);
+      }
+      return response.json();
+    }).then((data) => {
+      setResolvedLottieData(data);
+    }).catch((error) => {
+      if (error instanceof DOMException && error.name === "AbortError") {
+        return;
+      }
+      setResolvedLottieData(null);
+    });
+    return () => controller.abort();
+  }, [loadingLottieData, resolvedLottieFileName, resolvedLottieBasePath]);
   const styleVars = {
     "--button-font-family": theme.components.button.fonts.family,
     "--button-font-weight": theme.components.button.fonts.weight,
@@ -152,16 +209,29 @@ function Button({
     "--button-min-width": theme.components.button.sizes.minWidth,
     "--button-border-radius": theme.components.button.sizes.radius
   };
+  const resolvedClassName = [
+    "box-button",
+    disabled || loading ? "button-disabled" : color === "danger" ? "button-secundary" : "button-primary",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx2(
     "button",
     {
       type,
       style: styleVars,
-      className: `box-button ${disabled || loading ? "button-disabled" : color === "danger" ? "button-secundary" : "button-primary"}`,
+      className: resolvedClassName,
       onClick: !loading ? onClick : void 0,
       disabled: disabled || loading,
       ...rest,
-      children: loading ? /* @__PURE__ */ jsx2("span", { className: "box-loading", children: /* @__PURE__ */ jsxs(
+      children: loading ? /* @__PURE__ */ jsx2("span", { className: "box-loading", children: resolvedLottieData ? /* @__PURE__ */ jsx2(
+        Lottie,
+        {
+          animationData: resolvedLottieData,
+          autoplay: true,
+          loop: true,
+          className: "button-lottie-loading"
+        }
+      ) : /* @__PURE__ */ jsxs(
         "svg",
         {
           className: "animate-spin",
@@ -219,12 +289,12 @@ function TooltipCustom({ label, id }) {
 // src/components/Input/Input.tsx
 import {
   forwardRef,
-  useState as useState2
+  useState as useState3
 } from "react";
 
 // src/components/Tooltips/TooltipErrorInput.tsx
 import { WarningCircle, X } from "@phosphor-icons/react";
-import { useEffect, useState } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { Tooltip as Tooltip2 } from "react-tooltip";
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function TooltipErrorInput({
@@ -245,9 +315,9 @@ function TooltipErrorInput({
     "--input-error-border": theme.colors.danger,
     "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
   };
-  const [isTooltipOpen, setIsTooltipOpen] = useState(true);
+  const [isTooltipOpen, setIsTooltipOpen] = useState2(true);
   const handleClose = () => setIsTooltipOpen(false);
-  useEffect(() => {
+  useEffect2(() => {
     setIsTooltipOpen(true);
   }, [error]);
   return /* @__PURE__ */ jsx4(
@@ -360,7 +430,7 @@ var InputBase = ({
     e.target.value = val;
     onChange?.(e);
   };
-  const [show, setShow] = useState2(false);
+  const [show, setShow] = useState3(false);
   const isPassword = showPasswordToggle;
   const handleClick = () => setShow(!show);
   return /* @__PURE__ */ jsxs3(
@@ -491,8 +561,8 @@ var TextArea = forwardRef2(
 // src/components/Input/InputSelect.tsx
 import {
   forwardRef as forwardRef3,
-  useEffect as useEffect2,
-  useState as useState3
+  useEffect as useEffect3,
+  useState as useState4
 } from "react";
 import { Controller } from "react-hook-form";
 import Select, { components } from "react-select";
@@ -539,10 +609,10 @@ var InputBase2 = ({
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
   };
-  const [menuPortalTarget, setMenuPortalTarget] = useState3(
+  const [menuPortalTarget, setMenuPortalTarget] = useState4(
     null
   );
-  useEffect2(() => {
+  useEffect3(() => {
     setMenuPortalTarget(document.body);
   }, []);
   return /* @__PURE__ */ jsxs5("div", { className: "input-wrapper", style: styleVars, children: [
@@ -628,7 +698,7 @@ function FooterButtons({ children }) {
 }
 
 // src/components/ModalBase/ModalBase.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function ModalBase({
   show,
@@ -658,7 +728,7 @@ function ModalBase({
     // Sizes
     "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
   };
-  useEffect3(() => {
+  useEffect4(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onHide();
@@ -707,9 +777,9 @@ import { X as X3 } from "@phosphor-icons/react";
 import _ from "lodash";
 import {
   forwardRef as forwardRef4,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useRef,
-  useState as useState4
+  useState as useState5
 } from "react";
 import { useQuery } from "@tanstack/react-query";
 
@@ -759,7 +829,7 @@ function AutoCompleteInner(props, ref) {
   } = props;
   const theme = useLeafcodeTheme();
   const inputRef = useRef(null);
-  const [placement, setPlacement] = useState4("bottom");
+  const [placement, setPlacement] = useState5("bottom");
   const styleVars = {
     // Fonts
     "--label-font-family": theme.components.input.fonts.label,
@@ -779,10 +849,10 @@ function AutoCompleteInner(props, ref) {
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
   };
-  const [items, setItems] = useState4([]);
-  const [pageNumber, setPageNumber] = useState4(1);
-  const [search, setSearch] = useState4("");
-  const [isOpen, setIsOpen] = useState4(false);
+  const [items, setItems] = useState5([]);
+  const [pageNumber, setPageNumber] = useState5(1);
+  const [search, setSearch] = useState5("");
+  const [isOpen, setIsOpen] = useState5(false);
   const listRef = useRef(null);
   const calculatePlacement = () => {
     const input = inputRef.current;
@@ -797,7 +867,7 @@ function AutoCompleteInner(props, ref) {
       setPlacement("bottom");
     }
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isOpen) return;
     calculatePlacement();
     window.addEventListener("resize", calculatePlacement);
@@ -830,13 +900,13 @@ function AutoCompleteInner(props, ref) {
     enabled: isOpen
   });
   const { data, isLoading } = query;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!data) return;
     setItems(
       (prev) => pageNumber === 1 ? data.items : [...prev, ...data.items]
     );
   }, [data, pageNumber]);
-  useEffect4(() => {
+  useEffect5(() => {
     const debounced = _.debounce(() => {
       setPageNumber(1);
       setSearch(value ?? "");
@@ -936,10 +1006,10 @@ function AutoCompleteInner(props, ref) {
 var InputAutoComplete = forwardRef4(AutoCompleteInner);
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useState as useState8 } from "react";
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-import { useEffect as useEffect6, useMemo, useState as useState6 } from "react";
+import { useEffect as useEffect7, useMemo, useState as useState7 } from "react";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 
 // src/primereact-compat.ts
@@ -1265,10 +1335,10 @@ function DynamicColumns({
 }
 
 // src/hooks/use-debounce.ts
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState6 } from "react";
 var useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = useState5(value);
-  useEffect5(() => {
+  const [debouncedValue, setDebouncedValue] = useState6(value);
+  useEffect6(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay || 500);
@@ -1300,8 +1370,8 @@ function DataTableAdvancedFilterWrapper({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = useState6(false);
-  useEffect6(() => {
+  const [isClient, setIsClient] = useState7(false);
+  useEffect7(() => {
     setIsClient(true);
   }, []);
   const initialState = state ?? {
@@ -1311,21 +1381,21 @@ function DataTableAdvancedFilterWrapper({
     sortOrder: sortOrderInitial,
     filter: ""
   };
-  const [page, setPage] = useState6(initialState.page);
-  const [rows, setRows] = useState6(initialState.rows);
-  const [first, setFirst] = useState6(
+  const [page, setPage] = useState7(initialState.page);
+  const [rows, setRows] = useState7(initialState.rows);
+  const [first, setFirst] = useState7(
     (initialState.page - 1) * initialState.rows
   );
-  const [sortField, setSortField] = useState6(initialState.sortField);
-  const [sortOrder, setSortOrder] = useState6(
+  const [sortField, setSortField] = useState7(initialState.sortField);
+  const [sortOrder, setSortOrder] = useState7(
     initialState.sortOrder ?? 1
   );
-  const [searchText, setSearchText] = useState6(initialState.filter ?? "");
-  const [filters, setFilters] = useState6({
+  const [searchText, setSearchText] = useState7(initialState.filter ?? "");
+  const [filters, setFilters] = useState7({
     ...initFilters,
     global: { value: initialState.filter, matchMode: "contains" }
   });
-  const [selectedRowsData, setSelectedRowsData] = useState6([]);
+  const [selectedRowsData, setSelectedRowsData] = useState7([]);
   const debouncedSearch = useDebounce(searchText, 500);
   const debouncedFilters = useMemo(() => {
     const f = { ...filters };
@@ -1350,7 +1420,7 @@ function DataTableAdvancedFilterWrapper({
       globalFilterFields
     )
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (!state) return;
     setPage(state.page);
     setRows(state.rows);
@@ -1406,7 +1476,7 @@ function DataTableAdvancedFilterWrapper({
       filter: searchText
     });
   };
-  useEffect6(() => {
+  useEffect7(() => {
     emitStateChange({
       page,
       rows,
@@ -1415,7 +1485,7 @@ function DataTableAdvancedFilterWrapper({
       filter: debouncedSearch
     });
   }, [debouncedSearch]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (customers?.items && selectedRowsData.length > 0) {
       const currentIds = new Set(customers.items.map((item) => item.id));
       const filteredSelection = selectedRowsData.filter(
@@ -1487,7 +1557,7 @@ function DataTableAdvancedFilterWrapper({
     "--p-datepicker-prev-next": theme.colors.primary,
     "--p-datepicker-button": theme.colors.primary
   };
-  useEffect6(() => {
+  useEffect7(() => {
     const root = document.documentElement;
     root.style.setProperty(
       "--p-column-filter-add-button-color",
@@ -1805,14 +1875,14 @@ function DataTableAdvancedFilter({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = useState7(false);
-  useEffect7(() => {
+  const [isClient, setIsClient] = useState8(false);
+  useEffect8(() => {
     addLocale("pt", localePtBr);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     locale(isLanguagePtBr ? "pt" : "en");
   }, [isLanguagePtBr]);
-  useEffect7(() => {
+  useEffect8(() => {
     setIsClient(true);
   }, []);
   return /* @__PURE__ */ jsx17(Fragment7, { children: isClient && /* @__PURE__ */ jsx17(

package/dist/styles/button.css

@@ -79,9 +79,21 @@
 }
 
 .animate-spin {
-  height: 1.25rem;
-  width: 1.25rem;
+  height: 1.5rem;
+  width: 1.5rem;
   color: var(--button-color, #ffffff);
+  animation: button-spin 1s linear infinite;
+}
+
+.button-lottie-loading {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+@keyframes button-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .opacity-01 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charlesgomes/leafcode-shared-lib-react",
-  "version": "1.0.95",
+  "version": "1.0.97",
   "description": "Lib de componentes react",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -38,9 +38,9 @@
   "peerDependencies": {
     "@tanstack/react-query": "^5.85.9",
     "primereact": "^10.9.7",
-    "react-hook-form": "^7.70.0",
     "react": ">=17",
-    "react-dom": ">=17"
+    "react-dom": ">=17",
+    "react-hook-form": "^7.70.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.12",
@@ -50,10 +50,10 @@
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.2",
-    "react-hook-form": "^7.70.0",
     "postcss": "^8.5.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-hook-form": "^7.70.0",
     "tailwindcss": "^4.1.12",
     "tsup": "^8.5.0",
     "typescript": "^5.9.2",
@@ -64,10 +64,11 @@
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",
     "lodash.merge": "^4.6.2",
+    "lottie-react": "^2.4.1",
     "moment": "^2.30.1",
     "primereact": "^10.9.7",
     "react-select": "^5.10.2",
     "react-tooltip": "^5.29.1",
     "tailwind-merge": "^3.3.1"
   }
-}
+}