@justin_evo/evo-ui 1.0.1

package/src/css/table.module.scss

@@ -0,0 +1,386 @@
+@use './base/variables' as *;
+@use './base/color' as *;
+
+// ==========================================================
+// EVO-UI TABLE
+// ----------------------------------------------------------
+// A lightweight, theme-aware data table.
+// - Horizontal rules only — no busy vertical grid lines.
+// - Density variants (sm/md/lg) tune padding + type scale.
+// - Sticky headers, striped rows, sortable columns, and a
+//   loading skeleton state — all opt-in.
+// - Two responsive modes for narrow viewports:
+//     `scroll`  — thin overflow scrollbar
+//     `stack`   — rows collapse into labelled cards
+// ==========================================================
+
+.wrapper {
+  width: 100%;
+  background-color: $color-surface-elevated;
+  border: 1px solid $color-border;
+  border-radius: $evo-border-radius-lg;
+  font-family: $font-sans;
+  color: $color-text-primary;
+  // Clip rounded corners against the inner scroll container.
+  overflow: hidden;
+}
+
+.scroll {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-color: $color-border-strong transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: $color-border-strong;
+    border-radius: $radius-full;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: $text-sm;
+  font-variant-numeric: tabular-nums;
+}
+
+.caption {
+  caption-side: top;
+  text-align: left;
+  padding: 0.75rem 1rem 0;
+  color: $color-text-secondary;
+  font-size: $text-xs;
+}
+
+// ----- Header --------------------------------------------------
+.thead {
+  background-color: $color-surface-sunken;
+}
+
+.th {
+  padding: 0.625rem 1rem;
+  text-align: left;
+  font-size: $text-xs;
+  font-weight: 600;
+  color: $color-text-secondary;
+  white-space: nowrap;
+  border-bottom: 1px solid $color-border;
+  vertical-align: middle;
+  letter-spacing: 0.01em;
+  user-select: none;
+}
+
+.sortBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: $radius-sm;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $color-text-primary;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 2px;
+  }
+}
+
+.sortIcon {
+  display: inline-flex;
+  color: $color-text-muted;
+  flex-shrink: 0;
+  transition: color $transition-fast;
+}
+
+.sortActive {
+  color: $color-text-primary;
+
+  .sortIcon {
+    color: $evo-primary-color;
+  }
+}
+
+// ----- Body ----------------------------------------------------
+.tbody {
+  .tr {
+    transition: background-color $transition-fast;
+  }
+}
+
+.td {
+  padding: 0.75rem 1rem;
+  color: $color-text-primary;
+  vertical-align: middle;
+  border-bottom: 1px solid $color-border-subtle;
+  text-align: left;
+}
+
+// Drop the last row border so it tucks cleanly into the rounded wrapper.
+.tbody .tr:last-child .td {
+  border-bottom: 0;
+}
+
+// ----- Alignment ----------------------------------------------
+.align-left {
+  text-align: left;
+}
+.align-center {
+  text-align: center;
+}
+.align-right {
+  text-align: right;
+}
+
+// Sort buttons are inline-flex — `text-align` doesn't reach them.
+.align-center .sortBtn {
+  width: 100%;
+  justify-content: center;
+}
+.align-right .sortBtn {
+  width: 100%;
+  justify-content: flex-end;
+}
+
+// ----- Density -------------------------------------------------
+.size-sm {
+  .table {
+    font-size: $text-xs;
+  }
+  .th {
+    padding: 0.375rem 0.75rem;
+  }
+  .td {
+    padding: 0.5rem 0.75rem;
+  }
+}
+
+.size-md {
+  .table {
+    font-size: $text-sm;
+  }
+  .th {
+    padding: 0.625rem 1rem;
+  }
+  .td {
+    padding: 0.75rem 1rem;
+  }
+}
+
+.size-lg {
+  .table {
+    font-size: $text-base;
+  }
+  .th {
+    padding: 0.875rem 1.25rem;
+  }
+  .td {
+    padding: 1rem 1.25rem;
+  }
+}
+
+// ----- Modifiers ----------------------------------------------
+.hoverable .tbody .tr:hover {
+  background-color: $color-surface-hover;
+}
+
+.striped .tbody .tr:nth-child(even) {
+  background-color: $color-surface-sunken;
+}
+
+// Hover wins over stripe.
+.striped.hoverable .tbody .tr:nth-child(even):hover {
+  background-color: $color-surface-hover;
+}
+
+.bordered {
+  .th,
+  .td {
+    &:not(:last-child) {
+      border-right: 1px solid $color-border-subtle;
+    }
+  }
+}
+
+.stickyHeader {
+  .scroll {
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+  .thead .th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: $color-surface-sunken;
+  }
+}
+
+.clickable .tbody .tr {
+  cursor: pointer;
+
+  &:active {
+    background-color: $color-surface-active;
+  }
+}
+
+// ----- Empty + Skeleton ---------------------------------------
+.empty {
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: $color-text-muted;
+  font-size: $text-sm;
+}
+
+.emptyText {
+  display: inline-block;
+}
+
+.skeleton {
+  display: block;
+  height: 0.75rem;
+  width: 70%;
+  border-radius: $radius-sm;
+  background: linear-gradient(
+    90deg,
+    $color-skeleton-base 0%,
+    $color-skeleton-highlight 50%,
+    $color-skeleton-base 100%
+  );
+  background-size: 200% 100%;
+  animation: evoTableShimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes evoTableShimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
+
+// ----- Responsive: stack mode ---------------------------------
+// Below ~640px, transform rows into vertical "cards" where each
+// cell becomes a labelled row. The visual header is removed
+// (kept in DOM, hidden visually, for screen readers).
+.responsiveStack {
+  @media (max-width: 640px) {
+    border: 0;
+    background: transparent;
+    overflow: visible;
+
+    .scroll {
+      overflow: visible;
+    }
+
+    .table,
+    .tbody,
+    .tr {
+      display: block;
+      width: 100%;
+    }
+
+    .thead {
+      // Screen-reader-only — keeps semantics while removing visuals.
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .tbody .tr {
+      background-color: $color-surface-elevated;
+      border: 1px solid $color-border;
+      border-radius: $evo-border-radius-lg;
+      padding: 0.25rem 0;
+      margin-bottom: 0.75rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      // Empty-state row should look like a single full-width card, not
+      // a normal data row with internal padding.
+      &.emptyRow {
+        padding: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    .td {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.625rem 1rem;
+      border-bottom: 1px dashed $color-border-subtle;
+      text-align: right;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      &::before {
+        content: attr(data-label);
+        font-size: $text-xs;
+        font-weight: 600;
+        color: $color-text-secondary;
+        letter-spacing: 0.02em;
+        text-align: left;
+        flex-shrink: 0;
+      }
+    }
+
+    // Vertical dividers don't apply in stack mode.
+    &.bordered .td:not(:last-child) {
+      border-right: 0;
+    }
+
+    // Reset stripe/hover on the card layout — each row is its own card.
+    &.striped .tbody .tr:nth-child(even),
+    &.hoverable .tbody .tr:hover {
+      background-color: $color-surface-elevated;
+    }
+
+    // In stack mode the empty cell is the only td in its row.
+    // Reset it back to a block so the message stays centred.
+    .empty {
+      display: block;
+      text-align: center;
+      padding: 2.5rem 1rem;
+      border-bottom: 0;
+
+      &::before {
+        content: none;
+      }
+    }
+  }
+}

package/src/css/tabs.module.scss

@@ -0,0 +1,63 @@
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+.tabs {
+  width: 100%;
+  font-family: $font-sans;
+}
+
+.tabList {
+  display: flex;
+  gap: 0.125rem;
+  border-bottom: 1px solid $color-border;
+}
+
+.tab {
+  position: relative;
+  padding: 0.5rem 1rem;
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $color-text-secondary;
+  background: transparent;
+  border: none;
+  border-radius: $radius-sm $radius-sm 0 0;
+  cursor: pointer;
+  transition: color $transition-fast, background-color $transition-fast;
+  font-family: $font-sans;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: transparent;
+    transition: background-color $transition-fast;
+    border-radius: 2px 2px 0 0;
+  }
+
+  &:hover:not(.disabled):not(.active) {
+    color: $color-text-primary;
+    background-color: $color-surface-hover;
+  }
+
+  &.active {
+    color: $evo-primary-color;
+    &::after { background-color: $evo-primary-color; }
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.tabPanel {
+  padding: 1.25rem 0;
+  color: $color-text-secondary;
+  font-size: $text-sm;
+  line-height: 1.6;
+  font-family: $font-sans;
+}

package/src/css/theme-toggle.module.scss

@@ -0,0 +1,83 @@
+@use 'base/variables' as *;
+
+// ==========================================================
+// Theme toggle — animated sun/moon switch.
+// All colors come from theme tokens so it auto-themes itself.
+// ==========================================================
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 3px;
+    border-radius: $radius-full;
+  }
+}
+
+.track {
+  position: relative;
+  display: inline-block;
+  background: $color-surface-elevated;
+  border: 1px solid $color-border;
+  border-radius: $radius-full;
+  transition: background-color $transition-fast, border-color $transition-fast;
+  overflow: hidden;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $color-background;
+  color: $evo-primary-color;
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
+  transition: transform $transition-normal cubic-bezier(0.34, 1.56, 0.64, 1),
+              background-color $transition-fast;
+
+  svg {
+    position: absolute;
+    width: 60%;
+    height: 60%;
+    transition: opacity $transition-fast ease, transform $transition-normal ease;
+  }
+}
+
+// Sun visible in light, moon visible in dark
+.sun  { opacity: 1; transform: rotate(0); }
+.moon { opacity: 0; transform: rotate(-90deg); }
+
+[data-theme-state='dark'] {
+  .sun  { opacity: 0; transform: rotate(90deg); }
+  .moon { opacity: 1; transform: rotate(0); }
+}
+
+// ---- Sizes ----
+.sm {
+  .track { width: 36px; height: 20px; }
+  .thumb { width: 16px; height: 16px; left: 2px; }
+  &[data-theme-state='dark'] .thumb { transform: translate(16px, -50%); }
+}
+.md {
+  .track { width: 48px; height: 26px; }
+  .thumb { width: 22px; height: 22px; left: 2px; }
+  &[data-theme-state='dark'] .thumb { transform: translate(22px, -50%); }
+}
+.lg {
+  .track { width: 60px; height: 32px; }
+  .thumb { width: 28px; height: 28px; left: 2px; }
+  &[data-theme-state='dark'] .thumb { transform: translate(28px, -50%); }
+}

package/src/css/toggle.module.scss

@@ -0,0 +1,54 @@
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+.toggleWrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-family: $font-sans;
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.hiddenInput {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.track {
+  position: relative;
+  display: inline-block;
+  background-color: $color-border-strong;
+  border-radius: $radius-full;
+  transition: background-color $transition-fast;
+  flex-shrink: 0;
+
+  &.sm { width: 1.75rem; height: 1rem; }
+  &.md { width: 2.25rem; height: 1.25rem; }
+  &.lg { width: 2.75rem; height: 1.5rem; }
+
+  &.on { background-color: $evo-primary-color; }
+}
+
+.thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  background-color: $color-background;
+  border-radius: 50%;
+  transition: transform $transition-fast;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
+}
+
+.label {
+  font-size: $text-sm;
+  color: $color-text-primary;
+  user-select: none;
+}

package/src/css/tooltip.module.scss

@@ -0,0 +1,97 @@
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+@keyframes tooltipFadeIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 9000;
+  padding: 0.375rem 0.625rem;
+  background-color: $color-surface-elevated;
+  color: $color-text-primary;
+  font-size: $text-xs;
+  font-family: $font-sans;
+  border-radius: $radius-sm;
+  white-space: nowrap;
+  box-shadow: $shadow-lg;
+  border: 1px solid $color-border;
+  pointer-events: none;
+  animation: tooltipFadeIn 150ms ease;
+  line-height: 1.4;
+
+  &.top {
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.bottom {
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.left {
+    right: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &.right {
+    left: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+
+  .top & {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top-color: $color-surface-elevated;
+    border-bottom: none;
+    border-top-width: 5px;
+  }
+
+  .bottom & {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-color: $color-surface-elevated;
+    border-top: none;
+    border-bottom-width: 5px;
+  }
+
+  .left & {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left-color: $color-surface-elevated;
+    border-right: none;
+    border-left-width: 5px;
+  }
+
+  .right & {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-right-color: $color-surface-elevated;
+    border-left: none;
+    border-right-width: 5px;
+  }
+}