@soyfri/shared-library 2.0.0-beta.3 → 2.0.0-beta.4

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,189 @@
+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 {
+  DatePicker as MuiDatePicker,
+  type DatePickerProps as MuiDatePickerProps,
+} from '@mui/x-date-pickers/DatePicker';
+import { DateValidationError } from '@mui/x-date-pickers/models';
+import { Dayjs } from 'dayjs';
+import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
+import 'dayjs/locale/en-gb';
+
+import { buildDatePickerSx } from './DatePicker.sx';
+import { getDateValidationMessage } from './DatePicker.helpers';
+import { resolvePreset } from '../_shared/resolvePreset';
+
+// ── Tipos de dominio ─────────────────────────────────────────────────────
+export type LabelPosition = 'outside' | 'floating';
+export type DatePickerSize = 'small' | 'medium';
+
+// ── Props base ───────────────────────────────────────────────────────────
+export interface BaseDatePickerProps
+  extends Omit<MuiDatePickerProps, 'value' | 'onChange' | 'slotProps'> {
+  label?: string;
+  minDate?: Dayjs;
+  maxDate?: Dayjs;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** Border radius del input. Default: 10 */
+  borderRadius?: number | string;
+  /** "outside" = label arriba del campo (default). "floating" = label clásico MUI dentro del borde */
+  labelPosition?: LabelPosition;
+  /** Tamaño del TextField renderizado. Default: 'small' */
+  size?: DatePickerSize;
+  /** helperText pasado al TextField (se sobrescribe por el error de validación si hay). */
+  helperText?: string;
+  /** Error external override. */
+  error?: boolean;
+  /** sx que se mergea al TextField interno del picker. */
+  sx?: SxProps<Theme>;
+  className?: string;
+  /**
+   * Nombre del preset de estilo registrado en `theme.styles.DatePicker`.
+   * - `"default"` (o ausente) = estilo built-in del paquete.
+   * - Cualquier otro string = mergea el preset encima del estilo built-in.
+   */
+  preset?: string;
+  /** Locale para el adaptador dayjs. Default: 'en-gb'. */
+  adapterLocale?: string;
+  /** Passthrough a slotProps.textField. */
+  textFieldProps?: Record<string, any>;
+  /** Passthrough completo a slotProps del MuiDatePicker. */
+  slotProps?: MuiDatePickerProps['slotProps'];
+}
+
+// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
+export interface RHFDatePickerProps extends BaseDatePickerProps {
+  name: string;
+  control: Control<any>;
+  validation?: RegisterOptions;
+  selectedDate?: never;
+  onDateChange?: never;
+}
+
+export interface ControlledDatePickerProps extends BaseDatePickerProps {
+  name?: string;
+  control?: never;
+  validation?: never;
+  selectedDate: Dayjs | null;
+  onDateChange: (date: Dayjs | null) => void;
+}
+
+// ── API pública final ────────────────────────────────────────────────────
+export type DatePickerProps = RHFDatePickerProps | ControlledDatePickerProps;
+
+export const DatePicker: React.FC<DatePickerProps> = (props) => {
+  const {
+    label,
+    minDate,
+    maxDate,
+    disabled,
+    readOnly,
+    borderRadius = 10,
+    labelPosition = 'outside',
+    size = 'small',
+    helperText,
+    error: errorProp,
+    sx,
+    className,
+    preset,
+    adapterLocale = 'en-gb',
+    textFieldProps,
+    slotProps: slotPropsProp,
+    ...rest
+  } = props as ControlledDatePickerProps & {
+    control?: Control<any>;
+    validation?: RegisterOptions;
+  };
+
+  const [validationError, setValidationError] = React.useState<DateValidationError | null>(null);
+
+  const validationErrorMessage = useMemo(
+    () => getDateValidationMessage(validationError),
+    [validationError],
+  );
+
+  const theme = useTheme();
+  const presetSx = resolvePreset('DatePicker', preset, theme);
+
+  const mergedSx = [
+    buildDatePickerSx(borderRadius, labelPosition),
+    ...(presetSx ? [presetSx] : []),
+    ...(Array.isArray(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}>
+        <MuiDatePicker
+          label={label}
+          value={value}
+          onChange={onChange}
+          minDate={minDate}
+          maxDate={maxDate}
+          onError={setValidationError}
+          disabled={disabled}
+          readOnly={readOnly}
+          className={className}
+          sx={mergedSx}
+          slotProps={{
+            ...slotPropsProp,
+            textField: {
+              fullWidth: true,
+              size,
+              variant: 'outlined',
+              onBlur,
+              inputRef,
+              error: !!finalError,
+              helperText: finalHelperText,
+              ...(slotPropsProp?.textField as Record<string, any> | undefined),
+              ...textFieldProps,
+            } as any,
+          }}
+          {...(rest as any)}
+        />
+      </LocalizationProvider>
+    );
+  };
+
+  // --- RHF mode ---
+  if ('control' in props && props.control) {
+    const { name, control, validation } = props as RHFDatePickerProps;
+    return (
+      <Controller
+        name={name}
+        control={control}
+        rules={validation}
+        render={({ field, fieldState: { error: fieldError } }) =>
+          renderPicker(
+            field.value ?? null,
+            field.onChange,
+            field.onBlur,
+            field.ref,
+            !!fieldError,
+            fieldError?.message,
+          )
+        }
+      />
+    );
+  }
+
+  // --- Controlado ---
+  const { selectedDate, onDateChange } = props as ControlledDatePickerProps;
+  return renderPicker(selectedDate, onDateChange);
+};
+
+export default DatePicker;

package/src/components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,10 @@
+// Re-export barrel para compatibilidad con imports antiguos.
+// Los tipos ahora viven dentro de DatePicker.tsx.
+export type {
+  LabelPosition,
+  DatePickerSize,
+  BaseDatePickerProps,
+  RHFDatePickerProps,
+  ControlledDatePickerProps,
+  DatePickerProps,
+} from './DatePicker';

package/src/components/DatePicker/index.ts

@@ -0,0 +1,9 @@
+export { DatePicker, default } from './DatePicker';
+export type {
+  DatePickerProps,
+  BaseDatePickerProps,
+  RHFDatePickerProps,
+  ControlledDatePickerProps,
+  LabelPosition,
+  DatePickerSize,
+} from './DatePicker.types';

package/src/components/DateRangePicker/DateRangePicker.definitions.ts

@@ -0,0 +1,191 @@
+export const BasicDateRangePickerDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const BasicDateRangePickerExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
+  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
+
+  const handleDateRangeChange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Seleccionar Rango"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={handleDateRangeChange}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerWithMinMaxDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerWithMinMaxExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-06-10'));
+  const [endDate, setEndDate] = useState(dayjs('2023-06-20'));
+  const minDate = dayjs('2023-06-01');
+  const maxDate = dayjs('2023-06-30');
+
+  const handleDateRangeChange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango de Junio"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={handleDateRangeChange}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+      <Typography variant="caption" color="text.secondary">
+        (Rango permitido: \${minDate.format('YYYY-MM-DD')} a \${maxDate.format('YYYY-MM-DD')})
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerDisabledDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerDisabledExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
+  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango Deshabilitado"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={() => {}}
+        disabled
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerReadOnlyDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerReadOnlyExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2024-07-01'));
+  const [endDate, setEndDate] = useState(dayjs('2024-07-15'));
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango Solo Lectura"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={() => {}}
+        readOnly
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerWithInitialNullDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerWithInitialNullExample = () => {
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+
+  const handleDateRangeChange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango Sin Selección Inicial"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={handleDateRangeChange}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerWithSizeDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Adjust path if necessary
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerWithSizeExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
+  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
+
+  const handleDateRangeChange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango de Fechas (Tamaño Pequeño)"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={handleDateRangeChange}
+        slotProps={{ textField: { size: 'small' } }}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;

package/src/components/DateRangePicker/DateRangePicker.stories.tsx

@@ -0,0 +1,252 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { Box, Typography } from '@mui/material';
+import { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+import DateRangePicker from "./DateRangePicker";
+import { BasicDateRangePickerDefinition, DateRangePickerWithMinMaxDefinition, DateRangePickerDisabledDefinition, DateRangePickerReadOnlyDefinition, DateRangePickerWithInitialNullDefinition, DateRangePickerWithSizeDefinition } from './DateRangePicker.definitions';
+
+// =============================================================================
+const meta: Meta<typeof DateRangePicker> = {
+    title: 'Components/DateRangePicker',
+    component: DateRangePicker,
+    tags: ['autodocs'],
+    parameters: {
+      layout: 'centered',
+      docs: {
+        description: {
+          component: 'Un componente `DateRangePicker` personalizado que permite seleccionar un rango de fechas con un solo campo de entrada (visualmente dos inputs interconectados) y gestiona las fechas de inicio y fin.',
+        },
+      },
+    },
+    argTypes: {
+      label: { control: 'text', description: 'Etiqueta para el campo de entrada del rango de fechas.' },
+      startDate: { control: 'object', description: 'La fecha de inicio del rango.', type: { name: 'object', required: false, value: {} } },
+      endDate: { control: 'object', description: 'La fecha de fin del rango.', type: { name: 'object', required: false, value: {} } },
+      onDateRangeChange: { action: 'dateRangeChanged', description: 'Callback que se dispara cuando el rango de fechas cambia.' },
+      minDate: { control: 'object', description: 'La fecha mínima permitida para cualquier fecha en el rango.' },
+      maxDate: { control: 'object', description: 'La fecha máxima permitida para cualquier fecha en el rango.' },
+      disabled: { control: 'boolean', description: 'Si es verdadero, el selector de rango estará deshabilitado.' },
+      readOnly: { control: 'boolean', description: 'Si es verdadero, el selector de rango estará en modo de solo lectura.' },
+      slotProps: { control: 'object', description: 'Propiedades pasadas a los slots internos del DateRangePicker (e.g., `textField`).' },
+    },
+  };
+  
+  export default meta;
+  type Story = StoryObj<typeof DateRangePicker>;
+  
+  // =============================================================================
+  // Historias
+  // =============================================================================
+  
+  export const BasicDateRangePicker: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
+  
+      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
+        setStartDate(start);
+        setEndDate(end);
+      };
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Seleccionar Rango"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={handleDateRangeChange}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Un `DateRangePicker` básico que permite seleccionar un rango de fechas."
+        },
+        source: { code: BasicDateRangePickerDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerWithMinMax: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-06-10'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-06-20'));
+      const minDate = dayjs('2023-06-01');
+      const maxDate = dayjs('2023-06-30');
+  
+      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
+        setStartDate(start);
+        setEndDate(end);
+      };
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango de Junio"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={handleDateRangeChange}
+            minDate={minDate}
+            maxDate={maxDate}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            (Rango permitido: ${minDate.format('YYYY-MM-DD')} a ${maxDate.format('YYYY-MM-DD')})
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra un `DateRangePicker` con fechas mínimas y máximas permitidas para el rango completo."
+        },
+        source: { code: DateRangePickerWithMinMaxDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerDisabled: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango Deshabilitado"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={() => {}}
+            disabled
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Demuestra un `DateRangePicker` en estado deshabilitado."
+        },
+        source: { code: DateRangePickerDisabledDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerReadOnly: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2024-07-01'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2024-07-15'));
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango Solo Lectura"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={() => {}}
+            readOnly
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra el `DateRangePicker` en modo de solo lectura. El usuario puede ver el rango pero no modificarlo."
+        },
+        source: { code: DateRangePickerReadOnlyDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerWithInitialNull: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(null);
+      const [endDate, setEndDate] = useState<Dayjs | null>(null);
+  
+      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
+        setStartDate(start);
+        setEndDate(end);
+      };
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango Sin Selección Inicial"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={handleDateRangeChange}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra un `DateRangePicker` sin fechas de inicio o fin seleccionadas inicialmente."
+        },
+        source: { code: DateRangePickerWithInitialNullDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerWithSize: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
+  
+      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
+        setStartDate(start);
+        setEndDate(end);
+      };
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango de Fechas (Tamaño Pequeño)"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={handleDateRangeChange}
+            slotProps={{ textField: { size: 'small' } }} // Aplica el tamaño 'small' a los TextFields internos
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Demuestra cómo aplicar diferentes tamaños (`small` o `medium`) a los campos de entrada del `DateRangePicker`."
+        },
+        source: { code: DateRangePickerWithSizeDefinition.trim() }
+      }
+    }
+  };
+