@histoire/controls 0.0.4 → 0.1.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 (2) hide show
  1. package/dist/style.css +47 -472
  2. package/package.json +2 -2
package/dist/style.css CHANGED
@@ -1,428 +1,3 @@
1
- /*
2
- ! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
3
- */
4
-
5
- /*
6
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
7
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
8
- */
9
-
10
- *,
11
- ::before,
12
- ::after {
13
- box-sizing: border-box;
14
- /* 1 */
15
- border-width: 0;
16
- /* 2 */
17
- border-style: solid;
18
- /* 2 */
19
- border-color: #e4e4e7;
20
- /* 2 */
21
- }
22
-
23
- ::before,
24
- ::after {
25
- --tw-content: '';
26
- }
27
-
28
- /*
29
- 1. Use a consistent sensible line-height in all browsers.
30
- 2. Prevent adjustments of font size after orientation changes in iOS.
31
- 3. Use a more readable tab size.
32
- 4. Use the user's configured `sans` font-family by default.
33
- */
34
-
35
- html {
36
- line-height: 1.5;
37
- /* 1 */
38
- -webkit-text-size-adjust: 100%;
39
- /* 2 */
40
- -moz-tab-size: 4;
41
- /* 3 */
42
- -o-tab-size: 4;
43
- tab-size: 4;
44
- /* 3 */
45
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
46
- /* 4 */
47
- }
48
-
49
- /*
50
- 1. Remove the margin in all browsers.
51
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
52
- */
53
-
54
- body {
55
- margin: 0;
56
- /* 1 */
57
- line-height: inherit;
58
- /* 2 */
59
- }
60
-
61
- /*
62
- 1. Add the correct height in Firefox.
63
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
64
- 3. Ensure horizontal rules are visible by default.
65
- */
66
-
67
- hr {
68
- height: 0;
69
- /* 1 */
70
- color: inherit;
71
- /* 2 */
72
- border-top-width: 1px;
73
- /* 3 */
74
- }
75
-
76
- /*
77
- Add the correct text decoration in Chrome, Edge, and Safari.
78
- */
79
-
80
- abbr:where([title]) {
81
- -webkit-text-decoration: underline dotted;
82
- text-decoration: underline dotted;
83
- }
84
-
85
- /*
86
- Remove the default font size and weight for headings.
87
- */
88
-
89
- h1,
90
- h2,
91
- h3,
92
- h4,
93
- h5,
94
- h6 {
95
- font-size: inherit;
96
- font-weight: inherit;
97
- }
98
-
99
- /*
100
- Reset links to optimize for opt-in styling instead of opt-out.
101
- */
102
-
103
- a {
104
- color: inherit;
105
- text-decoration: inherit;
106
- }
107
-
108
- /*
109
- Add the correct font weight in Edge and Safari.
110
- */
111
-
112
- b,
113
- strong {
114
- font-weight: bolder;
115
- }
116
-
117
- /*
118
- 1. Use the user's configured `mono` font family by default.
119
- 2. Correct the odd `em` font sizing in all browsers.
120
- */
121
-
122
- code,
123
- kbd,
124
- samp,
125
- pre {
126
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
127
- /* 1 */
128
- font-size: 1em;
129
- /* 2 */
130
- }
131
-
132
- /*
133
- Add the correct font size in all browsers.
134
- */
135
-
136
- small {
137
- font-size: 80%;
138
- }
139
-
140
- /*
141
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
142
- */
143
-
144
- sub,
145
- sup {
146
- font-size: 75%;
147
- line-height: 0;
148
- position: relative;
149
- vertical-align: baseline;
150
- }
151
-
152
- sub {
153
- bottom: -0.25em;
154
- }
155
-
156
- sup {
157
- top: -0.5em;
158
- }
159
-
160
- /*
161
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
162
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
163
- 3. Remove gaps between table borders by default.
164
- */
165
-
166
- table {
167
- text-indent: 0;
168
- /* 1 */
169
- border-color: inherit;
170
- /* 2 */
171
- border-collapse: collapse;
172
- /* 3 */
173
- }
174
-
175
- /*
176
- 1. Change the font styles in all browsers.
177
- 2. Remove the margin in Firefox and Safari.
178
- 3. Remove default padding in all browsers.
179
- */
180
-
181
- button,
182
- input,
183
- optgroup,
184
- select,
185
- textarea {
186
- font-family: inherit;
187
- /* 1 */
188
- font-size: 100%;
189
- /* 1 */
190
- line-height: inherit;
191
- /* 1 */
192
- color: inherit;
193
- /* 1 */
194
- margin: 0;
195
- /* 2 */
196
- padding: 0;
197
- /* 3 */
198
- }
199
-
200
- /*
201
- Remove the inheritance of text transform in Edge and Firefox.
202
- */
203
-
204
- button,
205
- select {
206
- text-transform: none;
207
- }
208
-
209
- /*
210
- 1. Correct the inability to style clickable types in iOS and Safari.
211
- 2. Remove default button styles.
212
- */
213
-
214
- button,
215
- [type='button'],
216
- [type='reset'],
217
- [type='submit'] {
218
- -webkit-appearance: button;
219
- /* 1 */
220
- background-color: transparent;
221
- /* 2 */
222
- background-image: none;
223
- /* 2 */
224
- }
225
-
226
- /*
227
- Use the modern Firefox focus style for all focusable elements.
228
- */
229
-
230
- :-moz-focusring {
231
- outline: auto;
232
- }
233
-
234
- /*
235
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
236
- */
237
-
238
- :-moz-ui-invalid {
239
- box-shadow: none;
240
- }
241
-
242
- /*
243
- Add the correct vertical alignment in Chrome and Firefox.
244
- */
245
-
246
- progress {
247
- vertical-align: baseline;
248
- }
249
-
250
- /*
251
- Correct the cursor style of increment and decrement buttons in Safari.
252
- */
253
-
254
- ::-webkit-inner-spin-button,
255
- ::-webkit-outer-spin-button {
256
- height: auto;
257
- }
258
-
259
- /*
260
- 1. Correct the odd appearance in Chrome and Safari.
261
- 2. Correct the outline style in Safari.
262
- */
263
-
264
- [type='search'] {
265
- -webkit-appearance: textfield;
266
- /* 1 */
267
- outline-offset: -2px;
268
- /* 2 */
269
- }
270
-
271
- /*
272
- Remove the inner padding in Chrome and Safari on macOS.
273
- */
274
-
275
- ::-webkit-search-decoration {
276
- -webkit-appearance: none;
277
- }
278
-
279
- /*
280
- 1. Correct the inability to style clickable types in iOS and Safari.
281
- 2. Change font properties to `inherit` in Safari.
282
- */
283
-
284
- ::-webkit-file-upload-button {
285
- -webkit-appearance: button;
286
- /* 1 */
287
- font: inherit;
288
- /* 2 */
289
- }
290
-
291
- /*
292
- Add the correct display in Chrome and Safari.
293
- */
294
-
295
- summary {
296
- display: list-item;
297
- }
298
-
299
- /*
300
- Removes the default spacing and border for appropriate elements.
301
- */
302
-
303
- blockquote,
304
- dl,
305
- dd,
306
- h1,
307
- h2,
308
- h3,
309
- h4,
310
- h5,
311
- h6,
312
- hr,
313
- figure,
314
- p,
315
- pre {
316
- margin: 0;
317
- }
318
-
319
- fieldset {
320
- margin: 0;
321
- padding: 0;
322
- }
323
-
324
- legend {
325
- padding: 0;
326
- }
327
-
328
- ol,
329
- ul,
330
- menu {
331
- list-style: none;
332
- margin: 0;
333
- padding: 0;
334
- }
335
-
336
- /*
337
- Prevent resizing textareas horizontally by default.
338
- */
339
-
340
- textarea {
341
- resize: vertical;
342
- }
343
-
344
- /*
345
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
346
- 2. Set the default placeholder color to the user's configured gray 400 color.
347
- */
348
-
349
- input::-moz-placeholder, textarea::-moz-placeholder {
350
- opacity: 1;
351
- /* 1 */
352
- color: #a1a1aa;
353
- /* 2 */
354
- }
355
-
356
- input:-ms-input-placeholder, textarea:-ms-input-placeholder {
357
- opacity: 1;
358
- /* 1 */
359
- color: #a1a1aa;
360
- /* 2 */
361
- }
362
-
363
- input::placeholder,
364
- textarea::placeholder {
365
- opacity: 1;
366
- /* 1 */
367
- color: #a1a1aa;
368
- /* 2 */
369
- }
370
-
371
- /*
372
- Set the default cursor for buttons.
373
- */
374
-
375
- button,
376
- [role="button"] {
377
- cursor: pointer;
378
- }
379
-
380
- /*
381
- Make sure disabled buttons don't get the pointer cursor.
382
- */
383
-
384
- :disabled {
385
- cursor: default;
386
- }
387
-
388
- /*
389
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
390
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
391
- This can trigger a poorly considered lint error in some tools but is included by design.
392
- */
393
-
394
- img,
395
- svg,
396
- video,
397
- canvas,
398
- audio,
399
- iframe,
400
- embed,
401
- object {
402
- display: block;
403
- /* 1 */
404
- vertical-align: middle;
405
- /* 2 */
406
- }
407
-
408
- /*
409
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
410
- */
411
-
412
- img,
413
- video {
414
- max-width: 100%;
415
- height: auto;
416
- }
417
-
418
- /*
419
- Ensure the default browser behavior of the `hidden` attribute.
420
- */
421
-
422
- [hidden] {
423
- display: none;
424
- }
425
-
426
1
  *, ::before, ::after {
427
2
  --tw-translate-x: 0;
428
3
  --tw-translate-y: 0;
@@ -465,214 +40,214 @@ Ensure the default browser behavior of the `hidden` attribute.
465
40
  --tw-backdrop-invert: ;
466
41
  --tw-backdrop-opacity: ;
467
42
  --tw-backdrop-saturate: ;
468
- --tw-backdrop-sepia: ;
43
+ --tw-backdrop-sepia:
469
44
  }
470
45
 
471
46
  .htw-absolute {
472
- position: absolute;
47
+ position: absolute
473
48
  }
474
49
 
475
50
  .htw-relative {
476
- position: relative;
51
+ position: relative
477
52
  }
478
53
 
479
54
  .htw-inset-0 {
480
55
  top: 0px;
481
56
  right: 0px;
482
57
  bottom: 0px;
483
- left: 0px;
58
+ left: 0px
484
59
  }
485
60
 
486
61
  .htw-z-10 {
487
- z-index: 10;
62
+ z-index: 10
488
63
  }
489
64
 
490
65
  .htw-box-border {
491
- box-sizing: border-box;
66
+ box-sizing: border-box
492
67
  }
493
68
 
494
69
  .htw-flex {
495
- display: flex;
70
+ display: flex
496
71
  }
497
72
 
498
73
  .htw-h-\[16px\] {
499
- height: 16px;
74
+ height: 16px
500
75
  }
501
76
 
502
77
  .htw-w-\[16px\] {
503
- width: 16px;
78
+ width: 16px
504
79
  }
505
80
 
506
81
  .htw-w-full {
507
- width: 100%;
82
+ width: 100%
508
83
  }
509
84
 
510
85
  .htw-cursor-pointer {
511
- cursor: pointer;
86
+ cursor: pointer
512
87
  }
513
88
 
514
89
  .htw-cursor-text {
515
- cursor: text;
90
+ cursor: text
516
91
  }
517
92
 
518
93
  .htw-select-none {
519
94
  -webkit-user-select: none;
520
95
  -moz-user-select: none;
521
96
  -ms-user-select: none;
522
- user-select: none;
97
+ user-select: none
523
98
  }
524
99
 
525
100
  .htw-items-center {
526
- align-items: center;
101
+ align-items: center
527
102
  }
528
103
 
529
104
  .htw-gap-2 {
530
- gap: 0.5rem;
105
+ gap: 0.5rem
531
106
  }
532
107
 
533
108
  .htw-rounded-sm {
534
- border-radius: 0.25rem;
109
+ border-radius: 0.25rem
535
110
  }
536
111
 
537
112
  .htw-border {
538
- border-width: 1px;
113
+ border-width: 1px
539
114
  }
540
115
 
541
116
  .htw-border-8 {
542
- border-width: 8px;
117
+ border-width: 8px
543
118
  }
544
119
 
545
120
  .htw-border-primary-500 {
546
121
  --tw-border-opacity: 1;
547
- border-color: rgb(16 185 129 / var(--tw-border-opacity));
122
+ border-color: rgb(16 185 129 / var(--tw-border-opacity))
548
123
  }
549
124
 
550
125
  .htw-border-gray-300 {
551
126
  --tw-border-opacity: 1;
552
- border-color: rgb(212 212 216 / var(--tw-border-opacity));
127
+ border-color: rgb(212 212 216 / var(--tw-border-opacity))
553
128
  }
554
129
 
555
130
  .htw-bg-transparent {
556
- background-color: transparent;
131
+ background-color: transparent
557
132
  }
558
133
 
559
134
  .htw-stroke-white {
560
- stroke: #fff;
135
+ stroke: #fff
561
136
  }
562
137
 
563
138
  .htw-stroke-2 {
564
- stroke-width: 2;
139
+ stroke-width: 2
565
140
  }
566
141
 
567
142
  .htw-p-2 {
568
- padding: 0.5rem;
143
+ padding: 0.5rem
569
144
  }
570
145
 
571
146
  .htw-px-4 {
572
147
  padding-left: 1rem;
573
- padding-right: 1rem;
148
+ padding-right: 1rem
574
149
  }
575
150
 
576
151
  .htw-py-3 {
577
152
  padding-top: 0.75rem;
578
- padding-bottom: 0.75rem;
153
+ padding-bottom: 0.75rem
579
154
  }
580
155
 
581
156
  .htw-px-2 {
582
157
  padding-left: 0.5rem;
583
- padding-right: 0.5rem;
158
+ padding-right: 0.5rem
584
159
  }
585
160
 
586
161
  .htw-py-0 {
587
162
  padding-top: 0px;
588
- padding-bottom: 0px;
163
+ padding-bottom: 0px
589
164
  }
590
165
 
591
166
  .htw-text-sm {
592
167
  font-size: 0.875rem;
593
- line-height: 1.25rem;
168
+ line-height: 1.25rem
594
169
  }
595
170
 
596
171
  .htw-text-white {
597
172
  --tw-text-opacity: 1;
598
- color: rgb(255 255 255 / var(--tw-text-opacity));
173
+ color: rgb(255 255 255 / var(--tw-text-opacity))
599
174
  }
600
175
 
601
176
  .htw-text-inherit {
602
- color: inherit;
177
+ color: inherit
603
178
  }
604
179
 
605
180
  .htw-outline-none {
606
181
  outline: 2px solid transparent;
607
- outline-offset: 2px;
182
+ outline-offset: 2px
608
183
  }
609
184
 
610
185
  .htw-transition-border {
611
186
  transition-property: border;
612
187
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
613
- transition-duration: 150ms;
188
+ transition-duration: 150ms
614
189
  }
615
190
 
616
191
  .htw-transition-all {
617
192
  transition-property: all;
618
193
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
619
- transition-duration: 150ms;
194
+ transition-duration: 150ms
620
195
  }
621
196
 
622
197
  .htw-transition-none {
623
- transition-property: none;
198
+ transition-property: none
624
199
  }
625
200
 
626
201
  .htw-delay-150 {
627
- transition-delay: 150ms;
202
+ transition-delay: 150ms
628
203
  }
629
204
 
630
205
  .htw-duration-150 {
631
- transition-duration: 150ms;
206
+ transition-duration: 150ms
632
207
  }
633
208
 
634
209
  .htw-duration-200 {
635
- transition-duration: 200ms;
210
+ transition-duration: 200ms
636
211
  }
637
212
 
638
213
  .htw-ease-out {
639
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
214
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
640
215
  }
641
216
 
642
217
  .htw-ease-in-out {
643
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
218
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
644
219
  }
645
220
 
646
221
  .htw-dark body {
647
222
  --tw-text-opacity: 1;
648
- color: rgb(244 244 245 / var(--tw-text-opacity));
223
+ color: rgb(244 244 245 / var(--tw-text-opacity))
649
224
  }
650
225
 
651
226
  .hover\:htw-bg-primary-100:hover {
652
227
  --tw-bg-opacity: 1;
653
- background-color: rgb(209 250 229 / var(--tw-bg-opacity));
228
+ background-color: rgb(209 250 229 / var(--tw-bg-opacity))
654
229
  }
655
230
 
656
231
  .focus\:htw-border-primary-500:focus {
657
232
  --tw-border-opacity: 1;
658
- border-color: rgb(16 185 129 / var(--tw-border-opacity));
233
+ border-color: rgb(16 185 129 / var(--tw-border-opacity))
659
234
  }
660
235
 
661
236
  .htw-group:active .group-active\:htw-bg-gray-500\/20 {
662
- background-color: rgb(113 113 122 / 0.2);
237
+ background-color: rgb(113 113 122 / 0.2)
663
238
  }
664
239
 
665
240
  .htw-dark .dark\:htw-border-gray-500 {
666
241
  --tw-border-opacity: 1;
667
- border-color: rgb(113 113 122 / var(--tw-border-opacity));
242
+ border-color: rgb(113 113 122 / var(--tw-border-opacity))
668
243
  }
669
244
 
670
245
  .htw-dark .dark\:hover\:htw-bg-primary-700:hover {
671
246
  --tw-bg-opacity: 1;
672
- background-color: rgb(4 120 87 / var(--tw-bg-opacity));
247
+ background-color: rgb(4 120 87 / var(--tw-bg-opacity))
673
248
  }
674
249
 
675
250
  .htw-dark .dark\:focus\:htw-border-primary-500:focus {
676
251
  --tw-border-opacity: 1;
677
- border-color: rgb(16 185 129 / var(--tw-border-opacity));
252
+ border-color: rgb(16 185 129 / var(--tw-border-opacity))
678
253
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@histoire/controls",
3
- "version": "0.0.4",
3
+ "version": "0.1.1",
4
4
  "description": "Prebuilt controls components",
5
5
  "license": "MIT",
6
6
  "author": {
@@ -39,7 +39,7 @@
39
39
  "@vue/test-utils": "^2.0.0-rc.17",
40
40
  "autoprefixer": "^10.4.2",
41
41
  "concurrently": "^7.0.0",
42
- "histoire": "^0.0.4",
42
+ "histoire": "^0.1.1",
43
43
  "postcss": "^8.4.6",
44
44
  "postcss-import": "^14.0.2",
45
45
  "tailwindcss": "^3.0.23",