ucol-ui 0.1.23 → 0.1.36

package/README.md

@@ -1,31 +1,498 @@
-# CalvosTsx
+# ucol-ui
 
-CalvosTsx es una librería de componentes para la creación de interfaces de usuario.
+<div align="center">
 
-## Instalación
+![Version](https://img.shields.io/badge/version-0.1.23-blue.svg)
+![React](https://img.shields.io/badge/react-19.0.0-61dafb.svg)
+![TypeScript](https://img.shields.io/badge/typescript-5.7.3-blue.svg)
+![Ant Design](https://img.shields.io/badge/antd-5.24.0-1890ff.svg)
+![TailwindCSS](https://img.shields.io/badge/tailwindcss-4.1.11-38bdf8.svg)
 
-Para instalar la librería, ejecute el siguiente comando:
+**Una librería completa de componentes React para crear interfaces de usuario modernas y dinámicas**
+
+[Demo en vivo](https://kamey-components.netlify.app/) | [Documentación](https://github.com/8Wada/ucol-ui) | [Reportar un error](https://github.com/8Wada/ucol-ui/issues)
+
+</div>
+
+---
+
+## 📋 Tabla de Contenidos
+
+- [Características](#-características)
+- [Instalación](#-instalación)
+- [Componentes Principales](#-componentes-principales)
+- [Guía de Inicio Rápido](#-guía-de-inicio-rápido)
+- [Documentación de Componentes](#-documentación-de-componentes)
+- [Hooks Personalizados](#-hooks-personalizados)
+- [API y Configuración](#-api-y-configuración)
+- [Desarrollo](#-desarrollo)
+- [Scripts Disponibles](#-scripts-disponibles)
+- [Tecnologías](#-tecnologías)
+- [Contribuir](#-contribuir)
+- [Licencia](#-licencia)
+
+## ✨ Características
+
+- 🎨 **Componentes Dinámicos**: Formularios, tablas y CRUD completamente configurables
+- 🔐 **Sistema de Permisos**: Control granular de acceso basado en roles
+- 📊 **Exportación de Datos**: Soporte para Excel y PDF
+- 📤 **Carga Masiva**: Importación de datos mediante archivos Excel/CSV
+- 🎯 **TypeScript First**: Totalmente tipado para mejor experiencia de desarrollo
+- 🚀 **React Query**: Gestión de estado del servidor integrada
+- 💅 **Estilos Modernos**: Combinación de Ant Design y Tailwind CSS
+- 📱 **Responsive**: Diseño adaptable a todos los dispositivos
+- 🎭 **Storybook**: Documentación interactiva de componentes
+- ⚡ **Optimizado**: Bundle optimizado con Vite
+
+## 📦 Instalación
+
+### Usando npm
 
 ```bash
 npm install ucol-ui
 ```
 
-o
+### Usando pnpm
 
 ```bash
 pnpm install ucol-ui
 ```
 
-## Peer Dependencies
+### Usando yarn
 
-La librería requiere que tengas instaladas las siguientes dependencias:
+```bash
+yarn add ucol-ui
+```
+
+## 📚 Peer Dependencies
+
+La librería requiere las siguientes dependencias instaladas en tu proyecto:
 
 ```json
 {
-  "antd": "^5.24.4",
-  "axios": "^1.8.4",
+  "antd": "^5.24.0",
+  "axios": "^1.7.9",
   "dayjs": "^1.11.13",
-  "react": "^18.3.1",
-  "react-dom": "^18.3.1"
+  "react": "19.0.0",
+  "react-dom": "19.0.0"
 }
 ```
+
+### Instalación de Peer Dependencies
+
+```bash
+npm install antd axios dayjs react react-dom
+```
+
+### Importar estilos
+
+No olvides importar los estilos CSS en tu aplicación:
+
+```tsx
+import 'ucol-ui/dist/style.css';
+```
+
+## 🧩 Componentes Principales
+
+### 🎯 DynamicCrud
+
+Componente completo CRUD con tabla, formulario modal y acciones personalizables.
+
+```tsx
+import { DynamicCrud } from 'ucol-ui';
+
+<DynamicCrud
+  title="Gestión de Usuarios"
+  description="Administra los usuarios del sistema"
+  columns={[
+    { title: 'Nombre', dataIndex: 'name', key: 'name' },
+    { title: 'Email', dataIndex: 'email', key: 'email' },
+  ]}
+  fields={[
+    { name: 'name', label: 'Nombre', type: 'text', required: true },
+    { name: 'email', label: 'Email', type: 'email', required: true },
+  ]}
+  data={users}
+  onCreate={handleCreate}
+  onEdit={handleEdit}
+  onDelete={handleDelete}
+/>
+```
+
+### 📝 DynamicForm
+
+Formulario dinámico generado a partir de configuración JSON.
+
+```tsx
+import { DynamicForm } from 'ucol-ui';
+
+<DynamicForm
+  mode="create"
+  title="Nuevo Usuario"
+  layout="vertical"
+  cols={2}
+  fields={[
+    { name: 'name', label: 'Nombre', type: 'text', required: true },
+    { name: 'email', label: 'Email', type: 'email', required: true },
+    { name: 'age', label: 'Edad', type: 'number' },
+    { name: 'active', label: 'Activo', type: 'switch' },
+  ]}
+  onSubmit={handleSubmit}
+/>
+```
+
+### 📊 DynamicTable
+
+Tabla configurable con búsqueda, filtros, paginación y exportación.
+
+```tsx
+import { DynamicTable } from 'ucol-ui';
+
+<DynamicTable
+  title="Lista de Productos"
+  columns={columns}
+  data={products}
+  loading={isLoading}
+  showCreateButton
+  onCreate={handleCreate}
+  onEdit={handleEdit}
+  onDelete={handleDelete}
+  exportToExcel={{
+    fileName: 'productos',
+    sheetName: 'Productos',
+    data: products,
+    columns: columns
+  }}
+  searchConfig={{
+    searchableFields: ['name', 'category', 'price']
+  }}
+/>
+```
+
+### 🔘 Btn (Button)
+
+Botón versátil con presets, variantes de color e iconos.
+
+```tsx
+import { Btn } from 'ucol-ui';
+
+// Botón con preset
+<Btn preset="save" variant="success">Guardar</Btn>
+<Btn preset="delete" variant="danger">Eliminar</Btn>
+<Btn preset="edit" variant="info">Editar</Btn>
+
+// Botón personalizado
+<Btn 
+  icon={<CustomIcon />} 
+  variant="warning"
+  size="large"
+>
+  Acción Personalizada
+</Btn>
+
+// Solo icono
+<Btn preset="add" iconOnly />
+```
+
+### 🔐 PermissionsProvider
+
+Sistema de gestión de permisos basado en roles.
+
+```tsx
+import { PermissionsProvider, usePermissions } from 'ucol-ui';
+
+// Configurar permisos
+const permissionsConfig = {
+  users: {
+    admin: ['create', 'read', 'update', 'delete'],
+    user: ['read'],
+  }
+};
+
+// Envolver tu aplicación
+<PermissionsProvider role="admin" config={permissionsConfig}>
+  <App />
+</PermissionsProvider>
+
+// Usar en componentes
+function UserActions() {
+  const { canCreate, canDelete } = usePermissions('users');
+  
+  return (
+    <>
+      {canCreate && <Btn preset="add">Crear</Btn>}
+      {canDelete && <Btn preset="delete">Eliminar</Btn>}
+    </>
+  );
+}
+```
+
+### 📤 BulkUploadModal
+
+Modal para carga masiva de datos con validación.
+
+```tsx
+import { BulkUploadModal } from 'ucol-ui';
+
+<BulkUploadModal
+  title="Importar Usuarios"
+  visible={showModal}
+  config={{
+    allowedFormats: ['xlsx', 'csv'],
+    maxFileSize: 5,
+    templateFields: [
+      { name: 'name', label: 'Nombre', required: true },
+      { name: 'email', label: 'Email', required: true },
+    ]
+  }}
+  onValidateData={validateUsers}
+  onFinish={importUsers}
+  onCancel={() => setShowModal(false)}
+/>
+```
+
+### 🔍 SharedField
+
+Campo de formulario compartido con validación y tipos múltiples.
+
+```tsx
+import { SharedField } from 'ucol-ui';
+
+<SharedField
+  name="username"
+  label="Usuario"
+  type="text"
+  required={true}
+  placeholder="Ingresa tu usuario"
+  validations={{
+    minLength: 3,
+    maxLength: 20,
+    pattern: /^[a-zA-Z0-9]+$/
+  }}
+/>
+```
+
+## 🎣 Hooks Personalizados
+
+### useCrudOperations
+
+Hook para operaciones CRUD con React Query integrado.
+
+```tsx
+import { useCrudOperations } from 'ucol-ui';
+
+function UserManagement() {
+  const {
+    data: users,
+    isLoading,
+    createItemAsync,
+    updateItemAsync,
+    deleteItemAsync,
+    refetch
+  } = useCrudOperations({
+    getAll: () => api.getUsers(),
+    create: (user) => api.createUser(user),
+    update: (user) => api.updateUser(user),
+    delete: (user) => api.deleteUser(user.id),
+    idField: 'id',
+    entityName: 'usuario'
+  });
+
+  const handleCreate = async (values) => {
+    await createItemAsync(values);
+  };
+
+  return <DynamicTable data={users} loading={isLoading} />;
+}
+```
+
+### useFetchQuery
+
+Hook wrapper de React Query con configuración predeterminada.
+
+```tsx
+import { useFetchQuery } from 'ucol-ui';
+
+const { data, isLoading, error } = useFetchQuery({
+  queryKey: ['users'],
+  queryFn: fetchUsers,
+  config: {
+    onSuccess: (data) => console.log('Datos cargados:', data),
+    onError: (error) => console.error('Error:', error)
+  }
+});
+```
+
+### useNotification
+
+Hook para mostrar notificaciones del sistema.
+
+```tsx
+import { openNotification } from 'ucol-ui';
+
+openNotification('success', 'Operación exitosa', 'Los datos se guardaron correctamente');
+openNotification('error', 'Error', 'No se pudo completar la operación');
+openNotification('warning', 'Advertencia', 'Revisa los datos ingresados');
+openNotification('info', 'Información', 'Proceso en curso');
+```
+
+### useAsync
+
+Hook para manejar operaciones asíncronas.
+
+```tsx
+import { useAsync } from 'ucol-ui';
+
+function DataDisplay() {
+  const { data, loading, error } = useAsync(
+    async () => await fetchData(),
+    [dependency]
+  );
+
+  if (loading) return <Spin />;
+  if (error) return <Alert type="error" message={error.message} />;
+  
+  return <div>{JSON.stringify(data)}</div>;
+}
+```
+
+## ⚙️ API y Configuración
+
+### Configuración de API en DynamicForm
+
+```tsx
+<DynamicForm
+  apiConfig={{
+    url: 'https://api.example.com/users',
+    method: 'POST',
+    headers: {
+      'Authorization': 'Bearer token',
+      'Content-Type': 'application/json'
+    },
+    responseDataPath: 'data.user'
+  }}
+/>
+```
+
+### Tipos de Campos de Formulario
+
+- `text` - Campo de texto
+- `textarea` - Área de texto
+- `number` - Número
+- `email` - Email
+- `password` - Contraseña
+- `select` - Lista desplegable
+- `multiselect` - Selección múltiple
+- `checkbox` - Casilla de verificación
+- `radio` - Botones de radio
+- `switch` - Interruptor
+- `date` - Selector de fecha
+- `daterange` - Rango de fechas
+- `time` - Selector de hora
+- `upload` - Carga de archivos
+- `slider` - Deslizador
+- `color` - Selector de color
+
+### Validaciones
+
+```tsx
+{
+  required: true,
+  minLength: 5,
+  maxLength: 50,
+  min: 0,
+  max: 100,
+  pattern: /^[A-Z]/,
+  email: true,
+  url: true,
+  customValidator: (value) => value !== 'admin' || 'No se permite este valor'
+}
+```
+
+## 🛠️ Desarrollo
+
+### Clonar el repositorio
+
+```bash
+git clone https://github.com/8Wada/ucol-ui.git
+cd ucol-ui
+```
+
+### Instalar dependencias
+
+```bash
+pnpm install
+```
+
+### Iniciar el entorno de desarrollo
+
+```bash
+pnpm dev
+```
+
+### Ejecutar Storybook
+
+```bash
+pnpm storybook
+```
+
+## 📜 Scripts Disponibles
+
+| Script | Descripción |
+|--------|-------------|
+| `pnpm dev` | Inicia el servidor de desarrollo con Vite |
+| `pnpm build` | Construye la librería para producción |
+| `pnpm lint` | Ejecuta ESLint para revisar el código |
+| `pnpm preview` | Previsualiza la build de producción |
+| `pnpm storybook` | Inicia Storybook en el puerto 6006 |
+| `pnpm build-storybook` | Construye Storybook para producción |
+
+## 🚀 Tecnologías
+
+- **React 19** - Librería de UI
+- **TypeScript 5.7** - Tipado estático
+- **Vite 6** - Build tool y dev server
+- **Ant Design 5** - Framework de componentes UI
+- **Tailwind CSS 4** - Framework de utilidades CSS
+- **TanStack Query (React Query)** - Gestión de estado del servidor
+- **Storybook 8** - Desarrollo y documentación de componentes
+- **React Icons** - Iconos
+- **Axios** - Cliente HTTP
+- **Day.js** - Manejo de fechas
+- **jsPDF & jsPDF-AutoTable** - Generación de PDFs
+- **XLSX** - Manejo de archivos Excel
+- **AJV** - Validación de esquemas JSON
+
+## 🤝 Contribuir
+
+Las contribuciones son bienvenidas. Por favor:
+
+1. Fork el proyecto
+2. Crea tu rama de características (`git checkout -b feature/AmazingFeature`)
+3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
+4. Push a la rama (`git push origin feature/AmazingFeature`)
+5. Abre un Pull Request
+
+## 📄 Licencia
+
+Este proyecto está bajo la licencia que especifique el repositorio.
+
+## 👥 Autores
+
+- **@RKamey** - *Colaborador*
+- **@8Wada** - *Colaborador*
+
+## 🔗 Enlaces
+
+- [Repositorio en GitHub](https://github.com/8Wada/ucol-ui)
+- [Demo en vivo](https://kamey-components.netlify.app/)
+- [Reportar Issues](https://github.com/8Wada/ucol-ui/issues)
+- [NPM Package](https://www.npmjs.com/package/ucol-ui)
+
+---
+
+<div align="center">
+
+**Hecho con ❤️ por el equipo de calvos-tsx**
+
+</div>

package/dist/ucol-ui.css

@@ -1 +1 @@
-/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-red-700:oklch(50.5% .213 27.518);--color-orange-600:oklch(64.6% .222 41.116);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-700:oklch(55.4% .135 66.442);--color-green-50:oklch(98.2% .018 155.826);--color-sky-500:oklch(68.5% .169 237.323);--color-sky-700:oklch(50% .134 242.749);--color-blue-50:oklch(97% .014 254.604);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*,:after,:before,::backdrop{border-color:var(--color-gray-200,currentColor)}::file-selector-button{border-color:var(--color-gray-200,currentColor)}}@layer components;@layer utilities{.visible{visibility:visible}.static{position:static}.my-4{margin-block:calc(var(--spacing)*4)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.\!mb-4{margin-bottom:calc(var(--spacing)*4)!important}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.flex-shrink-0{flex-shrink:0}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-x-auto{overflow-x:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-blue-500{border-color:var(--color-blue-500)}.\!bg-blue-600{background-color:var(--color-blue-600)!important}.\!bg-orange-600{background-color:var(--color-orange-600)!important}.\!bg-red-500{background-color:var(--color-red-500)!important}.\!bg-sky-500{background-color:var(--color-sky-500)!important}.\!bg-yellow-500{background-color:var(--color-yellow-500)!important}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-green-50{background-color:var(--color-green-50)}.bg-white{background-color:var(--color-white)}.bg-yellow-50{background-color:var(--color-yellow-50)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.\!text-white{color:var(--color-white)!important}.text-blue-500{color:var(--color-blue-500)}.text-gray-500{color:var(--color-gray-500)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.hover\:\!bg-red-700:hover{background-color:var(--color-red-700)!important}.hover\:\!bg-sky-700:hover{background-color:var(--color-sky-700)!important}.hover\:\!bg-yellow-700:hover{background-color:var(--color-yellow-700)!important}.hover\:text-gray-700:hover{color:var(--color-gray-700)}}@media (min-width:64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}}.dynamic-table .ant-table{background:0 0}.dynamic-table .ant-table-thead>tr>th{background:#f8fafc;border-bottom:1px solid #e2e8f0}.dynamic-table .ant-table-tbody>tr>td{border-bottom:1px solid #e2e8f0}.dynamic-table .ant-table-tbody>tr:hover>td{background:#f8fafc}.dynamic-table .ant-table-pagination{margin:16px 24px}.action-button{border-radius:6px;padding:4px 8px}button.ant-btn-warning,button.ant-btn-info,button.ant-btn-danger,button.ant-btn-dangerous,button.ant-btn-primary,button.ant-btn-success,button.ant-btn-reload,button.ant-btn-download{background-color:#fff;border:2px solid;font-weight:bolder;box-shadow:0 0}button.ant-btn-warning{color:#ffca2c;border-color:#ffca2c}button.ant-btn-danger,button.ant-btn-dangerous{color:#dc3545;border-color:#dc3545}button.ant-btn-warning:hover{color:#ffca2c;border-color:#ffca2c}button.ant-btn-danger:hover,button.ant-btn-dangerous:hover{color:#dc3545;border-color:#dc3545}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-red-700:oklch(50.5% .213 27.518);--color-orange-600:oklch(64.6% .222 41.116);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-700:oklch(55.4% .135 66.442);--color-green-50:oklch(98.2% .018 155.826);--color-sky-500:oklch(68.5% .169 237.323);--color-sky-700:oklch(50% .134 242.749);--color-blue-50:oklch(97% .014 254.604);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*,:after,:before,::backdrop{border-color:var(--color-gray-200,currentColor)}::file-selector-button{border-color:var(--color-gray-200,currentColor)}}@layer components;@layer utilities{.visible{visibility:visible}.static{position:static}.my-4{margin-block:calc(var(--spacing)*4)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.\!mb-4{margin-bottom:calc(var(--spacing)*4)!important}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.flex-shrink-0{flex-shrink:0}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-x-auto{overflow-x:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-blue-500{border-color:var(--color-blue-500)}.\!bg-blue-600{background-color:var(--color-blue-600)!important}.\!bg-orange-600{background-color:var(--color-orange-600)!important}.\!bg-red-500{background-color:var(--color-red-500)!important}.\!bg-sky-500{background-color:var(--color-sky-500)!important}.\!bg-yellow-500{background-color:var(--color-yellow-500)!important}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-green-50{background-color:var(--color-green-50)}.bg-white{background-color:var(--color-white)}.bg-yellow-50{background-color:var(--color-yellow-50)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.\!text-white{color:var(--color-white)!important}.text-blue-500{color:var(--color-blue-500)}.text-gray-500{color:var(--color-gray-500)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.hover\:\!bg-red-700:hover{background-color:var(--color-red-700)!important}.hover\:\!bg-sky-700:hover{background-color:var(--color-sky-700)!important}.hover\:\!bg-yellow-700:hover{background-color:var(--color-yellow-700)!important}.hover\:text-gray-700:hover{color:var(--color-gray-700)}}@media (min-width:64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}}.dynamic-table .ant-table{background:0 0}.dynamic-table .ant-table-thead>tr>th{background:#f8fafc;border-bottom:1px solid #e2e8f0}.dynamic-table .ant-table-tbody>tr>td{border-bottom:1px solid #e2e8f0}.dynamic-table .ant-table-tbody>tr:hover>td{background:#f8fafc}.dynamic-table .ant-table-pagination{margin:16px 24px}.action-button{border-radius:6px;padding:4px 8px}button.ant-btn-warning,button.ant-btn-info,button.ant-btn-danger,button.ant-btn-dangerous,button.ant-btn-primary,button.ant-btn-success,button.ant-btn-reload,button.ant-btn-download{background-color:#fff;border:2px solid;font-weight:bolder;box-shadow:0 0}button.ant-btn-warning{color:#ffca2c;border-color:#ffca2c}button.ant-btn-danger,button.ant-btn-dangerous{color:#dc3545;border-color:#dc3545}button.ant-btn-warning:hover{color:#ffca2c;border-color:#ffca2c}button.ant-btn-danger:hover,button.ant-btn-dangerous:hover{color:#dc3545;border-color:#dc3545}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

package/dist/ucol-ui.d.ts

@@ -596,10 +596,11 @@ declare type SortFunction<T> = (a: T, b: T) => number;
 
 /**
  * Función para ordenar un arreglo de objetos por una propiedad específica.
+ * Soporta notación de punto para propiedades anidadas (ej: "user.first_name").
  * @param key Propiedad por la que se va a ordenar.
  * @returns Función de comparación para usar en el método `sort` de un arreglo.
  */
-export declare const sortOrder: <T extends object>(key: keyof T) => SortFunction<T>;
+export declare const sortOrder: <T extends object>(key: keyof T | string) => SortFunction<T>;
 
 export declare interface TemplateConfig {
     entityName: string;
@@ -653,6 +654,20 @@ declare interface UploadConfig {
     renderPreview?: (value: string) => React.ReactNode;
 }
 
+/**
+ * Custom hook to handle asynchronous operations.
+ *
+ * @template T - The type of the data returned by the async function.
+ * @param {() => Promise<T>} asyncFunction - The asynchronous function to execute.
+ * @param {unknown[]} [dependencies] - Optional array of dependencies for the useEffect hook.
+ * @returns {{ data: T | undefined, error: Error | null, loading: boolean }} - An object containing the data, error, and loading state.
+ */
+export declare const useAsync: <T>(asyncFunction: () => Promise<T>, dependencies?: unknown[]) => {
+    data: T | undefined;
+    error: Error | null;
+    loading: boolean;
+};
+
 export declare function useCrudOperations<T extends {
     [key: string]: any;
 }, CreateT = Omit<T, 'id'>>({ getAll, create, update, delete: deleteItem, idField, entityName, }: CrudOperations<T, CreateT>): {