@m4l/components 9.3.43 → 9.4.0

package/components/WindowBase/hooks/useDynamicMFParameters/index.d.ts

@@ -1,11 +1,11 @@
-import { DynamicMFState } from '../../contexts/DynamicMFParmsContext/store';
+import { DynamicMFStateWithActions } from '../../contexts/DynamicMFParmsContext/store';
 /**
  * TODO: Documentar
  */
-export declare const useDynamicMFParameters: () => Omit<import('zustand').StoreApi<import('../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>, "setState"> & {
-    setState(nextStateOrUpdater: import('../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions | Partial<import('../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
+export declare const useDynamicMFParameters: () => Omit<import('zustand').StoreApi<DynamicMFStateWithActions>, "setState"> & {
+    setState(nextStateOrUpdater: DynamicMFStateWithActions | Partial<DynamicMFStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
 };
 /**
  * TODO: Documentar
  */
-export declare function useDynamicMFParametersStore<T>(selector: (state: DynamicMFState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useDynamicMFParametersStore<T>(selector: (state: DynamicMFStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

package/components/commercial/SectionCommercial/styles.d.ts

@@ -1 +1 @@
-export declare const SectionCommercialRoot: import('@emotion/styled').StyledComponent<import('../../mui_extended/Stack').StackProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const SectionCommercialRoot: import('@emotion/styled').StyledComponent<Omit<import('../../mui_extended/Stack').StackProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/components/hook-form/RHFCheckableList/RHFCheckableList.d.ts

@@ -0,0 +1,7 @@
+import { RHFCheckableListProps } from './types';
+/**
+ * RHFCheckableList is a custom checkable list component integrated with React Hook Form.
+ * It renders a list of checkable items that can optionally be grouped, with optional label,
+ * helper text, and error message.
+ */
+export declare const RHFCheckableList: (props: RHFCheckableListProps) => JSX.Element;

package/components/hook-form/RHFCheckableList/RHFCheckableList.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useFormContext, Controller } from "react-hook-form";
+import { useId } from "react";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { R as RHF_CHECKABLE_LIST_COMPONENT_KEY, a as RHF_CHECKABLE_LIST_CLASSES } from "./constants.js";
+import { R as RHFCheckableListEnum } from "./slots/RHFCheckableListEnum.js";
+import { R as RootStyled, L as LabelStyled, C as CheckableListStyled, H as HelperErrorStyled } from "./slots/RHFCheckableListSlots.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const RHFCheckableList = (props) => {
+  const {
+    id,
+    name,
+    items,
+    groups,
+    label,
+    labelSkeletonWidth,
+    helperErrorSkeletonWidth,
+    helperMessage,
+    mandatory,
+    mandatoryMessage,
+    disabled,
+    size = "medium",
+    className,
+    dataTestId,
+    width = "100%",
+    ...other
+  } = props;
+  const reactId = useId();
+  const htmlForId = id || reactId;
+  const { currentSize } = useComponentSize(size);
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(RootStyled, { className: clsx(RHF_CHECKABLE_LIST_CLASSES.root, className), children: /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field: { value, onChange }, fieldState: { error } }) => {
+        const onChangeLocal = (selectedIds) => {
+          onChange(selectedIds || []);
+        };
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          label && /* @__PURE__ */ jsx(
+            LabelStyled,
+            {
+              id: `${htmlForId}-label`,
+              htmlFor: htmlForId,
+              label,
+              mandatory,
+              mandatoryMessage,
+              helperMessage,
+              size: currentSize,
+              skeletonWidth: labelSkeletonWidth,
+              error: Boolean(error),
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CheckableListStyled,
+            {
+              items,
+              groups,
+              value: value || [],
+              onChange: onChangeLocal,
+              disabled,
+              size: currentSize,
+              width,
+              ...getPropDataTestId(
+                RHF_CHECKABLE_LIST_COMPONENT_KEY,
+                RHFCheckableListEnum.checkableList,
+                dataTestId
+              ),
+              ...other
+            }
+          ),
+          error?.message && /* @__PURE__ */ jsx(
+            HelperErrorStyled,
+            {
+              size: currentSize,
+              message: error.message,
+              skeletonWidth: helperErrorSkeletonWidth
+            }
+          )
+        ] });
+      }
+    }
+  ) });
+};
+export {
+  RHFCheckableList as R
+};

package/components/hook-form/RHFCheckableList/RHFCheckableList.styles.d.ts

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

package/components/hook-form/RHFCheckableList/RHFCheckableList.styles.js

@@ -0,0 +1,30 @@
+const rhfCheckableListStyles = {
+  /**
+   * Root: Estilos del contenedor principal del componente.
+   */
+  root: () => ({
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    height: "100%",
+    gap: 8
+  }),
+  /**
+   * label: Estilos del label del componente.
+   */
+  label: () => ({}),
+  /**
+   * checkableList: Estilos de la lista chequeable del componente.
+   */
+  checkableList: () => ({
+    width: "100%"
+  }),
+  /**
+   * helperError: Estilos del mensaje de error del componente.
+   */
+  helperError: () => ({})
+};
+export {
+  rhfCheckableListStyles as r
+};

package/components/hook-form/RHFCheckableList/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Key del componente RHFCheckableList usado para identificar el componente en el registro de componentes.
+ */
+export declare const RHF_CHECKABLE_LIST_COMPONENT_KEY = "RHFCheckableList";
+/**
+ * Clases CSS generadas dinámicamente para el componente RHFCheckableList.
+ */
+export declare const RHF_CHECKABLE_LIST_CLASSES: Record<"label" | "root" | "checkableList" | "helperError", string>;

package/components/hook-form/RHFCheckableList/constants.js

@@ -0,0 +1,11 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { R as RHFCheckableListEnum } from "./slots/RHFCheckableListEnum.js";
+const RHF_CHECKABLE_LIST_COMPONENT_KEY = "RHFCheckableList";
+const RHF_CHECKABLE_LIST_CLASSES = getComponentClasses(
+  RHF_CHECKABLE_LIST_COMPONENT_KEY,
+  RHFCheckableListEnum
+);
+export {
+  RHF_CHECKABLE_LIST_COMPONENT_KEY as R,
+  RHF_CHECKABLE_LIST_CLASSES as a
+};

package/components/hook-form/RHFCheckableList/index.d.ts

@@ -0,0 +1,2 @@
+export { RHFCheckableList } from './RHFCheckableList';
+export type { RHFCheckableListProps } from './types';

package/components/hook-form/RHFCheckableList/index.js

@@ -0,0 +1 @@
+

package/components/hook-form/RHFCheckableList/slots/RHFCheckableListEnum.d.ts

@@ -0,0 +1,6 @@
+export declare enum RHFCheckableListEnum {
+    root = "root",
+    label = "label",
+    checkableList = "checkableList",
+    helperError = "helperError"
+}

package/components/hook-form/RHFCheckableList/slots/RHFCheckableListEnum.js

@@ -0,0 +1,10 @@
+var RHFCheckableListEnum = /* @__PURE__ */ ((RHFCheckableListEnum2) => {
+  RHFCheckableListEnum2["root"] = "root";
+  RHFCheckableListEnum2["label"] = "label";
+  RHFCheckableListEnum2["checkableList"] = "checkableList";
+  RHFCheckableListEnum2["helperError"] = "helperError";
+  return RHFCheckableListEnum2;
+})(RHFCheckableListEnum || {});
+export {
+  RHFCheckableListEnum as R
+};

package/components/hook-form/RHFCheckableList/slots/RHFCheckableListSlots.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Elemento div de react construido a través de styled,
+ * sirve para agrupar el contenido del componente `RHFCheckableList`
+ */
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Elemento Label construido a través de styled,
+ * sirve para mostrar el label del componente `RHFCheckableList`
+ */
+export declare const LabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Label').LabelProps, keyof import('../../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+/**
+ * Elemento CheckableList construido a través de styled,
+ * sirve para mostrar la lista chequeable del componente `RHFCheckableList`
+ */
+export declare const CheckableListStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../CheckableList').CheckableListProps, keyof import('../../../CheckableList').CheckableListProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+/**
+ * Elemento HelperError construido a través de styled,
+ * sirve para mostrar el mensaje de error del componente `RHFCheckableList`
+ */
+export declare const HelperErrorStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../HelperError').HelperErrorProps & import('react').RefAttributes<HTMLLabelElement>, keyof import('../../../HelperError').HelperErrorProps | keyof import('react').RefAttributes<HTMLLabelElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;

package/components/hook-form/RHFCheckableList/slots/RHFCheckableListSlots.js

@@ -0,0 +1,29 @@
+import { styled } from "@mui/material";
+import { R as RHF_CHECKABLE_LIST_COMPONENT_KEY } from "../constants.js";
+import { R as RHFCheckableListEnum } from "./RHFCheckableListEnum.js";
+import { r as rhfCheckableListStyles } from "../RHFCheckableList.styles.js";
+import { L as Label } from "../../../Label/Label.js";
+import { C as CheckableList } from "../../../CheckableList/CheckableList.js";
+import { H as HelperError } from "../../../HelperError/HelperError.js";
+const RootStyled = styled("div", {
+  name: RHF_CHECKABLE_LIST_COMPONENT_KEY,
+  slot: RHFCheckableListEnum.root
+})(rhfCheckableListStyles?.root);
+const LabelStyled = styled(Label, {
+  name: RHF_CHECKABLE_LIST_COMPONENT_KEY,
+  slot: RHFCheckableListEnum.label
+})(rhfCheckableListStyles?.label);
+const CheckableListStyled = styled(CheckableList, {
+  name: RHF_CHECKABLE_LIST_COMPONENT_KEY,
+  slot: RHFCheckableListEnum.checkableList
+})(rhfCheckableListStyles?.checkableList);
+const HelperErrorStyled = styled(HelperError, {
+  name: RHF_CHECKABLE_LIST_COMPONENT_KEY,
+  slot: RHFCheckableListEnum.helperError
+})(rhfCheckableListStyles?.helperError);
+export {
+  CheckableListStyled as C,
+  HelperErrorStyled as H,
+  LabelStyled as L,
+  RootStyled as R
+};

package/components/hook-form/RHFCheckableList/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RHFCheckableListEnum';
+export * from './RHFCheckableListSlots';

package/components/hook-form/RHFCheckableList/types.d.ts

@@ -0,0 +1,60 @@
+import { HelperErrorProps } from '../../HelperError';
+import { LabelProps } from '../../Label/types';
+import { CheckableListProps } from '../../CheckableList/types';
+import { Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { RHFCheckableListEnum } from './slots/RHFCheckableListEnum';
+import { RHF_CHECKABLE_LIST_COMPONENT_KEY } from './constants';
+import { Theme } from '@mui/material';
+/**
+ * Props para el componente RHFCheckableList, incluye las propiedades especiales del CheckableList, Label,
+ * así como las propiedades requeridas por react hook form.
+ */
+export interface RHFCheckableListProps extends Omit<CheckableListProps, 'value' | 'onChange' | 'data-testid' | 'className'>, Omit<LabelProps, 'dataTestId' | 'error' | 'children' | 'className' | 'disabled' | 'size' | 'skeletonWidth'> {
+    /**
+     * Identificador para el manejo de campos en react hook form.
+     */
+    name: string;
+    /**
+     * Tamaño del componente
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Propiedad que deshabilita la interacción del componente.
+     */
+    disabled?: boolean;
+    /**
+     * Nombre de clase CSS personalizada que se aplicará al componente.
+     */
+    className?: string;
+    /**
+     * Propiedad usada para facilitar la identificación del componente en las pruebas.
+     */
+    dataTestId?: string;
+    /**
+     * Medida de anchura para el esqueleto del label
+     */
+    labelSkeletonWidth?: LabelProps['skeletonWidth'];
+    /**
+     * Medida de anchura para el esqueleto del helperError
+     */
+    helperErrorSkeletonWidth?: HelperErrorProps['skeletonWidth'];
+}
+/**
+ * Define el estado del componente `RHFCheckableList`.
+ */
+export interface RHFCheckableListOwnerState {
+}
+/**
+ * Define las claves del objeto `RHFCheckableListSlotsType`, que se utilizan para
+ * hacer referencia a los diferentes slots disponibles para estilizar el componente
+ * `RHFCheckableList`.
+ */
+export type RHFCheckableListSlotsType = keyof typeof RHFCheckableListEnum;
+/**
+ * Define los estilos del componente `RHFCheckableListStyles`. Permite la personalización parcial
+ * de las reglas de estilo mediante `OverridesStyleRules`.
+ *
+ * Puede ser parcial o estar indefinido.
+ */
+export type RHFCheckableListStyles = M4LOverridesStyleRules<RHFCheckableListEnum, typeof RHF_CHECKABLE_LIST_COMPONENT_KEY, Theme>;

package/components/hook-form/RHFColorPicker/hooks/useColorPicker/useColorPicker.d.ts

@@ -28,7 +28,7 @@ export declare const useColorPicker: (props: UseColorPickerProps) => {
     anchorEl: HTMLElement | null;
     tempColor: string | undefined;
     iconButtonOwnerState: {
-        size: "small" | "medium";
+        size: import('@m4l/styles').Sizes;
         disabled: boolean | undefined;
         value: string;
         error: boolean;

package/components/hook-form/RHFPeriod/subcomponents/Period/Period.js

@@ -90,16 +90,15 @@ const Period = (props) => {
       onTotalChange(newPeriodTime.id, singleValue);
     }
   };
-  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
   const ownerState = {
-    size: normalizedSize,
+    size: currentSize,
     disabled
   };
   return /* @__PURE__ */ jsxs(PeriodRootStyled, { ownerState, children: [
     /* @__PURE__ */ jsx(
       Icon,
       {
-        size: normalizedSize,
+        size: currentSize,
         src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`,
         disabled
       }
@@ -107,7 +106,7 @@ const Period = (props) => {
     /* @__PURE__ */ jsx(
       SelectStyled,
       {
-        size: normalizedSize,
+        size: currentSize,
         value: options[selPeriodTime].id,
         options,
         onChange: (autcValue) => {

package/components/hook-form/RHFRadioGroup/RHFRadioGroup.d.ts

@@ -1,6 +1,6 @@
-import { RadioGroupProps, RadioProps } from '@mui/material';
 import { RHFRadioGroupProps } from './types';
 /**
- * TODO: Documentar
+ * RHFRadioGroup: Componente que permite seleccionar una opción de un grupo de opciones.
+ * Por defecto usa el componente Radio de M4L basado en MUI, pero se puede pasar un componente personalizado.
  */
-export declare function RHFRadioGroup<TOption extends RadioProps>({ name, options, getOptionLabel, getOptionValue, getOptionIconUrl, renderOptionLabel, ControlLabel, ...other }: RHFRadioGroupProps<TOption> & RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function RHFRadioGroup<TOption>({ id, name, options, getOptionLabel, getOptionValue, label, mandatory, mandatoryMessage, helperMessage, size, dataTestId, labelSkeletonWidth, helperErrorSkeletonWidth, disabled, className, ControlOption, ...other }: RHFRadioGroupProps<TOption>): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFRadioGroup/RHFRadioGroup.js

@@ -1,41 +1,83 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
-import { RadioGroup, FormControlLabel, Radio } from "@mui/material";
-import { O as OptionIconLabelFormatter } from "./formatters/OptionIconLabelFormatter/index.js";
+import { R as Radio } from "../../mui_extended/Radio/Radio.js";
+import { R as RootStyled, a as RadioGroupStyled } from "./slots/styled.js";
+import { useId } from "react";
+import { R as RHFRADIO_GROUP_KEY_COMPONENT, a as RHFRADIO_GROUP_CLASSES } from "./constants.js";
+import clsx from "clsx";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { R as RHFRadioGroupSlots } from "./slots/slots.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { L as Label } from "../../Label/Label.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
 function RHFRadioGroup({
+  id,
   name,
   options,
   getOptionLabel,
   getOptionValue,
-  getOptionIconUrl,
-  renderOptionLabel = OptionIconLabelFormatter,
-  ControlLabel = Radio,
+  label,
+  mandatory,
+  mandatoryMessage,
+  helperMessage,
+  size,
+  dataTestId,
+  labelSkeletonWidth,
+  helperErrorSkeletonWidth,
+  disabled,
+  className,
+  ControlOption = Radio,
   ...other
 }) {
-  const { control } = useFormContext();
-  return /* @__PURE__ */ jsx(
+  const reactId = useId();
+  const htmlForId = id || reactId;
+  const { currentSize } = useComponentSize(size);
+  const { control: formControl } = useFormContext();
+  return /* @__PURE__ */ jsx(RootStyled, { className: clsx(RHFRADIO_GROUP_CLASSES.root, className), children: /* @__PURE__ */ jsx(
     Controller,
     {
       name,
-      control,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(RadioGroup, { ...field, row: true, ...other, children: options.map((option) => {
-          return /* @__PURE__ */ jsx(
-            FormControlLabel,
+      control: formControl,
+      render: ({ field: { onChange, value }, fieldState: { error } }) => {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          label && /* @__PURE__ */ jsx(
+            Label,
             {
-              defaultValue: field.value,
-              value: getOptionValue(option),
-              control: /* @__PURE__ */ jsx(ControlLabel, { ...option }),
-              label: renderOptionLabel(option, getOptionLabel, getOptionIconUrl)
-            },
-            getOptionValue(option)
-          );
-        }) }),
-        error && /* @__PURE__ */ jsx(HelperError, { message: error.message || "" })
-      ] })
+              id: `${htmlForId}-label`,
+              htmlFor: htmlForId,
+              label,
+              mandatory,
+              mandatoryMessage,
+              helperMessage,
+              size: currentSize,
+              skeletonWidth: labelSkeletonWidth,
+              error: Boolean(error),
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RadioGroupStyled,
+            {
+              onChange,
+              value,
+              ...other,
+              ...getPropDataTestId(
+                RHFRADIO_GROUP_KEY_COMPONENT,
+                RHFRadioGroupSlots.radioGroup,
+                dataTestId
+              ),
+              children: options.map((option) => {
+                const optionValue = getOptionValue(option);
+                const optionLabel = getOptionLabel(option);
+                return /* @__PURE__ */ jsx(ControlOption, { checked: value === optionValue, onChange, value: optionValue, inlineText: optionLabel }, optionValue);
+              })
+            }
+          ),
+          error && /* @__PURE__ */ jsx(HelperError, { message: error.message || "" })
+        ] });
+      }
     }
-  );
+  ) });
 }
 export {
   RHFRadioGroup as R

package/components/hook-form/RHFRadioGroup/RHFRadioGroup.styles.d.ts

@@ -0,0 +1,5 @@
+import { RHFRadioGroupStyles } from './types';
+/**
+ * Estilos para el componente `RHFColorPicker`. Define los estilos de cada parte del componente, como el root, label, color, popover, sketch picker, y las acciones.
+ */
+export declare const rhfRadioGroupStyles: RHFRadioGroupStyles;

package/components/hook-form/RHFRadioGroup/RHFRadioGroup.styles.js

@@ -0,0 +1,29 @@
+const rhfRadioGroupStyles = {
+  /**
+   * Estilos para el elemento raíz del `RHFColorPicker`.
+   * Aplica un layout de columna con un espacio entre los elementos basado en el tamaño de espaciado definido en el tema.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    height: "fit-content",
+    overflow: "hidden",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    width: "100%"
+  }),
+  /**
+   * Estilos para el elemento `RadioGroup`.
+   */
+  radioGroup: () => ({}),
+  /**
+   * Estilos para el elemento `OptionWrapper`.
+   */
+  optionWrapper: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  })
+};
+export {
+  rhfRadioGroupStyles as r
+};

package/components/hook-form/RHFRadioGroup/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Nombre de clase que se usa para dar identidad a los slots del componente.
+ */
+export declare const RHFRADIO_GROUP_KEY_COMPONENT = "M4LRHFRadioGroup";
+export declare const RHFRADIO_GROUP_CLASSES: Record<"radioGroup" | "root" | "optionWrapper", string>;

package/components/hook-form/RHFRadioGroup/constants.js

@@ -0,0 +1,8 @@
+import { R as RHFRadioGroupSlots } from "./slots/slots.js";
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+const RHFRADIO_GROUP_KEY_COMPONENT = "M4LRHFRadioGroup";
+const RHFRADIO_GROUP_CLASSES = getComponentClasses(RHFRADIO_GROUP_KEY_COMPONENT, RHFRadioGroupSlots);
+export {
+  RHFRADIO_GROUP_KEY_COMPONENT as R,
+  RHFRADIO_GROUP_CLASSES as a
+};

package/components/hook-form/RHFRadioGroup/formatters/OptionIconLabelFormatter/index.d.ts

@@ -1,5 +1,5 @@
-import { GetOptionStringType } from '../../types';
+import { GetOptionLabelType } from '../../types';
 /**
  * TODO: Documentar
  */
-export declare function OptionIconLabelFormatter<T>(option: T, getOptionLabel: GetOptionStringType<T>, getOptionIconUrl: GetOptionStringType<T>): import("react/jsx-runtime").JSX.Element;
+export declare function OptionIconLabelFormatter<T>(option: T, getOptionLabel: GetOptionLabelType<T>, getOptionIconUrl: GetOptionLabelType<T>): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFRadioGroup/slots/slots.d.ts

@@ -0,0 +1,5 @@
+export declare enum RHFRadioGroupSlots {
+    root = "root",
+    radioGroup = "radioGroup",
+    optionWrapper = "optionWrapper"
+}

package/components/hook-form/RHFRadioGroup/slots/slots.js

@@ -0,0 +1,9 @@
+var RHFRadioGroupSlots = /* @__PURE__ */ ((RHFRadioGroupSlots2) => {
+  RHFRadioGroupSlots2["root"] = "root";
+  RHFRadioGroupSlots2["radioGroup"] = "radioGroup";
+  RHFRadioGroupSlots2["optionWrapper"] = "optionWrapper";
+  return RHFRadioGroupSlots2;
+})(RHFRadioGroupSlots || {});
+export {
+  RHFRadioGroupSlots as R
+};

package/components/hook-form/RHFRadioGroup/slots/styled.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Componente que es un envoltorio `div` que representa el contenedor raíz del `RHFColorPicker`.
+ */
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Componente que es un envoltorio `div` que representa el contenedor raíz del `RHFColorPicker`.
+ */
+export declare const RadioGroupStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').RadioGroupProps, keyof import('@mui/material').RadioGroupProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const OptionWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/hook-form/RHFRadioGroup/slots/styled.js

@@ -0,0 +1,20 @@
+import { styled, RadioGroup } from "@mui/material";
+import { R as RHFRADIO_GROUP_KEY_COMPONENT } from "../constants.js";
+import { r as rhfRadioGroupStyles } from "../RHFRadioGroup.styles.js";
+import { R as RHFRadioGroupSlots } from "./slots.js";
+const RootStyled = styled("div", {
+  name: RHFRADIO_GROUP_KEY_COMPONENT,
+  slot: RHFRadioGroupSlots.root
+})(rhfRadioGroupStyles?.root);
+const RadioGroupStyled = styled(RadioGroup, {
+  name: RHFRADIO_GROUP_KEY_COMPONENT,
+  slot: RHFRadioGroupSlots.radioGroup
+})(rhfRadioGroupStyles?.radioGroup);
+styled("div", {
+  name: RHFRADIO_GROUP_KEY_COMPONENT,
+  slot: RHFRadioGroupSlots.optionWrapper
+})(rhfRadioGroupStyles?.optionWrapper);
+export {
+  RootStyled as R,
+  RadioGroupStyled as a
+};