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/responsive.css CHANGED
@@ -1,128 +1,133 @@
1
1
  /* UTILITIES — responsive */
2
- @media (min-width: 768px) {
3
- .ar-md\:flex {
4
- display: flex;
5
- }
6
- .ar-md\:flex-col {
7
- flex-direction: column;
8
- }
9
- .ar-md\:flex-row {
10
- flex-direction: row;
11
- }
12
- .ar-md\:hidden {
13
- display: none;
14
- }
15
- .ar-md\:grid {
16
- display: grid;
17
- }
18
- .ar-md\:grid-cols-2 {
19
- grid-template-columns: repeat(2, minmax(0, 1fr));
20
- }
21
- .ar-md\:items-center {
22
- align-items: center;
23
- }
24
- .ar-md\:w-1\/2 {
25
- width: 50%;
26
- }
27
- .ar-md\:w-1\/3 {
28
- width: 33.333333%;
29
- }
30
- .ar-md\:w-2\/3 {
31
- width: 66.666667%;
32
- }
33
- .ar-md\:max-w-52 {
34
- max-width: 13rem;
35
- }
36
- .ar-md\:p-8 {
37
- padding: var(--ar-s-8);
38
- }
39
- .ar-md\:mx-0 {
40
- margin-inline: 0;
41
- }
42
- .ar-md\:text-left {
43
- text-align: left;
44
- }
45
- .ar-md\:text-center {
46
- text-align: center;
47
- }
48
- }
49
- @media (min-width: 1024px) {
50
- .ar-lg\:flex {
51
- display: flex;
52
- }
53
- .ar-lg\:flex-col {
54
- flex-direction: column;
55
- }
56
- .ar-lg\:flex-row {
57
- flex-direction: row;
58
- }
59
- .ar-lg\:hidden {
60
- display: none;
61
- }
62
- .ar-lg\:grid {
63
- display: grid;
64
- }
65
- .ar-lg\:grid-cols-2 {
66
- grid-template-columns: repeat(2, minmax(0, 1fr));
67
- }
68
- .ar-lg\:grid-cols-3 {
69
- grid-template-columns: repeat(3, minmax(0, 1fr));
70
- }
71
- .ar-lg\:grid-cols-4 {
72
- grid-template-columns: repeat(4, minmax(0, 1fr));
73
- }
74
- .ar-lg\:items-center {
75
- align-items: center;
76
- }
77
- .ar-lg\:justify-between {
78
- justify-content: space-between;
79
- }
80
- .ar-lg\:gap-8 {
81
- gap: var(--ar-s-8);
82
- }
83
- .ar-lg\:w-1\/2 {
84
- width: 50%;
85
- }
86
- .ar-lg\:w-2\/5 {
87
- width: 40%;
88
- }
89
- .ar-lg\:max-w-none {
90
- max-width: none;
91
- }
92
- .ar-lg\:max-w-lg {
93
- max-width: 32rem;
94
- }
95
- .ar-lg\:p-8 {
96
- padding: var(--ar-s-8);
97
- }
98
- .ar-lg\:p-16 {
99
- padding: var(--ar-s-16);
100
- }
101
- .ar-lg\:mx-0 {
102
- margin-inline: 0;
103
- }
104
- .ar-lg\:text-2xl {
105
- font-size: 1.5rem;
106
- }
107
- .ar-lg\:text-4xl {
108
- font-size: 2.25rem;
109
- }
110
- .ar-lg\:text-6xl {
111
- font-size: 3.75rem;
112
- }
113
- .ar-lg\:text-8xl {
114
- font-size: 6rem;
115
- }
116
- .ar-lg\:text-9xl {
117
- font-size: 8rem;
118
- }
119
- .ar-lg\:leading-tight {
120
- line-height: 1.25;
121
- }
122
- .ar-lg\:text-left {
123
- text-align: left;
124
- }
125
- .ar-lg\:text-center {
126
- text-align: center;
127
- }
2
+ @media (max-width: 479px) {
3
+ .ar-hide-xs {
4
+ display: none;
5
+ }
6
+ }
7
+ @media (min-width: 768px) {
8
+ .ar-md\:flex {
9
+ display: flex;
10
+ }
11
+ .ar-md\:flex-col {
12
+ flex-direction: column;
13
+ }
14
+ .ar-md\:flex-row {
15
+ flex-direction: row;
16
+ }
17
+ .ar-md\:hidden {
18
+ display: none;
19
+ }
20
+ .ar-md\:grid {
21
+ display: grid;
22
+ }
23
+ .ar-md\:grid-cols-2 {
24
+ grid-template-columns: repeat(2, minmax(0, 1fr));
25
+ }
26
+ .ar-md\:items-center {
27
+ align-items: center;
28
+ }
29
+ .ar-md\:w-1\/2 {
30
+ width: 50%;
31
+ }
32
+ .ar-md\:w-1\/3 {
33
+ width: 33.333333%;
34
+ }
35
+ .ar-md\:w-2\/3 {
36
+ width: 66.666667%;
37
+ }
38
+ .ar-md\:max-w-52 {
39
+ max-width: 13rem;
40
+ }
41
+ .ar-md\:p-8 {
42
+ padding: var(--ar-s-8);
43
+ }
44
+ .ar-md\:mx-0 {
45
+ margin-inline: 0;
46
+ }
47
+ .ar-md\:text-left {
48
+ text-align: left;
49
+ }
50
+ .ar-md\:text-center {
51
+ text-align: center;
52
+ }
53
+ }
54
+ @media (min-width: 1024px) {
55
+ .ar-lg\:flex {
56
+ display: flex;
57
+ }
58
+ .ar-lg\:flex-col {
59
+ flex-direction: column;
60
+ }
61
+ .ar-lg\:flex-row {
62
+ flex-direction: row;
63
+ }
64
+ .ar-lg\:hidden {
65
+ display: none;
66
+ }
67
+ .ar-lg\:grid {
68
+ display: grid;
69
+ }
70
+ .ar-lg\:grid-cols-2 {
71
+ grid-template-columns: repeat(2, minmax(0, 1fr));
72
+ }
73
+ .ar-lg\:grid-cols-3 {
74
+ grid-template-columns: repeat(3, minmax(0, 1fr));
75
+ }
76
+ .ar-lg\:grid-cols-4 {
77
+ grid-template-columns: repeat(4, minmax(0, 1fr));
78
+ }
79
+ .ar-lg\:items-center {
80
+ align-items: center;
81
+ }
82
+ .ar-lg\:justify-between {
83
+ justify-content: space-between;
84
+ }
85
+ .ar-lg\:gap-8 {
86
+ gap: var(--ar-s-8);
87
+ }
88
+ .ar-lg\:w-1\/2 {
89
+ width: 50%;
90
+ }
91
+ .ar-lg\:w-2\/5 {
92
+ width: 40%;
93
+ }
94
+ .ar-lg\:max-w-none {
95
+ max-width: none;
96
+ }
97
+ .ar-lg\:max-w-lg {
98
+ max-width: 32rem;
99
+ }
100
+ .ar-lg\:p-8 {
101
+ padding: var(--ar-s-8);
102
+ }
103
+ .ar-lg\:p-16 {
104
+ padding: var(--ar-s-16);
105
+ }
106
+ .ar-lg\:mx-0 {
107
+ margin-inline: 0;
108
+ }
109
+ .ar-lg\:text-2xl {
110
+ font-size: 1.5rem;
111
+ }
112
+ .ar-lg\:text-4xl {
113
+ font-size: 2.25rem;
114
+ }
115
+ .ar-lg\:text-6xl {
116
+ font-size: 3.75rem;
117
+ }
118
+ .ar-lg\:text-8xl {
119
+ font-size: 6rem;
120
+ }
121
+ .ar-lg\:text-9xl {
122
+ font-size: 8rem;
123
+ }
124
+ .ar-lg\:leading-tight {
125
+ line-height: 1.25;
126
+ }
127
+ .ar-lg\:text-left {
128
+ text-align: left;
129
+ }
130
+ .ar-lg\:text-center {
131
+ text-align: center;
132
+ }
128
133
  }
package/src/utilities/sizing.css CHANGED
@@ -1,91 +1,100 @@
1
1
  /* UTILITIES — sizing */
2
- .ar-w-8 {
3
- width: var(--ar-s-8);
4
- }
5
- .ar-w-40 {
6
- width: var(--ar-s-40, 10rem);
7
- }
8
- .ar-w-48 {
9
- width: var(--ar-s-48, 12rem);
10
- }
11
- .ar-w-60 {
12
- width: 15rem;
13
- }
14
- .ar-w-80 {
15
- width: 20rem;
16
- }
17
- .ar-w-full {
18
- width: 100%;
19
- }
20
- .ar-w-1\/3 {
21
- width: 33.333333%;
22
- }
23
- .ar-w-2\/3 {
24
- width: 66.666667%;
25
- }
26
- .ar-w-1\/2 {
27
- width: 50%;
28
- }
29
- .ar-w-11\/12 {
30
- width: 91.666667%;
31
- }
32
- .ar-h-8 {
33
- height: var(--ar-s-8);
34
- }
35
- .ar-h-48 {
36
- height: 12rem;
37
- }
38
- .ar-h-full {
39
- height: 100%;
40
- }
41
- .ar-min-h-full {
42
- min-height: 100%;
43
- }
44
- .ar-min-h-screen {
45
- min-height: 100vh;
46
- }
47
- .ar-max-w-none {
48
- max-width: none;
49
- }
50
- .ar-max-w-sm {
51
- max-width: 24rem;
52
- }
53
- .ar-max-w-md {
54
- max-width: 28rem;
55
- }
56
- .ar-max-w-lg {
57
- max-width: 32rem;
58
- }
59
- .ar-max-w-xl {
60
- max-width: 36rem;
61
- }
62
- .ar-max-w-2xl {
63
- max-width: 42rem;
64
- }
65
- .ar-max-w-3xl {
66
- max-width: 48rem;
67
- }
68
- .ar-max-w-4xl {
69
- max-width: 56rem;
70
- }
71
- .ar-max-w-5xl {
72
- max-width: 64rem;
73
- }
74
- .ar-max-w-6xl {
75
- max-width: 72rem;
76
- }
77
- .ar-max-w-7xl {
78
- max-width: 80rem;
79
- }
80
- .ar-aspect-video {
81
- aspect-ratio: 16 / 9;
82
- }
83
- .ar-object-cover {
84
- object-fit: cover;
85
- }
86
- .ar-overflow-hidden {
87
- overflow: hidden;
88
- }
89
- .ar-overflow-x-auto {
90
- overflow-x: auto;
2
+ .ar-w-8 {
3
+ width: var(--ar-s-8);
4
+ }
5
+ .ar-w-16 {
6
+ width: var(--ar-s-16);
7
+ }
8
+ .ar-w-24 {
9
+ width: var(--ar-s-24);
10
+ }
11
+ .ar-w-32 {
12
+ width: var(--ar-s-32);
13
+ }
14
+ .ar-w-40 {
15
+ width: var(--ar-s-40);
16
+ }
17
+ .ar-w-48 {
18
+ width: var(--ar-s-48);
19
+ }
20
+ .ar-w-60 {
21
+ width: var(--ar-s-60);
22
+ }
23
+ .ar-w-80 {
24
+ width: var(--ar-s-80);
25
+ }
26
+ .ar-w-full {
27
+ width: 100%;
28
+ }
29
+ .ar-w-1\/3 {
30
+ width: 33.333333%;
31
+ }
32
+ .ar-w-2\/3 {
33
+ width: 66.666667%;
34
+ }
35
+ .ar-w-1\/2 {
36
+ width: 50%;
37
+ }
38
+ .ar-w-11\/12 {
39
+ width: 91.666667%;
40
+ }
41
+ .ar-h-8 {
42
+ height: var(--ar-s-8);
43
+ }
44
+ .ar-h-48 {
45
+ height: var(--ar-s-48);
46
+ }
47
+ .ar-h-full {
48
+ height: 100%;
49
+ }
50
+ .ar-min-h-full {
51
+ min-height: 100%;
52
+ }
53
+ .ar-min-h-screen {
54
+ min-height: 100vh;
55
+ }
56
+ .ar-max-w-none {
57
+ max-width: none;
58
+ }
59
+ .ar-max-w-sm {
60
+ max-width: 24rem;
61
+ }
62
+ .ar-max-w-md {
63
+ max-width: 28rem;
64
+ }
65
+ .ar-max-w-lg {
66
+ max-width: 32rem;
67
+ }
68
+ .ar-max-w-xl {
69
+ max-width: 36rem;
70
+ }
71
+ .ar-max-w-2xl {
72
+ max-width: 42rem;
73
+ }
74
+ .ar-max-w-3xl {
75
+ max-width: 48rem;
76
+ }
77
+ .ar-max-w-4xl {
78
+ max-width: 56rem;
79
+ }
80
+ .ar-max-w-5xl {
81
+ max-width: 64rem;
82
+ }
83
+ .ar-max-w-6xl {
84
+ max-width: 72rem;
85
+ }
86
+ .ar-max-w-7xl {
87
+ max-width: 80rem;
88
+ }
89
+ .ar-aspect-video {
90
+ aspect-ratio: 16 / 9;
91
+ }
92
+ .ar-object-cover {
93
+ object-fit: cover;
94
+ }
95
+ .ar-overflow-hidden {
96
+ overflow: hidden;
97
+ }
98
+ .ar-overflow-x-auto {
99
+ overflow-x: auto;
91
100
  }