@obolnetwork/obol-ui 1.0.1

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 (52) hide show
  1. package/README.md +34 -0
  2. package/dist/components/atoms/Box/Box.d.ts +472 -0
  3. package/dist/components/atoms/Button/Button.d.ts +495 -0
  4. package/dist/components/atoms/Link/Link.d.ts +493 -0
  5. package/dist/components/atoms/LoadingButton/LoadingButton.d.ts +8 -0
  6. package/dist/components/atoms/Spin/Spin.d.ts +476 -0
  7. package/dist/components/atoms/SvgIcon/SvgIcon.d.ts +480 -0
  8. package/dist/components/atoms/Tabs/Tabs.d.ts +1890 -0
  9. package/dist/components/atoms/Text/Text.d.ts +503 -0
  10. package/dist/components/atoms/index.d.ts +7 -0
  11. package/dist/components/icons/ArrowForward.d.ts +2 -0
  12. package/dist/components/icons/Download.d.ts +2 -0
  13. package/dist/components/icons/OpenInNew.d.ts +2 -0
  14. package/dist/components/icons/index.d.ts +11 -0
  15. package/dist/components/icons/static-icons/CodeIcon.d.ts +1 -0
  16. package/dist/components/icons/static-icons/MenuIcon.d.ts +1 -0
  17. package/dist/components/icons/static-icons/PublicGoodIcon.d.ts +1 -0
  18. package/dist/components/icons/static-icons/TrustMinimisedIcon.d.ts +1 -0
  19. package/dist/components/icons/static-icons/obol/circle/ObolDarkCircle.d.ts +1 -0
  20. package/dist/components/icons/static-icons/obol/circle/ObolLightCircle.d.ts +1 -0
  21. package/dist/components/icons/static-icons/obol/circle/index.d.ts +2 -0
  22. package/dist/components/icons/static-icons/obol/horizontal/ObolDarkBgH.d.ts +1 -0
  23. package/dist/components/icons/static-icons/obol/horizontal/ObolLightBgH.d.ts +1 -0
  24. package/dist/components/icons/static-icons/obol/horizontal/ObolSolidDarkBgH.d.ts +1 -0
  25. package/dist/components/icons/static-icons/obol/horizontal/ObolSolidLightBgH.d.ts +1 -0
  26. package/dist/components/icons/static-icons/obol/horizontal/index.d.ts +4 -0
  27. package/dist/components/icons/static-icons/obol/mark/ObolDarkBgMark.d.ts +1 -0
  28. package/dist/components/icons/static-icons/obol/mark/ObolLightBgMark.d.ts +1 -0
  29. package/dist/components/icons/static-icons/obol/mark/ObolSolidDarkBgMark.d.ts +1 -0
  30. package/dist/components/icons/static-icons/obol/mark/ObolSolidLightBgMark.d.ts +1 -0
  31. package/dist/components/icons/static-icons/obol/mark/index.d.ts +4 -0
  32. package/dist/components/icons/static-icons/obol/vertical/ObolDarkBgV.d.ts +1 -0
  33. package/dist/components/icons/static-icons/obol/vertical/ObolLightBgV.d.ts +1 -0
  34. package/dist/components/icons/static-icons/obol/vertical/ObolSolidDarkBgV.d.ts +1 -0
  35. package/dist/components/icons/static-icons/obol/vertical/ObolSolidLightBgV.d.ts +1 -0
  36. package/dist/components/icons/static-icons/obol/vertical/index.d.ts +4 -0
  37. package/dist/components/molecules/Card/Card.d.ts +9 -0
  38. package/dist/components/molecules/index.d.ts +1 -0
  39. package/dist/components/organisms/HeroSection/HeroSection.d.ts +14 -0
  40. package/dist/components/organisms/hero-section/hero-section.d.ts +14 -0
  41. package/dist/components/organisms/index.d.ts +1 -0
  42. package/dist/components/utils/color-variants.d.ts +59 -0
  43. package/dist/components/utils/hooks/index.d.ts +1 -0
  44. package/dist/components/utils/hooks/use-media-query.d.ts +10 -0
  45. package/dist/components/utils/styles.d.ts +472 -0
  46. package/dist/components/utils/types.d.ts +13 -0
  47. package/dist/index.d.ts +6 -0
  48. package/dist/index.es.js +933 -0
  49. package/dist/index.js +1002 -0
  50. package/dist/scripts/figma-colors.d.ts +1 -0
  51. package/dist/stitches.config.d.ts +3199 -0
  52. package/package.json +55 -0
@@ -0,0 +1,476 @@
1
+ import * as Stitches from "@stitches/react";
2
+ export declare const Spin: import("@stitches/react/types/styled-component").StyledComponent<"div", {
3
+ color?: "white" | "black" | "lightBackground" | "obolBlue" | "primaryBgDefault" | "primaryBgDefaultHover" | "primaryTextDefault" | "secondaryBgDefault" | "secondaryBgHover" | "grayBgDefault" | "gray2BgDefault" | "neutralDark" | "navButtonBgDefault" | "navButtonBgHover" | "cardBackgroundDark" | "cardBackgroundLight" | "textMiddle" | "textLight" | "textTabHover" | "textTabInactive" | "textGreenDark" | "textGreenLight" | "textGreen1" | "textGreen2" | "textGreen3" | "textGreenHover" | "textCreateHover" | "textGrayHover" | "txButton" | "obolGreen" | "obolGreenHover" | "obolGreenLight" | "obolDarkDark" | "obolDisabled" | "linkButtonHover" | "coordinate" | "coordinateHover" | "test" | "testHover" | "create" | "createHover" | "light" | "body" | "muted" | "menu" | "bg01" | "bg02" | "bg03" | "bg04" | "bg05" | undefined;
4
+ size?: "sm" | "md" | "lg" | "xl" | undefined;
5
+ }, {
6
+ motion: "(prefers-reduced-motion)";
7
+ hover: "(any-hover: hover)";
8
+ dark: "(prefers-color-scheme: dark)";
9
+ light: "(prefers-color-scheme: light)";
10
+ xs: "(max-width: 520px)";
11
+ sm: "(max-width: 900px)";
12
+ md: "(max-width: 1200px)";
13
+ lg: "(max-width: 1800px)";
14
+ }, import("@stitches/react/types/css-util").CSS<{
15
+ motion: "(prefers-reduced-motion)";
16
+ hover: "(any-hover: hover)";
17
+ dark: "(prefers-color-scheme: dark)";
18
+ light: "(prefers-color-scheme: light)";
19
+ xs: "(max-width: 520px)";
20
+ sm: "(max-width: 900px)";
21
+ md: "(max-width: 1200px)";
22
+ lg: "(max-width: 1800px)";
23
+ }, {
24
+ colors: {
25
+ white: string;
26
+ black: string;
27
+ lightBackground: string;
28
+ obolBlue: string;
29
+ primaryBgDefault: string;
30
+ primaryBgDefaultHover: string;
31
+ primaryTextDefault: string;
32
+ secondaryBgDefault: string;
33
+ secondaryBgHover: string;
34
+ grayBgDefault: string;
35
+ gray2BgDefault: string;
36
+ neutralDark: string;
37
+ navButtonBgDefault: string;
38
+ navButtonBgHover: string;
39
+ cardBackgroundDark: string;
40
+ cardBackgroundLight: string;
41
+ textMiddle: string;
42
+ textLight: string;
43
+ textTabHover: string;
44
+ textTabInactive: string;
45
+ textGreenDark: string;
46
+ textGreenLight: string;
47
+ textGreen1: string;
48
+ textGreen2: string;
49
+ textGreen3: string;
50
+ textGreenHover: string;
51
+ textCreateHover: string;
52
+ textGrayHover: string;
53
+ txButton: string;
54
+ obolGreen: string;
55
+ obolGreenHover: string;
56
+ obolGreenLight: string;
57
+ obolDarkDark: string;
58
+ obolDisabled: string;
59
+ linkButtonHover: string;
60
+ coordinate: string;
61
+ coordinateHover: string;
62
+ test: string;
63
+ testHover: string;
64
+ create: string;
65
+ createHover: string;
66
+ light: string;
67
+ body: string;
68
+ muted: string;
69
+ menu: string;
70
+ bg01: string;
71
+ bg02: string;
72
+ bg03: string;
73
+ bg04: string;
74
+ bg05: string;
75
+ };
76
+ space: {
77
+ 1: string;
78
+ 2: string;
79
+ xxxs: string;
80
+ xxs: string;
81
+ xs: string;
82
+ sm: string;
83
+ md: string;
84
+ lg: string;
85
+ xl: string;
86
+ "2xl": string;
87
+ "3xl": string;
88
+ "4xl": string;
89
+ "5xl": string;
90
+ "6xl": string;
91
+ "7xl": string;
92
+ };
93
+ sizes: {
94
+ 1: string;
95
+ 2: string;
96
+ xxxs: string;
97
+ xxs: string;
98
+ xs: string;
99
+ sm: string;
100
+ md: string;
101
+ lg: string;
102
+ xl: string;
103
+ "2xl": string;
104
+ "3xl": string;
105
+ "4xl": string;
106
+ "5xl": string;
107
+ "6xl": string;
108
+ "7xl": string;
109
+ max: string;
110
+ min: string;
111
+ full: string;
112
+ };
113
+ radii: {
114
+ 1: string;
115
+ 2: string;
116
+ 3: string;
117
+ 4: string;
118
+ 5: string;
119
+ round: string;
120
+ pill: string;
121
+ };
122
+ fontSizes: {
123
+ 1: string;
124
+ 2: string;
125
+ 3: string;
126
+ 4: string;
127
+ 5: string;
128
+ 6: string;
129
+ 7: string;
130
+ 8: string;
131
+ 9: string;
132
+ 10: string;
133
+ };
134
+ fontWeights: {
135
+ hairline: number;
136
+ thin: number;
137
+ light: number;
138
+ normal: number;
139
+ medium: number;
140
+ semibold: number;
141
+ bold: number;
142
+ extrabold: number;
143
+ black: number;
144
+ };
145
+ lineHeights: {
146
+ normal: string;
147
+ none: number;
148
+ shorter: number;
149
+ short: number;
150
+ base: number;
151
+ tall: number;
152
+ tall2: number;
153
+ taller: string;
154
+ };
155
+ letterSpacings: {
156
+ tighter: string;
157
+ tight: string;
158
+ normal: string;
159
+ wide: string;
160
+ wider: string;
161
+ widest: string;
162
+ };
163
+ borderWidths: unknown;
164
+ borderStyles: unknown;
165
+ shadows: unknown;
166
+ zIndices: unknown;
167
+ transitions: unknown;
168
+ }, import("@stitches/react/types/config").DefaultThemeMap, {
169
+ p: (value: {
170
+ readonly [Stitches.$$PropertyValue]: "padding";
171
+ }) => {
172
+ padding: {
173
+ readonly [Stitches.$$PropertyValue]: "padding";
174
+ };
175
+ };
176
+ pt: (value: {
177
+ readonly [Stitches.$$PropertyValue]: "paddingTop";
178
+ }) => {
179
+ paddingTop: {
180
+ readonly [Stitches.$$PropertyValue]: "paddingTop";
181
+ };
182
+ };
183
+ pr: (value: {
184
+ readonly [Stitches.$$PropertyValue]: "paddingRight";
185
+ }) => {
186
+ paddingRight: {
187
+ readonly [Stitches.$$PropertyValue]: "paddingRight";
188
+ };
189
+ };
190
+ pb: (value: {
191
+ readonly [Stitches.$$PropertyValue]: "paddingBottom";
192
+ }) => {
193
+ paddingBottom: {
194
+ readonly [Stitches.$$PropertyValue]: "paddingBottom";
195
+ };
196
+ };
197
+ pl: (value: {
198
+ readonly [Stitches.$$PropertyValue]: "paddingLeft";
199
+ }) => {
200
+ paddingLeft: {
201
+ readonly [Stitches.$$PropertyValue]: "paddingLeft";
202
+ };
203
+ };
204
+ px: (value: {
205
+ readonly [Stitches.$$PropertyValue]: "paddingLeft";
206
+ }) => {
207
+ paddingLeft: {
208
+ readonly [Stitches.$$PropertyValue]: "paddingLeft";
209
+ };
210
+ paddingRight: {
211
+ readonly [Stitches.$$PropertyValue]: "paddingLeft";
212
+ };
213
+ };
214
+ py: (value: {
215
+ readonly [Stitches.$$PropertyValue]: "paddingTop";
216
+ }) => {
217
+ paddingTop: {
218
+ readonly [Stitches.$$PropertyValue]: "paddingTop";
219
+ };
220
+ paddingBottom: {
221
+ readonly [Stitches.$$PropertyValue]: "paddingTop";
222
+ };
223
+ };
224
+ m: (value: {
225
+ readonly [Stitches.$$PropertyValue]: "margin";
226
+ }) => {
227
+ margin: {
228
+ readonly [Stitches.$$PropertyValue]: "margin";
229
+ };
230
+ };
231
+ mt: (value: {
232
+ readonly [Stitches.$$PropertyValue]: "marginTop";
233
+ }) => {
234
+ marginTop: {
235
+ readonly [Stitches.$$PropertyValue]: "marginTop";
236
+ };
237
+ };
238
+ mr: (value: {
239
+ readonly [Stitches.$$PropertyValue]: "marginRight";
240
+ }) => {
241
+ marginRight: {
242
+ readonly [Stitches.$$PropertyValue]: "marginRight";
243
+ };
244
+ };
245
+ mb: (value: {
246
+ readonly [Stitches.$$PropertyValue]: "marginBottom";
247
+ }) => {
248
+ marginBottom: {
249
+ readonly [Stitches.$$PropertyValue]: "marginBottom";
250
+ };
251
+ };
252
+ ml: (value: {
253
+ readonly [Stitches.$$PropertyValue]: "marginLeft";
254
+ }) => {
255
+ marginLeft: {
256
+ readonly [Stitches.$$PropertyValue]: "marginLeft";
257
+ };
258
+ };
259
+ mx: (value: {
260
+ readonly [Stitches.$$PropertyValue]: "marginLeft";
261
+ }) => {
262
+ marginLeft: {
263
+ readonly [Stitches.$$PropertyValue]: "marginLeft";
264
+ };
265
+ marginRight: {
266
+ readonly [Stitches.$$PropertyValue]: "marginLeft";
267
+ };
268
+ };
269
+ my: (value: {
270
+ readonly [Stitches.$$PropertyValue]: "marginTop";
271
+ }) => {
272
+ marginTop: {
273
+ readonly [Stitches.$$PropertyValue]: "marginTop";
274
+ };
275
+ marginBottom: {
276
+ readonly [Stitches.$$PropertyValue]: "marginTop";
277
+ };
278
+ };
279
+ ta: (value: {
280
+ readonly [Stitches.$$PropertyValue]: "textAlign";
281
+ }) => {
282
+ textAlign: {
283
+ readonly [Stitches.$$PropertyValue]: "textAlign";
284
+ };
285
+ };
286
+ fd: (value: {
287
+ readonly [Stitches.$$PropertyValue]: "flexDirection";
288
+ }) => {
289
+ flexDirection: {
290
+ readonly [Stitches.$$PropertyValue]: "flexDirection";
291
+ };
292
+ };
293
+ fw: (value: {
294
+ readonly [Stitches.$$PropertyValue]: "flexWrap";
295
+ }) => {
296
+ flexWrap: {
297
+ readonly [Stitches.$$PropertyValue]: "flexWrap";
298
+ };
299
+ };
300
+ ai: (value: {
301
+ readonly [Stitches.$$PropertyValue]: "alignItems";
302
+ }) => {
303
+ alignItems: {
304
+ readonly [Stitches.$$PropertyValue]: "alignItems";
305
+ };
306
+ };
307
+ ac: (value: {
308
+ readonly [Stitches.$$PropertyValue]: "alignContent";
309
+ }) => {
310
+ alignContent: {
311
+ readonly [Stitches.$$PropertyValue]: "alignContent";
312
+ };
313
+ };
314
+ jc: (value: {
315
+ readonly [Stitches.$$PropertyValue]: "justifyContent";
316
+ }) => {
317
+ justifyContent: {
318
+ readonly [Stitches.$$PropertyValue]: "justifyContent";
319
+ };
320
+ };
321
+ as: (value: {
322
+ readonly [Stitches.$$PropertyValue]: "alignSelf";
323
+ }) => {
324
+ alignSelf: {
325
+ readonly [Stitches.$$PropertyValue]: "alignSelf";
326
+ };
327
+ };
328
+ fg: (value: {
329
+ readonly [Stitches.$$PropertyValue]: "flexGrow";
330
+ }) => {
331
+ flexGrow: {
332
+ readonly [Stitches.$$PropertyValue]: "flexGrow";
333
+ };
334
+ };
335
+ fs: (value: {
336
+ readonly [Stitches.$$PropertyValue]: "flexShrink";
337
+ }) => {
338
+ flexShrink: {
339
+ readonly [Stitches.$$PropertyValue]: "flexShrink";
340
+ };
341
+ };
342
+ fb: (value: {
343
+ readonly [Stitches.$$PropertyValue]: "flexBasis";
344
+ }) => {
345
+ flexBasis: {
346
+ readonly [Stitches.$$PropertyValue]: "flexBasis";
347
+ };
348
+ };
349
+ bc: (value: {
350
+ readonly [Stitches.$$PropertyValue]: "backgroundColor";
351
+ }) => {
352
+ backgroundColor: {
353
+ readonly [Stitches.$$PropertyValue]: "backgroundColor";
354
+ };
355
+ };
356
+ br: (value: {
357
+ readonly [Stitches.$$PropertyValue]: "borderRadius";
358
+ }) => {
359
+ borderRadius: {
360
+ readonly [Stitches.$$PropertyValue]: "borderRadius";
361
+ };
362
+ };
363
+ btrr: (value: {
364
+ readonly [Stitches.$$PropertyValue]: "borderTopRightRadius";
365
+ }) => {
366
+ borderTopRightRadius: {
367
+ readonly [Stitches.$$PropertyValue]: "borderTopRightRadius";
368
+ };
369
+ };
370
+ bbrr: (value: {
371
+ readonly [Stitches.$$PropertyValue]: "borderBottomRightRadius";
372
+ }) => {
373
+ borderBottomRightRadius: {
374
+ readonly [Stitches.$$PropertyValue]: "borderBottomRightRadius";
375
+ };
376
+ };
377
+ bblr: (value: {
378
+ readonly [Stitches.$$PropertyValue]: "borderBottomLeftRadius";
379
+ }) => {
380
+ borderBottomLeftRadius: {
381
+ readonly [Stitches.$$PropertyValue]: "borderBottomLeftRadius";
382
+ };
383
+ };
384
+ btlr: (value: {
385
+ readonly [Stitches.$$PropertyValue]: "borderTopLeftRadius";
386
+ }) => {
387
+ borderTopLeftRadius: {
388
+ readonly [Stitches.$$PropertyValue]: "borderTopLeftRadius";
389
+ };
390
+ };
391
+ bs: (value: {
392
+ readonly [Stitches.$$PropertyValue]: "boxShadow";
393
+ }) => {
394
+ boxShadow: {
395
+ readonly [Stitches.$$PropertyValue]: "boxShadow";
396
+ };
397
+ };
398
+ lh: (value: {
399
+ readonly [Stitches.$$PropertyValue]: "lineHeight";
400
+ }) => {
401
+ lineHeight: {
402
+ readonly [Stitches.$$PropertyValue]: "lineHeight";
403
+ };
404
+ };
405
+ ox: (value: {
406
+ readonly [Stitches.$$PropertyValue]: "overflowX";
407
+ }) => {
408
+ overflowX: {
409
+ readonly [Stitches.$$PropertyValue]: "overflowX";
410
+ };
411
+ };
412
+ oy: (value: {
413
+ readonly [Stitches.$$PropertyValue]: "overflowY";
414
+ }) => {
415
+ overflowY: {
416
+ readonly [Stitches.$$PropertyValue]: "overflowY";
417
+ };
418
+ };
419
+ pe: (value: {
420
+ readonly [Stitches.$$PropertyValue]: "pointerEvents";
421
+ }) => {
422
+ pointerEvents: {
423
+ readonly [Stitches.$$PropertyValue]: "pointerEvents";
424
+ };
425
+ };
426
+ us: (value: {
427
+ readonly [Stitches.$$PropertyValue]: "userSelect";
428
+ }) => {
429
+ WebkitUserSelect: {
430
+ readonly [Stitches.$$PropertyValue]: "userSelect";
431
+ };
432
+ userSelect: {
433
+ readonly [Stitches.$$PropertyValue]: "userSelect";
434
+ };
435
+ };
436
+ userSelect: (value: {
437
+ readonly [Stitches.$$PropertyValue]: "userSelect";
438
+ }) => {
439
+ WebkitUserSelect: {
440
+ readonly [Stitches.$$PropertyValue]: "userSelect";
441
+ };
442
+ userSelect: {
443
+ readonly [Stitches.$$PropertyValue]: "userSelect";
444
+ };
445
+ };
446
+ size: (value: {
447
+ readonly [Stitches.$$PropertyValue]: "width";
448
+ }) => {
449
+ width: {
450
+ readonly [Stitches.$$PropertyValue]: "width";
451
+ };
452
+ height: {
453
+ readonly [Stitches.$$PropertyValue]: "width";
454
+ };
455
+ };
456
+ appearance: (value: {
457
+ readonly [Stitches.$$PropertyValue]: "appearance";
458
+ }) => {
459
+ WebkitAppearance: {
460
+ readonly [Stitches.$$PropertyValue]: "appearance";
461
+ };
462
+ appearance: {
463
+ readonly [Stitches.$$PropertyValue]: "appearance";
464
+ };
465
+ };
466
+ backgroundClip: (value: {
467
+ readonly [Stitches.$$PropertyValue]: "backgroundClip";
468
+ }) => {
469
+ WebkitBackgroundClip: {
470
+ readonly [Stitches.$$PropertyValue]: "backgroundClip";
471
+ };
472
+ backgroundClip: {
473
+ readonly [Stitches.$$PropertyValue]: "backgroundClip";
474
+ };
475
+ };
476
+ }>>;