@turtleclub/core 0.1.0-beta.100

package/dist/index.d.ts

@@ -0,0 +1,574 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { PaginationState, SortingState } from '@tanstack/react-table';
+
+interface RangeSliderFilterProps {
+    /** Query key for minimum value (default: 'min') */
+    minQueryKey?: string;
+    /** Query key for maximum value (default: 'max') */
+    maxQueryKey?: string;
+    /** Minimum value (default: 0) */
+    min?: number;
+    /** Maximum value (default: 100) */
+    max?: number;
+    /** Step value for slider (default: 1) */
+    step?: number;
+    /** Whether the filter is disabled */
+    disabled?: boolean;
+    /** Custom label for the filter */
+    label: string;
+    /** Whether to show values (default: true) */
+    showValues?: boolean;
+    /** Value formatter function */
+    formatValue?: (value: number) => string;
+    /** Custom className for the container */
+    className?: string;
+    /** Whether to render in a popover (default: false) */
+    usePopover?: boolean;
+}
+declare function RangeSliderFilter({ minQueryKey, maxQueryKey, min, max, step, disabled, label, showValues, formatValue, className, usePopover, }: RangeSliderFilterProps): react_jsx_runtime.JSX.Element;
+
+interface BooleanSwitchFilterProps {
+    /** Query key for the boolean value (default: 'enabled') */
+    queryKey?: string;
+    /** Default value when not set (default: false) */
+    defaultValue?: boolean;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Label for the switch */
+    label: string;
+    /** Description text (optional) */
+    description?: string;
+    /** Custom className for the container */
+    className?: string;
+}
+declare function BooleanFilter({ queryKey, defaultValue, disabled, label, description, className, }: BooleanSwitchFilterProps): react_jsx_runtime.JSX.Element;
+
+interface FilterProps {
+    /** Query parameter key */
+    queryKey: string;
+    /** Child component to render (selector) */
+    children: (props: {
+        value: string;
+        onValueChange: (value: string) => void;
+    }) => React.ReactNode;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+}
+/**
+ * Generic Filter component that handles nuqs URL state management for single values.
+ *
+ * Provides value and onValueChange props to child components,
+ * decoupling selector logic from URL state management.
+ *
+ * @example Basic Single Selection
+ * ```tsx
+ * // Single chain selection - persists to URL as ?chainId=ethereum
+ * <Filter queryKey="chainId">
+ *   {({ value, onValueChange }) => (
+ *     <ChainSelector
+ *       value={value}
+ *       onValueChange={onValueChange}
+ *       placeholder="Select chain"
+ *     />
+ *   )}
+ * </Filter>
+ * ```
+ */
+declare function Filter({ queryKey, children, onValueChange }: FilterProps): react_jsx_runtime.JSX.Element;
+
+interface MultiSelectFilterProps {
+    /** Query parameter key */
+    queryKey: string;
+    /** Child component to render (selector) */
+    children: (props: {
+        value: string[];
+        onValueChange: (values: string[]) => void;
+    }) => React.ReactNode;
+    /** Callback when values change */
+    onValueChange?: (values: string[]) => void;
+}
+/**
+ * Generic MultiSelectFilter component that handles nuqs URL state management for array values.
+ *
+ * Provides value and onValueChange props to child components,
+ * decoupling selector logic from URL state management.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectFilter queryKey="chainId">
+ *   {({ value, onValueChange }) => (
+ *     <ChainsSelector
+ *       value={value}
+ *       onValueChange={onValueChange}
+ *       placeholder="Select chains"
+ *     />
+ *   )}
+ * </MultiSelectFilter>
+ * ```
+ */
+declare function MultiSelectFilter({ queryKey, children, onValueChange }: MultiSelectFilterProps): react_jsx_runtime.JSX.Element;
+
+interface FilterConfig {
+    key: string;
+    label: string;
+    component: React.ReactNode;
+    enabled: boolean;
+    section?: string;
+}
+interface FiltersGridProps {
+    filters: FilterConfig[];
+    columns?: number;
+    className?: string;
+    sectionClassName?: string;
+}
+declare function FiltersGrid({ filters, columns, className, sectionClassName, }: FiltersGridProps): react_jsx_runtime.JSX.Element | null;
+
+interface FiltersPopoverProps {
+    filters: FilterConfig[];
+    triggerLabel?: React.ReactNode;
+    columns?: number;
+    className?: string;
+    popoverClassName?: string;
+    sectionClassName?: string;
+    align?: "start" | "center" | "end";
+    /** Callback function to clear all filters */
+    onClearAll?: () => void;
+}
+declare function FiltersPopover({ filters, triggerLabel, columns, className, popoverClassName, sectionClassName, align, onClearAll, }: FiltersPopoverProps): react_jsx_runtime.JSX.Element | null;
+
+interface ActiveFilterConfig {
+    /** Unique key for the filter */
+    key: string;
+    /** Display label for the filter */
+    label: string;
+    /** Current filter value to display */
+    value: string;
+    /** Query parameter key(s) this filter uses */
+    queryKeys: string | string[];
+    /** Whether this filter is currently active */
+    isActive: boolean;
+}
+interface ActiveFilterBadgesProps {
+    /** Array of filter configurations */
+    filters: ActiveFilterConfig[];
+    /** Custom className for the container */
+    className?: string;
+    /** Label for clear all button (default: "Clear All") */
+    clearAllLabel?: string;
+    /** Whether to show clear all button (default: true) */
+    showClearAll?: boolean;
+    /** Custom render function for individual badges */
+    renderBadge?: (filter: ActiveFilterConfig, clearFilter: () => void) => React.ReactNode;
+    /** Callback function to clear individual filter */
+    onClearFilter: (queryKeys: string | string[]) => void;
+    /** Callback function to clear all filters */
+    onClearAll: (allQueryKeys: (string | string[])[]) => void;
+}
+/**
+ * Component that displays active filter badges with individual clear buttons
+ * and an optional "clear all" button.
+ *
+ * @example
+ * ```tsx
+ * const activeFilters = [
+ *   {
+ *     key: 'chain',
+ *     label: 'Chain',
+ *     value: 'Ethereum',
+ *     queryKeys: 'chainId',
+ *     isActive: true,
+ *   },
+ *   {
+ *     key: 'sorting',
+ *     label: 'Sort',
+ *     value: 'Name (A-Z)',
+ *     queryKeys: ['sortBy', 'sortOrder'],
+ *     isActive: true,
+ *   },
+ * ];
+ *
+ * <ActiveFilterBadges filters={activeFilters} />
+ * ```
+ */
+declare function ActiveFilterBadges({ filters, className, clearAllLabel, showClearAll, renderBadge, onClearFilter, onClearAll, }: ActiveFilterBadgesProps): react_jsx_runtime.JSX.Element | null;
+
+interface FiltersWrapperProps {
+    /** Array of filter configurations */
+    filters: FilterConfig[];
+    /** Array of active filter configurations for badges */
+    activeFilters: ActiveFilterConfig[];
+    /** Layout type: 'grid' or 'popover' */
+    layout: "grid" | "popover";
+    /** Custom className for the wrapper */
+    className?: string;
+    /** Custom className for the active badges section */
+    badgesClassName?: string;
+    /** Custom className for the slot container */
+    slotClassName?: string;
+    /** Optional content to render on the left side of filters */
+    leftSlot?: React.ReactNode;
+    /** Optional content to render on the right side of filters */
+    rightSlot?: React.ReactNode;
+    /** Number of columns for grid layout (default: 3) */
+    columns?: number;
+    /** Button label for popover trigger (default: "Filters") */
+    triggerLabel?: string;
+    /** Number of columns in popover (default: 2) */
+    popoverColumns?: number;
+    /** Custom className for popover trigger button */
+    popoverClassName?: string;
+    /** Custom className for popover content */
+    popoverContentClassName?: string;
+    /** Alignment for popover (default: "start") */
+    align?: "start" | "center" | "end";
+    /** Label for clear all button (default: "Clear All") */
+    clearAllLabel?: string;
+    /** Whether to show clear all button (default: true) */
+    showClearAll?: boolean;
+    /** Custom render function for individual badges */
+    renderBadge?: (filter: ActiveFilterConfig, clearFilter: () => void) => React.ReactNode;
+    /** Whether to show active filter badges (default: true) */
+    showActiveBadges?: boolean;
+    /** Callback function to clear individual filter */
+    onClearFilter: (queryKeys: string | string[]) => void;
+    /** Callback function to clear all filters */
+    onClearAll: (allQueryKeys: (string | string[])[]) => void;
+}
+/**
+ * Unified wrapper component that combines filter controls with active filter badges.
+ *
+ * Supports both grid and popover layouts, automatically displays active filter badges
+ * below the filter controls with individual and bulk clear functionality.
+ *
+ * @example
+ * ```tsx
+ * const filters = [
+ *   {
+ *     key: 'chain',
+ *     label: 'Chain',
+ *     component: <ChainFilter />,
+ *     enabled: true,
+ *   },
+ * ];
+ *
+ * const activeFilters = [
+ *   {
+ *     key: 'chain',
+ *     label: 'Chain',
+ *     value: 'Ethereum',
+ *     queryKeys: 'chainId',
+ *     isActive: true,
+ *   },
+ * ];
+ *
+ * <FiltersWrapper
+ *   layout="grid"
+ *   filters={filters}
+ *   activeFilters={activeFilters}
+ * />
+ * ```
+ */
+declare function FiltersWrapper({ filters, activeFilters, layout, className, badgesClassName, slotClassName, leftSlot, rightSlot, columns, triggerLabel, popoverColumns, popoverClassName, popoverContentClassName, align, clearAllLabel, showClearAll, renderBadge, showActiveBadges, onClearFilter, onClearAll, }: FiltersWrapperProps): react_jsx_runtime.JSX.Element;
+
+interface UsePaginationOptions {
+    /** Default page size (default: 10) */
+    defaultPageSize?: number;
+    /** Default page index (default: 0) */
+    defaultPageIndex?: number;
+    /** Query param key for page index (default: 'page') */
+    pageIndexKey?: string;
+    /** Query param key for page size (default: 'pageSize') */
+    pageSizeKey?: string;
+}
+interface UsePaginationReturn {
+    /** Current pagination state for TanStack Table */
+    pagination: PaginationState;
+    /** Function to update pagination state */
+    setPagination: (updater: PaginationState | ((prev: PaginationState) => PaginationState)) => void;
+    /** Current page index (0-based) */
+    pageIndex: number;
+    /** Current page size */
+    pageSize: number;
+    /** Set page index directly */
+    setPageIndex: (pageIndex: number) => void;
+    /** Set page size directly */
+    setPageSize: (pageSize: number) => void;
+    /** Go to next page */
+    nextPage: (totalPages?: number) => void;
+    /** Go to previous page */
+    previousPage: () => void;
+    /** Go to first page */
+    firstPage: () => void;
+    /** Go to last page */
+    lastPage: (totalPages: number) => void;
+    /** Reset pagination to defaults */
+    reset: () => void;
+    /** Check if can go to next page */
+    canNextPage: (totalPages?: number) => boolean;
+    /** Check if can go to previous page */
+    canPreviousPage: boolean;
+}
+/**
+ * Hook for managing server-side pagination state using nuqs.
+ *
+ * This hook synchronizes pagination state with URL query parameters,
+ * making it perfect for server-side pagination where the URL should
+ * reflect the current page and page size.
+ *
+ * @example
+ * ```tsx
+ * function MyTable() {
+ *   const {
+ *     pagination,
+ *     setPagination,
+ *     pageIndex,
+ *     pageSize,
+ *     setPageIndex,
+ *     setPageSize
+ *   } = usePagination({
+ *     defaultPageSize: 20,
+ *     pageIndexKey: 'page',
+ *     pageSizeKey: 'limit'
+ *   });
+ *
+ *   // Use with TanStack Table
+ *   const table = useReactTable({
+ *     data,
+ *     columns,
+ *     manualPagination: true,
+ *     pagination,
+ *     onPaginationChange: setPagination,
+ *     pageCount: Math.ceil(totalCount / pageSize),
+ *   });
+ *
+ *   return <DataTable table={table} />;
+ * }
+ * ```
+ */
+declare function usePagination(options?: UsePaginationOptions): UsePaginationReturn;
+
+interface UseSortingOptions {
+    /** Default sort column (default: undefined - no sorting) */
+    defaultSortBy?: string;
+    /** Default sort order (default: 'asc') */
+    defaultSortOrder?: "asc" | "desc";
+    /** Query param key for sort column (default: 'sortBy') */
+    sortByKey?: string;
+    /** Query param key for sort order (default: 'sortOrder') */
+    sortOrderKey?: string;
+}
+interface UseSortingReturn {
+    /** Current sorting state for TanStack Table */
+    sorting: SortingState;
+    /** Function to update sorting state */
+    setSorting: (updater: SortingState | ((prev: SortingState) => SortingState)) => void;
+    /** Current sort column (undefined if no sorting) */
+    sortBy: string | undefined;
+    /** Current sort order */
+    sortOrder: "asc" | "desc";
+    /** Set sort column and order directly */
+    setSort: (column: string, order?: "asc" | "desc") => void;
+    /** Clear all sorting */
+    clearSort: () => void;
+    /** Toggle sort order for a column */
+    toggleSort: (column: string) => void;
+    /** Check if a column is currently sorted */
+    isSorted: (column: string) => boolean;
+    /** Get sort order for a column */
+    getSortOrder: (column: string) => "asc" | "desc" | undefined;
+}
+/**
+ * Hook for managing server-side sorting state using nuqs.
+ *
+ * This hook synchronizes sorting state with URL query parameters,
+ * making it perfect for server-side sorting where the URL should
+ * reflect the current sort state.
+ *
+ * @example
+ * ```tsx
+ * function MyTable() {
+ *   const {
+ *     sorting,
+ *     setSorting,
+ *     sortBy,
+ *     sortOrder,
+ *     setSort,
+ *     toggleSort
+ *   } = useSorting({
+ *     defaultSortBy: 'name',
+ *     defaultSortOrder: 'asc'
+ *   });
+ *
+ *   // Use with TanStack Table
+ *   const table = useReactTable({
+ *     data,
+ *     columns,
+ *     manualSorting: true,
+ *     sorting,
+ *     onSortingChange: setSorting,
+ *   });
+ *
+ *   return <DataTable table={table} />;
+ * }
+ * ```
+ */
+declare function useSorting(options?: UseSortingOptions): UseSortingReturn;
+
+interface ChainSelectorProps$1 {
+    /** Selected chain IDs */
+    value: string[];
+    /** Callback when selection changes */
+    onValueChange: (values: string[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Maximum count to show in trigger */
+    maxCount?: number;
+    /** Whether to close on select */
+    closeOnSelect?: boolean;
+    /** Whether to show search */
+    searchable?: boolean;
+}
+declare function ChainsSelector({ value, onValueChange, placeholder, disabled, className, maxCount, closeOnSelect, searchable, }: ChainSelectorProps$1): react_jsx_runtime.JSX.Element;
+
+interface TokenSelectorProps$1 {
+    /** Selected token IDs */
+    value: string[];
+    /** Callback when selection changes */
+    onValueChange: (values: string[]) => void;
+    /** Selected chain ID to filter tokens */
+    chainId?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Maximum count to show in trigger */
+    maxCount?: number;
+    /** Whether to close on select */
+    closeOnSelect?: boolean;
+    /** Whether to show search */
+    searchable?: boolean;
+}
+declare function TokensSelector({ value, onValueChange, chainId, placeholder, disabled, className, maxCount, closeOnSelect, searchable, }: TokenSelectorProps$1): react_jsx_runtime.JSX.Element;
+
+interface ProductSelectorProps$1 {
+    /** Selected product IDs */
+    value: string[];
+    /** Callback when selection changes */
+    onValueChange: (values: string[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Maximum count to show in trigger */
+    maxCount?: number;
+    /** Whether to close on select */
+    closeOnSelect?: boolean;
+    /** Whether to show search */
+    searchable?: boolean;
+}
+declare function ProductsSelector({ value, onValueChange, placeholder, disabled, className, maxCount, closeOnSelect, searchable, }: ProductSelectorProps$1): react_jsx_runtime.JSX.Element;
+
+interface OpportunitySelectorProps$1 {
+    /** Selected opportunity IDs */
+    value: string[];
+    /** Callback when selection changes */
+    onValueChange: (values: string[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Maximum count to show in trigger */
+    maxCount?: number;
+    /** Whether to close on select */
+    closeOnSelect?: boolean;
+    /** Whether to show search */
+    searchable?: boolean;
+}
+declare function OpportunitiesSelector({ value, onValueChange, placeholder, disabled, className, maxCount, closeOnSelect, searchable, }: OpportunitySelectorProps$1): react_jsx_runtime.JSX.Element;
+
+interface ChainSelectorProps {
+    /** Selected chain ID */
+    value: string;
+    /** Callback when selection changes */
+    onValueChange: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Whether to close on select */
+    closeOnSelect?: boolean;
+    /** Whether to show search */
+    searchable?: boolean;
+}
+declare function ChainSelector({ value, onValueChange, placeholder, disabled, className, closeOnSelect, searchable, }: ChainSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface TokenSelectorProps {
+    /** Selected token ID */
+    value: string;
+    /** Callback when selection changes */
+    onValueChange: (value: string) => void;
+    /** Selected chain ID to filter tokens */
+    chainId?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Whether to close on select */
+    closeOnSelect?: boolean;
+    /** Whether to show search */
+    searchable?: boolean;
+}
+declare function TokenSelector({ value, onValueChange, chainId, placeholder, disabled, className, closeOnSelect, searchable, }: TokenSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface ProductSelectorProps {
+    /** Selected product ID */
+    value: string;
+    /** Callback when selection changes */
+    onValueChange: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Whether to close on select */
+    closeOnSelect?: boolean;
+    /** Whether to show search */
+    searchable?: boolean;
+}
+declare function ProductSelector({ value, onValueChange, placeholder, disabled, className, closeOnSelect, searchable, }: ProductSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface OpportunitySelectorProps {
+    /** Selected opportunity ID */
+    value: string;
+    /** Callback when selection changes */
+    onValueChange: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Whether to close on select */
+    closeOnSelect?: boolean;
+    /** Whether to show search */
+    searchable?: boolean;
+}
+declare function OpportunitySelector({ value, onValueChange, placeholder, disabled, className, closeOnSelect, searchable, }: OpportunitySelectorProps): react_jsx_runtime.JSX.Element;
+
+export { ActiveFilterBadges, type ActiveFilterBadgesProps, type ActiveFilterConfig, BooleanFilter, ChainSelector, ChainsSelector, Filter, type FilterConfig, FiltersGrid, type FiltersGridProps, FiltersPopover, type FiltersPopoverProps, FiltersWrapper, type FiltersWrapperProps, MultiSelectFilter, OpportunitiesSelector, OpportunitySelector, ProductSelector, ProductsSelector, RangeSliderFilter, TokenSelector, TokensSelector, type UsePaginationOptions, type UsePaginationReturn, type UseSortingOptions, type UseSortingReturn, usePagination, useSorting };