@m4l/components 9.1.50 → 9.1.51

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

@@ -0,0 +1,9 @@
+import { RHFPeriodProps } from './types';
+/**
+ * Componente que renderiza un campo de formulario para ingresar un período.
+ * @author cesar - automatic
+ * @createdAt 2024-12-27 15:03:02 - automatic
+ * @updatedAt 2024-12-31 11:03:05 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare const RHFPeriod: (props: RHFPeriodProps) => import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFPeriod/{index.js → RHFPeriod.js}

@@ -1,24 +1,28 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { R as RHFPeriodRoot } from "./styles.js";
 import { useFormContext, Controller } from "react-hook-form";
-import { R as RHFPeriodUtilityClasses } from "./classes/index.js";
 import { u as useFormFocus } from "../../../hooks/useFormFocus/index.js";
 import { useModuleSkeleton } from "@m4l/core";
 import { L as Label } from "../../Label/Label.js";
-import { P as Period } from "../../Period/Period.js";
+import { R as RHFPeriodRootStyled } from "./slots/RHFPeriodSlots.js";
+import { P as Period } from "./subcomponents/Period/Period.js";
+import { R as RHF_PERIOD_KEY_COMPONENT } from "./constants.js";
+import clsx from "clsx";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { R as RHFPeriodSlots } from "./slots/RHFPeriodEnum.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
 const RHFPeriod = (props) => {
   const {
     name,
     readOnly,
-    skeletonWidth,
-    skeletonHeight,
-    state,
     label,
     mandatory,
     mandatoryMessage,
     helperMessage,
-    size
+    disabled,
+    size = "medium",
+    dataTestId,
+    className
   } = props;
   const { control } = useFormContext();
   const isSkeleton = useModuleSkeleton();
@@ -27,14 +31,17 @@ const RHFPeriod = (props) => {
     isFocus: !isSkeleton ? isFocus : false,
     isTabSelected: !isSkeleton ? isTabSelected : false
   };
-  const classes = RHFPeriodUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(
-    RHFPeriodRoot,
+    RHFPeriodRootStyled,
     {
-      className: classes.root,
+      className: clsx(getComponentSlotRoot(RHF_PERIOD_KEY_COMPONENT), className),
+      ...getPropDataTestId(RHF_PERIOD_KEY_COMPONENT, RHFPeriodSlots.root, dataTestId),
+      role: "rhf-period",
+      ownerState,
       onFocus: handlerFocus,
       onBlur: handlerOnBlur,
       onKeyUp: handlerOnKeyUp,
+      "aria-disabled": disabled ? "true" : void 0,
       children: /* @__PURE__ */ jsx(
         Controller,
         {
@@ -45,7 +52,7 @@ const RHFPeriod = (props) => {
               label && /* @__PURE__ */ jsx(
                 Label,
                 {
-                  htmlFor: "",
+                  size,
                   label,
                   mandatory,
                   mandatoryMessage,
@@ -55,13 +62,12 @@ const RHFPeriod = (props) => {
               /* @__PURE__ */ jsx(
                 Period,
                 {
+                  disabled,
                   value,
                   onChange,
-                  state: !!error === true ? "error" : state,
+                  size,
                   readOnly,
-                  skeletonWidth,
-                  skeletonHeight,
-                  size
+                  error: !!error
                 }
               ),
               error && /* @__PURE__ */ jsx(HelperError, { message: error.message || "" })

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

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

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

@@ -0,0 +1,61 @@
+const rhfPeriodStyles = {
+  /**
+   * root class
+   * @updatedUser cesar - automatic
+   * @updatedAt 2025-01-03 14:54:18 - automatic
+   * @createdAt 2024-12-27 16:45:26 - automatic
+   * @author cesar - automatic
+   * @author cesar - automatic
+   * @createdAt 2024-11-21 08:55:01 - automatic
+   * @updatedAt 2025-01-03 14:54:18 - automatic
+   * @updatedUser cesar - automatic
+   */
+  root: ({ theme }) => ({
+    width: "270px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * periodRoot class
+   * @author cesar - automatic
+   * @createdAt 2024-12-30 07:34:10 - automatic
+   * @updatedAt 2025-01-03 14:54:18 - automatic
+   * @updatedUser cesar - automatic
+   */
+  periodRoot: ({ theme }) => ({
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * textField class
+   * @author cesar - automatic
+   * @createdAt 2024-12-30 07:34:10 - automatic
+   * @updatedAt 2025-01-03 14:54:18 - automatic
+   * @updatedUser cesar - automatic
+   */
+  textField: ({ theme }) => ({
+    borderRadius: "50px",
+    width: "43px !important",
+    border: theme.vars.palette.border.default,
+    color: theme.vars.palette.text.disabled
+  }),
+  /**
+   * select class
+   * @author cesar - automatic
+   * @createdAt 2024-12-30 16:21:22 - automatic
+   * @updatedAt 2025-01-03 14:54:18 - automatic
+   * @updatedUser cesar - automatic
+   */
+  select: () => ({
+    width: "100px"
+  })
+};
+export {
+  rhfPeriodStyles as r
+};

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

@@ -0,0 +1 @@
+export declare const RHF_PERIOD_KEY_COMPONENT = "M4LRHFPeriod";

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

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

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

@@ -1,5 +1,6 @@
-import { RHFPeriodProps } from './types';
-/**
- * TODO: Documentar
- */
-export declare const RHFPeriod: (props: RHFPeriodProps) => import("react/jsx-runtime").JSX.Element;
+export * from './RHFPeriod.styles';
+export * from './RHFPeriod';
+export * from './constants';
+export * from './slots/RHFPeriodEnum';
+export * from './slots/RHFPeriodSlots';
+export * from './types';

package/components/hook-form/RHFPeriod/slots/RHFPeriodEnum.d.ts

@@ -0,0 +1,6 @@
+export declare enum RHFPeriodSlots {
+    root = "root",
+    periodRoot = "periodRoot",
+    textField = "textField",
+    select = "select"
+}

package/components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js

@@ -0,0 +1,10 @@
+var RHFPeriodSlots = /* @__PURE__ */ ((RHFPeriodSlots2) => {
+  RHFPeriodSlots2["root"] = "root";
+  RHFPeriodSlots2["periodRoot"] = "periodRoot";
+  RHFPeriodSlots2["textField"] = "textField";
+  RHFPeriodSlots2["select"] = "select";
+  return RHFPeriodSlots2;
+})(RHFPeriodSlots || {});
+export {
+  RHFPeriodSlots as R
+};

package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.d.ts

@@ -0,0 +1,4 @@
+export declare const RHFPeriodRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const PeriodRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/TextField/types').TextFieldProps, keyof import('../../../mui_extended/TextField/types').TextFieldProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const SelectStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Select').SelectProps, keyof import('../../../mui_extended/Select').SelectProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js

@@ -0,0 +1,28 @@
+import { styled } from "@mui/material/styles";
+import { R as RHF_PERIOD_KEY_COMPONENT } from "../constants.js";
+import { r as rhfPeriodStyles } from "../RHFPeriod.styles.js";
+import { R as RHFPeriodSlots } from "./RHFPeriodEnum.js";
+import { T as TextField } from "../../../mui_extended/TextField/TextField.js";
+import { S as Select } from "../../../mui_extended/Select/Select.js";
+const RHFPeriodRootStyled = styled("div", {
+  name: RHF_PERIOD_KEY_COMPONENT,
+  slot: RHFPeriodSlots.root
+})(rhfPeriodStyles?.root);
+const PeriodRootStyled = styled("div", {
+  name: RHF_PERIOD_KEY_COMPONENT,
+  slot: RHFPeriodSlots.periodRoot
+})(rhfPeriodStyles?.periodRoot);
+const TextFieldStyled = styled(TextField, {
+  name: RHF_PERIOD_KEY_COMPONENT,
+  slot: RHFPeriodSlots.textField
+})(rhfPeriodStyles?.textField);
+const SelectStyled = styled(Select, {
+  name: RHF_PERIOD_KEY_COMPONENT,
+  slot: RHFPeriodSlots.select
+})(rhfPeriodStyles?.select);
+export {
+  PeriodRootStyled as P,
+  RHFPeriodRootStyled as R,
+  SelectStyled as S,
+  TextFieldStyled as T
+};

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

@@ -0,0 +1,2 @@
+export * from './RHFPeriodEnum';
+export * from './RHFPeriodSlots';

package/components/hook-form/RHFPeriod/slots/index.js

@@ -0,0 +1 @@
+

package/components/hook-form/RHFPeriod/subcomponents/Period/Period.d.ts

@@ -0,0 +1,9 @@
+import { PeriodProps } from './types';
+/**
+ * Componente que renderiza un campo de formulario para ingresar un período.
+ * @author cesar - automatic
+ * @createdAt 2024-12-30 16:32:50 - automatic
+ * @updatedAt 2025-01-03 08:17:13 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare const Period: ({ value: valuePeriod, onChange, size, disabled, error }: PeriodProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { E as ETimePeriods } from "./types.js";
+import { d as dictionary } from "./dictionary.js";
+import { useMemo, useCallback } from "react";
+import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+import { P as PeriodRootStyled, S as SelectStyled, T as TextFieldStyled } from "../../slots/RHFPeriodSlots.js";
+import { I as Icon } from "../../../../Icon/Icon.js";
+const normalizePeriod = (period) => {
+  const defaultPeriodTime = { id: ETimePeriods.YEARS, label: "" };
+  return {
+    selPeriodTime: period?.selPeriodTime ?? defaultPeriodTime,
+    singleValue: period?.singleValue ?? ""
+  };
+};
+const Period = ({ value: valuePeriod, onChange, size, disabled, error }) => {
+  const { getLabel } = useModuleDictionary();
+  const { currentSize } = useComponentSize(size);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
+  const { selPeriodTime, singleValue } = normalizePeriod(valuePeriod);
+  const options = useMemo(
+    () => [
+      { id: ETimePeriods.YEARS.toString(), label: getLabel(dictionary.LABEL_YEARS) },
+      { id: ETimePeriods.MONTHS.toString(), label: getLabel(dictionary.LABEL_MONTHS) },
+      { id: ETimePeriods.DAYS.toString(), label: getLabel(dictionary.LABEL_DAYS) }
+    ],
+    [getLabel]
+  );
+  const handlePeriodChange = useCallback(
+    (newPeriodTime, newValue) => {
+      onChange({ selPeriodTime: newPeriodTime, singleValue: newValue });
+    },
+    [onChange]
+  );
+  const ownerState = {
+    size: normalizedSize,
+    disabled,
+    isValid: !error
+  };
+  const handleKeyDown = useCallback((e) => {
+    const validKeys = /^[0-9]$/;
+    if (!validKeys.test(e.key) && e.key !== "Backspace" && e.key !== "Delete" && e.key !== "Tab") {
+      e.preventDefault();
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(PeriodRootStyled, { ownerState, children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: normalizedSize,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SelectStyled,
+      {
+        value: selPeriodTime.id,
+        options,
+        onChange: (selectedOption) => handlePeriodChange(selectedOption, singleValue),
+        disabled,
+        size: normalizedSize,
+        error,
+        variant: "outlined"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextFieldStyled,
+      {
+        type: "number",
+        variant: "outlined",
+        value: singleValue,
+        InputProps: { disableUnderline: true },
+        error,
+        size: normalizedSize,
+        onChange: (e) => handlePeriodChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value, 10)),
+        onKeyDown: handleKeyDown,
+        disabled
+      }
+    )
+  ] });
+};
+export {
+  Period as P
+};

package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.d.ts

@@ -0,0 +1,7 @@
+export declare const PERIOD_FORMATTER_DICTIONARY_KEY = "period_formatter";
+export declare const dictionary: {
+    LABEL_YEARS: string;
+    LABEL_MONTHS: string;
+    LABEL_DAYS: string;
+};
+export declare function getPeriodComponetsDictionary(): string[];

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

@@ -0,0 +1,8 @@
+const dictionary = {
+  LABEL_YEARS: "period.label_years",
+  LABEL_MONTHS: "period.label_months",
+  LABEL_DAYS: "period.label_days"
+};
+export {
+  dictionary as d
+};

package/components/hook-form/RHFPeriod/subcomponents/Period/types.d.ts

@@ -0,0 +1,33 @@
+import { Sizes } from '@m4l/styles';
+export declare enum ETimePeriods {
+    YEARS = 0,
+    MONTHS = 1,
+    DAYS = 2
+}
+export type PeriodTime = {
+    id: number | string;
+    label: string;
+};
+export type SKTWrapperProps = Pick<PeriodProps, 'readOnly'>;
+export type PeriodType = {
+    selPeriodTime: PeriodTime;
+    singleValue: number | '';
+};
+export interface PeriodProps {
+    value: PeriodType;
+    onChange: (newValue: PeriodType) => void;
+    readOnly?: boolean;
+    size: Sizes;
+    disabled?: boolean;
+    isValid?: boolean;
+    error?: boolean;
+}
+export interface WrapperProps {
+    error: boolean;
+}
+export interface PeriodOwnerState extends Pick<PeriodProps, 'disabled'> {
+    focus?: boolean;
+    isValid?: boolean;
+    size: Sizes;
+    error?: boolean;
+}

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

@@ -0,0 +1,9 @@
+var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
+  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
+  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
+  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
+  return ETimePeriods2;
+})(ETimePeriods || {});
+export {
+  ETimePeriods as E
+};

package/components/hook-form/RHFPeriod/tests/RHFPeriod.test.d.ts

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

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

@@ -1,12 +1,22 @@
 import { LabelProps } from '../../Label/types';
-import { PeriodProps, PeriodState, PeriodVariant } from '../../../components/Period/types';
-export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly' | 'skeletonWidth' | 'skeletonHeight' | 'size'>, Omit<LabelProps, 'label'> {
+import { PeriodProps } from '../RHFPeriod/subcomponents/Period/types';
+import { RHFPeriodSlots } from './slots/RHFPeriodEnum';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Theme } from '@mui/material';
+import { RHF_PERIOD_KEY_COMPONENT } from './constants';
+export type RHFPeriodType = keyof typeof RHFPeriodSlots;
+export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly'>, Omit<LabelProps, 'label'> {
+    size?: 'small' | 'medium';
     name: string;
-    variant?: PeriodVariant;
-    state?: PeriodState;
     label?: string;
+    dataTestId?: string;
+    /**
+     * Clase CSS adicional para aplicar estilos personalizados al componente.
+     */
+    className?: string;
 }
-export interface OwnerState {
+export interface RHFPeriodOwnerState {
     isFocus: boolean;
     isTabSelected: boolean;
 }
+export type RHFPeriodStyles = OverridesStyleRules<RHFPeriodType, typeof RHF_PERIOD_KEY_COMPONENT, Theme>;

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

@@ -10,7 +10,7 @@ export { RHFSelect } from './RHFSelect';
 export { RHFHelperError } from './RHFHelperError';
 export * from './RHFTextField';
 export * from './RHFTextFieldPassword';
-export { RHFPeriod } from './RHFPeriod';
+export { RHFPeriod } from './RHFPeriod/RHFPeriod';
 export { getPeriodComponetsDictionary } from '../Period/dictionary';
 export { RHFRadioGroup } from './RHFRadioGroup';
 export * from './RHFUpload';

package/components/mui_extended/Select/Select.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEnvironment, useModuleSkeleton, useModuleDictionary, getPropertyByString } from "@m4l/core";
+import { useTheme } from "@mui/material";
+import clsx from "clsx";
+import { useState, useMemo } from "react";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { I as Icon } from "../../Icon/Icon.js";
+import { S as SkeletonSelectStyled, a as SelectRootStyled, L as LabelPlaceholerStyled, R as RenderOptionContainerStyled, b as LabelOptionStyled, M as MenuItemSelectStyled, I as IconButtonStyled } from "./slots/SelectSlots.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const Select = (props) => {
+  const {
+    value,
+    options = [],
+    onChange,
+    size = "medium",
+    disabled = false,
+    error = false,
+    color = "default",
+    variant = "outlined",
+    placeholder = "Selecciona una opcion",
+    className
+  } = props;
+  const { currentSize } = useComponentSize(size);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isSkeleton = useModuleSkeleton();
+  const { getLabel } = useModuleDictionary();
+  const theme = useTheme();
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const [selectedValue, setSelectedValue] = useState(value || "");
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    disabled ? "default" : error ? "error" : color,
+    theme.vars.palette.default
+  );
+  const ownerState = {
+    size: adjustedSize,
+    disabled,
+    error,
+    variant,
+    paletteColor,
+    color
+  };
+  const optionsMap = useMemo(
+    () => new Map(options.map((opt) => [opt.id.toString(), opt])),
+    [options]
+  );
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setSelectedValue(newValue);
+    const selectedOption = optionsMap.get(newValue);
+    if (selectedOption) {
+      onChange?.(selectedOption);
+    }
+  };
+  const isOptionEqualToValueLocal = (optionId, currentValue) => optionId === currentValue;
+  const ArrowDropDownIcon = `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/chevron_down.svg`;
+  const arrowIcon = () => /* @__PURE__ */ jsx(
+    IconButtonStyled,
+    {
+      ownerState: { ...ownerState },
+      src: ArrowDropDownIcon,
+      disabled,
+      size: adjustedSize
+    }
+  );
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonSelectStyled, { ownerState: { ...ownerState } });
+  }
+  const classSelect = getComponentSlotRoot("M4LSelectClass");
+  return /* @__PURE__ */ jsx(
+    SelectRootStyled,
+    {
+      className: clsx(classSelect, className),
+      ownerState: { ...ownerState },
+      value: selectedValue,
+      onChange: handleChange,
+      IconComponent: arrowIcon,
+      fullWidth: true,
+      disabled,
+      error,
+      renderValue: (selected) => {
+        if (!selected || selected === "" || !optionsMap.has(selected)) {
+          return /* @__PURE__ */ jsx(LabelPlaceholerStyled, { size, ownerState: {}, children: placeholder });
+        }
+        const selectedOption = optionsMap.get(selected);
+        return /* @__PURE__ */ jsxs(RenderOptionContainerStyled, { size, ownerState: { ...ownerState }, children: [
+          selectedOption?.startAdornment && /* @__PURE__ */ jsx(Icon, { size, src: selectedOption.startAdornment }),
+          /* @__PURE__ */ jsx(LabelOptionStyled, { size, ownerState: { ...ownerState }, children: selectedOption?.label || placeholder })
+        ] });
+      },
+      MenuProps: {
+        disableAutoFocusItem: true,
+        MenuListProps: {
+          onMouseMove: (event) => {
+            event.stopPropagation();
+          }
+        },
+        /**
+         * Handles the key down event for the menu.
+         * @param {React.KeyboardEvent} event - The key down event.
+         * @author SebastianM - automatic
+         * @createdAt 2024-12-23 10:47:53 - automatic
+         * @updatedAt 2024-12-31 11:23:53 - automatic
+         * @updatedUser Andrés Quintero - automatic
+         */
+        onKeyDown: (event) => {
+          const char = event.key.toLowerCase();
+          const matchingOption = options.find(
+            (option) => option.label.toLowerCase().startsWith(char)
+          );
+          if (matchingOption) {
+            const element = document.querySelector(
+              `[data-value='${matchingOption.id}']`
+            );
+            element?.scrollIntoView({ block: "nearest" });
+            setSelectedValue(matchingOption.id.toString());
+            const selectedOption = optionsMap.get(matchingOption.id.toString());
+            if (selectedOption) {
+              onChange?.(selectedOption);
+            }
+          }
+        }
+      },
+      children: options.length > 0 ? options.map((option) => /* @__PURE__ */ jsx(
+        MenuItemSelectStyled,
+        {
+          ownerState: { ...ownerState },
+          size,
+          value: option.id.toString(),
+          disabled,
+          label: option.label,
+          selected: isOptionEqualToValueLocal(
+            option.id,
+            selectedValue
+          ),
+          startIcon: option.startAdornment,
+          endIcon: option.endAdornment,
+          "data-value": option.id
+        },
+        option.id
+      )) : /* @__PURE__ */ jsx(
+        MenuItemSelectStyled,
+        {
+          ownerState: { ...ownerState },
+          selected: false,
+          size,
+          label: getLabel("select.no_options")
+        }
+      )
+    }
+  );
+};
+export {
+  Select as S
+};

package/components/mui_extended/Select/Select.styles.js

@@ -0,0 +1,321 @@
+const selectStyles = {
+  /**
+   * Estilos para el componente Select
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 10:30:26 - automatic
+   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  selectRoot: ({ theme, ownerState }) => ({
+    width: "100%",
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    ...ownerState.error === true && {
+      "&.M4LSelectClass-root": {
+        borderColor: ownerState.paletteColor?.main
+      },
+      "&:hover fieldset": {
+        backgroundColor: theme.vars.palette.error.hoverOpacity,
+        borderColor: ownerState.paletteColor?.main
+      },
+      ...ownerState.variant === "text" && {
+        "&.M4LSelectClass-root": {
+          borderColor: ownerState.paletteColor?.main
+        }
+      },
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+        border: `${theme.vars.size.borderStroke.actionInput} ${ownerState.paletteColor?.main}`
+      },
+      "& .MuiIconButton-root": {
+        "& .M4LIconClass-root": {
+          backgroundColor: ownerState.paletteColor?.main
+        }
+      }
+    },
+    "& > .MuiPaper-root": {
+      padding: theme.vars.size.baseSpacings.sp2
+    },
+    "&:hover fieldset": {
+      backgroundColor: theme.vars.palette.primary.hoverOpacity,
+      borderColor: theme.vars.palette.border.default + "!important",
+      ...ownerState.error === true && {
+        backgroundColor: theme.vars.palette.error.hoverOpacity,
+        borderColor: theme.vars.palette.error.main + "!important"
+      }
+    },
+    "&.M4LSelectClass-root": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      padding: theme.vars.size.baseSpacings.sp1,
+      borderRadius: theme.vars.size.borderRadius.r1,
+      "&:active": {
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderTop: "transparent",
+          borderLeft: "transparent",
+          borderRight: "transparent"
+        },
+        "&.Mui-focused": {
+          "& .MuiIconButton-root": {
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.primary.main,
+              ...ownerState.error === true && {
+                backgroundColor: ownerState.paletteColor?.main
+              }
+            }
+          }
+        }
+      },
+      "&.Mui-focused": {
+        "&.Mui-focused": {
+          "& .MuiIconButton-root": {
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.primary.main,
+              ...ownerState.error === true && {
+                backgroundColor: ownerState.paletteColor?.main
+              },
+              transform: "rotate(180deg)",
+              transition: "transform 0.3s ease"
+            }
+          }
+        }
+      },
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+        border: `${theme.vars.size.borderStroke.actionInput} ${theme.vars.palette.primary.main}`,
+        ...ownerState.error === true && {
+          borderColor: ownerState.paletteColor?.main + "!important"
+        }
+      }
+    },
+    ...ownerState.variant === "text" && {
+      "&.M4LSelectClass-root": {
+        border: "none",
+        borderRadius: theme.vars.size.borderRadius.r1,
+        borderBottom: `${theme.vars.size.borderStroke.actionInput} ${theme.vars.palette.border.default}`,
+        padding: theme.vars.size.baseSpacings.sp1,
+        ...ownerState.error === true && {
+          borderColor: ownerState.paletteColor?.main,
+          "& .MuiIconButton-root": {
+            "& .M4LIconClass-root": {
+              backgroundColor: ownerState.paletteColor?.main
+            }
+          }
+        },
+        "&:active": {
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderTop: "transparent",
+            borderLeft: "transparent",
+            borderRight: "transparent"
+          },
+          "&.Mui-focused": {
+            "& .MuiIconButton-root": {
+              "& .M4LIconClass-root": {
+                backgroundColor: ownerState.paletteColor?.main
+              }
+            }
+          }
+        },
+        "&.Mui-focused": {
+          borderColor: theme.vars.palette.primary.main,
+          ...ownerState.error === true && {
+            borderColor: ownerState.paletteColor?.main + "!important"
+          },
+          "&.Mui-focused": {
+            "& .MuiIconButton-root": {
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.primary.main,
+                ...ownerState.error === true && {
+                  backgroundColor: ownerState.paletteColor?.main
+                },
+                transform: "rotate(180deg)",
+                transition: "transform 0.3s ease"
+              }
+            }
+          }
+        },
+        "&:focus-active": {
+          borderTop: "transparent",
+          borderLeft: "transparent",
+          borderRight: "transparent"
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          border: "none"
+        }
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        minHeight: 0,
+        borderLeft: "transparent",
+        borderTop: "transparent",
+        borderRight: "transparent",
+        border: theme.vars.palette.primary.main,
+        ...ownerState.error === true && {
+          borderColor: ownerState.paletteColor?.main
+        }
+      }
+    },
+    // Estilos específicos para el tamaño small
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.small.action,
+        minHeight: theme.vars.size.mobile.small.action
+      } : {
+        height: theme.vars.size.desktop.small.action,
+        minHeight: theme.vars.size.desktop.small.action
+      }
+    },
+    // Estilos específicos para el tamaño medium
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.medium.action,
+        minHeight: theme.vars.size.mobile.medium.action
+      } : {
+        height: theme.vars.size.desktop.medium.action,
+        minHeight: theme.vars.size.desktop.medium.action
+      }
+    },
+    "& .MuiSelect-select": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      padding: theme.vars.size.baseSpacings.sp0,
+      "&::placeholder": {
+        color: theme.vars.palette.text.disabled
+      }
+    },
+    ...ownerState.disabled === true && {
+      borderColor: theme.vars.palette.border.disabled,
+      color: theme.vars.palette.text.disabled,
+      pointerEvents: "none"
+    }
+  }),
+  /**
+   * Estilos para el ícono de la fila
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 10:30:26 - automatic
+   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  iconButton: ({ theme }) => ({
+    position: "absolute",
+    right: theme.vars.size.baseSpacings.sp0,
+    top: "50%",
+    transform: "translateY(-50%)",
+    pointerEvents: "none"
+  }),
+  /**
+   * Styles for the render option container
+   * @returns {object} The styles for the render option container
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-18 15:11:13 - automatic
+   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  renderOptionContainer: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    color: theme.vars.palette.text.primary,
+    "& .M4LIconClass-root": {
+      backgroundColor: theme.vars.palette.text.primary
+    },
+    ...ownerState.error && {
+      "& .M4LIconClass-root": {
+        backgroundColor: theme.vars.palette.text.primary
+      }
+    },
+    "&:focus": {
+      "& .M4LIconClass-root": {
+        backgroundColor: theme.vars.palette.text.primary
+      }
+    },
+    ...ownerState.disabled && {
+      "& .M4LIconClass-root": {
+        backgroundColor: theme.vars.palette.text.disabled
+      }
+    }
+  }),
+  /**
+   * Styles for the label option
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-23 10:47:53 - automatic
+   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  labelOption: ({ theme }) => ({
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingRight: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Styles for the label placeholder
+   * @returns {object} The styles for the label placeholder
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-26 14:16:33 - automatic
+   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  labelPlaceholer: ({ theme }) => ({
+    color: theme.vars.palette.text.disabled,
+    zIndex: 100
+  }),
+  /**
+   * Styles for the menu options
+   * @param {object} theme - The theme object
+   * @returns {object} The styles for the menu options
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-18 15:11:13 - automatic
+   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  menuOptions: ({ theme }) => ({
+    padding: theme.vars.size.baseSpacings.sp2,
+    boxShadow: theme.vars.shadows[1]
+  }),
+  /**
+   * Styles for the menu item select
+   * @param {object} theme - The theme object
+   * @returns {object} The styles for the menu item select
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-26 14:16:33 - automatic
+   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  menuItemSelect: ({ theme }) => ({
+    paddingLeft: theme.vars.size.baseSpacings.sp2,
+    paddingRight: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Styles for the skeleton select component
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-17 15:54:22 - automatic
+   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedUser Andrés Quintero - automatic
+   */
+  skeletonSelect: ({ theme, ownerState }) => ({
+    width: "100%",
+    borderRadius: theme.vars.size.borderRadius.r0,
+    display: "flex",
+    alignItems: "center",
+    background: theme.vars.palette.skeleton.transition,
+    // Estilos específicos para el tamaño small
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.small.action,
+        minHeight: theme.vars.size.mobile.small.action
+      } : {
+        height: theme.vars.size.desktop.small.action,
+        minHeight: theme.vars.size.desktop.small.action
+      }
+    },
+    // Estilos específicos para el tamaño medium
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.medium.action,
+        minHeight: theme.vars.size.mobile.medium.action
+      } : {
+        height: theme.vars.size.desktop.medium.action,
+        minHeight: theme.vars.size.desktop.medium.action
+      }
+    }
+  })
+};
+export {
+  selectStyles as s
+};

package/components/mui_extended/Select/constants.js

@@ -0,0 +1,4 @@
+const SELECT_KEY_COMPONENT = "M4LSelect";
+export {
+  SELECT_KEY_COMPONENT as S
+};

package/components/mui_extended/Select/index.js

@@ -0,0 +1 @@
+

package/components/mui_extended/Select/slots/SelectEnum.js

@@ -0,0 +1,15 @@
+var SelectSlots = /* @__PURE__ */ ((SelectSlots2) => {
+  SelectSlots2["selectRoot"] = "selectRoot";
+  SelectSlots2["iconButton"] = "iconButton";
+  SelectSlots2["menuItemSelect"] = "menuItemSelect";
+  SelectSlots2["skeletonSelect"] = "skeletonMenuItem";
+  SelectSlots2["renderOptionContainer"] = "renderOptionContainer";
+  SelectSlots2["labelOption"] = "labelOption";
+  SelectSlots2["labelPlaceholer"] = "labelPlaceholer";
+  SelectSlots2["menuOptions"] = "menuOptions";
+  SelectSlots2["menu"] = "menu";
+  return SelectSlots2;
+})(SelectSlots || {});
+export {
+  SelectSlots as S
+};

package/components/mui_extended/Select/slots/SelectSlots.js

@@ -0,0 +1,50 @@
+import { Select } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { S as SELECT_KEY_COMPONENT } from "../constants.js";
+import { s as selectStyles } from "../Select.styles.js";
+import { S as SelectSlots } from "./SelectEnum.js";
+import { I as IconButton } from "../../IconButton/IconButton.js";
+import { M as MenuItem } from "../../MenuItem/MenuItem.js";
+import { S as Skeleton } from "../../Skeleton/Skeleton.js";
+import { T as Typography } from "../../Typography/Typography.js";
+const SelectRootStyled = styled(Select, {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.selectRoot
+})(selectStyles?.selectRoot);
+const IconButtonStyled = styled(IconButton, {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.iconButton
+})(selectStyles?.iconButton);
+const MenuItemSelectStyled = styled(MenuItem, {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.menuItemSelect
+})(selectStyles?.menuItemSelect);
+const SkeletonSelectStyled = styled(Skeleton, {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.skeletonSelect
+})(selectStyles?.skeletonSelect);
+const RenderOptionContainerStyled = styled("div", {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.renderOptionContainer
+})(selectStyles?.renderOptionContainer);
+styled("div", {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.menuOptions
+})(selectStyles?.menuOptions);
+const LabelOptionStyled = styled(Typography, {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.labelOption
+})(selectStyles?.labelOption);
+const LabelPlaceholerStyled = styled(Typography, {
+  name: SELECT_KEY_COMPONENT,
+  slot: SelectSlots.labelPlaceholer
+})(selectStyles?.labelPlaceholer);
+export {
+  IconButtonStyled as I,
+  LabelPlaceholerStyled as L,
+  MenuItemSelectStyled as M,
+  RenderOptionContainerStyled as R,
+  SkeletonSelectStyled as S,
+  SelectRootStyled as a,
+  LabelOptionStyled as b
+};

package/components/mui_extended/Select/types.js

@@ -0,0 +1 @@
+

package/index.js

@@ -33,7 +33,7 @@ import { R as R3 } from "./components/hook-form/RHFDateTime/RHFDateTime.js";
 import { R as R4 } from "./components/hook-form/RHFMultiCheckbox/index.js";
 import { R as R5 } from "./components/hook-form/RHFSelect.js";
 import { R as R6 } from "./components/hook-form/RHFHelperError/index.js";
-import { R as R7 } from "./components/hook-form/RHFPeriod/index.js";
+import { R as R7 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
 import { g as g6 } from "./components/Period/dictionary.js";
 import { R as R8 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
 import { R as R9 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";

package/package.json

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

package/components/hook-form/RHFPeriod/classes/constants.d.ts

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

package/components/hook-form/RHFPeriod/classes/constants.js

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

package/components/hook-form/RHFPeriod/classes/index.d.ts

@@ -1,10 +0,0 @@
-import { RHFPeriodClassesType } from './types';
-import { OwnerState } from '../types';
-export declare const RHFPeriodClasses: RHFPeriodClassesType;
-export declare function getRHFPeriodUtilityClass(slot: string): string;
-/**
- * TODO: Documentar
- */
-export declare const RHFPeriodUtilityClasses: (ownerState: OwnerState) => {
-    root: string;
-};

package/components/hook-form/RHFPeriod/classes/index.js

@@ -1,25 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root",
-  /* states or variants of elements */
-  "isFocus",
-  "isTabSelected"
-]);
-function getRHFPeriodUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const RHFPeriodUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFPeriodUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  RHFPeriodUtilityClasses as R
-};

package/components/hook-form/RHFPeriod/classes/types.d.ts

@@ -1,8 +0,0 @@
-import { RHFPeriodUtilityClasses } from '.';
-export interface RHFPeriodClassesType {
-    root: string;
-    isFocus: string;
-    isTabSelected: string;
-}
-export type RHFPeriodClassesKey = keyof RHFPeriodClassesType;
-export type Classes = ReturnType<typeof RHFPeriodUtilityClasses>;

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

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

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

@@ -1,13 +0,0 @@
-import { styled } from "@mui/material/styles";
-const RHFPeriodRoot = styled("div")(({ theme }) => ({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "flex-start",
-  gap: theme.spacing(1),
-  ...theme.components?.M4LRHFPeriod?.styleOverrides || {}
-}));
-export {
-  RHFPeriodRoot as R
-};