@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
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
  import * as react from 'react';
4
- import react__default, { ReactNode, ComponentProps } from 'react';
4
+ import react__default, { ReactNode, ComponentProps, ChangeEvent } from 'react';
5
5
  import { Player } from '@lottiefiles/react-lottie-player';
6
6
  import * as framer_motion from 'framer-motion';
7
7
  import { motion } from 'framer-motion';
@@ -115,8 +115,10 @@ declare function BlockSkeleton({ isLoading, className, children, ...props }: Loa
115
115
  interface PriceChangeProps {
116
116
  variant?: "small" | "large";
117
117
  value: string | number;
118
+ highlightText?: boolean;
119
+ triangle?: "none" | "prefix" | "suffix";
118
120
  }
119
- declare function PriceChange({ value: rawValue, variant, }: PriceChangeProps): react_jsx_runtime.JSX.Element;
121
+ declare function PriceChange({ value: rawValue, variant, highlightText, triangle, }: PriceChangeProps): react_jsx_runtime.JSX.Element;
120
122
 
121
123
  declare const statusTextClassMap: Record<ActionStatus, string>;
122
124
  interface TransactionStateProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -174,6 +176,39 @@ interface InputActionButtonProps {
174
176
  label?: string;
175
177
  }
176
178
 
179
+ declare enum UserInputType {
180
+ TOKEN = 0,
181
+ USD = 1
182
+ }
183
+ interface UseNumericInputOptions {
184
+ token: Pick<Token$3, "decimals" | "price">;
185
+ onAmountChange: (tokenAmount: string) => void;
186
+ forcedAmount?: string;
187
+ formatIfVerySmall: {
188
+ token: string;
189
+ usd: string;
190
+ };
191
+ balance: string;
192
+ inputModeButton?: {
193
+ amountUsd?: string;
194
+ };
195
+ maxUsdDecimals?: number;
196
+ debounceInput?: boolean;
197
+ direction?: "from" | "to";
198
+ initialInputMode?: UserInputType;
199
+ }
200
+ declare function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, initialInputMode, }: UseNumericInputOptions): {
201
+ userInputType: UserInputType;
202
+ inputValue: string;
203
+ handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
204
+ handleSwitchInputMode: () => void;
205
+ isTokenAmountVerySmall: boolean;
206
+ isUsdAmountVerySmall: boolean;
207
+ amountFormatted: string;
208
+ onBalanceButtonClick: () => void;
209
+ balanceFormatted: string;
210
+ };
211
+
177
212
  type TooltipWidth = "max" | "container";
178
213
  type TooltipThreshold = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
179
214
  interface TooltipProps {
@@ -195,7 +230,7 @@ interface Token$3 {
195
230
  symbol: string;
196
231
  decimals: number;
197
232
  }
198
- interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
233
+ interface NumericInputProps {
199
234
  token: Token$3;
200
235
  onAmountChange: (tokenAmount: string) => void;
201
236
  forcedAmount?: string;
@@ -203,28 +238,49 @@ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
203
238
  token: string;
204
239
  usd: string;
205
240
  };
206
- showDetails?: boolean;
207
- isLoading?: boolean;
208
- error?: {
209
- message: string;
210
- };
211
241
  balance?: string;
212
- priceImpactPercentage?: string;
213
- criticalPriceImpactPercentage?: number;
214
- direction?: SwapDirection;
215
242
  inputModeButton?: {
216
243
  usdModeTooltip?: Omit<TooltipProps, "children">;
217
244
  tokenModeTooltip?: Omit<TooltipProps, "children">;
218
245
  amountUsd?: string;
219
246
  };
220
247
  maxUsdDecimals?: number;
221
- isInteractive?: boolean;
222
248
  balanceButton?: {
223
249
  tooltip?: Omit<TooltipProps, "children">;
224
250
  hideMaxChip?: boolean;
225
251
  };
252
+ debounceInput?: boolean;
253
+ initialInputMode?: UserInputType;
254
+ customSymbol?: string;
255
+ hideControls?: boolean;
256
+ hideBalance?: boolean;
257
+ containerClassName?: string;
258
+ inputClassName?: string;
259
+ }
260
+ interface Props$1 extends NumericInputProps, React.InputHTMLAttributes<HTMLInputElement> {
261
+ direction?: SwapDirection;
262
+ showDetails?: boolean;
263
+ isLoading?: boolean;
264
+ isInteractive?: boolean;
265
+ priceImpactPercentage?: string;
266
+ criticalPriceImpactPercentage?: number;
267
+ error?: {
268
+ message: string;
269
+ };
226
270
  }
227
- declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): react_jsx_runtime.JSX.Element;
271
+ 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$1): react_jsx_runtime.JSX.Element;
272
+
273
+ declare function LargeNumericInput({ balance, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, inputModeButton, balanceButton, debounceInput, }: NumericInputProps): react_jsx_runtime.JSX.Element;
274
+
275
+ interface RangeInputProps {
276
+ label: string;
277
+ initialValue?: string;
278
+ onChange?: (value: string) => void;
279
+ min?: number;
280
+ max?: number;
281
+ isWarning?: boolean;
282
+ }
283
+ declare function RangeInput({ label, initialValue, onChange, min, max, isWarning, }: RangeInputProps): react_jsx_runtime.JSX.Element;
228
284
 
229
285
  interface SettingsSliderProps {
230
286
  value: number | undefined;
@@ -246,16 +302,6 @@ interface SwitchProps {
246
302
  }
247
303
  declare function Switch({ checked, onChange, size, disabled, inputProps, }: SwitchProps): react_jsx_runtime.JSX.Element;
248
304
 
249
- interface RangeInputProps {
250
- label: string;
251
- initialValue?: string;
252
- onChange?: (value: string) => void;
253
- min?: number;
254
- max?: number;
255
- isWarning?: boolean;
256
- }
257
- declare function RangeInput({ label, initialValue, onChange, min, max, isWarning, }: RangeInputProps): react_jsx_runtime.JSX.Element;
258
-
259
305
  interface AssetsButtonProps {
260
306
  token?: {
261
307
  iconUrl: string;
@@ -282,7 +328,7 @@ interface BoostButtonProps {
282
328
  }
283
329
  declare function BoostButton({ boostMode, canToggleBoostMode, boostIndicatorRef, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
284
330
 
285
- interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
331
+ interface ChipProps extends React.HTMLAttributes<HTMLDivElement | HTMLButtonElement> {
286
332
  label?: string;
287
333
  icon?: React.ReactNode;
288
334
  }
@@ -296,6 +342,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
296
342
  disabled?: boolean;
297
343
  link?: string;
298
344
  isLoading?: boolean;
345
+ isShimmering?: boolean;
299
346
  showLoader?: boolean;
300
347
  loaderSize?: LoaderSize;
301
348
  chip?: ChipProps;
@@ -305,7 +352,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
305
352
  }
306
353
  type LoaderSize = "sm" | "md" | "lg";
307
354
  declare const buttonRoundedClassMap: Record<ButtonSize, Record<ButtonVariant, string>>;
308
- declare function Button({ label, disabled, size, variant, icon, link, isLoading, showLoader, loaderSize, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
355
+ declare function Button({ label, disabled, size, variant, icon, link, isLoading, isShimmering, showLoader, loaderSize, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
309
356
 
310
357
  interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
311
358
  feeInUsd?: string;
@@ -786,6 +833,19 @@ declare function MaxIcon(): react_jsx_runtime.JSX.Element;
786
833
 
787
834
  declare function NotAllowedIcon(): react_jsx_runtime.JSX.Element;
788
835
 
836
+ declare function GooglePayIcon({ className, size, }: {
837
+ className?: string;
838
+ size?: string;
839
+ }): react_jsx_runtime.JSX.Element;
840
+ declare function ApplePayIcon({ className, size, }: {
841
+ className?: string;
842
+ size?: string;
843
+ }): react_jsx_runtime.JSX.Element;
844
+ declare function CreditCardIcon({ className, size, }: {
845
+ className?: string;
846
+ size?: string;
847
+ }): react_jsx_runtime.JSX.Element;
848
+
789
849
  declare function PercentIcon({ size, className, }: {
790
850
  size?: string;
791
851
  className?: string;
@@ -853,7 +913,10 @@ declare function SquidVector({ size, className, }: {
853
913
  className?: string;
854
914
  }): react_jsx_runtime.JSX.Element;
855
915
 
856
- declare function SwapInputsIcon(): react_jsx_runtime.JSX.Element;
916
+ declare function SwapInputsIcon({ size, className, }: {
917
+ size?: string;
918
+ className?: string;
919
+ }): react_jsx_runtime.JSX.Element;
857
920
  declare function SwapIcon({ size, className, }: {
858
921
  size?: string;
859
922
  className?: string;
@@ -927,6 +990,9 @@ declare function CrossedOutSunSolidIcon({ size, className, }: {
927
990
  interface Props extends React.ComponentProps<typeof Player> {
928
991
  }
929
992
  declare const AnimationWrapper: (playerProps: Props) => react_jsx_runtime.JSX.Element;
993
+ declare function AnimationCard({ children }: {
994
+ children?: React.ReactNode;
995
+ }): react_jsx_runtime.JSX.Element;
930
996
 
931
997
  interface AnnouncementProps {
932
998
  message: string;
@@ -1643,6 +1709,11 @@ interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
1643
1709
  declare function ModalContent({ children, addGap, paddingY, borderType, className, ...props }: ModalContentProps): react_jsx_runtime.JSX.Element;
1644
1710
  declare function ModalContentDivider(): react_jsx_runtime.JSX.Element;
1645
1711
 
1712
+ interface ModalTitleProps {
1713
+ title: string;
1714
+ }
1715
+ declare function ModalTitle({ title }: ModalTitleProps): react_jsx_runtime.JSX.Element;
1716
+
1646
1717
  interface ActionButton {
1647
1718
  labelOrIcon: string | React.ReactNode;
1648
1719
  onClick?: () => void;
@@ -1674,6 +1745,18 @@ declare function BorderedContainer({ children, className, }: {
1674
1745
 
1675
1746
  declare function ProfileHeaderBackground(): react_jsx_runtime.JSX.Element;
1676
1747
 
1748
+ interface AddressHeaderProps {
1749
+ direction: SwapDirection;
1750
+ onClick?: () => void;
1751
+ isDisabled?: boolean;
1752
+ tooltip?: TooltipProps["tooltipContent"];
1753
+ label: string;
1754
+ walletIconUrl?: string | null;
1755
+ isLoading?: boolean;
1756
+ displayLabel?: boolean;
1757
+ highlightLabel?: boolean;
1758
+ }
1759
+ declare const AddressHeader: ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel, highlightLabel, }: AddressHeaderProps) => react_jsx_runtime.JSX.Element;
1677
1760
  interface SwapConfigurationProps {
1678
1761
  direction: SwapDirection;
1679
1762
  priceImpactPercentage?: string;
@@ -1720,10 +1803,14 @@ interface SwapConfigurationProps {
1720
1803
  address?: string;
1721
1804
  emptyAddressLabel?: string;
1722
1805
  disabled?: boolean;
1806
+ walletIconUrl?: string | null;
1723
1807
  };
1724
1808
  showNumericInputDetails?: boolean;
1809
+ fullHeight?: boolean;
1810
+ debounceInput?: boolean;
1811
+ showWalletButtonHeader?: boolean;
1725
1812
  }
1726
- declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
1813
+ 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): react_jsx_runtime.JSX.Element;
1727
1814
 
1728
1815
  interface SwapStepsCollapsedFooterButton {
1729
1816
  label: string;
@@ -2177,8 +2264,9 @@ interface HistoryItemProps {
2177
2264
  onClick?: () => void;
2178
2265
  warningLabel?: string;
2179
2266
  dropdownMenuContent?: React.ReactNode;
2267
+ txType: "swap" | "send";
2180
2268
  }
2181
- declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
2269
+ declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, txType, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
2182
2270
 
2183
2271
  type HTMLInteractiveItem = HTMLButtonElement | HTMLDivElement | HTMLLabelElement;
2184
2272
  interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -2651,18 +2739,21 @@ type TabSize = "small" | "large";
2651
2739
  interface TabsProps {
2652
2740
  tabs: Array<{
2653
2741
  label: string;
2742
+ isDisabled?: boolean;
2654
2743
  }>;
2655
2744
  size?: TabSize;
2656
2745
  activeTab?: number;
2657
2746
  onTabChange?: (tabIndex: number) => void;
2747
+ isDisabled?: boolean;
2658
2748
  }
2659
- declare function Tabs({ tabs, size, onTabChange, activeTab, }: TabsProps): react_jsx_runtime.JSX.Element;
2749
+ declare function Tabs({ tabs, size, onTabChange, activeTab, isDisabled, }: TabsProps): react_jsx_runtime.JSX.Element;
2660
2750
  interface TabProps extends react__default.ComponentProps<"button"> {
2661
2751
  label: string;
2662
2752
  size: TabSize;
2663
2753
  isActive?: boolean;
2754
+ isDisabled?: boolean;
2664
2755
  }
2665
- declare function Tab({ label, isActive, size, ...props }: TabProps): react_jsx_runtime.JSX.Element;
2756
+ declare function Tab({ label, isActive, size, isDisabled, ...props }: TabProps): react_jsx_runtime.JSX.Element;
2666
2757
 
2667
2758
  interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
2668
2759
  children: ReactNode;
@@ -2734,7 +2825,7 @@ interface Token {
2734
2825
  logoUrl: string;
2735
2826
  bgColor: string;
2736
2827
  }
2737
- declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, }: {
2828
+ declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction, }: {
2738
2829
  steps: SwapStep[];
2739
2830
  handleClose?: (swapState: SwapState) => void;
2740
2831
  handleComplete?: () => void;
@@ -2754,6 +2845,7 @@ declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete,
2754
2845
  footerButton?: SwapStepsCollapsedFooterButton;
2755
2846
  refundTokenSymbol?: string;
2756
2847
  addGasLink?: string;
2848
+ isSendTransaction?: boolean;
2757
2849
  }): react_jsx_runtime.JSX.Element;
2758
2850
 
2759
2851
  interface BaseTransactionViewProps {
@@ -2893,6 +2985,12 @@ interface ThemeProviderProps extends React.ComponentProps<"div"> {
2893
2985
  }
2894
2986
  declare function ThemeProvider({ theme, children, themeType, settings, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
2895
2987
 
2988
+ declare function useCollapsibleMenu(): {
2989
+ isMenuOpen: boolean;
2990
+ toggleMenu: () => void;
2991
+ menuRef: react.RefObject<HTMLDivElement>;
2992
+ };
2993
+
2896
2994
  interface DropdownStyles {
2897
2995
  position: DropdownPosition;
2898
2996
  maxHeight: number | null;
@@ -2938,17 +3036,9 @@ type UseMediaQueryOptions = {
2938
3036
  */
2939
3037
  declare function useMediaQuery(query: string, { defaultValue, initializeWithValue, }?: UseMediaQueryOptions): boolean;
2940
3038
 
2941
- declare function useCollapsibleMenu(): {
2942
- isMenuOpen: boolean;
2943
- toggleMenu: () => void;
2944
- menuRef: react.RefObject<HTMLDivElement>;
2945
- };
2946
-
2947
3039
  declare function useOnResize(ref: React.RefObject<HTMLElement>, callback: (rect: DOMRectReadOnly) => void): void;
2948
3040
  declare function useRect(ref: React.RefObject<HTMLElement>): DOMRectReadOnly;
2949
3041
 
2950
- declare function useVersion<T>(value: T, equal?: (a: T, b: T) => boolean): number;
2951
-
2952
3042
  declare const useTimer: ({ immediateStart, }: {
2953
3043
  immediateStart?: boolean;
2954
3044
  }) => {
@@ -2970,6 +3060,8 @@ declare function useUserTheme(): {
2970
3060
  isDarkMode: boolean;
2971
3061
  };
2972
3062
 
3063
+ declare function useVersion<T>(value: T, equal?: (a: T, b: T) => boolean): number;
3064
+
2973
3065
  declare const CSS_VARS: {
2974
3066
  MOVE_WITH_SPRING_BOUNCE_DURATION: string;
2975
3067
  DISPLAY_DELAYED_DURATION: string;
@@ -3017,6 +3109,7 @@ declare const spacing: {
3017
3109
  "squid-m": string;
3018
3110
  "squid-l": string;
3019
3111
  "squid-xl": string;
3112
+ "squid-xl2": string;
3020
3113
  "squid-xxl": string;
3021
3114
  };
3022
3115
  declare const baseTailwindConfig: Config;
@@ -3030,6 +3123,8 @@ declare const baseTailwindConfig: Config;
3030
3123
  * @returns The combined class names as a string.
3031
3124
  */
3032
3125
  declare const cn: (...inputs: ClassValue[]) => string;
3126
+ declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
3127
+ declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
3033
3128
 
3034
3129
  interface RGB {
3035
3130
  r: number;
@@ -3043,8 +3138,6 @@ interface RGB {
3043
3138
  * @param style
3044
3139
  */
3045
3140
  declare const parseSquidTheme: (userTheme: Theme, themeType: ThemeType) => Record<string, string | undefined> | undefined;
3046
- declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
3047
- declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
3048
3141
  declare function getContrastColor({ r, g, b, }: {
3049
3142
  r: number;
3050
3143
  g: number;
@@ -17045,4 +17138,4 @@ declare const transactionRejectedAnimation: {
17045
17138
  markers: never[];
17046
17139
  };
17047
17140
 
17048
- export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, DepositAddressView, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, type IconButtonProps, IconLabel, Image, ImageGroup, ImageIcon, type ImageProps, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type PublicTheme, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, type TokenGroupProps, type TokenGroupVariant, TokenGroups, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
17141
+ export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AddressHeader, type AllOrNone, AnimationCard, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, ApplePayIcon, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CreditCardIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, DepositAddressView, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, GooglePayIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, type IconButtonProps, IconLabel, Image, ImageGroup, ImageIcon, type ImageProps, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, type NumericInputProps, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type Props$1 as Props, type PublicTheme, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, type Token$3 as Token, TokenDetailsView, TokenGroup, type TokenGroupProps, type TokenGroupVariant, TokenGroups, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, UserInputType, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useNumericInput, useOnResize, useRect, useTimer, useUserTheme, useVersion };
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "2.6.4",
8
+ "version": "2.6.5-animate-number-beta.0",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {