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/utilities/borders.css CHANGED
@@ -1,152 +1,152 @@
1
- /* UTILITIES — border, radius, shadow, position, misc */
2
- .ar-border {
3
- border: var(--ar-border-width) solid;
4
- }
5
- .ar-border-2 {
6
- border: 2px solid;
7
- }
8
- .ar-border-t {
9
- border-top: var(--ar-border-width) solid;
10
- }
11
- .ar-border-t-0 {
12
- border-top: 0;
13
- }
14
- .ar-border-b {
15
- border-bottom: var(--ar-border-width) solid;
16
- }
17
- .ar-border-base-content {
18
- border-color: var(--ar-base-content);
19
- }
20
- .ar-border-neutral {
21
- border-color: var(--ar-neutral);
22
- }
23
- .ar-border-gray-200 {
24
- border-color: var(--ar-gray-200);
25
- }
26
- .ar-border-gray-300 {
27
- border-color: var(--ar-gray-300);
28
- }
29
- .ar-border-base-300 {
30
- border-color: var(--ar-base-300);
31
- }
32
- .ar-rounded {
33
- border-radius: var(--ar-radius-field);
34
- }
35
- .ar-rounded-lg {
36
- border-radius: var(--ar-radius-box);
37
- }
38
- .ar-rounded-xl {
39
- border-radius: 0.75rem;
40
- }
41
- .ar-rounded-box {
42
- border-radius: var(--ar-radius-box);
43
- }
44
- .ar-rounded-full {
45
- border-radius: var(--ar-radius-pill);
46
- }
47
- .ar-shadow-sm {
48
- box-shadow: var(--ar-shadow-sm);
49
- }
50
- .ar-shadow-md {
51
- box-shadow: var(--ar-shadow-md);
52
- }
53
- .ar-shadow-lg {
54
- box-shadow: var(--ar-shadow-lg);
55
- }
56
- .ar-shadow-xl {
57
- box-shadow: var(--ar-shadow-xl);
58
- }
59
- .ar-shadow-2xl {
60
- box-shadow: var(--ar-shadow-2xl);
61
- }
62
- .ar-relative {
63
- position: relative;
64
- }
65
- .ar-absolute {
66
- position: absolute;
67
- }
68
- .ar-fixed {
69
- position: fixed;
70
- }
71
- .ar-sticky {
72
- position: sticky;
73
- top: 0;
74
- z-index: 50;
75
- }
76
- .ar-inset-0 {
77
- inset: 0;
78
- }
79
- .ar-top-0 {
80
- top: 0;
81
- }
82
- .ar-bottom-0 {
83
- bottom: 0;
84
- }
85
- .ar-left-0 {
86
- left: 0;
87
- }
88
- .ar-right-0 {
89
- right: 0;
90
- }
91
- .ar-top-1\/2 {
92
- top: 50%;
93
- }
94
- .ar-left-5 {
95
- left: 1.25rem;
96
- }
97
- .ar-right-5 {
98
- right: 1.25rem;
99
- }
100
- .ar-z-10 {
101
- z-index: 10;
102
- }
103
- .ar-z-20 {
104
- z-index: 20;
105
- }
106
- .ar-z-50 {
107
- z-index: 50;
108
- }
109
- .ar-opacity-0 {
110
- opacity: 0;
111
- }
112
- .ar-opacity-30 {
113
- opacity: 0.3;
114
- }
115
- .ar-opacity-60 {
116
- opacity: 0.6;
117
- }
118
- .ar-transition-all {
119
- transition: all 0.3s ease;
120
- }
121
- .ar-transition-transform {
122
- transition: transform 0.3s ease;
123
- }
124
- .ar-duration-300 {
125
- transition-duration: 0.3s;
126
- }
127
- .ar-duration-500 {
128
- transition-duration: 0.5s;
129
- }
130
- .ar-ease-out {
131
- transition-timing-function: ease-out;
132
- }
133
- .ar-ease-in-out {
134
- transition-timing-function: ease-in-out;
135
- }
136
- .ar-cursor-pointer {
137
- cursor: pointer;
138
- }
139
- .ar-whitespace-nowrap {
140
- white-space: nowrap;
141
- }
142
- .ar-sr-only {
143
- position: absolute;
144
- width: 1px;
145
- height: 1px;
146
- padding: 0;
147
- margin: -1px;
148
- overflow: hidden;
149
- clip: rect(0, 0, 0, 0);
150
- white-space: nowrap;
151
- border: 0;
152
- }
1
+ /* UTILITIES — border, radius, shadow, position, misc */
2
+ .ar-border {
3
+ border: var(--ar-border-width) solid;
4
+ }
5
+ .ar-border-2 {
6
+ border: 2px solid;
7
+ }
8
+ .ar-border-t {
9
+ border-top: var(--ar-border-width) solid;
10
+ }
11
+ .ar-border-t-0 {
12
+ border-top: 0;
13
+ }
14
+ .ar-border-b {
15
+ border-bottom: var(--ar-border-width) solid;
16
+ }
17
+ .ar-border-base-content {
18
+ border-color: var(--ar-base-content);
19
+ }
20
+ .ar-border-neutral {
21
+ border-color: var(--ar-neutral);
22
+ }
23
+ .ar-border-gray-200 {
24
+ border-color: var(--ar-gray-200);
25
+ }
26
+ .ar-border-gray-300 {
27
+ border-color: var(--ar-gray-300);
28
+ }
29
+ .ar-border-base-300 {
30
+ border-color: var(--ar-base-300);
31
+ }
32
+ .ar-rounded {
33
+ border-radius: var(--ar-radius-field);
34
+ }
35
+ .ar-rounded-lg {
36
+ border-radius: var(--ar-radius-box);
37
+ }
38
+ .ar-rounded-xl {
39
+ border-radius: 0.75rem;
40
+ }
41
+ .ar-rounded-box {
42
+ border-radius: var(--ar-radius-box);
43
+ }
44
+ .ar-rounded-full {
45
+ border-radius: var(--ar-radius-pill);
46
+ }
47
+ .ar-shadow-sm {
48
+ box-shadow: var(--ar-shadow-sm);
49
+ }
50
+ .ar-shadow-md {
51
+ box-shadow: var(--ar-shadow-md);
52
+ }
53
+ .ar-shadow-lg {
54
+ box-shadow: var(--ar-shadow-lg);
55
+ }
56
+ .ar-shadow-xl {
57
+ box-shadow: var(--ar-shadow-xl);
58
+ }
59
+ .ar-shadow-2xl {
60
+ box-shadow: var(--ar-shadow-2xl);
61
+ }
62
+ .ar-relative {
63
+ position: relative;
64
+ }
65
+ .ar-absolute {
66
+ position: absolute;
67
+ }
68
+ .ar-fixed {
69
+ position: fixed;
70
+ }
71
+ .ar-sticky {
72
+ position: sticky;
73
+ top: 0;
74
+ z-index: 50;
75
+ }
76
+ .ar-inset-0 {
77
+ inset: 0;
78
+ }
79
+ .ar-top-0 {
80
+ top: 0;
81
+ }
82
+ .ar-bottom-0 {
83
+ bottom: 0;
84
+ }
85
+ .ar-left-0 {
86
+ left: 0;
87
+ }
88
+ .ar-right-0 {
89
+ right: 0;
90
+ }
91
+ .ar-top-1\/2 {
92
+ top: 50%;
93
+ }
94
+ .ar-left-5 {
95
+ left: 1.25rem;
96
+ }
97
+ .ar-right-5 {
98
+ right: 1.25rem;
99
+ }
100
+ .ar-z-10 {
101
+ z-index: 10;
102
+ }
103
+ .ar-z-20 {
104
+ z-index: 20;
105
+ }
106
+ .ar-z-50 {
107
+ z-index: 50;
108
+ }
109
+ .ar-opacity-0 {
110
+ opacity: 0;
111
+ }
112
+ .ar-opacity-30 {
113
+ opacity: 0.3;
114
+ }
115
+ .ar-opacity-60 {
116
+ opacity: 0.6;
117
+ }
118
+ .ar-transition-all {
119
+ transition: all 0.3s ease;
120
+ }
121
+ .ar-transition-transform {
122
+ transition: transform 0.3s ease;
123
+ }
124
+ .ar-duration-300 {
125
+ transition-duration: 0.3s;
126
+ }
127
+ .ar-duration-500 {
128
+ transition-duration: 0.5s;
129
+ }
130
+ .ar-ease-out {
131
+ transition-timing-function: ease-out;
132
+ }
133
+ .ar-ease-in-out {
134
+ transition-timing-function: ease-in-out;
135
+ }
136
+ .ar-cursor-pointer {
137
+ cursor: pointer;
138
+ }
139
+ .ar-whitespace-nowrap {
140
+ white-space: nowrap;
141
+ }
142
+ .ar-sr-only {
143
+ position: absolute;
144
+ width: 1px;
145
+ height: 1px;
146
+ padding: 0;
147
+ margin: -1px;
148
+ overflow: hidden;
149
+ clip: rect(0, 0, 0, 0);
150
+ white-space: nowrap;
151
+ border: 0;
152
+ }
package/src/utilities/colors.css CHANGED
@@ -1,73 +1,73 @@
1
- /* UTILITIES — colors */
2
- .ar-bg-base-100 {
3
- background: var(--ar-base-100);
4
- }
5
- .ar-bg-base-200 {
6
- background: var(--ar-base-200);
7
- }
8
- .ar-bg-base-300 {
9
- background: var(--ar-base-300);
10
- }
11
- .ar-bg-base-content {
12
- background: var(--ar-base-content);
13
- }
14
- .ar-bg-base-content\/80 {
15
- background: var(--ar-base-content-80);
16
- }
17
- .ar-bg-neutral {
18
- background: var(--ar-neutral);
19
- }
20
- .ar-bg-primary {
21
- background: var(--ar-primary);
22
- }
23
- .ar-bg-gray-100 {
24
- background: var(--ar-gray-100);
25
- }
26
- .ar-bg-gray-200 {
27
- background: var(--ar-gray-200);
28
- }
29
- .ar-bg-gray-700 {
30
- background: var(--ar-gray-700);
31
- }
32
- .ar-text-base-content {
33
- color: var(--ar-base-content);
34
- }
35
- .ar-text-primary {
36
- color: var(--ar-primary);
37
- }
38
- .ar-text-primary-content {
39
- color: var(--ar-primary-content);
40
- }
41
- .ar-text-neutral {
42
- color: var(--ar-neutral);
43
- }
44
- .ar-text-neutral-content {
45
- color: var(--ar-neutral-content);
46
- }
47
- .ar-text-white {
48
- color: #ffffff;
49
- }
50
- .ar-text-black {
51
- color: #000000;
52
- }
53
- .ar-text-gray-100 {
54
- color: var(--ar-gray-100);
55
- }
56
- .ar-text-gray-200 {
57
- color: var(--ar-gray-200);
58
- }
59
- .ar-text-gray-300 {
60
- color: var(--ar-gray-300);
61
- }
62
- .ar-text-gray-400 {
63
- color: var(--ar-gray-400);
64
- }
65
- .ar-text-gray-500 {
66
- color: var(--ar-gray-500);
67
- }
68
- .ar-text-gray-600 {
69
- color: var(--ar-gray-600);
70
- }
71
- .ar-text-gray-700 {
72
- color: var(--ar-gray-700);
73
- }
1
+ /* UTILITIES — colors */
2
+ .ar-bg-base-100 {
3
+ background: var(--ar-base-100);
4
+ }
5
+ .ar-bg-base-200 {
6
+ background: var(--ar-base-200);
7
+ }
8
+ .ar-bg-base-300 {
9
+ background: var(--ar-base-300);
10
+ }
11
+ .ar-bg-base-content {
12
+ background: var(--ar-base-content);
13
+ }
14
+ .ar-bg-base-content\/80 {
15
+ background: var(--ar-base-content-80);
16
+ }
17
+ .ar-bg-neutral {
18
+ background: var(--ar-neutral);
19
+ }
20
+ .ar-bg-primary {
21
+ background: var(--ar-primary);
22
+ }
23
+ .ar-bg-gray-100 {
24
+ background: var(--ar-gray-100);
25
+ }
26
+ .ar-bg-gray-200 {
27
+ background: var(--ar-gray-200);
28
+ }
29
+ .ar-bg-gray-700 {
30
+ background: var(--ar-gray-700);
31
+ }
32
+ .ar-text-base-content {
33
+ color: var(--ar-base-content);
34
+ }
35
+ .ar-text-primary {
36
+ color: var(--ar-primary);
37
+ }
38
+ .ar-text-primary-content {
39
+ color: var(--ar-primary-content);
40
+ }
41
+ .ar-text-neutral {
42
+ color: var(--ar-neutral);
43
+ }
44
+ .ar-text-neutral-content {
45
+ color: var(--ar-neutral-content);
46
+ }
47
+ .ar-text-white {
48
+ color: #ffffff;
49
+ }
50
+ .ar-text-black {
51
+ color: #000000;
52
+ }
53
+ .ar-text-gray-100 {
54
+ color: var(--ar-gray-100);
55
+ }
56
+ .ar-text-gray-200 {
57
+ color: var(--ar-gray-200);
58
+ }
59
+ .ar-text-gray-300 {
60
+ color: var(--ar-gray-300);
61
+ }
62
+ .ar-text-gray-400 {
63
+ color: var(--ar-gray-400);
64
+ }
65
+ .ar-text-gray-500 {
66
+ color: var(--ar-gray-500);
67
+ }
68
+ .ar-text-gray-600 {
69
+ color: var(--ar-gray-600);
70
+ }
71
+ .ar-text-gray-700 {
72
+ color: var(--ar-gray-700);
73
+ }
package/src/utilities/hover.css CHANGED
@@ -1,33 +1,33 @@
1
- /* UTILITIES — hover states */
2
- .ar-hover-bounce:hover {
3
- animation: ar-bounce 1s infinite;
4
- }
5
- .ar-hover-scale-110:hover {
6
- transform: scale(1.1);
7
- }
8
- .ar-hover-shadow-xl:hover {
9
- box-shadow: var(--ar-shadow-xl);
10
- }
11
- .ar-hover-text-gray-600:hover {
12
- color: var(--ar-gray-600);
13
- }
14
- .ar-hover-text-neutral:hover {
15
- color: var(--ar-neutral);
16
- }
17
- .ar-hover-bg-gray-100:hover {
18
- background: var(--ar-gray-100);
19
- }
20
- .ar-hover-bg-gray-700:hover {
21
- background: var(--ar-gray-700);
22
- }
23
- .ar-hover-border-gray-400:hover {
24
- border-color: var(--ar-gray-400);
25
- }
26
- .ar-hover-ring:hover {
27
- box-shadow: 0 0 0 1px var(--ar-gray-400);
28
- border-color: var(--ar-gray-400);
29
- }
30
- .ar-hover-ring-gray-200:hover {
31
- box-shadow: 0 0 0 1px var(--ar-gray-200);
32
- border-color: var(--ar-gray-400);
33
- }
1
+ /* UTILITIES — hover states */
2
+ .ar-hover-bounce:hover {
3
+ animation: ar-bounce 1s infinite;
4
+ }
5
+ .ar-hover-scale-110:hover {
6
+ transform: scale(1.1);
7
+ }
8
+ .ar-hover-shadow-xl:hover {
9
+ box-shadow: var(--ar-shadow-xl);
10
+ }
11
+ .ar-hover-text-gray-600:hover {
12
+ color: var(--ar-gray-600);
13
+ }
14
+ .ar-hover-text-neutral:hover {
15
+ color: var(--ar-neutral);
16
+ }
17
+ .ar-hover-bg-gray-100:hover {
18
+ background: var(--ar-gray-100);
19
+ }
20
+ .ar-hover-bg-gray-700:hover {
21
+ background: var(--ar-gray-700);
22
+ }
23
+ .ar-hover-border-gray-400:hover {
24
+ border-color: var(--ar-gray-400);
25
+ }
26
+ .ar-hover-ring:hover {
27
+ box-shadow: 0 0 0 1px var(--ar-gray-400);
28
+ border-color: var(--ar-gray-400);
29
+ }
30
+ .ar-hover-ring-gray-200:hover {
31
+ box-shadow: 0 0 0 1px var(--ar-gray-200);
32
+ border-color: var(--ar-gray-400);
33
+ }