@turtleclub/core 0.1.0-beta.12 → 0.1.0-beta.120

package/dist/index.cjs

@@ -59,13 +59,18 @@ function RangeSliderFilter({
   label = "Range",
   showValues = true,
   formatValue = defaultFormatter,
-  className = ""
+  className = "",
+  usePopover = false
 }) {
   const [minValue, setMinValue] = (0, import_nuqs.useQueryState)(minQueryKey, import_nuqs.parseAsInteger.withDefault(min));
   const [maxValue, setMaxValue] = (0, import_nuqs.useQueryState)(maxQueryKey, import_nuqs.parseAsInteger.withDefault(max));
   const [localRange, setLocalRange] = (0, import_react.useState)([minValue, maxValue]);
+  const [minInputValue, setMinInputValue] = (0, import_react.useState)(minValue.toString());
+  const [maxInputValue, setMaxInputValue] = (0, import_react.useState)(maxValue.toString());
   (0, import_react.useEffect)(() => {
     setLocalRange([minValue, maxValue]);
+    setMinInputValue(minValue.toString());
+    setMaxInputValue(maxValue.toString());
   }, [minValue, maxValue]);
   const handleRangeChange = (values) => {
     setLocalRange(values);
@@ -79,8 +84,46 @@ function RangeSliderFilter({
       setMaxValue(newMax === max ? null : newMax);
     }
   };
+  const handleMinInputChange = (e) => {
+    setMinInputValue(e.target.value);
+  };
+  const handleMaxInputChange = (e) => {
+    setMaxInputValue(e.target.value);
+  };
+  const handleMinInputBlur = () => {
+    const numValue = parseInt(minInputValue, 10);
+    if (!isNaN(numValue)) {
+      const clampedValue = Math.max(min, Math.min(numValue, localRange[1]));
+      setLocalRange([clampedValue, localRange[1]]);
+      handleRangeCommit([clampedValue, localRange[1]]);
+      setMinInputValue(clampedValue.toString());
+    } else {
+      setMinInputValue(localRange[0].toString());
+    }
+  };
+  const handleMaxInputBlur = () => {
+    const numValue = parseInt(maxInputValue, 10);
+    if (!isNaN(numValue)) {
+      const clampedValue = Math.min(max, Math.max(numValue, localRange[0]));
+      setLocalRange([localRange[0], clampedValue]);
+      handleRangeCommit([localRange[0], clampedValue]);
+      setMaxInputValue(clampedValue.toString());
+    } else {
+      setMaxInputValue(localRange[1].toString());
+    }
+  };
+  const handleMinInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleMinInputBlur();
+    }
+  };
+  const handleMaxInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleMaxInputBlur();
+    }
+  };
   const isDefaultRange = localRange[0] === min && localRange[1] === max;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `space-y-3 ${className}`, children: [
+  const filterContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Label, { className: "text-sm font-medium", children: label }),
       showValues && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
@@ -102,15 +145,53 @@ function RangeSliderFilter({
         className: "w-full"
       }
     ) }),
-    showValues && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatValue(min) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatValue(max) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Label, { htmlFor: "min-input", className: "text-xs text-muted-foreground", children: "Min" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui.Input,
+          {
+            id: "min-input",
+            type: "number",
+            value: minInputValue,
+            onChange: handleMinInputChange,
+            onBlur: handleMinInputBlur,
+            onKeyDown: handleMinInputKeyDown,
+            min,
+            max: localRange[1],
+            step,
+            disabled,
+            className: "h-7 text-xs [appearance:textfield] [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:[-webkit-appearance:none] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:[-webkit-appearance:none]"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Label, { htmlFor: "max-input", className: "text-xs text-muted-foreground text-right", children: "Max" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui.Input,
+          {
+            id: "max-input",
+            type: "number",
+            value: maxInputValue,
+            onChange: handleMaxInputChange,
+            onBlur: handleMaxInputBlur,
+            onKeyDown: handleMaxInputKeyDown,
+            min: localRange[0],
+            max,
+            step,
+            disabled,
+            className: "h-7 text-xs [appearance:textfield] [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:[-webkit-appearance:none] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:[-webkit-appearance:none]"
+          }
+        )
+      ] })
     ] }),
     !isDefaultRange && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
         onClick: () => {
           setLocalRange([min, max]);
+          setMinInputValue(min.toString());
+          setMaxInputValue(max.toString());
           handleRangeCommit([min, max]);
         },
         className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
@@ -119,6 +200,40 @@ function RangeSliderFilter({
       }
     ) })
   ] });
+  if (usePopover) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_ui.PopoverTrigger,
+        {
+          className: (0, import_ui.cn)(
+            (0, import_ui.buttonVariants)({
+              variant: "default",
+              size: "default",
+              border: "bordered"
+            }),
+            "!bg-neutral-alpha-2",
+            className
+          ),
+          disabled,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-medium", children: [
+              label,
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: showValues && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              "[",
+              formatValue(localRange[0]),
+              " - ",
+              formatValue(localRange[1]),
+              "]"
+            ] }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.PopoverContent, { className: "min-w-96", children: filterContent })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: filterContent });
 }
 
 // src/filters/BooleanFilter.tsx
@@ -212,7 +327,6 @@ function FiltersGrid({
 
 // src/wrappers/FiltersPopover.tsx
 var import_ui4 = require("@turtleclub/ui");
-var import_lucide_react = require("lucide-react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function FiltersPopover({
   filters,
@@ -220,7 +334,9 @@ function FiltersPopover({
   columns = 2,
   className,
   popoverClassName,
-  sectionClassName
+  sectionClassName,
+  align = "start",
+  onClearAll
 }) {
   const enabledFilters = filters.filter((filter) => filter.enabled);
   if (enabledFilters.length === 0) {
@@ -239,17 +355,38 @@ function FiltersPopover({
   );
   const sectionNames = Object.keys(sections);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui4.Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui4.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui4.Button, { variant: "outline", className: (0, import_ui4.cn)(className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.SlidersHorizontal, { className: "mr-2 h-4 w-4" }),
-      triggerLabel
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_ui4.PopoverTrigger,
+      {
+        className: (0, import_ui4.cn)(
+          (0, import_ui4.buttonVariants)({
+            variant: "default",
+            size: "default",
+            border: "bordered"
+          }),
+          "!bg-neutral-alpha-2",
+          className
+        ),
+        children: triggerLabel
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_ui4.PopoverContent,
       {
         className: (0, import_ui4.cn)("w-auto min-w-[400px] max-w-[600px]", popoverClassName),
-        align: "start",
+        align,
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { className: "font-medium text-sm", children: "Filters" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { className: "font-medium text-sm", children: "Filters" }),
+            onClearAll && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                onClick: onClearAll,
+                className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+                children: "Reset all"
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-4", children: sectionNames.map((sectionName, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
             sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "border-t border-border mb-4" }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -272,7 +409,7 @@ function FiltersPopover({
 // src/wrappers/ActiveFilterBadges.tsx
 var import_react2 = require("react");
 var import_ui5 = require("@turtleclub/ui");
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function ActiveFilterBadges({
   filters,
@@ -327,7 +464,7 @@ function FilterBadge({ filter, renderBadge, onClearFilter }) {
         onClick: clearFilter,
         className: "ml-1 rounded-full p-0.5 hover:bg-black/10 focus:bg-black/10 focus:outline-none",
         "aria-label": `Clear ${filter.label} filter`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.X, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.X, { className: "h-3 w-3" })
       }
     )
   ] });
@@ -342,11 +479,15 @@ function FiltersWrapper({
   layout,
   className,
   badgesClassName,
+  slotClassName,
+  leftSlot,
+  rightSlot,
   columns = 3,
   triggerLabel = "Filters",
   popoverColumns = 2,
   popoverClassName,
   popoverContentClassName,
+  align = "start",
   clearAllLabel = "Clear All",
   showClearAll = true,
   renderBadge,
@@ -356,16 +497,25 @@ function FiltersWrapper({
 }) {
   const hasActiveFilters = activeFilters.some((filter) => filter.isActive && filter.value);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_ui6.cn)("space-y-3", className), children: [
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FiltersGrid, { filters, columns, className: popoverClassName }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      FiltersPopover,
-      {
-        filters,
-        triggerLabel,
-        columns: popoverColumns,
-        className: popoverClassName,
-        popoverClassName: popoverContentClassName
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_ui6.cn)("flex items-center gap-2", slotClassName), children: [
+      leftSlot,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FiltersGrid, { filters, columns, className: popoverClassName }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        FiltersPopover,
+        {
+          filters,
+          triggerLabel,
+          columns: popoverColumns,
+          className: popoverClassName,
+          popoverClassName: popoverContentClassName,
+          align,
+          onClearAll: () => {
+            const allQueryKeys = activeFilters.map((filter) => filter.queryKeys).filter((keys) => keys !== void 0);
+            onClearAll(allQueryKeys);
+          }
+        }
+      ) }),
+      rightSlot
+    ] }),
     showActiveBadges && hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ActiveFilterBadges,
       {
@@ -591,7 +741,11 @@ function ChainsSelector({
   closeOnSelect = true,
   searchable = true
 }) {
-  const { chains, isLoading } = (0, import_hooks.useSupportedChains)();
+  const { chains, isLoading } = (0, import_hooks.useSupportedChains)({
+    page: 1,
+    limit: 100
+    // High limit to fetch all chains
+  });
   const chainOptions = (0, import_react5.useMemo)(() => {
     if (!chains || chains.length === 0) return [];
     const filteredChains = chains.filter((chain) => chain.status === "active");
@@ -644,8 +798,8 @@ function TokensSelector({
 }) {
   const isChainSelected = !!chainId && chainId.trim() !== "";
   const { tokens, isLoading } = (0, import_hooks2.useSupportedTokens)({
-    // chainId: isChainSelected ? chainId : undefined,
-    limit: 100,
+    chainId: isChainSelected ? chainId : "",
+    limit: 9e3,
     enabled: isChainSelected
   });
   const tokenOptions = (0, import_react6.useMemo)(() => {
@@ -744,7 +898,6 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
 function OpportunitiesSelector({
   value,
   onValueChange,
-  productId,
   placeholder = "Select opportunities",
   disabled = false,
   className,
@@ -752,13 +905,7 @@ function OpportunitiesSelector({
   closeOnSelect = true,
   searchable = true
 }) {
-  const isProductSelected = !!productId && productId.trim() !== "";
-  const { data: opportunitiesData, isLoading } = (0, import_hooks4.useOpportunities)({
-    filters: {
-      productId
-    },
-    enabled: isProductSelected
-  });
+  const { data: opportunitiesData, isLoading } = (0, import_hooks4.useOpportunities)();
   const opportunities = (0, import_react8.useMemo)(
     () => opportunitiesData?.opportunities ?? [],
     [opportunitiesData?.opportunities]
@@ -782,11 +929,6 @@ function OpportunitiesSelector({
       ) : void 0
     }));
   }, [opportunities]);
-  (0, import_react8.useEffect)(() => {
-    if (!isProductSelected && value.length > 0) {
-      onValueChange([]);
-    }
-  }, [isProductSelected, value, onValueChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_ui10.MultiSelect,
     {
@@ -794,8 +936,8 @@ function OpportunitiesSelector({
       options: opportunityOptions,
       value,
       onValueChange,
-      disabled: disabled || isLoading || !isProductSelected,
-      placeholder: !isProductSelected ? "Select a product first" : isLoading ? "Loading opportunities..." : placeholder,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading opportunities..." : placeholder,
       closeOnSelect,
       maxCount,
       className
@@ -817,7 +959,11 @@ function ChainSelector({
   closeOnSelect = true,
   searchable = true
 }) {
-  const { chains, isLoading } = (0, import_hooks5.useSupportedChains)();
+  const { chains, isLoading } = (0, import_hooks5.useSupportedChains)({
+    page: 1,
+    limit: 100
+    // High limit to fetch all chains
+  });
   const chainOptions = (0, import_react9.useMemo)(() => {
     if (!chains || chains.length === 0) return [];
     const filteredChains = chains.filter((chain) => chain.status === "active");
@@ -868,8 +1014,8 @@ function TokenSelector({
 }) {
   const isChainSelected = !!chainId && chainId.trim() !== "";
   const { tokens, isLoading } = (0, import_hooks6.useSupportedTokens)({
-    // chainId: isChainSelected ? chainId : undefined,
-    limit: 100,
+    chainId: isChainSelected ? chainId : "",
+    limit: 9e3,
     enabled: isChainSelected
   });
   const tokenOptions = (0, import_react10.useMemo)(() => {
@@ -965,20 +1111,13 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
 function OpportunitySelector({
   value,
   onValueChange,
-  productId,
   placeholder = "Select opportunity",
   disabled = false,
   className,
   closeOnSelect = true,
   searchable = true
 }) {
-  const isProductSelected = !!productId && productId.trim() !== "";
-  const { data: opportunitiesData, isLoading } = (0, import_hooks8.useOpportunities)({
-    filters: {
-      productId
-    },
-    enabled: isProductSelected
-  });
+  const { data: opportunitiesData, isLoading } = (0, import_hooks8.useOpportunities)();
   const opportunities = (0, import_react12.useMemo)(
     () => opportunitiesData?.opportunities ?? [],
     [opportunitiesData?.opportunities]
@@ -1002,11 +1141,6 @@ function OpportunitySelector({
       ) : void 0
     }));
   }, [opportunities]);
-  (0, import_react12.useEffect)(() => {
-    if (!isProductSelected && value) {
-      onValueChange("");
-    }
-  }, [isProductSelected, value, onValueChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_ui14.Combobox,
     {
@@ -1014,8 +1148,8 @@ function OpportunitySelector({
       options: opportunityOptions,
       value,
       onValueChange,
-      disabled: disabled || isLoading || !isProductSelected,
-      placeholder: !isProductSelected ? "Select a product first" : isLoading ? "Loading opportunities..." : placeholder,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading opportunities..." : placeholder,
       closeOnSelect,
       className
     }