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

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

@@ -1,444 +0,0 @@
-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};