nexa-ui-kit 0.7.1 → 0.7.3

package/dist/components/NAutocomplete.js

@@ -69,7 +69,7 @@ _sfc_main.render = function(ctx) {
         "Loading..."
       ]) : (true) ? h('div', { class: "n-ac-list", role: "listbox", id: listboxId, "data-v-741257a1": "" }, [
         "\n          ",
-        filteredOptions.value.map((opt, i) =>
+        (filteredOptions.value).map((opt, i) =>
         h('button', { class: ["n-ac-option", { 'is-focused': i === focusedIndex.value }], key: opt.value, type: "button", role: "option", id: instanceId + '-opt-' + i, "aria-selected": (i === focusedIndex.value).toString(), onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { selectOption(opt) }, "data-v-741257a1": "" }, [
         opt.label
       ])

package/dist/components/NAvatar.js

@@ -27,7 +27,7 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   const { initials, $slots, label, size, variant, image, shape, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: ['n-avatar', `is-${size}`, `is-${variant}`, `is-${shape}`], vBind: true, style: image ? { backgroundImage: `url(${image})` } : {}, "aria-label": label, "data-v-147134": "" }, [
+    return h('div', { class: ['n-avatar', `is-${size}`, `is-${variant}`, `is-${shape}`], "vBind:style": "image ? { backgroundImage: `url(${image})` } : {}", "aria-label": label, "data-v-147134": "" }, [
         "\n    ",
         (!image) ? h('span', { class: "n-avatar-initials", "data-v-147134": "" }, [
         initials.value

package/dist/components/NButton.js

@@ -57,7 +57,7 @@ _sfc_main.render = function(ctx) {
         ctx.$slots.default ? ctx.$slots.default() : null,
         "\n    "
       ]) : null,
-        ripple.value.map((r, index) =>
+        (ripple.value).map((r, index) =>
         h('span', { class: "n-btn-ripple", key: r.id, style: { left: r.x + 'px', top: r.y + 'px' }, "data-v-27fd765": "" })
       ),
         "\n  "

package/dist/components/NChips.js

@@ -48,7 +48,7 @@ _sfc_main.render = function(ctx) {
   const { resolvedModel, normalize, chips, removeAt, $slots, emit, modelValue, removable, disabled, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: ["n-chips", { 'is-disabled': disabled }], "data-v-606f06fb": "" }, [
         "\n    ",
-        chips.value.map((chip, i) =>
+        (chips.value).map((chip, i) =>
         h('div', { class: "n-chip", key: String(chip.value) + ':' + i, "data-v-606f06fb": "" }, [
         "\n      ",
         h('span', { class: "n-chip-label", "data-v-606f06fb": "" }, [

package/dist/components/NDataTable.js

@@ -186,7 +186,7 @@ _sfc_main.render = function(ctx) {
         (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-17a3d2ce": "" }, [
         (selectionMode === 'multiple') ? h('input', { class: "n-dt-selectbox", type: "checkbox", checked: allVisibleSelected.value, onClick: ($event) => { $event.stopPropagation(); (toggleAllVisible)($event) }, "data-v-17a3d2ce": "" }) : null
       ]) : null,
-        normalizeColumns.value.map((col, index) =>
+        (normalizeColumns.value).map((col, index) =>
         h('th', { class: ["n-dt-th", [`is-${col.align}`, col.sortable ? 'is-sortable' : '']], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-field": col.field, onClick: onSortClick, "data-v-17a3d2ce": "" }, [
         "\n              ",
         h('div', { class: "n-dt-th-content", "data-v-17a3d2ce": "" }, [
@@ -214,7 +214,7 @@ _sfc_main.render = function(ctx) {
         "\n          ",
         (filterDisplay === 'row') ? h('tr', { class: "n-dt-filter-row", "data-v-17a3d2ce": "" }, [
         (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-17a3d2ce": "" }) : null,
-        normalizeColumns.value.map((col, index) =>
+        (normalizeColumns.value).map((col, index) =>
         h('th', { class: ["n-dt-th", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-17a3d2ce": "" }, [
         (col.filterable) ? h('input', { class: "n-dt-filter", "data-field": col.field, value: (effectiveFilters.value[col.field]?.value) || '', placeholder: "Filter", onInput: onColumnFilterInput, "data-v-17a3d2ce": "" }) : null
       ])
@@ -224,13 +224,13 @@ _sfc_main.render = function(ctx) {
         "\n        ",
         h('tbody', { class: "n-dt-tbody", "data-v-17a3d2ce": "" }, [
         "\n          ",
-        visibleRows.value.map((row, i) =>
+        (visibleRows.value).map((row, i) =>
         h('tr', { class: ["n-dt-row", { 'is-selected': isRowSelected(row, i + internalFirst.value) }], key: getRowKey(row, i + internalFirst.value), onClick: ($event) => { toggleRowSelection(row, i + internalFirst.value) }, "data-v-17a3d2ce": "" }, [
         "\n            ",
         (selectionMode) ? h('td', { class: "n-dt-td is-selection", "data-v-17a3d2ce": "" }, [
         h('input', { class: "n-dt-selectbox", type: "checkbox", checked: isRowSelected(row, i + internalFirst.value), onClick: ($event) => { $event.stopPropagation(); (($event) => { toggleRowSelection(row, i + internalFirst.value) })($event) }, "data-v-17a3d2ce": "" })
       ]) : null,
-        normalizeColumns.value.map((col, index) =>
+        (normalizeColumns.value).map((col, index) =>
         h('td', { class: ["n-dt-td", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-17a3d2ce": "" }, [
         "\n              ",
         $slots.value && $slots.value[`body-${col.field}`] ? $slots[`body-${col.field}`]({ data: row, column: col, index: i + internalFirst.value }) : getCellContent(row, col, i + internalFirst.value),

package/dist/components/NDatepicker.js

@@ -210,13 +210,13 @@ _sfc_main.render = function(ctx) {
         "\n\n        ",
         h('div', { class: "n-datepicker-grid", "data-v-69fa2c78": "" }, [
         "\n          ",
-        dayNames.map((d, index) =>
+        (dayNames).map((d, index) =>
         h('div', { class: "n-datepicker-day-header", key: d, "data-v-69fa2c78": "" }, [
         d
       ])
       ),
         "\n          ",
-        calendarDays.value.map((day, i) =>
+        (calendarDays.value).map((day, i) =>
         h('div', { class: {
               'n-datepicker-day': true,
               'is-empty': day === null,

package/dist/components/NModal.js

@@ -1,7 +1,7 @@
 import { signal, effect, onMounted, onUnmounted, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-39fa634f',
+  __scopeId: 'data-v-655f39d1',
   __hmrId: 'NModal_nexa',
   props: {
   show: { type: Boolean, default: false },
@@ -17,6 +17,7 @@ const _sfc_main = defineComponent({
     let modalEl = null
     let previousFocus = null
     const bodyOverflow = signal('')
+    const setModalRef = (el) => { modalEl = el }
     const sizeMap = { sm: '400px', md: '500px', lg: '640px', xl: '800px', full: '96%' }
     effect(() => {
       if (props.show) {
@@ -72,40 +73,40 @@ const _sfc_main = defineComponent({
       window.removeEventListener('keydown', handleEsc)
       document.body.style.overflow = ''
     })
-    return { isVisible, modalEl, previousFocus, bodyOverflow, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit }
+    return { isVisible, modalEl, previousFocus, bodyOverflow, setModalRef, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit }
   }
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { isVisible, modalEl, previousFocus, bodyOverflow, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit, show, title, size, closable, closeLeft, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h(_ntc_Teleport, { to: "body", "data-v-39fa634f": "" }, [
+  const { isVisible, modalEl, previousFocus, bodyOverflow, setModalRef, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit, show, title, size, closable, closeLeft, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+    return h(_ntc_Teleport, { to: "body", "data-v-655f39d1": "" }, [
         "\n    ",
-        (isVisible.value) ? h('div', { class: "n-modal-root", "data-v-39fa634f": "" }, [
+        (isVisible.value) ? h('div', { class: "n-modal-root", "data-v-655f39d1": "" }, [
         "\n      ",
-        h('div', { class: ["n-modal-overlay", { 'is-active': show }], onClick: handleOverlayClick, "data-v-39fa634f": "" }),
+        h('div', { class: ["n-modal-overlay", { 'is-active': show }], onClick: handleOverlayClick, "data-v-655f39d1": "" }),
         "\n      ",
-        h('div', { class: ["n-modal-container", { 'is-active': show }], ref: "modalEl", style: { maxWidth: sizeMap[size] || size }, tabindex: "-1", onKeydown: handleKeydown, "data-v-39fa634f": "" }, [
+        h('div', { class: ["n-modal-container", { 'is-active': show }], ref: setModalRef, style: { maxWidth: sizeMap[size] || size }, tabindex: "-1", onKeydown: handleKeydown, "data-v-655f39d1": "" }, [
         "\n        ",
-        (title || $slots.header) ? h('div', { class: ["n-modal-header", { 'close-left': closeLeft }], "data-v-39fa634f": "" }, [
+        (title || $slots.header) ? h('div', { class: ["n-modal-header", { 'close-left': closeLeft }], "data-v-655f39d1": "" }, [
         "\n          ",
-        (closable && closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-39fa634f": "" }, [
+        (closable && closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-655f39d1": "" }, [
         "×"
       ]) : null,
         ctx.$slots.header ? ctx.$slots.header() : ["\n            ", h('h3', null, [
         title
       ]), "\n          "],
         "\n          ",
-        (closable && !closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-39fa634f": "" }, [
+        (closable && !closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-655f39d1": "" }, [
         "×"
       ]) : null
       ]) : null,
-        h('div', { class: "n-modal-content", "data-v-39fa634f": "" }, [
+        h('div', { class: "n-modal-content", "data-v-655f39d1": "" }, [
         "\n          ",
         ctx.$slots.default ? ctx.$slots.default() : null,
         "\n        "
       ]),
         "\n        ",
-        ($slots.footer) ? h('div', { class: "n-modal-footer", "data-v-39fa634f": "" }, [
+        ($slots.footer) ? h('div', { class: "n-modal-footer", "data-v-655f39d1": "" }, [
         "\n          ",
         ctx.$slots.footer ? ctx.$slots.footer() : null,
         "\n        "
@@ -115,12 +116,12 @@ _sfc_main.render = function(ctx) {
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-39fa634f'
+_sfc_main.__scopeId = 'data-v-655f39d1'
 _sfc_main.__hmrId = 'NModal_nexa'
 
 export default _sfc_main
 
-const __style = `.n-modal-root[data-v-39fa634f]{
+const __style = `.n-modal-root[data-v-655f39d1]{
   position: fixed;
   top: 0;
   left: 0;
@@ -132,7 +133,7 @@ const __style = `.n-modal-root[data-v-39fa634f]{
   z-index: var(--n-z-modal);
 }
 
-.n-modal-overlay[data-v-39fa634f]{
+.n-modal-overlay[data-v-655f39d1]{
   position: absolute;
   top: 0;
   left: 0;
@@ -144,11 +145,11 @@ const __style = `.n-modal-root[data-v-39fa634f]{
   transition: opacity 0.25s ease;
 }
 
-.n-modal-overlay.is-active[data-v-39fa634f]{
+.n-modal-overlay.is-active[data-v-655f39d1]{
   opacity: 1;
 }
 
-.n-modal-container[data-v-39fa634f]{
+.n-modal-container[data-v-655f39d1]{
   position: relative;
   width: 90%;
   background: var(--n-color-surface);
@@ -165,12 +166,12 @@ const __style = `.n-modal-root[data-v-39fa634f]{
   flex-direction: column;
 }
 
-.n-modal-container.is-active[data-v-39fa634f]{
+.n-modal-container.is-active[data-v-655f39d1]{
   transform: scale(1) translateY(0);
   opacity: 1;
 }
 
-.n-modal-header[data-v-39fa634f]{
+.n-modal-header[data-v-655f39d1]{
   padding: var(--n-space-6) var(--n-space-8);
   border-bottom: 1px solid var(--n-color-border);
   display: flex;
@@ -179,14 +180,14 @@ const __style = `.n-modal-root[data-v-39fa634f]{
   flex-shrink: 0;
 }
 
-.n-modal-header h3[data-v-39fa634f]{
+.n-modal-header h3[data-v-655f39d1]{
   margin: 0;
   font-size: var(--n-text-xl);
   font-weight: var(--n-weight-bold);
   color: var(--n-color-text);
 }
 
-.n-modal-close[data-v-39fa634f]{
+.n-modal-close[data-v-655f39d1]{
   background: transparent;
   border: none;
   color: var(--n-color-text-secondary);
@@ -203,19 +204,19 @@ const __style = `.n-modal-root[data-v-39fa634f]{
   border-radius: var(--n-radius-sm);
 }
 
-.n-modal-close[data-v-39fa634f]:hover{
+.n-modal-close[data-v-655f39d1]:hover{
   color: var(--n-color-text);
   background: var(--n-color-glass);
 }
 
-.n-modal-content[data-v-39fa634f]{
+.n-modal-content[data-v-655f39d1]{
   padding: var(--n-space-8);
   color: var(--n-color-text-secondary);
   overflow-y: auto;
   flex: 1;
 }
 
-.n-modal-footer[data-v-39fa634f]{
+.n-modal-footer[data-v-655f39d1]{
   padding: var(--n-space-5) var(--n-space-8);
   background: rgba(0, 0, 0, 0.15);
   border-top: 1px solid var(--n-color-border);
@@ -224,4 +225,4 @@ const __style = `.n-modal-root[data-v-39fa634f]{
   gap: var(--n-space-4);
   flex-shrink: 0;
 }`
-injectStyle('data-v-39fa634f', __style)
+injectStyle('data-v-655f39d1', __style)

package/dist/components/NModal.nexa

@@ -16,6 +16,8 @@ let modalEl = null
 let previousFocus = null
 const bodyOverflow = signal('')
 
+const setModalRef = (el) => { modalEl = el }
+
 const sizeMap = { sm: '400px', md: '500px', lg: '640px', xl: '800px', full: '96%' }
 
 effect(() => {
@@ -90,7 +92,7 @@ onUnmounted(() => {
         @click="handleOverlayClick"
       ></div>
       <div
-        ref="modalEl"
+        :ref="setModalRef"
         class="n-modal-container"
         :class="{ 'is-active': show }"
         :style="{ maxWidth: sizeMap[size] || size }"

package/dist/components/NMultiSelect.js

@@ -73,7 +73,7 @@ _sfc_main.render = function(ctx) {
         h('div', { class: "n-ms-trigger", role: "combobox", tabindex: "0", "aria-expanded": isOpen.value, onClick: toggleOpen, onKeydown: onKeydown, "data-v-12b3b8c4": "" }, [
         "\n      ",
         (selectedLabels.value.length > 0) ? h('div', { class: "n-ms-chips", "data-v-12b3b8c4": "" }, [
-        selectedLabels.value.slice(0, maxChips).map((c, index) =>
+        (selectedLabels.value.slice(0, maxChips)).map((c, index) =>
         h('div', { class: "n-ms-chip", key: String(c.value), "data-v-12b3b8c4": "" }, [
         h('span', { class: "n-ms-chip-label", "data-v-12b3b8c4": "" }, [
         c.label
@@ -107,7 +107,7 @@ _sfc_main.render = function(ctx) {
         h('input', { class: "n-ms-search-input", value: queryDraft.value, placeholder: "Search...", onInput: onSearchInput, onKeydown: ($event) => { $event.stopPropagation(); (onKeydown)($event) }, "data-v-12b3b8c4": "" })
       ]) : null,
         h('div', { class: "n-ms-options", "data-v-12b3b8c4": "" }, [
-        filteredOptions.value.map((opt, i) =>
+        (filteredOptions.value).map((opt, i) =>
         h('button', { class: ["n-ms-option", { 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }], key: String(opt.value) + ':' + i, type: "button", "data-ms-opt": String(opt.value), disabled: opt.disabled, onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { toggleValue(opt.value) }, "data-v-12b3b8c4": "" }, [
         h('span', { class: "n-ms-check", "data-v-12b3b8c4": "" }, [
         selectedSet.value.has(opt.value) ? '✓' : ''
@@ -128,7 +128,7 @@ _sfc_main.render = function(ctx) {
         h('input', { class: "n-ms-search-input", value: queryDraft.value, placeholder: "Search...", onInput: onSearchInput, onKeydown: ($event) => { $event.stopPropagation(); (onKeydown)($event) }, "data-v-12b3b8c4": "" })
       ]) : null,
         h('div', { class: "n-ms-options", "data-v-12b3b8c4": "" }, [
-        filteredOptions.value.map((opt, i) =>
+        (filteredOptions.value).map((opt, i) =>
         h('button', { class: ["n-ms-option", { 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }], key: String(opt.value) + ':' + i, type: "button", "data-ms-opt": String(opt.value), disabled: opt.disabled, onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { toggleValue(opt.value) }, "data-v-12b3b8c4": "" }, [
         h('span', { class: "n-ms-check", "data-v-12b3b8c4": "" }, [
         selectedSet.value.has(opt.value) ? '✓' : ''

package/dist/components/NPaginator.js

@@ -96,7 +96,7 @@ _sfc_main.render = function(ctx) {
         "\n      ",
         h('select', { class: "n-pg-select", value: rows, onChange: changeRows, "data-v-372b30ac": "" }, [
         "\n        ",
-        rowsPerPageOptions.map((n, index) =>
+        (rowsPerPageOptions).map((n, index) =>
         h('option', { key: n, value: n, "data-v-372b30ac": "" }, [
         n
       ])

package/dist/components/NPassword.js

@@ -131,7 +131,7 @@ _sfc_main.render = function(ctx) {
         "\n      ",
         h('div', { class: "n-password-meter", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 4, "aria-valuenow": strength.value.score, "aria-label": 'Fuerza de contraseña: ' + strength.value.label, "data-v-7b897096": "" }, [
         "\n        ",
-        [1, 2, 3, 4].map((n, index) =>
+        ([1, 2, 3, 4]).map((n, index) =>
         h('span', { class: ["n-password-meter-seg", { 'is-on': n <= strength.value.score }], key: n, "data-v-7b897096": "" })
       ),
         "\n      "
@@ -144,7 +144,7 @@ _sfc_main.render = function(ctx) {
       ]) : null,
         (showRequirements && validate && modelValue) ? h('ul', { class: "n-password-req", id: inputId.value + '-requirements', "data-v-7b897096": "" }, [
         "\n      ",
-        requirements.value.map((r, index) =>
+        (requirements.value).map((r, index) =>
         h('li', { class: ["n-password-req-item", { 'is-ok': r.ok }], key: r.key, "data-v-7b897096": "" }, [
         "\n        ",
         h('span', { class: "n-password-req-icon", "data-v-7b897096": "" }, [

package/dist/components/NSelect.js

@@ -214,13 +214,13 @@ _sfc_main.render = function(ctx) {
       ]) : null,
         h('div', { class: "n-select-options", "data-v-fef169b": "" }, [
         "\n        ",
-        filteredOptions.value.map((item, i) =>
+        (filteredOptions.value).map((item, i) =>
         h('div', { key: i, "data-v-fef169b": "" }, [
         "\n          ",
         ('group' in item) ? h('div', { class: "n-select-group-label", "data-v-fef169b": "" }, [
         item.group
       ]) : null,
-        'items' in item ? item.items : [item].map((opt, index) =>
+        ('items' in item ? item.items : [item]).map((opt, index) =>
         h('div', { class: ["n-select-option", {
               'is-selected': opt.value === modelValue,
               'is-focused': getFlatOptions().indexOf(opt) === focusedIndex.value,
@@ -252,13 +252,13 @@ _sfc_main.render = function(ctx) {
       ]) : null,
         h('div', { class: "n-select-options", "data-v-fef169b": "" }, [
         "\n          ",
-        filteredOptions.value.map((item, i) =>
+        (filteredOptions.value).map((item, i) =>
         h('div', { key: i, "data-v-fef169b": "" }, [
         "\n            ",
         ('group' in item) ? h('div', { class: "n-select-group-label", "data-v-fef169b": "" }, [
         item.group
       ]) : null,
-        'items' in item ? item.items : [item].map((opt, index) =>
+        ('items' in item ? item.items : [item]).map((opt, index) =>
         h('div', { class: ["n-select-option", {
                 'is-selected': opt.value === modelValue,
                 'is-focused': getFlatOptions().indexOf(opt) === focusedIndex.value,

package/dist/components/NSkeleton.js

@@ -1,60 +1,60 @@
 import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-76b5aa9d',
+  __scopeId: 'data-v-6b9116c8',
   __hmrId: 'NSkeleton_nexa',
   props: {
-  variant: { type: String, default: 'text' }, // text, circle, card
+  variant: { type: String, default: 'text' },
   lines: { type: Number, default: 3 },
   width: { type: String, default: '100%' },
   height: { type: String, default: '' }
 },
   setup(props, setupContext) {
     const { emit, slots, slots: $slots } = setupContext
-    return { $slots }
+    const lineArray = Array.from({ length: props.lines || 3 }, (_, i) => i + 1)
+    return { lineArray, $slots }
   }
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { $slots, variant, // text circle card
-  lines, width, height, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: ["n-skeleton", `is-${variant}`], style: { width, height }, "data-v-76b5aa9d": "" }, [
+  const { lineArray, $slots, variant, lines, width, height, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: ["n-skeleton", `is-${variant}`], style: { width, height }, "data-v-6b9116c8": "" }, [
         "\n    ",
-        (variant === 'text') ? h('div', { class: "n-skeleton-lines", "data-v-76b5aa9d": "" }, [
+        (variant === 'text') ? h('div', { class: "n-skeleton-lines", "data-v-6b9116c8": "" }, [
         "\n      ",
-        lines.map((i, index) =>
-        h('div', { class: "n-skeleton-line", key: i, style: { width: i === lines ? '60%' : '100%' }, "data-v-76b5aa9d": "" })
+        (lineArray).map((n, index) =>
+        h('div', { class: "n-skeleton-line", key: n, style: { width: n === lineArray.length ? '60%' : '100%' }, "data-v-6b9116c8": "" })
       ),
         "\n    "
       ]) : null,
-        (variant === 'circle') ? h('div', { class: "n-skeleton-circle", "data-v-76b5aa9d": "" }) : null,
-        (variant === 'card') ? h('div', { class: "n-skeleton-card", "data-v-76b5aa9d": "" }, [
+        (variant === 'circle') ? h('div', { class: "n-skeleton-circle", "data-v-6b9116c8": "" }) : null,
+        (variant === 'card') ? h('div', { class: "n-skeleton-card", "data-v-6b9116c8": "" }, [
         "\n      ",
-        h('div', { class: "n-skeleton-card-image", "data-v-76b5aa9d": "" }),
+        h('div', { class: "n-skeleton-card-image", "data-v-6b9116c8": "" }),
         "\n      ",
-        h('div', { class: "n-skeleton-card-body", "data-v-76b5aa9d": "" }, [
+        h('div', { class: "n-skeleton-card-body", "data-v-6b9116c8": "" }, [
         "\n        ",
-        h('div', { class: "n-skeleton-line", style: "width: 70%", "data-v-76b5aa9d": "" }),
+        h('div', { class: "n-skeleton-line", style: "width: 70%", "data-v-6b9116c8": "" }),
         "\n        ",
-        h('div', { class: "n-skeleton-line", style: "width: 40%", "data-v-76b5aa9d": "" }),
+        h('div', { class: "n-skeleton-line", style: "width: 40%", "data-v-6b9116c8": "" }),
         "\n      "
       ]),
         "\n    "
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-76b5aa9d'
+_sfc_main.__scopeId = 'data-v-6b9116c8'
 _sfc_main.__hmrId = 'NSkeleton_nexa'
 
 export default _sfc_main
 
-const __style = `.n-skeleton[data-v-76b5aa9d]{
+const __style = `.n-skeleton[data-v-6b9116c8]{
   display: flex;
   flex-direction: column;
   gap: var(--n-space-2);
 }
 
-.n-skeleton-line[data-v-76b5aa9d]{
+.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%);
@@ -62,7 +62,7 @@ const __style = `.n-skeleton[data-v-76b5aa9d]{
   animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
 }
 
-.is-circle .n-skeleton-circle[data-v-76b5aa9d]{
+.is-circle .n-skeleton-circle[data-v-6b9116c8]{
   width: 60px;
   height: 60px;
   border-radius: var(--n-radius-full);
@@ -71,13 +71,13 @@ const __style = `.n-skeleton[data-v-76b5aa9d]{
   animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
 }
 
-.is-card .n-skeleton-card[data-v-76b5aa9d]{
+.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-76b5aa9d]{
+.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-size: 200% 100%;
@@ -92,7 +92,7 @@ const __style = `.n-skeleton[data-v-76b5aa9d]{
 }
 
 @keyframes n-skeleton-shimmer {
-from[data-v-76b5aa9d]{ background-position: 200% 0; }
-to[data-v-76b5aa9d]{ background-position: -200% 0; }
+from[data-v-6b9116c8]{ background-position: 200% 0; }
+to[data-v-6b9116c8]{ background-position: -200% 0; }
 }`
-injectStyle('data-v-76b5aa9d', __style)
+injectStyle('data-v-6b9116c8', __style)

package/dist/components/NSkeleton.nexa

@@ -1,16 +1,18 @@
 <script setup>
 const props = defineProps({
-  variant: { type: String, default: 'text' }, // text, circle, card
+  variant: { type: String, default: 'text' },
   lines: { type: Number, default: 3 },
   width: { type: String, default: '100%' },
   height: { type: String, default: '' }
 })
+
+const lineArray = Array.from({ length: props.lines || 3 }, (_, i) => i + 1)
 </script>
 
 <template>
   <div class="n-skeleton" :class="`is-${variant}`" :style="{ width, height }">
     <div v-if="variant === 'text'" class="n-skeleton-lines">
-      <div v-for="i in lines" :key="i" class="n-skeleton-line" :style="{ width: i === lines ? '60%' : '100%' }"></div>
+      <div v-for="n in lineArray" :key="n" class="n-skeleton-line" :style="{ width: n === lineArray.length ? '60%' : '100%' }"></div>
     </div>
     <div v-if="variant === 'circle'" class="n-skeleton-circle"></div>
     <div v-if="variant === 'card'" class="n-skeleton-card">

package/dist/components/NTabs.js

@@ -27,7 +27,7 @@ _sfc_main.render = function(ctx) {
         "\n    ",
         h('div', { class: "n-tabs-header", "data-v-339e5ee5": "" }, [
         "\n      ",
-        tabs.map((tab, index) =>
+        (tabs).map((tab, index) =>
         h('div', { class: ["n-tab", { 'is-active': tab.key === activeKey.value, 'is-disabled': tab.disabled }], key: tab.key, onClick: ($event) => { select(tab.key) }, "data-v-339e5ee5": "" }, [
         "\n        ",
         (tab.icon) ? h('span', { class: "n-tab-icon", "data-v-339e5ee5": "" }, [

package/dist/components/NToastContainer.js

@@ -21,7 +21,7 @@ _sfc_main.render = function(ctx) {
         "\n    ",
         h('div', { class: ["n-toast-container", positionClass], "data-v-8ac4158": "" }, [
         "\n      ",
-        toasts.value.map((toast, index) =>
+        (toasts.value).map((toast, index) =>
         h('div', { class: ["n-toast", `is-${toast.type}`], key: toast.id, onClick: ($event) => { remove(toast.id) }, "data-v-8ac4158": "" }, [
         "\n        ",
         h('div', { class: "n-toast-body", "data-v-8ac4158": "" }, [

package/dist/components/NTreeMenu.js

@@ -50,7 +50,7 @@ _sfc_main.render = function(ctx) {
   const { expanded, toggleExpand, selectItem, hasChildren, isExpanded, isSelected, flatTree, toggle, $slots, emit, items, selectable, selected, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: "n-tree-menu", "data-v-44b3942a": "" }, [
         "\n    ",
-        flatTree.value.map((item, index) =>
+        (flatTree.value).map((item, index) =>
         h('div', { class: ["n-tree-item", { 'is-selected': isSelected(item.id) }], key: item.id, style: { '--n-tree-depth': String(item._depth) }, "data-v-44b3942a": "" }, [
         "\n      ",
         h('div', { class: "n-tree-row", onClick: ($event) => { selectItem(item) }, "data-v-44b3942a": "" }, [

package/dist/components/NVirtualList.js

@@ -56,7 +56,7 @@ _sfc_main.render = function(ctx) {
         "\n    ",
         h('div', { class: "n-virtual-list-spacer", style: { height: totalHeight.value + 'px', position: 'relative' }, "data-v-2d5f09ed": "" }, [
         "\n      ",
-        visibleItems.value.map((row, index) =>
+        (visibleItems.value).map((row, index) =>
         h('div', { class: "n-virtual-list-row", key: keyFn ? keyFn(row.item, row.index) : row.index, style: { position: 'absolute', top: row.top + 'px', width: '100%', height: itemHeight + 'px' }, "data-v-2d5f09ed": "" }, [
         "\n        ",
         renderItem(row.item, row.index),

package/dist/services/ToastService.js

@@ -1,21 +1,28 @@
 import { signal } from 'nexa-framework';
-const toasts = signal([]);
-let nextId = 1;
+const g = globalThis;
+const GLOBAL_KEY = '__NEXA_TOAST_SERVICE__';
+if (!g[GLOBAL_KEY]) {
+    g[GLOBAL_KEY] = {
+        toasts: signal([]),
+        nextId: 1
+    };
+}
+const state = g[GLOBAL_KEY];
 export const useToast = () => {
     const add = (message, type = 'info', duration = 3000) => {
-        const id = nextId++;
+        const id = state.nextId++;
         const toast = { id, message, type, duration };
-        toasts.value = [...toasts.value, toast];
+        state.toasts.value = [...state.toasts.value, toast];
         if (duration > 0) {
             setTimeout(() => remove(id), duration);
         }
         return id;
     };
     const remove = (id) => {
-        toasts.value = toasts.value.filter((t) => t.id !== id);
+        state.toasts.value = state.toasts.value.filter((t) => t.id !== id);
     };
     return {
-        toasts,
+        toasts: state.toasts,
         add,
         remove,
         success: (msg, dur) => add(msg, 'success', dur),

package/dist/styles/tokens.css

@@ -0,0 +1,170 @@
+:root {
+  /* ─── Color Palette ─── */
+  --n-color-primary: #3b82f6;
+  --n-color-primary-hover: #2563eb;
+  --n-color-primary-active: #1d4ed8;
+  --n-color-primary-light: rgba(59, 130, 246, 0.12);
+  --n-color-primary-glow: rgba(59, 130, 246, 0.3);
+
+  --n-color-success: #10b981;
+  --n-color-success-hover: #059669;
+  --n-color-success-light: rgba(16, 185, 129, 0.12);
+
+  --n-color-warning: #f59e0b;
+  --n-color-warning-hover: #d97706;
+  --n-color-warning-light: rgba(245, 158, 11, 0.12);
+
+  --n-color-danger: #ef4444;
+  --n-color-danger-hover: #dc2626;
+  --n-color-danger-light: rgba(239, 68, 68, 0.12);
+
+  --n-color-info: #06b6d4;
+  --n-color-info-hover: #0891b2;
+  --n-color-info-light: rgba(6, 182, 212, 0.12);
+
+  --n-color-surface: #0f172a;
+  --n-color-surface-alt: #1e293b;
+  --n-color-surface-hover: #334155;
+  --n-color-surface-elevated: #1e293b;
+
+  --n-color-bg: #020617;
+  --n-color-bg-alt: #0f172a;
+
+  --n-color-text: #f8fafc;
+  --n-color-text-secondary: #94a3b8;
+  --n-color-text-muted: #64748b;
+  --n-color-text-inverse: #0f172a;
+
+  --n-color-border: rgba(255, 255, 255, 0.08);
+  --n-color-border-hover: rgba(255, 255, 255, 0.15);
+  --n-color-border-active: rgba(255, 255, 255, 0.25);
+
+  --n-color-overlay: rgba(2, 6, 17, 0.7);
+  --n-color-glass: rgba(255, 255, 255, 0.04);
+  --n-color-glass-border: rgba(255, 255, 255, 0.08);
+  --n-color-glass-hover: rgba(255, 255, 255, 0.08);
+
+  /* ─── Typography ─── */
+  --n-font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --n-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  --n-text-xs: 0.75rem;
+  --n-text-sm: 0.875rem;
+  --n-text-base: 1rem;
+  --n-text-lg: 1.125rem;
+  --n-text-xl: 1.25rem;
+  --n-text-2xl: 1.5rem;
+  --n-text-3xl: 2rem;
+
+  --n-weight-normal: 400;
+  --n-weight-medium: 500;
+  --n-weight-semibold: 600;
+  --n-weight-bold: 700;
+  --n-weight-extrabold: 800;
+
+  --n-leading-tight: 1.25;
+  --n-leading-normal: 1.5;
+  --n-leading-relaxed: 1.75;
+
+  --n-tracking-tight: -0.025em;
+  --n-tracking-normal: 0;
+  --n-tracking-wide: 0.05em;
+
+  /* ─── Spacing (4px base) ─── */
+  --n-space-1: 0.25rem;
+  --n-space-2: 0.5rem;
+  --n-space-3: 0.75rem;
+  --n-space-4: 1rem;
+  --n-space-5: 1.25rem;
+  --n-space-6: 1.5rem;
+  --n-space-8: 2rem;
+  --n-space-10: 2.5rem;
+  --n-space-12: 3rem;
+  --n-space-16: 4rem;
+
+  /* ─── Border Radius ─── */
+  --n-radius-sm: 6px;
+  --n-radius-md: 10px;
+  --n-radius-lg: 14px;
+  --n-radius-xl: 20px;
+  --n-radius-2xl: 28px;
+  --n-radius-full: 9999px;
+
+  /* ─── Shadows ─── */
+  --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+  --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+  --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.3);
+  --n-shadow-glow-success: 0 4px 15px -3px rgba(16, 185, 129, 0.3);
+  --n-shadow-glow-warning: 0 4px 15px -3px rgba(245, 158, 11, 0.3);
+  --n-shadow-glow-info: 0 4px 15px -3px rgba(6, 182, 212, 0.3);
+  --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.3);
+
+  /* ─── Transitions ─── */
+  --n-transition-fast: 0.15s ease;
+  --n-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --n-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  --n-transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ─── Z-Index Scale ─── */
+  --n-z-dropdown: 100;
+  --n-z-sticky: 200;
+  --n-z-overlay: 500;
+  --n-z-modal: 2000;
+  --n-z-toast: 3000;
+  --n-z-tooltip: 1000;
+}
+
+/* ─── Light Theme ─── */
+[data-theme="light"] {
+  --n-color-primary: #2563eb;
+  --n-color-primary-hover: #1d4ed8;
+  --n-color-primary-active: #1e40af;
+  --n-color-primary-light: rgba(37, 99, 235, 0.08);
+  --n-color-primary-glow: rgba(37, 99, 235, 0.2);
+
+  --n-color-success: #059669;
+  --n-color-success-light: rgba(5, 150, 105, 0.08);
+
+  --n-color-warning: #d97706;
+  --n-color-warning-light: rgba(217, 119, 6, 0.08);
+
+  --n-color-danger: #dc2626;
+  --n-color-danger-light: rgba(220, 38, 38, 0.08);
+
+  --n-color-info: #0891b2;
+  --n-color-info-light: rgba(8, 145, 178, 0.08);
+
+  --n-color-surface: #ffffff;
+  --n-color-surface-alt: #f8fafc;
+  --n-color-surface-hover: #f1f5f9;
+  --n-color-surface-elevated: #ffffff;
+
+  --n-color-bg: #f8fafc;
+  --n-color-bg-alt: #f1f5f9;
+
+  --n-color-text: #0f172a;
+  --n-color-text-secondary: #475569;
+  --n-color-text-muted: #94a3b8;
+  --n-color-text-inverse: #f8fafc;
+
+  --n-color-border: rgba(0, 0, 0, 0.08);
+  --n-color-border-hover: rgba(0, 0, 0, 0.15);
+  --n-color-border-active: rgba(0, 0, 0, 0.25);
+
+  --n-color-overlay: rgba(15, 23, 42, 0.5);
+  --n-color-glass: rgba(255, 255, 255, 0.6);
+  --n-color-glass-border: rgba(0, 0, 0, 0.06);
+  --n-color-glass-hover: rgba(255, 255, 255, 0.8);
+
+  --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
+  --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
+  --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
+  --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.2);
+  --n-shadow-glow-success: 0 4px 15px -3px rgba(5, 150, 105, 0.2);
+  --n-shadow-glow-warning: 0 4px 15px -3px rgba(217, 119, 6, 0.2);
+  --n-shadow-glow-info: 0 4px 15px -3px rgba(8, 145, 178, 0.2);
+  --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.2);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-ui-kit",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Premium component library for Nexa Framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,6 +11,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./styles/tokens.css": {
+      "import": "./dist/styles/tokens.css",
+      "default": "./dist/styles/tokens.css"
     }
   },
   "files": [
@@ -18,15 +22,15 @@
     "src"
   ],
   "dependencies": {
-    "nexa-framework": "0.7.1",
-    "nexa-mobile": "0.7.1"
+    "nexa-framework": "0.7.3",
+    "nexa-mobile": "0.7.3"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
-    "nexa-compiler": "0.7.1"
+    "nexa-compiler": "0.7.3"
   },
   "scripts": {
-    "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist",
+    "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",
     "dev": "tsc --watch"
   }
 }

package/src/components/NModal.nexa

@@ -16,6 +16,8 @@ let modalEl = null
 let previousFocus = null
 const bodyOverflow = signal('')
 
+const setModalRef = (el) => { modalEl = el }
+
 const sizeMap = { sm: '400px', md: '500px', lg: '640px', xl: '800px', full: '96%' }
 
 effect(() => {
@@ -90,7 +92,7 @@ onUnmounted(() => {
         @click="handleOverlayClick"
       ></div>
       <div
-        ref="modalEl"
+        :ref="setModalRef"
         class="n-modal-container"
         :class="{ 'is-active': show }"
         :style="{ maxWidth: sizeMap[size] || size }"

package/src/components/NSkeleton.nexa

@@ -1,16 +1,18 @@
 <script setup>
 const props = defineProps({
-  variant: { type: String, default: 'text' }, // text, circle, card
+  variant: { type: String, default: 'text' },
   lines: { type: Number, default: 3 },
   width: { type: String, default: '100%' },
   height: { type: String, default: '' }
 })
+
+const lineArray = Array.from({ length: props.lines || 3 }, (_, i) => i + 1)
 </script>
 
 <template>
   <div class="n-skeleton" :class="`is-${variant}`" :style="{ width, height }">
     <div v-if="variant === 'text'" class="n-skeleton-lines">
-      <div v-for="i in lines" :key="i" class="n-skeleton-line" :style="{ width: i === lines ? '60%' : '100%' }"></div>
+      <div v-for="n in lineArray" :key="n" class="n-skeleton-line" :style="{ width: n === lineArray.length ? '60%' : '100%' }"></div>
     </div>
     <div v-if="variant === 'circle'" class="n-skeleton-circle"></div>
     <div v-if="variant === 'card'" class="n-skeleton-card">

package/src/services/ToastService.ts

@@ -9,14 +9,23 @@ export interface Toast {
   duration?: number
 }
 
-const toasts = signal<Toast[]>([])
-let nextId = 1
+const g = globalThis as any
+const GLOBAL_KEY = '__NEXA_TOAST_SERVICE__'
+
+if (!g[GLOBAL_KEY]) {
+  g[GLOBAL_KEY] = {
+    toasts: signal<Toast[]>([]),
+    nextId: 1
+  }
+}
+
+const state = g[GLOBAL_KEY] as { toasts: ReturnType<typeof signal<Toast[]>>, nextId: number }
 
 export const useToast = () => {
   const add = (message: string, type: ToastType = 'info', duration: number = 3000) => {
-    const id = nextId++
+    const id = state.nextId++
     const toast: Toast = { id, message, type, duration }
-    toasts.value = [...toasts.value, toast]
+    state.toasts.value = [...state.toasts.value, toast]
     
     if (duration > 0) {
       setTimeout(() => remove(id), duration)
@@ -26,11 +35,11 @@ export const useToast = () => {
   }
 
   const remove = (id: number) => {
-    toasts.value = toasts.value.filter((t: any) => t.id !== id)
+    state.toasts.value = state.toasts.value.filter((t: any) => t.id !== id)
   }
 
   return {
-    toasts,
+    toasts: state.toasts,
     add,
     remove,
     success: (msg: string, dur?: number) => add(msg, 'success', dur),