@everlywell/ui-kit 0.0.3-menu-next → 0.2.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.
Files changed (19) hide show
  1. package/index.d.mts +0 -6
  2. package/index.d.ts +0 -6
  3. package/index.js +2 -2
  4. package/index.mjs +299 -67101
  5. package/lib/theme/actions/Button/Button.config.d.ts +9 -21
  6. package/lib/theme/foundations/colors.d.ts +63 -39
  7. package/lib/theme/index.d.ts +136 -302
  8. package/lib/theme/navigation/Link/Link.config.d.ts +2 -2
  9. package/lib/theme/typography/Text/Text.config.d.ts +2 -2
  10. package/package.json +1 -1
  11. package/lib/theme/actions/IconButton/IconButton.d.ts +0 -11
  12. package/lib/theme/actions/Menu/Menu.config.d.ts +0 -83
  13. package/lib/theme/actions/Menu/Menu.d.ts +0 -3
  14. package/lib/theme/media/Icon/Icon.config.d.ts +0 -21
  15. package/lib/theme/media/Icon/Icon.d.ts +0 -14
  16. package/lib/theme/navigation/Link/Link.d.ts +0 -3
  17. package/lib/theme/overlay/Drawer/Drawer.config.d.ts +0 -72
  18. package/lib/theme/overlay/Drawer/Drawer.d.ts +0 -3
  19. package/lib/theme/typography/Text/Text.d.ts +0 -3
package/lib/theme/index.d.ts CHANGED
@@ -1,11 +1,4 @@
1
1
  export declare const theme: {
2
- breakpoints: {
3
- mobile: string;
4
- tablet: string;
5
- largeTablet: string;
6
- desktop: string;
7
- largeDesktop: string;
8
- };
9
2
  fonts: {
10
3
  body: string;
11
4
  heading: string;
@@ -64,71 +57,61 @@ export declare const theme: {
64
57
  };
65
58
  space: {
66
59
  /**
67
- * Base unit: 4px
68
- * 1 rem = 16px
69
- *
70
- * Mental model:
71
- *
72
- * If you need a spacing of 40px, divide it by 4.
73
- * That'll give you 10. Then use it in your component.
60
+ * TODO: figure out best way to define spacing
61
+ * maybe do something like this?
62
+ * 0, 0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10
63
+ * 0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160
74
64
  */
75
65
  0: number;
76
- 0.5: string;
77
66
  1: string;
78
- 1.5: string;
79
67
  2: string;
80
68
  3: string;
81
69
  4: string;
82
70
  5: string;
83
71
  6: string;
72
+ 7: string;
84
73
  8: string;
74
+ 9: string;
85
75
  10: string;
86
- 12: string;
87
- 16: string;
88
- 20: string;
89
- };
90
- shadows: {
91
- xs: string;
92
- sm: string;
93
- base: string;
94
- md: string;
95
- lg: string;
96
- xl: string;
97
- '2xl': string;
98
- outline: string;
99
- inner: string;
100
- none: string;
101
- 'dark-lg': string;
102
- dialog: string;
103
- };
104
- zIndices: {
105
- hide: number;
106
- auto: string;
107
- base: number;
108
- docked: number;
109
- dropdown: number;
110
- sticky: number;
111
- banner: number;
112
- overlay: number;
113
- modal: number;
114
- popover: number;
115
- skipLink: number;
116
- toast: number;
117
- tooltip: number;
76
+ 11: string;
118
77
  };
119
78
  colors: {
120
- tints: {
121
- black: string;
79
+ white: {
80
+ base: string;
81
+ 50: string;
82
+ 100: string;
83
+ 200: string;
84
+ 300: string;
85
+ 400: string;
86
+ 500: string;
87
+ 600: string;
88
+ 700: string;
89
+ 800: string;
90
+ 900: string;
91
+ };
92
+ black: {
93
+ base: string;
94
+ 50: string;
95
+ 100: string;
96
+ 200: string;
97
+ 300: string;
98
+ 400: string;
99
+ 500: string;
100
+ 600: string;
101
+ 700: string;
102
+ 800: string;
103
+ 900: string;
104
+ };
105
+ grayscale: {
122
106
  darkGrey: string;
123
- uiGrey: string;
124
- medGrey: string;
107
+ grey: string;
108
+ mediumGrey: string;
125
109
  lightGrey: string;
126
110
  darkCream: string;
127
111
  cream: string;
128
112
  lightCream: string;
129
- white: string;
130
113
  };
131
- viridian: {
114
+ red: {
132
115
  50: string;
133
116
  100: string;
134
117
  200: string;
@@ -139,20 +122,20 @@ export declare const theme: {
139
122
  700: string;
140
123
  800: string;
141
124
  900: string;
142
- dark: string;
143
- base: string;
144
- light: string;
145
- lighter: string;
146
125
  wash: string;
147
- };
148
- sunshine: {
149
- dark: string;
150
- base: string;
151
- light: string;
152
126
  lighter: string;
127
+ light: string;
128
+ base: string;
129
+ dark: string;
130
+ };
131
+ yellow: {
153
132
  wash: string;
133
+ lighter: string;
134
+ light: string;
135
+ base: string;
136
+ dark: string;
154
137
  };
155
- terracotta: {
138
+ green: {
156
139
  50: string;
157
140
  100: string;
158
141
  200: string;
@@ -163,39 +146,39 @@ export declare const theme: {
163
146
  700: string;
164
147
  800: string;
165
148
  900: string;
166
- dark: string;
149
+ wash: string;
150
+ lighter: string;
151
+ light: string;
167
152
  base: string;
153
+ dark: string;
154
+ };
155
+ lightBlue: {
156
+ wash: string;
157
+ lighter: string;
168
158
  light: string;
159
+ base: string;
160
+ dark: string;
161
+ };
162
+ blue: {
163
+ wash: string;
169
164
  lighter: string;
165
+ light: string;
166
+ base: string;
167
+ dark: string;
168
+ };
169
+ indigo: {
170
170
  wash: string;
171
+ lighter: string;
172
+ light: string;
173
+ base: string;
174
+ dark: string;
171
175
  };
172
176
  violet: {
173
- dark: string;
174
- base: string;
175
- light: string;
176
- lighter: string;
177
177
  wash: string;
178
- };
179
- eggplant: {
180
- dark: string;
181
- base: string;
182
- light: string;
183
178
  lighter: string;
184
- wash: string;
185
- };
186
- moonlight: {
187
- dark: string;
188
- base: string;
189
179
  light: string;
190
- lighter: string;
191
- wash: string;
192
- };
193
- sky: {
194
- dark: string;
195
180
  base: string;
196
- light: string;
197
- lighter: string;
198
- wash: string;
181
+ dark: string;
199
182
  };
200
183
  };
201
184
  components: {
@@ -216,27 +199,18 @@ export declare const theme: {
216
199
  fontSize: ("md" | "lg")[];
217
200
  px: number[];
218
201
  py: number[];
219
- '&:has(> svg:only-child)': {
220
- px: number;
221
- py: number;
222
- svg: {
223
- fontSize: string;
224
- };
225
- };
226
- svg: {
227
- fontSize: string;
202
+ '.chakra-button__icon > svg': {
203
+ width: string;
204
+ height: string;
228
205
  };
229
206
  };
230
207
  md: {
231
208
  fontSize: ("lg" | "xl")[];
232
209
  px: number[];
233
210
  py: number[];
234
- '&:has(> svg:only-child)': {
235
- px: number[];
236
- py: number[];
237
- };
238
211
  svg: {
239
- fontSize: ("1.5rem" | "1.25rem")[];
212
+ width: ("1.25rem" | "1.5rem")[];
213
+ height: ("1.25rem" | "1.5rem")[];
240
214
  };
241
215
  };
242
216
  wide: {
@@ -244,12 +218,9 @@ export declare const theme: {
244
218
  px: number;
245
219
  py: number;
246
220
  width: string;
247
- '&:has(> svg:only-child)': {
248
- px: number;
249
- py: number;
250
- };
251
- svg: {
252
- fontSize: string;
221
+ '.chakra-button__icon > svg': {
222
+ width: string;
223
+ height: string;
253
224
  };
254
225
  };
255
226
  } | undefined;
@@ -287,81 +258,40 @@ export declare const theme: {
287
258
  };
288
259
  } | undefined;
289
260
  defaultProps?: {
290
- size?: "wide" | "sm" | "md" | undefined;
261
+ size?: "sm" | "md" | "wide" | undefined;
291
262
  variant?: "primary" | "secondary" | undefined;
292
263
  colorScheme?: string | undefined;
293
264
  } | undefined;
294
265
  };
295
- Drawer: {
266
+ Link: {
296
267
  baseStyle?: {
297
- overlay: {
298
- bg: string;
299
- backgroundImage: string;
300
- };
301
- dialogContainer: {
302
- zIndex: string;
303
- };
304
- dialog: {
305
- bg: string;
306
- pt: number[];
307
- display: string;
308
- flexDirection: string;
309
- alignItems: string;
310
- gap: number;
311
- boxShadow: string;
312
- };
313
- header: {
314
- px: number;
315
- display: string;
316
- flexDirection: string;
317
- justifyContent: string;
318
- alignItems: string;
319
- };
320
- closeButton: {
321
- bg: string;
322
- borderRadius: string;
323
- p: number;
324
- _hover: {
325
- bg: string;
326
- };
327
- '& .chakra-icon': {
328
- p: number;
329
- };
330
- };
331
- body: {
332
- px: number;
333
- flexGrow: number;
334
- };
335
- footer: {
336
- py: number;
337
- px: number;
268
+ color: string;
269
+ fontWeight: string;
270
+ _hover: {
271
+ textDecoration: string;
272
+ cursor: string;
338
273
  };
339
274
  } | undefined;
340
275
  sizes?: {
341
- partial: {
342
- dialog: {
343
- maxW: number;
344
- };
276
+ sm: {
277
+ fontSize: ("3xs" | "xs")[];
278
+ lineHeight: string;
345
279
  };
346
- full: {
347
- dialog: {
348
- maxW: string;
349
- minH: string;
350
- borderRadius: number;
351
- };
280
+ md: {
281
+ fontSize: ("sm" | "2xs")[];
282
+ lineHeight: string;
283
+ };
284
+ lg: {
285
+ fontSize: ("md" | "xs")[];
286
+ lineHeight: string;
352
287
  };
353
288
  } | undefined;
354
- variants?: {
355
- [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
356
- keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
357
- }>;
358
- } | undefined;
289
+ variants?: {} | undefined;
359
290
  defaultProps?: {
360
- size?: "full" | "partial" | undefined;
361
- variant?: string | number | undefined;
291
+ size?: "sm" | "md" | "lg" | undefined;
292
+ variant?: undefined;
362
293
  colorScheme?: string | undefined;
363
294
  } | undefined;
364
- parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
365
295
  };
366
296
  Heading: {
367
297
  baseStyle?: {
@@ -409,56 +339,6 @@ export declare const theme: {
409
339
  colorScheme?: string | undefined;
410
340
  } | undefined;
411
341
  };
412
- Icon: {
413
- baseStyle?: {} | undefined;
414
- sizes?: {
415
- sm: {
416
- fontSize: string;
417
- };
418
- md: {
419
- fontSize: string;
420
- };
421
- lg: {
422
- fontSize: string;
423
- };
424
- } | undefined;
425
- variants?: {} | undefined;
426
- defaultProps?: {
427
- size?: "sm" | "md" | "lg" | undefined;
428
- variant?: undefined;
429
- colorScheme?: string | undefined;
430
- } | undefined;
431
- };
432
- Link: {
433
- baseStyle?: {
434
- color: string;
435
- fontWeight: string;
436
- _hover: {
437
- textDecoration: string;
438
- cursor: string;
439
- };
440
- } | undefined;
441
- sizes?: {
442
- sm: {
443
- fontSize: ("3xs" | "xs")[];
444
- lineHeight: string;
445
- };
446
- md: {
447
- fontSize: ("2xs" | "sm")[];
448
- lineHeight: string;
449
- };
450
- lg: {
451
- fontSize: ("xs" | "md")[];
452
- lineHeight: string;
453
- };
454
- } | undefined;
455
- variants?: {} | undefined;
456
- defaultProps?: {
457
- size?: "sm" | "md" | "lg" | undefined;
458
- variant?: undefined;
459
- colorScheme?: string | undefined;
460
- } | undefined;
461
- };
462
342
  Text: {
463
343
  baseStyle?: {
464
344
  fontWeight: string;
@@ -472,7 +352,7 @@ export declare const theme: {
472
352
  fontSize: ("2xs" | "xs")[];
473
353
  };
474
354
  sm: {
475
- fontSize: ("xs" | "sm")[];
355
+ fontSize: ("sm" | "xs")[];
476
356
  };
477
357
  md: {
478
358
  fontSize: ("sm" | "md")[];
@@ -489,96 +369,27 @@ export declare const theme: {
489
369
  [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
490
370
  } | undefined;
491
371
  defaultProps?: {
492
- size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
372
+ size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
493
373
  variant?: string | number | undefined;
494
374
  colorScheme?: string | undefined;
495
375
  } | undefined;
496
376
  };
497
- Menu: {
498
- baseStyle?: {
499
- button: {};
500
- list: {
501
- boxShadow: string;
502
- backgroundColor: string;
503
- };
504
- item: {
505
- fontWeight: string;
506
- lineHeight: string;
507
- color: string;
508
- _hover: {
509
- backgroundColor: string;
510
- };
511
- _disabled: {
512
- backgroundColor: string;
513
- color: string;
514
- cursor: string;
515
- };
516
- };
517
- groupTitle: {
518
- color: string;
519
- letterSpacing: string;
520
- };
521
- command: {
522
- color: string;
523
- };
524
- divider: {
525
- borderColor: string;
526
- borderBottom: string;
527
- };
528
- } | undefined;
529
- sizes?: {
530
- sm: {
531
- button: {};
532
- item: {
533
- fontSize: ("sm" | "md")[];
534
- paddingY: string;
535
- paddingX: string;
536
- };
537
- groupTitle: {
538
- fontSize: ("md" | "lg")[];
539
- paddingY: string;
540
- paddingX: string;
541
- };
542
- divider: {
543
- marginY: string;
544
- };
545
- };
546
- md: {
547
- item: {
548
- fontSize: ("lg" | "xl")[];
549
- paddingY: string;
550
- paddingX: string;
551
- };
552
- groupTitle: {
553
- fontSize: ("xl" | "2xl")[];
554
- paddingY: string;
555
- paddingX: string;
556
- };
557
- };
558
- lg: {
559
- item: {
560
- fontSize: ("2xl" | "3xl")[];
561
- paddingX: string;
562
- paddingY: string;
563
- };
564
- groupTitle: {
565
- fontSize: ("4xl" | "5xl")[];
566
- paddingX: string;
567
- paddingY: string;
568
- };
569
- };
570
- } | undefined;
571
- variants?: {} | undefined;
572
- defaultProps?: {
573
- size?: "sm" | "md" | "lg" | undefined;
574
- variant?: undefined;
575
- colorScheme?: string | undefined;
576
- } | undefined;
577
- parts: ("button" | "list" | "item" | "groupTitle" | "command" | "divider")[];
578
- };
579
377
  };
580
378
  styles: import("@chakra-ui/theme-tools/dist/component").Styles;
581
379
  config: import("@chakra-ui/theme/dist/theme.types").ThemeConfig;
380
+ shadows: {
381
+ xs: string;
382
+ sm: string;
383
+ base: string;
384
+ md: string;
385
+ lg: string;
386
+ xl: string;
387
+ "2xl": string;
388
+ outline: string;
389
+ inner: string;
390
+ none: string;
391
+ "dark-lg": string;
392
+ };
582
393
  borders: {
583
394
  none: number;
584
395
  "1px": string;
@@ -609,6 +420,29 @@ export declare const theme: {
609
420
  "ultra-slow": string;
610
421
  };
611
422
  };
423
+ breakpoints: {
424
+ base: string;
425
+ sm: string;
426
+ md: string;
427
+ lg: string;
428
+ xl: string;
429
+ "2xl": string;
430
+ };
431
+ zIndices: {
432
+ hide: number;
433
+ auto: string;
434
+ base: number;
435
+ docked: number;
436
+ dropdown: number;
437
+ sticky: number;
438
+ banner: number;
439
+ overlay: number;
440
+ modal: number;
441
+ popover: number;
442
+ skipLink: number;
443
+ toast: number;
444
+ tooltip: number;
445
+ };
612
446
  radii: {
613
447
  none: string;
614
448
  sm: string;
package/lib/theme/navigation/Link/Link.config.d.ts CHANGED
@@ -13,11 +13,11 @@ declare const _default: {
13
13
  lineHeight: string;
14
14
  };
15
15
  md: {
16
- fontSize: ("2xs" | "sm")[];
16
+ fontSize: ("sm" | "2xs")[];
17
17
  lineHeight: string;
18
18
  };
19
19
  lg: {
20
- fontSize: ("xs" | "md")[];
20
+ fontSize: ("md" | "xs")[];
21
21
  lineHeight: string;
22
22
  };
23
23
  } | undefined;
package/lib/theme/typography/Text/Text.config.d.ts CHANGED
@@ -11,7 +11,7 @@ declare const _default: {
11
11
  fontSize: ("2xs" | "xs")[];
12
12
  };
13
13
  sm: {
14
- fontSize: ("xs" | "sm")[];
14
+ fontSize: ("sm" | "xs")[];
15
15
  };
16
16
  md: {
17
17
  fontSize: ("sm" | "md")[];
@@ -28,7 +28,7 @@ declare const _default: {
28
28
  [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
29
29
  } | undefined;
30
30
  defaultProps?: {
31
- size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
31
+ size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
32
32
  variant?: string | number | undefined;
33
33
  colorScheme?: string | undefined;
34
34
  } | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everlywell/ui-kit",
3
- "version": "0.0.3-menu-next",
3
+ "version": "0.2.0",
4
4
  "main": "./index.js",
5
5
  "types": "./index.d.ts",
6
6
  "exports": {
package/lib/theme/actions/IconButton/IconButton.d.ts DELETED
@@ -1,11 +0,0 @@
1
- import { IconButtonProps as ChakraIconButtonProps, ThemingProps } from '@chakra-ui/react';
2
- import React from 'react';
3
- import { ICON_SET, IconKey } from '../../media/Icon/Icon';
4
- export type IconButtonProps = Omit<ChakraIconButtonProps, 'icon'> & ThemingProps<'IconButton'> & {
5
- icon: IconKey;
6
- };
7
- declare const IconButton: React.ForwardRefExoticComponent<Omit<ChakraIconButtonProps, "icon"> & ThemingProps<"IconButton"> & {
8
- icon: IconKey;
9
- } & React.RefAttributes<unknown>>;
10
- export { ICON_SET };
11
- export default IconButton;