@gearbox-protocol/ui-kit 4.0.0-next.47 → 4.0.0-next.49

package/dist/esm/configs/design-tokens.js

@@ -1,85 +0,0 @@
-const e = {
-  colors: {
-    primary: "rgb(59, 130, 246)",
-    secondary: "rgb(100, 116, 139)",
-    destructive: "rgb(239, 68, 68)",
-    success: "rgb(34, 197, 94)",
-    warning: "rgb(251, 191, 36)"
-  },
-  spacing: {
-    xs: "0.5rem",
-    // 8px
-    sm: "0.75rem",
-    // 12px
-    md: "1rem",
-    // 16px
-    lg: "1.5rem",
-    // 24px
-    xl: "2rem"
-    // 32px
-  },
-  borderRadius: {
-    sm: "0.25rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    xl: "0.75rem",
-    full: "9999px"
-  },
-  typography: {
-    fontFamily: {
-      sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-      mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
-    },
-    fontSize: {
-      xs: "0.75rem",
-      // 12px
-      sm: "0.875rem",
-      // 14px
-      base: "1rem",
-      // 16px
-      lg: "1.125rem",
-      // 18px
-      xl: "1.25rem",
-      // 20px
-      "2xl": "1.5rem",
-      // 24px
-      "3xl": "1.875rem",
-      // 30px
-      "4xl": "2.25rem"
-      // 36px
-    },
-    fontWeight: {
-      normal: "400",
-      medium: "500",
-      semibold: "600",
-      bold: "700"
-    },
-    lineHeight: {
-      tight: "1.25",
-      normal: "1.5",
-      relaxed: "1.75"
-    }
-  },
-  animation: {
-    duration: {
-      fast: "150ms",
-      normal: "300ms",
-      slow: "500ms"
-    },
-    easing: {
-      easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
-      easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
-      easeIn: "cubic-bezier(0.4, 0, 1, 1)"
-    }
-  },
-  shadows: {
-    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-    base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
-  }
-};
-export {
-  e as designTokens
-};

package/dist/esm/configs/variants.js

@@ -1,28 +0,0 @@
-const e = {
-  xs: "text-xs",
-  sm: "text-sm",
-  default: "text-sm",
-  lg: "text-base",
-  xl: "text-lg"
-}, t = {
-  default: "",
-  error: "border-red-500 text-red-500 focus-visible:ring-red-500",
-  success: "border-green-500 text-green-500 focus-visible:ring-green-500",
-  warning: "border-yellow-500 text-yellow-500 focus-visible:ring-yellow-500"
-}, s = {
-  none: "p-0",
-  xs: "p-2",
-  sm: "p-4",
-  default: "p-6",
-  lg: "p-8",
-  xl: "p-10"
-}, r = {
-  default: "transition-colors duration-200",
-  disabled: "opacity-50 cursor-not-allowed pointer-events-none"
-};
-export {
-  r as interactiveVariants,
-  s as paddingVariants,
-  e as sizeVariants,
-  t as stateVariants
-};

package/dist/esm/hooks/use-checkbox-select.js

@@ -1,74 +0,0 @@
-import { useState as I, useMemo as s, useEffect as b, useCallback as p } from "react";
-import { usePrevious as C } from "./use-previous.js";
-const u = (e, n) => e.map((c, r) => ({
-  item: c,
-  index: r,
-  checked: Array.isArray(n) ? n[r] ?? !1 : n
-})), h = (e, n) => e.map(({ item: c, index: r }) => ({
-  item: c,
-  index: r,
-  checked: n
-})), S = (e, n) => {
-  const c = e[n];
-  return c ? [
-    ...e.slice(0, n),
-    { ...c, checked: !c.checked },
-    ...e.slice(n + 1)
-  ] : e;
-};
-function x(e, n = !0, c = !0) {
-  const [r, o] = I(
-    () => u(e, n)
-  ), a = s(() => Array.isArray(n) ? n.join(",") : String(n), [n]), i = C(a);
-  b(() => {
-    if (e.length > 0 && r.length === 0) {
-      o(u(e, n));
-      return;
-    }
-    if (e.length !== r.length) {
-      o(u(e, n));
-      return;
-    }
-    const m = i !== a && !c ? u(e, n) : r.map((A, v) => ({
-      ...A,
-      item: e[v]
-    }));
-    o(m);
-  }, [e, c, a]);
-  const l = s(
-    () => r.length > 0 && r.every(({ checked: t }) => t),
-    [r]
-  ), g = s(
-    () => r.filter(({ checked: t }) => t).map(({ item: t }) => t),
-    [r]
-  ), f = s(
-    () => r.filter(({ checked: t }) => t).length,
-    [r]
-  ), k = p(
-    (t) => {
-      if (t !== void 0) {
-        if (t === l) return;
-        o(h(r, t));
-      } else
-        o(h(r, !l));
-    },
-    [l, r]
-  ), y = p(
-    (t) => {
-      o(S(r, t));
-    },
-    [r]
-  );
-  return {
-    allChecked: l,
-    checkItems: r,
-    handleClickAll: k,
-    handleClickSingle: y,
-    setCheckItems: o,
-    checkedItems: g,
-    checkedCount: f
-  };
-}
-export {
-  x as useCheckboxSelect
-};

package/dist/esm/hooks/use-controllable-state.js

@@ -1,18 +0,0 @@
-import { useState as i, useCallback as f } from "react";
-function p({
-  value: s,
-  defaultValue: c,
-  onChange: l
-}) {
-  const [t, r] = i(c), o = s !== void 0, u = o ? s : t, a = f(
-    (e) => {
-      const n = typeof e == "function" ? e(t) : e;
-      o || r(n), l?.(n);
-    },
-    [o, l, t]
-  );
-  return [u, a];
-}
-export {
-  p as useControllableState
-};

package/dist/esm/hooks/use-opened-state.js

@@ -1,20 +0,0 @@
-import { useState as p, useCallback as t } from "react";
-function u(s = !1) {
-  const [n, e] = p(s), o = t(() => {
-    e(!0);
-  }, []), c = t(() => {
-    e(!1);
-  }, []), a = t(() => {
-    e((l) => !l);
-  }, []);
-  return {
-    isOpen: n,
-    open: o,
-    close: c,
-    toggle: a,
-    setIsOpen: e
-  };
-}
-export {
-  u as useOpenedState
-};

package/dist/esm/hooks/use-smart-number-input.js

@@ -1,10 +0,0 @@
-import { useState as t, useCallback as i } from "react";
-function p(n = 0n, e = "") {
-  const [o, u] = t(n), [m, a] = t(e), s = i((r, c) => {
-    u(r), a(c);
-  }, []);
-  return [o, m, s];
-}
-export {
-  p as useSmartNumberInput
-};

package/dist/esm/utils/a11y.js

@@ -1,12 +0,0 @@
-import { useId as o } from "react";
-function s(e) {
-  return `${e}-${Math.random().toString(36).substr(2, 9)}`;
-}
-function u(e) {
-  const r = o(), t = `${r}-error`, n = `${r}-helper`;
-  return { inputId: r, errorId: t, helperId: n };
-}
-export {
-  s as generateId,
-  u as useFormFieldIds
-};

package/dist/esm/utils/copy.js

@@ -1,10 +0,0 @@
-import { toast as t } from "sonner";
-const i = ({
-  text: o,
-  name: r = "Address"
-}) => {
-  navigator.clipboard.writeText(o), t.success(`${r} copied to clipboard`);
-};
-export {
-  i as copyToClipboard
-};

package/dist/esm/utils/interface.js

@@ -1 +0,0 @@
-

package/dist/esm/utils/plural.js

@@ -1,11 +0,0 @@
-function u(r, t) {
-  const n = r % 10, e = r % 100;
-  return n === 1 && e !== 11 ? t[0] : n >= 2 && n <= 4 && (e < 10 || e >= 20) ? t[1] : t[2];
-}
-function i(r, t, n) {
-  return r === 1 ? t : n ?? `${t}s`;
-}
-export {
-  i as pluralize,
-  u as selectPluralString
-};

package/dist/esm/utils/react.js

@@ -1,44 +0,0 @@
-import * as e from "react";
-function o(r) {
-  if (r == null)
-    return "";
-  if (typeof r == "string" || typeof r == "number")
-    return String(r);
-  if (typeof r == "boolean")
-    return r ? "true" : "false";
-  if (e.isValidElement(r)) {
-    const i = r.props?.children;
-    return i == null ? "" : Array.isArray(i) ? i.map(o).join(" ") : o(i);
-  }
-  if (Array.isArray(r))
-    return r.map(o).join(" ");
-  try {
-    return String(r);
-  } catch {
-    return "";
-  }
-}
-function f(r) {
-  if (r == null)
-    return String(r);
-  const t = typeof r;
-  if (t === "string" || t === "number" || t === "boolean")
-    return String(r);
-  if (t === "bigint")
-    return `bigint:${r.toString()}`;
-  if (t === "symbol" || t === "function")
-    return `${t}:${String(r)}`;
-  try {
-    return JSON.stringify(r, (i, n) => typeof n == "bigint" ? `bigint:${n.toString()}` : typeof n == "symbol" ? `symbol:${String(n)}` : typeof n == "function" ? `function:${n.name || "anonymous"}` : n);
-  } catch {
-    try {
-      return `${t}:${String(r)}`;
-    } catch {
-      return `[unserializable:${t}]`;
-    }
-  }
-}
-export {
-  o as extractTextFromLabel,
-  f as serializeValue
-};

package/dist/esm/utils/search-in-token.js

@@ -1,14 +0,0 @@
-function c(e, t) {
-  if (!e || !t) return !1;
-  const s = t.toLowerCase().trim();
-  if (!s) return !1;
-  const r = e.title?.toLowerCase() || "", o = e.symbol?.toLowerCase() || "", n = e.name?.toLowerCase() || "", a = e.address?.toLowerCase() || "";
-  return r.includes(s) || o.includes(s) || n.includes(s) || s.length > 2 && a.toLowerCase().startsWith(s);
-}
-function i(e) {
-  return (t) => c(t, e);
-}
-export {
-  i as createTokenSearchFilter,
-  c as searchInToken
-};

package/dist/esm/utils/search.js

@@ -1,6 +0,0 @@
-function n(e, r) {
-  return e.toLowerCase().includes(r.toLowerCase());
-}
-export {
-  n as searchInString
-};

package/dist/esm/utils/short-sha.js

@@ -1,4 +0,0 @@
-const s = (o) => o.slice(0, 7);
-export {
-  s as shortSHA
-};

package/dist/esm/utils/sort.js

@@ -1 +0,0 @@
-

package/dist/types/components/base/side-card/constants.d.ts

@@ -1,5 +0,0 @@
-export declare class SideCardTest {
-    static root: string;
-    static title: string;
-    static body: string;
-}

package/dist/types/components/base/side-card/index.d.ts

@@ -1,2 +0,0 @@
-export * from './constants';
-export * from './side-card';

package/dist/types/components/base/side-card/side-card.d.ts

@@ -1,16 +0,0 @@
-import { default as React } from 'react';
-import { TitleText } from '../text';
-import { SideCardTest } from './constants';
-export { SideCardTest };
-export interface SideCardProps {
-    readonly title: TitleText;
-    readonly tip?: React.ReactNode;
-    readonly children: React.ReactNode;
-    readonly className?: string;
-    readonly testId?: string;
-}
-/**
- * Card beside a chart: title row, optional tip. Body columns follow the
- * card's own width — 3, then 2, then 1 as it gets narrower.
- */
-export declare function SideCard({ title, tip, children, className, testId, }: SideCardProps): React.ReactElement;

package/dist/types/components/base/token-pair-title/constants.d.ts

@@ -1,3 +0,0 @@
-export declare class TokenPairTitleTest {
-    static root: string;
-}

package/dist/types/components/base/token-pair-title/index.d.ts

@@ -1,2 +0,0 @@
-export * from './constants';
-export * from './token-pair-title';

package/dist/types/components/base/token-pair-title/token-pair-title.d.ts

@@ -1,11 +0,0 @@
-import { default as React } from 'react';
-import { TokenPairTitleTest } from './constants';
-export { TokenPairTitleTest };
-export interface TokenPairTitleProps {
-    /** Collateral / strategy side of the title. */
-    readonly name: React.ReactNode;
-    /** Debt side symbol; hidden when undefined. */
-    readonly debtSymbol?: string;
-}
-/** "Collateral / debt" title: names separated by a muted slash. */
-export declare function TokenPairTitle({ name, debtSymbol, }: TokenPairTitleProps): React.ReactElement;

package/dist/types/components/buttons/filter-button/filter-button.d.ts

@@ -1,52 +0,0 @@
-import { ButtonProps } from '../button';
-import * as React from "react";
-/**
- * FilterButtonProps — props for FilterButton component.
- */
-export interface FilterButtonProps extends ButtonProps {
-    /**
-     * Custom label for the filter button
-     * @default "Filter"
-     */
-    label?: string;
-    /**
-     * Whether to show the filter icon
-     * @default true
-     */
-    showIcon?: boolean;
-}
-/**
- * FilterButton — button component with filter icon for triggering filter actions.
- *
- * @usage
- * Use FilterButton to trigger filter dialogs or modals:
- * filter triggers, search filters, table filters, list filters.
- *
- * Props:
- * - `label` — custom button text (defaults to "Filter").
- * - `showIcon` — whether to display filter icon (defaults to true).
- * - `variant` — button variant (defaults to "outline").
- * - `size` — button size (defaults to "default").
- * - All standard Button props are supported (onClick, className, etc.).
- *
- * Note: Commonly used with WithFilterButton HOC or FilterModal component.
- * Displays Filter icon from lucide-react by default.
- *
- * Do NOT use FilterButton:
- * - for direct filtering without opening a dialog (use regular Button with filter logic).
- * - when filter icon doesn't make sense visually (use regular Button instead).
- *
- * @example
- * ```tsx
- * // Basic usage
- * <FilterButton onClick={() => console.log("Filter clicked")} />
- *
- * // With custom label
- * <FilterButton label="Apply Filters" variant="outline" size="sm" />
- *
- * // Without icon
- * <FilterButton showIcon={false} label="Filters" />
- * ```
- */
-declare const FilterButton: React.ForwardRefExoticComponent<FilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { FilterButton };

package/dist/types/components/buttons/filter-button/index.d.ts

@@ -1 +0,0 @@
-export * from './filter-button';

package/dist/types/components/buttons/navigation-button/index.d.ts

@@ -1 +0,0 @@
-export * from './navigation-button';

package/dist/types/components/buttons/navigation-button/navigation-button.d.ts

@@ -1,26 +0,0 @@
-import * as React from "react";
-export interface NavigationButtonProps {
-    href: string;
-    text: string;
-    isActive: boolean;
-}
-/**
- * NavigationButton — component for internal navigation with active state indication.
- *
- * @usage
- * Use NavigationButton for navigation within the application that requires active state:
- * main navigation menus, tab navigation, sidebar navigation, breadcrumb navigation.
- * Used in Header component.
- *
- * Props:
- * - `href` — destination URL for navigation (required).
- * - `text` — button label text (required).
- * - `isActive` — indicates if the current route matches this button's destination (required).
- *
- * Do NOT use NavigationButton:
- * - for external links (use ExternalButton instead).
- * - for actions that don't navigate (use regular Button instead).
- * - when active state indication is not needed (use regular Link component).
- */
-declare const NavigationButton: React.ForwardRefExoticComponent<NavigationButtonProps & React.RefAttributes<HTMLAnchorElement>>;
-export { NavigationButton };

package/dist/types/components/cards/expandable-call/expandable-call.d.ts

@@ -1,28 +0,0 @@
-import * as React from "react";
-export interface ExpandablCallProps {
-    header: React.ReactNode;
-    children: React.ReactNode;
-    index: string | number;
-    isExpandable?: boolean;
-}
-/**
- * ExpandablCall — component for displaying calls within transactions.
- *
- * @usage
- * Use ExpandablCall to display individual function calls inside transaction cards (ExpandableCard):
- * contract method calls, function invocations, call details within transaction data.
- *
- * Props:
- * - `header` — content displayed in the always-visible header section (required).
- * - `children` — content shown when expanded (required).
- * - `index` — call index number displayed as "#{index}" in the header (required).
- * - `isExpandable` — if false, call cannot be expanded/collapsed (defaults to true).
- *
- * Note: Uses rounded background (bg-gray-900/50) and border-top for expanded content to distinguish from transaction card.
- *
- * Do NOT use ExpandablCall:
- * - for displaying transactions themselves (use ExpandableCard instead).
- * - outside of transaction context (use ExpandableCard or regular Card instead).
- */
-declare function ExpandablCall({ header, children, index, isExpandable, }: ExpandablCallProps): React.JSX.Element;
-export { ExpandablCall };

package/dist/types/components/cards/expandable-call/index.d.ts

@@ -1 +0,0 @@
-export * from './expandable-call';

package/dist/types/components/checkbox-item/checkbox-item.d.ts

@@ -1,56 +0,0 @@
-import * as React from "react";
-/**
- * Props for CheckboxItem component
- */
-export interface CheckboxItemProps {
-    /**
-     * Whether the checkbox is checked
-     */
-    checked?: boolean;
-    /**
-     * Callback when the checked state changes
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * Whether the item is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Optional className
-     */
-    className?: string;
-    /**
-     * Children to render
-     */
-    children?: React.ReactNode;
-}
-/**
- * Universal CheckboxItem component that works both inside and outside DropdownMenu context
- *
- * This component provides a consistent API and styling for checkbox items.
- * When used inside DropdownMenu, wrap it with DropdownMenuCheckboxItem wrapper.
- * When used standalone (e.g., in Dialog), use this component directly.
- *
- * @example Inside DropdownMenu (via wrapper):
- * ```tsx
- * <DropdownMenu>
- *   <DropdownMenuContent>
- *     <DropdownMenuCheckboxItem checked={isChecked} onCheckedChange={setChecked}>
- *       Option 1
- *     </DropdownMenuCheckboxItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- *
- * @example Standalone (in Dialog):
- * ```tsx
- * <Dialog>
- *   <DialogContent>
- *     <CheckboxItem checked={isChecked} onCheckedChange={setChecked}>
- *       Option 1
- *     </CheckboxItem>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-export declare const CheckboxItem: React.ForwardRefExoticComponent<CheckboxItemProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/types/components/checkbox-item/index.d.ts

@@ -1 +0,0 @@
-export * from './checkbox-item';

package/dist/types/components/client-adapters/styled-rounded-image/index.d.ts

@@ -1 +0,0 @@
-export * from './styled-rounded-image';

package/dist/types/components/client-adapters/styled-rounded-image/styled-rounded-image.d.ts

@@ -1,9 +0,0 @@
-import { RoundedImageProps } from '../../rounded-image/rounded-image';
-import * as React from "react";
-export interface StyledRoundedImageProps extends Omit<RoundedImageProps, "size" | "rounded" | "defaultIcon"> {
-    $size: number;
-    $rounded?: boolean;
-    $defaultIcon?: string;
-}
-declare const StyledRoundedImage: React.ForwardRefExoticComponent<StyledRoundedImageProps & React.RefAttributes<HTMLImageElement>>;
-export { StyledRoundedImage };

package/dist/types/components/detailed-apy/detailed-apy.d.ts

@@ -1,40 +0,0 @@
-import { JSX } from 'react';
-import { Address } from 'viem';
-import { ExtraRewardApyData, TokenMetaInfo } from '../../types/common';
-export type PoolBaseAPY = {
-    type: "supplyAPY";
-    apy: number;
-} | {
-    type: "tokenYield";
-    apy: number;
-};
-export interface DetailedApyProps {
-    totalAPY: number;
-    totalAPYLoading?: boolean;
-    baseAPY: Array<PoolBaseAPY>;
-    extraAPY: Array<ExtraRewardApyData>;
-    tokensList: Record<Address, TokenMetaInfo> | undefined;
-}
-interface PoolRewardsIconProps {
-    reward: ExtraRewardApyData;
-    tokensList: Record<Address, TokenMetaInfo> | undefined;
-    size?: number;
-    margin?: string;
-}
-export declare function PoolRewardsIcon({ reward, tokensList, ...rest }: PoolRewardsIconProps): JSX.Element;
-/**
- * DetailedApy — displays APY breakdown with base pool APY and extra reward APYs
- *
- * @example
- * ```tsx
- * <DetailedApy
- *   totalAPY={5.23}
- *   totalAPYLoading={false}
- *   baseAPY={[{ type: "supplyAPY", apy: 3.5 }]}
- *   extraAPY={[{ apy: 1.73, rewardToken: "0x...", rewardTokenSymbol: "GEAR", token: "0x...", balance: 0n }]}
- *   tokensList={tokensList}
- * />
- * ```
- */
-export declare function DetailedApy({ totalAPY, totalAPYLoading, baseAPY, extraAPY, tokensList, }: DetailedApyProps): JSX.Element;
-export {};

package/dist/types/components/detailed-apy/index.d.ts

@@ -1 +0,0 @@
-export * from './detailed-apy';

package/dist/types/components/dropdown-menu/dropdown-menu-checkbox-item.d.ts

@@ -1,22 +0,0 @@
-import { CheckboxItemProps } from '../checkbox-item';
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import * as React from "react";
-/**
- * DropdownMenuCheckboxItem - wrapper for CheckboxItem that works inside DropdownMenu context
- *
- * This component uses Radix UI primitives for proper integration with DropdownMenu.
- * It maintains the same API as the standalone CheckboxItem component.
- *
- * @example
- * ```tsx
- * <DropdownMenu>
- *   <DropdownMenuContent>
- *     <DropdownMenuCheckboxItem checked={isChecked} onCheckedChange={setChecked}>
- *       Option 1
- *     </DropdownMenuCheckboxItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- */
-declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<CheckboxItemProps & Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { DropdownMenuCheckboxItem };