nexa-ui-kit 0.6.0

package/src/components/NInputNumber.nexa

@@ -0,0 +1,199 @@
+<script setup>
+import { signal, computed, inject, effect, batch } from 'nexa-framework'
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  min: { type: Number, default: null },
+  max: { type: Number, default: null },
+  step: { type: Number, default: 1 },
+  bindField: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const field = inject('nexa-ui:form-field', undefined)
+
+const effectiveValue = computed(() => {
+  if (props.bindField && field?.value) {
+    const v = field.value.value
+    return typeof v === 'number' ? v : Number(v)
+  }
+  return props.modelValue
+})
+
+const effectiveDisabled = computed(() => {
+  if (props.disabled) return true
+  if (props.bindField && field?.disabled) return !!field.disabled.value
+  return false
+})
+
+const text = signal(String(effectiveValue.value ?? ''))
+
+effect(() => {
+  const next = effectiveValue.value
+  const nextText = next === null || next === undefined ? '' : String(next)
+  if (text.value === nextText) return
+  text.value = nextText
+})
+
+const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
+
+const sanitize = (raw) => {
+  const input = String(raw ?? '')
+  if (!input) return ''
+  const allowMinus = typeof props.min === 'number' ? props.min < 0 : true
+  let out = ''
+  let hasDot = false
+  let hasMinus = false
+  for (let i = 0; i < input.length; i++) {
+    const ch = input[i] === ',' ? '.' : input[i]
+    const isDigit = ch >= '0' && ch <= '9'
+    if (isDigit) {
+      out += ch
+      continue
+    }
+    if (ch === '.' && !hasDot) {
+      hasDot = true
+      out += ch
+      continue
+    }
+    if (ch === '-' && allowMinus && !hasMinus && out.length === 0) {
+      hasMinus = true
+      out += ch
+    }
+  }
+  return out
+}
+
+const clamp = (n) => {
+  if (n == null || Number.isNaN(n)) return null
+  let out = n
+  if (typeof props.min === 'number' && !Number.isNaN(props.min)) out = Math.max(out, props.min)
+  if (typeof props.max === 'number' && !Number.isNaN(props.max)) out = Math.min(out, props.max)
+  return out
+}
+
+const parse = (raw) => {
+  const s = sanitize(raw).trim()
+  if (!s) return null
+  const n = Number(s)
+  if (Number.isNaN(n)) return null
+  return n
+}
+
+const setValue = (next) => {
+  if (!canEdit.value) return
+  const clamped = clamp(next)
+  if (clamped == null) return
+  batch(() => {
+    if (props.bindField && field?.setValue) field.setValue(clamped)
+    else emit('update:modelValue', clamped)
+    text.value = String(clamped)
+  })
+}
+
+const inc = () => {
+  if (!canEdit.value) return
+  const base = typeof effectiveValue.value === 'number' && !Number.isNaN(effectiveValue.value) ? effectiveValue.value : 0
+  setValue(base + (props.step || 1))
+}
+
+const dec = () => {
+  if (!canEdit.value) return
+  const base = typeof effectiveValue.value === 'number' && !Number.isNaN(effectiveValue.value) ? effectiveValue.value : 0
+  setValue(base - (props.step || 1))
+}
+
+const onInput = (e) => {
+  if (!canEdit.value) return
+  const nextRaw = e.target.value
+  const nextText = sanitize(nextRaw)
+  if (e?.target && e.target.value !== nextText) {
+    e.target.value = nextText
+  }
+  batch(() => {
+    text.value = nextText
+    const n = parse(nextText)
+    const clamped = clamp(n)
+    if (clamped == null) return
+    if (props.bindField && field?.setValue) field.setValue(clamped)
+    else emit('update:modelValue', clamped)
+  })
+}
+
+const onBeforeInput = (e) => {
+  if (!canEdit.value) return
+  const inputType = e?.inputType
+  if (typeof inputType === 'string' && inputType.includes('Composition')) return
+  if (typeof inputType === 'string' && !inputType.startsWith('insert')) return
+  const data = e?.data
+  if (typeof data !== 'string' || !data) return
+  for (let i = 0; i < data.length; i++) {
+    const ch = data[i] === ',' ? '.' : data[i]
+    const isDigit = ch >= '0' && ch <= '9'
+    if (isDigit || ch === '.' || ch === '-') continue
+    e.preventDefault()
+    return
+  }
+}
+
+const onPaste = (e) => {
+  if (!canEdit.value) return
+  const pasted = e?.clipboardData?.getData?.('text')
+  if (typeof pasted !== 'string') return
+  e.preventDefault()
+  const nextText = sanitize(pasted)
+  const target = e?.target
+  if (!target) return
+  target.value = nextText
+  onInput({ target })
+}
+
+const onKeydown = (e) => {
+  if (!canEdit.value) return
+  if (e.ctrlKey || e.metaKey || e.altKey) return
+  const key = e.key
+  if (typeof key !== 'string' || key.length !== 1) return
+  const ch = key === ',' ? '.' : key
+  const isDigit = ch >= '0' && ch <= '9'
+  if (isDigit || ch === '.' || ch === '-') return
+  e.preventDefault()
+}
+
+const onBlur = () => {
+  emit('blur')
+  if (props.bindField && field?.onBlur) field.onBlur()
+  const n = parse(text.value)
+  const clamped = clamp(n)
+  if (clamped == null) {
+    text.value = String(effectiveValue.value ?? '')
+    return
+  }
+  batch(() => {
+    text.value = String(clamped)
+    if (props.bindField && field?.setValue) field.setValue(clamped)
+    else emit('update:modelValue', clamped)
+  })
+}
+
+const onFocus = () => emit('focus')
+</script>
+
+<template>
+  <div class="n-inum">
+    <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" />
+      <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-inum{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)}
+</style>

package/src/components/NModal.nexa

@@ -0,0 +1,221 @@
+<script setup>
+import { signal, effect, onMounted, onUnmounted } from 'nexa-framework'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  size: { type: String, default: 'md' },
+  closable: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['close'])
+
+const isVisible = signal(false)
+let modalEl = null
+let previousFocus = null
+const bodyOverflow = signal('')
+
+const sizeMap = { sm: '400px', md: '500px', lg: '640px', xl: '800px', full: '96%' }
+
+effect(() => {
+  if (props.show) {
+    previousFocus = document.activeElement
+    isVisible.value = true
+    bodyOverflow.value = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    requestAnimationFrame(() => {
+      if (modalEl) modalEl.focus()
+    })
+  } else {
+    setTimeout(() => {
+      isVisible.value = false
+      document.body.style.overflow = bodyOverflow.value
+      if (previousFocus && previousFocus.focus) {
+        try { previousFocus.focus() } catch {}
+      }
+    }, 250)
+  }
+})
+
+const close = () => {
+  if (!props.closable) return
+  emit('close')
+}
+
+const handleEsc = (e) => {
+  if (e.key === 'Escape' && props.show) close()
+}
+
+const handleOverlayClick = (e) => {
+  if (e.target === e.currentTarget) close()
+}
+
+const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+const handleKeydown = (e) => {
+  if (e.key !== 'Tab' || !modalEl) return
+  const focusable = modalEl.querySelectorAll(focusableSelector)
+  if (focusable.length === 0) {
+    e.preventDefault()
+    return
+  }
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+  if (e.shiftKey && document.activeElement === first) {
+    e.preventDefault()
+    last.focus()
+  } else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleEsc)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleEsc)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="isVisible.value" class="n-modal-root">
+      <div
+        class="n-modal-overlay"
+        :class="{ 'is-active': show }"
+        @click="handleOverlayClick"
+      ></div>
+      <div
+        ref="modalEl"
+        class="n-modal-container"
+        :class="{ 'is-active': show }"
+        :style="{ maxWidth: sizeMap[size] || size }"
+        tabindex="-1"
+        @keydown="handleKeydown"
+      >
+        <div v-if="title" class="n-modal-header">
+          <slot name="header">
+            <h3>{{ title }}</h3>
+          </slot>
+          <button v-if="closable" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+        </div>
+        <div class="n-modal-content">
+          <slot />
+        </div>
+        <div v-if="$slots.footer" class="n-modal-footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.n-modal-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--n-z-modal);
+}
+
+.n-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--n-color-overlay);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.n-modal-overlay.is-active {
+  opacity: 1;
+}
+
+.n-modal-container {
+  position: relative;
+  width: 90%;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-2xl);
+  box-shadow: var(--n-shadow-xl);
+  transform: scale(0.9) translateY(20px);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  overflow: hidden;
+  outline: none;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.n-modal-container.is-active {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.n-modal-header {
+  padding: var(--n-space-6) var(--n-space-8);
+  border-bottom: 1px solid var(--n-color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.n-modal-header h3 {
+  margin: 0;
+  font-size: var(--n-text-xl);
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-text);
+}
+
+.n-modal-close {
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-secondary);
+  font-size: 1.75rem;
+  cursor: pointer;
+  transition: color var(--n-transition-fast);
+  padding: 0;
+  line-height: 1;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--n-radius-sm);
+}
+
+.n-modal-close:hover {
+  color: var(--n-color-text);
+  background: var(--n-color-glass);
+}
+
+.n-modal-content {
+  padding: var(--n-space-8);
+  color: var(--n-color-text-secondary);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.n-modal-footer {
+  padding: var(--n-space-5) var(--n-space-8);
+  background: rgba(0, 0, 0, 0.15);
+  border-top: 1px solid var(--n-color-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--n-space-4);
+  flex-shrink: 0;
+}
+</style>

package/src/components/NMultiSelect.nexa

@@ -0,0 +1,77 @@
+<script setup>
+import { signal, computed, inject, onBeforeUnmount, effect, batch } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+const props = defineProps({ modelValue: { type: Array, default: () => [] }, options: { type: Array, default: () => [] }, placeholder: { type: String, default: 'Select...' }, label: { type: String, default: '' }, disabled: { type: Boolean, default: false }, bindField: { type: Boolean, default: false }, searchable: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, placement: { type: String, default: 'auto' }, appendTo: { type: String, default: 'self' }, maxChips: { type: Number, default: 3 } })
+const emit = defineEmits(['update:modelValue', 'clear'])
+const field = inject('nexa-ui:form-field', undefined)
+const instanceId = `n-ms-${Math.random().toString(16).slice(2)}`
+const isOpen = signal(false)
+const query = signal('')
+const queryDraft = signal('')
+const focusedIndex = signal(-1)
+const popupStyle = signal({})
+const resolvedPlacement = signal('bottom')
+const rootEl = signal(null)
+let stopTracking = null
+let outsideHandler = null
+const normalizeOption = (opt) => { if (opt == null) return { label: '', value: null, disabled: false }; if (typeof opt === 'string' || typeof opt === 'number') return { label: String(opt), value: opt, disabled: false }; if (typeof opt === 'object') { const label = 'label' in opt ? String(opt.label) : String(opt.value ?? ''); const value = 'value' in opt ? opt.value : label; return { label, value, disabled: !!opt.disabled } } return { label: String(opt), value: opt, disabled: false } }
+const normalizedOptions = computed(() => props.options.map(normalizeOption))
+const effectiveModelValue = computed(() => {
+  if (props.bindField && field?.value) {
+    const v = field.value.value
+    return Array.isArray(v) ? v : []
+  }
+  return props.modelValue
+})
+
+const effectiveDisabled = computed(() => {
+  if (props.disabled) return true
+  if (props.bindField && field?.disabled) return !!field.disabled.value
+  return false
+})
+
+const selectedSet = computed(() => new Set(Array.isArray(effectiveModelValue.value) ? effectiveModelValue.value : []))
+const filteredOptions = computed(() => { const q = props.searchable ? query.value.trim().toLowerCase() : ''; if (!q) return normalizedOptions.value; return normalizedOptions.value.filter(o => o.label.toLowerCase().includes(q)) })
+const selectedLabels = computed(() => { const set = selectedSet.value; const out = []; for (const opt of normalizedOptions.value) { if (set.has(opt.value)) out.push({ label: opt.label, value: opt.value }) } return out })
+const close = () => { if (!isOpen.value) return; isOpen.value = false; focusedIndex.value = -1; query.value = ''; queryDraft.value = ''; if (stopTracking) { stopTracking(); stopTracking = null } if (outsideHandler) { document.removeEventListener('mousedown', outsideHandler); outsideHandler = null } if (props.bindField && field?.onBlur) field.onBlur() }
+const open = (e) => { if (effectiveDisabled.value || isOpen.value) return; isOpen.value = true; focusedIndex.value = filteredOptions.value.length > 0 ? 0 : -1; const t = e?.currentTarget || e?.target; rootEl.value = t?.closest ? t.closest(`[data-ms-root="${instanceId}"]`) : null; if (props.appendTo === 'body') { stopTracking = trackFloatingOverlay({ isOpen: () => isOpen.value, getAnchor: () => { const root = rootEl.value; return root ? root.querySelector('.n-ms-trigger') : null }, getPopup: () => document.querySelector(`[data-ms-popup="${instanceId}"]`), placement: props.placement, align: 'start', matchWidth: true, minWidth: 240, gap: 8, margin: 8, zIndex: 9999, onUpdate: (r) => { popupStyle.value = r.style; resolvedPlacement.value = r.placement }, isEventInside: (ev) => { const el = ev.target; if (!el || typeof el.closest !== 'function') return false; return !!(el.closest(`[data-ms-root="${instanceId}"]`) || el.closest(`[data-ms-popup="${instanceId}"]`)) }, onOutside: () => close() }) } else { if (outsideHandler) document.removeEventListener('mousedown', outsideHandler); outsideHandler = (event) => { const el = event.target; if (!el || typeof el.closest !== 'function') return; if (el.closest(`[data-ms-root="${instanceId}"]`)) return; close() }; document.addEventListener('mousedown', outsideHandler) } requestAnimationFrame(() => { if (!props.searchable) return; const search = props.appendTo === 'body' ? document.querySelector(`[data-ms-popup="${instanceId}"] .n-ms-search-input`) : rootEl.value?.querySelector?.('.n-ms-search-input'); if (search && typeof search.focus === 'function') { try { search.focus() } catch {} } }) }
+const toggleOpen = (e) => { if (effectiveDisabled.value) return; if (isOpen.value) close(); else open(e) }
+const setModel = (next) => { if (props.bindField && field?.setValue) field.setValue(next); else emit('update:modelValue', next) }
+const toggleValue = (value) => { if (effectiveDisabled.value) return; const cur = Array.isArray(effectiveModelValue.value) ? effectiveModelValue.value : []; const next = cur.includes(value) ? cur.filter(v => v !== value) : [...cur, value]; setModel(next) }
+const clear = () => { if (effectiveDisabled.value) return; setModel([]); emit('clear'); query.value = ''; queryDraft.value = '' }
+const removeChip = (value, e) => { e?.stopPropagation?.(); const cur = Array.isArray(effectiveModelValue.value) ? effectiveModelValue.value : []; setModel(cur.filter(v => v !== value)) }
+const onKeydown = (e) => { if (!isOpen.value) { if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') { e.preventDefault(); open(e) } return } const items = filteredOptions.value; if (e.key === 'ArrowDown') { e.preventDefault(); focusedIndex.value = Math.min(focusedIndex.value + 1, items.length - 1); return } if (e.key === 'ArrowUp') { e.preventDefault(); focusedIndex.value = Math.max(focusedIndex.value - 1, 0); return } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); const opt = items[focusedIndex.value]; if (!opt || opt.disabled) return; toggleValue(opt.value); return } if (e.key === 'Escape') { e.preventDefault(); close() } }
+effect(() => {
+  if (!isOpen.value) return
+  if (!props.searchable) return
+  if (queryDraft.value === query.value) return
+  queryDraft.value = query.value
+})
+
+const onSearchInput = (e) => {
+  const next = e?.target?.value ?? ''
+  batch(() => {
+    queryDraft.value = next
+    query.value = next
+    focusedIndex.value = filteredOptions.value.length > 0 ? 0 : -1
+  })
+}
+onBeforeUnmount(() => close())
+</script>
+
+<template>
+  <div class="n-ms" :class="{ 'is-open': isOpen.value, 'is-disabled': effectiveDisabled.value }" :data-ms-root="instanceId">
+    <label v-if="label" class="n-ms-label">{{ label }}</label>
+    <div class="n-ms-trigger" role="combobox" tabindex="0" :aria-expanded="isOpen.value" @click="toggleOpen" @keydown="onKeydown">
+      <div v-if="selectedLabels.value.length > 0" class="n-ms-chips"><div v-for="c in selectedLabels.value.slice(0, maxChips)" :key="String(c.value)" class="n-ms-chip"><span class="n-ms-chip-label">{{ c.label }}</span><button type="button" class="n-ms-chip-remove" aria-label="Remove" tabindex="-1" :disabled="effectiveDisabled.value" @click="removeChip(c.value, $event)">✕</button></div><span v-if="selectedLabels.value.length > maxChips" class="n-ms-more">+{{ selectedLabels.value.length - maxChips }}</span></div>
+      <span v-else class="n-ms-placeholder">{{ placeholder }}</span>
+      <div class="n-ms-actions"><button v-if="clearable && selectedLabels.value.length > 0" type="button" class="n-ms-clear" tabindex="-1" @click.stop="clear">✕</button><span class="n-ms-arrow">▾</span></div>
+    </div>
+    <div v-if="isOpen.value && appendTo !== 'body'" class="n-ms-dropdown"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div>
+    <Teleport to="body"><div v-if="isOpen.value && appendTo === 'body'" class="n-ms-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-ms-popup="instanceId" :style="popupStyle.value"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div></Teleport>
+  </div>
+</template>
+
+<style scoped>
+.n-ms{position:relative;width:100%;font-family:var(--n-font-sans)}.n-ms-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-ms-trigger{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.5rem 0.75rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all var(--n-transition-fast);color:var(--n-color-text);gap:var(--n-space-2);min-height:44px}.n-ms-trigger:focus-visible{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms.is-open .n-ms-trigger{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-placeholder{color:var(--n-color-text-muted)}.n-ms-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.n-ms-clear{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.15rem;font-size:var(--n-text-xs);border-radius:var(--n-radius-sm);line-height:1}.n-ms-clear:hover{color:var(--n-color-text)}.n-ms-arrow{color:var(--n-color-text-muted);transition:transform var(--n-transition-fast);font-size:var(--n-text-xs)}.is-open .n-ms-arrow{transform:rotate(180deg)}.n-ms-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center;min-width:0}.n-ms-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.2rem 0.45rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);font-size:var(--n-text-xs);line-height:1;max-width:12rem}.n-ms-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.n-ms-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center}.n-ms-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-ms-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.n-ms-more{font-size:var(--n-text-xs);color:var(--n-color-text-muted)}.n-ms-dropdown{position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);z-index:var(--n-z-dropdown);overflow:hidden;animation:n-ms-in .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.n-ms-dropdown.is-top{animation:n-ms-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ms-search{padding:var(--n-space-2);border-bottom:1px solid var(--n-color-border)}.n-ms-search-input{width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:var(--n-space-2) var(--n-space-3);color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;font-family:inherit}.n-ms-search-input:focus{border-color:var(--n-color-primary)}.n-ms-options{max-height:260px;overflow-y:auto}.n-ms-option{width:100%;display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1rem;background:transparent;border:none;color:var(--n-color-text-secondary);cursor:pointer;transition:all var(--n-transition-fast);text-align:left}.n-ms-option:hover:not(:disabled),.n-ms-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ms-option.is-selected{background:var(--n-color-primary-light);color:var(--n-color-primary);font-weight:var(--n-weight-semibold)}.n-ms-option:disabled,.n-ms-option.is-disabled{opacity:0.4;cursor:not-allowed}.n-ms-check{width:1.25rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--n-text-xs)}.n-ms-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}.is-disabled .n-ms-trigger{opacity:0.5;cursor:not-allowed}
+</style>

package/src/components/NPaginator.nexa

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'nexa-framework'
+
+const props = defineProps({
+  first: { type: Number, default: 0 },
+  rows: { type: Number, default: 10 },
+  totalRecords: { type: Number, default: 0 },
+  rowsPerPageOptions: { type: Array, default: () => [10, 20, 50] },
+})
+
+const emit = defineEmits(['update:first', 'update:rows', 'updateFirst', 'updateRows', 'page'])
+
+const safeFirst = computed(() => Number.isFinite(props.first) ? props.first : 0)
+const safeRows = computed(() => {
+  const r = Number.isFinite(props.rows) ? props.rows : 10
+  return r > 0 ? r : 10
+})
+
+const page = computed(() => Math.floor((safeFirst.value || 0) / (safeRows.value || 1)))
+const pageCount = computed(() => {
+  const rows = safeRows.value || 1
+  return Math.max(1, Math.ceil((props.totalRecords || 0) / rows))
+})
+
+const canPrev = computed(() => page.value > 0)
+const canNext = computed(() => page.value < pageCount.value - 1)
+
+const goToPage = (p) => {
+  const clamped = Math.min(Math.max(p, 0), pageCount.value - 1)
+  const nextFirst = clamped * (safeRows.value || 1)
+  emit('update:first', nextFirst)
+  emit('updateFirst', nextFirst)
+  emit('page', { page: clamped, first: nextFirst, rows: safeRows.value })
+}
+
+const prev = () => { if (!canPrev.value) return; goToPage(page.value - 1) }
+const next = () => { if (!canNext.value) return; goToPage(page.value + 1) }
+const firstPage = () => goToPage(0)
+const lastPage = () => goToPage(pageCount.value - 1)
+
+const changeRows = (e) => {
+  const nextRows = Number(e.target.value)
+  if (!Number.isFinite(nextRows) || nextRows <= 0) return
+  emit('update:rows', nextRows)
+  emit('update:first', 0)
+  emit('updateRows', nextRows)
+  emit('updateFirst', 0)
+  emit('page', { page: 0, first: 0, rows: nextRows })
+}
+
+const start = computed(() => Math.min((safeFirst.value || 0) + 1, props.totalRecords || 0))
+const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value || 0), props.totalRecords || 0))
+</script>
+
+<template>
+  <div class="n-paginator">
+    <div class="n-paginator-left">
+      <span class="n-paginator-report">{{ start.value }}-{{ end.value }} of {{ totalRecords }}</span>
+    </div>
+    <div class="n-paginator-center">
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="firstPage">«</button>
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="prev">‹</button>
+      <span class="n-pg-page">{{ page.value + 1 }} / {{ pageCount.value }}</span>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="next">›</button>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="lastPage">»</button>
+    </div>
+    <div class="n-paginator-right">
+      <select class="n-pg-select" :value="rows" @change="changeRows">
+        <option v-for="n in rowsPerPageOptions" :key="n" :value="n">{{ n }}</option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-paginator{display:flex;align-items:center;justify-content:space-between;gap:var(--n-space-3);padding:var(--n-space-3) var(--n-space-4);border-top:1px solid var(--n-color-border);background:var(--n-color-surface);font-family:var(--n-font-sans)}.n-paginator-report{color:var(--n-color-text-muted);font-size:var(--n-text-xs)}.n-paginator-center{display:flex;align-items:center;gap:0.35rem}.n-pg-btn{background:transparent;border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;cursor:pointer;transition:all var(--n-transition-fast)}.n-pg-btn:hover:not(:disabled){background:var(--n-color-glass)}.n-pg-btn:disabled{opacity:0.5;cursor:not-allowed}.n-pg-page{min-width:5rem;text-align:center;color:var(--n-color-text-secondary);font-size:var(--n-text-xs)}.n-pg-select{background:var(--n-color-bg);border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;font-size:var(--n-text-xs);outline:none}
+</style>