arekui 1.0.0 → 2.0.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.
Files changed (99) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/LICENSE +21 -21
  3. package/README.md +26 -198
  4. package/arekui.css +5930 -3279
  5. package/arekui.d.ts +328 -328
  6. package/arekui.js +817 -450
  7. package/assets/img/grunge-wall-texture-freepick-kues1.webp +0 -0
  8. package/assets/img/logo.png +0 -0
  9. package/dist/css/arekui.base.min.css +1 -0
  10. package/dist/css/arekui.broadsheet.min.css +1 -0
  11. package/dist/css/arekui.brutalist.min.css +1 -0
  12. package/dist/css/arekui.default.min.css +1 -0
  13. package/dist/css/arekui.full.min.css +1 -0
  14. package/dist/css/arekui.min.css +1 -0
  15. package/dist/css/arekui.neo.min.css +1 -0
  16. package/dist/css/arekui.pixel.min.css +1 -0
  17. package/dist/js/arekui.min.js +2 -0
  18. package/package.json +64 -57
  19. package/scripts/build-css.js +95 -0
  20. package/scripts/build-custom.js +287 -318
  21. package/scripts/build-js.js +68 -0
  22. package/scripts/clean.js +13 -0
  23. package/scripts/dev.js +97 -0
  24. package/scripts/imports.js +18 -0
  25. package/scripts/split.js +256 -0
  26. package/src/arekui.base.css +63 -0
  27. package/src/arekui.broadsheet.css +6 -0
  28. package/src/arekui.brutalist.css +8 -0
  29. package/src/arekui.core.css +64 -0
  30. package/src/arekui.css +22 -5
  31. package/src/arekui.default.css +6 -0
  32. package/src/arekui.neo.css +8 -0
  33. package/src/arekui.pixel.css +8 -0
  34. package/src/base/brutalist-overrides.css +254 -0
  35. package/src/base/neo-overrides.css +330 -315
  36. package/src/base/pixel-overrides.css +336 -0
  37. package/src/base/reset.css +179 -65
  38. package/src/base/theme-brutalist.css +111 -0
  39. package/src/base/theme-default.css +184 -0
  40. package/src/base/theme-neo.css +108 -0
  41. package/src/base/theme-pixel.css +111 -0
  42. package/src/base/tokens.css +59 -302
  43. package/src/components/accordion.css +32 -33
  44. package/src/components/alert.css +24 -25
  45. package/src/components/badge.css +31 -32
  46. package/src/components/breadcrumb.css +31 -32
  47. package/src/components/broadsheet.css +264 -0
  48. package/src/components/button.css +102 -101
  49. package/src/components/card.css +22 -23
  50. package/src/components/carousel.css +49 -13
  51. package/src/components/chat.css +77 -76
  52. package/src/components/description-list.css +34 -0
  53. package/src/components/docs.css +252 -0
  54. package/src/components/empty.css +36 -0
  55. package/src/components/file-upload.css +49 -50
  56. package/src/components/footer.css +40 -25
  57. package/src/components/forms.css +67 -68
  58. package/src/components/heading.css +27 -0
  59. package/src/components/hero.css +20 -21
  60. package/src/components/join.css +12 -13
  61. package/src/components/kbd.css +15 -0
  62. package/src/components/link.css +22 -23
  63. package/src/components/loading.css +109 -0
  64. package/src/components/menu.css +104 -54
  65. package/src/components/misc.css +94 -55
  66. package/src/components/modal.css +30 -31
  67. package/src/components/navbar.css +166 -36
  68. package/src/components/pagination.css +50 -45
  69. package/src/components/popover.css +68 -69
  70. package/src/components/progress.css +17 -18
  71. package/src/components/prose.css +78 -78
  72. package/src/components/rating.css +35 -36
  73. package/src/components/scroll-top.css +34 -34
  74. package/src/components/segmented.css +44 -0
  75. package/src/components/sidebar.css +377 -0
  76. package/src/components/skeleton.css +52 -52
  77. package/src/components/spinner.css +36 -0
  78. package/src/components/swap.css +43 -43
  79. package/src/components/table.css +20 -21
  80. package/src/components/tabs.css +22 -23
  81. package/src/components/tag.css +99 -99
  82. package/src/components/textured.css +52 -32
  83. package/src/components/timeline.css +32 -33
  84. package/src/components/toast.css +132 -132
  85. package/src/components/tooltip.css +22 -23
  86. package/src/utilities/borders.css +150 -150
  87. package/src/utilities/brutalist-utilities.css +49 -0
  88. package/src/utilities/colors.css +79 -71
  89. package/src/utilities/hover.css +31 -31
  90. package/src/utilities/layout.css +98 -98
  91. package/src/utilities/neo-utilities.css +86 -93
  92. package/src/utilities/pixel-utilities.css +88 -0
  93. package/src/utilities/responsive.css +131 -126
  94. package/src/utilities/sizing.css +98 -89
  95. package/src/utilities/spacing.css +132 -129
  96. package/src/utilities/typography.css +95 -92
  97. package/dist/arekui.min.css +0 -1
  98. package/dist/arekui.min.js +0 -2
  99. package/src/components/drawer.css +0 -53
package/src/utilities/borders.css CHANGED
@@ -1,152 +1,152 @@
1
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;
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
152
  }
package/src/utilities/brutalist-utilities.css ADDED
@@ -0,0 +1,49 @@
1
+ .ar-brutalist-label {
2
+ font-family: var(--ar-font-mono);
3
+ font-size: 0.625rem;
4
+ font-weight: 700;
5
+ text-transform: uppercase;
6
+ letter-spacing: 0.1em;
7
+ color: var(--ar-gray-500);
8
+ }
9
+
10
+ .ar-brutalist-frame {
11
+ border: var(--ar-border-width) solid var(--ar-base-content);
12
+ }
13
+
14
+ .ar-brutalist-rule {
15
+ border-top: 3px solid var(--ar-base-content);
16
+ }
17
+
18
+ .ar-brutalist-primary {
19
+ background: var(--ar-primary);
20
+ color: var(--ar-primary-content);
21
+ }
22
+ .ar-brutalist-secondary {
23
+ background: var(--ar-secondary);
24
+ color: var(--ar-secondary-content);
25
+ }
26
+ .ar-brutalist-accent {
27
+ background: var(--ar-accent);
28
+ color: var(--ar-accent-content);
29
+ }
30
+ .ar-brutalist-danger {
31
+ background: var(--ar-error);
32
+ color: var(--ar-error-content);
33
+ }
34
+
35
+ .ar-brutalist-text-primary {
36
+ color: var(--ar-primary-text);
37
+ }
38
+ .ar-brutalist-text-secondary {
39
+ color: var(--ar-secondary);
40
+ }
41
+ .ar-brutalist-text-accent {
42
+ color: var(--ar-accent);
43
+ }
44
+ .ar-brutalist-text-danger {
45
+ color: var(--ar-error);
46
+ }
47
+ .ar-brutalist-text-dark {
48
+ color: var(--ar-base-content);
49
+ }
package/src/utilities/colors.css CHANGED
@@ -1,73 +1,81 @@
1
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);
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
+ /* Opt-in dot-grid paper background. The dots are a faint wash of the current
33
+ theme's ink, so they adapt to every theme (light, dark, neo, pixel,
34
+ brutalist). --ar-dot-grid-size tweaks the density. */
35
+ .ar-bg-dot-grid {
36
+ background-image: radial-gradient(circle, var(--ar-gray-400) 1px, transparent 1px);
37
+ background-image: radial-gradient(circle, color-mix(in srgb, var(--ar-base-content) 18%, transparent) 1px, transparent 1px);
38
+ background-size: var(--ar-dot-grid-size, 24px) var(--ar-dot-grid-size, 24px);
39
+ }
40
+ .ar-text-base-content {
41
+ color: var(--ar-base-content);
42
+ }
43
+ .ar-text-primary {
44
+ color: var(--ar-primary-text);
45
+ }
46
+ .ar-text-primary-content {
47
+ color: var(--ar-primary-content);
48
+ }
49
+ .ar-text-neutral {
50
+ color: var(--ar-neutral);
51
+ }
52
+ .ar-text-neutral-content {
53
+ color: var(--ar-neutral-content);
54
+ }
55
+ .ar-text-white {
56
+ color: #ffffff;
57
+ }
58
+ .ar-text-black {
59
+ color: #000000;
60
+ }
61
+ .ar-text-gray-100 {
62
+ color: var(--ar-gray-100);
63
+ }
64
+ .ar-text-gray-200 {
65
+ color: var(--ar-gray-200);
66
+ }
67
+ .ar-text-gray-300 {
68
+ color: var(--ar-gray-300);
69
+ }
70
+ .ar-text-gray-400 {
71
+ color: var(--ar-gray-400);
72
+ }
73
+ .ar-text-gray-500 {
74
+ color: var(--ar-gray-500);
75
+ }
76
+ .ar-text-gray-600 {
77
+ color: var(--ar-gray-600);
78
+ }
79
+ .ar-text-gray-700 {
80
+ color: var(--ar-gray-700);
73
81
  }
package/src/utilities/hover.css CHANGED
@@ -1,33 +1,33 @@
1
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);
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
33
  }