@luxfi/ui 5.6.0 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Badge.d.ts.map +1 -0
- package/dist/components/Badge.js +91 -0
- package/dist/components/Button.d.ts.map +1 -0
- package/dist/components/Button.js +137 -0
- package/dist/components/Card.d.ts.map +1 -0
- package/dist/components/Card.js +86 -0
- package/dist/components/IconButton.d.ts.map +1 -0
- package/dist/components/IconButton.js +64 -0
- package/dist/components/Input.d.ts.map +1 -0
- package/dist/components/Input.js +71 -0
- package/dist/components/Modal.d.ts.map +1 -0
- package/dist/components/Modal.js +98 -0
- package/dist/components/Skeleton.d.ts.map +1 -0
- package/dist/components/Skeleton.js +44 -0
- package/dist/components/Spinner.d.ts.map +1 -0
- package/dist/components/Spinner.js +42 -0
- package/dist/components/Switch.d.ts.map +1 -0
- package/dist/components/Switch.js +10 -0
- package/dist/components/TokenLogo.d.ts.map +1 -0
- package/dist/components/TokenLogo.js +57 -0
- package/dist/components/Tooltip.d.ts.map +1 -0
- package/dist/components/Tooltip.js +34 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +19 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +35 -5618
- package/dist/theme/index.d.ts.map +1 -0
- package/dist/theme/index.js +6 -0
- package/dist/theme/themes.d.ts.map +1 -0
- package/dist/theme/themes.js +73 -0
- package/dist/theme/tokens.d.ts.map +1 -0
- package/dist/theme/tokens.js +101 -0
- package/package.json +81 -278
- package/dist/accordion.cjs +0 -213
- package/dist/accordion.js +0 -186
- package/dist/alert.cjs +0 -553
- package/dist/alert.js +0 -531
- package/dist/avatar.cjs +0 -149
- package/dist/avatar.js +0 -125
- package/dist/badge.cjs +0 -611
- package/dist/badge.js +0 -589
- package/dist/button.cjs +0 -689
- package/dist/button.js +0 -664
- package/dist/checkbox.cjs +0 -265
- package/dist/checkbox.js +0 -241
- package/dist/close-button.cjs +0 -73
- package/dist/close-button.js +0 -51
- package/dist/collapsible.cjs +0 -702
- package/dist/collapsible.js +0 -679
- package/dist/color-mode.cjs +0 -96
- package/dist/color-mode.js +0 -72
- package/dist/dialog.cjs +0 -279
- package/dist/dialog.js +0 -246
- package/dist/drawer.cjs +0 -207
- package/dist/drawer.js +0 -175
- package/dist/empty-state.cjs +0 -93
- package/dist/empty-state.js +0 -71
- package/dist/field.cjs +0 -183
- package/dist/field.js +0 -160
- package/dist/heading.cjs +0 -46
- package/dist/heading.js +0 -40
- package/dist/icon-button.cjs +0 -491
- package/dist/icon-button.js +0 -470
- package/dist/image.cjs +0 -572
- package/dist/image.js +0 -551
- package/dist/index.cjs +0 -5779
- package/dist/input-group.cjs +0 -155
- package/dist/input-group.js +0 -133
- package/dist/input.cjs +0 -65
- package/dist/input.js +0 -59
- package/dist/link.cjs +0 -630
- package/dist/link.js +0 -606
- package/dist/menu.cjs +0 -305
- package/dist/menu.js +0 -269
- package/dist/pin-input.cjs +0 -182
- package/dist/pin-input.js +0 -160
- package/dist/popover.cjs +0 -327
- package/dist/popover.js +0 -294
- package/dist/progress-circle.cjs +0 -152
- package/dist/progress-circle.js +0 -128
- package/dist/progress.cjs +0 -117
- package/dist/progress.js +0 -94
- package/dist/provider.cjs +0 -62
- package/dist/provider.js +0 -40
- package/dist/radio.cjs +0 -177
- package/dist/radio.js +0 -153
- package/dist/rating.cjs +0 -80
- package/dist/rating.js +0 -58
- package/dist/select.cjs +0 -791
- package/dist/select.js +0 -757
- package/dist/separator.cjs +0 -57
- package/dist/separator.js +0 -51
- package/dist/skeleton.cjs +0 -370
- package/dist/skeleton.js +0 -346
- package/dist/slider.cjs +0 -138
- package/dist/slider.js +0 -115
- package/dist/switch.cjs +0 -163
- package/dist/switch.js +0 -140
- package/dist/table.cjs +0 -1044
- package/dist/table.js +0 -1013
- package/dist/tabs.cjs +0 -240
- package/dist/tabs.js +0 -213
- package/dist/tag.cjs +0 -651
- package/dist/tag.js +0 -628
- package/dist/textarea.cjs +0 -65
- package/dist/textarea.js +0 -59
- package/dist/toaster.cjs +0 -99
- package/dist/toaster.js +0 -96
- package/dist/tooltip.cjs +0 -171
- package/dist/tooltip.js +0 -148
- package/dist/utils.cjs +0 -11
- package/dist/utils.js +0 -9
- package/src/accordion.tsx +0 -285
- package/src/alert.tsx +0 -221
- package/src/avatar.tsx +0 -174
- package/src/badge.tsx +0 -158
- package/src/button.tsx +0 -411
- package/src/checkbox.tsx +0 -307
- package/src/close-button.tsx +0 -51
- package/src/collapsible.tsx +0 -126
- package/src/color-mode.tsx +0 -125
- package/src/dialog.tsx +0 -356
- package/src/drawer.tsx +0 -186
- package/src/empty-state.tsx +0 -97
- package/src/field.tsx +0 -202
- package/src/heading.tsx +0 -55
- package/src/icon-button.tsx +0 -192
- package/src/image.tsx +0 -280
- package/src/index.ts +0 -192
- package/src/input-group.tsx +0 -159
- package/src/input.tsx +0 -60
- package/src/link.tsx +0 -326
- package/src/menu.tsx +0 -471
- package/src/pin-input.tsx +0 -187
- package/src/popover.tsx +0 -400
- package/src/progress-circle.tsx +0 -180
- package/src/progress.tsx +0 -109
- package/src/provider.tsx +0 -12
- package/src/radio.tsx +0 -175
- package/src/rating.tsx +0 -79
- package/src/select.tsx +0 -696
- package/src/separator.tsx +0 -59
- package/src/skeleton.tsx +0 -302
- package/src/slider.tsx +0 -152
- package/src/switch.tsx +0 -158
- package/src/table.tsx +0 -621
- package/src/tabs.tsx +0 -354
- package/src/tag.tsx +0 -159
- package/src/textarea.tsx +0 -60
- package/src/toaster.tsx +0 -117
- package/src/tokens.css +0 -438
- package/src/tooltip.tsx +0 -184
- package/src/utils/cn.ts +0 -7
- package/src/utils.ts +0 -6
- package/tokens.css +0 -438
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,QAAA,MAAM,UAAU;;;8CAoDd,CAAA;AAmCF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAM5E"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { jsx as _jsx } from 'react/jsx-runtime'
|
|
2
|
+
import { Stack, styled, Text } from 'tamagui'
|
|
3
|
+
|
|
4
|
+
const BadgeFrame = styled(Stack, {
|
|
5
|
+
name: 'Badge',
|
|
6
|
+
flexDirection: 'row',
|
|
7
|
+
alignItems: 'center',
|
|
8
|
+
justifyContent: 'center',
|
|
9
|
+
paddingHorizontal: '$2',
|
|
10
|
+
paddingVertical: '$1',
|
|
11
|
+
borderRadius: '$2',
|
|
12
|
+
variants: {
|
|
13
|
+
variant: {
|
|
14
|
+
default: {
|
|
15
|
+
backgroundColor: '$backgroundHover',
|
|
16
|
+
},
|
|
17
|
+
primary: {
|
|
18
|
+
backgroundColor: '$primary',
|
|
19
|
+
},
|
|
20
|
+
success: {
|
|
21
|
+
backgroundColor: '$success',
|
|
22
|
+
},
|
|
23
|
+
warning: {
|
|
24
|
+
backgroundColor: '$warning',
|
|
25
|
+
},
|
|
26
|
+
error: {
|
|
27
|
+
backgroundColor: '$error',
|
|
28
|
+
},
|
|
29
|
+
outline: {
|
|
30
|
+
backgroundColor: 'transparent',
|
|
31
|
+
borderWidth: 1,
|
|
32
|
+
borderColor: '$borderColor',
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
size: {
|
|
36
|
+
sm: {
|
|
37
|
+
paddingHorizontal: '$1.5',
|
|
38
|
+
paddingVertical: 2,
|
|
39
|
+
},
|
|
40
|
+
md: {
|
|
41
|
+
paddingHorizontal: '$2',
|
|
42
|
+
paddingVertical: '$1',
|
|
43
|
+
},
|
|
44
|
+
lg: {
|
|
45
|
+
paddingHorizontal: '$3',
|
|
46
|
+
paddingVertical: '$1.5',
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
defaultVariants: {
|
|
51
|
+
variant: 'default',
|
|
52
|
+
size: 'md',
|
|
53
|
+
},
|
|
54
|
+
})
|
|
55
|
+
const BadgeText = styled(Text, {
|
|
56
|
+
name: 'BadgeText',
|
|
57
|
+
fontSize: 12,
|
|
58
|
+
fontWeight: '500',
|
|
59
|
+
variants: {
|
|
60
|
+
variant: {
|
|
61
|
+
default: {
|
|
62
|
+
color: '$color',
|
|
63
|
+
},
|
|
64
|
+
primary: {
|
|
65
|
+
color: 'white',
|
|
66
|
+
},
|
|
67
|
+
success: {
|
|
68
|
+
color: 'white',
|
|
69
|
+
},
|
|
70
|
+
warning: {
|
|
71
|
+
color: 'white',
|
|
72
|
+
},
|
|
73
|
+
error: {
|
|
74
|
+
color: 'white',
|
|
75
|
+
},
|
|
76
|
+
outline: {
|
|
77
|
+
color: '$color',
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
defaultVariants: {
|
|
82
|
+
variant: 'default',
|
|
83
|
+
},
|
|
84
|
+
})
|
|
85
|
+
export function Badge({ children, variant = 'default', ...props }) {
|
|
86
|
+
return _jsx(BadgeFrame, {
|
|
87
|
+
variant: variant,
|
|
88
|
+
...props,
|
|
89
|
+
children: _jsx(BadgeText, { variant: variant, children: children }),
|
|
90
|
+
})
|
|
91
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGhD,QAAA,MAAM,WAAW;;;;;8CAgHf,CAAA;AAsBF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,GAAG;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAU/D;yBAVe,MAAM"}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { styled } from '@tamagui/core'
|
|
2
|
+
import { jsx as _jsx } from 'react/jsx-runtime'
|
|
3
|
+
import { Stack, Text } from 'tamagui'
|
|
4
|
+
|
|
5
|
+
const ButtonFrame = styled(Stack, {
|
|
6
|
+
name: 'Button',
|
|
7
|
+
tag: 'button',
|
|
8
|
+
alignItems: 'center',
|
|
9
|
+
justifyContent: 'center',
|
|
10
|
+
flexDirection: 'row',
|
|
11
|
+
gap: '$2',
|
|
12
|
+
borderRadius: '$3',
|
|
13
|
+
paddingHorizontal: '$4',
|
|
14
|
+
paddingVertical: '$3',
|
|
15
|
+
cursor: 'pointer',
|
|
16
|
+
pressStyle: {
|
|
17
|
+
opacity: 0.8,
|
|
18
|
+
scale: 0.98,
|
|
19
|
+
},
|
|
20
|
+
hoverStyle: {
|
|
21
|
+
opacity: 0.9,
|
|
22
|
+
},
|
|
23
|
+
focusStyle: {
|
|
24
|
+
outlineWidth: 2,
|
|
25
|
+
outlineColor: '$primary',
|
|
26
|
+
outlineStyle: 'solid',
|
|
27
|
+
outlineOffset: 2,
|
|
28
|
+
},
|
|
29
|
+
disabledStyle: {
|
|
30
|
+
opacity: 0.5,
|
|
31
|
+
cursor: 'not-allowed',
|
|
32
|
+
},
|
|
33
|
+
variants: {
|
|
34
|
+
variant: {
|
|
35
|
+
primary: {
|
|
36
|
+
backgroundColor: '$primary',
|
|
37
|
+
color: 'white',
|
|
38
|
+
hoverStyle: {
|
|
39
|
+
backgroundColor: '$primaryHover',
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
secondary: {
|
|
43
|
+
backgroundColor: '$secondary',
|
|
44
|
+
color: '$color',
|
|
45
|
+
hoverStyle: {
|
|
46
|
+
backgroundColor: '$secondaryHover',
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
outline: {
|
|
50
|
+
backgroundColor: 'transparent',
|
|
51
|
+
borderWidth: 1,
|
|
52
|
+
borderColor: '$borderColor',
|
|
53
|
+
color: '$color',
|
|
54
|
+
hoverStyle: {
|
|
55
|
+
backgroundColor: '$backgroundHover',
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
ghost: {
|
|
59
|
+
backgroundColor: 'transparent',
|
|
60
|
+
color: '$color',
|
|
61
|
+
hoverStyle: {
|
|
62
|
+
backgroundColor: '$backgroundHover',
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
destructive: {
|
|
66
|
+
backgroundColor: '$error',
|
|
67
|
+
color: 'white',
|
|
68
|
+
hoverStyle: {
|
|
69
|
+
backgroundColor: '$errorDark',
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
size: {
|
|
74
|
+
sm: {
|
|
75
|
+
paddingHorizontal: '$3',
|
|
76
|
+
paddingVertical: '$2',
|
|
77
|
+
height: 32,
|
|
78
|
+
},
|
|
79
|
+
md: {
|
|
80
|
+
paddingHorizontal: '$4',
|
|
81
|
+
paddingVertical: '$3',
|
|
82
|
+
height: 40,
|
|
83
|
+
},
|
|
84
|
+
lg: {
|
|
85
|
+
paddingHorizontal: '$5',
|
|
86
|
+
paddingVertical: '$4',
|
|
87
|
+
height: 48,
|
|
88
|
+
},
|
|
89
|
+
xl: {
|
|
90
|
+
paddingHorizontal: '$6',
|
|
91
|
+
paddingVertical: '$5',
|
|
92
|
+
height: 56,
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
fullWidth: {
|
|
96
|
+
true: {
|
|
97
|
+
width: '100%',
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
circular: {
|
|
101
|
+
true: {
|
|
102
|
+
borderRadius: '$round',
|
|
103
|
+
paddingHorizontal: 0,
|
|
104
|
+
aspectRatio: 1,
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
defaultVariants: {
|
|
109
|
+
variant: 'primary',
|
|
110
|
+
size: 'md',
|
|
111
|
+
},
|
|
112
|
+
})
|
|
113
|
+
const ButtonText = styled(Text, {
|
|
114
|
+
name: 'ButtonText',
|
|
115
|
+
fontFamily: '$body',
|
|
116
|
+
fontWeight: '600',
|
|
117
|
+
color: 'inherit',
|
|
118
|
+
variants: {
|
|
119
|
+
size: {
|
|
120
|
+
sm: { fontSize: 13 },
|
|
121
|
+
md: { fontSize: 14 },
|
|
122
|
+
lg: { fontSize: 16 },
|
|
123
|
+
xl: { fontSize: 18 },
|
|
124
|
+
},
|
|
125
|
+
},
|
|
126
|
+
defaultVariants: {
|
|
127
|
+
size: 'md',
|
|
128
|
+
},
|
|
129
|
+
})
|
|
130
|
+
export function Button({ children, size, ...props }) {
|
|
131
|
+
return _jsx(ButtonFrame, {
|
|
132
|
+
size: size,
|
|
133
|
+
...props,
|
|
134
|
+
children: typeof children === 'string' ? _jsx(ButtonText, { size: size, children: children }) : children,
|
|
135
|
+
})
|
|
136
|
+
}
|
|
137
|
+
Button.displayName = 'Button'
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGhD,eAAO,MAAM,IAAI;;;;8CA8Df,CAAA;AAEF,eAAO,MAAM,UAAU,qPAGrB,CAAA;AAEF,eAAO,MAAM,SAAS;;;8CAGpB,CAAA;AAEF,eAAO,MAAM,eAAe;;8CAI1B,CAAA;AAEF,eAAO,MAAM,WAAW,qPAGtB,CAAA;AAEF,eAAO,MAAM,UAAU,qPAOrB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { styled } from '@tamagui/core'
|
|
2
|
+
import { H3, Stack, Text } from 'tamagui'
|
|
3
|
+
export const Card = styled(Stack, {
|
|
4
|
+
name: 'Card',
|
|
5
|
+
backgroundColor: '$card',
|
|
6
|
+
borderRadius: '$4',
|
|
7
|
+
borderWidth: 1,
|
|
8
|
+
borderColor: '$borderColor',
|
|
9
|
+
padding: '$4',
|
|
10
|
+
gap: '$3',
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
default: {},
|
|
14
|
+
elevated: {
|
|
15
|
+
shadowColor: '$black',
|
|
16
|
+
shadowOffset: { width: 0, height: 4 },
|
|
17
|
+
shadowOpacity: 0.1,
|
|
18
|
+
shadowRadius: 8,
|
|
19
|
+
elevation: 4,
|
|
20
|
+
},
|
|
21
|
+
outline: {
|
|
22
|
+
backgroundColor: 'transparent',
|
|
23
|
+
borderWidth: 1,
|
|
24
|
+
borderColor: '$borderColor',
|
|
25
|
+
},
|
|
26
|
+
ghost: {
|
|
27
|
+
backgroundColor: 'transparent',
|
|
28
|
+
borderWidth: 0,
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
size: {
|
|
32
|
+
sm: {
|
|
33
|
+
padding: '$3',
|
|
34
|
+
gap: '$2',
|
|
35
|
+
},
|
|
36
|
+
md: {
|
|
37
|
+
padding: '$4',
|
|
38
|
+
gap: '$3',
|
|
39
|
+
},
|
|
40
|
+
lg: {
|
|
41
|
+
padding: '$5',
|
|
42
|
+
gap: '$4',
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
hoverable: {
|
|
46
|
+
true: {
|
|
47
|
+
cursor: 'pointer',
|
|
48
|
+
hoverStyle: {
|
|
49
|
+
backgroundColor: '$cardHover',
|
|
50
|
+
},
|
|
51
|
+
pressStyle: {
|
|
52
|
+
opacity: 0.9,
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
defaultVariants: {
|
|
58
|
+
variant: 'default',
|
|
59
|
+
size: 'md',
|
|
60
|
+
},
|
|
61
|
+
})
|
|
62
|
+
export const CardHeader = styled(Stack, {
|
|
63
|
+
name: 'CardHeader',
|
|
64
|
+
gap: '$2',
|
|
65
|
+
})
|
|
66
|
+
export const CardTitle = styled(H3, {
|
|
67
|
+
name: 'CardTitle',
|
|
68
|
+
fontWeight: '600',
|
|
69
|
+
})
|
|
70
|
+
export const CardDescription = styled(Text, {
|
|
71
|
+
name: 'CardDescription',
|
|
72
|
+
color: '$mutedForeground',
|
|
73
|
+
fontSize: 14,
|
|
74
|
+
})
|
|
75
|
+
export const CardContent = styled(Stack, {
|
|
76
|
+
name: 'CardContent',
|
|
77
|
+
gap: '$3',
|
|
78
|
+
})
|
|
79
|
+
export const CardFooter = styled(Stack, {
|
|
80
|
+
name: 'CardFooter',
|
|
81
|
+
flexDirection: 'row',
|
|
82
|
+
alignItems: 'center',
|
|
83
|
+
justifyContent: 'flex-end',
|
|
84
|
+
gap: '$2',
|
|
85
|
+
paddingTop: '$3',
|
|
86
|
+
})
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGhD,eAAO,MAAM,UAAU;;;;8CAiErB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { styled } from '@tamagui/core'
|
|
2
|
+
import { Stack } from 'tamagui'
|
|
3
|
+
export const IconButton = styled(Stack, {
|
|
4
|
+
name: 'IconButton',
|
|
5
|
+
tag: 'button',
|
|
6
|
+
alignItems: 'center',
|
|
7
|
+
justifyContent: 'center',
|
|
8
|
+
borderRadius: '$2',
|
|
9
|
+
cursor: 'pointer',
|
|
10
|
+
pressStyle: {
|
|
11
|
+
opacity: 0.8,
|
|
12
|
+
scale: 0.95,
|
|
13
|
+
},
|
|
14
|
+
hoverStyle: {
|
|
15
|
+
backgroundColor: '$backgroundHover',
|
|
16
|
+
},
|
|
17
|
+
focusStyle: {
|
|
18
|
+
outlineWidth: 2,
|
|
19
|
+
outlineColor: '$primary',
|
|
20
|
+
outlineStyle: 'solid',
|
|
21
|
+
},
|
|
22
|
+
disabledStyle: {
|
|
23
|
+
opacity: 0.5,
|
|
24
|
+
cursor: 'not-allowed',
|
|
25
|
+
},
|
|
26
|
+
variants: {
|
|
27
|
+
variant: {
|
|
28
|
+
default: {
|
|
29
|
+
backgroundColor: 'transparent',
|
|
30
|
+
},
|
|
31
|
+
filled: {
|
|
32
|
+
backgroundColor: '$secondary',
|
|
33
|
+
},
|
|
34
|
+
outline: {
|
|
35
|
+
backgroundColor: 'transparent',
|
|
36
|
+
borderWidth: 1,
|
|
37
|
+
borderColor: '$borderColor',
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
size: {
|
|
41
|
+
sm: {
|
|
42
|
+
width: 28,
|
|
43
|
+
height: 28,
|
|
44
|
+
},
|
|
45
|
+
md: {
|
|
46
|
+
width: 36,
|
|
47
|
+
height: 36,
|
|
48
|
+
},
|
|
49
|
+
lg: {
|
|
50
|
+
width: 44,
|
|
51
|
+
height: 44,
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
circular: {
|
|
55
|
+
true: {
|
|
56
|
+
borderRadius: '$round',
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
defaultVariants: {
|
|
61
|
+
variant: 'default',
|
|
62
|
+
size: 'md',
|
|
63
|
+
},
|
|
64
|
+
})
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAGvC,QAAA,MAAM,UAAU;;;;;;;;;;;8CAwCd,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,UAAU,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;IACrC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;YARR,MAAM;mBACC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;kBACvB,MAAM;WACb,MAAM,GAAG,QAAQ,GAAG,UAAU;kBACvB,KAAK,CAAC,SAAS;mBACd,KAAK,CAAC,SAAS;oDA2B/B,CAAA"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { forwardRef } from 'react'
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
|
|
3
|
+
import { styled, XStack } from 'tamagui'
|
|
4
|
+
|
|
5
|
+
const InputFrame = styled(XStack, {
|
|
6
|
+
name: 'InputFrame',
|
|
7
|
+
alignItems: 'center',
|
|
8
|
+
backgroundColor: '$backgroundHover',
|
|
9
|
+
borderRadius: '$3',
|
|
10
|
+
borderWidth: 1,
|
|
11
|
+
borderColor: '$borderColor',
|
|
12
|
+
paddingHorizontal: '$3',
|
|
13
|
+
height: 48,
|
|
14
|
+
gap: '$2',
|
|
15
|
+
focusWithinStyle: {
|
|
16
|
+
borderColor: '$primary',
|
|
17
|
+
},
|
|
18
|
+
variants: {
|
|
19
|
+
size: {
|
|
20
|
+
sm: {
|
|
21
|
+
height: 36,
|
|
22
|
+
paddingHorizontal: '$2',
|
|
23
|
+
},
|
|
24
|
+
md: {
|
|
25
|
+
height: 48,
|
|
26
|
+
paddingHorizontal: '$3',
|
|
27
|
+
},
|
|
28
|
+
lg: {
|
|
29
|
+
height: 56,
|
|
30
|
+
paddingHorizontal: '$4',
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
error: {
|
|
34
|
+
true: {
|
|
35
|
+
borderColor: '$red10',
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
defaultVariants: {
|
|
40
|
+
size: 'md',
|
|
41
|
+
},
|
|
42
|
+
})
|
|
43
|
+
export const Input = forwardRef(
|
|
44
|
+
({ value, onChangeText, placeholder, type = 'text', leftElement, rightElement, size, error, ...props }, ref) => {
|
|
45
|
+
return _jsxs(InputFrame, {
|
|
46
|
+
size: size,
|
|
47
|
+
error: error,
|
|
48
|
+
...props,
|
|
49
|
+
children: [
|
|
50
|
+
leftElement,
|
|
51
|
+
_jsx('input', {
|
|
52
|
+
ref: ref,
|
|
53
|
+
value: value,
|
|
54
|
+
onChange: (e) => onChangeText?.(e.target.value),
|
|
55
|
+
placeholder: placeholder,
|
|
56
|
+
type: type,
|
|
57
|
+
style: {
|
|
58
|
+
flex: 1,
|
|
59
|
+
backgroundColor: 'transparent',
|
|
60
|
+
border: 'none',
|
|
61
|
+
outline: 'none',
|
|
62
|
+
fontSize: 16,
|
|
63
|
+
color: 'inherit',
|
|
64
|
+
},
|
|
65
|
+
}),
|
|
66
|
+
rightElement,
|
|
67
|
+
],
|
|
68
|
+
})
|
|
69
|
+
}
|
|
70
|
+
)
|
|
71
|
+
Input.displayName = 'Input'
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAmDA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,UAAU,2CA+CxE"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { X } from '@tamagui/lucide-icons'
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
|
|
3
|
+
import { Dialog, Stack, styled, Text } from 'tamagui'
|
|
4
|
+
import { IconButton } from './IconButton'
|
|
5
|
+
|
|
6
|
+
const _Overlay = styled(Stack, {
|
|
7
|
+
name: 'ModalOverlay',
|
|
8
|
+
position: 'absolute',
|
|
9
|
+
top: 0,
|
|
10
|
+
left: 0,
|
|
11
|
+
right: 0,
|
|
12
|
+
bottom: 0,
|
|
13
|
+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
14
|
+
justifyContent: 'center',
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
animation: 'quick',
|
|
17
|
+
opacity: 0,
|
|
18
|
+
enterStyle: { opacity: 0 },
|
|
19
|
+
exitStyle: { opacity: 0 },
|
|
20
|
+
})
|
|
21
|
+
const _ModalContent = styled(Stack, {
|
|
22
|
+
name: 'ModalContent',
|
|
23
|
+
backgroundColor: '$background',
|
|
24
|
+
borderRadius: '$4',
|
|
25
|
+
padding: '$4',
|
|
26
|
+
width: '100%',
|
|
27
|
+
maxWidth: 420,
|
|
28
|
+
maxHeight: '85vh',
|
|
29
|
+
animation: 'medium',
|
|
30
|
+
y: 20,
|
|
31
|
+
opacity: 0,
|
|
32
|
+
enterStyle: { y: 20, opacity: 0 },
|
|
33
|
+
exitStyle: { y: 20, opacity: 0 },
|
|
34
|
+
})
|
|
35
|
+
const ModalHeader = styled(Stack, {
|
|
36
|
+
name: 'ModalHeader',
|
|
37
|
+
flexDirection: 'row',
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
justifyContent: 'space-between',
|
|
40
|
+
marginBottom: '$3',
|
|
41
|
+
})
|
|
42
|
+
const ModalTitle = styled(Text, {
|
|
43
|
+
name: 'ModalTitle',
|
|
44
|
+
fontSize: 18,
|
|
45
|
+
fontWeight: '600',
|
|
46
|
+
color: '$color',
|
|
47
|
+
})
|
|
48
|
+
export function Modal({ open, onOpenChange, title, children }) {
|
|
49
|
+
return _jsx(Dialog, {
|
|
50
|
+
modal: true,
|
|
51
|
+
open: open,
|
|
52
|
+
onOpenChange: onOpenChange,
|
|
53
|
+
children: _jsxs(Dialog.Portal, {
|
|
54
|
+
children: [
|
|
55
|
+
_jsx(
|
|
56
|
+
Dialog.Overlay,
|
|
57
|
+
{ animation: 'quick', opacity: 0.5, enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } },
|
|
58
|
+
'overlay'
|
|
59
|
+
),
|
|
60
|
+
_jsxs(
|
|
61
|
+
Dialog.Content,
|
|
62
|
+
{
|
|
63
|
+
bordered: true,
|
|
64
|
+
elevate: true,
|
|
65
|
+
animation: [
|
|
66
|
+
'medium',
|
|
67
|
+
{
|
|
68
|
+
opacity: {
|
|
69
|
+
overshootClamping: true,
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
],
|
|
73
|
+
enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
|
|
74
|
+
exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
|
|
75
|
+
width: '100%',
|
|
76
|
+
maxWidth: 420,
|
|
77
|
+
padding: '$4',
|
|
78
|
+
borderRadius: '$4',
|
|
79
|
+
children: [
|
|
80
|
+
title &&
|
|
81
|
+
_jsxs(ModalHeader, {
|
|
82
|
+
children: [
|
|
83
|
+
_jsx(Dialog.Title, { children: _jsx(ModalTitle, { children: title }) }),
|
|
84
|
+
_jsx(Dialog.Close, {
|
|
85
|
+
asChild: true,
|
|
86
|
+
children: _jsx(IconButton, { size: 'sm', variant: 'default', children: _jsx(X, { size: 16 }) }),
|
|
87
|
+
}),
|
|
88
|
+
],
|
|
89
|
+
}),
|
|
90
|
+
children,
|
|
91
|
+
],
|
|
92
|
+
},
|
|
93
|
+
'content'
|
|
94
|
+
),
|
|
95
|
+
],
|
|
96
|
+
}),
|
|
97
|
+
})
|
|
98
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,eAAO,MAAM,QAAQ;;;;8CA6CnB,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Stack, styled } from 'tamagui'
|
|
2
|
+
export const Skeleton = styled(Stack, {
|
|
3
|
+
name: 'Skeleton',
|
|
4
|
+
backgroundColor: '$backgroundHover',
|
|
5
|
+
borderRadius: '$2',
|
|
6
|
+
animation: 'lazy',
|
|
7
|
+
// Pulse animation via opacity
|
|
8
|
+
animateOnly: ['opacity'],
|
|
9
|
+
opacity: 1,
|
|
10
|
+
enterStyle: {
|
|
11
|
+
opacity: 0.5,
|
|
12
|
+
},
|
|
13
|
+
variants: {
|
|
14
|
+
variant: {
|
|
15
|
+
text: {
|
|
16
|
+
height: 16,
|
|
17
|
+
width: '100%',
|
|
18
|
+
},
|
|
19
|
+
circular: {
|
|
20
|
+
borderRadius: 1000,
|
|
21
|
+
},
|
|
22
|
+
rectangular: {
|
|
23
|
+
borderRadius: '$2',
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
width: {
|
|
27
|
+
sm: { width: 60 },
|
|
28
|
+
md: { width: 100 },
|
|
29
|
+
lg: { width: 160 },
|
|
30
|
+
full: { width: '100%' },
|
|
31
|
+
},
|
|
32
|
+
height: {
|
|
33
|
+
sm: { height: 16 },
|
|
34
|
+
md: { height: 24 },
|
|
35
|
+
lg: { height: 40 },
|
|
36
|
+
xl: { height: 60 },
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
defaultVariants: {
|
|
40
|
+
variant: 'rectangular',
|
|
41
|
+
width: 'full',
|
|
42
|
+
height: 'md',
|
|
43
|
+
},
|
|
44
|
+
})
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,QAAA,MAAM,YAAY;;8CAqChB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AAExD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAE1C"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx as _jsx } from 'react/jsx-runtime'
|
|
2
|
+
import { Stack, styled } from 'tamagui'
|
|
3
|
+
|
|
4
|
+
const SpinnerFrame = styled(Stack, {
|
|
5
|
+
name: 'Spinner',
|
|
6
|
+
borderWidth: 2,
|
|
7
|
+
borderColor: '$borderColor',
|
|
8
|
+
borderTopColor: '$primary',
|
|
9
|
+
borderRadius: 1000,
|
|
10
|
+
animation: 'lazy',
|
|
11
|
+
rotate: '0deg',
|
|
12
|
+
variants: {
|
|
13
|
+
size: {
|
|
14
|
+
sm: {
|
|
15
|
+
width: 16,
|
|
16
|
+
height: 16,
|
|
17
|
+
borderWidth: 2,
|
|
18
|
+
},
|
|
19
|
+
md: {
|
|
20
|
+
width: 24,
|
|
21
|
+
height: 24,
|
|
22
|
+
borderWidth: 2,
|
|
23
|
+
},
|
|
24
|
+
lg: {
|
|
25
|
+
width: 32,
|
|
26
|
+
height: 32,
|
|
27
|
+
borderWidth: 3,
|
|
28
|
+
},
|
|
29
|
+
xl: {
|
|
30
|
+
width: 48,
|
|
31
|
+
height: 48,
|
|
32
|
+
borderWidth: 4,
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
defaultVariants: {
|
|
37
|
+
size: 'md',
|
|
38
|
+
},
|
|
39
|
+
})
|
|
40
|
+
export function Spinner(props) {
|
|
41
|
+
return _jsx(SpinnerFrame, { ...props })
|
|
42
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,GAAG;IACnD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAY5D"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from 'react/jsx-runtime'
|
|
2
|
+
import { Switch as TSwitch } from 'tamagui'
|
|
3
|
+
export function Switch({ size = 'md', ...props }) {
|
|
4
|
+
const sizeMap = {
|
|
5
|
+
sm: '$2',
|
|
6
|
+
md: '$3',
|
|
7
|
+
lg: '$4',
|
|
8
|
+
}
|
|
9
|
+
return _jsx(TSwitch, { size: sizeMap[size], ...props, children: _jsx(TSwitch.Thumb, { animation: 'quick' }) })
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TokenLogo.d.ts","sourceRoot":"","sources":["../../src/components/TokenLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGhD,QAAA,MAAM,cAAc;;8CAqBlB,CAAA;AA4BF,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,GAAG;IAC7D,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAY5E;yBAZe,SAAS"}
|