arekui 1.0.2 → 2.0.0

package/src/components/segmented.css

@@ -0,0 +1,44 @@
+/* SEGMENTED CONTROL */
+.ar-segmented {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+ padding: var(--ar-s-1);
+ border-radius: var(--ar-radius-box);
+ background: var(--ar-base-200);
+}
+.ar-segmented-input {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ overflow: hidden;
+ clip-path: inset(50%);
+ white-space: nowrap;
+ border: 0;
+}
+.ar-segmented-item {
+ padding: 0.5rem 1rem;
+ border-radius: calc(var(--ar-radius-box) - var(--ar-s-1));
+ color: var(--ar-gray-600);
+ font-family: var(--ar-font-sans);
+ font-size: 0.875rem;
+ font-weight: 600;
+ line-height: 1.25;
+ text-align: center;
+ white-space: nowrap;
+ cursor: pointer;
+ user-select: none;
+}
+.ar-segmented-item:hover {
+ color: var(--ar-base-content);
+}
+.ar-segmented-input:checked + .ar-segmented-item {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-segmented-input:focus-visible + .ar-segmented-item {
+ outline: 2px solid var(--ar-primary);
+ outline-offset: 1px;
+}

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,4 +1,4 @@
-/* SKELETON LOADER */
+/* SKELETON LOADER */
 .ar-skeleton {
  background: var(--ar-base-300);
  border-radius: var(--ar-radius-field);
@@ -51,4 +51,4 @@
  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,4 +1,4 @@
-/* SWAP (theme toggle) */
+/* SWAP (theme toggle) */
 .ar-swap {
  position: relative;
  display: inline-flex;
@@ -42,4 +42,4 @@
 .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,4 +1,3 @@
-/* TABLE */
 .ar-table {
  width: 100%;
  border-collapse: collapse;
@@ -19,4 +18,4 @@
 }
 .ar-table-hover tbody tr:hover {
  background: var(--ar-base-300);
-}
+}

package/src/components/tabs.css

@@ -1,4 +1,3 @@
-/* TABS */
 .ar-tabs {
  display: flex;
  flex-wrap: wrap;
@@ -19,6 +18,6 @@
  color: var(--ar-base-content);
 }
 .ar-tab-active {
- color: var(--ar-primary);
+ color: var(--ar-primary-text);
  border-bottom-color: var(--ar-primary);
-}
+}

package/src/components/tag.css

@@ -1,4 +1,4 @@
-/* TAG / CHIP */
+/* TAG / CHIP */
 .ar-tag {
  display: inline-flex;
  align-items: center;
@@ -49,28 +49,28 @@
  border: var(--ar-border-width) solid currentColor;
 }
 .ar-tag-outline.ar-tag-primary {
- color: var(--ar-primary);
+ color: var(--ar-primary-text);
 }
 .ar-tag-outline.ar-tag-secondary {
- color: var(--ar-secondary);
+ color: var(--ar-secondary-text);
 }
 .ar-tag-outline.ar-tag-accent {
- color: var(--ar-accent);
+ color: var(--ar-accent-text);
 }
 .ar-tag-outline.ar-tag-neutral {
- color: var(--ar-neutral);
+ color: var(--ar-neutral-text);
 }
 .ar-tag-outline.ar-tag-info {
- color: var(--ar-info);
+ color: var(--ar-info-text);
 }
 .ar-tag-outline.ar-tag-success {
- color: var(--ar-success);
+ color: var(--ar-success-text);
 }
 .ar-tag-outline.ar-tag-warning {
- color: var(--ar-warning);
+ color: var(--ar-warning-text);
 }
 .ar-tag-outline.ar-tag-error {
- color: var(--ar-error);
+ color: var(--ar-error-text);
 }
 .ar-tag-lg {
  padding: 0.375rem 1rem;
@@ -98,4 +98,4 @@
 }
 .ar-tag-close:hover {
  opacity: 1;
-}
+}

package/src/components/textured.css

@@ -1,6 +1,8 @@
-/* TEXTURED TEXT & ANIMATION */
+/* TEXTURED TEXT & ANIMATION */
 .ar-bg-img {
  color: transparent;
+
+ background-color: var(--ar-base-content, #171717);
  background-image: var(--ar-texture);
  background-size: cover;
  -webkit-background-clip: text;
@@ -20,7 +22,7 @@
  }
 }
 .ar-animate-fade-in {
- animation: ar-fade-in 0.4s ease-out forwards;
+ animation: ar-fade-in 0.4s ease-out var(--ar-delay, 0s) backwards;
 }
 @keyframes ar-fade-in {
  from {
@@ -32,3 +34,21 @@
   transform: translateY(0);
  }
 }
+.ar-reveal {
+ opacity: 0;
+ transform: translateY(1.25rem);
+ transition: opacity 0.6s ease-out var(--ar-delay, 0s), transform 0.6s ease-out var(--ar-delay, 0s);
+}
+.ar-reveal.ar-reveal-in {
+ opacity: 1;
+ transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+ .ar-reveal,
+ .ar-animate-fade-in {
+  opacity: 1;
+  transform: none;
+  transition: none;
+  animation: none;
+ }
+}

package/src/components/timeline.css

@@ -1,4 +1,3 @@
-/* TIMELINE */
 .ar-timeline {
  display: flex;
  flex-direction: column;
@@ -31,4 +30,4 @@
 }
 .ar-timeline-item:last-child::after {
  display: none;
-}
+}

package/src/components/toast.css

@@ -1,4 +1,4 @@
-/* TOAST / SNACKBAR */
+/* TOAST / SNACKBAR */
 .ar-toast-container {
  position: fixed;
  z-index: 100;
@@ -131,4 +131,4 @@
  to {
   width: 0%;
  }
-}
+}

package/src/components/tooltip.css

@@ -1,4 +1,3 @@
-/* TOOLTIP */
 .ar-tooltip {
  position: relative;
 }
@@ -21,4 +20,4 @@
 }
 .ar-tooltip:hover[data-tip]::after {
  opacity: 1;
-}
+}

package/src/utilities/borders.css

@@ -1,4 +1,4 @@
-/* UTILITIES — border, radius, shadow, position, misc */
+/* UTILITIES — border, radius, shadow, position, misc */
 .ar-border {
  border: var(--ar-border-width) solid;
 }
@@ -149,4 +149,4 @@
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
-}
+}

package/src/utilities/brutalist-utilities.css

@@ -0,0 +1,49 @@
+.ar-brutalist-label {
+ font-family: var(--ar-font-mono);
+ font-size: 0.625rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--ar-gray-500);
+}
+
+.ar-brutalist-frame {
+ border: var(--ar-border-width) solid var(--ar-base-content);
+}
+
+.ar-brutalist-rule {
+ border-top: 3px solid var(--ar-base-content);
+}
+
+.ar-brutalist-primary {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-brutalist-secondary {
+ background: var(--ar-secondary);
+ color: var(--ar-secondary-content);
+}
+.ar-brutalist-accent {
+ background: var(--ar-accent);
+ color: var(--ar-accent-content);
+}
+.ar-brutalist-danger {
+ background: var(--ar-error);
+ color: var(--ar-error-content);
+}
+
+.ar-brutalist-text-primary {
+ color: var(--ar-primary-text);
+}
+.ar-brutalist-text-secondary {
+ color: var(--ar-secondary);
+}
+.ar-brutalist-text-accent {
+ color: var(--ar-accent);
+}
+.ar-brutalist-text-danger {
+ color: var(--ar-error);
+}
+.ar-brutalist-text-dark {
+ color: var(--ar-base-content);
+}