@justin_evo/evo-ui 1.2.0 → 1.2.1

package/src/css/tabs.module.scss

@@ -1,63 +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;
-}
+@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

@@ -1,83 +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%); }
-}
+@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

@@ -1,54 +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;
-}
+@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

@@ -1,97 +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;
-  }
-}
+@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;
+  }
+}