@adamosuiteservices/ui 2.15.1 → 2.16.1

package/dist/date-picker-selector.js

@@ -1,22 +1,35 @@
 import { j as e } from "./jsx-runtime-BzflLqGi.js";
-import { B as h } from "./button-B0lWuG-D.js";
-import { b as _, C as P, s as O } from "./calendar-CfqtuOWv.js";
-import { C as S } from "./combobox-DGuQtXjP.js";
-import { P as A, c as B, b as F } from "./popover-DcQ18EVl.js";
-import { useRef as v, useState as u } from "react";
-function M(n, o, c) {
-  return _(n, -o, c);
+import { B as b } from "./button-B0lWuG-D.js";
+import { b as A, C as F, s as i } from "./calendar-CfqtuOWv.js";
+import { C as V } from "./combobox-CtSJw4m1.js";
+import { P as w, c as B, b as M } from "./popover-DcQ18EVl.js";
+import { useRef as x, useState as y } from "react";
+function D(l, n, u) {
+  return A(l, -n, u);
 }
-function H({
-  dateRange: n,
-  onDateRangeChange: o,
-  labels: c,
-  combobox: b,
-  calendar: x,
-  "aria-invalid": C,
-  disabled: D
+function J({
+  dateRange: l,
+  onDateRangeChange: n,
+  labels: u,
+  combobox: C,
+  calendar: j,
+  "aria-invalid": g,
+  disabled: _
 }) {
-  const m = v(null), d = v(void 0), [i, t] = u(void 0), [j, l] = u(!1), [r, g] = u(n), s = { ...{
+  const f = x(null), m = x(void 0), R = (a) => {
+    if (!a.from || !a.to) return;
+    const o = i(/* @__PURE__ */ new Date()), h = [
+      { value: "7_days", days: 7 },
+      { value: "30_days", days: 30 },
+      { value: "90_days", days: 90 }
+    ];
+    for (const r of h) {
+      const S = D(o, r.days);
+      if (i(a.from).getTime() === S.getTime() && i(a.to).getTime() === o.getTime())
+        return r.value;
+    }
+    return "custom";
+  }, [p, t] = y(() => R(l)), [k, c] = y(!1), [d, L] = y(l), s = { ...{
     last7Days: "Last 7 days",
     last30Days: "Last 30 days",
     last90Days: "Last 90 days",
@@ -24,31 +37,31 @@ function H({
     placeholder: "Date",
     cancel: "Cancel",
     apply: "Apply"
-  }, ...c }, R = (a) => {
-    const y = O(/* @__PURE__ */ new Date()), f = {
+  }, ...u }, P = (a) => {
+    const o = i(/* @__PURE__ */ new Date()), r = {
       "7_days": 7,
       "30_days": 30,
       "90_days": 90
     }[a];
-    return f ? { from: M(y, f), to: y } : { from: void 0, to: void 0 };
-  }, p = (a) => {
-    t(d.current), l(!1);
-  }, k = (a) => {
+    return r ? { from: D(o, r), to: o } : { from: void 0, to: void 0 };
+  }, v = (a) => {
+    t(m.current), c(!1);
+  }, T = (a) => {
     if (a === "custom") {
-      d.current = i, t(a), l(!0);
+      m.current = p, t(a), c(!0);
       return;
     }
-    t(a), o(R(a));
-  }, L = () => {
-    if (r?.from && r?.to) {
-      o(r), t("custom"), l(!1);
+    t(a), n(P(a));
+  }, O = () => {
+    if (d?.from && d?.to) {
+      n(d), t("custom"), c(!1);
       return;
     }
-    t(d.current), l(!1);
+    t(m.current), c(!1);
   };
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
-      S,
+      V,
       {
         alwaysShowPlaceholder: !0,
         selectedFeedback: "check",
@@ -60,41 +73,41 @@ function H({
           { label: s.custom, value: "custom" }
         ],
         labels: { placeholder: s.placeholder },
-        value: i,
-        onValueChange: k,
-        "aria-invalid": C,
-        disabled: D,
+        value: p,
+        onValueChange: T,
+        "aria-invalid": g,
+        disabled: _,
         ref: (a) => {
-          m.current = a;
+          f.current = a;
         },
-        ...b
+        ...C
       }
     ),
     /* @__PURE__ */ e.jsxs(
-      A,
+      w,
       {
-        open: j,
+        open: k,
         onOpenChange: (a) => {
-          !a && i === "custom" && p();
+          !a && p === "custom" && v();
         },
         children: [
-          /* @__PURE__ */ e.jsx(B, { virtualRef: m }),
-          /* @__PURE__ */ e.jsxs(F, { align: "start", children: [
+          /* @__PURE__ */ e.jsx(B, { virtualRef: f }),
+          /* @__PURE__ */ e.jsxs(M, { align: "start", children: [
             /* @__PURE__ */ e.jsx(
-              P,
+              F,
               {
                 required: !0,
                 mode: "range",
-                selected: r,
-                onSelect: g,
+                selected: d,
+                onSelect: L,
                 captionLayout: "dropdown",
                 classNames: { root: "adm:p-0!" },
-                ...x
+                ...j
               }
             ),
             /* @__PURE__ */ e.jsxs("div", { className: "adm:mt-2 adm:flex adm:justify-end adm:gap-2", children: [
-              /* @__PURE__ */ e.jsx(h, { variant: "link", onClick: () => p(), children: s.cancel }),
-              /* @__PURE__ */ e.jsx(h, { variant: "link", onClick: L, children: s.apply })
+              /* @__PURE__ */ e.jsx(b, { variant: "link", onClick: () => v(), children: s.cancel }),
+              /* @__PURE__ */ e.jsx(b, { variant: "link", onClick: O, children: s.apply })
             ] })
           ] })
         ]
@@ -103,5 +116,5 @@ function H({
   ] });
 }
 export {
-  H as DatePickerSelector
+  J as DatePickerSelector
 };

package/docs/components/ui/combobox.md

@@ -42,6 +42,8 @@ import { Combobox } from "@adamosuiteservices/ui/combobox";
 | `ref`                   | `React.Ref<HTMLButtonElement>`        | -            | Ref al botón trigger para posicionamiento externo           |
 | `aria-invalid`          | `"true" \| "false" \| boolean`        | -            | Indica estado inválido (borde rojo)                         |
 | `disabled`              | `boolean`                             | `false`      | Deshabilita el combobox                                     |
+| `searchBy`              | `"label" \| "value" \| "both"`        | `"both"`     | Define qué campos se usan para búsqueda                     |
+| `filter`                | `(value, search, keywords) => number` | -            | Función personalizada de filtrado para búsqueda avanzada    |
 
 ### ComboboxLabels
 
@@ -227,6 +229,90 @@ Cuando `alwaysShowPlaceholder` es true, puedes controlar dónde aparece el valor
 />
 ```
 
+**Comportamiento de búsqueda por defecto**:
+
+- La búsqueda es **case-insensitive** (sin distinguir mayúsculas/minúsculas)
+- Por defecto busca en **ambos campos**: `label` y `value` (`searchBy="both"`)
+- Ejemplo: Al buscar "nex" encuentra "Next.js" (por label), al buscar "ne" también lo encuentra (por value)
+
+### Personalizar Búsqueda
+
+Puedes controlar qué campos se usan para búsqueda con el prop `searchBy`:
+
+```tsx
+// Buscar solo por label (texto visible)
+<Combobox
+  searchable
+  searchBy="label"
+  options={frameworks}
+  labels={{ placeholder: "Select framework..." }}
+/>
+
+// Buscar solo por value (ID interno)
+<Combobox
+  searchable
+  searchBy="value"
+  options={frameworks}
+  labels={{ placeholder: "Select framework..." }}
+/>
+
+// Buscar por ambos (default)
+<Combobox
+  searchable
+  searchBy="both"
+  options={frameworks}
+  labels={{ placeholder: "Select framework..." }}
+/>
+```
+
+### Filtro Personalizado
+
+Para casos de búsqueda avanzada, puedes proporcionar tu propia función de filtrado:
+
+```tsx
+// Función de filtrado con ranking por calidad de coincidencia
+const customFilter = (value: string, search: string, keywords?: string[]) => {
+  const normalizedSearch = search.toLowerCase().trim();
+  const normalizedValue = value.toLowerCase().trim();
+  const normalizedLabel = keywords?.[0]?.toLowerCase().trim() ?? "";
+
+  // Coincidencia exacta = prioridad más alta
+  if (normalizedLabel === normalizedSearch || normalizedValue === normalizedSearch) {
+    return 10;
+  }
+
+  // Comienza con búsqueda = prioridad media
+  if (normalizedLabel.startsWith(normalizedSearch) || normalizedValue.startsWith(normalizedSearch)) {
+    return 5;
+  }
+
+  // Contiene búsqueda = prioridad baja
+  if (normalizedLabel.includes(normalizedSearch) || normalizedValue.includes(normalizedSearch)) {
+    return 1;
+  }
+
+  return 0; // Sin coincidencia
+};
+
+<Combobox
+  searchable
+  filter={customFilter}
+  options={frameworks}
+  labels={{ placeholder: "Select framework..." }}
+/>;
+```
+
+**Parámetros de la función filter**:
+
+- `value` (string): El valor interno de la opción (ej: "ne", "sv")
+- `search` (string): El texto que el usuario está escribiendo
+- `keywords` (string[] | undefined): Array con el label de la opción como primer elemento
+
+**Valor de retorno**:
+
+- `0`: Sin coincidencia (la opción se oculta)
+- `> 0`: Hay coincidencia, el número indica el ranking (mayor = más relevante)
+
 ### Selección Simple Controlada
 
 ```tsx
@@ -560,7 +646,7 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
 
 ## Casos de Uso Comunes
 
-**Framework selector**: Selección de tecnología con búsqueda  
+**Framework selector**: Selección de tecnología con búsqueda case-insensitive  
 **Country/City picker**: Selección geográfica con opciones deshabilitadas  
 **Tags/Categories**: Selección múltiple de categorías  
 **Settings filters**: Filtros multi-selección en dashboards  
@@ -568,7 +654,9 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
 **Language selector**: Selección de idioma con búsqueda  
 **Status selector con icono**: Usar `icon` + `alwaysShowPlaceholder` para selectores etiquetados  
 **Rich options**: Usar `renders.optionLabel` para mostrar avatares, badges, etc.  
-**Custom UI**: Usar `renders.trigger` para triggers completamente personalizados
+**Custom UI**: Usar `renders.trigger` para triggers completamente personalizados  
+**Search by ID**: Usar `searchBy="value"` cuando necesites buscar por IDs internos  
+**Smart search**: Usar función `filter` personalizada para implementar búsqueda fuzzy, ranking, o lógica compleja
 
 ## Estados Internos
 
@@ -599,7 +687,12 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
 ## Notas de Implementación
 
 - **Composición**: Usa Popover + Command + Button + Checkbox internamente
-- **Búsqueda**: Command component maneja fuzzy search automáticamente
+- **Búsqueda**:
+  - Usa función de filtrado personalizada que busca por label y/o value
+  - Case-insensitive por defecto
+  - Configurable con `searchBy` prop (`"label"`, `"value"`, o `"both"`)
+  - Extensible con función `filter` personalizada para casos avanzados
+  - El label se pasa como keyword al CommandItem para que cmdk pueda filtrarlo
 - **Estado interno**: Soporta modo controlado y no controlado
 - **Tipo de value**: Cambia según `multiple` (string vs string[])
 - **selectedFeedback**:
@@ -650,6 +743,8 @@ Hereda estilos de Command component:
 
 **Value no cambia**: Verifica que uses `onValueChange` en modo controlado  
 **Búsqueda no funciona**: Asegúrate de pasar `searchable={true}`  
+**Búsqueda solo encuentra por código (value)**: El comportamiento por defecto busca por ambos, si usaste `searchBy="value"`, cámbialo a `searchBy="both"` o `searchBy="label"`  
+**Búsqueda distingue mayúsculas**: El filtro por defecto es case-insensitive, si usas función `filter` personalizada, asegúrate de normalizar con `.toLowerCase()`  
 **Multiple selection cierra popover**: Verifica que `multiple={true}` esté activo  
 **Labels incorrectas en multiple**: Usa función `multipleSelected` para pluralización  
 **Tipo de value incorrecto**: Single usa `string`, Multiple usa `string[]`  

package/package.json

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