@0xsquid/ui 2.2.5 → 2.2.7

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 +14978 -14856
  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 +14960 -14844
  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
package/dist/index.d.ts CHANGED
@@ -8,21 +8,6 @@ import { motion } from 'framer-motion';
8
8
  import { Config } from 'tailwindcss';
9
9
  import { ClassValue } from 'clsx';
10
10
 
11
- interface BadgeImageProps {
12
- imageUrl?: string;
13
- badgeUrl?: string;
14
- size?: BadgeSize;
15
- extraMarginForBadge?: boolean;
16
- rounded?: boolean;
17
- /**
18
- * The URL of the placeholder image. Will be displayed while the images are loading
19
- * or if there's an error loading them.
20
- */
21
- placeholderImageUrl?: string;
22
- }
23
- type BadgeSize = "sm" | "md" | "lg";
24
- declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
25
-
26
11
  type TextSize = "small" | "medium" | "large";
27
12
  type SwitchSize = "small" | "large";
28
13
  type ButtonVariant = "primary" | "secondary" | "tertiary";
@@ -58,28 +43,50 @@ type ActionStatus = "pending" | "waiting" | "ongoing" | "executed" | "success" |
58
43
  type TransactionStateVariant = "full" | "compact" | "small";
59
44
  type TokenPairVariant = "horizontal" | "vertical";
60
45
  type TokenPairSize = "small" | "medium";
61
- type ImageVariant = "square" | "round" | "proportional";
62
- type ImageSize = "small" | "medium" | "large" | "xlarge";
46
+ type ImageSize = "small" | "medium" | "large" | "xlarge" | "xxlarge";
47
+ type ImageRoundedSize = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "full" | "none";
48
+ type ImageBorder = "none" | "gradient" | "inset" | "outline-sm" | "outline-lg";
63
49
  type ChainTypeFilter = "source" | "destination";
64
50
  type StatusFilter = "success" | "ongoing" | "error";
65
51
  type AssetsButtonVariant = "primary" | "accent";
66
52
  type PropertyListItemSize = "small" | "large";
67
-
68
- interface IconLabelProps {
69
- isLoading?: boolean;
70
- src?: string;
71
- children?: ReactNode;
72
- variant?: ImageVariant;
53
+ interface PriceChange$1 {
54
+ value: string;
55
+ sign: "positive" | "negative" | "neutral";
73
56
  }
74
- declare function IconLabel({ src, children, variant }: IconLabelProps): react_jsx_runtime.JSX.Element;
75
57
 
76
- interface ImageProps {
58
+ declare enum ImageState {
59
+ LOADING = 0,
60
+ LOADED = 1,
61
+ ERROR = 2
62
+ }
63
+ interface ImageProps extends React.ComponentProps<"img"> {
77
64
  src?: string;
78
- variant?: ImageVariant;
65
+ children?: React.ReactNode;
79
66
  size?: ImageSize;
80
67
  className?: string;
68
+ placeholderImageUrl?: string;
69
+ border?: ImageBorder;
70
+ rounded?: ImageRoundedSize;
71
+ shadow?: boolean;
72
+ containerProps?: React.ComponentProps<"div">;
73
+ }
74
+ declare function Image({ src, size, className: propsClassName, placeholderImageUrl, border, rounded, shadow, children, containerProps, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
75
+
76
+ interface BadgeImageProps {
77
+ badge?: ImageProps;
78
+ image?: ImageProps;
79
+ extraMarginForBadge?: boolean;
80
+ className?: string;
81
81
  }
82
- declare function Image({ src, variant, size, className: propsClassName, }: ImageProps): react_jsx_runtime.JSX.Element;
82
+ declare function BadgeImage({ image, badge, extraMarginForBadge, className, }: BadgeImageProps): false | react_jsx_runtime.JSX.Element;
83
+
84
+ interface IconLabelProps {
85
+ src?: string;
86
+ children?: ReactNode;
87
+ rounded?: ImageRoundedSize;
88
+ }
89
+ declare function IconLabel({ src, children, rounded }: IconLabelProps): react_jsx_runtime.JSX.Element;
83
90
 
84
91
  declare const LoadingProvider: react.Provider<boolean | null>;
85
92
  interface LoadingSkeletonProps {
@@ -100,6 +107,10 @@ interface LoadingBlockProps extends ComponentProps<"div"> {
100
107
  }
101
108
  declare function BlockSkeleton({ isLoading, className, children, ...props }: LoadingBlockProps): string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
102
109
 
110
+ interface PriceChangeProps extends PriceChange$1 {
111
+ }
112
+ declare function PriceChange({ sign, value }: PriceChangeProps): react_jsx_runtime.JSX.Element;
113
+
103
114
  declare const statusTextClassMap: Record<ActionStatus, string>;
104
115
  interface TransactionStateProps extends React.HTMLAttributes<HTMLDivElement> {
105
116
  status: ActionStatus;
@@ -318,6 +329,10 @@ declare function ChevronArrowIcon({ size, className, }: {
318
329
  declare function ArrowTriangle({ className }: {
319
330
  className?: string;
320
331
  }): react_jsx_runtime.JSX.Element;
332
+ declare function PauseIcon({ size, className, }: {
333
+ size?: string;
334
+ className?: string;
335
+ }): react_jsx_runtime.JSX.Element;
321
336
  declare function ChevronTopSmallIcon(): react_jsx_runtime.JSX.Element;
322
337
  declare function ChevronLargeDownIcon({ size, className, }: {
323
338
  size?: string;
@@ -389,7 +404,8 @@ declare function ArrowSplit({ size, className, }: {
389
404
 
390
405
  declare function ArrowRotate(): react_jsx_runtime.JSX.Element;
391
406
 
392
- declare function PunkIcon({ size }: {
407
+ declare function PunkIcon({ className, size, }: {
408
+ className?: string;
393
409
  size?: string;
394
410
  }): react_jsx_runtime.JSX.Element;
395
411
 
@@ -723,7 +739,10 @@ declare function PathSquareIcon({ size, className, }: {
723
739
 
724
740
  declare function PieChartIcon(): react_jsx_runtime.JSX.Element;
725
741
 
726
- declare function PlusIcon(): react_jsx_runtime.JSX.Element;
742
+ declare function PlusIcon({ className, size, }: {
743
+ className?: string;
744
+ size?: string;
745
+ }): react_jsx_runtime.JSX.Element;
727
746
 
728
747
  declare function RefreshIcon(): react_jsx_runtime.JSX.Element;
729
748
 
@@ -762,6 +781,10 @@ declare function SquidLogo({ size, className, }: {
762
781
  size?: string;
763
782
  className?: string;
764
783
  }): react_jsx_runtime.JSX.Element;
784
+ declare function SquidVector({ size, className, }: {
785
+ size?: string;
786
+ className?: string;
787
+ }): react_jsx_runtime.JSX.Element;
765
788
 
766
789
  declare function SwapInputsIcon(): react_jsx_runtime.JSX.Element;
767
790
  declare function SwapIcon({ size, className, }: {
@@ -838,15 +861,23 @@ interface Props extends React.ComponentProps<typeof Player> {
838
861
  }
839
862
  declare const AnimationWrapper: (playerProps: Props) => react_jsx_runtime.JSX.Element;
840
863
 
864
+ interface AnnouncementProps {
865
+ message: string;
866
+ mainIcon?: React.ReactNode;
867
+ detail?: React.ReactNode;
868
+ link?: string;
869
+ }
870
+ declare function Announcement({ message, detail, mainIcon, link, }: AnnouncementProps): react_jsx_runtime.JSX.Element;
871
+
841
872
  interface AppContainerProps extends ComponentProps<typeof motion.div> {
842
873
  layoutKey?: string;
843
874
  }
844
875
  declare function AppContainer({ children, className, layoutKey, ...props }: AppContainerProps): react_jsx_runtime.JSX.Element;
845
876
  declare namespace AppContainer {
846
877
  var Nav: ({ className, children, ...props }: {
878
+ color?: string | undefined;
847
879
  slot?: string | undefined;
848
880
  title?: string | undefined;
849
- color?: string | undefined;
850
881
  hidden?: boolean | undefined;
851
882
  suppressHydrationWarning?: boolean | undefined;
852
883
  className?: string | undefined;
@@ -856,7 +887,7 @@ declare namespace AppContainer {
856
887
  tabIndex?: number | undefined;
857
888
  "aria-activedescendant"?: string | undefined;
858
889
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
859
- "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
890
+ "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
860
891
  "aria-braillelabel"?: string | undefined;
861
892
  "aria-brailleroledescription"?: string | undefined;
862
893
  "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -871,7 +902,7 @@ declare namespace AppContainer {
871
902
  "aria-description"?: string | undefined;
872
903
  "aria-details"?: string | undefined;
873
904
  "aria-disabled"?: (boolean | "true" | "false") | undefined;
874
- "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
905
+ "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
875
906
  "aria-errormessage"?: string | undefined;
876
907
  "aria-expanded"?: (boolean | "true" | "false") | undefined;
877
908
  "aria-flowto"?: string | undefined;
@@ -942,7 +973,7 @@ declare namespace AppContainer {
942
973
  results?: number | undefined;
943
974
  security?: string | undefined;
944
975
  unselectable?: "off" | "on" | undefined;
945
- inputMode?: "search" | "text" | "numeric" | "none" | "email" | "tel" | "url" | "decimal" | undefined;
976
+ inputMode?: "none" | "search" | "text" | "numeric" | "email" | "tel" | "url" | "decimal" | undefined;
946
977
  is?: string | undefined;
947
978
  dangerouslySetInnerHTML?: {
948
979
  __html: string | TrustedHTML;
@@ -1105,9 +1136,9 @@ declare namespace AppContainer {
1105
1136
  onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
1106
1137
  } & framer_motion.MotionProps & react.RefAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
1107
1138
  var Content: (props: {
1139
+ color?: string | undefined;
1108
1140
  slot?: string | undefined;
1109
1141
  title?: string | undefined;
1110
- color?: string | undefined;
1111
1142
  hidden?: boolean | undefined;
1112
1143
  suppressHydrationWarning?: boolean | undefined;
1113
1144
  className?: string | undefined;
@@ -1117,7 +1148,7 @@ declare namespace AppContainer {
1117
1148
  tabIndex?: number | undefined;
1118
1149
  "aria-activedescendant"?: string | undefined;
1119
1150
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
1120
- "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
1151
+ "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
1121
1152
  "aria-braillelabel"?: string | undefined;
1122
1153
  "aria-brailleroledescription"?: string | undefined;
1123
1154
  "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -1132,7 +1163,7 @@ declare namespace AppContainer {
1132
1163
  "aria-description"?: string | undefined;
1133
1164
  "aria-details"?: string | undefined;
1134
1165
  "aria-disabled"?: (boolean | "true" | "false") | undefined;
1135
- "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
1166
+ "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
1136
1167
  "aria-errormessage"?: string | undefined;
1137
1168
  "aria-expanded"?: (boolean | "true" | "false") | undefined;
1138
1169
  "aria-flowto"?: string | undefined;
@@ -1203,7 +1234,7 @@ declare namespace AppContainer {
1203
1234
  results?: number | undefined;
1204
1235
  security?: string | undefined;
1205
1236
  unselectable?: "off" | "on" | undefined;
1206
- inputMode?: "search" | "text" | "numeric" | "none" | "email" | "tel" | "url" | "decimal" | undefined;
1237
+ inputMode?: "none" | "search" | "text" | "numeric" | "email" | "tel" | "url" | "decimal" | undefined;
1207
1238
  is?: string | undefined;
1208
1239
  dangerouslySetInnerHTML?: {
1209
1240
  __html: string | TrustedHTML;
@@ -1387,8 +1418,9 @@ interface CollapseProps extends ComponentProps<"div"> {
1387
1418
  collapsed: boolean;
1388
1419
  collapsedHeight?: number;
1389
1420
  duration?: number;
1421
+ contentsClassName?: string;
1390
1422
  }
1391
- declare function Collapse({ collapsed, collapsedHeight, children, className, duration, ...props }: CollapseProps): react_jsx_runtime.JSX.Element;
1423
+ declare function Collapse({ collapsed, collapsedHeight, children, className, duration, contentsClassName, ...props }: CollapseProps): react_jsx_runtime.JSX.Element;
1392
1424
  interface SizeTransitionProps extends ComponentProps<"div"> {
1393
1425
  }
1394
1426
  declare function SizeTransition({ children, className, ...props }: SizeTransitionProps): react_jsx_runtime.JSX.Element;
@@ -1700,10 +1732,10 @@ interface TransactionFiltersProps {
1700
1732
  setToDate: (toDate?: Date) => void;
1701
1733
  status?: StatusFilter[];
1702
1734
  setStatus: (status?: StatusFilter[]) => void;
1703
- chains: {
1735
+ chains: Array<{
1704
1736
  name: string;
1705
1737
  logoURI: string;
1706
- }[];
1738
+ }>;
1707
1739
  }
1708
1740
  declare function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status, setStatus, chains, }: TransactionFiltersProps): react_jsx_runtime.JSX.Element;
1709
1741
 
@@ -1937,7 +1969,7 @@ type DeepPartial<T> = {
1937
1969
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
1938
1970
  };
1939
1971
 
1940
- declare const THEME_COLOR_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-700", "highlight-700", "status-positive", "status-negative", "status-partial", "button-lg-primary-bg", "button-lg-primary-text", "button-lg-secondary-bg", "button-lg-secondary-text", "button-lg-tertiary-bg", "button-lg-tertiary-text", "button-md-primary-bg", "button-md-primary-text", "button-md-secondary-bg", "button-md-secondary-text", "button-md-tertiary-bg", "button-md-tertiary-text", "input-placeholder", "input-text", "input-selection", "input-bg", "animation-bg", "animation-text", "modal-backdrop", "menu-bg", "menu-text", "menu-backdrop", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900", "material-light-blend-grey-800"];
1972
+ declare const THEME_COLOR_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-600", "royal-700", "highlight-700", "status-positive", "status-negative", "status-partial", "button-lg-primary-bg", "button-lg-primary-text", "button-lg-secondary-bg", "button-lg-secondary-text", "button-lg-tertiary-bg", "button-lg-tertiary-text", "button-md-primary-bg", "button-md-primary-text", "button-md-secondary-bg", "button-md-secondary-text", "button-md-tertiary-bg", "button-md-tertiary-text", "input-placeholder", "input-text", "input-selection", "input-bg", "animation-bg", "animation-text", "modal-backdrop", "menu-bg", "menu-text", "menu-backdrop", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900", "material-light-blend-grey-800"];
1941
1973
  declare const THEME_BORDER_RADIUS_KEYS: readonly ["button-lg-primary", "button-lg-secondary", "button-lg-tertiary", "button-md-primary", "button-md-secondary", "button-md-tertiary", "container", "input", "menu-sm", "menu-lg", "modal"];
1942
1974
  declare const THEME_FONT_SIZE_KEYS: readonly ["caption", "body-large", "body-medium", "body-small", "heading-small", "heading-medium", "heading-large"];
1943
1975
  declare const THEME_FONT_WEIGHT_KEYS: readonly ["caption", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large"];
@@ -2039,7 +2071,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
2039
2071
  className?: string;
2040
2072
  onDetailClick?: () => void;
2041
2073
  showDetailOnHoverOnly?: boolean;
2042
- rounded?: boolean;
2074
+ rounded?: ImageRoundedSize;
2043
2075
  detailButtonClassName?: string;
2044
2076
  loading?: {
2045
2077
  subtitle?: boolean | string;
@@ -2419,10 +2451,10 @@ declare function TransactionAction({ type, props }: TransactionActionProps): rea
2419
2451
  declare function linkActionTimelineProps(actions: TransactionActionProps[], collapsed: boolean): TransactionActionProps[];
2420
2452
 
2421
2453
  type TransactionItemVariant = "compact" | "full";
2422
- type TransactionItemType = {
2454
+ interface TransactionItemType {
2423
2455
  icon?: ReactNode;
2424
2456
  name: string;
2425
- };
2457
+ }
2426
2458
  interface TransactionItemProps {
2427
2459
  className?: string;
2428
2460
  isLoading?: boolean;
@@ -2472,12 +2504,13 @@ declare function BodyText({ size, children, bold, tight, loading, ...props }: Bo
2472
2504
  interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
2473
2505
  children: ReactNode;
2474
2506
  bold?: boolean;
2507
+ tight?: boolean;
2475
2508
  loading?: {
2476
2509
  isLoading?: boolean;
2477
2510
  width?: string;
2478
2511
  };
2479
2512
  }
2480
- declare function CaptionText({ children, bold, loading, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;
2513
+ declare function CaptionText({ children, bold, loading, tight, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;
2481
2514
 
2482
2515
  interface HeadingTextProps {
2483
2516
  children?: ReactNode;
@@ -2830,6 +2863,12 @@ declare const baseTailwindConfig: Config;
2830
2863
  */
2831
2864
  declare const cn: (...inputs: ClassValue[]) => string;
2832
2865
 
2866
+ interface RGB {
2867
+ r: number;
2868
+ g: number;
2869
+ b: number;
2870
+ a: number;
2871
+ }
2833
2872
  /**
2834
2873
  * Parses the user readable config to css variables
2835
2874
  * and adds the material-* variants
@@ -2862,7 +2901,9 @@ declare function hexToRgb(hex: string): {
2862
2901
  declare function rgbToHex(r: number, g: number, b: number): string;
2863
2902
  declare function blendColors(foreground: string, background: string, factor?: number): string | null;
2864
2903
  declare const isValidHexColor: (hex: string) => boolean;
2904
+ declare function parseColor(color: string): RGB | null;
2865
2905
  declare const getColorBrightness: (color: string) => number;
2906
+ declare const getWalletCardBackground: (colors: string[]) => string | undefined;
2866
2907
 
2867
2908
  declare const transactionPendingAnimation: {
2868
2909
  v: string;
@@ -16835,4 +16876,4 @@ declare const transactionRejectedAnimation: {
16835
16876
  markers: never[];
16836
16877
  };
16837
16878
 
16838
- export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, 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, 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, IconLabel, Image, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type PublicTheme, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, 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, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, 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, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
16879
+ export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, 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, 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, IconLabel, Image, ImageIcon, type ImageProps, ImageSparkle, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type PublicTheme, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, 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, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, 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, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, 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.2.5",
8
+ "version": "2.2.7",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {
@@ -53,7 +53,7 @@
53
53
  "homepage": "https://github.com/0xsquid/squid-ui#readme",
54
54
  "devDependencies": {
55
55
  "@chromatic-com/storybook": "^1.2.22",
56
- "@release-it/conventional-changelog": "github:release-it/conventional-changelog",
56
+ "@release-it/conventional-changelog": "8.0.2-next.0",
57
57
  "@rollup/plugin-commonjs": "^25.0.7",
58
58
  "@rollup/plugin-json": "6.1.0",
59
59
  "@rollup/plugin-node-resolve": "^15.2.3",
@@ -1,7 +0,0 @@
1
- import { Meta, 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 Square: Story;
7
- export declare const Round: Story;
@@ -1,7 +0,0 @@
1
- import { Meta, 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 Square: Story;
7
- export declare const Round: Story;