@kasuvia/sdk 0.0.8 → 0.0.9

package/src/components/shared/MapPinDrop.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
+
+export interface MapPinDropProps {
+  initialLatitude?: number;
+  initialLongitude?: number;
+  onPinDrop?: (coordinates: { latitude: number; longitude: number }) => void;
+  value?: { latitude: number; longitude: number } | null;
+  height?: string;
+  disabled?: boolean;
+  zoom?: number;
+}
+
+export function MapPinDrop({
+  initialLatitude = 6.5244,
+  initialLongitude = 3.3792,
+  onPinDrop,
+  value,
+  height = "300px",
+  disabled = false,
+}: MapPinDropProps) {
+  const [isMounted, setIsMounted] = useState(false);
+  const [lat, setLat] = useState<number>(value?.latitude ?? initialLatitude);
+  const [lng, setLng] = useState<number>(value?.longitude ?? initialLongitude);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (value) {
+      setLat(value.latitude);
+      setLng(value.longitude);
+    }
+  }, [value]);
+
+  if (!isMounted) {
+    return (
+      <div
+        className="w-full rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center"
+        style={{ height }}
+      >
+        <Loader2 className="w-6 h-6 text-gray-400 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+      <div className="p-4 flex flex-col gap-3">
+        <div className="flex items-center justify-between text-xs text-gray-500">
+          <span>Coordinates Selector</span>
+          <span>
+            {lat.toFixed(6)}, {lng.toFixed(6)}
+          </span>
+        </div>
+        {!disabled && (
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Latitude
+              </label>
+              <input
+                type="number"
+                step="any"
+                value={lat}
+                onChange={(e) => {
+                  const val = parseFloat(e.target.value) || 0;
+                  setLat(val);
+                  onPinDrop?.({ latitude: val, longitude: lng });
+                }}
+                className="w-full h-9 px-2 text-xs border border-gray-300 dark:border-gray-700 rounded bg-transparent"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Longitude
+              </label>
+              <input
+                type="number"
+                step="any"
+                value={lng}
+                onChange={(e) => {
+                  const val = parseFloat(e.target.value) || 0;
+                  setLng(val);
+                  onPinDrop?.({ latitude: lat, longitude: val });
+                }}
+                className="w-full h-9 px-2 text-xs border border-gray-300 dark:border-gray-700 rounded bg-transparent"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="px-3 py-2 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500">
+        {disabled ? "Location view only" : "Adjust coordinates to fine-tune map location"}
+      </div>
+    </div>
+  );
+}

package/src/components/shared/MultiSelectPicker.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { X, ChevronDown, Plus, Hash } from "lucide-react";
+
+export interface SelectOption {
+  id: string;
+  name: string;
+  image_url?: string | null;
+  collection_type?: string;
+  [key: string]: unknown;
+}
+
+export interface MultiSelectPickerProps {
+  selected: string[];
+  onChange: (items: string[]) => void;
+  options?: SelectOption[];
+  isLoading?: boolean;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  onFetchNextPage?: () => void;
+  placeholder?: string;
+  onCreateOption?: (name: string) => void;
+  onSearchChange?: (search: string) => void;
+  searchValue?: string;
+}
+
+export function MultiSelectPicker({
+  selected,
+  onChange,
+  options = [],
+  isLoading = false,
+  isFetchingNextPage = false,
+  hasNextPage = false,
+  onFetchNextPage,
+  placeholder = "Search or type to add...",
+  onCreateOption,
+  onSearchChange,
+  searchValue,
+}: MultiSelectPickerProps) {
+  const [open, setOpen] = useState(false);
+  const serverSearch = typeof onSearchChange === "function";
+  const [localSearch, setLocalSearch] = useState("");
+  const search = serverSearch ? (searchValue ?? "") : localSearch;
+  const setSearch = serverSearch ? onSearchChange! : setLocalSearch;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [setSearch]);
+
+  const filtered = options.filter(
+    (opt) =>
+      (serverSearch || opt.name.toLowerCase().includes(search.toLowerCase())) &&
+      !selected.includes(opt.name)
+  );
+
+  const showCustomOption =
+    search.trim().length > 0 &&
+    !options.some((opt) => opt.name.toLowerCase() === search.trim().toLowerCase()) &&
+    !selected.some((s) => s.toLowerCase() === search.trim().toLowerCase());
+
+  const addItem = (name: string) => {
+    onChange([...selected, name]);
+    setSearch("");
+    inputRef.current?.focus();
+  };
+
+  const removeItem = (name: string) => {
+    onChange(selected.filter((s) => s !== name));
+  };
+
+  return (
+    <div ref={containerRef} className="relative w-full">
+      <div
+        onClick={() => {
+          setOpen(true);
+          inputRef.current?.focus();
+        }}
+        className={`relative flex flex-wrap items-center gap-1.5 w-full cursor-text min-h-[42px] rounded-lg px-3 py-1.5 border border-input bg-background text-foreground ${
+          open ? "ring-2 ring-ring border-ring" : ""
+        }`}
+      >
+        {selected.map((name) => (
+          <span
+            key={name}
+            className="inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-semibold bg-muted text-foreground border"
+          >
+            <span className="truncate max-w-[140px]">{name}</span>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                removeItem(name);
+              }}
+              className="rounded p-0.5 hover:bg-accent"
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </span>
+        ))}
+
+        <input
+          ref={inputRef}
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value);
+            setOpen(true);
+          }}
+          onFocus={() => setOpen(true)}
+          placeholder={selected.length === 0 ? placeholder : ""}
+          className="flex-1 min-w-[120px] bg-transparent outline-none text-xs font-medium h-6 text-foreground placeholder:text-muted-foreground"
+        />
+
+        <ChevronDown
+          className={`h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 ${
+            open ? "rotate-180" : ""
+          }`}
+        />
+      </div>
+
+      {open && (
+        <div className="absolute z-50 mt-1 w-full rounded-lg border bg-card text-foreground shadow-lg overflow-hidden p-1.5">
+          <div className="max-h-60 overflow-y-auto space-y-1">
+            {isLoading && options.length === 0 ? (
+              <div className="p-3 text-center text-xs text-muted-foreground">Loading options…</div>
+            ) : (
+              <>
+                {filtered.length === 0 && !showCustomOption && !isLoading && (
+                  <div className="p-3 text-center text-xs text-muted-foreground">No options found</div>
+                )}
+
+                {filtered.map((opt) => (
+                  <button
+                    key={opt.id}
+                    type="button"
+                    onClick={() => addItem(opt.name)}
+                    className="w-full text-left px-3 py-2 rounded-md flex items-center gap-2 hover:bg-muted transition-colors text-xs"
+                  >
+                    <div className="h-6 w-6 shrink-0 rounded bg-muted flex items-center justify-center">
+                      <Hash className="h-3 w-3 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="font-semibold truncate">{opt.name}</div>
+                    </div>
+                    <Plus className="h-3.5 w-3.5 text-primary shrink-0" />
+                  </button>
+                ))}
+
+                {hasNextPage && (
+                  <button
+                    type="button"
+                    onClick={() => onFetchNextPage?.()}
+                    disabled={isFetchingNextPage}
+                    className="w-full py-1.5 text-center text-xs text-primary font-semibold hover:underline"
+                  >
+                    {isFetchingNextPage ? "Loading more..." : "Load more..."}
+                  </button>
+                )}
+
+                {showCustomOption && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (onCreateOption) {
+                        onCreateOption(search.trim());
+                      } else {
+                        addItem(search.trim());
+                      }
+                      setSearch("");
+                    }}
+                    className="w-full text-left px-3 py-2 rounded-md flex items-center gap-2 bg-primary/10 text-primary font-bold text-xs hover:bg-primary/20"
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    <span>Create "{search.trim()}"</span>
+                  </button>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shared/OfflineBanner.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { WifiOff } from "lucide-react";
+
+export interface OfflineBannerProps {
+  message?: string;
+  className?: string;
+}
+
+export function OfflineBanner({
+  message = "You are currently offline. Check your network connection.",
+  className = "",
+}: OfflineBannerProps) {
+  const [isOffline, setIsOffline] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const handleOnline = () => setIsOffline(false);
+    const handleOffline = () => setIsOffline(true);
+
+    setIsOffline(!navigator.onLine);
+
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+
+  if (!isOffline) return null;
+
+  return (
+    <div
+      className={`bg-amber-500/10 border-b border-amber-500/20 px-4 py-2 text-amber-700 dark:text-amber-400 text-xs font-medium flex items-center justify-between animate-in slide-in-from-top-2 duration-300 ${className}`.trim()}
+    >
+      <div className="flex items-center gap-2">
+        <WifiOff className="w-4 h-4 text-amber-500 shrink-0" />
+        <span>{message}</span>
+      </div>
+    </div>
+  );
+}

package/src/components/shared/SearchableInput.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState, useRef, useEffect, ReactNode } from "react";
+import { Check, X } from "lucide-react";
+
+export interface SearchableInputItem {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+}
+
+export interface SearchableInputProps {
+  items: SearchableInputItem[];
+  value: string;
+  onSelect: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+  skeletonCount?: number;
+  className?: string;
+  onSearchChange?: (search: string) => void;
+  debounceMs?: number;
+}
+
+export function SearchableInput({
+  items,
+  value,
+  onSelect,
+  placeholder = "Search...",
+  disabled = false,
+  isLoading = false,
+  className = "",
+  onSearchChange,
+  debounceMs = 300,
+}: SearchableInputProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const selectedItem = items.find((item) => item.value === value);
+
+  useEffect(() => {
+    if (selectedItem) {
+      setSearch(selectedItem.label);
+    }
+  }, [selectedItem]);
+
+  const handleSearchChange = (newValue: string) => {
+    setSearch(newValue);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      onSearchChange?.(newValue);
+    }, debounceMs);
+  };
+
+  const handleSelect = (item: SearchableInputItem) => {
+    onSelect(item.value);
+    setSearch(item.label);
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    setSearch("");
+    onSelect("");
+    inputRef.current?.focus();
+  };
+
+  const serverSearch = typeof onSearchChange === "function";
+  const filteredItems = serverSearch
+    ? items
+    : items.filter(
+        (item) =>
+          item.label.toLowerCase().includes(search.toLowerCase()) ||
+          item.description?.toLowerCase().includes(search.toLowerCase())
+      );
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        inputRef.current &&
+        !inputRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div className="relative w-full">
+      <div className="relative">
+        <input
+          ref={inputRef}
+          value={search}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          onFocus={() => setIsOpen(true)}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={`w-full h-10 px-3 pr-8 text-sm bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50 ${className}`.trim()}
+        />
+        {search && !disabled && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+
+      {isOpen && (
+        <div
+          ref={dropdownRef}
+          className="absolute z-50 w-full mt-1 bg-card border rounded-lg shadow-lg max-h-64 overflow-y-auto"
+        >
+          {isLoading ? (
+            <div className="p-3 text-center text-xs text-muted-foreground">Loading options…</div>
+          ) : filteredItems.length > 0 ? (
+            filteredItems.map((item) => (
+              <div
+                key={item.value}
+                onClick={() => handleSelect(item)}
+                className="flex items-center justify-between py-2 px-3 cursor-pointer hover:bg-muted transition-colors"
+              >
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  {item.icon}
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-sm text-foreground truncate">
+                      {item.label}
+                    </div>
+                    {item.description && (
+                      <div className="text-xs text-muted-foreground truncate">{item.description}</div>
+                    )}
+                  </div>
+                </div>
+                {value === item.value && <Check className="w-4 h-4 text-primary shrink-0" />}
+              </div>
+            ))
+          ) : (
+            <div className="p-4 text-center text-sm text-muted-foreground">No results found</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shared/SearchablePopover.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useEffect, useRef, useState, ReactNode } from "react";
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
+
+export interface SearchableItem {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+  description?: string;
+}
+
+export interface SearchablePopoverProps {
+  items: SearchableItem[];
+  value: string;
+  onSelect: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+  skeletonCount?: number;
+  className?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+  width?: string;
+  onSearchChange?: (search: string) => void;
+  searchValue?: string;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  onFetchNextPage?: () => void;
+  resolvedSelectedItem?: SearchableItem;
+}
+
+export function SearchablePopover({
+  items,
+  value,
+  onSelect,
+  placeholder = "Select an option",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  disabled = false,
+  isLoading = false,
+  triggerClassName = "",
+  contentClassName = "",
+  onSearchChange,
+  searchValue,
+  hasNextPage = false,
+  isFetchingNextPage = false,
+  onFetchNextPage,
+  resolvedSelectedItem,
+}: SearchablePopoverProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const serverSearch = typeof onSearchChange === "function";
+  const activeSearch = serverSearch ? (searchValue ?? "") : query;
+
+  const selectedItem = resolvedSelectedItem ?? items.find((item) => item.value === value);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleSearch = (text: string) => {
+    if (serverSearch) {
+      onSearchChange?.(text);
+    } else {
+      setQuery(text);
+    }
+  };
+
+  const filteredItems = serverSearch
+    ? items
+    : items.filter(
+        (item) =>
+          item.label.toLowerCase().includes(query.toLowerCase()) ||
+          item.description?.toLowerCase().includes(query.toLowerCase())
+      );
+
+  return (
+    <div ref={popoverRef} className="relative w-full">
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setOpen((prev) => !prev)}
+        className={`w-full h-10 px-3 py-2 text-sm bg-background border border-input rounded-lg flex items-center justify-between font-medium text-foreground disabled:opacity-50 ${triggerClassName}`.trim()}
+      >
+        {selectedItem ? (
+          <div className="flex items-center gap-2 truncate">
+            {selectedItem.icon}
+            <span>{selectedItem.label}</span>
+          </div>
+        ) : (
+          <span className="text-muted-foreground">{placeholder}</span>
+        )}
+        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 text-muted-foreground" />
+      </button>
+
+      {open && (
+        <div
+          className={`absolute z-50 mt-1 w-full bg-card border rounded-lg shadow-xl overflow-hidden p-2 ${contentClassName}`.trim()}
+        >
+          <input
+            type="text"
+            value={activeSearch}
+            onChange={(e) => handleSearch(e.target.value)}
+            placeholder={searchPlaceholder}
+            className="w-full h-9 px-3 text-xs bg-muted border border-input rounded mb-2 focus:outline-none"
+          />
+
+          <div className="max-h-60 overflow-y-auto space-y-1">
+            {isLoading ? (
+              <div className="p-3 text-center text-xs text-muted-foreground flex items-center justify-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" /> Loading options…
+              </div>
+            ) : filteredItems.length > 0 ? (
+              filteredItems.map((item) => (
+                <button
+                  key={item.value}
+                  type="button"
+                  onClick={() => {
+                    onSelect(item.value);
+                    setOpen(false);
+                  }}
+                  className="w-full text-left flex items-center justify-between py-2 px-3 rounded text-xs hover:bg-muted transition-colors"
+                >
+                  <div className="flex items-center gap-2 min-w-0">
+                    {item.icon}
+                    <div className="truncate">
+                      <div className="font-semibold text-foreground">{item.label}</div>
+                      {item.description && (
+                        <div className="text-[10px] text-muted-foreground">{item.description}</div>
+                      )}
+                    </div>
+                  </div>
+                  {value === item.value && <Check className="h-4 w-4 text-primary shrink-0" />}
+                </button>
+              ))
+            ) : (
+              <div className="p-3 text-center text-xs text-muted-foreground">{emptyMessage}</div>
+            )}
+
+            {hasNextPage && (
+              <button
+                type="button"
+                onClick={() => onFetchNextPage?.()}
+                disabled={isFetchingNextPage}
+                className="w-full py-1 text-center text-[11px] text-primary font-semibold hover:underline"
+              >
+                {isFetchingNextPage ? "Loading more..." : "Load more..."}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}