nexa-ui-kit 0.6.0

package/dist/services/FormValidation.js

@@ -0,0 +1,46 @@
+export const required = (message = 'Required') => (value) => {
+    if (value === null || value === undefined)
+        return message;
+    if (typeof value === 'string' && value.trim() === '')
+        return message;
+    if (Array.isArray(value) && value.length === 0)
+        return message;
+    return null;
+};
+export const minLength = (length, message) => (value) => {
+    const str = value === null || value === undefined ? '' : String(value);
+    if (str.length < length)
+        return message || `Must be at least ${length} characters`;
+    return null;
+};
+export const maxLength = (length, message) => (value) => {
+    const str = value === null || value === undefined ? '' : String(value);
+    if (str.length > length)
+        return message || `Must be at most ${length} characters`;
+    return null;
+};
+export const pattern = (re, message = 'Invalid format') => (value) => {
+    const str = value === null || value === undefined ? '' : String(value);
+    if (!re.test(str))
+        return message;
+    return null;
+};
+export const email = (message = 'Invalid email') => (value) => {
+    const str = value === null || value === undefined ? '' : String(value).trim();
+    if (!str)
+        return null;
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!re.test(str))
+        return message;
+    return null;
+};
+export const sameAs = (otherField, message) => (value, values) => {
+    if (value !== values[otherField])
+        return message || `Must match ${otherField}`;
+    return null;
+};
+export const asyncRule = (rule, delayMs = 0) => async (value, values) => {
+    if (delayMs > 0)
+        await new Promise(r => setTimeout(r, delayMs));
+    return rule(value, values);
+};

package/dist/services/ToastService.d.ts

@@ -0,0 +1,16 @@
+export type ToastType = 'success' | 'info' | 'warning' | 'error';
+export interface Toast {
+    id: number;
+    message: string;
+    type: ToastType;
+    duration?: number;
+}
+export declare const useToast: () => {
+    toasts: import("nexa-reactivity").Signal<Toast[]>;
+    add: (message: string, type?: ToastType, duration?: number) => number;
+    remove: (id: number) => void;
+    success: (msg: string, dur?: number) => number;
+    error: (msg: string, dur?: number) => number;
+    info: (msg: string, dur?: number) => number;
+    warning: (msg: string, dur?: number) => number;
+};

package/dist/services/ToastService.js

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

package/dist/styles/theme.d.ts

@@ -0,0 +1 @@
+export declare function installTheme(): void;

package/dist/styles/theme.js

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

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "nexa-ui-kit",
+  "version": "0.6.0",
+  "description": "Premium component library for Nexa Framework",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "nexa-framework": "0.6.0",
+    "nexa-mobile": "0.6.0"
+  },
+  "devDependencies": {
+    "cpx": "^1.5.0",
+    "nexa-compiler": "0.6.0"
+  },
+  "scripts": {
+    "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist",
+    "dev": "tsc --watch"
+  }
+}

package/src/components/NAlert.nexa

@@ -0,0 +1,115 @@
+<script setup>
+import { signal } from 'nexa-framework'
+
+const props = defineProps({
+  variant: { type: String, default: 'info' },
+  title: { type: String, default: '' },
+  closable: { type: Boolean, default: false },
+  icon: { type: String, default: '' }
+})
+
+const emit = defineEmits(['close'])
+
+const visible = signal(true)
+
+const dismiss = () => {
+  visible.value = false
+  emit('close')
+}
+
+const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
+</script>
+
+<template>
+  <div v-if="visible.value" class="n-alert" :class="`is-${variant}`">
+    <span class="n-alert-icon">{{ icon || icons[variant] || 'ℹ' }}</span>
+    <div class="n-alert-body">
+      <span v-if="title" class="n-alert-title">{{ title }}</span>
+      <span class="n-alert-text"><slot /></span>
+    </div>
+    <button v-if="closable" class="n-alert-close" @click="dismiss">&times;</button>
+  </div>
+</template>
+
+<style scoped>
+.n-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--n-space-3);
+  padding: var(--n-space-4) var(--n-space-5);
+  border-radius: var(--n-radius-md);
+  border: 1px solid transparent;
+  font-size: var(--n-text-sm);
+  line-height: var(--n-leading-normal);
+  animation: n-alert-in 0.25s ease-out;
+}
+
+@keyframes n-alert-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.is-info {
+  background: var(--n-color-primary-light);
+  border-color: rgba(59, 130, 246, 0.2);
+  color: var(--n-color-primary);
+}
+
+.is-success {
+  background: var(--n-color-success-light);
+  border-color: rgba(16, 185, 129, 0.2);
+  color: var(--n-color-success);
+}
+
+.is-warning {
+  background: var(--n-color-warning-light);
+  border-color: rgba(245, 158, 11, 0.2);
+  color: var(--n-color-warning);
+}
+
+.is-error {
+  background: var(--n-color-danger-light);
+  border-color: rgba(239, 68, 68, 0.2);
+  color: var(--n-color-danger);
+}
+
+.n-alert-icon {
+  font-size: var(--n-text-base);
+  font-weight: var(--n-weight-bold);
+  flex-shrink: 0;
+  line-height: 1.4;
+}
+
+.n-alert-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-1);
+  color: var(--n-color-text);
+}
+
+.n-alert-title {
+  font-weight: var(--n-weight-semibold);
+  font-size: var(--n-text-sm);
+}
+
+.n-alert-text {
+  color: var(--n-color-text-secondary);
+}
+
+.n-alert-close {
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-lg);
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: color var(--n-transition-fast);
+}
+
+.n-alert-close:hover {
+  color: var(--n-color-text);
+}
+</style>

package/src/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/src/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/src/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>