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

package/storybook-static/assets/Input.stories-BRxekliy.js

@@ -1,650 +0,0 @@
-import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{r as n}from"./iframe-BAJnc_4n.js";import{I as r}from"./Input-CjX0t4h-.js";import{B as s}from"./Box-BnhEcfFm.js";import{T as d}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"./TextField-22T-xHBm.js";import"./useSlot-b6pXgp5_.js";import"./useForkRef-0ANIrxcF.js";import"./useId-b4fZxjOL.js";import"./Select-DJh2biEb.js";import"./Menu-ClzfjLc3.js";import"./useSlotProps-C0uMfuBt.js";import"./Paper-SwQBhqI7.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Grow-8y4FglGK.js";import"./getReactElementRef-BQ3ANZdy.js";import"./useTimeout-DNjRaOWc.js";import"./index-CY7j4a7o.js";import"./index-BF3FAXTk.js";import"./mergeSlotProps-B0UBKBMe.js";import"./Modal-3okp9H2i.js";import"./Portal-Cj8XF9Lf.js";import"./Fade-Ll96CvH8.js";import"./useControlled-DsVh1a5j.js";import"./createSvgIcon-D_Gca4vA.js";import"./createSimplePaletteValueFilter-bm0fmN_7.js";import"./isMuiElement-CTZSFcY5.js";import"./emotion-react.browser.esm--g-C9cX9.js";const E=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const BasicTextInputExample = () => {
-  const [value, setValue] = useState('Texto de ejemplo');
-  return (
-    <Box sx={{ width: 300 }}>
-      <Input
-        label="Nombre"
-        value={value}
-        onChange={setValue}
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-    </Box>
-  );
-};
-`,w=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const NumberInputExample = () => {
-  const [value, setValue] = useState(123);
-  return (
-    <Box sx={{ width: 300 }}>
-      <Input
-        label="Cantidad"
-        type="number"
-        value={value}
-        onChange={setValue}
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-    </Box>
-  );
-};
-`,D=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const EmailInputExample = () => {
-  const [value, setValue] = useState('ejemplo@dominio.com');
-  return (
-    <Box sx={{ width: 300 }}>
-      <Input
-        label="Correo Electrónico"
-        type="email"
-        value={value}
-        onChange={setValue}
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-    </Box>
-  );
-};
-`,R=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const PasswordInputExample = () => {
-  const [value, setValue] = useState('micontraseña');
-  return (
-    <Box sx={{ width: 300 }}>
-      <Input
-        label="Contraseña"
-        type="password"
-        value={value}
-        onChange={setValue}
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-    </Box>
-  );
-};
-`,M=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const InputWithPlaceholderExample = () => {
-  const [value, setValue] = useState('');
-  return (
-    <Box sx={{ width: 300 }}>
-      <Input
-        label="Búsqueda"
-        placeholder="Escribe tu término de búsqueda..."
-        value={value}
-        onChange={setValue}
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value || 'Vacío'}</Typography>
-    </Box>
-  );
-};
-`,q=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const InputWithErrorExample = () => {
-  const [value, setValue] = useState('invalido');
-  const hasError = value.length < 5 && value.length > 0;
-  return (
-    <Box sx={{ width: 300 }}>
-      <Input
-        label="Nombre de usuario"
-        value={value}
-        onChange={setValue}
-        error={hasError}
-        helperText={hasError ? 'Mínimo 5 caracteres' : ''}
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-    </Box>
-  );
-};
-`,F=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const DisabledInputExample = () => {
-  const [value, setValue] = useState('Campo deshabilitado');
-  return (
-    <Box sx={{ width: 300 }}>
-      <Input
-        label="Estado"
-        value={value}
-        onChange={setValue}
-        disabled
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-    </Box>
-  );
-};
-`,P=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ReadOnlyInputExample = () => {
-  const [value, setValue] = useState('Valor de solo lectura');
-  return (
-    <Box sx={{ width: 300 }}>
-      <Input
-        label="Información"
-        value={value}
-        onChange={setValue}
-        readOnly
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-    </Box>
-  );
-};
-`,U=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const InputVariantsExample = () => {
-  const [valueOutlined, setValueOutlined] = useState('Outlined');
-  const [valueFilled, setValueFilled] = useState('Filled');
-  const [valueStandard, setValueStandard] = useState('Standard');
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
-      <Input
-        label="Esquema Outlined"
-        value={valueOutlined}
-        onChange={setValueOutlined}
-        variant="outlined"
-      />
-      <Input
-        label="Esquema Filled"
-        value={valueFilled}
-        onChange={setValueFilled}
-        variant="filled"
-      />
-      <Input
-        label="Esquema Standard"
-        value={valueStandard}
-        onChange={setValueStandard}
-        variant="standard"
-      />
-    </Box>
-  );
-};
-`,W=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const InputSizesExample = () => {
-  const [valueMedium, setValueMedium] = useState('Tamaño Mediano');
-  const [valueSmall, setValueSmall] = useState('Tamaño Pequeño');
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
-      <Input
-        label="Input Mediano"
-        value={valueMedium}
-        onChange={setValueMedium}
-        size="medium"
-      />
-      <Input
-        label="Input Pequeño"
-        value={valueSmall}
-        onChange={setValueSmall}
-        size="small"
-      />
-    </Box>
-  );
-};
-`,A=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const FullWidthInputExample = () => {
-  const [value, setValue] = useState('Ocupa todo el ancho');
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Input
-        label="Input de Ancho Completo"
-        value={value}
-        onChange={setValue}
-        fullWidth
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-    </Box>
-  );
-};
-`,L=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box } from '@mui/material';
-
-export const LabelPositionExample = () => {
-  const [outside, setOutside] = useState('Outside (default)');
-  const [floating, setFloating] = useState('Floating');
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
-      <Input
-        label="Label outside"
-        value={outside}
-        onChange={setOutside}
-        labelPosition="outside"
-      />
-      <Input
-        label="Label floating (MUI clásico)"
-        value={floating}
-        onChange={setFloating}
-        labelPosition="floating"
-      />
-    </Box>
-  );
-};
-`,z=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box } from '@mui/material';
-
-export const CustomBorderRadiusExample = () => {
-  const [v, setV] = useState('Texto');
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
-      <Input label="Sin radius" value={v} onChange={setV} borderRadius={0} />
-      <Input label="Radius 4px" value={v} onChange={setV} borderRadius={4} />
-      <Input label="Default (10px)" value={v} onChange={setV} />
-      <Input label="Pill (24px)" value={v} onChange={setV} borderRadius={24} />
-    </Box>
-  );
-};
-`,N=`
-import React, { useState } from 'react';
-import { Input } from './Input'; // Ajusta la ruta si es necesario
-import { Box } from '@mui/material';
-
-export const CustomStylingExample = () => {
-  const [v, setV] = useState('Custom completo');
-  return (
-    <Box sx={{ width: 300 }}>
-      <Input
-        label="Combinado: bg + borderColor + label color"
-        value={v}
-        onChange={setV}
-        sx={{
-          '& .MuiInputLabel-root': { color: 'primary.main' },
-          '& .MuiOutlinedInput-root': { bgcolor: '#fff7e6' },
-          '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: 'warning.main',
-            borderWidth: 2,
-          },
-        }}
-      />
-    </Box>
-  );
-};
-`,Be={title:"Components/Input",component:r,tags:["autodocs"],parameters:{layout:"centered",docs:{description:{component:"Un componente `Input` personalizado basado en `TextField` de Material UI, que soporta varios tipos de entrada HTML y propiedades de `TextField`."}}},argTypes:{label:{control:"text",description:"Etiqueta flotante para el campo de entrada."},value:{control:"text",description:"El valor actual del campo de entrada.",type:{name:"string",required:!0}},onChange:{action:"valueChanged",description:"Callback que se dispara cuando el valor del campo de entrada cambia."},type:{control:"select",options:["text","number","email","password","tel","url","search","date","datetime-local","month","week","time","color"],description:"El tipo HTML del campo de entrada (controla el teclado en móviles, etc.).",defaultValue:"text"},placeholder:{control:"text",description:"Texto de marcador de posición cuando el campo está vacío."},disabled:{control:"boolean",description:"Si es verdadero, el campo de entrada estará deshabilitado."},error:{control:"boolean",description:"Si es verdadero, el campo de entrada estará en estado de error."},helperText:{control:"text",description:"Texto auxiliar que se muestra debajo del campo de entrada."},variant:{control:"radio",options:["outlined","filled","standard"],description:"La variante de diseño del campo de entrada.",defaultValue:"outlined"},size:{control:"radio",options:["small","medium"],description:"El tamaño del campo de entrada.",defaultValue:"small"},labelPosition:{control:"radio",options:["outside","floating"],description:'"outside" (default): label arriba del input. "floating": label clásico de MUI dentro del notched outline.',defaultValue:"outside"},borderRadius:{control:{type:"number"},description:"Border radius del input en px (o string CSS). Default: 10.",defaultValue:10},fullWidth:{control:"boolean",description:"Si es verdadero, el campo de entrada ocupará todo el ancho disponible.",defaultValue:!1}}},m={render:()=>{const[t,o]=n.useState("Texto de ejemplo");return e.jsxs(s,{sx:{width:300},children:[e.jsx(r,{label:"Nombre",value:t,onChange:a=>o(a.toString())}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t]})]})},parameters:{docs:{description:{story:"Un campo de entrada de texto básico con una etiqueta."},source:{code:E.trim()}}}},x={render:()=>{const[t,o]=n.useState(123);return e.jsxs(s,{sx:{width:300},children:[e.jsx(r,{label:"Cantidad",type:"number",value:t.toString(),onChange:a=>o(Number(a))}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t]})]})},parameters:{docs:{description:{story:"Un campo de entrada numérico. Permite solo números y controla el teclado numérico en dispositivos móviles."},source:{code:w.trim()}}}},g={render:()=>{const[t,o]=n.useState("ejemplo@dominio.com");return e.jsxs(s,{sx:{width:300},children:[e.jsx(r,{label:"Correo Electrónico",type:"email",value:t.toString(),onChange:a=>o(a.toString())}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t]})]})},parameters:{docs:{description:{story:"Un campo de entrada para correo electrónico. Proporciona validación básica del navegador y sugiere correos electrónicos."},source:{code:D.trim()}}}},v={render:()=>{const[t,o]=n.useState("micontraseña");return e.jsxs(s,{sx:{width:300},children:[e.jsx(r,{label:"Contraseña",type:"password",value:t.toString(),onChange:a=>o(a.toString())}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t]})]})},parameters:{docs:{description:{story:"Un campo de entrada de contraseña. Oculta los caracteres a medida que se escriben."},source:{code:R.trim()}}}},h={render:()=>{const[t,o]=n.useState("");return e.jsxs(s,{sx:{width:300},children:[e.jsx(r,{label:"Búsqueda",placeholder:"Escribe tu término de búsqueda...",value:t.toString(),onChange:a=>o(a.toString())}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t||"Vacío"]})]})},parameters:{docs:{description:{story:"Un campo de entrada con un texto de marcador de posición visible cuando el campo está vacío."},source:{code:M.trim()}}}},b={render:()=>{const[t,o]=n.useState("invalido"),a=t.length<5&&t.length>0;return e.jsxs(s,{sx:{width:300},children:[e.jsx(r,{label:"Nombre de usuario",value:t.toString(),onChange:u=>o(u.toString()),error:a,helperText:a?"Mínimo 5 caracteres":""}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t]})]})},parameters:{docs:{description:{story:"Un campo de entrada que muestra un estado de error y un texto de ayuda cuando la validación falla."},source:{code:q.trim()}}}},S={render:()=>{const[t,o]=n.useState("Campo deshabilitado");return e.jsxs(s,{sx:{width:300},children:[e.jsx(r,{label:"Estado",value:t.toString(),onChange:a=>o(a.toString()),disabled:!0}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t]})]})},parameters:{docs:{story:"Un campo de entrada deshabilitado, lo que impide la interacción del usuario."},source:{code:F.trim()}}},y={render:()=>{const[t,o]=n.useState("Valor de solo lectura");return e.jsxs(s,{sx:{width:300},children:[e.jsx(r,{label:"Información",value:t.toString(),onChange:a=>o(a.toString()),readOnly:!0}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t]})]})},parameters:{docs:{story:"Un campo de entrada de solo lectura, el usuario puede ver el valor pero no modificarlo."},source:{code:P.trim()}}},f={render:()=>{const[t,o]=n.useState("Outlined"),[a,u]=n.useState("Filled"),[l,p]=n.useState("Standard");return e.jsxs(s,{sx:{display:"flex",flexDirection:"column",gap:3,width:300},children:[e.jsx(r,{label:"Esquema Outlined",value:t.toString(),onChange:i=>o(i.toString()),variant:"outlined"}),e.jsx(r,{label:"Esquema Filled",value:a.toString(),onChange:i=>u(i.toString()),variant:"filled"}),e.jsx(r,{label:"Esquema Standard",value:l.toString(),onChange:i=>p(i.toString()),variant:"standard"})]})},parameters:{docs:{story:"Demuestra las diferentes variantes de diseño: `outlined`, `filled` y `standard`."},source:{code:U.trim()}}},I={render:()=>{const[t,o]=n.useState("Tamaño Mediano"),[a,u]=n.useState("Tamaño Pequeño");return e.jsxs(s,{sx:{display:"flex",flexDirection:"column",gap:3,width:300},children:[e.jsx(r,{label:"Input Mediano",value:t.toString(),onChange:l=>o(l.toString()),size:"medium"}),e.jsx(r,{label:"Input Pequeño",value:a.toString(),onChange:l=>u(l.toString()),size:"small"})]})},parameters:{docs:{story:"Demuestra los diferentes tamaños del campo de entrada: `medium` (por defecto) y `small`."},source:{code:W.trim()}}},V={render:()=>{const[t,o]=n.useState("Ocupa todo el ancho");return e.jsxs(s,{sx:{width:"100%"},children:[e.jsx(r,{label:"Input de Ancho Completo",value:t.toString(),onChange:a=>o(a.toString()),fullWidth:!0}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t]})]})},parameters:{docs:{story:"Un campo de entrada que ocupa todo el ancho disponible de su contenedor."},source:{code:A.trim()}}},C={render:()=>{const[t,o]=n.useState("Ocupa todo el ancho");return e.jsxs(s,{sx:{width:"100%"},children:[e.jsx(r,{value:t.toString(),variant:"standard",onChange:a=>o(a.toString()),fullWidth:!0}),e.jsxs(d,{sx:{mt:2},children:["Valor actual: ",t]})]})},parameters:{docs:{story:"Un campo de entrada que ocupa todo el ancho disponible de su contenedor."}}},B={render:()=>{const[t,o]=n.useState("Outside (default)"),[a,u]=n.useState("Floating");return e.jsxs(s,{sx:{display:"flex",flexDirection:"column",gap:3,width:300},children:[e.jsx(r,{label:"Label outside",value:t.toString(),onChange:l=>o(l.toString()),labelPosition:"outside"}),e.jsx(r,{label:"Label floating (MUI clásico)",value:a.toString(),onChange:l=>u(l.toString()),labelPosition:"floating"})]})},parameters:{docs:{description:{story:"Compara `labelPosition='outside'` (default, label arriba del input) vs `labelPosition='floating'` (label flotante clásico de MUI dentro del notched outline)."},source:{code:L.trim()}}}},T={render:()=>{const[t,o]=n.useState("Sin radius"),[a,u]=n.useState("Radius 4px"),[l,p]=n.useState("Radius 10px (default)"),[i,O]=n.useState("Radius 24px (pill)");return e.jsxs(s,{sx:{display:"flex",flexDirection:"column",gap:3,width:300},children:[e.jsx(r,{label:"borderRadius={0}",value:t,onChange:c=>o(c.toString()),borderRadius:0}),e.jsx(r,{label:"borderRadius={4}",value:a,onChange:c=>u(c.toString()),borderRadius:4}),e.jsx(r,{label:"borderRadius={10} (default)",value:l,onChange:c=>p(c.toString())}),e.jsx(r,{label:"borderRadius={24}",value:i,onChange:c=>O(c.toString()),borderRadius:24})]})},parameters:{docs:{description:{story:"El prop `borderRadius` acepta un número (px) o un string CSS. Override directo del default `10`."},source:{code:z.trim()}}}},j={render:()=>{const[t,o]=n.useState("Fondo gris claro"),[a,u]=n.useState("Borde rojo"),[l,p]=n.useState("Custom completo");return e.jsxs(s,{sx:{display:"flex",flexDirection:"column",gap:3,width:300},children:[e.jsx(r,{label:"Override de background",value:t,onChange:i=>o(i.toString()),sx:{"& .MuiOutlinedInput-root":{bgcolor:"#f5f5f5"}}}),e.jsx(r,{label:"Override de borderColor",value:a,onChange:i=>u(i.toString()),sx:{"& .MuiOutlinedInput-notchedOutline":{borderColor:"red"}}}),e.jsx(r,{label:"Combinado: bg + borderColor + label color",value:l,onChange:i=>p(i.toString()),sx:{"& .MuiInputLabel-root":{color:"primary.main"},"& .MuiOutlinedInput-root":{bgcolor:"#fff7e6"},"& .MuiOutlinedInput-notchedOutline":{borderColor:"warning.main",borderWidth:2}}})]})},parameters:{docs:{description:{story:"Demuestra que el prop `sx` se mergea al final y siempre gana sobre los defaults internos. Antes esto no funcionaba por culpa del `styled()` interno."},source:{code:N.trim()}}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState('Texto de ejemplo');
-    return <Box sx={{
-      width: 300
-    }}>
-        <Input label="Nombre" value={value} onChange={value => setValue(value.toString())} />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada de texto básico con una etiqueta."
-      },
-      source: {
-        code: BasicTextInputDefinition.trim()
-      }
-    }
-  }
-}`,...m.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState(123);
-    return <Box sx={{
-      width: 300
-    }}>
-        <Input label="Cantidad" type="number" value={value.toString()} onChange={value => setValue(Number(value))} />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada numérico. Permite solo números y controla el teclado numérico en dispositivos móviles."
-      },
-      source: {
-        code: NumberInputDefinition.trim()
-      }
-    }
-  }
-}`,...x.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState('ejemplo@dominio.com');
-    return <Box sx={{
-      width: 300
-    }}>
-        <Input label="Correo Electrónico" type="email" value={value.toString()} onChange={value => setValue(value.toString())} />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada para correo electrónico. Proporciona validación básica del navegador y sugiere correos electrónicos."
-      },
-      source: {
-        code: EmailInputDefinition.trim()
-      }
-    }
-  }
-}`,...g.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState('micontraseña');
-    return <Box sx={{
-      width: 300
-    }}>
-        <Input label="Contraseña" type="password" value={value.toString()} onChange={value => setValue(value.toString())} />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada de contraseña. Oculta los caracteres a medida que se escriben."
-      },
-      source: {
-        code: PasswordInputDefinition.trim()
-      }
-    }
-  }
-}`,...v.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState('');
-    return <Box sx={{
-      width: 300
-    }}>
-        <Input label="Búsqueda" placeholder="Escribe tu término de búsqueda..." value={value.toString()} onChange={value => setValue(value.toString())} />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value || 'Vacío'}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada con un texto de marcador de posición visible cuando el campo está vacío."
-      },
-      source: {
-        code: InputWithPlaceholderDefinition.trim()
-      }
-    }
-  }
-}`,...h.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState('invalido');
-    // Lógica simple de error para la demostración
-    const hasError = value.length < 5 && value.length > 0;
-    return <Box sx={{
-      width: 300
-    }}>
-        <Input label="Nombre de usuario" value={value.toString()} onChange={value => setValue(value.toString())} error={hasError} helperText={hasError ? 'Mínimo 5 caracteres' : ''} />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada que muestra un estado de error y un texto de ayuda cuando la validación falla."
-      },
-      source: {
-        code: InputWithErrorDefinition.trim()
-      }
-    }
-  }
-}`,...b.parameters?.docs?.source}}};S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState('Campo deshabilitado');
-    return <Box sx={{
-      width: 300
-    }}>
-        <Input label="Estado" value={value.toString()} onChange={value => setValue(value.toString())} disabled />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      story: "Un campo de entrada deshabilitado, lo que impide la interacción del usuario."
-    },
-    source: {
-      code: DisabledInputDefinition.trim()
-    }
-  }
-}`,...S.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState('Valor de solo lectura');
-    return <Box sx={{
-      width: 300
-    }}>
-        <Input label="Información" value={value.toString()} onChange={value => setValue(value.toString())} readOnly />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      story: "Un campo de entrada de solo lectura, el usuario puede ver el valor pero no modificarlo."
-    },
-    source: {
-      code: ReadOnlyInputDefinition.trim()
-    }
-  }
-}`,...y.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [valueOutlined, setValueOutlined] = useState('Outlined');
-    const [valueFilled, setValueFilled] = useState('Filled');
-    const [valueStandard, setValueStandard] = useState('Standard');
-    return <Box sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 3,
-      width: 300
-    }}>
-        <Input label="Esquema Outlined" value={valueOutlined.toString()} onChange={value => setValueOutlined(value.toString())} variant="outlined" />
-        <Input label="Esquema Filled" value={valueFilled.toString()} onChange={value => setValueFilled(value.toString())} variant="filled" />
-        <Input label="Esquema Standard" value={valueStandard.toString()} onChange={value => setValueStandard(value.toString())} variant="standard" />
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      story: "Demuestra las diferentes variantes de diseño: \`outlined\`, \`filled\` y \`standard\`."
-    },
-    source: {
-      code: InputVariantsDefinition.trim()
-    }
-  }
-}`,...f.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [valueMedium, setValueMedium] = useState('Tamaño Mediano');
-    const [valueSmall, setValueSmall] = useState('Tamaño Pequeño');
-    return <Box sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 3,
-      width: 300
-    }}>
-        <Input label="Input Mediano" value={valueMedium.toString()} onChange={value => setValueMedium(value.toString())} size="medium" />
-        <Input label="Input Pequeño" value={valueSmall.toString()} onChange={value => setValueSmall(value.toString())} size="small" />
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      story: "Demuestra los diferentes tamaños del campo de entrada: \`medium\` (por defecto) y \`small\`."
-    },
-    source: {
-      code: InputSizesDefinition.trim()
-    }
-  }
-}`,...I.parameters?.docs?.source}}};V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState('Ocupa todo el ancho');
-    return <Box sx={{
-      width: '100%'
-    }}>
-        <Input label="Input de Ancho Completo" value={value.toString()} onChange={value => setValue(value.toString())} fullWidth />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      story: "Un campo de entrada que ocupa todo el ancho disponible de su contenedor."
-    },
-    source: {
-      code: FullWidthInputDefinition.trim()
-    }
-  }
-}`,...V.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [value, setValue] = useState('Ocupa todo el ancho');
-    return <Box sx={{
-      width: '100%'
-    }}>
-        <Input value={value.toString()} variant='standard' onChange={value => setValue(value.toString())} fullWidth />
-        <Typography sx={{
-        mt: 2
-      }}>Valor actual: {value}</Typography>
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      story: "Un campo de entrada que ocupa todo el ancho disponible de su contenedor."
-    }
-  }
-}`,...C.parameters?.docs?.source}}};B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [valueOutside, setValueOutside] = useState('Outside (default)');
-    const [valueFloating, setValueFloating] = useState('Floating');
-    return <Box sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 3,
-      width: 300
-    }}>
-        <Input label="Label outside" value={valueOutside.toString()} onChange={value => setValueOutside(value.toString())} labelPosition="outside" />
-        <Input label="Label floating (MUI clásico)" value={valueFloating.toString()} onChange={value => setValueFloating(value.toString())} labelPosition="floating" />
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Compara \`labelPosition='outside'\` (default, label arriba del input) vs \`labelPosition='floating'\` (label flotante clásico de MUI dentro del notched outline)."
-      },
-      source: {
-        code: LabelPositionFloatingDefinition.trim()
-      }
-    }
-  }
-}`,...B.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [v0, setV0] = useState('Sin radius');
-    const [v4, setV4] = useState('Radius 4px');
-    const [v10, setV10] = useState('Radius 10px (default)');
-    const [v24, setV24] = useState('Radius 24px (pill)');
-    return <Box sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 3,
-      width: 300
-    }}>
-        <Input label="borderRadius={0}" value={v0} onChange={v => setV0(v.toString())} borderRadius={0} />
-        <Input label="borderRadius={4}" value={v4} onChange={v => setV4(v.toString())} borderRadius={4} />
-        <Input label="borderRadius={10} (default)" value={v10} onChange={v => setV10(v.toString())} />
-        <Input label="borderRadius={24}" value={v24} onChange={v => setV24(v.toString())} borderRadius={24} />
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "El prop \`borderRadius\` acepta un número (px) o un string CSS. Override directo del default \`10\`."
-      },
-      source: {
-        code: CustomBorderRadiusDefinition.trim()
-      }
-    }
-  }
-}`,...T.parameters?.docs?.source}}};j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const [bg, setBg] = useState('Fondo gris claro');
-    const [color, setColor] = useState('Borde rojo');
-    const [combined, setCombined] = useState('Custom completo');
-    return <Box sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 3,
-      width: 300
-    }}>
-        <Input label="Override de background" value={bg} onChange={v => setBg(v.toString())} sx={{
-        '& .MuiOutlinedInput-root': {
-          bgcolor: '#f5f5f5'
-        }
-      }} />
-        <Input label="Override de borderColor" value={color} onChange={v => setColor(v.toString())} sx={{
-        '& .MuiOutlinedInput-notchedOutline': {
-          borderColor: 'red'
-        }
-      }} />
-        <Input label="Combinado: bg + borderColor + label color" value={combined} onChange={v => setCombined(v.toString())} sx={{
-        '& .MuiInputLabel-root': {
-          color: 'primary.main'
-        },
-        '& .MuiOutlinedInput-root': {
-          bgcolor: '#fff7e6'
-        },
-        '& .MuiOutlinedInput-notchedOutline': {
-          borderColor: 'warning.main',
-          borderWidth: 2
-        }
-      }} />
-      </Box>;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Demuestra que el prop \`sx\` se mergea al final y siempre gana sobre los defaults internos. Antes esto no funcionaba por culpa del \`styled()\` interno."
-      },
-      source: {
-        code: CustomStylingDefinition.trim()
-      }
-    }
-  }
-}`,...j.parameters?.docs?.source}}};const Te=["BasicTextInput","NumberInput","EmailInput","PasswordInput","InputWithPlaceholder","InputWithError","DisabledInput","ReadOnlyInput","InputVariants","InputSizes","FullWidthInput","StandardVariant","LabelPositionFloating","CustomBorderRadius","CustomStyling"];export{m as BasicTextInput,T as CustomBorderRadius,j as CustomStyling,S as DisabledInput,g as EmailInput,V as FullWidthInput,I as InputSizes,f as InputVariants,b as InputWithError,h as InputWithPlaceholder,B as LabelPositionFloating,x as NumberInput,v as PasswordInput,y as ReadOnlyInput,C as StandardVariant,Te as __namedExportsOrder,Be as default};