nexa-ui-kit 0.11.3 → 0.11.5

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,6 +98,11 @@ 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%);
@@ -106,7 +114,7 @@ const btnClass = computed(() => {
   box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
 }
 .n-btn-primary:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-primary), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Secondary */
@@ -118,6 +126,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 +143,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 +157,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 +171,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 +185,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 +238,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-3302b953',
   __hmrId: 'NCheckbox_nexa',
   props: {
   modelValue: { type: Boolean, default: false },
@@ -22,33 +22,37 @@ 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-3302b953": "" }, [
         "\n    ",
-        h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-1e350f9a": "" }, [
+        h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-3302b953": "" }, [
         "\n      ",
-        h('span', { class: "n-checkbox-icon", "data-v-1e350f9a": "" }, [
+        (modelValue && !indeterminate) ? h('span', { class: "n-checkbox-icon", "data-v-3302b953": "" }, [
         "\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: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-3302b953": "" }, [
+        h('path', { d: "M20 6L9 17l-5-5", "data-v-3302b953": "" })
+      ]),
         "\n      "
+      ]) : null,
+        (indeterminate) ? h('span', { class: "n-checkbox-icon", "data-v-3302b953": "" }, [
+        "\n        ",
+        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-3302b953": "" }, [
+        h('line', { x1: "4", y1: "12", x2: "20", y2: "12", "data-v-3302b953": "" })
       ]),
-        "\n    "
+        "\n      "
+      ]) : null
       ]),
         "\n    ",
-        (label) ? h('span', { class: "n-checkbox-label", "data-v-1e350f9a": "" }, [
+        (label) ? h('span', { class: "n-checkbox-label", "data-v-3302b953": "" }, [
         label
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-1e350f9a'
+_sfc_main.__scopeId = 'data-v-3302b953'
 _sfc_main.__hmrId = 'NCheckbox_nexa'
 
 export default _sfc_main
 
-const __style = `.n-checkbox[data-v-1e350f9a]{
+const __style = `.n-checkbox[data-v-3302b953]{
   display: inline-flex;
   align-items: center;
   gap: var(--n-space-3);
@@ -56,57 +60,62 @@ const __style = `.n-checkbox[data-v-1e350f9a]{
   user-select: none;
 }
 
-.n-checkbox-box[data-v-1e350f9a]{
-  width: 20px;
-  height: 20px;
+.n-checkbox-box[data-v-3302b953]{
+  width: 22px;
+  height: 22px;
   border: 2px solid var(--n-color-border);
   border-radius: var(--n-radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--n-transition-fast);
+  transition: all var(--n-transition-normal);
   flex-shrink: 0;
   background: transparent;
 }
 
-.is-checked .n-checkbox-box[data-v-1e350f9a]{
+.is-checked .n-checkbox-box[data-v-3302b953]{
   background: var(--n-color-primary);
   border-color: var(--n-color-primary);
+  box-shadow: var(--n-shadow-glow-primary);
 }
 
-.is-indeterminate .n-checkbox-box[data-v-1e350f9a]{
+.is-indeterminate .n-checkbox-box[data-v-3302b953]{
   background: var(--n-color-primary);
   border-color: var(--n-color-primary);
+  box-shadow: var(--n-shadow-glow-primary);
 }
 
-.n-checkbox-icon[data-v-1e350f9a]{
+.n-checkbox-icon[data-v-3302b953]{
+  display: flex;
+  align-items: center;
+  justify-content: center;
   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);
+  animation: n-checkbox-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.n-checkbox-icon svg[data-v-3302b953]{
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
 }
 
-.is-checked .n-checkbox-icon[data-v-1e350f9a], 
-.is-indeterminate .n-checkbox-icon[data-v-1e350f9a]{
-  opacity: 1;
-  transform: scale(1);
+@keyframes n-checkbox-pop {
+0%[data-v-3302b953]{ transform: scale(0); opacity: 0; }
+50%[data-v-3302b953]{ transform: scale(1.15); }
+100%[data-v-3302b953]{ transform: scale(1); opacity: 1; }
 }
 
-.n-checkbox-label[data-v-1e350f9a]{
+.n-checkbox-label[data-v-3302b953]{
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
   font-weight: var(--n-weight-medium);
 }
 
-.is-disabled[data-v-1e350f9a]{
+.is-disabled[data-v-3302b953]{
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.n-checkbox[data-v-1e350f9a]:hover:not(.is-disabled) .n-checkbox-box{
+.n-checkbox[data-v-3302b953]:hover:not(.is-disabled) .n-checkbox-box{
   border-color: var(--n-color-primary);
 }`
-injectStyle('data-v-1e350f9a', __style)
+injectStyle('data-v-3302b953', __style)

package/dist/components/NCheckbox.nexa

@@ -17,9 +17,11 @@ 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 v-if="modelValue && !indeterminate" class="n-checkbox-icon">
+        <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"><path d="M20 6L9 17l-5-5"/></svg>
+      </span>
+      <span v-if="indeterminate" class="n-checkbox-icon">
+        <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"><line x1="4" y1="12" x2="20" y2="12"/></svg>
       </span>
     </div>
     <span v-if="label" class="n-checkbox-label">{{ label }}</span>
@@ -36,14 +38,14 @@ const toggle = () => {
 }
 
 .n-checkbox-box {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   border: 2px solid var(--n-color-border);
   border-radius: var(--n-radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--n-transition-fast);
+  transition: all var(--n-transition-normal);
   flex-shrink: 0;
   background: transparent;
 }
@@ -51,27 +53,32 @@ const toggle = () => {
 .is-checked .n-checkbox-box {
   background: var(--n-color-primary);
   border-color: var(--n-color-primary);
+  box-shadow: var(--n-shadow-glow-primary);
 }
 
 .is-indeterminate .n-checkbox-box {
   background: var(--n-color-primary);
   border-color: var(--n-color-primary);
+  box-shadow: var(--n-shadow-glow-primary);
 }
 
 .n-checkbox-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   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);
+  animation: n-checkbox-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.n-checkbox-icon svg {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
 }
 
-.is-checked .n-checkbox-icon,
-.is-indeterminate .n-checkbox-icon {
-  opacity: 1;
-  transform: scale(1);
+@keyframes n-checkbox-pop {
+  0% { transform: scale(0); opacity: 0; }
+  50% { transform: scale(1.15); }
+  100% { transform: scale(1); opacity: 1; }
 }
 
 .n-checkbox-label {