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