@motor-hero/ui-kit 0.23.1 → 0.24.0

package/dist/index.js

@@ -615,18 +615,52 @@ PasswordInput.displayName = "PasswordInput";
 // src/components/combobox.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Command as CommandPrimitive } from "cmdk";
-import { Check, ChevronsUpDown, Search } from "lucide-react";
-import * as React5 from "react";
+import { Check, ChevronsUpDown, Loader2, Search } from "lucide-react";
+import * as React6 from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
-// src/hooks/use-is-desktop.ts
+// src/hooks/use-infinite-scroll-sentinel.ts
 import * as React4 from "react";
+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
+import * as React5 from "react";
 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();
@@ -649,11 +683,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__ */ jsxs14(
     "button",
     {
@@ -674,55 +719,73 @@ function Combobox({
       ]
     }
   );
-  const command = /* @__PURE__ */ jsxs14(CommandPrimitive, { className: "flex h-full w-full flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "flex items-center border-b px-3", children: [
-      /* @__PURE__ */ jsx16(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-      /* @__PURE__ */ jsx16(
-        CommandPrimitive.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__ */ jsxs14(CommandPrimitive.List, { className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60", children: [
-      /* @__PURE__ */ jsx16(CommandPrimitive.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
-      options.map((option) => /* @__PURE__ */ jsxs14(
-        CommandPrimitive.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__ */ jsx16(
-              Check,
-              {
-                className: cn(
-                  "h-4 w-4 shrink-0",
-                  value === option.value ? "opacity-100" : "opacity-0"
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx16("span", { className: "truncate", children: option.label })
-          ]
-        },
-        option.value
-      ))
-    ] })
-  ] });
+  const command = /* @__PURE__ */ jsxs14(
+    CommandPrimitive,
+    {
+      shouldFilter: !isServer,
+      className: "flex h-full w-full flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center border-b px-3", children: [
+          /* @__PURE__ */ jsx16(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+          /* @__PURE__ */ jsx16(
+            CommandPrimitive.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__ */ jsxs14(
+          CommandPrimitive.List,
+          {
+            ref: listRef,
+            className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60",
+            children: [
+              !isServer && /* @__PURE__ */ jsx16(CommandPrimitive.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              options.map((option) => /* @__PURE__ */ jsxs14(
+                CommandPrimitive.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__ */ jsx16(
+                      Check,
+                      {
+                        className: cn(
+                          "h-4 w-4 shrink-0",
+                          value === option.value ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx16("span", { className: "truncate", children: option.label })
+                  ]
+                },
+                option.value
+              )),
+              isServer && !loading && options.length === 0 && /* @__PURE__ */ jsx16("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              isServer && loading && /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx16(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }),
+              isServer && hasMore && /* @__PURE__ */ jsx16("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1" })
+            ]
+          }
+        )
+      ]
+    }
+  );
   if (isDesktop) {
-    return /* @__PURE__ */ jsxs14(PopoverPrimitive.Root, { open, onOpenChange: setOpen, modal: true, children: [
+    return /* @__PURE__ */ jsxs14(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx16(PopoverPrimitive.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsx16(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
         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
         }
@@ -745,8 +808,8 @@ function Combobox({
 // src/components/multi-combobox.tsx
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 import { Command as CommandPrimitive2 } from "cmdk";
-import { Check as Check2, ChevronsUpDown as ChevronsUpDown2, Search as Search2, X as X2 } from "lucide-react";
-import * as React6 from "react";
+import { Check as Check2, ChevronsUpDown as ChevronsUpDown2, Loader2 as Loader22, Search as Search2, X as X2 } from "lucide-react";
+import * as React7 from "react";
 import { Drawer as DrawerPrimitive2 } from "vaul";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function MultiCombobox({
@@ -760,11 +823,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]
@@ -824,43 +903,61 @@ function MultiCombobox({
       ]
     }
   );
-  const command = /* @__PURE__ */ jsxs15(CommandPrimitive2, { className: "flex h-full w-full flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "flex items-center border-b px-3", children: [
-      /* @__PURE__ */ jsx17(Search2, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-      /* @__PURE__ */ jsx17(
-        CommandPrimitive2.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__ */ jsxs15(CommandPrimitive2.List, { className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60", children: [
-      /* @__PURE__ */ jsx17(CommandPrimitive2.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
-      options.map((option) => /* @__PURE__ */ jsxs15(
-        CommandPrimitive2.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__ */ jsx17(
-              Check2,
-              {
-                className: cn(
-                  "h-4 w-4 shrink-0",
-                  value.includes(option.value) ? "opacity-100" : "opacity-0"
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx17("span", { className: "truncate", children: option.label })
-          ]
-        },
-        option.value
-      ))
-    ] })
-  ] });
+  const command = /* @__PURE__ */ jsxs15(
+    CommandPrimitive2,
+    {
+      shouldFilter: !isServer,
+      className: "flex h-full w-full flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center border-b px-3", children: [
+          /* @__PURE__ */ jsx17(Search2, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+          /* @__PURE__ */ jsx17(
+            CommandPrimitive2.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__ */ jsxs15(
+          CommandPrimitive2.List,
+          {
+            ref: listRef,
+            className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60",
+            children: [
+              !isServer && /* @__PURE__ */ jsx17(CommandPrimitive2.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              options.map((option) => /* @__PURE__ */ jsxs15(
+                CommandPrimitive2.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__ */ jsx17(
+                      Check2,
+                      {
+                        className: cn(
+                          "h-4 w-4 shrink-0",
+                          value.includes(option.value) ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx17("span", { className: "truncate", children: option.label })
+                  ]
+                },
+                option.value
+              )),
+              isServer && !loading && options.length === 0 && /* @__PURE__ */ jsx17("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              isServer && loading && /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx17(Loader22, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }),
+              isServer && hasMore && /* @__PURE__ */ jsx17("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1" })
+            ]
+          }
+        )
+      ]
+    }
+  );
   if (isDesktop) {
     return /* @__PURE__ */ jsxs15(PopoverPrimitive2.Root, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx17(PopoverPrimitive2.Trigger, { asChild: true, disabled, children: trigger }),
@@ -892,7 +989,7 @@ function MultiCombobox({
 // src/components/color-picker.tsx
 import * as PopoverPrimitive3 from "@radix-ui/react-popover";
 import { ChevronsUpDown as ChevronsUpDown3 } from "lucide-react";
-import * as React7 from "react";
+import * as React8 from "react";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function ColorPicker({
@@ -905,7 +1002,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__ */ jsxs16(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, modal: true, children: [
     /* @__PURE__ */ jsx18(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs16(
@@ -1041,7 +1138,7 @@ function DataTableWrapper({
 }
 
 // src/components/mobile-card-list.tsx
-import { useRef } from "react";
+import { useRef as useRef2 } from "react";
 import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var SCROLL_THRESHOLD = 8;
 function MobileCardList({
@@ -1052,8 +1149,8 @@ function MobileCardList({
   loadingCount = 5,
   className
 }) {
-  const start = useRef(null);
-  const scrolled = useRef(false);
+  const start = useRef2(null);
+  const scrolled = useRef2(false);
   const onTouchStart = (e) => {
     const t = e.touches[0];
     start.current = { x: t.clientX, y: t.clientY };