nexa-ui-kit 0.6.0

package/dist/components/NCard.js

@@ -0,0 +1,117 @@
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-34850782',
+  __hmrId: 'NCard_nexa',
+  props: {
+  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: '' }
+},
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    return { $slots }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { $slots, title, subtitle, padding, hoverable, variant, image, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: ['n-card', `is-${variant}`, hoverable ? 'is-hoverable' : ''], "data-v-34850782": "" }, [
+        "\n    ",
+        (image) ? h('img', { class: "n-card-image", src: image, "data-v-34850782": "" }) : null,
+        (title || $slots.header) ? h('div', { class: "n-card-header", "data-v-34850782": "" }, [
+        "\n      ",
+        ctx.$slots.header ? ctx.$slots.header() : null,
+        "\n    "
+      ]) : null,
+        h('div', { class: ['n-card-body', padding ? 'has-padding' : ''], "data-v-34850782": "" }, [
+        "\n      ",
+        ctx.$slots.default ? ctx.$slots.default() : null,
+        "\n    "
+      ]),
+        "\n    ",
+        ($slots.footer) ? h('div', { class: "n-card-footer", "data-v-34850782": "" }, [
+        "\n      ",
+        ctx.$slots.footer ? ctx.$slots.footer() : null,
+        "\n    "
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-34850782'
+_sfc_main.__hmrId = 'NCard_nexa'
+
+export default _sfc_main
+
+const __style = `.n-card[data-v-34850782]{
+  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[data-v-34850782]{
+  background: var(--n-color-surface-elevated);
+  box-shadow: var(--n-shadow-lg);
+}
+
+.is-outlined[data-v-34850782]{
+  background: transparent;
+  border-color: var(--n-color-border);
+  box-shadow: none;
+}
+
+.is-flat[data-v-34850782]{
+  background: var(--n-color-surface-alt);
+  border: none;
+  box-shadow: none;
+}
+
+.n-card.is-hoverable[data-v-34850782]:hover{
+  transform: translateY(-4px);
+  border-color: var(--n-color-border-hover);
+  box-shadow: var(--n-shadow-xl);
+}
+
+.n-card-image[data-v-34850782]{
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  display: block;
+}
+
+.n-card-header[data-v-34850782]{
+  padding: var(--n-space-6);
+  border-bottom: 1px solid var(--n-color-border);
+}
+
+.n-card-title[data-v-34850782]{
+  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[data-v-34850782]{
+  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[data-v-34850782]{
+  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;
+}`
+injectStyle('data-v-34850782', __style)

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

@@ -0,0 +1,108 @@
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-761e94fe',
+  __hmrId: 'NCheckbox_nexa',
+  props: {
+  modelValue: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  indeterminate: { type: Boolean, default: false }
+},
+  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, label, disabled, indeterminate, Fragment: _ntc_Fragment } = ctx
+    return h('label', { class: ["n-checkbox", { 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }], "data-v-761e94fe": "" }, [
+        "\n    ",
+        h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-761e94fe": "" }, [
+        "\n      ",
+        h('span', { class: "n-checkbox-icon", "data-v-761e94fe": "" }, [
+        "\n        ",
+        indeterminate ? '–' : '✓',
+        "\n      "
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        (label) ? h('span', { class: "n-checkbox-label", "data-v-761e94fe": "" }, [
+        label
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-761e94fe'
+_sfc_main.__hmrId = 'NCheckbox_nexa'
+
+export default _sfc_main
+
+const __style = `.n-checkbox[data-v-761e94fe]{
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.n-checkbox-box[data-v-761e94fe]{
+  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[data-v-761e94fe]{
+  background: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+}
+
+.is-indeterminate .n-checkbox-box[data-v-761e94fe]{
+  background: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+}
+
+.n-checkbox-icon[data-v-761e94fe]{
+  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[data-v-761e94fe], 
+.is-indeterminate .n-checkbox-icon[data-v-761e94fe]{
+  opacity: 1;
+  transform: scale(1);
+}
+
+.n-checkbox-label[data-v-761e94fe]{
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text);
+  font-weight: var(--n-weight-medium);
+}
+
+.is-disabled[data-v-761e94fe]{
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.n-checkbox[data-v-761e94fe]:hover:not(.is-disabled) .n-checkbox-box{
+  border-color: var(--n-color-primary);
+}`
+injectStyle('data-v-761e94fe', __style)

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

@@ -0,0 +1,72 @@
+import { computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-606f06fb',
+  __hmrId: 'NChips_nexa',
+  props: {
+  modelValue: { type: Array, default: () => [] },
+  removable: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false }
+},
+  emits: ['update:modelValue', 'remove'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    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 })
+    }
+    return { resolvedModel, normalize, chips, removeAt, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { resolvedModel, normalize, chips, removeAt, $slots, emit, modelValue, removable, disabled, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: ["n-chips", { 'is-disabled': disabled }], "data-v-606f06fb": "" }, [
+        "\n    ",
+        chips.value.map((chip, i) =>
+        h('div', { class: "n-chip", key: String(chip.value) + ':' + i, "data-v-606f06fb": "" }, [
+        "\n      ",
+        h('span', { class: "n-chip-label", "data-v-606f06fb": "" }, [
+        chip.label
+      ]),
+        "\n      ",
+        (removable) ? h('button', { class: "n-chip-remove", type: "button", disabled: disabled, "aria-label": "Remove", onClick: ($event) => { removeAt(i) }, "data-v-606f06fb": "" }, [
+        "✕"
+      ]) : null
+      ])
+      ),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-606f06fb'
+_sfc_main.__hmrId = 'NChips_nexa'
+
+export default _sfc_main
+
+const __style = `.n-chips[data-v-606f06fb]{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}`
+injectStyle('data-v-606f06fb', __style)

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