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/components/alert.css CHANGED
@@ -1,26 +1,26 @@
1
- /* ALERT */
2
- .ar-alert {
3
- display: flex;
4
- align-items: center;
5
- gap: var(--ar-s-3);
6
- border-radius: var(--ar-radius-box);
7
- padding: var(--ar-s-4);
8
- background: var(--ar-base-200);
9
- color: var(--ar-base-content);
10
- }
11
- .ar-alert-info {
12
- background: var(--ar-info);
13
- color: var(--ar-info-content);
14
- }
15
- .ar-alert-success {
16
- background: var(--ar-success);
17
- color: var(--ar-success-content);
18
- }
19
- .ar-alert-warning {
20
- background: var(--ar-warning);
21
- color: var(--ar-warning-content);
22
- }
23
- .ar-alert-error {
24
- background: var(--ar-error);
25
- color: var(--ar-error-content);
26
- }
1
+ /* ALERT */
2
+ .ar-alert {
3
+ display: flex;
4
+ align-items: center;
5
+ gap: var(--ar-s-3);
6
+ border-radius: var(--ar-radius-box);
7
+ padding: var(--ar-s-4);
8
+ background: var(--ar-base-200);
9
+ color: var(--ar-base-content);
10
+ }
11
+ .ar-alert-info {
12
+ background: var(--ar-info);
13
+ color: var(--ar-info-content);
14
+ }
15
+ .ar-alert-success {
16
+ background: var(--ar-success);
17
+ color: var(--ar-success-content);
18
+ }
19
+ .ar-alert-warning {
20
+ background: var(--ar-warning);
21
+ color: var(--ar-warning-content);
22
+ }
23
+ .ar-alert-error {
24
+ background: var(--ar-error);
25
+ color: var(--ar-error-content);
26
+ }
package/src/components/badge.css CHANGED
@@ -1,33 +1,33 @@
1
- /* BADGE */
2
- .ar-badge {
3
- display: inline-flex;
4
- align-items: center;
5
- gap: var(--ar-s-1);
6
- border-radius: var(--ar-radius-selector);
7
- padding: 0.125rem 0.625rem;
8
- font-size: 0.75rem;
9
- font-weight: 600;
10
- line-height: 1.5;
11
- background: var(--ar-base-200);
12
- color: var(--ar-base-content);
13
- }
14
- .ar-badge-outline {
15
- background: transparent;
16
- border: var(--ar-border-width) solid var(--ar-base-content);
17
- }
18
- .ar-badge-primary {
19
- background: var(--ar-primary);
20
- color: var(--ar-primary-content);
21
- }
22
- .ar-badge-neutral {
23
- background: var(--ar-neutral);
24
- color: var(--ar-neutral-content);
25
- }
26
- .ar-badge-sm {
27
- font-size: 0.625rem;
28
- padding: 0 0.5rem;
29
- }
30
- .ar-badge-xs {
31
- font-size: 0.55rem;
32
- padding: 0 0.375rem;
33
- }
1
+ /* BADGE */
2
+ .ar-badge {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ gap: var(--ar-s-1);
6
+ border-radius: var(--ar-radius-selector);
7
+ padding: 0.125rem 0.625rem;
8
+ font-size: 0.75rem;
9
+ font-weight: 600;
10
+ line-height: 1.5;
11
+ background: var(--ar-base-200);
12
+ color: var(--ar-base-content);
13
+ }
14
+ .ar-badge-outline {
15
+ background: transparent;
16
+ border: var(--ar-border-width) solid var(--ar-base-content);
17
+ }
18
+ .ar-badge-primary {
19
+ background: var(--ar-primary);
20
+ color: var(--ar-primary-content);
21
+ }
22
+ .ar-badge-neutral {
23
+ background: var(--ar-neutral);
24
+ color: var(--ar-neutral-content);
25
+ }
26
+ .ar-badge-sm {
27
+ font-size: 0.625rem;
28
+ padding: 0 0.5rem;
29
+ }
30
+ .ar-badge-xs {
31
+ font-size: 0.55rem;
32
+ padding: 0 0.375rem;
33
+ }
package/src/components/breadcrumb.css CHANGED
@@ -1,33 +1,33 @@
1
- /* BREADCRUMB */
2
- .ar-breadcrumb {
3
- display: flex;
4
- flex-wrap: wrap;
5
- align-items: center;
6
- gap: var(--ar-s-1);
7
- list-style: none;
8
- margin: 0;
9
- padding: 0;
10
- font-size: 0.875rem;
11
- }
12
- .ar-breadcrumb-item {
13
- display: flex;
14
- align-items: center;
15
- gap: var(--ar-s-1);
16
- }
17
- .ar-breadcrumb-item a {
18
- color: var(--ar-gray-600);
19
- text-decoration: none;
20
- transition: color 0.2s ease;
21
- }
22
- .ar-breadcrumb-item a:hover {
23
- color: var(--ar-primary);
24
- }
25
- .ar-breadcrumb-item:not(:last-child)::after {
26
- content: "/";
27
- color: var(--ar-gray-400);
28
- margin-left: var(--ar-s-1);
29
- }
30
- .ar-breadcrumb-item:last-child {
31
- color: var(--ar-base-content);
32
- font-weight: 600;
33
- }
1
+ /* BREADCRUMB */
2
+ .ar-breadcrumb {
3
+ display: flex;
4
+ flex-wrap: wrap;
5
+ align-items: center;
6
+ gap: var(--ar-s-1);
7
+ list-style: none;
8
+ margin: 0;
9
+ padding: 0;
10
+ font-size: 0.875rem;
11
+ }
12
+ .ar-breadcrumb-item {
13
+ display: flex;
14
+ align-items: center;
15
+ gap: var(--ar-s-1);
16
+ }
17
+ .ar-breadcrumb-item a {
18
+ color: var(--ar-gray-600);
19
+ text-decoration: none;
20
+ transition: color 0.2s ease;
21
+ }
22
+ .ar-breadcrumb-item a:hover {
23
+ color: var(--ar-primary);
24
+ }
25
+ .ar-breadcrumb-item:not(:last-child)::after {
26
+ content: "/";
27
+ color: var(--ar-gray-400);
28
+ margin-left: var(--ar-s-1);
29
+ }
30
+ .ar-breadcrumb-item:last-child {
31
+ color: var(--ar-base-content);
32
+ font-weight: 600;
33
+ }
package/src/components/button.css CHANGED
@@ -1,103 +1,103 @@
1
- /* BUTTONS */
2
- .ar-btn {
3
- display: inline-flex;
4
- align-items: center;
5
- justify-content: center;
6
- gap: var(--ar-s-2);
7
- border: var(--ar-border-width) solid transparent;
8
- border-radius: var(--ar-radius-field);
9
- padding: 0.5rem 1rem;
10
- font-family: var(--ar-font-sans);
11
- font-size: 0.875rem;
12
- font-weight: 600;
13
- line-height: 1.25;
14
- cursor: pointer;
15
- background: var(--ar-base-200);
16
- color: var(--ar-base-content);
17
- text-decoration: none;
18
- transition: all 0.2s ease-out;
19
- }
20
- .ar-btn:hover {
21
- background: var(--ar-base-300);
22
- }
23
- .ar-btn:active {
24
- transform: scale(0.97);
25
- }
26
- .ar-btn-primary {
27
- background: var(--ar-primary);
28
- color: var(--ar-primary-content);
29
- }
30
- .ar-btn-primary:hover {
31
- background: var(--ar-neutral);
32
- }
33
- .ar-btn-outline {
34
- background: transparent;
35
- border-color: var(--ar-base-content);
36
- color: var(--ar-base-content);
37
- }
38
- .ar-btn-outline:hover {
39
- background: var(--ar-base-content);
40
- color: var(--ar-base-100);
41
- }
42
- .ar-btn-ghost {
43
- background: transparent;
44
- color: var(--ar-base-content);
45
- }
46
- .ar-btn-ghost:hover {
47
- background: var(--ar-base-200);
48
- }
49
- .ar-btn-neutral {
50
- background: var(--ar-neutral);
51
- color: var(--ar-neutral-content);
52
- }
53
- .ar-btn-neutral:hover {
54
- opacity: 0.85;
55
- }
56
- .ar-btn-base-200 {
57
- background: var(--ar-base-200);
58
- color: var(--ar-base-content);
59
- }
60
- .ar-btn-circle {
61
- border-radius: var(--ar-radius-pill);
62
- padding: 0.5rem;
63
- width: 2.5rem;
64
- height: 2.5rem;
65
- }
66
- .ar-btn-xs {
67
- font-size: 0.7rem;
68
- padding: 0.25rem 0.5rem;
69
- }
70
- .ar-btn-sm {
71
- font-size: 0.8rem;
72
- padding: 0.375rem 0.75rem;
73
- }
74
- .ar-btn-lg {
75
- font-size: 1.125rem;
76
- padding: 0.75rem 1.5rem;
77
- }
78
- .ar-btn-block {
79
- display: flex;
80
- width: 100%;
81
- }
82
- .ar-btn-disabled,
83
- .ar-btn[disabled] {
84
- opacity: 0.5;
85
- pointer-events: none;
86
- }
87
- .ar-btn-loading {
88
- pointer-events: none;
89
- }
90
- .ar-btn-loading::after {
91
- content: "";
92
- width: 1rem;
93
- height: 1rem;
94
- border: 2px solid currentColor;
95
- border-right-color: transparent;
96
- border-radius: var(--ar-radius-pill);
97
- animation: ar-spin 0.7s linear infinite;
98
- }
99
- @keyframes ar-spin {
100
- to {
101
- transform: rotate(360deg);
102
- }
103
- }
1
+ /* BUTTONS */
2
+ .ar-btn {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ gap: var(--ar-s-2);
7
+ border: var(--ar-border-width) solid transparent;
8
+ border-radius: var(--ar-radius-field);
9
+ padding: 0.5rem 1rem;
10
+ font-family: var(--ar-font-sans);
11
+ font-size: 0.875rem;
12
+ font-weight: 600;
13
+ line-height: 1.25;
14
+ cursor: pointer;
15
+ background: var(--ar-base-200);
16
+ color: var(--ar-base-content);
17
+ text-decoration: none;
18
+ transition: all 0.2s ease-out;
19
+ }
20
+ .ar-btn:hover {
21
+ background: var(--ar-base-300);
22
+ }
23
+ .ar-btn:active {
24
+ transform: scale(0.97);
25
+ }
26
+ .ar-btn-primary {
27
+ background: var(--ar-primary);
28
+ color: var(--ar-primary-content);
29
+ }
30
+ .ar-btn-primary:hover {
31
+ background: var(--ar-neutral);
32
+ }
33
+ .ar-btn-outline {
34
+ background: transparent;
35
+ border-color: var(--ar-base-content);
36
+ color: var(--ar-base-content);
37
+ }
38
+ .ar-btn-outline:hover {
39
+ background: var(--ar-base-content);
40
+ color: var(--ar-base-100);
41
+ }
42
+ .ar-btn-ghost {
43
+ background: transparent;
44
+ color: var(--ar-base-content);
45
+ }
46
+ .ar-btn-ghost:hover {
47
+ background: var(--ar-base-200);
48
+ }
49
+ .ar-btn-neutral {
50
+ background: var(--ar-neutral);
51
+ color: var(--ar-neutral-content);
52
+ }
53
+ .ar-btn-neutral:hover {
54
+ opacity: 0.85;
55
+ }
56
+ .ar-btn-base-200 {
57
+ background: var(--ar-base-200);
58
+ color: var(--ar-base-content);
59
+ }
60
+ .ar-btn-circle {
61
+ border-radius: var(--ar-radius-pill);
62
+ padding: 0.5rem;
63
+ width: 2.5rem;
64
+ height: 2.5rem;
65
+ }
66
+ .ar-btn-xs {
67
+ font-size: 0.7rem;
68
+ padding: 0.25rem 0.5rem;
69
+ }
70
+ .ar-btn-sm {
71
+ font-size: 0.8rem;
72
+ padding: 0.375rem 0.75rem;
73
+ }
74
+ .ar-btn-lg {
75
+ font-size: 1.125rem;
76
+ padding: 0.75rem 1.5rem;
77
+ }
78
+ .ar-btn-block {
79
+ display: flex;
80
+ width: 100%;
81
+ }
82
+ .ar-btn-disabled,
83
+ .ar-btn[disabled] {
84
+ opacity: 0.5;
85
+ pointer-events: none;
86
+ }
87
+ .ar-btn-loading {
88
+ pointer-events: none;
89
+ }
90
+ .ar-btn-loading::after {
91
+ content: "";
92
+ width: 1rem;
93
+ height: 1rem;
94
+ border: 2px solid currentColor;
95
+ border-right-color: transparent;
96
+ border-radius: var(--ar-radius-pill);
97
+ animation: ar-spin 0.7s linear infinite;
98
+ }
99
+ @keyframes ar-spin {
100
+ to {
101
+ transform: rotate(360deg);
102
+ }
103
+ }
package/src/components/card.css CHANGED
@@ -1,24 +1,24 @@
1
- /* CARD */
2
- .ar-card {
3
- display: flex;
4
- flex-direction: column;
5
- background: var(--ar-base-100);
6
- border-radius: var(--ar-radius-box);
7
- box-shadow: var(--ar-shadow-md);
8
- overflow: hidden;
9
- }
10
- .ar-card-body {
11
- display: flex;
12
- flex-direction: column;
13
- gap: var(--ar-s-2);
14
- padding: var(--ar-s-4);
15
- }
16
- .ar-card-title {
17
- font-size: 1.125rem;
18
- font-weight: 700;
19
- line-height: 1.3;
20
- }
21
- .ar-card-figure img {
22
- width: 100%;
23
- object-fit: cover;
24
- }
1
+ /* CARD */
2
+ .ar-card {
3
+ display: flex;
4
+ flex-direction: column;
5
+ background: var(--ar-base-100);
6
+ border-radius: var(--ar-radius-box);
7
+ box-shadow: var(--ar-shadow-md);
8
+ overflow: hidden;
9
+ }
10
+ .ar-card-body {
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: var(--ar-s-2);
14
+ padding: var(--ar-s-4);
15
+ }
16
+ .ar-card-title {
17
+ font-size: 1.125rem;
18
+ font-weight: 700;
19
+ line-height: 1.3;
20
+ }
21
+ .ar-card-figure img {
22
+ width: 100%;
23
+ object-fit: cover;
24
+ }
package/src/components/carousel.css CHANGED
@@ -1,14 +1,14 @@
1
- /* CAROUSEL */
2
- .ar-carousel {
3
- display: flex;
4
- overflow-x: auto;
5
- scroll-snap-type: x mandatory;
6
- }
7
- .ar-carousel-item {
8
- flex: none;
9
- width: 100%;
10
- scroll-snap-align: start;
11
- }
12
- .ar-carousel-item img {
13
- width: 100%;
14
- }
1
+ /* CAROUSEL */
2
+ .ar-carousel {
3
+ display: flex;
4
+ overflow-x: auto;
5
+ scroll-snap-type: x mandatory;
6
+ }
7
+ .ar-carousel-item {
8
+ flex: none;
9
+ width: 100%;
10
+ scroll-snap-align: start;
11
+ }
12
+ .ar-carousel-item img {
13
+ width: 100%;
14
+ }
package/src/components/chat.css CHANGED
@@ -1,78 +1,78 @@
1
- /* CHAT BUBBLE */
2
- .ar-chat {
3
- display: flex;
4
- flex-direction: column;
5
- gap: var(--ar-s-3);
6
- max-width: 48rem;
7
- }
8
- .ar-chat-bubble {
9
- position: relative;
10
- padding: var(--ar-s-3) var(--ar-s-4);
11
- border-radius: var(--ar-radius-box);
12
- background: var(--ar-base-200);
13
- color: var(--ar-base-content);
14
- max-width: 80%;
15
- line-height: 1.5;
16
- word-wrap: break-word;
17
- }
18
- .ar-chat-start {
19
- align-self: flex-start;
20
- }
21
- .ar-chat-end {
22
- align-self: flex-end;
23
- }
24
- .ar-chat-start .ar-chat-bubble {
25
- border-bottom-left-radius: 0;
26
- }
27
- .ar-chat-end .ar-chat-bubble {
28
- background: var(--ar-primary);
29
- color: var(--ar-primary-content);
30
- border-bottom-right-radius: 0;
31
- }
32
- .ar-chat-avatar {
33
- width: 2.5rem;
34
- height: 2.5rem;
35
- border-radius: var(--ar-radius-pill);
36
- overflow: hidden;
37
- flex-shrink: 0;
38
- }
39
- .ar-chat-avatar img {
40
- width: 100%;
41
- height: 100%;
42
- object-fit: cover;
43
- }
44
- .ar-chat-start .ar-chat-header,
45
- .ar-chat-end .ar-chat-header {
46
- display: flex;
47
- align-items: center;
48
- gap: var(--ar-s-2);
49
- margin-bottom: var(--ar-s-1);
50
- font-size: 0.75rem;
51
- font-weight: 600;
52
- color: var(--ar-gray-600);
53
- }
54
- .ar-chat-end .ar-chat-header {
55
- justify-content: flex-end;
56
- }
57
- .ar-chat-footer {
58
- font-size: 0.7rem;
59
- color: var(--ar-gray-500);
60
- margin-top: var(--ar-s-1);
61
- }
62
- .ar-chat-start .ar-chat-footer {
63
- text-align: left;
64
- }
65
- .ar-chat-end .ar-chat-footer {
66
- text-align: right;
67
- }
68
- .ar-chat-sender {
69
- display: flex;
70
- align-items: flex-end;
71
- gap: var(--ar-s-2);
72
- }
73
- .ar-chat-receiver {
74
- display: flex;
75
- align-items: flex-end;
76
- gap: var(--ar-s-2);
77
- flex-direction: row-reverse;
78
- }
1
+ /* CHAT BUBBLE */
2
+ .ar-chat {
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: var(--ar-s-3);
6
+ max-width: 48rem;
7
+ }
8
+ .ar-chat-bubble {
9
+ position: relative;
10
+ padding: var(--ar-s-3) var(--ar-s-4);
11
+ border-radius: var(--ar-radius-box);
12
+ background: var(--ar-base-200);
13
+ color: var(--ar-base-content);
14
+ max-width: 80%;
15
+ line-height: 1.5;
16
+ word-wrap: break-word;
17
+ }
18
+ .ar-chat-start {
19
+ align-self: flex-start;
20
+ }
21
+ .ar-chat-end {
22
+ align-self: flex-end;
23
+ }
24
+ .ar-chat-start .ar-chat-bubble {
25
+ border-bottom-left-radius: 0;
26
+ }
27
+ .ar-chat-end .ar-chat-bubble {
28
+ background: var(--ar-primary);
29
+ color: var(--ar-primary-content);
30
+ border-bottom-right-radius: 0;
31
+ }
32
+ .ar-chat-avatar {
33
+ width: 2.5rem;
34
+ height: 2.5rem;
35
+ border-radius: var(--ar-radius-pill);
36
+ overflow: hidden;
37
+ flex-shrink: 0;
38
+ }
39
+ .ar-chat-avatar img {
40
+ width: 100%;
41
+ height: 100%;
42
+ object-fit: cover;
43
+ }
44
+ .ar-chat-start .ar-chat-header,
45
+ .ar-chat-end .ar-chat-header {
46
+ display: flex;
47
+ align-items: center;
48
+ gap: var(--ar-s-2);
49
+ margin-bottom: var(--ar-s-1);
50
+ font-size: 0.75rem;
51
+ font-weight: 600;
52
+ color: var(--ar-gray-600);
53
+ }
54
+ .ar-chat-end .ar-chat-header {
55
+ justify-content: flex-end;
56
+ }
57
+ .ar-chat-footer {
58
+ font-size: 0.7rem;
59
+ color: var(--ar-gray-500);
60
+ margin-top: var(--ar-s-1);
61
+ }
62
+ .ar-chat-start .ar-chat-footer {
63
+ text-align: left;
64
+ }
65
+ .ar-chat-end .ar-chat-footer {
66
+ text-align: right;
67
+ }
68
+ .ar-chat-sender {
69
+ display: flex;
70
+ align-items: flex-end;
71
+ gap: var(--ar-s-2);
72
+ }
73
+ .ar-chat-receiver {
74
+ display: flex;
75
+ align-items: flex-end;
76
+ gap: var(--ar-s-2);
77
+ flex-direction: row-reverse;
78
+ }