smartsell-ui-kit 0.1.11 → 0.1.13
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.
- package/README.md +23 -0
- package/dist/index.cjs +50 -48
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +50 -48
- package/dist/index.js.map +1 -1
- package/dist/styles.css +228 -23
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -7,6 +7,15 @@
|
|
|
7
7
|
border-style: solid;
|
|
8
8
|
box-shadow: none;
|
|
9
9
|
font-family: var(--ui-kit-font-family);
|
|
10
|
+
/* Espelha o que o preflight aplica em `html`: sem isso o kit herda o
|
|
11
|
+
line-height do user-agent (~1.2) num app sem preflight e 1.5 num app com
|
|
12
|
+
preflight. */
|
|
13
|
+
line-height: 1.5;
|
|
14
|
+
-webkit-text-size-adjust: 100%;
|
|
15
|
+
-moz-tab-size: 4;
|
|
16
|
+
-o-tab-size: 4;
|
|
17
|
+
tab-size: 4;
|
|
18
|
+
-webkit-tap-highlight-color: transparent;
|
|
10
19
|
-webkit-font-smoothing: antialiased;
|
|
11
20
|
-moz-osx-font-smoothing: grayscale;
|
|
12
21
|
}
|
|
@@ -64,6 +73,221 @@
|
|
|
64
73
|
transform: translateY(-50%) scale(0.85);
|
|
65
74
|
}
|
|
66
75
|
|
|
76
|
+
/* ============================================================================
|
|
77
|
+
Reset "em caixa" (scoped preflight)
|
|
78
|
+
----------------------------------------------------------------------------
|
|
79
|
+
O kit é buildado com `corePlugins.preflight: false` para não impor um reset
|
|
80
|
+
global no app consumidor. Sem preflight, porém, utilitários como `border-t`
|
|
81
|
+
(que só definem border-width) não pintam nada, form controls mantêm padding
|
|
82
|
+
do user-agent, `svg` fica inline, etc. — e o componente renderiza diferente
|
|
83
|
+
conforme o app consumidor tenha ou não preflight (Storybook não tem; o
|
|
84
|
+
smartsell-sales tem).
|
|
85
|
+
|
|
86
|
+
Este bloco espelha o preflight do Tailwind v3, escopado na raiz do kit, para
|
|
87
|
+
que o componente renderize igual nos dois cenários.
|
|
88
|
+
|
|
89
|
+
Especificidade ZERO de propósito (`:where()`): estas regras nunca vencem uma
|
|
90
|
+
classe do app consumidor nem de custom lib de tenant que estilize conteúdo
|
|
91
|
+
passado para dentro de um componente do kit. Elas só preenchem o que o
|
|
92
|
+
user-agent deixaria diferente. Os valores são idênticos aos do preflight do
|
|
93
|
+
Tailwind, então quando o app consumidor já tem preflight não há conflito:
|
|
94
|
+
quem vencer, aplica o mesmo valor.
|
|
95
|
+
========================================================================== */
|
|
96
|
+
|
|
97
|
+
:where(.ui-kit-root),
|
|
98
|
+
:where(.ui-kit-root) :where(*),
|
|
99
|
+
:where(.ui-kit-root) :where(*)::before,
|
|
100
|
+
:where(.ui-kit-root) :where(*)::after {
|
|
101
|
+
box-sizing: border-box;
|
|
102
|
+
border-width: 0;
|
|
103
|
+
border-style: solid;
|
|
104
|
+
border-color: #e5e7eb;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
:where(.ui-kit-root) :where(*)::before,
|
|
108
|
+
:where(.ui-kit-root) :where(*)::after {
|
|
109
|
+
--tw-content: '';
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:where(.ui-kit-root) :where(hr) {
|
|
113
|
+
height: 0;
|
|
114
|
+
color: inherit;
|
|
115
|
+
border-top-width: 1px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
:where(.ui-kit-root) :where(abbr:where([title])) {
|
|
119
|
+
-webkit-text-decoration: underline dotted;
|
|
120
|
+
text-decoration: underline dotted;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:where(.ui-kit-root) :where(h1, h2, h3, h4, h5, h6) {
|
|
124
|
+
font-size: inherit;
|
|
125
|
+
font-weight: inherit;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
:where(.ui-kit-root) :where(a) {
|
|
129
|
+
color: inherit;
|
|
130
|
+
text-decoration: inherit;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:where(.ui-kit-root) :where(b, strong) {
|
|
134
|
+
font-weight: bolder;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
:where(.ui-kit-root) :where(code, kbd, samp, pre) {
|
|
138
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
139
|
+
'Liberation Mono', 'Courier New', monospace;
|
|
140
|
+
font-size: 1em;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
:where(.ui-kit-root) :where(small) {
|
|
144
|
+
font-size: 80%;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
:where(.ui-kit-root) :where(sub, sup) {
|
|
148
|
+
font-size: 75%;
|
|
149
|
+
line-height: 0;
|
|
150
|
+
position: relative;
|
|
151
|
+
vertical-align: baseline;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
:where(.ui-kit-root) :where(sub) {
|
|
155
|
+
bottom: -0.25em;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
:where(.ui-kit-root) :where(sup) {
|
|
159
|
+
top: -0.5em;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
:where(.ui-kit-root) :where(table) {
|
|
163
|
+
text-indent: 0;
|
|
164
|
+
border-color: inherit;
|
|
165
|
+
border-collapse: collapse;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
:where(.ui-kit-root):where(button, input, optgroup, select, textarea),
|
|
169
|
+
:where(.ui-kit-root) :where(button, input, optgroup, select, textarea) {
|
|
170
|
+
font-family: inherit;
|
|
171
|
+
font-feature-settings: inherit;
|
|
172
|
+
font-variation-settings: inherit;
|
|
173
|
+
font-size: 100%;
|
|
174
|
+
font-weight: inherit;
|
|
175
|
+
line-height: inherit;
|
|
176
|
+
letter-spacing: inherit;
|
|
177
|
+
color: inherit;
|
|
178
|
+
margin: 0;
|
|
179
|
+
padding: 0;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
:where(.ui-kit-root):where(button, select),
|
|
183
|
+
:where(.ui-kit-root) :where(button, select) {
|
|
184
|
+
text-transform: none;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
:where(.ui-kit-root):where(button),
|
|
188
|
+
:where(.ui-kit-root) :where(button),
|
|
189
|
+
:where(.ui-kit-root) :where(input:where([type='button'], [type='reset'], [type='submit'])) {
|
|
190
|
+
-webkit-appearance: button;
|
|
191
|
+
background-color: transparent;
|
|
192
|
+
background-image: none;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
:where(.ui-kit-root) :where(progress) {
|
|
196
|
+
vertical-align: baseline;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
:where(.ui-kit-root) :where(input)::-webkit-inner-spin-button,
|
|
200
|
+
:where(.ui-kit-root) :where(input)::-webkit-outer-spin-button {
|
|
201
|
+
height: auto;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
:where(.ui-kit-root) :where([type='search']) {
|
|
205
|
+
-webkit-appearance: textfield;
|
|
206
|
+
outline-offset: -2px;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
:where(.ui-kit-root) :where(input)::-webkit-search-decoration {
|
|
210
|
+
-webkit-appearance: none;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
:where(.ui-kit-root) :where(summary) {
|
|
214
|
+
display: list-item;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
:where(.ui-kit-root)
|
|
218
|
+
:where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
|
|
219
|
+
margin: 0;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
:where(.ui-kit-root) :where(fieldset) {
|
|
223
|
+
margin: 0;
|
|
224
|
+
padding: 0;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
:where(.ui-kit-root) :where(legend) {
|
|
228
|
+
padding: 0;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
:where(.ui-kit-root) :where(ol, ul, menu) {
|
|
232
|
+
list-style: none;
|
|
233
|
+
margin: 0;
|
|
234
|
+
padding: 0;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
:where(.ui-kit-root) :where(dialog) {
|
|
238
|
+
padding: 0;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* `option` não está no preflight do Tailwind, mas o smartsell-sales zera o
|
|
242
|
+
padding de tudo (`* { padding: 0 }` no index.css). Sem isto o kit ficaria com
|
|
243
|
+
o padding do user-agent num app sem esse global. */
|
|
244
|
+
|
|
245
|
+
:where(.ui-kit-root) :where(option) {
|
|
246
|
+
margin: 0;
|
|
247
|
+
padding: 0;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
:where(.ui-kit-root) :where(textarea) {
|
|
251
|
+
resize: vertical;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
:where(.ui-kit-root):where(input)::-moz-placeholder, :where(.ui-kit-root):where(textarea)::-moz-placeholder, :where(.ui-kit-root) :where(input)::-moz-placeholder, :where(.ui-kit-root) :where(textarea)::-moz-placeholder {
|
|
255
|
+
opacity: 1;
|
|
256
|
+
color: #9ca3af;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
:where(.ui-kit-root):where(input)::placeholder,
|
|
260
|
+
:where(.ui-kit-root):where(textarea)::placeholder,
|
|
261
|
+
:where(.ui-kit-root) :where(input)::placeholder,
|
|
262
|
+
:where(.ui-kit-root) :where(textarea)::placeholder {
|
|
263
|
+
opacity: 1;
|
|
264
|
+
color: #9ca3af;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
:where(.ui-kit-root):where(button, [role='button']),
|
|
268
|
+
:where(.ui-kit-root) :where(button, [role='button']) {
|
|
269
|
+
cursor: pointer;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
:where(.ui-kit-root):where(:disabled),
|
|
273
|
+
:where(.ui-kit-root) :where(:disabled) {
|
|
274
|
+
cursor: default;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
:where(.ui-kit-root) :where(img, svg, video, canvas, audio, iframe, embed, object) {
|
|
278
|
+
display: block;
|
|
279
|
+
vertical-align: middle;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
:where(.ui-kit-root) :where(img, video) {
|
|
283
|
+
max-width: 100%;
|
|
284
|
+
height: auto;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
:where(.ui-kit-root) :where([hidden]) {
|
|
288
|
+
display: none;
|
|
289
|
+
}
|
|
290
|
+
|
|
67
291
|
.pointer-events-none {
|
|
68
292
|
pointer-events: none;
|
|
69
293
|
}
|
|
@@ -529,10 +753,6 @@
|
|
|
529
753
|
border-radius: 1rem;
|
|
530
754
|
}
|
|
531
755
|
|
|
532
|
-
.rounded-\[0\.4rem\] {
|
|
533
|
-
border-radius: 0.4rem;
|
|
534
|
-
}
|
|
535
|
-
|
|
536
756
|
.rounded-\[20px\] {
|
|
537
757
|
border-radius: 20px;
|
|
538
758
|
}
|
|
@@ -704,11 +924,6 @@
|
|
|
704
924
|
padding-right: 1.25rem;
|
|
705
925
|
}
|
|
706
926
|
|
|
707
|
-
.px-\[1\.15rem\] {
|
|
708
|
-
padding-left: 1.15rem;
|
|
709
|
-
padding-right: 1.15rem;
|
|
710
|
-
}
|
|
711
|
-
|
|
712
927
|
.px-\[11px\] {
|
|
713
928
|
padding-left: 11px;
|
|
714
929
|
padding-right: 11px;
|
|
@@ -744,11 +959,6 @@
|
|
|
744
959
|
padding-bottom: 0.75rem;
|
|
745
960
|
}
|
|
746
961
|
|
|
747
|
-
.py-\[0\.9rem\] {
|
|
748
|
-
padding-top: 0.9rem;
|
|
749
|
-
padding-bottom: 0.9rem;
|
|
750
|
-
}
|
|
751
|
-
|
|
752
962
|
.py-\[10px\] {
|
|
753
963
|
padding-top: 10px;
|
|
754
964
|
padding-bottom: 10px;
|
|
@@ -846,10 +1056,6 @@
|
|
|
846
1056
|
line-height: 2rem;
|
|
847
1057
|
}
|
|
848
1058
|
|
|
849
|
-
.text-\[1\.05rem\] {
|
|
850
|
-
font-size: 1.05rem;
|
|
851
|
-
}
|
|
852
|
-
|
|
853
1059
|
.text-\[11px\] {
|
|
854
1060
|
font-size: 11px;
|
|
855
1061
|
}
|
|
@@ -1075,11 +1281,6 @@
|
|
|
1075
1281
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1076
1282
|
}
|
|
1077
1283
|
|
|
1078
|
-
.saturate-0 {
|
|
1079
|
-
--tw-saturate: saturate(0);
|
|
1080
|
-
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1081
|
-
}
|
|
1082
|
-
|
|
1083
1284
|
.saturate-100 {
|
|
1084
1285
|
--tw-saturate: saturate(1);
|
|
1085
1286
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
@@ -1192,6 +1393,10 @@
|
|
|
1192
1393
|
text-decoration-line: underline;
|
|
1193
1394
|
}
|
|
1194
1395
|
|
|
1396
|
+
.hover\:no-underline:hover {
|
|
1397
|
+
text-decoration-line: none;
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1195
1400
|
.active\:border-\[var\(--theme-negative\)\]:active {
|
|
1196
1401
|
border-color: var(--theme-negative);
|
|
1197
1402
|
}
|