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

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

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