myshell-react-lib 0.1.5 → 0.1.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 (145) hide show
  1. package/dist/index.cjs +50 -2
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +6 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -2
  6. package/src/common/assets/audio-playing.json +0 -3657
  7. package/src/common/constants/constants.ts +0 -24
  8. package/src/common/constants/types/common.ts +0 -10
  9. package/src/common/hooks/useAudioPlayer.tsx +0 -198
  10. package/src/common/hooks/useDevice.ts +0 -26
  11. package/src/common/hooks/useNativeBridge.ts +0 -42
  12. package/src/common/hooks/useNotification.tsx +0 -179
  13. package/src/common/hooks/useWindowWidth.ts +0 -19
  14. package/src/common/utils/common-helper.ts +0 -81
  15. package/src/components/ItemDemo.tsx +0 -15
  16. package/src/components/accordion.tsx +0 -126
  17. package/src/components/alert-dialog.tsx +0 -148
  18. package/src/components/alert.tsx +0 -65
  19. package/src/components/aspect-ratio.tsx +0 -7
  20. package/src/components/audio-player.tsx +0 -60
  21. package/src/components/audio-playing.tsx +0 -33
  22. package/src/components/avatar.tsx +0 -133
  23. package/src/components/badge.tsx +0 -67
  24. package/src/components/button/button.styles.ts +0 -258
  25. package/src/components/button/button.tsx +0 -215
  26. package/src/components/button/icon-button.styles.ts +0 -103
  27. package/src/components/button/icon-button.tsx +0 -100
  28. package/src/components/button/index.tsx +0 -3
  29. package/src/components/button/link-button.tsx +0 -184
  30. package/src/components/cascader.tsx +0 -175
  31. package/src/components/checkbox.tsx +0 -135
  32. package/src/components/command.tsx +0 -155
  33. package/src/components/context-menu.tsx +0 -198
  34. package/src/components/count-down.tsx +0 -83
  35. package/src/components/custom-notification.tsx +0 -95
  36. package/src/components/dialog.tsx +0 -158
  37. package/src/components/drawer.tsx +0 -116
  38. package/src/components/dropdown-menu.tsx +0 -196
  39. package/src/components/energy-progress.tsx +0 -55
  40. package/src/components/form.tsx +0 -201
  41. package/src/components/group.tsx +0 -9
  42. package/src/components/guide.tsx +0 -243
  43. package/src/components/icon.tsx +0 -96
  44. package/src/components/icons/index.tsx +0 -13
  45. package/src/components/icons/outline/ArrowLeftIcon.tsx +0 -28
  46. package/src/components/icons/outline/ArrowUpTrayIcon.tsx +0 -28
  47. package/src/components/icons/outline/CheckCircleIcon.tsx +0 -27
  48. package/src/components/icons/outline/ConfigIcon.tsx +0 -42
  49. package/src/components/icons/outline/DownIcon.tsx +0 -18
  50. package/src/components/icons/outline/FilterIcon.tsx +0 -20
  51. package/src/components/icons/outline/PencilSquareIcon.tsx +0 -28
  52. package/src/components/icons/outline/WindowIcon.tsx +0 -26
  53. package/src/components/icons/solid/CaretDownIcon.tsx +0 -22
  54. package/src/components/icons/solid/CodeIcon.tsx +0 -25
  55. package/src/components/icons/solid/DragIcon.tsx +0 -24
  56. package/src/components/icons/solid/PhoneIcon.tsx +0 -29
  57. package/src/components/icons/solid/RectangleGroupIcon.tsx +0 -26
  58. package/src/components/image.tsx +0 -152
  59. package/src/components/input.tsx +0 -118
  60. package/src/components/label.tsx +0 -26
  61. package/src/components/link.tsx +0 -123
  62. package/src/components/marquee/index.css +0 -15
  63. package/src/components/marquee/marquee.tsx +0 -220
  64. package/src/components/masonry.tsx +0 -138
  65. package/src/components/menubar.tsx +0 -234
  66. package/src/components/mobile/m-tooltip.tsx +0 -34
  67. package/src/components/modal.tsx +0 -561
  68. package/src/components/navigation-bar.tsx +0 -100
  69. package/src/components/number-input.tsx +0 -143
  70. package/src/components/page-content.tsx +0 -16
  71. package/src/components/popover.tsx +0 -191
  72. package/src/components/progress.tsx +0 -80
  73. package/src/components/radio-group.tsx +0 -44
  74. package/src/components/scroll-area.tsx +0 -49
  75. package/src/components/search-bar.tsx +0 -140
  76. package/src/components/secondary-navigation-bar.tsx +0 -328
  77. package/src/components/select.tsx +0 -273
  78. package/src/components/separator.tsx +0 -31
  79. package/src/components/sheet.tsx +0 -143
  80. package/src/components/skeleton.tsx +0 -20
  81. package/src/components/slider.tsx +0 -160
  82. package/src/components/spinner.tsx +0 -50
  83. package/src/components/swiper/index.module.scss +0 -88
  84. package/src/components/swiper/index.tsx +0 -319
  85. package/src/components/switch.tsx +0 -67
  86. package/src/components/tabs.tsx +0 -325
  87. package/src/components/textarea.tsx +0 -71
  88. package/src/components/toast/toast.tsx +0 -182
  89. package/src/components/toast/toaster.tsx +0 -160
  90. package/src/components/toast/use-toast.tsx +0 -248
  91. package/src/components/toggle-group.tsx +0 -64
  92. package/src/components/toggle.tsx +0 -46
  93. package/src/components/tooltip.tsx +0 -283
  94. package/src/components/typography.tsx +0 -437
  95. package/src/index.ts +0 -70
  96. package/src/lib/utils.ts +0 -62
  97. package/src/stories/Accordion.stories.tsx +0 -64
  98. package/src/stories/AccordionItem.stories.tsx +0 -48
  99. package/src/stories/Avatar.stories.ts +0 -58
  100. package/src/stories/Badge.stories.tsx +0 -40
  101. package/src/stories/BannerSwiper.stories.tsx +0 -102
  102. package/src/stories/Button.stories.tsx +0 -543
  103. package/src/stories/Checkbox.stories.tsx +0 -161
  104. package/src/stories/Configure.mdx +0 -341
  105. package/src/stories/CssProperties.mdx +0 -30
  106. package/src/stories/Description.stories.ts +0 -70
  107. package/src/stories/Display.stories.ts +0 -64
  108. package/src/stories/FeaturedSwiper.stories.tsx +0 -6978
  109. package/src/stories/GridSwiper.stories.tsx +0 -1407
  110. package/src/stories/Guide.stories.tsx +0 -247
  111. package/src/stories/Heading.stories.ts +0 -89
  112. package/src/stories/Icon.stories.ts +0 -77
  113. package/src/stories/IconButton.stories.tsx +0 -301
  114. package/src/stories/IconTextButton.stories.ts +0 -59
  115. package/src/stories/Image.stories.ts +0 -55
  116. package/src/stories/Input.stories.tsx +0 -203
  117. package/src/stories/Modal.stories.tsx +0 -144
  118. package/src/stories/NavigationBar.stories.tsx +0 -81
  119. package/src/stories/Notification.stories.tsx +0 -276
  120. package/src/stories/Popover.stories.tsx +0 -100
  121. package/src/stories/SearchBar.stories.ts +0 -43
  122. package/src/stories/SecondaryNavigationBar.stories.tsx +0 -199
  123. package/src/stories/Select.stories.tsx +0 -107
  124. package/src/stories/Separator.stories.tsx +0 -49
  125. package/src/stories/Spinner.stories.tsx +0 -48
  126. package/src/stories/SubHeading.stories.ts +0 -64
  127. package/src/stories/Swich.stories.tsx +0 -69
  128. package/src/stories/Tabs.stories.tsx +0 -90
  129. package/src/stories/Text.stories.ts +0 -78
  130. package/src/stories/Textarea.stories.tsx +0 -155
  131. package/src/stories/Toast.stories.tsx +0 -424
  132. package/src/stories/Tooltip.stories.tsx +0 -244
  133. package/src/stories/ViewAutoSwiper.stories.tsx +0 -1408
  134. package/src/styles/components-dark.scss +0 -212
  135. package/src/styles/components-light.scss +0 -210
  136. package/src/styles/design-dark.scss +0 -330
  137. package/src/styles/design-light.scss +0 -345
  138. package/src/styles/design2-dark.scss +0 -319
  139. package/src/styles/design2-light.scss +0 -364
  140. package/src/styles/font.css +0 -19
  141. package/src/styles/global.scss +0 -251
  142. package/src/styles/md-viewer.scss +0 -155
  143. package/src/styles/new-tokens.scss +0 -255
  144. package/src/styles/tokens.scss +0 -401
  145. package/src/types/scss.d.ts +0 -24
@@ -1,258 +0,0 @@
1
- import { cva } from 'class-variance-authority';
2
-
3
- // 基础样式常量
4
- const BASE_BUTTON =
5
- 'relative shrink-0 inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:secondary-none focus-visible:shadow-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-30 disabled:shadow-none [&>span>svg]:text-inherit [&>span>span>svg]:text-inherit';
6
-
7
- // 尺寸相关常量
8
- const SIZE_CLASSES = {
9
- lg: {
10
- base: 'h-11',
11
- withPadding: 'h-11 min-w-11 px-6',
12
- text: 'text-base',
13
- iconSize: 'w-5 h-5',
14
- },
15
- md: {
16
- base: 'h-9',
17
- withPadding: 'h-9 min-w-9 px-4 text-sm',
18
- text: 'text-sm',
19
- iconSize: 'w-4.5 h-4.5',
20
- },
21
- sm: {
22
- base: 'h-7',
23
- withPadding: 'h-7 min-w-7 px-3 text-sm',
24
- text: 'text-xs',
25
- iconSize: 'w-4 h-4',
26
- },
27
- };
28
-
29
- // 颜色主题
30
- const COLOR_THEMES = {
31
- default: {
32
- primary:
33
- 'bg-cc-Button-Primary-bg-default text-cc-Button-Primary-fg-default hover:bg-cc-Button-Primary-bg-hover active:bg-cc-Button-Primary-bg-active disabled:bg-cc-Button-Primary-bg-disabled',
34
- secondary:
35
- 'border-cc-Button-Secondary-border-default text-cc-Button-Secondary-fg-default bg-cc-Button-Secondary-bg-default hover:bg-cc-Button-Secondary-bg-hover active:bg-cc-Button-Secondary-bg-active disabled:text-cc-Button-Secondary-fg-alt disabled:border-cc-Button-Secondary-border-disabled',
36
- tertiary:
37
- 'border border-cc-Button-Tertiary-border-default text-cc-Button-Tertiary-fg-default bg-cc-Button-Tertiary-bg-default hover:bg-cc-Button-Tertiary-bg-hover hover:border-cc-Button-Tertiary-border-alt focus:shadow-button-tertiary-shadow active:bg-cc-Button-Tertiary-bg-active disabled:text-cc-Button-Tertiary-fg-alt ',
38
- link: 'rounded-none font-normal underline-offset-4 hover:underline active:underline text-cc-Link-Button-Primary-fg-default hover:text-cc-Link-Button-Primary-fg-hover active:text-cc-Link-Button-Primary-fg-active disabled:text-cc-Link-Button-Primary-fg-disabled',
39
- plain:
40
- 'text-cc-Button-Plain-fg-default hover:bg-cc-Button-Plain-bg-hover focus:shadow-cc-Focus-Rings-Brand-default active:bg-cc-Button-Plain-bg-active disabled:text-cc-Button-Plain-fg-alt ',
41
- },
42
- brand: {
43
- primary:
44
- 'text-cc-Button-Brand-fg-default bg-cc-Button-Brand-bg-default hover:bg-cc-Button-Brand-bg-hover active:bg-cc-Button-Brand-bg-active disabled:bg-cc-Button-Brand-bg-disabled shadow-none hover:shadow-button-brand focus:shadow-cc-Focus-Rings-Brand-default',
45
- plain:
46
- 'text-cc-Button-Plain-Brand-fg-default bg-cc-Button-Plain-Brand-bg-default hover:bg-cc-Button-Plain-Brand-bg-hover active:bg-cc-Button-Plain-Brand-bg-active disabled:text-cc-Button-Plain-Brand-fg-alt',
47
- },
48
- error: {
49
- primary:
50
- 'text-cc-Button-Error-Primary-fg-default bg-cc-Button-Error-Primary-bg-default hover:bg-cc-Button-Error-Primary-bg-hover active:bg-cc-Button-Error-Primary-bg-active disabled:bg-cc-Button-Error-Primary-bg-disabled shadow-none',
51
-
52
- secondary:
53
- 'border-cc-Button-Error-Secondary-border-default text-cc-Button-Error-Secondary-fg-default bg-cc-Button-Error-Secondary-bg-default hover:bg-cc-Button-Error-Secondary-bg-hover active:bg-cc-Button-Error-Secondary-bg-active disabled:text-cc-Button-Error-Secondary-fg-alt disabled:border-cc-Button-Error-Secondary-border-disabled',
54
- },
55
- chat: {
56
- primary:
57
- 'shadow-none text-Colors-Text-Subtle bg-Colors-Background-Normal-Secondary-Default border border-Colors-Border-Default hover:bg-Colors-Background-Neutral-Primary-Hover active:bg-surface-accent-gray-subtler active:shadow-button-pressed disabled:bg-Colors-Background-Normal-Secondary-Default disabled:text-Colors-Text-Disabled disabled:opacity-100',
58
- },
59
- };
60
-
61
- // 变体基础样式
62
- const VARIANT_BASE = {
63
- primary: '',
64
- secondary: 'border shadow-none',
65
- tertiary: '',
66
- static:
67
- 'text-cc-Button-Static-fg-default border-cc-Button-Static-border-default bg-cc-Button-Static-bg-default hover:bg-cc-Button-Static-bg-hover active:bg-cc-Button-Static-bg-active disabled:bg-cc-Button-Static-bg-disabled disabled:text-cc-Button-Static-fg-alt',
68
- link: '',
69
- plain: '',
70
- opacity:
71
- 'text-Colors-Text-Static-White bg-Colors-Beta-White-30 border border-Colors-Beta-White-12 shadow-none hover:bg-Colors-Beta-White-40 focus:shadow-cc-Focus-Rings-Brand-default active:bg-Colors-Beta-White-50 disabled:bg-Colors-Beta-White-60 disabled:text-Colors-Beta-White-80',
72
- solid:
73
- 'shadow-none text-Colors-Text-Subtle bg-cc-Button-Solid-bg-default border border-cc-Button-Solid-border-default hover:bg-cc-Button-Solid-bg-hover hover:border-cc-Button-Solid-border-alt active:bg-cc-Button-Solid-bg-active disabled:text-cc-Button-Solid-fg-alt',
74
- };
75
-
76
- // 特殊布局变体
77
- const SPECIAL_LAYOUTS = {
78
- link: 'h-fit w-fit min-w-auto px-0.5 py-0.5',
79
- plain: 'h-fit w-fit min-w-auto px-0.5 py-0.5',
80
- };
81
-
82
- // 主按钮样式
83
- export const buttonVariants = cva(BASE_BUTTON, {
84
- variants: {
85
- variant: VARIANT_BASE,
86
- color: {
87
- default: '',
88
- brand: '',
89
- error: '',
90
- gray: '',
91
- chat: '',
92
- },
93
- size: {
94
- lg: 'h-11',
95
- md: 'h-9',
96
- sm: 'h-7',
97
- },
98
- },
99
- compoundVariants: [
100
- // 尺寸相关变体
101
- { variant: 'primary', size: 'lg', className: SIZE_CLASSES.lg.withPadding },
102
- { variant: 'primary', size: 'md', className: SIZE_CLASSES.md.withPadding },
103
- { variant: 'primary', size: 'sm', className: SIZE_CLASSES.sm.withPadding },
104
- {
105
- variant: 'secondary',
106
- size: 'lg',
107
- className: SIZE_CLASSES.lg.withPadding,
108
- },
109
- {
110
- variant: 'secondary',
111
- size: 'md',
112
- className: SIZE_CLASSES.md.withPadding,
113
- },
114
- {
115
- variant: 'secondary',
116
- size: 'sm',
117
- className: SIZE_CLASSES.sm.withPadding,
118
- },
119
- { variant: 'tertiary', size: 'lg', className: SIZE_CLASSES.lg.withPadding },
120
- { variant: 'tertiary', size: 'md', className: SIZE_CLASSES.md.withPadding },
121
- { variant: 'tertiary', size: 'sm', className: SIZE_CLASSES.sm.withPadding },
122
- { variant: 'static', size: 'lg', className: SIZE_CLASSES.lg.withPadding },
123
- { variant: 'static', size: 'md', className: SIZE_CLASSES.md.withPadding },
124
- { variant: 'static', size: 'sm', className: SIZE_CLASSES.sm.withPadding },
125
-
126
- // 颜色主题变体
127
- {
128
- variant: 'primary',
129
- color: 'default',
130
- className: COLOR_THEMES.default.primary,
131
- },
132
- {
133
- variant: 'primary',
134
- color: 'brand',
135
- className: COLOR_THEMES.brand.primary,
136
- },
137
- {
138
- variant: 'primary',
139
- color: 'error',
140
- className: COLOR_THEMES.error.primary,
141
- },
142
- { variant: 'primary', color: 'chat', className: COLOR_THEMES.chat.primary },
143
- {
144
- variant: 'tertiary',
145
- color: 'default',
146
- className: COLOR_THEMES.default.tertiary,
147
- },
148
- {
149
- variant: 'secondary',
150
- color: 'default',
151
- className: COLOR_THEMES.default.secondary,
152
- },
153
- {
154
- variant: 'secondary',
155
- color: 'error',
156
- className: COLOR_THEMES.error.secondary,
157
- },
158
-
159
- // 特殊布局变体
160
- { variant: 'link', className: SPECIAL_LAYOUTS.link },
161
- { variant: 'plain', className: SPECIAL_LAYOUTS.plain },
162
-
163
- // Link变体的颜色
164
- { variant: 'link', color: 'default', className: COLOR_THEMES.default.link },
165
-
166
- // Plain变体的颜色
167
- {
168
- variant: 'plain',
169
- color: 'default',
170
- className: COLOR_THEMES.default.plain,
171
- },
172
- { variant: 'plain', color: 'brand', className: COLOR_THEMES.brand.plain },
173
-
174
- // Link尺寸
175
- {
176
- variant: 'link',
177
- size: 'lg',
178
- className: 'h-fit w-fit px-0.5 py-0.5 text-base',
179
- },
180
- {
181
- variant: 'link',
182
- size: 'md',
183
- className: 'h-fit w-fit px-0.5 py-0.5 text-sm',
184
- },
185
- {
186
- variant: 'link',
187
- size: 'sm',
188
- className: 'h-fit w-fit px-0.5 py-0.5 text-xs',
189
- },
190
-
191
- // Plain尺寸
192
- {
193
- variant: 'plain',
194
- size: 'lg',
195
- className: 'h-fit w-fit px-0.5 py-0.5 text-base',
196
- },
197
- {
198
- variant: 'plain',
199
- size: 'md',
200
- className: 'h-fit w-fit px-0.5 py-0.5 text-sm',
201
- },
202
- {
203
- variant: 'plain',
204
- size: 'sm',
205
- className: 'h-fit w-fit px-0.5 py-0.5 text-xs',
206
- },
207
- ],
208
- defaultVariants: {
209
- variant: 'primary',
210
- color: 'default',
211
- size: 'lg',
212
- },
213
- });
214
-
215
- // 图标样式
216
- export const iconVariants = cva(
217
- 'relative shrink-0 text-inherit inline-flex items-center justify-center whitespace-nowrap transition-colors ring-offset-cc-Focus-Rings-Brand-default',
218
- {
219
- variants: {
220
- variant: {
221
- primary: '',
222
- secondary: '',
223
- tertiary: '',
224
- link: 'font-normal',
225
- plain: 'font-medium',
226
- static: '',
227
- solid: '',
228
- opacity: '',
229
- },
230
- size: {
231
- lg: 'text-base w-5 h-5',
232
- md: 'text-sm w-4.5 h-4.5',
233
- sm: 'text-sm w-4 h-4',
234
- },
235
- },
236
- compoundVariants: [
237
- {
238
- variant: 'plain',
239
- size: 'lg',
240
- className: 'text-base w-4.5 h-4.5',
241
- },
242
- {
243
- variant: 'plain',
244
- size: 'md',
245
- className: 'text-sm w-4 h-4',
246
- },
247
- {
248
- variant: 'plain',
249
- size: 'sm',
250
- className: 'text-sm',
251
- },
252
- ],
253
- defaultVariants: {
254
- variant: 'primary',
255
- size: 'lg',
256
- },
257
- }
258
- );
@@ -1,215 +0,0 @@
1
- /* eslint-disable react/require-default-props */
2
- import { Slot } from '@radix-ui/react-slot';
3
- import { type VariantProps } from 'class-variance-authority';
4
- import { Loader2 } from 'lucide-react';
5
- import * as React from 'react';
6
-
7
- import { getAssetsUrl } from '../../common/utils/common-helper';
8
- import { cn } from '@/lib/utils';
9
-
10
- import { Icon } from '../icon';
11
- import { Image } from '../image';
12
- import { Separator } from '../separator';
13
- import { Text } from '../typography';
14
- import { buttonVariants, iconVariants } from './button.styles';
15
-
16
- export interface ButtonProps
17
- extends React.ButtonHTMLAttributes<HTMLButtonElement>,
18
- VariantProps<typeof buttonVariants> {
19
- asChild?: boolean;
20
- loading?: boolean;
21
- icon?: React.ElementType;
22
- iconDirection?: 'left' | 'right';
23
- color?: 'default' | 'brand' | 'error' | 'chat';
24
- noStyle?: boolean;
25
- iconClassName?: string;
26
- iconOutBox?: boolean;
27
- isBlock?: boolean;
28
- asset?: 'energy' | 'coin';
29
- assetNumber?: number;
30
- }
31
-
32
- const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
33
- (
34
- {
35
- className = '',
36
- iconClassName,
37
- variant = 'primary',
38
- color = 'default',
39
- icon,
40
- iconDirection = 'left',
41
- size,
42
- asChild = false,
43
- loading = false,
44
- noStyle = false,
45
- iconOutBox = false,
46
- isBlock = false,
47
- disabled,
48
- children,
49
- autoFocus,
50
- asset,
51
- assetNumber = 0,
52
- ...props
53
- },
54
- ref
55
- ) => {
56
- const Comp = asChild ? Slot : 'button';
57
- const disable = disabled || loading;
58
-
59
- return (
60
- <Comp
61
- className={
62
- noStyle
63
- ? className
64
- : cn(
65
- buttonVariants({ variant, color, size, className }),
66
- disable && '!pointer-events-auto cursor-not-allowed',
67
- isBlock && 'w-full'
68
- )
69
- }
70
- ref={ref}
71
- disabled={disable}
72
- autoFocus={autoFocus}
73
- {...props}
74
- >
75
- {loading && (
76
- <span className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
77
- <Loader2
78
- className={cn(
79
- iconVariants({ variant, size }),
80
- 'animate-spin',
81
- size === 'lg'
82
- ? 'h-6 w-6'
83
- : size === 'md'
84
- ? 'h-5 w-5'
85
- : 'h-4.5 w-4.5'
86
- )}
87
- />
88
- </span>
89
- )}
90
- {!asset &&
91
- icon &&
92
- iconOutBox &&
93
- iconDirection === 'left' &&
94
- renderIcon(icon, 'left', {
95
- loading,
96
- noStyle,
97
- iconClassName,
98
- variant,
99
- color,
100
- size,
101
- })}
102
- <span
103
- className={cn(
104
- 'inline-flex w-full items-center justify-center',
105
- loading ? 'opacity-0' : 'opacity-100',
106
- variant === 'plain' && 'font-medium'
107
- )}
108
- >
109
- {!asset &&
110
- icon &&
111
- !iconOutBox &&
112
- iconDirection === 'left' &&
113
- renderIcon(icon, 'left', {
114
- loading,
115
- noStyle,
116
- iconClassName,
117
- variant,
118
- color,
119
- size,
120
- })}
121
- {children}
122
- {asset ? (
123
- <>
124
- <Separator
125
- orientation="vertical"
126
- className={cn(
127
- 'mx-1.5 h-3',
128
- variant === 'primary'
129
- ? 'border-Colors-Alpha-White-20'
130
- : 'border-Colors-Beta-Black-20'
131
- )}
132
- />
133
- <Image
134
- src={
135
- asset === 'energy'
136
- ? getAssetsUrl(
137
- 'image/bot/tag/20231214/1719340128612116720.png'
138
- )
139
- : getAssetsUrl('image/web3/20250331/shell_coin_icon_v2.png')
140
- }
141
- alt={asset}
142
- width={16}
143
- height={16}
144
- className="flex-shrink-0"
145
- />
146
- <Text size="xs" className={cn('ml-0.5 text-inherit')}>
147
- {assetNumber}
148
- </Text>
149
- </>
150
- ) : null}
151
- {!asset &&
152
- icon &&
153
- !iconOutBox &&
154
- iconDirection === 'right' &&
155
- renderIcon(icon, 'right', {
156
- loading,
157
- noStyle,
158
- iconClassName,
159
- variant,
160
- color,
161
- size,
162
- })}
163
- </span>
164
- {!asset &&
165
- icon &&
166
- iconOutBox &&
167
- iconDirection === 'right' &&
168
- renderIcon(icon, 'right', {
169
- loading,
170
- noStyle,
171
- iconClassName,
172
- variant,
173
- color,
174
- size,
175
- })}
176
- </Comp>
177
- );
178
- }
179
- );
180
- const renderIcon = (
181
- icon: React.ElementType,
182
- direction: 'left' | 'right',
183
- {
184
- loading,
185
- noStyle,
186
- iconClassName,
187
- variant = 'primary',
188
- color = 'brand',
189
- size = 'lg',
190
- }: ButtonProps
191
- ) => (
192
- <Icon
193
- component={icon}
194
- className={
195
- noStyle
196
- ? iconClassName
197
- : cn(
198
- iconVariants({ variant, size }),
199
- variant === 'plain' || variant === 'link'
200
- ? direction === 'left'
201
- ? 'mr-0.5'
202
- : 'ml-0.5'
203
- : direction === 'left'
204
- ? 'mr-1.5'
205
- : 'ml-1.5',
206
-
207
- iconClassName,
208
- loading ? 'opacity-0' : 'opacity-100'
209
- )
210
- }
211
- />
212
- );
213
- Button.displayName = 'Button';
214
-
215
- export { Button, buttonVariants };
@@ -1,103 +0,0 @@
1
- import { cva } from 'class-variance-authority';
2
-
3
- export const iconButtonVariants = cva(
4
- 'shrink-0 inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-30 disabled:shadow-none',
5
- {
6
- variants: {
7
- variant: {
8
- primary: '',
9
- secondary: 'border shadow-none',
10
- tertiary: 'border shadow-none',
11
- plain: '',
12
- opacity:
13
- 'text-Colors-Text-Static-White bg-Colors-Beta-White-30 border border-Colors-Beta-White-12 shadow-none hover:bg-Colors-Beta-White-40 focus:shadow-cc-Focus-Rings-Brand-default active:bg-Colors-Beta-White-50 disabled:bg-Colors-Beta-White-60 disabled:text-Colors-Beta-White-80',
14
- solid:
15
- 'shadow-none text-Colors-Text-Subtle bg-cc-Button-Solid-bg-default border border-cc-Button-Solid-border-default hover:bg-cc-Button-Solid-bg-hover hover:border-cc-Button-Solid-border-alt active:bg-cc-Button-Solid-bg-active disabled:text-cc-Button-Solid-fg-alt',
16
- static:
17
- 'text-cc-Button-Static-fg-default border-cc-Button-Static-border-default bg-cc-Button-Static-bg-default hover:bg-cc-Button-Static-bg-hover active:bg-cc-Button-Static-bg-active disabled:bg-cc-Button-Static-bg-disabled disabled:text-cc-Button-Static-fg-alt',
18
- },
19
- color: {
20
- default: '',
21
- brand: '',
22
- error: '',
23
- gray: '',
24
- },
25
- size: {
26
- xs: 'h-5 w-5 text-xs',
27
- sm: 'h-7 w-7 text-sm',
28
- md: 'h-9 w-9 text-sm',
29
- lg: 'h-11 w-11',
30
- },
31
- },
32
- compoundVariants: [
33
- {
34
- variant: 'primary',
35
- color: 'brand',
36
- className:
37
- 'text-cc-Icon-Button-Brand-fg-default bg-cc-Icon-Button-Brand-bg-default hover:bg-cc-Icon-Button-Brand-bg-hover active:bg-cc-Icon-Button-Brand-bg-active disabled:bg-cc-Icon-Button-Brand-bg-disabled disabled:text-cc-Icon-Button-Brand-fg-alt',
38
- },
39
- {
40
- variant: 'primary',
41
- color: 'error',
42
- className:
43
- 'text-cc-Button-Error-Primary-fg-default bg-cc-Button-Error-Primary-bg-default hover:bg-cc-Button-Error-Primary-bg-hover active:bg-cc-Button-Error-Primary-bg-active disabled:bg-cc-Button-Error-Primary-bg-disabled',
44
- },
45
- {
46
- variant: 'secondary',
47
- color: 'default',
48
- className:
49
- 'border-cc-Button-Secondary-border-default text-cc-Button-Secondary-fg-default bg-cc-Button-Secondary-bg-default hover:bg-cc-Button-Secondary-bg-hover active:bg-cc-Button-Secondary-bg-active disabled:text-cc-Button-Secondary-fg-alt disabled:border-cc-Button-Secondary-border-disabled',
50
- },
51
- {
52
- variant: 'tertiary',
53
- color: 'default',
54
- className:
55
- 'border-cc-Button-Tertiary-border-default text-cc-Button-Tertiary-fg-default bg-cc-Button-Tertiary-bg-default hover:bg-cc-Button-Tertiary-bg-hover hover:border-cc-Button-Tertiary-border-alt focus:shadow-button-tertiary-shadow active:bg-cc-Button-Tertiary-bg-active disabled:text-cc-Button-Tertiary-fg-alt',
56
- },
57
- {
58
- variant: 'secondary',
59
- color: 'error',
60
- className:
61
- 'border-cc-Button-Error-Secondary-border-default text-cc-Button-Error-Secondary-fg-default bg-cc-Button-Error-Secondary-bg-default hover:bg-cc-Button-Error-Secondary-bg-hover active:bg-cc-Button-Error-Secondary-bg-active disabled:text-cc-Button-Error-Secondary-fg-alt disabled:border-cc-Button-Error-Secondary-border-disabled',
62
- },
63
- {
64
- variant: 'secondary',
65
- color: 'gray',
66
- className:
67
- 'text-Colors-Foreground-Subtle hover:bg-surface-hovered active:shadow-button-pressed',
68
- },
69
- {
70
- variant: 'plain',
71
- color: 'default',
72
- className:
73
- 'text-cc-Button-Plain-fg-default hover:bg-cc-Button-Plain-bg-hover focus:shadow-cc-Focus-Rings-Brand-default active:bg-cc-Button-Plain-bg-active disabled:text-cc-Button-Plain-fg-alt',
74
- },
75
- {
76
- variant: 'plain',
77
- color: 'gray',
78
- className:
79
- 'text-cc-Icon-Button-Plain-Gray-fg-default bg-cc-Button-Plain-Brand-bg-default hover:bg-cc-Button-Plain-Brand-bg-hover active:bg-cc-Button-Plain-Brand-bg-active disabled:text-cc-Button-Plain-Gray-fg-alt',
80
- },
81
- {
82
- variant: 'plain',
83
- color: 'error',
84
- className:
85
- 'text-cc-Button-Error-Secondary-fg-default bg-cc-Button-Plain-bg-default hover:bg-cc-Button-Error-Secondary-bg-hover active:bg-cc-Button-Error-Secondary-bg-active disabled:text-cc-Button-Plain-fg-default',
86
- },
87
- ],
88
- defaultVariants: {
89
- variant: 'primary',
90
- color: 'default',
91
- size: 'lg',
92
- },
93
- }
94
- );
95
-
96
- export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
97
-
98
- export const iconSizeVariants: Record<IconButtonSize, string> = {
99
- xs: 'w-3 h-3',
100
- sm: 'w-4.5 h-4.5',
101
- md: 'w-5.5 h-5.5',
102
- lg: 'w-6 h-6',
103
- };
@@ -1,100 +0,0 @@
1
- /* eslint-disable react/no-unstable-nested-components */
2
- /* eslint-disable react/display-name */
3
-
4
- 'use client';
5
-
6
- import { Slot } from '@radix-ui/react-slot';
7
- import { type VariantProps } from 'class-variance-authority';
8
- import { Loader2, LucideIcon } from 'lucide-react';
9
- import * as React from 'react';
10
- import { ClassNameValue } from 'tailwind-merge';
11
- import { useMedia } from 'react-use';
12
-
13
- import { Icon, type IconComponent } from '../icon';
14
- import { cn } from '@/lib/utils';
15
- import { Tooltip } from '../tooltip';
16
- import {
17
- iconButtonVariants,
18
- iconSizeVariants,
19
- IconButtonSize,
20
- } from './icon-button.styles';
21
-
22
- export type HeroIcon = React.ForwardRefExoticComponent<
23
- React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
24
- title?: string;
25
- titleId?: string;
26
- } & React.RefAttributes<SVGSVGElement>
27
- >;
28
-
29
- export interface IconButtonProps
30
- extends React.ButtonHTMLAttributes<HTMLButtonElement>,
31
- VariantProps<typeof iconButtonVariants> {
32
- asChild?: boolean;
33
- loading?: boolean;
34
- disabled?: boolean;
35
- color?: 'default' | 'brand' | 'error' | 'gray';
36
- icon?: HeroIcon | LucideIcon | IconComponent | React.ElementType;
37
- hoverText?: string;
38
- hoverSide?: 'top' | 'right' | 'bottom' | 'left';
39
- iconClassName?: ClassNameValue;
40
- size?: IconButtonSize;
41
- }
42
-
43
- const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
44
- (
45
- {
46
- iconClassName,
47
- className,
48
- variant,
49
- size = 'lg',
50
- color,
51
- asChild = false,
52
- loading = false,
53
- children,
54
- icon: IconEle,
55
- disabled,
56
- hoverText,
57
- hoverSide,
58
- ...passProps
59
- },
60
- ref
61
- ) => {
62
- const isMobile = useMedia('(max-width: 768px)');
63
- const Comp = asChild ? Slot : 'button';
64
- const iconCls = cn(iconSizeVariants[size], iconClassName);
65
- const disable = disabled || loading;
66
-
67
- return (
68
- <Tooltip
69
- sideOffset={4}
70
- size="md"
71
- description={hoverText}
72
- side={hoverSide}
73
- disabled={isMobile}
74
- >
75
- <Comp
76
- className={cn(
77
- iconButtonVariants({ variant, size, color }),
78
- disable && 'cursor-not-allowed !pointer-events-auto',
79
- className
80
- )}
81
- ref={ref}
82
- disabled={disable}
83
- {...passProps}
84
- >
85
- {loading ? (
86
- <Loader2 className={cn('animate-spin', iconCls)} />
87
- ) : IconEle ? (
88
- <IconEle className={iconCls} />
89
- ) : React.isValidElement(children) ? (
90
- React.cloneElement(children, {
91
- className: cn(iconCls, children.props.className),
92
- } as React.ButtonHTMLAttributes<HTMLButtonElement>)
93
- ) : null}
94
- </Comp>
95
- </Tooltip>
96
- );
97
- }
98
- );
99
-
100
- export { IconButton, iconButtonVariants };
@@ -1,3 +0,0 @@
1
- export * from './button';
2
- export * from './link-button';
3
- export * from './icon-button';