nexa-ui-kit 0.11.6 → 0.11.8

package/dist/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/dist/components/NSelect.js

@@ -298,7 +298,6 @@ const __style = `.n-select[data-v-2dd8d436]{
   width: 100%;
   font-family: var(--n-font-sans);
 }
-
 .n-select-label[data-v-2dd8d436]{
   display: block;
   font-size: var(--n-text-sm);
@@ -306,7 +305,6 @@ const __style = `.n-select[data-v-2dd8d436]{
   color: var(--n-color-text-secondary);
   margin-bottom: var(--n-space-2);
 }
-
 .n-select-trigger[data-v-2dd8d436]{
   background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
@@ -320,33 +318,27 @@ const __style = `.n-select[data-v-2dd8d436]{
   color: var(--n-color-text);
   gap: var(--n-space-2);
 }
-
 .n-select-trigger[data-v-2dd8d436]: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[data-v-2dd8d436]:hover .n-select-trigger:not(.is-disabled){
   border-color: var(--n-color-border-hover);
 }
-
 .n-select.is-open .n-select-trigger[data-v-2dd8d436]{
   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[data-v-2dd8d436]{
   color: var(--n-color-text-muted);
 }
-
 .n-select-trigger-actions[data-v-2dd8d436]{
   display: flex;
   align-items: center;
   gap: 0.25rem;
   flex-shrink: 0;
 }
-
 .n-select-clear[data-v-2dd8d436]{
   background: transparent;
   border: none;
@@ -357,21 +349,17 @@ const __style = `.n-select[data-v-2dd8d436]{
   border-radius: var(--n-radius-sm);
   line-height: 1;
 }
-
 .n-select-clear[data-v-2dd8d436]:hover{
   color: var(--n-color-text);
 }
-
 .n-select-arrow[data-v-2dd8d436]{
   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[data-v-2dd8d436]{
   transform: rotate(180deg);
 }
-
 .n-select-dropdown[data-v-2dd8d436]{
   position: absolute;
   top: calc(100% + 0.5rem);
@@ -388,26 +376,21 @@ const __style = `.n-select[data-v-2dd8d436]{
   animation: n-dropdown-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-
 @keyframes n-dropdown-in {
-from[data-v-2dd8d436]{ opacity: 0; transform: translateY(-6px) scale(0.98); }
-to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0) scale(1); }
+from[data-v-2dd8d436]{ opacity: 0;  scale(0.98); }
+to[data-v-2dd8d436]{ opacity: 1;  scale(1); }
 }
-
 .n-select-dropdown.is-top[data-v-2dd8d436]{
   animation: n-dropdown-in-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
-
 @keyframes n-dropdown-in-top {
-from[data-v-2dd8d436]{ opacity: 0; transform: translateY(6px) scale(0.98); }
-to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0) scale(1); }
+from[data-v-2dd8d436]{ opacity: 0;  scale(0.98); }
+to[data-v-2dd8d436]{ opacity: 1;  scale(1); }
 }
-
 .n-select-search[data-v-2dd8d436]{
   padding: var(--n-space-2);
   border-bottom: 1px solid var(--n-color-border);
 }
-
 .n-select-search-input[data-v-2dd8d436]{
   width: 100%;
   background: var(--n-color-bg);
@@ -419,16 +402,13 @@ to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0) scale(1); }
   outline: none;
   font-family: inherit;
 }
-
 .n-select-search-input[data-v-2dd8d436]:focus{
   border-color: var(--n-color-primary);
 }
-
 .n-select-options[data-v-2dd8d436]{
   max-height: 250px;
   overflow-y: auto;
 }
-
 .n-select-group-label[data-v-2dd8d436]{
   padding: var(--n-space-2) var(--n-space-3);
   font-size: var(--n-text-xs);
@@ -438,60 +418,52 @@ to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0) scale(1); }
   letter-spacing: var(--n-tracking-wide);
   background: var(--n-color-bg);
 }
-
 .n-select-option[data-v-2dd8d436]{
   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[data-v-2dd8d436]::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[data-v-2dd8d436]:hover::before, 
 .n-select-option.is-focused[data-v-2dd8d436]::before{
-  transform: translateY(-50%) scaleY(1);
+   scaleY(1);
 }
-
 .n-select-option[data-v-2dd8d436]:hover, 
 .n-select-option.is-focused[data-v-2dd8d436]{
   background: var(--n-color-glass);
   color: var(--n-color-text);
   padding-left: 1.25rem;
 }
-
 .n-select-option.is-selected[data-v-2dd8d436]{
   background: var(--n-color-primary-light);
   color: var(--n-color-primary);
   font-weight: var(--n-weight-semibold);
 }
-
 .n-select-option.is-disabled[data-v-2dd8d436]{
   opacity: 0.4;
   cursor: not-allowed;
 }
-
 .n-select-empty[data-v-2dd8d436]{
   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[data-v-2dd8d436]{
   opacity: 0.5;
   cursor: not-allowed;

package/dist/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/dist/components/NSkeleton.js

@@ -53,44 +53,38 @@ const __style = `.n-skeleton[data-v-6b9116c8]{
   flex-direction: column;
   gap: var(--n-space-2);
 }
-
 .n-skeleton-line[data-v-6b9116c8]{
   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[data-v-6b9116c8]{
   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[data-v-6b9116c8]{
   border-radius: var(--n-radius-lg);
   overflow: hidden;
   border: 1px solid var(--n-color-border);
 }
-
 .is-card .n-skeleton-card-image[data-v-6b9116c8]{
   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[data-v-6b9116c8]{ background-position: 200% 0; }
 to[data-v-6b9116c8]{ background-position: -200% 0; }

package/dist/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/dist/components/NSwitch.js

@@ -46,7 +46,6 @@ const __style = `.n-switch[data-v-3cd56cb4]{
   cursor: pointer;
   user-select: none;
 }
-
 .n-switch-track[data-v-3cd56cb4]{
   width: 44px;
   height: 24px;
@@ -56,12 +55,10 @@ const __style = `.n-switch[data-v-3cd56cb4]{
   transition: all var(--n-transition-normal);
   flex-shrink: 0;
 }
-
 .is-checked .n-switch-track[data-v-3cd56cb4]{
   background: var(--n-color-primary);
   box-shadow: var(--n-shadow-glow-primary);
 }
-
 .n-switch-thumb[data-v-3cd56cb4]{
   width: 18px;
   height: 18px;
@@ -74,19 +71,16 @@ const __style = `.n-switch[data-v-3cd56cb4]{
   box-shadow: var(--n-shadow-md);
   will-change: transform;
 }
-
 .is-checked .n-switch-thumb[data-v-3cd56cb4]{
   transform: translateX(20px);
   background: white;
   box-shadow: var(--n-shadow-md);
 }
-
 .n-switch-label[data-v-3cd56cb4]{
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
   font-weight: var(--n-weight-medium);
 }
-
 .is-disabled[data-v-3cd56cb4]{
   opacity: 0.5;
   cursor: not-allowed;

package/dist/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/dist/components/NTabs.js

@@ -66,13 +66,11 @@ const __style = `.n-tabs[data-v-339e5ee5]{
   gap: var(--n-space-6);
   width: 100%;
 }
-
 .n-tabs-header[data-v-339e5ee5]{
   display: flex;
   position: relative;
   border-bottom: 1px solid var(--n-color-border);
 }
-
 .n-tab[data-v-339e5ee5]{
   flex: 1;
   padding: var(--n-space-3) var(--n-space-5);
@@ -90,31 +88,24 @@ const __style = `.n-tabs[data-v-339e5ee5]{
   white-space: nowrap;
   border-radius: var(--n-radius-sm) var(--n-radius-sm) 0 0;
 }
-
 .n-tab[data-v-339e5ee5]:hover:not(.is-active):not(.is-disabled){
   color: var(--n-color-text);
   background: var(--n-color-glass);
 }
-
 .n-tab[data-v-339e5ee5]:focus-visible{
   outline: none;
-  box-shadow: inset 0 0 0 2px var(--n-color-primary);
 }
-
 .n-tab.is-active[data-v-339e5ee5]{
   color: var(--n-color-primary);
   font-weight: var(--n-weight-semibold);
 }
-
 .n-tab.is-disabled[data-v-339e5ee5]{
   opacity: 0.4;
   cursor: not-allowed;
 }
-
 .n-tab-icon[data-v-339e5ee5]{
   font-size: var(--n-text-base);
 }
-
 .n-tab-badge[data-v-339e5ee5]{
   background: var(--n-color-primary);
   color: white;
@@ -124,7 +115,6 @@ const __style = `.n-tabs[data-v-339e5ee5]{
   border-radius: var(--n-radius-full);
   line-height: 1.2;
 }
-
 .n-tabs-indicator[data-v-339e5ee5]{
   position: absolute;
   bottom: -1px;
@@ -132,6 +122,5 @@ const __style = `.n-tabs[data-v-339e5ee5]{
   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);
 }`
 injectStyle('data-v-339e5ee5', __style)