arekui 1.0.0 → 1.0.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 (54) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +198 -198
  3. package/arekui.css +3279 -3279
  4. package/arekui.d.ts +328 -328
  5. package/arekui.js +450 -450
  6. package/package.json +59 -57
  7. package/scripts/build-custom.js +318 -318
  8. package/src/arekui.css +55 -55
  9. package/src/base/neo-overrides.css +317 -317
  10. package/src/base/reset.css +67 -67
  11. package/src/base/tokens.css +304 -304
  12. package/src/components/accordion.css +34 -34
  13. package/src/components/alert.css +26 -26
  14. package/src/components/badge.css +33 -33
  15. package/src/components/breadcrumb.css +33 -33
  16. package/src/components/button.css +103 -103
  17. package/src/components/card.css +24 -24
  18. package/src/components/carousel.css +14 -14
  19. package/src/components/chat.css +78 -78
  20. package/src/components/drawer.css +53 -53
  21. package/src/components/file-upload.css +51 -51
  22. package/src/components/footer.css +26 -26
  23. package/src/components/forms.css +69 -69
  24. package/src/components/hero.css +22 -22
  25. package/src/components/join.css +14 -14
  26. package/src/components/link.css +24 -24
  27. package/src/components/menu.css +56 -56
  28. package/src/components/misc.css +57 -57
  29. package/src/components/modal.css +32 -32
  30. package/src/components/navbar.css +37 -37
  31. package/src/components/pagination.css +46 -46
  32. package/src/components/popover.css +70 -70
  33. package/src/components/progress.css +19 -19
  34. package/src/components/prose.css +80 -80
  35. package/src/components/rating.css +37 -37
  36. package/src/components/scroll-top.css +36 -36
  37. package/src/components/skeleton.css +54 -54
  38. package/src/components/swap.css +45 -45
  39. package/src/components/table.css +22 -22
  40. package/src/components/tabs.css +24 -24
  41. package/src/components/tag.css +101 -101
  42. package/src/components/textured.css +34 -34
  43. package/src/components/timeline.css +34 -34
  44. package/src/components/toast.css +134 -134
  45. package/src/components/tooltip.css +24 -24
  46. package/src/utilities/borders.css +152 -152
  47. package/src/utilities/colors.css +73 -73
  48. package/src/utilities/hover.css +33 -33
  49. package/src/utilities/layout.css +100 -100
  50. package/src/utilities/neo-utilities.css +95 -95
  51. package/src/utilities/responsive.css +128 -128
  52. package/src/utilities/sizing.css +91 -91
  53. package/src/utilities/spacing.css +130 -130
  54. package/src/utilities/typography.css +94 -94
package/src/components/textured.css CHANGED
@@ -1,34 +1,34 @@
1
- /* TEXTURED TEXT & ANIMATION */
2
- .ar-bg-img {
3
- color: transparent;
4
- background-image: var(--ar-texture);
5
- background-size: cover;
6
- -webkit-background-clip: text;
7
- background-clip: text;
8
- -webkit-text-fill-color: var(--ar-bg-img-fill, transparent);
9
- }
10
- .ar-bounce {
11
- animation: ar-bounce 1s infinite;
12
- }
13
- @keyframes ar-bounce {
14
- 0%,
15
- 100% {
16
- transform: translateY(0);
17
- }
18
- 50% {
19
- transform: translateY(-0.25rem);
20
- }
21
- }
22
- .ar-animate-fade-in {
23
- animation: ar-fade-in 0.4s ease-out forwards;
24
- }
25
- @keyframes ar-fade-in {
26
- from {
27
- opacity: 0;
28
- transform: translateY(1.25rem);
29
- }
30
- to {
31
- opacity: 1;
32
- transform: translateY(0);
33
- }
34
- }
1
+ /* TEXTURED TEXT & ANIMATION */
2
+ .ar-bg-img {
3
+ color: transparent;
4
+ background-image: var(--ar-texture);
5
+ background-size: cover;
6
+ -webkit-background-clip: text;
7
+ background-clip: text;
8
+ -webkit-text-fill-color: var(--ar-bg-img-fill, transparent);
9
+ }
10
+ .ar-bounce {
11
+ animation: ar-bounce 1s infinite;
12
+ }
13
+ @keyframes ar-bounce {
14
+ 0%,
15
+ 100% {
16
+ transform: translateY(0);
17
+ }
18
+ 50% {
19
+ transform: translateY(-0.25rem);
20
+ }
21
+ }
22
+ .ar-animate-fade-in {
23
+ animation: ar-fade-in 0.4s ease-out forwards;
24
+ }
25
+ @keyframes ar-fade-in {
26
+ from {
27
+ opacity: 0;
28
+ transform: translateY(1.25rem);
29
+ }
30
+ to {
31
+ opacity: 1;
32
+ transform: translateY(0);
33
+ }
34
+ }
package/src/components/timeline.css CHANGED
@@ -1,34 +1,34 @@
1
- /* TIMELINE */
2
- .ar-timeline {
3
- display: flex;
4
- flex-direction: column;
5
- gap: var(--ar-s-4);
6
- padding-left: 0;
7
- list-style: none;
8
- }
9
- .ar-timeline-item {
10
- position: relative;
11
- padding-left: var(--ar-s-8);
12
- }
13
- .ar-timeline-item::before {
14
- content: "";
15
- position: absolute;
16
- left: 0.375rem;
17
- top: 0.25rem;
18
- width: 0.75rem;
19
- height: 0.75rem;
20
- border-radius: var(--ar-radius-pill);
21
- background: var(--ar-primary);
22
- }
23
- .ar-timeline-item::after {
24
- content: "";
25
- position: absolute;
26
- left: 0.65625rem;
27
- top: 1.25rem;
28
- bottom: -1.5rem;
29
- width: 2px;
30
- background: var(--ar-base-300);
31
- }
32
- .ar-timeline-item:last-child::after {
33
- display: none;
34
- }
1
+ /* TIMELINE */
2
+ .ar-timeline {
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: var(--ar-s-4);
6
+ padding-left: 0;
7
+ list-style: none;
8
+ }
9
+ .ar-timeline-item {
10
+ position: relative;
11
+ padding-left: var(--ar-s-8);
12
+ }
13
+ .ar-timeline-item::before {
14
+ content: "";
15
+ position: absolute;
16
+ left: 0.375rem;
17
+ top: 0.25rem;
18
+ width: 0.75rem;
19
+ height: 0.75rem;
20
+ border-radius: var(--ar-radius-pill);
21
+ background: var(--ar-primary);
22
+ }
23
+ .ar-timeline-item::after {
24
+ content: "";
25
+ position: absolute;
26
+ left: 0.65625rem;
27
+ top: 1.25rem;
28
+ bottom: -1.5rem;
29
+ width: 2px;
30
+ background: var(--ar-base-300);
31
+ }
32
+ .ar-timeline-item:last-child::after {
33
+ display: none;
34
+ }
package/src/components/toast.css CHANGED
@@ -1,134 +1,134 @@
1
- /* TOAST / SNACKBAR */
2
- .ar-toast-container {
3
- position: fixed;
4
- z-index: 100;
5
- display: flex;
6
- flex-direction: column;
7
- gap: var(--ar-s-2);
8
- pointer-events: none;
9
- }
10
- .ar-toast-container[data-ar-toast-position="top-left"] {
11
- top: var(--ar-s-4);
12
- left: var(--ar-s-4);
13
- }
14
- .ar-toast-container[data-ar-toast-position="top-center"] {
15
- top: var(--ar-s-4);
16
- left: 50%;
17
- transform: translateX(-50%);
18
- }
19
- .ar-toast-container[data-ar-toast-position="top-right"] {
20
- top: var(--ar-s-4);
21
- right: var(--ar-s-4);
22
- }
23
- .ar-toast-container[data-ar-toast-position="bottom-left"] {
24
- bottom: var(--ar-s-4);
25
- left: var(--ar-s-4);
26
- }
27
- .ar-toast-container[data-ar-toast-position="bottom-center"] {
28
- bottom: var(--ar-s-4);
29
- left: 50%;
30
- transform: translateX(-50%);
31
- }
32
- .ar-toast-container[data-ar-toast-position="bottom-right"] {
33
- bottom: var(--ar-s-4);
34
- right: var(--ar-s-4);
35
- }
36
- .ar-toast {
37
- display: flex;
38
- align-items: center;
39
- gap: var(--ar-s-3);
40
- min-width: 18rem;
41
- max-width: 24rem;
42
- padding: var(--ar-s-3) var(--ar-s-4);
43
- border-radius: var(--ar-radius-box);
44
- background: var(--ar-base-100);
45
- color: var(--ar-base-content);
46
- box-shadow: var(--ar-shadow-lg);
47
- border: var(--ar-border-width) solid var(--ar-base-300);
48
- pointer-events: auto;
49
- opacity: 0;
50
- transform: translateY(-0.5rem);
51
- animation: ar-toast-in 0.3s ease-out forwards;
52
- }
53
- .ar-toast-container[data-ar-toast-position="bottom-left"] .ar-toast,
54
- .ar-toast-container[data-ar-toast-position="bottom-center"] .ar-toast,
55
- .ar-toast-container[data-ar-toast-position="bottom-right"] .ar-toast {
56
- transform: translateY(0.5rem);
57
- }
58
- .ar-toast.ar-toast-out {
59
- animation: ar-toast-out 0.2s ease-in forwards;
60
- }
61
- .ar-toast-info {
62
- background: var(--ar-info);
63
- color: var(--ar-info-content);
64
- border-color: var(--ar-info);
65
- }
66
- .ar-toast-success {
67
- background: var(--ar-success);
68
- color: var(--ar-success-content);
69
- border-color: var(--ar-success);
70
- }
71
- .ar-toast-warning {
72
- background: var(--ar-warning);
73
- color: var(--ar-warning-content);
74
- border-color: var(--ar-warning);
75
- }
76
- .ar-toast-error {
77
- background: var(--ar-error);
78
- color: var(--ar-error-content);
79
- border-color: var(--ar-error);
80
- }
81
- .ar-toast-icon {
82
- flex-shrink: 0;
83
- width: 1.25rem;
84
- height: 1.25rem;
85
- }
86
- .ar-toast-message {
87
- flex: 1;
88
- font-size: 0.875rem;
89
- line-height: 1.4;
90
- }
91
- .ar-toast-close {
92
- flex-shrink: 0;
93
- background: transparent;
94
- border: 0;
95
- color: inherit;
96
- opacity: 0.6;
97
- cursor: pointer;
98
- padding: 0;
99
- font-size: 1.125rem;
100
- line-height: 1;
101
- }
102
- .ar-toast-close:hover {
103
- opacity: 1;
104
- }
105
- .ar-toast-progress {
106
- position: absolute;
107
- bottom: 0;
108
- left: 0;
109
- height: 3px;
110
- background: currentColor;
111
- opacity: 0.4;
112
- border-radius: 0 0 var(--ar-radius-box) var(--ar-radius-box);
113
- animation: ar-toast-progress linear forwards;
114
- }
115
- @keyframes ar-toast-in {
116
- to {
117
- opacity: 1;
118
- transform: translateY(0);
119
- }
120
- }
121
- @keyframes ar-toast-out {
122
- to {
123
- opacity: 0;
124
- transform: translateY(-0.5rem);
125
- }
126
- }
127
- @keyframes ar-toast-progress {
128
- from {
129
- width: 100%;
130
- }
131
- to {
132
- width: 0%;
133
- }
134
- }
1
+ /* TOAST / SNACKBAR */
2
+ .ar-toast-container {
3
+ position: fixed;
4
+ z-index: 100;
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: var(--ar-s-2);
8
+ pointer-events: none;
9
+ }
10
+ .ar-toast-container[data-ar-toast-position="top-left"] {
11
+ top: var(--ar-s-4);
12
+ left: var(--ar-s-4);
13
+ }
14
+ .ar-toast-container[data-ar-toast-position="top-center"] {
15
+ top: var(--ar-s-4);
16
+ left: 50%;
17
+ transform: translateX(-50%);
18
+ }
19
+ .ar-toast-container[data-ar-toast-position="top-right"] {
20
+ top: var(--ar-s-4);
21
+ right: var(--ar-s-4);
22
+ }
23
+ .ar-toast-container[data-ar-toast-position="bottom-left"] {
24
+ bottom: var(--ar-s-4);
25
+ left: var(--ar-s-4);
26
+ }
27
+ .ar-toast-container[data-ar-toast-position="bottom-center"] {
28
+ bottom: var(--ar-s-4);
29
+ left: 50%;
30
+ transform: translateX(-50%);
31
+ }
32
+ .ar-toast-container[data-ar-toast-position="bottom-right"] {
33
+ bottom: var(--ar-s-4);
34
+ right: var(--ar-s-4);
35
+ }
36
+ .ar-toast {
37
+ display: flex;
38
+ align-items: center;
39
+ gap: var(--ar-s-3);
40
+ min-width: 18rem;
41
+ max-width: 24rem;
42
+ padding: var(--ar-s-3) var(--ar-s-4);
43
+ border-radius: var(--ar-radius-box);
44
+ background: var(--ar-base-100);
45
+ color: var(--ar-base-content);
46
+ box-shadow: var(--ar-shadow-lg);
47
+ border: var(--ar-border-width) solid var(--ar-base-300);
48
+ pointer-events: auto;
49
+ opacity: 0;
50
+ transform: translateY(-0.5rem);
51
+ animation: ar-toast-in 0.3s ease-out forwards;
52
+ }
53
+ .ar-toast-container[data-ar-toast-position="bottom-left"] .ar-toast,
54
+ .ar-toast-container[data-ar-toast-position="bottom-center"] .ar-toast,
55
+ .ar-toast-container[data-ar-toast-position="bottom-right"] .ar-toast {
56
+ transform: translateY(0.5rem);
57
+ }
58
+ .ar-toast.ar-toast-out {
59
+ animation: ar-toast-out 0.2s ease-in forwards;
60
+ }
61
+ .ar-toast-info {
62
+ background: var(--ar-info);
63
+ color: var(--ar-info-content);
64
+ border-color: var(--ar-info);
65
+ }
66
+ .ar-toast-success {
67
+ background: var(--ar-success);
68
+ color: var(--ar-success-content);
69
+ border-color: var(--ar-success);
70
+ }
71
+ .ar-toast-warning {
72
+ background: var(--ar-warning);
73
+ color: var(--ar-warning-content);
74
+ border-color: var(--ar-warning);
75
+ }
76
+ .ar-toast-error {
77
+ background: var(--ar-error);
78
+ color: var(--ar-error-content);
79
+ border-color: var(--ar-error);
80
+ }
81
+ .ar-toast-icon {
82
+ flex-shrink: 0;
83
+ width: 1.25rem;
84
+ height: 1.25rem;
85
+ }
86
+ .ar-toast-message {
87
+ flex: 1;
88
+ font-size: 0.875rem;
89
+ line-height: 1.4;
90
+ }
91
+ .ar-toast-close {
92
+ flex-shrink: 0;
93
+ background: transparent;
94
+ border: 0;
95
+ color: inherit;
96
+ opacity: 0.6;
97
+ cursor: pointer;
98
+ padding: 0;
99
+ font-size: 1.125rem;
100
+ line-height: 1;
101
+ }
102
+ .ar-toast-close:hover {
103
+ opacity: 1;
104
+ }
105
+ .ar-toast-progress {
106
+ position: absolute;
107
+ bottom: 0;
108
+ left: 0;
109
+ height: 3px;
110
+ background: currentColor;
111
+ opacity: 0.4;
112
+ border-radius: 0 0 var(--ar-radius-box) var(--ar-radius-box);
113
+ animation: ar-toast-progress linear forwards;
114
+ }
115
+ @keyframes ar-toast-in {
116
+ to {
117
+ opacity: 1;
118
+ transform: translateY(0);
119
+ }
120
+ }
121
+ @keyframes ar-toast-out {
122
+ to {
123
+ opacity: 0;
124
+ transform: translateY(-0.5rem);
125
+ }
126
+ }
127
+ @keyframes ar-toast-progress {
128
+ from {
129
+ width: 100%;
130
+ }
131
+ to {
132
+ width: 0%;
133
+ }
134
+ }
package/src/components/tooltip.css CHANGED
@@ -1,24 +1,24 @@
1
- /* TOOLTIP */
2
- .ar-tooltip {
3
- position: relative;
4
- }
5
- .ar-tooltip[data-tip]::after {
6
- content: attr(data-tip);
7
- position: absolute;
8
- z-index: 30;
9
- bottom: calc(100% + 0.5rem);
10
- left: 50%;
11
- transform: translateX(-50%);
12
- padding: 0.25rem 0.625rem;
13
- border-radius: var(--ar-radius-field);
14
- background: var(--ar-neutral);
15
- color: var(--ar-neutral-content);
16
- font-size: 0.75rem;
17
- white-space: nowrap;
18
- opacity: 0;
19
- pointer-events: none;
20
- transition: opacity 0.2s;
21
- }
22
- .ar-tooltip:hover[data-tip]::after {
23
- opacity: 1;
24
- }
1
+ /* TOOLTIP */
2
+ .ar-tooltip {
3
+ position: relative;
4
+ }
5
+ .ar-tooltip[data-tip]::after {
6
+ content: attr(data-tip);
7
+ position: absolute;
8
+ z-index: 30;
9
+ bottom: calc(100% + 0.5rem);
10
+ left: 50%;
11
+ transform: translateX(-50%);
12
+ padding: 0.25rem 0.625rem;
13
+ border-radius: var(--ar-radius-field);
14
+ background: var(--ar-neutral);
15
+ color: var(--ar-neutral-content);
16
+ font-size: 0.75rem;
17
+ white-space: nowrap;
18
+ opacity: 0;
19
+ pointer-events: none;
20
+ transition: opacity 0.2s;
21
+ }
22
+ .ar-tooltip:hover[data-tip]::after {
23
+ opacity: 1;
24
+ }