arekui 1.0.0 → 2.0.0

package/src/components/sidebar.css

@@ -0,0 +1,377 @@
+.ar-sidebar {
+ position: relative;
+ display: flex;
+}
+
+.ar-sidebar-toggle {
+ appearance: none;
+ position: fixed;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ border: 0;
+ clip-path: inset(50%);
+ overflow: hidden;
+ pointer-events: none;
+}
+.ar-sidebar-toggle:focus-visible {
+ clip-path: none;
+ width: auto;
+ height: auto;
+ margin: 0;
+ padding: 2px;
+ background: var(--ar-base-100);
+ z-index: 60;
+}
+.ar-sidebar-content {
+ flex: 1;
+ min-width: 0;
+}
+.ar-sidebar-panel {
+ position: fixed;
+ inset: 0;
+
+ z-index: 90;
+ visibility: hidden;
+ pointer-events: none;
+}
+.ar-sidebar-panel > * {
+ visibility: visible;
+}
+.ar-sidebar-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgb(0 0 0 / 0.5);
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+.ar-sidebar-panel > .ar-menu {
+ position: absolute;
+ inset: 0 auto 0 0;
+ width: min(20rem, 85vw);
+ height: 100%;
+ overflow-y: auto;
+ background: var(--ar-base-100);
+ transform: translateX(-100%);
+ transition: transform 0.3s ease;
+}
+.ar-sidebar-panel-end > .ar-menu {
+ inset: 0 0 0 auto;
+ transform: translateX(100%);
+}
+.ar-sidebar-toggle:checked ~ .ar-sidebar-panel {
+ visibility: visible;
+ pointer-events: auto;
+}
+.ar-sidebar-toggle:checked ~ .ar-sidebar-panel .ar-sidebar-overlay {
+ opacity: 1;
+}
+.ar-sidebar-toggle:checked ~ .ar-sidebar-panel > .ar-menu {
+ transform: none;
+}
+
+.ar-sidebar-actions {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+}
+.ar-sidebar-burger {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--ar-s-2);
+ border: 0;
+ background: transparent;
+ color: inherit;
+ cursor: pointer;
+}
+.ar-sidebar-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--ar-s-2);
+ margin-bottom: var(--ar-s-3);
+ padding-bottom: var(--ar-s-3);
+ border-bottom: 1px solid var(--ar-base-300);
+}
+.ar-sidebar-head .ar-navbar-brand {
+ padding: 0;
+}
+.ar-sidebar-title {
+ margin: var(--ar-s-4) var(--ar-s-2) 0;
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--ar-gray-600);
+}
+.ar-sidebar-title:first-child {
+ margin-top: 0;
+}
+.ar-sidebar-title-sub {
+ margin-top: var(--ar-s-3);
+ font-size: 0.65rem;
+ font-weight: 600;
+ letter-spacing: 0.06em;
+ color: var(--ar-gray-600);
+}
+.ar-sidebar-theme {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ar-s-2);
+ margin-bottom: var(--ar-s-3);
+}
+.ar-sidebar-theme .ar-btn {
+ flex: 1 1 auto;
+}
+@media (min-width: 1024px) {
+ .ar-sidebar .ar-sidebar-head,
+ .ar-sidebar .ar-sidebar-theme,
+ .ar-sidebar .ar-search {
+  display: none;
+ }
+}
+.ar-sidebar-collapse-toggle {
+ appearance: none;
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ border: 0;
+ clip-path: inset(50%);
+ overflow: hidden;
+ pointer-events: none;
+}
+.ar-sidebar-collapse-toggle:focus-visible {
+ clip-path: none;
+ width: auto;
+ height: auto;
+ margin: 0;
+ padding: 2px;
+ background: var(--ar-base-100);
+ z-index: 60;
+}
+.ar-sidebar-collapse-btn {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ padding: var(--ar-s-2);
+ border: 0;
+ background: transparent;
+ color: inherit;
+ cursor: pointer;
+}
+
+@media (min-width: 1024px) {
+ .ar-sidebar-responsive .ar-sidebar-toggle,
+ .ar-sidebar-compact .ar-sidebar-toggle,
+ .ar-sidebar-responsive [data-ar-sidebar-toggle],
+ .ar-sidebar-compact [data-ar-sidebar-toggle] {
+  display: none;
+ }
+ .ar-sidebar-responsive .ar-sidebar-panel,
+ .ar-sidebar-compact .ar-sidebar-panel {
+  position: static;
+  visibility: visible;
+  pointer-events: auto;
+  z-index: auto;
+  inset: auto;
+  flex: 0 0 auto;
+ }
+ .ar-sidebar-responsive .ar-sidebar-overlay,
+ .ar-sidebar-compact .ar-sidebar-overlay {
+  display: none;
+ }
+ .ar-sidebar-responsive .ar-sidebar-panel > .ar-menu,
+ .ar-sidebar-compact .ar-sidebar-panel > .ar-menu {
+  position: static;
+  transform: none;
+  width: 16rem;
+  height: auto;
+  max-height: none;
+  overflow-y: visible;
+  background: transparent;
+  border-right: var(--ar-border-width) solid var(--ar-base-300);
+ }
+ .ar-sidebar-compact .ar-sidebar-collapse-btn {
+  display: inline-flex;
+ }
+ .ar-sidebar-compact .ar-sidebar-panel > .ar-menu {
+  transition: width 0.3s ease;
+ }
+ .ar-sidebar-compact .ar-sidebar-collapse-toggle:checked ~ .ar-sidebar-panel > .ar-menu {
+  width: 4.5rem;
+ }
+ .ar-sidebar-compact .ar-sidebar-collapse-toggle:checked ~ .ar-sidebar-panel .ar-menu-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+ }
+ .ar-sidebar-compact .ar-sidebar-collapse-toggle:checked ~ .ar-sidebar-panel .ar-menu-icon {
+  margin-right: 0;
+ }
+ .ar-sidebar-compact .ar-sidebar-collapse-toggle:checked ~ .ar-sidebar-panel .ar-menu li > a {
+  text-align: center;
+  padding: 0.5rem var(--ar-s-2);
+ }
+}
+
+@media (min-width: 768px) {
+ .ar-sidebar-bp-md.ar-sidebar-responsive .ar-sidebar-toggle,
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-toggle,
+ .ar-sidebar-bp-md.ar-sidebar-responsive [data-ar-sidebar-toggle],
+ .ar-sidebar-bp-md.ar-sidebar-compact [data-ar-sidebar-toggle] {
+  display: none;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-responsive .ar-sidebar-panel,
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-panel {
+  position: static;
+  visibility: visible;
+  pointer-events: auto;
+  z-index: auto;
+  inset: auto;
+  flex: 0 0 auto;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-responsive .ar-sidebar-overlay,
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-overlay {
+  display: none;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-responsive .ar-sidebar-panel > .ar-menu,
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-panel > .ar-menu {
+  position: static;
+  transform: none;
+  width: 16rem;
+  height: auto;
+  max-height: none;
+  overflow-y: visible;
+  background: transparent;
+  border-right: var(--ar-border-width) solid var(--ar-base-300);
+ }
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-collapse-btn {
+  display: inline-flex;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-panel > .ar-menu {
+  transition: width 0.3s ease;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-collapse-toggle:checked ~ .ar-sidebar-panel > .ar-menu {
+  width: 4.5rem;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-collapse-toggle:checked ~ .ar-sidebar-panel .ar-menu-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-collapse-toggle:checked ~ .ar-sidebar-panel .ar-menu-icon {
+  margin-right: 0;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-compact .ar-sidebar-collapse-toggle:checked ~ .ar-sidebar-panel .ar-menu li > a {
+  text-align: center;
+  padding: 0.5rem var(--ar-s-2);
+ }
+}
+
+.ar-sidebar-nav {
+ align-items: center;
+ gap: var(--ar-s-4);
+ padding: var(--ar-s-2) var(--ar-s-4);
+ background: var(--ar-base-100);
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-sidebar-nav .ar-sidebar-content {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+}
+@media (min-width: 1024px) {
+ .ar-sidebar-nav .ar-sidebar-burger,
+ .ar-sidebar-nav .ar-sidebar-toggle,
+ .ar-sidebar-nav [data-ar-sidebar-toggle] {
+  display: none;
+ }
+ .ar-sidebar-nav .ar-sidebar-content {
+  flex: 0 0 auto;
+ }
+ .ar-sidebar-nav .ar-sidebar-panel {
+  position: static;
+  visibility: visible;
+  pointer-events: auto;
+  z-index: auto;
+  inset: auto;
+  flex: 1 1 auto;
+ }
+ .ar-sidebar-nav .ar-sidebar-overlay {
+  display: none;
+ }
+ .ar-sidebar-nav .ar-sidebar-panel > .ar-menu {
+  position: static;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ar-s-2);
+  width: auto;
+  height: auto;
+  max-height: none;
+  transform: none;
+  overflow: visible;
+  background: transparent;
+  padding: 0;
+ }
+}
+
+@media (min-width: 768px) {
+ .ar-sidebar-bp-md.ar-sidebar-nav .ar-sidebar-burger,
+ .ar-sidebar-bp-md.ar-sidebar-nav .ar-sidebar-toggle,
+ .ar-sidebar-bp-md.ar-sidebar-nav [data-ar-sidebar-toggle] {
+  display: none;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-nav .ar-sidebar-content {
+  flex: 0 0 auto;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-nav .ar-sidebar-panel {
+  position: static;
+  visibility: visible;
+  pointer-events: auto;
+  z-index: auto;
+  inset: auto;
+  flex: 1 1 auto;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-nav .ar-sidebar-overlay {
+  display: none;
+ }
+ .ar-sidebar-bp-md.ar-sidebar-nav .ar-sidebar-panel > .ar-menu {
+  position: static;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ar-s-2);
+  width: auto;
+  height: auto;
+  max-height: none;
+  transform: none;
+  overflow: visible;
+  background: transparent;
+  padding: 0;
+ }
+}
+@media (prefers-reduced-motion: reduce) {
+ .ar-sidebar-panel > .ar-menu,
+ .ar-sidebar-overlay {
+  transition: none;
+ }
+ .ar-sidebar-compact .ar-sidebar-panel > .ar-menu {
+  transition: none;
+ }
+}

package/src/components/skeleton.css

@@ -1,54 +1,54 @@
 /* SKELETON LOADER */
-.ar-skeleton {
- background: var(--ar-base-300);
- border-radius: var(--ar-radius-field);
- position: relative;
- overflow: hidden;
-}
-.ar-skeleton::after {
- content: "";
- position: absolute;
- inset: 0;
- background: linear-gradient(
-  90deg,
-  transparent 0%,
-  oklch(100% 0 0 / 0.08) 50%,
-  transparent 100%
- );
- animation: ar-skeleton-shimmer 1.5s ease-in-out infinite;
-}
-.ar-skeleton-text {
- height: 1rem;
- margin-bottom: var(--ar-s-2);
- width: 100%;
-}
-.ar-skeleton-text:last-child {
- width: 70%;
-}
-.ar-skeleton-title {
- height: 1.5rem;
- width: 60%;
- margin-bottom: var(--ar-s-3);
-}
-.ar-skeleton-avatar {
- width: 3rem;
- height: 3rem;
- border-radius: var(--ar-radius-pill);
-}
-.ar-skeleton-thumbnail {
- width: 100%;
- aspect-ratio: 16 / 9;
-}
-.ar-skeleton-btn {
- height: 2.5rem;
- width: 8rem;
- border-radius: var(--ar-radius-field);
-}
-@keyframes ar-skeleton-shimmer {
- 0% {
-  transform: translateX(-100%);
- }
- 100% {
-  transform: translateX(100%);
- }
+.ar-skeleton {
+ background: var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ position: relative;
+ overflow: hidden;
+}
+.ar-skeleton::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+  90deg,
+  transparent 0%,
+  oklch(100% 0 0 / 0.08) 50%,
+  transparent 100%
+ );
+ animation: ar-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+.ar-skeleton-text {
+ height: 1rem;
+ margin-bottom: var(--ar-s-2);
+ width: 100%;
+}
+.ar-skeleton-text:last-child {
+ width: 70%;
+}
+.ar-skeleton-title {
+ height: 1.5rem;
+ width: 60%;
+ margin-bottom: var(--ar-s-3);
+}
+.ar-skeleton-avatar {
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--ar-radius-pill);
+}
+.ar-skeleton-thumbnail {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+}
+.ar-skeleton-btn {
+ height: 2.5rem;
+ width: 8rem;
+ border-radius: var(--ar-radius-field);
+}
+@keyframes ar-skeleton-shimmer {
+ 0% {
+  transform: translateX(-100%);
+ }
+ 100% {
+  transform: translateX(100%);
+ }
 }

package/src/components/spinner.css

@@ -0,0 +1,36 @@
+.ar-spinner {
+ display: inline-block;
+ width: 1.5rem;
+ height: 1.5rem;
+ border: 2px solid currentColor;
+ border-right-color: transparent;
+ border-radius: var(--ar-radius-pill);
+ animation: ar-spinner-spin 0.7s linear infinite;
+}
+.ar-spinner-sm {
+ width: 1rem;
+ height: 1rem;
+}
+.ar-spinner-lg {
+ width: 2.5rem;
+ height: 2.5rem;
+ border-width: 3px;
+}
+.ar-spinner-overlay {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgb(0 0 0 / 0.5);
+ color: var(--ar-gray-50);
+ z-index: 10;
+}
+.ar-spinner-overlay-fixed {
+ position: fixed;
+}
+@keyframes ar-spinner-spin {
+ to {
+  transform: rotate(360deg);
+ }
+}

package/src/components/swap.css

@@ -1,45 +1,45 @@
 /* SWAP (theme toggle) */
-.ar-swap {
- position: relative;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 2rem;
- height: 2rem;
- cursor: pointer;
-}
-.ar-swap > .ar-swap-on,
-.ar-swap > .ar-swap-off {
- position: absolute;
- transition:
-  opacity 0.3s ease,
-  transform 0.3s ease;
-}
-.ar-swap > .ar-swap-on {
- opacity: 0;
-}
-.ar-swap input:checked ~ .ar-swap-on,
-.ar-swap.ar-swap-active > .ar-swap-on {
- opacity: 1;
-}
-.ar-swap input:checked ~ .ar-swap-off,
-.ar-swap.ar-swap-active > .ar-swap-off {
- opacity: 0;
-}
-.ar-swap input {
- position: absolute;
- opacity: 0;
- pointer-events: none;
-}
-.ar-swap-rotate > .ar-swap-on,
-.ar-swap-rotate > .ar-swap-off {
- transform: rotate(0deg);
-}
-.ar-swap-rotate input:checked ~ .ar-swap-on,
-.ar-swap-rotate.ar-swap-active > .ar-swap-on {
- transform: rotate(360deg);
-}
-.ar-swap-rotate input:checked ~ .ar-swap-off,
-.ar-swap-rotate.ar-swap-active > .ar-swap-off {
- transform: rotate(-360deg);
+.ar-swap {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ cursor: pointer;
+}
+.ar-swap > .ar-swap-on,
+.ar-swap > .ar-swap-off {
+ position: absolute;
+ transition:
+  opacity 0.3s ease,
+  transform 0.3s ease;
+}
+.ar-swap > .ar-swap-on {
+ opacity: 0;
+}
+.ar-swap input:checked ~ .ar-swap-on,
+.ar-swap.ar-swap-active > .ar-swap-on {
+ opacity: 1;
+}
+.ar-swap input:checked ~ .ar-swap-off,
+.ar-swap.ar-swap-active > .ar-swap-off {
+ opacity: 0;
+}
+.ar-swap input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+.ar-swap-rotate > .ar-swap-on,
+.ar-swap-rotate > .ar-swap-off {
+ transform: rotate(0deg);
+}
+.ar-swap-rotate input:checked ~ .ar-swap-on,
+.ar-swap-rotate.ar-swap-active > .ar-swap-on {
+ transform: rotate(360deg);
+}
+.ar-swap-rotate input:checked ~ .ar-swap-off,
+.ar-swap-rotate.ar-swap-active > .ar-swap-off {
+ transform: rotate(-360deg);
 }

package/src/components/table.css

@@ -1,22 +1,21 @@
-/* TABLE */
-.ar-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 0.875rem;
-}
-.ar-table th,
-.ar-table td {
- border-bottom: var(--ar-border-width) solid var(--ar-base-300);
- padding: 0.625rem 0.75rem;
- text-align: left;
-}
-.ar-table th {
- font-weight: 700;
- background: var(--ar-base-200);
-}
-.ar-table-striped tbody tr:nth-child(odd) {
- background: var(--ar-base-200);
-}
-.ar-table-hover tbody tr:hover {
- background: var(--ar-base-300);
+.ar-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.875rem;
+}
+.ar-table th,
+.ar-table td {
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+ padding: 0.625rem 0.75rem;
+ text-align: left;
+}
+.ar-table th {
+ font-weight: 700;
+ background: var(--ar-base-200);
+}
+.ar-table-striped tbody tr:nth-child(odd) {
+ background: var(--ar-base-200);
+}
+.ar-table-hover tbody tr:hover {
+ background: var(--ar-base-300);
 }

package/src/components/tabs.css

@@ -1,24 +1,23 @@
-/* TABS */
-.ar-tabs {
- display: flex;
- flex-wrap: wrap;
- gap: var(--ar-s-1);
- border-bottom: var(--ar-border-width) solid var(--ar-base-300);
-}
-.ar-tab {
- padding: 0.625rem 1rem;
- cursor: pointer;
- border: 0;
- background: transparent;
- color: var(--ar-gray-600);
- border-bottom: 2px solid transparent;
- font-family: var(--ar-font-sans);
- font-weight: 600;
-}
-.ar-tab:hover {
- color: var(--ar-base-content);
-}
-.ar-tab-active {
- color: var(--ar-primary);
- border-bottom-color: var(--ar-primary);
+.ar-tabs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ar-s-1);
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-tab {
+ padding: 0.625rem 1rem;
+ cursor: pointer;
+ border: 0;
+ background: transparent;
+ color: var(--ar-gray-600);
+ border-bottom: 2px solid transparent;
+ font-family: var(--ar-font-sans);
+ font-weight: 600;
+}
+.ar-tab:hover {
+ color: var(--ar-base-content);
+}
+.ar-tab-active {
+ color: var(--ar-primary-text);
+ border-bottom-color: var(--ar-primary);
 }