@0610studio/zs-ui 0.18.1 → 0.19.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/build/assets/SvgTooltipTail.d.ts +7 -0
- package/build/assets/SvgTooltipTail.d.ts.map +1 -0
- package/build/assets/SvgTooltipTail.js +7 -0
- package/build/assets/SvgTooltipTail.js.map +1 -0
- package/build/context/ThemeContext.d.ts.map +1 -1
- package/build/context/ThemeContext.js +17 -5
- package/build/context/ThemeContext.js.map +1 -1
- package/build/index.d.ts +15 -2
- package/build/index.d.ts.map +1 -1
- package/build/index.js +7 -1
- package/build/index.js.map +1 -1
- package/build/model/types.d.ts +1 -0
- package/build/model/types.d.ts.map +1 -1
- package/build/model/types.js.map +1 -1
- package/build/model/useFoldingState.d.ts.map +1 -1
- package/build/model/useFoldingState.js +51 -32
- package/build/model/useFoldingState.js.map +1 -1
- package/build/overlay/AlertOverlay/index.d.ts +1 -2
- package/build/overlay/AlertOverlay/index.d.ts.map +1 -1
- package/build/overlay/AlertOverlay/index.js +11 -9
- package/build/overlay/AlertOverlay/index.js.map +1 -1
- package/build/overlay/BottomSheetOverlay/index.d.ts.map +1 -1
- package/build/overlay/BottomSheetOverlay/index.js +4 -3
- package/build/overlay/BottomSheetOverlay/index.js.map +1 -1
- package/build/overlay/LoadingNotify/index.d.ts +2 -2
- package/build/overlay/LoadingNotify/index.d.ts.map +1 -1
- package/build/overlay/LoadingNotify/index.js +2 -2
- package/build/overlay/LoadingNotify/index.js.map +1 -1
- package/build/overlay/Modality/index.d.ts.map +1 -1
- package/build/overlay/Modality/index.js +3 -3
- package/build/overlay/Modality/index.js.map +1 -1
- package/build/overlay/PopOver/PopOverMenu.d.ts.map +1 -1
- package/build/overlay/PopOver/PopOverMenu.js +5 -3
- package/build/overlay/PopOver/PopOverMenu.js.map +1 -1
- package/build/overlay/SnackbarNotify/ui/SnackbarItem.d.ts +3 -3
- package/build/overlay/SnackbarNotify/ui/SnackbarItem.d.ts.map +1 -1
- package/build/overlay/SnackbarNotify/ui/SnackbarItem.js +5 -5
- package/build/overlay/SnackbarNotify/ui/SnackbarItem.js.map +1 -1
- package/build/theme/intentColors.d.ts +9 -0
- package/build/theme/intentColors.d.ts.map +1 -0
- package/build/theme/intentColors.js +30 -0
- package/build/theme/intentColors.js.map +1 -0
- package/build/theme/tokens.d.ts +35 -0
- package/build/theme/tokens.d.ts.map +1 -0
- package/build/theme/tokens.js +35 -0
- package/build/theme/tokens.js.map +1 -0
- package/build/theme/typography.d.ts.map +1 -1
- package/build/theme/typography.js +36 -72
- package/build/theme/typography.js.map +1 -1
- package/build/ui/ZSBlockButton/index.d.ts.map +1 -1
- package/build/ui/ZSBlockButton/index.js +4 -19
- package/build/ui/ZSBlockButton/index.js.map +1 -1
- package/build/ui/ZSBorderBeam/index.d.ts +48 -0
- package/build/ui/ZSBorderBeam/index.d.ts.map +1 -0
- package/build/ui/ZSBorderBeam/index.js +135 -0
- package/build/ui/ZSBorderBeam/index.js.map +1 -0
- package/build/ui/ZSCheckBox/index.d.ts +18 -0
- package/build/ui/ZSCheckBox/index.d.ts.map +1 -0
- package/build/ui/ZSCheckBox/index.js +60 -0
- package/build/ui/ZSCheckBox/index.js.map +1 -0
- package/build/ui/ZSChip/index.d.ts +28 -0
- package/build/ui/ZSChip/index.d.ts.map +1 -0
- package/build/ui/ZSChip/index.js +76 -0
- package/build/ui/ZSChip/index.js.map +1 -0
- package/build/ui/ZSContainer/index.d.ts +0 -1
- package/build/ui/ZSContainer/index.d.ts.map +1 -1
- package/build/ui/ZSContainer/index.js +3 -2
- package/build/ui/ZSContainer/index.js.map +1 -1
- package/build/ui/ZSPressable/index.d.ts.map +1 -1
- package/build/ui/ZSPressable/index.js +9 -4
- package/build/ui/ZSPressable/index.js.map +1 -1
- package/build/ui/ZSRadioGroup/index.d.ts +2 -3
- package/build/ui/ZSRadioGroup/index.d.ts.map +1 -1
- package/build/ui/ZSRadioGroup/index.js +12 -4
- package/build/ui/ZSRadioGroup/index.js.map +1 -1
- package/build/ui/ZSSegmented/index.d.ts +26 -0
- package/build/ui/ZSSegmented/index.d.ts.map +1 -0
- package/build/ui/ZSSegmented/index.js +124 -0
- package/build/ui/ZSSegmented/index.js.map +1 -0
- package/build/ui/ZSSkeleton/SkiaShimmer.d.ts +18 -0
- package/build/ui/ZSSkeleton/SkiaShimmer.d.ts.map +1 -0
- package/build/ui/ZSSkeleton/SkiaShimmer.js +73 -0
- package/build/ui/ZSSkeleton/SkiaShimmer.js.map +1 -0
- package/build/ui/ZSSkeleton/index.d.ts +7 -2
- package/build/ui/ZSSkeleton/index.d.ts.map +1 -1
- package/build/ui/ZSSkeleton/index.js +12 -43
- package/build/ui/ZSSkeleton/index.js.map +1 -1
- package/build/ui/ZSSkeletonBox/index.d.ts +8 -2
- package/build/ui/ZSSkeletonBox/index.d.ts.map +1 -1
- package/build/ui/ZSSkeletonBox/index.js +6 -46
- package/build/ui/ZSSkeletonBox/index.js.map +1 -1
- package/build/ui/ZSSwitch/index.d.ts +2 -1
- package/build/ui/ZSSwitch/index.d.ts.map +1 -1
- package/build/ui/ZSSwitch/index.js +6 -4
- package/build/ui/ZSSwitch/index.js.map +1 -1
- package/build/ui/ZSTextField/index.d.ts.map +1 -1
- package/build/ui/ZSTextField/index.js +17 -13
- package/build/ui/ZSTextField/index.js.map +1 -1
- package/build/ui/ZSTextField/ui/ButtonClose.d.ts.map +1 -1
- package/build/ui/ZSTextField/ui/ButtonClose.js +4 -1
- package/build/ui/ZSTextField/ui/ButtonClose.js.map +1 -1
- package/build/ui/ZSTooltip/index.d.ts +38 -0
- package/build/ui/ZSTooltip/index.d.ts.map +1 -0
- package/build/ui/ZSTooltip/index.js +99 -0
- package/build/ui/ZSTooltip/index.js.map +1 -0
- package/package.json +6 -1
|
@@ -5,193 +5,157 @@ export default function typography({ themeFonts }) {
|
|
|
5
5
|
heading: {
|
|
6
6
|
1: {
|
|
7
7
|
fontSize: baseSize + 36,
|
|
8
|
-
fontFamily: themeFonts?.[700]
|
|
9
|
-
letterSpacing: 1
|
|
8
|
+
fontFamily: themeFonts?.[700]
|
|
10
9
|
},
|
|
11
10
|
2: {
|
|
12
11
|
fontSize: baseSize + 32,
|
|
13
|
-
fontFamily: themeFonts?.[700]
|
|
14
|
-
letterSpacing: 1
|
|
12
|
+
fontFamily: themeFonts?.[700]
|
|
15
13
|
},
|
|
16
14
|
3: {
|
|
17
15
|
fontSize: baseSize + 28,
|
|
18
|
-
fontFamily: themeFonts?.[700]
|
|
19
|
-
letterSpacing: 1
|
|
16
|
+
fontFamily: themeFonts?.[700]
|
|
20
17
|
},
|
|
21
18
|
4: {
|
|
22
19
|
fontSize: baseSize + 24,
|
|
23
|
-
fontFamily: themeFonts?.[700]
|
|
24
|
-
letterSpacing: 1
|
|
20
|
+
fontFamily: themeFonts?.[700]
|
|
25
21
|
},
|
|
26
22
|
5: {
|
|
27
23
|
fontSize: baseSize + 20,
|
|
28
|
-
fontFamily: themeFonts?.[700]
|
|
29
|
-
letterSpacing: 1
|
|
24
|
+
fontFamily: themeFonts?.[700]
|
|
30
25
|
},
|
|
31
26
|
6: {
|
|
32
27
|
fontSize: baseSize + 18,
|
|
33
|
-
fontFamily: themeFonts?.[700]
|
|
34
|
-
letterSpacing: 1
|
|
28
|
+
fontFamily: themeFonts?.[700]
|
|
35
29
|
}
|
|
36
30
|
},
|
|
37
31
|
title: {
|
|
38
32
|
1: {
|
|
39
33
|
fontSize: baseSize + 16,
|
|
40
|
-
fontFamily: themeFonts?.[700]
|
|
41
|
-
letterSpacing: 1
|
|
34
|
+
fontFamily: themeFonts?.[700]
|
|
42
35
|
},
|
|
43
36
|
2: {
|
|
44
37
|
fontSize: baseSize + 14,
|
|
45
|
-
fontFamily: themeFonts?.[700]
|
|
46
|
-
letterSpacing: 1
|
|
38
|
+
fontFamily: themeFonts?.[700]
|
|
47
39
|
},
|
|
48
40
|
3: {
|
|
49
41
|
fontSize: baseSize + 13,
|
|
50
|
-
fontFamily: themeFonts?.[700]
|
|
51
|
-
letterSpacing: 1
|
|
42
|
+
fontFamily: themeFonts?.[700]
|
|
52
43
|
},
|
|
53
44
|
4: {
|
|
54
45
|
fontSize: baseSize + 12,
|
|
55
|
-
fontFamily: themeFonts?.[700]
|
|
56
|
-
letterSpacing: 1
|
|
46
|
+
fontFamily: themeFonts?.[700]
|
|
57
47
|
},
|
|
58
48
|
5: {
|
|
59
49
|
fontSize: baseSize + 11,
|
|
60
|
-
fontFamily: themeFonts?.[700]
|
|
61
|
-
letterSpacing: 1
|
|
50
|
+
fontFamily: themeFonts?.[700]
|
|
62
51
|
},
|
|
63
52
|
6: {
|
|
64
53
|
fontSize: baseSize + 10,
|
|
65
|
-
fontFamily: themeFonts?.[700]
|
|
66
|
-
letterSpacing: 1
|
|
54
|
+
fontFamily: themeFonts?.[700]
|
|
67
55
|
}
|
|
68
56
|
},
|
|
69
57
|
subTitle: {
|
|
70
58
|
1: {
|
|
71
59
|
fontSize: baseSize + 16,
|
|
72
|
-
fontFamily: themeFonts?.[600]
|
|
73
|
-
letterSpacing: 1
|
|
60
|
+
fontFamily: themeFonts?.[600]
|
|
74
61
|
},
|
|
75
62
|
2: {
|
|
76
63
|
fontSize: baseSize + 14,
|
|
77
|
-
fontFamily: themeFonts?.[600]
|
|
78
|
-
letterSpacing: 1
|
|
64
|
+
fontFamily: themeFonts?.[600]
|
|
79
65
|
},
|
|
80
66
|
3: {
|
|
81
67
|
fontSize: baseSize + 13,
|
|
82
|
-
fontFamily: themeFonts?.[600]
|
|
83
|
-
letterSpacing: 1
|
|
68
|
+
fontFamily: themeFonts?.[600]
|
|
84
69
|
},
|
|
85
70
|
4: {
|
|
86
71
|
fontSize: baseSize + 12,
|
|
87
|
-
fontFamily: themeFonts?.[600]
|
|
88
|
-
letterSpacing: 1
|
|
72
|
+
fontFamily: themeFonts?.[600]
|
|
89
73
|
},
|
|
90
74
|
5: {
|
|
91
75
|
fontSize: baseSize + 11,
|
|
92
|
-
fontFamily: themeFonts?.[600]
|
|
93
|
-
letterSpacing: 1
|
|
76
|
+
fontFamily: themeFonts?.[600]
|
|
94
77
|
},
|
|
95
78
|
6: {
|
|
96
79
|
fontSize: baseSize + 10,
|
|
97
|
-
fontFamily: themeFonts?.[600]
|
|
98
|
-
letterSpacing: 1
|
|
80
|
+
fontFamily: themeFonts?.[600]
|
|
99
81
|
}
|
|
100
82
|
},
|
|
101
83
|
label: {
|
|
102
84
|
1: {
|
|
103
85
|
fontSize: baseSize + 16,
|
|
104
|
-
fontFamily: themeFonts?.[500]
|
|
105
|
-
letterSpacing: 1
|
|
86
|
+
fontFamily: themeFonts?.[500]
|
|
106
87
|
},
|
|
107
88
|
2: {
|
|
108
89
|
fontSize: baseSize + 14,
|
|
109
|
-
fontFamily: themeFonts?.[500]
|
|
110
|
-
letterSpacing: 1
|
|
90
|
+
fontFamily: themeFonts?.[500]
|
|
111
91
|
},
|
|
112
92
|
3: {
|
|
113
93
|
fontSize: baseSize + 13,
|
|
114
|
-
fontFamily: themeFonts?.[500]
|
|
115
|
-
letterSpacing: 1
|
|
94
|
+
fontFamily: themeFonts?.[500]
|
|
116
95
|
},
|
|
117
96
|
4: {
|
|
118
97
|
fontSize: baseSize + 12,
|
|
119
|
-
fontFamily: themeFonts?.[500]
|
|
120
|
-
letterSpacing: 1
|
|
98
|
+
fontFamily: themeFonts?.[500]
|
|
121
99
|
},
|
|
122
100
|
5: {
|
|
123
101
|
fontSize: baseSize + 11,
|
|
124
|
-
fontFamily: themeFonts?.[500]
|
|
125
|
-
letterSpacing: 1
|
|
102
|
+
fontFamily: themeFonts?.[500]
|
|
126
103
|
},
|
|
127
104
|
6: {
|
|
128
105
|
fontSize: baseSize + 10,
|
|
129
|
-
fontFamily: themeFonts?.[500]
|
|
130
|
-
letterSpacing: 1
|
|
106
|
+
fontFamily: themeFonts?.[500]
|
|
131
107
|
}
|
|
132
108
|
},
|
|
133
109
|
body: {
|
|
134
110
|
1: {
|
|
135
111
|
fontSize: baseSize + 16,
|
|
136
|
-
fontFamily: themeFonts?.[400]
|
|
137
|
-
letterSpacing: 1
|
|
112
|
+
fontFamily: themeFonts?.[400]
|
|
138
113
|
},
|
|
139
114
|
2: {
|
|
140
115
|
fontSize: baseSize + 14,
|
|
141
|
-
fontFamily: themeFonts?.[400]
|
|
142
|
-
letterSpacing: 1
|
|
116
|
+
fontFamily: themeFonts?.[400]
|
|
143
117
|
},
|
|
144
118
|
3: {
|
|
145
119
|
fontSize: baseSize + 13,
|
|
146
|
-
fontFamily: themeFonts?.[400]
|
|
147
|
-
letterSpacing: 1
|
|
120
|
+
fontFamily: themeFonts?.[400]
|
|
148
121
|
},
|
|
149
122
|
4: {
|
|
150
123
|
fontSize: baseSize + 12,
|
|
151
|
-
fontFamily: themeFonts?.[400]
|
|
152
|
-
letterSpacing: 1
|
|
124
|
+
fontFamily: themeFonts?.[400]
|
|
153
125
|
},
|
|
154
126
|
5: {
|
|
155
127
|
fontSize: baseSize + 11,
|
|
156
|
-
fontFamily: themeFonts?.[400]
|
|
157
|
-
letterSpacing: 1
|
|
128
|
+
fontFamily: themeFonts?.[400]
|
|
158
129
|
},
|
|
159
130
|
6: {
|
|
160
131
|
fontSize: baseSize + 10,
|
|
161
|
-
fontFamily: themeFonts?.[400]
|
|
162
|
-
letterSpacing: 1
|
|
132
|
+
fontFamily: themeFonts?.[400]
|
|
163
133
|
}
|
|
164
134
|
},
|
|
165
135
|
caption: {
|
|
166
136
|
1: {
|
|
167
137
|
fontSize: baseSize + 12,
|
|
168
|
-
fontFamily: themeFonts?.[400]
|
|
169
|
-
letterSpacing: 1
|
|
138
|
+
fontFamily: themeFonts?.[400]
|
|
170
139
|
},
|
|
171
140
|
2: {
|
|
172
141
|
fontSize: baseSize + 11,
|
|
173
|
-
fontFamily: themeFonts?.[400]
|
|
174
|
-
letterSpacing: 1
|
|
142
|
+
fontFamily: themeFonts?.[400]
|
|
175
143
|
},
|
|
176
144
|
3: {
|
|
177
145
|
fontSize: baseSize + 10,
|
|
178
|
-
fontFamily: themeFonts?.[400]
|
|
179
|
-
letterSpacing: 1
|
|
146
|
+
fontFamily: themeFonts?.[400]
|
|
180
147
|
},
|
|
181
148
|
4: {
|
|
182
149
|
fontSize: baseSize + 9,
|
|
183
|
-
fontFamily: themeFonts?.[400]
|
|
184
|
-
letterSpacing: 1
|
|
150
|
+
fontFamily: themeFonts?.[400]
|
|
185
151
|
},
|
|
186
152
|
5: {
|
|
187
153
|
fontSize: baseSize + 8,
|
|
188
|
-
fontFamily: themeFonts?.[400]
|
|
189
|
-
letterSpacing: 1
|
|
154
|
+
fontFamily: themeFonts?.[400]
|
|
190
155
|
},
|
|
191
156
|
6: {
|
|
192
157
|
fontSize: baseSize + 7,
|
|
193
|
-
fontFamily: themeFonts?.[400]
|
|
194
|
-
letterSpacing: 1
|
|
158
|
+
fontFamily: themeFonts?.[400]
|
|
195
159
|
}
|
|
196
160
|
},
|
|
197
161
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"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","sourcesContent":["import { ThemeFonts, TypographyVariantsProps } from \"./types\";\n\nconst baseSize = 0;\n\nexport default function typography({ themeFonts }: { themeFonts?: ThemeFonts }): TypographyVariantsProps {\n return {\n themeFonts: themeFonts,\n heading: {\n 1: {\n fontSize: baseSize + 36,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 2: {\n fontSize: baseSize + 32,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 3: {\n fontSize: baseSize + 28,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 4: {\n fontSize: baseSize + 24,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 5: {\n fontSize: baseSize + 20,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 6: {\n fontSize: baseSize + 18,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n }\n },\n title: {\n 1: {\n fontSize: baseSize + 16,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 2: {\n fontSize: baseSize + 14,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 3: {\n fontSize: baseSize + 13,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 4: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 5: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n },\n 6: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[700],\n letterSpacing: 1\n }\n },\n subTitle: {\n 1: {\n fontSize: baseSize + 16,\n fontFamily: themeFonts?.[600],\n letterSpacing: 1\n },\n 2: {\n fontSize: baseSize + 14,\n fontFamily: themeFonts?.[600],\n letterSpacing: 1\n },\n 3: {\n fontSize: baseSize + 13,\n fontFamily: themeFonts?.[600],\n letterSpacing: 1\n },\n 4: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[600],\n letterSpacing: 1\n },\n 5: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[600],\n letterSpacing: 1\n },\n 6: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[600],\n letterSpacing: 1\n }\n },\n label: {\n 1: {\n fontSize: baseSize + 16,\n fontFamily: themeFonts?.[500],\n letterSpacing: 1\n },\n 2: {\n fontSize: baseSize + 14,\n fontFamily: themeFonts?.[500],\n letterSpacing: 1\n },\n 3: {\n fontSize: baseSize + 13,\n fontFamily: themeFonts?.[500],\n letterSpacing: 1\n },\n 4: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[500],\n letterSpacing: 1\n },\n 5: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[500],\n letterSpacing: 1\n },\n 6: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[500],\n letterSpacing: 1\n }\n },\n body: {\n 1: {\n fontSize: baseSize + 16,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 2: {\n fontSize: baseSize + 14,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 3: {\n fontSize: baseSize + 13,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 4: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 5: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 6: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n }\n },\n caption: {\n 1: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 2: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 3: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 4: {\n fontSize: baseSize + 9,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 5: {\n fontSize: baseSize + 8,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n },\n 6: {\n fontSize: baseSize + 7,\n fontFamily: themeFonts?.[400],\n letterSpacing: 1\n }\n },\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"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","sourcesContent":["import { ThemeFonts, TypographyVariantsProps } from \"./types\";\n\nconst baseSize = 0;\n\nexport default function typography({ themeFonts }: { themeFonts?: ThemeFonts }): TypographyVariantsProps {\n return {\n themeFonts: themeFonts,\n heading: {\n 1: {\n fontSize: baseSize + 36,\n fontFamily: themeFonts?.[700]\n },\n 2: {\n fontSize: baseSize + 32,\n fontFamily: themeFonts?.[700]\n },\n 3: {\n fontSize: baseSize + 28,\n fontFamily: themeFonts?.[700]\n },\n 4: {\n fontSize: baseSize + 24,\n fontFamily: themeFonts?.[700]\n },\n 5: {\n fontSize: baseSize + 20,\n fontFamily: themeFonts?.[700]\n },\n 6: {\n fontSize: baseSize + 18,\n fontFamily: themeFonts?.[700]\n }\n },\n title: {\n 1: {\n fontSize: baseSize + 16,\n fontFamily: themeFonts?.[700]\n },\n 2: {\n fontSize: baseSize + 14,\n fontFamily: themeFonts?.[700]\n },\n 3: {\n fontSize: baseSize + 13,\n fontFamily: themeFonts?.[700]\n },\n 4: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[700]\n },\n 5: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[700]\n },\n 6: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[700]\n }\n },\n subTitle: {\n 1: {\n fontSize: baseSize + 16,\n fontFamily: themeFonts?.[600]\n },\n 2: {\n fontSize: baseSize + 14,\n fontFamily: themeFonts?.[600]\n },\n 3: {\n fontSize: baseSize + 13,\n fontFamily: themeFonts?.[600]\n },\n 4: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[600]\n },\n 5: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[600]\n },\n 6: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[600]\n }\n },\n label: {\n 1: {\n fontSize: baseSize + 16,\n fontFamily: themeFonts?.[500]\n },\n 2: {\n fontSize: baseSize + 14,\n fontFamily: themeFonts?.[500]\n },\n 3: {\n fontSize: baseSize + 13,\n fontFamily: themeFonts?.[500]\n },\n 4: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[500]\n },\n 5: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[500]\n },\n 6: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[500]\n }\n },\n body: {\n 1: {\n fontSize: baseSize + 16,\n fontFamily: themeFonts?.[400]\n },\n 2: {\n fontSize: baseSize + 14,\n fontFamily: themeFonts?.[400]\n },\n 3: {\n fontSize: baseSize + 13,\n fontFamily: themeFonts?.[400]\n },\n 4: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[400]\n },\n 5: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[400]\n },\n 6: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[400]\n }\n },\n caption: {\n 1: {\n fontSize: baseSize + 12,\n fontFamily: themeFonts?.[400]\n },\n 2: {\n fontSize: baseSize + 11,\n fontFamily: themeFonts?.[400]\n },\n 3: {\n fontSize: baseSize + 10,\n fontFamily: themeFonts?.[400]\n },\n 4: {\n fontSize: baseSize + 9,\n fontFamily: themeFonts?.[400]\n },\n 5: {\n fontSize: baseSize + 8,\n fontFamily: themeFonts?.[400]\n },\n 6: {\n fontSize: baseSize + 7,\n fontFamily: themeFonts?.[400]\n }\n },\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/G,OAAO,EAAoB,WAAW,EAAkC,aAAa,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/G,OAAO,EAAoB,WAAW,EAAkC,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAajH,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxC,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAkB,EAAE,IAAI,EAAE,UAAU,EAAE,OAAiB,EAAE,SAAiB,EAAE,QAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBA+C9J;;AAED,wBAAyC"}
|
|
@@ -3,26 +3,11 @@ import React from 'react';
|
|
|
3
3
|
import { Image } from 'react-native';
|
|
4
4
|
import { useTheme } from '../../context/ThemeContext';
|
|
5
5
|
import { resolveTextColor } from '../../theme/resolveColor';
|
|
6
|
+
import { PASTEL_TEXT_COLOR, SOLID_TEXT_COLOR, STROKE_TEXT_COLOR } from '../../theme/intentColors';
|
|
7
|
+
import { RADIUS } from '../../theme/tokens';
|
|
6
8
|
import ZSPressable from '../ZSPressable';
|
|
7
9
|
import ZSView from '../ZSView';
|
|
8
10
|
import ZSText from '../ZSText';
|
|
9
|
-
// variant 별 텍스트 색상 토큰 (intent 단위 예외값 포함)
|
|
10
|
-
const PASTEL_TEXT_COLOR = {
|
|
11
|
-
primary: 'primary.60',
|
|
12
|
-
danger: 'danger.60',
|
|
13
|
-
information: 'information.60',
|
|
14
|
-
success: 'success.60',
|
|
15
|
-
warning: 'warning.60',
|
|
16
|
-
grey: 'grey.70',
|
|
17
|
-
};
|
|
18
|
-
const STROKE_TEXT_COLOR = {
|
|
19
|
-
primary: 'primary.50',
|
|
20
|
-
danger: 'danger.50',
|
|
21
|
-
information: 'information.50',
|
|
22
|
-
success: 'success.50',
|
|
23
|
-
warning: 'warning.60',
|
|
24
|
-
grey: 'grey.60',
|
|
25
|
-
};
|
|
26
11
|
// typo 크기(subStyle)별 패딩
|
|
27
12
|
const PADDING_HORIZONTAL = { '1': 11, '2': 11, '3': 10, '4': 8, '5': 7, '6': 5 };
|
|
28
13
|
const PADDING_VERTICAL = { '1': 9, '2': 9, '3': 8, '4': 6, '5': 5, '6': 4 };
|
|
@@ -30,7 +15,7 @@ function ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefix
|
|
|
30
15
|
const { palette } = useTheme();
|
|
31
16
|
const size = typo.split('.')[1];
|
|
32
17
|
const colors = variant === 'solid'
|
|
33
|
-
? { backgroundColor: `${intent}.50`, textColor:
|
|
18
|
+
? { backgroundColor: `${intent}.50`, textColor: SOLID_TEXT_COLOR[intent], borderColor: undefined, borderWidth: 0 }
|
|
34
19
|
: variant === 'pastel'
|
|
35
20
|
? { backgroundColor: `${intent}.10`, textColor: PASTEL_TEXT_COLOR[intent], borderColor: undefined, borderWidth: 0 }
|
|
36
21
|
: { backgroundColor: 'transparent', textColor: STROKE_TEXT_COLOR[intent], borderColor: palette[intent][50], borderWidth: 1 };
|
|
@@ -40,7 +25,7 @@ function ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefix
|
|
|
40
25
|
return (_jsx(ZSPressable, { onPress: onPress, style: style, isLoading: isLoading, disabled: disabled, ...props, children: _jsxs(ZSView, { style: {
|
|
41
26
|
paddingHorizontal,
|
|
42
27
|
paddingVertical,
|
|
43
|
-
borderRadius:
|
|
28
|
+
borderRadius: RADIUS.sm,
|
|
44
29
|
justifyContent: 'center',
|
|
45
30
|
alignItems: 'center',
|
|
46
31
|
flexDirection: 'row',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAA4E,MAAM,cAAc,CAAC;AAE/G,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBlockButton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Image, type ImageSourcePropType, type StyleProp, type ViewStyle, type ViewProps } from 'react-native';\nimport { TypoColorOptions, TypoOptions, TypoSubStyle, ViewColorOptions, IntentOptions } from '../../theme/types';\nimport { useTheme } from '../../context/ThemeContext';\nimport { resolveTextColor } from '../../theme/resolveColor';\nimport { PASTEL_TEXT_COLOR, SOLID_TEXT_COLOR, STROKE_TEXT_COLOR } from '../../theme/intentColors';\nimport { RADIUS } from '../../theme/tokens';\nimport ZSPressable from '../ZSPressable';\nimport ZSView from '../ZSView';\nimport ZSText from '../ZSText';\n\n// typo 크기(subStyle)별 패딩\nconst PADDING_HORIZONTAL: Record<TypoSubStyle, number> = { '1': 11, '2': 11, '3': 10, '4': 8, '5': 7, '6': 5 };\nconst PADDING_VERTICAL: Record<TypoSubStyle, number> = { '1': 9, '2': 9, '3': 8, '4': 6, '5': 5, '6': 4 };\n\ntype Props = ViewProps & {\n onPress: () => void;\n style?: StyleProp<ViewStyle>;\n title: string;\n intent?: IntentOptions;\n variant?: 'solid' | 'pastel' | 'stroke';\n typo: TypoOptions;\n prefixIcon?: ImageSourcePropType;\n isLoading?: boolean;\n disabled?: boolean;\n};\n\nfunction ZSBlockButton({ onPress, style, title, intent = 'primary', typo, prefixIcon, variant = 'solid', isLoading = false, disabled = false, ...props }: Props) {\n const { palette } = useTheme();\n const size = typo.split('.')[1] as TypoSubStyle;\n\n const colors: {\n backgroundColor: ViewColorOptions | 'transparent';\n textColor: TypoColorOptions;\n borderColor?: string;\n borderWidth: number;\n } = variant === 'solid'\n ? { backgroundColor: `${intent}.50` as ViewColorOptions, textColor: SOLID_TEXT_COLOR[intent], borderColor: undefined, borderWidth: 0 }\n : variant === 'pastel'\n ? { backgroundColor: `${intent}.10` as ViewColorOptions, textColor: PASTEL_TEXT_COLOR[intent], borderColor: undefined, borderWidth: 0 }\n : { backgroundColor: 'transparent', textColor: STROKE_TEXT_COLOR[intent], borderColor: palette[intent][50], borderWidth: 1 };\n\n const paddingHorizontal = PADDING_HORIZONTAL[size] ?? 10;\n const paddingVertical = PADDING_VERTICAL[size] ?? 8;\n const textColorValue = resolveTextColor(palette, colors.textColor);\n\n return (\n <ZSPressable onPress={onPress} style={style} isLoading={isLoading} disabled={disabled} {...props}>\n <ZSView\n style={{\n paddingHorizontal,\n paddingVertical,\n borderRadius: RADIUS.sm,\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'row',\n gap: 4,\n backgroundColor: colors.backgroundColor === 'transparent' ? 'transparent' : undefined,\n borderColor: colors.borderColor,\n borderWidth: colors.borderWidth,\n }}\n color={colors.backgroundColor !== 'transparent' ? colors.backgroundColor : undefined}\n >\n {prefixIcon && (\n <Image\n style={{ width: 12, height: 12, marginTop: 1 }}\n tintColor={textColorValue}\n source={prefixIcon}\n />\n )}\n <ZSText color={colors.textColor} typo={typo}>{title}</ZSText>\n </ZSView>\n </ZSPressable>\n );\n}\n\nexport default React.memo(ZSBlockButton);\n"]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
|
|
3
|
+
/** glow를 세밀하게 제어할 때 사용하는 설정 (숫자 하나로 충분하면 glow={0~1} 사용) */
|
|
4
|
+
export interface ZSBorderBeamGlowConfig {
|
|
5
|
+
/** 글로우가 stroke 바깥으로 퍼지는 폭(px) */
|
|
6
|
+
width?: number;
|
|
7
|
+
/** blur 강도 */
|
|
8
|
+
blur?: number;
|
|
9
|
+
/** 숨쉬는 한 사이클(ms) */
|
|
10
|
+
pulseDuration?: number;
|
|
11
|
+
minOpacity?: number;
|
|
12
|
+
maxOpacity?: number;
|
|
13
|
+
}
|
|
14
|
+
export interface ZSBorderBeamProps extends ViewProps {
|
|
15
|
+
children?: React.ReactNode;
|
|
16
|
+
/** sweep gradient 색상 배열 (꼬리 → 머리 순) — 지정 시 colorFrom/colorTo는 무시됩니다 */
|
|
17
|
+
colors?: string[];
|
|
18
|
+
/** 광선 시작(꼬리) 색상 (기본: palette.primary.main) */
|
|
19
|
+
colorFrom?: string;
|
|
20
|
+
/** 광선 끝(머리) 색상 (기본: palette.secondary.main) */
|
|
21
|
+
colorTo?: string;
|
|
22
|
+
/** 광선(혜성)이 둘레에서 차지하는 비율 (0~1). 1이면 둘레 전체 그라디언트 링 */
|
|
23
|
+
beamLength?: number;
|
|
24
|
+
/** 광선이 지나가지 않는 구간의 얇은 기본 테두리 색. 'none'이면 표시 안 함 (기본: colorFrom 12% 알파) */
|
|
25
|
+
trackColor?: string;
|
|
26
|
+
/**
|
|
27
|
+
* 글로우 강도.
|
|
28
|
+
* - `false` : 글로우 없음 (선명한 광선만)
|
|
29
|
+
* - `0~1` : 숫자 하나로 폭·blur·불투명도를 함께 스케일 (기본 0.5)
|
|
30
|
+
* - config : 세밀 제어 — { width, blur, pulseDuration, minOpacity, maxOpacity }
|
|
31
|
+
*/
|
|
32
|
+
glow?: boolean | number | ZSBorderBeamGlowConfig;
|
|
33
|
+
/** 광선이 한 바퀴 도는 시간(ms) */
|
|
34
|
+
duration?: number;
|
|
35
|
+
/** 애니메이션 시작 지연(ms) */
|
|
36
|
+
delay?: number;
|
|
37
|
+
/** 회전 방향 반전 */
|
|
38
|
+
reverse?: boolean;
|
|
39
|
+
/** false면 효과를 숨기고 애니메이션을 정지 */
|
|
40
|
+
active?: boolean;
|
|
41
|
+
borderWidth?: number;
|
|
42
|
+
borderRadius?: number;
|
|
43
|
+
style?: StyleProp<ViewStyle>;
|
|
44
|
+
}
|
|
45
|
+
declare function ZSBorderBeam({ children, colors, colorFrom, colorTo, beamLength, trackColor, glow, duration, delay, reverse, active, borderWidth, borderRadius, style, ...props }: ZSBorderBeamProps): React.JSX.Element;
|
|
46
|
+
declare const _default: React.MemoExoticComponent<typeof ZSBorderBeam>;
|
|
47
|
+
export default _default;
|
|
48
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBorderBeam/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAA4C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAkBxH,2DAA2D;AAC3D,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,sBAAsB,CAAC;IACjD,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgDD,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,UAAiB,EACjB,UAAU,EACV,IAAW,EACX,QAAe,EACf,KAAS,EACT,OAAe,EACf,MAAa,EACb,WAAe,EACf,YAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAwKnB;;AAED,wBAAwC"}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React, { useEffect, useMemo, useState } from "react";
|
|
3
|
+
import { StyleSheet, View } from "react-native";
|
|
4
|
+
import { Blur, Canvas, Group, RoundedRect, SweepGradient, vec } from "@shopify/react-native-skia";
|
|
5
|
+
import { Easing, cancelAnimation, interpolate, useDerivedValue, useSharedValue, withDelay, withRepeat, withTiming, } from "react-native-reanimated";
|
|
6
|
+
import { useTheme } from "../../context/ThemeContext";
|
|
7
|
+
const FULL_ROTATION_RADIANS = Math.PI * 2;
|
|
8
|
+
const DEFAULT_GLOW_INTENSITY = 0.5;
|
|
9
|
+
const GLOW_PULSE_DURATION = 2400;
|
|
10
|
+
/** #RGB / #RRGGBB hex에만 알파를 붙이고, 그 외 형식은 null 반환 */
|
|
11
|
+
const withAlpha = (color, alphaHex) => {
|
|
12
|
+
if (/^#[0-9a-fA-F]{6}$/.test(color))
|
|
13
|
+
return `${color}${alphaHex}`;
|
|
14
|
+
if (/^#[0-9a-fA-F]{3}$/.test(color)) {
|
|
15
|
+
const [r, g, b] = color.slice(1);
|
|
16
|
+
return `#${r}${r}${g}${g}${b}${b}${alphaHex}`;
|
|
17
|
+
}
|
|
18
|
+
return null;
|
|
19
|
+
};
|
|
20
|
+
/** 색상의 완전 투명 버전 (hue 유지 → blur 시 색 번짐이 자연스러움) */
|
|
21
|
+
const transparentize = (color) => withAlpha(color, "00") ?? "#00000000";
|
|
22
|
+
const resolveGlow = (glow) => {
|
|
23
|
+
if (glow === false || glow === 0)
|
|
24
|
+
return null;
|
|
25
|
+
const intensity = typeof glow === "number" ? Math.min(Math.max(glow, 0), 1) : DEFAULT_GLOW_INTENSITY;
|
|
26
|
+
const maxOpacity = 0.3 + 0.6 * intensity;
|
|
27
|
+
const scaled = {
|
|
28
|
+
width: 16 * intensity,
|
|
29
|
+
blur: 20 * intensity,
|
|
30
|
+
pulseDuration: GLOW_PULSE_DURATION,
|
|
31
|
+
minOpacity: maxOpacity * 0.58,
|
|
32
|
+
maxOpacity,
|
|
33
|
+
};
|
|
34
|
+
if (typeof glow === "object") {
|
|
35
|
+
return {
|
|
36
|
+
width: glow.width ?? scaled.width,
|
|
37
|
+
blur: glow.blur ?? scaled.blur,
|
|
38
|
+
pulseDuration: glow.pulseDuration ?? scaled.pulseDuration,
|
|
39
|
+
minOpacity: glow.minOpacity ?? scaled.minOpacity,
|
|
40
|
+
maxOpacity: glow.maxOpacity ?? scaled.maxOpacity,
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
return scaled;
|
|
44
|
+
};
|
|
45
|
+
function ZSBorderBeam({ children, colors, colorFrom, colorTo, beamLength = 0.35, trackColor, glow = true, duration = 5000, delay = 0, reverse = false, active = true, borderWidth = 2, borderRadius = 14, style, ...props }) {
|
|
46
|
+
const { palette } = useTheme();
|
|
47
|
+
const [layout, setLayout] = useState({ width: 0, height: 0 });
|
|
48
|
+
const rotationProgress = useSharedValue(0);
|
|
49
|
+
const glowProgress = useSharedValue(0);
|
|
50
|
+
const from = colorFrom || palette.primary.main;
|
|
51
|
+
const to = colorTo || palette.secondary.main;
|
|
52
|
+
const glowSettings = resolveGlow(glow);
|
|
53
|
+
// 혜성 형태: 꼬리(투명)에서 머리(선명)로 갈수록 밝아지고, 머리 직후 짧게 컷오프.
|
|
54
|
+
// beamLength < 1이면 positions로 광선을 둘레 일부에만 압축한다.
|
|
55
|
+
const beam = useMemo(() => {
|
|
56
|
+
const length = Math.min(Math.max(beamLength, 0.05), 1);
|
|
57
|
+
const base = colors && colors.length >= 2
|
|
58
|
+
? colors
|
|
59
|
+
: [transparentize(from), withAlpha(from, "66") ?? from, from, to];
|
|
60
|
+
if (length >= 1) {
|
|
61
|
+
const ring = colors && colors.length >= 2 ? colors : [...base, transparentize(to)];
|
|
62
|
+
return { colors: ring, positions: undefined };
|
|
63
|
+
}
|
|
64
|
+
const head = base[base.length - 1] ?? to;
|
|
65
|
+
const step = length / (base.length - 1);
|
|
66
|
+
return {
|
|
67
|
+
colors: [...base, transparentize(head), transparentize(head)],
|
|
68
|
+
positions: [...base.map((_, index) => index * step), Math.min(length + 0.02, 1), 1],
|
|
69
|
+
};
|
|
70
|
+
}, [colors, from, to, beamLength]);
|
|
71
|
+
const resolvedTrackColor = trackColor === "none" ? null : trackColor ?? withAlpha(from, "1F") ?? "#8080801F";
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
if (!active)
|
|
74
|
+
return;
|
|
75
|
+
rotationProgress.value = 0;
|
|
76
|
+
rotationProgress.value = withDelay(delay, withRepeat(withTiming(1, { duration, easing: Easing.linear }), -1, false));
|
|
77
|
+
return () => cancelAnimation(rotationProgress);
|
|
78
|
+
}, [active, duration, delay, reverse]);
|
|
79
|
+
const glowPulseDuration = glowSettings?.pulseDuration;
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
if (!active || !glowPulseDuration)
|
|
82
|
+
return;
|
|
83
|
+
glowProgress.value = 0;
|
|
84
|
+
glowProgress.value = withDelay(delay, withRepeat(withTiming(1, { duration: glowPulseDuration, easing: Easing.inOut(Easing.ease) }), -1, true));
|
|
85
|
+
return () => cancelAnimation(glowProgress);
|
|
86
|
+
}, [active, delay, glowPulseDuration]);
|
|
87
|
+
const handleLayout = (event) => {
|
|
88
|
+
const { width, height } = event.nativeEvent.layout;
|
|
89
|
+
setLayout((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));
|
|
90
|
+
};
|
|
91
|
+
const glowPadding = glowSettings ? Math.ceil(glowSettings.blur + glowSettings.width) : 0;
|
|
92
|
+
const canvasWidth = layout.width + glowPadding * 2;
|
|
93
|
+
const canvasHeight = layout.height + glowPadding * 2;
|
|
94
|
+
const hasLayout = layout.width > 0 && layout.height > 0;
|
|
95
|
+
const frameX = glowPadding + borderWidth / 2;
|
|
96
|
+
const frameY = glowPadding + borderWidth / 2;
|
|
97
|
+
const frameWidth = Math.max(layout.width - borderWidth, 0);
|
|
98
|
+
const frameHeight = Math.max(layout.height - borderWidth, 0);
|
|
99
|
+
const frameRadius = Math.min(Math.max(borderRadius - borderWidth / 2, 0), Math.min(frameWidth, frameHeight) / 2);
|
|
100
|
+
const centerVector = useMemo(() => vec(canvasWidth / 2, canvasHeight / 2), [canvasWidth, canvasHeight]);
|
|
101
|
+
const direction = reverse ? -1 : 1;
|
|
102
|
+
const glowMinOpacity = glowSettings?.minOpacity ?? 0;
|
|
103
|
+
const glowMaxOpacity = glowSettings?.maxOpacity ?? 0;
|
|
104
|
+
const glowWidth = glowSettings?.width ?? 0;
|
|
105
|
+
const gradientTransform = useDerivedValue(() => [
|
|
106
|
+
{ rotate: direction * FULL_ROTATION_RADIANS * rotationProgress.value },
|
|
107
|
+
]);
|
|
108
|
+
const glowOpacity = useDerivedValue(() => interpolate(glowProgress.value, [0, 1], [glowMinOpacity, glowMaxOpacity]));
|
|
109
|
+
const glowStrokeWidth = useDerivedValue(() => interpolate(glowProgress.value, [0, 1], [borderWidth + glowWidth * 0.6, borderWidth + glowWidth]));
|
|
110
|
+
const beamGradient = (_jsx(SweepGradient, { origin: centerVector, c: centerVector, colors: beam.colors, positions: beam.positions, transform: gradientTransform }));
|
|
111
|
+
return (_jsxs(View, { style: [styles.container, style], ...props, children: [active && hasLayout && (_jsxs(Canvas, { pointerEvents: "none", style: [
|
|
112
|
+
styles.canvas,
|
|
113
|
+
{
|
|
114
|
+
width: canvasWidth,
|
|
115
|
+
height: canvasHeight,
|
|
116
|
+
top: -glowPadding,
|
|
117
|
+
left: -glowPadding,
|
|
118
|
+
},
|
|
119
|
+
], children: [resolvedTrackColor && (_jsx(RoundedRect, { x: frameX, y: frameY, width: frameWidth, height: frameHeight, r: frameRadius, style: "stroke", strokeWidth: borderWidth, color: resolvedTrackColor })), glowSettings && (_jsxs(Group, { children: [_jsx(RoundedRect, { x: frameX, y: frameY, width: frameWidth, height: frameHeight, r: frameRadius, style: "stroke", strokeWidth: glowStrokeWidth, opacity: glowOpacity, children: beamGradient }), _jsx(Blur, { blur: glowSettings.blur })] })), _jsx(RoundedRect, { x: frameX, y: frameY, width: frameWidth, height: frameHeight, r: frameRadius, style: "stroke", strokeWidth: borderWidth, children: beamGradient })] })), _jsx(View, { onLayout: handleLayout, style: [styles.content, { borderRadius }], children: children })] }));
|
|
120
|
+
}
|
|
121
|
+
export default React.memo(ZSBorderBeam);
|
|
122
|
+
const styles = StyleSheet.create({
|
|
123
|
+
container: {
|
|
124
|
+
alignSelf: "stretch",
|
|
125
|
+
position: "relative",
|
|
126
|
+
},
|
|
127
|
+
canvas: {
|
|
128
|
+
position: "absolute",
|
|
129
|
+
},
|
|
130
|
+
content: {
|
|
131
|
+
position: "relative",
|
|
132
|
+
overflow: "hidden",
|
|
133
|
+
},
|
|
134
|
+
});
|
|
135
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBorderBeam/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { StyleSheet, View, type LayoutChangeEvent, type StyleProp, type ViewProps, type ViewStyle } from \"react-native\";\nimport { Blur, Canvas, Group, RoundedRect, SweepGradient, vec } from \"@shopify/react-native-skia\";\nimport {\n Easing,\n cancelAnimation,\n interpolate,\n useDerivedValue,\n useSharedValue,\n withDelay,\n withRepeat,\n withTiming,\n} from \"react-native-reanimated\";\nimport { useTheme } from \"../../context/ThemeContext\";\n\nconst FULL_ROTATION_RADIANS = Math.PI * 2;\nconst DEFAULT_GLOW_INTENSITY = 0.5;\nconst GLOW_PULSE_DURATION = 2400;\n\n/** glow를 세밀하게 제어할 때 사용하는 설정 (숫자 하나로 충분하면 glow={0~1} 사용) */\nexport interface ZSBorderBeamGlowConfig {\n /** 글로우가 stroke 바깥으로 퍼지는 폭(px) */\n width?: number;\n /** blur 강도 */\n blur?: number;\n /** 숨쉬는 한 사이클(ms) */\n pulseDuration?: number;\n minOpacity?: number;\n maxOpacity?: number;\n}\n\nexport interface ZSBorderBeamProps extends ViewProps {\n children?: React.ReactNode;\n /** sweep gradient 색상 배열 (꼬리 → 머리 순) — 지정 시 colorFrom/colorTo는 무시됩니다 */\n colors?: string[];\n /** 광선 시작(꼬리) 색상 (기본: palette.primary.main) */\n colorFrom?: string;\n /** 광선 끝(머리) 색상 (기본: palette.secondary.main) */\n colorTo?: string;\n /** 광선(혜성)이 둘레에서 차지하는 비율 (0~1). 1이면 둘레 전체 그라디언트 링 */\n beamLength?: number;\n /** 광선이 지나가지 않는 구간의 얇은 기본 테두리 색. 'none'이면 표시 안 함 (기본: colorFrom 12% 알파) */\n trackColor?: string;\n /**\n * 글로우 강도.\n * - `false` : 글로우 없음 (선명한 광선만)\n * - `0~1` : 숫자 하나로 폭·blur·불투명도를 함께 스케일 (기본 0.5)\n * - config : 세밀 제어 — { width, blur, pulseDuration, minOpacity, maxOpacity }\n */\n glow?: boolean | number | ZSBorderBeamGlowConfig;\n /** 광선이 한 바퀴 도는 시간(ms) */\n duration?: number;\n /** 애니메이션 시작 지연(ms) */\n delay?: number;\n /** 회전 방향 반전 */\n reverse?: boolean;\n /** false면 효과를 숨기고 애니메이션을 정지 */\n active?: boolean;\n borderWidth?: number;\n borderRadius?: number;\n style?: StyleProp<ViewStyle>;\n}\n\n/** #RGB / #RRGGBB hex에만 알파를 붙이고, 그 외 형식은 null 반환 */\nconst withAlpha = (color: string, alphaHex: string): string | null => {\n if (/^#[0-9a-fA-F]{6}$/.test(color)) return `${color}${alphaHex}`;\n if (/^#[0-9a-fA-F]{3}$/.test(color)) {\n const [r, g, b] = color.slice(1);\n return `#${r}${r}${g}${g}${b}${b}${alphaHex}`;\n }\n return null;\n};\n\n/** 색상의 완전 투명 버전 (hue 유지 → blur 시 색 번짐이 자연스러움) */\nconst transparentize = (color: string): string => withAlpha(color, \"00\") ?? \"#00000000\";\n\ninterface GlowSettings {\n width: number;\n blur: number;\n pulseDuration: number;\n minOpacity: number;\n maxOpacity: number;\n}\n\nconst resolveGlow = (glow: ZSBorderBeamProps[\"glow\"]): GlowSettings | null => {\n if (glow === false || glow === 0) return null;\n\n const intensity = typeof glow === \"number\" ? Math.min(Math.max(glow, 0), 1) : DEFAULT_GLOW_INTENSITY;\n const maxOpacity = 0.3 + 0.6 * intensity;\n const scaled: GlowSettings = {\n width: 16 * intensity,\n blur: 20 * intensity,\n pulseDuration: GLOW_PULSE_DURATION,\n minOpacity: maxOpacity * 0.58,\n maxOpacity,\n };\n\n if (typeof glow === \"object\") {\n return {\n width: glow.width ?? scaled.width,\n blur: glow.blur ?? scaled.blur,\n pulseDuration: glow.pulseDuration ?? scaled.pulseDuration,\n minOpacity: glow.minOpacity ?? scaled.minOpacity,\n maxOpacity: glow.maxOpacity ?? scaled.maxOpacity,\n };\n }\n return scaled;\n};\n\nfunction ZSBorderBeam({\n children,\n colors,\n colorFrom,\n colorTo,\n beamLength = 0.35,\n trackColor,\n glow = true,\n duration = 5000,\n delay = 0,\n reverse = false,\n active = true,\n borderWidth = 2,\n borderRadius = 14,\n style,\n ...props\n}: ZSBorderBeamProps) {\n const { palette } = useTheme();\n const [layout, setLayout] = useState({ width: 0, height: 0 });\n const rotationProgress = useSharedValue(0);\n const glowProgress = useSharedValue(0);\n\n const from = colorFrom || palette.primary.main;\n const to = colorTo || palette.secondary.main;\n const glowSettings = resolveGlow(glow);\n\n // 혜성 형태: 꼬리(투명)에서 머리(선명)로 갈수록 밝아지고, 머리 직후 짧게 컷오프.\n // beamLength < 1이면 positions로 광선을 둘레 일부에만 압축한다.\n const beam = useMemo(() => {\n const length = Math.min(Math.max(beamLength, 0.05), 1);\n const base =\n colors && colors.length >= 2\n ? colors\n : [transparentize(from), withAlpha(from, \"66\") ?? from, from, to];\n\n if (length >= 1) {\n const ring = colors && colors.length >= 2 ? colors : [...base, transparentize(to)];\n return { colors: ring, positions: undefined };\n }\n\n const head = base[base.length - 1] ?? to;\n const step = length / (base.length - 1);\n return {\n colors: [...base, transparentize(head), transparentize(head)],\n positions: [...base.map((_, index) => index * step), Math.min(length + 0.02, 1), 1],\n };\n }, [colors, from, to, beamLength]);\n\n const resolvedTrackColor =\n trackColor === \"none\" ? null : trackColor ?? withAlpha(from, \"1F\") ?? \"#8080801F\";\n\n useEffect(() => {\n if (!active) return;\n\n rotationProgress.value = 0;\n rotationProgress.value = withDelay(\n delay,\n withRepeat(withTiming(1, { duration, easing: Easing.linear }), -1, false)\n );\n\n return () => cancelAnimation(rotationProgress);\n }, [active, duration, delay, reverse]);\n\n const glowPulseDuration = glowSettings?.pulseDuration;\n useEffect(() => {\n if (!active || !glowPulseDuration) return;\n\n glowProgress.value = 0;\n glowProgress.value = withDelay(\n delay,\n withRepeat(withTiming(1, { duration: glowPulseDuration, easing: Easing.inOut(Easing.ease) }), -1, true)\n );\n\n return () => cancelAnimation(glowProgress);\n }, [active, delay, glowPulseDuration]);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { width, height } = event.nativeEvent.layout;\n setLayout((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));\n };\n\n const glowPadding = glowSettings ? Math.ceil(glowSettings.blur + glowSettings.width) : 0;\n const canvasWidth = layout.width + glowPadding * 2;\n const canvasHeight = layout.height + glowPadding * 2;\n const hasLayout = layout.width > 0 && layout.height > 0;\n\n const frameX = glowPadding + borderWidth / 2;\n const frameY = glowPadding + borderWidth / 2;\n const frameWidth = Math.max(layout.width - borderWidth, 0);\n const frameHeight = Math.max(layout.height - borderWidth, 0);\n const frameRadius = Math.min(Math.max(borderRadius - borderWidth / 2, 0), Math.min(frameWidth, frameHeight) / 2);\n\n const centerVector = useMemo(() => vec(canvasWidth / 2, canvasHeight / 2), [canvasWidth, canvasHeight]);\n const direction = reverse ? -1 : 1;\n\n const glowMinOpacity = glowSettings?.minOpacity ?? 0;\n const glowMaxOpacity = glowSettings?.maxOpacity ?? 0;\n const glowWidth = glowSettings?.width ?? 0;\n\n const gradientTransform = useDerivedValue(() => [\n { rotate: direction * FULL_ROTATION_RADIANS * rotationProgress.value },\n ]);\n const glowOpacity = useDerivedValue(() =>\n interpolate(glowProgress.value, [0, 1], [glowMinOpacity, glowMaxOpacity])\n );\n const glowStrokeWidth = useDerivedValue(() =>\n interpolate(glowProgress.value, [0, 1], [borderWidth + glowWidth * 0.6, borderWidth + glowWidth])\n );\n\n const beamGradient = (\n <SweepGradient\n origin={centerVector}\n c={centerVector}\n colors={beam.colors}\n positions={beam.positions}\n transform={gradientTransform}\n />\n );\n\n return (\n <View style={[styles.container, style]} {...props}>\n {active && hasLayout && (\n <Canvas\n pointerEvents=\"none\"\n style={[\n styles.canvas,\n {\n width: canvasWidth,\n height: canvasHeight,\n top: -glowPadding,\n left: -glowPadding,\n },\n ]}\n >\n {resolvedTrackColor && (\n <RoundedRect\n x={frameX}\n y={frameY}\n width={frameWidth}\n height={frameHeight}\n r={frameRadius}\n style=\"stroke\"\n strokeWidth={borderWidth}\n color={resolvedTrackColor}\n />\n )}\n\n {glowSettings && (\n <Group>\n <RoundedRect\n x={frameX}\n y={frameY}\n width={frameWidth}\n height={frameHeight}\n r={frameRadius}\n style=\"stroke\"\n strokeWidth={glowStrokeWidth}\n opacity={glowOpacity}\n >\n {beamGradient}\n </RoundedRect>\n <Blur blur={glowSettings.blur} />\n </Group>\n )}\n\n <RoundedRect\n x={frameX}\n y={frameY}\n width={frameWidth}\n height={frameHeight}\n r={frameRadius}\n style=\"stroke\"\n strokeWidth={borderWidth}\n >\n {beamGradient}\n </RoundedRect>\n </Canvas>\n )}\n\n <View onLayout={handleLayout} style={[styles.content, { borderRadius }]}>\n {children}\n </View>\n </View>\n );\n}\n\nexport default React.memo(ZSBorderBeam);\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: \"stretch\",\n position: \"relative\",\n },\n canvas: {\n position: \"absolute\",\n },\n content: {\n position: \"relative\",\n overflow: \"hidden\",\n },\n});\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ViewProps } from 'react-native';
|
|
3
|
+
import { ZSTextProps } from '../ZSText';
|
|
4
|
+
export interface ZSCheckBoxProps extends ViewProps {
|
|
5
|
+
value: boolean;
|
|
6
|
+
onChange: (value: boolean) => void;
|
|
7
|
+
size?: number;
|
|
8
|
+
activeColor?: string;
|
|
9
|
+
label?: string;
|
|
10
|
+
labelStyle?: ZSTextProps;
|
|
11
|
+
labelComponent?: React.ReactNode;
|
|
12
|
+
moreComponent?: React.ReactNode;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare function ZSCheckBox({ value, onChange, size, activeColor, label, labelStyle, labelComponent, moreComponent, disabled, style, ...props }: ZSCheckBoxProps): React.JSX.Element;
|
|
16
|
+
declare const _default: React.MemoExoticComponent<typeof ZSCheckBox>;
|
|
17
|
+
export default _default;
|
|
18
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSCheckBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAyB,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAShD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,IAAS,EACT,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAAc,EACd,aAAa,EACb,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,qBA2CjB;;AA8BD,wBAAsC"}
|