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/layout.css CHANGED
@@ -1,100 +1,100 @@
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);
100
- }
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);
100
+ }
package/src/utilities/neo-utilities.css CHANGED
@@ -1,95 +1,95 @@
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);
95
- }
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);
95
+ }
package/src/utilities/responsive.css CHANGED
@@ -1,128 +1,128 @@
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
- }
128
- }
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
+ }
128
+ }