nexa-ui-kit 0.6.0

package/dist/NBadge.nexa

@@ -0,0 +1,40 @@
+<script setup>
+const props = defineProps({
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  rounded: { type: Boolean, default: false }
+})
+</script>
+
+<template>
+  <span :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: 0.75rem;
+  font-weight: 700;
+  border-radius: 6px;
+  line-height: 1;
+  font-family: 'Inter', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.n-badge-primary { background: #3b82f6; color: white; }
+.n-badge-success { background: #10b981; color: white; }
+.n-badge-danger { background: #ef4444; color: white; }
+.n-badge-warning { background: #f59e0b; color: white; }
+.n-badge-info { background: #06b6d4; color: white; }
+
+.n-badge-sm { padding: 0.15rem 0.4rem; font-size: 0.65rem; }
+.n-badge-lg { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
+
+.is-rounded { border-radius: 9999px; }
+</style>

package/dist/NBottomSheet.nexa

@@ -0,0 +1,124 @@
+<script setup>
+import { signal, computed, effect, onMounted, onUnmounted } from 'nexa-framework'
+import { useGestures } from 'nexa-mobile'
+
+const props = defineProps({
+  show: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['close'])
+
+const yOffset = signal(0)
+const isDragging = signal(false)
+let gestures = null
+
+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 && isDragging.value) {
+        if (yOffset.value > 100) {
+          emit('close')
+        }
+        isDragging.value = false
+        yOffset.value = 0
+      }
+    })
+  }
+})
+
+onUnmounted(() => {
+  gestures?.destroy()
+})
+
+const style = computed(() => ({
+  transform: `translateY(${props.show ? (yOffset.value + 'px') : '100%'})`,
+  transition: isDragging.value ? 'none' : 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+  opacity: props.show || isDragging.value ? 1 : 0
+}))
+
+const overlayOpacity = computed(() => {
+  if (!props.show) return 0
+  return Math.max(0, 1 - (yOffset.value / 400))
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="n-bottom-sheet-root" :class="{ 'is-active': show || isDragging.value }">
+      <div 
+        class="n-bottom-sheet-overlay" 
+        :style="{ opacity: overlayOpacity.value }"
+        @click="emit('close')"
+      ></div>
+      
+      <div 
+        id="n-bottom-sheet-content"
+        class="n-bottom-sheet-container" 
+        :style="style.value"
+      >
+        <div class="n-bottom-sheet-handle"></div>
+        <div class="n-bottom-sheet-inner">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.n-bottom-sheet-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 2000;
+  pointer-events: none;
+  display: flex;
+  align-items: flex-end;
+}
+
+.n-bottom-sheet-root.is-active {
+  pointer-events: auto;
+}
+
+.n-bottom-sheet-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(2, 6, 17, 0.7);
+  backdrop-filter: blur(4px);
+  transition: opacity 0.3s ease;
+}
+
+.n-bottom-sheet-container {
+  position: relative;
+  width: 100%;
+  background: #0f172a;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 24px 24px 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;
+}
+
+.n-bottom-sheet-handle {
+  width: 40px;
+  height: 4px;
+  background: #334155;
+  border-radius: 2px;
+  margin: 12px auto;
+}
+
+.n-bottom-sheet-inner {
+  padding: 1rem 2rem 2rem 2rem;
+}
+</style>

package/dist/NButton.nexa

@@ -0,0 +1,123 @@
+<script setup>
+import { computed } from 'nexa-framework'
+
+const props = defineProps({
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false }
+})
+
+const buttonClass = computed(() => {
+  return [
+    'n-btn',
+    `n-btn-${props.variant}`,
+    `n-btn-${props.size}`,
+    props.loading ? 'is-loading' : ''
+  ].join(' ')
+})
+</script>
+
+<template>
+  <button :class="buttonClass" :disabled="disabled || loading">
+    <span v-if="loading" class="n-btn-loader"></span>
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.n-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: 'Outfit', 'Inter', sans-serif;
+  font-weight: 600;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid transparent;
+  outline: none;
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* Variants */
+.n-btn-primary {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: white;
+  box-shadow: 0 4px 15px -3px rgba(37, 99, 235, 0.3);
+}
+
+.n-btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(37, 99, 235, 0.4);
+  filter: brightness(1.1);
+}
+
+.n-btn-secondary {
+  background: #1e293b;
+  color: #f8fafc;
+  border-color: #334155;
+}
+
+.n-btn-secondary:hover:not(:disabled) {
+  background: #334155;
+  border-color: #475569;
+}
+
+.n-btn-danger {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  color: white;
+  box-shadow: 0 4px 15px -3px rgba(220, 38, 38, 0.3);
+}
+
+.n-btn-danger:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(220, 38, 38, 0.4);
+}
+
+.n-btn-glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+.n-btn-glass:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Sizes */
+.n-btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
+.n-btn-md { padding: 0.75rem 1.5rem; font-size: 1rem; }
+.n-btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }
+
+/* States */
+.n-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.n-btn:active:not(:disabled) {
+  transform: scale(0.96);
+}
+
+/* Loader */
+.n-btn-loader {
+  width: 1.2rem;
+  height: 1.2rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: n-spin 0.8s linear infinite;
+}
+
+@keyframes n-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>

package/dist/NCard.nexa

@@ -0,0 +1,74 @@
+<script setup>
+const props = defineProps({
+  title: { type: String, default: '' },
+  subtitle: { type: String, default: '' },
+  padding: { type: Boolean, default: true },
+  hoverable: { type: Boolean, default: false }
+})
+</script>
+
+<template>
+  <div :class="['n-card', hoverable ? 'is-hoverable' : '']">
+    <div v-if="title || $slots.header" class="n-card-header">
+      <slot name="header">
+        <h3 v-if="title" class="n-card-title">{{ title }}</h3>
+        <p v-if="subtitle" class="n-card-subtitle">{{ subtitle }}</p>
+      </slot>
+    </div>
+    
+    <div :class="['n-card-body', padding ? 'has-padding' : '']">
+      <slot />
+    </div>
+
+    <div v-if="$slots.footer" class="n-card-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-card {
+  background: rgba(30, 41, 59, 0.7);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+}
+
+.n-card.is-hoverable:hover {
+  transform: translateY(-4px);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+}
+
+.n-card-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.n-card-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #f8fafc;
+  letter-spacing: -0.025em;
+}
+
+.n-card-subtitle {
+  margin: 0.25rem 0 0 0;
+  font-size: 0.875rem;
+  color: #94a3b8;
+}
+
+.n-card-body.has-padding {
+  padding: 1.5rem;
+}
+
+.n-card-footer {
+  padding: 1rem 1.5rem;
+  background: rgba(15, 23, 42, 0.3);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+</style>

package/dist/NInput.nexa

@@ -0,0 +1,116 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  type: { type: String, default: 'text' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  error: { type: String, default: '' },
+  disabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const onInput = (e) => {
+  emit('update:modelValue', e.target.value)
+}
+</script>
+
+<template>
+  <div class="n-input-group">
+    <label v-if="label" class="n-input-label">{{ label }}</label>
+    
+    <div class="n-input-wrapper">
+      <input
+        :type="type"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        class="n-input"
+        :class="{ 'has-error': error }"
+        @input="onInput"
+      />
+      <div class="n-input-focus-ring"></div>
+    </div>
+
+    <span v-if="error" class="n-input-error-msg">{{ error }}</span>
+  </div>
+</template>
+
+<style scoped>
+.n-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.n-input-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #94a3b8;
+  margin-left: 0.25rem;
+}
+
+.n-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.n-input {
+  width: 100%;
+  background: #0f172a;
+  border: 1px solid #334155;
+  color: #f8fafc;
+  padding: 0.75rem 1rem;
+  border-radius: 12px;
+  font-family: inherit;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  outline: none;
+}
+
+.n-input::placeholder {
+  color: #475569;
+}
+
+.n-input-focus-ring {
+  position: absolute;
+  inset: -2px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #3b82f6, #a855f7);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.n-input:focus ~ .n-input-focus-ring {
+  opacity: 0.4;
+}
+
+.n-input:focus {
+  border-color: #3b82f6;
+  background: #1e293b;
+}
+
+.n-input.has-error {
+  border-color: #ef4444;
+}
+
+.n-input.has-error:focus ~ .n-input-focus-ring {
+  background: #ef4444;
+}
+
+.n-input-error-msg {
+  font-size: 0.75rem;
+  color: #ef4444;
+  margin-left: 0.25rem;
+}
+
+.n-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #1e293b;
+}
+</style>

package/dist/NModal.nexa

@@ -0,0 +1,165 @@
+<script setup>
+import { signal, effect, onMounted, onUnmounted } from 'nexa-framework'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  width: { type: String, default: '500px' }
+})
+
+const emit = defineEmits(['close'])
+
+const isVisible = signal(false)
+
+effect(() => {
+  if (props.show) {
+    isVisible.value = true
+    document.body.style.overflow = 'hidden'
+  } else {
+    setTimeout(() => {
+      isVisible.value = false
+      document.body.style.overflow = ''
+    }, 300)
+  }
+})
+
+const close = () => {
+  emit('close')
+}
+
+const handleEsc = (e) => {
+  if (e.key === 'Escape' && props.show) close()
+}
+
+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="close"
+      ></div>
+      
+      <div 
+        class="n-modal-container" 
+        :class="{ 'is-active': show }"
+        :style="{ maxWidth: width }"
+      >
+        <header v-if="title" class="n-modal-header">
+          <h3>{{ title }}</h3>
+          <button class="n-modal-close" @click="close">&times;</button>
+        </header>
+        
+        <div class="n-modal-content">
+          <slot />
+        </div>
+        
+        <footer v-if="$slots.footer" class="n-modal-footer">
+          <slot name="footer" />
+        </footer>
+      </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: 2000;
+}
+
+.n-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(2, 6, 17, 0.7);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.n-modal-overlay.is-active {
+  opacity: 1;
+}
+
+.n-modal-container {
+  position: relative;
+  width: 90%;
+  background: #0f172a;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 24px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  transform: scale(0.9) translateY(20px);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  overflow: hidden;
+}
+
+.n-modal-container.is-active {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.n-modal-header {
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.n-modal-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #f8fafc;
+}
+
+.n-modal-close {
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: color 0.2s;
+  padding: 0;
+  line-height: 1;
+}
+
+.n-modal-close:hover {
+  color: #f8fafc;
+}
+
+.n-modal-content {
+  padding: 2rem;
+  color: #94a3b8;
+}
+
+.n-modal-footer {
+  padding: 1.25rem 2rem;
+  background: rgba(0, 0, 0, 0.2);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+</style>