@typlog/ui 0.12.2 → 0.12.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 (13) hide show
  1. package/components/badge.css +13 -11
  2. package/components/checkbox.css +11 -9
  3. package/components/dropdown.css +14 -5
  4. package/components/{scrollarea.css → scroll-area.css} +14 -5
  5. package/components/separator.css +11 -9
  6. package/components/table.css +15 -7
  7. package/components/tabs.css +25 -26
  8. package/components/toggle.css +37 -29
  9. package/components.css +502 -272
  10. package/components.d.ts +179 -54
  11. package/components.js +614 -383
  12. package/package.json +1 -1
  13. package/components/dialog.css +0 -159
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@typlog/ui",
3
- "version": "0.12.2",
3
+ "version": "0.12.3",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "description": "Themed components for Reka UI with Radix colors.",
package/components/dialog.css DELETED
@@ -1,159 +0,0 @@
1
-
2
- .ui-DialogTitle {
3
- font-size: var(--font-size-4);
4
- font-weight: var(--font-weight-semibold);
5
- line-height: var(--line-height-4);
6
- }
7
-
8
- .ui-DialogDescription {
9
- font-size: var(--font-size-3);
10
- line-height: var(--line-height-2);
11
- color: var(--gray-11);
12
- }
13
- .ui-DialogTitle + .ui-DialogDescription {
14
- margin-top: var(--space-2);
15
- }
16
- .ui-DialogOverlay {
17
- position: fixed;
18
- inset: 0;
19
- }
20
- .ui-DialogOverlay::before {
21
- position: fixed;
22
- content: '';
23
- inset: 0;
24
- background-color: var(--color-overlay);
25
- }
26
- .ui-DialogWrapper {
27
- display: flex;
28
- overflow: hidden;
29
- position: absolute;
30
- inset: 0;
31
- }
32
- .ui-DialogContainer {
33
- display: flex;
34
- flex-direction: column;
35
- flex-grow: 1;
36
- align-items: center;
37
- justify-content: flex-end;
38
- width: 100%;
39
- box-sizing: border-box;
40
- padding-top: var(--space-6);
41
- }
42
- @layer components {
43
- .ui-DialogPopup {
44
- width: 100%;
45
- max-height: calc(100vh - var(--space-6) * 2);
46
- position: relative;
47
- box-sizing: border-box;
48
- overflow: auto;
49
- text-align: left;
50
- box-sizing: border-box;
51
- background-color: var(--color-panel-solid);
52
- outline: none;
53
- border-top-left-radius: var(--dialog-popup-radius);
54
- border-top-right-radius: var(--dialog-popup-radius);
55
- max-width: var(--dialog-popup-max-width);
56
- max-height: var(--dialog-popup-max-height);
57
- padding: var(--dialog-popup-padding);
58
- }
59
- :where(.ui-DialogPopup) .ui-CloseButton {
60
- position: absolute;
61
- top: calc(var(--dialog-popup-padding) / 2);
62
- right: calc(var(--dialog-popup-padding) / 2);
63
- }
64
- }
65
- .ui-DialogPopup:where(.r-size-1) {
66
- --dialog-popup-padding: var(--space-4);
67
- --dialog-popup-radius: var(--radius-4);
68
- --dialog-popup-max-width: 450px;
69
- --dialog-popup-max-height: calc(100vh - 100px);
70
- }
71
- .ui-DialogPopup:where(.r-size-2) {
72
- --dialog-popup-padding: var(--space-4);
73
- --dialog-popup-radius: var(--radius-4);
74
- --dialog-popup-max-width: 600px;
75
- --dialog-popup-max-height: calc(100vh - 100px);
76
- }
77
- .ui-DialogPopup:where(.r-size-3) {
78
- --dialog-popup-padding: var(--space-5);
79
- --dialog-popup-radius: var(--radius-5);
80
- --dialog-popup-max-width: 860px;
81
- --dialog-popup-max-height: calc(100vh - 100px);
82
- }
83
- .ui-DialogPopup:where(.r-size-4) {
84
- --dialog-popup-padding: var(--space-5);
85
- --dialog-popup-radius: var(--radius-5);
86
- --dialog-popup-max-width: 1200px;
87
- --dialog-popup-max-height: calc(100vh - 100px);
88
- }
89
- .ui-DialogPopup:where(.r-size-5) {
90
- --dialog-popup-padding: var(--space-6);
91
- --dialog-popup-radius: var(--radius-5);
92
- --dialog-popup-max-width: none;
93
- --dialog-popup-max-height: calc(100vh - 64px);
94
- }
95
- @media (min-width: 450px) {
96
- .ui-DialogContainer {
97
- justify-content: center;
98
- padding-bottom: max(var(--space-6), 6vh);
99
- padding-left: var(--space-4);
100
- padding-right: var(--space-4);
101
- }
102
- @layer components {
103
- .ui-DialogPopup {
104
- box-shadow: var(--shadow-6);
105
- border-bottom-left-radius: var(--dialog-popup-radius);
106
- border-bottom-right-radius: var(--dialog-popup-radius);
107
- }
108
- }
109
- }
110
- @media (prefers-reduced-motion: no-preference) {
111
- @keyframes ui-dialog-overlay-no-op {
112
- from {
113
- opacity: 1;
114
- }
115
- to {
116
- opacity: 1;
117
- }
118
- }
119
- @keyframes ui-dialog-content-show {
120
- from {
121
- opacity: 0.1;
122
- transform: translate3d(0, var(--space-6), 0);
123
- }
124
- to {
125
- opacity: 1;
126
- transform: translate3d(0, 0, 0);
127
- }
128
- }
129
- @keyframes ui-dialog-content-hide {
130
- from {
131
- opacity: 1;
132
- transform: translate3d(0, 0, 0);
133
- }
134
- to {
135
- opacity: 1;
136
- transform: translate3d(0, var(--space-5), 0);
137
- }
138
- }
139
- .ui-DialogOverlay[data-state='closed'] {
140
- animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
141
- }
142
- .ui-DialogOverlay[data-state='open']::before {
143
- animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
144
- }
145
- .ui-DialogOverlay[data-state='closed']::before {
146
- animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
147
- }
148
- .ui-DialogPopup:where([data-state="open"]) {
149
- animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
150
- }
151
- .ui-DialogPopup:where([data-state="closed"]) {
152
- animation: ui-dialog-content-hide 100ms linear;
153
- }
154
- }
155
-
156
- .ui-AlertPopup {
157
- --dialog-popup-radius: var(--radius-4);
158
- --dialog-popup-max-width: 450px;
159
- }