@adamosuiteservices/ui 1.7.8 → 1.7.9

package/docs/components/ui/combobox.md

@@ -68,19 +68,17 @@ import { Combobox } from "@adamosuiteservices/ui/combobox";
 
 Funciones de renderizado personalizadas para control total sobre la UI. Todas son opcionales y reciben props relevantes.
 
-**Patrón Original Component**: Cada render prop recibe un componente `Original` que renderiza la implementación por defecto, permitiendo envolver o mejorar el renderizado sin reimplementar toda la lógica.
-
-| Prop               | Parámetros                                                            | Descripción                             |
-| ------------------ | --------------------------------------------------------------------- | --------------------------------------- |
-| `trigger`          | `{ Original, open, value, displayText, placeholder, hasValue, icon }` | Renderiza el botón trigger completo     |
-| `triggerIcon`      | `{ Original, open }`                                                  | Renderiza el icono del dropdown         |
-| `placeholder`      | `{ Original, text, hasValue }`                                        | Renderiza el texto del placeholder      |
-| `displayValue`     | `{ Original, text, value }`                                           | Renderiza el valor seleccionado         |
-| `option`           | `{ Original, option, isSelected, selectedFeedback }`                  | Renderiza una opción completa           |
-| `optionLabel`      | `{ Original, option }`                                                | Renderiza solo la etiqueta de la opción |
-| `selectedFeedback` | `{ Original, option, isSelected, type }`                              | Renderiza el indicador de selección     |
-| `empty`            | `{ Original, text }`                                                  | Renderiza el estado vacío               |
-| `searchInput`      | `{ Original, placeholder }`                                           | Renderiza el input de búsqueda          |
+| Prop               | Parámetros                                                  | Descripción                             |
+| ------------------ | ----------------------------------------------------------- | --------------------------------------- |
+| `trigger`          | `{ open, value, displayText, placeholder, hasValue, icon }` | Renderiza el botón trigger completo     |
+| `triggerIcon`      | `{ open }`                                                  | Renderiza el icono del dropdown         |
+| `placeholder`      | `{ text, hasValue }`                                        | Renderiza el texto del placeholder      |
+| `displayValue`     | `{ text, value }`                                           | Renderiza el valor seleccionado         |
+| `option`           | `{ option, isSelected, selectedFeedback }`                  | Renderiza una opción completa           |
+| `optionLabel`      | `{ option }`                                                | Renderiza solo la etiqueta de la opción |
+| `selectedFeedback` | `{ option, isSelected, type }`                              | Renderiza el indicador de selección     |
+| `empty`            | `{ text }`                                                  | Renderiza el estado vacío               |
+| `searchInput`      | `{ placeholder }`                                           | Renderiza el input de búsqueda          |
 
 ## Patrones de Uso
 
@@ -347,18 +345,9 @@ const [values, setValues] = useState<string[]>([]);
 
 ## Renderizado Personalizado
 
-El prop `renders` permite personalizar completamente la UI usando el patrón render prop. Todas las funciones son opcionales.
+El prop `renders` permite personalizar completamente la UI usando el patrón render prop. Todas las funciones son opcionales y permiten reemplazar completamente el renderizado por defecto de cada parte del componente.
 
-### Patrón Original Component
-
-Cada render prop recibe un componente `Original` que renderiza la implementación por defecto. Esto permite:
-
-- **Envolver**: Agregar contenedores o elementos adicionales
-- **Mejorar**: Añadir badges, iconos o decoraciones junto al original
-- **Condicional**: Usar el original como fallback para ciertos estados
-- **Componer**: Mezclar renderizado custom y default según condiciones
-
-### Envolver el Trigger con Label
+### Custom Trigger
 
 ```tsx
 <Combobox
@@ -367,13 +356,16 @@ Cada render prop recibe un componente `Original` que renderiza la implementació
   value={value}
   onValueChange={setValue}
   renders={{
-    trigger: ({ Original }) => (
-      <div className="border border-purple-300 p-2 rounded-lg bg-purple-50">
-        <label className="text-xs font-medium text-purple-700 mb-1 block">
-          Choose your framework:
-        </label>
-        <Original />
-      </div>
+    trigger: ({ open, displayText, placeholder, hasValue }) => (
+      <button
+        type="button"
+        className="flex items-center justify-between w-full px-4 py-2 text-sm bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg shadow-md hover:shadow-lg transition-all"
+      >
+        <span>{hasValue ? displayText : placeholder}</span>
+        <span className={`transition-transform ${open ? "rotate-180" : ""}`}>
+          ▼
+        </span>
+      </button>
     ),
   }}
 />
@@ -382,53 +374,10 @@ Cada render prop recibe un componente `Original` que renderiza la implementació
 ### Mejorar Display Value con Badge
 
 ```tsx
-<Combobox
-  searchable
-  options={frameworks}
-  value={value}
-  onValueChange={setValue}
-  renders={{
-    displayValue: ({ Original, text }) => (
-      <div className="flex items-center gap-2">
-        <Original />
-        {text && (
-          <span className="px-1.5 py-0.5 text-xs bg-green-100 text-green-700 rounded">
-            Active
-          </span>
-        )}
-      </div>
-    ),
-  }}
-/>
-```
 
-### Fallback Condicional
-
-```tsx
-<Combobox
-  searchable
-  options={frameworks}
-  value={value}
-  onValueChange={setValue}
-  renders={{
-    trigger: ({ Original, hasValue, displayText }) => {
-      // Custom cuando hay valor
-      if (hasValue) {
-        return (
-          <button className="w-full px-4 py-2 bg-green-600 text-white rounded-md">
-            ✓ {displayText}
-          </button>
-        );
-      }
-
-      // Fallback al original cuando está vacío
-      return <Original />;
-    },
-  }}
-/>
 ```
 
-### Envolver Options con Styling
+### Custom Display Value con Badge
 
 ```tsx
 <Combobox
@@ -436,46 +385,22 @@ Cada render prop recibe un componente `Original` que renderiza la implementació
   options={frameworks}
   value={value}
   onValueChange={setValue}
-  selectedFeedback="check"
   renders={{
-    option: ({ Original, isSelected }) => (
-      <div
-        className={`border-l-4 ${
-          isSelected ? "border-l-blue-500 bg-blue-50" : "border-l-transparent"
-        }`}
-      >
-        <Original />
-      </div>
-    ),
-  }}
-/>
-```
-
-### Mejorar Empty State con Acción
-
-```tsx
-<Combobox
-  searchable
-  options={[]}
-  renders={{
-    empty: ({ Original }) => (
-      <div className="space-y-3">
-        <Original />
-        <div className="px-4 pb-3">
-          <button
-            onClick={() => console.log("Add new")}
-            className="w-full px-3 py-1.5 text-xs text-blue-600 border border-blue-200 rounded hover:bg-blue-50"
-          >
-            + Create new item
-          </button>
-        </div>
+    displayValue: ({ text }) => (
+      <div className="flex items-center gap-2">
+        <span>{text}</span>
+        {text && (
+          <span className="px-1.5 py-0.5 text-xs bg-green-100 text-green-700 rounded font-medium">
+            Active
+          </span>
+        )}
       </div>
     ),
   }}
 />
 ```
 
-### Custom Option Label (Sin Original)
+### Custom Option Label
 
 ```tsx
 <Combobox
@@ -494,63 +419,23 @@ Cada render prop recibe un componente `Original` que renderiza la implementació
 />
 ```
 
-### Custom Trigger Completo (Sin Original)
+### Custom Empty State
 
 ```tsx
 <Combobox
   searchable
-  options={frameworks}
-  value={value}
-  onValueChange={setValue}
-  renders={{
-    trigger: ({ open, displayText, placeholder, hasValue }) => (
-      <button
-        type="button"
-        className="flex items-center justify-between w-full px-4 py-2 text-sm bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg shadow-md hover:shadow-lg transition-all"
-      >
-        <span>{hasValue ? displayText : placeholder}</span>
-        <span className={`transition-transform ${open ? "rotate-180" : ""}`}>
-          ▼
-        </span>
-      </button>
-    ),
+  options={[]}
+  labels={{
+    noItemsFound: "No items found.",
   }}
-/>
-```
-
-### Combinando Original y Custom
-
-```tsx
-<Combobox
-  searchable
-  multiple
-  options={frameworks}
-  value={values}
-  onValueChange={setValues}
   renders={{
-    // Usa Original para envolver
-    trigger: ({ Original }) => (
-      <div className="relative">
-        <Original />
-        {values.length > 0 && (
-          <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
-            {values.length}
-          </span>
-        )}
-      </div>
-    ),
-    // Custom completo sin Original
-    optionLabel: ({ option }) => (
-      <div className="flex items-center gap-2">
-        <span>🚀</span>
-        <span className="font-medium">{option.label}</span>
-      </div>
-    ),
-    // Mejora el Original
-    displayValue: ({ Original, text }) => (
-      <div className="flex items-center gap-2">
-        <Original />
-        {text && <span className="text-xs opacity-50">selected</span>}
+    empty: ({ text }) => (
+      <div className="py-8 text-center">
+        <div className="text-4xl mb-2">🔍</div>
+        <p className="text-sm font-medium text-muted-foreground">{text}</p>
+        <p className="text-xs text-muted-foreground mt-1">
+          Try adjusting your search criteria
+        </p>
       </div>
     ),
   }}
@@ -629,7 +514,6 @@ Cada render prop recibe un componente `Original` que renderiza la implementació
 - **icon**: Se muestra con `opacity-50` por defecto cuando se proporciona el prop `icon`
 - **Render props**: Tienen prioridad sobre renderizado por defecto, permiten personalización completa
 - **Composición de renders**: Puedes combinar múltiples render props para personalización granular
-- **Original component**: Cada render prop recibe un componente `Original` para renderizar la implementación por defecto, permitiendo envolver o mejorar sin reimplementar
 
 ## Troubleshooting
 
@@ -643,9 +527,7 @@ Cada render prop recibe un componente `Original` que renderiza la implementació
 **Icon no se muestra**: Asegúrate de pasar el prop `icon` con un componente válido  
 **Placeholder desaparece al seleccionar**: Si quieres mantenerlo visible, usa `alwaysShowPlaceholder={true}`  
 **Render prop no funciona**: Verifica que el render prop retorne un `ReactNode` válido  
-**Custom trigger pierde funcionalidad**: Cuando usas `renders.trigger`, debes manejar el click manualmente o envolver en `PopoverTrigger`  
-**Original component no renderiza**: Asegúrate de usar `<Original />` como componente JSX, no como función  
-**Quiero envolver sin reimplementar**: Usa el componente `Original` que recibe cada render prop para mantener la funcionalidad por defecto
+**Custom trigger pierde funcionalidad**: Cuando usas `renders.trigger`, debes manejar el click manualmente o envolver en `PopoverTrigger`
 
 ## Referencias
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",