@m4l/components 9.3.36 → 9.3.37

package/@types/export.d.ts

@@ -55,6 +55,9 @@ declare module '@mui/material/styles' {
     M4LCheckBox?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
     };
+    M4LRadioButton?: {
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
+    };
     M4LDataGrid?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDataGrid'];
     };

package/@types/types.d.ts

@@ -76,6 +76,10 @@ import {
   CheckBoxOwnerState,
   CheckBoxSlotsType,
 } from '../components/mui_extended/CheckBox/types';
+import {
+  RadioButtonOwnerState,
+  RadioButtonSlotsType,
+} from '../components/mui_extended/RadioButton/types';
 import {
   RHFNumberInputOwnerState,
   RHFNumberInputSlotsType,
@@ -292,11 +296,26 @@ import {
   ImageTextOwnerState,
   ImageTextSlotsType,
 } from '../components/ImageText/types';
-import { FormContainerOwnerState, FormContainerSlotsType } from '../components/FormContainer/types';
-import { ActionsGroupOwnerState, ActionsGroupSlotsType } from '../components/ActionsGroup/types';
-import { TabsNavigatorSlotsType, TabsNavigatorOwnerState } from '../components/TabsNavigator/types';
-import { EditLabelOwnerState, EditLabelSlotsType } from '../components/EditLabel/types';
-import { MFIsolationAppOwnerState, MFIsolationAppSlotsType } from '../components/MFIsolationApp/types';
+import {
+  FormContainerOwnerState,
+  FormContainerSlotsType,
+} from '../components/FormContainer/types';
+import {
+  ActionsGroupOwnerState,
+  ActionsGroupSlotsType,
+} from '../components/ActionsGroup/types';
+import {
+  TabsNavigatorSlotsType,
+  TabsNavigatorOwnerState,
+} from 'src/components/TabsNavigator/types';
+import {
+  EditLabelOwnerState,
+  EditLabelSlotsType,
+} from '../components/EditLabel/types';
+import {
+  MFIsolationAppOwnerState,
+  MFIsolationAppSlotsType,
+} from '../components/MFIsolationApp/types';
 import {
   TagsFormatterOwnerState,
   TagsFormatterSlotsType,
@@ -333,6 +352,7 @@ declare module '@mui/material/styles' {
     M4LSelect: SelectSlotsType;
     M4LTypography: TypographySlotsType;
     M4LCheckBox: CheckBoxSlotsType;
+    M4LRadioButton: RadioButtonSlotsType;
     M4LRHFNumberInput: RHFNumberInputSlotsType;
     M4LTab: TabSlotsType;
     M4LButton: ButtonSlotsType;
@@ -347,7 +367,8 @@ declare module '@mui/material/styles' {
     M4LChip: ChipSlotsType;
     M4LCircularProgress: CircularProgressSlotsType;
     M4LPaperForm: PaperFormSlotsType;
-    M4LWindowBase: WindowBaseType;a
+    M4LWindowBase: WindowBaseType;
+    a;
     M4LWindowConfirm: WindowConfirmType;
     M4LAppBar: AppBarSlotsType;
     M4LDialog: DialogType;
@@ -427,6 +448,7 @@ declare module '@mui/material/styles' {
     M4LSelect: Partial<SelectOwnerState>;
     M4LTypography: Partial<TypographyOwnerState>;
     M4LCheckBox: Partial<CheckBoxOwnerState>;
+    M4LRadioButton: Partial<RadioButtonOwnerState>;
     M4LRHFNumberInput: Partial<RHFNumberInputOwnerState>;
     M4LTab: Partial<TabOwnerState>;
     M4LButton: Partial<ButtonOwnerState>;
@@ -620,6 +642,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
       variants?: ComponentsVariants['M4LCheckBox'];
     };
+    M4LRadioButton?: {
+      defaultProps?: ComponentsPropsList['M4LRadioButton'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRadioButton'];
+      variants?: ComponentsVariants['M4LRadioButton'];
+    };
     M4LActionCancel?: {
       defaultProps?: ComponentsPropsList['M4LActionCancel'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LActionCancel'];

package/components/DataGrid/DataGrid.js

@@ -30,6 +30,7 @@ function DataGrid(props) {
     initialRowHeightVariant,
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     dataTestId = "",
     customHeader: CustomHeader,
     visibleCustomHeader = true,
@@ -87,6 +88,7 @@ function DataGrid(props) {
           checkedRows,
           rowActionsGetter,
           onCheckedRowsChange,
+          checkedRowsMultiple,
           rowKeyGetter,
           rows,
           onChangeUserColumns,

package/components/DataGrid/Datagrid.styles.js

@@ -424,6 +424,10 @@ const dataGridStyles = {
           borderColor: `${theme.vars.palette?.border.disabled} !important`,
           ...theme.colorSchemes.finalTheme.typography.body
         },
+        "&:has(> .M4LRadioButton-root)": {
+          overflow: "visible",
+          paddingInline: 0
+        },
         "&.rdg-cell-frozen": {
           display: "flex",
           boxShadow: "unset",
@@ -734,7 +738,10 @@ const dataGridStyles = {
    */
   cardsContainer: () => ({
     height: "auto",
-    overflow: "auto"
+    overflow: "auto",
+    "& > .M4LContainerFlow-root": {
+      alignItems: "start"
+    }
   }),
   /**
    * Card de la vista cards
@@ -746,6 +753,8 @@ const dataGridStyles = {
     minWidth: "280px",
     maxWidth: "580px",
     cursor: "pointer",
+    padding: theme.vars.size.baseSpacings["sp2-5"],
+    gap: "0 !important",
     // Si está checked (pero no selected), border de checked
     ...ownerState?.checked && !ownerState?.selected && {
       borderColor: theme.vars.palette.primary.activeOpacity
@@ -786,7 +795,7 @@ const dataGridStyles = {
   cardHeaderRight: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Contenido de la card (body)

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -155,6 +155,7 @@ function DataGridProvider(props) {
     initialRowHeightVariant = "standard",
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     rowKeyGetter,
     onChangeUserColumns,
     externalSortSettings: sortSettings,
@@ -530,6 +531,7 @@ function DataGridProvider(props) {
         rowActionsGetter,
         setRowHeightVariant: setCurrentRowHeightInternal,
         onCheckedRowsChange,
+        checkedRowsMultiple,
         rowKeyGetter,
         onChangeUserColumns,
         sortColumns,

package/components/DataGrid/contexts/DataGridContext/types.d.ts

@@ -79,7 +79,7 @@ export interface IGridConfig {
 export interface IGridConfigExtended extends IGridConfig {
     columnsConfigCards?: BaseConfigColumnCards[];
 }
-export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
+export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
     id: number | string;
     children: ReactNode;
     rowsCount: number;
@@ -92,7 +92,7 @@ export type RowHeightState = {
     rowHeight: number;
     rowHeaderHeight: number;
 };
-export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
+export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
     getConfigColumns: (viewMode: ViewMode) => IViewConfig[];
     onChangeColumnsConfig: (viewMode: ViewMode, config: IViewConfig[]) => void;
     onChangeColumnsOrder: (viewMode: ViewMode, sourceKey: string, targetKey: string) => void;

package/components/DataGrid/subcomponents/Cards/subcomponents/CardHeader/index.js

@@ -15,7 +15,7 @@ function CardHeader({
   checkedRows,
   onCheckedRowsChange
 }) {
-  const { rowKeyGetter, rowActionsGetter, size } = useDataGrid();
+  const { rowKeyGetter, rowActionsGetter, size, checkedRowsMultiple } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const rowKey = useMemo(() => rowKeyGetter(row), [rowKeyGetter, row]);
   const onChange = useCallback(
@@ -23,15 +23,23 @@ function CardHeader({
       if (!onCheckedRowsChange || !checkedRows) {
         return;
       }
-      const newCheckedRows = new Set(checkedRows);
-      if (checked) {
-        newCheckedRows.add(rowKey);
+      if (checkedRowsMultiple === false) {
+        if (checked) {
+          onCheckedRowsChange(/* @__PURE__ */ new Set([rowKey]));
+        } else {
+          onCheckedRowsChange(/* @__PURE__ */ new Set());
+        }
       } else {
-        newCheckedRows.delete(rowKey);
+        const newCheckedRows = new Set(checkedRows);
+        if (checked) {
+          newCheckedRows.add(rowKey);
+        } else {
+          newCheckedRows.delete(rowKey);
+        }
+        onCheckedRowsChange(newCheckedRows);
       }
-      onCheckedRowsChange(newCheckedRows);
     },
-    [checkedRows, onCheckedRowsChange, rowKey]
+    [checkedRows, onCheckedRowsChange, rowKey, checkedRowsMultiple]
   );
   const anchorOrigin = useMemo(
     () => ({

package/components/DataGrid/subcomponents/CheckboxCellAdapter/index.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { SelectCellFormatter } from "react-data-grid";
 import { C as CheckboxFormatter } from "../Table/subcomponents/CheckboxFormatter.js";
+import { R as RadioButtonFormatter } from "../Table/subcomponents/RadioButtonFormatter.js";
 import { a as DataGridContext } from "../../contexts/DataGridContext/index.js";
 import { l as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
 const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref) {
@@ -14,12 +15,14 @@ const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref)
   } = props;
   const context = useContext(DataGridContext);
   const viewMode = context?.viewMode ?? "cards";
+  const checkedRowsMultiple = context?.checkedRowsMultiple;
   if (viewMode !== "table") {
     const handleClick = (e) => {
       e.stopPropagation();
     };
+    const FormatterComponent = checkedRowsMultiple === false ? RadioButtonFormatter : CheckboxFormatter;
     return /* @__PURE__ */ jsx(CheckboxCellWrapperStyled, { onClick: handleClick, children: /* @__PURE__ */ jsx(
-      CheckboxFormatter,
+      FormatterComponent,
       {
         ref,
         checked: value,

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from "react";
 import { g as getDragHeaderRenderer } from "./getDragHeaderRenderer.js";
 import { A as ActionsColumn } from "../subcomponents/ActionsColumn.js";
 import { f as filterColumnClassName, S as SelectColumn } from "../subcomponents/SelectColumn.js";
+import { R as RadioSelectColumn } from "../subcomponents/RadioSelectColumn.js";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { u as useFilters } from "../../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
@@ -38,7 +39,7 @@ function getComparator(columns, sortColumn) {
   }
 }
 const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
-const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths, rowActionsGetter) => {
+const getInOrderColumns = (columns, hasCheckedRows, checkedRowsMultiple, columnsConfig, columnsWidths, rowActionsGetter) => {
   let filteredSortedColumns = columns.filter((column) => {
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
@@ -64,7 +65,8 @@ const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths
     filteredSortedColumns = [ActionsColumn, ...filteredSortedColumns];
   }
   if (hasCheckedRows) {
-    filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
+    const selectionColumn = checkedRowsMultiple === false ? RadioSelectColumn : SelectColumn;
+    filteredSortedColumns = [selectionColumn, ...filteredSortedColumns];
   }
   return filteredSortedColumns;
 };
@@ -89,6 +91,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
     rowActionsGetter,
     checkedRows,
     onCheckedRowsChange,
+    checkedRowsMultiple,
     sortColumns,
     setSortColumns
   } = useDataGrid();
@@ -109,6 +112,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         sourceColumns,
         !!checkedRows && !!onCheckedRowsChange,
         //Si están seteados se habilita el múltipe
+        checkedRowsMultiple,
         columnsConfig,
         columnsWidths,
         rowActionsGetter

package/components/DataGrid/subcomponents/Table/subcomponents/RadioButtonFormatter.d.ts

@@ -0,0 +1,6 @@
+import { RenderCheckboxProps } from 'react-data-grid';
+/**
+ * Componente visual del RadioButton que se renderiza dentro de cada celda del DataGrid.
+ * ¿Para que sirve? Es un wrapper alrededor del componente Radio del MUI que adapta las props de react-data-grid
+ */
+export declare const RadioButtonFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/DataGrid/subcomponents/Table/subcomponents/RadioButtonFormatter.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { R as RadioButton } from "../../../../mui_extended/RadioButton/RadioButton.js";
+const RadioButtonFormatter = forwardRef(function RadioFormatter({ onChange, checked, ...props }, _ref) {
+  function handleChange(e) {
+    onChange(e.target.checked, e.nativeEvent.shiftKey);
+  }
+  return /* @__PURE__ */ jsx(RadioButton, { checked, onChange: handleChange, ...props });
+});
+export {
+  RadioButtonFormatter as R
+};

package/components/DataGrid/subcomponents/Table/subcomponents/RadioSelectColumn.d.ts

@@ -0,0 +1,64 @@
+import { Column, RenderCellProps, RenderGroupCellProps, RenderHeaderCellProps } from 'react-data-grid';
+export declare const filterColumnClassName = "filter-cell";
+export declare const filterHeight = 35;
+/**
+ * Formateador para la celda de selección con radio button en filas agrupadas.
+ *
+ * **Nota:** Para radio buttons (selección única), no tiene sentido seleccionar grupos completos,
+ * por lo que este formateador retorna `null` y no renderiza ningún control.
+ * @param _props - Propiedades para renderizar la celda de grupo (no utilizadas).
+ * @returns `null` - No se renderiza ningún control de selección en grupos.
+ * @example
+ * // En un DataGrid con grupos, las filas de grupo no tendrán radio button
+ * // Solo las filas individuales tendrán radio buttons
+ */
+export declare function RadioSelectGroupFormatter(_props: RenderGroupCellProps<unknown>): null;
+/**
+ * Formateador para la celda de selección con radio button en filas individuales.
+ *
+ * Este componente maneja la lógica de **selección única**: cuando el usuario hace click
+ * en un radio button, se REEMPLAZA completamente la selección anterior con solo la fila actual.
+ *
+ * **Comportamiento:**
+ * - Si `checked` es `true`: El Set de `checkedRows` se reemplaza con `[rowKey actual]`
+ * - Si `checked` es `false`: El Set de `checkedRows` se vacía (deselección)
+ * @param props - Propiedades para renderizar la celda, incluyendo la fila actual.
+ * @returns Un componente `SelectCellFormatter` configurado como radio button.
+ * @example
+ * // Cuando el usuario hace click en el radio de la fila con ID=5:
+ * // checkedRows antes: Set([3])
+ * // checkedRows después: Set([5])  ← Reemplaza, no agrega
+ */
+export declare function RadioSelectFormatter(props: RenderCellProps<any, any>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Renderizador para la celda de cabecera (header) de la columna de selección con radio buttons.
+ *
+ * **Nota:** A diferencia de los checkboxes, los radio buttons NO tienen funcionalidad de
+ * "Seleccionar Todo", ya que solo se puede seleccionar una fila a la vez. Por lo tanto,
+ * este renderizador retorna `null` y no muestra ningún control en el header.
+ * @param _props - Propiedades para renderizar la celda de cabecera (no utilizadas).
+ * @returns `null` - No se renderiza ningún control en la cabecera.
+ * @example
+ * // La cabecera de la columna estará vacía (sin checkbox "Select All")
+ */
+export declare function RadioSelectColumnHeaderRenderer(_props: RenderHeaderCellProps<any, any>): null;
+/**
+ * Definición de la columna de selección con radio buttons para el DataGrid.
+ *
+ * Esta columna permite **selección única** de filas mediante radio buttons.
+ *
+ * **Características:**
+ * - **Ancho fijo:** 32px (igual que la columna de checkboxes)
+ * - **No redimensionable:** `resizable: false`
+ * - **No draggable:** `isDraggable: false`
+ * - **No sortable:** `sortable: false`
+ * - **Congelada:** `frozen: true` (siempre visible al hacer scroll horizontal)
+ * - **Header vacío:** No tiene control "Select All"
+ * - **Selección única:** Solo una fila puede estar seleccionada a la vez
+ * @example
+ * // En useSortColumnsRows.tsx:
+ * const selectionColumn = checkedRowsMultiple === false
+ *   ? RadioSelectColumn   // ← Selección única con radio buttons
+ *   : SelectColumn;       // ← Selección múltiple con checkboxes
+ */
+export declare const RadioSelectColumn: Column<any, any>;

package/components/DataGrid/subcomponents/Table/subcomponents/RadioSelectColumn.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { R as RadioButtonFormatter } from "./RadioButtonFormatter.js";
+function RadioSelectGroupFormatter(_props) {
+  return null;
+}
+function RadioSelectFormatter(props) {
+  const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
+  const onChange = (checked, _isShiftClick) => {
+    if (checked) {
+      onCheckedRowsChange && onCheckedRowsChange(/* @__PURE__ */ new Set([rowKeyGetter(props.row)]));
+    } else {
+      onCheckedRowsChange && onCheckedRowsChange(/* @__PURE__ */ new Set());
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    RadioButtonFormatter,
+    {
+      checked: checkedRows?.has(rowKeyGetter(props.row)) || false,
+      tabIndex: props.tabIndex,
+      onChange,
+      "aria-label": "Select"
+    }
+  );
+}
+function RadioSelectColumnHeaderRenderer(_props) {
+  return null;
+}
+const RadioSelectColumn = {
+  key: DATAGRID_SELECT_COLUMN_KEY,
+  name: "",
+  width: 32,
+  minWidth: 32,
+  isDraggable: false,
+  resizable: false,
+  sortable: false,
+  frozen: true,
+  type: "boolean",
+  renderHeaderCell: RadioSelectColumnHeaderRenderer,
+  renderCell: RadioSelectFormatter,
+  renderGroupCell: RadioSelectGroupFormatter
+};
+export {
+  RadioSelectColumn as R
+};

package/components/DataGrid/tests/table/subcomponents/RadioButtonFormatter.test.d.ts

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

package/components/DataGrid/tests/table/subcomponents/RadioSelectColumn.test.d.ts

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

package/components/DataGrid/types.d.ts

@@ -137,6 +137,13 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
     onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
     checkedRows?: ReadonlySet<TKey>;
     onCheckedRowsChange?: (mapRowsSelected: ReadonlySet<TKey>) => void;
+    /**
+     * Define si la selección de filas es múltiple (checkboxes) o única (radio buttons).
+     *
+     * - `true` (default): Permite seleccionar múltiples filas con checkboxes
+     * - `false`: Permite seleccionar solo una fila con radio buttons
+     */
+    checkedRowsMultiple?: boolean;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, TSummaryRow>) => void>;
     /**
      * Propiedad opcional que recibe la configuración de las columnas

package/components/mui_extended/RadioButton/RadioButton.d.ts

@@ -0,0 +1,24 @@
+import { RadioButtonProps } from './types';
+/**
+ * Componente RadioButton 🔘
+ *
+ * Este componente representa un radio button personalizado que puede ser utilizado en formularios y otros lugares donde se necesite una opción de selección única.
+ * @param {RadioButtonProps} props - Las propiedades del componente.
+ * @param {React.Ref<HTMLButtonElement>} ref - La referencia al elemento raíz del componente.
+ * @returns {JSX.Element} El componente RadioButton renderizado.
+ * @example
+ * ```tsx
+ * <RadioButton
+ *   size="medium"
+ *   disabled={false}
+ *   color="primary"
+ *   inlineText="Opción 1"
+ *   mandatory={true}
+ *   mandatoryMessage="Este campo es obligatorio"
+ *   helperMessage="Más información"
+ *   htmlFor="radio-id"
+ *   error={false}
+ * />
+ * ```
+ */
+export declare const RadioButton: import('react').ForwardRefExoticComponent<Omit<RadioButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/components/mui_extended/RadioButton/RadioButton.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { R as RadioButtonRootStyled, M as MUIRadioStyled, I as IconStyled, a as IconCheckedStyled, T as TypographyStyled, S as SkeletonStyled } from "./slots/RadioButtonSlots.js";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { R as RADIO_BUTTON_KEY_COMPONENT } from "./constants.js";
+import clsx from "clsx";
+import { p as pathIcons } from "./icons.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const RadioButton = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      size = "medium",
+      disabled,
+      color = "default",
+      mandatory,
+      mandatoryMessage,
+      helperMessage,
+      id,
+      htmlFor,
+      error,
+      inlineText,
+      checked = false,
+      ...others
+    } = props;
+    const { currentSize } = useComponentSize(size);
+    const isSkeleton = useModuleSkeleton();
+    const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+    const classes = getComponentSlotRoot(RADIO_BUTTON_KEY_COMPONENT);
+    const { host_static_assets, environment_assets } = useEnvironment();
+    const hookId = useId();
+    const finalId = id || hookId;
+    const ownerState = {
+      disabled,
+      color,
+      error,
+      size,
+      checked
+    };
+    return /* @__PURE__ */ jsx(
+      RadioButtonRootStyled,
+      {
+        ownerState: { ...ownerState },
+        className: clsx(className, classes),
+        children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            MUIRadioStyled,
+            {
+              ref,
+              ownerState: { ...ownerState },
+              disableRipple: true,
+              id: finalId,
+              checked,
+              checkedIcon: /* @__PURE__ */ jsx(
+                IconCheckedStyled,
+                {
+                  src: `${host_static_assets}/${environment_assets}/${pathIcons.checked}`,
+                  size: currentSize,
+                  color: disabled ? "text.disabled" : error ? "error.enabled" : "primary.enabled",
+                  ownerState: { ...ownerState }
+                }
+              ),
+              icon: /* @__PURE__ */ jsx(
+                IconStyled,
+                {
+                  src: `${host_static_assets}/${environment_assets}/${pathIcons.unchecked}`,
+                  size: currentSize,
+                  ownerState: { ...ownerState },
+                  color: disabled ? "text.disabled" : error ? "error.enabled" : "text.secondary"
+                }
+              ),
+              disabled,
+              inputProps: {
+                "aria-labelledby": finalId,
+                "aria-invalid": error ? "true" : void 0
+              },
+              ...others
+            }
+          ),
+          inlineText && /* @__PURE__ */ jsx(
+            TypographyStyled,
+            {
+              component: "label",
+              htmlFor: finalId,
+              variant: "body",
+              ownerState: { ...ownerState },
+              size: adjustedSize,
+              disabled,
+              ellipsis: true,
+              children: inlineText
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SkeletonStyled, { variant: "rounded", className: "radioSkeleton" }),
+          inlineText ? /* @__PURE__ */ jsx(
+            SkeletonStyled,
+            {
+              variant: "rectangular",
+              className: "radioSkeletonInlineText"
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+export {
+  RadioButton as R
+};

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

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

package/components/mui_extended/RadioButton/RadioButton.styles.js

@@ -0,0 +1,126 @@
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+const radioButtonStyles = {
+  /**
+   * Estilos generales para el radio button 🟦
+   * @param {object} theme - El tema de MUI.
+   * @returns {object} - Los estilos aplicados al root del radio button.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    outline: "none",
+    overflow: "visible",
+    boxSizing: "border-box",
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "fit-content"
+  }),
+  /**
+   * Componente MuiRadio, FocusVisible para cuando está seleccionado el RadioButton 🟩
+   * @param {object} theme - El tema de MUI.
+   * @param {object} ownerState - El estado del componente.
+   * @returns {object} - Los estilos aplicados al MuiRadio.
+   */
+  muiRadio: ({ theme, ownerState }) => {
+    const color = ownerState?.error ? "error" : "primary";
+    const opacityColor = ownerState?.error ? "error" : "default";
+    return {
+      overflow: "visible",
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "action",
+        (size) => {
+          return {
+            width: size,
+            height: size
+          };
+        }
+      ),
+      borderRadius: theme.size.borderRadius.r4,
+      "&:hover": {
+        backgroundColor: theme.vars.palette[opacityColor].hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: theme.vars.palette[opacityColor].activeOpacity
+      },
+      "&.Mui-checked": {
+        "&:hover": {
+          backgroundColor: theme.vars.palette[color].hoverOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette[color].hover
+          }
+        },
+        "&:active": {
+          backgroundColor: theme.vars.palette[color].activeOpacity,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette[color].active
+          }
+        }
+      },
+      "&.Mui-focusVisible, &:focus-visible": {
+        outline: `1px solid ${theme.vars.palette.primary.focusVisible}`
+      },
+      ...ownerState?.disabled && {
+        pointerEvents: ownerState?.disabled ? "none" : "auto",
+        "&:hover": {
+          pointerEvents: ownerState?.disabled ? "none" : "auto"
+        }
+      }
+    };
+  },
+  /**
+   * Estilos para el skeleton del RadioButton 📝
+   * @param {object} theme - El tema de MUI.
+   * @param {object} ownerState - El estado del componente.
+   * @returns {object} - Los estilos aplicados al skeletonStyled.
+   */
+  skeletonStyled: ({ theme, ownerState }) => {
+    return {
+      borderRadius: theme.vars.size.borderRadius.r1,
+      backgroundColor: theme.vars.palette?.skeleton.default,
+      "&.radioSkeleton": {
+        ...getSizeStyles(
+          theme,
+          ownerState?.size || "medium",
+          "action",
+          (size) => {
+            return {
+              width: size
+            };
+          }
+        ),
+        ...getSizeStyles(
+          theme,
+          ownerState?.size || "small",
+          "action",
+          (size) => {
+            return {
+              width: size
+            };
+          }
+        )
+      },
+      "&.radioSkeletonInlineText": {
+        width: theme.vars.size.baseSpacings.sp12,
+        borderRadius: theme.vars.size.borderRadius.r1,
+        ...getSizeStyles(theme, ownerState?.size || "medium", "base"),
+        ...getSizeStyles(theme, ownerState?.size || "small", "base")
+      }
+    };
+  },
+  /**
+   * Estilos para el inline-text del RadioButton 📝
+   */
+  typographyStyled: {},
+  /**
+   * El estilado de este slot, se hace en muiRadio, debido a que el input absorbe los pseudo selectores, entonces hay que hacerlos desde el nodo padre. 🟨
+   */
+  icon: {},
+  /**
+   * El estilado de este slot, se hace en muiRadio, debido a que el input absorbe los pseudo selectores, entonces hay que hacerlos desde el nodo padre. 🟨
+   */
+  iconChecked: {}
+};
+export {
+  radioButtonStyles as r
+};

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

@@ -0,0 +1 @@
+export declare const RADIO_BUTTON_KEY_COMPONENT = "M4LRadioButton";

package/components/mui_extended/RadioButton/constants.js

@@ -0,0 +1,4 @@
+const RADIO_BUTTON_KEY_COMPONENT = "M4LRadioButton";
+export {
+  RADIO_BUTTON_KEY_COMPONENT as R
+};

package/components/mui_extended/RadioButton/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const pathIcons: {
+    checked: string;
+    unchecked: string;
+};

package/components/mui_extended/RadioButton/icons.js

@@ -0,0 +1,7 @@
+const pathIcons = {
+  checked: "frontend/components/radio_button/assets/icons/checked.svg",
+  unchecked: "frontend/components/radio_button/assets/icons/noCheked.svg"
+};
+export {
+  pathIcons as p
+};

package/components/mui_extended/RadioButton/index.d.ts

@@ -0,0 +1 @@
+export { RadioButton } from './RadioButton';

package/components/mui_extended/RadioButton/index.js

@@ -0,0 +1 @@
+

package/components/mui_extended/RadioButton/slots/RadioButtonEnum.d.ts

@@ -0,0 +1,8 @@
+export declare enum RadioButtonSlots {
+    root = "root",
+    muiRadio = "muiRadio",
+    typographyStyled = "typographyStyled",
+    skeletonStyled = "skeletonStyled",
+    iconChecked = "iconChecked",
+    icon = "icon"
+}

package/components/mui_extended/RadioButton/slots/RadioButtonEnum.js

@@ -0,0 +1,12 @@
+var RadioButtonSlots = /* @__PURE__ */ ((RadioButtonSlots2) => {
+  RadioButtonSlots2["root"] = "root";
+  RadioButtonSlots2["muiRadio"] = "muiRadio";
+  RadioButtonSlots2["typographyStyled"] = "typographyStyled";
+  RadioButtonSlots2["skeletonStyled"] = "skeletonStyled";
+  RadioButtonSlots2["iconChecked"] = "iconChecked";
+  RadioButtonSlots2["icon"] = "icon";
+  return RadioButtonSlots2;
+})(RadioButtonSlots || {});
+export {
+  RadioButtonSlots as R
+};

package/components/mui_extended/RadioButton/slots/RadioButtonSlots.d.ts

@@ -0,0 +1,20 @@
+export declare const RadioButtonRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RadioButtonOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const MUIRadioStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').RadioProps, keyof import('@mui/material').RadioProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RadioButtonOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const TypographyStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "hidden" | "color" | "left" | "right" | "bottom" | "top" | "content" | "style" | "position" | "ellipsis" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "dataTestid" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "translate" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RadioButtonOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const SkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SkeletonOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
+}, "children" | "style" | "variant" | "width" | "height" | "animation" | "className" | "classes" | "sx">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "variant" | "width" | "height" | "translate" | "animation" | "className" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RadioButtonOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const IconCheckedStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RadioButtonOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RadioButtonOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/mui_extended/RadioButton/slots/RadioButtonSlots.js

@@ -0,0 +1,39 @@
+import { styled } from "@mui/material/styles";
+import { Radio, Skeleton } from "@mui/material";
+import { R as RadioButtonSlots } from "./RadioButtonEnum.js";
+import { R as RADIO_BUTTON_KEY_COMPONENT } from "../constants.js";
+import { r as radioButtonStyles } from "../RadioButton.styles.js";
+import { T as Typography } from "../../Typography/Typography.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+const RadioButtonRootStyled = styled("div", {
+  name: RADIO_BUTTON_KEY_COMPONENT,
+  slot: RadioButtonSlots.root
+})(radioButtonStyles.root);
+const MUIRadioStyled = styled(Radio, {
+  name: RADIO_BUTTON_KEY_COMPONENT,
+  slot: RadioButtonSlots.muiRadio
+})(radioButtonStyles.muiRadio);
+const TypographyStyled = styled(Typography, {
+  name: RADIO_BUTTON_KEY_COMPONENT,
+  slot: RadioButtonSlots.typographyStyled
+})(radioButtonStyles.typographyStyled);
+const SkeletonStyled = styled(Skeleton, {
+  name: RADIO_BUTTON_KEY_COMPONENT,
+  slot: RadioButtonSlots.skeletonStyled
+})(radioButtonStyles.skeletonStyled);
+const IconCheckedStyled = styled(Icon, {
+  name: RADIO_BUTTON_KEY_COMPONENT,
+  slot: RadioButtonSlots.iconChecked
+})(radioButtonStyles.iconChecked);
+const IconStyled = styled(Icon, {
+  name: RADIO_BUTTON_KEY_COMPONENT,
+  slot: RadioButtonSlots.icon
+})(radioButtonStyles.icon);
+export {
+  IconStyled as I,
+  MUIRadioStyled as M,
+  RadioButtonRootStyled as R,
+  SkeletonStyled as S,
+  TypographyStyled as T,
+  IconCheckedStyled as a
+};

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

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

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

@@ -0,0 +1,50 @@
+import { RadioProps as MUIRadioProps, Theme } from '@mui/material';
+import { RadioButtonSlots } from './slots/RadioButtonEnum';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { RADIO_BUTTON_KEY_COMPONENT } from './constants';
+import { LabelProps } from '../../Label/types';
+export interface RadioButtonProps extends MUIRadioProps, Omit<LabelProps, 'label' | 'size'> {
+    /**
+     * El texto que se muestra junto al radio button
+     */
+    inlineText?: string;
+    /**
+     * Tamaño
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Color
+     */
+    color?: Extract<ComponentPalletColor, 'default'>;
+}
+export interface RadioButtonOwnerState {
+    /**
+     * Indica si el RadioButton está marcado.
+     */
+    checked?: boolean;
+    /**
+     * Indica si el RadioButton está deshabilitado.
+     */
+    disabled?: boolean;
+    /**
+     * El tamaño del RadioButton.
+     */
+    size: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * El color del RadioButton.
+     */
+    color: Extract<ComponentPalletColor, 'default'>;
+    /**
+     * Indica si hay un error en el RadioButton.
+     */
+    error?: boolean;
+}
+/**
+ * Tipos de slots de RadioButton
+ */
+export type RadioButtonSlotsType = keyof typeof RadioButtonSlots;
+/**
+ * Estilos del RadioButton
+ */
+export type RadioButtonStyles = M4LOverridesStyleRules<RadioButtonSlotsType, typeof RADIO_BUTTON_KEY_COMPONENT, Theme>;

package/components/mui_extended/index.d.ts

@@ -8,6 +8,7 @@ export { Breadcrumbs } from './Breadcrumbs';
 export type { TLink } from './Breadcrumbs/types';
 export * from './Button/Button';
 export * from './CheckBox';
+export * from './RadioButton';
 export { CircularProgress } from './CircularProgress';
 export { Badge } from './Badge';
 export * from './ImageButton/ImageButton';

package/index.js

@@ -97,6 +97,7 @@ import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
 import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
 import { B as B5 } from "./components/mui_extended/Button/Button.js";
 import { C as C19 } from "./components/mui_extended/CheckBox/CheckBox.js";
+import { R as R4 } from "./components/mui_extended/RadioButton/RadioButton.js";
 import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
 import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
 import { S as S4 } from "./components/mui_extended/Select/Select.js";
@@ -137,38 +138,38 @@ import { u as u17 } from "./components/formatters/DistanceToNowFormatter/hooks/u
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { F as F2 } from "./components/FormContainer/FormContainer.js";
 import { G } from "./components/GridLayout/GridLayout.js";
-import { R as R4 } from "./components/GridLayout/subcomponents/Responsive/index.js";
+import { R as R5 } from "./components/GridLayout/subcomponents/Responsive/index.js";
 import { c as c2, e, d as d3 } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { i, k } from "./components/GridLayout/utils.js";
 import { w } from "./components/GridLayout/subcomponents/withSizeProvider/index.js";
 import { H as H2 } from "./components/HelmetPage/index.js";
 import { H as H3 } from "./components/HelperError/HelperError.js";
-import { R as R5 } from "./components/hook-form/RHFAutocomplete/RHFAutocomplete.js";
+import { R as R6 } from "./components/hook-form/RHFAutocomplete/RHFAutocomplete.js";
 import { g as g19 } from "./components/hook-form/RHFAutocomplete/dictionary.js";
-import { R as R6 } from "./components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js";
+import { R as R7 } from "./components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js";
 import { g as g20 } from "./components/hook-form/RHFAutocompleteAsync/dictionary.js";
-import { R as R7 } from "./components/hook-form/RHFDateTime/RHFDateTime.js";
-import { R as R8 } from "./components/hook-form/RHFMultiCheckbox/index.js";
-import { R as R9 } from "./components/hook-form/RHFSelect/RHFSelect.js";
-import { R as R10 } from "./components/hook-form/RHFHelperError/index.js";
-import { R as R11 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
-import { R as R12 } from "./components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js";
-import { R as R13 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
-import { R as R14 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
-import { R as R15 } from "./components/hook-form/RHFTextField/RHFTextField.js";
-import { R as R16 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
+import { R as R8 } from "./components/hook-form/RHFDateTime/RHFDateTime.js";
+import { R as R9 } from "./components/hook-form/RHFMultiCheckbox/index.js";
+import { R as R10 } from "./components/hook-form/RHFSelect/RHFSelect.js";
+import { R as R11 } from "./components/hook-form/RHFHelperError/index.js";
+import { R as R12 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
+import { R as R13 } from "./components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js";
+import { R as R14 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
+import { R as R15 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
+import { R as R16 } from "./components/hook-form/RHFTextField/RHFTextField.js";
+import { R as R17 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
 import { g as g21 } from "./components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js";
 import { r } from "./components/hook-form/RHFPeriod/RHFPeriod.styles.js";
-import { R as R17 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
-import { R as R18 } from "./components/hook-form/RHFPeriod/constants.js";
-import { R as R19 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
-import { N as N3, P as P6, R as R20, S as S7 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
-import { R as R21 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
-import { R as R22 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
+import { R as R18 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
+import { R as R19 } from "./components/hook-form/RHFPeriod/constants.js";
+import { R as R20 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
+import { N as N3, P as P6, R as R21, S as S7 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
+import { R as R22 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
+import { R as R23 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { V as V2, b as b4, a as a9 } from "./components/hook-form/RHFormProvider/types.js";
-import { F as F3, R as R23, u as u18 } from "./components/hook-form/RHFormProvider/RHFormProvider.js";
+import { F as F3, R as R24, u as u18 } from "./components/hook-form/RHFormProvider/RHFormProvider.js";
 import { d as d4, a as a10, b as b5, c as c3 } from "./components/hook-form/RHFormProvider/schema.js";
-import { R as R24 } from "./components/hook-form/RHFActionsGroup/RHFActionsGroup.js";
+import { R as R25 } from "./components/hook-form/RHFActionsGroup/RHFActionsGroup.js";
 import { I as I5 } from "./components/Icon/Icon.js";
 import { I as I6 } from "./components/Image/Image.js";
 import { L as L6 } from "./components/Label/Label.js";
@@ -381,30 +382,31 @@ export {
   P11 as PrintingSystem,
   P as PropagateLoaderSpinner,
   P12 as PropertyValue,
-  R24 as RHFActionsGroup,
-  R5 as RHFAutocomplete,
-  R6 as RHFAutocompleteAsync,
-  R14 as RHFCheckbox,
-  R13 as RHFColorPicker,
-  R7 as RHFDateTime,
-  R10 as RHFHelperError,
-  R8 as RHFMultiCheckbox,
-  R21 as RHFNumberInput,
-  R17 as RHFPeriod,
-  R20 as RHFPeriodRootStyled,
-  R19 as RHFPeriodSlots,
-  R11 as RHFRadioGroup,
-  R9 as RHFSelect,
-  R15 as RHFTextField,
-  R16 as RHFTextFieldPassword,
-  R22 as RHFUploadImage,
-  R12 as RHFUploadSingleFile,
-  R18 as RHF_PERIOD_KEY_COMPONENT,
-  R23 as RHFormProvider,
+  R25 as RHFActionsGroup,
+  R6 as RHFAutocomplete,
+  R7 as RHFAutocompleteAsync,
+  R15 as RHFCheckbox,
+  R14 as RHFColorPicker,
+  R8 as RHFDateTime,
+  R11 as RHFHelperError,
+  R9 as RHFMultiCheckbox,
+  R22 as RHFNumberInput,
+  R18 as RHFPeriod,
+  R21 as RHFPeriodRootStyled,
+  R20 as RHFPeriodSlots,
+  R12 as RHFRadioGroup,
+  R10 as RHFSelect,
+  R16 as RHFTextField,
+  R17 as RHFTextFieldPassword,
+  R23 as RHFUploadImage,
+  R13 as RHFUploadSingleFile,
+  R19 as RHF_PERIOD_KEY_COMPONENT,
+  R24 as RHFormProvider,
+  R4 as RadioButton,
   R3 as ReactJsonViewer,
   R as Resizable,
   R2 as ResizableBox,
-  R4 as Responsive,
+  R5 as Responsive,
   S21 as SKELETON_SVG_ICON,
   S8 as ScrollBar,
   S as SectionCommercial,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.36",
+  "version": "9.3.37",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {