@m4l/components 0.2.25 → 0.2.27

package/components/hook-form/RHFColorPicker/index.5be9e237.js

@@ -0,0 +1,206 @@
+import { useState } from "react";
+import { useFormContext, useWatch, Controller } from "react-hook-form";
+import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
+import { S as SketchPicker } from "../../../node_modules.47f7709b.js";
+import "lodash-es/debounce";
+import "lodash-es/each";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
+import { generateUtilityClasses, generateUtilityClass, styled, Skeleton } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { useTheme } from "@mui/material/styles";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { u as useFormFocus } from "../../../vendor.47f1f3d4.js";
+import { F as FieldLabel } from "../../FieldLabel/index.8d3d6bb4.js";
+import { P as Popover } from "../../mui_extended/Popover/index.d85de73b.js";
+import { I as Icon } from "../../Icon/index.58eaf354.js";
+import { B as Button } from "../../mui_extended/Button/index.81367a73.js";
+const componentName = "M4LRHFColorPicker";
+const colorPickerClasses = generateUtilityClasses(componentName, [
+  "root",
+  "popoverRoot",
+  "containerFieldColor",
+  "fieldColor",
+  "containerPicker",
+  "skeleton",
+  "sizeSmall",
+  "sizeMedium",
+  "isFocus",
+  "isTabSelected"
+]);
+function getRHFColorPickerUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (owmerState) => {
+  const slots = {
+    root: ["root", owmerState.isFocus && "isFocus", owmerState.isTabSelected && "isTabSelected", owmerState.size === "small" && "sizeSmall", owmerState.size === "medium" && "sizeMedium"],
+    popoverRoot: ["popoverRoot"],
+    containerFieldColor: ["containerFieldColor"],
+    fieldColor: ["boxColor"],
+    containerPicker: ["containerPicker"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFColorPickerUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFColorPickerRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFColorPicker?.styleOverrides
+}));
+const RHFColorPickerSkeleton = (props) => {
+  const {
+    label
+  } = props;
+  return /* @__PURE__ */ jsxs("div", {
+    className: colorPickerClasses.skeleton,
+    children: [label && /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: "30%",
+      height: "14px"
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      className: colorPickerClasses.skeleton,
+      variant: "rectangular",
+      width: 20,
+      height: 20
+    })]
+  });
+};
+const RHFColorPicker = (props) => {
+  const {
+    name,
+    size = "small",
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage
+  } = props;
+  const {
+    control,
+    setValue,
+    trigger
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    isFocus,
+    isTabSelected,
+    handlerFocus,
+    handlerOnKeyUp,
+    handlerOnBlur
+  } = useFormFocus();
+  const theme = useTheme();
+  const currentColor = useWatch({
+    name,
+    control
+  });
+  const isDesktop = useResponsiveDesktop();
+  const [tempColor, setTempColor] = useState(() => currentColor || "#ffffff");
+  const [anchorEl, setAnchorEl] = useState(null);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const handleColorChange = (color) => {
+    console.log("react color pick", color.hex);
+    setTempColor(color.hex);
+  };
+  const handleApprove = () => {
+    setAnchorEl(null);
+    if (tempColor !== currentColor) {
+      setValue(name, tempColor);
+      trigger(name);
+    }
+  };
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    size: isDesktop ? size : "medium"
+  };
+  const classes = useUtilityClasses(ownerState);
+  console.log("isFocus", isFocus);
+  console.log("isTabSelected", isTabSelected);
+  return /* @__PURE__ */ jsx(RHFColorPickerRoot, {
+    className: classes.root,
+    tabIndex: 0,
+    onFocus: handlerFocus,
+    onBlur: handlerOnBlur,
+    onKeyUp: handlerOnKeyUp,
+    children: !isSkeleton ? /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      defaultValue: "",
+      render: ({
+        field: {
+          value
+        },
+        fieldState: {
+          error
+        }
+      }) => /* @__PURE__ */ jsxs(Fragment, {
+        children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+          label,
+          mandatory,
+          mandatoryMessage,
+          helperMessage
+        }), /* @__PURE__ */ jsxs("div", {
+          className: classes.containerFieldColor,
+          onClick: (event) => setAnchorEl(event.currentTarget),
+          children: [/* @__PURE__ */ jsx("div", {
+            className: classes.fieldColor,
+            style: {
+              backgroundColor: value
+            }
+          }), /* @__PURE__ */ jsx(Icon, {
+            src: `${host_static_assets}/${environment_assets}/frontend/components/rhfcolorpicker/assets/icons/chevron_right.svg`
+          })]
+        }), error?.message && /* @__PURE__ */ jsx(HelperText, {
+          variant: "error",
+          message: error?.message + ""
+        }), /* @__PURE__ */ jsx(Popover, {
+          open: Boolean(anchorEl),
+          arrowType: "top-center",
+          className: classes.popoverRoot,
+          anchorEl,
+          onClose: () => setAnchorEl(null),
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "center"
+          },
+          transformOrigin: {
+            vertical: "top",
+            horizontal: "center"
+          },
+          sx: {
+            mt: "12px",
+            ml: -1.25,
+            ...theme.components?.M4LRHFColorPickerPopoverRoot?.styleOverrides
+          },
+          children: /* @__PURE__ */ jsxs("div", {
+            className: classes.containerPicker,
+            children: [/* @__PURE__ */ jsx(SketchPicker, {
+              color: tempColor,
+              onChange: handleColorChange,
+              disableAlpha: true
+            }), /* @__PURE__ */ jsx(Button, {
+              variant: "contained",
+              onClick: handleApprove,
+              children: getLabel("rhfcolorpicker.accept")
+            })]
+          })
+        })]
+      })
+    }) : /* @__PURE__ */ jsx(RHFColorPickerSkeleton, {
+      label
+    })
+  });
+};
+function getRHFColorPickerComponentsDictionary() {
+  return ["rhfcolorpicker"];
+}
+export {
+  RHFColorPicker as R,
+  getRHFColorPickerComponentsDictionary as g
+};

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

@@ -1,8 +1,2 @@
-import { RHFColorPickerProps } from './types';
-/**
- * Componente RHFColorPicker para seleccionar colores con React Hook Form.
- * @component
- * @param {RHFColorPickerProps} props - Propiedades del componente.
- * @returns {JSX.Element} - Elemento JSX que representa el componente.
- */
-export declare const RHFColorPicker: (props: RHFColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export { RHFColorPicker } from './RFHColorPicker';
+export { getRHFColorPickerComponentsDictionary } from './dictionary';

package/components/hook-form/RHFColorPicker/subcomponents/Skeleton/indext.d.ts

@@ -1 +1,2 @@
-export declare const Skeleton: () => import("react/jsx-runtime").JSX.Element;
+import { RHFColorPickerSkeletoProps } from './types';
+export declare const RHFColorPickerSkeleton: (props: RHFColorPickerSkeletoProps) => import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFColorPicker/subcomponents/Skeleton/types.d.ts

@@ -0,0 +1,3 @@
+import { RHFColorPickerProps } from "../../types";
+export interface RHFColorPickerSkeletoProps extends Pick<RHFColorPickerProps, 'label'> {
+}

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

@@ -1,8 +1,19 @@
-export interface RHFColorPickerProps {
+import { FieldLabelProps } from "../../FieldLabel/types";
+export interface RHFColorPickerProps extends Omit<FieldLabelProps, 'label'> {
+    /**
+    * Nombre de etiqueta del campo
+    */
+    label?: string;
     /**
     * Identificador del campo dentro del formulario de react hook form
     */
     name: string;
+    /**
+    * Variaciones de tamaño para el componente
+    */
+    size?: 'small' | 'medium';
 }
-export interface OwnerState {
+export interface OwnerState extends Pick<RHFColorPickerProps, 'size'> {
+    isFocus: boolean;
+    isTabSelected: boolean;
 }

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

@@ -1,9 +1,11 @@
+import { useUtilityClasses } from ".";
 export interface RHFDateTimeClassesType {
     root: string;
     skeleton: string;
     small: string;
     medium: string;
     isFocus: string;
+    isTabSelected: string;
     isDisabled: string;
     variantInfo: string;
     variantSuccess: string;
@@ -11,3 +13,4 @@ export interface RHFDateTimeClassesType {
     variantError: string;
 }
 export declare type RHFDateTimeClassesKey = keyof RHFDateTimeClassesType;
+export declare type RHFDateTimeClasses = ReturnType<typeof useUtilityClasses>;

package/components/hook-form/RHFDateTime/{index.5a673a96.js → index.ace3f52e.js}

@@ -1,45 +1,38 @@
 import { useFormContext, Controller } from "react-hook-form";
 import { DateTimePicker } from "@mui/x-date-pickers";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { Skeleton, generateUtilityClasses, generateUtilityClass, styled as styled$1 } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
 import { useState, useEffect } from "react";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js";
-import { I as Icon } from "../../Icon/index.b920baf8.js";
-const SKTRHFWrapperTextField = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "100%",
-  height: "42.25px",
-  alignItems: "center",
-  justifyContent: "space-between",
-  border: `1px solid ${theme.palette.divider}`,
-  padding: "0 14px",
-  borderRadius: theme.spacing(0.5)
-}));
+import { u as useFormFocus } from "../../../vendor.47f1f3d4.js";
+import { F as FieldLabel } from "../../FieldLabel/index.8d3d6bb4.js";
+import { I as Icon } from "../../Icon/index.58eaf354.js";
 const SkeletonRHFDateTime = (props) => {
   const {
     skeletonWidth,
     skeletonHeight,
-    className
-  } = props;
-  return /* @__PURE__ */ jsxs(SKTRHFWrapperTextField, {
     className,
-    children: [/* @__PURE__ */ jsx(Skeleton, {
+    label
+  } = props;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [label && /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
-      width: skeletonWidth,
-      height: skeletonHeight
-    }), /* @__PURE__ */ jsx(Skeleton, {
-      variant: "circular",
-      width: "20px",
-      height: "20px"
+      height: "14px",
+      width: "30%"
+    }), /* @__PURE__ */ jsxs("div", {
+      className: className.skeleton,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular"
+      })]
     })]
   });
 };
@@ -50,6 +43,7 @@ generateUtilityClasses(componentName, [
   "small",
   "medium",
   "isFocus",
+  "isTabSelected",
   "isDisabled",
   "variantInfo",
   "variantSuccess",
@@ -61,7 +55,7 @@ function getRHFCheckboxUtilityClass(slot) {
 }
 const useUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.size === "small" && "small", ownerState.size === "medium" && "medium", ownerState.isFocus && "isFocus", ownerState.disabled && "isDisabled", ownerState.variant === "info" && "variantInfo", ownerState.variant === "success" && "variantSuccess", ownerState.variant === "warning" && "variantWarning", ownerState.variant === "error" && "variantError"],
+    root: ["root", ownerState.size === "small" && "small", ownerState.size === "medium" && "medium", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected", ownerState.disabled && "isDisabled", ownerState.variant === "info" && "variantInfo", ownerState.variant === "success" && "variantSuccess", ownerState.variant === "warning" && "variantWarning", ownerState.variant === "error" && "variantError"],
     skeleton: ["skeleton"]
   };
   const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
@@ -69,7 +63,7 @@ const useUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
-const RHFDateTimeRoot = styled$1("div")(({ theme }) => ({
+const RHFDateTimeRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LRHFDateTime?.styleOverrides
 }));
 const RHFDATETIME_PREFIX = "RHFDateTime";
@@ -86,7 +80,9 @@ function RHFDateTime(props) {
     skeletonHeight = 14,
     className,
     label,
-    helperMessage
+    helperMessage,
+    mandatory,
+    mandatoryMessage
   } = props;
   const {
     host_static_assets,
@@ -97,8 +93,14 @@ function RHFDateTime(props) {
       src: `${host_static_assets}/${environment_assets}/frontend/components/rhfdate/ended_at.svg`
     });
   };
-  const [isFocus, setIsFocus] = useState(false);
   const [currentVariant, setCurrentVariant] = useState(void 0);
+  const {
+    isFocus,
+    isTabSelected,
+    handlerFocus,
+    handlerOnKeyUp,
+    handlerOnBlur
+  } = useFormFocus();
   const {
     control,
     formState: {
@@ -120,15 +122,10 @@ function RHFDateTime(props) {
       datetimeFormat
     }
   } = useFormatter();
-  const handlerFocus = () => {
-    setIsFocus(true);
-  };
-  const handlerBlur = () => {
-    setIsFocus(false);
-  };
   const isDesktop = useResponsiveDesktop();
   const ownerState = {
-    isFocus,
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
     disabled,
     size: isDesktop ? size : "medium",
     variant: currentVariant
@@ -136,6 +133,10 @@ function RHFDateTime(props) {
   const classes = useUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(RHFDateTimeRoot, {
     className: clsx(classes.root, className),
+    tabIndex: 0,
+    onFocus: handlerFocus,
+    onBlur: handlerOnBlur,
+    onKeyUp: handlerOnKeyUp,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameRHFDateTimeDataTestId("root")
     } : {},
@@ -152,10 +153,13 @@ function RHFDateTime(props) {
           error
         }
       }) => {
+        console.log("RHFDateTime value", typeof value);
         return /* @__PURE__ */ jsxs(Fragment, {
-          children: [label && /* @__PURE__ */ jsx(Typography, {
-            variant: "body",
-            children: label
+          children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+            label,
+            mandatory,
+            mandatoryMessage,
+            helperMessage
           }), /* @__PURE__ */ jsx(DateTimePicker, {
             sx: {
               "& .MuiTouchRipple-root": {
@@ -174,22 +178,23 @@ function RHFDateTime(props) {
             slotProps: {
               textField: {
                 onFocus: handlerFocus,
-                onBlur: handlerBlur
+                onBlur: handlerOnBlur
               },
               field: {
                 format: datetimeFormat
               }
             }
-          }), currentVariant ? /* @__PURE__ */ jsx(HelperText, {
-            variant: currentVariant,
-            message: currentVariant !== "error" ? helperMessage : error?.message
-          }) : null]
+          }), error?.message && /* @__PURE__ */ jsx(HelperText, {
+            variant: "error",
+            message: error?.message + ""
+          })]
         });
       }
     }) : /* @__PURE__ */ jsx(SkeletonRHFDateTime, {
       skeletonWidth,
       skeletonHeight,
-      className: classes.skeleton
+      className: classes,
+      label
     })
   });
 }

package/components/hook-form/RHFDateTime/subcomponents/Skeleton/types.d.ts

@@ -1,4 +1,5 @@
 import { RHFDateTimeProps } from '../../types';
-export interface SkeletonRHFDateTimeProps extends Pick<RHFDateTimeProps, 'skeletonWidth' | 'skeletonHeight'> {
-    className: string;
+import { RHFDateTimeClasses } from '../../classes/types';
+export interface SkeletonRHFDateTimeProps extends Pick<RHFDateTimeProps, 'skeletonWidth' | 'skeletonHeight' | 'label'> {
+    className: RHFDateTimeClasses;
 }

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

@@ -1,4 +1,5 @@
-export interface RHFDateTimeProps {
+import { FieldLabelProps } from "../../FieldLabel/types";
+export interface RHFDateTimeProps extends Omit<FieldLabelProps, 'label'> {
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
     name: string;
@@ -12,7 +13,8 @@ export interface RHFDateTimeProps {
 declare type SizeType = 'small' | 'medium';
 export declare type RHFDateTimeVariants = 'info' | 'success' | 'warning' | undefined;
 export interface OwnerState extends Pick<RHFDateTimeProps, 'size' | 'disabled'> {
-    isFocus?: boolean;
+    isFocus: boolean;
+    isTabSelected: boolean;
     variant?: RHFDateTimeVariants | 'error';
 }
 export {};

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

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

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

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

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

@@ -0,0 +1,112 @@
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { useFormContext, Controller } from "react-hook-form";
+import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
+import { unstable_composeClasses } from "@mui/base";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { u as useFormFocus } from "../../../vendor.47f1f3d4.js";
+import { F as FieldLabel } from "../../FieldLabel/index.8d3d6bb4.js";
+import { P as Period } from "../../Period/index.ba79014c.js";
+const RHFPeriodRoot = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1),
+  ...theme.components?.M4LRHFPeriod?.styleOverrides
+}));
+const componentName = "M4LRHFPeriod";
+generateUtilityClasses(componentName, [
+  "root",
+  "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
+  };
+};
+const RHFPeriod = (props) => {
+  const {
+    name,
+    readOnly,
+    skeletonWidth,
+    skeletonHeight,
+    state,
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    size
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    isFocus,
+    isTabSelected,
+    handlerFocus,
+    handlerOnKeyUp,
+    handlerOnBlur
+  } = useFormFocus();
+  const ownerState = {
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false
+  };
+  const classes = RHFPeriodUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(RHFPeriodRoot, {
+    className: classes.root,
+    tabIndex: 0,
+    onFocus: handlerFocus,
+    onBlur: handlerOnBlur,
+    onKeyUp: handlerOnKeyUp,
+    children: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      render: ({
+        field: {
+          onChange,
+          value
+        },
+        fieldState: {
+          error
+        }
+      }) => {
+        console.log("value RHFPeriod", value);
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+            label,
+            mandatory,
+            mandatoryMessage,
+            helperMessage
+          }), /* @__PURE__ */ jsx(Period, {
+            value,
+            onChange,
+            state: !!error === true ? "error" : state,
+            readOnly,
+            skeletonWidth,
+            skeletonHeight,
+            size
+          }), error && /* @__PURE__ */ jsx(HelperText, {
+            variant: "error",
+            message: error.message || ""
+          })]
+        });
+      }
+    })
+  });
+};
+export {
+  RHFPeriod as R
+};

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

@@ -1,6 +1,12 @@
+import { FieldLabelProps } from '../../FieldLabel/types';
 import { PeriodProps, PeriodState, PeriodVariant } from '../../../components/Period/types';
-export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly' | 'skeletonWidth' | 'skeletonHeight'> {
+export interface RHFPeriodProps extends Pick<PeriodProps, 'readOnly' | 'skeletonWidth' | 'skeletonHeight' | 'size'>, Omit<FieldLabelProps, 'label'> {
     name: string;
     variant?: PeriodVariant;
     state?: PeriodState;
+    label?: string;
+}
+export interface OwnerState {
+    isFocus: boolean;
+    isTabSelected: boolean;
 }

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

@@ -11,6 +11,7 @@ export interface RHFTextFieldClassesType {
     sizeSmall: string;
     sizeMedium: string;
     isFocus: string;
+    isTabSelected: string;
     isDisabled: string;
 }
 export declare type RHFTextFieldClassesKey = keyof RHFTextFieldClassesType;