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