@m4l/components 9.1.54 → 9.1.56

package/components/Chip/Chip.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton, useEnvironment, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
+import clsx from "clsx";
 import { forwardRef } from "react";
+import { C as CHIP_CLASSES } from "./constants.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { S as SkeletonChipStyled, C as ChipRootStyled, T as TextChipStyled, I as IconButtonStyled, a as IconStyled } from "./slots/ChipSlots.js";
 const Chip = forwardRef((props, ref) => {
@@ -17,6 +19,7 @@ const Chip = forwardRef((props, ref) => {
     hasIconClose = true,
     onClick,
     onDeleted,
+    className,
     ...others
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -30,7 +33,7 @@ const Chip = forwardRef((props, ref) => {
     theme.vars.palette.default
   );
   const ownerState = {
-    size,
+    chipSize: adjustedSize,
     variant,
     paletteColor,
     color,
@@ -75,9 +78,10 @@ const Chip = forwardRef((props, ref) => {
     {
       role: "button-chip",
       tabIndex: 0,
-      size,
+      size: adjustedSize,
       onClick,
       ownerState: { ...ownerState },
+      className: clsx(className, CHIP_CLASSES.root),
       ref,
       ...others,
       children: [

package/components/Chip/ChipStyles.js

@@ -6,7 +6,7 @@ const chipStyles = {
    * @updatedAt 2024-12-06 13:56:58 - automatic
    * @updatedUser SebastianM - automatic
    */
-  chipRoot: ({ theme, ownerState }) => ({
+  root: ({ theme, ownerState }) => ({
     display: "flex",
     alignItems: "center",
     padding: theme.vars.size.baseSpacings.sp1,
@@ -424,7 +424,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
+    ...ownerState.chipSize === "small" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.small.base,
         minHeight: theme.vars.size.mobile.small.base
@@ -434,7 +434,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
+    ...ownerState.chipSize === "medium" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.medium.base,
         minHeight: theme.vars.size.mobile.medium.base
@@ -472,7 +472,7 @@ const chipStyles = {
    */
   iconButton: ({ theme, ownerState }) => ({
     // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
+    ...ownerState.chipSize === "small" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.small.base,
         width: theme.vars.size.mobile.small.base,
@@ -484,7 +484,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
+    ...ownerState.chipSize === "medium" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.medium.base,
         width: theme.vars.size.mobile.medium.base,
@@ -507,7 +507,7 @@ const chipStyles = {
     width: "100%",
     background: theme.vars.palette.skeleton.transition,
     // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
+    ...ownerState.chipSize === "small" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.small.base,
         minHeight: theme.vars.size.mobile.small.base
@@ -517,7 +517,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
+    ...ownerState.chipSize === "medium" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.medium.base,
         minHeight: theme.vars.size.mobile.medium.base

package/components/Chip/constants.d.ts

@@ -6,3 +6,7 @@
  * @default 'M4LChip'
  */
 export declare const CHIP_KEY_COMPONENT = "M4LChip";
+/**
+ * Inventario de clases CSS para el componente Chip
+ */
+export declare const CHIP_CLASSES: Record<string, string>;

package/components/Chip/constants.js

@@ -1,4 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { C as ChipSlots } from "./slots/ChipEnum.js";
 const CHIP_KEY_COMPONENT = "M4LChip";
+const CHIP_CLASSES = getComponentClasses(CHIP_KEY_COMPONENT, ChipSlots);
 export {
-  CHIP_KEY_COMPONENT as C
+  CHIP_CLASSES as C,
+  CHIP_KEY_COMPONENT as a
 };

package/components/Chip/slots/ChipEnum.d.ts

@@ -1,7 +1,7 @@
-export declare const ChipSlots: {
-    chipRoot: string;
-    skeletonChip: string;
-    chipIcon: string;
-    textChip: string;
-    iconButton: string;
-};
+export declare enum ChipSlots {
+    root = "root",
+    skeletonChip = "skeleton",
+    chipIcon = "icon",
+    textChip = "text",
+    iconButton = "iconButton"
+}

package/components/Chip/slots/ChipEnum.js

@@ -1,10 +1,11 @@
-const ChipSlots = {
-  chipRoot: "Root",
-  skeletonChip: "Skeleton",
-  chipIcon: "Icon",
-  textChip: "Text",
-  iconButton: "IconButton"
-};
+var ChipSlots = /* @__PURE__ */ ((ChipSlots2) => {
+  ChipSlots2["root"] = "root";
+  ChipSlots2["skeletonChip"] = "skeleton";
+  ChipSlots2["chipIcon"] = "icon";
+  ChipSlots2["textChip"] = "text";
+  ChipSlots2["iconButton"] = "iconButton";
+  return ChipSlots2;
+})(ChipSlots || {});
 export {
   ChipSlots as C
 };

package/components/Chip/slots/ChipSlots.js

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { c as chipStyles } from "../ChipStyles.js";
-import { C as CHIP_KEY_COMPONENT } from "../constants.js";
+import { a as CHIP_KEY_COMPONENT } from "../constants.js";
 import { C as ChipSlots } from "./ChipEnum.js";
 import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
@@ -8,8 +8,8 @@ import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
 import { I as Icon } from "../../Icon/Icon.js";
 const ChipRootStyled = styled("div", {
   name: CHIP_KEY_COMPONENT,
-  slot: ChipSlots.chipRoot
-})(chipStyles?.chipRoot);
+  slot: ChipSlots.root
+})(chipStyles?.root);
 const SkeletonChipStyled = styled(Skeleton, {
   name: CHIP_KEY_COMPONENT,
   slot: ChipSlots.skeletonChip

package/components/Chip/types.d.ts

@@ -6,36 +6,66 @@ import { CHIP_KEY_COMPONENT } from './constants';
 import { ChipSlots } from './slots';
 type ChipVariants = 'contained' | 'outlined';
 /**
- * Props for the `Chip` component, extending the original properties of Material UI.
- * [startIcon] - Optional prop for the icon on the left in the `Chip`.
- * [endIcon] - Optional prop for the icon on the right in the `Chip`.
- * label - Text describing the `Chip`.
- * [componentPaletteColor] - Customization of the component's palette color.
- * [size] - Size of the `Chip` (default 'medium').
- * [error] - Indicates if the `Chip` is in an error state.
- * [variant] - Defines the variant of the `Chip` (default 'contained').
- * [color] - Defines the color of the `Chip`.
+ * Propiedades del componente `Chip`.
  * @createdAt 2024-12-06 11:17:21 - automatic
  */
 export interface ChipProps {
+    /**
+     * Optional prop for the icon on the left in the `Chip`. Can accept a URL as a string to render an image icon, or a React component to render it directly.
+     */
     startIcon?: ReactNode;
+    /**
+     * Optional prop for the icon on the right in the `Chip`. Can accept a URL as a string to render an image icon, or a React component to render it directly.
+     */
     endIcon?: ReactNode;
+    /**
+     * Size of the `Chip` (default 'medium').
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Text describing the `Chip`.
+     */
     label?: string;
+    /**
+     * Defines the variant of the `Chip` (default 'contained').
+     */
     variant?: ChipVariants;
+    /**
+     * Defines the color of the `Chip`.
+     */
     color?: Exclude<ComponentPalletColor, 'primary'>;
+    /**
+     * Define el with of skeleton mode
+     */
     skeletonWidth?: string | number;
+    /**
+     * OPtion prop to render the close icon
+     */
     hasIconClose?: boolean;
+    /**
+     * Opacity of the `Chip`.
+     */
     opacity?: boolean;
+    /**
+     * Function to be executed when the `Chip` is clicked.
+     */
     onClick?: () => void;
+    /**
+     * Function to be executed when the `Chip` is deleted.
+     */
     onDeleted?: EventHandler<any>;
+    /**
+     * Class name for the `Chip`.
+     */
+    className?: string;
 }
 /**
  * Owner state of the `Chip` used to define internal style and behavior properties.
  */
-export interface ChipOwnerState extends Pick<ChipProps, 'size' | 'variant' | 'color'> {
+export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'color'> {
     opacity?: boolean;
     paletteColor: PaletteColor;
+    chipSize: ChipProps['size'];
 }
 /**
  * Defines the types of Slots available for the `Chip`.
@@ -44,5 +74,5 @@ export type ChipSlotsType = keyof typeof ChipSlots;
 /**
  * Styles applicable to the `Chip` using themes and custom slots.
  */
-export type ChipStyles = Partial<OverridesStyleRules<ChipSlotsType, typeof CHIP_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type ChipStyles = OverridesStyleRules<ChipSlotsType, typeof CHIP_KEY_COMPONENT, Theme>;
 export {};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../../../../../utils/getHeightSizeStyles.js";
 import { a as ITEM_IN_TREE_ACTIVE, I as ITEM_ACTIVE } from "../../../../constants.js";
 const containerMenuItemsMainStyles = {
   /**
@@ -12,34 +13,21 @@ const containerMenuItemsMainStyles = {
     display: "flex",
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings["sp0-5"],
-    "& .M4LMenuItem-menuItemContainer": {
-      // Estilos específicos para el tamaño small
-      ...ownerState.sidebarSize === "small" && {
-        ...theme.generalSettings.isMobile ? {
-          minHeight: theme.vars.size.mobile.small.action
-        } : {
-          minHeight: theme.vars.size.desktop.small.action
-        }
-      },
-      // Estilos específicos para el tamaño medium
-      ...ownerState.sidebarSize === "medium" && {
-        ...theme.generalSettings.isMobile ? {
-          minHeight: theme.vars.size.mobile.medium.action
-        } : {
-          minHeight: theme.vars.size.desktop.medium.action
-        }
-      }
-    },
-    [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "container"
+    ),
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
       borderColor: theme.vars.palette.divider,
       "& span": {
         color: theme.vars.palette.text.primary
       }
     },
-    [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
       background: theme.vars.palette.text.primary
     },
-    [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_ACTIVE}"]`]: {
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_ACTIVE}"]`]: {
       borderColor: theme.vars.palette.primary.main,
       "& span": {
         color: theme.vars.palette.primary.main

package/components/formatters/PeriodFormatter/PeriodFormatter.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { PeriodFormatterProps } from './types';
+/**
+ * Muestra un periodo de tiempo en años, meses y días. Retorna un string
+ * @param years Cantidad de años
+ * @param months Cantidad de meses
+ * @param days Cantidad de días
+ * @returns string
+ * @author cesar - automatic
+ * @createdAt 2025-01-02 15:08:06 - automatic
+ * @updatedAt 2025-01-07 15:14:22 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare function useFormatPeriod(years: number, months: number, days: number): string;
+/**
+ * Muestra un periodo de tiempo en años, meses y días. Retorna un JSX.
+ * Si el componente está en skeleton, muestra un placeholder de carga.
+ * @param props
+ * @returns JSX.Element.
+ * @author cesar - automatic
+ * @createdAt 2025-01-02 15:08:06 - automatic
+ * @updatedAt 2025-01-07 15:14:22 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare function PeriodFormatter<T extends React.ElementType>(props: PeriodFormatterProps<T>): JSX.Element;

package/components/formatters/PeriodFormatter/PeriodFormatter.js

@@ -0,0 +1,87 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { P as PERIOD_FORMATTER_KEY_COMPONENT } from "./constants.js";
+import clsx from "clsx";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { d as dictionary } from "./dictionary.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { P as PeriodFormatterSkeletonStyled, a as PeriodFormatterRootStyled } from "./slots/PeriodFormatterSlots.js";
+import { P as PeriodFormatterSlots } from "./slots/PeriodFomatterEnum.js";
+function useFormatPeriod(years, months, days) {
+  const { getLabel } = useModuleDictionary();
+  let period = "";
+  const separator = ", ";
+  switch (years) {
+    case 0:
+      break;
+    case 1:
+      period = `1 ${getLabel(dictionary.LABEL_YEAR)}`;
+      break;
+    default:
+      period = `${years} ${getLabel(dictionary.LABEL_YEARS)}`;
+  }
+  switch (months) {
+    case 0:
+      break;
+    case 1:
+      if (years > 0) {
+        period += separator;
+      }
+      period += `1 ${getLabel(dictionary.LABEL_MONTH)}`;
+      break;
+    default:
+      if (years > 0) {
+        period += separator;
+      }
+      period += `${months} ${getLabel(dictionary.LABEL_MONTHS)}`;
+  }
+  switch (days) {
+    case 0:
+      break;
+    case 1:
+      if (years > 0 || months > 0) {
+        period += separator;
+      }
+      period += `1 ${getLabel(dictionary.LABEL_DAY)}`;
+      break;
+    default:
+      if (years > 0 || months > 0) {
+        period += separator;
+      }
+      period += `${days} ${getLabel(dictionary.LABEL_DAYS)}`;
+  }
+  if (period === "") {
+    period = "-";
+  }
+  return period;
+}
+function PeriodFormatter(props) {
+  const { size = "medium", years = 0, months = 0, days = 0, Component = PeriodFormatterRootStyled, dataTestId, className, componentProps } = props;
+  const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
+  const formattedPeriod = useFormatPeriod(years, months, days);
+  const memoComponent = useMemo(() => {
+    return isSkeleton ? /* @__PURE__ */ jsx(PeriodFormatterSkeletonStyled, { variant: "text" }) : formattedPeriod;
+  }, [formattedPeriod, isSkeleton]);
+  if (Component === React.Fragment) {
+    return /* @__PURE__ */ jsx(Fragment, { children: memoComponent });
+  }
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      size: adjustedSize,
+      className: clsx(getComponentSlotRoot(PERIOD_FORMATTER_KEY_COMPONENT), className),
+      ...getPropDataTestId(PERIOD_FORMATTER_KEY_COMPONENT, PeriodFormatterSlots.root, dataTestId),
+      role: "period-formatter-role",
+      ...componentProps,
+      children: memoComponent
+    }
+  );
+}
+export {
+  PeriodFormatter as P,
+  useFormatPeriod as u
+};

package/components/formatters/PeriodFormatter/PeriodFormatter.styles.d.ts

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

package/components/formatters/PeriodFormatter/PeriodFormatter.styles.js

@@ -0,0 +1,29 @@
+const periodFormatterStyles = {
+  /**
+   * Root container of the window
+   * @author cesar - automatic
+   * @createdAt 2025-01-02 15:08:06 - automatic
+   * @updatedAt 2025-01-02 15:08:07 - automatic
+   * @updatedUser cesar - automatic
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    color: theme.vars.palette.text.primary
+  }),
+  /**
+   * Skeleton container
+   * @author cesar - automatic
+   * @createdAt 2025-01-02 15:08:06 - automatic
+   * @updatedAt 2025-01-02 15:08:07 - automatic
+   * @updatedUser cesar - automatic
+   */
+  skeleton: ({ theme }) => ({
+    width: "100%",
+    background: theme.vars.palette.skeleton.transition
+  })
+};
+export {
+  periodFormatterStyles as p
+};

package/components/formatters/PeriodFormatter/constants.d.ts

@@ -0,0 +1 @@
+export declare const PERIOD_FORMATTER_KEY_COMPONENT = "M4LPeriodFormatter";

package/components/formatters/PeriodFormatter/constants.js

@@ -0,0 +1,4 @@
+const PERIOD_FORMATTER_KEY_COMPONENT = "M4LPeriodFormatter";
+export {
+  PERIOD_FORMATTER_KEY_COMPONENT as P
+};

package/components/formatters/PeriodFormatter/dictionary.d.ts

@@ -8,14 +8,11 @@ export declare const dictionary: {
     LABEL_DAY: string;
 };
 /**
- * TODO: Documentar
+ * Returns the dictionary of the formatters components
+ * @author cesar - automatic
+ * @createdAt 2025-01-02 15:08:06 - automatic
+ * @updatedAt 2025-01-02 15:08:07 - automatic
+ * @updatedUser cesar - automatic
  */
-export declare function getFormattersComponentsDictionary(): {
-    LABEL_YEARS: string;
-    LABEL_YEAR: string;
-    LABEL_MONTHS: string;
-    LABEL_MONTH: string;
-    LABEL_DAYS: string;
-    LABEL_DAY: string;
-};
+export declare function getFormattersComponentsDictionary(): string[];
 export declare const PERIOD_FORMATTER_DICTIONARY_LABELS: string[];

package/components/formatters/PeriodFormatter/slots/PeriodFomatterEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum PeriodFormatterSlots {
+    root = "root",
+    skeleton = "skeleton"
+}

package/components/formatters/PeriodFormatter/slots/PeriodFomatterEnum.js

@@ -0,0 +1,8 @@
+var PeriodFormatterSlots = /* @__PURE__ */ ((PeriodFormatterSlots2) => {
+  PeriodFormatterSlots2["root"] = "root";
+  PeriodFormatterSlots2["skeleton"] = "skeleton";
+  return PeriodFormatterSlots2;
+})(PeriodFormatterSlots || {});
+export {
+  PeriodFormatterSlots as P
+};

package/components/formatters/PeriodFormatter/slots/PeriodFormatterSlots.d.ts

@@ -0,0 +1,2 @@
+export declare const PeriodFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const PeriodFormatterSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/formatters/PeriodFormatter/slots/PeriodFormatterSlots.js

@@ -0,0 +1,18 @@
+import { P as PERIOD_FORMATTER_KEY_COMPONENT } from "../constants.js";
+import { p as periodFormatterStyles } from "../PeriodFormatter.styles.js";
+import { P as PeriodFormatterSlots } from "./PeriodFomatterEnum.js";
+import { styled } from "@mui/material/styles";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
+import { S as Skeleton } from "../../../mui_extended/Skeleton/Skeleton.js";
+const PeriodFormatterRootStyled = styled(Typography, {
+  name: PERIOD_FORMATTER_KEY_COMPONENT,
+  slot: PeriodFormatterSlots.root
+})(periodFormatterStyles?.root);
+const PeriodFormatterSkeletonStyled = styled(Skeleton, {
+  name: PERIOD_FORMATTER_KEY_COMPONENT,
+  slot: PeriodFormatterSlots.skeleton
+})(periodFormatterStyles?.skeleton);
+export {
+  PeriodFormatterSkeletonStyled as P,
+  PeriodFormatterRootStyled as a
+};

package/components/formatters/PeriodFormatter/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PeriodFomatterEnum';
+export * from './PeriodFormatterSlots';

package/components/formatters/PeriodFormatter/slots/index.js

@@ -0,0 +1 @@
+

package/components/formatters/PeriodFormatter/tests/PeriodFormatter.test.d.ts

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

package/components/formatters/PeriodFormatter/types.d.ts

@@ -1,13 +1,33 @@
 import { ElementType } from 'react';
+import { PeriodFormatterSlots, PeriodFormatterRootStyled } from './slots';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { PERIOD_FORMATTER_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+export type PeriodFormatterType = keyof typeof PeriodFormatterSlots;
 /**
  * Component: Tipo de componente HTML que "abraza" el resultado
  * years: Cantidad de años
  * months: Cantidad de meses
  * days: Cantidad de días
  */
-export interface PeriodFormatterProps {
+export interface PeriodFormatterProps<T extends ElementType = typeof PeriodFormatterRootStyled> {
     years?: number;
     months?: number;
     days?: number;
-    Component?: ElementType;
+    Component?: T;
+    dataTestId?: string;
+    className?: string;
+    /**
+     * Props para el componente personalizado.
+     */
+    componentProps?: React.ComponentPropsWithoutRef<T>;
+    /**
+     * Opciones de tamaño del componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
+/**
+ * Estilos personalizados para el componente PeriodFormatter.
+ */
+export type PeriodFormatterStyles = OverridesStyleRules<PeriodFormatterType, typeof PERIOD_FORMATTER_KEY_COMPONENT, Theme>;

package/components/formatters/index.d.ts

@@ -3,7 +3,7 @@ export { useFormatDate as getFormatDate, DateFormatter } from './DateFormatter';
 export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter';
 export { PointsFormatter, getFormatPoints } from './PointsFormatter';
 export { getFormatConcatenated, ConcatenatedFormatter } from './ConcatenatedFormatter';
-export { useFormatPeriod, PeriodFormatter } from './PeriodFormatter';
+export { useFormatPeriod, PeriodFormatter } from './PeriodFormatter/PeriodFormatter';
 export { PriceFormatter, getFormatPrice } from './PriceFormatter';
 export * from './DistanceToNowFormatter';
 export type { UncertaintyRange } from './UncertaintyFormatter/types';