nexa-ui-kit 0.11.6 → 0.11.9

package/src/components/NSwitch.nexa

@@ -30,7 +30,6 @@ const toggle = () => {
   cursor: pointer;
   user-select: none;
 }
-
 .n-switch-track {
   width: 44px;
   height: 24px;
@@ -40,12 +39,10 @@ const toggle = () => {
   transition: all var(--n-transition-normal);
   flex-shrink: 0;
 }
-
 .is-checked .n-switch-track {
   background: var(--n-color-primary);
   box-shadow: var(--n-shadow-glow-primary);
 }
-
 .n-switch-thumb {
   width: 18px;
   height: 18px;
@@ -58,21 +55,19 @@ const toggle = () => {
   box-shadow: var(--n-shadow-md);
   will-change: transform;
 }
-
 .is-checked .n-switch-thumb {
   transform: translateX(20px);
   background: white;
   box-shadow: var(--n-shadow-md);
 }
-
 .n-switch-label {
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
   font-weight: var(--n-weight-medium);
 }
-
 .is-disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 </style>

package/src/components/NTabs.nexa

@@ -50,13 +50,11 @@ const activeIndex = computed(() =>
   gap: var(--n-space-6);
   width: 100%;
 }
-
 .n-tabs-header {
   display: flex;
   position: relative;
   border-bottom: 1px solid var(--n-color-border);
 }
-
 .n-tab {
   flex: 1;
   padding: var(--n-space-3) var(--n-space-5);
@@ -74,31 +72,24 @@ const activeIndex = computed(() =>
   white-space: nowrap;
   border-radius: var(--n-radius-sm) var(--n-radius-sm) 0 0;
 }
-
 .n-tab:hover:not(.is-active):not(.is-disabled) {
   color: var(--n-color-text);
   background: var(--n-color-glass);
 }
-
 .n-tab:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px var(--n-color-primary);
 }
-
 .n-tab.is-active {
   color: var(--n-color-primary);
   font-weight: var(--n-weight-semibold);
 }
-
 .n-tab.is-disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
-
 .n-tab-icon {
   font-size: var(--n-text-base);
 }
-
 .n-tab-badge {
   background: var(--n-color-primary);
   color: white;
@@ -108,7 +99,6 @@ const activeIndex = computed(() =>
   border-radius: var(--n-radius-full);
   line-height: 1.2;
 }
-
 .n-tabs-indicator {
   position: absolute;
   bottom: -1px;
@@ -116,6 +106,6 @@ const activeIndex = computed(() =>
   background: var(--n-color-primary);
   transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   border-radius: var(--n-radius-full);
-  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
 }
+
 </style>

package/src/components/NTag.nexa

@@ -31,50 +31,41 @@ const emit = defineEmits(['close'])
   border: 1px solid transparent;
   letter-spacing: 0.02em;
 }
-
 .n-tag.is-rounded {
   border-radius: var(--n-radius-full);
 }
-
 .n-tag-sm { padding: 0.15rem 0.5rem; font-size: 0.65rem; }
 .n-tag-lg { padding: 0.4rem 0.9rem; font-size: var(--n-text-sm); }
-
 .n-tag-primary {
   background: var(--n-color-primary-light);
   border-color: var(--n-color-primary-border);
   color: var(--n-color-primary);
 }
-
 .n-tag-success {
   background: var(--n-color-success-light);
   border-color: var(--n-color-success-border);
   color: var(--n-color-success);
 }
-
 .n-tag-danger {
   background: var(--n-color-danger-light);
   border-color: var(--n-color-danger-border);
   color: var(--n-color-danger);
 }
-
 .n-tag-warning {
   background: var(--n-color-warning-light);
   border-color: var(--n-color-warning-border);
   color: var(--n-color-warning);
 }
-
 .n-tag-info {
   background: var(--n-color-info-light);
   border-color: var(--n-color-info-border);
   color: var(--n-color-info);
 }
-
 .n-tag-secondary {
   background: var(--n-color-surface-alt);
   border-color: var(--n-color-border);
   color: var(--n-color-text-secondary);
 }
-
 .n-tag-close {
   background: transparent;
   border: none;
@@ -85,7 +76,7 @@ const emit = defineEmits(['close'])
   margin-left: var(--n-space-1);
   color: inherit;
   opacity: 0.5;
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
   border-radius: var(--n-radius-sm);
   display: flex;
   align-items: center;
@@ -93,10 +84,10 @@ const emit = defineEmits(['close'])
   width: 18px;
   height: 18px;
 }
-
 .n-tag-close:hover {
   opacity: 1;
   background: rgba(0,0,0,0.08);
   transform: scale(1.15);
 }
+
 </style>

package/src/components/NToastContainer.nexa

@@ -46,40 +46,34 @@ const positionClass = `is-${props.position.replace('-', '-')}`
   pointer-events: none;
   padding: var(--n-space-4);
 }
-
 .is-top-right {
   top: 0;
   right: 0;
   align-items: flex-end;
 }
-
 .is-top-left {
   top: 0;
   left: 0;
   align-items: flex-start;
 }
-
 .is-bottom-right {
   bottom: 0;
   right: 0;
   align-items: flex-end;
   flex-direction: column-reverse;
 }
-
 .is-bottom-left {
   bottom: 0;
   left: 0;
   align-items: flex-start;
   flex-direction: column-reverse;
 }
-
 .is-top-center {
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
-
 .n-toast {
   pointer-events: auto;
   min-width: 300px;
@@ -91,21 +85,18 @@ const positionClass = `is-${props.position.replace('-', '-')}`
   box-shadow: var(--n-shadow-lg), 0 8px 32px rgba(0, 0, 0, 0.08);
   cursor: pointer;
   animation: n-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
   backdrop-filter: blur(16px);
   border-left: 3px solid var(--n-color-border);
 }
-
 .is-success { border-left-color: var(--n-color-success); }
 .is-error { border-left-color: var(--n-color-danger); }
 .is-info { border-left-color: var(--n-color-primary); }
 .is-warning { border-left-color: var(--n-color-warning); }
-
 .n-toast:hover {
   transform: scale(1.02);
   background: var(--n-color-surface-alt);
 }
-
 @keyframes n-toast-in {
   from {
     opacity: 0;
@@ -116,11 +107,9 @@ const positionClass = `is-${props.position.replace('-', '-')}`
     transform: translateX(0) scale(1);
   }
 }
-
 .is-top-left .n-toast {
   animation-name: n-toast-in-left;
 }
-
 @keyframes n-toast-in-left {
   from {
     opacity: 0;
@@ -131,30 +120,26 @@ const positionClass = `is-${props.position.replace('-', '-')}`
     transform: translateX(0) scale(1);
   }
 }
-
 .is-bottom-right .n-toast,
 .is-bottom-left .n-toast {
   animation-name: n-toast-in-up;
 }
-
 @keyframes n-toast-in-up {
   from {
     opacity: 0;
-    transform: translateY(20px) scale(0.95);
+     scale(0.95);
   }
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
+     scale(1);
   }
 }
-
 .n-toast-body {
   display: flex;
   align-items: center;
   gap: var(--n-space-3);
   padding: var(--n-space-4) var(--n-space-5);
 }
-
 .n-toast-icon {
   width: 28px;
   height: 28px;
@@ -166,12 +151,10 @@ const positionClass = `is-${props.position.replace('-', '-')}`
   font-weight: var(--n-weight-extrabold);
   flex-shrink: 0;
 }
-
 .is-success .n-toast-icon { background: var(--n-color-success); color: white; }
 .is-error .n-toast-icon { background: var(--n-color-danger); color: white; }
 .is-info .n-toast-icon { background: var(--n-color-primary); color: white; }
 .is-warning .n-toast-icon { background: var(--n-color-warning); color: white; }
-
 .n-toast-message {
   color: var(--n-color-text);
   font-size: var(--n-text-sm);
@@ -179,7 +162,6 @@ const positionClass = `is-${props.position.replace('-', '-')}`
   flex: 1;
   line-height: var(--n-leading-normal);
 }
-
 .n-toast-dismiss {
   background: transparent;
   border: none;
@@ -192,22 +174,18 @@ const positionClass = `is-${props.position.replace('-', '-')}`
   transition: opacity var(--n-transition-fast);
   flex-shrink: 0;
 }
-
 .n-toast:hover .n-toast-dismiss {
   opacity: 1;
 }
-
 .n-toast-dismiss:hover {
   color: var(--n-color-text);
 }
-
 .n-toast-progress {
   height: 3px;
   background: var(--n-color-border);
   position: relative;
   overflow: hidden;
 }
-
 .n-toast-progress::after {
   content: '';
   position: absolute;
@@ -218,14 +196,13 @@ const positionClass = `is-${props.position.replace('-', '-')}`
   background: currentColor;
   animation: n-toast-shrink linear forwards;
 }
-
 .is-success .n-toast-progress::after { background: var(--n-color-success); }
 .is-error .n-toast-progress::after { background: var(--n-color-danger); }
 .is-info .n-toast-progress::after { background: var(--n-color-primary); }
 .is-warning .n-toast-progress::after { background: var(--n-color-warning); }
-
 @keyframes n-toast-shrink {
   from { transform: scaleX(1); }
   to { transform: scaleX(0); }
 }
+
 </style>

package/src/components/NTooltip.nexa

@@ -93,7 +93,6 @@ const hide = () => {
 .n-tooltip-wrapper {
   display: inline-block;
 }
-
 .n-tooltip {
   background: var(--n-color-glass);
   color: var(--n-color-text);
@@ -109,59 +108,48 @@ const hide = () => {
   animation: n-tooltip-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   backdrop-filter: blur(12px);
 }
-
 @keyframes n-tooltip-in {
   from { opacity: 0; transform: scale(0.95); }
   to { opacity: 1; transform: scale(1); }
 }
-
 .is-top {
   transform-origin: bottom center;
 }
-
 .is-bottom {
   transform-origin: top center;
 }
-
 .is-left {
   transform-origin: center right;
 }
-
 .is-right {
   transform-origin: center left;
 }
-
 .n-tooltip::after {
   content: '';
   position: absolute;
   border: 5px solid transparent;
 }
-
 .is-top::after {
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border-top-color: var(--n-color-border);
 }
-
 .is-bottom::after {
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   border-bottom-color: var(--n-color-border);
 }
-
 .is-left::after {
   left: 100%;
   top: 50%;
-  transform: translateY(-50%);
   border-left-color: var(--n-color-border);
 }
-
 .is-right::after {
   right: 100%;
   top: 50%;
-  transform: translateY(-50%);
   border-right-color: var(--n-color-border);
 }
+
 </style>

package/src/components/NTreeMenu.nexa

@@ -74,17 +74,14 @@ const toggle = (id, e) => {
   font-size: var(--n-text-sm);
   user-select: none;
 }
-
 .n-tree-item {
   --n-tree-depth: 0;
   position: relative;
   margin-bottom: 1px;
 }
-
 .n-tree-item:last-child {
   margin-bottom: 0;
 }
-
 /* Líneas conectoras verticales */
 .n-tree-item:not([style*="--n-tree-depth: 0"])::before {
   content: '';
@@ -96,7 +93,6 @@ const toggle = (id, e) => {
   background: var(--n-color-border);
   opacity: 0.35;
 }
-
 .n-tree-row {
   display: flex;
   align-items: center;
@@ -109,7 +105,6 @@ const toggle = (id, e) => {
   color: var(--n-color-text);
   position: relative;
 }
-
 /* Línea conectora horizontal */
 .n-tree-item:not([style*="--n-tree-depth: 0"]) .n-tree-row::before {
   content: '';
@@ -121,21 +116,17 @@ const toggle = (id, e) => {
   background: var(--n-color-border);
   opacity: 0.35;
 }
-
 .n-tree-row:hover {
-  background: linear-gradient(135deg, var(--n-color-surface-hover), color-mix(in srgb, var(--n-color-surface-hover) 85%, var(--n-color-primary) 5%));
+  background-color: var(--n-color-surface-hover);
 }
-
 .n-tree-row:active {
   background: color-mix(in srgb, var(--n-color-surface-hover) 80%, var(--n-color-text) 5%);
 }
-
 .n-tree-item.is-selected > .n-tree-row {
   background: var(--n-color-primary-light);
   color: var(--n-color-primary);
   font-weight: var(--n-weight-semibold);
 }
-
 .n-tree-item.is-selected > .n-tree-row::after {
   content: '';
   position: absolute;
@@ -146,7 +137,6 @@ const toggle = (id, e) => {
   background: var(--n-color-primary);
   border-radius: 0 var(--n-radius-sm) var(--n-radius-sm) 0;
 }
-
 .n-tree-toggle {
   background: var(--n-color-glass);
   border: 1px solid var(--n-color-border);
@@ -162,47 +152,38 @@ const toggle = (id, e) => {
   transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   flex-shrink: 0;
 }
-
 .n-tree-toggle:hover {
   background: color-mix(in srgb, var(--n-color-primary-light) 80%, var(--n-color-primary) 10%);
   border-color: var(--n-color-primary);
   color: var(--n-color-primary);
   transform: scale(1.05);
 }
-
 .n-tree-toggle:active {
   transform: scale(0.95);
 }
-
 .n-tree-toggle:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--n-color-background), 0 0 0 4px var(--n-color-primary);
   z-index: 1;
 }
-
 .n-tree-row:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px var(--n-color-primary);
   border-radius: var(--n-radius-md);
 }
-
 .n-tree-toggle-icon {
   font-size: 1rem;
   line-height: 1;
   font-weight: 700;
 }
-
 .n-tree-toggle-placeholder {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
 }
-
 .n-tree-icon {
   font-size: 1.1rem;
   flex-shrink: 0;
 }
-
 .n-tree-label {
   flex: 1;
   min-width: 0;
@@ -212,9 +193,9 @@ const toggle = (id, e) => {
   font-weight: var(--n-weight-medium);
   letter-spacing: 0.01em;
 }
-
 .n-tree-item.is-selected .n-tree-label {
   font-weight: var(--n-weight-bold);
   letter-spacing: 0;
 }
+
 </style>

package/src/components/NVirtualList.nexa

@@ -83,12 +83,11 @@ const onScroll = (e) => {
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
 }
-
 .n-virtual-list-spacer {
   position: relative;
 }
-
 .n-virtual-list-row {
   box-sizing: border-box;
 }
+
 </style>