nexa-ui-kit 0.11.4 → 0.11.6

package/dist/components/NButton.nexa

@@ -67,9 +67,10 @@ const btnClass = computed(() => {
   gap: var(--n-space-2);
   font-family: var(--n-font-sans);
   font-weight: var(--n-weight-semibold);
+  letter-spacing: 0.01em;
   border-radius: var(--n-radius-md);
   cursor: pointer;
-  transition: all var(--n-transition-normal);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   border: 1px solid transparent;
   outline: none;
   white-space: nowrap;
@@ -78,16 +79,18 @@ const btnClass = computed(() => {
   text-decoration: none;
   line-height: var(--n-leading-normal, 1.5);
   min-width: fit-content;
+  will-change: transform;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .n-btn:focus-visible {
-  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+  box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 0 1px var(--n-color-primary);
 }
 
 /* Sizes */
-.n-btn-sm { padding: 0.5rem 1.25rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 32px; }
-.n-btn-md { padding: 0.65rem 1.75rem; font-size: var(--n-text-base); min-height: 40px; }
-.n-btn-lg { padding: 0.85rem 2.5rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 48px; }
+.n-btn-sm { padding: 0.5rem 1.5rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 36px; }
+.n-btn-md { padding: 0.75rem 2rem; font-size: var(--n-text-base); min-height: 44px; }
+.n-btn-lg { padding: 1rem 2.75rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 52px; }
 
 /* Block */
 .is-block { width: 100%; }
@@ -95,18 +98,25 @@ const btnClass = computed(() => {
 /* Rounded */
 .is-rounded { border-radius: var(--n-radius-full); }
 
+/* Active/Press */
+.n-btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
 /* Variant: Primary */
 .n-btn-primary {
-  background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
+  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
   color: white;
-  box-shadow: var(--n-shadow-glow-primary);
+  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.3);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
 }
 .n-btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.15);
 }
 .n-btn-primary:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  transform: translateY(-1px) scale(0.98);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4), inset 0 2px 4px rgba(0,0,0,0.15);
 }
 
 /* Variant: Secondary */
@@ -118,6 +128,10 @@ const btnClass = computed(() => {
 .n-btn-secondary:hover:not(:disabled) {
   background: var(--n-color-surface-hover);
   border-color: var(--n-color-border-hover);
+  transform: translateY(-1px);
+}
+.n-btn-secondary:active:not(:disabled) {
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
 }
 
 /* Variant: Success */
@@ -131,7 +145,7 @@ const btnClass = computed(() => {
   box-shadow: var(--n-shadow-glow-success);
 }
 .n-btn-success:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-success), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Warning */
@@ -145,7 +159,7 @@ const btnClass = computed(() => {
   box-shadow: var(--n-shadow-glow-warning);
 }
 .n-btn-warning:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-warning), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Info */
@@ -159,7 +173,7 @@ const btnClass = computed(() => {
   box-shadow: var(--n-shadow-glow-info);
 }
 .n-btn-info:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-info), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Danger */
@@ -173,28 +187,46 @@ const btnClass = computed(() => {
   box-shadow: var(--n-shadow-glow-danger);
 }
 .n-btn-danger:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-danger), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Ghost */
 .n-btn-ghost {
   background: transparent;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   color: var(--n-color-text-secondary);
+  border-color: transparent;
 }
 .n-btn-ghost:hover:not(:disabled) {
   background: var(--n-color-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   color: var(--n-color-text);
+  border-color: var(--n-color-glass-border);
+}
+.n-btn-ghost:active:not(:disabled) {
+  background: var(--n-color-glass-hover);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
 }
 
 /* Variant: Outline */
 .n-btn-outline {
   background: transparent;
   color: var(--n-color-primary);
-  border-color: var(--n-color-primary);
+  border: 1.5px solid transparent;
+  background-image: linear-gradient(transparent, transparent), linear-gradient(135deg, var(--n-color-primary), var(--n-color-primary-hover));
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
 }
 .n-btn-outline:hover:not(:disabled) {
-  background: var(--n-color-primary-light);
-  border-color: var(--n-color-primary-hover);
+  background-image: linear-gradient(var(--n-color-primary-light), var(--n-color-primary-light)), linear-gradient(135deg, var(--n-color-primary-hover), var(--n-color-primary));
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  color: var(--n-color-primary-hover);
+}
+.n-btn-outline:active:not(:disabled) {
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
 }
 
 /* Variant: Glass */
@@ -208,13 +240,26 @@ const btnClass = computed(() => {
   background: var(--n-color-glass-hover);
   border-color: var(--n-color-border-hover);
 }
+.n-btn-glass:active:not(:disabled) {
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
+}
 
 /* Disabled */
 .n-btn:disabled {
-  opacity: 0.45;
   cursor: not-allowed;
   transform: none !important;
   box-shadow: none !important;
+  pointer-events: none;
+  opacity: 0.55;
+}
+.n-btn:disabled::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--n-color-surface, #fff);
+  opacity: 0.3;
+  pointer-events: none;
 }
 
 /* Loader */

package/dist/components/NCard.js

@@ -53,16 +53,17 @@ export default _sfc_main
 const __style = `.n-card[data-v-28bb4c76]{
   background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
-  border-radius: var(--n-radius-xl);
+  border-radius: var(--n-radius-lg);
   overflow: hidden;
-  transition: all var(--n-transition-normal);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   display: flex;
   flex-direction: column;
+  will-change: transform, box-shadow;
 }
 
 .is-elevated[data-v-28bb4c76]{
   background: var(--n-color-surface-elevated);
-  box-shadow: var(--n-shadow-lg);
+  box-shadow: var(--n-shadow-md);
 }
 
 .is-outlined[data-v-28bb4c76]{
@@ -78,9 +79,9 @@ const __style = `.n-card[data-v-28bb4c76]{
 }
 
 .n-card.is-hoverable[data-v-28bb4c76]:hover{
-  transform: translateY(-4px);
+  transform: translateY(-2px);
   border-color: var(--n-color-border-hover);
-  box-shadow: var(--n-shadow-xl);
+  box-shadow: var(--n-shadow-lg);
 }
 
 .n-card-image[data-v-28bb4c76]{

package/dist/components/NCard.nexa

@@ -32,16 +32,17 @@ const props = defineProps({
 .n-card {
   background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
-  border-radius: var(--n-radius-xl);
+  border-radius: var(--n-radius-lg);
   overflow: hidden;
-  transition: all var(--n-transition-normal);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   display: flex;
   flex-direction: column;
+  will-change: transform, box-shadow;
 }
 
 .is-elevated {
   background: var(--n-color-surface-elevated);
-  box-shadow: var(--n-shadow-lg);
+  box-shadow: var(--n-shadow-md);
 }
 
 .is-outlined {
@@ -57,9 +58,9 @@ const props = defineProps({
 }
 
 .n-card.is-hoverable:hover {
-  transform: translateY(-4px);
+  transform: translateY(-2px);
   border-color: var(--n-color-border-hover);
-  box-shadow: var(--n-shadow-xl);
+  box-shadow: var(--n-shadow-lg);
 }
 
 .n-card-image {

package/dist/components/NCheckbox.js

@@ -1,7 +1,7 @@
 import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-1e350f9a',
+  __scopeId: 'data-v-50293982',
   __hmrId: 'NCheckbox_nexa',
   props: {
   modelValue: { type: Boolean, default: false },
@@ -22,91 +22,106 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { toggle, $slots, emit, modelValue, label, disabled, indeterminate, Fragment: _ntc_Fragment } = ctx
-    return h('label', { class: ["n-checkbox", { 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }], "data-v-1e350f9a": "" }, [
+    return h('label', { class: ["n-checkbox", { 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }], "data-v-50293982": "" }, [
         "\n    ",
-        h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-1e350f9a": "" }, [
+        h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-50293982": "" }, [
         "\n      ",
-        h('span', { class: "n-checkbox-icon", "data-v-1e350f9a": "" }, [
+        (modelValue && !indeterminate) ? h('div', { class: "n-checkbox-check", "data-v-50293982": "" }, [
         "\n        ",
-        (indeterminate) ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", focusable: "false", "aria-hidden": "true", "data-v-1e350f9a": "" }, [
-        h('line', { x1: "4", y1: "12", x2: "20", y2: "12", "data-v-1e350f9a": "" })
-      ]) : (true) ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-1e350f9a": "" }, [
-        h('path', { d: "M20 6L9 17l-5-5", "data-v-1e350f9a": "" })
-      ]) : null,
+        h('svg', { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "white", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "data-v-50293982": "" }, [
+        h('path', { d: "M5 12l5 5L20 7", "data-v-50293982": "" })
+      ]),
         "\n      "
+      ]) : null,
+        (indeterminate) ? h('div', { class: "n-checkbox-check", "data-v-50293982": "" }, [
+        "\n        ",
+        h('svg', { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "white", "stroke-width": "3", "stroke-linecap": "round", focusable: "false", "data-v-50293982": "" }, [
+        h('line', { x1: "5", y1: "12", x2: "19", y2: "12", "data-v-50293982": "" })
       ]),
-        "\n    "
+        "\n      "
+      ]) : null
       ]),
         "\n    ",
-        (label) ? h('span', { class: "n-checkbox-label", "data-v-1e350f9a": "" }, [
+        (label) ? h('span', { class: "n-checkbox-label", "data-v-50293982": "" }, [
         label
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-1e350f9a'
+_sfc_main.__scopeId = 'data-v-50293982'
 _sfc_main.__hmrId = 'NCheckbox_nexa'
 
 export default _sfc_main
 
-const __style = `.n-checkbox[data-v-1e350f9a]{
+const __style = `.n-checkbox[data-v-50293982]{
   display: inline-flex;
   align-items: center;
-  gap: var(--n-space-3);
+  gap: 0.75rem;
   cursor: pointer;
   user-select: none;
+  padding: 0.375rem 0.5rem;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+
+.n-checkbox[data-v-50293982]:hover:not(.is-disabled){
+  background: rgba(99, 102, 241, 0.08);
 }
 
-.n-checkbox-box[data-v-1e350f9a]{
+.n-checkbox-box[data-v-50293982]{
   width: 20px;
   height: 20px;
-  border: 2px solid var(--n-color-border);
-  border-radius: var(--n-radius-sm);
+  border-radius: 6px;
+  border: 2px solid #475569;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--n-transition-fast);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  background: #0f172a;
   flex-shrink: 0;
-  background: transparent;
 }
 
-.is-checked .n-checkbox-box[data-v-1e350f9a]{
-  background: var(--n-color-primary);
-  border-color: var(--n-color-primary);
+.is-checked .n-checkbox-box[data-v-50293982], 
+.is-indeterminate .n-checkbox-box[data-v-50293982]{
+  background: #6366f1;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.4);
 }
 
-.is-indeterminate .n-checkbox-box[data-v-1e350f9a]{
-  background: var(--n-color-primary);
-  border-color: var(--n-color-primary);
+.n-checkbox-check[data-v-50293982]{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: n-check 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.n-checkbox-icon[data-v-1e350f9a]{
-  color: white;
-  font-size: 12px;
-  font-weight: var(--n-weight-bold);
-  line-height: 1;
-  opacity: 0;
-  transform: scale(0);
-  transition: all var(--n-transition-fast);
+@keyframes n-check {
+0%[data-v-50293982]{ transform: scale(0); opacity: 0; }
+50%[data-v-50293982]{ transform: scale(1.2); }
+100%[data-v-50293982]{ transform: scale(1); opacity: 1; }
 }
 
-.is-checked .n-checkbox-icon[data-v-1e350f9a], 
-.is-indeterminate .n-checkbox-icon[data-v-1e350f9a]{
-  opacity: 1;
-  transform: scale(1);
+.n-checkbox-label[data-v-50293982]{
+  font-size: 0.875rem;
+  color: #e2e8f0;
+  font-weight: 500;
+  line-height: 1.5;
 }
 
-.n-checkbox-label[data-v-1e350f9a]{
-  font-size: var(--n-text-sm);
-  color: var(--n-color-text);
-  font-weight: var(--n-weight-medium);
+.is-disabled[data-v-50293982]{
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
-.is-disabled[data-v-1e350f9a]{
-  opacity: 0.5;
-  cursor: not-allowed;
+.is-disabled .n-checkbox-box[data-v-50293982]{
+  background: #1e293b;
+  border-color: #334155;
+}
+
+.n-checkbox[data-v-50293982]:hover:not(.is-disabled) .n-checkbox-box{
+  border-color: #6366f1;
 }
 
-.n-checkbox[data-v-1e350f9a]:hover:not(.is-disabled) .n-checkbox-box{
-  border-color: var(--n-color-primary);
+.is-checked .n-checkbox-box[data-v-50293982]:active{
+  transform: scale(0.9);
 }`
-injectStyle('data-v-1e350f9a', __style)
+injectStyle('data-v-50293982', __style)

package/dist/components/NCheckbox.nexa

@@ -17,10 +17,12 @@ const toggle = () => {
 <template>
   <label class="n-checkbox" :class="{ 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }">
     <div class="n-checkbox-box" @click="toggle">
-      <span class="n-checkbox-icon">
-        <svg v-if="indeterminate" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" focusable="false" aria-hidden="true"><line x1="4" y1="12" x2="20" y2="12"/></svg>
-        <svg v-else viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
-      </span>
+      <div v-if="modelValue && !indeterminate" class="n-checkbox-check">
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M5 12l5 5L20 7"/></svg>
+      </div>
+      <div v-if="indeterminate" class="n-checkbox-check">
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" focusable="false"><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      </div>
     </div>
     <span v-if="label" class="n-checkbox-label">{{ label }}</span>
   </label>
@@ -30,62 +32,73 @@ const toggle = () => {
 .n-checkbox {
   display: inline-flex;
   align-items: center;
-  gap: var(--n-space-3);
+  gap: 0.75rem;
   cursor: pointer;
   user-select: none;
+  padding: 0.375rem 0.5rem;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+
+.n-checkbox:hover:not(.is-disabled) {
+  background: rgba(99, 102, 241, 0.08);
 }
 
 .n-checkbox-box {
   width: 20px;
   height: 20px;
-  border: 2px solid var(--n-color-border);
-  border-radius: var(--n-radius-sm);
+  border-radius: 6px;
+  border: 2px solid #475569;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--n-transition-fast);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  background: #0f172a;
   flex-shrink: 0;
-  background: transparent;
-}
-
-.is-checked .n-checkbox-box {
-  background: var(--n-color-primary);
-  border-color: var(--n-color-primary);
 }
 
+.is-checked .n-checkbox-box,
 .is-indeterminate .n-checkbox-box {
-  background: var(--n-color-primary);
-  border-color: var(--n-color-primary);
+  background: #6366f1;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.4);
 }
 
-.n-checkbox-icon {
-  color: white;
-  font-size: 12px;
-  font-weight: var(--n-weight-bold);
-  line-height: 1;
-  opacity: 0;
-  transform: scale(0);
-  transition: all var(--n-transition-fast);
+.n-checkbox-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: n-check 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.is-checked .n-checkbox-icon,
-.is-indeterminate .n-checkbox-icon {
-  opacity: 1;
-  transform: scale(1);
+@keyframes n-check {
+  0% { transform: scale(0); opacity: 0; }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); opacity: 1; }
 }
 
 .n-checkbox-label {
-  font-size: var(--n-text-sm);
-  color: var(--n-color-text);
-  font-weight: var(--n-weight-medium);
+  font-size: 0.875rem;
+  color: #e2e8f0;
+  font-weight: 500;
+  line-height: 1.5;
 }
 
 .is-disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
+.is-disabled .n-checkbox-box {
+  background: #1e293b;
+  border-color: #334155;
+}
+
 .n-checkbox:hover:not(.is-disabled) .n-checkbox-box {
-  border-color: var(--n-color-primary);
+  border-color: #6366f1;
+}
+
+.is-checked .n-checkbox-box:active {
+  transform: scale(0.9);
 }
 </style>