@pondipondi/mimas 0.1.5 → 0.2.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 (57) hide show
  1. package/dist/components/crumbs/bubble-input.d.ts +33 -0
  2. package/dist/components/crumbs/{Button.d.ts → button.d.ts} +92 -106
  3. package/dist/components/crumbs/checkbox.d.ts +565 -0
  4. package/dist/components/crumbs/input-group.d.ts +29 -0
  5. package/dist/components/crumbs/input.d.ts +305 -0
  6. package/dist/components/crumbs/{LoadingRing.d.ts → loading-ring.d.ts} +3 -3
  7. package/dist/components/crumbs/select.d.ts +95 -0
  8. package/dist/components/crumbs/tooltip.d.ts +20 -0
  9. package/dist/components/frames/dialog.d.ts +17 -0
  10. package/dist/components/frames/drawer.d.ts +215 -0
  11. package/dist/components/frames/inset.d.ts +7 -0
  12. package/dist/components/frames/modal.d.ts +14 -0
  13. package/dist/components/frames/panel.d.ts +9 -0
  14. package/dist/components/index.d.ts +38 -9
  15. package/dist/components/layout/between.d.ts +7 -0
  16. package/dist/components/layout/centre.d.ts +7 -0
  17. package/dist/components/layout/column.d.ts +7 -0
  18. package/dist/components/layout/flex.d.ts +7 -0
  19. package/dist/components/layout/grid.d.ts +7 -0
  20. package/dist/components/plates/bar-chart.d.ts +55 -0
  21. package/dist/components/plates/heatmap.d.ts +31 -0
  22. package/dist/components/util/icons.d.ts +10 -0
  23. package/dist/components/util/{MimasProvider.d.ts → mimas-provider.d.ts} +1 -1
  24. package/dist/components/util/noise.d.ts +5 -0
  25. package/dist/components/util/palette.d.ts +36 -0
  26. package/dist/components/util/rabbet.d.ts +11 -0
  27. package/dist/config/palettes.d.ts +73 -0
  28. package/dist/hooks/use-async-component.d.ts +49 -0
  29. package/dist/hooks/use-container-width.d.ts +2 -0
  30. package/dist/index.d.ts +1 -0
  31. package/dist/lib/classnames.d.ts +2 -0
  32. package/dist/lib/colour.d.ts +17 -0
  33. package/dist/lib/corners.d.ts +20 -0
  34. package/dist/mimas.cjs.js +135 -10
  35. package/dist/mimas.es.js +16103 -1446
  36. package/dist/stories/Mimas/Crumbs/BubbleInput.stories.d.ts +42 -0
  37. package/dist/stories/Mimas/Crumbs/Button.stories.d.ts +5 -3
  38. package/dist/stories/Mimas/Crumbs/Checkbox.stories.d.ts +313 -0
  39. package/dist/stories/Mimas/Crumbs/Input.stories.d.ts +339 -0
  40. package/dist/stories/Mimas/Crumbs/InputGroup.stories.d.ts +36 -0
  41. package/dist/stories/Mimas/Crumbs/Select.stories.d.ts +13 -0
  42. package/dist/stories/Mimas/Crumbs/Tooltip.stories.d.ts +27 -0
  43. package/dist/stories/Mimas/Frames/Dialog.stories.d.ts +14 -0
  44. package/dist/stories/Mimas/Frames/Drawer.stories.d.ts +28 -0
  45. package/dist/stories/Mimas/Frames/Modal.stories.d.ts +17 -0
  46. package/dist/stories/Mimas/Plates/BarChart.stories.d.ts +20 -0
  47. package/dist/stories/Mimas/Plates/Heatmap.stories.d.ts +32 -0
  48. package/dist/stories/Mimas/Util/Palette.stories.d.ts +31 -0
  49. package/dist/style.css +1 -1
  50. package/package.json +79 -68
  51. package/dist/components/crumbs/ButtonGroup.d.ts +0 -11
  52. package/dist/components/crumbs/ToggleSet.d.ts +0 -2
  53. package/dist/components/frames/Inset.d.ts +0 -50
  54. package/dist/components/frames/Panel.d.ts +0 -50
  55. package/dist/components/layout/Flex.d.ts +0 -204
  56. package/dist/components/util/Noise.d.ts +0 -2
  57. package/dist/stories/Mimas/Crumbs/ButtonGroup.stories.d.ts +0 -25
@@ -0,0 +1,33 @@
1
+ import { ReactNode } from "react";
2
+ import { PaletteName, Palette as PaletteRamp } from "../../config/palettes";
3
+ export interface BubbleInputProps {
4
+ /** Current value. Controlled — pair with `onChange`. */
5
+ value: number;
6
+ /** Called with the next value when a bubble is clicked. */
7
+ onChange: (value: number) => void;
8
+ /** Lower bound (inclusive). Default `0`. */
9
+ min?: number;
10
+ /** Upper bound (inclusive). Default unbounded. */
11
+ max?: number;
12
+ /** Step between adjacent bubbles. Default `1`. */
13
+ increment?: number;
14
+ /**
15
+ * How many bubbles to aim to show at once. The window slides to keep the
16
+ * current value centred as it changes, rather than jumping to new labels.
17
+ * Default `5`.
18
+ */
19
+ targetBubbleCount?: number;
20
+ /** Format a bubble's label. Ignored in the boolean view. Defaults to the raw number. */
21
+ formatValue?: (value: number) => ReactNode;
22
+ /** Palette to apply. Accepts any bundled palette name or custom ramp. Default `"violet"`. */
23
+ palette?: PaletteName | PaletteRamp;
24
+ disabled?: boolean;
25
+ /** Extra classes on the root element — sets its width (`w-full`, `w-40`, `w-fit`, …). */
26
+ className?: string;
27
+ /** Extra classes on each bubble. */
28
+ bubbleClassName?: string;
29
+ /** Extra classes on the filled portion of the track. */
30
+ trackClassName?: string;
31
+ }
32
+ declare function BubbleInput({ value, onChange, min, max, increment, targetBubbleCount, formatValue, palette, disabled, className, bubbleClassName, trackClassName, }: BubbleInputProps): import("react/jsx-runtime").JSX.Element;
33
+ export { BubbleInput };
@@ -2,37 +2,31 @@ import { VariantProps } from "tailwind-variants";
2
2
  declare const button: import("tailwind-variants").TVReturnType<{
3
3
  corners: {
4
4
  sharp: {
5
- inner: string;
6
- outer: string;
7
5
  chip: string;
6
+ inner: string;
8
7
  };
9
8
  round: {
10
- inner: string;
11
- outer: string;
12
9
  chip: string;
10
+ inner: string;
13
11
  };
14
12
  circle: {
15
- inner: string;
16
- outer: string;
17
13
  chip: string;
14
+ inner: string;
18
15
  };
19
16
  };
20
17
  leftCorners: {
21
18
  none: {};
22
19
  sharp: {
23
- inner: string;
24
- outer: string;
25
20
  chip: string;
21
+ inner: string;
26
22
  };
27
23
  round: {
28
- inner: string;
29
- outer: string;
30
24
  chip: string;
25
+ inner: string;
31
26
  };
32
27
  circle: {
33
- inner: string;
34
- outer: string;
35
28
  chip: string;
29
+ inner: string;
36
30
  };
37
31
  };
38
32
  size: {
@@ -75,49 +69,46 @@ declare const button: import("tailwind-variants").TVReturnType<{
75
69
  width: {
76
70
  fit: {};
77
71
  grow: {
78
- inner: string;
79
72
  outer: string;
80
- chip: string;
73
+ inner: string;
81
74
  };
82
75
  };
76
+ icon: {
77
+ true: {};
78
+ false: {};
79
+ };
83
80
  }, {
84
81
  outer: string;
85
- inner: string;
86
82
  chip: string;
87
- }, undefined, import("tailwind-variants/dist/config").TVConfig<{
83
+ inner: string;
84
+ }, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
88
85
  corners: {
89
86
  sharp: {
90
- inner: string;
91
- outer: string;
92
87
  chip: string;
88
+ inner: string;
93
89
  };
94
90
  round: {
95
- inner: string;
96
- outer: string;
97
91
  chip: string;
92
+ inner: string;
98
93
  };
99
94
  circle: {
100
- inner: string;
101
- outer: string;
102
95
  chip: string;
96
+ inner: string;
103
97
  };
104
98
  };
105
99
  leftCorners: {
106
100
  none: {};
107
101
  sharp: {
108
- inner: string;
109
- outer: string;
110
102
  chip: string;
103
+ inner: string;
111
104
  };
112
105
  round: {
113
- inner: string;
114
- outer: string;
115
106
  chip: string;
107
+ inner: string;
116
108
  };
117
109
  circle: {
118
- inner: string;
119
- outer: string;
120
110
  chip: string;
111
+ inner: string;
121
112
  };
122
113
  };
123
114
  size: {
@@ -160,45 +151,42 @@ declare const button: import("tailwind-variants").TVReturnType<{
160
151
  width: {
161
152
  fit: {};
162
153
  grow: {
163
- inner: string;
164
154
  outer: string;
165
- chip: string;
155
+ inner: string;
166
156
  };
167
157
  };
158
+ icon: {
159
+ true: {};
160
+ false: {};
161
+ };
168
162
  }, {
169
163
  corners: {
170
164
  sharp: {
171
- inner: string;
172
- outer: string;
173
165
  chip: string;
166
+ inner: string;
174
167
  };
175
168
  round: {
176
- inner: string;
177
- outer: string;
178
169
  chip: string;
170
+ inner: string;
179
171
  };
180
172
  circle: {
181
- inner: string;
182
- outer: string;
183
173
  chip: string;
174
+ inner: string;
184
175
  };
185
176
  };
186
177
  leftCorners: {
187
178
  none: {};
188
179
  sharp: {
189
- inner: string;
190
- outer: string;
191
180
  chip: string;
181
+ inner: string;
192
182
  };
193
183
  round: {
194
- inner: string;
195
- outer: string;
196
184
  chip: string;
185
+ inner: string;
197
186
  };
198
187
  circle: {
199
- inner: string;
200
- outer: string;
201
188
  chip: string;
189
+ inner: string;
202
190
  };
203
191
  };
204
192
  size: {
@@ -241,45 +229,42 @@ declare const button: import("tailwind-variants").TVReturnType<{
241
229
  width: {
242
230
  fit: {};
243
231
  grow: {
244
- inner: string;
245
232
  outer: string;
246
- chip: string;
233
+ inner: string;
247
234
  };
248
235
  };
236
+ icon: {
237
+ true: {};
238
+ false: {};
239
+ };
249
240
  }>, {
250
241
  corners: {
251
242
  sharp: {
252
- inner: string;
253
- outer: string;
254
243
  chip: string;
244
+ inner: string;
255
245
  };
256
246
  round: {
257
- inner: string;
258
- outer: string;
259
247
  chip: string;
248
+ inner: string;
260
249
  };
261
250
  circle: {
262
- inner: string;
263
- outer: string;
264
251
  chip: string;
252
+ inner: string;
265
253
  };
266
254
  };
267
255
  leftCorners: {
268
256
  none: {};
269
257
  sharp: {
270
- inner: string;
271
- outer: string;
272
258
  chip: string;
259
+ inner: string;
273
260
  };
274
261
  round: {
275
- inner: string;
276
- outer: string;
277
262
  chip: string;
263
+ inner: string;
278
264
  };
279
265
  circle: {
280
- inner: string;
281
- outer: string;
282
266
  chip: string;
267
+ inner: string;
283
268
  };
284
269
  };
285
270
  size: {
@@ -322,49 +307,46 @@ declare const button: import("tailwind-variants").TVReturnType<{
322
307
  width: {
323
308
  fit: {};
324
309
  grow: {
325
- inner: string;
326
310
  outer: string;
327
- chip: string;
311
+ inner: string;
328
312
  };
329
313
  };
314
+ icon: {
315
+ true: {};
316
+ false: {};
317
+ };
330
318
  }, {
331
319
  outer: string;
332
- inner: string;
333
320
  chip: string;
321
+ inner: string;
334
322
  }, import("tailwind-variants").TVReturnType<{
335
323
  corners: {
336
324
  sharp: {
337
- inner: string;
338
- outer: string;
339
325
  chip: string;
326
+ inner: string;
340
327
  };
341
328
  round: {
342
- inner: string;
343
- outer: string;
344
329
  chip: string;
330
+ inner: string;
345
331
  };
346
332
  circle: {
347
- inner: string;
348
- outer: string;
349
333
  chip: string;
334
+ inner: string;
350
335
  };
351
336
  };
352
337
  leftCorners: {
353
338
  none: {};
354
339
  sharp: {
355
- inner: string;
356
- outer: string;
357
340
  chip: string;
341
+ inner: string;
358
342
  };
359
343
  round: {
360
- inner: string;
361
- outer: string;
362
344
  chip: string;
345
+ inner: string;
363
346
  };
364
347
  circle: {
365
- inner: string;
366
- outer: string;
367
348
  chip: string;
349
+ inner: string;
368
350
  };
369
351
  };
370
352
  size: {
@@ -407,49 +389,46 @@ declare const button: import("tailwind-variants").TVReturnType<{
407
389
  width: {
408
390
  fit: {};
409
391
  grow: {
410
- inner: string;
411
392
  outer: string;
412
- chip: string;
393
+ inner: string;
413
394
  };
414
395
  };
396
+ icon: {
397
+ true: {};
398
+ false: {};
399
+ };
415
400
  }, {
416
401
  outer: string;
417
- inner: string;
418
402
  chip: string;
419
- }, undefined, import("tailwind-variants/dist/config").TVConfig<{
403
+ inner: string;
404
+ }, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
420
405
  corners: {
421
406
  sharp: {
422
- inner: string;
423
- outer: string;
424
407
  chip: string;
408
+ inner: string;
425
409
  };
426
410
  round: {
427
- inner: string;
428
- outer: string;
429
411
  chip: string;
412
+ inner: string;
430
413
  };
431
414
  circle: {
432
- inner: string;
433
- outer: string;
434
415
  chip: string;
416
+ inner: string;
435
417
  };
436
418
  };
437
419
  leftCorners: {
438
420
  none: {};
439
421
  sharp: {
440
- inner: string;
441
- outer: string;
442
422
  chip: string;
423
+ inner: string;
443
424
  };
444
425
  round: {
445
- inner: string;
446
- outer: string;
447
426
  chip: string;
427
+ inner: string;
448
428
  };
449
429
  circle: {
450
- inner: string;
451
- outer: string;
452
430
  chip: string;
431
+ inner: string;
453
432
  };
454
433
  };
455
434
  size: {
@@ -492,45 +471,42 @@ declare const button: import("tailwind-variants").TVReturnType<{
492
471
  width: {
493
472
  fit: {};
494
473
  grow: {
495
- inner: string;
496
474
  outer: string;
497
- chip: string;
475
+ inner: string;
498
476
  };
499
477
  };
478
+ icon: {
479
+ true: {};
480
+ false: {};
481
+ };
500
482
  }, {
501
483
  corners: {
502
484
  sharp: {
503
- inner: string;
504
- outer: string;
505
485
  chip: string;
486
+ inner: string;
506
487
  };
507
488
  round: {
508
- inner: string;
509
- outer: string;
510
489
  chip: string;
490
+ inner: string;
511
491
  };
512
492
  circle: {
513
- inner: string;
514
- outer: string;
515
493
  chip: string;
494
+ inner: string;
516
495
  };
517
496
  };
518
497
  leftCorners: {
519
498
  none: {};
520
499
  sharp: {
521
- inner: string;
522
- outer: string;
523
500
  chip: string;
501
+ inner: string;
524
502
  };
525
503
  round: {
526
- inner: string;
527
- outer: string;
528
504
  chip: string;
505
+ inner: string;
529
506
  };
530
507
  circle: {
531
- inner: string;
532
- outer: string;
533
508
  chip: string;
509
+ inner: string;
534
510
  };
535
511
  };
536
512
  size: {
@@ -573,15 +549,25 @@ declare const button: import("tailwind-variants").TVReturnType<{
573
549
  width: {
574
550
  fit: {};
575
551
  grow: {
576
- inner: string;
577
552
  outer: string;
578
- chip: string;
553
+ inner: string;
579
554
  };
580
555
  };
556
+ icon: {
557
+ true: {};
558
+ false: {};
559
+ };
581
560
  }>, unknown, unknown, undefined>>;
582
561
  export interface ButtonProps extends VariantProps<typeof button>, React.ButtonHTMLAttributes<HTMLButtonElement> {
583
562
  loading?: boolean;
584
- text?: string;
563
+ /**
564
+ * Render as the single child element instead of a `<button>`, keeping the
565
+ * button chrome. The child's own children become the label, e.g.
566
+ * `<Button asChild><a href="…">Label</a></Button>`.
567
+ */
568
+ asChild?: boolean;
585
569
  }
586
- declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
587
- export default Button;
570
+ declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
571
+ _rabbet: true;
572
+ };
573
+ export { Button };