nexa-ui-kit 0.6.0

package/dist/components/NSwitch.js

@@ -0,0 +1,92 @@
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-3cd56cb4',
+  __hmrId: 'NSwitch_nexa',
+  props: {
+  modelValue: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  label: { type: String, default: '' }
+},
+  emits: ['update:modelValue'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const toggle = () => {
+      if (props.disabled) return
+      emit('update:modelValue', !props.modelValue)
+    }
+    return { toggle, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { toggle, $slots, emit, modelValue, disabled, label, Fragment: _ntc_Fragment } = ctx
+    return h('label', { class: ["n-switch", { 'is-checked': modelValue, 'is-disabled': disabled }], "data-v-3cd56cb4": "" }, [
+        "\n    ",
+        h('div', { class: "n-switch-track", onClick: toggle, "data-v-3cd56cb4": "" }, [
+        "\n      ",
+        h('div', { class: "n-switch-thumb", "data-v-3cd56cb4": "" }),
+        "\n    "
+      ]),
+        "\n    ",
+        (label) ? h('span', { class: "n-switch-label", "data-v-3cd56cb4": "" }, [
+        label
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-3cd56cb4'
+_sfc_main.__hmrId = 'NSwitch_nexa'
+
+export default _sfc_main
+
+const __style = `.n-switch[data-v-3cd56cb4]{
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.n-switch-track[data-v-3cd56cb4]{
+  width: 44px;
+  height: 24px;
+  background: var(--n-color-surface-hover);
+  border-radius: var(--n-radius-full);
+  position: relative;
+  transition: all var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.is-checked .n-switch-track[data-v-3cd56cb4]{
+  background: var(--n-color-primary);
+}
+
+.n-switch-thumb[data-v-3cd56cb4]{
+  width: 18px;
+  height: 18px;
+  background: var(--n-color-text);
+  border-radius: var(--n-radius-full);
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  transition: transform var(--n-transition-spring), background var(--n-transition-normal);
+  box-shadow: var(--n-shadow-sm);
+  will-change: transform;
+}
+
+.is-checked .n-switch-thumb[data-v-3cd56cb4]{
+  transform: translateX(20px);
+  background: white;
+}
+
+.n-switch-label[data-v-3cd56cb4]{
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text);
+  font-weight: var(--n-weight-medium);
+}
+
+.is-disabled[data-v-3cd56cb4]{
+  opacity: 0.5;
+  cursor: not-allowed;
+}`
+injectStyle('data-v-3cd56cb4', __style)

package/dist/components/NSwitch.nexa

@@ -0,0 +1,76 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  label: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const toggle = () => {
+  if (props.disabled) return
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<template>
+  <label class="n-switch" :class="{ 'is-checked': modelValue, 'is-disabled': disabled }">
+    <div class="n-switch-track" @click="toggle">
+      <div class="n-switch-thumb"></div>
+    </div>
+    <span v-if="label" class="n-switch-label">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.n-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.n-switch-track {
+  width: 44px;
+  height: 24px;
+  background: var(--n-color-surface-hover);
+  border-radius: var(--n-radius-full);
+  position: relative;
+  transition: all var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.is-checked .n-switch-track {
+  background: var(--n-color-primary);
+}
+
+.n-switch-thumb {
+  width: 18px;
+  height: 18px;
+  background: var(--n-color-text);
+  border-radius: var(--n-radius-full);
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  transition: transform var(--n-transition-spring), background var(--n-transition-normal);
+  box-shadow: var(--n-shadow-sm);
+  will-change: transform;
+}
+
+.is-checked .n-switch-thumb {
+  transform: translateX(20px);
+  background: white;
+}
+
+.n-switch-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;
+}
+</style>

package/dist/components/NTabs.js

@@ -0,0 +1,129 @@
+import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-339e5ee5',
+  __hmrId: 'NTabs_nexa',
+  props: {
+  tabs: { type: Array, default: () => [] },
+  modelValue: { type: [String, Number], default: '' }
+},
+  emits: ['update:modelValue'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const activeKey = computed(() => props.modelValue || props.tabs[0]?.key)
+    const select = (key) => {
+      emit('update:modelValue', key)
+    }
+    const activeIndex = computed(() =>
+      props.tabs.findIndex(t => t.key === activeKey.value)
+    )
+    return { activeKey, select, activeIndex, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { activeKey, select, activeIndex, $slots, emit, tabs, modelValue, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: "n-tabs", "data-v-339e5ee5": "" }, [
+        "\n    ",
+        h('div', { class: "n-tabs-header", "data-v-339e5ee5": "" }, [
+        "\n      ",
+        tabs.map((tab, index) =>
+        h('div', { class: ["n-tab", { 'is-active': tab.key === activeKey.value, 'is-disabled': tab.disabled }], key: tab.key, onClick: ($event) => { select(tab.key) }, "data-v-339e5ee5": "" }, [
+        "\n        ",
+        (tab.icon) ? h('span', { class: "n-tab-icon", "data-v-339e5ee5": "" }, [
+        tab.icon
+      ]) : null,
+        h('span', { class: "n-tab-label", "data-v-339e5ee5": "" }, [
+        tab.label
+      ]),
+        "\n        ",
+        (tab.badge) ? h('span', { class: "n-tab-badge", "data-v-339e5ee5": "" }, [
+        tab.badge
+      ]) : null
+      ])
+      ),
+        "\n      ",
+        h('div', { class: "n-tabs-indicator", style: { left: `calc(${activeIndex.value * 100}% / ${tabs.length})`, width: `calc(100% / ${tabs.length})` }, "data-v-339e5ee5": "" }),
+        "\n    "
+      ]),
+        "\n    ",
+        h('div', { class: "n-tabs-content", "data-v-339e5ee5": "" }, [
+        "\n      ",
+        ctx.$slots['tab-' + activeKey.value] ? ctx.$slots['tab-' + activeKey.value]() : null,
+        "\n    "
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-339e5ee5'
+_sfc_main.__hmrId = 'NTabs_nexa'
+
+export default _sfc_main
+
+const __style = `.n-tabs[data-v-339e5ee5]{
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-6);
+  width: 100%;
+}
+
+.n-tabs-header[data-v-339e5ee5]{
+  display: flex;
+  position: relative;
+  border-bottom: 1px solid var(--n-color-border);
+}
+
+.n-tab[data-v-339e5ee5]{
+  flex: 1;
+  padding: var(--n-space-3) var(--n-space-5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--n-space-2);
+  cursor: pointer;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-medium);
+  transition: all var(--n-transition-fast);
+  position: relative;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.n-tab[data-v-339e5ee5]:hover{
+  color: var(--n-color-text-secondary);
+}
+
+.n-tab.is-active[data-v-339e5ee5]{
+  color: var(--n-color-primary);
+  font-weight: var(--n-weight-semibold);
+}
+
+.n-tab.is-disabled[data-v-339e5ee5]{
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.n-tab-icon[data-v-339e5ee5]{
+  font-size: var(--n-text-base);
+}
+
+.n-tab-badge[data-v-339e5ee5]{
+  background: var(--n-color-primary);
+  color: white;
+  font-size: 0.65rem;
+  font-weight: var(--n-weight-bold);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--n-radius-full);
+  line-height: 1.2;
+}
+
+.n-tabs-indicator[data-v-339e5ee5]{
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: var(--n-color-primary);
+  transition: all var(--n-transition-normal);
+  border-radius: var(--n-radius-full) var(--n-radius-full) 0 0;
+}`
+injectStyle('data-v-339e5ee5', __style)

package/dist/components/NTabs.nexa

@@ -0,0 +1,113 @@
+<script setup>
+import { signal, computed } from 'nexa-framework'
+
+const props = defineProps({
+  tabs: { type: Array, default: () => [] },
+  modelValue: { type: [String, Number], default: '' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const activeKey = computed(() => props.modelValue || props.tabs[0]?.key)
+
+const select = (key) => {
+  emit('update:modelValue', key)
+}
+
+const activeIndex = computed(() =>
+  props.tabs.findIndex(t => t.key === activeKey.value)
+)
+</script>
+
+<template>
+  <div class="n-tabs">
+    <div class="n-tabs-header">
+      <div
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="n-tab"
+        :class="{ 'is-active': tab.key === activeKey.value, 'is-disabled': tab.disabled }"
+        @click="select(tab.key)"
+      >
+        <span v-if="tab.icon" class="n-tab-icon">{{ tab.icon }}</span>
+        <span class="n-tab-label">{{ tab.label }}</span>
+        <span v-if="tab.badge" class="n-tab-badge">{{ tab.badge }}</span>
+      </div>
+      <div class="n-tabs-indicator" :style="{ left: `calc(${activeIndex.value * 100}% / ${tabs.length})`, width: `calc(100% / ${tabs.length})` }"></div>
+    </div>
+    <div class="n-tabs-content">
+      <slot :name="'tab-' + activeKey.value">
+        <slot />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-6);
+  width: 100%;
+}
+
+.n-tabs-header {
+  display: flex;
+  position: relative;
+  border-bottom: 1px solid var(--n-color-border);
+}
+
+.n-tab {
+  flex: 1;
+  padding: var(--n-space-3) var(--n-space-5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--n-space-2);
+  cursor: pointer;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-medium);
+  transition: all var(--n-transition-fast);
+  position: relative;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.n-tab:hover {
+  color: var(--n-color-text-secondary);
+}
+
+.n-tab.is-active {
+  color: var(--n-color-primary);
+  font-weight: var(--n-weight-semibold);
+}
+
+.n-tab.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.n-tab-icon {
+  font-size: var(--n-text-base);
+}
+
+.n-tab-badge {
+  background: var(--n-color-primary);
+  color: white;
+  font-size: 0.65rem;
+  font-weight: var(--n-weight-bold);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--n-radius-full);
+  line-height: 1.2;
+}
+
+.n-tabs-indicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: var(--n-color-primary);
+  transition: all var(--n-transition-normal);
+  border-radius: var(--n-radius-full) var(--n-radius-full) 0 0;
+}
+</style>

package/dist/components/NTag.js

@@ -0,0 +1,108 @@
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-4d63a958',
+  __hmrId: 'NTag_nexa',
+  props: {
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  closable: { type: Boolean, default: false },
+  rounded: { type: Boolean, default: false }
+},
+  emits: ['close'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    return { $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { $slots, emit, variant, size, closable, rounded, Fragment: _ntc_Fragment } = ctx
+    return h('span', { class: ['n-tag', `n-tag-${variant}`, `n-tag-${size}`, rounded ? 'is-rounded' : ''], "data-v-4d63a958": "" }, [
+        "\n    ",
+        ctx.$slots.default ? ctx.$slots.default() : null,
+        "\n    ",
+        (closable) ? h('button', { class: "n-tag-close", onClick: ($event) => { emit('close') }, "data-v-4d63a958": "" }, [
+        "×"
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-4d63a958'
+_sfc_main.__hmrId = 'NTag_nexa'
+
+export default _sfc_main
+
+const __style = `.n-tag[data-v-4d63a958]{
+  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[data-v-4d63a958]{
+  border-radius: var(--n-radius-full);
+}
+
+.n-tag-sm[data-v-4d63a958]{ padding: 0.1rem 0.4rem; font-size: 0.65rem; }
+.n-tag-lg[data-v-4d63a958]{ padding: 0.35rem 0.8rem; font-size: var(--n-text-sm); }
+
+.n-tag-primary[data-v-4d63a958]{
+  background: var(--n-color-primary-light);
+  border-color: rgba(59, 130, 246, 0.25);
+  color: var(--n-color-primary);
+}
+
+.n-tag-success[data-v-4d63a958]{
+  background: var(--n-color-success-light);
+  border-color: rgba(16, 185, 129, 0.25);
+  color: var(--n-color-success);
+}
+
+.n-tag-danger[data-v-4d63a958]{
+  background: var(--n-color-danger-light);
+  border-color: rgba(239, 68, 68, 0.25);
+  color: var(--n-color-danger);
+}
+
+.n-tag-warning[data-v-4d63a958]{
+  background: var(--n-color-warning-light);
+  border-color: rgba(245, 158, 11, 0.25);
+  color: var(--n-color-warning);
+}
+
+.n-tag-info[data-v-4d63a958]{
+  background: var(--n-color-info-light);
+  border-color: rgba(6, 182, 212, 0.25);
+  color: var(--n-color-info);
+}
+
+.n-tag-secondary[data-v-4d63a958]{
+  background: var(--n-color-surface-alt);
+  border-color: var(--n-color-border);
+  color: var(--n-color-text-secondary);
+}
+
+.n-tag-close[data-v-4d63a958]{
+  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[data-v-4d63a958]:hover{
+  opacity: 1;
+}`
+injectStyle('data-v-4d63a958', __style)

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