nexa-ui-kit 0.6.0

package/dist/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/dist/components/NButton.js

@@ -0,0 +1,284 @@
+import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-27fd765',
+  __hmrId: 'NButton_nexa',
+  props: {
+  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: '' }
+},
+  emits: ['click'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    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(' ')
+    })
+    return { ripple, handleClick, btnClass, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { ripple, handleClick, btnClass, $slots, emit, variant, size, type, disabled, loading, block, rounded, loadingText, Fragment: _ntc_Fragment } = ctx
+    return h('button', { class: btnClass.value, type: type, disabled: disabled || loading, onClick: handleClick, "data-v-27fd765": "" }, [
+        "\n    ",
+        (loading) ? h('span', { class: "n-btn-loader", "data-v-27fd765": "" }) : null,
+        (loading && loadingText) ? h('span', { class: "n-btn-loading-text", "data-v-27fd765": "" }, [
+        loadingText
+      ]) : null,
+        (!loading || (loading && !loadingText)) ? h('span', { class: "n-btn-content", "data-v-27fd765": "" }, [
+        "\n      ",
+        ctx.$slots.default ? ctx.$slots.default() : null,
+        "\n    "
+      ]) : null,
+        ripple.value.map((r, index) =>
+        h('span', { class: "n-btn-ripple", key: r.id, style: { left: r.x + 'px', top: r.y + 'px' }, "data-v-27fd765": "" })
+      ),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-27fd765'
+_sfc_main.__hmrId = 'NButton_nexa'
+
+export default _sfc_main
+
+const __style = `.n-btn[data-v-27fd765]{
+  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[data-v-27fd765]:focus-visible{
+  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+}
+
+/* Sizes */
+.n-btn-sm[data-v-27fd765]{ 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[data-v-27fd765]{ padding: 0.65rem 1.75rem; font-size: var(--n-text-base); min-height: 40px; }
+.n-btn-lg[data-v-27fd765]{ padding: 0.85rem 2.5rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 48px; }
+
+/* Block */
+.is-block[data-v-27fd765]{ width: 100%; }
+
+/* Rounded */
+.is-rounded[data-v-27fd765]{ border-radius: var(--n-radius-full); }
+
+/* Variant: Primary */
+.n-btn-primary[data-v-27fd765]{
+  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[data-v-27fd765]:hover:not(:disabled){
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
+}
+.n-btn-primary[data-v-27fd765]:active:not(:disabled){
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Secondary */
+.n-btn-secondary[data-v-27fd765]{
+  background: var(--n-color-surface-alt);
+  color: var(--n-color-text);
+  border-color: var(--n-color-border);
+}
+.n-btn-secondary[data-v-27fd765]:hover:not(:disabled){
+  background: var(--n-color-surface-hover);
+  border-color: var(--n-color-border-hover);
+}
+
+/* Variant: Success */
+.n-btn-success[data-v-27fd765]{
+  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[data-v-27fd765]:hover:not(:disabled){
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(16, 185, 129, 0.4);
+}
+.n-btn-success[data-v-27fd765]:active:not(:disabled){
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Warning */
+.n-btn-warning[data-v-27fd765]{
+  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[data-v-27fd765]:hover:not(:disabled){
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(245, 158, 11, 0.4);
+}
+.n-btn-warning[data-v-27fd765]:active:not(:disabled){
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Info */
+.n-btn-info[data-v-27fd765]{
+  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[data-v-27fd765]:hover:not(:disabled){
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(6, 182, 212, 0.4);
+}
+.n-btn-info[data-v-27fd765]:active:not(:disabled){
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Danger */
+.n-btn-danger[data-v-27fd765]{
+  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[data-v-27fd765]:hover:not(:disabled){
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(220, 38, 38, 0.4);
+}
+.n-btn-danger[data-v-27fd765]:active:not(:disabled){
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Ghost */
+.n-btn-ghost[data-v-27fd765]{
+  background: transparent;
+  color: var(--n-color-text-secondary);
+}
+.n-btn-ghost[data-v-27fd765]:hover:not(:disabled){
+  background: var(--n-color-glass);
+  color: var(--n-color-text);
+}
+
+/* Variant: Outline */
+.n-btn-outline[data-v-27fd765]{
+  background: transparent;
+  color: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+}
+.n-btn-outline[data-v-27fd765]:hover:not(:disabled){
+  background: var(--n-color-primary-light);
+  border-color: var(--n-color-primary-hover);
+}
+
+/* Variant: Glass */
+.n-btn-glass[data-v-27fd765]{
+  background: var(--n-color-glass);
+  backdrop-filter: blur(10px);
+  border-color: var(--n-color-glass-border);
+  color: var(--n-color-text);
+}
+.n-btn-glass[data-v-27fd765]:hover:not(:disabled){
+  background: var(--n-color-glass-hover);
+  border-color: var(--n-color-border-hover);
+}
+
+/* Disabled */
+.n-btn[data-v-27fd765]:disabled{
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* Loader */
+.n-btn-loader[data-v-27fd765]{
+  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[data-v-27fd765]{
+  width: 1.25rem;
+  height: 1.25rem;
+  border-width: 2.5px;
+}
+
+.n-btn-sm .n-btn-loader[data-v-27fd765]{
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.n-btn-loading-text[data-v-27fd765]{
+  opacity: 0.8;
+  font-weight: var(--n-weight-normal);
+}
+
+.n-btn-content[data-v-27fd765]{
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-2);
+}
+
+@keyframes n-spin {
+from[data-v-27fd765]{ transform: rotate(0deg); }
+to[data-v-27fd765]{ transform: rotate(360deg); }
+}
+
+/* Ripple */
+.n-btn-ripple[data-v-27fd765]{
+  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[data-v-27fd765]{ transform: scale(0); opacity: 1; }
+to[data-v-27fd765]{ transform: scale(8); opacity: 0; }
+}`
+injectStyle('data-v-27fd765', __style)

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