@soyfri/shared-library 1.5.0 → 2.0.0-beta.0

package/dist/components/DateTimePicker/DateTimePicker.cjs

@@ -30,179 +30,193 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const styles = require("@mui/material/styles");
 const AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
 const LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
 const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
-const system = require("@mui/system");
-const material = require("@mui/material");
-const StyledTextField = system.styled(material.TextField)(({ theme }) => ({
-  "& .MuiInputBase-root": {
-    maxHeight: "34px",
-    padding: "8px 10px",
-    borderRadius: "10px",
-    display: "flex",
-    alignItems: "center",
-    fontSize: "14px"
-  },
-  "& .MuiInputBase-input": {
-    padding: "0 !important",
-    height: "18px",
-    display: "flex",
-    alignItems: "center",
-    marginTop: "-4px"
-  },
-  "& .MuiInputLabel-root": {
-    top: "50%",
-    transform: "translate(14px, -50%)",
-    "&.MuiInputLabel-shrink": {
-      transform: "translate(1px, -200%) scale(0.75)",
-      fontSize: "16px !important",
-      "> legend": {
-        display: "none"
-      }
+const reactHookForm = require("react-hook-form");
+const formField_sx = require("../../formField.sx-CQ1mbk9M.cjs");
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+const buildDateTimePickerSx = (borderRadius, labelPosition) => formField_sx.buildFormFieldSx({
+  borderRadius,
+  labelPosition,
+  includePickersApi: true,
+  extraOutsideSx: {
+    "& .MuiInputBase-input": {
+      paddingTop: formField_sx.FIELD_INPUT_PADDING_Y,
+      paddingBottom: formField_sx.FIELD_INPUT_PADDING_Y
+    },
+    "& .MuiPickersInputBase-sectionsContainer": {
+      paddingTop: formField_sx.FIELD_INPUT_PADDING_Y,
+      paddingBottom: formField_sx.FIELD_INPUT_PADDING_Y
     }
-  },
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "0.7px solid",
-    borderColor: "#e0e0e0"
   }
-}));
-const DateTimePicker = (_a) => {
-  var _b = _a, {
+});
+const getDateTimeValidationMessage = (error) => {
+  switch (error) {
+    case "minDate":
+    case "maxDate":
+    case "invalidDate":
+      return "Formato de fecha/hora inválido";
+    case "disableFuture":
+      return "No se permiten fechas/horas futuras";
+    case "disablePast":
+      return "No se permiten fechas/horas pasadas";
+    default:
+      return "";
+  }
+};
+const buildLocaleText = (clearButtonText, cancelButtonText, acceptButtonText) => {
+  const text = {};
+  if (clearButtonText) text.clearButtonLabel = clearButtonText;
+  if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;
+  if (acceptButtonText) text.okButtonLabel = acceptButtonText;
+  return text;
+};
+const DateTimePicker = (props) => {
+  const _a = props, {
     label,
-    selectedDateTime,
-    onDateTimeChange,
     minDateTime,
     maxDateTime,
     disabled,
     readOnly,
-    customClass = "",
     inputFormat,
-    slotProps,
+    borderRadius = 10,
+    labelPosition = "outside",
+    size = "small",
+    helperText,
+    error: errorProp,
+    sx,
+    className,
+    preset,
+    adapterLocale,
     clearButtonText,
     cancelButtonText,
     acceptButtonText,
     minutesStep,
     minTime,
+    customClass,
     viewRenderers,
     timeSteps,
-    ampm
-  } = _b, rest = __objRest(_b, [
+    ampm = false,
+    textFieldProps,
+    slotProps: slotPropsProp
+  } = _a, rest = __objRest(_a, [
     "label",
-    "selectedDateTime",
-    "onDateTimeChange",
     "minDateTime",
     "maxDateTime",
     "disabled",
     "readOnly",
-    "customClass",
     "inputFormat",
-    "slotProps",
+    "borderRadius",
+    "labelPosition",
+    "size",
+    "helperText",
+    "error",
+    "sx",
+    "className",
+    "preset",
+    "adapterLocale",
     "clearButtonText",
     "cancelButtonText",
     "acceptButtonText",
     "minutesStep",
     "minTime",
+    "customClass",
     "viewRenderers",
     "timeSteps",
-    "ampm"
+    "ampm",
+    "textFieldProps",
+    "slotProps"
   ]);
-  var _a2, _b2, _c;
-  const [error, setError] = React.useState(null);
-  const errorMessage = React.useMemo(() => {
-    switch (error) {
-      case "minDate":
-      case "maxDate":
-      case "invalidDate": {
-        return "Formato de fecha/hora inválido";
+  const [validationError, setValidationError] = React.useState(null);
+  const validationErrorMessage = React.useMemo(
+    () => getDateTimeValidationMessage(validationError),
+    [validationError]
+  );
+  const customLocaleText = React.useMemo(
+    () => buildLocaleText(clearButtonText, cancelButtonText, acceptButtonText),
+    [clearButtonText, cancelButtonText, acceptButtonText]
+  );
+  const theme = styles.useTheme();
+  const presetSx = resolvePreset.resolvePreset("DateTimePicker", preset, theme);
+  const mergedSx = [
+    buildDateTimePickerSx(borderRadius, labelPosition),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const renderPicker = (value, onChange, onBlur, inputRef, rhfError, rhfHelperText) => {
+    const finalError = rhfError || !!validationErrorMessage || !!errorProp;
+    const finalHelperText = rhfHelperText || validationErrorMessage || helperText;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      LocalizationProvider.LocalizationProvider,
+      __spreadProps(__spreadValues({
+        dateAdapter: AdapterDayjs.AdapterDayjs
+      }, adapterLocale ? { adapterLocale } : {}), {
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          DateTimePicker$1.DateTimePicker,
+          __spreadValues({
+            className: customClass || className,
+            label,
+            value,
+            onChange,
+            onError: setValidationError,
+            minDateTime,
+            maxDateTime,
+            minutesStep,
+            disabled,
+            readOnly,
+            minTime,
+            format: inputFormat != null ? inputFormat : "DD/MM/YYYY HH:mm",
+            viewRenderers,
+            timeSteps,
+            ampm,
+            sx: mergedSx,
+            slotProps: __spreadProps(__spreadValues({}, slotPropsProp), {
+              textField: __spreadValues(__spreadValues({
+                fullWidth: true,
+                size,
+                variant: "outlined",
+                onBlur,
+                inputRef,
+                error: !!finalError,
+                helperText: finalHelperText
+              }, slotPropsProp == null ? void 0 : slotPropsProp.textField), textFieldProps)
+            }),
+            localeText: customLocaleText
+          }, rest)
+        )
+      })
+    );
+  };
+  if ("control" in props && props.control) {
+    const { name, control, validation } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactHookForm.Controller,
+      {
+        name,
+        control,
+        rules: validation,
+        render: ({ field, fieldState: { error: fieldError } }) => {
+          var _a2;
+          return renderPicker(
+            (_a2 = field.value) != null ? _a2 : null,
+            field.onChange,
+            field.onBlur,
+            field.ref,
+            !!fieldError,
+            fieldError == null ? void 0 : fieldError.message
+          );
+        }
       }
-      case "disableFuture": {
-        return "No se permiten fechas/horas futuras";
-      }
-      case "disablePast": {
-        return "No se permiten fechas/horas pasadas";
-      }
-      default: {
-        return "";
-      }
-    }
-  }, [error]);
-  const customLocaleText = React.useMemo(() => {
-    const text = {};
-    if (clearButtonText) text.clearButtonLabel = clearButtonText;
-    if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;
-    if (acceptButtonText) text.okButtonLabel = acceptButtonText;
-    return text;
-  }, [clearButtonText, cancelButtonText, acceptButtonText]);
-  return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(
-    material.Box,
-    {
-      sx: {
-        width: "100%",
-        display: "grid",
-        marginBottom: "10px",
-        marginTop: "10px"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        DateTimePicker$1.DateTimePicker,
-        __spreadValues({
-          className: customClass,
-          label,
-          value: selectedDateTime,
-          onChange: onDateTimeChange,
-          minDateTime,
-          maxDateTime,
-          minutesStep,
-          disabled,
-          readOnly,
-          minTime,
-          format: inputFormat ? inputFormat : "DD/MM/YYYY HH:mm",
-          viewRenderers,
-          timeSteps,
-          sx: {
-            "& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root": {
-              maxHeight: "28px",
-              borderRadius: "10px"
-            },
-            "& .MuiInputLabel-root": {
-              // El label se alinea con el padding del input base.
-              top: "50%",
-              transform: "translate(14px, -50%)",
-              // Estilo para el label "encogido" cuando el input está lleno o en foco
-              "&.MuiInputLabel-shrink": {
-                transform: "translate(1px, -200%) scale(0.75)",
-                // Ajustar la posición para que se vea por encima del input
-                fontSize: "16px !important",
-                "> legend": {
-                  display: "none"
-                  // Ocultar el legend del outline
-                }
-              }
-            },
-            "& .MuiPickersInputBase-root > fieldset > legend": {
-              display: "none"
-              // Ocultar el legend del outline
-            }
-          },
-          slotProps: __spreadProps(__spreadValues({}, slotProps), {
-            // 2. Usar 'slotProps' para pasar el componente estilizado al TextField
-            textField: __spreadProps(__spreadValues({}, slotProps == null ? void 0 : slotProps.textField), {
-              helperText: errorMessage || ((_a2 = slotProps == null ? void 0 : slotProps.textField) == null ? void 0 : _a2.helperText),
-              error: !!errorMessage || ((_b2 = slotProps == null ? void 0 : slotProps.textField) == null ? void 0 : _b2.error),
-              InputProps: __spreadProps(__spreadValues({}, (_c = slotProps == null ? void 0 : slotProps.textField) == null ? void 0 : _c.InputProps), {
-                inputComponent: StyledTextField
-              })
-            })
-          }),
-          localeText: __spreadValues({}, customLocaleText),
-          ampm: false
-        }, rest)
-      )
-    }
-  ) });
+    );
+  }
+  const { selectedDateTime, onDateTimeChange } = props;
+  return renderPicker(selectedDateTime, onDateTimeChange);
 };
 exports.DateTimePicker = DateTimePicker;
+exports.default = DateTimePicker;
 //# sourceMappingURL=DateTimePicker.cjs.map

package/dist/components/DateTimePicker/DateTimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.cjs","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n  label: string;\n  selectedDateTime: Dayjs | null;\n  onDateTimeChange: (dateTime: Dayjs | null) => void;\n  minDateTime?: Dayjs;\n  maxDateTime?: Dayjs;\n  disabled?: boolean;\n  readOnly?: boolean;\n  inputFormat?: string;\n  slotProps?: any;\n  clearButtonText?: string;\n  cancelButtonText?: string;\n  acceptButtonText?: string;\n  minutesStep?: number;\n  minTime?: Dayjs;\n  customClass?: string;\n  viewRenderers?: any\n  timeSteps?: any\n  ampm?: boolean;\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n  '& .MuiInputBase-root': {\n    maxHeight: '34px',\n    padding: '8px 10px',\n    borderRadius: '10px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: '14px',\n  },\n  '& .MuiInputBase-input': {\n    padding: '0 !important',\n    height: '18px',\n    display: 'flex',\n    alignItems: 'center',\n    marginTop: '-4px'\n  },\n  '& .MuiInputLabel-root': {\n    top: '50%',\n    transform: 'translate(14px, -50%)',\n    '&.MuiInputLabel-shrink': {\n      transform: 'translate(1px, -200%) scale(0.75)',\n      fontSize: '16px !important',\n      '> legend': {\n        display: 'none',\n      }\n    },\n  },\n  '& .MuiOutlinedInput-notchedOutline': {\n    border: '0.7px solid',\n    borderColor: '#e0e0e0',\n  },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n  label,\n  selectedDateTime,\n  onDateTimeChange,\n  minDateTime,\n  maxDateTime,\n  disabled,\n  readOnly,\n  customClass= '',\n  inputFormat,\n  slotProps,\n  clearButtonText,\n  cancelButtonText,\n  acceptButtonText,\n  minutesStep,\n  minTime,\n  viewRenderers,\n  timeSteps,\n  ampm,\n  ...rest\n}) => {\n  const [error, setError] = React.useState<DateValidationError | null>(null);\n\n  const errorMessage = useMemo(() => {\n    switch (error) {\n      case 'minDate':\n      case 'maxDate':\n      case 'invalidDate': {\n        return 'Formato de fecha/hora inválido';\n      }\n      case 'disableFuture': {\n        return 'No se permiten fechas/horas futuras';\n      }\n      case 'disablePast': {\n        return 'No se permiten fechas/horas pasadas';\n      }\n      default: {\n        return '';\n      }\n    }\n  }, [error]);\n\n  const customLocaleText = useMemo(() => {\n    const text: Record<string, string> = {};\n    if (clearButtonText) text.clearButtonLabel = clearButtonText;\n    if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n    if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n    return text;\n  }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDayjs}>\n      <Box\n          sx={{\n              width: '100%',\n              display: 'grid',\n              marginBottom: '10px',\n              marginTop: '10px'\n          }}\n\n      >\n      <MuiDateTimePicker\n        className={customClass}\n        label={label}\n        value={selectedDateTime}\n        onChange={onDateTimeChange}\n        minDateTime={minDateTime}\n        maxDateTime={maxDateTime}\n        minutesStep={minutesStep}\n        disabled={disabled}\n        readOnly={readOnly}\n        minTime={minTime}\n        format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n        viewRenderers={viewRenderers}\n        timeSteps={timeSteps}\n        sx={{\n          '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n            maxHeight: '28px',\n            borderRadius: '10px',\n          },\n          '& .MuiInputLabel-root': {\n            // El label se alinea con el padding del input base.\n            top: '50%',\n            transform: 'translate(14px, -50%)',\n            \n            // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n            '&.MuiInputLabel-shrink': {\n              transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n              fontSize: '16px !important',\n              '> legend': {\n                display: 'none', // Ocultar el legend del outline\n              }\n            },\n          },\n          '& .MuiPickersInputBase-root > fieldset > legend':{\n            display: 'none', // Ocultar el legend del outline\n          },\n        }}\n        slotProps={{\n          ...slotProps,\n          // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n          textField: {\n            ...slotProps?.textField,\n            helperText: errorMessage || slotProps?.textField?.helperText,\n            error: !!errorMessage || slotProps?.textField?.error,\n            InputProps: {\n              ...slotProps?.textField?.InputProps,\n              inputComponent: StyledTextField,\n            },\n          },\n        }}\n        localeText={{ ...customLocaleText }}\n        ampm={false}\n        {...rest}\n      />\n      </Box>\n    </LocalizationProvider>\n  );\n};\n\nexport default DateTimePicker;"],"names":["styled","TextField","useMemo","jsx","LocalizationProvider","AdapterDayjs","Box","MuiDateTimePicker","_a","_b"],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.cjs","sources":["../../../src/components/DateTimePicker/DateTimePicker.sx.ts","../../../src/components/DateTimePicker/DateTimePicker.helpers.ts","../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material';\n\nimport { buildFormFieldSx } from '../_shared/formField.sx';\nimport { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';\nimport type { LabelPosition } from './DateTimePicker';\n\n/**\n * Builder de sx para el DateTimePicker. Mismo patrón que DatePicker.\n * Usa `includePickersApi: true` para soportar la API nueva de MUI X v8.\n */\nexport const buildDateTimePickerSx = (\n  borderRadius: number | string,\n  labelPosition: LabelPosition,\n): SxProps<Theme> =>\n  buildFormFieldSx({\n    borderRadius,\n    labelPosition,\n    includePickersApi: true,\n    extraOutsideSx: {\n      '& .MuiInputBase-input': {\n        paddingTop: FIELD_INPUT_PADDING_Y,\n        paddingBottom: FIELD_INPUT_PADDING_Y,\n      },\n\n      '& .MuiPickersInputBase-sectionsContainer': {\n        paddingTop: FIELD_INPUT_PADDING_Y,\n        paddingBottom: FIELD_INPUT_PADDING_Y,\n      },\n    },\n  });\n","import type { DateValidationError } from '@mui/x-date-pickers/models';\n\n/**\n * Traduce el error del DateTimePicker a un mensaje en español. Se usa\n * internamente para poblar `helperText` cuando hay error de validación.\n */\nexport const getDateTimeValidationMessage = (\n  error: DateValidationError | null,\n): string => {\n  switch (error) {\n    case 'minDate':\n    case 'maxDate':\n    case 'invalidDate':\n      return 'Formato de fecha/hora inválido';\n    case 'disableFuture':\n      return 'No se permiten fechas/horas futuras';\n    case 'disablePast':\n      return 'No se permiten fechas/horas pasadas';\n    default:\n      return '';\n  }\n};\n\n/**\n * Construye el `localeText` que MUI acepta para overridear los labels de los\n * botones del popover (Cancel / OK / Clear).\n */\nexport const buildLocaleText = (\n  clearButtonText?: string,\n  cancelButtonText?: string,\n  acceptButtonText?: string,\n): Record<string, string> => {\n  const text: Record<string, string> = {};\n  if (clearButtonText) text.clearButtonLabel = clearButtonText;\n  if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n  if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n  return text;\n};\n","import React, { useMemo } from 'react';\nimport type { SxProps, Theme } from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport {\n  DateTimePicker as MuiDateTimePicker,\n  type DateTimePickerProps as MuiDateTimePickerProps,\n} from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildDateTimePickerSx } from './DateTimePicker.sx';\nimport {\n  buildLocaleText,\n  getDateTimeValidationMessage,\n} from './DateTimePicker.helpers';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type LabelPosition = 'outside' | 'floating';\nexport type DateTimePickerSize = 'small' | 'medium';\n\n// ── Props base ───────────────────────────────────────────────────────────\nexport interface BaseDateTimePickerProps\n  extends Omit<MuiDateTimePickerProps, 'value' | 'onChange' | 'slotProps' | 'format'> {\n  label?: string;\n  minDateTime?: Dayjs;\n  maxDateTime?: Dayjs;\n  disabled?: boolean;\n  readOnly?: boolean;\n  /** Formato de la fecha/hora. Default: 'DD/MM/YYYY HH:mm'. */\n  inputFormat?: string;\n  /** Border radius del input. Default: 10. */\n  borderRadius?: number | string;\n  /** \"outside\" (default) o \"floating\". */\n  labelPosition?: LabelPosition;\n  /** Tamaño del TextField. Default: 'small'. */\n  size?: DateTimePickerSize;\n  helperText?: string;\n  error?: boolean;\n  sx?: SxProps<Theme>;\n  className?: string;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.DateTimePicker`.\n   * - `\"default\"` (o ausente) = estilo built-in del paquete.\n   * - Cualquier otro string = mergea el preset encima del estilo built-in.\n   */\n  preset?: string;\n  /** Locale del adaptador dayjs. */\n  adapterLocale?: string;\n  /** Textos de los botones del popover. */\n  clearButtonText?: string;\n  cancelButtonText?: string;\n  acceptButtonText?: string;\n  minutesStep?: number;\n  minTime?: Dayjs;\n  customClass?: string;\n  viewRenderers?: any;\n  timeSteps?: any;\n  /** Si es true usa formato 12h, false = 24h. Default: false. */\n  ampm?: boolean;\n  textFieldProps?: Record<string, any>;\n  /** Passthrough completo a slotProps del MuiDateTimePicker. */\n  slotProps?: MuiDateTimePickerProps['slotProps'];\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFDateTimePickerProps extends BaseDateTimePickerProps {\n  name: string;\n  control: Control<any>;\n  validation?: RegisterOptions;\n  selectedDateTime?: never;\n  onDateTimeChange?: never;\n}\n\nexport interface ControlledDateTimePickerProps extends BaseDateTimePickerProps {\n  name?: string;\n  control?: never;\n  validation?: never;\n  selectedDateTime: Dayjs | null;\n  onDateTimeChange: (dateTime: Dayjs | null) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type DateTimePickerProps =\n  | RHFDateTimePickerProps\n  | ControlledDateTimePickerProps;\n\nexport const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {\n  const {\n    label,\n    minDateTime,\n    maxDateTime,\n    disabled,\n    readOnly,\n    inputFormat,\n    borderRadius = 10,\n    labelPosition = 'outside',\n    size = 'small',\n    helperText,\n    error: errorProp,\n    sx,\n    className,\n    preset,\n    adapterLocale,\n    clearButtonText,\n    cancelButtonText,\n    acceptButtonText,\n    minutesStep,\n    minTime,\n    customClass,\n    viewRenderers,\n    timeSteps,\n    ampm = false,\n    textFieldProps,\n    slotProps: slotPropsProp,\n    ...rest\n  } = props as ControlledDateTimePickerProps & {\n    control?: Control<any>;\n    validation?: RegisterOptions;\n  };\n\n  const [validationError, setValidationError] = React.useState<DateValidationError | null>(null);\n\n  const validationErrorMessage = useMemo(\n    () => getDateTimeValidationMessage(validationError),\n    [validationError],\n  );\n\n  const customLocaleText = useMemo(\n    () => buildLocaleText(clearButtonText, cancelButtonText, acceptButtonText),\n    [clearButtonText, cancelButtonText, acceptButtonText],\n  );\n\n  const theme = useTheme();\n  const presetSx = resolvePreset('DateTimePicker', preset, theme);\n\n  const mergedSx = [\n    buildDateTimePickerSx(borderRadius, labelPosition),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : [sx]),\n  ];\n\n  const renderPicker = (\n    value: Dayjs | null,\n    onChange: (date: Dayjs | null) => void,\n    onBlur?: () => void,\n    inputRef?: React.Ref<any>,\n    rhfError?: boolean,\n    rhfHelperText?: string,\n  ) => {\n    const finalError = rhfError || !!validationErrorMessage || !!errorProp;\n    const finalHelperText = rhfHelperText || validationErrorMessage || helperText;\n\n    return (\n      <LocalizationProvider\n        dateAdapter={AdapterDayjs}\n        {...(adapterLocale ? { adapterLocale } : {})}\n      >\n        <MuiDateTimePicker\n          className={customClass || className}\n          label={label}\n          value={value}\n          onChange={onChange}\n          onError={setValidationError}\n          minDateTime={minDateTime}\n          maxDateTime={maxDateTime}\n          minutesStep={minutesStep}\n          disabled={disabled}\n          readOnly={readOnly}\n          minTime={minTime}\n          format={inputFormat ?? 'DD/MM/YYYY HH:mm'}\n          viewRenderers={viewRenderers}\n          timeSteps={timeSteps}\n          ampm={ampm}\n          sx={mergedSx}\n          slotProps={{\n            ...slotPropsProp,\n            textField: {\n              fullWidth: true,\n              size,\n              variant: 'outlined',\n              onBlur,\n              inputRef,\n              error: !!finalError,\n              helperText: finalHelperText,\n              ...(slotPropsProp?.textField as Record<string, any> | undefined),\n              ...textFieldProps,\n            } as any,\n          }}\n          localeText={customLocaleText}\n          {...(rest as any)}\n        />\n      </LocalizationProvider>\n    );\n  };\n\n  if ('control' in props && props.control) {\n    const { name, control, validation } = props as RHFDateTimePickerProps;\n    return (\n      <Controller\n        name={name}\n        control={control}\n        rules={validation}\n        render={({ field, fieldState: { error: fieldError } }) =>\n          renderPicker(\n            field.value ?? null,\n            field.onChange,\n            field.onBlur,\n            field.ref,\n            !!fieldError,\n            fieldError?.message,\n          )\n        }\n      />\n    );\n  }\n\n  const { selectedDateTime, onDateTimeChange } = props as ControlledDateTimePickerProps;\n  return renderPicker(selectedDateTime, onDateTimeChange);\n};\n\nexport default DateTimePicker;\n"],"names":["buildFormFieldSx","FIELD_INPUT_PADDING_Y","useMemo","useTheme","resolvePreset","jsx","LocalizationProvider","AdapterDayjs","MuiDateTimePicker","Controller","_a"],"mappings":"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"}

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -1,15 +1,37 @@
 import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { DateTimePickerProps as MuiDateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
 import { Dayjs } from 'dayjs';
-export interface DateTimePickerProps {
-    label: string;
-    selectedDateTime: Dayjs | null;
-    onDateTimeChange: (dateTime: Dayjs | null) => void;
+import { Control, RegisterOptions } from 'react-hook-form';
+export type LabelPosition = 'outside' | 'floating';
+export type DateTimePickerSize = 'small' | 'medium';
+export interface BaseDateTimePickerProps extends Omit<MuiDateTimePickerProps, 'value' | 'onChange' | 'slotProps' | 'format'> {
+    label?: string;
     minDateTime?: Dayjs;
     maxDateTime?: Dayjs;
     disabled?: boolean;
     readOnly?: boolean;
+    /** Formato de la fecha/hora. Default: 'DD/MM/YYYY HH:mm'. */
     inputFormat?: string;
-    slotProps?: any;
+    /** Border radius del input. Default: 10. */
+    borderRadius?: number | string;
+    /** "outside" (default) o "floating". */
+    labelPosition?: LabelPosition;
+    /** Tamaño del TextField. Default: 'small'. */
+    size?: DateTimePickerSize;
+    helperText?: string;
+    error?: boolean;
+    sx?: SxProps<Theme>;
+    className?: string;
+    /**
+     * Nombre del preset de estilo registrado en `theme.styles.DateTimePicker`.
+     * - `"default"` (o ausente) = estilo built-in del paquete.
+     * - Cualquier otro string = mergea el preset encima del estilo built-in.
+     */
+    preset?: string;
+    /** Locale del adaptador dayjs. */
+    adapterLocale?: string;
+    /** Textos de los botones del popover. */
     clearButtonText?: string;
     cancelButtonText?: string;
     acceptButtonText?: string;
@@ -18,11 +40,26 @@ export interface DateTimePickerProps {
     customClass?: string;
     viewRenderers?: any;
     timeSteps?: any;
+    /** Si es true usa formato 12h, false = 24h. Default: false. */
     ampm?: boolean;
+    textFieldProps?: Record<string, any>;
+    /** Passthrough completo a slotProps del MuiDateTimePicker. */
+    slotProps?: MuiDateTimePickerProps['slotProps'];
+}
+export interface RHFDateTimePickerProps extends BaseDateTimePickerProps {
+    name: string;
+    control: Control<any>;
+    validation?: RegisterOptions;
+    selectedDateTime?: never;
+    onDateTimeChange?: never;
+}
+export interface ControlledDateTimePickerProps extends BaseDateTimePickerProps {
+    name?: string;
+    control?: never;
+    validation?: never;
+    selectedDateTime: Dayjs | null;
+    onDateTimeChange: (dateTime: Dayjs | null) => void;
 }
-/**
- * Custom Material UI DateTimePicker component.
- * Allows selecting a date and time, and updates a Dayjs state.
- */
+export type DateTimePickerProps = RHFDateTimePickerProps | ControlledDateTimePickerProps;
 export declare const DateTimePicker: React.FC<DateTimePickerProps>;
 export default DateTimePicker;

package/dist/components/DateTimePicker/DateTimePicker.definitions.d.ts

@@ -6,4 +6,5 @@ export declare const DateTimePickerWithInitialNullDefinition = "\nimport React,
 export declare const DateTimePickerSmallSizeDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerSmallSizeExample = () => {\n  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n  return (\n    <Box sx={{ width: 250 }}>\n      <DateTimePicker\n        label=\"Fecha y Hora (Peque\u00F1o)\"\n        selectedDateTime={selectedDateTime}\n        onDateTimeChange={setSelectedDateTime}\n        slotProps={{ textField: { size: 'small' } }}\n      />\n      <Typography sx={{ mt: 2 }}>\n        Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n      </Typography>\n    </Box>\n  );\n};\n";
 export declare const DateTimePickerWithButtonsDefinition = "\nimport React, { useState } => from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithButtonsExample = () => {\n  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n  return (\n    <Box sx={{ width: 300 }}>\n      <DateTimePicker\n        label=\"Fecha y Hora (Con Botones por Defecto)\"\n        selectedDateTime={selectedDateTime}\n        onDateTimeChange={setSelectedDateTime}\n        slotProps={{\n          actionBar: {\n            actions: ['clear', 'cancel', 'accept'],\n          },\n        }}\n      />\n      <Typography sx={{ mt: 2 }}>\n        Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n      </Typography>\n    </Box>\n  );\n};\n";
 export declare const DateTimePickerWithCustomButtonTextDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithCustomButtonTextExample = () => {\n  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n  return (\n    <Box sx={{ width: 300 }}>\n      <DateTimePicker\n        label=\"Fecha y Hora (Botones Personalizados)\"\n        selectedDateTime={selectedDateTime}\n        onDateTimeChange={setSelectedDateTime}\n        clearButtonText=\"Limpiar Todo\"\n        cancelButtonText=\"Descartar\"\n        acceptButtonText=\"Confirmar Selecci\u00F3n\"\n        slotProps={{\n          actionBar: {\n            actions: ['clear', 'cancel', 'accept'],\n          },\n        }}\n      />\n      <Typography sx={{ mt: 2 }}>\n        Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n      </Typography>\n    </Box>\n  );\n};\n";
+export declare const DateTimePickerEmptyWithMaskDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport { Dayjs } from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerEmptyWithMaskExample = () => {\n  const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);\n  return (\n    <Box sx={{ width: 300 }}>\n      <DateTimePicker\n        label=\"Fecha y Hora\"\n        selectedDateTime={selectedDateTime}\n        onDateTimeChange={setSelectedDateTime}\n        inputFormat=\"DD/MM/YY HH:mm\"\n      />\n      <Typography sx={{ mt: 2 }} variant=\"caption\" color=\"text.secondary\">\n        Al estar vac\u00EDo, el campo muestra la m\u00E1scara del formato (DD/MM/AA HH:MM).\n      </Typography>\n    </Box>\n  );\n};\n";
 export declare const DateTimePickerWithCustomInputFormatDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithCustomInputFormatExample = () => {\n  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());\n  return (\n    <Box sx={{ width: 300 }}>\n      <DateTimePicker\n        label=\"Fecha y Hora (Formato dd/MM/YYYY)\"\n        selectedDateTime={selectedDateTime}\n        onDateTimeChange={setSelectedDateTime}\n        inputFormat=\"DD/MM/YYYY HH:mm\" // Formato de fecha personalizado\n      />\n      <Typography sx={{ mt: 2 }}>\n        Seleccionado: ${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}\n      </Typography>\n    </Box>\n  );\n};\n";

package/dist/components/DateTimePicker/DateTimePicker.helpers.d.ts

@@ -0,0 +1,11 @@
+import { DateValidationError } from '@mui/x-date-pickers/models';
+/**
+ * Traduce el error del DateTimePicker a un mensaje en español. Se usa
+ * internamente para poblar `helperText` cuando hay error de validación.
+ */
+export declare const getDateTimeValidationMessage: (error: DateValidationError | null) => string;
+/**
+ * Construye el `localeText` que MUI acepta para overridear los labels de los
+ * botones del popover (Cancel / OK / Clear).
+ */
+export declare const buildLocaleText: (clearButtonText?: string, cancelButtonText?: string, acceptButtonText?: string) => Record<string, string>;