@motor-hero/ui-kit 0.23.1 → 0.24.0

package/dist/components/combobox.d.ts

@@ -19,16 +19,32 @@ export interface ComboboxProps {
     className?: string;
     "aria-invalid"?: boolean | "true" | "false";
     "aria-describedby"?: string;
+    /** Modo servidor: chamado a cada tecla com o texto bruto da busca. Sua
+     *  presença ativa o modo servidor (filtro do cmdk desligado). */
+    onSearchChange?: (search: string) => void;
+    /** Modo servidor: chamado ao rolar até o fim da lista. */
+    onLoadMore?: () => void;
+    /** Modo servidor: mostra uma linha de carregamento no fim da lista. */
+    loading?: boolean;
+    /** Modo servidor: habilita o disparo de `onLoadMore`. */
+    hasMore?: boolean;
+    /** Modo servidor: rótulo do valor já selecionado que pode não estar na
+     *  página carregada (ex.: formulário de edição). */
+    selectedOption?: ComboboxOption;
 }
 /**
  * Select com busca (combobox) acessível e responsivo.
  *
- * - Desktop: Popover (modal) + cmdk — o dropdown acompanha a largura do gatilho.
+ * - Desktop: Popover não-modal + cmdk — o dropdown acompanha a largura do
+ *   gatilho. Não-modal (com `pointer-events-auto` no conteúdo) de propósito:
+ *   dentro de um Dialog, um Popover modal trava `body { pointer-events: none }`
+ *   e prende o foco, então a busca não recebe clique/digitação (mesmo motivo do
+ *   MultiCombobox).
  * - Mobile: Drawer (bottom sheet) + cmdk — evita os problemas de foco/clique de
  *   Popover dentro de modal no touch, então a busca funciona no celular.
  *
  * Aceita `aria-invalid`/`aria-describedby` (encaminhados pelo FormField em
  * estado de erro) e fica com a borda vermelha quando inválido.
  */
-export declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, disabled, id, className, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, disabled, id, className, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, onSearchChange, onLoadMore, loading, hasMore, selectedOption, }: ComboboxProps): React.JSX.Element;
 //# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA4B,EAC5B,iBAA+B,EAC/B,YAA6C,EAC7C,QAAQ,EACR,EAAE,EACF,SAAS,EACT,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,GACpC,EAAE,aAAa,qBAgGf"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;qEACiE;IACjE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;wDACoD;IACpD,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA4B,EAC5B,iBAA+B,EAC/B,YAA6C,EAC7C,QAAQ,EACR,EAAE,EACF,SAAS,EACT,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,cAAc,EACd,UAAU,EACV,OAAO,EACP,OAAO,EACP,cAAc,GACf,EAAE,aAAa,qBAiIf"}

package/dist/components/multi-combobox.d.ts

@@ -15,6 +15,18 @@ export interface MultiComboboxProps {
     className?: string;
     "aria-invalid"?: boolean | "true" | "false";
     "aria-describedby"?: string;
+    /** Modo servidor: chamado a cada tecla com o texto bruto da busca. Sua
+     *  presença ativa o modo servidor (filtro do cmdk desligado). */
+    onSearchChange?: (search: string) => void;
+    /** Modo servidor: chamado ao rolar até o fim da lista. */
+    onLoadMore?: () => void;
+    /** Modo servidor: mostra uma linha de carregamento no fim da lista. */
+    loading?: boolean;
+    /** Modo servidor: habilita o disparo de `onLoadMore`. */
+    hasMore?: boolean;
+    /** Modo servidor: rótulos dos valores já selecionados que podem não estar
+     *  na página carregada (chips do formulário de edição). */
+    selectedOptions?: ComboboxOption[];
 }
 /**
  * Combobox de múltipla seleção com chips, acessível e responsivo.
@@ -31,5 +43,5 @@ export interface MultiComboboxProps {
  * chip remove a opção. Aceita `aria-invalid`/`aria-describedby` (encaminhados
  * pelo FormField em estado de erro) e fica com a borda vermelha quando inválido.
  */
-export declare function MultiCombobox({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, disabled, id, className, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: MultiComboboxProps): React.JSX.Element;
+export declare function MultiCombobox({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, disabled, id, className, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, onSearchChange, onLoadMore, loading, hasMore, selectedOptions, }: MultiComboboxProps): React.JSX.Element;
 //# sourceMappingURL=multi-combobox.d.ts.map

package/dist/components/multi-combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-combobox.d.ts","sourceRoot":"","sources":["../../src/components/multi-combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEhD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA4B,EAC5B,iBAA+B,EAC/B,YAA6C,EAC7C,QAAQ,EACR,EAAE,EACF,SAAS,EACT,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,GACpC,EAAE,kBAAkB,qBA0IpB"}
+{"version":3,"file":"multi-combobox.d.ts","sourceRoot":"","sources":["../../src/components/multi-combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEhD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;qEACiE;IACjE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;+DAC2D;IAC3D,eAAe,CAAC,EAAE,cAAc,EAAE,CAAA;CACnC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA4B,EAC5B,iBAA+B,EAC/B,YAA6C,EAC7C,QAAQ,EACR,EAAE,EACF,SAAS,EACT,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,cAAc,EACd,UAAU,EACV,OAAO,EACP,OAAO,EACP,eAAe,GAChB,EAAE,kBAAkB,qBA6KpB"}

package/dist/hooks/use-infinite-scroll-sentinel.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+/**
+ * Dispara `onLoadMore` quando o `sentinelRef` entra na viewport do `listRef`
+ * (raiz = a lista rolável, não a janela — a lista rola por dentro do Popover/
+ * Drawer). Usa refs "latest" para `loading`/`onLoadMore` e evita reassinar o
+ * observer a cada render.
+ */
+export declare function useInfiniteScrollSentinel({ enabled, loading, onLoadMore, }: {
+    enabled: boolean;
+    loading?: boolean;
+    onLoadMore?: () => void;
+}): {
+    listRef: React.RefObject<HTMLDivElement | null>;
+    sentinelRef: React.RefObject<HTMLDivElement | null>;
+};
+//# sourceMappingURL=use-infinite-scroll-sentinel.d.ts.map

package/dist/hooks/use-infinite-scroll-sentinel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-scroll-sentinel.d.ts","sourceRoot":"","sources":["../../src/hooks/use-infinite-scroll-sentinel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,OAAO,EACP,UAAU,GACX,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;;;EA8BA"}

package/dist/index.cjs

@@ -690,17 +690,51 @@ PasswordInput.displayName = "PasswordInput";
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
 var import_cmdk = require("cmdk");
 var import_lucide_react4 = require("lucide-react");
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 var import_vaul = require("vaul");
 
-// src/hooks/use-is-desktop.ts
+// src/hooks/use-infinite-scroll-sentinel.ts
 var React4 = __toESM(require("react"), 1);
+function useInfiniteScrollSentinel({
+  enabled,
+  loading,
+  onLoadMore
+}) {
+  const listRef = React4.useRef(null);
+  const sentinelRef = React4.useRef(null);
+  const loadingRef = React4.useRef(loading);
+  const onLoadMoreRef = React4.useRef(onLoadMore);
+  React4.useEffect(() => {
+    loadingRef.current = loading;
+    onLoadMoreRef.current = onLoadMore;
+  });
+  React4.useEffect(() => {
+    if (!enabled) return;
+    const root = listRef.current;
+    const sentinel = sentinelRef.current;
+    if (!root || !sentinel) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && !loadingRef.current) {
+          onLoadMoreRef.current?.();
+        }
+      },
+      { root, rootMargin: "0px 0px 100px 0px" }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return { listRef, sentinelRef };
+}
+
+// src/hooks/use-is-desktop.ts
+var React5 = __toESM(require("react"), 1);
 var DESKTOP_QUERY = "(min-width: 640px)";
 function useIsDesktop() {
-  const [isDesktop, setIsDesktop] = React4.useState(
+  const [isDesktop, setIsDesktop] = React5.useState(
     () => typeof window !== "undefined" ? window.matchMedia(DESKTOP_QUERY).matches : true
   );
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     const mql = window.matchMedia(DESKTOP_QUERY);
     const onChange = () => setIsDesktop(mql.matches);
     onChange();
@@ -723,11 +757,22 @@ function Combobox({
   id,
   className,
   "aria-invalid": ariaInvalid,
-  "aria-describedby": ariaDescribedby
+  "aria-describedby": ariaDescribedby,
+  onSearchChange,
+  onLoadMore,
+  loading,
+  hasMore,
+  selectedOption
 }) {
-  const [open, setOpen] = React5.useState(false);
+  const [open, setOpen] = React6.useState(false);
   const isDesktop = useIsDesktop();
-  const selected = options.find((option) => option.value === value);
+  const isServer = onSearchChange !== void 0;
+  const selected = selectedOption?.value === value ? selectedOption : options.find((option) => option.value === value);
+  const { listRef, sentinelRef } = useInfiniteScrollSentinel({
+    enabled: isServer && !!hasMore,
+    loading,
+    onLoadMore
+  });
   const trigger = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "button",
     {
@@ -748,55 +793,73 @@ function Combobox({
       ]
     }
   );
-  const command = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_cmdk.Command, { className: "flex h-full w-full flex-col overflow-hidden", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center border-b px-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_cmdk.Command.Input,
-        {
-          placeholder: searchPlaceholder,
-          className: "flex h-11 w-full bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground sm:h-9 sm:text-sm"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_cmdk.Command.List, { className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_cmdk.Command.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
-      options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        import_cmdk.Command.Item,
-        {
-          value: option.label,
-          disabled: option.disabled,
-          onSelect: () => {
-            onChange(option.value);
-            setOpen(false);
-          },
-          className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_lucide_react4.Check,
-              {
-                className: cn(
-                  "h-4 w-4 shrink-0",
-                  value === option.value ? "opacity-100" : "opacity-0"
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate", children: option.label })
-          ]
-        },
-        option.value
-      ))
-    ] })
-  ] });
+  const command = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_cmdk.Command,
+    {
+      shouldFilter: !isServer,
+      className: "flex h-full w-full flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center border-b px-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_cmdk.Command.Input,
+            {
+              placeholder: searchPlaceholder,
+              onValueChange: isServer ? onSearchChange : void 0,
+              className: "flex h-11 w-full bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground sm:h-9 sm:text-sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          import_cmdk.Command.List,
+          {
+            ref: listRef,
+            className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60",
+            children: [
+              !isServer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_cmdk.Command.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                import_cmdk.Command.Item,
+                {
+                  value: isServer ? option.value : option.label,
+                  disabled: option.disabled,
+                  onSelect: () => {
+                    onChange(option.value);
+                    setOpen(false);
+                  },
+                  className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      import_lucide_react4.Check,
+                      {
+                        className: cn(
+                          "h-4 w-4 shrink-0",
+                          value === option.value ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate", children: option.label })
+                  ]
+                },
+                option.value
+              )),
+              isServer && !loading && options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              isServer && loading && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }),
+              isServer && hasMore && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1" })
+            ]
+          }
+        )
+      ]
+    }
+  );
   if (isDesktop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PopoverPrimitive.Root, { open, onOpenChange: setOpen, modal: true, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         PopoverPrimitive.Content,
         {
           align: "start",
           sideOffset: 4,
-          className: "z-50 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md",
+          className: "pointer-events-auto z-50 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md",
           style: { width: "var(--radix-popover-trigger-width)" },
           children: command
         }
@@ -820,7 +883,7 @@ function Combobox({
 var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"), 1);
 var import_cmdk2 = require("cmdk");
 var import_lucide_react5 = require("lucide-react");
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var import_vaul2 = require("vaul");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function MultiCombobox({
@@ -834,11 +897,27 @@ function MultiCombobox({
   id,
   className,
   "aria-invalid": ariaInvalid,
-  "aria-describedby": ariaDescribedby
+  "aria-describedby": ariaDescribedby,
+  onSearchChange,
+  onLoadMore,
+  loading,
+  hasMore,
+  selectedOptions
 }) {
-  const [open, setOpen] = React6.useState(false);
+  const [open, setOpen] = React7.useState(false);
   const isDesktop = useIsDesktop();
-  const selected = options.filter((option) => value.includes(option.value));
+  const isServer = onSearchChange !== void 0;
+  const seen = /* @__PURE__ */ new Set();
+  const selected = [...selectedOptions ?? [], ...options].filter((option) => {
+    if (!value.includes(option.value) || seen.has(option.value)) return false;
+    seen.add(option.value);
+    return true;
+  });
+  const { listRef, sentinelRef } = useInfiniteScrollSentinel({
+    enabled: isServer && !!hasMore,
+    loading,
+    onLoadMore
+  });
   const toggleValue = (optionValue) => {
     onChange(
       value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
@@ -898,43 +977,61 @@ function MultiCombobox({
       ]
     }
   );
-  const command = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_cmdk2.Command, { className: "flex h-full w-full flex-col overflow-hidden", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center border-b px-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_cmdk2.Command.Input,
-        {
-          placeholder: searchPlaceholder,
-          className: "flex h-11 w-full bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground sm:h-9 sm:text-sm"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_cmdk2.Command.List, { className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_cmdk2.Command.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
-      options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-        import_cmdk2.Command.Item,
-        {
-          value: option.label,
-          disabled: option.disabled,
-          onSelect: () => toggleValue(option.value),
-          className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              import_lucide_react5.Check,
-              {
-                className: cn(
-                  "h-4 w-4 shrink-0",
-                  value.includes(option.value) ? "opacity-100" : "opacity-0"
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "truncate", children: option.label })
-          ]
-        },
-        option.value
-      ))
-    ] })
-  ] });
+  const command = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_cmdk2.Command,
+    {
+      shouldFilter: !isServer,
+      className: "flex h-full w-full flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center border-b px-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_cmdk2.Command.Input,
+            {
+              placeholder: searchPlaceholder,
+              onValueChange: isServer ? onSearchChange : void 0,
+              className: "flex h-11 w-full bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground sm:h-9 sm:text-sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          import_cmdk2.Command.List,
+          {
+            ref: listRef,
+            className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60",
+            children: [
+              !isServer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_cmdk2.Command.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                import_cmdk2.Command.Item,
+                {
+                  value: isServer ? option.value : option.label,
+                  disabled: option.disabled,
+                  onSelect: () => toggleValue(option.value),
+                  className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      import_lucide_react5.Check,
+                      {
+                        className: cn(
+                          "h-4 w-4 shrink-0",
+                          value.includes(option.value) ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "truncate", children: option.label })
+                  ]
+                },
+                option.value
+              )),
+              isServer && !loading && options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              isServer && loading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }),
+              isServer && hasMore && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1" })
+            ]
+          }
+        )
+      ]
+    }
+  );
   if (isDesktop) {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverPrimitive2.Trigger, { asChild: true, disabled, children: trigger }),
@@ -966,7 +1063,7 @@ function MultiCombobox({
 // src/components/color-picker.tsx
 var PopoverPrimitive3 = __toESM(require("@radix-ui/react-popover"), 1);
 var import_lucide_react6 = require("lucide-react");
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var import_react_colorful = require("react-colorful");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function ColorPicker({
@@ -979,7 +1076,7 @@ function ColorPicker({
   "aria-invalid": ariaInvalid,
   "aria-describedby": ariaDescribedby
 }) {
-  const [open, setOpen] = React7.useState(false);
+  const [open, setOpen] = React8.useState(false);
   const color = value || "";
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, modal: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(