@soyfri/shared-library 2.0.0-beta.21 → 2.0.0-beta.22

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

@@ -1,415 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,240 +0,0 @@
-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

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