@0xsquid/ui 2.2.5 → 2.2.6

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 (131) hide show
  1. package/dist/cjs/index.js +15023 -14901
  2. package/dist/cjs/types/components/badges/BadgeImage.d.ts +5 -11
  3. package/dist/cjs/types/components/badges/IconLabel.d.ts +4 -5
  4. package/dist/cjs/types/components/badges/Image.d.ts +15 -5
  5. package/dist/cjs/types/components/badges/LoadingSkeleton.d.ts +1 -1
  6. package/dist/cjs/types/components/badges/PriceChange.d.ts +5 -0
  7. package/dist/cjs/types/components/badges/index.d.ts +1 -0
  8. package/dist/cjs/types/components/cards/WalletCard.d.ts +14 -0
  9. package/dist/cjs/types/components/icons/Arrow.d.ts +4 -0
  10. package/dist/cjs/types/components/icons/Avatars.d.ts +2 -1
  11. package/dist/cjs/types/components/icons/Plus.d.ts +4 -1
  12. package/dist/cjs/types/components/icons/SquidLogo.d.ts +4 -0
  13. package/dist/cjs/types/components/layout/Announcement.d.ts +8 -0
  14. package/dist/cjs/types/components/layout/AppContainer.d.ts +8 -8
  15. package/dist/cjs/types/components/layout/Collapse.d.ts +3 -2
  16. package/dist/cjs/types/components/layout/DescriptionBlocks.d.ts +2 -2
  17. package/dist/cjs/types/components/layout/DetailsToolbar.d.ts +2 -2
  18. package/dist/cjs/types/components/layout/ImageStack.d.ts +9 -0
  19. package/dist/cjs/types/components/layout/TransactionFilters.d.ts +3 -3
  20. package/dist/cjs/types/components/layout/TransactionHeader/BridgeHeader.d.ts +1 -1
  21. package/dist/cjs/types/components/layout/TransactionHeader/BuyNFTHeader.d.ts +1 -1
  22. package/dist/cjs/types/components/layout/index.d.ts +1 -0
  23. package/dist/cjs/types/components/layout/useOnClickOutside.d.ts +1 -1
  24. package/dist/cjs/types/components/lists/ListItem.d.ts +2 -1
  25. package/dist/cjs/types/components/lists/SwapStepItem.d.ts +1 -1
  26. package/dist/cjs/types/components/lists/TokenGroup.d.ts +20 -0
  27. package/dist/cjs/types/components/lists/TransactionAction/ActionLayout.d.ts +2 -2
  28. package/dist/cjs/types/components/lists/TransactionAction/ApproveAction.d.ts +1 -1
  29. package/dist/cjs/types/components/lists/TransactionAction/BridgeAction.d.ts +1 -1
  30. package/dist/cjs/types/components/lists/TransactionAction/ReceiveNFTAction.d.ts +1 -1
  31. package/dist/cjs/types/components/lists/TransactionAction/ReceiveTokensAction.d.ts +1 -1
  32. package/dist/cjs/types/components/lists/TransactionAction/SendTokensAction.d.ts +1 -1
  33. package/dist/cjs/types/components/lists/TransactionAction/StakeAction.d.ts +1 -1
  34. package/dist/cjs/types/components/lists/TransactionAction/SwapAction.d.ts +1 -1
  35. package/dist/cjs/types/components/lists/TransactionAction/WrapAction.d.ts +1 -1
  36. package/dist/cjs/types/components/lists/TransactionItem.d.ts +4 -4
  37. package/dist/cjs/types/components/typography/CaptionText.d.ts +2 -1
  38. package/dist/cjs/types/components/views/TransactionView/TransactionViewLayout.d.ts +2 -2
  39. package/dist/cjs/types/core/constants.d.ts +2 -0
  40. package/dist/cjs/types/core/design-system.d.ts +3 -1
  41. package/dist/cjs/types/services/internal/colorService.d.ts +9 -0
  42. package/dist/cjs/types/stories/badges/BadgeImage.stories.d.ts +7 -10
  43. package/dist/cjs/types/stories/badges/IconLabel.stories.d.ts +1 -1
  44. package/dist/cjs/types/stories/badges/Image.stories.d.ts +16 -0
  45. package/dist/cjs/types/stories/badges/PriceChange.stories.d.ts +8 -0
  46. package/dist/cjs/types/stories/buttons/AddressButton.stories.d.ts +1 -1
  47. package/dist/cjs/types/stories/buttons/Button.stories.d.ts +1 -1
  48. package/dist/cjs/types/stories/buttons/FilterButton.stories.d.ts +1 -1
  49. package/dist/cjs/types/stories/cards/WalletCard.stories.d.ts +11 -0
  50. package/dist/cjs/types/stories/controls/Tooltip.stories.d.ts +1 -1
  51. package/dist/cjs/types/stories/layout/Announcement.stories.d.ts +9 -0
  52. package/dist/cjs/types/stories/layout/ImageStack.stories.d.ts +8 -0
  53. package/dist/cjs/types/stories/layout/Toast.stories.d.ts +1 -1
  54. package/dist/cjs/types/stories/layout/TransactionProperties.stories.d.ts +2 -2
  55. package/dist/cjs/types/stories/layout/TransactionSearch.stories.d.ts +1 -1
  56. package/dist/cjs/types/stories/lists/HistoryItem.stories.d.ts +2 -1
  57. package/dist/cjs/types/stories/lists/ListItem.stories.d.ts +1 -1
  58. package/dist/cjs/types/stories/lists/PropertyListItem.stories.d.ts +1 -1
  59. package/dist/cjs/types/stories/lists/SwapStepItem.stories.d.ts +1 -1
  60. package/dist/cjs/types/stories/lists/TokenGroup.stories.d.ts +15 -0
  61. package/dist/cjs/types/stories/lists/TransactionItem.stories.d.ts +1 -1
  62. package/dist/cjs/types/types/components.d.ts +7 -2
  63. package/dist/cjs/types/types/config.d.ts +1 -1
  64. package/dist/esm/index.js +15005 -14889
  65. package/dist/esm/types/components/badges/BadgeImage.d.ts +5 -11
  66. package/dist/esm/types/components/badges/IconLabel.d.ts +4 -5
  67. package/dist/esm/types/components/badges/Image.d.ts +15 -5
  68. package/dist/esm/types/components/badges/LoadingSkeleton.d.ts +1 -1
  69. package/dist/esm/types/components/badges/PriceChange.d.ts +5 -0
  70. package/dist/esm/types/components/badges/index.d.ts +1 -0
  71. package/dist/esm/types/components/cards/WalletCard.d.ts +14 -0
  72. package/dist/esm/types/components/icons/Arrow.d.ts +4 -0
  73. package/dist/esm/types/components/icons/Avatars.d.ts +2 -1
  74. package/dist/esm/types/components/icons/Plus.d.ts +4 -1
  75. package/dist/esm/types/components/icons/SquidLogo.d.ts +4 -0
  76. package/dist/esm/types/components/layout/Announcement.d.ts +8 -0
  77. package/dist/esm/types/components/layout/AppContainer.d.ts +8 -8
  78. package/dist/esm/types/components/layout/Collapse.d.ts +3 -2
  79. package/dist/esm/types/components/layout/DescriptionBlocks.d.ts +2 -2
  80. package/dist/esm/types/components/layout/DetailsToolbar.d.ts +2 -2
  81. package/dist/esm/types/components/layout/ImageStack.d.ts +9 -0
  82. package/dist/esm/types/components/layout/TransactionFilters.d.ts +3 -3
  83. package/dist/esm/types/components/layout/TransactionHeader/BridgeHeader.d.ts +1 -1
  84. package/dist/esm/types/components/layout/TransactionHeader/BuyNFTHeader.d.ts +1 -1
  85. package/dist/esm/types/components/layout/index.d.ts +1 -0
  86. package/dist/esm/types/components/layout/useOnClickOutside.d.ts +1 -1
  87. package/dist/esm/types/components/lists/ListItem.d.ts +2 -1
  88. package/dist/esm/types/components/lists/SwapStepItem.d.ts +1 -1
  89. package/dist/esm/types/components/lists/TokenGroup.d.ts +20 -0
  90. package/dist/esm/types/components/lists/TransactionAction/ActionLayout.d.ts +2 -2
  91. package/dist/esm/types/components/lists/TransactionAction/ApproveAction.d.ts +1 -1
  92. package/dist/esm/types/components/lists/TransactionAction/BridgeAction.d.ts +1 -1
  93. package/dist/esm/types/components/lists/TransactionAction/ReceiveNFTAction.d.ts +1 -1
  94. package/dist/esm/types/components/lists/TransactionAction/ReceiveTokensAction.d.ts +1 -1
  95. package/dist/esm/types/components/lists/TransactionAction/SendTokensAction.d.ts +1 -1
  96. package/dist/esm/types/components/lists/TransactionAction/StakeAction.d.ts +1 -1
  97. package/dist/esm/types/components/lists/TransactionAction/SwapAction.d.ts +1 -1
  98. package/dist/esm/types/components/lists/TransactionAction/WrapAction.d.ts +1 -1
  99. package/dist/esm/types/components/lists/TransactionItem.d.ts +4 -4
  100. package/dist/esm/types/components/typography/CaptionText.d.ts +2 -1
  101. package/dist/esm/types/components/views/TransactionView/TransactionViewLayout.d.ts +2 -2
  102. package/dist/esm/types/core/constants.d.ts +2 -0
  103. package/dist/esm/types/core/design-system.d.ts +3 -1
  104. package/dist/esm/types/services/internal/colorService.d.ts +9 -0
  105. package/dist/esm/types/stories/badges/BadgeImage.stories.d.ts +7 -10
  106. package/dist/esm/types/stories/badges/IconLabel.stories.d.ts +1 -1
  107. package/dist/esm/types/stories/badges/Image.stories.d.ts +16 -0
  108. package/dist/esm/types/stories/badges/PriceChange.stories.d.ts +8 -0
  109. package/dist/esm/types/stories/buttons/AddressButton.stories.d.ts +1 -1
  110. package/dist/esm/types/stories/buttons/Button.stories.d.ts +1 -1
  111. package/dist/esm/types/stories/buttons/FilterButton.stories.d.ts +1 -1
  112. package/dist/esm/types/stories/cards/WalletCard.stories.d.ts +11 -0
  113. package/dist/esm/types/stories/controls/Tooltip.stories.d.ts +1 -1
  114. package/dist/esm/types/stories/layout/Announcement.stories.d.ts +9 -0
  115. package/dist/esm/types/stories/layout/ImageStack.stories.d.ts +8 -0
  116. package/dist/esm/types/stories/layout/Toast.stories.d.ts +1 -1
  117. package/dist/esm/types/stories/layout/TransactionProperties.stories.d.ts +2 -2
  118. package/dist/esm/types/stories/layout/TransactionSearch.stories.d.ts +1 -1
  119. package/dist/esm/types/stories/lists/HistoryItem.stories.d.ts +2 -1
  120. package/dist/esm/types/stories/lists/ListItem.stories.d.ts +1 -1
  121. package/dist/esm/types/stories/lists/PropertyListItem.stories.d.ts +1 -1
  122. package/dist/esm/types/stories/lists/SwapStepItem.stories.d.ts +1 -1
  123. package/dist/esm/types/stories/lists/TokenGroup.stories.d.ts +15 -0
  124. package/dist/esm/types/stories/lists/TransactionItem.stories.d.ts +1 -1
  125. package/dist/esm/types/types/components.d.ts +7 -2
  126. package/dist/esm/types/types/config.d.ts +1 -1
  127. package/dist/index.css +1 -1
  128. package/dist/index.d.ts +87 -46
  129. package/package.json +2 -2
  130. package/dist/cjs/types/stories/badges/ImageIcon.stories.d.ts +0 -7
  131. package/dist/esm/types/stories/badges/ImageIcon.stories.d.ts +0 -7
@@ -1,15 +1,9 @@
1
+ import { type ImageProps } from "./Image";
1
2
  interface BadgeImageProps {
2
- imageUrl?: string;
3
- badgeUrl?: string;
4
- size?: BadgeSize;
3
+ badge?: ImageProps;
4
+ image?: ImageProps;
5
5
  extraMarginForBadge?: boolean;
6
- rounded?: boolean;
7
- /**
8
- * The URL of the placeholder image. Will be displayed while the images are loading
9
- * or if there's an error loading them.
10
- */
11
- placeholderImageUrl?: string;
6
+ className?: string;
12
7
  }
13
- type BadgeSize = "sm" | "md" | "lg";
14
- export declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
8
+ export declare function BadgeImage({ image, badge, extraMarginForBadge, className, }: BadgeImageProps): false | import("react/jsx-runtime").JSX.Element;
15
9
  export {};
@@ -1,10 +1,9 @@
1
- import { ReactNode } from "react";
2
- import { ImageVariant } from "../../types/components";
1
+ import { type ReactNode } from "react";
2
+ import { type ImageRoundedSize } from "../../types/components";
3
3
  interface IconLabelProps {
4
- isLoading?: boolean;
5
4
  src?: string;
6
5
  children?: ReactNode;
7
- variant?: ImageVariant;
6
+ rounded?: ImageRoundedSize;
8
7
  }
9
- export declare function IconLabel({ src, children, variant }: IconLabelProps): import("react/jsx-runtime").JSX.Element;
8
+ export declare function IconLabel({ src, children, rounded }: IconLabelProps): import("react/jsx-runtime").JSX.Element;
10
9
  export {};
@@ -1,9 +1,19 @@
1
- import { ImageSize, ImageVariant } from "../../types/components";
2
- interface ImageProps {
1
+ /// <reference types="react" />
2
+ import { type ImageBorder, type ImageRoundedSize, type ImageSize } from "../../types/components";
3
+ export declare enum ImageState {
4
+ LOADING = 0,
5
+ LOADED = 1,
6
+ ERROR = 2
7
+ }
8
+ export interface ImageProps extends React.ComponentProps<"img"> {
3
9
  src?: string;
4
- variant?: ImageVariant;
10
+ children?: React.ReactNode;
5
11
  size?: ImageSize;
6
12
  className?: string;
13
+ placeholderImageUrl?: string;
14
+ border?: ImageBorder;
15
+ rounded?: ImageRoundedSize;
16
+ shadow?: boolean;
17
+ containerProps?: React.ComponentProps<"div">;
7
18
  }
8
- export declare function Image({ src, variant, size, className: propsClassName, }: ImageProps): import("react/jsx-runtime").JSX.Element;
9
- export {};
19
+ export declare function Image({ src, size, className: propsClassName, placeholderImageUrl, border, rounded, shadow, children, containerProps, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,4 @@
1
- import { ComponentProps } from "react";
1
+ import { type ComponentProps } from "react";
2
2
  export declare const LoadingProvider: import("react").Provider<boolean | null>;
3
3
  interface LoadingSkeletonProps {
4
4
  className?: string;
@@ -0,0 +1,5 @@
1
+ import { type PriceChange as TPriceChange } from "../../types/components";
2
+ interface PriceChangeProps extends TPriceChange {
3
+ }
4
+ export declare function PriceChange({ sign, value }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
5
+ export {};
@@ -2,6 +2,7 @@ export * from "./BadgeImage";
2
2
  export * from "./IconLabel";
3
3
  export * from "./Image";
4
4
  export * from "./LoadingSkeleton";
5
+ export * from "./PriceChange";
5
6
  export * from "./TransactionState";
6
7
  export * from "./UsdAmount";
7
8
  export * from "./WalletLink";
@@ -0,0 +1,14 @@
1
+ interface WalletCardProps {
2
+ isConnected?: boolean;
3
+ chainImageUrl?: string;
4
+ avatarImageUrl?: string;
5
+ walletImageUrl?: string;
6
+ title?: string;
7
+ subtitle?: string;
8
+ footerLabel?: string;
9
+ isSelected?: boolean;
10
+ bgColors?: string[];
11
+ className?: string;
12
+ }
13
+ export declare function WalletCard({ avatarImageUrl, chainImageUrl, footerLabel, isConnected, subtitle, title, walletImageUrl, isSelected, bgColors, className, }: WalletCardProps): import("react/jsx-runtime").JSX.Element;
14
+ export {};
@@ -8,6 +8,10 @@ export declare function ChevronArrowIcon({ size, className, }: {
8
8
  export declare function ArrowTriangle({ className }: {
9
9
  className?: string;
10
10
  }): import("react/jsx-runtime").JSX.Element;
11
+ export declare function PauseIcon({ size, className, }: {
12
+ size?: string;
13
+ className?: string;
14
+ }): import("react/jsx-runtime").JSX.Element;
11
15
  export declare function ChevronTopSmallIcon(): import("react/jsx-runtime").JSX.Element;
12
16
  export declare function ChevronLargeDownIcon({ size, className, }: {
13
17
  size?: string;
@@ -1,3 +1,4 @@
1
- export declare function PunkIcon({ size }: {
1
+ export declare function PunkIcon({ className, size, }: {
2
+ className?: string;
2
3
  size?: string;
3
4
  }): import("react/jsx-runtime").JSX.Element;
@@ -1 +1,4 @@
1
- export declare function PlusIcon(): import("react/jsx-runtime").JSX.Element;
1
+ export declare function PlusIcon({ className, size, }: {
2
+ className?: string;
3
+ size?: string;
4
+ }): import("react/jsx-runtime").JSX.Element;
@@ -2,3 +2,7 @@ export declare function SquidLogo({ size, className, }: {
2
2
  size?: string;
3
3
  className?: string;
4
4
  }): import("react/jsx-runtime").JSX.Element;
5
+ export declare function SquidVector({ size, className, }: {
6
+ size?: string;
7
+ className?: string;
8
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export interface AnnouncementProps {
3
+ message: string;
4
+ mainIcon?: React.ReactNode;
5
+ detail?: React.ReactNode;
6
+ link?: string;
7
+ }
8
+ export declare function Announcement({ message, detail, mainIcon, link, }: AnnouncementProps): import("react/jsx-runtime").JSX.Element;
@@ -6,9 +6,9 @@ interface AppContainerProps extends ComponentProps<typeof motion.div> {
6
6
  export declare function AppContainer({ children, className, layoutKey, ...props }: AppContainerProps): import("react/jsx-runtime").JSX.Element;
7
7
  export declare namespace AppContainer {
8
8
  var Nav: ({ className, children, ...props }: {
9
+ color?: string | undefined;
9
10
  slot?: string | undefined;
10
11
  title?: string | undefined;
11
- color?: string | undefined;
12
12
  hidden?: boolean | undefined;
13
13
  suppressHydrationWarning?: boolean | undefined;
14
14
  className?: string | undefined;
@@ -18,7 +18,7 @@ export declare namespace AppContainer {
18
18
  tabIndex?: number | undefined;
19
19
  "aria-activedescendant"?: string | undefined;
20
20
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
21
- "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
21
+ "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
22
22
  "aria-braillelabel"?: string | undefined;
23
23
  "aria-brailleroledescription"?: string | undefined;
24
24
  "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -33,7 +33,7 @@ export declare namespace AppContainer {
33
33
  "aria-description"?: string | undefined;
34
34
  "aria-details"?: string | undefined;
35
35
  "aria-disabled"?: (boolean | "true" | "false") | undefined;
36
- "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
36
+ "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
37
37
  "aria-errormessage"?: string | undefined;
38
38
  "aria-expanded"?: (boolean | "true" | "false") | undefined;
39
39
  "aria-flowto"?: string | undefined;
@@ -104,7 +104,7 @@ export declare namespace AppContainer {
104
104
  results?: number | undefined;
105
105
  security?: string | undefined;
106
106
  unselectable?: "off" | "on" | undefined;
107
- inputMode?: "search" | "text" | "numeric" | "none" | "email" | "tel" | "url" | "decimal" | undefined;
107
+ inputMode?: "none" | "search" | "text" | "numeric" | "email" | "tel" | "url" | "decimal" | undefined;
108
108
  is?: string | undefined;
109
109
  dangerouslySetInnerHTML?: {
110
110
  __html: string | TrustedHTML;
@@ -267,9 +267,9 @@ export declare namespace AppContainer {
267
267
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
268
268
  } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
269
269
  var Content: (props: {
270
+ color?: string | undefined;
270
271
  slot?: string | undefined;
271
272
  title?: string | undefined;
272
- color?: string | undefined;
273
273
  hidden?: boolean | undefined;
274
274
  suppressHydrationWarning?: boolean | undefined;
275
275
  className?: string | undefined;
@@ -279,7 +279,7 @@ export declare namespace AppContainer {
279
279
  tabIndex?: number | undefined;
280
280
  "aria-activedescendant"?: string | undefined;
281
281
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
282
- "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
282
+ "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
283
283
  "aria-braillelabel"?: string | undefined;
284
284
  "aria-brailleroledescription"?: string | undefined;
285
285
  "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -294,7 +294,7 @@ export declare namespace AppContainer {
294
294
  "aria-description"?: string | undefined;
295
295
  "aria-details"?: string | undefined;
296
296
  "aria-disabled"?: (boolean | "true" | "false") | undefined;
297
- "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
297
+ "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
298
298
  "aria-errormessage"?: string | undefined;
299
299
  "aria-expanded"?: (boolean | "true" | "false") | undefined;
300
300
  "aria-flowto"?: string | undefined;
@@ -365,7 +365,7 @@ export declare namespace AppContainer {
365
365
  results?: number | undefined;
366
366
  security?: string | undefined;
367
367
  unselectable?: "off" | "on" | undefined;
368
- inputMode?: "search" | "text" | "numeric" | "none" | "email" | "tel" | "url" | "decimal" | undefined;
368
+ inputMode?: "none" | "search" | "text" | "numeric" | "email" | "tel" | "url" | "decimal" | undefined;
369
369
  is?: string | undefined;
370
370
  dangerouslySetInnerHTML?: {
371
371
  __html: string | TrustedHTML;
@@ -1,10 +1,11 @@
1
- import { ComponentProps } from "react";
1
+ import { type ComponentProps } from "react";
2
2
  interface CollapseProps extends ComponentProps<"div"> {
3
3
  collapsed: boolean;
4
4
  collapsedHeight?: number;
5
5
  duration?: number;
6
+ contentsClassName?: string;
6
7
  }
7
- export declare function Collapse({ collapsed, collapsedHeight, children, className, duration, ...props }: CollapseProps): import("react/jsx-runtime").JSX.Element;
8
+ export declare function Collapse({ collapsed, collapsedHeight, children, className, duration, contentsClassName, ...props }: CollapseProps): import("react/jsx-runtime").JSX.Element;
8
9
  interface SizeTransitionProps extends ComponentProps<"div"> {
9
10
  }
10
11
  export declare function SizeTransition({ children, className, ...props }: SizeTransitionProps): import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,5 @@
1
- import { ComponentProps } from "react";
2
- import { DescriptionBlock } from "../../types/components";
1
+ import { type ComponentProps } from "react";
2
+ import { type DescriptionBlock } from "../../types/components";
3
3
  interface DescriptionBlocksProps extends ComponentProps<"div"> {
4
4
  blocks: DescriptionBlock[] | string;
5
5
  }
@@ -1,5 +1,5 @@
1
- import { StopsProps as StopsButtonProps } from "../buttons/StopsButton";
2
- import { TooltipProps } from "../controls";
1
+ import { type StopsProps as StopsButtonProps } from "../buttons/StopsButton";
2
+ import { type TooltipProps } from "../controls";
3
3
  interface DetailsToolbarProps {
4
4
  errorMessage?: string;
5
5
  flipButton?: {
@@ -0,0 +1,9 @@
1
+ import { type ImageProps } from "../badges";
2
+ export declare function ImageStack({ imageUrls, spacing, stackOnTop, ...imageProps }: {
3
+ imageUrls: string[];
4
+ spacing: string;
5
+ border?: ImageProps["border"];
6
+ rounded?: ImageProps["rounded"];
7
+ size?: ImageProps["size"];
8
+ stackOnTop?: boolean;
9
+ }): import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,5 @@
1
1
  import "react-day-picker/dist/style.css";
2
- import { ChainTypeFilter, StatusFilter as TStatusFilter } from "../../types/components";
2
+ import { type ChainTypeFilter, type StatusFilter as TStatusFilter } from "../../types/components";
3
3
  interface TransactionFiltersProps {
4
4
  chainType?: ChainTypeFilter;
5
5
  setChainType: (chainType: ChainTypeFilter) => void;
@@ -11,10 +11,10 @@ interface TransactionFiltersProps {
11
11
  setToDate: (toDate?: Date) => void;
12
12
  status?: TStatusFilter[];
13
13
  setStatus: (status?: TStatusFilter[]) => void;
14
- chains: {
14
+ chains: Array<{
15
15
  name: string;
16
16
  logoURI: string;
17
- }[];
17
+ }>;
18
18
  }
19
19
  export declare function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status, setStatus, chains, }: TransactionFiltersProps): import("react/jsx-runtime").JSX.Element;
20
20
  export {};
@@ -1,4 +1,4 @@
1
- import { ActionStatus } from "../../../types/components";
1
+ import { type ActionStatus } from "../../../types/components";
2
2
  interface BridgeHeaderProps {
3
3
  tokenLogoURI: string;
4
4
  chainLogoURI: string;
@@ -1,4 +1,4 @@
1
- import { ActionStatus } from "../../../types/components";
1
+ import { type ActionStatus } from "../../../types/components";
2
2
  interface BuyNFTHeaderProps {
3
3
  imageUrl: string;
4
4
  title?: string;
@@ -1,4 +1,5 @@
1
1
  export * from "./AnimationWrapper";
2
+ export * from "./Announcement";
2
3
  export * from "./AppContainer";
3
4
  export * from "./Boost";
4
5
  export * from "./Breadcrumb";
@@ -1,4 +1,4 @@
1
- import { RefObject } from "react";
1
+ import { type RefObject } from "react";
2
2
  export declare function useOnClickOutside(callback: () => void, externalRef?: RefObject<HTMLElement>): {
3
3
  ref: RefObject<HTMLElement>;
4
4
  };
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { type ImageRoundedSize } from "../../types/components";
2
3
  interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
3
4
  itemTitle: string | React.ReactNode;
4
5
  mainImageUrl?: string;
@@ -14,7 +15,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
14
15
  className?: string;
15
16
  onDetailClick?: () => void;
16
17
  showDetailOnHoverOnly?: boolean;
17
- rounded?: boolean;
18
+ rounded?: ImageRoundedSize;
18
19
  detailButtonClassName?: string;
19
20
  loading?: {
20
21
  subtitle?: boolean | string;
@@ -1,4 +1,4 @@
1
- import { ActionStatus, DescriptionBlock } from "../../types/components";
1
+ import { type ActionStatus, type DescriptionBlock } from "../../types/components";
2
2
  interface SwapStepItemProps {
3
3
  descriptionBlocks: DescriptionBlock[];
4
4
  showStepSeparator?: boolean;
@@ -0,0 +1,20 @@
1
+ /// <reference types="react" />
2
+ import { type PriceChange as TPriceChange } from "../../types/components";
3
+ type TokenGroupVariant = "compact" | "large" | "small";
4
+ export interface TokenGroupProps {
5
+ isSelected?: boolean;
6
+ imageUrl: string;
7
+ symbol: string;
8
+ name: string;
9
+ chainImageUrl: string;
10
+ balance?: string;
11
+ balanceUsd?: string;
12
+ priceChange?: TPriceChange;
13
+ tokenItems?: TokenGroupProps[];
14
+ extraSpacing?: boolean;
15
+ onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
16
+ maxPreviewItems?: number;
17
+ variant?: TokenGroupVariant;
18
+ }
19
+ export declare function TokenGroup({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, maxPreviewItems, variant, }: TokenGroupProps): import("react/jsx-runtime").JSX.Element;
20
+ export {};
@@ -1,5 +1,5 @@
1
- import { ComponentProps, ReactNode } from "react";
2
- import { ActionStatus } from "../../../types/components";
1
+ import { type ComponentProps, type ReactNode } from "react";
2
+ import { type ActionStatus } from "../../../types/components";
3
3
  interface ActionLayoutProps {
4
4
  lineCap?: ReactNode;
5
5
  status?: ActionStatus;
@@ -1,4 +1,4 @@
1
- import { BaseActionProps } from "./BaseActionProps";
1
+ import { type BaseActionProps } from "./BaseActionProps";
2
2
  interface ApproveActionProps extends BaseActionProps {
3
3
  profile: {
4
4
  imageURI: string;
@@ -1,4 +1,4 @@
1
- import { BaseActionProps } from "./BaseActionProps";
1
+ import { type BaseActionProps } from "./BaseActionProps";
2
2
  interface BridgeActionProps extends BaseActionProps {
3
3
  token: {
4
4
  logoURI: string;
@@ -1,4 +1,4 @@
1
- import { BaseActionProps } from "./BaseActionProps";
1
+ import { type BaseActionProps } from "./BaseActionProps";
2
2
  interface ReceiveNFTActionProps extends BaseActionProps {
3
3
  nft: {
4
4
  imageURI: string;
@@ -1,4 +1,4 @@
1
- import { BaseActionProps } from "./BaseActionProps";
1
+ import { type BaseActionProps } from "./BaseActionProps";
2
2
  interface ReceiveTokensActionProps extends BaseActionProps {
3
3
  amount: string;
4
4
  token: {
@@ -1,4 +1,4 @@
1
- import { BaseActionProps } from "./BaseActionProps";
1
+ import { type BaseActionProps } from "./BaseActionProps";
2
2
  interface SendTokensActionProps extends BaseActionProps {
3
3
  amount: string;
4
4
  token: {
@@ -1,4 +1,4 @@
1
- import { BaseActionProps } from "./BaseActionProps";
1
+ import { type BaseActionProps } from "./BaseActionProps";
2
2
  interface StakeActionProps extends BaseActionProps {
3
3
  token: {
4
4
  logoURI: string;
@@ -1,4 +1,4 @@
1
- import { BaseActionProps } from "./BaseActionProps";
1
+ import { type BaseActionProps } from "./BaseActionProps";
2
2
  interface SwapActionProps extends BaseActionProps {
3
3
  fromToken: {
4
4
  logoURI: string;
@@ -1,4 +1,4 @@
1
- import { BaseActionProps } from "./BaseActionProps";
1
+ import { type BaseActionProps } from "./BaseActionProps";
2
2
  interface WrapActionProps extends BaseActionProps {
3
3
  fromToken: {
4
4
  logoURI: string;
@@ -1,10 +1,10 @@
1
- import { ReactNode } from "react";
2
- import { ActionStatus } from "../../types/components";
1
+ import { type ReactNode } from "react";
2
+ import { type ActionStatus } from "../../types/components";
3
3
  type TransactionItemVariant = "compact" | "full";
4
- type TransactionItemType = {
4
+ interface TransactionItemType {
5
5
  icon?: ReactNode;
6
6
  name: string;
7
- };
7
+ }
8
8
  interface TransactionItemProps {
9
9
  className?: string;
10
10
  isLoading?: boolean;
@@ -2,10 +2,11 @@ import { type ReactNode } from "react";
2
2
  interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
3
3
  children: ReactNode;
4
4
  bold?: boolean;
5
+ tight?: boolean;
5
6
  loading?: {
6
7
  isLoading?: boolean;
7
8
  width?: string;
8
9
  };
9
10
  }
10
- export declare function CaptionText({ children, bold, loading, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function CaptionText({ children, bold, loading, tight, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
11
12
  export {};
@@ -1,5 +1,5 @@
1
- import { ComponentProps, ReactNode } from "react";
2
- import { FeesActionProps, TransactionActionProps } from "../../lists/TransactionAction";
1
+ import { type ComponentProps, type ReactNode } from "react";
2
+ import { type FeesActionProps, type TransactionActionProps } from "../../lists/TransactionAction";
3
3
  interface TransactionViewLayoutProps extends ComponentProps<"div"> {
4
4
  isLoading?: boolean;
5
5
  header?: ReactNode;
@@ -26,6 +26,7 @@ export declare const ANIMATION_DURATIONS: {
26
26
  SHOW_MODAL: number;
27
27
  HIDE_MODAL: number;
28
28
  BOOST_BUTTON: number;
29
+ GENERIC: number;
29
30
  };
30
31
  export declare const ANIMATION_TIMINGS: {
31
32
  EXPAND_ROUTE: string;
@@ -33,6 +34,7 @@ export declare const ANIMATION_TIMINGS: {
33
34
  CHANGE_SWAP_STEP: string;
34
35
  SHOW_ROUTE: string;
35
36
  HIDE_ROUTE: string;
37
+ GENERIC: string;
36
38
  };
37
39
  type MediaQuery = "MOBILE_LG" | "MOBILE_SM_HEIGHT" | "MOBILE_XS" | "MOBILE_XS_HEIGHT";
38
40
  export declare const MEDIA_QUERIES: Record<MediaQuery, {
@@ -12,8 +12,10 @@ export declare const boxShadow: {
12
12
  "elevation-dark-3": string;
13
13
  "elevation-light-3": string;
14
14
  "elevation-dark-2": string;
15
- "elevation-light-1": string;
16
15
  "elevation-light-2": string;
16
+ "elevation-dark-1": string;
17
+ "elevation-light-1": string;
17
18
  "inset-royal": string;
19
+ "wallet-card": string;
18
20
  };
19
21
  export declare const baseTailwindConfig: Config;
@@ -1,5 +1,11 @@
1
1
  import { type Theme } from "../../types/config";
2
2
  import { type ThemeType } from "../../types";
3
+ interface RGB {
4
+ r: number;
5
+ g: number;
6
+ b: number;
7
+ a: number;
8
+ }
3
9
  /**
4
10
  * Parses the user readable config to css variables
5
11
  * and adds the material-* variants
@@ -32,4 +38,7 @@ export declare function hexToRgb(hex: string): {
32
38
  export declare function rgbToHex(r: number, g: number, b: number): string;
33
39
  export declare function blendColors(foreground: string, background: string, factor?: number): string | null;
34
40
  export declare const isValidHexColor: (hex: string) => boolean;
41
+ export declare function parseColor(color: string): RGB | null;
35
42
  export declare const getColorBrightness: (color: string) => number;
43
+ export declare const getWalletCardBackground: (colors: string[]) => string | undefined;
44
+ export {};
@@ -1,15 +1,12 @@
1
- import { Meta, StoryObj } from "@storybook/react";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
2
  import { BadgeImage } from "../../components/badges/BadgeImage";
3
3
  declare const meta: Meta<typeof BadgeImage>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof meta>;
6
- export declare const ImageOnly: Story;
7
- export declare const BadgeAndImage: Story;
6
+ export declare const Large: Story;
7
+ export declare const ExtraLarge: Story;
8
+ export declare const ExtraExtraLarge: Story;
9
+ export declare const RoundedFull: Story;
8
10
  export declare const ExtraMarginForBadge: Story;
9
- export declare const Rounded: Story;
10
- export declare const SizeMedium: Story;
11
- export declare const SizeSmall: Story;
12
- export declare const CustomPlaceholderForBrokenImage: Story;
13
- export declare const CustomPlaceholderForLoadingImage: Story;
14
- export declare const CustomPlaceholderForBrokenBadgeImage: Story;
15
- export declare const CustomPlaceholderForLoadingBadgeImage: Story;
11
+ export declare const TokenBadge: Story;
12
+ export declare const PlaceholderForBrokenImage: Story;
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from "@storybook/react";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
2
  import { IconLabel } from "../../components/badges/IconLabel";
3
3
  declare const meta: Meta<typeof IconLabel>;
4
4
  export default meta;
@@ -0,0 +1,16 @@
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
+ import { Image } from "../../components/badges/Image";
3
+ declare const meta: Meta<typeof Image>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Small: Story;
7
+ export declare const Medium: Story;
8
+ export declare const Large: Story;
9
+ export declare const ExtraLarge: Story;
10
+ export declare const ExtraLargeLoading: Story;
11
+ export declare const ExtraExtraLarge: Story;
12
+ export declare const GradientBorder: Story;
13
+ export declare const InsetBorder: Story;
14
+ export declare const OutlineBorder: Story;
15
+ export declare const RoundedFull: Story;
16
+ export declare const CustomContent: Story;
@@ -0,0 +1,8 @@
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
+ import { PriceChange } from "../../components/badges/PriceChange";
3
+ declare const meta: Meta<typeof PriceChange>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Positive: Story;
7
+ export declare const Negative: Story;
8
+ export declare const Neutral: Story;
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from "@storybook/react";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
2
  import { AddressButton } from "../../components/buttons/AddressButton";
3
3
  declare const meta: Meta<typeof AddressButton>;
4
4
  export default meta;
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from "@storybook/react";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
2
  import { Button } from "../../components/buttons/Button";
3
3
  declare const meta: Meta<typeof Button>;
4
4
  export default meta;
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from "@storybook/react";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
2
  import { FilterButton } from "../../components/buttons/FilterButton";
3
3
  declare const meta: Meta<typeof FilterButton>;
4
4
  export default meta;
@@ -0,0 +1,11 @@
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
+ import { WalletCard } from "../../components/cards/WalletCard";
3
+ declare const meta: Meta<typeof WalletCard>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Disconnected: Story;
7
+ export declare const ConnectedEVM: Story;
8
+ export declare const ConnectedSolana: Story;
9
+ export declare const ConnectedCosmos: Story;
10
+ export declare const LightBackground: Story;
11
+ export declare const ConnectedSelected: Story;
@@ -1,4 +1,4 @@
1
- import { Meta, StoryObj } from "@storybook/react";
1
+ import { type Meta, type StoryObj } from "@storybook/react";
2
2
  import { Tooltip } from "../../components/controls/Tooltip";
3
3
  declare const meta: Meta<typeof Tooltip>;
4
4
  export default meta;