@nattui/react-components 0.0.35 → 0.0.37
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.
|
@@ -51,12 +51,8 @@
|
|
|
51
51
|
/* ===================================================== */
|
|
52
52
|
/* Rounded */
|
|
53
53
|
/* ===================================================== */
|
|
54
|
-
.button__rounded_base {
|
|
55
|
-
border-radius: 12px;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
54
|
.button__rounded_full {
|
|
59
|
-
border-radius: 9999px;
|
|
55
|
+
border-radius: 9999px !important;
|
|
60
56
|
}
|
|
61
57
|
|
|
62
58
|
/* ===================================================== */
|
|
@@ -65,26 +61,31 @@
|
|
|
65
61
|
.button__size_32 {
|
|
66
62
|
--size: 32px;
|
|
67
63
|
padding: 0 10px;
|
|
64
|
+
border-radius: 8px;
|
|
68
65
|
}
|
|
69
66
|
|
|
70
67
|
.button__size_36 {
|
|
71
68
|
--size: 36px;
|
|
72
69
|
padding: 0 12px;
|
|
70
|
+
border-radius: 10px;
|
|
73
71
|
}
|
|
74
72
|
|
|
75
73
|
.button__size_40 {
|
|
76
74
|
--size: 40px;
|
|
77
75
|
padding: 0 14px;
|
|
76
|
+
border-radius: 12px;
|
|
78
77
|
}
|
|
79
78
|
|
|
80
79
|
.button__size_44 {
|
|
81
80
|
--size: 44px;
|
|
82
81
|
padding: 0 16px;
|
|
82
|
+
border-radius: 14px;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
.button__size_48 {
|
|
86
86
|
--size: 48px;
|
|
87
87
|
padding: 0 18px;
|
|
88
|
+
border-radius: 16px;
|
|
88
89
|
}
|
|
89
90
|
|
|
90
91
|
/* ===================================================== */
|
|
@@ -96,21 +97,9 @@
|
|
|
96
97
|
background-color: var(--color-primary-9);
|
|
97
98
|
background-image: linear-gradient(
|
|
98
99
|
to bottom,
|
|
99
|
-
color-mix(in oklab, transparent 100%, #ffffff
|
|
100
|
+
color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
|
|
100
101
|
color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
|
|
101
102
|
);
|
|
102
|
-
box-shadow:
|
|
103
|
-
0 0 0 1px var(--color-primary-9) inset,
|
|
104
|
-
0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
105
|
-
0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.button__variant_accent:active:enabled,
|
|
109
|
-
.button__variant_accent[aria-pressed="true"]:enabled {
|
|
110
|
-
box-shadow:
|
|
111
|
-
0 0 0 1px var(--color-primary-9) inset,
|
|
112
|
-
0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
113
|
-
0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
114
103
|
}
|
|
115
104
|
|
|
116
105
|
.button__variant_accent:active:enabled,
|
|
@@ -123,7 +112,7 @@
|
|
|
123
112
|
background-image: linear-gradient(
|
|
124
113
|
to bottom,
|
|
125
114
|
color-mix(in oklab, transparent 100%, #000000 0%) 50%,
|
|
126
|
-
color-mix(in oklab, transparent 100%, #000000
|
|
115
|
+
color-mix(in oklab, transparent 100%, #000000 5%) 50%
|
|
127
116
|
);
|
|
128
117
|
}
|
|
129
118
|
|
|
@@ -136,7 +125,7 @@
|
|
|
136
125
|
.button__variant_ghost:active:enabled,
|
|
137
126
|
.button__variant_ghost:hover:enabled,
|
|
138
127
|
.button__variant_ghost[aria-pressed="true"]:enabled {
|
|
139
|
-
background-color: var(--color-gray-
|
|
128
|
+
background-color: var(--color-gray-3);
|
|
140
129
|
}
|
|
141
130
|
|
|
142
131
|
:global(.dark) .button__variant_ghost {
|
|
@@ -146,24 +135,12 @@
|
|
|
146
135
|
/* Primary */
|
|
147
136
|
.button__variant_primary {
|
|
148
137
|
color: var(--color-white);
|
|
149
|
-
background-color: var(--color-gray-dark-
|
|
138
|
+
background-color: var(--color-gray-dark-1);
|
|
150
139
|
background-image: linear-gradient(
|
|
151
140
|
to bottom,
|
|
152
|
-
color-mix(in oklab, transparent 100%, #ffffff
|
|
141
|
+
color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
|
|
153
142
|
color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
|
|
154
143
|
);
|
|
155
|
-
box-shadow:
|
|
156
|
-
0 0 0 1px var(--color-gray-dark-2) inset,
|
|
157
|
-
0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
158
|
-
0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.button__variant_primary:active:enabled,
|
|
162
|
-
.button__variant_primary[aria-pressed="true"]:enabled {
|
|
163
|
-
box-shadow:
|
|
164
|
-
0 0 0 1px var(--color-gray-dark-2) inset,
|
|
165
|
-
0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
166
|
-
0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
167
144
|
}
|
|
168
145
|
|
|
169
146
|
.button__variant_primary:active:enabled,
|
|
@@ -178,20 +155,8 @@
|
|
|
178
155
|
background-image: linear-gradient(
|
|
179
156
|
to bottom,
|
|
180
157
|
color-mix(in oklab, transparent 100%, #000000 0%) 50%,
|
|
181
|
-
color-mix(in oklab, transparent 100%, #000000
|
|
158
|
+
color-mix(in oklab, transparent 100%, #000000 5%) 50%
|
|
182
159
|
);
|
|
183
|
-
box-shadow:
|
|
184
|
-
0 0 0 1px var(--color-gray-light-1) inset,
|
|
185
|
-
0 1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
186
|
-
0 -1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
:global(.dark) .button__variant_primary:active:enabled,
|
|
190
|
-
:global(.dark) .button__variant_primary[aria-pressed="true"]:enabled {
|
|
191
|
-
box-shadow:
|
|
192
|
-
0 0 0 1px var(--color-gray-light-2) inset,
|
|
193
|
-
0 -1px 0 1px rgba(255, 255, 255, 0.25) inset,
|
|
194
|
-
0 1px 0 1px rgba(0, 0, 0, 0.1) inset;
|
|
195
160
|
}
|
|
196
161
|
|
|
197
162
|
:global(.dark) .button__variant_primary:active:enabled,
|
|
@@ -209,33 +174,23 @@
|
|
|
209
174
|
color-mix(in oklab, transparent 100%, #000000 0%) 50%,
|
|
210
175
|
color-mix(in oklab, transparent 100%, #000000 2.5%) 50%
|
|
211
176
|
);
|
|
212
|
-
box-shadow:
|
|
213
|
-
0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
|
|
214
|
-
/* Bottom */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
.button__variant_secondary:active:enabled,
|
|
218
|
-
.button__variant_secondary[aria-pressed="true"]:enabled {
|
|
219
|
-
box-shadow: 0 0 0 1px var(--color-gray-6) inset;
|
|
177
|
+
box-shadow: 0 0 0 1px var(--color-gray-4) inset;
|
|
220
178
|
}
|
|
221
179
|
|
|
222
180
|
.button__variant_secondary:active:enabled,
|
|
223
181
|
.button__variant_secondary:hover:enabled,
|
|
224
182
|
.button__variant_secondary[aria-pressed="true"]:enabled {
|
|
225
|
-
background-color: var(--color-gray-
|
|
183
|
+
background-color: var(--color-gray-2);
|
|
184
|
+
box-shadow: 0 0 0 1px var(--color-gray-6) inset;
|
|
226
185
|
}
|
|
227
186
|
|
|
228
187
|
:global(.dark) .button__variant_secondary {
|
|
229
188
|
color: var(--color-white);
|
|
230
|
-
background-color: var(--color-gray-2);
|
|
231
189
|
background-image: linear-gradient(
|
|
232
190
|
to bottom,
|
|
233
191
|
color-mix(in oklab, transparent 100%, #ffffff 2.5%) 50%,
|
|
234
192
|
color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
|
|
235
193
|
);
|
|
236
|
-
box-shadow:
|
|
237
|
-
0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
|
|
238
|
-
/* Top */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
|
|
239
194
|
}
|
|
240
195
|
|
|
241
196
|
/* ===================================================== */
|
package/dist/index.js
CHANGED
|
@@ -7,7 +7,7 @@ function ButtonSpinner(props) {
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
// src/button.tsx
|
|
10
|
-
import styles2 from "./button.module-
|
|
10
|
+
import styles2 from "./button.module-NMNZK4JZ.module.css";
|
|
11
11
|
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
12
12
|
function Button(props) {
|
|
13
13
|
const {
|
|
@@ -79,7 +79,7 @@ var BUTTON_CLASS_NAME = {
|
|
|
79
79
|
};
|
|
80
80
|
|
|
81
81
|
// src/input.tsx
|
|
82
|
-
import styles3 from "./input.module-
|
|
82
|
+
import styles3 from "./input.module-37F7SSOT.module.css";
|
|
83
83
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
84
84
|
function Input(props) {
|
|
85
85
|
const {
|
|
@@ -207,7 +207,7 @@ var SWITCH_CLASS_NAME = {
|
|
|
207
207
|
};
|
|
208
208
|
|
|
209
209
|
// src/textarea.tsx
|
|
210
|
-
import inputStyles from "./input.module-
|
|
210
|
+
import inputStyles from "./input.module-37F7SSOT.module.css";
|
|
211
211
|
import styles7 from "./textarea.module-6GUVSFC7.module.css";
|
|
212
212
|
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
213
213
|
function Textarea(props) {
|
|
@@ -20,9 +20,7 @@
|
|
|
20
20
|
outline-offset: -2px;
|
|
21
21
|
background-color: var(--color-gray-1, #fcfcfc);
|
|
22
22
|
border-style: none;
|
|
23
|
-
box-shadow:
|
|
24
|
-
0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
|
|
25
|
-
/* Bottom */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
|
|
23
|
+
box-shadow: 0 0 0 1px var(--color-gray-4) inset;
|
|
26
24
|
transition-duration: 150ms;
|
|
27
25
|
transition-property: box-shadow, opacity;
|
|
28
26
|
}
|
|
@@ -41,9 +39,7 @@
|
|
|
41
39
|
.input:enabled:focus,
|
|
42
40
|
.input:enabled:hover,
|
|
43
41
|
.input:enabled[data-is-active="true"] {
|
|
44
|
-
box-shadow:
|
|
45
|
-
0 -1px 0 0px rgba(0, 0, 0, 7.5%) inset,
|
|
46
|
-
/* Bottom */ 0 0 0 1px var(--color-gray-6) inset; /* Border */
|
|
42
|
+
box-shadow: 0 0 0 1px var(--color-gray-6) inset;
|
|
47
43
|
}
|
|
48
44
|
|
|
49
45
|
.input[data-is-valid="true"] {
|
|
@@ -59,22 +55,6 @@
|
|
|
59
55
|
outline-color: var(--color-primary-9, #e93d82);
|
|
60
56
|
}
|
|
61
57
|
|
|
62
|
-
:global(.dark) .input {
|
|
63
|
-
background-color: var(--color-gray-2, #101010);
|
|
64
|
-
box-shadow:
|
|
65
|
-
0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
|
|
66
|
-
/* Top */ 0 0 0 1px var(--color-gray-4) inset; /* Border */
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
:global(.dark) .input:enabled:active,
|
|
70
|
-
:global(.dark) .input:enabled:focus,
|
|
71
|
-
:global(.dark) .input:enabled:hover,
|
|
72
|
-
:global(.dark) .input:enabled[data-is-active="true"] {
|
|
73
|
-
box-shadow:
|
|
74
|
-
0 1px 0 0px rgba(255, 255, 255, 7.5%) inset,
|
|
75
|
-
/* Top */ 0 0 0 1px var(--color-gray-6) inset; /* Border */
|
|
76
|
-
}
|
|
77
|
-
|
|
78
58
|
/* ===================================================== */
|
|
79
59
|
/* Password */
|
|
80
60
|
/* ===================================================== */
|
|
@@ -85,10 +65,6 @@
|
|
|
85
65
|
/* ===================================================== */
|
|
86
66
|
/* Rounded */
|
|
87
67
|
/* ===================================================== */
|
|
88
|
-
.input__rounded_base {
|
|
89
|
-
border-radius: 12px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
68
|
.input__rounded_full {
|
|
93
69
|
border-radius: 9999px;
|
|
94
70
|
}
|
|
@@ -98,20 +74,25 @@
|
|
|
98
74
|
/* ===================================================== */
|
|
99
75
|
.input__size_32 {
|
|
100
76
|
--height: 32px;
|
|
77
|
+
border-radius: 8px;
|
|
101
78
|
}
|
|
102
79
|
|
|
103
80
|
.input__size_36 {
|
|
104
81
|
--height: 36px;
|
|
82
|
+
border-radius: 10px;
|
|
105
83
|
}
|
|
106
84
|
|
|
107
85
|
.input__size_40 {
|
|
108
86
|
--height: 40px;
|
|
87
|
+
border-radius: 12px;
|
|
109
88
|
}
|
|
110
89
|
|
|
111
90
|
.input__size_44 {
|
|
112
91
|
--height: 44px;
|
|
92
|
+
border-radius: 14px;
|
|
113
93
|
}
|
|
114
94
|
|
|
115
95
|
.input__size_48 {
|
|
116
96
|
--height: 48px;
|
|
97
|
+
border-radius: 16px;
|
|
117
98
|
}
|