@usefui/components 1.7.3 → 1.7.5
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/CHANGELOG.md +12 -0
- package/dist/index.js +22 -2
- package/dist/index.mjs +22 -2
- package/package.json +3 -3
- package/src/button/styles/index.ts +21 -1
- package/src/resizable/styles/index.ts +1 -1
package/CHANGELOG.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -292,6 +292,8 @@ var ButtonVariantsStyles = import_styled_components.css`
|
|
|
292
292
|
);
|
|
293
293
|
background-size: 100% 200%;
|
|
294
294
|
background-position: 0% 50%;
|
|
295
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
296
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
295
297
|
|
|
296
298
|
color: var(--body-color-alpha-80) !important;
|
|
297
299
|
svg * {
|
|
@@ -322,10 +324,12 @@ var ButtonVariantsStyles = import_styled_components.css`
|
|
|
322
324
|
background: linear-gradient(
|
|
323
325
|
180deg,
|
|
324
326
|
transparent 50%,
|
|
325
|
-
var(--
|
|
327
|
+
var(--body-color) 100%
|
|
326
328
|
);
|
|
327
329
|
background-size: 100% 200%;
|
|
328
330
|
background-position: 0% 50%;
|
|
331
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
332
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
329
333
|
|
|
330
334
|
color: var(--font-color-alpha-60) !important;
|
|
331
335
|
|
|
@@ -342,6 +346,10 @@ var ButtonVariantsStyles = import_styled_components.css`
|
|
|
342
346
|
background-color: var(--font-color-alpha-10);
|
|
343
347
|
background-position: 0% 75%;
|
|
344
348
|
border-color: transparent;
|
|
349
|
+
|
|
350
|
+
::before {
|
|
351
|
+
border-color: var(--font-color-alpha-20);
|
|
352
|
+
}
|
|
345
353
|
}
|
|
346
354
|
}
|
|
347
355
|
&[data-variant="tertiary"] {
|
|
@@ -418,6 +426,8 @@ var ButtonVariantsStyles = import_styled_components.css`
|
|
|
418
426
|
);
|
|
419
427
|
background-size: 100% 200%;
|
|
420
428
|
background-position: 0% 50%;
|
|
429
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
430
|
+
calc(var(--measurement-small-20) * -1) var(--alpha-mono-darkest-60);
|
|
421
431
|
|
|
422
432
|
::before {
|
|
423
433
|
${ButtonBeforeDefaultStyles}
|
|
@@ -443,6 +453,8 @@ var ButtonVariantsStyles = import_styled_components.css`
|
|
|
443
453
|
);
|
|
444
454
|
background-size: 100% 200%;
|
|
445
455
|
background-position: 0% 50%;
|
|
456
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
457
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
446
458
|
|
|
447
459
|
color: var(--alpha-mono-white-80) !important;
|
|
448
460
|
|
|
@@ -474,6 +486,8 @@ var ButtonVariantsStyles = import_styled_components.css`
|
|
|
474
486
|
);
|
|
475
487
|
background-size: 100% 200%;
|
|
476
488
|
background-position: 0% 50%;
|
|
489
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
490
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
477
491
|
|
|
478
492
|
color: var(--alpha-mono-white-80) !important;
|
|
479
493
|
|
|
@@ -501,6 +515,8 @@ var ButtonVariantsStyles = import_styled_components.css`
|
|
|
501
515
|
);
|
|
502
516
|
background-size: 100% 200%;
|
|
503
517
|
background-position: 0% 50%;
|
|
518
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
519
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
504
520
|
|
|
505
521
|
color: var(--alpha-mono-white-80) !important;
|
|
506
522
|
|
|
@@ -528,6 +544,8 @@ var ButtonVariantsStyles = import_styled_components.css`
|
|
|
528
544
|
);
|
|
529
545
|
background-size: 100% 200%;
|
|
530
546
|
background-position: 0% 50%;
|
|
547
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
548
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
531
549
|
|
|
532
550
|
color: var(--alpha-mono-white-80) !important;
|
|
533
551
|
|
|
@@ -558,6 +576,8 @@ var ButtonVariantsStyles = import_styled_components.css`
|
|
|
558
576
|
);
|
|
559
577
|
background-size: 100% 200%;
|
|
560
578
|
background-position: 0% 50%;
|
|
579
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
580
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
561
581
|
|
|
562
582
|
color: var(--alpha-mono-dark-80) !important;
|
|
563
583
|
|
|
@@ -4708,7 +4728,7 @@ var SplitContainer = import_styled_components16.default.div`
|
|
|
4708
4728
|
`;
|
|
4709
4729
|
var Panel = import_styled_components16.default.div`
|
|
4710
4730
|
overflow: hidden;
|
|
4711
|
-
width: ${(props) => props.width}
|
|
4731
|
+
width: ${(props) => props.width}%;
|
|
4712
4732
|
`;
|
|
4713
4733
|
var Divider2 = import_styled_components16.default.div`
|
|
4714
4734
|
width: var(--measurement-medium-10);
|
package/dist/index.mjs
CHANGED
|
@@ -148,6 +148,8 @@ var ButtonVariantsStyles = css`
|
|
|
148
148
|
);
|
|
149
149
|
background-size: 100% 200%;
|
|
150
150
|
background-position: 0% 50%;
|
|
151
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
152
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
151
153
|
|
|
152
154
|
color: var(--body-color-alpha-80) !important;
|
|
153
155
|
svg * {
|
|
@@ -178,10 +180,12 @@ var ButtonVariantsStyles = css`
|
|
|
178
180
|
background: linear-gradient(
|
|
179
181
|
180deg,
|
|
180
182
|
transparent 50%,
|
|
181
|
-
var(--
|
|
183
|
+
var(--body-color) 100%
|
|
182
184
|
);
|
|
183
185
|
background-size: 100% 200%;
|
|
184
186
|
background-position: 0% 50%;
|
|
187
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
188
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
185
189
|
|
|
186
190
|
color: var(--font-color-alpha-60) !important;
|
|
187
191
|
|
|
@@ -198,6 +202,10 @@ var ButtonVariantsStyles = css`
|
|
|
198
202
|
background-color: var(--font-color-alpha-10);
|
|
199
203
|
background-position: 0% 75%;
|
|
200
204
|
border-color: transparent;
|
|
205
|
+
|
|
206
|
+
::before {
|
|
207
|
+
border-color: var(--font-color-alpha-20);
|
|
208
|
+
}
|
|
201
209
|
}
|
|
202
210
|
}
|
|
203
211
|
&[data-variant="tertiary"] {
|
|
@@ -274,6 +282,8 @@ var ButtonVariantsStyles = css`
|
|
|
274
282
|
);
|
|
275
283
|
background-size: 100% 200%;
|
|
276
284
|
background-position: 0% 50%;
|
|
285
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
286
|
+
calc(var(--measurement-small-20) * -1) var(--alpha-mono-darkest-60);
|
|
277
287
|
|
|
278
288
|
::before {
|
|
279
289
|
${ButtonBeforeDefaultStyles}
|
|
@@ -299,6 +309,8 @@ var ButtonVariantsStyles = css`
|
|
|
299
309
|
);
|
|
300
310
|
background-size: 100% 200%;
|
|
301
311
|
background-position: 0% 50%;
|
|
312
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
313
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
302
314
|
|
|
303
315
|
color: var(--alpha-mono-white-80) !important;
|
|
304
316
|
|
|
@@ -330,6 +342,8 @@ var ButtonVariantsStyles = css`
|
|
|
330
342
|
);
|
|
331
343
|
background-size: 100% 200%;
|
|
332
344
|
background-position: 0% 50%;
|
|
345
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
346
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
333
347
|
|
|
334
348
|
color: var(--alpha-mono-white-80) !important;
|
|
335
349
|
|
|
@@ -357,6 +371,8 @@ var ButtonVariantsStyles = css`
|
|
|
357
371
|
);
|
|
358
372
|
background-size: 100% 200%;
|
|
359
373
|
background-position: 0% 50%;
|
|
374
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
375
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
360
376
|
|
|
361
377
|
color: var(--alpha-mono-white-80) !important;
|
|
362
378
|
|
|
@@ -384,6 +400,8 @@ var ButtonVariantsStyles = css`
|
|
|
384
400
|
);
|
|
385
401
|
background-size: 100% 200%;
|
|
386
402
|
background-position: 0% 50%;
|
|
403
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
404
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
387
405
|
|
|
388
406
|
color: var(--alpha-mono-white-80) !important;
|
|
389
407
|
|
|
@@ -414,6 +432,8 @@ var ButtonVariantsStyles = css`
|
|
|
414
432
|
);
|
|
415
433
|
background-size: 100% 200%;
|
|
416
434
|
background-position: 0% 50%;
|
|
435
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
436
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
417
437
|
|
|
418
438
|
color: var(--alpha-mono-dark-80) !important;
|
|
419
439
|
|
|
@@ -4564,7 +4584,7 @@ var SplitContainer = styled16.div`
|
|
|
4564
4584
|
`;
|
|
4565
4585
|
var Panel = styled16.div`
|
|
4566
4586
|
overflow: hidden;
|
|
4567
|
-
width: ${(props) => props.width}
|
|
4587
|
+
width: ${(props) => props.width}%;
|
|
4568
4588
|
`;
|
|
4569
4589
|
var Divider2 = styled16.div`
|
|
4570
4590
|
width: var(--measurement-medium-10);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usefui/components",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.5",
|
|
4
4
|
"description": "Open Source React components library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"styled-components": "^5.3.11",
|
|
33
33
|
"typescript": "^5.9.3",
|
|
34
34
|
"@usefui/core": "^1.4.0",
|
|
35
|
-
"@usefui/
|
|
36
|
-
"@usefui/
|
|
35
|
+
"@usefui/tokens": "^1.7.0",
|
|
36
|
+
"@usefui/hooks": "^1.4.0"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"test": "vitest run --coverage --logHeapUsage",
|
|
@@ -121,6 +121,8 @@ const ButtonVariantsStyles = css`
|
|
|
121
121
|
);
|
|
122
122
|
background-size: 100% 200%;
|
|
123
123
|
background-position: 0% 50%;
|
|
124
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
125
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
124
126
|
|
|
125
127
|
color: var(--body-color-alpha-80) !important;
|
|
126
128
|
svg * {
|
|
@@ -151,10 +153,12 @@ const ButtonVariantsStyles = css`
|
|
|
151
153
|
background: linear-gradient(
|
|
152
154
|
180deg,
|
|
153
155
|
transparent 50%,
|
|
154
|
-
var(--
|
|
156
|
+
var(--body-color) 100%
|
|
155
157
|
);
|
|
156
158
|
background-size: 100% 200%;
|
|
157
159
|
background-position: 0% 50%;
|
|
160
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
161
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
158
162
|
|
|
159
163
|
color: var(--font-color-alpha-60) !important;
|
|
160
164
|
|
|
@@ -171,6 +175,10 @@ const ButtonVariantsStyles = css`
|
|
|
171
175
|
background-color: var(--font-color-alpha-10);
|
|
172
176
|
background-position: 0% 75%;
|
|
173
177
|
border-color: transparent;
|
|
178
|
+
|
|
179
|
+
::before {
|
|
180
|
+
border-color: var(--font-color-alpha-20);
|
|
181
|
+
}
|
|
174
182
|
}
|
|
175
183
|
}
|
|
176
184
|
&[data-variant="tertiary"] {
|
|
@@ -247,6 +255,8 @@ const ButtonVariantsStyles = css`
|
|
|
247
255
|
);
|
|
248
256
|
background-size: 100% 200%;
|
|
249
257
|
background-position: 0% 50%;
|
|
258
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
259
|
+
calc(var(--measurement-small-20) * -1) var(--alpha-mono-darkest-60);
|
|
250
260
|
|
|
251
261
|
::before {
|
|
252
262
|
${ButtonBeforeDefaultStyles}
|
|
@@ -272,6 +282,8 @@ const ButtonVariantsStyles = css`
|
|
|
272
282
|
);
|
|
273
283
|
background-size: 100% 200%;
|
|
274
284
|
background-position: 0% 50%;
|
|
285
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
286
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
275
287
|
|
|
276
288
|
color: var(--alpha-mono-white-80) !important;
|
|
277
289
|
|
|
@@ -303,6 +315,8 @@ const ButtonVariantsStyles = css`
|
|
|
303
315
|
);
|
|
304
316
|
background-size: 100% 200%;
|
|
305
317
|
background-position: 0% 50%;
|
|
318
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
319
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
306
320
|
|
|
307
321
|
color: var(--alpha-mono-white-80) !important;
|
|
308
322
|
|
|
@@ -330,6 +344,8 @@ const ButtonVariantsStyles = css`
|
|
|
330
344
|
);
|
|
331
345
|
background-size: 100% 200%;
|
|
332
346
|
background-position: 0% 50%;
|
|
347
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
348
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
333
349
|
|
|
334
350
|
color: var(--alpha-mono-white-80) !important;
|
|
335
351
|
|
|
@@ -357,6 +373,8 @@ const ButtonVariantsStyles = css`
|
|
|
357
373
|
);
|
|
358
374
|
background-size: 100% 200%;
|
|
359
375
|
background-position: 0% 50%;
|
|
376
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
377
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
360
378
|
|
|
361
379
|
color: var(--alpha-mono-white-80) !important;
|
|
362
380
|
|
|
@@ -387,6 +405,8 @@ const ButtonVariantsStyles = css`
|
|
|
387
405
|
);
|
|
388
406
|
background-size: 100% 200%;
|
|
389
407
|
background-position: 0% 50%;
|
|
408
|
+
box-shadow: 0 var(--measurement-small-20) var(--measurement-small-20)
|
|
409
|
+
calc(var(--measurement-small-10) * -1) var(--alpha-mono-darkest-60);
|
|
390
410
|
|
|
391
411
|
color: var(--alpha-mono-dark-80) !important;
|
|
392
412
|
|
|
@@ -9,7 +9,7 @@ export const Panel = styled.div<{
|
|
|
9
9
|
width: number;
|
|
10
10
|
}>`
|
|
11
11
|
overflow: hidden;
|
|
12
|
-
width: ${(props) => props.width}
|
|
12
|
+
width: ${(props) => props.width}%;
|
|
13
13
|
`;
|
|
14
14
|
export const Divider = styled.div<{ $dragging: boolean }>`
|
|
15
15
|
width: var(--measurement-medium-10);
|