@soyfri/shared-library 2.0.0-beta.1 → 2.0.0-beta.10

package/storybook-static/assets/Select.stories-DU1Gb3I2.js

@@ -0,0 +1,1103 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{r as i}from"./iframe-BAJnc_4n.js";import{S as s,O as D}from"./Select-CjcuMAY0.js";import{B as l}from"./Box-BnhEcfFm.js";import{T as r}from"./Typography-BgntX2Ep.js";import{A as R}from"./Avatar-NbFfkZws.js";import{C as W}from"./Chip-C3vKPpzR.js";import"./preload-helper-PPVm8Dsz.js";import"./formField.sx-DMCmZIAa.js";import"./resolvePreset-CN2aOJJr.js";import"./Clear-4kYcKvT3.js";import"./DefaultPropsProvider-BGoQxtDa.js";import"./createSvgIcon-D_Gca4vA.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"./useTheme-BmOJK7ra.js";import"./extendSxProp-CEpa30hT.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"./createSimplePaletteValueFilter-bm0fmN_7.js";import"./isMuiElement-CTZSFcY5.js";import"./MenuItem-iU6tAqJI.js";import"./ButtonBase-qyaMEhe4.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./isFocusVisible-B8k4qzLc.js";import"./listItemTextClasses-CC_rwJam.js";import"./ListItemIcon-hca6xN79.js";import"./CircularProgress-DC7ZNWwl.js";const L=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography } from '@mui/material';
+
+const basicOptions = [
+    { value: '10', label: '10' },
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+];
+
+export const SimpleSelectExample = () => {
+    const [value, setValue] = useState<string>('25');
+    return (
+        <Box sx={{ width: 200 }}>
+            <Select
+                label="Registros por página"
+                options={basicOptions}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+                maxWidth={150}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+        </Box>
+    );
+};
+`,I=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography } from '@mui/material';
+
+export const MultiSelectExample = () => {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+        <Box sx={{ width: 400 }}>
+            <Select
+                label="Seleccionar estados"
+                multiple
+                maxChipsToShow={2}
+                options={[
+                    { value: 'pending', label: 'Pendiente' },
+                    { value: 'approved', label: 'Aprobado' },
+                    { value: 'rejected', label: 'Rechazado' },
+                    { value: 'canceled', label: 'Cancelado' },
+                    { value: 'completed', label: 'Completado' },
+                    { value: 'invoiced', label: 'Facturado' },
+                ]}
+                value={value}
+                onChange={(val) => setValue(val as string[])}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+        </Box>
+    );
+};
+`,z=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography } from '@mui/material';
+
+const basicOptions = [
+    { value: '10', label: '10' },
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+];
+
+export const WithPlaceholderExample = () => {
+    const [value, setValue] = useState('');
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                label="Seleccione una opción"
+                options={basicOptions}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+                placeholder="Ninguna opción seleccionada"
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+        </Box>
+    );
+};
+`,U=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography } from '@mui/material';
+
+const groupedOptions = [
+    { value: 'gt', label: 'Guatemala', group: 'Centroamérica' },
+    { value: 'sv', label: 'El Salvador', group: 'Centroamérica' },
+    { value: 'mx', label: 'México', group: 'Norteamérica' },
+    { value: 'us', label: 'EE.UU.', group: 'Norteamérica' },
+];
+
+export const WithFilterExample = () => {
+    const [value, setValue] = useState('');
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                label="Buscar país"
+                filterable
+                options={groupedOptions}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+        </Box>
+    );
+};
+`,q=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography } from '@mui/material';
+
+const groupedOptions = [
+    { value: 'gt', label: 'Guatemala', group: 'Centroamérica' },
+    { value: 'sv', label: 'El Salvador', group: 'Centroamérica' },
+    { value: 'mx', label: 'México', group: 'Norteamérica' },
+    { value: 'us', label: 'EE.UU.', group: 'Norteamérica' },
+];
+
+export const WithGroupExample = () => {
+    const [value, setValue] = useState('');
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                label="País por región"
+                options={groupedOptions}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+        </Box>
+    );
+};
+`,G=`
+import React, { useState } from 'react';
+import { Select, Option } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Avatar, Box, Typography } from '@mui/material';
+
+const userOptions = [
+    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },
+    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },
+];
+
+export const CustomRenderWithAvatarExample = () => {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                options={userOptions}
+                multiple
+                value={value}
+                onChange={(val) => setValue(val as string[])}
+                label="Usuarios"
+                placeholder="Selecciona usuarios"
+            >
+                <Option>
+                    {({ img, label }) => (
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <Avatar src={img} sx={{ width: 24, height: 24 }} />
+                            <Typography variant="body2">{label}</Typography>
+                        </Box>
+                    )}
+                </Option>
+            </Select>
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+        </Box>
+    );
+};
+`,F=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography, Chip } from '@mui/material';
+
+const transactionStatuses = [
+    { value: 'PENDING', label: 'Pendiente' },
+    { value: 'REJECTED', label: 'Rechazado' },
+    { value: 'CANCELED', label: 'Cancelado' },
+    { value: 'REFUNDED', label: 'Reembolsado' },
+    { value: 'COMPLETED', label: 'Completado' },
+    { value: 'EXPIRED', label: 'Expirado' },
+];
+
+export const MultiSelectCustomChipRenderExample = () => {
+    const [value, setValue] = useState<string[]>(['pending', 'approved', 'rejected', 'canceled']);
+    return (
+        <Box sx={{ width: 400 }}>
+            <Select
+                label="Estados de Transacción"
+                multiple
+                maxChipsToShow={3}
+                options={transactionStatuses}
+                value={value}
+                onChange={(val) => setValue(val as string[])}
+                placeholder="Selecciona estados"
+                renderChipLabel={(item) => (
+                  <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                    {item.label.charAt(0).toUpperCase()}
+                  </Typography>
+                )}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+        </Box>
+    );
+};
+`,J=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Avatar, Box, Typography } from '@mui/material';
+
+const groupedOptions = [
+    { value: 'gt', label: 'Guatemala', group: 'Centroamérica' },
+    { value: 'sv', label: 'El Salvador', group: 'Centroamérica' },
+    { value: 'mx', label: 'México', group: 'Norteamérica' },
+    { value: 'us', label: 'EE.UU.', group: 'Norteamérica' },
+    { value: 'ca', label: 'Canadá', group: 'Norteamérica' },
+    { value: 'br', label: 'Brasil', group: 'Sudamérica' },
+    { value: 'ar', label: 'Argentina', group: 'Sudamérica' },
+];
+
+export const MultiSelectCustomChipRenderFullLabelExample = () => {
+    const [value, setValue] = useState<string[]>(['gt', 'mx', 'us', 'ca', 'br']);
+    return (
+        <Box sx={{ width: 400 }}>
+            <Select
+                label="Países seleccionados"
+                multiple
+                maxChipsToShow={3}
+                options={groupedOptions}
+                value={value}
+                onChange={(val) => setValue(val as string[])}
+                placeholder="Selecciona países"
+                renderChipLabel={(item) => (
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                        {item.img && <Avatar src={item.img} sx={{ width: 18, height: 18 }} />}
+                        <Typography variant="caption" sx={{ fontWeight: 'medium' }}>
+                            {item.label}
+                        </Typography>
+                    </Box>
+                )}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+        </Box>
+    );
+};
+`,k=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography } from '@mui/material';
+
+const optionsWithManyItems = [
+  { value: 'gt', label: 'Guatemala' }, { value: 'sv', label: 'El Salvador' },
+  { value: 'mx', label: 'México' }, { value: 'us', label: 'EE.UU.' },
+  { value: 'ca', label: 'Canadá' }, { value: 'br', label: 'Brasil' },
+  { value: 'ar', label: 'Argentina' }, { value: 'cl', label: 'Chile' },
+  { value: 'co', label: 'Colombia' }, { value: 'pe', label: 'Perú' },
+  { value: 'ec', label: 'Ecuador' }, { value: 've', label: 'Venezuela' },
+  { value: 'py', label: 'Paraguay' }, { value: 'uy', label: 'Uruguay' },
+  { value: 'bo', label: 'Bolivia' }, { value: 'cr', label: 'Costa Rica' },
+  { value: 'pa', label: 'Panamá' }, { value: 'hn', label: 'Honduras' },
+  { value: 'ni', label: 'Nicaragua' }, { value: 'do', label: 'Rep. Dominicana' },
+  { value: 'cu', label: 'Cuba' }, { value: 'pr', label: 'Puerto Rico' },
+  { value: 'es', label: 'España' }, { value: 'fr', label: 'Francia' },
+  { value: 'de', label: 'Alemania' }, { value: 'it', label: 'Italia' },
+];
+
+export const ConstrainedHeightExample = () => {
+    const [value, setValue] = useState('');
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                label="Opciones (Altura Limitada)"
+                options={optionsWithManyItems}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+                maxHeight={150}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+        </Box>
+    );
+};
+`,H=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography } from '@mui/material';
+
+const basicOptions = [
+    { value: '10', label: '10' },
+    { value: '25', label: '25' },
+];
+const groupedOptions = [
+    { value: 'gt', label: 'Guatemala', group: 'Centroamérica' },
+    { value: 'sv', label: 'El Salvador', group: 'Centroamérica' },
+];
+
+export const ConstrainedWidthExample = () => {
+    const [value, setValue] = useState('');
+    return (
+        <Box sx={{ width: 200 }}>
+            <Select
+                label="Opciones (Ancho Limitado)"
+                options={basicOptions.concat(groupedOptions)}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+                maxWidth={100}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+        </Box>
+    );
+};
+`,$=`
+import React, { useState } from 'react';
+import { Select, Option } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Avatar, Box, Typography, Chip } from '@mui/material';
+
+const allOptions = [
+    { value: 'gt', label: 'Guatemala', group: 'Centroamérica' },
+    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },
+    { value: 'PENDING', label: 'Pendiente' },
+    { value: 'ca', label: 'Canadá', group: 'Norteamérica' },
+    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },
+    { value: 'COMPLETED', label: 'Completado' },
+];
+
+export const AllFeaturesCombinedExample = () => {
+    const [value, setValue] = useState<string[]>(['gt', 'admin', 'PENDING', 'ca', 'user', 'COMPLETED']);
+    return (
+        <Box sx={{ width: 500 }}>
+            <Select
+                label="Selección Completa"
+                multiple
+                filterable
+                maxChipsToShow={3}
+                maxHeight={250}
+                maxWidth="400px"
+                options={allOptions}
+                value={value}
+                onChange={(val) => setValue(val as string[])}
+                placeholder="Busca y selecciona todo tipo de elementos"
+                renderChipLabel={(item) => (
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                        {item.img && <Avatar src={item.img} sx={{ width: 16, height: 16 }} />}
+                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                            {item.label.length > 10 ? item.label.substring(0, 7) + '...' : item.label}
+                        </Typography>
+                    </Box>
+                )}
+            >
+                <Option>
+                    {(item) => (
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, my: 0.5 }}>
+                            {item.img && <Avatar src={item.img} sx={{ width: 28, height: 28 }} />}
+                            <Box>
+                                <Typography variant="body2" fontWeight="medium">{item.label}</Typography>
+                                {item.group && (
+                                    <Typography variant="caption" color="text.secondary">
+                                        Grupo: {item.group}
+                                    </Typography>
+                                )}
+                                {item.disabled && <Chip label="No disponible" size="small" color="warning" sx={{ ml: 1 }} />}
+                            </Box>
+                        </Box>
+                    )}
+                </Option>
+            </Select>
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+        </Box>
+    );
+};
+`,_=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography } from '@mui/material';
+
+export const EmptyOptionsExample = () => {
+    const [value, setValue] = useState(null);
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                label="Seleccionar (Vacío)"
+                options={[]}
+                value={value}
+                onChange={setValue}
+                placeholder="No hay opciones disponibles"
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+        </Box>
+    );
+};
+`,X=`
+import React, { useState } from 'react';
+import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
+import { Box, Typography } from '@mui/material';
+
+const manyOptions = Array.from({ length: 50 }, (_, i) => ({
+    value: \`option-\${i}\`,
+    label: \`Opción \${i + 1}\`,
+    group: i < 25 ? 'Grupo A' : 'Grupo B',
+}));
+
+export const SelectWithManyOptionsExample = () => {
+    const [value, setValue] = useState('');
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                label="Muchas Opciones"
+                options={manyOptions}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+                filterable
+                maxHeight={200}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+        </Box>
+    );
+};
+`,K=`
+import React, { useState } from 'react';
+import { Select } from './Select';
+import { Box, Typography } from '@mui/material';
+
+const basicOptions = [
+    { value: '10', label: '10' },
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+];
+
+export const LabelPositionFloatingExample = () => {
+    const [value, setValue] = useState('');
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                label="Label flotante (MUI nativo)"
+                options={basicOptions}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+                labelPosition="floating"
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+        </Box>
+    );
+};
+`,Q=`
+import React, { useState } from 'react';
+import { Select } from './Select';
+import { Box } from '@mui/material';
+
+const basicOptions = [
+    { value: '10', label: '10' },
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+];
+
+export const CustomBorderRadiusExample = () => {
+    const [valueA, setValueA] = useState('25');
+    const [valueB, setValueB] = useState('25');
+    const [valueC, setValueC] = useState('25');
+    return (
+        <Box sx={{ width: 300, display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Select
+                label="Sin border radius"
+                options={basicOptions}
+                value={valueA}
+                onChange={(val) => setValueA(val as string)}
+                borderRadius={0}
+            />
+            <Select
+                label="Border radius estándar"
+                options={basicOptions}
+                value={valueB}
+                onChange={(val) => setValueB(val as string)}
+                borderRadius={10}
+            />
+            <Select
+                label="Pill-shaped"
+                options={basicOptions}
+                value={valueC}
+                onChange={(val) => setValueC(val as string)}
+                borderRadius={999}
+            />
+        </Box>
+    );
+};
+`,Y=`
+import React, { useState } from 'react';
+import { Select } from './Select';
+import { Box, Typography } from '@mui/material';
+
+const userOptions = [
+    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },
+    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },
+    { value: 'moderator', label: 'Moderador', img: 'https://placehold.co/40x40?text=M' },
+];
+
+export const CustomStylingExample = () => {
+    const [value, setValue] = useState<string[]>(['admin']);
+    return (
+        <Box sx={{ width: 360 }}>
+            <Select
+                label="Select con estilos personalizados"
+                options={userOptions}
+                multiple
+                value={value}
+                onChange={(val) => setValue(val as string[])}
+                placeholder="Selecciona usuarios"
+                sx={{
+                    '& .MuiInputBase-root': {
+                        backgroundColor: 'action.hover',
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: 'primary.main',
+                        borderWidth: '2px',
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                        borderColor: 'primary.dark',
+                    },
+                }}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+        </Box>
+    );
+};
+`,Z=`
+import React, { useState } from 'react';
+import { Select } from './Select';
+import { Box, Typography } from '@mui/material';
+
+const mockAsyncOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'grape', label: 'Grape' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'blueberry', label: 'Blueberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+
+// Simulate an API call
+const simulatedLoadOptions = (inputValue: string): Promise<any[]> => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            const filtered = mockAsyncOptions.filter(option =>
+                option.label.toLowerCase().includes(inputValue.toLowerCase())
+            );
+            resolve(filtered);
+        }, 800); // Simulate network delay
+    });
+};
+
+export const AsyncSelectExample = () => {
+    const [value, setValue] = useState('');
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                label="Buscar Frutas"
+                loadOptions={simulatedLoadOptions}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+                placeholder="Escribe para buscar..."
+                loadingMessage="Buscando frutas..."
+                noOptionsMessage="No se encontraron frutas."
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+        </Box>
+    );
+};
+`,u=[{value:"10",label:"10"},{value:"25",label:"25"},{value:"50",label:"50"},{value:"100",label:"100"}],d=[{value:"gt",label:"Guatemala",group:"Centroamérica"},{value:"sv",label:"El Salvador",group:"Centroamérica"},{value:"mx",label:"México",group:"Norteamérica"},{value:"us",label:"EE.UU.",group:"Norteamérica"},{value:"ca",label:"Canadá",group:"Norteamérica"},{value:"br",label:"Brasil",group:"Sudamérica"},{value:"ar",label:"Argentina",group:"Sudamérica"}],j=[{value:"admin",label:"Administrador",img:"https://placehold.co/40x40?text=A"},{value:"user",label:"Usuario",img:"https://placehold.co/40x40?text=U"},{value:"moderator",label:"Moderador",img:"https://placehold.co/40x40?text=M"},{value:"guest",label:"Invitado",img:"https://placehold.co/40x40?text=G",disabled:!0}],M=[{value:"PENDING",label:"Pendiente"},{value:"REJECTED",label:"Rechazado"},{value:"CANCELED",label:"Cancelado"},{value:"REFUNDED",label:"Reembolsado"},{value:"COMPLETED",label:"Completado"},{value:"EXPIRED",label:"Expirado"}],ke={title:"Components/Select",component:s,tags:["autodocs"],parameters:{layout:"padded",docs:{description:{component:"Componente select personalizado con soporte para múltiples variantes como agrupación, chips, filtros, y renderizado personalizado."}}},argTypes:{label:{control:"text",description:"Etiqueta para el campo de selección."},options:{control:"object",description:"Array de objetos `SelectOption` para las opciones del menú."},value:{control:"object",description:"Valor(es) seleccionado(s) del select."},defaultValue:{control:"object",description:"Valor(es) por defecto del select."},onChange:{action:"changed",description:"Función de callback que se llama cuando el valor del select cambia."},size:{control:"radio",options:["small","medium"],description:"Define el tamaño del componente Select."},multiple:{control:"boolean",description:"Si es verdadero, permite la selección de múltiples opciones."},filterable:{control:"boolean",description:"Si es verdadero, añade un campo de búsqueda para filtrar las opciones."},placeholder:{control:"text",description:"Texto que se muestra cuando no hay nada seleccionado."},children:{control:!1,description:"Componente `Option` para un renderizado personalizado de las opciones del menú."},maxHeight:{control:"number",description:"Altura máxima del menú desplegable."},maxWidth:{control:"text",description:"Ancho máximo del menú desplegable."},maxChipsToShow:{control:"number",description:"Número máximo de chips a mostrar en selección múltiple antes de agrupar.",if:{arg:"multiple",eq:!0}},renderChipLabel:{control:!1,description:"Función para personalizar el contenido del label de cada chip seleccionado (para múltiple) o del valor mostrado (para individual)."},labelPosition:{control:"radio",options:["outside","floating"],description:"Posición del label. `outside` mantiene el label por encima del input con animación al enfocar. `floating` usa el comportamiento nativo de MUI (label flotando dentro del notched outline)."},borderRadius:{control:"number",description:"Radio del borde del select. Acepta un número (en px) o un string CSS."},sx:{control:!1,description:"Prop `sx` que se pasa al MUI Select para overrides personalizados. Se mergea con los estilos por defecto."}}},m={render:()=>{const[o,t]=i.useState("25");return e.jsxs(l,{sx:{width:200},children:[e.jsx(s,{label:"Registros por página",options:u,value:o,onChange:a=>t(a),maxWidth:150}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",o]})]})},parameters:{docs:{description:{story:"Select simple con opciones básicas y valor por defecto."},source:{code:L.trim()}}}},h={render:()=>{const[o,t]=i.useState([]);return e.jsxs(l,{sx:{width:400},children:[e.jsx(s,{label:"Seleccionar estados",multiple:!0,maxChipsToShow:2,options:[{value:"pending",label:"Pendiente"},{value:"approved",label:"Aprobado"},{value:"rejected",label:"Rechazado"},{value:"canceled",label:"Cancelado"},{value:"completed",label:"Completado"},{value:"invoiced",label:"Facturado"}],value:o,onChange:a=>t(a)}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",JSON.stringify(o)]})]})},parameters:{docs:{description:{story:"Select múltiple que permite seleccionar varias opciones, limitando a 2 chips."},source:{code:I.trim()}}}},g={render:()=>{const[o,t]=i.useState("");return e.jsxs(l,{sx:{width:300},children:[e.jsx(s,{label:"Seleccione una opción",options:u,value:o,onChange:a=>t(a),placeholder:"Ninguna opción seleccionada"}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",o||"Ninguno"]})]})},parameters:{docs:{description:{story:"Select con placeholder sin valor inicial seleccionado."},source:{code:z.trim()}}}},v={render:()=>{const[o,t]=i.useState("");return e.jsxs(l,{sx:{width:300},children:[e.jsx(s,{label:"Buscar país",filterable:!0,options:d,value:o,onChange:a=>t(a)}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",o]})]})},parameters:{docs:{description:{story:"Select con capacidad de filtrado de opciones."},source:{code:U.trim()}}}},x={render:()=>{const[o,t]=i.useState("");return e.jsxs(l,{sx:{width:300},children:[e.jsx(s,{label:"País por región",options:d,value:o,onChange:a=>t(a)}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",o]})]})},parameters:{docs:{description:{story:"Select con opciones agrupadas por categorías."},source:{code:q.trim()}}}},b={render:()=>{const[o,t]=i.useState([]);return e.jsxs(l,{sx:{width:300},children:[e.jsx(s,{options:j,multiple:!0,value:o,onChange:a=>t(a),label:"Usuarios",placeholder:"Selecciona usuarios",children:e.jsx(D,{children:({img:a,label:c})=>e.jsxs(l,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(R,{src:a,sx:{width:24,height:24}}),e.jsx(r,{variant:"body2",children:c})]})})}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",JSON.stringify(o)]})]})},parameters:{docs:{description:{story:"Select con renderizado personalizado de opciones usando avatares."},source:{code:G.trim()}}}},y={render:()=>{const[o,t]=i.useState(["pending","approved","rejected","canceled"]);return e.jsxs(l,{sx:{width:400},children:[e.jsx(s,{label:"Estados de Transacción",multiple:!0,maxChipsToShow:3,options:M,value:o,onChange:a=>t(a),placeholder:"Selecciona estados",renderChipLabel:a=>e.jsxs(r,{variant:"caption",sx:{fontWeight:"bold"},children:[a.label.charAt(0).toUpperCase()," "]})}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",JSON.stringify(o)]})]})},parameters:{docs:{description:{story:"Select múltiple con un número limitado de chips visibles y un renderizado personalizado para el label de cada chip (solo la inicial)."},source:{code:F.trim()}}}},S={render:()=>{const[o,t]=i.useState(["gt","mx","us","ca","br"]);return e.jsxs(l,{sx:{width:400},children:[e.jsx(s,{label:"Países seleccionados",multiple:!0,maxChipsToShow:3,options:d,value:o,onChange:a=>t(a),placeholder:"Selecciona países",renderChipLabel:a=>e.jsxs(l,{sx:{display:"flex",alignItems:"center",gap:.5},children:[a.img&&e.jsx(R,{src:a.img,sx:{width:18,height:18}})," ",e.jsx(r,{variant:"caption",sx:{fontWeight:"medium"},children:a.label})]})}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",JSON.stringify(o)]})]})},parameters:{docs:{story:"Select múltiple con renderizado personalizado completo de los chips, incluyendo avatar y texto completo, y limitando el número de chips visibles."},source:{code:J.trim()}}},f={render:()=>{const[o,t]=i.useState("");return e.jsxs(l,{sx:{width:300},children:[e.jsx(s,{label:"Opciones (Altura Limitada)",options:d.concat(j).concat(M),value:o,onChange:a=>t(a),maxHeight:150}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",o]})]})},parameters:{docs:{story:"Select con altura máxima limitada para el menú desplegable, mostrando scroll si es necesario."},source:{code:k.trim()}}},C={render:()=>{const[o,t]=i.useState("");return e.jsxs(l,{sx:{width:200},children:[" ",e.jsx(s,{label:"Opciones (Ancho Limitado)",options:u.concat(d),value:o,onChange:a=>t(a),maxWidth:100}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",o]})]})},parameters:{docs:{story:"Select con ancho máximo limitado para el menú desplegable."},source:{code:H.trim()}}},V={render:()=>{const[o,t]=i.useState(["gt","admin","PENDING","ca","user","COMPLETED"]);return e.jsxs(l,{sx:{width:500},children:[e.jsx(s,{label:"Selección Completa",multiple:!0,filterable:!0,maxChipsToShow:3,maxHeight:250,maxWidth:"400px",options:d.concat(j).concat(M),value:o,onChange:a=>t(a),placeholder:"Busca y selecciona todo tipo de elementos",renderChipLabel:a=>e.jsxs(l,{sx:{display:"flex",alignItems:"center",gap:.5},children:[a.img&&e.jsx(R,{src:a.img,sx:{width:16,height:16}}),e.jsx(r,{variant:"caption",sx:{fontWeight:"bold"},children:a.label.length>10?a.label.substring(0,7)+"...":a.label})]}),children:e.jsx(D,{children:a=>e.jsxs(l,{sx:{display:"flex",alignItems:"center",gap:1,my:.5},children:[a.img&&e.jsx(R,{src:a.img,sx:{width:28,height:28}}),e.jsxs(l,{children:[e.jsx(r,{variant:"body2",fontWeight:"medium",children:a.label}),a.group&&e.jsxs(r,{variant:"caption",color:"text.secondary",children:["Grupo: ",a.group]}),a.disabled&&e.jsx(W,{label:"No disponible",size:"small",color:"warning",sx:{ml:1}})]})]})})}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",JSON.stringify(o)]})]})},parameters:{docs:{description:{story:"Un `Select` que demuestra una combinación de todas las características: selección múltiple, filtrado, opciones agrupadas, renderizado personalizado de opciones y chips, y límites de altura/ancho."},source:{code:$.trim()}}}},B={args:{label:"Seleccionar (Vacío)",options:[],value:void 0,placeholder:"No hay opciones disponibles"},render:o=>{const[t,a]=i.useState(o.value);return e.jsxs(l,{sx:{width:300},children:[e.jsx(s,{...o,value:t??"",onChange:a}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",t||"Ninguno"]})]})},parameters:{docs:{story:"Select que se muestra cuando no hay opciones disponibles."},source:{code:_.trim()}}},O={render:()=>{const o=Array.from({length:50},(c,n)=>({value:`option-${n}`,label:`Opción ${n+1}`,group:n<25?"Grupo A":"Grupo B"})),[t,a]=i.useState("");return e.jsxs(l,{sx:{width:300},children:[e.jsx(s,{label:"Muchas Opciones",options:o,value:t,onChange:c=>a(c),filterable:!0,maxHeight:200}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",t]})]})},parameters:{docs:{story:"Select con un gran número de opciones para demostrar el scroll y el filtrado eficiente."},source:{code:X.trim()}}},T={render:()=>{const[o,t]=i.useState("");return e.jsxs(l,{sx:{width:300},children:[e.jsx(s,{label:"Label flotante (MUI nativo)",options:u,value:o,onChange:a=>t(a),labelPosition:"floating"}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",o||"Ninguno"]})]})},parameters:{docs:{description:{story:"Select con `labelPosition='floating'`, que usa el comportamiento nativo de MUI (label flotando dentro del notched outline al enfocar). Útil cuando se necesita el look estándar de Material UI."},source:{code:K.trim()}}}},w={render:()=>{const[o,t]=i.useState("25"),[a,c]=i.useState("25"),[n,N]=i.useState("25");return e.jsxs(l,{sx:{width:300,display:"flex",flexDirection:"column",gap:2},children:[e.jsx(s,{label:"Sin border radius",options:u,value:o,onChange:p=>t(p),borderRadius:0}),e.jsx(s,{label:"Border radius estándar",options:u,value:a,onChange:p=>c(p),borderRadius:10}),e.jsx(s,{label:"Pill-shaped",options:u,value:n,onChange:p=>N(p),borderRadius:999})]})},parameters:{docs:{description:{story:"Control del radio del borde mediante la prop `borderRadius`. Acepta un número (en px) o un string CSS como `'0.5rem'`."},source:{code:Q.trim()}}}},A={render:()=>{const[o,t]=i.useState(["admin"]);return e.jsxs(l,{sx:{width:360},children:[e.jsx(s,{label:"Select con estilos personalizados",options:j,multiple:!0,value:o,onChange:a=>t(a),placeholder:"Selecciona usuarios",sx:{"& .MuiInputBase-root":{backgroundColor:"action.hover"},"& .MuiOutlinedInput-notchedOutline":{borderColor:"primary.main",borderWidth:"2px"},"&:hover .MuiOutlinedInput-notchedOutline":{borderColor:"primary.dark"}}}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",JSON.stringify(o)]})]})},parameters:{docs:{description:{story:"Demuestra cómo el consumidor puede pasar un `sx` personalizado. El sx del consumidor se mergea sobre los defaults del componente, permitiendo overrides granulares (fondo, borde, hover, etc.) sin romper el comportamiento del label."},source:{code:Y.trim()}}}},E={render:()=>{const[o,t]=i.useState(""),a=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"orange",label:"Orange"},{value:"grape",label:"Grape"},{value:"strawberry",label:"Strawberry"},{value:"blueberry",label:"Blueberry"},{value:"pineapple",label:"Pineapple"},{value:"watermelon",label:"Watermelon"},{value:"kiwi",label:"Kiwi"},{value:"lemon",label:"Lemon"}],c=n=>new Promise(N=>{setTimeout(()=>{const p=a.filter(P=>P.label.toLowerCase().includes(n.toLowerCase()));N(p)},800)});return e.jsxs(l,{sx:{width:300},children:[e.jsx(s,{loadOptions:c,value:o,onChange:n=>t(n),placeholder:"Escribe para buscar...",loadingMessage:"Buscando frutas...",noOptionsMessage:"No se encontraron frutas.",debounceTimeout:500}),e.jsxs(r,{sx:{mt:2},children:["Valor seleccionado: ",o]})]})},parameters:{docs:{description:{story:"Un `Select` que carga opciones de forma asíncrona a medida que el usuario escribe, con un retraso simulado."},source:{code:Z.trim()}}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string>('25');
+    return <Box sx={{
+      width: 200
+    }}>
+                <Select label="Registros por página" options={basicOptions} value={value} onChange={val => setValue(val as string)} maxWidth={150} />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select simple con opciones básicas y valor por defecto."
+      },
+      source: {
+        code: SimpleSelectDefinition.trim()
+      } // Referencia a la definición
+    }
+  }
+}`,...m.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+    return <Box sx={{
+      width: 400
+    }}>
+                <Select label="Seleccionar estados" multiple maxChipsToShow={2} options={[{
+        value: 'pending',
+        label: 'Pendiente'
+      }, {
+        value: 'approved',
+        label: 'Aprobado'
+      }, {
+        value: 'rejected',
+        label: 'Rechazado'
+      }, {
+        value: 'canceled',
+        label: 'Cancelado'
+      }, {
+        value: 'completed',
+        label: 'Completado'
+      }, {
+        value: 'invoiced',
+        label: 'Facturado'
+      }]} value={value} onChange={val => setValue(val as string[])} />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select múltiple que permite seleccionar varias opciones, limitando a 2 chips."
+      },
+      source: {
+        code: MultiSelectDefinition.trim()
+      } // Referencia a la definición
+    }
+  }
+}`,...h.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState('');
+    return <Box sx={{
+      width: 300
+    }}>
+                <Select label="Seleccione una opción" options={basicOptions} value={value} onChange={val => setValue(val as string)} placeholder="Ninguna opción seleccionada" />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select con placeholder sin valor inicial seleccionado."
+      },
+      source: {
+        code: WithPlaceholderDefinition.trim()
+      } // Referencia a la definición
+    }
+  }
+}`,...g.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState('');
+    return <Box sx={{
+      width: 300
+    }}>
+                <Select label="Buscar país" filterable options={groupedOptions} value={value} onChange={val => setValue(val as string)} />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select con capacidad de filtrado de opciones."
+      },
+      source: {
+        code: WithFilterDefinition.trim()
+      } // Referencia a la definición
+    }
+  }
+}`,...v.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState('');
+    return <Box sx={{
+      width: 300
+    }}>
+                <Select label="País por región" options={groupedOptions} value={value} onChange={val => setValue(val as string)} />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select con opciones agrupadas por categorías."
+      },
+      source: {
+        code: WithGroupDefinition.trim()
+      } // Referencia a la definición
+    }
+  }
+}`,...x.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+    return <Box sx={{
+      width: 300
+    }}>
+                <Select options={userOptions} multiple value={value} onChange={val => setValue(val as string[])} label="Usuarios" placeholder="Selecciona usuarios">
+                    <Option>
+                        {({
+            img,
+            label
+          }) => <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1
+          }}>
+                                <Avatar src={img} sx={{
+              width: 24,
+              height: 24
+            }} />
+                                <Typography variant="body2">{label}</Typography>
+                            </Box>}
+                    </Option>
+                </Select>
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select con renderizado personalizado de opciones usando avatares."
+      },
+      source: {
+        code: CustomRenderWithAvatarDefinition.trim()
+      } // Referencia a la definición
+    }
+  }
+}`,...b.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>(['pending', 'approved', 'rejected', 'canceled']);
+    return <Box sx={{
+      width: 400
+    }}>
+                <Select label="Estados de Transacción" multiple maxChipsToShow={3} // Muestra 3 chips, luego (+X más)
+      options={transactionStatuses} value={value} onChange={val => setValue(val as string[])} placeholder="Selecciona estados" renderChipLabel={item =>
+      // Renderizado personalizado para el chip
+      <Typography variant="caption" sx={{
+        fontWeight: 'bold'
+      }}>
+                        {item.label.charAt(0).toUpperCase()} {/* Solo la inicial */}
+                      </Typography>} />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select múltiple con un número limitado de chips visibles y un renderizado personalizado para el label de cada chip (solo la inicial)."
+      },
+      source: {
+        code: MultiSelectCustomChipRenderDefinition.trim()
+      } // Referencia a la definición
+    }
+  }
+}`,...y.parameters?.docs?.source}}};S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>(['gt', 'mx', 'us', 'ca', 'br']);
+    return <Box sx={{
+      width: 400
+    }}>
+              <Select label="Países seleccionados" multiple maxChipsToShow={3} // Muestra 3 chips, luego (+X más)
+      options={groupedOptions} value={value} onChange={val => setValue(val as string[])} placeholder="Selecciona países" renderChipLabel={item =>
+      // Renderizado personalizado para el chip
+      <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5
+      }}>
+                      {item.img && <Avatar src={item.img} sx={{
+          width: 18,
+          height: 18
+        }} />} {/* Opcional: avatar en el chip */}
+                      <Typography variant="caption" sx={{
+          fontWeight: 'medium'
+        }}>
+                        {item.label}
+                      </Typography>
+                    </Box>} />
+              <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+          </Box>;
+  },
+  parameters: {
+    docs: {
+      story: "Select múltiple con renderizado personalizado completo de los chips, incluyendo avatar y texto completo, y limitando el número de chips visibles."
+    },
+    source: {
+      code: MultiSelectCustomChipRenderFullLabelDefinition.trim()
+    } // Referencia a la definición
+  }
+}`,...S.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState('');
+    return <Box sx={{
+      width: 300
+    }}>
+                <Select label="Opciones (Altura Limitada)" options={groupedOptions.concat(userOptions).concat(transactionStatuses)} // Muchas opciones
+      value={value} onChange={val => setValue(val as string)} maxHeight={150} // Altura máxima del menú
+      />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      story: "Select con altura máxima limitada para el menú desplegable, mostrando scroll si es necesario."
+    },
+    source: {
+      code: ConstrainedHeightDefinition.trim()
+    } // Referencia a la definición
+  }
+}`,...f.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState('');
+    return <Box sx={{
+      width: 200
+    }}> {/* El Select en sí es más angosto */}
+                <Select label="Opciones (Ancho Limitado)" options={basicOptions.concat(groupedOptions)} value={value} onChange={val => setValue(val as string)} maxWidth={100} // Ancho máximo del menú
+      />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      story: "Select con ancho máximo limitado para el menú desplegable."
+    },
+    source: {
+      code: ConstrainedWidthDefinition.trim()
+    } // Referencia a la definición
+  }
+}`,...C.parameters?.docs?.source}}};V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>(['gt', 'admin', 'PENDING', 'ca', 'user', 'COMPLETED']);
+    return <Box sx={{
+      width: 500
+    }}>
+                <Select label="Selección Completa" multiple filterable maxChipsToShow={3} maxHeight={250} maxWidth="400px" options={groupedOptions.concat(userOptions).concat(transactionStatuses)} value={value} onChange={val => setValue(val as string[])} placeholder="Busca y selecciona todo tipo de elementos" renderChipLabel={item => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5
+      }}>
+                        {item.img && <Avatar src={item.img} sx={{
+          width: 16,
+          height: 16
+        }} />}
+                        <Typography variant="caption" sx={{
+          fontWeight: 'bold'
+        }}>
+                          {item.label.length > 10 ? item.label.substring(0, 7) + '...' : item.label}
+                        </Typography>
+                      </Box>}>
+                    <Option>
+                        {item => <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            my: 0.5
+          }}>
+                                {item.img && <Avatar src={item.img} sx={{
+              width: 28,
+              height: 28
+            }} />}
+                                <Box>
+                                    <Typography variant="body2" fontWeight="medium">{item.label}</Typography>
+                                    {item.group && <Typography variant="caption" color="text.secondary">
+                                            Grupo: {item.group}
+                                        </Typography>}
+                                    {item.disabled && <Chip label="No disponible" size="small" color="warning" sx={{
+                ml: 1
+              }} />}
+                                </Box>
+                            </Box>}
+                    </Option>
+                </Select>
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un \`Select\` que demuestra una combinación de todas las características: selección múltiple, filtrado, opciones agrupadas, renderizado personalizado de opciones y chips, y límites de altura/ancho."
+      },
+      source: {
+        code: AllFeaturesCombinedDefinition.trim()
+      } // Referencia a la definición
+    }
+  }
+}`,...V.parameters?.docs?.source}}};B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Seleccionar (Vacío)',
+    options: [],
+    value: undefined,
+    placeholder: 'No hay opciones disponibles'
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return <Box sx={{
+      width: 300
+    }}>
+            <Select {...args} value={value ?? ''} onChange={setValue} />
+            <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      story: "Select que se muestra cuando no hay opciones disponibles."
+    },
+    source: {
+      code: EmptyOptionsDefinition.trim()
+    } // Referencia a la definición
+  }
+}`,...B.parameters?.docs?.source}}};O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const manyOptions = Array.from({
+      length: 50
+    }, (_, i) => ({
+      value: \`option-\${i}\`,
+      label: \`Opción \${i + 1}\`,
+      group: i < 25 ? 'Grupo A' : 'Grupo B'
+    }));
+    const [value, setValue] = useState('');
+    return <Box sx={{
+      width: 300
+    }}>
+              <Select label="Muchas Opciones" options={manyOptions} value={value} onChange={val => setValue(val as string)} filterable maxHeight={200} />
+              <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value}</Typography>
+          </Box>;
+  },
+  parameters: {
+    docs: {
+      story: "Select con un gran número de opciones para demostrar el scroll y el filtrado eficiente."
+    },
+    source: {
+      code: SelectWithManyOptionsDefinition.trim()
+    } // Referencia a la definición
+  }
+}`,...O.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState('');
+    return <Box sx={{
+      width: 300
+    }}>
+                <Select label="Label flotante (MUI nativo)" options={basicOptions} value={value} onChange={val => setValue(val as string)} labelPosition="floating" />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select con \`labelPosition='floating'\`, que usa el comportamiento nativo de MUI (label flotando dentro del notched outline al enfocar). Útil cuando se necesita el look estándar de Material UI."
+      },
+      source: {
+        code: LabelPositionFloatingDefinition.trim()
+      }
+    }
+  }
+}`,...T.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [valueA, setValueA] = useState('25');
+    const [valueB, setValueB] = useState('25');
+    const [valueC, setValueC] = useState('25');
+    return <Box sx={{
+      width: 300,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 2
+    }}>
+                <Select label="Sin border radius" options={basicOptions} value={valueA} onChange={val => setValueA(val as string)} borderRadius={0} />
+                <Select label="Border radius estándar" options={basicOptions} value={valueB} onChange={val => setValueB(val as string)} borderRadius={10} />
+                <Select label="Pill-shaped" options={basicOptions} value={valueC} onChange={val => setValueC(val as string)} borderRadius={999} />
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Control del radio del borde mediante la prop \`borderRadius\`. Acepta un número (en px) o un string CSS como \`'0.5rem'\`."
+      },
+      source: {
+        code: CustomBorderRadiusDefinition.trim()
+      }
+    }
+  }
+}`,...w.parameters?.docs?.source}}};A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>(['admin']);
+    return <Box sx={{
+      width: 360
+    }}>
+                <Select label="Select con estilos personalizados" options={userOptions} multiple value={value} onChange={val => setValue(val as string[])} placeholder="Selecciona usuarios" sx={{
+        '& .MuiInputBase-root': {
+          backgroundColor: 'action.hover'
+        },
+        '& .MuiOutlinedInput-notchedOutline': {
+          borderColor: 'primary.main',
+          borderWidth: '2px'
+        },
+        '&:hover .MuiOutlinedInput-notchedOutline': {
+          borderColor: 'primary.dark'
+        }
+      }} />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demuestra cómo el consumidor puede pasar un \`sx\` personalizado. El sx del consumidor se mergea sobre los defaults del componente, permitiendo overrides granulares (fondo, borde, hover, etc.) sin romper el comportamiento del label."
+      },
+      source: {
+        code: CustomStylingDefinition.trim()
+      }
+    }
+  }
+}`,...A.parameters?.docs?.source}}};E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState('');
+    const mockAsyncOptions = [{
+      value: 'apple',
+      label: 'Apple'
+    }, {
+      value: 'banana',
+      label: 'Banana'
+    }, {
+      value: 'orange',
+      label: 'Orange'
+    }, {
+      value: 'grape',
+      label: 'Grape'
+    }, {
+      value: 'strawberry',
+      label: 'Strawberry'
+    }, {
+      value: 'blueberry',
+      label: 'Blueberry'
+    }, {
+      value: 'pineapple',
+      label: 'Pineapple'
+    }, {
+      value: 'watermelon',
+      label: 'Watermelon'
+    }, {
+      value: 'kiwi',
+      label: 'Kiwi'
+    }, {
+      value: 'lemon',
+      label: 'Lemon'
+    }];
+
+    // Simulate an API call
+    const simulatedLoadOptions = (inputValue: string): Promise<SelectOption[]> => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const filtered = mockAsyncOptions.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+          resolve(filtered);
+        }, 800); // Simulate network delay
+      });
+    };
+    return <Box sx={{
+      width: 300
+    }}>
+                <Select loadOptions={simulatedLoadOptions} value={value} onChange={val => setValue(val as string)} placeholder="Escribe para buscar..." loadingMessage="Buscando frutas..." noOptionsMessage="No se encontraron frutas." debounceTimeout={500} // tiempo que tardara el input en buscar despues de haber escrito la ultima letra
+      />
+                <Typography sx={{
+        mt: 2
+      }}>Valor seleccionado: {value}</Typography>
+            </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un \`Select\` que carga opciones de forma asíncrona a medida que el usuario escribe, con un retraso simulado."
+      },
+      source: {
+        code: AsyncSelectDefinition.trim()
+      }
+    }
+  }
+}`,...E.parameters?.docs?.source}}};const He=["SimpleSelect","MultiSelect","WithPlaceholder","WithFilter","WithGroup","CustomRenderWithAvatar","MultiSelectCustomChipRender","MultiSelectCustomChipRenderFullLabel","ConstrainedHeight","ConstrainedWidth","AllFeaturesCombined","EmptyOptions","SelectWithManyOptions","LabelPositionFloating","CustomBorderRadius","CustomStyling","AsyncSelect"];export{V as AllFeaturesCombined,E as AsyncSelect,f as ConstrainedHeight,C as ConstrainedWidth,w as CustomBorderRadius,b as CustomRenderWithAvatar,A as CustomStyling,B as EmptyOptions,T as LabelPositionFloating,h as MultiSelect,y as MultiSelectCustomChipRender,S as MultiSelectCustomChipRenderFullLabel,O as SelectWithManyOptions,m as SimpleSelect,v as WithFilter,x as WithGroup,g as WithPlaceholder,He as __namedExportsOrder,ke as default};