nexa-ui-kit 0.11.5 → 0.11.8

package/src/components/NPaginator.nexa

@@ -83,18 +83,15 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   background: var(--n-color-surface);
   font-family: var(--n-font-sans);
 }
-
 .n-paginator-report {
   color: var(--n-color-text-muted);
   font-size: var(--n-text-xs);
 }
-
 .n-paginator-center {
   display: flex;
   align-items: center;
   gap: var(--n-space-2);
 }
-
 .n-pg-btn {
   background: transparent;
   border: 1px solid var(--n-color-border);
@@ -102,31 +99,26 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   border-radius: var(--n-radius-md);
   padding: 0.3rem 0.55rem;
   cursor: pointer;
-  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);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-
 .n-pg-btn:hover:not(:disabled) {
   background: var(--n-color-glass);
   transform: scale(1.05);
 }
-
 .n-pg-btn:active:not(:disabled) {
   transform: scale(0.97);
 }
-
 .n-pg-btn:focus-visible {
   outline: 2px solid var(--n-color-primary);
   outline-offset: 2px;
 }
-
 .n-pg-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-
 .n-pg-page {
   min-width: 2.5rem;
   text-align: center;
@@ -138,7 +130,6 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   border-radius: var(--n-radius-md);
   line-height: 1.4;
 }
-
 .n-pg-select {
   background: var(--n-color-bg);
   border: 1px solid var(--n-color-border);
@@ -150,10 +141,10 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   cursor: pointer;
   transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
-
 .n-pg-select:focus-visible {
   border-color: var(--n-color-primary);
   outline: 2px solid var(--n-color-primary);
   outline-offset: 2px;
 }
+
 </style>

package/src/components/NPassword.nexa

@@ -176,4 +176,5 @@ const toggle = (e) => {
 .n-password-req-icon { width: 14px; display:inline-flex; justify-content:center; flex-shrink:0; }
 .n-password-wrapper.is-disabled { opacity: 0.5; cursor: not-allowed; background: var(--n-color-surface-alt); }
 .n-password-wrapper.is-disabled .n-password-input { cursor: not-allowed; }
+
 </style>

package/src/components/NProgressBar.nexa

@@ -36,19 +36,15 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   gap: var(--n-space-3);
   width: 100%;
 }
-
 .n-progress-track {
   flex: 1;
   background: var(--n-color-surface-alt);
   border-radius: var(--n-radius-full);
   overflow: hidden;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
 }
-
 .is-sm .n-progress-track { height: 8px; }
 .is-md .n-progress-track { height: 12px; }
 .is-lg .n-progress-track { height: 16px; }
-
 .n-progress-bar {
   height: 100%;
   border-radius: var(--n-radius-full);
@@ -60,13 +56,11 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   min-width: 0;
   box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
 }
-
 .is-primary { background: var(--n-color-primary); box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }
 .is-success { background: var(--n-color-success); box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
 .is-danger { background: var(--n-color-danger); box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
 .is-warning { background: var(--n-color-warning); box-shadow: 0 0 8px rgba(234, 179, 8, 0.3); }
 .is-info { background: var(--n-color-info); box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
-
 .n-progress-label {
   color: white;
   font-size: 0.65rem;
@@ -74,11 +68,9 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   white-space: nowrap;
   line-height: 1;
 }
-
 .is-lg .n-progress-label {
   font-size: var(--n-text-xs);
 }
-
 .n-progress-label-outside {
   font-size: var(--n-text-xs);
   font-weight: var(--n-weight-semibold);
@@ -87,7 +79,6 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   min-width: 3rem;
   text-align: right;
 }
-
 .is-striped .n-progress-bar {
   background-image: linear-gradient(
     45deg,
@@ -101,13 +92,12 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   );
   background-size: 1rem 1rem;
 }
-
 .is-animated .n-progress-bar {
   animation: n-progress-stripe 1s linear infinite;
 }
-
 @keyframes n-progress-stripe {
   from { background-position: 1rem 0; }
   to { background-position: 0 0; }
 }
+
 </style>

package/src/components/NRadio.nexa

@@ -34,7 +34,6 @@ const select = () => {
   cursor: pointer;
   user-select: none;
 }
-
 .n-radio-circle {
   width: 22px;
   height: 22px;
@@ -43,15 +42,13 @@ const select = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  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);
   flex-shrink: 0;
 }
-
 .is-checked .n-radio-circle {
   border-color: var(--n-color-primary);
   box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 12px rgba(99, 102, 241, 0.25);
 }
-
 .n-radio-dot {
   width: 11px;
   height: 11px;
@@ -59,24 +56,21 @@ const select = () => {
   background: var(--n-color-primary);
   animation: n-radio-dot-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
-
 @keyframes n-radio-dot-in {
   from { transform: scale(0); }
   to { transform: scale(1); }
 }
-
 .n-radio-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;
 }
-
 .n-radio:hover:not(.is-disabled) .n-radio-circle {
   border-color: var(--n-color-primary);
 }
+
 </style>

package/src/components/NScrollView.nexa

@@ -99,13 +99,11 @@ const onScroll = (e) => {
   overscroll-behavior: contain;
   position: relative;
 }
-
 .n-scroll-view--horizontal {
   overflow-y: hidden;
   overflow-x: auto;
   display: flex;
 }
-
 .n-scroll-view-ptr {
   display: flex;
   align-items: center;
@@ -113,11 +111,9 @@ const onScroll = (e) => {
   overflow: hidden;
   transition: height 0.1s;
 }
-
 .n-scroll-view-ptr.is-refreshing {
   height: 52px !important;
 }
-
 .n-scroll-view-spinner {
   font-size: 24px;
   color: var(--n-color-primary, #6366f1);
@@ -125,12 +121,11 @@ const onScroll = (e) => {
   line-height: 1;
   transform-origin: center;
 }
-
 .n-scroll-view-ptr.is-refreshing .n-scroll-view-spinner {
   animation: n-spin 0.8s linear infinite;
 }
-
 @keyframes n-spin {
   to { transform: rotate(360deg) scale(1); }
 }
+
 </style>

package/src/components/NSelect.nexa

@@ -277,7 +277,6 @@ onBeforeUnmount(() => {
   width: 100%;
   font-family: var(--n-font-sans);
 }
-
 .n-select-label {
   display: block;
   font-size: var(--n-text-sm);
@@ -285,7 +284,6 @@ onBeforeUnmount(() => {
   color: var(--n-color-text-secondary);
   margin-bottom: var(--n-space-2);
 }
-
 .n-select-trigger {
   background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
@@ -299,33 +297,27 @@ onBeforeUnmount(() => {
   color: var(--n-color-text);
   gap: var(--n-space-2);
 }
-
 .n-select-trigger:focus-visible {
   border-color: var(--n-color-primary);
   box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
   outline: none;
 }
-
 .n-select:hover .n-select-trigger:not(.is-disabled) {
   border-color: var(--n-color-border-hover);
 }
-
 .n-select.is-open .n-select-trigger {
   border-color: var(--n-color-primary);
   box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
 }
-
 .n-select-placeholder {
   color: var(--n-color-text-muted);
 }
-
 .n-select-trigger-actions {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   flex-shrink: 0;
 }
-
 .n-select-clear {
   background: transparent;
   border: none;
@@ -336,21 +328,17 @@ onBeforeUnmount(() => {
   border-radius: var(--n-radius-sm);
   line-height: 1;
 }
-
 .n-select-clear:hover {
   color: var(--n-color-text);
 }
-
 .n-select-arrow {
   color: var(--n-color-text-muted);
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   font-size: var(--n-text-xs);
 }
-
 .is-open .n-select-arrow {
   transform: rotate(180deg);
 }
-
 .n-select-dropdown {
   position: absolute;
   top: calc(100% + 0.5rem);
@@ -367,26 +355,21 @@ onBeforeUnmount(() => {
   animation: n-dropdown-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-
 @keyframes n-dropdown-in {
-  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from { opacity: 0;  scale(0.98); }
+  to { opacity: 1;  scale(1); }
 }
-
 .n-select-dropdown.is-top {
   animation: n-dropdown-in-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
-
 @keyframes n-dropdown-in-top {
-  from { opacity: 0; transform: translateY(6px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from { opacity: 0;  scale(0.98); }
+  to { opacity: 1;  scale(1); }
 }
-
 .n-select-search {
   padding: var(--n-space-2);
   border-bottom: 1px solid var(--n-color-border);
 }
-
 .n-select-search-input {
   width: 100%;
   background: var(--n-color-bg);
@@ -398,16 +381,13 @@ onBeforeUnmount(() => {
   outline: none;
   font-family: inherit;
 }
-
 .n-select-search-input:focus {
   border-color: var(--n-color-primary);
 }
-
 .n-select-options {
   max-height: 250px;
   overflow-y: auto;
 }
-
 .n-select-group-label {
   padding: var(--n-space-2) var(--n-space-3);
   font-size: var(--n-text-xs);
@@ -417,62 +397,55 @@ onBeforeUnmount(() => {
   letter-spacing: var(--n-tracking-wide);
   background: var(--n-color-bg);
 }
-
 .n-select-option {
   padding: 0.7rem 1rem;
   padding-left: 1rem;
   color: var(--n-color-text-secondary);
   cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
   letter-spacing: 0.01em;
   position: relative;
 }
-
 .n-select-option::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
-  transform: translateY(-50%) scaleY(0);
+   scaleY(0);
   width: 3px;
   height: 50%;
   background: var(--n-color-primary);
   border-radius: 0 3px 3px 0;
   transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
-
 .n-select-option:hover::before,
 .n-select-option.is-focused::before {
-  transform: translateY(-50%) scaleY(1);
+   scaleY(1);
 }
-
 .n-select-option:hover,
 .n-select-option.is-focused {
   background: var(--n-color-glass);
   color: var(--n-color-text);
   padding-left: 1.25rem;
 }
-
 .n-select-option.is-selected {
   background: var(--n-color-primary-light);
   color: var(--n-color-primary);
   font-weight: var(--n-weight-semibold);
 }
-
 .n-select-option.is-disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
-
 .n-select-empty {
   padding: var(--n-space-4);
   color: var(--n-color-text-muted);
   text-align: center;
   font-size: var(--n-text-sm);
 }
-
 .is-disabled .n-select-trigger {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 </style>

package/src/components/NSkeleton.nexa

@@ -31,46 +31,41 @@ const lineArray = Array.from({ length: props.lines || 3 }, (_, i) => i + 1)
   flex-direction: column;
   gap: var(--n-space-2);
 }
-
 .n-skeleton-line {
   height: 14px;
   border-radius: var(--n-radius-sm);
-  background: linear-gradient(90deg, var(--n-color-surface-alt) 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
+  background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
   background-size: 200% 100%;
   animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
 }
-
 .is-circle .n-skeleton-circle {
   width: 60px;
   height: 60px;
   border-radius: var(--n-radius-full);
-  background: linear-gradient(90deg, var(--n-color-surface-alt) 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
+  background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
   background-size: 200% 100%;
   animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
 }
-
 .is-card .n-skeleton-card {
   border-radius: var(--n-radius-lg);
   overflow: hidden;
   border: 1px solid var(--n-color-border);
 }
-
 .is-card .n-skeleton-card-image {
   height: 140px;
-  background: linear-gradient(90deg, var(--n-color-surface-alt) 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
+  background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
   background-size: 200% 100%;
   animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
 }
-
 .is-card .n-skeleton-card-body {
   padding: var(--n-space-5);
   display: flex;
   flex-direction: column;
   gap: var(--n-space-3);
 }
-
 @keyframes n-skeleton-shimmer {
   from { background-position: 200% 0; }
   to { background-position: -200% 0; }
 }
+
 </style>

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>