@soyfri/shared-library 1.5.0-beta.4 → 1.6.0-beta.0

package/components/DateTimePicker/DateTimePicker.cjs

@@ -30,46 +30,57 @@ 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 formField_sx = require("../../formField.sx-BAX7KwMR.cjs");
+const tokens = require("../../tokens-jaWWNk39.cjs");
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+const buildDateTimePickerSx = (borderRadius, labelPosition) => formField_sx.buildFormFieldSx({
+  borderRadius,
+  labelPosition,
+  includePickersApi: true,
+  extraOutsideSx: {
+    "& .MuiInputBase-input": {
+      paddingTop: tokens.FIELD_INPUT_PADDING_Y,
+      paddingBottom: tokens.FIELD_INPUT_PADDING_Y
+    },
+    "& .MuiPickersInputBase-sectionsContainer": {
+      paddingTop: tokens.FIELD_INPUT_PADDING_Y,
+      paddingBottom: tokens.FIELD_INPUT_PADDING_Y
     }
-  },
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "0.7px solid",
-    borderColor: "#e0e0e0"
   }
-}));
+});
+const getDateTimeValidationMessage = (error) => {
+  switch (error) {
+    case "minDate":
+    case "maxDate":
+    case "minTime":
+    case "maxTime":
+      return "Fecha/hora fuera del rango permitido";
+    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";
+    case "minutesStep":
+      return "Minutos no válidos para el paso configurado";
+    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 = (_a) => {
   var _b = _a, {
     label,
@@ -79,17 +90,27 @@ const DateTimePicker = (_a) => {
     maxDateTime,
     disabled,
     readOnly,
-    customClass = "",
     inputFormat,
-    slotProps,
+    borderRadius = 10,
+    labelPosition = "outside",
+    size = "small",
+    helperText,
+    error: errorProp,
+    sx,
+    className,
+    preset,
+    adapterLocale,
     clearButtonText,
     cancelButtonText,
     acceptButtonText,
     minutesStep,
     minTime,
+    ampm = false,
     viewRenderers,
     timeSteps,
-    ampm
+    views,
+    textFieldProps,
+    slotProps: slotPropsProp
   } = _b, rest = __objRest(_b, [
     "label",
     "selectedDateTime",
@@ -98,111 +119,80 @@ const DateTimePicker = (_a) => {
     "maxDateTime",
     "disabled",
     "readOnly",
-    "customClass",
     "inputFormat",
-    "slotProps",
+    "borderRadius",
+    "labelPosition",
+    "size",
+    "helperText",
+    "error",
+    "sx",
+    "className",
+    "preset",
+    "adapterLocale",
     "clearButtonText",
     "cancelButtonText",
     "acceptButtonText",
     "minutesStep",
     "minTime",
+    "ampm",
     "viewRenderers",
     "timeSteps",
-    "ampm"
+    "views",
+    "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";
-      }
-      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 [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 ? [sx] : []
+  ];
+  const finalError = !!validationErrorMessage || !!errorProp;
+  const finalHelperText = validationErrorMessage || helperText;
+  return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, adapterLocale, children: /* @__PURE__ */ jsxRuntime.jsx(
+    DateTimePicker$1.DateTimePicker,
+    __spreadValues({
+      className,
+      label,
+      value: selectedDateTime,
+      onChange: onDateTimeChange,
+      onError: setValidationError,
+      minDateTime,
+      maxDateTime,
+      minutesStep,
+      disabled,
+      readOnly,
+      minTime,
+      format: inputFormat != null ? inputFormat : "DD/MM/YYYY HH:mm",
+      ampm,
+      viewRenderers,
+      timeSteps,
+      views,
+      sx: mergedSx,
+      slotProps: __spreadProps(__spreadValues({}, slotPropsProp), {
+        textField: __spreadProps(__spreadValues(__spreadValues({
+          fullWidth: true,
+          size,
+          variant: "outlined"
+        }, slotPropsProp == null ? void 0 : slotPropsProp.textField), textFieldProps), {
+          error: !!finalError,
+          helperText: finalHelperText
+        })
+      }),
+      localeText: customLocaleText
+    }, rest)
   ) });
 };
 exports.DateTimePicker = DateTimePicker;
+exports.default = DateTimePicker;
 //# sourceMappingURL=DateTimePicker.cjs.map

package/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 { DateTimeValidationError } 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 * Cubre tanto errores de fecha (`minDate`, `maxDate`, etc.) como de hora\n * (`minTime`, `maxTime`, `minutesStep`, etc.).\n */\nexport const getDateTimeValidationMessage = (\n  error: DateTimeValidationError | null,\n): string => {\n  switch (error) {\n    case 'minDate':\n    case 'maxDate':\n    case 'minTime':\n    case 'maxTime':\n      return 'Fecha/hora fuera del rango permitido';\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    case 'minutesStep':\n      return 'Minutos no válidos para el paso configurado';\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 type { DateTimeValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\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  /** Si es true usa formato 12h (AM/PM), false = 24h. Default: false. */\n  ampm?: boolean;\n  viewRenderers?: MuiDateTimePickerProps['viewRenderers'];\n  timeSteps?: MuiDateTimePickerProps['timeSteps'];\n  /**\n   * Vistas a mostrar en el popover. Default: todas (year, month, day, hours, minutes).\n   * Ej: `['hours']` solo permite elegir la hora. `['hours','minutes']` oculta el calendar.\n   */\n  views?: MuiDateTimePickerProps['views'];\n  textFieldProps?: Record<string, any>;\n  /** Passthrough completo a slotProps del MuiDateTimePicker. */\n  slotProps?: MuiDateTimePickerProps['slotProps'];\n}\n\n// ── API pública ──────────────────────────────────────────────────────────\nexport interface DateTimePickerProps extends BaseDateTimePickerProps {\n  selectedDateTime: Dayjs | null;\n  onDateTimeChange: (dateTime: Dayjs | null) => void;\n}\n\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n  label,\n  selectedDateTime,\n  onDateTimeChange,\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  ampm = false,\n  viewRenderers,\n  timeSteps,\n  views,\n  textFieldProps,\n  slotProps: slotPropsProp,\n  ...rest\n}) => {\n  const [validationError, setValidationError] = React.useState<DateTimeValidationError | 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 ? [sx] : []),\n  ];\n\n  const finalError = !!validationErrorMessage || !!errorProp;\n  const finalHelperText = validationErrorMessage || helperText;\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={adapterLocale}>\n      <MuiDateTimePicker\n        className={className}\n        label={label}\n        value={selectedDateTime}\n        onChange={onDateTimeChange}\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        ampm={ampm}\n        viewRenderers={viewRenderers}\n        timeSteps={timeSteps}\n        views={views}\n        sx={mergedSx}\n        slotProps={{\n          ...slotPropsProp,\n          textField: {\n            fullWidth: true,\n            size,\n            variant: 'outlined',\n            ...(slotPropsProp?.textField as Record<string, any> | undefined),\n            ...textFieldProps,\n            error: !!finalError,\n            helperText: finalHelperText,\n          } as any,\n        }}\n        localeText={customLocaleText}\n        {...rest}\n      />\n    </LocalizationProvider>\n  );\n};\n\nexport default DateTimePicker;\n"],"names":["buildFormFieldSx","FIELD_INPUT_PADDING_Y","useMemo","useTheme","resolvePreset","jsx","LocalizationProvider","AdapterDayjs","MuiDateTimePicker"],"mappings":"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"}

package/components/DateTimePicker/DateTimePicker.d.ts

@@ -1,28 +1,57 @@
 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;
+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;
     minutesStep?: number;
     minTime?: Dayjs;
-    customClass?: string;
-    viewRenderers?: any;
-    timeSteps?: any;
+    /** Si es true usa formato 12h (AM/PM), false = 24h. Default: false. */
     ampm?: boolean;
+    viewRenderers?: MuiDateTimePickerProps['viewRenderers'];
+    timeSteps?: MuiDateTimePickerProps['timeSteps'];
+    /**
+     * Vistas a mostrar en el popover. Default: todas (year, month, day, hours, minutes).
+     * Ej: `['hours']` solo permite elegir la hora. `['hours','minutes']` oculta el calendar.
+     */
+    views?: MuiDateTimePickerProps['views'];
+    textFieldProps?: Record<string, any>;
+    /** Passthrough completo a slotProps del MuiDateTimePicker. */
+    slotProps?: MuiDateTimePickerProps['slotProps'];
+}
+export interface DateTimePickerProps extends BaseDateTimePickerProps {
+    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 declare const DateTimePicker: React.FC<DateTimePickerProps>;
 export default DateTimePicker;

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

@@ -6,4 +6,7 @@ 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 DateTimePickerWithAllMinutesDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePickerWithAllMinutesExample = () => {\n  const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2023-06-15T10:00'));\n  return (\n    <Box sx={{ width: 300 }}>\n      <DateTimePicker\n        label=\"Fecha y Hora (Todos los minutos)\"\n        selectedDateTime={selectedDateTime}\n        onDateTimeChange={setSelectedDateTime}\n        viewRenderers={{\n          hours: renderMultiSectionDigitalClockTimeView,\n          minutes: renderMultiSectionDigitalClockTimeView,\n        }}\n        minutesStep={1}\n        timeSteps={{ minutes: 1 }}\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 DateTimePicker24hDefinition = "\nimport React, { useState } from 'react';\nimport { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario\nimport dayjs from 'dayjs';\nimport { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';\nimport { Box, Typography } from '@mui/material';\n\nexport const DateTimePicker24hExample = () => {\n  const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2023-06-15T10:00'));\n  return (\n    <Box sx={{ width: 300 }}>\n      <DateTimePicker\n        label=\"Fecha y Hora (Formato 24h)\"\n        selectedDateTime={selectedDateTime}\n        onDateTimeChange={setSelectedDateTime}\n        viewRenderers={{\n          hours: renderMultiSectionDigitalClockTimeView,\n          minutes: renderMultiSectionDigitalClockTimeView,\n        }}\n        minutesStep={1}\n        timeSteps={{ minutes: 1 }}\n        ampm={false}\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 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/components/DateTimePicker/DateTimePicker.helpers.d.ts

@@ -0,0 +1,13 @@
+import { DateTimeValidationError } 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.
+ * Cubre tanto errores de fecha (`minDate`, `maxDate`, etc.) como de hora
+ * (`minTime`, `maxTime`, `minutesStep`, etc.).
+ */
+export declare const getDateTimeValidationMessage: (error: DateTimeValidationError | 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>;