@charlesgomes/leafcode-shared-lib-react 1.0.76 → 1.0.77

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode as ReactNode$1, InputHTMLAttributes } from 'react';
+import react__default, { ReactNode as ReactNode$1, InputHTMLAttributes, JSX } from 'react';
 import { FieldError } from 'react-hook-form';
 import { FilterMatchMode } from 'primereact/api';
 export { FilterMatchMode, FilterOperator } from 'primereact/api';
@@ -18,7 +18,7 @@ interface ButtonProps {
 }
 declare function Button({ disabled, loading, color, type, onClick, title, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-interface InputProps$1 extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     name: string;
     label?: string | ReactNode$1;
     error?: FieldError;
@@ -29,7 +29,7 @@ interface InputProps$1 extends React.InputHTMLAttributes<HTMLInputElement> {
     validationMode?: "default" | "restricted";
     showPasswordToggle?: boolean;
 }
-declare const Input: react.ForwardRefExoticComponent<InputProps$1 & react.RefAttributes<HTMLInputElement>>;
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 
 interface TextAreaProps {
     name: string;
@@ -94,26 +94,42 @@ interface Props {
 }
 declare function ModalBase({ show, onHide, onAction, title, children, loading, btnCancel, btnSuccess, type, disabledBtnSuccess, colors, fonts, modalMaxWidth, }: Props): react_jsx_runtime.JSX.Element;
 
-interface PaginatedResponse$1 {
-    items: any[];
+interface PaginatedResponse$1<T> {
+    items: T[];
     totalPages: number;
     totalCount: number;
 }
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+interface ServiceParams {
+    page: number;
+    size: number;
+    search: string;
+    [key: string]: any;
+}
+type QueryMode<T> = {
+    queryKey: string;
+    mutationFn: (page: number, size: number, search: string) => Promise<PaginatedResponse$1<T>>;
+    service?: never;
+};
+type ServiceMode<T> = {
+    service: (params: ServiceParams) => Promise<PaginatedResponse$1<T>>;
+    queryKey?: never;
+    mutationFn?: never;
+};
+type InputAutoCompleteProps<T> = (QueryMode<T> | ServiceMode<T>) & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
     name: string;
     label?: string;
     value?: string;
-    onChange?: (value: any) => void;
-    onSelect: (item: any) => void;
     error?: FieldError;
-    defaultValue?: any;
-    inputAutocompleteActive?: string;
-    queryKey: string;
+    getLabel?: (item: T) => string;
+    renderOption: (item: T) => ReactNode$1;
+    onSelect: (item: T | null) => void;
+    onChange?: (value: string) => void;
     isUppercaseLabel?: boolean;
-    mutationFn: (pageNumber: number, pageSize: number, search: string) => Promise<PaginatedResponse$1>;
-    renderOption: (item: any) => ReactNode$1;
-}
-declare const InputAutoComplete: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+    [key: string]: any;
+};
+declare const InputAutoComplete: <T>(props: InputAutoCompleteProps<T> & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => JSX.Element;
 
 type IDataTableProps<T extends object> = {
   queryKey: string;
@@ -343,4 +359,4 @@ declare const LeafcodeThemeProvider: ({ children, theme, }: LeafcodeThemeProvide
 
 declare const defaultTheme: LeafcodeTheme;
 
-export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, InputSelect, LeafcodeThemeProvider, ModalBase, SelectFilterTemplate, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };
+export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, type InputAutoCompleteProps, InputSelect, LeafcodeThemeProvider, ModalBase, type PaginatedResponse$1 as PaginatedResponse, SelectFilterTemplate, type ServiceParams, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode as ReactNode$1, InputHTMLAttributes } from 'react';
+import react__default, { ReactNode as ReactNode$1, InputHTMLAttributes, JSX } from 'react';
 import { FieldError } from 'react-hook-form';
 import { FilterMatchMode } from 'primereact/api';
 export { FilterMatchMode, FilterOperator } from 'primereact/api';
@@ -18,7 +18,7 @@ interface ButtonProps {
 }
 declare function Button({ disabled, loading, color, type, onClick, title, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-interface InputProps$1 extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     name: string;
     label?: string | ReactNode$1;
     error?: FieldError;
@@ -29,7 +29,7 @@ interface InputProps$1 extends React.InputHTMLAttributes<HTMLInputElement> {
     validationMode?: "default" | "restricted";
     showPasswordToggle?: boolean;
 }
-declare const Input: react.ForwardRefExoticComponent<InputProps$1 & react.RefAttributes<HTMLInputElement>>;
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 
 interface TextAreaProps {
     name: string;
@@ -94,26 +94,42 @@ interface Props {
 }
 declare function ModalBase({ show, onHide, onAction, title, children, loading, btnCancel, btnSuccess, type, disabledBtnSuccess, colors, fonts, modalMaxWidth, }: Props): react_jsx_runtime.JSX.Element;
 
-interface PaginatedResponse$1 {
-    items: any[];
+interface PaginatedResponse$1<T> {
+    items: T[];
     totalPages: number;
     totalCount: number;
 }
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+interface ServiceParams {
+    page: number;
+    size: number;
+    search: string;
+    [key: string]: any;
+}
+type QueryMode<T> = {
+    queryKey: string;
+    mutationFn: (page: number, size: number, search: string) => Promise<PaginatedResponse$1<T>>;
+    service?: never;
+};
+type ServiceMode<T> = {
+    service: (params: ServiceParams) => Promise<PaginatedResponse$1<T>>;
+    queryKey?: never;
+    mutationFn?: never;
+};
+type InputAutoCompleteProps<T> = (QueryMode<T> | ServiceMode<T>) & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
     name: string;
     label?: string;
     value?: string;
-    onChange?: (value: any) => void;
-    onSelect: (item: any) => void;
     error?: FieldError;
-    defaultValue?: any;
-    inputAutocompleteActive?: string;
-    queryKey: string;
+    getLabel?: (item: T) => string;
+    renderOption: (item: T) => ReactNode$1;
+    onSelect: (item: T | null) => void;
+    onChange?: (value: string) => void;
     isUppercaseLabel?: boolean;
-    mutationFn: (pageNumber: number, pageSize: number, search: string) => Promise<PaginatedResponse$1>;
-    renderOption: (item: any) => ReactNode$1;
-}
-declare const InputAutoComplete: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+    [key: string]: any;
+};
+declare const InputAutoComplete: <T>(props: InputAutoCompleteProps<T> & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => JSX.Element;
 
 type IDataTableProps<T extends object> = {
   queryKey: string;
@@ -343,4 +359,4 @@ declare const LeafcodeThemeProvider: ({ children, theme, }: LeafcodeThemeProvide
 
 declare const defaultTheme: LeafcodeTheme;
 
-export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, InputSelect, LeafcodeThemeProvider, ModalBase, SelectFilterTemplate, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };
+export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, type InputAutoCompleteProps, InputSelect, LeafcodeThemeProvider, ModalBase, type PaginatedResponse$1 as PaginatedResponse, SelectFilterTemplate, type ServiceParams, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };

package/dist/index.js

@@ -723,23 +723,24 @@ LoadingSpinner.displayName = "LoadingSpinner";
 // src/components/Input/InputAutocomplete.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var PAGE_SIZE = 10;
-var InputBase3 = ({
-  name,
-  label,
-  error,
-  onChange,
-  onSelect,
-  value,
-  defaultValue,
-  inputAutocompleteActive,
-  queryKey,
-  mutationFn,
-  renderOption,
-  disabled,
-  placeholder,
-  isUppercaseLabel = true,
-  ...rest
-}, ref) => {
+function AutoCompleteInner(props, ref) {
+  const {
+    name,
+    label,
+    error,
+    value,
+    onChange,
+    onSelect,
+    renderOption,
+    getLabel = (item) => item?.label ?? item?.nome ?? String(item),
+    disabled,
+    placeholder,
+    isUppercaseLabel = true,
+    queryKey,
+    mutationFn,
+    service,
+    ...inputProps
+  } = props;
   const theme = useLeafcodeTheme();
   const styleVars = {
     "--label-line": theme.colors.light,
@@ -762,13 +763,31 @@ var InputBase3 = ({
   const [search, setSearch] = (0, import_react12.useState)("");
   const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
   const listRef = (0, import_react12.useRef)(null);
-  const { data, isLoading } = (0, import_react_query.useQuery)({
-    queryKey: [queryKey, pageNumber, search],
-    queryFn: () => mutationFn(pageNumber, PAGE_SIZE, search),
+  const fetcher = () => {
+    if (service) {
+      return service({
+        page: pageNumber,
+        size: PAGE_SIZE,
+        search,
+        ...props
+      });
+    }
+    return mutationFn(pageNumber, PAGE_SIZE, search);
+  };
+  const queryKeyInternal = [
+    "autocomplete",
+    queryKey ?? "service",
+    pageNumber,
+    search
+  ];
+  const query = (0, import_react_query.useQuery)({
+    queryKey: queryKeyInternal,
+    queryFn: fetcher,
     enabled: isOpen
   });
+  const { data, isLoading } = query;
   (0, import_react12.useEffect)(() => {
-    if (!data?.items) return;
+    if (!data) return;
     setItems(
       (prev) => pageNumber === 1 ? data.items : [...prev, ...data.items]
     );
@@ -777,7 +796,7 @@ var InputBase3 = ({
     const debounced = import_lodash2.default.debounce(() => {
       setPageNumber(1);
       setSearch(value ?? "");
-    }, 600);
+    }, 500);
     debounced();
     return () => debounced.cancel();
   }, [value]);
@@ -789,35 +808,18 @@ var InputBase3 = ({
     }
   };
   const handleSelect = (item) => {
-    onChange?.(item.nome);
+    const label2 = getLabel(item);
+    onChange?.(label2);
     setIsOpen(false);
     onSelect(item);
   };
-  const renderDropdown = () => {
-    if (!isOpen) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "dropdown-container", style: styleVars, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
-      items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "li",
-        {
-          onClick: () => handleSelect(item),
-          className: "dropdown-item",
-          children: renderOption(item)
-        },
-        item.id
-      )),
-      isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingSpinner, { size: 20 }) }),
-      !isLoading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
-    ] }) });
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: "input-wrapper",
       style: styleVars,
       tabIndex: -1,
-      onBlur: (e) => {
-        e.relatedTarget === null && setIsOpen(false);
-      },
+      onBlur: (e) => e.relatedTarget === null && setIsOpen(false),
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "label",
@@ -840,35 +842,46 @@ var InputBase3 = ({
               className: "input",
               value: value ?? "",
               onChange: (e) => {
-                const val = e.target.value;
-                onChange?.(val);
+                onChange?.(e.target.value);
                 setIsOpen(true);
               },
               onFocus: () => setIsOpen(true),
-              ...rest
+              ...inputProps
             }
           ),
           value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
+              className: "dropdown-clear",
               onClick: () => {
                 setPageNumber(1);
                 onChange?.("");
                 onSelect(null);
               },
-              className: "dropdown-clear",
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.X, { size: 16, className: "icone-clear" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.X, { size: 16, color: "#bf1717" })
             }
           ),
-          renderDropdown()
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "dropdown-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
+            items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "li",
+              {
+                onClick: () => handleSelect(item),
+                className: "dropdown-item",
+                children: renderOption(item)
+              },
+              i
+            )),
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingSpinner, { size: 20 }) }),
+            !isLoading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
+          ] }) })
         ] }),
         !value && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipErrorInput, { error, name })
       ]
     }
   );
-};
-var InputAutoComplete = (0, import_react12.forwardRef)(InputBase3);
+}
+var InputAutoComplete = (0, import_react12.forwardRef)(AutoCompleteInner);
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
 var import_react19 = require("react");

package/dist/index.mjs

@@ -673,23 +673,24 @@ LoadingSpinner.displayName = "LoadingSpinner";
 // src/components/Input/InputAutocomplete.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
-var InputBase3 = ({
-  name,
-  label,
-  error,
-  onChange,
-  onSelect,
-  value,
-  defaultValue,
-  inputAutocompleteActive,
-  queryKey,
-  mutationFn,
-  renderOption,
-  disabled,
-  placeholder,
-  isUppercaseLabel = true,
-  ...rest
-}, ref) => {
+function AutoCompleteInner(props, ref) {
+  const {
+    name,
+    label,
+    error,
+    value,
+    onChange,
+    onSelect,
+    renderOption,
+    getLabel = (item) => item?.label ?? item?.nome ?? String(item),
+    disabled,
+    placeholder,
+    isUppercaseLabel = true,
+    queryKey,
+    mutationFn,
+    service,
+    ...inputProps
+  } = props;
   const theme = useLeafcodeTheme();
   const styleVars = {
     "--label-line": theme.colors.light,
@@ -712,13 +713,31 @@ var InputBase3 = ({
   const [search, setSearch] = useState4("");
   const [isOpen, setIsOpen] = useState4(false);
   const listRef = useRef(null);
-  const { data, isLoading } = useQuery({
-    queryKey: [queryKey, pageNumber, search],
-    queryFn: () => mutationFn(pageNumber, PAGE_SIZE, search),
+  const fetcher = () => {
+    if (service) {
+      return service({
+        page: pageNumber,
+        size: PAGE_SIZE,
+        search,
+        ...props
+      });
+    }
+    return mutationFn(pageNumber, PAGE_SIZE, search);
+  };
+  const queryKeyInternal = [
+    "autocomplete",
+    queryKey ?? "service",
+    pageNumber,
+    search
+  ];
+  const query = useQuery({
+    queryKey: queryKeyInternal,
+    queryFn: fetcher,
     enabled: isOpen
   });
+  const { data, isLoading } = query;
   useEffect4(() => {
-    if (!data?.items) return;
+    if (!data) return;
     setItems(
       (prev) => pageNumber === 1 ? data.items : [...prev, ...data.items]
     );
@@ -727,7 +746,7 @@ var InputBase3 = ({
     const debounced = _.debounce(() => {
       setPageNumber(1);
       setSearch(value ?? "");
-    }, 600);
+    }, 500);
     debounced();
     return () => debounced.cancel();
   }, [value]);
@@ -739,35 +758,18 @@ var InputBase3 = ({
     }
   };
   const handleSelect = (item) => {
-    onChange?.(item.nome);
+    const label2 = getLabel(item);
+    onChange?.(label2);
     setIsOpen(false);
     onSelect(item);
   };
-  const renderDropdown = () => {
-    if (!isOpen) return null;
-    return /* @__PURE__ */ jsx10("div", { className: "dropdown-container", style: styleVars, children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
-      items.map((item) => /* @__PURE__ */ jsx10(
-        "li",
-        {
-          onClick: () => handleSelect(item),
-          className: "dropdown-item",
-          children: renderOption(item)
-        },
-        item.id
-      )),
-      isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 20 }) }),
-      !isLoading && items.length === 0 && /* @__PURE__ */ jsx10("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
-    ] }) });
-  };
   return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "input-wrapper",
       style: styleVars,
       tabIndex: -1,
-      onBlur: (e) => {
-        e.relatedTarget === null && setIsOpen(false);
-      },
+      onBlur: (e) => e.relatedTarget === null && setIsOpen(false),
       children: [
         label && /* @__PURE__ */ jsx10(
           "label",
@@ -790,35 +792,46 @@ var InputBase3 = ({
               className: "input",
               value: value ?? "",
               onChange: (e) => {
-                const val = e.target.value;
-                onChange?.(val);
+                onChange?.(e.target.value);
                 setIsOpen(true);
               },
               onFocus: () => setIsOpen(true),
-              ...rest
+              ...inputProps
             }
           ),
           value && /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
+              className: "dropdown-clear",
               onClick: () => {
                 setPageNumber(1);
                 onChange?.("");
                 onSelect(null);
               },
-              className: "dropdown-clear",
-              children: /* @__PURE__ */ jsx10(X3, { size: 16, className: "icone-clear" })
+              children: /* @__PURE__ */ jsx10(X3, { size: 16, color: "#bf1717" })
             }
           ),
-          renderDropdown()
+          isOpen && /* @__PURE__ */ jsx10("div", { className: "dropdown-container", children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
+            items.map((item, i) => /* @__PURE__ */ jsx10(
+              "li",
+              {
+                onClick: () => handleSelect(item),
+                className: "dropdown-item",
+                children: renderOption(item)
+              },
+              i
+            )),
+            isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 20 }) }),
+            !isLoading && items.length === 0 && /* @__PURE__ */ jsx10("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
+          ] }) })
         ] }),
         !value && !isOpen && /* @__PURE__ */ jsx10(TooltipErrorInput, { error, name })
       ]
     }
   );
-};
-var InputAutoComplete = forwardRef4(InputBase3);
+}
+var InputAutoComplete = forwardRef4(AutoCompleteInner);
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
 import { useEffect as useEffect7, useState as useState7 } from "react";

package/dist/styles/input.css

@@ -156,6 +156,7 @@ input:-webkit-autofill:focus {
   font-size: var(--input-font-size, 13px);
   box-shadow: none !important;
   background-color: var(--input-bg, #ffffff) !important;
+  text-align: left;
 }
 
 .react-select__control--is-focused {
@@ -178,6 +179,7 @@ input:-webkit-autofill:focus {
   font-family: var(--input-font-family, "Roboto", sans-serif);
   font-weight: var(--input-font-weight, 400);
   font-size: var(--input-font-size, 13px) !important;
+  text-align: left;
 }
 
 .react-select__option--is-focused {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charlesgomes/leafcode-shared-lib-react",
-  "version": "1.0.76",
+  "version": "1.0.77",
   "description": "Lib de componentes react",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",