@soyfri/shared-library 2.0.0-beta.2 → 2.0.0-beta.20

package/src/components/DateTimePicker/DateTimePicker.stories.tsx

@@ -0,0 +1,415 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import {
+  Box,
+  Typography,
+} from '@mui/material';
+
+import dayjs, { Dayjs } from 'dayjs';
+import { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
+
+// Importar las definiciones de las historias
+import {
+  BasicDateTimePickerDefinition,
+  DateTimePickerWithMinMaxDefinition,
+  DateTimePickerDisabledDefinition,
+  DateTimePickerReadOnlyDefinition,
+  DateTimePickerWithInitialNullDefinition,
+  DateTimePickerSmallSizeDefinition,
+  DateTimePickerWithCustomButtonTextDefinition,
+  DateTimePickerWithButtonsDefinition,
+  DateTimePickerWithCustomInputFormatDefinition,
+  DateTimePickerEmptyWithMaskDefinition,
+  DateTimePickerWithAllMinutesDefinition,
+  DateTimePicker24hDefinition,
+} from './DateTimePicker.definitions';
+import { DateTimePicker } from './DateTimePicker';
+
+
+const meta: Meta<typeof DateTimePicker> = {
+    title: 'Components/DateTimePicker',
+    component: DateTimePicker,
+    tags: ['autodocs'],
+    parameters: {
+      layout: 'centered',
+      docs: {
+        description: {
+          component: 'Un componente `DateTimePicker` personalizado de Material UI que permite seleccionar tanto la fecha como la hora.',
+        },
+      },
+    },
+    argTypes: {
+      label: { control: 'text', description: 'Etiqueta para el selector de fecha y hora.' },
+      selectedDateTime: { control: 'object', description: 'La fecha y hora actualmente seleccionada.', type: { name: 'object', required: false, value: {} } },
+      onDateTimeChange: { action: 'dateTimeChanged', description: 'Callback que se dispara cuando la fecha y hora cambian.' },
+      minDateTime: { control: 'object', description: 'La fecha y hora mínima permitida.' },
+      maxDateTime: { control: 'object', description: 'La fecha y hora máxima permitida.' },
+      disabled: { control: 'boolean', description: 'Si es verdadero, el selector estará deshabilitado.' },
+      readOnly: { control: 'boolean', description: 'Si es verdadero, el selector estará en modo de solo lectura.' },
+      inputFormat: { control: 'text', description: 'Formato de la fecha y hora en el campo de entrada (ej. "DD/MM/YYYY HH:mm").' }, // Nuevo argType
+      slotProps: { control: 'object', description: 'Propiedades pasadas a los slots internos del DateTimePicker (e.g., `textField`, `actionBar`).' },
+      clearButtonText: { control: 'text', description: 'Texto personalizado para el botón "Limpiar".', if: { arg: 'slotProps.actionBar.actions', eq: 'clear' } },
+      cancelButtonText: { control: 'text', description: 'Texto personalizado para el botón "Cancelar".', if: { arg: 'slotProps.actionBar.actions', eq: 'cancel' } },
+      acceptButtonText: { control: 'text', description: 'Texto personalizado para el botón "Aceptar".', if: { arg: 'slotProps.actionBar.actions', eq: 'accept' } },
+    },
+  };
+  
+  export default meta;
+  type Story = StoryObj<typeof DateTimePicker>;
+  
+  // =============================================================================
+  // Historias
+  // =============================================================================
+  
+  export const BasicDateTimePicker: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Seleccionar Fecha y Hora"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Un `DateTimePicker` básico con selección de fecha y hora actual."
+        },
+        source: { code: BasicDateTimePickerDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateTimePickerWithMinMax: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs('2023-06-15T10:00'));
+      const minDateTime = dayjs('2023-06-01T09:00');
+      const maxDateTime = dayjs('2023-06-30T17:00');
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora en Junio (Rango)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            minDateTime={minDateTime}
+            maxDateTime={maxDateTime}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            (Rango: ${minDateTime.format('YYYY-MM-DD HH:mm')} a ${maxDateTime.format('YYYY-MM-DD HH:mm')})
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra un `DateTimePicker` con límites de fecha y hora mínimos y máximos."
+        },
+        source: { code: DateTimePickerWithMinMaxDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateTimePickerDisabled: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora (Deshabilitado)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            disabled
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Demuestra un `DateTimePicker` en estado deshabilitado."
+        },
+        source: { code: DateTimePickerDisabledDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateTimePickerReadOnly: Story = {
+    render: () => {
+      const [selectedDateTime] = useState<Dayjs | null>(dayjs('2024-07-24T14:30'));
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora (Solo Lectura)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={() => {}} // No permite cambios
+            readOnly
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra el `DateTimePicker` en modo de solo lectura."
+        },
+        source: { code: DateTimePickerReadOnlyDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateTimePickerWithInitialNull: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora (Sin Selección Inicial)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra un `DateTimePicker` sin fecha y hora seleccionadas inicialmente."
+        },
+        source: { code: DateTimePickerWithInitialNullDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateTimePickerEmptyWithMask: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            inputFormat="DD/MM/YY HH:mm"
+          />
+          <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
+            Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA HH:MM).
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story:
+            "DateTimePicker vacío. Al no haber valor seleccionado, cada sección del campo muestra su placeholder según el `inputFormat` (por ejemplo `DD/MM/AA HH:MM`), funcionando como máscara visual."
+        },
+        source: { code: DateTimePickerEmptyWithMaskDefinition.trim() }
+      }
+    }
+  };
+
+  export const DateTimePickerSmallSize: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+      return (
+        <Box sx={{ width: 250 }}>
+          <DateTimePicker
+            label="Fecha y Hora (Pequeño)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            slotProps={{ textField: { size: 'small' } }}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Demuestra cómo aplicar un tamaño más pequeño al `DateTimePicker`."
+        },
+        source: { code: DateTimePickerSmallSizeDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateTimePickerWithButtons: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora (Con Botones por Defecto)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            slotProps={{
+              actionBar: {
+                actions: ['clear', 'cancel', 'accept'],
+              },
+            }}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra el `DateTimePicker` con botones de acción ('Limpiar', 'Cancelar', 'Aceptar') en el pie del selector."
+        },
+        source: { code: DateTimePickerWithButtonsDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateTimePickerWithCustomButtonText: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora (Botones Personalizados)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            clearButtonText="Limpiar Todo"
+            cancelButtonText="Descartar"
+            acceptButtonText="Confirmar Selección"
+            slotProps={{
+              actionBar: {
+                actions: ['clear', 'cancel', 'accept'],
+              },
+            }}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Demuestra cómo personalizar el texto de los botones de acción ('Limpiar', 'Cancelar', 'Aceptar') en el `DateTimePicker`."
+        },
+        source: { code: DateTimePickerWithCustomButtonTextDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateTimePickerWithCustomInputFormat: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora (Formato dd/MM/YYYY HH:mm)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            inputFormat="DD/MM/YYYY HH:mm" // Custom date format
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra el `DateTimePicker` con un formato de fecha y hora personalizado en el campo de entrada, por ejemplo `DD/MM/YYYY HH:mm`."
+        },
+        source: { code: DateTimePickerWithCustomInputFormatDefinition.trim() }
+      }
+    }
+  };
+
+  export const DateTimePickerWithAllMinutes: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs('2023-06-15T10:00'));
+
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora (Todos los minutos)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            viewRenderers={{
+              hours: renderMultiSectionDigitalClockTimeView,
+              minutes: renderMultiSectionDigitalClockTimeView,
+            }}
+            minutesStep={1}
+            timeSteps={{ minutes: 1 }}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra un `DateTimePicker` con todos los minutos habiles (paso de 1 minuto) usando `viewRenderers` y `timeSteps`."
+        },
+        source: { code: DateTimePickerWithAllMinutesDefinition.trim() }
+      }
+    }
+  };
+
+  export const DateTimePicker24h: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs('2023-06-15T10:00'));
+
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora (Formato 24h)"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            viewRenderers={{
+              hours: renderMultiSectionDigitalClockTimeView,
+              minutes: renderMultiSectionDigitalClockTimeView,
+            }}
+            minutesStep={1}
+            timeSteps={{ minutes: 1 }}
+            ampm={false}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra un `DateTimePicker` en formato 24 horas (`ampm={false}`) combinado con `viewRenderers` para el reloj digital."
+        },
+        source: { code: DateTimePicker24hDefinition.trim() }
+      }
+    }
+  };

package/src/components/DateTimePicker/DateTimePicker.sx.ts

@@ -0,0 +1,30 @@
+import type { SxProps, Theme } from '@mui/material';
+
+import { buildFormFieldSx } from '../_shared/formField.sx';
+import { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';
+import type { LabelPosition } from './DateTimePicker';
+
+/**
+ * Builder de sx para el DateTimePicker. Mismo patrón que DatePicker.
+ * Usa `includePickersApi: true` para soportar la API nueva de MUI X v8.
+ */
+export const buildDateTimePickerSx = (
+  borderRadius: number | string,
+  labelPosition: LabelPosition,
+): SxProps<Theme> =>
+  buildFormFieldSx({
+    borderRadius,
+    labelPosition,
+    includePickersApi: true,
+    extraOutsideSx: {
+      '& .MuiInputBase-input': {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+        paddingBottom: FIELD_INPUT_PADDING_Y,
+      },
+
+      '& .MuiPickersInputBase-sectionsContainer': {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+        paddingBottom: FIELD_INPUT_PADDING_Y,
+      },
+    },
+  });

package/src/components/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,240 @@
+import React, { useMemo } from 'react';
+import type { SxProps, Theme } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import {
+  DateTimePicker as MuiDateTimePicker,
+  type DateTimePickerProps as MuiDateTimePickerProps,
+} from '@mui/x-date-pickers/DateTimePicker';
+import type { DateTimeValidationError } from '@mui/x-date-pickers/models';
+import { Dayjs } from 'dayjs';
+import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
+
+import { buildDateTimePickerSx } from './DateTimePicker.sx';
+import {
+  buildLocaleText,
+  getDateTimeValidationMessage,
+} from './DateTimePicker.helpers';
+import { resolvePreset } from '../_shared/resolvePreset';
+
+// ── Tipos de dominio ─────────────────────────────────────────────────────
+export type LabelPosition = 'outside' | 'floating';
+export type DateTimePickerSize = 'small' | 'medium';
+
+// ── Props base ───────────────────────────────────────────────────────────
+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;
+  /** 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;
+  /** Si es true usa formato 12h (AM/PM), false = 24h. Default: false. */
+  ampm?: boolean;
+  viewRenderers?: MuiDateTimePickerProps['viewRenderers'];
+  timeSteps?: MuiDateTimePickerProps['timeSteps'];
+  textFieldProps?: Record<string, any>;
+  /** Passthrough completo a slotProps del MuiDateTimePicker. */
+  slotProps?: MuiDateTimePickerProps['slotProps'];
+}
+
+// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
+export interface RHFDateTimePickerProps extends BaseDateTimePickerProps {
+  name: string;
+  // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en
+  // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).
+  // Cuando el componente o su uso involucra generics adicionales, TS se
+  // confunde narroweando el discriminated union y `Control<any>` no logra
+  // absorber `Control<MyForm>` en la comparación estructural profunda. El
+  // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos
+  // fuertes — solo degradamos la superficie del prop del componente.
+  control: any;
+  validation?: RegisterOptions;
+  /**
+   * Side-effect que corre después de que RHF actualiza el form state.
+   * Útil para cascadas entre campos. NO reemplaza al handler de RHF.
+   */
+  onValueChange?: (dateTime: Dayjs | null) => void;
+  selectedDateTime?: never;
+  onDateTimeChange?: never;
+}
+
+export interface ControlledDateTimePickerProps extends BaseDateTimePickerProps {
+  name?: string;
+  control?: never;
+  validation?: never;
+  selectedDateTime: Dayjs | null;
+  onDateTimeChange: (dateTime: Dayjs | null) => void;
+}
+
+// ── API pública final ────────────────────────────────────────────────────
+export type DateTimePickerProps =
+  | RHFDateTimePickerProps
+  | ControlledDateTimePickerProps;
+
+export const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
+  const {
+    label,
+    minDateTime,
+    maxDateTime,
+    disabled,
+    readOnly,
+    inputFormat,
+    borderRadius = 10,
+    labelPosition = 'outside',
+    size = 'small',
+    helperText,
+    error: errorProp,
+    sx,
+    className,
+    preset,
+    adapterLocale,
+    clearButtonText,
+    cancelButtonText,
+    acceptButtonText,
+    minutesStep,
+    minTime,
+    ampm = false,
+    viewRenderers,
+    timeSteps,
+    textFieldProps,
+    slotProps: slotPropsProp,
+    ...rest
+  } = props as ControlledDateTimePickerProps & {
+    control?: Control<any>;
+    validation?: RegisterOptions;
+  };
+
+  const [validationError, setValidationError] = React.useState<DateTimeValidationError | null>(null);
+
+  const validationErrorMessage = useMemo(
+    () => getDateTimeValidationMessage(validationError),
+    [validationError],
+  );
+
+  const customLocaleText = useMemo(
+    () => buildLocaleText(clearButtonText, cancelButtonText, acceptButtonText),
+    [clearButtonText, cancelButtonText, acceptButtonText],
+  );
+
+  const theme = useTheme();
+  const presetSx = resolvePreset('DateTimePicker', preset, theme);
+
+  const mergedSx = [
+    ...(presetSx ? [presetSx] : [buildDateTimePickerSx(borderRadius, labelPosition)]),
+    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+  ];
+
+  const renderPicker = (
+    value: Dayjs | null,
+    onChange: (date: Dayjs | null) => void,
+    onBlur?: () => void,
+    inputRef?: React.Ref<any>,
+    rhfError?: boolean,
+    rhfHelperText?: string,
+  ) => {
+    const finalError = rhfError || !!validationErrorMessage || !!errorProp;
+    const finalHelperText = rhfHelperText || validationErrorMessage || helperText;
+
+    return (
+      <LocalizationProvider
+        dateAdapter={AdapterDayjs}
+        adapterLocale={adapterLocale}
+      >
+        <MuiDateTimePicker
+          className={className}
+          label={label}
+          value={value}
+          onChange={onChange}
+          onError={setValidationError}
+          minDateTime={minDateTime}
+          maxDateTime={maxDateTime}
+          minutesStep={minutesStep}
+          disabled={disabled}
+          readOnly={readOnly}
+          minTime={minTime}
+          format={inputFormat ?? 'DD/MM/YYYY HH:mm'}
+          ampm={ampm}
+          viewRenderers={viewRenderers}
+          timeSteps={timeSteps}
+          sx={mergedSx}
+          slotProps={{
+            ...slotPropsProp,
+            textField: {
+              fullWidth: true,
+              size,
+              variant: 'outlined',
+              // Consumer overrides visuales / de comportamiento opcionales.
+              ...(slotPropsProp?.textField as Record<string, any> | undefined),
+              ...textFieldProps,
+              // Props críticas al final: ganan al consumer para no romper la
+              // integración con RHF ni desactivar el visual de error.
+              onBlur,
+              inputRef,
+              error: !!finalError,
+              helperText: finalHelperText,
+            } as any,
+          }}
+          localeText={customLocaleText}
+          {...rest}
+        />
+      </LocalizationProvider>
+    );
+  };
+
+  if ('control' in props && props.control) {
+    const { name, control, validation, onValueChange } = props as RHFDateTimePickerProps;
+    return (
+      <Controller
+        name={name}
+        control={control}
+        rules={validation}
+        render={({ field, fieldState: { error: fieldError } }) =>
+          renderPicker(
+            field.value ?? null,
+            (next) => {
+              field.onChange(next);
+              onValueChange?.(next);
+            },
+            field.onBlur,
+            field.ref,
+            !!fieldError,
+            fieldError?.message,
+          )
+        }
+      />
+    );
+  }
+
+  const { selectedDateTime, onDateTimeChange } = props as ControlledDateTimePickerProps;
+  return renderPicker(selectedDateTime, onDateTimeChange);
+};
+
+export default DateTimePicker;

package/src/components/DateTimePicker/index.ts

@@ -0,0 +1,9 @@
+export { DateTimePicker, default } from './DateTimePicker';
+export type {
+  DateTimePickerProps,
+  BaseDateTimePickerProps,
+  RHFDateTimePickerProps,
+  ControlledDateTimePickerProps,
+  LabelPosition,
+  DateTimePickerSize,
+} from './DateTimePicker';