@pondipondi/mimas 0.1.4 → 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 (54) hide show
  1. package/dist/components/crumbs/bubble-input.d.ts +33 -0
  2. package/dist/components/crumbs/{Button.d.ts → button.d.ts} +114 -107
  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} +10 -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 -6
  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 +16126 -1361
  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/Frames/Panel.stories.d.ts +11 -0
  47. package/dist/stories/Mimas/Plates/BarChart.stories.d.ts +20 -0
  48. package/dist/stories/Mimas/Plates/Heatmap.stories.d.ts +32 -0
  49. package/dist/stories/Mimas/Util/Palette.stories.d.ts +31 -0
  50. package/dist/style.css +1 -1
  51. package/package.json +79 -68
  52. package/dist/components/crumbs/ToggleSet.d.ts +0 -2
  53. package/dist/components/frames/Inset.d.ts +0 -50
  54. package/dist/components/util/Noise.d.ts +0 -2
@@ -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,43 +2,40 @@ 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: {
39
33
  small: {
40
34
  inner: string;
41
35
  };
36
+ medium: {
37
+ inner: string;
38
+ };
42
39
  large: {
43
40
  inner: string;
44
41
  };
@@ -72,55 +69,55 @@ declare const button: import("tailwind-variants").TVReturnType<{
72
69
  width: {
73
70
  fit: {};
74
71
  grow: {
75
- inner: string;
76
72
  outer: string;
77
- chip: string;
73
+ inner: string;
78
74
  };
79
75
  };
76
+ icon: {
77
+ true: {};
78
+ false: {};
79
+ };
80
80
  }, {
81
81
  outer: string;
82
- inner: string;
83
82
  chip: string;
84
- }, undefined, import("tailwind-variants/dist/config").TVConfig<{
83
+ inner: string;
84
+ }, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
85
85
  corners: {
86
86
  sharp: {
87
- inner: string;
88
- outer: string;
89
87
  chip: string;
88
+ inner: string;
90
89
  };
91
90
  round: {
92
- inner: string;
93
- outer: string;
94
91
  chip: string;
92
+ inner: string;
95
93
  };
96
94
  circle: {
97
- inner: string;
98
- outer: string;
99
95
  chip: string;
96
+ inner: string;
100
97
  };
101
98
  };
102
99
  leftCorners: {
103
100
  none: {};
104
101
  sharp: {
105
- inner: string;
106
- outer: string;
107
102
  chip: string;
103
+ inner: string;
108
104
  };
109
105
  round: {
110
- inner: string;
111
- outer: string;
112
106
  chip: string;
107
+ inner: string;
113
108
  };
114
109
  circle: {
115
- inner: string;
116
- outer: string;
117
110
  chip: string;
111
+ inner: string;
118
112
  };
119
113
  };
120
114
  size: {
121
115
  small: {
122
116
  inner: string;
123
117
  };
118
+ medium: {
119
+ inner: string;
120
+ };
124
121
  large: {
125
122
  inner: string;
126
123
  };
@@ -154,51 +151,51 @@ declare const button: import("tailwind-variants").TVReturnType<{
154
151
  width: {
155
152
  fit: {};
156
153
  grow: {
157
- inner: string;
158
154
  outer: string;
159
- chip: string;
155
+ inner: string;
160
156
  };
161
157
  };
158
+ icon: {
159
+ true: {};
160
+ false: {};
161
+ };
162
162
  }, {
163
163
  corners: {
164
164
  sharp: {
165
- inner: string;
166
- outer: string;
167
165
  chip: string;
166
+ inner: string;
168
167
  };
169
168
  round: {
170
- inner: string;
171
- outer: string;
172
169
  chip: string;
170
+ inner: string;
173
171
  };
174
172
  circle: {
175
- inner: string;
176
- outer: string;
177
173
  chip: string;
174
+ inner: string;
178
175
  };
179
176
  };
180
177
  leftCorners: {
181
178
  none: {};
182
179
  sharp: {
183
- inner: string;
184
- outer: string;
185
180
  chip: string;
181
+ inner: string;
186
182
  };
187
183
  round: {
188
- inner: string;
189
- outer: string;
190
184
  chip: string;
185
+ inner: string;
191
186
  };
192
187
  circle: {
193
- inner: string;
194
- outer: string;
195
188
  chip: string;
189
+ inner: string;
196
190
  };
197
191
  };
198
192
  size: {
199
193
  small: {
200
194
  inner: string;
201
195
  };
196
+ medium: {
197
+ inner: string;
198
+ };
202
199
  large: {
203
200
  inner: string;
204
201
  };
@@ -232,51 +229,51 @@ declare const button: import("tailwind-variants").TVReturnType<{
232
229
  width: {
233
230
  fit: {};
234
231
  grow: {
235
- inner: string;
236
232
  outer: string;
237
- chip: string;
233
+ inner: string;
238
234
  };
239
235
  };
236
+ icon: {
237
+ true: {};
238
+ false: {};
239
+ };
240
240
  }>, {
241
241
  corners: {
242
242
  sharp: {
243
- inner: string;
244
- outer: string;
245
243
  chip: string;
244
+ inner: string;
246
245
  };
247
246
  round: {
248
- inner: string;
249
- outer: string;
250
247
  chip: string;
248
+ inner: string;
251
249
  };
252
250
  circle: {
253
- inner: string;
254
- outer: string;
255
251
  chip: string;
252
+ inner: string;
256
253
  };
257
254
  };
258
255
  leftCorners: {
259
256
  none: {};
260
257
  sharp: {
261
- inner: string;
262
- outer: string;
263
258
  chip: string;
259
+ inner: string;
264
260
  };
265
261
  round: {
266
- inner: string;
267
- outer: string;
268
262
  chip: string;
263
+ inner: string;
269
264
  };
270
265
  circle: {
271
- inner: string;
272
- outer: string;
273
266
  chip: string;
267
+ inner: string;
274
268
  };
275
269
  };
276
270
  size: {
277
271
  small: {
278
272
  inner: string;
279
273
  };
274
+ medium: {
275
+ inner: string;
276
+ };
280
277
  large: {
281
278
  inner: string;
282
279
  };
@@ -310,55 +307,55 @@ declare const button: import("tailwind-variants").TVReturnType<{
310
307
  width: {
311
308
  fit: {};
312
309
  grow: {
313
- inner: string;
314
310
  outer: string;
315
- chip: string;
311
+ inner: string;
316
312
  };
317
313
  };
314
+ icon: {
315
+ true: {};
316
+ false: {};
317
+ };
318
318
  }, {
319
319
  outer: string;
320
- inner: string;
321
320
  chip: string;
321
+ inner: string;
322
322
  }, import("tailwind-variants").TVReturnType<{
323
323
  corners: {
324
324
  sharp: {
325
- inner: string;
326
- outer: string;
327
325
  chip: string;
326
+ inner: string;
328
327
  };
329
328
  round: {
330
- inner: string;
331
- outer: string;
332
329
  chip: string;
330
+ inner: string;
333
331
  };
334
332
  circle: {
335
- inner: string;
336
- outer: string;
337
333
  chip: string;
334
+ inner: string;
338
335
  };
339
336
  };
340
337
  leftCorners: {
341
338
  none: {};
342
339
  sharp: {
343
- inner: string;
344
- outer: string;
345
340
  chip: string;
341
+ inner: string;
346
342
  };
347
343
  round: {
348
- inner: string;
349
- outer: string;
350
344
  chip: string;
345
+ inner: string;
351
346
  };
352
347
  circle: {
353
- inner: string;
354
- outer: string;
355
348
  chip: string;
349
+ inner: string;
356
350
  };
357
351
  };
358
352
  size: {
359
353
  small: {
360
354
  inner: string;
361
355
  };
356
+ medium: {
357
+ inner: string;
358
+ };
362
359
  large: {
363
360
  inner: string;
364
361
  };
@@ -392,55 +389,55 @@ declare const button: import("tailwind-variants").TVReturnType<{
392
389
  width: {
393
390
  fit: {};
394
391
  grow: {
395
- inner: string;
396
392
  outer: string;
397
- chip: string;
393
+ inner: string;
398
394
  };
399
395
  };
396
+ icon: {
397
+ true: {};
398
+ false: {};
399
+ };
400
400
  }, {
401
401
  outer: string;
402
- inner: string;
403
402
  chip: string;
404
- }, undefined, import("tailwind-variants/dist/config").TVConfig<{
403
+ inner: string;
404
+ }, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
405
405
  corners: {
406
406
  sharp: {
407
- inner: string;
408
- outer: string;
409
407
  chip: string;
408
+ inner: string;
410
409
  };
411
410
  round: {
412
- inner: string;
413
- outer: string;
414
411
  chip: string;
412
+ inner: string;
415
413
  };
416
414
  circle: {
417
- inner: string;
418
- outer: string;
419
415
  chip: string;
416
+ inner: string;
420
417
  };
421
418
  };
422
419
  leftCorners: {
423
420
  none: {};
424
421
  sharp: {
425
- inner: string;
426
- outer: string;
427
422
  chip: string;
423
+ inner: string;
428
424
  };
429
425
  round: {
430
- inner: string;
431
- outer: string;
432
426
  chip: string;
427
+ inner: string;
433
428
  };
434
429
  circle: {
435
- inner: string;
436
- outer: string;
437
430
  chip: string;
431
+ inner: string;
438
432
  };
439
433
  };
440
434
  size: {
441
435
  small: {
442
436
  inner: string;
443
437
  };
438
+ medium: {
439
+ inner: string;
440
+ };
444
441
  large: {
445
442
  inner: string;
446
443
  };
@@ -474,51 +471,51 @@ declare const button: import("tailwind-variants").TVReturnType<{
474
471
  width: {
475
472
  fit: {};
476
473
  grow: {
477
- inner: string;
478
474
  outer: string;
479
- chip: string;
475
+ inner: string;
480
476
  };
481
477
  };
478
+ icon: {
479
+ true: {};
480
+ false: {};
481
+ };
482
482
  }, {
483
483
  corners: {
484
484
  sharp: {
485
- inner: string;
486
- outer: string;
487
485
  chip: string;
486
+ inner: string;
488
487
  };
489
488
  round: {
490
- inner: string;
491
- outer: string;
492
489
  chip: string;
490
+ inner: string;
493
491
  };
494
492
  circle: {
495
- inner: string;
496
- outer: string;
497
493
  chip: string;
494
+ inner: string;
498
495
  };
499
496
  };
500
497
  leftCorners: {
501
498
  none: {};
502
499
  sharp: {
503
- inner: string;
504
- outer: string;
505
500
  chip: string;
501
+ inner: string;
506
502
  };
507
503
  round: {
508
- inner: string;
509
- outer: string;
510
504
  chip: string;
505
+ inner: string;
511
506
  };
512
507
  circle: {
513
- inner: string;
514
- outer: string;
515
508
  chip: string;
509
+ inner: string;
516
510
  };
517
511
  };
518
512
  size: {
519
513
  small: {
520
514
  inner: string;
521
515
  };
516
+ medium: {
517
+ inner: string;
518
+ };
522
519
  large: {
523
520
  inner: string;
524
521
  };
@@ -552,15 +549,25 @@ declare const button: import("tailwind-variants").TVReturnType<{
552
549
  width: {
553
550
  fit: {};
554
551
  grow: {
555
- inner: string;
556
552
  outer: string;
557
- chip: string;
553
+ inner: string;
558
554
  };
559
555
  };
556
+ icon: {
557
+ true: {};
558
+ false: {};
559
+ };
560
560
  }>, unknown, unknown, undefined>>;
561
- interface ButtonProps extends VariantProps<typeof button>, React.ButtonHTMLAttributes<HTMLButtonElement> {
561
+ export interface ButtonProps extends VariantProps<typeof button>, React.ButtonHTMLAttributes<HTMLButtonElement> {
562
562
  loading?: boolean;
563
- 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;
564
569
  }
565
- declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
566
- export default Button;
570
+ declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
571
+ _rabbet: true;
572
+ };
573
+ export { Button };