@0xsquid/ui 2.6.4 → 2.6.5-animate-number-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/cjs/index.js +9274 -9355
  2. package/dist/cjs/types/components/badges/PriceChange.d.ts +3 -1
  3. package/dist/cjs/types/components/badges/index.d.ts +1 -1
  4. package/dist/cjs/types/components/buttons/Button.d.ts +2 -1
  5. package/dist/cjs/types/components/buttons/Chip.d.ts +1 -1
  6. package/dist/cjs/types/components/controls/LargeNumericInput.d.ts +2 -0
  7. package/dist/cjs/types/components/controls/NumericInput.d.ts +22 -13
  8. package/dist/cjs/types/components/controls/index.d.ts +2 -1
  9. package/dist/cjs/types/components/feedback/AnimateNumber.d.ts +8 -0
  10. package/dist/cjs/types/components/feedback/LoadingText.d.ts +7 -0
  11. package/dist/cjs/types/components/icons/Loader.d.ts +1 -1
  12. package/dist/cjs/types/components/icons/PaymentIcons.d.ts +12 -0
  13. package/dist/cjs/types/components/icons/SwapInputs.d.ts +4 -1
  14. package/dist/cjs/types/components/icons/index.d.ts +1 -0
  15. package/dist/cjs/types/components/layout/AnimationWrapper.d.ts +3 -0
  16. package/dist/cjs/types/components/layout/ModalTitle.d.ts +5 -0
  17. package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +17 -1
  18. package/dist/cjs/types/components/layout/index.d.ts +1 -0
  19. package/dist/cjs/types/components/lists/HistoryItem.d.ts +2 -1
  20. package/dist/cjs/types/components/navigation/Tabs.d.ts +5 -2
  21. package/dist/cjs/types/components/views/SwapProgressView.d.ts +2 -1
  22. package/dist/cjs/types/core/design-system.d.ts +1 -0
  23. package/dist/cjs/types/core/index.d.ts +1 -1
  24. package/dist/cjs/types/core/utils.d.ts +16 -0
  25. package/dist/cjs/types/hooks/index.d.ts +3 -2
  26. package/dist/cjs/types/hooks/useMeasure.d.ts +36 -0
  27. package/dist/cjs/types/hooks/useNumericInput.d.ts +35 -0
  28. package/dist/cjs/types/services/internal/colorService.d.ts +0 -2
  29. package/dist/cjs/types/stories/buttons/Button.stories.d.ts +3 -0
  30. package/dist/cjs/types/stories/buttons/Chip.stories.d.ts +2 -1
  31. package/dist/cjs/types/stories/controls/Input.stories.d.ts +1 -1
  32. package/dist/cjs/types/stories/controls/LargeNumericInput.stories.d.ts +6 -0
  33. package/dist/cjs/types/stories/controls/NumericInput.stories.d.ts +17 -0
  34. package/dist/cjs/types/stories/feedback/AnimateNumber.stories.d.ts +6 -0
  35. package/dist/{esm/types/stories/badges → cjs/types/stories/feedback}/Loader.stories.d.ts +1 -1
  36. package/dist/cjs/types/stories/{badges → feedback}/LoadingSkeleton.stories.d.ts +2 -2
  37. package/dist/cjs/types/stories/feedback/LoadingText.stories.d.ts +6 -0
  38. package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts +2 -0
  39. package/dist/cjs/types/stories/navigation/Tabs.stories.d.ts +1 -0
  40. package/dist/cjs/types/stories/views/SwapProgressView.stories.d.ts +1 -0
  41. package/dist/esm/index.js +18282 -18371
  42. package/dist/esm/types/components/badges/PriceChange.d.ts +3 -1
  43. package/dist/esm/types/components/badges/index.d.ts +1 -1
  44. package/dist/esm/types/components/buttons/Button.d.ts +2 -1
  45. package/dist/esm/types/components/buttons/Chip.d.ts +1 -1
  46. package/dist/esm/types/components/controls/LargeNumericInput.d.ts +2 -0
  47. package/dist/esm/types/components/controls/NumericInput.d.ts +22 -13
  48. package/dist/esm/types/components/controls/index.d.ts +2 -1
  49. package/dist/esm/types/components/feedback/AnimateNumber.d.ts +8 -0
  50. package/dist/esm/types/components/feedback/LoadingText.d.ts +7 -0
  51. package/dist/esm/types/components/icons/Loader.d.ts +1 -1
  52. package/dist/esm/types/components/icons/PaymentIcons.d.ts +12 -0
  53. package/dist/esm/types/components/icons/SwapInputs.d.ts +4 -1
  54. package/dist/esm/types/components/icons/index.d.ts +1 -0
  55. package/dist/esm/types/components/layout/AnimationWrapper.d.ts +3 -0
  56. package/dist/esm/types/components/layout/ModalTitle.d.ts +5 -0
  57. package/dist/esm/types/components/layout/SwapConfiguration.d.ts +17 -1
  58. package/dist/esm/types/components/layout/index.d.ts +1 -0
  59. package/dist/esm/types/components/lists/HistoryItem.d.ts +2 -1
  60. package/dist/esm/types/components/navigation/Tabs.d.ts +5 -2
  61. package/dist/esm/types/components/views/SwapProgressView.d.ts +2 -1
  62. package/dist/esm/types/core/design-system.d.ts +1 -0
  63. package/dist/esm/types/core/index.d.ts +1 -1
  64. package/dist/esm/types/core/utils.d.ts +16 -0
  65. package/dist/esm/types/hooks/index.d.ts +3 -2
  66. package/dist/esm/types/hooks/useMeasure.d.ts +36 -0
  67. package/dist/esm/types/hooks/useNumericInput.d.ts +35 -0
  68. package/dist/esm/types/services/internal/colorService.d.ts +0 -2
  69. package/dist/esm/types/stories/buttons/Button.stories.d.ts +3 -0
  70. package/dist/esm/types/stories/buttons/Chip.stories.d.ts +2 -1
  71. package/dist/esm/types/stories/controls/Input.stories.d.ts +1 -1
  72. package/dist/esm/types/stories/controls/LargeNumericInput.stories.d.ts +6 -0
  73. package/dist/esm/types/stories/controls/NumericInput.stories.d.ts +17 -0
  74. package/dist/esm/types/stories/feedback/AnimateNumber.stories.d.ts +6 -0
  75. package/dist/{cjs/types/stories/badges → esm/types/stories/feedback}/Loader.stories.d.ts +1 -1
  76. package/dist/esm/types/stories/{badges → feedback}/LoadingSkeleton.stories.d.ts +2 -2
  77. package/dist/esm/types/stories/feedback/LoadingText.stories.d.ts +6 -0
  78. package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts +2 -0
  79. package/dist/esm/types/stories/navigation/Tabs.stories.d.ts +1 -0
  80. package/dist/esm/types/stories/views/SwapProgressView.stories.d.ts +1 -0
  81. package/dist/index.css +1 -1
  82. package/dist/index.d.ts +135 -42
  83. package/package.json +1 -1
  84. /package/dist/cjs/types/components/{badges → feedback}/LoadingSkeleton.d.ts +0 -0
  85. /package/dist/esm/types/components/{badges → feedback}/LoadingSkeleton.d.ts +0 -0
@@ -1,6 +1,8 @@
1
1
  interface PriceChangeProps {
2
2
  variant?: "small" | "large";
3
3
  value: string | number;
4
+ highlightText?: boolean;
5
+ triangle?: "none" | "prefix" | "suffix";
4
6
  }
5
- export declare function PriceChange({ value: rawValue, variant, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function PriceChange({ value: rawValue, variant, highlightText, triangle, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
6
8
  export {};
@@ -2,7 +2,7 @@ export * from "./BadgeImage";
2
2
  export * from "./IconLabel";
3
3
  export * from "./Image";
4
4
  export * from "./ImageGroup";
5
- export * from "./LoadingSkeleton";
5
+ export * from "../feedback/LoadingSkeleton";
6
6
  export * from "./PriceChange";
7
7
  export * from "./TransactionState";
8
8
  export * from "./UsdAmount";
@@ -9,6 +9,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
9
9
  disabled?: boolean;
10
10
  link?: string;
11
11
  isLoading?: boolean;
12
+ isShimmering?: boolean;
12
13
  showLoader?: boolean;
13
14
  loaderSize?: LoaderSize;
14
15
  chip?: ChipProps;
@@ -18,5 +19,5 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
18
19
  }
19
20
  type LoaderSize = "sm" | "md" | "lg";
20
21
  export declare const buttonRoundedClassMap: Record<ButtonSize, Record<ButtonVariant, string>>;
21
- export declare function Button({ label, disabled, size, variant, icon, link, isLoading, showLoader, loaderSize, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
22
+ export declare function Button({ label, disabled, size, variant, icon, link, isLoading, isShimmering, showLoader, loaderSize, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
22
23
  export {};
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
2
+ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement | HTMLButtonElement> {
3
3
  label?: string;
4
4
  icon?: React.ReactNode;
5
5
  }
@@ -0,0 +1,2 @@
1
+ import { type NumericInputProps } from "./NumericInput";
2
+ export declare function LargeNumericInput({ balance, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, inputModeButton, balanceButton, debounceInput, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,13 @@
1
1
  /// <reference types="react" />
2
+ import { UserInputType } from "../../hooks/useNumericInput";
2
3
  import { type SwapDirection } from "../../types/components";
3
4
  import { type TooltipProps } from "./Tooltip";
4
- interface Token {
5
+ export interface Token {
5
6
  price: number;
6
7
  symbol: string;
7
8
  decimals: number;
8
9
  }
9
- interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
10
+ export interface NumericInputProps {
10
11
  token: Token;
11
12
  onAmountChange: (tokenAmount: string) => void;
12
13
  forcedAmount?: string;
@@ -14,26 +15,34 @@ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
14
15
  token: string;
15
16
  usd: string;
16
17
  };
17
- showDetails?: boolean;
18
- isLoading?: boolean;
19
- error?: {
20
- message: string;
21
- };
22
18
  balance?: string;
23
- priceImpactPercentage?: string;
24
- criticalPriceImpactPercentage?: number;
25
- direction?: SwapDirection;
26
19
  inputModeButton?: {
27
20
  usdModeTooltip?: Omit<TooltipProps, "children">;
28
21
  tokenModeTooltip?: Omit<TooltipProps, "children">;
29
22
  amountUsd?: string;
30
23
  };
31
24
  maxUsdDecimals?: number;
32
- isInteractive?: boolean;
33
25
  balanceButton?: {
34
26
  tooltip?: Omit<TooltipProps, "children">;
35
27
  hideMaxChip?: boolean;
36
28
  };
29
+ debounceInput?: boolean;
30
+ initialInputMode?: UserInputType;
31
+ customSymbol?: string;
32
+ hideControls?: boolean;
33
+ hideBalance?: boolean;
34
+ containerClassName?: string;
35
+ inputClassName?: string;
36
+ }
37
+ export interface Props extends NumericInputProps, React.InputHTMLAttributes<HTMLInputElement> {
38
+ direction?: SwapDirection;
39
+ showDetails?: boolean;
40
+ isLoading?: boolean;
41
+ isInteractive?: boolean;
42
+ priceImpactPercentage?: string;
43
+ criticalPriceImpactPercentage?: number;
44
+ error?: {
45
+ message: string;
46
+ };
37
47
  }
38
- export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
39
- export {};
48
+ export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, debounceInput, initialInputMode, customSymbol, hideControls, hideBalance, containerClassName, inputClassName, ...props }: Props): import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,7 @@
1
1
  export * from "./Input";
2
+ export * from "./LargeNumericInput";
2
3
  export * from "./NumericInput";
4
+ export * from "./RangeInput";
3
5
  export * from "./SettingsSlider";
4
6
  export * from "./Switch";
5
7
  export * from "./Tooltip";
6
- export * from "./RangeInput";
@@ -0,0 +1,8 @@
1
+ interface AnimateNumberProps {
2
+ number: string;
3
+ showMask?: boolean;
4
+ className?: string;
5
+ isLoading?: boolean;
6
+ }
7
+ export declare function AnimateNumber({ isLoading, number, showMask, className, }: AnimateNumberProps): import("react/jsx-runtime").JSX.Element;
8
+ export {};
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ import { type ButtonVariant } from "../../types/components";
3
+ interface LoadingTextProps extends React.HTMLAttributes<HTMLSpanElement> {
4
+ variant?: ButtonVariant;
5
+ }
6
+ export declare function LoadingText({ children, className, ...props }: LoadingTextProps): import("react/jsx-runtime").JSX.Element;
7
+ export {};
@@ -1,4 +1,4 @@
1
- import { ComponentProps } from "react";
1
+ import { type ComponentProps } from "react";
2
2
  interface LoaderProps extends ComponentProps<"svg"> {
3
3
  size?: string;
4
4
  strokeWidth?: string;
@@ -0,0 +1,12 @@
1
+ export declare function GooglePayIcon({ className, size, }: {
2
+ className?: string;
3
+ size?: string;
4
+ }): import("react/jsx-runtime").JSX.Element;
5
+ export declare function ApplePayIcon({ className, size, }: {
6
+ className?: string;
7
+ size?: string;
8
+ }): import("react/jsx-runtime").JSX.Element;
9
+ export declare function CreditCardIcon({ className, size, }: {
10
+ className?: string;
11
+ size?: string;
12
+ }): import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,7 @@
1
- export declare function SwapInputsIcon(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function SwapInputsIcon({ size, className, }: {
2
+ size?: string;
3
+ className?: string;
4
+ }): import("react/jsx-runtime").JSX.Element;
2
5
  export declare function SwapIcon({ size, className, }: {
3
6
  size?: string;
4
7
  className?: string;
@@ -32,6 +32,7 @@ export * from "./Loader";
32
32
  export * from "./MarketIcons";
33
33
  export * from "./Max";
34
34
  export * from "./NotAllowed";
35
+ export * from "./PaymentIcons";
35
36
  export * from "./Percent";
36
37
  export * from "./PieChart";
37
38
  export * from "./Plus";
@@ -3,4 +3,7 @@ import { Player } from "@lottiefiles/react-lottie-player";
3
3
  interface Props extends React.ComponentProps<typeof Player> {
4
4
  }
5
5
  export declare const AnimationWrapper: (playerProps: Props) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function AnimationCard({ children }: {
7
+ children?: React.ReactNode;
8
+ }): import("react/jsx-runtime").JSX.Element;
6
9
  export {};
@@ -0,0 +1,5 @@
1
+ interface ModalTitleProps {
2
+ title: string;
3
+ }
4
+ export declare function ModalTitle({ title }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
5
+ export {};
@@ -1,5 +1,17 @@
1
1
  import { type AssetsButtonVariant, type SwapDirection } from "../../types/components";
2
2
  import { type TooltipProps } from "../controls";
3
+ interface AddressHeaderProps {
4
+ direction: SwapDirection;
5
+ onClick?: () => void;
6
+ isDisabled?: boolean;
7
+ tooltip?: TooltipProps["tooltipContent"];
8
+ label: string;
9
+ walletIconUrl?: string | null;
10
+ isLoading?: boolean;
11
+ displayLabel?: boolean;
12
+ highlightLabel?: boolean;
13
+ }
14
+ export declare const AddressHeader: ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel, highlightLabel, }: AddressHeaderProps) => import("react/jsx-runtime").JSX.Element;
3
15
  interface SwapConfigurationProps {
4
16
  direction: SwapDirection;
5
17
  priceImpactPercentage?: string;
@@ -46,8 +58,12 @@ interface SwapConfigurationProps {
46
58
  address?: string;
47
59
  emptyAddressLabel?: string;
48
60
  disabled?: boolean;
61
+ walletIconUrl?: string | null;
49
62
  };
50
63
  showNumericInputDetails?: boolean;
64
+ fullHeight?: boolean;
65
+ debounceInput?: boolean;
66
+ showWalletButtonHeader?: boolean;
51
67
  }
52
- export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
68
+ export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, fullHeight, debounceInput, showWalletButtonHeader, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
53
69
  export {};
@@ -16,6 +16,7 @@ export * from "./Join";
16
16
  export * from "./Menu";
17
17
  export * from "./Modal";
18
18
  export * from "./ModalContent";
19
+ export * from "./ModalTitle";
19
20
  export * from "./NavigationBar";
20
21
  export * from "./PipeSeparator";
21
22
  export * from "./ProductCard";
@@ -13,6 +13,7 @@ interface HistoryItemProps {
13
13
  onClick?: () => void;
14
14
  warningLabel?: string;
15
15
  dropdownMenuContent?: React.ReactNode;
16
+ txType: "swap" | "send";
16
17
  }
17
- export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
18
+ export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, txType, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
18
19
  export {};
@@ -3,16 +3,19 @@ type TabSize = "small" | "large";
3
3
  interface TabsProps {
4
4
  tabs: Array<{
5
5
  label: string;
6
+ isDisabled?: boolean;
6
7
  }>;
7
8
  size?: TabSize;
8
9
  activeTab?: number;
9
10
  onTabChange?: (tabIndex: number) => void;
11
+ isDisabled?: boolean;
10
12
  }
11
- export declare function Tabs({ tabs, size, onTabChange, activeTab, }: TabsProps): import("react/jsx-runtime").JSX.Element;
13
+ export declare function Tabs({ tabs, size, onTabChange, activeTab, isDisabled, }: TabsProps): import("react/jsx-runtime").JSX.Element;
12
14
  interface TabProps extends React.ComponentProps<"button"> {
13
15
  label: string;
14
16
  size: TabSize;
15
17
  isActive?: boolean;
18
+ isDisabled?: boolean;
16
19
  }
17
- export declare function Tab({ label, isActive, size, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
20
+ export declare function Tab({ label, isActive, size, isDisabled, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
18
21
  export {};
@@ -10,7 +10,7 @@ interface Token {
10
10
  logoUrl: string;
11
11
  bgColor: string;
12
12
  }
13
- export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, }: {
13
+ export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction, }: {
14
14
  steps: SwapStep[];
15
15
  handleClose?: (swapState: SwapState) => void;
16
16
  handleComplete?: () => void;
@@ -30,5 +30,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
30
30
  footerButton?: SwapStepsCollapsedFooterButton;
31
31
  refundTokenSymbol?: string;
32
32
  addGasLink?: string;
33
+ isSendTransaction?: boolean;
33
34
  }): import("react/jsx-runtime").JSX.Element;
34
35
  export {};
@@ -6,6 +6,7 @@ export declare const spacing: {
6
6
  "squid-m": string;
7
7
  "squid-l": string;
8
8
  "squid-xl": string;
9
+ "squid-xl2": string;
9
10
  "squid-xxl": string;
10
11
  };
11
12
  export declare const boxShadow: {
@@ -1,4 +1,4 @@
1
1
  export { MEDIA_QUERIES, CSS_VARS, ANIMATION_DURATIONS } from "./constants";
2
2
  export { darkTheme, lightTheme } from "./themes";
3
3
  export { baseTailwindConfig, spacing } from "./design-system";
4
- export { cn } from "./utils";
4
+ export { cn, pxToRem, remToPx } from "./utils";
@@ -72,4 +72,20 @@ export declare function mapToCssVariables<T extends Record<string, any>>(obj: T)
72
72
  * @returns {number} - The index within the array.
73
73
  */
74
74
  export declare function hashStringToIndex(str: string, max: number): number;
75
+ /**
76
+ * Formats a value for CSS properties by adding 'px' if no unit is present.
77
+ * @param {string | number} value - The value to format (can be a number or string)
78
+ * @returns {string} - The formatted CSS value with appropriate units
79
+ *
80
+ * @example
81
+ * // Returns "20px"
82
+ * formatCSSValue(20)
83
+ *
84
+ * @example
85
+ * // Returns "5rem"
86
+ * formatCSSValue("5rem")
87
+ */
88
+ export declare function formatCSSValue(value: string | number): string;
89
+ export declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
90
+ export declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
75
91
  export {};
@@ -1,7 +1,8 @@
1
+ export * from "./useCollapsibleMenu";
1
2
  export * from "./useDropdownMenu";
2
3
  export * from "./useMediaQuery";
3
- export * from "./useCollapsibleMenu";
4
+ export * from "./useNumericInput";
4
5
  export * from "./useRect";
5
- export * from "./useVersion";
6
6
  export * from "./useTimer";
7
7
  export * from "./useUserTheme";
8
+ export * from "./useVersion";
@@ -0,0 +1,36 @@
1
+ declare type ResizeObserverCallback = (entries: any[], observer: ResizeObserver) => void;
2
+ declare class ResizeObserver {
3
+ constructor(callback: ResizeObserverCallback);
4
+ observe(target: Element, options?: any): void;
5
+ unobserve(target: Element): void;
6
+ disconnect(): void;
7
+ static toString(): string;
8
+ }
9
+ export interface RectReadOnly {
10
+ readonly x: number;
11
+ readonly y: number;
12
+ readonly width: number;
13
+ readonly height: number;
14
+ readonly top: number;
15
+ readonly right: number;
16
+ readonly bottom: number;
17
+ readonly left: number;
18
+ [key: string]: number;
19
+ }
20
+ type HTMLOrSVGElement = HTMLElement | SVGElement;
21
+ type Result = [
22
+ (element: HTMLOrSVGElement | null) => void,
23
+ RectReadOnly,
24
+ () => void
25
+ ];
26
+ export interface Options {
27
+ debounce?: number | {
28
+ scroll: number;
29
+ resize: number;
30
+ };
31
+ scroll?: boolean;
32
+ polyfill?: new (cb: ResizeObserverCallback) => ResizeObserver;
33
+ offsetSize?: boolean;
34
+ }
35
+ declare function useMeasure({ debounce, scroll, polyfill, offsetSize }?: Options): Result;
36
+ export default useMeasure;
@@ -0,0 +1,35 @@
1
+ import { type ChangeEvent } from "react";
2
+ import { type Token } from "../components/controls/NumericInput";
3
+ export declare enum UserInputType {
4
+ TOKEN = 0,
5
+ USD = 1
6
+ }
7
+ interface UseNumericInputOptions {
8
+ token: Pick<Token, "decimals" | "price">;
9
+ onAmountChange: (tokenAmount: string) => void;
10
+ forcedAmount?: string;
11
+ formatIfVerySmall: {
12
+ token: string;
13
+ usd: string;
14
+ };
15
+ balance: string;
16
+ inputModeButton?: {
17
+ amountUsd?: string;
18
+ };
19
+ maxUsdDecimals?: number;
20
+ debounceInput?: boolean;
21
+ direction?: "from" | "to";
22
+ initialInputMode?: UserInputType;
23
+ }
24
+ export declare function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, initialInputMode, }: UseNumericInputOptions): {
25
+ userInputType: UserInputType;
26
+ inputValue: string;
27
+ handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
28
+ handleSwitchInputMode: () => void;
29
+ isTokenAmountVerySmall: boolean;
30
+ isUsdAmountVerySmall: boolean;
31
+ amountFormatted: string;
32
+ onBalanceButtonClick: () => void;
33
+ balanceFormatted: string;
34
+ };
35
+ export {};
@@ -12,8 +12,6 @@ interface RGB {
12
12
  * @param style
13
13
  */
14
14
  export declare const parseSquidTheme: (userTheme: Theme, themeType: ThemeType) => Record<string, string | undefined> | undefined;
15
- export declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
16
- export declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
17
15
  export declare function getContrastColor({ r, g, b, }: {
18
16
  r: number;
19
17
  g: number;
@@ -44,6 +44,9 @@ export declare const LargeWithLabelLoading: Story;
44
44
  export declare const SmallWithLongLabelLoading: Story;
45
45
  export declare const MediumWithLongLabelLoading: Story;
46
46
  export declare const LargeWithLongLabelLoading: Story;
47
+ export declare const SmallWithLongLabelShimmer: Story;
48
+ export declare const MediumWithLongLabelShimmer: Story;
49
+ export declare const LargeWithLongLabelShimmer: Story;
47
50
  export declare const SmallWithChip: Story;
48
51
  export declare const MediumWithChip: Story;
49
52
  export declare const LargeWithChip: Story;
@@ -1,7 +1,8 @@
1
- import { Meta, StoryObj } from "@storybook/react";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
2
  import { Chip } from "../../components/buttons/Chip";
3
3
  declare const meta: Meta<typeof Chip>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof meta>;
6
6
  export declare const Text: Story;
7
7
  export declare const Icon: Story;
8
+ export declare const Interactive: Story;
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from "@storybook/react";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
2
  import { Input } from "../../components/controls/Input";
3
3
  declare const meta: Meta<typeof Input>;
4
4
  export default meta;
@@ -0,0 +1,6 @@
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
+ import { LargeNumericInput } from "../../components/controls/LargeNumericInput";
3
+ declare const meta: Meta<typeof LargeNumericInput>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
@@ -0,0 +1,17 @@
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
+ import { NumericInput } from "../../components/controls/NumericInput";
3
+ declare const meta: Meta<typeof NumericInput>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
7
+ export declare const FiatOnRampStyle: Story;
8
+ export declare const FiatOnRampStyleLoading: Story;
9
+ export declare const CustomSymbol: Story;
10
+ export declare const MinimalVersion: Story;
11
+ export declare const MinimalVersionWithCustomSymbol: Story;
12
+ export declare const MinimalVersionWithBigSymbol: Story;
13
+ export declare const WithError: Story;
14
+ export declare const WithPriceImpact: Story;
15
+ export declare const WithTooltips: Story;
16
+ export declare const Loading: Story;
17
+ export declare const NonInteractive: Story;
@@ -0,0 +1,6 @@
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
+ import AnimateNumber from "../../components/feedback/AnimateNumber";
3
+ declare const meta: Meta<typeof AnimateNumber>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from "@storybook/react";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
2
  import { Loader } from "../../components/icons/Loader";
3
3
  declare const meta: Meta<typeof Loader>;
4
4
  export default meta;
@@ -1,5 +1,5 @@
1
- import { Meta, StoryObj } from "@storybook/react";
2
- import { LoadingSkeleton } from "../../components/badges/LoadingSkeleton";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
+ import { LoadingSkeleton } from "../../components/feedback/LoadingSkeleton";
3
3
  declare const meta: Meta<typeof LoadingSkeleton>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof meta>;
@@ -0,0 +1,6 @@
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
+ import { LoadingText } from "../../components/feedback/LoadingText";
3
+ declare const meta: Meta<typeof LoadingText>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
@@ -4,7 +4,9 @@ declare const meta: Meta<typeof SwapConfiguration>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof meta>;
6
6
  export declare const EmptyVariantPrimary: Story;
7
+ export declare const EmptyVariantPrimaryLoading: Story;
7
8
  export declare const EmptyVariantWithoutNumericInputDetails: Story;
9
+ export declare const WithoutNumericInputDetailsLoading: Story;
8
10
  export declare const EmptyVariantAccent: Story;
9
11
  export declare const Loading: Story;
10
12
  export declare const LoadingWithAllProps: Story;
@@ -5,3 +5,4 @@ export default meta;
5
5
  type Story = StoryObj<typeof meta>;
6
6
  export declare const Small: Story;
7
7
  export declare const Large: Story;
8
+ export declare const Disabled: Story;
@@ -15,3 +15,4 @@ export declare const ConfirmationTooLong: Story;
15
15
  export declare const NeedsGas: Story;
16
16
  export declare const PartialSuccess: Story;
17
17
  export declare const Progress: Story;
18
+ export declare const SendTransaction: Story;