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

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

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