nexa-ui-kit 0.6.0

package/dist/NSelect.nexa

@@ -0,0 +1,169 @@
+<script setup>
+import { signal, computed, onMounted, onUnmounted } from 'nexa-framework'
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  options: { type: Array, default: () => [] }, // [{ label, value }]
+  placeholder: { type: String, default: 'Select option...' },
+  label: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = signal(false)
+const selectRef = signal(null)
+
+const selectedOption = computed(() => {
+  return props.options.find(opt => opt.value === props.modelValue) || null
+})
+
+const toggle = () => {
+  isOpen.value = !isOpen.value
+}
+
+const select = (option) => {
+  emit('update:modelValue', option.value)
+  isOpen.value = false
+}
+
+const handleClickOutside = (e) => {
+  if (isOpen.value && !e.target.closest('.n-select')) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div class="n-select" :class="{ 'is-open': isOpen.value }">
+    <label v-if="label" class="n-select-label">{{ label }}</label>
+    
+    <div class="n-select-trigger" @click="toggle">
+      <span v-if="selectedOption.value" class="n-select-value">
+        {{ selectedOption.value.label }}
+      </span>
+      <span v-else class="n-select-placeholder">
+        {{ placeholder }}
+      </span>
+      <span class="n-select-arrow">▾</span>
+    </div>
+
+    <div v-if="isOpen.value" class="n-select-dropdown">
+      <div 
+        v-for="opt in options" 
+        :key="opt.value"
+        class="n-select-option"
+        :class="{ 'is-selected': opt.value === modelValue }"
+        @click="select(opt)"
+      >
+        {{ opt.label }}
+      </div>
+      <div v-if="options.length === 0" class="n-select-empty">
+        No options available
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-select {
+  position: relative;
+  width: 100%;
+  font-family: 'Inter', sans-serif;
+}
+
+.n-select-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #94a3b8;
+  margin-bottom: 0.5rem;
+}
+
+.n-select-trigger {
+  background: rgba(30, 41, 59, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 0.75rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #f8fafc;
+}
+
+.n-select:hover .n-select-trigger {
+  border-color: rgba(59, 130, 246, 0.5);
+  background: rgba(30, 41, 59, 0.8);
+}
+
+.n-select.is-open .n-select-trigger {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+}
+
+.n-select-placeholder {
+  color: #64748b;
+}
+
+.n-select-arrow {
+  color: #64748b;
+  transition: transform 0.2s;
+}
+
+.n-select.is-open .n-select-arrow {
+  transform: rotate(180deg);
+}
+
+.n-select-dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  width: 100%;
+  background: #0f172a;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  overflow: hidden;
+  animation: dropdown-in 0.2s cubic-bezier(0, 1, 0, 1);
+}
+
+@keyframes dropdown-in {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.n-select-option {
+  padding: 0.75rem 1rem;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.n-select-option:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: #f8fafc;
+}
+
+.n-select-option.is-selected {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+  font-weight: 600;
+}
+
+.n-select-empty {
+  padding: 1rem;
+  color: #64748b;
+  text-align: center;
+  font-size: 0.875rem;
+}
+</style>

package/dist/NToastContainer.nexa

@@ -0,0 +1,86 @@
+<script setup>
+import { useToast } from '../services/ToastService.js'
+
+const { toasts, remove } = useToast()
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="n-toast-container">
+      <div 
+        v-for="toast in toasts.value" 
+        :key="toast.id"
+        class="n-toast"
+        :class="`is-${toast.type}`"
+        @click="remove(toast.id)"
+      >
+        <span class="n-toast-icon">
+          {{ toast.type === 'success' ? '✓' : toast.type === 'error' ? '✕' : 'ℹ' }}
+        </span>
+        <span class="n-toast-message">{{ toast.message }}</span>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.n-toast-container {
+  position: fixed;
+  top: 1.5rem;
+  right: 1.5rem;
+  z-index: 3000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  pointer-events: none;
+}
+
+.n-toast {
+  pointer-events: auto;
+  min-width: 280px;
+  max-width: 400px;
+  background: #0f172a;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 1rem 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all 0.2s;
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(50px) scale(0.9); }
+  to { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+.n-toast:hover {
+  transform: scale(1.02);
+  background: #1e293b;
+}
+
+.n-toast-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.is-success .n-toast-icon { background: #10b981; color: white; }
+.is-error .n-toast-icon { background: #ef4444; color: white; }
+.is-info .n-toast-icon { background: #3b82f6; color: white; }
+.is-warning .n-toast-icon { background: #f59e0b; color: white; }
+
+.n-toast-message {
+  color: #f8fafc;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+</style>

package/dist/NTooltip.nexa

@@ -0,0 +1,115 @@
+<script setup>
+import { signal } from 'nexa-framework'
+
+const props = defineProps({
+  text: { type: String, default: '' },
+  position: { type: String, default: 'top' } // top, bottom, left, right
+})
+
+const isVisible = signal(false)
+</script>
+
+<template>
+  <div 
+    class="n-tooltip-wrapper"
+    @mouseenter="isVisible.value = true"
+    @mouseleave="isVisible.value = false"
+  >
+    <slot />
+    
+    <div 
+      v-if="isVisible.value" 
+      class="n-tooltip"
+      :class="`is-${position}`"
+    >
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.n-tooltip {
+  position: absolute;
+  background: #0f172a;
+  color: #f8fafc;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  z-index: 1000;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  pointer-events: none;
+  animation: tooltip-in 0.2s ease-out;
+}
+
+@keyframes tooltip-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.is-top {
+  bottom: calc(100% + 0.5rem);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.is-bottom {
+  top: calc(100% + 0.5rem);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.is-left {
+  right: calc(100% + 0.5rem);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.is-right {
+  left: calc(100% + 0.5rem);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Small arrow */
+.n-tooltip::after {
+  content: '';
+  position: absolute;
+  border: 5px solid transparent;
+}
+
+.is-top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: #0f172a;
+}
+
+.is-bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: #0f172a;
+}
+
+.is-left::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: #0f172a;
+}
+
+.is-right::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: #0f172a;
+}
+</style>

package/dist/components/NAlert.js

@@ -0,0 +1,134 @@
+import { signal, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-22a3a541',
+  __hmrId: 'NAlert_nexa',
+  props: {
+  variant: { type: String, default: 'info' },
+  title: { type: String, default: '' },
+  closable: { type: Boolean, default: false },
+  icon: { type: String, default: '' }
+},
+  emits: ['close'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const visible = signal(true)
+    const dismiss = () => {
+      visible.value = false
+      emit('close')
+    }
+    const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
+    return { visible, dismiss, icons, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { visible, dismiss, icons, $slots, emit, variant, title, closable, icon, Fragment: _ntc_Fragment } = ctx
+    return (visible.value) ? h('div', { class: ["n-alert", `is-${variant}`], "data-v-22a3a541": "" }, [
+        "\n    ",
+        h('span', { class: "n-alert-icon", "data-v-22a3a541": "" }, [
+        icon || icons[variant] || 'ℹ'
+      ]),
+        "\n    ",
+        h('div', { class: "n-alert-body", "data-v-22a3a541": "" }, [
+        "\n      ",
+        (title) ? h('span', { class: "n-alert-title", "data-v-22a3a541": "" }, [
+        title
+      ]) : null,
+        h('span', { class: "n-alert-text", "data-v-22a3a541": "" }, [
+        ctx.$slots.default ? ctx.$slots.default() : null
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        (closable) ? h('button', { class: "n-alert-close", onClick: dismiss, "data-v-22a3a541": "" }, [
+        "×"
+      ]) : null
+      ]) : null
+}
+_sfc_main.__scopeId = 'data-v-22a3a541'
+_sfc_main.__hmrId = 'NAlert_nexa'
+
+export default _sfc_main
+
+const __style = `.n-alert[data-v-22a3a541]{
+  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[data-v-22a3a541]{ opacity: 0; transform: translateY(-8px); }
+to[data-v-22a3a541]{ opacity: 1; transform: translateY(0); }
+}
+
+.is-info[data-v-22a3a541]{
+  background: var(--n-color-primary-light);
+  border-color: rgba(59, 130, 246, 0.2);
+  color: var(--n-color-primary);
+}
+
+.is-success[data-v-22a3a541]{
+  background: var(--n-color-success-light);
+  border-color: rgba(16, 185, 129, 0.2);
+  color: var(--n-color-success);
+}
+
+.is-warning[data-v-22a3a541]{
+  background: var(--n-color-warning-light);
+  border-color: rgba(245, 158, 11, 0.2);
+  color: var(--n-color-warning);
+}
+
+.is-error[data-v-22a3a541]{
+  background: var(--n-color-danger-light);
+  border-color: rgba(239, 68, 68, 0.2);
+  color: var(--n-color-danger);
+}
+
+.n-alert-icon[data-v-22a3a541]{
+  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[data-v-22a3a541]{
+  font-weight: var(--n-weight-semibold);
+  font-size: var(--n-text-sm);
+}
+
+.n-alert-text[data-v-22a3a541]{
+  color: var(--n-color-text-secondary);
+}
+
+.n-alert-close[data-v-22a3a541]{
+  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[data-v-22a3a541]:hover{
+  color: var(--n-color-text);
+}`
+injectStyle('data-v-22a3a541', __style)

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