nexa-ui-kit 0.6.0

package/src/components/NTag.nexa

@@ -0,0 +1,93 @@
+<script setup>
+const props = defineProps({
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  closable: { type: Boolean, default: false },
+  rounded: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['close'])
+</script>
+
+<template>
+  <span :class="['n-tag', `n-tag-${variant}`, `n-tag-${size}`, rounded ? 'is-rounded' : '']">
+    <slot />
+    <button v-if="closable" class="n-tag-close" @click="emit('close')">&times;</button>
+  </span>
+</template>
+
+<style scoped>
+.n-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-1);
+  padding: 0.2rem 0.6rem;
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-semibold);
+  border-radius: var(--n-radius-sm);
+  line-height: 1.4;
+  font-family: var(--n-font-sans);
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+.n-tag.is-rounded {
+  border-radius: var(--n-radius-full);
+}
+
+.n-tag-sm { padding: 0.1rem 0.4rem; font-size: 0.65rem; }
+.n-tag-lg { padding: 0.35rem 0.8rem; font-size: var(--n-text-sm); }
+
+.n-tag-primary {
+  background: var(--n-color-primary-light);
+  border-color: rgba(59, 130, 246, 0.25);
+  color: var(--n-color-primary);
+}
+
+.n-tag-success {
+  background: var(--n-color-success-light);
+  border-color: rgba(16, 185, 129, 0.25);
+  color: var(--n-color-success);
+}
+
+.n-tag-danger {
+  background: var(--n-color-danger-light);
+  border-color: rgba(239, 68, 68, 0.25);
+  color: var(--n-color-danger);
+}
+
+.n-tag-warning {
+  background: var(--n-color-warning-light);
+  border-color: rgba(245, 158, 11, 0.25);
+  color: var(--n-color-warning);
+}
+
+.n-tag-info {
+  background: var(--n-color-info-light);
+  border-color: rgba(6, 182, 212, 0.25);
+  color: var(--n-color-info);
+}
+
+.n-tag-secondary {
+  background: var(--n-color-surface-alt);
+  border-color: var(--n-color-border);
+  color: var(--n-color-text-secondary);
+}
+
+.n-tag-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: inherit;
+  line-height: 1;
+  padding: 0;
+  margin-left: var(--n-space-1);
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity var(--n-transition-fast);
+}
+
+.n-tag-close:hover {
+  opacity: 1;
+}
+</style>

package/src/components/NToastContainer.nexa

@@ -0,0 +1,221 @@
+<script setup>
+import { useToast } from '../services/ToastService.js'
+
+const props = defineProps({
+  position: { type: String, default: 'top-right' }
+})
+
+const { toasts, remove } = useToast()
+
+const positionClass = `is-${props.position.replace('-', '-')}`
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="n-toast-container" :class="positionClass">
+      <div
+        v-for="toast in toasts.value"
+        :key="toast.id"
+        class="n-toast"
+        :class="`is-${toast.type}`"
+        @click="remove(toast.id)"
+      >
+        <div class="n-toast-body">
+          <span class="n-toast-icon">
+            {{ toast.type === 'success' ? '✓' : toast.type === 'error' ? '✕' : toast.type === 'warning' ? '⚡' : 'ℹ' }}
+          </span>
+          <span class="n-toast-message">{{ toast.message }}</span>
+          <button class="n-toast-dismiss" @click.stop="remove(toast.id)" aria-label="Dismiss">&times;</button>
+        </div>
+        <div v-if="toast.duration > 0" class="n-toast-progress" :style="{ animationDuration: toast.duration + 'ms' }"></div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.n-toast-container {
+  position: fixed;
+  z-index: var(--n-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-3);
+  pointer-events: none;
+  padding: var(--n-space-4);
+}
+
+.is-top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.is-top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.is-bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+.is-bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.is-top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.n-toast {
+  pointer-events: auto;
+  min-width: 300px;
+  max-width: 420px;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-md);
+  overflow: hidden;
+  box-shadow: var(--n-shadow-lg);
+  cursor: pointer;
+  animation: n-toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all var(--n-transition-fast);
+}
+
+.n-toast:hover {
+  transform: scale(1.02);
+  background: var(--n-color-surface-alt);
+}
+
+@keyframes n-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+.is-top-left .n-toast {
+  animation-name: n-toast-in-left;
+}
+
+@keyframes n-toast-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+.is-bottom-right .n-toast,
+.is-bottom-left .n-toast {
+  animation-name: n-toast-in-up;
+}
+
+@keyframes n-toast-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.n-toast-body {
+  display: flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  padding: var(--n-space-4) var(--n-space-5);
+}
+
+.n-toast-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--n-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-extrabold);
+  flex-shrink: 0;
+}
+
+.is-success .n-toast-icon { background: var(--n-color-success); color: white; }
+.is-error .n-toast-icon { background: var(--n-color-danger); color: white; }
+.is-info .n-toast-icon { background: var(--n-color-primary); color: white; }
+.is-warning .n-toast-icon { background: var(--n-color-warning); color: white; }
+
+.n-toast-message {
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-medium);
+  flex: 1;
+  line-height: var(--n-leading-normal);
+}
+
+.n-toast-dismiss {
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-lg);
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.n-toast:hover .n-toast-dismiss {
+  opacity: 1;
+}
+
+.n-toast-dismiss:hover {
+  color: var(--n-color-text);
+}
+
+.n-toast-progress {
+  height: 3px;
+  background: var(--n-color-border);
+  position: relative;
+  overflow: hidden;
+}
+
+.n-toast-progress::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: currentColor;
+  animation: n-toast-shrink linear forwards;
+}
+
+.is-success .n-toast-progress::after { background: var(--n-color-success); }
+.is-error .n-toast-progress::after { background: var(--n-color-danger); }
+.is-info .n-toast-progress::after { background: var(--n-color-primary); }
+.is-warning .n-toast-progress::after { background: var(--n-color-warning); }
+
+@keyframes n-toast-shrink {
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+}
+</style>

package/src/components/NTooltip.nexa

@@ -0,0 +1,166 @@
+<script setup>
+import { signal } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+
+const props = defineProps({
+  text: { type: String, default: '' },
+  position: { type: String, default: 'top' },
+  delay: { type: Number, default: 200 },
+  hideDelay: { type: Number, default: 100 }
+})
+
+const isVisible = signal(false)
+const instanceId = `n-tt-${Math.random().toString(16).slice(2)}`
+const popupStyle = signal({})
+const resolvedPlacement = signal('top')
+const rootEl = signal(null)
+let stopTracking = null
+let showTimer = null
+let hideTimer = null
+
+const startTracking = () => {
+  if (stopTracking) stopTracking()
+  stopTracking = trackFloatingOverlay({
+    isOpen: () => isVisible.value,
+    getAnchor: () => rootEl.value,
+    getPopup: () => document.querySelector(`[data-tooltip-popup="${instanceId}"]`),
+    placement: props.position,
+    align: 'center',
+    matchWidth: false,
+    minWidth: 0,
+    gap: 8,
+    margin: 8,
+    zIndex: 1000,
+    onUpdate: (result) => {
+      popupStyle.value = result.style
+      resolvedPlacement.value = result.placement
+    },
+  })
+}
+
+const stop = () => {
+  if (stopTracking) {
+    stopTracking()
+    stopTracking = null
+  }
+}
+
+const show = (e) => {
+  clearTimeout(hideTimer)
+  const target = e?.currentTarget || e?.target
+  rootEl.value = target?.closest ? target.closest(`[data-tooltip-root="${instanceId}"]`) : null
+  showTimer = setTimeout(() => {
+    isVisible.value = true
+    requestAnimationFrame(() => startTracking())
+  }, props.delay)
+}
+
+const hide = () => {
+  clearTimeout(showTimer)
+  hideTimer = setTimeout(() => {
+    isVisible.value = false
+    stop()
+  }, props.hideDelay)
+}
+</script>
+
+<template>
+  <div
+    class="n-tooltip-wrapper"
+    :data-tooltip-root="instanceId"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <slot />
+    <Teleport to="body">
+      <div
+        v-if="isVisible.value"
+        class="n-tooltip"
+        :class="`is-${resolvedPlacement.value}`"
+        role="tooltip"
+        :data-tooltip-popup="instanceId"
+        :style="popupStyle.value"
+      >
+        {{ text }}
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.n-tooltip-wrapper {
+  display: inline-block;
+}
+
+.n-tooltip {
+  background: var(--n-color-bg);
+  color: var(--n-color-text);
+  padding: var(--n-space-2) var(--n-space-3);
+  border-radius: var(--n-radius-sm);
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-medium);
+  white-space: nowrap;
+  z-index: var(--n-z-tooltip);
+  box-shadow: var(--n-shadow-lg);
+  border: 1px solid var(--n-color-border);
+  pointer-events: none;
+  animation: n-tooltip-in 0.2s ease-out;
+}
+
+@keyframes n-tooltip-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.is-top {
+  transform-origin: bottom center;
+}
+
+.is-bottom {
+  transform-origin: top center;
+}
+
+.is-left {
+  transform-origin: center right;
+}
+
+.is-right {
+  transform-origin: center left;
+}
+
+.n-tooltip::after {
+  content: '';
+  position: absolute;
+  border: 5px solid transparent;
+}
+
+.is-top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--n-color-border);
+}
+
+.is-bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--n-color-border);
+}
+
+.is-left::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--n-color-border);
+}
+
+.is-right::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--n-color-border);
+}
+</style>

package/src/components/NTreeMenu.nexa

@@ -0,0 +1,142 @@
+<script setup>
+import { signal, computed, h } from 'nexa-framework'
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  selectable: { type: Boolean, default: true },
+  selected: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:selected', 'select'])
+
+const expanded = signal({})
+
+const toggleExpand = (id) => {
+  const current = { ...expanded.value }
+  current[id] = !current[id]
+  expanded.value = current
+}
+
+const selectItem = (item) => {
+  if (!props.selectable) return
+  emit('update:selected', item.id)
+  emit('select', item)
+}
+
+const hasChildren = (item) => item.children && item.children.length > 0
+const isExpanded = (id) => expanded.value[id] === true
+const isSelected = (id) => props.selected === id
+
+const flatTree = computed(() => {
+  const result = []
+  function walk(items, depth) {
+    for (const item of items) {
+      result.push({ ...item, _depth: depth })
+      if (hasChildren(item) && isExpanded(item.id)) {
+        walk(item.children, depth + 1)
+      }
+    }
+  }
+  walk(props.items, 0)
+  return result
+})
+
+const toggle = (id, e) => {
+  e.stopPropagation()
+  toggleExpand(id)
+}
+</script>
+
+<template>
+  <div class="n-tree-menu">
+    <div v-for="item in flatTree.value" :key="item.id"
+      class="n-tree-item"
+      :class="{ 'is-selected': isSelected(item.id) }"
+      :style="{ '--n-tree-depth': String(item._depth) }"
+    >
+      <div class="n-tree-row" @click="selectItem(item)">
+        <button v-if="hasChildren(item)"
+          class="n-tree-toggle"
+          :class="{ 'is-expanded': isExpanded(item.id) }"
+          @click="toggle(item.id, $event)"
+        >▶</button>
+        <span v-else class="n-tree-toggle-placeholder"></span>
+        <span v-if="item.icon" class="n-tree-icon">{{ item.icon }}</span>
+        <span class="n-tree-label">{{ item.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-tree-menu {
+  font-family: var(--n-font-sans);
+  font-size: var(--n-text-sm);
+  user-select: none;
+}
+
+.n-tree-item {
+  --n-tree-depth: 0;
+}
+
+.n-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.5rem;
+  padding-left: calc(0.5rem + var(--n-tree-depth, 0) * 1.25rem);
+  border-radius: var(--n-radius-sm);
+  cursor: pointer;
+  transition: all var(--n-transition-fast);
+  color: var(--n-color-text);
+}
+
+.n-tree-row:hover {
+  background: var(--n-color-surface-hover);
+}
+
+.n-tree-item.is-selected > .n-tree-row {
+  background: var(--n-color-primary-light);
+  color: var(--n-color-primary);
+  font-weight: var(--n-weight-semibold);
+}
+
+.n-tree-toggle {
+  background: none;
+  border: none;
+  color: var(--n-color-text-muted);
+  cursor: pointer;
+  font-size: 0.6rem;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: transform var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.n-tree-toggle.is-expanded {
+  transform: rotate(90deg);
+}
+
+.n-tree-toggle-placeholder {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.n-tree-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.n-tree-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/index.ts

@@ -0,0 +1,36 @@
+import { installTheme } from './styles/theme.js'
+installTheme()
+
+export { default as NButton } from './components/NButton.nexa'
+export { default as NCard } from './components/NCard.nexa'
+export { default as NInput } from './components/NInput.nexa'
+export { default as NBadge } from './components/NBadge.nexa'
+export { default as NModal } from './components/NModal.nexa'
+export { default as NBottomSheet } from './components/NBottomSheet.nexa'
+export { default as NSelect } from './components/NSelect.nexa'
+export { default as NToastContainer } from './components/NToastContainer.nexa'
+export { default as NTooltip } from './components/NTooltip.nexa'
+export { default as NSwitch } from './components/NSwitch.nexa'
+export { default as NCheckbox } from './components/NCheckbox.nexa'
+export { default as NRadio } from './components/NRadio.nexa'
+export { default as NAutocomplete } from './components/NAutocomplete.nexa'
+export { default as NTabs } from './components/NTabs.nexa'
+export { default as NAlert } from './components/NAlert.nexa'
+export { default as NTag } from './components/NTag.nexa'
+export { default as NProgressBar } from './components/NProgressBar.nexa'
+export { default as NSkeleton } from './components/NSkeleton.nexa'
+export { default as NAvatar } from './components/NAvatar.nexa'
+export { default as NDatepicker } from './components/NDatepicker.nexa'
+export { default as NTreeMenu } from './components/NTreeMenu.nexa'
+export { default as NPassword } from './components/NPassword.nexa'
+export { default as NForm } from './components/NForm.nexa'
+export { default as NFormField } from './components/NFormField.nexa'
+export { default as NChips } from './components/NChips.nexa'
+export { default as NInputNumber } from './components/NInputNumber.nexa'
+export { default as NMultiSelect } from './components/NMultiSelect.nexa'
+export { default as NDataTable } from './components/NDataTable.nexa'
+export { default as NPaginator } from './components/NPaginator.nexa'
+export * from './services/ToastService.js'
+export * from './services/FormValidation.js'
+export { installTheme } from './styles/theme.js'
+