lightning_ui_kit 0.2.0 → 0.3.0
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.
- checksums.yaml +4 -4
- data/README.md +3 -0
- data/app/assets/builds/lightning_ui_kit.css +101 -31
- data/app/assets/builds/lightning_ui_kit.js +2 -2
- data/app/assets/builds/lightning_ui_kit.js.map +4 -4
- data/app/assets/vendor/lightning_ui_kit.css +101 -31
- data/app/assets/vendor/lightning_ui_kit.js +2 -2
- data/app/components/lightning_ui_kit/modal_component.html.erb +1 -1
- data/app/components/lightning_ui_kit/toast_component.html.erb +22 -0
- data/app/components/lightning_ui_kit/toast_component.rb +13 -0
- data/app/javascript/lightning_ui_kit/controllers/toast_controller.js +34 -0
- data/app/javascript/lightning_ui_kit/index.js +2 -0
- data/config/deploy.yml +58 -0
- data/lib/lightning_ui_kit/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7431b1a812f4483624e661e366110a3cc7af9fd12b4e2873fb4b6d656cf4be7e
|
4
|
+
data.tar.gz: 46ab39a97ff029efd41cb79922a1978142482ad664d633121828b923391d0ebb
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 011ab820f18e2d3ee9dcc9e948abdaf007c23991de85994a61264a59fc66f6705445a81f5835b192d429620bf6348ea2e460337034c4bda4071c73466984c127
|
7
|
+
data.tar.gz: 84ba84cdaa5919f9c89daf627a852cb76be8faa3962180db4766853096d718e25e30a7902bd14394b3d7efc7b454c21dc4e97776a6ad164dad40d9347356ac4d
|
data/README.md
CHANGED
@@ -1,11 +1,14 @@
|
|
1
1
|
# LightningUiKit
|
2
2
|
UI components for fast prototyping in Rails applications.
|
3
3
|
|
4
|
+
Preview is available at [ui.lightningrails.xyz](https://ui.lightningrails.xyz)
|
5
|
+
|
4
6
|
## Usage
|
5
7
|
|
6
8
|
Add this line to your application's Gemfile:
|
7
9
|
|
8
10
|
```ruby
|
11
|
+
gem "propshaft"
|
9
12
|
gem "lightning_ui_kit"
|
10
13
|
```
|
11
14
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
/*! tailwindcss v4.1.
|
1
|
+
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
2
2
|
@layer properties;
|
3
3
|
@layer theme, base, components, utilities;
|
4
4
|
@layer theme {
|
@@ -34,6 +34,7 @@
|
|
34
34
|
--lui-color-black: #000;
|
35
35
|
--lui-color-white: #fff;
|
36
36
|
--lui-spacing: 0.25rem;
|
37
|
+
--lui-container-xs: 20rem;
|
37
38
|
--lui-container-3xl: 48rem;
|
38
39
|
--lui-text-xs: 0.75rem;
|
39
40
|
--lui-text-xs--line-height: calc(1 / 0.75);
|
@@ -239,6 +240,9 @@
|
|
239
240
|
.lui\:right-0 {
|
240
241
|
right: calc(var(--lui-spacing) * 0);
|
241
242
|
}
|
243
|
+
.lui\:bottom-5 {
|
244
|
+
bottom: calc(var(--lui-spacing) * 5);
|
245
|
+
}
|
242
246
|
.lui\:bottom-full {
|
243
247
|
bottom: 100%;
|
244
248
|
}
|
@@ -254,6 +258,12 @@
|
|
254
258
|
.lui\:row-start-2 {
|
255
259
|
grid-row-start: 2;
|
256
260
|
}
|
261
|
+
.lui\:-mx-1\.5 {
|
262
|
+
margin-inline: calc(var(--lui-spacing) * -1.5);
|
263
|
+
}
|
264
|
+
.lui\:-my-1\.5 {
|
265
|
+
margin-block: calc(var(--lui-spacing) * -1.5);
|
266
|
+
}
|
257
267
|
.lui\:my-4 {
|
258
268
|
margin-block: calc(var(--lui-spacing) * 4);
|
259
269
|
}
|
@@ -287,6 +297,12 @@
|
|
287
297
|
.lui\:ml-2 {
|
288
298
|
margin-left: calc(var(--lui-spacing) * 2);
|
289
299
|
}
|
300
|
+
.lui\:ml-3 {
|
301
|
+
margin-left: calc(var(--lui-spacing) * 3);
|
302
|
+
}
|
303
|
+
.lui\:ml-auto {
|
304
|
+
margin-left: auto;
|
305
|
+
}
|
290
306
|
.lui\:block {
|
291
307
|
display: block;
|
292
308
|
}
|
@@ -357,6 +373,9 @@
|
|
357
373
|
.lui\:h-6 {
|
358
374
|
height: calc(var(--lui-spacing) * 6);
|
359
375
|
}
|
376
|
+
.lui\:h-8 {
|
377
|
+
height: calc(var(--lui-spacing) * 8);
|
378
|
+
}
|
360
379
|
.lui\:h-10 {
|
361
380
|
height: calc(var(--lui-spacing) * 10);
|
362
381
|
}
|
@@ -372,6 +391,9 @@
|
|
372
391
|
.lui\:w-2\.5 {
|
373
392
|
width: calc(var(--lui-spacing) * 2.5);
|
374
393
|
}
|
394
|
+
.lui\:w-3 {
|
395
|
+
width: calc(var(--lui-spacing) * 3);
|
396
|
+
}
|
375
397
|
.lui\:w-4 {
|
376
398
|
width: calc(var(--lui-spacing) * 4);
|
377
399
|
}
|
@@ -381,6 +403,9 @@
|
|
381
403
|
.lui\:w-6 {
|
382
404
|
width: calc(var(--lui-spacing) * 6);
|
383
405
|
}
|
406
|
+
.lui\:w-8 {
|
407
|
+
width: calc(var(--lui-spacing) * 8);
|
408
|
+
}
|
384
409
|
.lui\:w-10 {
|
385
410
|
width: calc(var(--lui-spacing) * 10);
|
386
411
|
}
|
@@ -399,6 +424,9 @@
|
|
399
424
|
.lui\:w-screen {
|
400
425
|
width: 100vw;
|
401
426
|
}
|
427
|
+
.lui\:max-w-xs {
|
428
|
+
max-width: var(--lui-container-xs);
|
429
|
+
}
|
402
430
|
.lui\:min-w-0 {
|
403
431
|
min-width: calc(var(--lui-spacing) * 0);
|
404
432
|
}
|
@@ -421,11 +449,23 @@
|
|
421
449
|
--tw-translate-x: calc(var(--lui-spacing) * 0);
|
422
450
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
423
451
|
}
|
452
|
+
.lui\:scale-95 {
|
453
|
+
--tw-scale-x: 95%;
|
454
|
+
--tw-scale-y: 95%;
|
455
|
+
--tw-scale-z: 95%;
|
456
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
457
|
+
}
|
458
|
+
.lui\:scale-100 {
|
459
|
+
--tw-scale-x: 100%;
|
460
|
+
--tw-scale-y: 100%;
|
461
|
+
--tw-scale-z: 100%;
|
462
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
463
|
+
}
|
424
464
|
.lui\:rotate-180 {
|
425
465
|
rotate: 180deg;
|
426
466
|
}
|
427
467
|
.lui\:transform {
|
428
|
-
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
|
468
|
+
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
429
469
|
}
|
430
470
|
.lui\:animate-pulse {
|
431
471
|
animation: var(--lui-animate-pulse);
|
@@ -720,6 +760,9 @@
|
|
720
760
|
.lui\:p-1 {
|
721
761
|
padding: calc(var(--lui-spacing) * 1);
|
722
762
|
}
|
763
|
+
.lui\:p-1\.5 {
|
764
|
+
padding: calc(var(--lui-spacing) * 1.5);
|
765
|
+
}
|
723
766
|
.lui\:p-4 {
|
724
767
|
padding: calc(var(--lui-spacing) * 4);
|
725
768
|
}
|
@@ -895,6 +938,10 @@
|
|
895
938
|
.lui\:opacity-100 {
|
896
939
|
opacity: 100%;
|
897
940
|
}
|
941
|
+
.lui\:shadow {
|
942
|
+
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
943
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
944
|
+
}
|
898
945
|
.lui\:shadow-lg {
|
899
946
|
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
900
947
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
@@ -933,7 +980,7 @@
|
|
933
980
|
}
|
934
981
|
}
|
935
982
|
.lui\:transition {
|
936
|
-
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
|
983
|
+
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
|
937
984
|
transition-timing-function: var(--tw-ease, var(--lui-default-transition-timing-function));
|
938
985
|
transition-duration: var(--tw-duration, var(--lui-default-transition-duration));
|
939
986
|
}
|
@@ -950,6 +997,10 @@
|
|
950
997
|
--tw-duration: 100ms;
|
951
998
|
transition-duration: 100ms;
|
952
999
|
}
|
1000
|
+
.lui\:duration-150 {
|
1001
|
+
--tw-duration: 150ms;
|
1002
|
+
transition-duration: 150ms;
|
1003
|
+
}
|
953
1004
|
.lui\:duration-200 {
|
954
1005
|
--tw-duration: 200ms;
|
955
1006
|
transition-duration: 200ms;
|
@@ -1021,6 +1072,9 @@
|
|
1021
1072
|
--checkbox-checked-border: color-mix(in oklab, var(--color-zinc-950) 90%, transparent);
|
1022
1073
|
}
|
1023
1074
|
}
|
1075
|
+
.lui\:\[--gutter\:--spacing\(8\)\] {
|
1076
|
+
--gutter: calc(var(--lui-spacing) * 8);
|
1077
|
+
}
|
1024
1078
|
.lui\:\[--ring-opacity\:20\%\] {
|
1025
1079
|
--ring-opacity: 20%;
|
1026
1080
|
}
|
@@ -1515,6 +1569,13 @@
|
|
1515
1569
|
}
|
1516
1570
|
}
|
1517
1571
|
}
|
1572
|
+
.lui\:hover\:bg-gray-100 {
|
1573
|
+
&:hover {
|
1574
|
+
@media (hover: hover) {
|
1575
|
+
background-color: var(--lui-color-gray-100);
|
1576
|
+
}
|
1577
|
+
}
|
1578
|
+
}
|
1518
1579
|
.lui\:hover\:bg-red-600 {
|
1519
1580
|
&:hover {
|
1520
1581
|
@media (hover: hover) {
|
@@ -1604,6 +1665,20 @@
|
|
1604
1665
|
}
|
1605
1666
|
}
|
1606
1667
|
}
|
1668
|
+
.lui\:focus\:ring-2 {
|
1669
|
+
&:focus {
|
1670
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
1671
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
1672
|
+
}
|
1673
|
+
}
|
1674
|
+
.lui\:focus\:ring-zinc-950\/10 {
|
1675
|
+
&:focus {
|
1676
|
+
--tw-ring-color: var(--lui-color-zinc-950);
|
1677
|
+
@supports (color: color-mix(in lab, red, red)) {
|
1678
|
+
--tw-ring-color: color-mix(in oklab, var(--lui-color-zinc-950) 10%, transparent);
|
1679
|
+
}
|
1680
|
+
}
|
1681
|
+
}
|
1607
1682
|
.lui\:focus\:outline-hidden {
|
1608
1683
|
&:focus {
|
1609
1684
|
--tw-outline-style: none;
|
@@ -2435,30 +2510,40 @@
|
|
2435
2510
|
inherits: false;
|
2436
2511
|
initial-value: 0;
|
2437
2512
|
}
|
2513
|
+
@property --tw-scale-x {
|
2514
|
+
syntax: "*";
|
2515
|
+
inherits: false;
|
2516
|
+
initial-value: 1;
|
2517
|
+
}
|
2518
|
+
@property --tw-scale-y {
|
2519
|
+
syntax: "*";
|
2520
|
+
inherits: false;
|
2521
|
+
initial-value: 1;
|
2522
|
+
}
|
2523
|
+
@property --tw-scale-z {
|
2524
|
+
syntax: "*";
|
2525
|
+
inherits: false;
|
2526
|
+
initial-value: 1;
|
2527
|
+
}
|
2438
2528
|
@property --tw-rotate-x {
|
2439
2529
|
syntax: "*";
|
2440
2530
|
inherits: false;
|
2441
|
-
initial-value: rotateX(0);
|
2442
2531
|
}
|
2443
2532
|
@property --tw-rotate-y {
|
2444
2533
|
syntax: "*";
|
2445
2534
|
inherits: false;
|
2446
|
-
initial-value: rotateY(0);
|
2447
2535
|
}
|
2448
2536
|
@property --tw-rotate-z {
|
2449
2537
|
syntax: "*";
|
2450
2538
|
inherits: false;
|
2451
|
-
initial-value: rotateZ(0);
|
2452
2539
|
}
|
2453
2540
|
@property --tw-skew-x {
|
2454
2541
|
syntax: "*";
|
2455
2542
|
inherits: false;
|
2456
|
-
initial-value: skewX(0);
|
2457
2543
|
}
|
2458
2544
|
@property --tw-skew-y {
|
2459
2545
|
syntax: "*";
|
2460
2546
|
inherits: false;
|
2461
|
-
initial-value: skewY(0);
|
2462
2547
|
}
|
2463
2548
|
@property --tw-space-y-reverse {
|
2464
2549
|
syntax: "*";
|
@@ -2561,21 +2646,6 @@
|
|
2561
2646
|
initial-value: "";
|
2562
2647
|
inherits: false;
|
2563
2648
|
}
|
2564
|
-
@property --tw-scale-x {
|
2565
|
-
syntax: "*";
|
2566
|
-
inherits: false;
|
2567
|
-
initial-value: 1;
|
2568
|
-
}
|
2569
|
-
@property --tw-scale-y {
|
2570
|
-
syntax: "*";
|
2571
|
-
inherits: false;
|
2572
|
-
initial-value: 1;
|
2573
|
-
}
|
2574
|
-
@property --tw-scale-z {
|
2575
|
-
syntax: "*";
|
2576
|
-
inherits: false;
|
2577
|
-
initial-value: 1;
|
2578
|
-
}
|
2579
2649
|
@keyframes spin {
|
2580
2650
|
to {
|
2581
2651
|
transform: rotate(360deg);
|
@@ -2592,11 +2662,14 @@
|
|
2592
2662
|
--tw-translate-x: 0;
|
2593
2663
|
--tw-translate-y: 0;
|
2594
2664
|
--tw-translate-z: 0;
|
2595
|
-
--tw-
|
2596
|
-
--tw-
|
2597
|
-
--tw-
|
2598
|
-
--tw-
|
2599
|
-
--tw-
|
2665
|
+
--tw-scale-x: 1;
|
2666
|
+
--tw-scale-y: 1;
|
2667
|
+
--tw-scale-z: 1;
|
2668
|
+
--tw-rotate-x: initial;
|
2669
|
+
--tw-rotate-y: initial;
|
2670
|
+
--tw-rotate-z: initial;
|
2671
|
+
--tw-skew-x: initial;
|
2672
|
+
--tw-skew-y: initial;
|
2600
2673
|
--tw-space-y-reverse: 0;
|
2601
2674
|
--tw-border-style: solid;
|
2602
2675
|
--tw-leading: initial;
|
@@ -2619,9 +2692,6 @@
|
|
2619
2692
|
--tw-duration: initial;
|
2620
2693
|
--tw-ease: initial;
|
2621
2694
|
--tw-content: "";
|
2622
|
-
--tw-scale-x: 1;
|
2623
|
-
--tw-scale-y: 1;
|
2624
|
-
--tw-scale-z: 1;
|
2625
2695
|
}
|
2626
2696
|
}
|
2627
2697
|
}
|