nexa-ui-kit 0.6.0

package/src/components/NBottomSheet.nexa

@@ -0,0 +1,145 @@
+<script setup>
+import { signal, computed, effect, onMounted, onUnmounted } from 'nexa-framework'
+import { useGestures } from 'nexa-mobile'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  snapPoints: { type: Array, default: () => [50, 80] }
+})
+
+const emit = defineEmits(['close'])
+
+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))
+})
+</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="{
+          transform: `translateY(${translateY.value})`,
+          transition: isDragging.value ? 'none' : 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
+        }"
+      >
+        <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: var(--n-z-modal);
+  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: var(--n-color-overlay);
+  backdrop-filter: blur(4px);
+  transition: opacity 0.3s ease;
+}
+
+.n-bottom-sheet-container {
+  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 {
+  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 {
+  padding: var(--n-space-4) var(--n-space-8) var(--n-space-8);
+  overflow-y: auto;
+  flex: 1;
+}
+</style>

package/src/components/NButton.nexa

@@ -0,0 +1,275 @@
+<script setup>
+import { signal, computed } from 'nexa-framework'
+
+const props = defineProps({
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  type: { type: String, default: 'button' },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  block: { type: Boolean, default: false },
+  rounded: { type: Boolean, default: false },
+  loadingText: { type: String, default: '' }
+})
+
+const emit = defineEmits(['click'])
+
+const ripple = signal([])
+
+const handleClick = (e) => {
+  if (props.disabled || props.loading) return
+  props.onClick?.(e)
+  emit('click', e)
+  const rect = e.currentTarget.getBoundingClientRect()
+  const x = e.clientX - rect.left
+  const y = e.clientY - rect.top
+  const id = Date.now()
+  ripple.value = [...ripple.value, { id, x, y }]
+  setTimeout(() => {
+    ripple.value = ripple.value.filter(r => r.id !== id)
+  }, 600)
+}
+
+const btnClass = computed(() => {
+  return [
+    'n-btn',
+    `n-btn-${props.variant}`,
+    `n-btn-${props.size}`,
+    props.loading ? 'is-loading' : '',
+    props.block ? 'is-block' : '',
+    props.rounded ? 'is-rounded' : ''
+  ].join(' ')
+})
+</script>
+
+<template>
+  <button
+    :class="btnClass.value"
+    :type="type"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="n-btn-loader"></span>
+    <span v-if="loading && loadingText" class="n-btn-loading-text">{{ loadingText }}</span>
+    <span v-if="!loading || (loading && !loadingText)" class="n-btn-content">
+      <slot />
+    </span>
+    <span v-for="r in ripple.value" :key="r.id" class="n-btn-ripple" :style="{ left: r.x + 'px', top: r.y + 'px' }"></span>
+  </button>
+</template>
+
+<style scoped>
+.n-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--n-space-2);
+  font-family: var(--n-font-sans);
+  font-weight: var(--n-weight-semibold);
+  border-radius: var(--n-radius-md);
+  cursor: pointer;
+  transition: all var(--n-transition-normal);
+  border: 1px solid transparent;
+  outline: none;
+  white-space: nowrap;
+  user-select: none;
+  overflow: hidden;
+  text-decoration: none;
+  line-height: var(--n-leading-normal, 1.5);
+  min-width: fit-content;
+}
+
+.n-btn:focus-visible {
+  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+}
+
+/* Sizes */
+.n-btn-sm { padding: 0.5rem 1.25rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 32px; }
+.n-btn-md { padding: 0.65rem 1.75rem; font-size: var(--n-text-base); min-height: 40px; }
+.n-btn-lg { padding: 0.85rem 2.5rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 48px; }
+
+/* Block */
+.is-block { width: 100%; }
+
+/* Rounded */
+.is-rounded { border-radius: var(--n-radius-full); }
+
+/* Variant: Primary */
+.n-btn-primary {
+  background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
+  color: white;
+  box-shadow: var(--n-shadow-glow-primary);
+}
+.n-btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
+}
+.n-btn-primary:active:not(:disabled) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Secondary */
+.n-btn-secondary {
+  background: var(--n-color-surface-alt);
+  color: var(--n-color-text);
+  border-color: var(--n-color-border);
+}
+.n-btn-secondary:hover:not(:disabled) {
+  background: var(--n-color-surface-hover);
+  border-color: var(--n-color-border-hover);
+}
+
+/* Variant: Success */
+.n-btn-success {
+  background: linear-gradient(135deg, var(--n-color-success) 0%, var(--n-color-success-hover) 100%);
+  color: white;
+  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
+}
+.n-btn-success:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(16, 185, 129, 0.4);
+}
+.n-btn-success:active:not(:disabled) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Warning */
+.n-btn-warning {
+  background: linear-gradient(135deg, var(--n-color-warning) 0%, var(--n-color-warning-hover) 100%);
+  color: white;
+  box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.3);
+}
+.n-btn-warning:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(245, 158, 11, 0.4);
+}
+.n-btn-warning:active:not(:disabled) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Info */
+.n-btn-info {
+  background: linear-gradient(135deg, var(--n-color-info) 0%, var(--n-color-info-hover) 100%);
+  color: white;
+  box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.3);
+}
+.n-btn-info:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(6, 182, 212, 0.4);
+}
+.n-btn-info:active:not(:disabled) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Danger */
+.n-btn-danger {
+  background: linear-gradient(135deg, var(--n-color-danger) 0%, var(--n-color-danger-hover) 100%);
+  color: white;
+  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 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-danger:active:not(:disabled) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Ghost */
+.n-btn-ghost {
+  background: transparent;
+  color: var(--n-color-text-secondary);
+}
+.n-btn-ghost:hover:not(:disabled) {
+  background: var(--n-color-glass);
+  color: var(--n-color-text);
+}
+
+/* Variant: Outline */
+.n-btn-outline {
+  background: transparent;
+  color: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+}
+.n-btn-outline:hover:not(:disabled) {
+  background: var(--n-color-primary-light);
+  border-color: var(--n-color-primary-hover);
+}
+
+/* Variant: Glass */
+.n-btn-glass {
+  background: var(--n-color-glass);
+  backdrop-filter: blur(10px);
+  border-color: var(--n-color-glass-border);
+  color: var(--n-color-text);
+}
+.n-btn-glass:hover:not(:disabled) {
+  background: var(--n-color-glass-hover);
+  border-color: var(--n-color-border-hover);
+}
+
+/* Disabled */
+.n-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* Loader */
+.n-btn-loader {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--n-radius-full);
+  animation: n-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+.n-btn-lg .n-btn-loader {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-width: 2.5px;
+}
+
+.n-btn-sm .n-btn-loader {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.n-btn-loading-text {
+  opacity: 0.8;
+  font-weight: var(--n-weight-normal);
+}
+
+.n-btn-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-2);
+}
+
+@keyframes n-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Ripple */
+.n-btn-ripple {
+  position: absolute;
+  border-radius: var(--n-radius-full);
+  background: rgba(255, 255, 255, 0.35);
+  width: 20px;
+  height: 20px;
+  margin-left: -10px;
+  margin-top: -10px;
+  pointer-events: none;
+  animation: n-ripple 0.6s ease-out forwards;
+}
+
+@keyframes n-ripple {
+  from { transform: scale(0); opacity: 1; }
+  to { transform: scale(8); opacity: 0; }
+}
+</style>

package/src/components/NCard.nexa

@@ -0,0 +1,100 @@
+<script setup>
+const props = defineProps({
+  title: { type: String, default: '' },
+  subtitle: { type: String, default: '' },
+  padding: { type: Boolean, default: true },
+  hoverable: { type: Boolean, default: false },
+  variant: { type: String, default: 'elevated' },
+  image: { type: String, default: '' }
+})
+</script>
+
+<template>
+  <div :class="['n-card', `is-${variant}`, hoverable ? 'is-hoverable' : '']">
+    <img v-if="image" :src="image" class="n-card-image" />
+    <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: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-xl);
+  overflow: hidden;
+  transition: all var(--n-transition-normal);
+  display: flex;
+  flex-direction: column;
+}
+
+.is-elevated {
+  background: var(--n-color-surface-elevated);
+  box-shadow: var(--n-shadow-lg);
+}
+
+.is-outlined {
+  background: transparent;
+  border-color: var(--n-color-border);
+  box-shadow: none;
+}
+
+.is-flat {
+  background: var(--n-color-surface-alt);
+  border: none;
+  box-shadow: none;
+}
+
+.n-card.is-hoverable:hover {
+  transform: translateY(-4px);
+  border-color: var(--n-color-border-hover);
+  box-shadow: var(--n-shadow-xl);
+}
+
+.n-card-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  display: block;
+}
+
+.n-card-header {
+  padding: var(--n-space-6);
+  border-bottom: 1px solid var(--n-color-border);
+}
+
+.n-card-title {
+  margin: 0;
+  font-size: var(--n-text-xl);
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-text);
+  letter-spacing: var(--n-tracking-tight);
+}
+
+.n-card-subtitle {
+  margin: var(--n-space-1) 0 0 0;
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text-secondary);
+}
+
+.n-card-body.has-padding {
+  padding: var(--n-space-6);
+}
+
+.n-card-footer {
+  padding: var(--n-space-4) var(--n-space-6);
+  background: rgba(0, 0, 0, 0.15);
+  border-top: 1px solid var(--n-color-border);
+  margin-top: auto;
+}
+</style>

package/src/components/NCheckbox.nexa

@@ -0,0 +1,90 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  indeterminate: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const toggle = () => {
+  if (props.disabled) return
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<template>
+  <label class="n-checkbox" :class="{ 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }">
+    <div class="n-checkbox-box" @click="toggle">
+      <span class="n-checkbox-icon">
+        {{ indeterminate ? '–' : '✓' }}
+      </span>
+    </div>
+    <span v-if="label" class="n-checkbox-label">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.n-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.n-checkbox-box {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--n-transition-fast);
+  flex-shrink: 0;
+  background: transparent;
+}
+
+.is-checked .n-checkbox-box {
+  background: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+}
+
+.is-indeterminate .n-checkbox-box {
+  background: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+}
+
+.n-checkbox-icon {
+  color: white;
+  font-size: 12px;
+  font-weight: var(--n-weight-bold);
+  line-height: 1;
+  opacity: 0;
+  transform: scale(0);
+  transition: all var(--n-transition-fast);
+}
+
+.is-checked .n-checkbox-icon,
+.is-indeterminate .n-checkbox-icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.n-checkbox-label {
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text);
+  font-weight: var(--n-weight-medium);
+}
+
+.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.n-checkbox:hover:not(.is-disabled) .n-checkbox-box {
+  border-color: var(--n-color-primary);
+}
+</style>

package/src/components/NChips.nexa

@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from 'nexa-framework'
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  removable: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:modelValue', 'remove'])
+
+const resolvedModel = computed(() => {
+  const v = props.modelValue
+  if (v && typeof v === 'object' && 'value' in v) return v.value
+  return v
+})
+
+const normalize = (item) => {
+  if (item == null) return { label: '', value: item }
+  if (typeof item === 'string' || typeof item === 'number') return { label: String(item), value: item }
+  if (typeof item === 'object') {
+    const label = 'label' in item ? String(item.label) : String(item.value ?? '')
+    const value = 'value' in item ? item.value : label
+    return { label, value }
+  }
+  return { label: String(item), value: item }
+}
+
+const chips = computed(() => {
+  const v = resolvedModel.value
+  const list = Array.isArray(v) ? v : []
+  return list.map(normalize)
+})
+
+const removeAt = (index) => {
+  if (props.disabled) return
+  if (!props.removable) return
+  const v = resolvedModel.value
+  const current = Array.isArray(v) ? v : []
+  const next = current.filter((_v, i) => i !== index)
+  emit('update:modelValue', next)
+  emit('remove', { index })
+}
+</script>
+
+<template>
+  <div class="n-chips" :class="{ 'is-disabled': disabled }">
+    <div v-for="(chip, i) in chips.value" :key="String(chip.value) + ':' + i" class="n-chip">
+      <span class="n-chip-label">{{ chip.label }}</span>
+      <button v-if="removable" type="button" class="n-chip-remove" :disabled="disabled" aria-label="Remove" @click="removeAt(i)">✕</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center}.n-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.25rem 0.5rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);color:var(--n-color-text);font-size:var(--n-text-xs);line-height:1}.n-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;border-radius:var(--n-radius-sm);line-height:1;display:flex;align-items:center}.n-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6}
+</style>