@m4l/components 7.3.1 → 8.0.1

package/components/mui_extended/Typography/typography.styles.js

@@ -0,0 +1,332 @@
+const typographyStyles = {
+  /**
+   * Slot: root
+   * Componente extendido de MUI Typography, que permite personalizar los estilos del componente.
+   */
+  root: ({ ownerState, theme }) => ({
+    "&.M4lclassCssSpecificity": {
+      // Estilos generales 🌐
+      // skeleton spacing when multiple rows 🦴
+      fontFamily: theme.typography.fontFamily,
+      ...ownerState.typographyskeletonRows && ownerState.typographyskeletonRows > 1 && {
+        display: "flex",
+        flexDirection: "column"
+      },
+      // Override de estilos generales de MUI 🚫
+      // color text.primary 🎨
+      ...ownerState.typographyColor === "text.primary" && {
+        color: theme.vars.palette.text.primary
+      },
+      // color text.secondary 🎨
+      ...ownerState.typographyColor === "text.secondary" && {
+        color: theme.vars.palette.text.secondary
+      },
+      // color text.disabled 🎨
+      ...ownerState.typographyColor === "text.disabled" && {
+        color: theme.vars.palette.text.disabled
+      },
+      // Dispositivo »mobile 📱
+      ...theme.generalSettings.isMobile === true && {
+        // mobile - »small
+        ...ownerState.typographySize === "small" && {
+          // mobile - »small - »variant (h1) 💅
+          ...ownerState.typographyVariant === "h1" && {
+            fontSize: theme.vars.size.typography.mobile.small.h1.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.h1.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.h1.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.h1.letterSpacing
+          },
+          // mobile - »small - »variant (h2) 💅
+          ...ownerState.typographyVariant === "h2" && {
+            fontSize: theme.vars.size.typography.mobile.small.h2.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.h2.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.h2.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.h2.letterSpacing
+          },
+          // mobile - »small - »variant (h3) 💅
+          ...ownerState.typographyVariant === "h3" && {
+            fontSize: theme.vars.size.typography.mobile.small.h3.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.h3.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.h3.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.h3.letterSpacing
+          },
+          // mobile - »small - »variant(h5) 💅
+          ...ownerState.typographyVariant === "h5" && {
+            fontSize: theme.vars.size.typography.mobile.small.h5.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.h5.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.h5.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.h5.letterSpacing
+          },
+          // mobile - »small - »variant (subtitle) 💅
+          ...ownerState.typographyVariant === "subtitle" && {
+            fontSize: theme.vars.size.typography.mobile.small.subtitle.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.subtitle.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.subtitle.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.subtitle.letterSpacing
+          },
+          // mobile - »small - »variant (subtitleDens) 💅
+          ...ownerState.typographyVariant === "subtitleDens" && {
+            fontSize: theme.vars.size.typography.mobile.small.subtitleDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.subtitleDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.subtitleDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.subtitleDens.letterSpacing
+          },
+          // mobile - »small - »variant (paragraph) 💅
+          ...ownerState.typographyVariant === "paragraph" && {
+            fontSize: theme.vars.size.typography.mobile.small.paragraph.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.paragraph.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.paragraph.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.paragraph.letterSpacing
+          },
+          // mobile - »small - »variant (paragraphDens) 💅
+          ...ownerState.typographyVariant === "paragraphDens" && {
+            fontSize: theme.vars.size.typography.mobile.small.paragraphDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.paragraphDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.paragraphDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.paragraphDens.letterSpacing
+          },
+          // mobile - »small - »variant (body) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.mobile.small.body.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.body.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.body.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.body.letterSpacing
+          },
+          // mobile - »small - »variant (bodyDens) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.mobile.small.bodyDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.bodyDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.bodyDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.bodyDens.letterSpacing
+          }
+        },
+        // mobile - »medium - 👑 Predeterminado
+        ...ownerState.typographySize === "medium" && {
+          // mobile - medium - »variant (h1) 💅
+          ...ownerState.typographyVariant === "h1" && {
+            fontSize: theme.vars.size.typography.mobile.medium.h1.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.h1.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.h1.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.h1.letterSpacing
+          },
+          // mobile - medium - »variant (h2) 💅
+          ...ownerState.typographyVariant === "h2" && {
+            fontSize: theme.vars.size.typography.mobile.medium.h2.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.h2.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.h2.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.h2.letterSpacing
+          },
+          // mobile - medium - »variant (h3) 💅
+          ...ownerState.typographyVariant === "h3" && {
+            fontSize: theme.vars.size.typography.mobile.medium.h3.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.h3.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.h3.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.h3.letterSpacing
+          },
+          // mobile - medium - »variant(h5) 💅
+          ...ownerState.typographyVariant === "h5" && {
+            fontSize: theme.vars.size.typography.mobile.medium.h5.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.h5.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.h5.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.h5.letterSpacing
+          },
+          // mobile - medium - »variant (subtitle) 💅
+          ...ownerState.typographyVariant === "subtitle" && {
+            fontSize: theme.vars.size.typography.mobile.medium.subtitle.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.subtitle.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.subtitle.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.subtitle.letterSpacing
+          },
+          // mobile - medium - »variant (subtitleDens) 💅
+          ...ownerState.typographyVariant === "subtitleDens" && {
+            fontSize: theme.vars.size.typography.mobile.medium.subtitleDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.subtitleDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.subtitleDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.subtitleDens.letterSpacing
+          },
+          // mobile - medium - »variant (paragraph) 💅
+          ...ownerState.typographyVariant === "paragraph" && {
+            fontSize: theme.vars.size.typography.mobile.medium.paragraph.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.paragraph.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.paragraph.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.paragraph.letterSpacing
+          },
+          // mobile - medium - »variant (paragraphDens) 💅
+          ...ownerState.typographyVariant === "paragraphDens" && {
+            fontSize: theme.vars.size.typography.mobile.medium.paragraphDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.paragraphDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.paragraphDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.paragraphDens.letterSpacing
+          },
+          // mobile - medium - »variant (body) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.mobile.medium.body.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.body.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.body.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.body.letterSpacing
+          },
+          // mobile - medium - »variant (bodyDens) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.mobile.medium.bodyDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.bodyDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.bodyDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.bodyDens.letterSpacing
+          }
+        }
+      },
+      // Dispositivo »desktop 💻
+      ...theme.generalSettings.isMobile === false && {
+        // desktop - »small
+        ...ownerState.typographySize === "small" && {
+          // desktop - »small - »variant (h1) 💅
+          ...ownerState.typographyVariant === "h1" && {
+            fontSize: theme.vars.size.typography.desktop.small.h1.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.h1.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.h1.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.h1.letterSpacing
+          },
+          // desktop - »small - »variant (h2) 💅
+          ...ownerState.typographyVariant === "h2" && {
+            fontSize: theme.vars.size.typography.desktop.small.h2.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.h2.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.h2.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.h2.letterSpacing
+          },
+          // desktop - »small - »variant (h3) 💅
+          ...ownerState.typographyVariant === "h3" && {
+            fontSize: theme.vars.size.typography.desktop.small.h3.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.h3.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.h3.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.h3.letterSpacing
+          },
+          // desktop - »small - »variant(h5) 💅
+          ...ownerState.typographyVariant === "h5" && {
+            fontSize: theme.vars.size.typography.desktop.small.h5.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.h5.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.h5.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.h5.letterSpacing
+          },
+          // desktop - »small - »variant (subtitle) 💅
+          ...ownerState.typographyVariant === "subtitle" && {
+            fontSize: theme.vars.size.typography.desktop.small.subtitle.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.subtitle.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.subtitle.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.subtitle.letterSpacing
+          },
+          // desktop - »small - »variant (subtitleDens) 💅
+          ...ownerState.typographyVariant === "subtitleDens" && {
+            fontSize: theme.vars.size.typography.desktop.small.subtitleDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.subtitleDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.subtitleDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.subtitleDens.letterSpacing
+          },
+          // desktop - »small - »variant (paragraph) 💅
+          ...ownerState.typographyVariant === "paragraph" && {
+            fontSize: theme.vars.size.typography.desktop.small.paragraph.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.paragraph.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.paragraph.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.paragraph.letterSpacing
+          },
+          // desktop - »small - »variant (paragraphDens) 💅
+          ...ownerState.typographyVariant === "paragraphDens" && {
+            fontSize: theme.vars.size.typography.desktop.small.paragraphDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.paragraphDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.paragraphDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.paragraphDens.letterSpacing
+          },
+          // desktop - »small - »variant (body) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.desktop.small.body.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.body.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.body.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.body.letterSpacing
+          },
+          // desktop - »small - »variant (bodyDens) 💅
+          ...ownerState.typographyVariant === "bodyDens" && {
+            fontSize: theme.vars.size.typography.desktop.small.bodyDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.bodyDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.bodyDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.bodyDens.letterSpacing
+          }
+        },
+        // desktop - »medium - 👑 Predeterminado
+        ...ownerState.typographySize === "medium" && {
+          // desktop - medium - »variant (h1) 💅
+          ...ownerState.typographyVariant === "h1" && {
+            fontSize: theme.vars.size.typography.desktop.medium.h1.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.h1.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.h1.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.h1.letterSpacing
+          },
+          // desktop - medium - »variant (h2) 💅
+          ...ownerState.typographyVariant === "h2" && {
+            fontSize: theme.vars.size.typography.desktop.medium.h2.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.h2.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.h2.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.h2.letterSpacing
+          },
+          // desktop - medium - »variant (h3) 💅
+          ...ownerState.typographyVariant === "h3" && {
+            fontSize: theme.vars.size.typography.desktop.medium.h3.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.h3.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.h3.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.h3.letterSpacing
+          },
+          // desktop - medium - »variant(h5) 💅
+          ...ownerState.typographyVariant === "h5" && {
+            fontSize: theme.vars.size.typography.desktop.medium.h5.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.h5.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.h5.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.h5.letterSpacing
+          },
+          // desktop - medium - »variant (subtitle) 💅
+          ...ownerState.typographyVariant === "subtitle" && {
+            fontSize: theme.vars.size.typography.desktop.medium.subtitle.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.subtitle.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.subtitle.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.subtitle.letterSpacing
+          },
+          // desktop - medium - »variant (subtitleDens) 💅
+          ...ownerState.typographyVariant === "subtitleDens" && {
+            fontSize: theme.vars.size.typography.desktop.medium.subtitleDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.subtitleDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.subtitleDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.subtitleDens.letterSpacing
+          },
+          // desktop - medium - »variant (paragraph) 💅
+          ...ownerState.typographyVariant === "paragraph" && {
+            fontSize: theme.vars.size.typography.desktop.medium.paragraph.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.paragraph.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.paragraph.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.paragraph.letterSpacing
+          },
+          // desktop - medium - »variant (paragraphDens) 💅
+          ...ownerState.typographyVariant === "paragraphDens" && {
+            fontSize: theme.vars.size.typography.desktop.medium.paragraphDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.paragraphDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.paragraphDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.paragraphDens.letterSpacing
+          },
+          // desktop - medium - »variant (body) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.desktop.medium.body.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.body.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.body.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.body.letterSpacing
+          },
+          // desktop - medium - »variant (bodyDens) 💅
+          ...ownerState.typographyVariant === "bodyDens" && {
+            fontSize: theme.vars.size.typography.desktop.medium.bodyDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.bodyDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.bodyDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.bodyDens.letterSpacing
+          }
+        }
+      }
+    }
+  }),
+  skeleton: {}
+};
+export {
+  typographyStyles as t
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "7.3.1",
+  "version": "8.0.1",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -52,7 +52,7 @@
     "zustand": "4.3.6"
   },
   "peerDependencies": {
-    "@m4l/core": "^2.0.11",
+    "@m4l/core": "^2.0.12",
     "@m4l/graphics": "^7.0.2",
     "@m4l/styles": "^7.0.1",
     "@mui/lab": "5.0.0-alpha.173",

package/storybook/components/extended/mui/Skeleton/Colors/Default/Variants/Circular/skeleton.defaultCircular.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../../../../../../../../../src/components/mui_extended/Skeleton';
+/**
+ *
+ */
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+/**
+ * El componente Skeleton de Material UI en su variante circular se utiliza para mostrar un marcador de posición redondo,
+ * ideal para elementos con formas circulares, como avatares, iconos o imágenes de perfil, mientras se cargan los datos reales.
+ * Esta variante ofrece una forma circular perfecta que se adapta a componentes que tienen proporciones iguales de altura y ancho.
+ */
+export declare const Base: Story;

package/storybook/components/extended/mui/Skeleton/Colors/Default/Variants/Rectangular/skeleton.defaultRectangular.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../../../../../../../../../src/components/mui_extended/Skeleton';
+/**
+ *
+ */
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+/**
+ * El componente Skeleton de Material UI en su variante rectangular se utiliza para mostrar un marcador de posición con forma de rectángulo,
+ * ideal para simular la carga de elementos como contenedores, tarjetas, imágenes o cualquier contenido con proporciones rectangulares.
+ * Es una de las variantes más comunes para representar áreas de contenido mientras se carga la información.
+ */
+export declare const Base: Story;

package/storybook/components/extended/mui/Skeleton/Colors/Default/Variants/Rounded/skeleton.defaultRounded.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../../../../../../../../../src/components/mui_extended/Skeleton';
+/**
+ *
+ */
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+/**
+ * El componente Skeleton en Material UI se utiliza para mostrar un marcador de posición mientras se
+ * cargan los datos reales. Es ideal para mejorar la percepción de rendimiento al proporcionar una interfaz
+ * visible y estructurada durante la carga de contenido. La variante rounded agrega un borde suavemente redondeado al esqueleto,
+ * lo que lo hace más acorde con las interfaces modernas y suaves.
+ */
+export declare const Base: Story;

package/storybook/components/extended/mui/Skeleton/Colors/Default/Variants/Text/skeleton.defaultText.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../../../../../../../../../src/components/mui_extended/Skeleton';
+/**
+ *
+ */
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+/**
+ * El componente Skeleton de Material UI en su variante text se utiliza para simular la carga de texto,
+ * imitando líneas de texto o párrafos mientras los datos reales se están recuperando.
+ * Esta variante es ideal para mantener la estructura visual de bloques de texto, como encabezados, párrafos o listas,
+ * durante el tiempo de carga.
+ */
+export declare const Base: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/body/Estados/typography.body.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante body en typography establece estilos predeterminados para los textos del cuerpo,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante body.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante body.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante body.
+ */
+export declare const skeletonRows: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/bodyDens/Estados/typography.bodyDens.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante bodyDens en typography establece estilos predeterminados para los textos del cuerpo densos,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante bodyDens.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante bodyDens.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante bodyDens.
+ */
+export declare const skeletonRows: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/h1/Estados/typography.h1.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante h1 en typography establece estilos predeterminados para encabezados principales,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante h1.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante h1.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante h1.
+ */
+export declare const skeletonRows: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/h2/Estados/typography.h2.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante h2 en typography establece estilos predeterminados para encabezados de segundo nivel,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante h2.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante h2.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante h2.
+ */
+export declare const skeletonRows: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/h3/Estados/typography.h3.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante h3 en typography establece estilos predeterminados para encabezados de tercer nivel,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante h3.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante h3.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante h3.
+ */
+export declare const skeletonRows: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/h5/Estados/typography.h5.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante h5 en typography establece estilos predeterminados para encabezados de quinto nivel,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante h5.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante h5.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante h5.
+ */
+export declare const skeletonRows: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/paragraph/Estados/typography.paragraph.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante paragraph en typography establece estilos predeterminados para los párrafos,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante paragraph.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante paragraph.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante paragraph.
+ */
+export declare const skeletonRows: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/paragraphDens/Estados/typography.paragraphDens.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante paragraphDens en typography establece estilos predeterminados para los parráfos densos,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante paragraphDens.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante paragraphDens.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante paragraphDens.
+ */
+export declare const skeletonRows: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/subtitle/Estados/typography.subtitle.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante subtitle en typography establece estilos predeterminados para sub títulos,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante subtitle.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante subtitle.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante subtitle.
+ */
+export declare const skeletonRows: Story;