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/layout.css CHANGED
@@ -1,100 +1,100 @@
1
1
  /* UTILITIES — layout & flex & grid */
2
- .ar-flex {
3
- display: flex;
4
- }
5
- .ar-inline-flex {
6
- display: inline-flex;
7
- }
8
- .ar-grid {
9
- display: grid;
10
- }
11
- .ar-block {
12
- display: block;
13
- }
14
- .ar-inline-block {
15
- display: inline-block;
16
- }
17
- .ar-hidden {
18
- display: none;
19
- }
20
- .ar-flex-col {
21
- flex-direction: column;
22
- }
23
- .ar-flex-row {
24
- flex-direction: row;
25
- }
26
- .ar-flex-wrap {
27
- flex-wrap: wrap;
28
- }
29
- .ar-flex-1 {
30
- flex: 1 1 0%;
31
- }
32
- .ar-shrink-0 {
33
- flex-shrink: 0;
34
- }
35
- .ar-items-start {
36
- align-items: flex-start;
37
- }
38
- .ar-items-center {
39
- align-items: center;
40
- }
41
- .ar-items-end {
42
- align-items: flex-end;
43
- }
44
- .ar-justify-start {
45
- justify-content: flex-start;
46
- }
47
- .ar-justify-center {
48
- justify-content: center;
49
- }
50
- .ar-justify-between {
51
- justify-content: space-between;
52
- }
53
- .ar-justify-end {
54
- justify-content: flex-end;
55
- }
56
- .ar-grid-cols-1 {
57
- grid-template-columns: repeat(1, minmax(0, 1fr));
58
- }
59
- .ar-grid-cols-2 {
60
- grid-template-columns: repeat(2, minmax(0, 1fr));
61
- }
62
- .ar-grid-cols-3 {
63
- grid-template-columns: repeat(3, minmax(0, 1fr));
64
- }
65
- .ar-grid-cols-4 {
66
- grid-template-columns: repeat(4, minmax(0, 1fr));
67
- }
68
- .ar-grid-flow-col {
69
- grid-auto-flow: column;
70
- }
71
- .ar-gap-1 {
72
- gap: var(--ar-s-1);
73
- }
74
- .ar-gap-2 {
75
- gap: var(--ar-s-2);
76
- }
77
- .ar-gap-3 {
78
- gap: var(--ar-s-3);
79
- }
80
- .ar-gap-4 {
81
- gap: var(--ar-s-4);
82
- }
83
- .ar-gap-6 {
84
- gap: var(--ar-s-6);
85
- }
86
- .ar-gap-x-2 {
87
- column-gap: var(--ar-s-2);
88
- }
89
- .ar-gap-x-4 {
90
- column-gap: var(--ar-s-4);
91
- }
92
- .ar-gap-x-8 {
93
- column-gap: var(--ar-s-8);
94
- }
95
- .ar-gap-y-8 {
96
- row-gap: var(--ar-s-8);
97
- }
98
- .ar-gap-y-16 {
99
- row-gap: var(--ar-s-16);
2
+ .ar-flex {
3
+ display: flex;
4
+ }
5
+ .ar-inline-flex {
6
+ display: inline-flex;
7
+ }
8
+ .ar-grid {
9
+ display: grid;
10
+ }
11
+ .ar-block {
12
+ display: block;
13
+ }
14
+ .ar-inline-block {
15
+ display: inline-block;
16
+ }
17
+ .ar-hidden {
18
+ display: none;
19
+ }
20
+ .ar-flex-col {
21
+ flex-direction: column;
22
+ }
23
+ .ar-flex-row {
24
+ flex-direction: row;
25
+ }
26
+ .ar-flex-wrap {
27
+ flex-wrap: wrap;
28
+ }
29
+ .ar-flex-1 {
30
+ flex: 1 1 0%;
31
+ }
32
+ .ar-shrink-0 {
33
+ flex-shrink: 0;
34
+ }
35
+ .ar-items-start {
36
+ align-items: flex-start;
37
+ }
38
+ .ar-items-center {
39
+ align-items: center;
40
+ }
41
+ .ar-items-end {
42
+ align-items: flex-end;
43
+ }
44
+ .ar-justify-start {
45
+ justify-content: flex-start;
46
+ }
47
+ .ar-justify-center {
48
+ justify-content: center;
49
+ }
50
+ .ar-justify-between {
51
+ justify-content: space-between;
52
+ }
53
+ .ar-justify-end {
54
+ justify-content: flex-end;
55
+ }
56
+ .ar-grid-cols-1 {
57
+ grid-template-columns: repeat(1, minmax(0, 1fr));
58
+ }
59
+ .ar-grid-cols-2 {
60
+ grid-template-columns: repeat(2, minmax(0, 1fr));
61
+ }
62
+ .ar-grid-cols-3 {
63
+ grid-template-columns: repeat(3, minmax(0, 1fr));
64
+ }
65
+ .ar-grid-cols-4 {
66
+ grid-template-columns: repeat(4, minmax(0, 1fr));
67
+ }
68
+ .ar-grid-flow-col {
69
+ grid-auto-flow: column;
70
+ }
71
+ .ar-gap-1 {
72
+ gap: var(--ar-s-1);
73
+ }
74
+ .ar-gap-2 {
75
+ gap: var(--ar-s-2);
76
+ }
77
+ .ar-gap-3 {
78
+ gap: var(--ar-s-3);
79
+ }
80
+ .ar-gap-4 {
81
+ gap: var(--ar-s-4);
82
+ }
83
+ .ar-gap-6 {
84
+ gap: var(--ar-s-6);
85
+ }
86
+ .ar-gap-x-2 {
87
+ column-gap: var(--ar-s-2);
88
+ }
89
+ .ar-gap-x-4 {
90
+ column-gap: var(--ar-s-4);
91
+ }
92
+ .ar-gap-x-8 {
93
+ column-gap: var(--ar-s-8);
94
+ }
95
+ .ar-gap-y-8 {
96
+ row-gap: var(--ar-s-8);
97
+ }
98
+ .ar-gap-y-16 {
99
+ row-gap: var(--ar-s-16);
100
100
  }
package/src/utilities/neo-utilities.css CHANGED
@@ -1,95 +1,88 @@
1
1
  /* NEOBRUTALISM UTILITIES */
2
- /* Hard shadows */
3
- .ar-neo-shadow-sm {
4
- box-shadow: var(--ar-neo-shadow-sm);
5
- }
6
- .ar-neo-shadow-md {
7
- box-shadow: var(--ar-neo-shadow-md);
8
- }
9
- .ar-neo-shadow-lg {
10
- box-shadow: var(--ar-neo-shadow-lg);
11
- }
12
- .ar-neo-shadow-xl {
13
- box-shadow: var(--ar-neo-shadow-xl);
14
- }
15
- .ar-neo-shadow-2xl {
16
- box-shadow: var(--ar-neo-shadow-2xl);
17
- }
18
-
19
- /* Thick borders */
20
- .ar-neo-border {
21
- border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
22
- }
23
- .ar-neo-border-2 {
24
- border: 2px solid var(--ar-neo-border-color);
25
- }
26
-
27
- /* Border radius */
28
- .ar-neo-rounded {
29
- border-radius: 0.5rem;
30
- }
31
- .ar-neo-rounded-lg {
32
- border-radius: 0.75rem;
33
- }
34
- .ar-neo-rounded-xl {
35
- border-radius: 1rem;
36
- }
37
-
38
- /* Interactive press effect */
39
- .ar-neo-press {
40
- transition:
41
- box-shadow 0.15s ease-out,
42
- transform 0.15s ease-out;
43
- }
44
- .ar-neo-press:hover {
45
- box-shadow: var(--ar-neo-shadow-sm);
46
- transform: translate(2px, 2px);
47
- }
48
- .ar-neo-press:active {
49
- box-shadow: none;
50
- transform: translate(4px, 4px);
51
- }
52
-
53
- /* Neo color accents */
54
- .ar-neo-primary {
55
- background: var(--ar-neo-primary);
56
- color: var(--ar-neo-primary-content);
57
- }
58
- .ar-neo-secondary {
59
- background: var(--ar-neo-secondary);
60
- color: var(--ar-neo-secondary-content);
61
- }
62
- .ar-neo-accent {
63
- background: var(--ar-neo-accent);
64
- color: var(--ar-neo-accent-content);
65
- }
66
- .ar-neo-danger {
67
- background: var(--ar-neo-error);
68
- color: var(--ar-neo-error-content);
69
- }
70
-
71
- /* Neo text colors */
72
- .ar-neo-text-primary {
73
- color: var(--ar-neo-primary);
74
- }
75
- .ar-neo-text-secondary {
76
- color: var(--ar-neo-secondary);
77
- }
78
- .ar-neo-text-accent {
79
- color: var(--ar-neo-accent);
80
- }
81
- .ar-neo-text-danger {
82
- color: var(--ar-neo-error);
83
- }
84
- .ar-neo-text-dark {
85
- color: var(--ar-neo-base-content);
86
- }
87
-
88
- /* Playful hover animations */
89
- .ar-neo-hover-tilt:hover {
90
- transform: rotate(-1deg);
91
- }
92
- .ar-neo-hover-lift:hover {
93
- transform: translateY(-2px);
94
- box-shadow: var(--ar-neo-shadow-lg);
2
+ .ar-neo-shadow-sm {
3
+ box-shadow: var(--ar-neo-shadow-sm);
4
+ }
5
+ .ar-neo-shadow-md {
6
+ box-shadow: var(--ar-neo-shadow-md);
7
+ }
8
+ .ar-neo-shadow-lg {
9
+ box-shadow: var(--ar-neo-shadow-lg);
10
+ }
11
+ .ar-neo-shadow-xl {
12
+ box-shadow: var(--ar-neo-shadow-xl);
13
+ }
14
+ .ar-neo-shadow-2xl {
15
+ box-shadow: var(--ar-neo-shadow-2xl);
16
+ }
17
+
18
+ .ar-neo-border {
19
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
20
+ }
21
+ .ar-neo-border-2 {
22
+ border: 2px solid var(--ar-neo-border-color);
23
+ }
24
+
25
+ .ar-neo-rounded {
26
+ border-radius: 0.5rem;
27
+ }
28
+ .ar-neo-rounded-lg {
29
+ border-radius: 0.75rem;
30
+ }
31
+ .ar-neo-rounded-xl {
32
+ border-radius: 1rem;
33
+ }
34
+
35
+ .ar-neo-press {
36
+ transition:
37
+ box-shadow 0.15s ease-out,
38
+ transform 0.15s ease-out;
39
+ }
40
+ .ar-neo-press:hover {
41
+ box-shadow: var(--ar-neo-shadow-sm);
42
+ transform: translate(2px, 2px);
43
+ }
44
+ .ar-neo-press:active {
45
+ box-shadow: none;
46
+ transform: translate(4px, 4px);
47
+ }
48
+
49
+ .ar-neo-primary {
50
+ background: var(--ar-neo-primary);
51
+ color: var(--ar-neo-primary-content);
52
+ }
53
+ .ar-neo-secondary {
54
+ background: var(--ar-neo-secondary);
55
+ color: var(--ar-neo-secondary-content);
56
+ }
57
+ .ar-neo-accent {
58
+ background: var(--ar-neo-accent);
59
+ color: var(--ar-neo-accent-content);
60
+ }
61
+ .ar-neo-danger {
62
+ background: var(--ar-neo-error);
63
+ color: var(--ar-neo-error-content);
64
+ }
65
+
66
+ .ar-neo-text-primary {
67
+ color: var(--ar-neo-primary);
68
+ }
69
+ .ar-neo-text-secondary {
70
+ color: var(--ar-neo-secondary);
71
+ }
72
+ .ar-neo-text-accent {
73
+ color: var(--ar-neo-accent);
74
+ }
75
+ .ar-neo-text-danger {
76
+ color: var(--ar-neo-error);
77
+ }
78
+ .ar-neo-text-dark {
79
+ color: var(--ar-neo-base-content);
80
+ }
81
+
82
+ .ar-neo-hover-tilt:hover {
83
+ transform: rotate(-1deg);
84
+ }
85
+ .ar-neo-hover-lift:hover {
86
+ transform: translateY(-2px);
87
+ box-shadow: var(--ar-neo-shadow-lg);
95
88
  }
package/src/utilities/pixel-utilities.css ADDED
@@ -0,0 +1,88 @@
1
+ /* PIXEL-ART UTILITIES */
2
+ .ar-pixel-shadow-sm {
3
+ box-shadow: var(--ar-pixel-shadow-sm);
4
+ }
5
+ .ar-pixel-shadow-md {
6
+ box-shadow: var(--ar-pixel-shadow-md);
7
+ }
8
+ .ar-pixel-shadow-lg {
9
+ box-shadow: var(--ar-pixel-shadow-lg);
10
+ }
11
+ .ar-pixel-shadow-xl {
12
+ box-shadow: var(--ar-pixel-shadow-xl);
13
+ }
14
+ .ar-pixel-shadow-2xl {
15
+ box-shadow: var(--ar-pixel-shadow-2xl);
16
+ }
17
+
18
+ .ar-pixel-border {
19
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
20
+ }
21
+ .ar-pixel-border-2 {
22
+ border: 2px solid var(--ar-pixel-border-color);
23
+ }
24
+
25
+ .ar-pixel-blocky {
26
+ border-radius: 0;
27
+ }
28
+
29
+ .ar-pixel-press {
30
+ transition:
31
+ box-shadow 0.1s step-end,
32
+ transform 0.1s step-end;
33
+ }
34
+ .ar-pixel-press:hover {
35
+ box-shadow: var(--ar-pixel-shadow-sm);
36
+ transform: translate(2px, 2px);
37
+ }
38
+ .ar-pixel-press:active {
39
+ box-shadow: none;
40
+ transform: translate(4px, 4px);
41
+ }
42
+
43
+ .ar-pixel-primary {
44
+ background: var(--ar-pixel-primary);
45
+ color: var(--ar-pixel-primary-content);
46
+ }
47
+ .ar-pixel-secondary {
48
+ background: var(--ar-pixel-secondary);
49
+ color: var(--ar-pixel-secondary-content);
50
+ }
51
+ .ar-pixel-accent {
52
+ background: var(--ar-pixel-accent);
53
+ color: var(--ar-pixel-accent-content);
54
+ }
55
+ .ar-pixel-danger {
56
+ background: var(--ar-pixel-error);
57
+ color: var(--ar-pixel-error-content);
58
+ }
59
+
60
+ .ar-pixel-text-primary {
61
+ color: var(--ar-pixel-primary);
62
+ }
63
+ .ar-pixel-text-secondary {
64
+ color: var(--ar-pixel-secondary);
65
+ }
66
+ .ar-pixel-text-accent {
67
+ color: var(--ar-pixel-accent);
68
+ }
69
+ .ar-pixel-text-danger {
70
+ color: var(--ar-pixel-error);
71
+ }
72
+ .ar-pixel-text-dark {
73
+ color: var(--ar-pixel-base-content);
74
+ }
75
+
76
+ .ar-pixel-image {
77
+ image-rendering: pixelated;
78
+ image-rendering: crisp-edges;
79
+ }
80
+
81
+ .ar-pixel-hover-lift:hover {
82
+ transform: translateY(-2px);
83
+ box-shadow: var(--ar-pixel-shadow-lg);
84
+ }
85
+ .ar-pixel-hover-shift:hover {
86
+ transform: translate(-2px, -2px);
87
+ box-shadow: var(--ar-pixel-shadow-lg);
88
+ }