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

package/storybook-static/assets/DatePicker.stories-EaUCMkh3.js

@@ -0,0 +1,444 @@
+import{j as a}from"./jsx-runtime-D_zvdyIk.js";import{r as i}from"./iframe-BAJnc_4n.js";import{D as s}from"./DatePicker-Clkpr-Ku.js";import{d as o}from"./PickersModalDialog-Tjnr_cu5.js";import{B as l}from"./Box-BnhEcfFm.js";import{T as c}from"./Typography-BgntX2Ep.js";import"./preload-helper-PPVm8Dsz.js";import"./formField.sx-DMCmZIAa.js";import"./resolvePreset-CN2aOJJr.js";import"./useTheme-BmOJK7ra.js";import"./DefaultPropsProvider-BGoQxtDa.js";import"./extendSxProp-CEpa30hT.js";import"./useTimeout-DNjRaOWc.js";import"./index-CIeucmOB.js";import"./useThemeProps-DYtxXiUU.js";import"./useThemeProps-U4yXiZ_5.js";import"./useMobilePicker-DK-c8xbD.js";import"./useSlotProps-C0uMfuBt.js";import"./useSlot-b6pXgp5_.js";import"./useForkRef-0ANIrxcF.js";import"./useId-b4fZxjOL.js";import"./useControlled-DsVh1a5j.js";import"./Fade-Ll96CvH8.js";import"./getReactElementRef-BQ3ANZdy.js";import"./index-CY7j4a7o.js";import"./index-BF3FAXTk.js";import"./Grow-8y4FglGK.js";import"./Modal-3okp9H2i.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./Portal-Cj8XF9Lf.js";import"./Paper-SwQBhqI7.js";import"./Popper-CnCTYXxy.js";import"./Button-DBpqmVB_.js";import"./createSimplePaletteValueFilter-bm0fmN_7.js";import"./ButtonBase-qyaMEhe4.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./isFocusVisible-B8k4qzLc.js";import"./CircularProgress-DC7ZNWwl.js";import"./DialogContent-BeCDKgax.js";import"./ListItem-D3O0103N.js";import"./Menu-ClzfjLc3.js";import"./debounce-Be36O1Ab.js";import"./mergeSlotProps-B0UBKBMe.js";import"./isMuiElement-CTZSFcY5.js";import"./Chip-C3vKPpzR.js";import"./createSvgIcon-D_Gca4vA.js";import"./TextField-22T-xHBm.js";import"./Select-DJh2biEb.js";import"./visuallyHidden-Dan1xhjv.js";import"./IconButton-9OYSTH58.js";const M=`
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const BasicDatePickerExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Seleccionar Fecha"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,S=`
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerWithMinMaxExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs('2023-06-15'));
+  const minDate = dayjs('2023-06-01');
+  const maxDate = dayjs('2023-06-30');
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha en Junio"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+      <Typography variant="caption" color="text.secondary">
+        (Rango: \${minDate.format('YYYY-MM-DD')} a \${maxDate.format('YYYY-MM-DD')})
+      </Typography>
+    </Box>
+  );
+};
+`,P=`
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
+  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
+
+  const handleStartDateChange = (date) => {
+    setStartDate(date);
+    if (date && endDate && date.isAfter(endDate)) {
+      setEndDate(date);
+    }
+  };
+
+  const handleEndDateChange = (date) => {
+    setEndDate(date);
+    if (date && startDate && date.isBefore(startDate)) {
+      setStartDate(date);
+    }
+  };
+
+  return (
+    <Box sx={{ display: 'flex', gap: 3, flexDirection: 'column' }}>
+      <DatePicker
+        label="Fecha de Inicio"
+        selectedDate={startDate}
+        onDateChange={handleStartDateChange}
+        maxDate={endDate || undefined}
+      />
+      <DatePicker
+        label="Fecha de Fin"
+        selectedDate={endDate}
+        onDateChange={handleEndDateChange}
+        minDate={startDate || undefined}
+      />
+      <Typography>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`,k=`
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerWithErrorExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs('2023-01-01'));
+  // Intentamos establecer una fecha fuera de un rango muy restringido para forzar un error
+  const minDate = dayjs('2023-01-05');
+  const maxDate = dayjs('2023-01-10');
+
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha (con error de rango)"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+      <Typography variant="caption" color="error">
+        (Intenta seleccionar una fecha fuera de \${minDate.format('YYYY-MM-DD')} - \${maxDate.format('YYYY-MM-DD')})
+      </Typography>
+    </Box>
+  );
+};
+`,j=`
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerSmallSizeExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs());
+  return (
+    <Box sx={{ width: 250 }}>
+      <DatePicker
+        label="Fecha (Pequeño)"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        slotProps={{ textField: { size: 'small' } }} // Prop para hacer el TextField pequeño
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,b=`
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerDisabledExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha (Deshabilitado)"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        disabled
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,F=`
+    import React, { useState } from 'react';
+    import { DatePicker } from '@soyfri/shared-library/DatePicker';
+    import dayjs from 'dayjs';
+    import { Box, Typography } from '@mui/material';
+
+    export const DatePickerReadOnlyDefinition = () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2024-07-24'));
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker
+            label="Fecha (Solo Lectura)"
+            selectedDate={selectedDate}
+            onDateChange={() => {}} // No permite cambios
+            readOnly
+          />
+          <Typography sx={{ mt: 2 }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+};
+`,T=`
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import { Dayjs } from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerEmptyWithMaskExample = () => {
+  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        format="DD/MM/YY"
+      />
+      <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
+        Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA).
+      </Typography>
+    </Box>
+  );
+};
+`,be={title:"Components/DatePicker",component:s,tags:["autodocs"],parameters:{layout:"centered",docs:{description:{component:"Un componente `DatePicker` personalizado de Material UI que gestiona el estado de fecha, rangos y validación de errores."}}},argTypes:{label:{control:"text",description:"Etiqueta para el selector de fecha."},selectedDate:{control:"object",description:"La fecha actualmente seleccionada.",type:{name:"object",required:!1,value:{}}},onDateChange:{action:"dateChanged",description:"Callback que se dispara cuando la fecha cambia."},minDate:{control:"object",description:"La fecha mínima permitida.",type:{name:"object",required:!1,value:{}}},maxDate:{control:"object",description:"La fecha máxima permitida.",type:{name:"object",required:!1,value:{}}},disabled:{control:"boolean",description:"Si es verdadero, el selector de fecha estará deshabilitado."},readOnly:{control:"boolean",description:"Si es verdadero, el selector de fecha estará en modo de solo lectura."},slotProps:{control:"object",description:"Props pasadas a los slots internos del DatePicker, como `textField`."}}},D={render:()=>{const[e,t]=i.useState(o());return a.jsxs(l,{sx:{width:300},children:[a.jsx(s,{label:"Seleccionar Fecha",selectedDate:e,onDateChange:t}),a.jsxs(c,{sx:{mt:2},children:["Fecha seleccionada: ",e?e.format("YYYY-MM-DD"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Un `DatePicker` básico con selección de una única fecha."},source:{code:M.trim()}}}},m={render:()=>{const[e,t]=i.useState(null);return a.jsxs(l,{sx:{width:300},children:[a.jsx(s,{label:"Fecha",selectedDate:e,onDateChange:t,format:"DD/MM/YY"}),a.jsx(c,{sx:{mt:2},variant:"caption",color:"text.secondary",children:"Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA)."})]})},parameters:{docs:{description:{story:"DatePicker vacío. Al no haber valor seleccionado, cada sección del campo muestra su placeholder según el `format` (por ejemplo `DD/MM/AA`), funcionando como máscara visual."},source:{code:T.trim()}}}},p={render:()=>{const[e,t]=i.useState(o("2023-06-15")),r=o("2023-06-01"),d=o("2023-06-30");return a.jsxs(l,{sx:{width:300},children:[a.jsx(s,{label:"Fecha en Junio (Rango)",selectedDate:e,onDateChange:t,minDate:r,maxDate:d}),a.jsxs(c,{sx:{mt:2},children:["Fecha seleccionada: ",e?e.format("YYYY-MM-DD"):"Ninguna"]}),a.jsxs(c,{variant:"caption",color:"text.secondary",children:["(Rango: $",r.format("YYYY-MM-DD")," a $",d.format("YYYY-MM-DD"),")"]})]})},parameters:{docs:{description:{story:"Muestra un `DatePicker` con fechas mínimas y máximas permitidas."},source:{code:S.trim()}}}},u={render:()=>{const[e,t]=i.useState(o("2023-01-01")),[r,d]=i.useState(o("2023-01-31")),Y=n=>{t(n),n&&r&&n.isAfter(r)&&d(n)},g=n=>{d(n),n&&e&&n.isBefore(e)&&t(n)};return a.jsxs(l,{sx:{display:"flex",gap:3,flexDirection:"column",width:300},children:[a.jsx(s,{label:"Fecha de Inicio",selectedDate:e,onDateChange:Y,maxDate:r||void 0}),a.jsx(s,{label:"Fecha de Fin",selectedDate:r,onDateChange:g,minDate:e||void 0}),a.jsxs(c,{children:["Inicio: ",e?e.format("YYYY-MM-DD"):"N/A"," | Fin: ",r?r.format("YYYY-MM-DD"):"N/A"]})]})},parameters:{docs:{description:{story:"Dos `DatePicker`s que funcionan como un selector de rango de fechas, donde la fecha de inicio y fin se restringen mutuamente."},source:{code:P.trim()}}}},h={render:()=>{const[e,t]=i.useState(o("2023-01-01")),r=o("2023-01-05"),d=o("2023-01-10");return a.jsxs(l,{sx:{width:300},children:[a.jsx(s,{label:"Fecha (con error de rango)",selectedDate:e,onDateChange:t,minDate:r,maxDate:d}),a.jsxs(c,{sx:{mt:2},children:["Fecha seleccionada: ",e?e.format("YYYY-MM-DD"):"Ninguna"]}),a.jsxs(c,{variant:"caption",color:"error",children:["(Intenta seleccionar una fecha fuera de $",r.format("YYYY-MM-DD")," - $",d.format("YYYY-MM-DD"),")"]})]})},parameters:{docs:{description:{story:"Demuestra cómo el `DatePicker` maneja los errores de validación, por ejemplo, al seleccionar una fecha fuera del rango permitido."},source:{code:k.trim()}}}},y={render:()=>{const[e,t]=i.useState(o());return a.jsxs(l,{sx:{width:250},children:[a.jsx(s,{label:"Fecha (Pequeño)",selectedDate:e,onDateChange:t,slotProps:{textField:{size:"small"}}}),a.jsxs(c,{sx:{mt:2},children:["Fecha seleccionada: ",e?e.format("YYYY-MM-DD"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Muestra el `DatePicker` en un tamaño más pequeño utilizando `slotProps.textField.size`."},source:{code:j.trim()}}}},x={render:()=>{const[e,t]=i.useState(o());return a.jsxs(l,{sx:{width:300},children:[a.jsx(s,{label:"Fecha (Deshabilitado)",selectedDate:e,onDateChange:t,disabled:!0}),a.jsxs(c,{sx:{mt:2},children:["Fecha seleccionada: ",e?e.format("YYYY-MM-DD"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Demuestra un `DatePicker` en estado deshabilitado, donde no se puede interactuar con él."},source:{code:b.trim()}}}},f={render:()=>{const[e,t]=i.useState(o("2024-07-24"));return a.jsxs(l,{sx:{width:300},children:[a.jsx(s,{label:"Fecha (Solo Lectura)",selectedDate:e,onDateChange:()=>{},readOnly:!0}),a.jsxs(c,{sx:{mt:2},children:["Fecha seleccionada: ",e?e.format("YYYY-MM-DD"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Muestra el `DatePicker` en modo de solo lectura. El usuario puede ver la fecha pero no modificarla."},source:{code:F.trim()}}}};D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
+    return <Box sx={{
+      width: 300
+    }}>
+          <DatePicker // Renombrado
+      label="Seleccionar Fecha" selectedDate={selectedDate} onDateChange={setSelectedDate} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un \`DatePicker\` básico con selección de una única fecha."
+      },
+      source: {
+        code: BasicDatePickerDefinition.trim()
+      }
+    }
+  }
+}`,...D.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
+    return <Box sx={{
+      width: 300
+    }}>
+          <DatePicker label="Fecha" selectedDate={selectedDate} onDateChange={setSelectedDate} format="DD/MM/YY" />
+          <Typography sx={{
+        mt: 2
+      }} variant="caption" color="text.secondary">
+            Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA).
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "DatePicker vacío. Al no haber valor seleccionado, cada sección del campo muestra su placeholder según el \`format\` (por ejemplo \`DD/MM/AA\`), funcionando como máscara visual."
+      },
+      source: {
+        code: DatePickerEmptyWithMaskDefinition.trim()
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2023-06-15'));
+    const minDate = dayjs('2023-06-01');
+    const maxDate = dayjs('2023-06-30');
+    return <Box sx={{
+      width: 300
+    }}>
+          <DatePicker // Renombrado
+      label="Fecha en Junio (Rango)" selectedDate={selectedDate} onDateChange={setSelectedDate} minDate={minDate} maxDate={maxDate} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            (Rango: \${minDate.format('YYYY-MM-DD')} a \${maxDate.format('YYYY-MM-DD')})
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra un \`DatePicker\` con fechas mínimas y máximas permitidas."
+      },
+      source: {
+        code: DatePickerWithMinMaxDefinition.trim()
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+    const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
+    const handleStartDateChange = (date: Dayjs | null) => {
+      setStartDate(date);
+      if (date && endDate && date.isAfter(endDate)) {
+        setEndDate(date);
+      }
+    };
+    const handleEndDateChange = (date: Dayjs | null) => {
+      setEndDate(date);
+      if (date && startDate && date.isBefore(startDate)) {
+        setStartDate(date);
+      }
+    };
+    return <Box sx={{
+      display: 'flex',
+      gap: 3,
+      flexDirection: 'column',
+      width: 300
+    }}>
+          <DatePicker // Renombrado
+      label="Fecha de Inicio" selectedDate={startDate} onDateChange={handleStartDateChange} maxDate={endDate || undefined} />
+          <DatePicker // Renombrado
+      label="Fecha de Fin" selectedDate={endDate} onDateChange={handleEndDateChange} minDate={startDate || undefined} />
+          <Typography>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Dos \`DatePicker\`s que funcionan como un selector de rango de fechas, donde la fecha de inicio y fin se restringen mutuamente."
+      },
+      source: {
+        code: DateRangePickerDefinition.trim()
+      }
+    }
+  }
+}`,...u.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+    const minDate = dayjs('2023-01-05');
+    const maxDate = dayjs('2023-01-10');
+    return <Box sx={{
+      width: 300
+    }}>
+          <DatePicker // Renombrado
+      label="Fecha (con error de rango)" selectedDate={selectedDate} onDateChange={setSelectedDate} minDate={minDate} maxDate={maxDate} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+          <Typography variant="caption" color="error">
+            (Intenta seleccionar una fecha fuera de \${minDate.format('YYYY-MM-DD')} - \${maxDate.format('YYYY-MM-DD')})
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demuestra cómo el \`DatePicker\` maneja los errores de validación, por ejemplo, al seleccionar una fecha fuera del rango permitido."
+      },
+      source: {
+        code: DatePickerWithErrorDefinition.trim()
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
+    return <Box sx={{
+      width: 250
+    }}>
+          <DatePicker // Renombrado
+      label="Fecha (Pequeño)" selectedDate={selectedDate} onDateChange={setSelectedDate} slotProps={{
+        textField: {
+          size: 'small'
+        }
+      }} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra el \`DatePicker\` en un tamaño más pequeño utilizando \`slotProps.textField.size\`."
+      },
+      source: {
+        code: DatePickerSmallSizeDefinition.trim()
+      }
+    }
+  }
+}`,...y.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
+    return <Box sx={{
+      width: 300
+    }}>
+          <DatePicker // Renombrado
+      label="Fecha (Deshabilitado)" selectedDate={selectedDate} onDateChange={setSelectedDate} disabled />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demuestra un \`DatePicker\` en estado deshabilitado, donde no se puede interactuar con él."
+      },
+      source: {
+        code: DatePickerDisabledDefinition.trim()
+      }
+    }
+  }
+}`,...x.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2024-07-24'));
+    return <Box sx={{
+      width: 300
+    }}>
+          <DatePicker // Renombrado
+      label="Fecha (Solo Lectura)" selectedDate={selectedDate} onDateChange={() => {}} // No permite cambios
+      readOnly />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra el \`DatePicker\` en modo de solo lectura. El usuario puede ver la fecha pero no modificarla."
+      },
+      source: {
+        code: DatePickerReadOnlyDefinition.trim() // Usar la definición importada
+      }
+    }
+  }
+}`,...f.parameters?.docs?.source}}};const Fe=["BasicDatePicker","DatePickerEmptyWithMask","DatePickerWithMinMax","DateRangePicker","DatePickerWithError","DatePickerSmallSize","DatePickerDisabled","DatePickerReadOnly"];export{D as BasicDatePicker,x as DatePickerDisabled,m as DatePickerEmptyWithMask,f as DatePickerReadOnly,y as DatePickerSmallSize,h as DatePickerWithError,p as DatePickerWithMinMax,u as DateRangePicker,Fe as __namedExportsOrder,be as default};