@turtleclub/core 0.1.0-beta.100

package/dist/index.cjs

@@ -0,0 +1,1179 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ActiveFilterBadges: () => ActiveFilterBadges,
+  BooleanFilter: () => BooleanFilter,
+  ChainSelector: () => ChainSelector,
+  ChainsSelector: () => ChainsSelector,
+  Filter: () => Filter,
+  FiltersGrid: () => FiltersGrid,
+  FiltersPopover: () => FiltersPopover,
+  FiltersWrapper: () => FiltersWrapper,
+  MultiSelectFilter: () => MultiSelectFilter,
+  OpportunitiesSelector: () => OpportunitiesSelector,
+  OpportunitySelector: () => OpportunitySelector,
+  ProductSelector: () => ProductSelector,
+  ProductsSelector: () => ProductsSelector,
+  RangeSliderFilter: () => RangeSliderFilter,
+  TokenSelector: () => TokenSelector,
+  TokensSelector: () => TokensSelector,
+  usePagination: () => usePagination,
+  useSorting: () => useSorting
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/filters/RangeSliderFilter.tsx
+var import_react = require("react");
+var import_ui = require("@turtleclub/ui");
+var import_nuqs = require("nuqs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultFormatter = (value) => {
+  return value.toLocaleString();
+};
+function RangeSliderFilter({
+  minQueryKey = "min",
+  maxQueryKey = "max",
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  label = "Range",
+  showValues = true,
+  formatValue = defaultFormatter,
+  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);
+  };
+  const handleRangeCommit = (values) => {
+    const [newMin, newMax] = values;
+    if (newMin !== minValue) {
+      setMinValue(newMin === min ? null : newMin);
+    }
+    if (newMax !== maxValue) {
+      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;
+  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: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatValue(localRange[0]) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "-" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatValue(localRange[1]) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.Slider,
+      {
+        value: localRange,
+        onValueChange: handleRangeChange,
+        onValueCommit: handleRangeCommit,
+        min,
+        max,
+        step,
+        disabled,
+        className: "w-full"
+      }
+    ) }),
+    /* @__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",
+        disabled,
+        children: "Reset"
+      }
+    ) })
+  ] });
+  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
+var import_ui2 = require("@turtleclub/ui");
+var import_nuqs2 = require("nuqs");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function BooleanFilter({
+  queryKey = "enabled",
+  defaultValue = false,
+  disabled = false,
+  label,
+  description,
+  className = ""
+}) {
+  const [value, setValue] = (0, import_nuqs2.useQueryState)(queryKey, import_nuqs2.parseAsBoolean.withDefault(defaultValue));
+  const handleToggle = (checked) => {
+    setValue(checked === defaultValue ? null : checked);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex items-center justify-between space-x-2 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Label, { className: "text-sm font-medium", children: label }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Switch, { checked: value, onCheckedChange: handleToggle, disabled })
+  ] });
+}
+
+// src/filters/Filter.tsx
+var import_nuqs3 = require("nuqs");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Filter({ queryKey, children, onValueChange }) {
+  const [value, setValue] = (0, import_nuqs3.useQueryState)(queryKey, import_nuqs3.parseAsString.withDefault(""));
+  const handleValueChange = (newValue) => {
+    setValue(newValue || null);
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children({ value, onValueChange: handleValueChange }) });
+}
+
+// src/filters/MultiSelectFilter.tsx
+var import_nuqs4 = require("nuqs");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function MultiSelectFilter({ queryKey, children, onValueChange }) {
+  const [value, setValue] = (0, import_nuqs4.useQueryState)(queryKey, (0, import_nuqs4.parseAsArrayOf)(import_nuqs4.parseAsString).withDefault([]));
+  const handleValueChange = (newValue) => {
+    setValue(newValue.length > 0 ? newValue : null);
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: children({ value, onValueChange: handleValueChange }) });
+}
+
+// src/wrappers/FiltersGrid.tsx
+var import_ui3 = require("@turtleclub/ui");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function FiltersGrid({
+  filters,
+  columns = 3,
+  className,
+  sectionClassName
+}) {
+  const enabledFilters = filters.filter((filter) => filter.enabled);
+  if (enabledFilters.length === 0) {
+    return null;
+  }
+  const sections = enabledFilters.reduce(
+    (acc, filter) => {
+      const sectionName = filter.section || "default";
+      if (!acc[sectionName]) {
+        acc[sectionName] = [];
+      }
+      acc[sectionName].push(filter);
+      return acc;
+    },
+    {}
+  );
+  const sectionNames = Object.keys(sections);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_ui3.cn)("space-y-4", className), children: sectionNames.map((sectionName, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+    sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border-t border-border mb-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: (0, import_ui3.cn)("grid gap-2", sectionClassName),
+        style: {
+          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+        },
+        children: sections[sectionName].map((filter) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col gap-2", children: filter.component }, filter.key))
+      }
+    )
+  ] }, sectionName)) });
+}
+
+// src/wrappers/FiltersPopover.tsx
+var import_ui4 = require("@turtleclub/ui");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function FiltersPopover({
+  filters,
+  triggerLabel = "Filters",
+  columns = 2,
+  className,
+  popoverClassName,
+  sectionClassName,
+  align = "start",
+  onClearAll
+}) {
+  const enabledFilters = filters.filter((filter) => filter.enabled);
+  if (enabledFilters.length === 0) {
+    return null;
+  }
+  const sections = enabledFilters.reduce(
+    (acc, filter) => {
+      const sectionName = filter.section || "default";
+      if (!acc[sectionName]) {
+        acc[sectionName] = [];
+      }
+      acc[sectionName].push(filter);
+      return acc;
+    },
+    {}
+  );
+  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,
+      {
+        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,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-4", children: [
+          /* @__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)(
+              "div",
+              {
+                className: (0, import_ui4.cn)("grid gap-2", sectionClassName),
+                style: {
+                  gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+                },
+                children: sections[sectionName].map((filter) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-2", children: filter.component }, filter.key))
+              }
+            )
+          ] }, sectionName)) })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/wrappers/ActiveFilterBadges.tsx
+var import_react2 = require("react");
+var import_ui5 = require("@turtleclub/ui");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ActiveFilterBadges({
+  filters,
+  className,
+  clearAllLabel = "Clear All",
+  showClearAll = true,
+  renderBadge,
+  onClearFilter,
+  onClearAll
+}) {
+  const activeFilters = (0, import_react2.useMemo)(() => {
+    return filters.filter((filter) => filter.isActive && filter.value);
+  }, [filters]);
+  const clearAll = () => {
+    const allQueryKeys = activeFilters.map((filter) => filter.queryKeys);
+    onClearAll(allQueryKeys);
+  };
+  if (activeFilters.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_ui5.cn)("flex flex-wrap items-center gap-2", className), children: [
+    activeFilters.map((filter) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        FilterBadge,
+        {
+          filter,
+          renderBadge,
+          onClearFilter
+        },
+        filter.key
+      );
+    }),
+    showClearAll && activeFilters.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ui5.Button, { variant: "ghost", size: "sm", onClick: clearAll, className: "h-7 px-2 text-xs", children: clearAllLabel })
+  ] });
+}
+function FilterBadge({ filter, renderBadge, onClearFilter }) {
+  const clearFilter = () => {
+    onClearFilter(filter.queryKeys);
+  };
+  if (renderBadge) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: renderBadge(filter, clearFilter) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_ui5.Badge, { className: "flex items-center gap-1 pr-1 border-border border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-xs", children: [
+      filter.label,
+      ": ",
+      filter.value
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        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_react.X, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+}
+
+// src/wrappers/FiltersWrapper.tsx
+var import_ui6 = require("@turtleclub/ui");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function FiltersWrapper({
+  filters,
+  activeFilters,
+  layout,
+  className,
+  badgesClassName,
+  slotClassName,
+  leftSlot,
+  rightSlot,
+  columns = 3,
+  triggerLabel = "Filters",
+  popoverColumns = 2,
+  popoverClassName,
+  popoverContentClassName,
+  align = "start",
+  clearAllLabel = "Clear All",
+  showClearAll = true,
+  renderBadge,
+  showActiveBadges = true,
+  onClearFilter,
+  onClearAll
+}) {
+  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: [
+    /* @__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,
+      {
+        filters: activeFilters,
+        className: badgesClassName,
+        clearAllLabel,
+        showClearAll,
+        renderBadge,
+        onClearFilter,
+        onClearAll
+      }
+    )
+  ] });
+}
+
+// src/helpers/usePagination.ts
+var import_nuqs5 = require("nuqs");
+var import_react3 = require("react");
+function usePagination(options = {}) {
+  const {
+    defaultPageSize = 10,
+    defaultPageIndex = 0,
+    pageIndexKey = "page",
+    pageSizeKey = "pageSize"
+  } = options;
+  const [rawPageIndex, setRawPageIndex] = (0, import_nuqs5.useQueryState)(
+    pageIndexKey,
+    import_nuqs5.parseAsInteger.withDefault(defaultPageIndex)
+  );
+  const [rawPageSize, setRawPageSize] = (0, import_nuqs5.useQueryState)(
+    pageSizeKey,
+    import_nuqs5.parseAsInteger.withDefault(defaultPageSize)
+  );
+  const pageIndex = (0, import_react3.useMemo)(() => Math.max(0, rawPageIndex), [rawPageIndex]);
+  const pageSize = rawPageSize;
+  const pagination = (0, import_react3.useMemo)(
+    () => ({
+      pageIndex,
+      pageSize
+    }),
+    [pageIndex, pageSize]
+  );
+  const setPagination = (0, import_react3.useCallback)(
+    (updater) => {
+      const newPagination = typeof updater === "function" ? updater(pagination) : updater;
+      if (newPagination.pageIndex !== pageIndex) {
+        setRawPageIndex(Math.max(0, newPagination.pageIndex));
+      }
+      if (newPagination.pageSize !== pageSize) {
+        setRawPageSize(newPagination.pageSize);
+      }
+    },
+    [pagination, pageIndex, pageSize, setRawPageIndex, setRawPageSize]
+  );
+  const setPageIndex = (0, import_react3.useCallback)(
+    (newPageIndex) => {
+      setRawPageIndex(Math.max(0, newPageIndex));
+    },
+    [setRawPageIndex]
+  );
+  const setPageSize = (0, import_react3.useCallback)(
+    (newPageSize) => {
+      setRawPageSize(newPageSize);
+      setRawPageIndex(0);
+    },
+    [setRawPageSize, setRawPageIndex]
+  );
+  const nextPage = (0, import_react3.useCallback)(
+    (totalPages) => {
+      const nextPageIndex = pageIndex + 1;
+      if (!totalPages || nextPageIndex < totalPages) {
+        setPageIndex(nextPageIndex);
+      }
+    },
+    [pageIndex, setPageIndex]
+  );
+  const previousPage = (0, import_react3.useCallback)(() => {
+    if (pageIndex > 0) {
+      setPageIndex(pageIndex - 1);
+    }
+  }, [pageIndex, setPageIndex]);
+  const firstPage = (0, import_react3.useCallback)(() => {
+    setPageIndex(0);
+  }, [setPageIndex]);
+  const lastPage = (0, import_react3.useCallback)(
+    (totalPages) => {
+      setPageIndex(Math.max(0, totalPages - 1));
+    },
+    [setPageIndex]
+  );
+  const reset = (0, import_react3.useCallback)(() => {
+    setRawPageIndex(defaultPageIndex);
+    setRawPageSize(defaultPageSize);
+  }, [setRawPageIndex, setRawPageSize, defaultPageIndex, defaultPageSize]);
+  const canPreviousPage = pageIndex > 0;
+  const canNextPage = (0, import_react3.useCallback)(
+    (totalPages) => {
+      if (!totalPages) return true;
+      return pageIndex < totalPages - 1;
+    },
+    [pageIndex]
+  );
+  return {
+    pagination,
+    setPagination,
+    pageIndex,
+    pageSize,
+    setPageIndex,
+    setPageSize,
+    nextPage,
+    previousPage,
+    firstPage,
+    lastPage,
+    reset,
+    canNextPage,
+    canPreviousPage
+  };
+}
+
+// src/helpers/useSorting.ts
+var import_nuqs6 = require("nuqs");
+var import_react4 = require("react");
+function useSorting(options = {}) {
+  const {
+    defaultSortBy,
+    defaultSortOrder = "asc",
+    sortByKey = "sortBy",
+    sortOrderKey = "sortOrder"
+  } = options;
+  const [sortBy, setSortBy] = (0, import_nuqs6.useQueryState)(
+    sortByKey,
+    import_nuqs6.parseAsString.withDefault(defaultSortBy || "")
+  );
+  const [sortOrder, setSortOrder] = (0, import_nuqs6.useQueryState)(
+    sortOrderKey,
+    import_nuqs6.parseAsString.withDefault(defaultSortOrder)
+  );
+  const validSortOrder = (0, import_react4.useMemo)(() => {
+    return sortOrder === "desc" ? "desc" : "asc";
+  }, [sortOrder]);
+  const sorting = (0, import_react4.useMemo)(() => {
+    if (!sortBy || sortBy.trim() === "") {
+      return [];
+    }
+    return [
+      {
+        id: sortBy,
+        desc: validSortOrder === "desc"
+      }
+    ];
+  }, [sortBy, validSortOrder]);
+  const setSorting = (0, import_react4.useCallback)(
+    (updater) => {
+      const newSorting = typeof updater === "function" ? updater(sorting) : updater;
+      if (newSorting.length === 0) {
+        setSortBy("");
+      } else {
+        const firstSort = newSorting[0];
+        setSortBy(firstSort.id);
+        setSortOrder(firstSort.desc ? "desc" : "asc");
+      }
+    },
+    [sorting, setSortBy, setSortOrder]
+  );
+  const setSort = (0, import_react4.useCallback)(
+    (column, order = "asc") => {
+      setSortBy(column);
+      setSortOrder(order);
+    },
+    [setSortBy, setSortOrder]
+  );
+  const clearSort = (0, import_react4.useCallback)(() => {
+    setSortBy(null);
+  }, [setSortBy]);
+  const toggleSort = (0, import_react4.useCallback)(
+    (column) => {
+      if (sortBy === column) {
+        setSortOrder(validSortOrder === "asc" ? "desc" : "asc");
+      } else {
+        setSortBy(column);
+        setSortOrder("asc");
+      }
+    },
+    [sortBy, validSortOrder, setSortBy, setSortOrder]
+  );
+  const isSorted = (0, import_react4.useCallback)(
+    (column) => {
+      return sortBy === column;
+    },
+    [sortBy]
+  );
+  const getSortOrder = (0, import_react4.useCallback)(
+    (column) => {
+      return sortBy === column ? validSortOrder : void 0;
+    },
+    [sortBy, validSortOrder]
+  );
+  return {
+    sorting,
+    setSorting,
+    sortBy: sortBy || void 0,
+    sortOrder: validSortOrder,
+    setSort,
+    clearSort,
+    toggleSort,
+    isSorted,
+    getSortOrder
+  };
+}
+
+// src/selectors/ChainsSelector.tsx
+var import_react5 = require("react");
+var import_ui7 = require("@turtleclub/ui");
+var import_hooks = require("@turtleclub/hooks");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ChainsSelector({
+  value,
+  onValueChange,
+  placeholder = "Select chains",
+  disabled = false,
+  className,
+  maxCount = 1,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  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");
+    return filteredChains.map((chain) => ({
+      label: chain.name,
+      value: chain?.id ?? "",
+      icon: chain.logoUrl ? () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "img",
+        {
+          src: chain.logoUrl,
+          alt: chain.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [chains]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_ui7.MultiSelect,
+    {
+      searchable,
+      options: chainOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading chains..." : placeholder,
+      closeOnSelect,
+      maxCount,
+      className
+    }
+  );
+}
+
+// src/selectors/TokensSelector.tsx
+var import_react6 = require("react");
+var import_ui8 = require("@turtleclub/ui");
+var import_hooks2 = require("@turtleclub/hooks");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function TokensSelector({
+  value,
+  onValueChange,
+  chainId,
+  placeholder = "Select tokens",
+  disabled = false,
+  className,
+  maxCount = 1,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const isChainSelected = !!chainId && chainId.trim() !== "";
+  const { tokens, isLoading } = (0, import_hooks2.useSupportedTokens)({
+    chainId: isChainSelected ? chainId : "",
+    limit: 9e3,
+    enabled: isChainSelected
+  });
+  const tokenOptions = (0, import_react6.useMemo)(() => {
+    if (!tokens) return [];
+    return tokens.map((token) => ({
+      label: `${token.symbol} - ${token.name}`,
+      value: token?.id || "",
+      icon: token.logoUrl ? () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "img",
+        {
+          src: token.logoUrl,
+          alt: token.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [tokens]);
+  (0, import_react6.useEffect)(() => {
+    if (!isChainSelected && value.length > 0) {
+      onValueChange([]);
+    }
+  }, [isChainSelected, value, onValueChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_ui8.MultiSelect,
+    {
+      searchable,
+      options: tokenOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading || !isChainSelected,
+      placeholder: !isChainSelected ? "Select a chain first" : isLoading ? "Loading tokens..." : placeholder,
+      closeOnSelect,
+      maxCount,
+      className
+    }
+  );
+}
+
+// src/selectors/ProductsSelector.tsx
+var import_react7 = require("react");
+var import_ui9 = require("@turtleclub/ui");
+var import_hooks3 = require("@turtleclub/hooks");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ProductsSelector({
+  value,
+  onValueChange,
+  placeholder = "Select products",
+  disabled = false,
+  className,
+  maxCount = 1,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { data: productsData, isLoading } = (0, import_hooks3.useProducts)({});
+  const products = (0, import_react7.useMemo)(() => productsData?.products ?? [], [productsData?.products]);
+  const productOptions = (0, import_react7.useMemo)(() => {
+    if (!products || products.length === 0) return [];
+    return products.map((product) => ({
+      label: product.name,
+      value: product.id,
+      icon: product.logoUrl ? () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "img",
+        {
+          src: product.logoUrl,
+          alt: product.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [products]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_ui9.MultiSelect,
+    {
+      searchable,
+      options: productOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading products..." : placeholder,
+      closeOnSelect,
+      maxCount,
+      className
+    }
+  );
+}
+
+// src/selectors/OpportunitiesSelector.tsx
+var import_react8 = require("react");
+var import_ui10 = require("@turtleclub/ui");
+var import_hooks4 = require("@turtleclub/hooks");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function OpportunitiesSelector({
+  value,
+  onValueChange,
+  placeholder = "Select opportunities",
+  disabled = false,
+  className,
+  maxCount = 1,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { data: opportunitiesData, isLoading } = (0, import_hooks4.useOpportunities)();
+  const opportunities = (0, import_react8.useMemo)(
+    () => opportunitiesData?.opportunities ?? [],
+    [opportunitiesData?.opportunities]
+  );
+  const opportunityOptions = (0, import_react8.useMemo)(() => {
+    if (!opportunities || opportunities.length === 0) return [];
+    const filteredOpportunities = opportunities.filter((opp) => opp.status === "active");
+    return filteredOpportunities.map((opportunity) => ({
+      label: opportunity.name || opportunity.shortName,
+      value: opportunity.id,
+      description: opportunity.shortName !== opportunity.name ? opportunity.shortName : void 0,
+      icon: opportunity.depositTokens?.[0]?.logoUrl ? () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "img",
+        {
+          src: opportunity.depositTokens[0].logoUrl,
+          alt: opportunity.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [opportunities]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_ui10.MultiSelect,
+    {
+      searchable,
+      options: opportunityOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading opportunities..." : placeholder,
+      closeOnSelect,
+      maxCount,
+      className
+    }
+  );
+}
+
+// src/selectors/ChainSelector.tsx
+var import_react9 = require("react");
+var import_ui11 = require("@turtleclub/ui");
+var import_hooks5 = require("@turtleclub/hooks");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ChainSelector({
+  value,
+  onValueChange,
+  placeholder = "Select chain",
+  disabled = false,
+  className,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  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");
+    return filteredChains.map((chain) => ({
+      label: chain.name,
+      value: chain?.id ?? "",
+      icon: chain.logoUrl ? () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "img",
+        {
+          src: chain.logoUrl,
+          alt: chain.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [chains]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_ui11.Combobox,
+    {
+      searchable,
+      options: chainOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading chains..." : placeholder,
+      closeOnSelect,
+      className
+    }
+  );
+}
+
+// src/selectors/TokenSelector.tsx
+var import_react10 = require("react");
+var import_ui12 = require("@turtleclub/ui");
+var import_hooks6 = require("@turtleclub/hooks");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function TokenSelector({
+  value,
+  onValueChange,
+  chainId,
+  placeholder = "Select token",
+  disabled = false,
+  className,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const isChainSelected = !!chainId && chainId.trim() !== "";
+  const { tokens, isLoading } = (0, import_hooks6.useSupportedTokens)({
+    chainId: isChainSelected ? chainId : "",
+    limit: 9e3,
+    enabled: isChainSelected
+  });
+  const tokenOptions = (0, import_react10.useMemo)(() => {
+    if (!tokens) return [];
+    return tokens.map((token) => ({
+      label: `${token.symbol} - ${token.name}`,
+      value: token?.id || "",
+      icon: token.logoUrl ? () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "img",
+        {
+          src: token.logoUrl,
+          alt: token.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [tokens]);
+  (0, import_react10.useEffect)(() => {
+    if (!isChainSelected && value) {
+      onValueChange("");
+    }
+  }, [isChainSelected, value, onValueChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_ui12.Combobox,
+    {
+      searchable,
+      options: tokenOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading || !isChainSelected,
+      placeholder: !isChainSelected ? "Select a chain first" : isLoading ? "Loading tokens..." : placeholder,
+      closeOnSelect,
+      className
+    }
+  );
+}
+
+// src/selectors/ProductSelector.tsx
+var import_react11 = require("react");
+var import_ui13 = require("@turtleclub/ui");
+var import_hooks7 = require("@turtleclub/hooks");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ProductSelector({
+  value,
+  onValueChange,
+  placeholder = "Select product",
+  disabled = false,
+  className,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { data: productsData, isLoading } = (0, import_hooks7.useProducts)({});
+  const products = (0, import_react11.useMemo)(() => productsData?.products ?? [], [productsData?.products]);
+  const productOptions = (0, import_react11.useMemo)(() => {
+    if (!products || products.length === 0) return [];
+    return products.map((product) => ({
+      label: product.name,
+      value: product.id,
+      icon: product.logoUrl ? () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "img",
+        {
+          src: product.logoUrl,
+          alt: product.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [products]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_ui13.Combobox,
+    {
+      searchable,
+      options: productOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading products..." : placeholder,
+      closeOnSelect,
+      className
+    }
+  );
+}
+
+// src/selectors/OpportunitySelector.tsx
+var import_react12 = require("react");
+var import_ui14 = require("@turtleclub/ui");
+var import_hooks8 = require("@turtleclub/hooks");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function OpportunitySelector({
+  value,
+  onValueChange,
+  placeholder = "Select opportunity",
+  disabled = false,
+  className,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { data: opportunitiesData, isLoading } = (0, import_hooks8.useOpportunities)();
+  const opportunities = (0, import_react12.useMemo)(
+    () => opportunitiesData?.opportunities ?? [],
+    [opportunitiesData?.opportunities]
+  );
+  const opportunityOptions = (0, import_react12.useMemo)(() => {
+    if (!opportunities || opportunities.length === 0) return [];
+    const filteredOpportunities = opportunities.filter((opp) => opp.status === "active");
+    return filteredOpportunities.map((opportunity) => ({
+      label: opportunity.name || opportunity.shortName,
+      value: opportunity.id,
+      description: opportunity.shortName !== opportunity.name ? opportunity.shortName : void 0,
+      icon: opportunity.depositTokens?.[0]?.logoUrl ? () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "img",
+        {
+          src: opportunity.depositTokens[0].logoUrl,
+          alt: opportunity.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [opportunities]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_ui14.Combobox,
+    {
+      searchable,
+      options: opportunityOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading opportunities..." : placeholder,
+      closeOnSelect,
+      className
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActiveFilterBadges,
+  BooleanFilter,
+  ChainSelector,
+  ChainsSelector,
+  Filter,
+  FiltersGrid,
+  FiltersPopover,
+  FiltersWrapper,
+  MultiSelectFilter,
+  OpportunitiesSelector,
+  OpportunitySelector,
+  ProductSelector,
+  ProductsSelector,
+  RangeSliderFilter,
+  TokenSelector,
+  TokensSelector,
+  usePagination,
+  useSorting
+});
+//# sourceMappingURL=index.cjs.map