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

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 (91) hide show
  1. package/dist/cjs/index.js +18268 -18037
  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/feedback/index.d.ts +3 -0
  12. package/dist/cjs/types/components/icons/Loader.d.ts +1 -1
  13. package/dist/cjs/types/components/icons/PaymentIcons.d.ts +12 -0
  14. package/dist/cjs/types/components/icons/SwapInputs.d.ts +4 -1
  15. package/dist/cjs/types/components/icons/index.d.ts +1 -0
  16. package/dist/cjs/types/components/index.d.ts +1 -0
  17. package/dist/cjs/types/components/layout/AnimationWrapper.d.ts +3 -0
  18. package/dist/cjs/types/components/layout/AppContainer.d.ts +3 -523
  19. package/dist/cjs/types/components/layout/ModalTitle.d.ts +5 -0
  20. package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +17 -1
  21. package/dist/cjs/types/components/layout/index.d.ts +1 -0
  22. package/dist/cjs/types/components/lists/HistoryItem.d.ts +2 -1
  23. package/dist/cjs/types/components/navigation/Tabs.d.ts +5 -2
  24. package/dist/cjs/types/components/views/SwapProgressView.d.ts +2 -1
  25. package/dist/cjs/types/core/design-system.d.ts +1 -0
  26. package/dist/cjs/types/core/index.d.ts +1 -1
  27. package/dist/cjs/types/core/utils.d.ts +16 -0
  28. package/dist/cjs/types/hooks/index.d.ts +3 -2
  29. package/dist/cjs/types/hooks/useMeasure.d.ts +36 -0
  30. package/dist/cjs/types/hooks/useNumericInput.d.ts +35 -0
  31. package/dist/cjs/types/services/internal/colorService.d.ts +0 -2
  32. package/dist/cjs/types/stories/buttons/Button.stories.d.ts +3 -0
  33. package/dist/cjs/types/stories/buttons/Chip.stories.d.ts +2 -1
  34. package/dist/cjs/types/stories/controls/Input.stories.d.ts +1 -1
  35. package/dist/cjs/types/stories/controls/LargeNumericInput.stories.d.ts +6 -0
  36. package/dist/cjs/types/stories/controls/NumericInput.stories.d.ts +17 -0
  37. package/dist/cjs/types/stories/feedback/AnimateNumber.stories.d.ts +6 -0
  38. package/dist/{esm/types/stories/badges → cjs/types/stories/feedback}/Loader.stories.d.ts +1 -1
  39. package/dist/cjs/types/stories/{badges → feedback}/LoadingSkeleton.stories.d.ts +2 -2
  40. package/dist/cjs/types/stories/feedback/LoadingText.stories.d.ts +6 -0
  41. package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts +2 -0
  42. package/dist/cjs/types/stories/navigation/Tabs.stories.d.ts +1 -0
  43. package/dist/cjs/types/stories/views/SwapProgressView.stories.d.ts +1 -0
  44. package/dist/esm/index.js +18236 -18015
  45. package/dist/esm/types/components/badges/PriceChange.d.ts +3 -1
  46. package/dist/esm/types/components/badges/index.d.ts +1 -1
  47. package/dist/esm/types/components/buttons/Button.d.ts +2 -1
  48. package/dist/esm/types/components/buttons/Chip.d.ts +1 -1
  49. package/dist/esm/types/components/controls/LargeNumericInput.d.ts +2 -0
  50. package/dist/esm/types/components/controls/NumericInput.d.ts +22 -13
  51. package/dist/esm/types/components/controls/index.d.ts +2 -1
  52. package/dist/esm/types/components/feedback/AnimateNumber.d.ts +8 -0
  53. package/dist/esm/types/components/feedback/LoadingText.d.ts +7 -0
  54. package/dist/esm/types/components/feedback/index.d.ts +3 -0
  55. package/dist/esm/types/components/icons/Loader.d.ts +1 -1
  56. package/dist/esm/types/components/icons/PaymentIcons.d.ts +12 -0
  57. package/dist/esm/types/components/icons/SwapInputs.d.ts +4 -1
  58. package/dist/esm/types/components/icons/index.d.ts +1 -0
  59. package/dist/esm/types/components/index.d.ts +1 -0
  60. package/dist/esm/types/components/layout/AnimationWrapper.d.ts +3 -0
  61. package/dist/esm/types/components/layout/AppContainer.d.ts +3 -523
  62. package/dist/esm/types/components/layout/ModalTitle.d.ts +5 -0
  63. package/dist/esm/types/components/layout/SwapConfiguration.d.ts +17 -1
  64. package/dist/esm/types/components/layout/index.d.ts +1 -0
  65. package/dist/esm/types/components/lists/HistoryItem.d.ts +2 -1
  66. package/dist/esm/types/components/navigation/Tabs.d.ts +5 -2
  67. package/dist/esm/types/components/views/SwapProgressView.d.ts +2 -1
  68. package/dist/esm/types/core/design-system.d.ts +1 -0
  69. package/dist/esm/types/core/index.d.ts +1 -1
  70. package/dist/esm/types/core/utils.d.ts +16 -0
  71. package/dist/esm/types/hooks/index.d.ts +3 -2
  72. package/dist/esm/types/hooks/useMeasure.d.ts +36 -0
  73. package/dist/esm/types/hooks/useNumericInput.d.ts +35 -0
  74. package/dist/esm/types/services/internal/colorService.d.ts +0 -2
  75. package/dist/esm/types/stories/buttons/Button.stories.d.ts +3 -0
  76. package/dist/esm/types/stories/buttons/Chip.stories.d.ts +2 -1
  77. package/dist/esm/types/stories/controls/Input.stories.d.ts +1 -1
  78. package/dist/esm/types/stories/controls/LargeNumericInput.stories.d.ts +6 -0
  79. package/dist/esm/types/stories/controls/NumericInput.stories.d.ts +17 -0
  80. package/dist/esm/types/stories/feedback/AnimateNumber.stories.d.ts +6 -0
  81. package/dist/{cjs/types/stories/badges → esm/types/stories/feedback}/Loader.stories.d.ts +1 -1
  82. package/dist/esm/types/stories/{badges → feedback}/LoadingSkeleton.stories.d.ts +2 -2
  83. package/dist/esm/types/stories/feedback/LoadingText.stories.d.ts +6 -0
  84. package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts +2 -0
  85. package/dist/esm/types/stories/navigation/Tabs.stories.d.ts +1 -0
  86. package/dist/esm/types/stories/views/SwapProgressView.stories.d.ts +1 -0
  87. package/dist/index.css +1 -1
  88. package/dist/index.d.ts +154 -568
  89. package/package.json +2 -1
  90. /package/dist/cjs/types/components/{badges → feedback}/LoadingSkeleton.d.ts +0 -0
  91. /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 {};
@@ -0,0 +1,3 @@
1
+ export * from "./AnimateNumber";
2
+ export * from "./LoadingSkeleton";
3
+ export * from "./LoadingText";
@@ -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";
@@ -1,6 +1,7 @@
1
1
  export * from "./badges";
2
2
  export * from "./buttons";
3
3
  export * from "./controls";
4
+ export * from "./feedback";
4
5
  export * from "./icons";
5
6
  export * from "./layout";
6
7
  export * from "./lists";
@@ -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 {};