@soyfri/shared-library 1.0.0 → 1.0.2

package/cjs/components/Select/Select.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),t=require("react"),r=require("@mui/material"),l=require("../../node_modules/@mui/icons-material/esm/Clear.cjs");function s({label:s,options:i,value:a,defaultValue:n,onChange:o,size:u="medium",multiple:p=!1,filterable:x=!1,placeholder:d,children:c,maxHeight:m=300,maxWidth:h,maxChipsToShow:j=3,renderChipLabel:f}){const b=t.useMemo((()=>{var e;if(1===t.Children.count(c)){const r=t.Children.only(c);if(t.isValidElement(r)&&"Option"===(null===(e=r.type)||void 0===e?void 0:e.displayName))return r.props.children}return null}),[c]),[v,g]=t.useState(""),E=t.useMemo((()=>x&&v?i.filter((e=>e.label.toLowerCase().includes(v.toLowerCase()))):i),[v,x,i]),y=t.useMemo((()=>{const e={};return E.forEach((t=>{const r=t.group||"__default";e[r]||(e[r]=[]),e[r].push(t)})),e}),[E]),C=t.useMemo((()=>{const t=[];return x&&t.push(e.jsxRuntimeExports.jsx(r.ListSubheader,{sx:{px:2,pt:1,pb:1,backgroundColor:"background.paper",zIndex:1,position:"sticky",top:0},children:e.jsxRuntimeExports.jsx(r.TextField,{placeholder:"Buscar...",variant:"standard",size:"small",fullWidth:!0,value:v,onChange:e=>g(e.target.value),inputProps:{autoFocus:!0},onClick:e=>e.stopPropagation(),onKeyDown:e=>e.stopPropagation()})},"search-header")),Object.entries(y).forEach((([l,s])=>{"__default"!==l&&t.push(e.jsxRuntimeExports.jsx(r.ListSubheader,{disableSticky:!0,children:l},l)),s.forEach((l=>{t.push(e.jsxRuntimeExports.jsx(r.MenuItem,{value:l.value,disabled:l.disabled,children:b?b(l):l.label},l.value))}))})),t}),[y,b,x,v]);return e.jsxRuntimeExports.jsxs(r.FormControl,{fullWidth:!0,size:u,children:[s&&e.jsxRuntimeExports.jsx(r.InputLabel,{children:s}),e.jsxRuntimeExports.jsx(r.Select,{label:s,value:null!=a?a:p?[]:"",defaultValue:n,multiple:p,onChange:e=>{o(e.target.value)},renderValue:t=>{var s;if(!t||Array.isArray(t)&&0===t.length)return e.jsxRuntimeExports.jsx(r.Typography,{sx:{color:"text.disabled"},children:d||""});if(!p){const e=i.find((e=>e.value===t));return f&&e?f(e):null!==(s=null==e?void 0:e.label)&&void 0!==s?s:String(t)}const n=t,u=n.slice(0,j),x=n.length-j;return e.jsxRuntimeExports.jsxs(r.Box,{sx:{display:"flex",flexWrap:"wrap",gap:.5},children:[u.map((t=>{const s=i.find((e=>e.value===t));if(!s)return null;return e.jsxRuntimeExports.jsx(r.Chip,{label:f?f(s):s.label,avatar:s.img?e.jsxRuntimeExports.jsx(r.Avatar,{src:s.img}):void 0,onDelete:()=>(e=>{const t=a.filter((t=>t!==e));o(t)})(t),deleteIcon:e.jsxRuntimeExports.jsx(l,{})},t)})),x>0&&e.jsxRuntimeExports.jsx(r.Chip,{label:`+${x} más`,size:"small"})]})},displayEmpty:!0,input:e.jsxRuntimeExports.jsx(r.OutlinedInput,{label:s}),MenuProps:{PaperProps:{style:{maxHeight:m,maxWidth:h}}},children:C})]})}exports.Select=s,exports.default=s;
+//# sourceMappingURL=Select.cjs.map

package/cjs/components/Select/Select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/components/Select.cjs

@@ -0,0 +1,2 @@
+"use strict";var e=require("./Select/Select.cjs");exports.Select=e.Select;
+//# sourceMappingURL=Select.cjs.map

package/cjs/components/Select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/node_modules/@mui/icons-material/esm/Clear.cjs

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../../../_virtual/jsx-runtime.cjs"),r=require("../../material/esm/utils/createSvgIcon.cjs")(e.jsxRuntimeExports.jsx("path",{d:"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}),"Clear");module.exports=r;
+//# sourceMappingURL=Clear.cjs.map

package/cjs/node_modules/@mui/icons-material/esm/Clear.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clear.cjs","sources":["../../../../../../node_modules/@mui/icons-material/esm/Clear.js"],"sourcesContent":["\"use client\";\n\nimport createSvgIcon from \"./utils/createSvgIcon.js\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon(/*#__PURE__*/_jsx(\"path\", {\n  d: \"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n}), 'Clear');"],"names":["ClearIcon","createSvgIcon","_jsx","jsxRuntimeExports","jsx","d"],"mappings":"mEAIAA,uDAAeC,CAA2BC,EAAIC,kBAAAC,IAAC,OAAQ,CACrDC,EAAG,0GACD","x_google_ignoreList":[0]}

package/components/Select/index.ts

@@ -0,0 +1 @@
+export * from '../../esm/components/Select';

package/esm/components/Select/Select.d.ts

@@ -0,0 +1,39 @@
+import React, { ReactElement } from 'react';
+export interface SelectOption {
+    value: string | number;
+    label: string;
+    img?: string;
+    disabled?: boolean;
+    group?: string;
+    [key: string]: any;
+}
+type RenderOptionItem = (item: SelectOption) => React.ReactNode;
+type RenderChipLabel = (item: SelectOption) => React.ReactNode;
+export interface SelectProps<TValue extends SelectOption['value'] = SelectOption['value']> {
+    label?: string;
+    options: SelectOption[];
+    value?: TValue | TValue[];
+    defaultValue?: TValue | TValue[];
+    onChange: (val: TValue | TValue[]) => void;
+    size?: 'small' | 'medium';
+    multiple?: boolean;
+    filterable?: boolean;
+    placeholder?: string;
+    children?: ReactElement<{
+        children: RenderOptionItem;
+    }>;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    maxChipsToShow?: number;
+    renderChipLabel?: RenderChipLabel;
+}
+export interface OptionProps {
+    children: RenderOptionItem;
+}
+export declare function Option(_props: OptionProps): null;
+export declare namespace Option {
+    var displayName: string;
+}
+export declare function Select<TValue extends SelectOption['value'] = SelectOption['value']>({ label, options, value, defaultValue, onChange, size, multiple, filterable, placeholder, children, maxHeight, maxWidth, maxChipsToShow, // Valor por defecto: mostrar 3 chips
+renderChipLabel, }: SelectProps<TValue>): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/esm/components/Select/Select.definitions.d.ts

@@ -0,0 +1,13 @@
+export declare const SimpleSelectDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst basicOptions = [\n    { value: '10', label: '10' },\n    { value: '25', label: '25' },\n    { value: '50', label: '50' },\n    { value: '100', label: '100' },\n];\n\nexport const SimpleSelectExample = () => {\n    const [value, setValue] = useState<string>('25');\n    return (\n        <Box sx={{ width: 200 }}>\n            <Select\n                label=\"Registros por p\u00E1gina\"\n                options={basicOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                maxWidth={150}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
+export declare const MultiSelectDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nexport const MultiSelectExample = () => {\n    const [value, setValue] = useState<string[]>([]);\n    return (\n        <Box sx={{ width: 400 }}>\n            <Select\n                label=\"Seleccionar estados\"\n                multiple\n                maxChipsToShow={2}\n                options={[\n                    { value: 'pending', label: 'Pendiente' },\n                    { value: 'approved', label: 'Aprobado' },\n                    { value: 'rejected', label: 'Rechazado' },\n                    { value: 'canceled', label: 'Cancelado' },\n                    { value: 'completed', label: 'Completado' },\n                    { value: 'invoiced', label: 'Facturado' },\n                ]}\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
+export declare const WithPlaceholderDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst basicOptions = [\n    { value: '10', label: '10' },\n    { value: '25', label: '25' },\n    { value: '50', label: '50' },\n    { value: '100', label: '100' },\n];\n\nexport const WithPlaceholderExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Seleccione una opci\u00F3n\"\n                options={basicOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                placeholder=\"Ninguna opci\u00F3n seleccionada\"\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>\n        </Box>\n    );\n};\n";
+export declare const WithFilterDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst groupedOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'sv', label: 'El Salvador', group: 'Centroam\u00E9rica' },\n    { value: 'mx', label: 'M\u00E9xico', group: 'Norteam\u00E9rica' },\n    { value: 'us', label: 'EE.UU.', group: 'Norteam\u00E9rica' },\n];\n\nexport const WithFilterExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Buscar pa\u00EDs\"\n                filterable\n                options={groupedOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
+export declare const WithGroupDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst groupedOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'sv', label: 'El Salvador', group: 'Centroam\u00E9rica' },\n    { value: 'mx', label: 'M\u00E9xico', group: 'Norteam\u00E9rica' },\n    { value: 'us', label: 'EE.UU.', group: 'Norteam\u00E9rica' },\n];\n\nexport const WithGroupExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Pa\u00EDs por regi\u00F3n\"\n                options={groupedOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
+export declare const CustomRenderWithAvatarDefinition = "\nimport React, { useState } from 'react';\nimport { Select, Option } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Avatar, Box, Typography } from '@mui/material';\n\nconst userOptions = [\n    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },\n    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },\n];\n\nexport const CustomRenderWithAvatarExample = () => {\n    const [value, setValue] = useState<string[]>([]);\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                options={userOptions}\n                multiple\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n                label=\"Usuarios\"\n                placeholder=\"Selecciona usuarios\"\n            >\n                <Option>\n                    {({ img, label }) => (\n                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n                            <Avatar src={img} sx={{ width: 24, height: 24 }} />\n                            <Typography variant=\"body2\">{label}</Typography>\n                        </Box>\n                    )}\n                </Option>\n            </Select>\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
+export declare const MultiSelectCustomChipRenderDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography, Chip } from '@mui/material';\n\nconst transactionStatuses = [\n    { value: 'PENDING', label: 'Pendiente' },\n    { value: 'REJECTED', label: 'Rechazado' },\n    { value: 'CANCELED', label: 'Cancelado' },\n    { value: 'REFUNDED', label: 'Reembolsado' },\n    { value: 'COMPLETED', label: 'Completado' },\n    { value: 'EXPIRED', label: 'Expirado' },\n];\n\nexport const MultiSelectCustomChipRenderExample = () => {\n    const [value, setValue] = useState<string[]>(['pending', 'approved', 'rejected', 'canceled']);\n    return (\n        <Box sx={{ width: 400 }}>\n            <Select\n                label=\"Estados de Transacci\u00F3n\"\n                multiple\n                maxChipsToShow={3}\n                options={transactionStatuses}\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n                placeholder=\"Selecciona estados\"\n                renderChipLabel={(item) => (\n                  <Typography variant=\"caption\" sx={{ fontWeight: 'bold' }}>\n                    {item.label.charAt(0).toUpperCase()}\n                  </Typography>\n                )}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
+export declare const MultiSelectCustomChipRenderFullLabelDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Avatar, Box, Typography } from '@mui/material';\n\nconst groupedOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'sv', label: 'El Salvador', group: 'Centroam\u00E9rica' },\n    { value: 'mx', label: 'M\u00E9xico', group: 'Norteam\u00E9rica' },\n    { value: 'us', label: 'EE.UU.', group: 'Norteam\u00E9rica' },\n    { value: 'ca', label: 'Canad\u00E1', group: 'Norteam\u00E9rica' },\n    { value: 'br', label: 'Brasil', group: 'Sudam\u00E9rica' },\n    { value: 'ar', label: 'Argentina', group: 'Sudam\u00E9rica' },\n];\n\nexport const MultiSelectCustomChipRenderFullLabelExample = () => {\n    const [value, setValue] = useState<string[]>(['gt', 'mx', 'us', 'ca', 'br']);\n    return (\n        <Box sx={{ width: 400 }}>\n            <Select\n                label=\"Pa\u00EDses seleccionados\"\n                multiple\n                maxChipsToShow={3}\n                options={groupedOptions}\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n                placeholder=\"Selecciona pa\u00EDses\"\n                renderChipLabel={(item) => (\n                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n                        {item.img && <Avatar src={item.img} sx={{ width: 18, height: 18 }} />}\n                        <Typography variant=\"caption\" sx={{ fontWeight: 'medium' }}>\n                            {item.label}\n                        </Typography>\n                    </Box>\n                )}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
+export declare const ConstrainedHeightDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst optionsWithManyItems = [\n  { value: 'gt', label: 'Guatemala' }, { value: 'sv', label: 'El Salvador' },\n  { value: 'mx', label: 'M\u00E9xico' }, { value: 'us', label: 'EE.UU.' },\n  { value: 'ca', label: 'Canad\u00E1' }, { value: 'br', label: 'Brasil' },\n  { value: 'ar', label: 'Argentina' }, { value: 'cl', label: 'Chile' },\n  { value: 'co', label: 'Colombia' }, { value: 'pe', label: 'Per\u00FA' },\n  { value: 'ec', label: 'Ecuador' }, { value: 've', label: 'Venezuela' },\n  { value: 'py', label: 'Paraguay' }, { value: 'uy', label: 'Uruguay' },\n  { value: 'bo', label: 'Bolivia' }, { value: 'cr', label: 'Costa Rica' },\n  { value: 'pa', label: 'Panam\u00E1' }, { value: 'hn', label: 'Honduras' },\n  { value: 'ni', label: 'Nicaragua' }, { value: 'do', label: 'Rep. Dominicana' },\n  { value: 'cu', label: 'Cuba' }, { value: 'pr', label: 'Puerto Rico' },\n  { value: 'es', label: 'Espa\u00F1a' }, { value: 'fr', label: 'Francia' },\n  { value: 'de', label: 'Alemania' }, { value: 'it', label: 'Italia' },\n];\n\nexport const ConstrainedHeightExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Opciones (Altura Limitada)\"\n                options={optionsWithManyItems}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                maxHeight={150}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
+export declare const ConstrainedWidthDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst basicOptions = [\n    { value: '10', label: '10' },\n    { value: '25', label: '25' },\n];\nconst groupedOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'sv', label: 'El Salvador', group: 'Centroam\u00E9rica' },\n];\n\nexport const ConstrainedWidthExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 200 }}>\n            <Select\n                label=\"Opciones (Ancho Limitado)\"\n                options={basicOptions.concat(groupedOptions)}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                maxWidth={100}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";
+export declare const AllFeaturesCombinedDefinition = "\nimport React, { useState } from 'react';\nimport { Select, Option } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Avatar, Box, Typography, Chip } from '@mui/material';\n\nconst allOptions = [\n    { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },\n    { value: 'PENDING', label: 'Pendiente' },\n    { value: 'ca', label: 'Canad\u00E1', group: 'Norteam\u00E9rica' },\n    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },\n    { value: 'COMPLETED', label: 'Completado' },\n];\n\nexport const AllFeaturesCombinedExample = () => {\n    const [value, setValue] = useState<string[]>(['gt', 'admin', 'PENDING', 'ca', 'user', 'COMPLETED']);\n    return (\n        <Box sx={{ width: 500 }}>\n            <Select\n                label=\"Selecci\u00F3n Completa\"\n                multiple\n                filterable\n                maxChipsToShow={3}\n                maxHeight={250}\n                maxWidth=\"400px\"\n                options={allOptions}\n                value={value}\n                onChange={(val) => setValue(val as string[])}\n                placeholder=\"Busca y selecciona todo tipo de elementos\"\n                renderChipLabel={(item) => (\n                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n                        {item.img && <Avatar src={item.img} sx={{ width: 16, height: 16 }} />}\n                        <Typography variant=\"caption\" sx={{ fontWeight: 'bold' }}>\n                            {item.label.length > 10 ? item.label.substring(0, 7) + '...' : item.label}\n                        </Typography>\n                    </Box>\n                )}\n            >\n                <Option>\n                    {(item) => (\n                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, my: 0.5 }}>\n                            {item.img && <Avatar src={item.img} sx={{ width: 28, height: 28 }} />}\n                            <Box>\n                                <Typography variant=\"body2\" fontWeight=\"medium\">{item.label}</Typography>\n                                {item.group && (\n                                    <Typography variant=\"caption\" color=\"text.secondary\">\n                                        Grupo: {item.group}\n                                    </Typography>\n                                )}\n                                {item.disabled && <Chip label=\"No disponible\" size=\"small\" color=\"warning\" sx={{ ml: 1 }} />}\n                            </Box>\n                        </Box>\n                    )}\n                </Option>\n            </Select>\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n        </Box>\n    );\n};\n";
+export declare const EmptyOptionsDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nexport const EmptyOptionsExample = () => {\n    const [value, setValue] = useState(null);\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Seleccionar (Vac\u00EDo)\"\n                options={[]}\n                value={value}\n                onChange={setValue}\n                placeholder=\"No hay opciones disponibles\"\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>\n        </Box>\n    );\n};\n";
+export declare const SelectWithManyOptionsDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst manyOptions = Array.from({ length: 50 }, (_, i) => ({\n    value: `option-${i}`,\n    label: `Opci\u00F3n ${i + 1}`,\n    group: i < 25 ? 'Grupo A' : 'Grupo B',\n}));\n\nexport const SelectWithManyOptionsExample = () => {\n    const [value, setValue] = useState('');\n    return (\n        <Box sx={{ width: 300 }}>\n            <Select\n                label=\"Muchas Opciones\"\n                options={manyOptions}\n                value={value}\n                onChange={(val) => setValue(val as string)}\n                filterable\n                maxHeight={200}\n            />\n            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n        </Box>\n    );\n};\n";

package/esm/components/Select/Select.js

@@ -0,0 +1,2 @@
+import{j as e}from"../../_virtual/jsx-runtime.js";import l,{useMemo as a,isValidElement as r,useState as t}from"react";import{ListSubheader as i,TextField as n,MenuItem as s,FormControl as o,InputLabel as u,Select as d,OutlinedInput as p,Typography as c,Box as h,Chip as m,Avatar as x}from"@mui/material";import f from"../../node_modules/@mui/icons-material/esm/Clear.js";function v({label:v,options:b,value:j,defaultValue:g,onChange:y,size:C="medium",multiple:P=!1,filterable:_=!1,placeholder:k,children:w,maxHeight:z=300,maxWidth:W,maxChipsToShow:E=3,renderChipLabel:S}){const L=a((()=>{var e;if(1===l.Children.count(w)){const a=l.Children.only(w);if(r(a)&&"Option"===(null===(e=a.type)||void 0===e?void 0:e.displayName))return a.props.children}return null}),[w]),[V,A]=t(""),D=a((()=>_&&V?b.filter((e=>e.label.toLowerCase().includes(V.toLowerCase()))):b),[V,_,b]),H=a((()=>{const e={};return D.forEach((l=>{const a=l.group||"__default";e[a]||(e[a]=[]),e[a].push(l)})),e}),[D]),I=a((()=>{const l=[];return _&&l.push(e.jsx(i,{sx:{px:2,pt:1,pb:1,backgroundColor:"background.paper",zIndex:1,position:"sticky",top:0},children:e.jsx(n,{placeholder:"Buscar...",variant:"standard",size:"small",fullWidth:!0,value:V,onChange:e=>A(e.target.value),inputProps:{autoFocus:!0},onClick:e=>e.stopPropagation(),onKeyDown:e=>e.stopPropagation()})},"search-header")),Object.entries(H).forEach((([a,r])=>{"__default"!==a&&l.push(e.jsx(i,{disableSticky:!0,children:a},a)),r.forEach((a=>{l.push(e.jsx(s,{value:a.value,disabled:a.disabled,children:L?L(a):a.label},a.value))}))})),l}),[H,L,_,V]);return e.jsxs(o,{fullWidth:!0,size:C,children:[v&&e.jsx(u,{children:v}),e.jsx(d,{label:v,value:null!=j?j:P?[]:"",defaultValue:g,multiple:P,onChange:e=>{y(e.target.value)},renderValue:l=>{var a;if(!l||Array.isArray(l)&&0===l.length)return e.jsx(c,{sx:{color:"text.disabled"},children:k||""});if(!P){const e=b.find((e=>e.value===l));return S&&e?S(e):null!==(a=null==e?void 0:e.label)&&void 0!==a?a:String(l)}const r=l,t=r.slice(0,E),i=r.length-E;return e.jsxs(h,{sx:{display:"flex",flexWrap:"wrap",gap:.5},children:[t.map((l=>{const a=b.find((e=>e.value===l));if(!a)return null;return e.jsx(m,{label:S?S(a):a.label,avatar:a.img?e.jsx(x,{src:a.img}):void 0,onDelete:()=>(e=>{const l=j.filter((l=>l!==e));y(l)})(l),deleteIcon:e.jsx(f,{})},l)})),i>0&&e.jsx(m,{label:`+${i} más`,size:"small"})]})},displayEmpty:!0,input:e.jsx(p,{label:v}),MenuProps:{PaperProps:{style:{maxHeight:z,maxWidth:W}}},children:I})]})}export{v as Select,v as default};
+//# sourceMappingURL=Select.js.map

package/esm/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/esm/components/Select/Select.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Select from './Select';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const SimpleSelect: Story;
+export declare const MultiSelect: Story;
+export declare const WithPlaceholder: Story;
+export declare const WithFilter: Story;
+export declare const WithGroup: Story;
+export declare const CustomRenderWithAvatar: Story;
+export declare const MultiSelectCustomChipRender: Story;
+export declare const MultiSelectCustomChipRenderFullLabel: Story;
+export declare const ConstrainedHeight: Story;
+export declare const ConstrainedWidth: Story;
+export declare const AllFeaturesCombined: Story;
+export declare const EmptyOptions: Story;
+export declare const SelectWithManyOptions: Story;

package/esm/components/Select/index.d.ts

@@ -0,0 +1 @@
+export { default as Select } from './Select';

package/esm/components/Select.js

@@ -0,0 +1,2 @@
+export{Select}from"./Select/Select.js";
+//# sourceMappingURL=Select.js.map

package/esm/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/esm/node_modules/@mui/icons-material/esm/Clear.js

@@ -0,0 +1,2 @@
+import{j as r}from"../../../../_virtual/jsx-runtime.js";import a from"../../material/esm/utils/createSvgIcon.js";var t=a(r.jsx("path",{d:"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}),"Clear");export{t as default};
+//# sourceMappingURL=Clear.js.map

package/esm/node_modules/@mui/icons-material/esm/Clear.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clear.js","sources":["../../../../../../node_modules/@mui/icons-material/esm/Clear.js"],"sourcesContent":["\"use client\";\n\nimport createSvgIcon from \"./utils/createSvgIcon.js\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon(/*#__PURE__*/_jsx(\"path\", {\n  d: \"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n}), 'Clear');"],"names":["ClearIcon","createSvgIcon","_jsx","jsx","d"],"mappings":"iHAIA,IAAAA,EAAeC,EAA2BC,EAAIC,IAAC,OAAQ,CACrDC,EAAG,0GACD","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -41,6 +41,11 @@
       "require": "./cjs/components/Stat.cjs",
       "types": "./esm/components/Stat/Stat.d.ts"
     },
+    "./components/Select": {
+      "import": "./esm/components/Select.js",
+      "require": "./cjs/components/Select.cjs",
+      "types": "./esm/components/Select/Select.d.ts"
+    },
     "./components/Icon": {
       "import": "./esm/components/Icon.js",
       "require": "./cjs/components/Icon.cjs",