nexa-ui-kit 0.6.0

package/dist/components/NAutocomplete.js

@@ -0,0 +1,94 @@
+import { signal, computed, effect, onBeforeUnmount, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-741257a1',
+  __hmrId: 'NAutocomplete_nexa',
+  props: { modelValue: { type: String, default: '' }, options: { type: Array, default: () => [] }, placeholder: { type: String, default: '' }, label: { type: String, default: '' }, disabled: { type: Boolean, default: false }, readonly: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, minLength: { type: Number, default: 1 }, delay: { type: Number, default: 200 }, loading: { type: Boolean, default: false }, dropdown: { type: Boolean, default: false }, emptyMessage: { type: String, default: 'No results' }, placement: { type: String, default: 'auto' } },
+  emits: ['update:modelValue', 'select', 'complete', 'clear'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const instanceId = `n-ac-${Math.random().toString(16).slice(2)}`
+    const listboxId = `${instanceId}-listbox`
+    const inputId = `${instanceId}-input`
+    const isOpen = signal(false)
+    const query = signal('')
+    const focusedIndex = signal(-1)
+    const rootEl = signal(null)
+    const popupStyle = signal({})
+    const resolvedPlacement = signal('bottom')
+    let stopTracking = null
+    let completeTimer = null
+    const normalizeOption = (opt) => { if (opt == null) return { label: '', value: null, raw: opt }; if (typeof opt === 'string' || typeof opt === 'number') return { label: String(opt), value: opt, raw: opt }; if (typeof opt === 'object') { const label = 'label' in opt ? String(opt.label) : String(opt.value ?? ''); return { label, value: 'value' in opt ? opt.value : label, raw: opt } } return { label: String(opt), value: opt, raw: opt } }
+    const normalizedOptions = computed(() => props.options.map(normalizeOption))
+    const filteredOptions = computed(() => { const q = query.value.trim().toLowerCase(); if (!q) return normalizedOptions.value; return normalizedOptions.value.filter(opt => opt.label.toLowerCase().includes(q)) })
+    const activeId = computed(() => { const idx = focusedIndex.value; if (idx < 0) return ''; const opt = filteredOptions.value[idx]; return opt ? `${instanceId}-opt-${idx}` : '' })
+    const close = () => { if (!isOpen.value) return; isOpen.value = false; focusedIndex.value = -1; if (stopTracking) { stopTracking(); stopTracking = null } }
+    const open = (e) => { if (props.disabled || props.readonly || isOpen.value) return; isOpen.value = true; const t = e?.currentTarget || e?.target; rootEl.value = t?.closest ? t.closest(`[data-autocomplete-root="${instanceId}"]`) : null; stopTracking = trackFloatingOverlay({ isOpen: () => isOpen.value, getAnchor: () => { const root = rootEl.value; return root ? root.querySelector('.n-ac-input-wrap') : null }, getPopup: () => document.querySelector(`[data-autocomplete-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-autocomplete-root="${instanceId}"]`) || el.closest(`[data-autocomplete-popup="${instanceId}"]`)) }, onOutside: () => close() }) }
+    const requestComplete = () => { clearTimeout(completeTimer); completeTimer = setTimeout(() => emit('complete', query.value), props.delay) }
+    const onInput = (e) => { const value = e.target.value; query.value = value; emit('update:modelValue', value); if (value.trim().length >= props.minLength) { open(e); requestComplete() } else close() }
+    const onFocus = (e) => { query.value = props.modelValue || ''; if ((props.modelValue || '').trim().length >= props.minLength) { open(e); requestComplete() } }
+    const onKeydown = (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); return } if (!isOpen.value) { if (e.key === 'ArrowDown') { e.preventDefault(); open(e); focusedIndex.value = 0 } 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.preventDefault(); const opt = items[focusedIndex.value]; if (!opt) return; emit('update:modelValue', opt.label); emit('select', opt.raw); query.value = opt.label; close() } }
+    const selectOption = (opt) => { emit('update:modelValue', opt.label); emit('select', opt.raw); query.value = opt.label; close() }
+    const clearValue = () => { if (props.disabled || props.readonly) return; emit('update:modelValue', ''); emit('clear'); query.value = ''; close() }
+    const openAll = (e) => { if (props.disabled || props.readonly) return; query.value = props.modelValue || ''; open(e); requestComplete() }
+    effect(() => { if (!isOpen.value) return; if (focusedIndex.value < 0 && filteredOptions.value.length > 0) focusedIndex.value = 0 })
+    onBeforeUnmount(() => { clearTimeout(completeTimer); close() })
+    return { 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 }
+  }
+})
+// 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
+    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": "" }, [
+        label
+      ]) : null,
+        h('div', { class: ["n-ac-input-wrap", { 'is-disabled': disabled }], "data-v-741257a1": "" }, [
+        "\n      ",
+        h('input', { class: "n-ac-input", id: inputId, value: modelValue, placeholder: placeholder, disabled: disabled, readonly: readonly, role: "combobox", "aria-autocomplete": "list", "aria-expanded": isOpen.value, "aria-controls": listboxId, "aria-activedescendant": activeId.value || undefined, onInput: onInput, onFocus: onFocus, onKeydown: onKeydown, "data-v-741257a1": "" }),
+        "\n      ",
+        h('div', { class: "n-ac-actions", "data-v-741257a1": "" }, [
+        "\n        ",
+        (clearable && modelValue) ? h('button', { class: "n-ac-action", type: "button", disabled: disabled || readonly, "aria-label": "Limpiar", onClick: clearValue, "data-v-741257a1": "" }, [
+        "✕"
+      ]) : null,
+        (dropdown) ? h('button', { class: "n-ac-action", type: "button", disabled: disabled || readonly, "aria-label": "Abrir", onClick: openAll, "data-v-741257a1": "" }, [
+        "▾"
+      ]) : null
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        h(_ntc_Teleport, { to: "body", "data-v-741257a1": "" }, [
+        "\n      ",
+        (isOpen.value) ? h('div', { class: ["n-ac-popup", { 'is-top': resolvedPlacement.value === 'top' }], "data-autocomplete-popup": instanceId, style: popupStyle.value, "data-v-741257a1": "" }, [
+        "\n        ",
+        (loading) ? h('div', { class: "n-ac-loading", "data-v-741257a1": "" }, [
+        "Loading..."
+      ]) : (true) ? h('div', { class: "n-ac-list", role: "listbox", id: listboxId, "data-v-741257a1": "" }, [
+        "\n          ",
+        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
+      ])
+      ),
+        "\n          ",
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-ac-empty", "data-v-741257a1": "" }, [
+        emptyMessage
+      ]) : null
+      ]) : null,
+        "\n      "
+      ]) : null
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-741257a1'
+_sfc_main.__hmrId = 'NAutocomplete_nexa'
+
+export default _sfc_main
+
+const __style = `.n-ac[data-v-741257a1]{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-ac-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-ac-input-wrap{position:relative;display:flex;align-items:center;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);transition:all var(--n-transition-fast)}.n-ac-input-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ac-input{width:100%;background:transparent;border:none;outline:none;padding:0.75rem 2.75rem 0.75rem 1rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit}.n-ac-input::placeholder{color:var(--n-color-text-muted)}.n-ac-actions{position:absolute;right:0.5rem;display:flex;align-items:center;gap:0.15rem}.n-ac-action{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.25rem;border-radius:var(--n-radius-sm);transition:all var(--n-transition-fast);line-height:1;display:flex;align-items:center}.n-ac-action:hover:not(:disabled){color:var(--n-color-text);background:var(--n-color-glass)}.n-ac-action:disabled{opacity:0.5;cursor:not-allowed}.n-ac-input-wrap.is-disabled{opacity:0.5;cursor:not-allowed;background:var(--n-color-surface-alt)}.n-ac-popup{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);overflow:hidden;animation:n-ac-in .2s cubic-bezier(0,1,0,1)}.n-ac-popup.is-top{animation:n-ac-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ac-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes n-ac-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ac-loading{padding:var(--n-space-3) var(--n-space-4);color:var(--n-color-text-muted);font-size:var(--n-text-sm)}.n-ac-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}.n-ac-option{text-align:left;padding:0.7rem 1rem;color:var(--n-color-text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--n-transition-fast)}.n-ac-option:hover,.n-ac-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ac-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}`
+injectStyle('data-v-741257a1', __style)

package/dist/components/NAutocomplete.nexa

@@ -0,0 +1,58 @@
+<script setup>
+import { signal, computed, effect, onBeforeUnmount } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+const props = defineProps({ modelValue: { type: String, default: '' }, options: { type: Array, default: () => [] }, placeholder: { type: String, default: '' }, label: { type: String, default: '' }, disabled: { type: Boolean, default: false }, readonly: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, minLength: { type: Number, default: 1 }, delay: { type: Number, default: 200 }, loading: { type: Boolean, default: false }, dropdown: { type: Boolean, default: false }, emptyMessage: { type: String, default: 'No results' }, placement: { type: String, default: 'auto' } })
+const emit = defineEmits(['update:modelValue', 'select', 'complete', 'clear'])
+const instanceId = `n-ac-${Math.random().toString(16).slice(2)}`
+const listboxId = `${instanceId}-listbox`
+const inputId = `${instanceId}-input`
+const isOpen = signal(false)
+const query = signal('')
+const focusedIndex = signal(-1)
+const rootEl = signal(null)
+const popupStyle = signal({})
+const resolvedPlacement = signal('bottom')
+let stopTracking = null
+let completeTimer = null
+const normalizeOption = (opt) => { if (opt == null) return { label: '', value: null, raw: opt }; if (typeof opt === 'string' || typeof opt === 'number') return { label: String(opt), value: opt, raw: opt }; if (typeof opt === 'object') { const label = 'label' in opt ? String(opt.label) : String(opt.value ?? ''); return { label, value: 'value' in opt ? opt.value : label, raw: opt } } return { label: String(opt), value: opt, raw: opt } }
+const normalizedOptions = computed(() => props.options.map(normalizeOption))
+const filteredOptions = computed(() => { const q = query.value.trim().toLowerCase(); if (!q) return normalizedOptions.value; return normalizedOptions.value.filter(opt => opt.label.toLowerCase().includes(q)) })
+const activeId = computed(() => { const idx = focusedIndex.value; if (idx < 0) return ''; const opt = filteredOptions.value[idx]; return opt ? `${instanceId}-opt-${idx}` : '' })
+const close = () => { if (!isOpen.value) return; isOpen.value = false; focusedIndex.value = -1; if (stopTracking) { stopTracking(); stopTracking = null } }
+const open = (e) => { if (props.disabled || props.readonly || isOpen.value) return; isOpen.value = true; const t = e?.currentTarget || e?.target; rootEl.value = t?.closest ? t.closest(`[data-autocomplete-root="${instanceId}"]`) : null; stopTracking = trackFloatingOverlay({ isOpen: () => isOpen.value, getAnchor: () => { const root = rootEl.value; return root ? root.querySelector('.n-ac-input-wrap') : null }, getPopup: () => document.querySelector(`[data-autocomplete-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-autocomplete-root="${instanceId}"]`) || el.closest(`[data-autocomplete-popup="${instanceId}"]`)) }, onOutside: () => close() }) }
+const requestComplete = () => { clearTimeout(completeTimer); completeTimer = setTimeout(() => emit('complete', query.value), props.delay) }
+const onInput = (e) => { const value = e.target.value; query.value = value; emit('update:modelValue', value); if (value.trim().length >= props.minLength) { open(e); requestComplete() } else close() }
+const onFocus = (e) => { query.value = props.modelValue || ''; if ((props.modelValue || '').trim().length >= props.minLength) { open(e); requestComplete() } }
+const onKeydown = (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); return } if (!isOpen.value) { if (e.key === 'ArrowDown') { e.preventDefault(); open(e); focusedIndex.value = 0 } 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.preventDefault(); const opt = items[focusedIndex.value]; if (!opt) return; emit('update:modelValue', opt.label); emit('select', opt.raw); query.value = opt.label; close() } }
+const selectOption = (opt) => { emit('update:modelValue', opt.label); emit('select', opt.raw); query.value = opt.label; close() }
+const clearValue = () => { if (props.disabled || props.readonly) return; emit('update:modelValue', ''); emit('clear'); query.value = ''; close() }
+const openAll = (e) => { if (props.disabled || props.readonly) return; query.value = props.modelValue || ''; open(e); requestComplete() }
+effect(() => { if (!isOpen.value) return; if (focusedIndex.value < 0 && filteredOptions.value.length > 0) focusedIndex.value = 0 })
+onBeforeUnmount(() => { clearTimeout(completeTimer); close() })
+</script>
+
+<template>
+  <div class="n-ac" :data-autocomplete-root="instanceId">
+    <label v-if="label" class="n-ac-label" :for="inputId">{{ label }}</label>
+    <div class="n-ac-input-wrap" :class="{ 'is-disabled': disabled }">
+      <input class="n-ac-input" :id="inputId" :value="modelValue" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" role="combobox" aria-autocomplete="list" :aria-expanded="isOpen.value" :aria-controls="listboxId" :aria-activedescendant="activeId.value || undefined" @input="onInput" @focus="onFocus" @keydown="onKeydown" />
+      <div class="n-ac-actions">
+        <button v-if="clearable && modelValue" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Limpiar" @click="clearValue">✕</button>
+        <button v-if="dropdown" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Abrir" @click="openAll">▾</button>
+      </div>
+    </div>
+    <Teleport to="body">
+      <div v-if="isOpen.value" class="n-ac-popup" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-autocomplete-popup="instanceId" :style="popupStyle.value">
+        <div v-if="loading" class="n-ac-loading">Loading...</div>
+        <div v-else class="n-ac-list" role="listbox" :id="listboxId">
+          <button v-for="(opt, i) in filteredOptions.value" :key="opt.value" type="button" class="n-ac-option" role="option" :id="instanceId + '-opt-' + i" :aria-selected="(i === focusedIndex.value).toString()" :class="{ 'is-focused': i === focusedIndex.value }" @mouseenter="focusedIndex.value = i" @click="selectOption(opt)">{{ opt.label }}</button>
+          <div v-if="filteredOptions.value.length === 0" class="n-ac-empty">{{ emptyMessage }}</div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.n-ac{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-ac-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-ac-input-wrap{position:relative;display:flex;align-items:center;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);transition:all var(--n-transition-fast)}.n-ac-input-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ac-input{width:100%;background:transparent;border:none;outline:none;padding:0.75rem 2.75rem 0.75rem 1rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit}.n-ac-input::placeholder{color:var(--n-color-text-muted)}.n-ac-actions{position:absolute;right:0.5rem;display:flex;align-items:center;gap:0.15rem}.n-ac-action{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.25rem;border-radius:var(--n-radius-sm);transition:all var(--n-transition-fast);line-height:1;display:flex;align-items:center}.n-ac-action:hover:not(:disabled){color:var(--n-color-text);background:var(--n-color-glass)}.n-ac-action:disabled{opacity:0.5;cursor:not-allowed}.n-ac-input-wrap.is-disabled{opacity:0.5;cursor:not-allowed;background:var(--n-color-surface-alt)}.n-ac-popup{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);overflow:hidden;animation:n-ac-in .2s cubic-bezier(0,1,0,1)}.n-ac-popup.is-top{animation:n-ac-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ac-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes n-ac-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ac-loading{padding:var(--n-space-3) var(--n-space-4);color:var(--n-color-text-muted);font-size:var(--n-text-sm)}.n-ac-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}.n-ac-option{text-align:left;padding:0.7rem 1rem;color:var(--n-color-text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--n-transition-fast)}.n-ac-option:hover,.n-ac-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ac-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}
+</style>

package/dist/components/NAvatar.js

@@ -0,0 +1,75 @@
+import { computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-147134',
+  __hmrId: 'NAvatar_nexa',
+  props: {
+  label: { type: String, default: '' },
+  size: { type: String, default: 'md' },
+  variant: { type: String, default: 'primary' },
+  image: { type: String, default: '' },
+  shape: { type: String, default: 'rounded' } // rounded, circle, square
+},
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const initials = computed(() => {
+      if (!props.label) return '?'
+      return props.label
+        .split(' ')
+        .map(w => w[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2)
+    })
+    return { initials, $slots }
+  }
+})
+// 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": "" }, [
+        "\n    ",
+        (!image) ? h('span', { class: "n-avatar-initials", "data-v-147134": "" }, [
+        initials.value
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-147134'
+_sfc_main.__hmrId = 'NAvatar_nexa'
+
+export default _sfc_main
+
+const __style = `.n-avatar[data-v-147134]{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--n-color-surface-hover);
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-text);
+  user-select: none;
+  transition: all var(--n-transition-fast);
+}
+
+.is-sm[data-v-147134]{ width: 32px; height: 32px; font-size: var(--n-text-xs); }
+.is-md[data-v-147134]{ width: 40px; height: 40px; font-size: var(--n-text-sm); }
+.is-lg[data-v-147134]{ width: 56px; height: 56px; font-size: var(--n-text-lg); }
+.is-xl[data-v-147134]{ width: 72px; height: 72px; font-size: var(--n-text-2xl); }
+
+.is-circle[data-v-147134]{ border-radius: var(--n-radius-full); }
+.is-rounded[data-v-147134]{ border-radius: var(--n-radius-md); }
+.is-square[data-v-147134]{ border-radius: 0; }
+
+.is-primary[data-v-147134]{ background-color: var(--n-color-primary); color: white; }
+.is-success[data-v-147134]{ background-color: var(--n-color-success); color: white; }
+.is-danger[data-v-147134]{ background-color: var(--n-color-danger); color: white; }
+.is-warning[data-v-147134]{ background-color: var(--n-color-warning); color: white; }
+.is-info[data-v-147134]{ background-color: var(--n-color-info); color: white; }
+
+.n-avatar-initials[data-v-147134]{
+  line-height: 1;
+  font-weight: var(--n-weight-bold);
+}`
+injectStyle('data-v-147134', __style)

package/dist/components/NAvatar.nexa

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'nexa-framework'
+
+const props = defineProps({
+  label: { type: String, default: '' },
+  size: { type: String, default: 'md' },
+  variant: { type: String, default: 'primary' },
+  image: { type: String, default: '' },
+  shape: { type: String, default: 'rounded' } // rounded, circle, square
+})
+
+const initials = computed(() => {
+  if (!props.label) return '?'
+  return props.label
+    .split(' ')
+    .map(w => w[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+})
+</script>
+
+<template>
+  <div
+    :class="['n-avatar', `is-${size}`, `is-${variant}`, `is-${shape}`]"
+    v-bind:style="image ? { backgroundImage: `url(${image})` } : {}"
+    :aria-label="label"
+  >
+    <span v-if="!image" class="n-avatar-initials">{{ initials.value }}</span>
+  </div>
+</template>
+
+<style scoped>
+.n-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--n-color-surface-hover);
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-text);
+  user-select: none;
+  transition: all var(--n-transition-fast);
+}
+
+.is-sm { width: 32px; height: 32px; font-size: var(--n-text-xs); }
+.is-md { width: 40px; height: 40px; font-size: var(--n-text-sm); }
+.is-lg { width: 56px; height: 56px; font-size: var(--n-text-lg); }
+.is-xl { width: 72px; height: 72px; font-size: var(--n-text-2xl); }
+
+.is-circle { border-radius: var(--n-radius-full); }
+.is-rounded { border-radius: var(--n-radius-md); }
+.is-square { border-radius: 0; }
+
+.is-primary { background-color: var(--n-color-primary); color: white; }
+.is-success { background-color: var(--n-color-success); color: white; }
+.is-danger { background-color: var(--n-color-danger); color: white; }
+.is-warning { background-color: var(--n-color-warning); color: white; }
+.is-info { background-color: var(--n-color-info); color: white; }
+
+.n-avatar-initials {
+  line-height: 1;
+  font-weight: var(--n-weight-bold);
+}
+</style>

package/dist/components/NBadge.js

@@ -0,0 +1,74 @@
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-ff3cf3e',
+  __hmrId: 'NBadge_nexa',
+  props: {
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  rounded: { type: Boolean, default: false },
+  dot: { type: Boolean, default: false },
+  position: { type: String, default: '' }
+},
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    return { $slots }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { $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,
+        "\n  "
+      ]) : null
+}
+_sfc_main.__scopeId = 'data-v-ff3cf3e'
+_sfc_main.__hmrId = 'NBadge_nexa'
+
+export default _sfc_main
+
+const __style = `.n-badge[data-v-ff3cf3e]{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.6rem;
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-bold);
+  border-radius: var(--n-radius-sm);
+  line-height: 1;
+  font-family: var(--n-font-sans);
+  text-transform: uppercase;
+  letter-spacing: var(--n-tracking-wide);
+  transition: all var(--n-transition-fast);
+}
+
+.n-badge-primary[data-v-ff3cf3e]{ background: var(--n-color-primary); color: white; }
+.n-badge-success[data-v-ff3cf3e]{ background: var(--n-color-success); color: white; }
+.n-badge-danger[data-v-ff3cf3e]{ background: var(--n-color-danger); color: white; }
+.n-badge-warning[data-v-ff3cf3e]{ background: var(--n-color-warning); color: white; }
+.n-badge-info[data-v-ff3cf3e]{ background: var(--n-color-info); color: white; }
+.n-badge-secondary[data-v-ff3cf3e]{ background: var(--n-color-surface-hover); color: var(--n-color-text-secondary); }
+
+.n-badge-sm[data-v-ff3cf3e]{ padding: 0.15rem 0.4rem; font-size: 0.65rem; }
+.n-badge-lg[data-v-ff3cf3e]{ padding: 0.4rem 0.8rem; font-size: var(--n-text-sm); }
+
+.is-rounded[data-v-ff3cf3e]{ border-radius: var(--n-radius-full); }
+
+.n-badge-dot[data-v-ff3cf3e]{
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--n-radius-full);
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.n-badge-dot.is-primary[data-v-ff3cf3e]{ background: var(--n-color-primary); }
+.n-badge-dot.is-success[data-v-ff3cf3e]{ background: var(--n-color-success); }
+.n-badge-dot.is-danger[data-v-ff3cf3e]{ background: var(--n-color-danger); }
+.n-badge-dot.is-warning[data-v-ff3cf3e]{ background: var(--n-color-warning); }
+.n-badge-dot.is-info[data-v-ff3cf3e]{ background: var(--n-color-info); }
+.n-badge-dot.is-secondary[data-v-ff3cf3e]{ background: var(--n-color-text-muted); }`
+injectStyle('data-v-ff3cf3e', __style)

package/dist/components/NBadge.nexa

@@ -0,0 +1,61 @@
+<script setup>
+const props = defineProps({
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  rounded: { type: Boolean, default: false },
+  dot: { type: Boolean, default: false },
+  position: { type: String, default: '' }
+})
+</script>
+
+<template>
+  <span v-if="dot" class="n-badge-dot" :class="[`is-${variant}`, position ? `is-${position}` : '']"></span>
+  <span v-else :class="['n-badge', `n-badge-${variant}`, `n-badge-${size}`, rounded ? 'is-rounded' : '']">
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.n-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.6rem;
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-bold);
+  border-radius: var(--n-radius-sm);
+  line-height: 1;
+  font-family: var(--n-font-sans);
+  text-transform: uppercase;
+  letter-spacing: var(--n-tracking-wide);
+  transition: all var(--n-transition-fast);
+}
+
+.n-badge-primary { background: var(--n-color-primary); color: white; }
+.n-badge-success { background: var(--n-color-success); color: white; }
+.n-badge-danger { background: var(--n-color-danger); color: white; }
+.n-badge-warning { background: var(--n-color-warning); color: white; }
+.n-badge-info { background: var(--n-color-info); color: white; }
+.n-badge-secondary { background: var(--n-color-surface-hover); color: var(--n-color-text-secondary); }
+
+.n-badge-sm { padding: 0.15rem 0.4rem; font-size: 0.65rem; }
+.n-badge-lg { padding: 0.4rem 0.8rem; font-size: var(--n-text-sm); }
+
+.is-rounded { border-radius: var(--n-radius-full); }
+
+.n-badge-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--n-radius-full);
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.n-badge-dot.is-primary { background: var(--n-color-primary); }
+.n-badge-dot.is-success { background: var(--n-color-success); }
+.n-badge-dot.is-danger { background: var(--n-color-danger); }
+.n-badge-dot.is-warning { background: var(--n-color-warning); }
+.n-badge-dot.is-info { background: var(--n-color-info); }
+.n-badge-dot.is-secondary { background: var(--n-color-text-muted); }
+</style>

package/dist/components/NBottomSheet.js

@@ -0,0 +1,149 @@
+import { signal, computed, effect, onMounted, onUnmounted, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { useGestures } from 'nexa-mobile'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-55f61938',
+  __hmrId: 'NBottomSheet_nexa',
+  props: {
+  show: { type: Boolean, default: false },
+  snapPoints: { type: Array, default: () => [50, 80] }
+},
+  emits: ['close'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const yOffset = signal(0)
+    const isDragging = signal(false)
+    const currentSnap = signal(0)
+    let gestures = null
+    const sortedPoints = computed(() =>
+      [...props.snapPoints].sort((a, b) => a - b)
+    )
+    onMounted(() => {
+      const el = document.getElementById('n-bottom-sheet-content')
+      if (el) {
+        gestures = useGestures(el)
+        effect(() => {
+          if (gestures.isSwiping.value && gestures.swipeDirection.value === 'down') {
+            isDragging.value = true
+            yOffset.value = Math.max(0, gestures.deltaY.value)
+          } else if (!gestures.isPressed.value) {
+            if (isDragging.value) {
+              isDragging.value = false
+              const maxSnap = sortedPoints.value[sortedPoints.value.length - 1]
+              const threshold = window.innerHeight * (maxSnap / 100) * 0.3
+              if (yOffset.value > threshold) {
+                emit('close')
+                yOffset.value = 0
+                return
+              }
+            }
+            yOffset.value = 0
+          }
+        })
+      }
+    })
+    onUnmounted(() => {
+      gestures?.destroy()
+    })
+    const translateY = computed(() => {
+      if (!props.show) return '100%'
+      const base = window.innerHeight * (1 - sortedPoints.value[currentSnap.value] / 100)
+      return `${base + yOffset.value}px`
+    })
+    const overlayOpacity = computed(() => {
+      if (!props.show) return 0
+      const progress = 1 - (yOffset.value / (window.innerHeight * 0.5))
+      return Math.max(0, Math.min(1, progress))
+    })
+    return { yOffset, isDragging, currentSnap, gestures, sortedPoints, translateY, overlayOpacity, useGestures, $slots, emit }
+  }
+})
+// 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
+    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": "" }, [
+        "\n      ",
+        h('div', { class: "n-bottom-sheet-overlay", style: { opacity: overlayOpacity.value }, onClick: ($event) => { emit('close') }, "data-v-55f61938": "" }),
+        "\n      ",
+        h('div', { class: "n-bottom-sheet-container", id: "n-bottom-sheet-content", style: {
+          transform: `translateY(${translateY.value})`,
+          transition: isDragging.value ? 'none' : 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
+        }, "data-v-55f61938": "" }, [
+        "\n        ",
+        h('div', { class: "n-bottom-sheet-handle", "data-v-55f61938": "" }),
+        "\n        ",
+        h('div', { class: "n-bottom-sheet-inner", "data-v-55f61938": "" }, [
+        "\n          ",
+        ctx.$slots.default ? ctx.$slots.default() : null,
+        "\n        "
+      ]),
+        "\n      "
+      ]),
+        "\n    "
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-55f61938'
+_sfc_main.__hmrId = 'NBottomSheet_nexa'
+
+export default _sfc_main
+
+const __style = `.n-bottom-sheet-root[data-v-55f61938]{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--n-z-modal);
+  pointer-events: none;
+  display: flex;
+  align-items: flex-end;
+}
+
+.n-bottom-sheet-root.is-active[data-v-55f61938]{
+  pointer-events: auto;
+}
+
+.n-bottom-sheet-overlay[data-v-55f61938]{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--n-color-overlay);
+  backdrop-filter: blur(4px);
+  transition: opacity 0.3s ease;
+}
+
+.n-bottom-sheet-container[data-v-55f61938]{
+  position: relative;
+  width: 100%;
+  max-height: 90vh;
+  background: var(--n-color-surface);
+  border-top: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-2xl) var(--n-radius-2xl) 0 0;
+  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.3);
+  padding-bottom: env(safe-area-inset-bottom, 20px);
+  touch-action: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.n-bottom-sheet-handle[data-v-55f61938]{
+  width: 40px;
+  height: 4px;
+  background: var(--n-color-surface-hover);
+  border-radius: var(--n-radius-full);
+  margin: var(--n-space-3) auto;
+  flex-shrink: 0;
+}
+
+.n-bottom-sheet-inner[data-v-55f61938]{
+  padding: var(--n-space-4) var(--n-space-8) var(--n-space-8);
+  overflow-y: auto;
+  flex: 1;
+}`
+injectStyle('data-v-55f61938', __style)