@soyfri/shared-library 1.4.9 → 1.5.0-beta.1

package/README.md

@@ -0,0 +1,243 @@
+# @soyfri/shared-library
+
+Una librería de componentes React reutilizables construida con Material-UI, TypeScript y Tailwind CSS, diseñada para proporcionar componentes UI consistentes y bien documentados.
+
+## 📋 Tabla de Contenidos
+
+- [Características](#características)
+- [Instalación](#instalación)
+- [Uso](#uso)
+- [Componentes Disponibles](#componentes-disponibles)
+- [Desarrollo](#desarrollo)
+- [Scripts Disponibles](#scripts-disponibles)
+- [Storybook](#storybook)
+- [Testing](#testing)
+- [Tecnologías](#tecnologías)
+- [Estructura del Proyecto](#estructura-del-proyecto)
+
+## ✨ Características
+
+- 🎨 **Componentes tipados**: Todos los componentes están construidos con TypeScript para mayor seguridad de tipos
+- 📚 **Documentación con Storybook**: Cada componente incluye historias interactivas y documentación
+- 🎯 **Material-UI**: Basado en Material-UI para un diseño consistente y accesible
+- 🌈 **Tailwind CSS**: Integración con Tailwind para estilos utilitarios
+- 🧪 **Testing**: Configurado con Vitest y Playwright para testing de componentes
+- 📦 **Build optimizado**: Configuración con Rollup para generar builds ESM y CommonJS
+
+## 📦 Instalación
+
+```bash
+npm install @soyfri/shared-library
+```
+
+## 🚀 Uso
+
+```tsx
+import { Button, Table, Select } from '@soyfri/shared-library';
+import '@soyfri/shared-library/dist/styles.css';
+
+function App() {
+  return (
+    <div>
+      <Button variant="contained" color="primary">
+        Mi Botón
+      </Button>
+    </div>
+  );
+}
+```
+
+## 🧩 Componentes Disponibles
+
+### Button
+Componente de botón personalizable basado en Material-UI con soporte para iconos, diferentes tamaños y estados.
+
+**Características:**
+- Variantes: `text`, `outlined`, `contained`
+- Tamaños: `small`, `medium`, `large`
+- Soporte para iconos de inicio y fin
+- Estados de carga
+- Completamente tipado
+
+### Table
+Componente de tabla flexible con paginación interna y externa, ordenamiento y renderizado personalizado de columnas.
+
+**Características:**
+- Paginación interna automática
+- Paginación externa controlada
+- Columnas personalizables con renderizado custom
+- Soporte para componentes complejos en celdas
+- Completamente tipado con generics
+
+### Select
+Componente select avanzado con soporte para selección múltiple, filtros, agrupación y renderizado personalizado.
+
+**Características:**
+- Selección simple y múltiple
+- Filtrado de opciones
+- Agrupación de opciones
+- Renderizado personalizado con avatars
+- Placeholder configurable
+
+### Avatar
+Componente para mostrar avatares de usuarios con soporte para imágenes y texto.
+
+### Icon
+Wrapper para iconos de Material-UI con propiedades consistentes.
+
+### Stat
+Componente para mostrar estadísticas con diferentes plantillas de visualización.
+
+**Características:**
+- Plantilla simple
+- Plantilla con chip
+- Plantilla con lista de chips
+- Colores personalizables
+
+### Column
+Componente auxiliar para definir columnas en el componente Table.
+
+## 🛠️ Desarrollo
+
+### Prerrequisitos
+
+- Node.js (versión 18 o superior)
+- npm o yarn
+
+### Configuración del entorno de desarrollo
+
+1. Clona el repositorio:
+```bash
+git clone <repository-url>
+cd shared-library
+```
+
+2. Instala las dependencias:
+```bash
+npm install
+```
+
+3. Inicia el entorno de desarrollo:
+```bash
+npm run dev
+```
+
+## 📜 Scripts Disponibles
+
+- `npm run build` - Construye la librería para producción
+- `npm run dev` - Inicia el modo de desarrollo con watch
+- `npm run build:css` - Construye los estilos CSS
+- `npm run watch:css` - Observa cambios en los estilos CSS
+- `npm run clean` - Limpia la carpeta dist
+- `npm run prepare` - Limpia y construye la librería
+- `npm run storybook` - Inicia Storybook en modo desarrollo
+- `npm run build-storybook` - Construye Storybook para producción
+- `npm run dist` - Ejecuta el script de distribución personalizado
+
+## 📚 Storybook
+
+La librería incluye Storybook para documentación interactiva y desarrollo de componentes.
+
+### Iniciar Storybook
+
+```bash
+npm run storybook
+```
+
+Esto abrirá Storybook en `http://localhost:6006` donde podrás:
+
+- Ver todos los componentes disponibles
+- Interactuar con las propiedades de cada componente
+- Ver ejemplos de uso
+- Acceder a la documentación detallada
+
+### Construir Storybook
+
+```bash
+npm run build-storybook
+```
+
+## 🧪 Testing
+
+La librería está configurada con Vitest y Playwright para testing de componentes.
+
+### Configuración de Testing
+
+- **Vitest**: Para unit tests y testing de componentes
+- **Playwright**: Para testing de browser
+- **Storybook Test Addon**: Para testing de historias de Storybook
+
+## 🔧 Tecnologías
+
+### Dependencias Principales
+
+- **React 19.1.0**: Librería de UI
+- **Material-UI 7.1.0**: Sistema de diseño y componentes
+- **TypeScript 5.8.3**: Tipado estático
+- **Tailwind CSS 4.1.7**: Framework de CSS utilitario
+
+### Herramientas de Desarrollo
+
+- **Storybook 9.0.8**: Documentación y desarrollo de componentes
+- **Rollup**: Bundler para la construcción de la librería
+- **Vitest**: Framework de testing
+- **Playwright**: Testing de browser
+- **Prettier**: Formateo de código
+
+## 📁 Estructura del Proyecto
+
+```
+shared-library/
+├── .storybook/          # Configuración de Storybook
+├── src/
+│   ├── components/      # Componentes de la librería
+│   │   ├── Avatar/
+│   │   ├── Button/
+│   │   ├── Column/
+│   │   ├── Icon/
+│   │   ├── Select/
+│   │   ├── Stat/
+│   │   └── Table/
+│   ├── index.ts         # Punto de entrada principal
+│   └── styles.css       # Estilos globales
+├── dist/                # Archivos construidos
+├── package.json
+├── tsconfig.json
+├── tailwind.config.js
+├── rollup.config.cjs
+└── vitest.config.ts
+```
+
+### Estructura de Componentes
+
+Cada componente sigue una estructura consistente:
+
+```
+ComponentName/
+├── ComponentName.tsx        # Implementación del componente
+├── ComponentName.stories.tsx # Historias de Storybook
+├── ComponentName.definition.ts # Definiciones de código (opcional)
+├── index.ts                 # Exportaciones
+└── types.ts                 # Tipos específicos (opcional)
+```
+
+## 🤝 Contribución
+
+Para contribuir al proyecto:
+
+1. Fork el repositorio
+2. Crea una rama para tu feature (`git checkout -b feature/nueva-funcionalidad`)
+3. Commit tus cambios (`git commit -am 'Agrega nueva funcionalidad'`)
+4. Push a la rama (`git push origin feature/nueva-funcionalidad`)
+5. Crea un Pull Request
+
+## 📄 Licencia
+
+ISC License
+
+---
+
+**Versión actual:** 1.0.1
+
+Para más información y ejemplos detallados, consulta la documentación en Storybook ejecutando `npm run storybook`.
+        

package/components/Autocomplete/Autocomplete.cjs

@@ -0,0 +1,107 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const ClearIcon = require("@mui/icons-material/Clear");
+const reactHookForm = require("react-hook-form");
+function AutocompleteSelect(props) {
+  const {
+    label,
+    options = [],
+    placeholder,
+    multiple = false,
+    disabled = false,
+    loading = false,
+    error = false,
+    helperText,
+    renderOptionItem,
+    renderChipLabel,
+    maxChipsToShow = 3
+  } = props;
+  const isRHFMode = "control" in props;
+  const renderTags = (value, getTagProps) => {
+    const displayed = value.slice(0, maxChipsToShow);
+    const hidden = value.length - maxChipsToShow;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      displayed.map((option, index) => /* @__PURE__ */ React.createElement(
+        material.Chip,
+        __spreadProps(__spreadValues({}, getTagProps({ index })), {
+          key: option.value,
+          label: renderChipLabel ? renderChipLabel(option) : option.label,
+          avatar: option.img ? /* @__PURE__ */ jsxRuntime.jsx(material.Avatar, { src: option.img }) : void 0,
+          deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+        })
+      )),
+      hidden > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: `+${hidden} más` })
+    ] });
+  };
+  const renderOption = (propsLi, option) => /* @__PURE__ */ React.createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
+  const renderAutocomplete = (value, onChange) => /* @__PURE__ */ jsxRuntime.jsx(
+    material.Autocomplete,
+    {
+      multiple,
+      options,
+      value,
+      disabled,
+      loading,
+      getOptionLabel: (opt) => {
+        var _a;
+        return (_a = opt == null ? void 0 : opt.label) != null ? _a : "";
+      },
+      isOptionEqualToValue: (a, b) => a.value === b.value,
+      onChange: (_, newValue) => onChange(newValue),
+      renderOption,
+      renderTags: multiple ? renderTags : void 0,
+      noOptionsText: "No hay opciones",
+      loadingText: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: "Cargando..." })
+      ] }),
+      renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        __spreadProps(__spreadValues({}, params), {
+          label,
+          placeholder,
+          error,
+          helperText
+        })
+      )
+    }
+  );
+  if (isRHFMode) {
+    const rhfProps = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactHookForm.Controller,
+      {
+        name: rhfProps.name,
+        control: rhfProps.control,
+        rules: rhfProps.validation,
+        render: ({ field }) => renderAutocomplete(field.value, field.onChange)
+      }
+    );
+  }
+  const standardProps = props;
+  return renderAutocomplete(standardProps.value, standardProps.onChange);
+}
+exports.Autocomplete = AutocompleteSelect;
+//# sourceMappingURL=Autocomplete.cjs.map

package/components/Autocomplete/Autocomplete.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.cjs","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Autocomplete,\n  TextField,\n  Chip,\n  Avatar,\n  Box,\n  Typography,\n  CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { Controller, Control, RegisterOptions } from \"react-hook-form\";\n\nexport interface SelectOption {\n  value: string | number;\n  label: string;\n  img?: string;\n  disabled?: boolean;\n  group?: string;\n  [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface BaseAutocompleteProps {\n  label?: string;\n  options?: SelectOption[];\n  placeholder?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  error?: boolean;\n  helperText?: string;\n  maxChipsToShow?: number;\n  renderOptionItem?: RenderOptionItem;\n  renderChipLabel?: RenderChipLabel;\n}\n\ninterface RHFAutocompleteProps extends BaseAutocompleteProps {\n  name: string;\n  control: Control<any>;\n  validation?: RegisterOptions;\n}\n\ninterface StandardAutocompleteProps extends BaseAutocompleteProps {\n  value: SelectOption | SelectOption[] | null;\n  onChange: (val: SelectOption | SelectOption[] | null) => void;\n}\n\nexport type AutocompleteProps =\n  | RHFAutocompleteProps\n  | StandardAutocompleteProps;\n\nexport function AutocompleteSelect(props: AutocompleteProps) {\n  const {\n    label,\n    options = [],\n    placeholder,\n    multiple = false,\n    disabled = false,\n    loading = false,\n    error = false,\n    helperText,\n    renderOptionItem,\n    renderChipLabel,\n    maxChipsToShow = 3,\n  } = props;\n\n  const isRHFMode = \"control\" in props;\n\n  const renderTags = (value: SelectOption[], getTagProps: any) => {\n    const displayed = value.slice(0, maxChipsToShow);\n    const hidden = value.length - maxChipsToShow;\n\n    return (\n      <>\n        {displayed.map((option, index) => (\n          <Chip\n            {...getTagProps({ index })}\n            key={option.value}\n            label={renderChipLabel ? renderChipLabel(option) : option.label}\n            avatar={option.img ? <Avatar src={option.img} /> : undefined}\n            deleteIcon={<ClearIcon />}\n          />\n        ))}\n\n        {hidden > 0 && <Chip label={`+${hidden} más`} />}\n      </>\n    );\n  };\n\n  const renderOption = (propsLi: any, option: SelectOption) => (\n    <li {...propsLi} key={option.value}>\n      {renderOptionItem ? renderOptionItem(option) : option.label}\n    </li>\n  );\n\n  const renderAutocomplete = (value: any, onChange: any) => (\n    <Autocomplete\n      multiple={multiple}\n      options={options}\n      value={value}\n      disabled={disabled}\n      loading={loading}\n      getOptionLabel={(opt) => opt?.label ?? \"\"}\n      isOptionEqualToValue={(a, b) => a.value === b.value}\n      onChange={(_, newValue) => onChange(newValue)}\n      renderOption={renderOption}\n      renderTags={multiple ? renderTags : undefined}\n      noOptionsText=\"No hay opciones\"\n      loadingText={\n        <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n          <CircularProgress size={20} />\n          <Typography>Cargando...</Typography>\n        </Box>\n      }\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          label={label}\n          placeholder={placeholder}\n          error={error}\n          helperText={helperText}\n        />\n      )}\n    />\n  );\n\n  if (isRHFMode) {\n    const rhfProps = props as RHFAutocompleteProps;\n\n    return (\n      <Controller\n        name={rhfProps.name}\n        control={rhfProps.control}\n        rules={rhfProps.validation}\n        render={({ field }) => renderAutocomplete(field.value, field.onChange)}\n      />\n    );\n  }\n\n  const standardProps = props as StandardAutocompleteProps;\n\n  return renderAutocomplete(standardProps.value, standardProps.onChange);\n}\n\nexport default AutocompleteSelect;\n"],"names":["jsxs","Fragment","createElement","Chip","jsx","Avatar","Autocomplete","Box","CircularProgress","Typography","TextField","Controller"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsDO,SAAS,mBAAmB,OAA0B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AAEJ,QAAM,YAAY,aAAa;AAE/B,QAAM,aAAa,CAAC,OAAuB,gBAAqB;AAC9D,UAAM,YAAY,MAAM,MAAM,GAAG,cAAc;AAC/C,UAAM,SAAS,MAAM,SAAS;AAE9B,WACEA,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,MAAA,UAAU,IAAI,CAAC,QAAQ,UACtBC,sBAAAA;AAAAA,QAACC,SAAAA;AAAAA,QAAA,iCACK,YAAY,EAAE,OAAO,IAD1B;AAAA,UAEC,KAAK,OAAO;AAAA,UACZ,OAAO,kBAAkB,gBAAgB,MAAM,IAAI,OAAO;AAAA,UAC1D,QAAQ,OAAO,MAAMC,+BAACC,SAAAA,UAAO,KAAK,OAAO,KAAK,IAAK;AAAA,UACnD,2CAAa,WAAA,CAAA,CAAU;AAAA,QAAA;AAAA,MAAA,CAE1B;AAAA,MAEA,SAAS,KAAKD,2BAAAA,IAACD,iBAAK,OAAO,IAAI,MAAM,OAAA,CAAQ;AAAA,IAAA,GAChD;AAAA,EAEJ;AAEA,QAAM,eAAe,CAAC,SAAc,WAClCD,sBAAAA,cAAC,uCAAO,YAAS,KAAK,OAAO,UAC1B,mBAAmB,iBAAiB,MAAM,IAAI,OAAO,KACxD;AAGF,QAAM,qBAAqB,CAAC,OAAY,aACtCE,2BAAAA;AAAAA,IAACE,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC;;AAAQ,gDAAK,UAAL,YAAc;AAAA;AAAA,MACvC,sBAAsB,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE;AAAA,MAC9C,UAAU,CAAC,GAAG,aAAa,SAAS,QAAQ;AAAA,MAC5C;AAAA,MACA,YAAY,WAAW,aAAa;AAAA,MACpC,eAAc;AAAA,MACd,aACEN,2BAAAA,KAACO,SAAAA,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,QAAAH,2BAAAA,IAACI,SAAAA,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,QAC5BJ,2BAAAA,IAACK,SAAAA,cAAW,UAAA,cAAA,CAAW;AAAA,MAAA,GACzB;AAAA,MAEF,aAAa,CAAC,WACZL,2BAAAA;AAAAA,QAACM,SAAAA;AAAAA,QAAA,iCACK,SADL;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAKN,MAAI,WAAW;AACb,UAAM,WAAW;AAEjB,WACEN,2BAAAA;AAAAA,MAACO,cAAAA;AAAAA,MAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,SAAS,SAAS;AAAA,QAClB,OAAO,SAAS;AAAA,QAChB,QAAQ,CAAC,EAAE,MAAA,MAAY,mBAAmB,MAAM,OAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAG3E;AAEA,QAAM,gBAAgB;AAEtB,SAAO,mBAAmB,cAAc,OAAO,cAAc,QAAQ;AACvE;;"}

package/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { Control, RegisterOptions } from 'react-hook-form';
+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;
+interface BaseAutocompleteProps {
+    label?: string;
+    options?: SelectOption[];
+    placeholder?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    error?: boolean;
+    helperText?: string;
+    maxChipsToShow?: number;
+    renderOptionItem?: RenderOptionItem;
+    renderChipLabel?: RenderChipLabel;
+}
+interface RHFAutocompleteProps extends BaseAutocompleteProps {
+    name: string;
+    control: Control<any>;
+    validation?: RegisterOptions;
+}
+interface StandardAutocompleteProps extends BaseAutocompleteProps {
+    value: SelectOption | SelectOption[] | null;
+    onChange: (val: SelectOption | SelectOption[] | null) => void;
+}
+export type AutocompleteProps = RHFAutocompleteProps | StandardAutocompleteProps;
+export declare function AutocompleteSelect(props: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export default AutocompleteSelect;

package/components/Autocomplete/Autocomplete.definitions.d.ts

@@ -0,0 +1,9 @@
+export declare const SimpleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\nconst options = [\n  { value: '10', label: '10' },\n  { value: '25', label: '25' },\n];\n\nexport const SimpleExample = () => {\n  const [value, setValue] = useState(options[1]);\n\n  return (\n    <Box sx={{ width: 250 }}>\n      <Autocomplete\n        label=\"Registros por p\u00E1gina\"\n        options={options}\n        value={value}\n        onChange={(val) => {\n          setValue(val as SelectOption);\n        }}\n      />\n      <Typography sx={{ mt: 2 }}>\n        Valor: {value?.label}\n      </Typography>\n    </Box>\n  );\n};\n";
+export declare const WithPlaceholderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\nexport const WithPlaceholderExample = () => {\n  const [value, setValue] = useState(null);\n\n  return (\n    <Box sx={{ width: 300 }}>\n      <Autocomplete\n        label=\"Seleccione una opci\u00F3n\"\n        options={[]}\n        value={value}\n        onChange={(val) => {\n         setValue(val as SelectOption);\n        }}\n        placeholder=\"Ninguna opci\u00F3n seleccionada\"\n      />\n      <Typography sx={{ mt: 2 }}>\n        {value?.label || 'Ninguno'}\n      </Typography>\n    </Box>\n  );\n};\n";
+export declare const MultipleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\nimport { Box } from '@mui/material';\n\nconst options = [\n  { value: 'pending', label: 'Pendiente' },\n  { value: 'approved', label: 'Aprobado' },\n];\n\nexport const MultipleExample = () => {\n  const [value, setValue] = useState([]);\n\n  return (\n    <Box sx={{ width: 400 }}>\n      <Autocomplete\n        multiple\n        options={options}\n        value={value}\n        onChange={(val) => {\n          setValue(val as SelectOption[]);\n        }}\n      />\n    </Box>\n  );\n};\n";
+export declare const MultipleWithLimitAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\n\nexport const MultipleWithLimitExample = () => {\n  const [value, setValue] = useState([]);\n\n  return (\n    <Autocomplete\n      multiple\n      maxChipsToShow={2}\n      options={[]}\n      value={value}\n      onChange={(val) => {\n        setValue(val as SelectOption[]);\n      }}\n    />\n  );\n};\n";
+export declare const CustomRenderOptionAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\nimport { Avatar, Box } from '@mui/material';\n\nconst users = [\n  { value: 'admin', label: 'Administrador', img: '...' },\n];\n\nexport const CustomRenderExample = () => {\n  const [value, setValue] = useState([]);\n\n  return (\n    <Autocomplete\n      multiple\n      options={users}\n      value={value}\n      onChange={(val) => {\n        setValue(val as SelectOption[]);\n      }}\n      renderOptionItem={(item) => (\n        <Box sx={{ display: 'flex', gap: 1 }}>\n          <Avatar src={item.img} />\n          {item.label}\n        </Box>\n      )}\n    />\n  );\n};\n";
+export declare const CustomChipRenderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\nimport { Typography } from '@mui/material';\n\nexport const CustomChipExample = () => {\n  const [value, setValue] = useState([]);\n\n  return (\n    <Autocomplete\n      multiple\n      options={[]}\n      value={value}\n      onChange={(val) => {\n        setValue(val as SelectOption[]);\n      }}\n      renderChipLabel={(item) => (\n        <Typography variant=\"caption\">\n          {item.label.charAt(0)}\n        </Typography>\n      )}\n    />\n  );\n};\n";
+export declare const LoadingAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\n\nexport const LoadingExample = () => {\n  const [value, setValue] = useState(null);\n\n  return (\n    <Autocomplete\n      loading\n      options={[]}\n      value={value}\n      onChange={(val) => {\n\t\t\t\tsetValue(val as SelectOption);\n\t\t\t}}\n    />\n  );\n};\n";
+export declare const EmptyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\n\nexport const EmptyExample = () => {\n  const [value, setValue] = useState(null);\n\n  return (\n    <Autocomplete\n      options={[]}\n      value={value}\n      onChange={(val) => {\n\t\t\t\tsetValue(val as SelectOption);\n\t\t\t}}\n      placeholder=\"No hay opciones\"\n    />\n  );\n};\n";
+export declare const ManyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete, { SelectOption } from './Autocomplete';\n\nconst options = Array.from({ length: 50 }, (_, i) => ({\n  value: i,\n  label: 'Opci\u00F3n ' + i,\n}));\n\nexport const ManyOptionsExample = () => {\n  const [value, setValue] = useState(null);\n\n  return (\n    <Autocomplete\n      options={options}\n      value={value}\n      onChange={(val) => {\n\t\t\t\tsetValue(val as SelectOption);\n\t\t\t}}\n    />\n  );\n};\n";

package/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,107 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createElement } from "react";
+import { Autocomplete, TextField, Box, CircularProgress, Typography, Chip, Avatar } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import { Controller } from "react-hook-form";
+function AutocompleteSelect(props) {
+  const {
+    label,
+    options = [],
+    placeholder,
+    multiple = false,
+    disabled = false,
+    loading = false,
+    error = false,
+    helperText,
+    renderOptionItem,
+    renderChipLabel,
+    maxChipsToShow = 3
+  } = props;
+  const isRHFMode = "control" in props;
+  const renderTags = (value, getTagProps) => {
+    const displayed = value.slice(0, maxChipsToShow);
+    const hidden = value.length - maxChipsToShow;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      displayed.map((option, index) => /* @__PURE__ */ createElement(
+        Chip,
+        __spreadProps(__spreadValues({}, getTagProps({ index })), {
+          key: option.value,
+          label: renderChipLabel ? renderChipLabel(option) : option.label,
+          avatar: option.img ? /* @__PURE__ */ jsx(Avatar, { src: option.img }) : void 0,
+          deleteIcon: /* @__PURE__ */ jsx(ClearIcon, {})
+        })
+      )),
+      hidden > 0 && /* @__PURE__ */ jsx(Chip, { label: `+${hidden} más` })
+    ] });
+  };
+  const renderOption = (propsLi, option) => /* @__PURE__ */ createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
+  const renderAutocomplete = (value, onChange) => /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      multiple,
+      options,
+      value,
+      disabled,
+      loading,
+      getOptionLabel: (opt) => {
+        var _a;
+        return (_a = opt == null ? void 0 : opt.label) != null ? _a : "";
+      },
+      isOptionEqualToValue: (a, b) => a.value === b.value,
+      onChange: (_, newValue) => onChange(newValue),
+      renderOption,
+      renderTags: multiple ? renderTags : void 0,
+      noOptionsText: "No hay opciones",
+      loadingText: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+        /* @__PURE__ */ jsx(Typography, { children: "Cargando..." })
+      ] }),
+      renderInput: (params) => /* @__PURE__ */ jsx(
+        TextField,
+        __spreadProps(__spreadValues({}, params), {
+          label,
+          placeholder,
+          error,
+          helperText
+        })
+      )
+    }
+  );
+  if (isRHFMode) {
+    const rhfProps = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name: rhfProps.name,
+        control: rhfProps.control,
+        rules: rhfProps.validation,
+        render: ({ field }) => renderAutocomplete(field.value, field.onChange)
+      }
+    );
+  }
+  const standardProps = props;
+  return renderAutocomplete(standardProps.value, standardProps.onChange);
+}
+export {
+  AutocompleteSelect as Autocomplete
+};
+//# sourceMappingURL=Autocomplete.js.map

package/components/Autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Autocomplete,\n  TextField,\n  Chip,\n  Avatar,\n  Box,\n  Typography,\n  CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { Controller, Control, RegisterOptions } from \"react-hook-form\";\n\nexport interface SelectOption {\n  value: string | number;\n  label: string;\n  img?: string;\n  disabled?: boolean;\n  group?: string;\n  [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface BaseAutocompleteProps {\n  label?: string;\n  options?: SelectOption[];\n  placeholder?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  error?: boolean;\n  helperText?: string;\n  maxChipsToShow?: number;\n  renderOptionItem?: RenderOptionItem;\n  renderChipLabel?: RenderChipLabel;\n}\n\ninterface RHFAutocompleteProps extends BaseAutocompleteProps {\n  name: string;\n  control: Control<any>;\n  validation?: RegisterOptions;\n}\n\ninterface StandardAutocompleteProps extends BaseAutocompleteProps {\n  value: SelectOption | SelectOption[] | null;\n  onChange: (val: SelectOption | SelectOption[] | null) => void;\n}\n\nexport type AutocompleteProps =\n  | RHFAutocompleteProps\n  | StandardAutocompleteProps;\n\nexport function AutocompleteSelect(props: AutocompleteProps) {\n  const {\n    label,\n    options = [],\n    placeholder,\n    multiple = false,\n    disabled = false,\n    loading = false,\n    error = false,\n    helperText,\n    renderOptionItem,\n    renderChipLabel,\n    maxChipsToShow = 3,\n  } = props;\n\n  const isRHFMode = \"control\" in props;\n\n  const renderTags = (value: SelectOption[], getTagProps: any) => {\n    const displayed = value.slice(0, maxChipsToShow);\n    const hidden = value.length - maxChipsToShow;\n\n    return (\n      <>\n        {displayed.map((option, index) => (\n          <Chip\n            {...getTagProps({ index })}\n            key={option.value}\n            label={renderChipLabel ? renderChipLabel(option) : option.label}\n            avatar={option.img ? <Avatar src={option.img} /> : undefined}\n            deleteIcon={<ClearIcon />}\n          />\n        ))}\n\n        {hidden > 0 && <Chip label={`+${hidden} más`} />}\n      </>\n    );\n  };\n\n  const renderOption = (propsLi: any, option: SelectOption) => (\n    <li {...propsLi} key={option.value}>\n      {renderOptionItem ? renderOptionItem(option) : option.label}\n    </li>\n  );\n\n  const renderAutocomplete = (value: any, onChange: any) => (\n    <Autocomplete\n      multiple={multiple}\n      options={options}\n      value={value}\n      disabled={disabled}\n      loading={loading}\n      getOptionLabel={(opt) => opt?.label ?? \"\"}\n      isOptionEqualToValue={(a, b) => a.value === b.value}\n      onChange={(_, newValue) => onChange(newValue)}\n      renderOption={renderOption}\n      renderTags={multiple ? renderTags : undefined}\n      noOptionsText=\"No hay opciones\"\n      loadingText={\n        <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n          <CircularProgress size={20} />\n          <Typography>Cargando...</Typography>\n        </Box>\n      }\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          label={label}\n          placeholder={placeholder}\n          error={error}\n          helperText={helperText}\n        />\n      )}\n    />\n  );\n\n  if (isRHFMode) {\n    const rhfProps = props as RHFAutocompleteProps;\n\n    return (\n      <Controller\n        name={rhfProps.name}\n        control={rhfProps.control}\n        rules={rhfProps.validation}\n        render={({ field }) => renderAutocomplete(field.value, field.onChange)}\n      />\n    );\n  }\n\n  const standardProps = props as StandardAutocompleteProps;\n\n  return renderAutocomplete(standardProps.value, standardProps.onChange);\n}\n\nexport default AutocompleteSelect;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsDO,SAAS,mBAAmB,OAA0B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AAEJ,QAAM,YAAY,aAAa;AAE/B,QAAM,aAAa,CAAC,OAAuB,gBAAqB;AAC9D,UAAM,YAAY,MAAM,MAAM,GAAG,cAAc;AAC/C,UAAM,SAAS,MAAM,SAAS;AAE9B,WACE,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,UAAU,IAAI,CAAC,QAAQ,UACtB;AAAA,QAAC;AAAA,QAAA,iCACK,YAAY,EAAE,OAAO,IAD1B;AAAA,UAEC,KAAK,OAAO;AAAA,UACZ,OAAO,kBAAkB,gBAAgB,MAAM,IAAI,OAAO;AAAA,UAC1D,QAAQ,OAAO,MAAM,oBAAC,UAAO,KAAK,OAAO,KAAK,IAAK;AAAA,UACnD,gCAAa,WAAA,CAAA,CAAU;AAAA,QAAA;AAAA,MAAA,CAE1B;AAAA,MAEA,SAAS,KAAK,oBAAC,QAAK,OAAO,IAAI,MAAM,OAAA,CAAQ;AAAA,IAAA,GAChD;AAAA,EAEJ;AAEA,QAAM,eAAe,CAAC,SAAc,WAClC,8BAAC,uCAAO,YAAS,KAAK,OAAO,UAC1B,mBAAmB,iBAAiB,MAAM,IAAI,OAAO,KACxD;AAGF,QAAM,qBAAqB,CAAC,OAAY,aACtC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAC;;AAAQ,gDAAK,UAAL,YAAc;AAAA;AAAA,MACvC,sBAAsB,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE;AAAA,MAC9C,UAAU,CAAC,GAAG,aAAa,SAAS,QAAQ;AAAA,MAC5C;AAAA,MACA,YAAY,WAAW,aAAa;AAAA,MACpC,eAAc;AAAA,MACd,aACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,QAAA,oBAAC,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,QAC5B,oBAAC,cAAW,UAAA,cAAA,CAAW;AAAA,MAAA,GACzB;AAAA,MAEF,aAAa,CAAC,WACZ;AAAA,QAAC;AAAA,QAAA,iCACK,SADL;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAKN,MAAI,WAAW;AACb,UAAM,WAAW;AAEjB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,SAAS,SAAS;AAAA,QAClB,OAAO,SAAS;AAAA,QAChB,QAAQ,CAAC,EAAE,MAAA,MAAY,mBAAmB,MAAM,OAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAG3E;AAEA,QAAM,gBAAgB;AAEtB,SAAO,mBAAmB,cAAc,OAAO,cAAc,QAAQ;AACvE;"}

package/components/Autocomplete/index.d.ts

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

package/components/Autocomplete.d.ts

@@ -0,0 +1,2 @@
+export * from './Autocomplete/index'
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "1.4.9",
+  "version": "1.5.0-beta.1",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -153,6 +153,11 @@
       "require": "./components/Avatar/Avatar.cjs",
       "types": "./components/Avatar/Avatar.d.ts"
     },
+    "./components/Autocomplete": {
+      "import": "./components/Autocomplete/Autocomplete.js",
+      "require": "./components/Autocomplete/Autocomplete.cjs",
+      "types": "./components/Autocomplete/Autocomplete.d.ts"
+    },
     "./hooks/ClipBoard": {
       "import": "./hooks/ClipBoard/ClipBoard.js",
       "require": "./hooks/ClipBoard/ClipBoard.cjs",