nexa-ui-kit 0.7.4 → 0.7.6

package/dist/components/NAlert.js

@@ -23,7 +23,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { visible, dismiss, icons, $slots, emit, variant, title, closable, icon, Fragment: _ntc_Fragment } = ctx
+  let { visible, dismiss, icons, $slots, emit, variant, title, closable, icon, Fragment: _ntc_Fragment } = ctx
     return (visible.value) ? h('div', { class: ["n-alert", `is-${variant}`], "data-v-22a3a541": "" }, [
         "\n    ",
         h('span', { class: "n-alert-icon", "data-v-22a3a541": "" }, [

package/dist/components/NAutocomplete.js

@@ -39,7 +39,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { instanceId, listboxId, inputId, isOpen, query, focusedIndex, rootEl, popupStyle, resolvedPlacement, stopTracking, completeTimer, normalizeOption, normalizedOptions, filteredOptions, activeId, close, open, requestComplete, onInput, onFocus, onKeydown, selectOption, clearValue, openAll, onBeforeUnmount, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, readonly, clearable, minLength, delay, loading, dropdown, emptyMessage, placement, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+  let { instanceId, listboxId, inputId, isOpen, query, focusedIndex, rootEl, popupStyle, resolvedPlacement, stopTracking, completeTimer, normalizeOption, normalizedOptions, filteredOptions, activeId, close, open, requestComplete, onInput, onFocus, onKeydown, selectOption, clearValue, openAll, onBeforeUnmount, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, readonly, clearable, minLength, delay, loading, dropdown, emptyMessage, placement, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
     return h('div', { class: "n-ac", "data-autocomplete-root": instanceId, "data-v-741257a1": "" }, [
         "\n    ",
         (label) ? h('label', { class: "n-ac-label", for: inputId, "data-v-741257a1": "" }, [

package/dist/components/NAvatar.js

@@ -26,7 +26,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
+  let { initials, $slots, label, size, variant, image, shape, Fragment: _ntc_Fragment } = ctx
     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": "" }, [

package/dist/components/NBadge.js

@@ -17,7 +17,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { $slots, variant, size, rounded, dot, position, Fragment: _ntc_Fragment } = ctx
+  let { $slots, variant, size, rounded, dot, position, Fragment: _ntc_Fragment } = ctx
     return (dot) ? h('span', { class: ["n-badge-dot", [`is-${variant}`, position ? `is-${position}` : '']], "data-v-ff3cf3e": "" }) : (true) ? h('span', { class: ['n-badge', `n-badge-${variant}`, `n-badge-${size}`, rounded ? 'is-rounded' : ''], "data-v-ff3cf3e": "" }, [
         "\n    ",
         ctx.$slots.default ? ctx.$slots.default() : null,

package/dist/components/NBottomSheet.js

@@ -60,7 +60,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { yOffset, isDragging, currentSnap, gestures, sortedPoints, translateY, overlayOpacity, useGestures, $slots, emit, show, snapPoints, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+  let { yOffset, isDragging, currentSnap, gestures, sortedPoints, translateY, overlayOpacity, useGestures, $slots, emit, show, snapPoints, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
     return h(_ntc_Teleport, { to: "body", "data-v-55f61938": "" }, [
         "\n    ",
         h('div', { class: ["n-bottom-sheet-root", { 'is-active': show || isDragging.value }], "data-v-55f61938": "" }, [

package/dist/components/NButton.js

@@ -45,7 +45,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { ripple, handleClick, btnClass, $slots, emit, variant, size, type, disabled, loading, block, rounded, loadingText, Fragment: _ntc_Fragment } = ctx
+  let { ripple, handleClick, btnClass, $slots, emit, variant, size, type, disabled, loading, block, rounded, loadingText, Fragment: _ntc_Fragment } = ctx
     return h('button', { class: btnClass.value, type: type, disabled: disabled || loading, onClick: handleClick, "data-v-27fd765": "" }, [
         "\n    ",
         (loading) ? h('span', { class: "n-btn-loader", "data-v-27fd765": "" }) : null,

package/dist/components/NCard.js

@@ -18,7 +18,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { $slots, title, subtitle, padding, hoverable, variant, image, Fragment: _ntc_Fragment } = ctx
+  let { $slots, title, subtitle, padding, hoverable, variant, image, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: ['n-card', `is-${variant}`, hoverable ? 'is-hoverable' : ''], "data-v-34850782": "" }, [
         "\n    ",
         (image) ? h('img', { class: "n-card-image", src: image, "data-v-34850782": "" }) : null,

package/dist/components/NCheckbox.js

@@ -21,7 +21,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { toggle, $slots, emit, modelValue, label, disabled, indeterminate, Fragment: _ntc_Fragment } = 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-761e94fe": "" }, [
         "\n    ",
         h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-761e94fe": "" }, [

package/dist/components/NChips.js

@@ -45,7 +45,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { resolvedModel, normalize, chips, removeAt, $slots, emit, modelValue, removable, disabled, Fragment: _ntc_Fragment } = ctx
+  let { 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) =>

package/dist/components/NDataTable.js

@@ -166,7 +166,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { internalFirst, internalRows, internalSortField, internalSortOrder, internalFilters, effectiveFilters, columnWidths, resizing, internalSelection, lastPropGlobal, lastPropSelection, normalizeColumns, getRowKey, effectiveSelection, isRowSelected, toggleRowSelection, allVisibleSelected, toggleAllVisible, getHeaderContent, getRawValue, getCellContent, matchFilter, filteredRows, sortedRows, totalRecords, visibleRows, setSort, onSortClick, setGlobal, setColumnFilter, onColumnFilterInput, onPage, getWidth, startResize, NPaginator: _ntc_NPaginator, $slots, emit, value, columns, stripedRows, hoverRows, size, scrollable, paginator, rows, first, rowsPerPageOptions, selectionMode, selection, dataKey, sortField, sortOrder, resizableColumns, columnResizeMode, filterDisplay, globalFilter, globalFilterFields, filters, lazy, emptyMessage, showGridlines, Fragment: _ntc_Fragment } = ctx
+  let { internalFirst, internalRows, internalSortField, internalSortOrder, internalFilters, effectiveFilters, columnWidths, resizing, internalSelection, lastPropGlobal, lastPropSelection, normalizeColumns, getRowKey, effectiveSelection, isRowSelected, toggleRowSelection, allVisibleSelected, toggleAllVisible, getHeaderContent, getRawValue, getCellContent, matchFilter, filteredRows, sortedRows, totalRecords, visibleRows, setSort, onSortClick, setGlobal, setColumnFilter, onColumnFilterInput, onPage, getWidth, startResize, NPaginator: _ntc_NPaginator, $slots, emit, value, columns, stripedRows, hoverRows, size, scrollable, paginator, rows, first, rowsPerPageOptions, selectionMode, selection, dataKey, sortField, sortOrder, resizableColumns, columnResizeMode, filterDisplay, globalFilter, globalFilterFields, filters, lazy, emptyMessage, showGridlines, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: ["n-dt", [`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']], "data-v-17a3d2ce": "" }, [
         "\n    ",
         h('div', { class: "n-dt-toolbar", "data-v-17a3d2ce": "" }, [

package/dist/components/NDatepicker.js

@@ -173,7 +173,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { isOpen, viewDate, instanceId, popupStyle, resolvedPlacement, stopTracking, today, year, month, daysInMonth, firstDayOfWeek, calendarDays, formatDate, parseDate, minDate, maxDate, isDisabled, closePopup, syncViewDateFromModel, selectDate, prevMonth, nextMonth, monthNames, dayNames, isSelected, isToday, closeHandler, rootEl, openPopup, onBeforeUnmount, NInput: _ntc_NInput, trackFloatingOverlay, $slots, emit, modelValue, placeholder, disabled, min, max, placement, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+  let { isOpen, viewDate, instanceId, popupStyle, resolvedPlacement, stopTracking, today, year, month, daysInMonth, firstDayOfWeek, calendarDays, formatDate, parseDate, minDate, maxDate, isDisabled, closePopup, syncViewDateFromModel, selectDate, prevMonth, nextMonth, monthNames, dayNames, isSelected, isToday, closeHandler, rootEl, openPopup, onBeforeUnmount, NInput: _ntc_NInput, trackFloatingOverlay, $slots, emit, modelValue, placeholder, disabled, min, max, placement, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
     return h('div', { class: "n-datepicker", "data-datepicker-root": instanceId, "data-v-69fa2c78": "" }, [
         "\n    ",
         h('div', { class: "n-datepicker-input", onClick: openPopup, "data-v-69fa2c78": "" }, [

package/dist/components/NForm.js

@@ -111,7 +111,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { fieldNames, fields, registerField, getValues, values, errors, pending, valid, validateAll, reset, submit, onSubmit, provide, $slots, emit, validateOn, disabled, Fragment: _ntc_Fragment } = ctx
+  let { fieldNames, fields, registerField, getValues, values, errors, pending, valid, validateAll, reset, submit, onSubmit, provide, $slots, emit, validateOn, disabled, Fragment: _ntc_Fragment } = ctx
     return h('form', { class: "n-form", onSubmit: onSubmit, "data-v-38e99ca2": "" }, [
         "\n    ",
         ctx.$slots.default ? ctx.$slots.default({ values: values, errors: errors, valid: valid, pending: pending, submit: submit, reset: reset }) : null,

package/dist/components/NFormField.js

@@ -112,7 +112,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { nextAutoId, form, autoId, inputId, helpId, errorId, describedBy, value, initialValue, touched, pending, errors, dirty, error, invalid, shouldValidateOn, validate, setValue, onBlur, reset, unregister, inject, provide, $slots, emit, name, label, help, id, modelValue, rules, validateOn, showError, disabled, Fragment: _ntc_Fragment } = ctx
+  let { nextAutoId, form, autoId, inputId, helpId, errorId, describedBy, value, initialValue, touched, pending, errors, dirty, error, invalid, shouldValidateOn, validate, setValue, onBlur, reset, unregister, inject, provide, $slots, emit, name, label, help, id, modelValue, rules, validateOn, showError, disabled, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: ["n-form-field", { 'is-invalid': invalid.value, 'is-disabled': disabled, 'is-pending': pending.value }], "data-v-30bdb720": "" }, [
         "\n    ",
         (label) ? h('label', { class: "n-form-field-label", for: inputId.value, "data-v-30bdb720": "" }, [

package/dist/components/NImage.js

@@ -65,7 +65,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { loaded, error, visible, observer, imgRef, currentSrc, wrapperStyle, imgStyle, setRef, onLoad, onError, $slots, src, alt, fallback, fit, lazy, width, height, rounded, blur, Fragment: _ntc_Fragment } = ctx
+  let { loaded, error, visible, observer, imgRef, currentSrc, wrapperStyle, imgStyle, setRef, onLoad, onError, $slots, src, alt, fallback, fit, lazy, width, height, rounded, blur, Fragment: _ntc_Fragment } = ctx
     return h('span', { class: "n-image-wrapper", style: wrapperStyle.value, ref: setRef, "data-v-309b6eb8": "" }, [
         "\n    ",
         (!loaded.value) ? h('span', { class: "n-image-skeleton", "data-v-309b6eb8": "" }) : null,

package/dist/components/NInput.js

@@ -105,7 +105,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { field, showPassword, isFocused, effectiveValue, draft, effectiveId, effectiveDescribedBy, effectiveInvalid, effectiveError, effectiveDisabled, inputType, currentLength, onInput, onFocus, onBlur, clear, togglePassword, inject, $slots, emit, modelValue, type, placeholder, label, error, id, name, autocomplete, ariaDescribedby, ariaInvalid, bindField, disabled, readonly, clearable, maxlength, prefixIcon, suffixIcon, Fragment: _ntc_Fragment } = ctx
+  let { field, showPassword, isFocused, effectiveValue, draft, effectiveId, effectiveDescribedBy, effectiveInvalid, effectiveError, effectiveDisabled, inputType, currentLength, onInput, onFocus, onBlur, clear, togglePassword, inject, $slots, emit, modelValue, type, placeholder, label, error, id, name, autocomplete, ariaDescribedby, ariaInvalid, bindField, disabled, readonly, clearable, maxlength, prefixIcon, suffixIcon, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: "n-input-group", "data-v-7dbed0f8": "" }, [
         "\n    ",
         (label) ? h('label', { class: "n-input-label", "data-v-7dbed0f8": "" }, [

package/dist/components/NInputNumber.js

@@ -1,7 +1,7 @@
 import { signal, computed, inject, effect, batch, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-6dd313',
+  __scopeId: 'data-v-76a3e703',
   __hmrId: 'NInputNumber_nexa',
   props: {
   modelValue: { type: Number, default: 0 },
@@ -12,7 +12,9 @@ const _sfc_main = defineComponent({
   disabled: { type: Boolean, default: false },
   readonly: { type: Boolean, default: false },
   label: { type: String, default: '' },
-  placeholder: { type: String, default: '' }
+  placeholder: { type: String, default: '' },
+  currency: { type: String, default: undefined },
+  locale: { type: String, default: undefined },
 },
   emits: ['update:modelValue', 'focus', 'blur'],
   setup(props, setupContext) {
@@ -38,6 +40,29 @@ const _sfc_main = defineComponent({
       text.value = nextText
     })
     const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
+    const isFocused = signal(false)
+    const nfSignal = signal(null)
+    effect(() => {
+      if (props.currency) {
+        nfSignal.value = new Intl.NumberFormat(props.locale || undefined, {
+          style: 'currency',
+          currency: props.currency,
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })
+      } else {
+        nfSignal.value = null
+      }
+    })
+    const displayText = computed(() => {
+      const raw = text.value
+      const nf = nfSignal.value
+      if (!nf || isFocused.value) return raw
+      if (!raw) return raw
+      const n = parseFloat(raw)
+      if (Number.isNaN(n)) return raw
+      return nf.format(n)
+    })
     const sanitize = (raw) => {
       const input = String(raw ?? '')
       if (!input) return ''
@@ -153,6 +178,7 @@ const _sfc_main = defineComponent({
     const onBlur = () => {
       emit('blur')
       if (props.bindField && field?.onBlur) field.onBlur()
+      isFocused.value = false
       const n = parse(text.value)
       const clamped = clamp(n)
       if (clamped == null) {
@@ -165,27 +191,30 @@ const _sfc_main = defineComponent({
         else emit('update:modelValue', clamped)
       })
     }
-    const onFocus = () => emit('focus')
-    return { field, effectiveValue, effectiveDisabled, text, canEdit, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit }
+    const onFocus = () => {
+      isFocused.value = true
+      emit('focus')
+    }
+    return { field, effectiveValue, effectiveDisabled, text, canEdit, isFocused, nfSignal, displayText, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit }
   }
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { field, effectiveValue, effectiveDisabled, text, canEdit, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit, modelValue, min, max, step, bindField, disabled, readonly, label, placeholder, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: "n-inum", "data-v-6dd313": "" }, [
+  let { field, effectiveValue, effectiveDisabled, text, canEdit, isFocused, nfSignal, displayText, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit, modelValue, min, max, step, bindField, disabled, readonly, label, placeholder, currency, locale, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: "n-inum", "data-v-76a3e703": "" }, [
         "\n    ",
-        (label) ? h('label', { class: "n-inum-label", "data-v-6dd313": "" }, [
+        (label) ? h('label', { class: "n-inum-label", "data-v-76a3e703": "" }, [
         label
       ]) : null,
-        h('div', { class: ["n-inum-wrap", { 'is-disabled': effectiveDisabled.value }], "data-v-6dd313": "" }, [
+        h('div', { class: ["n-inum-wrap", { 'is-disabled': effectiveDisabled.value }], "data-v-76a3e703": "" }, [
         "\n      ",
-        h('button', { class: "n-inum-btn n-inum-dec", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Decrement", onClick: dec, "data-v-6dd313": "" }, [
+        h('button', { class: "n-inum-btn n-inum-dec", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Decrement", onClick: dec, "data-v-76a3e703": "" }, [
         "−"
       ]),
         "\n      ",
-        h('input', { class: "n-inum-input", type: "text", value: text.value, placeholder: placeholder, disabled: effectiveDisabled.value, readonly: readonly, inputmode: "decimal", autocomplete: "off", onBeforeinput: onBeforeInput, onKeydown: onKeydown, onPaste: onPaste, onInput: onInput, onFocus: onFocus, onBlur: onBlur, "data-v-6dd313": "" }),
+        h('input', { class: "n-inum-input", type: "text", value: displayText.value, placeholder: placeholder, disabled: effectiveDisabled.value, readonly: readonly, inputmode: "decimal", autocomplete: "off", onBeforeinput: onBeforeInput, onKeydown: onKeydown, onPaste: onPaste, onInput: onInput, onFocus: onFocus, onBlur: onBlur, "data-v-76a3e703": "" }),
         "\n      ",
-        h('button', { class: "n-inum-btn n-inum-inc", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Increment", onClick: inc, "data-v-6dd313": "" }, [
+        h('button', { class: "n-inum-btn n-inum-inc", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Increment", onClick: inc, "data-v-76a3e703": "" }, [
         "+"
       ]),
         "\n    "
@@ -193,10 +222,10 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-6dd313'
+_sfc_main.__scopeId = 'data-v-76a3e703'
 _sfc_main.__hmrId = 'NInputNumber_nexa'
 
 export default _sfc_main
 
-const __style = `.n-inum[data-v-6dd313]{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-inum-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-inum-wrap{display:flex;align-items:stretch;min-height:44px;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);overflow:hidden;transition:all var(--n-transition-fast)}.n-inum-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-inum-input{flex:1;background:transparent;border:none;outline:none;padding:0.75rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit;text-align:center;line-height:1.2;box-sizing:border-box}.n-inum-btn{width:2.5rem;background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--n-text-base);transition:all var(--n-transition-fast)}.n-inum-btn:hover:not(:disabled){background:var(--n-color-glass);color:var(--n-color-text)}.n-inum-btn:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6;cursor:not-allowed;background:var(--n-color-surface-alt)}`
-injectStyle('data-v-6dd313', __style)
+const __style = `.n-inum[data-v-76a3e703]{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-inum-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-inum-wrap{display:flex;align-items:stretch;min-height:44px;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);overflow:hidden;transition:all var(--n-transition-fast)}.n-inum-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-inum-input{flex:1;background:transparent;border:none;outline:none;padding:0.75rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit;text-align:center;line-height:1.2;box-sizing:border-box}.n-inum-btn{width:2.5rem;background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--n-text-base);transition:all var(--n-transition-fast)}.n-inum-btn:hover:not(:disabled){background:var(--n-color-glass);color:var(--n-color-text)}.n-inum-btn:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6;cursor:not-allowed;background:var(--n-color-surface-alt)}`
+injectStyle('data-v-76a3e703', __style)

package/dist/components/NInputNumber.nexa

@@ -10,7 +10,9 @@ const props = defineProps({
   disabled: { type: Boolean, default: false },
   readonly: { type: Boolean, default: false },
   label: { type: String, default: '' },
-  placeholder: { type: String, default: '' }
+  placeholder: { type: String, default: '' },
+  currency: { type: String, default: undefined },
+  locale: { type: String, default: undefined },
 })
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
@@ -42,6 +44,33 @@ effect(() => {
 
 const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
 
+const isFocused = signal(false)
+
+const nfSignal = signal(null)
+
+effect(() => {
+  if (props.currency) {
+    nfSignal.value = new Intl.NumberFormat(props.locale || undefined, {
+      style: 'currency',
+      currency: props.currency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })
+  } else {
+    nfSignal.value = null
+  }
+})
+
+const displayText = computed(() => {
+  const raw = text.value
+  const nf = nfSignal.value
+  if (!nf || isFocused.value) return raw
+  if (!raw) return raw
+  const n = parseFloat(raw)
+  if (Number.isNaN(n)) return raw
+  return nf.format(n)
+})
+
 const sanitize = (raw) => {
   const input = String(raw ?? '')
   if (!input) return ''
@@ -167,6 +196,7 @@ const onKeydown = (e) => {
 const onBlur = () => {
   emit('blur')
   if (props.bindField && field?.onBlur) field.onBlur()
+  isFocused.value = false
   const n = parse(text.value)
   const clamped = clamp(n)
   if (clamped == null) {
@@ -180,7 +210,10 @@ const onBlur = () => {
   })
 }
 
-const onFocus = () => emit('focus')
+const onFocus = () => {
+  isFocused.value = true
+  emit('focus')
+}
 </script>
 
 <template>
@@ -188,7 +221,7 @@ const onFocus = () => emit('focus')
     <label v-if="label" class="n-inum-label">{{ label }}</label>
     <div class="n-inum-wrap" :class="{ 'is-disabled': effectiveDisabled.value }">
       <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec">−</button>
-      <input class="n-inum-input" type="text" :value="text.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
+      <input class="n-inum-input" type="text" :value="displayText.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
       <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
     </div>
   </div>

package/dist/components/NModal.js

@@ -78,7 +78,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  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
+  let { 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-655f39d1": "" }, [

package/dist/components/NMultiSelect.js

@@ -64,7 +64,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { field, instanceId, isOpen, query, queryDraft, focusedIndex, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, normalizeOption, normalizedOptions, effectiveModelValue, effectiveDisabled, selectedSet, filteredOptions, selectedLabels, close, open, toggleOpen, setModel, toggleValue, clear, removeChip, onKeydown, onSearchInput, inject, onBeforeUnmount, batch, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, bindField, searchable, clearable, placement, appendTo, maxChips, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+  let { field, instanceId, isOpen, query, queryDraft, focusedIndex, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, normalizeOption, normalizedOptions, effectiveModelValue, effectiveDisabled, selectedSet, filteredOptions, selectedLabels, close, open, toggleOpen, setModel, toggleValue, clear, removeChip, onKeydown, onSearchInput, inject, onBeforeUnmount, batch, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, bindField, searchable, clearable, placement, appendTo, maxChips, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
     return h('div', { class: ["n-ms", { 'is-open': isOpen.value, 'is-disabled': effectiveDisabled.value }], "data-ms-root": instanceId, "data-v-12b3b8c4": "" }, [
         "\n    ",
         (label) ? h('label', { class: "n-ms-label", "data-v-12b3b8c4": "" }, [

package/dist/components/NPaginator.js

@@ -51,7 +51,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { safeFirst, safeRows, page, pageCount, canPrev, canNext, goToPage, prev, next, firstPage, lastPage, changeRows, start, end, $slots, emit, first, rows, totalRecords, rowsPerPageOptions, Fragment: _ntc_Fragment } = ctx
+  let { safeFirst, safeRows, page, pageCount, canPrev, canNext, goToPage, prev, next, firstPage, lastPage, changeRows, start, end, $slots, emit, first, rows, totalRecords, rowsPerPageOptions, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: "n-paginator", "data-v-372b30ac": "" }, [
         "\n    ",
         h('div', { class: "n-paginator-left", "data-v-372b30ac": "" }, [

package/dist/components/NPassword.js

@@ -98,7 +98,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { instanceId, inputId, masked, type, hasValue, requirements, strength, internalError, errorMessage, ariaInvalid, describedBy, onInput, clear, toggle, $slots, emit, modelValue, placeholder, label, error, disabled, readonly, name, autocomplete, id, clearable, toggleMask, showStrength, validate, showRequirements, minLength, requireLower, requireUpper, requireNumber, requireSpecial, Fragment: _ntc_Fragment } = ctx
+  let { instanceId, inputId, masked, type, hasValue, requirements, strength, internalError, errorMessage, ariaInvalid, describedBy, onInput, clear, toggle, $slots, emit, modelValue, placeholder, label, error, disabled, readonly, name, autocomplete, id, clearable, toggleMask, showStrength, validate, showRequirements, minLength, requireLower, requireUpper, requireNumber, requireSpecial, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: "n-password", "data-v-7b897096": "" }, [
         "\n    ",
         (label) ? h('label', { class: "n-password-label", for: inputId.value, "data-v-7b897096": "" }, [

package/dist/components/NProgressBar.js

@@ -20,7 +20,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { percentage, $slots, value, max, variant, size, showLabel, striped, animated, Fragment: _ntc_Fragment } = ctx
+  let { percentage, $slots, value, max, variant, size, showLabel, striped, animated, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: ["n-progress", [`is-${size}`, striped ? 'is-striped' : '', animated ? 'is-animated' : '']], "data-v-daaa1d0": "" }, [
         "\n    ",
         h('div', { class: "n-progress-track", "data-v-daaa1d0": "" }, [

package/dist/components/NRadio.js

@@ -23,7 +23,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { isChecked, select, $slots, emit, modelValue, value, label, disabled, name, Fragment: _ntc_Fragment } = ctx
+  let { isChecked, select, $slots, emit, modelValue, value, label, disabled, name, Fragment: _ntc_Fragment } = ctx
     return h('label', { class: ["n-radio", { 'is-checked': isChecked(), 'is-disabled': disabled }], "data-v-5c3cc2": "" }, [
         "\n    ",
         h('div', { class: "n-radio-circle", onClick: select, "data-v-5c3cc2": "" }, [

package/dist/components/NScrollView.js

@@ -63,7 +63,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { isRefreshing, pullDelta, refreshThreshold, touchStartY, startScrollTop, pullProgress, spinnerScale, onTouchStart, onTouchMove, onTouchEnd, onScroll, $slots, onRefresh, onEndReached, endReachedThreshold, horizontal, Fragment: _ntc_Fragment } = ctx
+  let { isRefreshing, pullDelta, refreshThreshold, touchStartY, startScrollTop, pullProgress, spinnerScale, onTouchStart, onTouchMove, onTouchEnd, onScroll, $slots, onRefresh, onEndReached, endReachedThreshold, horizontal, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: ["n-scroll-view", { 'n-scroll-view--horizontal': horizontal }], onScroll: onScroll, onTouchstart: onTouchStart, onTouchmove: onTouchMove, onTouchend: onTouchEnd, "data-v-7469d561": "" }, [
         "\n    ",
         (onRefresh) ? h('div', { class: ["n-scroll-view-ptr", { 'is-refreshing': isRefreshing.value }], style: { height: pullDelta.value + 'px' }, "data-v-7469d561": "" }, [

package/dist/components/NSelect.js

@@ -174,7 +174,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { isOpen, query, focusedIndex, instanceId, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, filteredOptions, selectedOption, close, open, toggle, select, clear, handleKeydown, getFlatOptions, onBeforeUnmount, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, searchable, clearable, placement, appendTo, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+  let { isOpen, query, focusedIndex, instanceId, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, filteredOptions, selectedOption, close, open, toggle, select, clear, handleKeydown, getFlatOptions, onBeforeUnmount, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, searchable, clearable, placement, appendTo, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
     return h('div', { class: ["n-select", { 'is-open': isOpen.value, 'is-disabled': disabled }], "data-select-root": instanceId, "data-v-fef169b": "" }, [
         "\n    ",
         (label) ? h('label', { class: "n-select-label", "data-v-fef169b": "" }, [

package/dist/components/NSkeleton.js

@@ -17,7 +17,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { lineArray, $slots, variant, lines, width, height, Fragment: _ntc_Fragment } = ctx
+  let { 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-6b9116c8": "" }, [

package/dist/components/NSwitch.js

@@ -20,7 +20,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { toggle, $slots, emit, modelValue, disabled, label, Fragment: _ntc_Fragment } = ctx
+  let { toggle, $slots, emit, modelValue, disabled, label, Fragment: _ntc_Fragment } = ctx
     return h('label', { class: ["n-switch", { 'is-checked': modelValue, 'is-disabled': disabled }], "data-v-3cd56cb4": "" }, [
         "\n    ",
         h('div', { class: "n-switch-track", onClick: toggle, "data-v-3cd56cb4": "" }, [

package/dist/components/NTabs.js

@@ -22,7 +22,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { activeKey, select, activeIndex, $slots, emit, tabs, modelValue, Fragment: _ntc_Fragment } = ctx
+  let { activeKey, select, activeIndex, $slots, emit, tabs, modelValue, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: "n-tabs", "data-v-339e5ee5": "" }, [
         "\n    ",
         h('div', { class: "n-tabs-header", "data-v-339e5ee5": "" }, [

package/dist/components/NTag.js

@@ -17,7 +17,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { $slots, emit, variant, size, closable, rounded, Fragment: _ntc_Fragment } = ctx
+  let { $slots, emit, variant, size, closable, rounded, Fragment: _ntc_Fragment } = ctx
     return h('span', { class: ['n-tag', `n-tag-${variant}`, `n-tag-${size}`, rounded ? 'is-rounded' : ''], "data-v-4d63a958": "" }, [
         "\n    ",
         ctx.$slots.default ? ctx.$slots.default() : null,

package/dist/components/NToastContainer.js

@@ -16,7 +16,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { toasts, remove, positionClass, useToast, $slots, position, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+  let { toasts, remove, positionClass, useToast, $slots, position, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
     return h(_ntc_Teleport, { to: "body", "data-v-8ac4158": "" }, [
         "\n    ",
         h('div', { class: ["n-toast-container", positionClass], "data-v-8ac4158": "" }, [

package/dist/components/NTooltip.js

@@ -66,7 +66,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { isVisible, instanceId, popupStyle, resolvedPlacement, rootEl, stopTracking, showTimer, hideTimer, startTracking, stop, show, hide, trackFloatingOverlay, $slots, text, position, delay, hideDelay, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+  let { isVisible, instanceId, popupStyle, resolvedPlacement, rootEl, stopTracking, showTimer, hideTimer, startTracking, stop, show, hide, trackFloatingOverlay, $slots, text, position, delay, hideDelay, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
     return h('div', { class: "n-tooltip-wrapper", "data-tooltip-root": instanceId, onMouseenter: show, onMouseleave: hide, onFocusin: show, onFocusout: hide, "data-v-522b965d": "" }, [
         "\n    ",
         ctx.$slots.default ? ctx.$slots.default() : null,

package/dist/components/NTreeMenu.js

@@ -47,7 +47,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { expanded, toggleExpand, selectItem, hasChildren, isExpanded, isSelected, flatTree, toggle, $slots, emit, items, selectable, selected, Fragment: _ntc_Fragment } = ctx
+  let { 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) =>

package/dist/components/NVirtualList.js

@@ -51,7 +51,7 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { containerRef, scrollTop, containerHeight, totalHeight, visibleRange, visibleItems, resizeObserver, onScroll, $slots, items, itemHeight, overscan, renderItem, keyFn, Fragment: _ntc_Fragment } = ctx
+  let { containerRef, scrollTop, containerHeight, totalHeight, visibleRange, visibleItems, resizeObserver, onScroll, $slots, items, itemHeight, overscan, renderItem, keyFn, Fragment: _ntc_Fragment } = ctx
     return h('div', { class: "n-virtual-list", onScroll: onScroll, ref: el => containerRef.value = el, "data-v-2d5f09ed": "" }, [
         "\n    ",
         h('div', { class: "n-virtual-list-spacer", style: { height: totalHeight.value + 'px', position: 'relative' }, "data-v-2d5f09ed": "" }, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-ui-kit",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description": "Premium component library for Nexa Framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,12 +22,12 @@
     "src"
   ],
   "dependencies": {
-    "nexa-framework": "0.7.4",
-    "nexa-mobile": "0.7.4"
+    "nexa-framework": "0.7.6",
+    "nexa-mobile": "0.7.6"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
-    "nexa-compiler": "0.7.4"
+    "nexa-compiler": "0.7.6"
   },
   "scripts": {
     "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",

package/src/components/NInputNumber.nexa

@@ -10,7 +10,9 @@ const props = defineProps({
   disabled: { type: Boolean, default: false },
   readonly: { type: Boolean, default: false },
   label: { type: String, default: '' },
-  placeholder: { type: String, default: '' }
+  placeholder: { type: String, default: '' },
+  currency: { type: String, default: undefined },
+  locale: { type: String, default: undefined },
 })
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
@@ -42,6 +44,33 @@ effect(() => {
 
 const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
 
+const isFocused = signal(false)
+
+const nfSignal = signal(null)
+
+effect(() => {
+  if (props.currency) {
+    nfSignal.value = new Intl.NumberFormat(props.locale || undefined, {
+      style: 'currency',
+      currency: props.currency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })
+  } else {
+    nfSignal.value = null
+  }
+})
+
+const displayText = computed(() => {
+  const raw = text.value
+  const nf = nfSignal.value
+  if (!nf || isFocused.value) return raw
+  if (!raw) return raw
+  const n = parseFloat(raw)
+  if (Number.isNaN(n)) return raw
+  return nf.format(n)
+})
+
 const sanitize = (raw) => {
   const input = String(raw ?? '')
   if (!input) return ''
@@ -167,6 +196,7 @@ const onKeydown = (e) => {
 const onBlur = () => {
   emit('blur')
   if (props.bindField && field?.onBlur) field.onBlur()
+  isFocused.value = false
   const n = parse(text.value)
   const clamped = clamp(n)
   if (clamped == null) {
@@ -180,7 +210,10 @@ const onBlur = () => {
   })
 }
 
-const onFocus = () => emit('focus')
+const onFocus = () => {
+  isFocused.value = true
+  emit('focus')
+}
 </script>
 
 <template>
@@ -188,7 +221,7 @@ const onFocus = () => emit('focus')
     <label v-if="label" class="n-inum-label">{{ label }}</label>
     <div class="n-inum-wrap" :class="{ 'is-disabled': effectiveDisabled.value }">
       <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec">−</button>
-      <input class="n-inum-input" type="text" :value="text.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
+      <input class="n-inum-input" type="text" :value="displayText.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
       <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
     </div>
   </div>