@adamosuiteservices/ui 1.6.7 → 1.7.7

package/docs/components/ui/combobox.md

@@ -68,17 +68,19 @@ import { Combobox } from "@adamosuiteservices/ui/combobox";
 
 Funciones de renderizado personalizadas para control total sobre la UI. Todas son opcionales y reciben props relevantes.
 
-| 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          |
+**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          |
 
 ## Patrones de Uso
 
@@ -347,7 +349,16 @@ const [values, setValues] = useState<string[]>([]);
 
 El prop `renders` permite personalizar completamente la UI usando el patrón render prop. Todas las funciones son opcionales.
 
-### Custom Option Label
+### 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
 
 ```tsx
 <Combobox
@@ -356,17 +367,19 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
   value={value}
   onValueChange={setValue}
   renders={{
-    optionLabel: ({ option }) => (
-      <div className="flex items-center gap-2">
-        <span className="font-semibold text-blue-600">🚀</span>
-        <span>{option.label}</span>
+    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>
     ),
   }}
 />
 ```
 
-### Custom Display Value
+### Mejorar Display Value con Badge
 
 ```tsx
 <Combobox
@@ -375,14 +388,21 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
   value={value}
   onValueChange={setValue}
   renders={{
-    displayValue: ({ text }) => (
-      <span className="font-semibold text-blue-600">{text}</span>
+    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>
     ),
   }}
 />
 ```
 
-### Custom Trigger Completo
+### Fallback Condicional
 
 ```tsx
 <Combobox
@@ -391,76 +411,71 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
   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-linear-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>
-    ),
+    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 />;
+    },
   }}
 />
 ```
 
-### Custom Empty State
+### Envolver Options con Styling
 
 ```tsx
 <Combobox
   searchable
-  options={[]}
-  renders={{
-    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>
-    ),
-  }}
-/>
-```
-
-### Custom Selected Feedback
-
-```tsx
-<Combobox
-  searchable
-  multiple
   options={frameworks}
-  value={values}
-  onValueChange={setValues}
+  value={value}
+  onValueChange={setValue}
+  selectedFeedback="check"
   renders={{
-    selectedFeedback: ({ isSelected }) => (
-      <span className="text-lg">{isSelected ? "✅" : "⬜"}</span>
+    option: ({ Original, isSelected }) => (
+      <div
+        className={`border-l-4 ${
+          isSelected ? "border-l-blue-500 bg-blue-50" : "border-l-transparent"
+        }`}
+      >
+        <Original />
+      </div>
     ),
   }}
 />
 ```
 
-### Custom Placeholder
+### Mejorar Empty State con Acción
 
 ```tsx
 <Combobox
   searchable
-  alwaysShowPlaceholder
-  options={frameworks}
-  value={value}
-  onValueChange={setValue}
+  options={[]}
   renders={{
-    placeholder: ({ text, hasValue }) => (
-      <span className={hasValue ? "opacity-50 italic" : ""}>{text}</span>
+    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>
+      </div>
     ),
   }}
 />
 ```
 
-### Custom Trigger Icon
+### Custom Option Label (Sin Original)
 
 ```tsx
 <Combobox
@@ -469,16 +484,17 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
   value={value}
   onValueChange={setValue}
   renders={{
-    triggerIcon: ({ open }) => (
-      <span className={`transition-transform ${open ? "rotate-90" : ""}`}>
-        →
-      </span>
+    optionLabel: ({ option }) => (
+      <div className="flex items-center gap-2">
+        <span className="font-semibold text-blue-600">🚀</span>
+        <span>{option.label}</span>
+      </div>
     ),
   }}
 />
 ```
 
-### Custom Search Input
+### Custom Trigger Completo (Sin Original)
 
 ```tsx
 <Combobox
@@ -487,21 +503,22 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
   value={value}
   onValueChange={setValue}
   renders={{
-    searchInput: ({ placeholder }) => (
-      <div className="flex items-center px-3 py-2 border-b">
-        <span className="mr-2">🔍</span>
-        <input
-          type="text"
-          placeholder={placeholder}
-          className="flex-1 outline-none text-sm"
-        />
-      </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>
     ),
   }}
 />
 ```
 
-### Combinando Múltiples Renders
+### Combinando Original y Custom
 
 ```tsx
 <Combobox
@@ -510,27 +527,30 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
   options={frameworks}
   value={values}
   onValueChange={setValues}
-  labels={{
-    placeholder: "Select frameworks...",
-    searchPlaceholder: "Search...",
-  }}
   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>
     ),
-    displayValue: ({ text }) => (
-      <span className="font-semibold text-purple-600">{text}</span>
-    ),
-    selectedFeedback: ({ isSelected }) => (
-      <span className="text-lg">{isSelected ? "✅" : "⬜"}</span>
-    ),
-    empty: ({ text }) => (
-      <div className="py-6 text-center">
-        <div className="text-3xl mb-2">😕</div>
-        <p className="text-sm text-gray-500">{text}</p>
+    // Mejora el Original
+    displayValue: ({ Original, text }) => (
+      <div className="flex items-center gap-2">
+        <Original />
+        {text && <span className="text-xs opacity-50">selected</span>}
       </div>
     ),
   }}
@@ -609,6 +629,7 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
 - **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
 
@@ -622,7 +643,9 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
 **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`
+**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
 
 ## Referencias
 

package/package.json

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