@charlesgomes/leafcode-shared-lib-react 1.0.88 → 1.0.90

package/dist/index.mjs

@@ -5,12 +5,17 @@ import { createContext, useContext } from "react";
 // src/provider/defaultTheme.ts
 var defaultTheme = {
   colors: {
-    primary: "#00875F",
+    primary: "#3c3fe8",
+    primaryHover: "#4f46e5",
+    secundary: "",
+    secundaryHover: "",
     danger: "#ED202E",
-    border: "#D4D4D8",
+    dangerHover: "#f35353",
+    borderDisabledBg: "#D4D4D8",
     text: "#18181B",
     light: "#FFFFFF",
-    background: "#FFFFFF"
+    background: "#FFFFFF",
+    placeholder: "#71717A"
   },
   fonts: {
     body: "Roboto, sans-serif",
@@ -55,7 +60,7 @@ var defaultTheme = {
     button: {
       colors: {
         text: "#FFFFFF",
-        primaryBg: "#6366f1",
+        primaryBg: "#3c3fe8",
         primaryHoverBg: "#4f46e5",
         secondaryBg: "#bf1717",
         secondaryHoverBg: "#f35353",
@@ -73,6 +78,20 @@ var defaultTheme = {
         radius: "6px"
       }
     },
+    table: {
+      colors: {
+        text: "#FFFFFF",
+        primaryBg: "#3c3fe8",
+        primaryHoverBg: "#4f46e5"
+      },
+      fonts: {
+        family: '"Roboto", sans-serif',
+        customWeight: 500,
+        thWeight: 600,
+        weight: 800,
+        size: "13px"
+      }
+    },
     modalBase: {
       colors: {
         modalTitleColor: "#000",
@@ -122,13 +141,13 @@ function Button({
     "--button-font-family": theme.components.button.fonts.family,
     "--button-font-weight": theme.components.button.fonts.weight,
     "--button-font-size": theme.components.button.fonts.size,
-    "--button-text-color": theme.components.button.colors.text,
-    "--button-primary-bg": theme.components.button.colors.primaryBg,
-    "--button-primary-hover-bg": theme.components.button.colors.primaryHoverBg,
-    "--button-secondary-bg": theme.components.button.colors.secondaryBg,
-    "--button-secondary-hover-bg": theme.components.button.colors.secondaryHoverBg,
-    "--button-disabled-bg-color": theme.components.button.colors.disabledBg,
-    "--button-disabled-border-color": theme.components.button.colors.disabledBorder,
+    "--button-text-color": theme.colors.light,
+    "--button-primary-bg": theme.colors.primary,
+    "--button-primary-hover-bg": theme.colors.primaryHover,
+    "--button-secondary-bg": theme.colors.secundary,
+    "--button-secondary-hover-bg": theme.colors.secundaryHover,
+    "--button-disabled-bg-color": theme.colors.borderDisabledBg,
+    "--button-disabled-border-color": theme.colors.borderDisabledBg,
     "--button-height": theme.components.button.sizes.height,
     "--button-min-width": theme.components.button.sizes.minWidth,
     "--button-border-radius": theme.components.button.sizes.radius
@@ -195,12 +214,14 @@ function TooltipErrorInput({
 }) {
   const theme = useLeafcodeTheme();
   const styleVars = {
+    // Fonts
     "--input-font-family": theme.components.input.fonts.input,
     "--input-font-weight": theme.components.input.fonts.inputWeight,
     "--input-font-size": theme.components.input.fonts.inputSize,
-    "--input-text-color": theme.components.input.colors.text,
+    // Colors
+    "--input-text-color": theme.colors.light,
     "--input-text-color-hover": theme.colors.light,
-    "--input-error-border": theme.components.input.colors.errorBorder,
+    "--input-error-border": theme.colors.danger,
     "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
   };
   const [isTooltipOpen, setIsTooltipOpen] = useState(true);
@@ -291,25 +312,25 @@ var InputBase = ({
     "--input-font-weight": theme.components.input.fonts.inputWeight,
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
-    "--label-color": theme.components.input.colors.text,
-    "--label-line": theme.components.input.colors.labelLine,
-    "--input-border": theme.components.input.colors.border,
-    "--input-bg": theme.components.input.colors.background,
-    "--autofill-box-shadow": theme.components.input.colors.background,
-    "--autofill-text-color": theme.components.input.colors.text,
-    "--autofill-border": theme.components.input.colors.focusBorder,
-    "--input-text-color": theme.components.input.colors.text,
-    "--input-placeholder": theme.components.input.colors.placeholder,
-    "--input-focus-border": theme.components.input.colors.focusBorder,
-    "--input-error-border": theme.components.input.colors.errorBorder,
-    "--color-password-toggle": theme.components.input.colors.passwordToggle,
+    "--label-color": theme.colors.text,
+    "--label-line": theme.colors.light,
+    "--input-border": theme.colors.borderDisabledBg,
+    "--input-bg": theme.colors.background,
+    "--autofill-box-shadow": theme.colors.background,
+    "--autofill-text-color": theme.colors.text,
+    "--autofill-border": theme.colors.primary,
+    "--input-text-color": theme.colors.text,
+    "--input-placeholder": theme.colors.placeholder,
+    "--input-focus-border": theme.colors.primary,
+    "--input-error-border": theme.colors.danger,
+    "--color-password-toggle": theme.colors.placeholder,
     // Sizes
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
   };
   const handleChange = (e) => {
     let val = e.target.value;
-    if (validationMode === "restricted") {
+    if (validationMode === "restricted" && !showPasswordToggle) {
       val = val.replace(/[^a-zA-Z0-9_.-]/g, "");
       val = val.replace(/^\.+/, "");
       val = val.replace(/\.+$/, "");
@@ -318,7 +339,8 @@ var InputBase = ({
     e.target.value = val;
     onChange?.(e);
   };
-  const [show, setShow] = useState2(true);
+  const [show, setShow] = useState2(false);
+  const isPassword = showPasswordToggle;
   const handleClick = () => setShow(!show);
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -341,7 +363,8 @@ var InputBase = ({
               id: name,
               name,
               disabled,
-              type: show ? "text" : "password",
+              type: isPassword ? show ? "text" : "password" : rest.type ?? "text",
+              autoComplete: isPassword ? rest.autoComplete ?? "current-password" : rest.autoComplete,
               className: `input ${error && "input-error"} ${isUppercaseText && "is-uppercase"}`,
               placeholder,
               onFocus,
@@ -391,17 +414,17 @@ var TextAreaBase = ({
     "--input-font-weight": theme.components.input.fonts.inputWeight,
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
-    "--label-color": theme.components.input.colors.text,
-    "--label-line": theme.components.input.colors.labelLine,
-    "--input-border": theme.components.input.colors.border,
-    "--input-bg": theme.components.input.colors.background,
-    "--autofill-box-shadow": theme.components.input.colors.background,
-    "--autofill-text-color": theme.components.input.colors.text,
-    "--input-text-color": theme.components.input.colors.text,
-    "--input-placeholder": theme.components.input.colors.placeholder,
-    "--input-focus-border": theme.components.input.colors.focusBorder,
-    "--input-error-border": theme.components.input.colors.errorBorder,
-    "--color-password-toggle": theme.components.input.colors.passwordToggle,
+    "--label-color": theme.colors.text,
+    "--label-line": theme.colors.light,
+    "--input-border": theme.colors.borderDisabledBg,
+    "--input-bg": theme.colors.background,
+    "--autofill-box-shadow": theme.colors.background,
+    "--autofill-text-color": theme.colors.text,
+    "--input-text-color": theme.colors.text,
+    "--input-placeholder": theme.colors.placeholder,
+    "--input-focus-border": theme.colors.primary,
+    "--input-error-border": theme.colors.danger,
+    "--color-password-toggle": theme.colors.placeholder,
     // Sizes
     "--input-height-text-area": theme.components.input.sizes.heightTextArea,
     "--input-border-radius": theme.components.input.sizes.radius
@@ -480,15 +503,17 @@ var InputBase2 = ({
     "--input-font-weight": theme.components.input.fonts.inputWeight,
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
-    "--label-color": theme.components.input.colors.text,
-    "--input-border": theme.components.input.colors.border,
-    "--input-bg": theme.components.input.colors.background,
-    "--label-line": theme.components.input.colors.labelLine,
+    "--label-color": theme.colors.text,
+    "--label-line": theme.colors.light,
+    "--input-border": theme.colors.borderDisabledBg,
+    "--input-bg": theme.colors.background,
     "--input-text-color": theme.colors.light,
-    "--input-placeholder": theme.components.input.colors.placeholder,
-    "--input-focus-border": theme.components.input.colors.focusBorder,
-    "--input-error-border": theme.components.input.colors.errorBorder,
-    "--color-password-toggle": theme.components.input.colors.passwordToggle,
+    "--input-text-single-color": theme.colors.text,
+    "--input-placeholder": theme.colors.placeholder,
+    "--input-focus-border": theme.colors.primary,
+    "--input-error-border": theme.colors.danger,
+    "--color-password-toggle": theme.colors.placeholder,
+    "--dropdown-item-hover-bg-color": theme.colors.primaryHover,
     // Sizes
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
@@ -598,15 +623,18 @@ function ModalBase({
 }) {
   const theme = useLeafcodeTheme();
   const styleVars = {
+    // Fonts
     "--modal-title-font-weight": theme.components.modalBase.fonts?.modalTitleFontWeight,
     "--modal-title-font-size": theme.components.modalBase.fonts?.modalTitleFontSize,
     "--modal-title-font-family": theme.components.modalBase.fonts?.modalTitleFontFamily,
     "--modal-body-font-family": theme.components.modalBase.fonts?.modalBodyFontFamily,
     "--modal-body-font-size": theme.components.modalBase.fonts?.modalBodyFontSize,
-    "--modal-bg-color": theme.components.modalBase.colors?.modalBgColor,
-    "--modal-title-color": theme.components.modalBase.colors?.modalTitleColor,
-    "--modal-body-color": theme.components.modalBase.colors?.modalBodyColor,
-    "--modal-close-color": theme.components.modalBase.colors?.modalCloseColor,
+    // Colors
+    "--modal-bg-color": theme.colors.background,
+    "--modal-title-color": theme.colors.text,
+    "--modal-body-color": theme.colors.background,
+    "--modal-close-color": theme.colors.danger,
+    // Sizes
     "--modal-max-width": theme.components.modalBase.sizes.modalMaxWidth
   };
   useEffect3(() => {
@@ -675,8 +703,8 @@ var LoadingSpinner = memo(({ size = 20 }) => {
       style: {
         width: size,
         height: size,
-        border: `3px solid ${theme.components.input.colors.focusBorder}33`,
-        borderTopColor: theme.components.input.colors.focusBorder,
+        border: `3px solid ${theme.colors.primary}33`,
+        borderTopColor: theme.colors.primary,
         borderRadius: "50%",
         display: "inline-block",
         animation: "leafcode-spin 0.8s linear infinite"
@@ -710,18 +738,21 @@ function AutoCompleteInner(props, ref) {
   } = props;
   const theme = useLeafcodeTheme();
   const styleVars = {
-    "--label-line": theme.components.input.colors.labelLine,
+    // Fonts
     "--label-font-family": theme.components.input.fonts.label,
     "--label-font-weight": theme.components.input.fonts.labelWeight,
     "--label-font-size": theme.components.input.fonts.labelSize,
-    "--dropdown-empty-color": theme.components.input.colors.text,
+    // Colors
+    "--label-color": theme.colors.text,
+    "--label-line": theme.colors.light,
+    "--input-border": theme.colors.borderDisabledBg,
+    "--input-bg": theme.colors.background,
+    "--input-text-color": theme.colors.text,
+    "--dropdown-empty-color": theme.colors.text,
     "--dropdown-item-hover-bg-color": theme.colors.primary,
-    "--label-color": theme.components.input.colors.text,
-    "--input-border": theme.components.input.colors.border,
-    "--input-bg": theme.components.input.colors.background,
-    "--input-text-color": theme.components.input.colors.text,
-    "--input-focus-border": theme.components.input.colors.focusBorder,
+    "--input-focus-border": theme.colors.primary,
     "--dropdown-item-hover-color": theme.colors.light,
+    // Sizes
     "--input-height": theme.components.input.sizes.height,
     "--input-border-radius": theme.components.input.sizes.radius
   };
@@ -1244,9 +1275,13 @@ function DataTableAdvancedFilterWrapper({
   };
   const [page, setPage] = useState6(initialState.page);
   const [rows, setRows] = useState6(initialState.rows);
-  const [first, setFirst] = useState6((initialState.page - 1) * initialState.rows);
+  const [first, setFirst] = useState6(
+    (initialState.page - 1) * initialState.rows
+  );
   const [sortField, setSortField] = useState6(initialState.sortField);
-  const [sortOrder, setSortOrder] = useState6(initialState.sortOrder ?? 1);
+  const [sortOrder, setSortOrder] = useState6(
+    initialState.sortOrder ?? 1
+  );
   const [searchText, setSearchText] = useState6(initialState.filter ?? "");
   const [filters, setFilters] = useState6({
     ...initFilters,
@@ -1386,7 +1421,35 @@ function DataTableAdvancedFilterWrapper({
       customActions
     ]
   );
-  return /* @__PURE__ */ jsx16(Fragment6, { children: isClient && /* @__PURE__ */ jsxs11("div", { children: [
+  const theme = useLeafcodeTheme();
+  const styleVars = {
+    "--table-font-family": theme.components.table.fonts.family,
+    "--table-font-weight": theme.components.table.fonts.weight,
+    "--table-custom-font-weight": theme.components.table.fonts.customWeight,
+    "--table-font-size": theme.components.table.fonts.size,
+    "--table-th-font-weight": theme.components.table.fonts.thWeight,
+    "--table-th-font-size": theme.components.table.fonts.size,
+    "--custom-input-focus": theme.colors.primary,
+    "--prev-next-enabled-hover": theme.colors.primaryHover,
+    "--p-checkbox-box-border": theme.colors.primary,
+    "--p-checkbox-highlight-border": theme.colors.primary,
+    "--p-checkbox-highlight-bg": theme.colors.primary,
+    "--p-checkbox-boder-hover": theme.colors.primaryHover,
+    "--p-checkbox-bg": theme.colors.primary,
+    "--p-dropdown-bg": theme.colors.primary,
+    "--p-column-filter-hover-focus": theme.colors.primary,
+    "--p-column-filter-button-active": theme.colors.primary,
+    "--p-sortable-column-icon-bg": theme.colors.primary,
+    "--p-column-filter-add-button-color": theme.colors.primary,
+    "--p-column-filter-buttonbar-bg": theme.colors.primary,
+    "--p-column-filter-buttonbar-bg-hover": theme.colors.primaryHover,
+    "--enable-button-table-actions-hover": theme.colors.primaryHover,
+    "--btn-icone-actions-column-hover": theme.colors.primaryHover,
+    "--p-datepicker": theme.colors.primary,
+    "--p-datepicker-prev-next": theme.colors.primary,
+    "--p-datepicker-button": theme.colors.primary
+  };
+  return /* @__PURE__ */ jsx16(Fragment6, { children: isClient && /* @__PURE__ */ jsxs11("div", { style: styleVars, children: [
     disablePagination && /* @__PURE__ */ jsx16("div", { className: "disablePagination", children: TableHeaderAndTableActions }),
     /* @__PURE__ */ jsxs11(
       DataTable,

package/dist/styles/input.css

@@ -114,7 +114,8 @@ input:-webkit-autofill:focus {
 
 .password-toggle {
   position: absolute;
-  bottom: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
   color: var(--color-password-toggle, #a5a5a5);
   cursor: pointer;
   width: 1.25rem;
@@ -250,7 +251,8 @@ input:-webkit-autofill:focus {
 .dropdown-clear {
   position: absolute;
   right: 0.75rem;
-  top: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
   background: none;
   border: none;
   padding: 0;
@@ -260,3 +262,27 @@ input:-webkit-autofill:focus {
 .icone-clear {
   color: var(--input-error-border, #f87171);
 }
+
+/* O container da lista (Menu) */
+.react-select__menu {
+  background-color: var(--input-bg, #ffffff) !important;
+  border: 1px solid var(--input-bg, #ffffff);
+}
+
+/* Quando você passa o mouse por cima (Hover/Focus) */
+.react-select__option--is-focused {
+  background-color: var(--dropdown-item-hover-bg-color, #333333) !important;
+  color: var(--input-text-color, #ffffff) !important;
+}
+
+/* O texto dentro da caixa principal */
+.react-select__single-value {
+  color: var(--input-text-single-color, #070707) !important;
+}
+
+/* ESTADO DESABILITADO */
+.react-select__control--is-disabled {
+  border-color: var(--input-disabled-border, #d1d5db) !important;
+  background-color: var(--input-disabled-bg, #f3f4f6) !important;
+  cursor: not-allowed;
+}

package/dist/styles/modalBase.css

@@ -69,7 +69,7 @@
   padding: 1.5rem;
   font-family: var(--modal-body-font-family, "roboto", sans-serif);
   font-size: var(--modal-body-font-size, 1rem);
-  color: var(--modal-body-color, #000);
+  color: #000;
 }
 
 .modal-backdrop {

package/dist/styles/table.css

@@ -12,22 +12,22 @@
 }
 
 .tableClassName {
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-font-weight, 600);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
 }
 
 .paginatorClassName {
   padding: 0 0 0.75rem 0;
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-font-weight, 600);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
 }
 
 .custom-input {
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
   color: #1c1c1c;
   padding: 0 1.25rem;
   width: 13rem;
@@ -37,7 +37,7 @@
 }
 
 .custom-input:focus {
-  border: 1px solid #175dbf;
+  border: 1px solid var(--custom-input-focus, #6366f1);
   box-shadow: none;
 }
 
@@ -70,13 +70,13 @@
 
 .PrevPageEnabled:hover,
 .NextPageEnabled:hover {
-  background-color: #175dbf;
+  background-color: var(--prev-next-enabled-hover, #6366f1);
 }
 
 .pageReport {
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
   color: #191919;
   padding: 0 0.5rem;
 }
@@ -89,15 +89,15 @@
 
 .custom-select-filtro {
   height: 2rem;
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
-  font-size: 0.875rem;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-size: var(--table-font-size, 0.875rem);
 }
 
 .mensagem-nenhum-dado {
   text-align: center;
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
   padding: 2rem 0;
   color: #191919;
 }
@@ -126,8 +126,8 @@ th {
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
   padding: 0 0 0 7px;
-  font-size: 14px;
-  font-family: "Roboto", sans-serif;
+  font-size: var(--table-th-font-size, 14px);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
   font-weight: bold;
   color: #373737;
 }
@@ -174,21 +174,21 @@ th {
 .p-datatable .p-datatable-tbody > tr {
   background: #fff;
   color: #000;
-  font-family: "roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
 }
 
 .p-checkbox .p-checkbox-box {
   width: 1rem;
   height: 1rem;
-  border: 1px solid #094394 !important;
+  border: 1px solid var(--p-checkbox-box-border, #6366f1) !important;
   border-radius: 4px !important;
   background-color: #fff;
 }
 
 .p-checkbox.p-highlight .p-checkbox-box {
-  border-color: #094394;
-  background: #094394;
+  border-color: var(--p-checkbox-highlight-border, #6366f1);
+  background: var(--p-checkbox-highlight-bg, #6366f1);
 }
 
 .p-checkbox {
@@ -198,8 +198,8 @@ th {
 
 .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight
   .p-checkbox-box {
-  border-color: #094394;
-  background: #094394;
+  border-color: var(--p-checkbox-boder-hover, #4f46e5);
+  background: var(--p-checkbox-bg, #6366f1);
   color: #ffffff;
 }
 
@@ -245,7 +245,7 @@ th {
 }
 
 .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background: #fafbfc;
+  background: #f3f3f3;
 }
 
 .p-dropdown {
@@ -260,16 +260,16 @@ th {
 
 .p-dropdown-label,
 .p-dropdown-item-label {
-  font-size: 14px;
-  font-family: "roboto", sans-serif;
+  font-size: var(--table-th-font-size, 14px);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
   font-weight: bold;
   padding: 0 1rem 0 1rem;
 }
 
 .p-dropdown-item-label {
   padding: 6px 1rem;
-  font-weight: 500;
-  font-family: "Roboto", sans-serif;
+  font-weight: var(--table-custom-font-weight, 500);
+  font-family: var(--table-font-family, "Roboto", sans-serif);
 }
 
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
@@ -279,7 +279,7 @@ th {
 }
 
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
-  background: #094394;
+  background: var(--p-dropdown-bg, #6366f1);
   color: #fff;
   padding: 0;
 }
@@ -304,8 +304,8 @@ th {
 }
 
 .p-column-filter {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
   margin-top: 0.25rem;
   transition: all 0.3s ease-in-out;
   border: 1px solid #e1e1e6;
@@ -326,7 +326,7 @@ th {
 
 .p-column-filter:hover,
 .p-column-filter:focus {
-  border-color: #094394;
+  border-color: var(--p-column-filter-hover-focus, #6366f1);
 }
 
 .p-column-filter-menu {
@@ -352,7 +352,7 @@ th {
 
 /* Botão ativo */
 .p-column-filter-menu-button.p-column-filter-menu-button-active {
-  background-color: #094394;
+  background-color: var(--p-column-filter-button-active, #6366f1);
   color: #ffffff;
   padding: 6px;
   margin-left: 4px;
@@ -364,7 +364,7 @@ th {
 
 [aria-sort="ascending"] .p-sortable-column-icon,
 [aria-sort="descending"] .p-sortable-column-icon {
-  background-color: #094394;
+  background-color: var(--p-sortable-column-icon-bg, #6366f1);
   color: #ffffff !important;
   padding: 6px;
   margin-left: 4px;
@@ -381,13 +381,14 @@ th {
 .p-column-title {
   flex: 1;
   text-align: left;
+  font-weight: var(--table-th-font-weight, 800);
 }
 
 .p-column-filter-add-button {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
   font-size: 12px;
-  color: #094394;
+  color: var(--p-column-filter-add-button-color, #6366f1);
   box-shadow: none;
   display: flex;
   gap: 8px;
@@ -409,17 +410,17 @@ th {
 }
 
 .p-column-filter-buttonbar .p-c {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
   font-size: 13px;
   color: #fff;
-  background-color: #1b3540;
+  background-color: var(--p-column-filter-buttonbar-bg, #6366f1);
   padding: 4px 10px;
   border-radius: 4px;
 }
 
 .p-column-filter-buttonbar .p-c:hover {
-  background-color: #094394;
+  background-color: var(--p-column-filter-buttonbar-bg-hover, #4f46e5);
 }
 
 .p-component .p-button-outlined,
@@ -428,8 +429,8 @@ th {
 }
 
 .p-column-filter-remove-button {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
+  font-family: var(--table-font-family, "Roboto", sans-serif);
+  font-weight: var(--table-custom-font-weight, 500);
   font-size: 12px;
   color: #f35353;
   box-shadow: none;
@@ -480,7 +481,7 @@ th {
 
 .enable-button-table-actions:hover {
   color: #fff;
-  background-color: #175dbf;
+  background-color: var(--enable-button-table-actions-hover, #6366f1);
 }
 
 .disable-button-table-actions {
@@ -553,11 +554,11 @@ th {
 
 .btn-icone-actions-column:hover {
   color: #ffffff;
-  background-color: #175dbf;
+  background-color: var(--btn-icone-actions-column-hover, #6366f1);
 }
 
 .tooltip-custom {
-  font-weight: 500;
+  font-weight: var(--table-custom-font-weight, 500);
   font-size: 13px;
 }
 
@@ -610,16 +611,16 @@ th {
 
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
-  color: #4b5563 !important;
+  color: var(--p-datepicker, #4f46e5) !important;
 }
 
 .p-datepicker .p-datepicker-header .p-datepicker-prev,
 .p-datepicker .p-datepicker-header .p-datepicker-next {
-  color: #6b7280 !important;
+  color: var(--p-datepicker-prev-next, #4f46e5) !important;
 }
 
 .p-datepicker .p-timepicker button {
-  color: #6b7280 !important;
+  color: var(--p-datepicker-button, #4f46e5) !important;
 }
 
 .p-datepicker-calendar th {

package/package.json

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