@m4l/components 9.1.89 → 9.1.91

package/@types/types.d.ts

@@ -141,11 +141,14 @@ import { RHFAutocompleteOwnerState, RHFAutocompleteSlotsType } from '../componen
 import { PropagateLoaderSpinnerOwnerState, PropagateLoaderSpinnerType } from '../components/extended/React-Spinners/PropagateLoaderSpinner/types';
 import { LinearProgressIndeterminateOwnerState, LinearProgressIndeterminateType } from '../components/LinearProgressIndeterminate/types';
 import { MenuDividerOwnerState, MenuDividerSlotsType } from '../components/mui_extended/MenuDivider/types';
+import { NavLinkOwnerState, NavLinkSlotsType } from '../components/mui_extended/NavLink/types';
+
 import { RHFSelectSlotsType, RHFSelectOwnerState } from '../components/hook-form/RHFSelect/types';
 import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-form/RHFCheckbox/types';
 import { DateTimePickerOwnerState, DateTimePickerSlotsType } from '../components/mui_extended/DateTimePicker/types';
 import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
 
+
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -203,6 +206,7 @@ declare module '@mui/material/styles' {
     M4LRHFTextFieldPassword: RHFTextFieldPasswordType;
     M4LLinearProgressIndeterminate: LinearProgressIndeterminateType;
     M4LMenuDivider: MenuDividerSlotsType;
+    M4LNavLink: NavLinkSlotsType;
     M4LRHFSelect: RHFSelectSlotsType;
     M4LDateTimePicker: DateTimePickerSlotsType;
     M4LDivider: DividerSlotsType;
@@ -264,6 +268,7 @@ declare module '@mui/material/styles' {
     M4LRHFTextFieldPassword: Partial<RHFTextFieldPasswordOwnerState>;
     M4LLinearProgressIndeterminate: Partial<LinearProgressIndeterminateOwnerState>;
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
+    M4LNavLink: Partial<NavLinkOwnerState>;
     M4LRHFSelect: Partial<RHFSelectOwnerState>;
     M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
     M4LDivider: Partial<DividerOwnerState>;
@@ -540,6 +545,11 @@ declare module '@mui/material/styles' {
         styleOverrides?: ComponentsOverrides<Theme>['M4LMenuDivider'];
         variants?: ComponentsVariants['M4LMenuDivider'];
       };
+    M4LNavLink?: {
+        defaultProps?: ComponentsPropsList['M4LNavLink'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LNavLink'];
+        variants?: ComponentsVariants['M4LNavLink'];
+      };
 
     M4LRHFSelect?: {
         defaultProps?: ComponentsPropsList['M4LRHFSelect'];

package/components/Pager/Pager.d.ts

@@ -48,7 +48,7 @@ import { PagerProps } from './types';
  * ```
  * @author cesar - automatic
  * @createdAt 2025-01-15 17:01:04 - automatic
- * @updatedAt 2025-01-21 15:32:35 - automatic
+ * @updatedAt 2025-01-29 08:56:53 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function Pager(props: PagerProps): import("react/jsx-runtime").JSX.Element;

package/components/Pager/Pager.js

@@ -13,8 +13,8 @@ function Pager(props) {
     page = 0,
     onPageChange,
     onRowsPerPageChange,
-    labelRows = "Filas por página",
-    labelOf = "de",
+    labelRows,
+    labelOf,
     size = "medium"
   } = props;
   const totalPages = useMemo(() => Math.max(1, Math.ceil(totalRecords / rowsPerPage)), [totalRecords, rowsPerPage]);
@@ -24,9 +24,12 @@ function Pager(props) {
   const currentPage = useMemo(() => {
     return Math.max(0, Math.min(page, totalPages - 1));
   }, [page, totalPages]);
-  const formattedLabelDisplayedRows = useMemo(() => {
-    return totalRecords === 0 ? `${getLabel(PAGER_DICTIONARY.no_records)}` : `${getLabel(PAGER_DICTIONARY.page)}  ${currentPage + 1} ${labelOf} ${totalPages}`;
-  }, [currentPage, totalPages, labelOf, totalRecords, getLabel]);
+  const memoizedLabelOf = useMemo(() => {
+    return labelOf ?? getLabel(PAGER_DICTIONARY.of);
+  }, [labelOf, getLabel]);
+  const memoizedLabelTotalRows = useMemo(() => {
+    return labelRows ?? getLabel(PAGER_DICTIONARY.total_rows);
+  }, [labelRows, getLabel]);
   const handleChangeRowsPerPage = (option) => {
     if (onRowsPerPageChange && option.value !== void 0) {
       onRowsPerPageChange(option.value);
@@ -47,11 +50,11 @@ function Pager(props) {
       rowsPerPageOptions,
       count: totalRecords,
       rowsPerPage,
-      labelRowsPerPage: labelRows,
       page: currentPage,
       onPageChange: handleChangePage,
       onRowsPerPageChange: handleChangeRowsPerPage,
-      labelDisplayedRows: () => formattedLabelDisplayedRows
+      labelOf: memoizedLabelOf,
+      labelTotalRows: memoizedLabelTotalRows
     }
   ) });
 }

package/components/Pager/dicctionary.d.ts

@@ -8,5 +8,6 @@ export declare const PAGER_DICTIONARY: {
     readonly page: "pager.page";
     readonly no_records: "pager.no_records";
     readonly total_rows: "pager.total_rows";
+    readonly rows: "pager.rows";
 };
 export declare function getPagerComponentsDictionary(): string[];

package/components/Pager/dicctionary.js

@@ -7,7 +7,8 @@ const PAGER_DICTIONARY = {
   of: "pager.of",
   page: "pager.page",
   no_records: "pager.no_records",
-  total_rows: "pager.total_rows"
+  total_rows: "pager.total_rows",
+  rows: "pager.rows"
 };
 function getPagerComponentsDictionary() {
   return ["pager"];

package/components/Pager/subcomponents/CustomTablePagination/CustomTablePagination.d.ts

@@ -3,7 +3,7 @@ import { CustomTablePaginationProps } from './types';
  * CustomTablePagination component
  * @author cesar - automatic
  * @createdAt 2025-01-15 17:13:29 - automatic
- * @updatedAt 2025-01-22 12:52:40 - automatic
+ * @updatedAt 2025-01-28 14:04:43 - automatic
  * @updatedUser cesar - automatic
  */
 export declare const CustomTablePagination: (props: CustomTablePaginationProps) => import("react/jsx-runtime").JSX.Element;

package/components/Pager/subcomponents/CustomTablePagination/CustomTablePagination.js

@@ -13,7 +13,9 @@ const CustomTablePagination = (props) => {
     rowsPerPageOptions = [10, 25, 50, 100],
     onRowsPerPageChange,
     onPageChange,
-    size
+    size,
+    labelOf,
+    labelTotalRows
   } = props;
   const [localRowsPerPage, setLocalRowsPerPage] = useState(rowsPerPage);
   const [localPage, setLocalPage] = useState(Math.max(0, page));
@@ -32,13 +34,17 @@ const CustomTablePagination = (props) => {
   const currentPage = useMemo(() => {
     return Math.max(0, Math.min(localPage, totalPages - 1));
   }, [localPage, totalPages]);
+  const memoizedLabelPage = useMemo(() => getLabel(PAGER_DICTIONARY.page), [getLabel]);
+  const memoizedLabelRows = useMemo(() => getLabel(PAGER_DICTIONARY.rows), [getLabel]);
+  const memoizedLabelRowsPerPage = useMemo(() => getLabel(PAGER_DICTIONARY.rows_per_page), [getLabel]);
+  const memoizedLabelNoRecords = useMemo(() => getLabel(PAGER_DICTIONARY.no_records), [getLabel]);
   const formattedLabelDisplayedRows = useMemo(() => {
     if (countTotal === 0) {
-      return `${getLabel(PAGER_DICTIONARY.no_records)}`;
+      return memoizedLabelNoRecords;
     }
     const displayedPage = currentPage === 1 ? 1 : currentPage + 1;
-    return `${getLabel(PAGER_DICTIONARY.page)} ${displayedPage} ${getLabel(PAGER_DICTIONARY.of)} ${totalPages}`;
-  }, [currentPage, totalPages, countTotal, getLabel]);
+    return `${memoizedLabelPage} ${displayedPage} ${labelOf} ${totalPages}`;
+  }, [currentPage, totalPages, countTotal, labelOf, memoizedLabelPage, memoizedLabelNoRecords]);
   const handleChangeRowsPerPage = (option) => {
     const selectedValue = Number(option.id);
     const newTotalPages = Math.ceil(countTotal / selectedValue);
@@ -46,7 +52,7 @@ const CustomTablePagination = (props) => {
     setLocalRowsPerPage(selectedValue);
     setLocalPage(newPage);
     if (onRowsPerPageChange) {
-      onRowsPerPageChange({ id: selectedValue, value: selectedValue, label: `${selectedValue} filas` });
+      onRowsPerPageChange({ id: selectedValue, value: selectedValue, label: `${selectedValue} ${memoizedLabelRows}` });
     }
     if (onPageChange) {
       onPageChange(null, newPage);
@@ -54,9 +60,9 @@ const CustomTablePagination = (props) => {
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     rowsPerPageOptions?.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(TotalRowStyled, { skeletonWidth: 50, size, variant: "body", children: `${getLabel(PAGER_DICTIONARY.total_rows)}: ${countTotal}` }),
+      /* @__PURE__ */ jsx(TotalRowStyled, { skeletonWidth: 50, size, variant: "body", children: `${labelTotalRows}: ${countTotal}` }),
       /* @__PURE__ */ jsxs(LabelSelectContainerStyled, { children: [
-        /* @__PURE__ */ jsx(RowsPerPageStyled, { skeletonWidth: 50, size, variant: "body", children: `${getLabel(PAGER_DICTIONARY.rows_per_page)}:` }),
+        /* @__PURE__ */ jsx(RowsPerPageStyled, { skeletonWidth: 50, size, variant: "body", children: `${memoizedLabelRowsPerPage}:` }),
         /* @__PURE__ */ jsx(
           Select,
           {

package/components/Pager/subcomponents/CustomTablePagination/types.d.ts

@@ -1,9 +1,46 @@
 import { LabelDisplayedRowsArgs, TablePaginationProps } from '@mui/material';
 import { selectOption } from '../../types';
 export type CustomTablePaginationProps = {
+    /**
+     * Label for the rows per page select.
+     * @deprecated Use `slotProps.select` instead.
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     */
+    labelOf: string;
+    /**
+     * List of rows per page options.
+     * @author cesar - automatic
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     * @updatedAt 2025-01-28 14:04:43 - automatic
+     * @updatedUser cesar - automatic
+     */
     rowsPerPageOptions: number[];
     onPageChange: (_event: unknown, newPage: number) => void;
-    labelRowsPerPage: string;
+    /**
+     * Label rows per page.
+     * @deprecated Use `slotProps.select` instead.
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     */
+    labelRowsPerPage?: string;
+    /**
+     * Label total rows.
+     * @createdAt 2025-01-27 17:28:22 - automatic
+     */
+    labelTotalRows?: string;
+    /**
+     * Total number of rows.
+     * @author cesar - automatic
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     * @updatedAt 2025-01-28 14:04:43 - automatic
+     * @updatedUser cesar - automatic
+     */
     onRowsPerPageChange: (option: selectOption<number>) => void;
+    /**
+     * Labe displayed rows.
+     * @author cesar - automatic
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     * @updatedAt 2025-01-28 14:04:43 - automatic
+     * @updatedUser cesar - automatic
+     */
     labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => string;
 } & Omit<TablePaginationProps, 'onPageChange' | 'onRowsPerPageChange' | 'ActionsComponent' | 'labelDisplayedRows'>;

package/components/Pager/subcomponents/PagerActions/PagerActions.d.ts

@@ -1,9 +1,9 @@
 import { PagerActionsProps } from './types';
 /**
- * TODO: Documentar
+ * PagerActions component is a subcomponent of the Pager component that allows the user to navigate between different pages.
  * @author cesar - automatic
  * @createdAt 2025-01-15 17:13:29 - automatic
- * @updatedAt 2025-01-21 14:06:55 - automatic
+ * @updatedAt 2025-01-27 08:17:21 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function PagerActions(props: PagerActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/Pager/types.d.ts

@@ -12,7 +12,20 @@ export interface PagerProps {
     page: number;
     onPageChange: (newPage: number) => void;
     onRowsPerPageChange: (newRowsPerPage: number) => void;
+    /**
+     * Label rows per page.
+     * @deprecated Use `slotProps.select` instead.
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     * @author cesar - automatic
+     * @updatedAt 2025-01-27 15:51:21 - automatic
+     * @updatedUser cesar - automatic
+     */
     labelRows?: string;
+    /**
+     * Label for the rows per page select.
+     * @deprecated Use `slotProps.select` instead.
+     * @createdAt 2025-01-27 15:42:54 - automatic
+     */
     labelOf?: string;
     size?: Extract<Sizes, 'small' | 'medium'>;
 }

package/components/index.d.ts

@@ -28,7 +28,7 @@ export * from './maps';
 export * from './modal';
 export * from './LoadingError';
 export * from './MFLoader';
-export { NavLink } from './NavLink';
+export { NavLink } from './mui_extended/NavLink';
 export * from './NoItemSelected';
 export * from './NoItemSelected/dictionary';
 export * from './ObjectLogs';

package/components/mui_extended/NavLink/NavLink.d.ts

@@ -0,0 +1,9 @@
+import { NavLinkProps } from './types';
+/**
+ * NavLink es un componente de presentación e interacción diseñado para facilitar la navegación dentro de una aplicación o sitio web.
+ * Este componente utiliza un texto o enlace visualmente destacado que permite a los usuarios acceder rápidamente a una página o sección de interés. Su diseño lo hace fácilmente identificable,
+ * lo que mejora la experiencia de usuario al proporcionar una interfaz clara e intuitiva.
+ * @param {NavLinkProps} props - Las propiedades del componente.
+ * @returns {JSX.Element} El componente NavLink renderizado.
+ */
+export declare const NavLink: (props: NavLinkProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/NavLink/NavLink.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { R as RouterNavLinkRootStyled, a as RouterNavLinkStyled, T as TypographyStyled, S as SkeletonStyled } from "./slots/NavLinkSlots.js";
+import { useModuleSkeleton } from "@m4l/core";
+import { N as NAV_LINK_KEY_COMPONENT, c as classNavLinkRoot, a as NAV_LINK_SPECIFY } from "./constants.js";
+import { N as NavLinkSlots } from "./slots/NavLinkEnum.js";
+import { clsx } from "clsx";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const NavLink = (props) => {
+  const {
+    children,
+    text,
+    size = "medium",
+    disabled,
+    skeletonWidth,
+    color,
+    dataTestId,
+    ...others
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const ownerState = {
+    disabled,
+    size
+  };
+  return /* @__PURE__ */ jsx(
+    RouterNavLinkRootStyled,
+    {
+      ownerState: {},
+      ...getPropDataTestId(NAV_LINK_KEY_COMPONENT, NavLinkSlots.root, dataTestId),
+      children: !isSkeleton ? /* @__PURE__ */ jsx(
+        RouterNavLinkStyled,
+        {
+          size: adjustedSize,
+          role: "link",
+          ownerState,
+          disabled,
+          "aria-disabled": disabled,
+          ...others,
+          children: ({ isActive }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              TypographyStyled,
+              {
+                size: adjustedSize,
+                color,
+                disabled,
+                ownerState,
+                skeletonWidth,
+                className: clsx(
+                  classNavLinkRoot,
+                  NAV_LINK_SPECIFY,
+                  "M4lclassCssSpecificity",
+                  { active: isActive, inactive: !isActive }
+                ),
+                children: text
+              }
+            ),
+            typeof children === "function" ? children({ isActive }) : children
+          ] })
+        }
+      ) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "rounded" }) })
+    }
+  );
+};
+export {
+  NavLink as N
+};

package/components/mui_extended/NavLink/NavLink.styles.d.ts

@@ -0,0 +1,2 @@
+import { NavLinkStyles } from './types';
+export declare const navLinkStyles: NavLinkStyles;

package/components/mui_extended/NavLink/NavLink.styles.js

@@ -0,0 +1,85 @@
+import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
+import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
+const navLinkStyles = {
+  /** 🌳  Estilos para el componente raiz 🌳 */
+  root: () => ({}),
+  /** 🔠 Estilos para el componente Typography 🔠 */
+  typographyStyled: ({ ownerState, theme }) => ({
+    "&.MuiTypography-root": {
+      color: "inherit",
+      cursor: ownerState.disabled ? "not-allowed" : "inherit",
+      /** 🔠  Estilos para tamaños de la tipografia 🔠 */
+      ...getTypographyStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "medium",
+        "body"
+      ),
+      ...getTypographyStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "small",
+        "body"
+      )
+    }
+  }),
+  /** 💀 Estilo  para el componente Skeleton 💀  */
+  skeletonStyled: ({ ownerState, theme }) => ({
+    "&.MuiSkeleton-root": {
+      "&.M4lclassCssSpecificity": {
+        width: "100px",
+        borderRadius: theme.vars.size.borderRadius.r1,
+        display: "flex",
+        padding: theme.vars.size.baseSpacings.sp1,
+        backgroundColor: theme.vars.palette.skeleton.transition,
+        /** ☠️  Estilos para tamaños del Skeleton ☠️ */
+        ...getHeightSizeStyles(
+          theme.generalSettings.isMobile,
+          ownerState.size || "medium",
+          "base"
+        ),
+        ...getHeightSizeStyles(
+          theme.generalSettings.isMobile,
+          ownerState.size || "small",
+          "base"
+        )
+      }
+    }
+  }),
+  /** 👻 Estilo  para el componente RouterNavLink 👻  */
+  routerNavLinkStyled: ({ theme, ownerState }) => ({
+    /** 😶‍🌫️ Estilo Disabeld & Enabled para el componente RouterNavLink 😶‍🌫️  */
+    cursor: ownerState.disabled ? "not-allowed" : "pointer",
+    pointerEvents: ownerState.disabled ? "none" : "auto",
+    color: ownerState.disabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.enabled,
+    /**  Estilo Hover para el componente RouterNavLink  */
+    "&:hover": {
+      color: theme.vars.palette.primary.hover
+    },
+    /** Estilo para la clase active para el componente Typography hace la funcion de "Visited" 👌*/
+    "&.active": {
+      color: theme.vars.palette.primary.focus,
+      //Estado visitado del componente
+      "&:hover": {
+        color: theme.vars.palette.primary.hover
+        // Hover del Typography
+      },
+      "&.Mui-focusVisible, &:focus-visible": {
+        outline: `1px solid ${theme.vars.palette["primary"].focusVisible}`,
+        outlineOffset: 2
+      }
+    },
+    /**  Estilo Active para el componente RouterNavLink  */
+    "&:active": {
+      color: theme.vars.palette.primary.active
+    },
+    /**  Estilo Focus-Visible para el componente RouterNavLink  */
+    "&:focus-visible": {
+      color: theme.vars.palette.primary.focusVisible,
+      outline: `1px solid ${theme.vars.palette["primary"].focusVisible}`,
+      outlineOffset: 2,
+      borderRadius: theme.vars.size.borderRadius["r0-5"]
+    }
+  })
+};
+export {
+  navLinkStyles as n
+};

package/components/mui_extended/NavLink/constants.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Clave de componente para el componente Label
+ */
+export declare const NAV_LINK_KEY_COMPONENT = "M4LNavLink";
+export declare const classLabelRoot: string;
+/**
+ * Nombre de clase creado para aportar especificidad a los estilos del componente. Es usado para sobreescribir los estilos de MUI sin
+ * tener la necesidad de agregar valores en !important.
+ */
+export declare const NAV_LINK_SPECIFY = "M4lclassCssSpecificity";
+/**
+ * Inventario de clases CSS para el componente Typography.
+ */
+export declare const classNavLinkRoot: Record<string, string>;

package/components/mui_extended/NavLink/constants.js

@@ -0,0 +1,10 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { N as NavLinkSlots } from "./slots/NavLinkEnum.js";
+const NAV_LINK_KEY_COMPONENT = "M4LNavLink";
+const NAV_LINK_SPECIFY = "M4lclassCssSpecificity";
+const classNavLinkRoot = getComponentClasses(NAV_LINK_KEY_COMPONENT, NavLinkSlots);
+export {
+  NAV_LINK_KEY_COMPONENT as N,
+  NAV_LINK_SPECIFY as a,
+  classNavLinkRoot as c
+};

package/components/mui_extended/NavLink/slots/NavLinkEnum.d.ts

@@ -0,0 +1,6 @@
+export declare enum NavLinkSlots {
+    root = "root",
+    typographyStyled = "typographyStyled",
+    skeletonStyled = "skeletonStyled",
+    routerNavLinkStyled = "routerNavLinkStyled"
+}

package/components/mui_extended/NavLink/slots/NavLinkEnum.js

@@ -0,0 +1,10 @@
+var NavLinkSlots = /* @__PURE__ */ ((NavLinkSlots2) => {
+  NavLinkSlots2["root"] = "root";
+  NavLinkSlots2["typographyStyled"] = "typographyStyled";
+  NavLinkSlots2["skeletonStyled"] = "skeletonStyled";
+  NavLinkSlots2["routerNavLinkStyled"] = "routerNavLinkStyled";
+  return NavLinkSlots2;
+})(NavLinkSlots || {});
+export {
+  NavLinkSlots as N
+};

package/components/mui_extended/NavLink/slots/NavLinkSlots.d.ts

@@ -0,0 +1,12 @@
+export declare const RouterNavLinkRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').NavLinkOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const TypographyStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').NavLinkOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const SkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').NavLinkOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const RouterNavLinkStyled: import('@emotion/styled').StyledComponent<Pick<import('react-router-dom').NavLinkProps & import('react').RefAttributes<HTMLAnchorElement>, keyof import('react').RefAttributes<HTMLAnchorElement> | keyof import('react-router-dom').NavLinkProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').NavLinkOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/mui_extended/NavLink/slots/NavLinkSlots.js

@@ -0,0 +1,29 @@
+import { NavLink } from "react-router-dom";
+import { styled } from "@mui/material/styles";
+import { N as NavLinkSlots } from "./NavLinkEnum.js";
+import { N as NAV_LINK_KEY_COMPONENT } from "../constants.js";
+import { S as Skeleton } from "../../Skeleton/Skeleton.js";
+import { n as navLinkStyles } from "../NavLink.styles.js";
+import { T as Typography } from "../../Typography/Typography.js";
+const RouterNavLinkRootStyled = styled("div", {
+  name: NAV_LINK_KEY_COMPONENT,
+  slot: NavLinkSlots.root
+})(navLinkStyles?.root);
+const TypographyStyled = styled(Typography, {
+  name: NAV_LINK_KEY_COMPONENT,
+  slot: NavLinkSlots.typographyStyled
+})(navLinkStyles?.typographyStyled);
+const SkeletonStyled = styled(Skeleton, {
+  name: NAV_LINK_KEY_COMPONENT,
+  slot: NavLinkSlots.skeletonStyled
+})(navLinkStyles?.skeletonStyled);
+const RouterNavLinkStyled = styled(NavLink, {
+  name: NAV_LINK_KEY_COMPONENT,
+  slot: NavLinkSlots.routerNavLinkStyled
+})(navLinkStyles.routerNavLinkStyled);
+export {
+  RouterNavLinkRootStyled as R,
+  SkeletonStyled as S,
+  TypographyStyled as T,
+  RouterNavLinkStyled as a
+};

package/components/mui_extended/NavLink/tests/NavLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/mui_extended/NavLink/types.d.ts

@@ -0,0 +1,36 @@
+import { NavLinkProps as RouterNavLinkProps } from 'react-router-dom';
+import { TypographyProps } from '../Typography/types';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { NavLinkSlots } from './slots/NavLinkEnum';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { NAV_LINK_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+/**
+ * 💃 Propiedades del componente NavLink(NavLinkProps)💃.
+ */
+export interface NavLinkProps extends RouterNavLinkProps, Pick<TypographyProps, 'skeletonWidth'> {
+    text: string;
+    /** Define el color del texto. Por defecto es 'primary'. */
+    color?: Exclude<ComponentPalletColor, 'primary'>;
+    /** Define el with of skeleton mode */
+    skeletonWidth?: string | number;
+    /** Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'.*/
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /** Define el variant de la etiqueta. Por defecto es 'standard'.  */
+    variant?: 'standard';
+    /** Indica si el campo de texto está deshabilitado. */
+    disabled?: boolean;
+    /**  Estilos personalizados para el componente. */
+    dataTestId?: string;
+}
+/** Estado del propietario del NavLink.*/
+export type NavLinkOwnerState = Pick<NavLinkProps, 'color'> & {
+    /** Indica si el NavLink está deshabilitado. */
+    disabled?: boolean;
+    /** Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'.*/
+    size: Extract<Sizes, 'small' | 'medium'>;
+    /** Define el color de la paleta del componente. */
+    componentPaletteColor?: ComponentPalletColor;
+};
+export type NavLinkSlotsType = keyof typeof NavLinkSlots;
+export type NavLinkStyles = M4LOverridesStyleRules<NavLinkSlotsType, typeof NAV_LINK_KEY_COMPONENT, Theme>;

package/index.js

@@ -3,7 +3,7 @@ import { D } from "./components/DataGrid/index.js";
 import { g } from "./components/DataGrid/dictionary.js";
 import { N, T } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
 import { g as g2 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
-import { N as N2 } from "./components/NavLink/NavLink.js";
+import { N as N2 } from "./components/mui_extended/NavLink/NavLink.js";
 import { S } from "./components/ScrollToTop/index.js";
 import { I } from "./components/Icon/Icon.js";
 import { I as I2 } from "./components/animate/IconButtonAnimate/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.89",
+  "version": "9.1.91",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/components/NavLink/NavLink.d.ts

@@ -1,9 +0,0 @@
-import { NavLinkProps } from './types';
-/**
- * TODO: Documentar
- * @author Bruce Escobar - automatic
- * @createdAt 2024-10-22 09:41:31 - automatic
- * @updatedAt 2024-11-25 09:34:36 - automatic
- * @updatedUser cesar - automatic
- */
-export declare const NavLink: (props: NavLinkProps) => import("react/jsx-runtime").JSX.Element;

package/components/NavLink/NavLink.js

@@ -1,32 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { NavLink as NavLink$1 } from "react-router-dom";
-import { u as useUtilityClasses } from "./classes/index.js";
-import { N as NavLinkRoot } from "./styles.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { g as getNameDataTestId } from "./tests/utils.js";
-import { T as Typography } from "../mui_extended/Typography/Typography.js";
-const NavLink = (props) => {
-  const { children, text, skeletonWidth, ...others } = props;
-  const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    NavLinkRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: /* @__PURE__ */ jsxs(NavLink$1, { ...others, children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "body",
-            skeletonWidth,
-            children: text
-          }
-        ),
-        typeof children === "function" ? children({ isActive: false }) : children
-      ] })
-    }
-  );
-};
-export {
-  NavLink as N
-};

package/components/NavLink/classes/constant.d.ts

@@ -1 +0,0 @@
-export declare const componentName = "M4LNavLink";

package/components/NavLink/classes/constant.js

@@ -1,4 +0,0 @@
-const componentName = "M4LNavLink";
-export {
-  componentName as c
-};

package/components/NavLink/classes/index.d.ts

@@ -1,9 +0,0 @@
-import { NavLinkClassesType } from './types';
-export declare const navLinkClasses: NavLinkClassesType;
-export declare function getNavLinkClassesUtilityClass(slot: string): string;
-/**
- * TODO: Documentar
- */
-export declare const useUtilityClasses: () => {
-    root: string;
-};

package/components/NavLink/classes/index.js

@@ -1,23 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constant.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root"
-  /* states or variants of elements */
-]);
-function getNavLinkClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getNavLinkClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  useUtilityClasses as u
-};

package/components/NavLink/classes/types.d.ts

@@ -1,4 +0,0 @@
-export interface NavLinkClassesType {
-    root: string;
-}
-export type NavLinkClassesKey = keyof NavLinkClassesType;

package/components/NavLink/styles.d.ts

@@ -1 +0,0 @@
-export declare const NavLinkRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/NavLink/styles.js

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material/styles";
-const NavLinkRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LNavLink?.styleOverrides || {}
-}));
-export {
-  NavLinkRoot as N
-};

package/components/NavLink/tests/constants.d.ts

@@ -1 +0,0 @@
-export declare const NAVLINK_PREFIX = "Navlink";

package/components/NavLink/tests/constants.js

@@ -1,4 +0,0 @@
-const NAVLINK_PREFIX = "Navlink";
-export {
-  NAVLINK_PREFIX as N
-};

package/components/NavLink/tests/utils.d.ts

@@ -1,2 +0,0 @@
-import { NavLinkClassesKey } from '../classes/types';
-export declare const getNameDataTestId: (KEY: NavLinkClassesKey) => string;

package/components/NavLink/tests/utils.js

@@ -1,7 +0,0 @@
-import { N as NAVLINK_PREFIX } from "./constants.js";
-const getNameDataTestId = (KEY) => {
-  return `${NAVLINK_PREFIX}-${KEY}`;
-};
-export {
-  getNameDataTestId as g
-};

package/components/NavLink/types.d.ts

@@ -1,5 +0,0 @@
-import { NavLinkProps as RouterNavLinkProps } from 'react-router-dom';
-import { TypographyProps } from '../mui_extended/Typography/types';
-export interface NavLinkProps extends RouterNavLinkProps, Pick<TypographyProps, 'skeletonWidth'> {
-    text: string;
-}