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/drawer.css CHANGED
@@ -1,53 +1,53 @@
1
- /* DRAWER */
2
- .ar-drawer {
3
- position: relative;
4
- display: flex;
5
- }
6
- .ar-drawer-toggle {
7
- appearance: none;
8
- position: fixed;
9
- opacity: 0;
10
- pointer-events: none;
11
- }
12
- .ar-drawer-content {
13
- flex: 1;
14
- min-width: 0;
15
- }
16
- .ar-drawer-side {
17
- position: fixed;
18
- inset: 0;
19
- z-index: 40;
20
- visibility: hidden;
21
- pointer-events: none;
22
- }
23
- .ar-drawer-side > * {
24
- visibility: visible;
25
- }
26
- .ar-drawer-overlay {
27
- position: absolute;
28
- inset: 0;
29
- background: rgb(0 0 0 / 0.5);
30
- cursor: pointer;
31
- opacity: 0;
32
- transition: opacity 0.3s;
33
- }
34
- .ar-drawer-side .ar-menu {
35
- position: absolute;
36
- inset: 0 auto 0 0;
37
- width: 20rem;
38
- height: 100%;
39
- overflow-y: auto;
40
- background: var(--ar-base-100);
41
- transform: translateX(-100%);
42
- transition: transform 0.3s ease;
43
- }
44
- .ar-drawer-toggle:checked ~ .ar-drawer-side {
45
- visibility: visible;
46
- pointer-events: auto;
47
- }
48
- .ar-drawer-toggle:checked ~ .ar-drawer-side .ar-drawer-overlay {
49
- opacity: 1;
50
- }
51
- .ar-drawer-toggle:checked ~ .ar-drawer-side .ar-menu {
52
- transform: translateX(0);
53
- }
1
+ /* DRAWER */
2
+ .ar-drawer {
3
+ position: relative;
4
+ display: flex;
5
+ }
6
+ .ar-drawer-toggle {
7
+ appearance: none;
8
+ position: fixed;
9
+ opacity: 0;
10
+ pointer-events: none;
11
+ }
12
+ .ar-drawer-content {
13
+ flex: 1;
14
+ min-width: 0;
15
+ }
16
+ .ar-drawer-side {
17
+ position: fixed;
18
+ inset: 0;
19
+ z-index: 40;
20
+ visibility: hidden;
21
+ pointer-events: none;
22
+ }
23
+ .ar-drawer-side > * {
24
+ visibility: visible;
25
+ }
26
+ .ar-drawer-overlay {
27
+ position: absolute;
28
+ inset: 0;
29
+ background: rgb(0 0 0 / 0.5);
30
+ cursor: pointer;
31
+ opacity: 0;
32
+ transition: opacity 0.3s;
33
+ }
34
+ .ar-drawer-side .ar-menu {
35
+ position: absolute;
36
+ inset: 0 auto 0 0;
37
+ width: 20rem;
38
+ height: 100%;
39
+ overflow-y: auto;
40
+ background: var(--ar-base-100);
41
+ transform: translateX(-100%);
42
+ transition: transform 0.3s ease;
43
+ }
44
+ .ar-drawer-toggle:checked ~ .ar-drawer-side {
45
+ visibility: visible;
46
+ pointer-events: auto;
47
+ }
48
+ .ar-drawer-toggle:checked ~ .ar-drawer-side .ar-drawer-overlay {
49
+ opacity: 1;
50
+ }
51
+ .ar-drawer-toggle:checked ~ .ar-drawer-side .ar-menu {
52
+ transform: translateX(0);
53
+ }
package/src/components/file-upload.css CHANGED
@@ -1,51 +1,51 @@
1
- /* FILE UPLOAD */
2
- .ar-file-upload {
3
- position: relative;
4
- display: flex;
5
- flex-direction: column;
6
- align-items: center;
7
- justify-content: center;
8
- gap: var(--ar-s-2);
9
- padding: var(--ar-s-8) var(--ar-s-4);
10
- border: 2px dashed var(--ar-base-300);
11
- border-radius: var(--ar-radius-box);
12
- background: var(--ar-base-200);
13
- color: var(--ar-gray-600);
14
- text-align: center;
15
- cursor: pointer;
16
- transition: all 0.2s ease;
17
- }
18
- .ar-file-upload:hover,
19
- .ar-file-upload.ar-file-upload-dragover {
20
- border-color: var(--ar-primary);
21
- background: var(--ar-base-300);
22
- color: var(--ar-base-content);
23
- }
24
- .ar-file-upload input[type="file"] {
25
- position: absolute;
26
- inset: 0;
27
- opacity: 0;
28
- cursor: pointer;
29
- }
30
- .ar-file-upload-icon {
31
- width: 2.5rem;
32
- height: 2.5rem;
33
- opacity: 0.5;
34
- }
35
- .ar-file-upload-text {
36
- font-size: 0.875rem;
37
- }
38
- .ar-file-upload-text strong {
39
- color: var(--ar-primary);
40
- }
41
- .ar-file-upload-hint {
42
- font-size: 0.75rem;
43
- opacity: 0.7;
44
- }
45
- .ar-file-upload-sm {
46
- padding: var(--ar-s-4) var(--ar-s-3);
47
- }
48
- .ar-file-upload-sm .ar-file-upload-icon {
49
- width: 1.5rem;
50
- height: 1.5rem;
51
- }
1
+ /* FILE UPLOAD */
2
+ .ar-file-upload {
3
+ position: relative;
4
+ display: flex;
5
+ flex-direction: column;
6
+ align-items: center;
7
+ justify-content: center;
8
+ gap: var(--ar-s-2);
9
+ padding: var(--ar-s-8) var(--ar-s-4);
10
+ border: 2px dashed var(--ar-base-300);
11
+ border-radius: var(--ar-radius-box);
12
+ background: var(--ar-base-200);
13
+ color: var(--ar-gray-600);
14
+ text-align: center;
15
+ cursor: pointer;
16
+ transition: all 0.2s ease;
17
+ }
18
+ .ar-file-upload:hover,
19
+ .ar-file-upload.ar-file-upload-dragover {
20
+ border-color: var(--ar-primary);
21
+ background: var(--ar-base-300);
22
+ color: var(--ar-base-content);
23
+ }
24
+ .ar-file-upload input[type="file"] {
25
+ position: absolute;
26
+ inset: 0;
27
+ opacity: 0;
28
+ cursor: pointer;
29
+ }
30
+ .ar-file-upload-icon {
31
+ width: 2.5rem;
32
+ height: 2.5rem;
33
+ opacity: 0.5;
34
+ }
35
+ .ar-file-upload-text {
36
+ font-size: 0.875rem;
37
+ }
38
+ .ar-file-upload-text strong {
39
+ color: var(--ar-primary);
40
+ }
41
+ .ar-file-upload-hint {
42
+ font-size: 0.75rem;
43
+ opacity: 0.7;
44
+ }
45
+ .ar-file-upload-sm {
46
+ padding: var(--ar-s-4) var(--ar-s-3);
47
+ }
48
+ .ar-file-upload-sm .ar-file-upload-icon {
49
+ width: 1.5rem;
50
+ height: 1.5rem;
51
+ }
package/src/components/footer.css CHANGED
@@ -1,26 +1,26 @@
1
- /* FOOTER */
2
- .ar-footer {
3
- display: flex;
4
- flex-direction: column;
5
- align-items: center;
6
- gap: var(--ar-s-4);
7
- padding: var(--ar-s-10);
8
- background: var(--ar-base-200);
9
- border-top: var(--ar-border-width) solid var(--ar-base-300);
10
- }
11
- .ar-footer nav {
12
- display: flex;
13
- flex-wrap: wrap;
14
- justify-content: center;
15
- gap: var(--ar-s-4);
16
- }
17
- .ar-footer a {
18
- color: var(--ar-base-content);
19
- opacity: 0.8;
20
- }
21
- .ar-footer a:hover {
22
- opacity: 1;
23
- }
24
- .ar-footer-center {
25
- text-align: center;
26
- }
1
+ /* FOOTER */
2
+ .ar-footer {
3
+ display: flex;
4
+ flex-direction: column;
5
+ align-items: center;
6
+ gap: var(--ar-s-4);
7
+ padding: var(--ar-s-10);
8
+ background: var(--ar-base-200);
9
+ border-top: var(--ar-border-width) solid var(--ar-base-300);
10
+ }
11
+ .ar-footer nav {
12
+ display: flex;
13
+ flex-wrap: wrap;
14
+ justify-content: center;
15
+ gap: var(--ar-s-4);
16
+ }
17
+ .ar-footer a {
18
+ color: var(--ar-base-content);
19
+ opacity: 0.8;
20
+ }
21
+ .ar-footer a:hover {
22
+ opacity: 1;
23
+ }
24
+ .ar-footer-center {
25
+ text-align: center;
26
+ }
package/src/components/forms.css CHANGED
@@ -1,69 +1,69 @@
1
- /* FORMS */
2
- .ar-fieldset {
3
- display: flex;
4
- flex-direction: column;
5
- gap: var(--ar-s-2);
6
- border: 0;
7
- margin: 0;
8
- padding: 0;
9
- }
10
- .ar-label {
11
- display: flex;
12
- align-items: center;
13
- gap: var(--ar-s-2);
14
- font-weight: 600;
15
- }
16
- .ar-input,
17
- .ar-select,
18
- .ar-textarea {
19
- width: 100%;
20
- border: var(--ar-border-width) solid var(--ar-base-300);
21
- border-radius: var(--ar-radius-field);
22
- background: var(--ar-base-100);
23
- color: var(--ar-base-content);
24
- padding: 0.5rem 0.75rem;
25
- }
26
- .ar-input:focus,
27
- .ar-select:focus,
28
- .ar-textarea:focus {
29
- outline: 2px solid var(--ar-primary);
30
- outline-offset: 0;
31
- border-color: transparent;
32
- }
33
- .ar-checkbox,
34
- .ar-radio {
35
- accent-color: var(--ar-primary);
36
- width: 1.125rem;
37
- height: 1.125rem;
38
- }
39
- .ar-toggle {
40
- position: relative;
41
- appearance: none;
42
- width: 2.75rem;
43
- height: 1.5rem;
44
- border-radius: var(--ar-radius-pill);
45
- background: var(--ar-base-300);
46
- cursor: pointer;
47
- transition: background 0.2s;
48
- }
49
- .ar-toggle::after {
50
- content: "";
51
- position: absolute;
52
- top: 0.1875rem;
53
- left: 0.1875rem;
54
- width: 1.125rem;
55
- height: 1.125rem;
56
- border-radius: var(--ar-radius-pill);
57
- background: var(--ar-base-100);
58
- transition: transform 0.2s;
59
- }
60
- .ar-toggle:checked {
61
- background: var(--ar-primary);
62
- }
63
- .ar-toggle:checked::after {
64
- transform: translateX(1.25rem);
65
- }
66
- .ar-range {
67
- accent-color: var(--ar-primary);
68
- width: 100%;
69
- }
1
+ /* FORMS */
2
+ .ar-fieldset {
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: var(--ar-s-2);
6
+ border: 0;
7
+ margin: 0;
8
+ padding: 0;
9
+ }
10
+ .ar-label {
11
+ display: flex;
12
+ align-items: center;
13
+ gap: var(--ar-s-2);
14
+ font-weight: 600;
15
+ }
16
+ .ar-input,
17
+ .ar-select,
18
+ .ar-textarea {
19
+ width: 100%;
20
+ border: var(--ar-border-width) solid var(--ar-base-300);
21
+ border-radius: var(--ar-radius-field);
22
+ background: var(--ar-base-100);
23
+ color: var(--ar-base-content);
24
+ padding: 0.5rem 0.75rem;
25
+ }
26
+ .ar-input:focus,
27
+ .ar-select:focus,
28
+ .ar-textarea:focus {
29
+ outline: 2px solid var(--ar-primary);
30
+ outline-offset: 0;
31
+ border-color: transparent;
32
+ }
33
+ .ar-checkbox,
34
+ .ar-radio {
35
+ accent-color: var(--ar-primary);
36
+ width: 1.125rem;
37
+ height: 1.125rem;
38
+ }
39
+ .ar-toggle {
40
+ position: relative;
41
+ appearance: none;
42
+ width: 2.75rem;
43
+ height: 1.5rem;
44
+ border-radius: var(--ar-radius-pill);
45
+ background: var(--ar-base-300);
46
+ cursor: pointer;
47
+ transition: background 0.2s;
48
+ }
49
+ .ar-toggle::after {
50
+ content: "";
51
+ position: absolute;
52
+ top: 0.1875rem;
53
+ left: 0.1875rem;
54
+ width: 1.125rem;
55
+ height: 1.125rem;
56
+ border-radius: var(--ar-radius-pill);
57
+ background: var(--ar-base-100);
58
+ transition: transform 0.2s;
59
+ }
60
+ .ar-toggle:checked {
61
+ background: var(--ar-primary);
62
+ }
63
+ .ar-toggle:checked::after {
64
+ transform: translateX(1.25rem);
65
+ }
66
+ .ar-range {
67
+ accent-color: var(--ar-primary);
68
+ width: 100%;
69
+ }
package/src/components/hero.css CHANGED
@@ -1,22 +1,22 @@
1
- /* HERO */
2
- .ar-hero {
3
- display: flex;
4
- align-items: center;
5
- justify-content: center;
6
- background: var(--ar-base-200);
7
- padding: var(--ar-s-16) var(--ar-s-6);
8
- }
9
- .ar-hero-content {
10
- display: flex;
11
- flex-direction: column;
12
- align-items: center;
13
- gap: var(--ar-s-6);
14
- text-align: center;
15
- max-width: 64rem;
16
- }
17
- @media (min-width: 1024px) {
18
- .ar-hero-content {
19
- flex-direction: row;
20
- text-align: left;
21
- }
22
- }
1
+ /* HERO */
2
+ .ar-hero {
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ background: var(--ar-base-200);
7
+ padding: var(--ar-s-16) var(--ar-s-6);
8
+ }
9
+ .ar-hero-content {
10
+ display: flex;
11
+ flex-direction: column;
12
+ align-items: center;
13
+ gap: var(--ar-s-6);
14
+ text-align: center;
15
+ max-width: 64rem;
16
+ }
17
+ @media (min-width: 1024px) {
18
+ .ar-hero-content {
19
+ flex-direction: row;
20
+ text-align: left;
21
+ }
22
+ }
package/src/components/join.css CHANGED
@@ -1,14 +1,14 @@
1
- /* JOIN */
2
- .ar-join {
3
- display: inline-flex;
4
- align-items: stretch;
5
- border-radius: var(--ar-radius-field);
6
- overflow: hidden;
7
- }
8
- .ar-join-item:not(:first-child) {
9
- border-left-width: 0;
10
- }
11
- .ar-join .ar-btn,
12
- .ar-join-item {
13
- border-radius: 0;
14
- }
1
+ /* JOIN */
2
+ .ar-join {
3
+ display: inline-flex;
4
+ align-items: stretch;
5
+ border-radius: var(--ar-radius-field);
6
+ overflow: hidden;
7
+ }
8
+ .ar-join-item:not(:first-child) {
9
+ border-left-width: 0;
10
+ }
11
+ .ar-join .ar-btn,
12
+ .ar-join-item {
13
+ border-radius: 0;
14
+ }
package/src/components/link.css CHANGED
@@ -1,24 +1,24 @@
1
- /* LINK */
2
- .ar-link {
3
- color: var(--ar-primary);
4
- text-decoration: underline;
5
- cursor: pointer;
6
- }
7
- .ar-link-hover {
8
- text-decoration: none;
9
- }
10
- .ar-link-hover:hover {
11
- text-decoration: underline;
12
- }
13
- .ar-desc a {
14
- text-decoration: underline;
15
- background: var(--ar-desc-grad);
16
- background-size: 200%;
17
- transition:
18
- background-position 0.5s ease-out,
19
- color 0.5s ease-out;
20
- }
21
- .ar-desc a:hover {
22
- background-position: left;
23
- color: var(--ar-arc);
24
- }
1
+ /* LINK */
2
+ .ar-link {
3
+ color: var(--ar-primary);
4
+ text-decoration: underline;
5
+ cursor: pointer;
6
+ }
7
+ .ar-link-hover {
8
+ text-decoration: none;
9
+ }
10
+ .ar-link-hover:hover {
11
+ text-decoration: underline;
12
+ }
13
+ .ar-desc a {
14
+ text-decoration: underline;
15
+ background: var(--ar-desc-grad);
16
+ background-size: 200%;
17
+ transition:
18
+ background-position 0.5s ease-out,
19
+ color 0.5s ease-out;
20
+ }
21
+ .ar-desc a:hover {
22
+ background-position: left;
23
+ color: var(--ar-arc);
24
+ }
package/src/components/menu.css CHANGED
@@ -1,56 +1,56 @@
1
- /* MENU & DROPDOWN */
2
- .ar-menu {
3
- display: flex;
4
- flex-direction: column;
5
- list-style: none;
6
- margin: 0;
7
- padding: var(--ar-s-2);
8
- background: var(--ar-base-100);
9
- }
10
- .ar-menu li > a {
11
- display: block;
12
- padding: 0.5rem 0.75rem;
13
- border-radius: var(--ar-radius-field);
14
- color: var(--ar-base-content);
15
- text-decoration: none;
16
- }
17
- .ar-menu li > a:hover {
18
- background: var(--ar-base-200);
19
- }
20
- .ar-menu-horizontal {
21
- flex-direction: row;
22
- align-items: center;
23
- gap: var(--ar-s-2);
24
- }
25
- .ar-menu-sm li > a {
26
- font-size: 0.8rem;
27
- padding: 0.25rem 0.5rem;
28
- }
29
- .ar-dropdown {
30
- position: relative;
31
- display: inline-block;
32
- }
33
- .ar-dropdown-content {
34
- display: none;
35
- position: absolute;
36
- z-index: 20;
37
- min-width: 15rem;
38
- margin-top: 0.75rem;
39
- background: var(--ar-base-100);
40
- border-radius: var(--ar-radius-box);
41
- box-shadow: var(--ar-shadow-lg);
42
- padding: var(--ar-s-2);
43
- }
44
- .ar-dropdown:hover .ar-dropdown-content,
45
- .ar-dropdown:focus-within .ar-dropdown-content,
46
- .ar-dropdown.ar-dropdown-open .ar-dropdown-content {
47
- display: block;
48
- }
49
- .ar-dropdown-content::before {
50
- content: "";
51
- position: absolute;
52
- top: -0.75rem;
53
- left: 0;
54
- right: 0;
55
- height: 0.75rem;
56
- }
1
+ /* MENU & DROPDOWN */
2
+ .ar-menu {
3
+ display: flex;
4
+ flex-direction: column;
5
+ list-style: none;
6
+ margin: 0;
7
+ padding: var(--ar-s-2);
8
+ background: var(--ar-base-100);
9
+ }
10
+ .ar-menu li > a {
11
+ display: block;
12
+ padding: 0.5rem 0.75rem;
13
+ border-radius: var(--ar-radius-field);
14
+ color: var(--ar-base-content);
15
+ text-decoration: none;
16
+ }
17
+ .ar-menu li > a:hover {
18
+ background: var(--ar-base-200);
19
+ }
20
+ .ar-menu-horizontal {
21
+ flex-direction: row;
22
+ align-items: center;
23
+ gap: var(--ar-s-2);
24
+ }
25
+ .ar-menu-sm li > a {
26
+ font-size: 0.8rem;
27
+ padding: 0.25rem 0.5rem;
28
+ }
29
+ .ar-dropdown {
30
+ position: relative;
31
+ display: inline-block;
32
+ }
33
+ .ar-dropdown-content {
34
+ display: none;
35
+ position: absolute;
36
+ z-index: 20;
37
+ min-width: 15rem;
38
+ margin-top: 0.75rem;
39
+ background: var(--ar-base-100);
40
+ border-radius: var(--ar-radius-box);
41
+ box-shadow: var(--ar-shadow-lg);
42
+ padding: var(--ar-s-2);
43
+ }
44
+ .ar-dropdown:hover .ar-dropdown-content,
45
+ .ar-dropdown:focus-within .ar-dropdown-content,
46
+ .ar-dropdown.ar-dropdown-open .ar-dropdown-content {
47
+ display: block;
48
+ }
49
+ .ar-dropdown-content::before {
50
+ content: "";
51
+ position: absolute;
52
+ top: -0.75rem;
53
+ left: 0;
54
+ right: 0;
55
+ height: 0.75rem;
56
+ }