@typlog/ui 0.12.1 → 0.12.2

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/components/dialog.css +28 -24
  2. package/components/dropdown.css +0 -1
  3. package/components/popover.css +12 -13
  4. package/components/radio.css +31 -35
  5. package/components/tabs.css +55 -55
  6. package/components.css +182 -172
  7. package/components.d.ts +11 -0
  8. package/components.js +102 -67
  9. package/package.json +1 -1
  10. package/components/button.css +0 -259
package/components/dialog.css CHANGED
@@ -39,24 +39,31 @@
39
39
  box-sizing: border-box;
40
40
  padding-top: var(--space-6);
41
41
  }
42
+ @layer components {
42
43
  .ui-DialogPopup {
43
- width: 100%;
44
- max-height: calc(100vh - var(--space-6) * 2);
45
- position: relative;
46
- box-sizing: border-box;
47
- overflow: auto;
48
- text-align: left;
49
- box-sizing: border-box;
50
- background-color: var(--color-panel-solid);
51
- outline: none;
52
- border-top-left-radius: var(--dialog-popup-radius);
53
- border-top-right-radius: var(--dialog-popup-radius);
54
- max-width: var(--dialog-popup-max-width);
55
- max-height: var(--dialog-popup-max-height);
56
- padding: var(--dialog-popup-padding);
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
+ }
57
64
  }
58
65
  .ui-DialogPopup:where(.r-size-1) {
59
- --dialog-popup-padding: var(--space-3);
66
+ --dialog-popup-padding: var(--space-4);
60
67
  --dialog-popup-radius: var(--radius-4);
61
68
  --dialog-popup-max-width: 450px;
62
69
  --dialog-popup-max-height: calc(100vh - 100px);
@@ -74,7 +81,7 @@
74
81
  --dialog-popup-max-height: calc(100vh - 100px);
75
82
  }
76
83
  .ui-DialogPopup:where(.r-size-4) {
77
- --dialog-popup-padding: var(--space-6);
84
+ --dialog-popup-padding: var(--space-5);
78
85
  --dialog-popup-radius: var(--radius-5);
79
86
  --dialog-popup-max-width: 1200px;
80
87
  --dialog-popup-max-height: calc(100vh - 100px);
@@ -85,11 +92,6 @@
85
92
  --dialog-popup-max-width: none;
86
93
  --dialog-popup-max-height: calc(100vh - 64px);
87
94
  }
88
-
89
- /* special handle for tailwindcss p-0, when css priority doesn't work */
90
- .ui-DialogPopup:where(.p-0) {
91
- --dialog-popup-padding: 0;
92
- }
93
95
  @media (min-width: 450px) {
94
96
  .ui-DialogContainer {
95
97
  justify-content: center;
@@ -97,10 +99,12 @@
97
99
  padding-left: var(--space-4);
98
100
  padding-right: var(--space-4);
99
101
  }
102
+ @layer components {
100
103
  .ui-DialogPopup {
101
- box-shadow: var(--shadow-6);
102
- border-bottom-left-radius: var(--dialog-popup-radius);
103
- border-bottom-right-radius: var(--dialog-popup-radius);
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
+ }
104
108
  }
105
109
  }
106
110
  @media (prefers-reduced-motion: no-preference) {
package/components/dropdown.css CHANGED
@@ -152,7 +152,6 @@
152
152
  box-sizing: border-box;
153
153
  overflow: hidden;
154
154
  border-radius: var(--menu-content-border-radius);
155
-
156
155
  box-shadow: var(--shadow-5);
157
156
  background-color: var(--color-panel-solid);
158
157
  }
package/components/popover.css CHANGED
@@ -34,17 +34,19 @@
34
34
  }
35
35
  }
36
36
 
37
+ @layer components {
37
38
  .ui-PopoverPopup {
38
- background-color: var(--color-panel-solid);
39
- box-shadow: var(--shadow-5);
40
- min-width: var(--reka-popover-trigger-width);
41
- max-width: var(--reka-popover-content-available-width);
42
- outline: 0;
43
- overflow: auto;
44
- position: relative;
45
- box-sizing: border-box;
46
- transform-origin: var(--reka-popover-content-transform-origin);
47
- padding: var(--popover-popup-padding);
39
+ background-color: var(--color-panel-solid);
40
+ box-shadow: var(--shadow-5);
41
+ min-width: var(--reka-popover-trigger-width);
42
+ max-width: var(--reka-popover-content-available-width);
43
+ outline: 0;
44
+ overflow: auto;
45
+ position: relative;
46
+ box-sizing: border-box;
47
+ transform-origin: var(--reka-popover-content-transform-origin);
48
+ padding: var(--popover-popup-padding);
49
+ }
48
50
  }
49
51
  .ui-PopoverPopup:where(.r-size-1) {
50
52
  border-radius: var(--radius-4);
@@ -54,6 +56,3 @@
54
56
  border-radius: var(--radius-5);
55
57
  --popover-popup-padding: var(--space-4);
56
58
  }
57
- .ui-PopoverPopup:where(.p-0) {
58
- --popover-popup-padding: 0;
59
- }
package/components/radio.css CHANGED
@@ -128,12 +128,14 @@
128
128
  --radio-size: calc(var(--space-4) * 1.25);
129
129
  }
130
130
 
131
+ @layer components {
131
132
  .ui-RadioGroupItem {
132
- display: inline-flex;
133
- align-items: center;
134
- gap: .5em;
135
- width: -moz-fit-content;
136
- width: fit-content;
133
+ display: inline-flex;
134
+ align-items: center;
135
+ gap: .5em;
136
+ width: -moz-fit-content;
137
+ width: fit-content;
138
+ }
137
139
  }
138
140
 
139
141
  .ui-RadioCardsRoot:where(.r-size-1) {
@@ -148,19 +150,21 @@
148
150
  --card-padding: var(--space-5);
149
151
  --card-border-radius: max(var(--radius-5), var(--radius-full));
150
152
  }
153
+ @layer components {
151
154
  .ui-BaseCard {
152
- display: block;
153
- position: relative;
154
- overflow: hidden;
155
- font-style: normal;
156
- text-align: start;
157
- box-sizing: border-box;
158
- border-radius: var(--card-border-radius);
159
- padding: var(--card-padding);
160
- border-color: var(--card-border-color, var(--gray-a5));
161
- border-width: var(--card-border-width, 1px);
162
- border-style: solid;
163
- width: 100%;
155
+ display: block;
156
+ position: relative;
157
+ overflow: hidden;
158
+ font-style: normal;
159
+ text-align: start;
160
+ box-sizing: border-box;
161
+ border-radius: var(--card-border-radius);
162
+ padding: var(--card-padding);
163
+ border-color: var(--card-border-color, var(--gray-a5));
164
+ border-width: var(--card-border-width, 1px);
165
+ border-style: solid;
166
+ width: 100%;
167
+ }
164
168
  }
165
169
  .ui-BaseCard:where(:-moz-any-link, button, label):where(:hover) {
166
170
  --card-border-color: var(--gray-a7);
@@ -177,11 +181,6 @@
177
181
  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
178
182
  }
179
183
 
180
- /** special enhancement for tailwindcss */
181
- .ui-BaseCard:where(.p-0) {
182
- --card-padding: 0;
183
- }
184
-
185
184
  .ui-RadioCardsItem {
186
185
  height: 100%;
187
186
  }
@@ -190,15 +189,17 @@
190
189
  box-shadow: 0 0 0 1px var(--accent-10);
191
190
  }
192
191
 
192
+ @layer components {
193
193
  .ui-RadioTabsRoot {
194
- display: inline-flex;
195
- width: -moz-fit-content;
196
- width: fit-content;
197
- align-items: center;
198
- box-sizing: border-box;
199
- padding: var(--radio-tabs-list-padding);
200
- border-radius: var(--radio-tabs-list-radius);
201
- font-size: var(--radio-tabs-font-size);
194
+ display: inline-flex;
195
+ width: -moz-fit-content;
196
+ width: fit-content;
197
+ align-items: center;
198
+ box-sizing: border-box;
199
+ padding: var(--radio-tabs-list-padding);
200
+ border-radius: var(--radio-tabs-list-radius);
201
+ font-size: var(--radio-tabs-font-size);
202
+ }
202
203
  }
203
204
  .ui-RadioTabsRoot:where(.r-size-1) {
204
205
  --radio-tabs-font-size: var(--font-size-1);
@@ -225,11 +226,6 @@
225
226
  background-color: var(--accent-a3);
226
227
  }
227
228
 
228
- /* special fix for tailwind */
229
- .ui-RadioTabsRoot:where(.w-full) {
230
- width: 100%;
231
- }
232
-
233
229
  .ui-RadioTabsItem {
234
230
  display: inline-flex;
235
231
  flex-grow: 1;
package/components/tabs.css CHANGED
@@ -1,19 +1,11 @@
1
1
 
2
- .ui-TabList {
3
- justify-content: flex-start;
4
- position: relative;
5
- overflow-x: auto;
6
- white-space: nowrap;
7
- font-style: normal;
8
- scrollbar-width: none;
9
- }
10
2
  .ui-TabList::-webkit-scrollbar {
11
3
  display: none;
12
4
  }
13
5
  .ui-TabList:where(.r-size-1) {
14
- font-size: var(--font-size-1);
15
- line-height: var(--line-height-1);
16
- letter-spacing: var(--letter-spacing-1);
6
+ --tab-font-size: var(--font-size-1);
7
+ --tab-line-height: var(--line-height-1);
8
+ --tab-letter-spacing: var(--letter-spacing-1);
17
9
  --tab-height: var(--space-6);
18
10
  --tab-padding-x: var(--space-1);
19
11
  --tab-radius: max(var(--radius-2), var(--radius-full));
@@ -22,9 +14,9 @@
22
14
  --tab-inner-height: var(--space-5);
23
15
  }
24
16
  .ui-TabList:where(.r-size-2) {
25
- font-size: var(--font-size-2);
26
- line-height: var(--line-height-2);
27
- letter-spacing: var(--letter-spacing-2);
17
+ --tab-font-size: var(--font-size-2);
18
+ --tab-line-height: var(--line-height-2);
19
+ --tab-letter-spacing: var(--letter-spacing-2);
28
20
  --tab-height: var(--space-7);
29
21
  --tab-padding-x: var(--space-2);
30
22
  --tab-radius: max(var(--radius-3), var(--radius-full));
@@ -32,35 +24,62 @@
32
24
  --tab-inner-padding-x: var(--space-2);
33
25
  --tab-inner-height: calc(var(--space-6) - var(--space-1));
34
26
  }
35
- .ui-TabsIndicator {
36
- position: absolute;
37
- left: 0;
38
- transition-property: width, transform;
39
- transform: translateX(var(--reka-tabs-indicator-position));
40
- width: var(--reka-tabs-indicator-size);
27
+ .ui-TabList:where(.r-variant-surface.r-size-1),
28
+ .ui-TabList:where(.r-variant-soft.r-size-1) {
29
+ --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
30
+ }
31
+ @layer components {
32
+ .ui-TabList {
33
+ justify-content: flex-start;
34
+ position: relative;
35
+ overflow-x: auto;
36
+ white-space: nowrap;
37
+ font-style: normal;
38
+ scrollbar-width: none;
39
+ font-size: var(--tab-font-size);
40
+ line-height: var(--tab-line-height);
41
+ letter-spacing: var(--tab-letter-spacing);
41
42
  }
42
43
 
43
- /** classic & surface */
44
+ /** classic & surface */
44
45
  .ui-TabList:where(.r-variant-surface, .r-variant-classic) {
45
- position: relative;
46
- display: inline-flex;
47
- width: -moz-fit-content;
48
- width: fit-content;
49
- align-items: center;
50
- justify-content: center;
51
- vertical-align: top;
52
- flex-shrink: 0;
53
- border-radius: var(--tab-radius);
46
+ position: relative;
47
+ display: inline-flex;
48
+ width: -moz-fit-content;
49
+ width: fit-content;
50
+ align-items: center;
51
+ justify-content: center;
52
+ vertical-align: top;
53
+ flex-shrink: 0;
54
+ border-radius: var(--tab-radius);
54
55
  }
55
56
  .ui-TabList:where(.r-variant-classic) {
56
- background-color: var(--accent-a3);
57
- padding-left: var(--tab-padding-x);
58
- padding-right: var(--tab-padding-x);
57
+ background-color: var(--accent-a3);
58
+ padding-left: var(--tab-padding-x);
59
+ padding-right: var(--tab-padding-x);
59
60
  }
60
61
  .ui-TabList:where(.r-variant-surface) {
61
- --tab-item-radius: 0;
62
- --tab-inner-height: var(--tab-height);
63
- box-shadow: inset 0 0 0 1px var(--gray-a6);
62
+ --tab-item-radius: 0;
63
+ --tab-inner-height: var(--tab-height);
64
+ box-shadow: inset 0 0 0 1px var(--gray-a6);
65
+ }
66
+
67
+ /** soft & outline */
68
+ .ui-TabList:where(.r-variant-outline, .r-variant-soft) {
69
+ display: flex;
70
+ box-shadow: inset 0 -1px 0 0 var(--gray-a5);
71
+ }
72
+ .ui-TabList:where(.r-variant-soft) {
73
+ padding-left: var(--tab-padding-x);
74
+ padding-right: var(--tab-padding-x);
75
+ }
76
+ }
77
+ .ui-TabsIndicator {
78
+ position: absolute;
79
+ left: 0;
80
+ transition-property: width, transform;
81
+ transform: translateX(var(--reka-tabs-indicator-position));
82
+ width: var(--reka-tabs-indicator-size);
64
83
  }
65
84
  .ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
66
85
  top: 0;
@@ -80,20 +99,6 @@
80
99
  border-radius: var(--tab-item-radius);
81
100
  transition-duration: 100ms;
82
101
  }
83
- .ui-TabList:where(.r-variant-surface.r-size-1),
84
- .ui-TabList:where(.r-variant-soft.r-size-1) {
85
- --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
86
- }
87
-
88
- /** soft & outline */
89
- .ui-TabList:where(.r-variant-outline, .r-variant-soft) {
90
- display: flex;
91
- box-shadow: inset 0 -1px 0 0 var(--gray-a5);
92
- }
93
- .ui-TabList:where(.r-variant-soft) {
94
- padding-left: var(--tab-padding-x);
95
- padding-right: var(--tab-padding-x);
96
- }
97
102
  .ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
98
103
  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
99
104
  height: var(--tab-inner-height);
@@ -113,11 +118,6 @@
113
118
  background-color: var(--accent-12);
114
119
  }
115
120
 
116
- /** special fix for tailwind */
117
- .ui-TabList:where(.w-full) {
118
- width: 100%;
119
- }
120
-
121
121
  .ui-TabTrigger {
122
122
  display: flex;
123
123
  align-items: center;