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/rating.css CHANGED
@@ -1,37 +1,37 @@
1
- /* RATING */
2
- .ar-rating {
3
- display: inline-flex;
4
- gap: var(--ar-s-1);
5
- direction: rtl;
6
- }
7
- .ar-rating input {
8
- display: none;
9
- }
10
- .ar-rating label {
11
- cursor: pointer;
12
- color: var(--ar-gray-300);
13
- transition:
14
- color 0.15s ease,
15
- transform 0.15s ease;
16
- }
17
- .ar-rating label:hover,
18
- .ar-rating label:hover ~ label,
19
- .ar-rating input:checked ~ label {
20
- color: var(--ar-warning);
21
- }
22
- .ar-rating label:hover {
23
- transform: scale(1.15);
24
- }
25
- .ar-rating svg {
26
- width: 1.5rem;
27
- height: 1.5rem;
28
- fill: currentColor;
29
- }
30
- .ar-rating-readonly label {
31
- cursor: default;
32
- }
33
- .ar-rating-readonly label:hover,
34
- .ar-rating-readonly label:hover ~ label,
35
- .ar-rating-readonly input:checked ~ label {
36
- transform: none;
37
- }
1
+ /* RATING */
2
+ .ar-rating {
3
+ display: inline-flex;
4
+ gap: var(--ar-s-1);
5
+ direction: rtl;
6
+ }
7
+ .ar-rating input {
8
+ display: none;
9
+ }
10
+ .ar-rating label {
11
+ cursor: pointer;
12
+ color: var(--ar-gray-300);
13
+ transition:
14
+ color 0.15s ease,
15
+ transform 0.15s ease;
16
+ }
17
+ .ar-rating label:hover,
18
+ .ar-rating label:hover ~ label,
19
+ .ar-rating input:checked ~ label {
20
+ color: var(--ar-warning);
21
+ }
22
+ .ar-rating label:hover {
23
+ transform: scale(1.15);
24
+ }
25
+ .ar-rating svg {
26
+ width: 1.5rem;
27
+ height: 1.5rem;
28
+ fill: currentColor;
29
+ }
30
+ .ar-rating-readonly label {
31
+ cursor: default;
32
+ }
33
+ .ar-rating-readonly label:hover,
34
+ .ar-rating-readonly label:hover ~ label,
35
+ .ar-rating-readonly input:checked ~ label {
36
+ transform: none;
37
+ }
package/src/components/scroll-top.css CHANGED
@@ -1,36 +1,36 @@
1
- /* SCROLL TO TOP */
2
- .ar-scroll-top {
3
- position: fixed;
4
- bottom: var(--ar-s-6);
5
- right: var(--ar-s-6);
6
- z-index: 40;
7
- display: flex;
8
- align-items: center;
9
- justify-content: center;
10
- width: 2.75rem;
11
- height: 2.75rem;
12
- border-radius: var(--ar-radius-pill);
13
- background: var(--ar-primary);
14
- color: var(--ar-primary-content);
15
- border: 0;
16
- cursor: pointer;
17
- box-shadow: var(--ar-shadow-lg);
18
- opacity: 0;
19
- visibility: hidden;
20
- transform: translateY(0.5rem);
21
- transition: all 0.3s ease;
22
- }
23
- .ar-scroll-top-visible {
24
- opacity: 1;
25
- visibility: visible;
26
- transform: translateY(0);
27
- }
28
- .ar-scroll-top:hover {
29
- background: var(--ar-neutral);
30
- color: var(--ar-neutral-content);
31
- transform: translateY(-0.125rem);
32
- }
33
- .ar-scroll-top svg {
34
- width: 1.25rem;
35
- height: 1.25rem;
36
- }
1
+ /* SCROLL TO TOP */
2
+ .ar-scroll-top {
3
+ position: fixed;
4
+ bottom: var(--ar-s-6);
5
+ right: var(--ar-s-6);
6
+ z-index: 40;
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: center;
10
+ width: 2.75rem;
11
+ height: 2.75rem;
12
+ border-radius: var(--ar-radius-pill);
13
+ background: var(--ar-primary);
14
+ color: var(--ar-primary-content);
15
+ border: 0;
16
+ cursor: pointer;
17
+ box-shadow: var(--ar-shadow-lg);
18
+ opacity: 0;
19
+ visibility: hidden;
20
+ transform: translateY(0.5rem);
21
+ transition: all 0.3s ease;
22
+ }
23
+ .ar-scroll-top-visible {
24
+ opacity: 1;
25
+ visibility: visible;
26
+ transform: translateY(0);
27
+ }
28
+ .ar-scroll-top:hover {
29
+ background: var(--ar-neutral);
30
+ color: var(--ar-neutral-content);
31
+ transform: translateY(-0.125rem);
32
+ }
33
+ .ar-scroll-top svg {
34
+ width: 1.25rem;
35
+ height: 1.25rem;
36
+ }
package/src/components/skeleton.css CHANGED
@@ -1,54 +1,54 @@
1
- /* SKELETON LOADER */
2
- .ar-skeleton {
3
- background: var(--ar-base-300);
4
- border-radius: var(--ar-radius-field);
5
- position: relative;
6
- overflow: hidden;
7
- }
8
- .ar-skeleton::after {
9
- content: "";
10
- position: absolute;
11
- inset: 0;
12
- background: linear-gradient(
13
- 90deg,
14
- transparent 0%,
15
- oklch(100% 0 0 / 0.08) 50%,
16
- transparent 100%
17
- );
18
- animation: ar-skeleton-shimmer 1.5s ease-in-out infinite;
19
- }
20
- .ar-skeleton-text {
21
- height: 1rem;
22
- margin-bottom: var(--ar-s-2);
23
- width: 100%;
24
- }
25
- .ar-skeleton-text:last-child {
26
- width: 70%;
27
- }
28
- .ar-skeleton-title {
29
- height: 1.5rem;
30
- width: 60%;
31
- margin-bottom: var(--ar-s-3);
32
- }
33
- .ar-skeleton-avatar {
34
- width: 3rem;
35
- height: 3rem;
36
- border-radius: var(--ar-radius-pill);
37
- }
38
- .ar-skeleton-thumbnail {
39
- width: 100%;
40
- aspect-ratio: 16 / 9;
41
- }
42
- .ar-skeleton-btn {
43
- height: 2.5rem;
44
- width: 8rem;
45
- border-radius: var(--ar-radius-field);
46
- }
47
- @keyframes ar-skeleton-shimmer {
48
- 0% {
49
- transform: translateX(-100%);
50
- }
51
- 100% {
52
- transform: translateX(100%);
53
- }
54
- }
1
+ /* SKELETON LOADER */
2
+ .ar-skeleton {
3
+ background: var(--ar-base-300);
4
+ border-radius: var(--ar-radius-field);
5
+ position: relative;
6
+ overflow: hidden;
7
+ }
8
+ .ar-skeleton::after {
9
+ content: "";
10
+ position: absolute;
11
+ inset: 0;
12
+ background: linear-gradient(
13
+ 90deg,
14
+ transparent 0%,
15
+ oklch(100% 0 0 / 0.08) 50%,
16
+ transparent 100%
17
+ );
18
+ animation: ar-skeleton-shimmer 1.5s ease-in-out infinite;
19
+ }
20
+ .ar-skeleton-text {
21
+ height: 1rem;
22
+ margin-bottom: var(--ar-s-2);
23
+ width: 100%;
24
+ }
25
+ .ar-skeleton-text:last-child {
26
+ width: 70%;
27
+ }
28
+ .ar-skeleton-title {
29
+ height: 1.5rem;
30
+ width: 60%;
31
+ margin-bottom: var(--ar-s-3);
32
+ }
33
+ .ar-skeleton-avatar {
34
+ width: 3rem;
35
+ height: 3rem;
36
+ border-radius: var(--ar-radius-pill);
37
+ }
38
+ .ar-skeleton-thumbnail {
39
+ width: 100%;
40
+ aspect-ratio: 16 / 9;
41
+ }
42
+ .ar-skeleton-btn {
43
+ height: 2.5rem;
44
+ width: 8rem;
45
+ border-radius: var(--ar-radius-field);
46
+ }
47
+ @keyframes ar-skeleton-shimmer {
48
+ 0% {
49
+ transform: translateX(-100%);
50
+ }
51
+ 100% {
52
+ transform: translateX(100%);
53
+ }
54
+ }
package/src/components/swap.css CHANGED
@@ -1,45 +1,45 @@
1
- /* SWAP (theme toggle) */
2
- .ar-swap {
3
- position: relative;
4
- display: inline-flex;
5
- align-items: center;
6
- justify-content: center;
7
- width: 2rem;
8
- height: 2rem;
9
- cursor: pointer;
10
- }
11
- .ar-swap > .ar-swap-on,
12
- .ar-swap > .ar-swap-off {
13
- position: absolute;
14
- transition:
15
- opacity 0.3s ease,
16
- transform 0.3s ease;
17
- }
18
- .ar-swap > .ar-swap-on {
19
- opacity: 0;
20
- }
21
- .ar-swap input:checked ~ .ar-swap-on,
22
- .ar-swap.ar-swap-active > .ar-swap-on {
23
- opacity: 1;
24
- }
25
- .ar-swap input:checked ~ .ar-swap-off,
26
- .ar-swap.ar-swap-active > .ar-swap-off {
27
- opacity: 0;
28
- }
29
- .ar-swap input {
30
- position: absolute;
31
- opacity: 0;
32
- pointer-events: none;
33
- }
34
- .ar-swap-rotate > .ar-swap-on,
35
- .ar-swap-rotate > .ar-swap-off {
36
- transform: rotate(0deg);
37
- }
38
- .ar-swap-rotate input:checked ~ .ar-swap-on,
39
- .ar-swap-rotate.ar-swap-active > .ar-swap-on {
40
- transform: rotate(360deg);
41
- }
42
- .ar-swap-rotate input:checked ~ .ar-swap-off,
43
- .ar-swap-rotate.ar-swap-active > .ar-swap-off {
44
- transform: rotate(-360deg);
45
- }
1
+ /* SWAP (theme toggle) */
2
+ .ar-swap {
3
+ position: relative;
4
+ display: inline-flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ width: 2rem;
8
+ height: 2rem;
9
+ cursor: pointer;
10
+ }
11
+ .ar-swap > .ar-swap-on,
12
+ .ar-swap > .ar-swap-off {
13
+ position: absolute;
14
+ transition:
15
+ opacity 0.3s ease,
16
+ transform 0.3s ease;
17
+ }
18
+ .ar-swap > .ar-swap-on {
19
+ opacity: 0;
20
+ }
21
+ .ar-swap input:checked ~ .ar-swap-on,
22
+ .ar-swap.ar-swap-active > .ar-swap-on {
23
+ opacity: 1;
24
+ }
25
+ .ar-swap input:checked ~ .ar-swap-off,
26
+ .ar-swap.ar-swap-active > .ar-swap-off {
27
+ opacity: 0;
28
+ }
29
+ .ar-swap input {
30
+ position: absolute;
31
+ opacity: 0;
32
+ pointer-events: none;
33
+ }
34
+ .ar-swap-rotate > .ar-swap-on,
35
+ .ar-swap-rotate > .ar-swap-off {
36
+ transform: rotate(0deg);
37
+ }
38
+ .ar-swap-rotate input:checked ~ .ar-swap-on,
39
+ .ar-swap-rotate.ar-swap-active > .ar-swap-on {
40
+ transform: rotate(360deg);
41
+ }
42
+ .ar-swap-rotate input:checked ~ .ar-swap-off,
43
+ .ar-swap-rotate.ar-swap-active > .ar-swap-off {
44
+ transform: rotate(-360deg);
45
+ }
package/src/components/table.css CHANGED
@@ -1,22 +1,22 @@
1
- /* TABLE */
2
- .ar-table {
3
- width: 100%;
4
- border-collapse: collapse;
5
- font-size: 0.875rem;
6
- }
7
- .ar-table th,
8
- .ar-table td {
9
- border-bottom: var(--ar-border-width) solid var(--ar-base-300);
10
- padding: 0.625rem 0.75rem;
11
- text-align: left;
12
- }
13
- .ar-table th {
14
- font-weight: 700;
15
- background: var(--ar-base-200);
16
- }
17
- .ar-table-striped tbody tr:nth-child(odd) {
18
- background: var(--ar-base-200);
19
- }
20
- .ar-table-hover tbody tr:hover {
21
- background: var(--ar-base-300);
22
- }
1
+ /* TABLE */
2
+ .ar-table {
3
+ width: 100%;
4
+ border-collapse: collapse;
5
+ font-size: 0.875rem;
6
+ }
7
+ .ar-table th,
8
+ .ar-table td {
9
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
10
+ padding: 0.625rem 0.75rem;
11
+ text-align: left;
12
+ }
13
+ .ar-table th {
14
+ font-weight: 700;
15
+ background: var(--ar-base-200);
16
+ }
17
+ .ar-table-striped tbody tr:nth-child(odd) {
18
+ background: var(--ar-base-200);
19
+ }
20
+ .ar-table-hover tbody tr:hover {
21
+ background: var(--ar-base-300);
22
+ }
package/src/components/tabs.css CHANGED
@@ -1,24 +1,24 @@
1
- /* TABS */
2
- .ar-tabs {
3
- display: flex;
4
- flex-wrap: wrap;
5
- gap: var(--ar-s-1);
6
- border-bottom: var(--ar-border-width) solid var(--ar-base-300);
7
- }
8
- .ar-tab {
9
- padding: 0.625rem 1rem;
10
- cursor: pointer;
11
- border: 0;
12
- background: transparent;
13
- color: var(--ar-gray-600);
14
- border-bottom: 2px solid transparent;
15
- font-family: var(--ar-font-sans);
16
- font-weight: 600;
17
- }
18
- .ar-tab:hover {
19
- color: var(--ar-base-content);
20
- }
21
- .ar-tab-active {
22
- color: var(--ar-primary);
23
- border-bottom-color: var(--ar-primary);
24
- }
1
+ /* TABS */
2
+ .ar-tabs {
3
+ display: flex;
4
+ flex-wrap: wrap;
5
+ gap: var(--ar-s-1);
6
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
7
+ }
8
+ .ar-tab {
9
+ padding: 0.625rem 1rem;
10
+ cursor: pointer;
11
+ border: 0;
12
+ background: transparent;
13
+ color: var(--ar-gray-600);
14
+ border-bottom: 2px solid transparent;
15
+ font-family: var(--ar-font-sans);
16
+ font-weight: 600;
17
+ }
18
+ .ar-tab:hover {
19
+ color: var(--ar-base-content);
20
+ }
21
+ .ar-tab-active {
22
+ color: var(--ar-primary);
23
+ border-bottom-color: var(--ar-primary);
24
+ }
package/src/components/tag.css CHANGED
@@ -1,101 +1,101 @@
1
- /* TAG / CHIP */
2
- .ar-tag {
3
- display: inline-flex;
4
- align-items: center;
5
- gap: var(--ar-s-1);
6
- padding: 0.25rem 0.75rem;
7
- border-radius: var(--ar-radius-pill);
8
- background: var(--ar-base-200);
9
- color: var(--ar-base-content);
10
- font-size: 0.8125rem;
11
- font-weight: 500;
12
- line-height: 1.4;
13
- white-space: nowrap;
14
- }
15
- .ar-tag-primary {
16
- background: var(--ar-primary);
17
- color: var(--ar-primary-content);
18
- }
19
- .ar-tag-secondary {
20
- background: var(--ar-secondary);
21
- color: var(--ar-secondary-content);
22
- }
23
- .ar-tag-accent {
24
- background: var(--ar-accent);
25
- color: var(--ar-accent-content);
26
- }
27
- .ar-tag-neutral {
28
- background: var(--ar-neutral);
29
- color: var(--ar-neutral-content);
30
- }
31
- .ar-tag-info {
32
- background: var(--ar-info);
33
- color: var(--ar-info-content);
34
- }
35
- .ar-tag-success {
36
- background: var(--ar-success);
37
- color: var(--ar-success-content);
38
- }
39
- .ar-tag-warning {
40
- background: var(--ar-warning);
41
- color: var(--ar-warning-content);
42
- }
43
- .ar-tag-error {
44
- background: var(--ar-error);
45
- color: var(--ar-error-content);
46
- }
47
- .ar-tag-outline {
48
- background: transparent;
49
- border: var(--ar-border-width) solid currentColor;
50
- }
51
- .ar-tag-outline.ar-tag-primary {
52
- color: var(--ar-primary);
53
- }
54
- .ar-tag-outline.ar-tag-secondary {
55
- color: var(--ar-secondary);
56
- }
57
- .ar-tag-outline.ar-tag-accent {
58
- color: var(--ar-accent);
59
- }
60
- .ar-tag-outline.ar-tag-neutral {
61
- color: var(--ar-neutral);
62
- }
63
- .ar-tag-outline.ar-tag-info {
64
- color: var(--ar-info);
65
- }
66
- .ar-tag-outline.ar-tag-success {
67
- color: var(--ar-success);
68
- }
69
- .ar-tag-outline.ar-tag-warning {
70
- color: var(--ar-warning);
71
- }
72
- .ar-tag-outline.ar-tag-error {
73
- color: var(--ar-error);
74
- }
75
- .ar-tag-lg {
76
- padding: 0.375rem 1rem;
77
- font-size: 0.875rem;
78
- }
79
- .ar-tag-sm {
80
- padding: 0.125rem 0.5rem;
81
- font-size: 0.75rem;
82
- }
83
- .ar-tag-close {
84
- display: inline-flex;
85
- align-items: center;
86
- justify-content: center;
87
- width: 1rem;
88
- height: 1rem;
89
- border-radius: var(--ar-radius-pill);
90
- background: transparent;
91
- border: 0;
92
- color: inherit;
93
- opacity: 0.6;
94
- cursor: pointer;
95
- padding: 0;
96
- font-size: 0.875rem;
97
- line-height: 1;
98
- }
99
- .ar-tag-close:hover {
100
- opacity: 1;
101
- }
1
+ /* TAG / CHIP */
2
+ .ar-tag {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ gap: var(--ar-s-1);
6
+ padding: 0.25rem 0.75rem;
7
+ border-radius: var(--ar-radius-pill);
8
+ background: var(--ar-base-200);
9
+ color: var(--ar-base-content);
10
+ font-size: 0.8125rem;
11
+ font-weight: 500;
12
+ line-height: 1.4;
13
+ white-space: nowrap;
14
+ }
15
+ .ar-tag-primary {
16
+ background: var(--ar-primary);
17
+ color: var(--ar-primary-content);
18
+ }
19
+ .ar-tag-secondary {
20
+ background: var(--ar-secondary);
21
+ color: var(--ar-secondary-content);
22
+ }
23
+ .ar-tag-accent {
24
+ background: var(--ar-accent);
25
+ color: var(--ar-accent-content);
26
+ }
27
+ .ar-tag-neutral {
28
+ background: var(--ar-neutral);
29
+ color: var(--ar-neutral-content);
30
+ }
31
+ .ar-tag-info {
32
+ background: var(--ar-info);
33
+ color: var(--ar-info-content);
34
+ }
35
+ .ar-tag-success {
36
+ background: var(--ar-success);
37
+ color: var(--ar-success-content);
38
+ }
39
+ .ar-tag-warning {
40
+ background: var(--ar-warning);
41
+ color: var(--ar-warning-content);
42
+ }
43
+ .ar-tag-error {
44
+ background: var(--ar-error);
45
+ color: var(--ar-error-content);
46
+ }
47
+ .ar-tag-outline {
48
+ background: transparent;
49
+ border: var(--ar-border-width) solid currentColor;
50
+ }
51
+ .ar-tag-outline.ar-tag-primary {
52
+ color: var(--ar-primary);
53
+ }
54
+ .ar-tag-outline.ar-tag-secondary {
55
+ color: var(--ar-secondary);
56
+ }
57
+ .ar-tag-outline.ar-tag-accent {
58
+ color: var(--ar-accent);
59
+ }
60
+ .ar-tag-outline.ar-tag-neutral {
61
+ color: var(--ar-neutral);
62
+ }
63
+ .ar-tag-outline.ar-tag-info {
64
+ color: var(--ar-info);
65
+ }
66
+ .ar-tag-outline.ar-tag-success {
67
+ color: var(--ar-success);
68
+ }
69
+ .ar-tag-outline.ar-tag-warning {
70
+ color: var(--ar-warning);
71
+ }
72
+ .ar-tag-outline.ar-tag-error {
73
+ color: var(--ar-error);
74
+ }
75
+ .ar-tag-lg {
76
+ padding: 0.375rem 1rem;
77
+ font-size: 0.875rem;
78
+ }
79
+ .ar-tag-sm {
80
+ padding: 0.125rem 0.5rem;
81
+ font-size: 0.75rem;
82
+ }
83
+ .ar-tag-close {
84
+ display: inline-flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ width: 1rem;
88
+ height: 1rem;
89
+ border-radius: var(--ar-radius-pill);
90
+ background: transparent;
91
+ border: 0;
92
+ color: inherit;
93
+ opacity: 0.6;
94
+ cursor: pointer;
95
+ padding: 0;
96
+ font-size: 0.875rem;
97
+ line-height: 1;
98
+ }
99
+ .ar-tag-close:hover {
100
+ opacity: 1;
101
+ }