@turtleclub/core 0.1.0-beta.100

package/dist/index.js

@@ -0,0 +1,1150 @@
+// src/filters/RangeSliderFilter.tsx
+import { useEffect, useState } from "react";
+import {
+  Slider,
+  Label,
+  Input,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  buttonVariants,
+  cn
+} from "@turtleclub/ui";
+import { useQueryState, parseAsInteger } from "nuqs";
+import { Fragment, jsx, jsxs } from "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] = useQueryState(minQueryKey, parseAsInteger.withDefault(min));
+  const [maxValue, setMaxValue] = useQueryState(maxQueryKey, parseAsInteger.withDefault(max));
+  const [localRange, setLocalRange] = useState([minValue, maxValue]);
+  const [minInputValue, setMinInputValue] = useState(minValue.toString());
+  const [maxInputValue, setMaxInputValue] = useState(maxValue.toString());
+  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__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: label }),
+      showValues && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: formatValue(localRange[0]) }),
+        /* @__PURE__ */ jsx("span", { children: "-" }),
+        /* @__PURE__ */ jsx("span", { children: formatValue(localRange[1]) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-2", children: /* @__PURE__ */ jsx(
+      Slider,
+      {
+        value: localRange,
+        onValueChange: handleRangeChange,
+        onValueCommit: handleRangeCommit,
+        min,
+        max,
+        step,
+        disabled,
+        className: "w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 flex-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "min-input", className: "text-xs text-muted-foreground", children: "Min" }),
+        /* @__PURE__ */ jsx(
+          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__ */ jsxs("div", { className: "flex flex-col gap-1 flex-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "max-input", className: "text-xs text-muted-foreground text-right", children: "Max" }),
+        /* @__PURE__ */ jsx(
+          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__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ 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__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsxs(
+        PopoverTrigger,
+        {
+          className: cn(
+            buttonVariants({
+              variant: "default",
+              size: "default",
+              border: "bordered"
+            }),
+            "!bg-neutral-alpha-2",
+            className
+          ),
+          disabled,
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+              label,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: showValues && /* @__PURE__ */ jsxs(Fragment, { children: [
+              "[",
+              formatValue(localRange[0]),
+              " - ",
+              formatValue(localRange[1]),
+              "]"
+            ] }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "min-w-96", children: filterContent })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: filterContent });
+}
+
+// src/filters/BooleanFilter.tsx
+import { Switch, Label as Label2 } from "@turtleclub/ui";
+import { useQueryState as useQueryState2, parseAsBoolean } from "nuqs";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function BooleanFilter({
+  queryKey = "enabled",
+  defaultValue = false,
+  disabled = false,
+  label,
+  description,
+  className = ""
+}) {
+  const [value, setValue] = useQueryState2(queryKey, parseAsBoolean.withDefault(defaultValue));
+  const handleToggle = (checked) => {
+    setValue(checked === defaultValue ? null : checked);
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: `flex items-center justify-between space-x-2 ${className}`, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsx2(Label2, { className: "text-sm font-medium", children: label }),
+      description && /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx2(Switch, { checked: value, onCheckedChange: handleToggle, disabled })
+  ] });
+}
+
+// src/filters/Filter.tsx
+import { useQueryState as useQueryState3, parseAsString } from "nuqs";
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
+function Filter({ queryKey, children, onValueChange }) {
+  const [value, setValue] = useQueryState3(queryKey, parseAsString.withDefault(""));
+  const handleValueChange = (newValue) => {
+    setValue(newValue || null);
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx3(Fragment2, { children: children({ value, onValueChange: handleValueChange }) });
+}
+
+// src/filters/MultiSelectFilter.tsx
+import { useQueryState as useQueryState4, parseAsArrayOf, parseAsString as parseAsString2 } from "nuqs";
+import { Fragment as Fragment3, jsx as jsx4 } from "react/jsx-runtime";
+function MultiSelectFilter({ queryKey, children, onValueChange }) {
+  const [value, setValue] = useQueryState4(queryKey, parseAsArrayOf(parseAsString2).withDefault([]));
+  const handleValueChange = (newValue) => {
+    setValue(newValue.length > 0 ? newValue : null);
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx4(Fragment3, { children: children({ value, onValueChange: handleValueChange }) });
+}
+
+// src/wrappers/FiltersGrid.tsx
+import { cn as cn2 } from "@turtleclub/ui";
+import { jsx as jsx5, jsxs as jsxs3 } from "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__ */ jsx5("div", { className: cn2("space-y-4", className), children: sectionNames.map((sectionName, sectionIndex) => /* @__PURE__ */ jsxs3("div", { children: [
+    sectionIndex > 0 && /* @__PURE__ */ jsx5("div", { className: "border-t border-border mb-4" }),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn2("grid gap-2", sectionClassName),
+        style: {
+          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+        },
+        children: sections[sectionName].map((filter) => /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-2", children: filter.component }, filter.key))
+      }
+    )
+  ] }, sectionName)) });
+}
+
+// src/wrappers/FiltersPopover.tsx
+import {
+  Popover as Popover2,
+  PopoverContent as PopoverContent2,
+  PopoverTrigger as PopoverTrigger2,
+  buttonVariants as buttonVariants2,
+  cn as cn3
+} from "@turtleclub/ui";
+import { jsx as jsx6, jsxs as jsxs4 } from "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__ */ jsxs4(Popover2, { children: [
+    /* @__PURE__ */ jsx6(
+      PopoverTrigger2,
+      {
+        className: cn3(
+          buttonVariants2({
+            variant: "default",
+            size: "default",
+            border: "bordered"
+          }),
+          "!bg-neutral-alpha-2",
+          className
+        ),
+        children: triggerLabel
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      PopoverContent2,
+      {
+        className: cn3("w-auto min-w-[400px] max-w-[600px]", popoverClassName),
+        align,
+        children: /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx6("h4", { className: "font-medium text-sm", children: "Filters" }),
+            onClearAll && /* @__PURE__ */ jsx6(
+              "button",
+              {
+                onClick: onClearAll,
+                className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+                children: "Reset all"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx6("div", { className: "space-y-4", children: sectionNames.map((sectionName, sectionIndex) => /* @__PURE__ */ jsxs4("div", { children: [
+            sectionIndex > 0 && /* @__PURE__ */ jsx6("div", { className: "border-t border-border mb-4" }),
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: cn3("grid gap-2", sectionClassName),
+                style: {
+                  gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+                },
+                children: sections[sectionName].map((filter) => /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-2", children: filter.component }, filter.key))
+              }
+            )
+          ] }, sectionName)) })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/wrappers/ActiveFilterBadges.tsx
+import { useMemo } from "react";
+import { Badge as Badge2, Button, cn as cn4 } from "@turtleclub/ui";
+import { X } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ActiveFilterBadges({
+  filters,
+  className,
+  clearAllLabel = "Clear All",
+  showClearAll = true,
+  renderBadge,
+  onClearFilter,
+  onClearAll
+}) {
+  const activeFilters = 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__ */ jsxs5("div", { className: cn4("flex flex-wrap items-center gap-2", className), children: [
+    activeFilters.map((filter) => {
+      return /* @__PURE__ */ jsx7(
+        FilterBadge,
+        {
+          filter,
+          renderBadge,
+          onClearFilter
+        },
+        filter.key
+      );
+    }),
+    showClearAll && activeFilters.length > 1 && /* @__PURE__ */ jsx7(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__ */ jsx7(Fragment4, { children: renderBadge(filter, clearFilter) });
+  }
+  return /* @__PURE__ */ jsxs5(Badge2, { className: "flex items-center gap-1 pr-1 border-border border", children: [
+    /* @__PURE__ */ jsxs5("span", { className: "text-xs", children: [
+      filter.label,
+      ": ",
+      filter.value
+    ] }),
+    /* @__PURE__ */ jsx7(
+      "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__ */ jsx7(X, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+}
+
+// src/wrappers/FiltersWrapper.tsx
+import { cn as cn5 } from "@turtleclub/ui";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs6 } from "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__ */ jsxs6("div", { className: cn5("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: cn5("flex items-center gap-2", slotClassName), children: [
+      leftSlot,
+      /* @__PURE__ */ jsx8(Fragment5, { children: layout === "grid" ? /* @__PURE__ */ jsx8(FiltersGrid, { filters, columns, className: popoverClassName }) : /* @__PURE__ */ jsx8(
+        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__ */ jsx8(
+      ActiveFilterBadges,
+      {
+        filters: activeFilters,
+        className: badgesClassName,
+        clearAllLabel,
+        showClearAll,
+        renderBadge,
+        onClearFilter,
+        onClearAll
+      }
+    )
+  ] });
+}
+
+// src/helpers/usePagination.ts
+import { useQueryState as useQueryState5, parseAsInteger as parseAsInteger2 } from "nuqs";
+import { useMemo as useMemo2, useCallback } from "react";
+function usePagination(options = {}) {
+  const {
+    defaultPageSize = 10,
+    defaultPageIndex = 0,
+    pageIndexKey = "page",
+    pageSizeKey = "pageSize"
+  } = options;
+  const [rawPageIndex, setRawPageIndex] = useQueryState5(
+    pageIndexKey,
+    parseAsInteger2.withDefault(defaultPageIndex)
+  );
+  const [rawPageSize, setRawPageSize] = useQueryState5(
+    pageSizeKey,
+    parseAsInteger2.withDefault(defaultPageSize)
+  );
+  const pageIndex = useMemo2(() => Math.max(0, rawPageIndex), [rawPageIndex]);
+  const pageSize = rawPageSize;
+  const pagination = useMemo2(
+    () => ({
+      pageIndex,
+      pageSize
+    }),
+    [pageIndex, pageSize]
+  );
+  const setPagination = 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 = useCallback(
+    (newPageIndex) => {
+      setRawPageIndex(Math.max(0, newPageIndex));
+    },
+    [setRawPageIndex]
+  );
+  const setPageSize = useCallback(
+    (newPageSize) => {
+      setRawPageSize(newPageSize);
+      setRawPageIndex(0);
+    },
+    [setRawPageSize, setRawPageIndex]
+  );
+  const nextPage = useCallback(
+    (totalPages) => {
+      const nextPageIndex = pageIndex + 1;
+      if (!totalPages || nextPageIndex < totalPages) {
+        setPageIndex(nextPageIndex);
+      }
+    },
+    [pageIndex, setPageIndex]
+  );
+  const previousPage = useCallback(() => {
+    if (pageIndex > 0) {
+      setPageIndex(pageIndex - 1);
+    }
+  }, [pageIndex, setPageIndex]);
+  const firstPage = useCallback(() => {
+    setPageIndex(0);
+  }, [setPageIndex]);
+  const lastPage = useCallback(
+    (totalPages) => {
+      setPageIndex(Math.max(0, totalPages - 1));
+    },
+    [setPageIndex]
+  );
+  const reset = useCallback(() => {
+    setRawPageIndex(defaultPageIndex);
+    setRawPageSize(defaultPageSize);
+  }, [setRawPageIndex, setRawPageSize, defaultPageIndex, defaultPageSize]);
+  const canPreviousPage = pageIndex > 0;
+  const canNextPage = 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
+import { useQueryState as useQueryState6, parseAsString as parseAsString3 } from "nuqs";
+import { useMemo as useMemo3, useCallback as useCallback2 } from "react";
+function useSorting(options = {}) {
+  const {
+    defaultSortBy,
+    defaultSortOrder = "asc",
+    sortByKey = "sortBy",
+    sortOrderKey = "sortOrder"
+  } = options;
+  const [sortBy, setSortBy] = useQueryState6(
+    sortByKey,
+    parseAsString3.withDefault(defaultSortBy || "")
+  );
+  const [sortOrder, setSortOrder] = useQueryState6(
+    sortOrderKey,
+    parseAsString3.withDefault(defaultSortOrder)
+  );
+  const validSortOrder = useMemo3(() => {
+    return sortOrder === "desc" ? "desc" : "asc";
+  }, [sortOrder]);
+  const sorting = useMemo3(() => {
+    if (!sortBy || sortBy.trim() === "") {
+      return [];
+    }
+    return [
+      {
+        id: sortBy,
+        desc: validSortOrder === "desc"
+      }
+    ];
+  }, [sortBy, validSortOrder]);
+  const setSorting = useCallback2(
+    (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 = useCallback2(
+    (column, order = "asc") => {
+      setSortBy(column);
+      setSortOrder(order);
+    },
+    [setSortBy, setSortOrder]
+  );
+  const clearSort = useCallback2(() => {
+    setSortBy(null);
+  }, [setSortBy]);
+  const toggleSort = useCallback2(
+    (column) => {
+      if (sortBy === column) {
+        setSortOrder(validSortOrder === "asc" ? "desc" : "asc");
+      } else {
+        setSortBy(column);
+        setSortOrder("asc");
+      }
+    },
+    [sortBy, validSortOrder, setSortBy, setSortOrder]
+  );
+  const isSorted = useCallback2(
+    (column) => {
+      return sortBy === column;
+    },
+    [sortBy]
+  );
+  const getSortOrder = useCallback2(
+    (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
+import { useMemo as useMemo4 } from "react";
+import { MultiSelect } from "@turtleclub/ui";
+import { useSupportedChains } from "@turtleclub/hooks";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ChainsSelector({
+  value,
+  onValueChange,
+  placeholder = "Select chains",
+  disabled = false,
+  className,
+  maxCount = 1,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { chains, isLoading } = useSupportedChains({
+    page: 1,
+    limit: 100
+    // High limit to fetch all chains
+  });
+  const chainOptions = useMemo4(() => {
+    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__ */ jsx9(
+        "img",
+        {
+          src: chain.logoUrl,
+          alt: chain.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [chains]);
+  return /* @__PURE__ */ jsx9(
+    MultiSelect,
+    {
+      searchable,
+      options: chainOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading chains..." : placeholder,
+      closeOnSelect,
+      maxCount,
+      className
+    }
+  );
+}
+
+// src/selectors/TokensSelector.tsx
+import { useEffect as useEffect2, useMemo as useMemo5 } from "react";
+import { MultiSelect as MultiSelect2 } from "@turtleclub/ui";
+import { useSupportedTokens } from "@turtleclub/hooks";
+import { jsx as jsx10 } from "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 } = useSupportedTokens({
+    chainId: isChainSelected ? chainId : "",
+    limit: 9e3,
+    enabled: isChainSelected
+  });
+  const tokenOptions = useMemo5(() => {
+    if (!tokens) return [];
+    return tokens.map((token) => ({
+      label: `${token.symbol} - ${token.name}`,
+      value: token?.id || "",
+      icon: token.logoUrl ? () => /* @__PURE__ */ jsx10(
+        "img",
+        {
+          src: token.logoUrl,
+          alt: token.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [tokens]);
+  useEffect2(() => {
+    if (!isChainSelected && value.length > 0) {
+      onValueChange([]);
+    }
+  }, [isChainSelected, value, onValueChange]);
+  return /* @__PURE__ */ jsx10(
+    MultiSelect2,
+    {
+      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
+import { useMemo as useMemo6 } from "react";
+import { MultiSelect as MultiSelect3 } from "@turtleclub/ui";
+import { useProducts } from "@turtleclub/hooks";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function ProductsSelector({
+  value,
+  onValueChange,
+  placeholder = "Select products",
+  disabled = false,
+  className,
+  maxCount = 1,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { data: productsData, isLoading } = useProducts({});
+  const products = useMemo6(() => productsData?.products ?? [], [productsData?.products]);
+  const productOptions = useMemo6(() => {
+    if (!products || products.length === 0) return [];
+    return products.map((product) => ({
+      label: product.name,
+      value: product.id,
+      icon: product.logoUrl ? () => /* @__PURE__ */ jsx11(
+        "img",
+        {
+          src: product.logoUrl,
+          alt: product.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [products]);
+  return /* @__PURE__ */ jsx11(
+    MultiSelect3,
+    {
+      searchable,
+      options: productOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading products..." : placeholder,
+      closeOnSelect,
+      maxCount,
+      className
+    }
+  );
+}
+
+// src/selectors/OpportunitiesSelector.tsx
+import { useMemo as useMemo7 } from "react";
+import { MultiSelect as MultiSelect4 } from "@turtleclub/ui";
+import { useOpportunities } from "@turtleclub/hooks";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function OpportunitiesSelector({
+  value,
+  onValueChange,
+  placeholder = "Select opportunities",
+  disabled = false,
+  className,
+  maxCount = 1,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { data: opportunitiesData, isLoading } = useOpportunities();
+  const opportunities = useMemo7(
+    () => opportunitiesData?.opportunities ?? [],
+    [opportunitiesData?.opportunities]
+  );
+  const opportunityOptions = useMemo7(() => {
+    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__ */ jsx12(
+        "img",
+        {
+          src: opportunity.depositTokens[0].logoUrl,
+          alt: opportunity.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [opportunities]);
+  return /* @__PURE__ */ jsx12(
+    MultiSelect4,
+    {
+      searchable,
+      options: opportunityOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading opportunities..." : placeholder,
+      closeOnSelect,
+      maxCount,
+      className
+    }
+  );
+}
+
+// src/selectors/ChainSelector.tsx
+import { useMemo as useMemo8 } from "react";
+import { Combobox } from "@turtleclub/ui";
+import { useSupportedChains as useSupportedChains2 } from "@turtleclub/hooks";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function ChainSelector({
+  value,
+  onValueChange,
+  placeholder = "Select chain",
+  disabled = false,
+  className,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { chains, isLoading } = useSupportedChains2({
+    page: 1,
+    limit: 100
+    // High limit to fetch all chains
+  });
+  const chainOptions = useMemo8(() => {
+    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__ */ jsx13(
+        "img",
+        {
+          src: chain.logoUrl,
+          alt: chain.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [chains]);
+  return /* @__PURE__ */ jsx13(
+    Combobox,
+    {
+      searchable,
+      options: chainOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading chains..." : placeholder,
+      closeOnSelect,
+      className
+    }
+  );
+}
+
+// src/selectors/TokenSelector.tsx
+import { useEffect as useEffect3, useMemo as useMemo9 } from "react";
+import { Combobox as Combobox2 } from "@turtleclub/ui";
+import { useSupportedTokens as useSupportedTokens2 } from "@turtleclub/hooks";
+import { jsx as jsx14 } from "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 } = useSupportedTokens2({
+    chainId: isChainSelected ? chainId : "",
+    limit: 9e3,
+    enabled: isChainSelected
+  });
+  const tokenOptions = useMemo9(() => {
+    if (!tokens) return [];
+    return tokens.map((token) => ({
+      label: `${token.symbol} - ${token.name}`,
+      value: token?.id || "",
+      icon: token.logoUrl ? () => /* @__PURE__ */ jsx14(
+        "img",
+        {
+          src: token.logoUrl,
+          alt: token.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [tokens]);
+  useEffect3(() => {
+    if (!isChainSelected && value) {
+      onValueChange("");
+    }
+  }, [isChainSelected, value, onValueChange]);
+  return /* @__PURE__ */ jsx14(
+    Combobox2,
+    {
+      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
+import { useMemo as useMemo10 } from "react";
+import { Combobox as Combobox3 } from "@turtleclub/ui";
+import { useProducts as useProducts2 } from "@turtleclub/hooks";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function ProductSelector({
+  value,
+  onValueChange,
+  placeholder = "Select product",
+  disabled = false,
+  className,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { data: productsData, isLoading } = useProducts2({});
+  const products = useMemo10(() => productsData?.products ?? [], [productsData?.products]);
+  const productOptions = useMemo10(() => {
+    if (!products || products.length === 0) return [];
+    return products.map((product) => ({
+      label: product.name,
+      value: product.id,
+      icon: product.logoUrl ? () => /* @__PURE__ */ jsx15(
+        "img",
+        {
+          src: product.logoUrl,
+          alt: product.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [products]);
+  return /* @__PURE__ */ jsx15(
+    Combobox3,
+    {
+      searchable,
+      options: productOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading products..." : placeholder,
+      closeOnSelect,
+      className
+    }
+  );
+}
+
+// src/selectors/OpportunitySelector.tsx
+import { useMemo as useMemo11 } from "react";
+import { Combobox as Combobox4 } from "@turtleclub/ui";
+import { useOpportunities as useOpportunities2 } from "@turtleclub/hooks";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function OpportunitySelector({
+  value,
+  onValueChange,
+  placeholder = "Select opportunity",
+  disabled = false,
+  className,
+  closeOnSelect = true,
+  searchable = true
+}) {
+  const { data: opportunitiesData, isLoading } = useOpportunities2();
+  const opportunities = useMemo11(
+    () => opportunitiesData?.opportunities ?? [],
+    [opportunitiesData?.opportunities]
+  );
+  const opportunityOptions = useMemo11(() => {
+    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__ */ jsx16(
+        "img",
+        {
+          src: opportunity.depositTokens[0].logoUrl,
+          alt: opportunity.name,
+          width: 16,
+          height: 16,
+          className: "size-4 rounded-full"
+        }
+      ) : void 0
+    }));
+  }, [opportunities]);
+  return /* @__PURE__ */ jsx16(
+    Combobox4,
+    {
+      searchable,
+      options: opportunityOptions,
+      value,
+      onValueChange,
+      disabled: disabled || isLoading,
+      placeholder: isLoading ? "Loading opportunities..." : placeholder,
+      closeOnSelect,
+      className
+    }
+  );
+}
+export {
+  ActiveFilterBadges,
+  BooleanFilter,
+  ChainSelector,
+  ChainsSelector,
+  Filter,
+  FiltersGrid,
+  FiltersPopover,
+  FiltersWrapper,
+  MultiSelectFilter,
+  OpportunitiesSelector,
+  OpportunitySelector,
+  ProductSelector,
+  ProductsSelector,
+  RangeSliderFilter,
+  TokenSelector,
+  TokensSelector,
+  usePagination,
+  useSorting
+};
+//# sourceMappingURL=index.js.map