@typlog/ui 0.11.1 → 0.11.3

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 (10) hide show
  1. package/dist/components/button.css +1 -1
  2. package/dist/components/dialog.css +186 -132
  3. package/dist/components/inset.css +29 -8
  4. package/dist/components/pagination.css +1 -1
  5. package/dist/components.css +113 -59
  6. package/dist/components.d.ts +54 -44
  7. package/dist/components.js +98 -70
  8. package/package.json +1 -1
  9. package/tailwind/index.css +1 -0
  10. package/tailwind/shadow.css +8 -0
package/dist/components/button.css CHANGED
@@ -154,7 +154,7 @@
154
154
  background-color: var(--gray-a3);
155
155
  }
156
156
  .ui-Button:where(.r-variant-ghost) {
157
- padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
157
+ padding: var(--button-ghost-padding-y) var(--button-padding-x);
158
158
  }
159
159
  @media (hover: hover) {
160
160
  .ui-Button:where(.r-variant-ghost):where(:hover) {
package/dist/components/dialog.css CHANGED
@@ -1,127 +1,4 @@
1
1
 
2
- .ui-DialogOverlay {
3
- position: fixed;
4
- inset: 0;
5
- }
6
- .ui-DialogOverlay::before {
7
- position: fixed;
8
- content: '';
9
- inset: 0;
10
- background-color: var(--color-overlay);
11
- }
12
- .ui-DialogScroll {
13
- display: flex;
14
- overflow: auto;
15
- position: absolute;
16
- inset: 0;
17
- }
18
- .ui-DialogScrollPadding {
19
- flex-grow: 1;
20
- margin: auto;
21
- padding-top: var(--space-6);
22
- padding-bottom: max(var(--space-6), 6vh);
23
- padding-left: var(--space-4);
24
- padding-right: var(--space-4);
25
- }
26
- .ui-DialogScrollPadding[data-align="start"] {
27
- margin-top: 0;
28
- }
29
- .ui-DialogScrollPadding[data-align="center"] {
30
- margin-top: auto;
31
- }
32
- .ui-DialogContent {
33
- margin: auto;
34
- width: 100%;
35
- max-height: calc(100vh - var(--space-6) * 2);
36
- position: relative;
37
- box-sizing: border-box;
38
- overflow: auto;
39
- text-align: left;
40
-
41
- --inset-padding-top: var(--dialog-content-padding);
42
- --inset-padding-right: var(--dialog-content-padding);
43
- --inset-padding-bottom: var(--dialog-content-padding);
44
- --inset-padding-left: var(--dialog-content-padding);
45
- padding: var(--dialog-content-padding);
46
- box-sizing: border-box;
47
-
48
- background-color: var(--color-panel-solid);
49
- box-shadow: var(--shadow-6);
50
- outline: none;
51
- }
52
- .ui-DialogContent[data-size="1"] {
53
- --dialog-content-padding: var(--space-3);
54
- border-radius: var(--radius-4);
55
- }
56
- .ui-DialogContent[data-size="2"] {
57
- --dialog-content-padding: var(--space-4);
58
- border-radius: var(--radius-4);
59
- }
60
- .ui-DialogContent[data-size="3"] {
61
- --dialog-content-padding: var(--space-5);
62
- border-radius: var(--radius-5);
63
- }
64
- .ui-DialogContent[data-size="4"] {
65
- --dialog-content-padding: var(--space-6);
66
- border-radius: var(--radius-5);
67
- }
68
- @media (prefers-reduced-motion: no-preference) {
69
- @keyframes ui-dialog-overlay-no-op {
70
- from {
71
- opacity: 1;
72
- }
73
- to {
74
- opacity: 1;
75
- }
76
- }
77
- @keyframes ui-dialog-content-show {
78
- from {
79
- opacity: 0;
80
- transform: translateY(5px) scale(0.97);
81
- }
82
- to {
83
- opacity: 1;
84
- transform: translateY(0px) scale(1);
85
- }
86
- }
87
- @keyframes ui-dialog-content-hide {
88
- from {
89
- opacity: 1;
90
- transform: translateY(0px) scale(1);
91
- }
92
- to {
93
- opacity: 0;
94
- transform: translateY(5px) scale(0.99);
95
- }
96
- }
97
- .ui-DialogOverlay[data-state='closed'] {
98
- animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
99
- }
100
- .ui-DialogOverlay[data-state='open']::before {
101
- animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
102
- }
103
- .ui-DialogOverlay[data-state='closed']::before {
104
- animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
105
- }
106
- .ui-DialogContent[data-state='open'] {
107
- animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
108
- }
109
- .ui-DialogContent[data-state='closed'] {
110
- animation: ui-dialog-content-hide 100ms cubic-bezier(0.16, 1, 0.3, 1);
111
- }
112
- }
113
- .ui-DialogContent > h2[id^="reka-dialog-title"] {
114
- font-size: var(--font-size-5);
115
- font-weight: var(--font-weight-bold);
116
- line-height: var(--line-height-4);
117
- margin-bottom: var(--space-3);
118
- }
119
- .ui-DialogContent > p[id^="reka-dialog-description"] {
120
- font-size: var(--font-size-2);
121
- line-height: var(--line-height-2);
122
- letter-spacing: var(--letter-spacing-2);
123
- }
124
-
125
2
  .ui-Button {
126
3
  display: inline-flex;
127
4
  align-items: center;
@@ -277,7 +154,7 @@ to {
277
154
  background-color: var(--gray-a3);
278
155
  }
279
156
  .ui-Button:where(.r-variant-ghost) {
280
- padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
157
+ padding: var(--button-ghost-padding-y) var(--button-padding-x);
281
158
  }
282
159
  @media (hover: hover) {
283
160
  .ui-Button:where(.r-variant-ghost):where(:hover) {
@@ -408,10 +285,10 @@ to {
408
285
  --margin-bottom: 0px;
409
286
  --margin-left: 0px;
410
287
  overflow: hidden;
411
- margin-top: var(--margin-top-override);
412
- margin-right: var(--margin-right-override);
413
- margin-bottom: var(--margin-bottom-override);
414
- margin-left: var(--margin-left-override);
288
+ margin-top: var(--margin-top-override, var(--margin-top));
289
+ margin-right: var(--margin-right-override, var(--margin-right));
290
+ margin-bottom: var(--margin-bottom-override, var(--margin-bottom));
291
+ margin-left: var(--margin-left-override, var(--margin-left));
415
292
  }
416
293
  .ui-Inset > * {
417
294
  --margin-top-override: initial;
@@ -433,7 +310,7 @@ to {
433
310
  --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
434
311
  --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
435
312
  }
436
- .ui-Inset:where(.inset-top) {
313
+ .ui-Inset:where(.r-side-top) {
437
314
  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
438
315
  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
439
316
  --margin-bottom-override: var(--margin-bottom);
@@ -443,7 +320,7 @@ to {
443
320
  border-bottom-left-radius: 0px;
444
321
  border-bottom-right-radius: 0px;
445
322
  }
446
- .ui-Inset:where(.inset-bottom) {
323
+ .ui-Inset:where(.r-side-bottom) {
447
324
  --margin-top-override: var(--margin-top);
448
325
  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
449
326
  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
@@ -453,7 +330,7 @@ to {
453
330
  border-bottom-left-radius: var(--inset-border-radius-calc);
454
331
  border-bottom-right-radius: var(--inset-border-radius-calc);
455
332
  }
456
- .ui-Inset:where(.inset-left) {
333
+ .ui-Inset:where(.r-side-left) {
457
334
  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
458
335
  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
459
336
  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
@@ -463,7 +340,7 @@ to {
463
340
  border-bottom-left-radius: var(--inset-border-radius-calc);
464
341
  border-bottom-right-radius: 0px;
465
342
  }
466
- .ui-Inset:where(.inset-right) {
343
+ .ui-Inset:where(.r-side-right) {
467
344
  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
468
345
  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
469
346
  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
@@ -473,6 +350,183 @@ to {
473
350
  border-bottom-left-radius: 0px;
474
351
  border-bottom-right-radius: var(--inset-border-radius-calc);
475
352
  }
353
+ .ui-Inset:where(.r-side-x) {
354
+ --margin-top-override: var(--margin-top);
355
+ --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
356
+ --margin-bottom-override: var(--margin-bottom);
357
+ --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
358
+ border-radius: 0px;
359
+ }
360
+ .ui-Inset:where(.r-side-y) {
361
+ --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
362
+ --margin-right-override: var(--margin-right);
363
+ --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
364
+ --margin-left-override: var(--margin-left);
365
+ border-radius: 0px;
366
+ }
367
+ .ui-Inset:where(.r-side-all) {
368
+ --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
369
+ --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
370
+ --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
371
+ --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
372
+ border-radius: var(--inset-border-radius-calc);
373
+ }
374
+
375
+ .ui-DialogTitle {
376
+ display: flex;
377
+ justify-content: space-between;
378
+ align-items: center;
379
+ padding: var(--dialog-content-padding);
380
+ background-color: var(--color-panel-solid);
381
+ }
382
+ .ui-DialogTitle:where(.r-variant-ghost) {
383
+ margin-bottom: 0;
384
+ }
385
+ .ui-DialogTitle:where(.r-variant-outline),
386
+ .ui-DialogTitle:where(.r-variant-solid) {
387
+ border-bottom: 1px solid var(--gray-a4);
388
+ margin-bottom: var(--dialog-content-padding);
389
+ }
390
+ .ui-DialogTitle:where(.r-variant-solid),
391
+ .ui-DialogTitle:where(.r-variant-surface) {
392
+ background-color: var(--gray-a2);
393
+ margin-bottom: var(--dialog-content-padding);
394
+ }
395
+ .ui-DialogTitleText {
396
+ flex-grow: 1;
397
+ font-weight: var(--font-weight-medium);
398
+ }
399
+
400
+ .ui-DialogOverlay {
401
+ position: fixed;
402
+ inset: 0;
403
+ }
404
+ .ui-DialogOverlay::before {
405
+ position: fixed;
406
+ content: '';
407
+ inset: 0;
408
+ background-color: var(--color-overlay);
409
+ }
410
+ .ui-DialogWrapper {
411
+ display: flex;
412
+ overflow: hidden;
413
+ position: absolute;
414
+ inset: 0;
415
+ }
416
+ .ui-DialogContainer {
417
+ display: flex;
418
+ flex-direction: column;
419
+ flex-grow: 1;
420
+ align-items: center;
421
+ justify-content: flex-end;
422
+ width: 100%;
423
+ box-sizing: border-box;
424
+ padding-top: var(--space-6);
425
+ }
426
+ .ui-DialogContent {
427
+ --inset-padding-top: var(--dialog-content-padding);
428
+ --inset-padding-right: var(--dialog-content-padding);
429
+ --inset-padding-bottom: var(--dialog-content-padding);
430
+ --inset-padding-left: var(--dialog-content-padding);
431
+
432
+ width: 100%;
433
+ max-height: calc(100vh - var(--space-6) * 2);
434
+ position: relative;
435
+ box-sizing: border-box;
436
+ overflow: auto;
437
+ text-align: left;
438
+ padding: var(--dialog-content-padding);
439
+ box-sizing: border-box;
440
+ background-color: var(--color-panel-solid);
441
+ outline: none;
442
+ border-top-left-radius: var(--dialog-content-radius);
443
+ border-top-right-radius: var(--dialog-content-radius);
444
+ }
445
+ .ui-DialogContent:where(.r-size-1) {
446
+ --dialog-content-radius: var(--radius-4);
447
+ --dialog-content-padding: var(--space-2);
448
+ }
449
+ .ui-DialogContent:where(.r-size-2) {
450
+ --dialog-content-radius: var(--radius-4);
451
+ --dialog-content-padding: var(--space-3);
452
+ }
453
+ .ui-DialogContent:where(.r-size-3) {
454
+ --dialog-content-radius: var(--radius-5);
455
+ --dialog-content-padding: var(--space-4);
456
+ }
457
+ .ui-DialogContent:where(.r-size-4) {
458
+ --dialog-content-radius: var(--radius-5);
459
+ --dialog-content-padding: var(--space-5);
460
+ }
461
+ .ui-DialogContent > h2[id^="reka-dialog-title"] {
462
+ font-size: var(--font-size-5);
463
+ font-weight: var(--font-weight-bold);
464
+ line-height: var(--line-height-4);
465
+ margin-bottom: var(--space-3);
466
+ }
467
+ .ui-DialogContent > p[id^="reka-dialog-description"] {
468
+ font-size: var(--font-size-2);
469
+ line-height: var(--line-height-2);
470
+ letter-spacing: var(--letter-spacing-2);
471
+ }
472
+ @media (min-width: 520px) {
473
+ .ui-DialogContainer {
474
+ justify-content: center;
475
+ padding-bottom: max(var(--space-6), 6vh);
476
+ padding-left: var(--space-4);
477
+ padding-right: var(--space-4);
478
+ }
479
+ .ui-DialogContent {
480
+ box-shadow: var(--shadow-6);
481
+ border-bottom-left-radius: var(--dialog-content-radius);
482
+ border-bottom-right-radius: var(--dialog-content-radius);
483
+ }
484
+ }
485
+ @media (prefers-reduced-motion: no-preference) {
486
+ @keyframes ui-dialog-overlay-no-op {
487
+ from {
488
+ opacity: 1;
489
+ }
490
+ to {
491
+ opacity: 1;
492
+ }
493
+ }
494
+ @keyframes ui-dialog-content-show {
495
+ from {
496
+ opacity: 0.1;
497
+ transform: translateY(var(--space-6));
498
+ }
499
+ to {
500
+ opacity: 1;
501
+ transform: translateY(0);
502
+ }
503
+ }
504
+ @keyframes ui-dialog-content-hide {
505
+ from {
506
+ opacity: 1;
507
+ transform: translateY(0);
508
+ }
509
+ to {
510
+ opacity: 0.1;
511
+ transform: translateY(var(--space-6));
512
+ }
513
+ }
514
+ .ui-DialogOverlay[data-state='closed'] {
515
+ animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
516
+ }
517
+ .ui-DialogOverlay[data-state='open']::before {
518
+ animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
519
+ }
520
+ .ui-DialogOverlay[data-state='closed']::before {
521
+ animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
522
+ }
523
+ .ui-DialogOverlay[data-state='open'] :where(.ui-DialogContent) {
524
+ animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
525
+ }
526
+ .ui-DialogOverlay[data-state='closed'] :where(.ui-DialogContent) {
527
+ animation: ui-dialog-content-hide 150ms cubic-bezier(0.16, 1, 0.3, 1);
528
+ }
529
+ }
476
530
 
477
531
  .ui-DialogHead {
478
532
  position: sticky;
package/dist/components/inset.css CHANGED
@@ -6,10 +6,10 @@
6
6
  --margin-bottom: 0px;
7
7
  --margin-left: 0px;
8
8
  overflow: hidden;
9
- margin-top: var(--margin-top-override);
10
- margin-right: var(--margin-right-override);
11
- margin-bottom: var(--margin-bottom-override);
12
- margin-left: var(--margin-left-override);
9
+ margin-top: var(--margin-top-override, var(--margin-top));
10
+ margin-right: var(--margin-right-override, var(--margin-right));
11
+ margin-bottom: var(--margin-bottom-override, var(--margin-bottom));
12
+ margin-left: var(--margin-left-override, var(--margin-left));
13
13
  }
14
14
  .ui-Inset > * {
15
15
  --margin-top-override: initial;
@@ -31,7 +31,7 @@
31
31
  --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
32
32
  --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
33
33
  }
34
- .ui-Inset:where(.inset-top) {
34
+ .ui-Inset:where(.r-side-top) {
35
35
  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
36
36
  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
37
37
  --margin-bottom-override: var(--margin-bottom);
@@ -41,7 +41,7 @@
41
41
  border-bottom-left-radius: 0px;
42
42
  border-bottom-right-radius: 0px;
43
43
  }
44
- .ui-Inset:where(.inset-bottom) {
44
+ .ui-Inset:where(.r-side-bottom) {
45
45
  --margin-top-override: var(--margin-top);
46
46
  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
47
47
  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
@@ -51,7 +51,7 @@
51
51
  border-bottom-left-radius: var(--inset-border-radius-calc);
52
52
  border-bottom-right-radius: var(--inset-border-radius-calc);
53
53
  }
54
- .ui-Inset:where(.inset-left) {
54
+ .ui-Inset:where(.r-side-left) {
55
55
  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
56
56
  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
57
57
  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
@@ -61,7 +61,7 @@
61
61
  border-bottom-left-radius: var(--inset-border-radius-calc);
62
62
  border-bottom-right-radius: 0px;
63
63
  }
64
- .ui-Inset:where(.inset-right) {
64
+ .ui-Inset:where(.r-side-right) {
65
65
  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
66
66
  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
67
67
  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
@@ -71,3 +71,24 @@
71
71
  border-bottom-left-radius: 0px;
72
72
  border-bottom-right-radius: var(--inset-border-radius-calc);
73
73
  }
74
+ .ui-Inset:where(.r-side-x) {
75
+ --margin-top-override: var(--margin-top);
76
+ --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
77
+ --margin-bottom-override: var(--margin-bottom);
78
+ --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
79
+ border-radius: 0px;
80
+ }
81
+ .ui-Inset:where(.r-side-y) {
82
+ --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
83
+ --margin-right-override: var(--margin-right);
84
+ --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
85
+ --margin-left-override: var(--margin-left);
86
+ border-radius: 0px;
87
+ }
88
+ .ui-Inset:where(.r-side-all) {
89
+ --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
90
+ --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
91
+ --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
92
+ --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
93
+ border-radius: var(--inset-border-radius-calc);
94
+ }
package/dist/components/pagination.css CHANGED
@@ -154,7 +154,7 @@
154
154
  background-color: var(--gray-a3);
155
155
  }
156
156
  .ui-Button:where(.r-variant-ghost) {
157
- padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
157
+ padding: var(--button-ghost-padding-y) var(--button-padding-x);
158
158
  }
159
159
  @media (hover: hover) {
160
160
  .ui-Button:where(.r-variant-ghost):where(:hover) {