nexa-ui-kit 0.6.0

package/dist/components/NPassword.js

@@ -0,0 +1,193 @@
+import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-7b897096',
+  __hmrId: 'NPassword_nexa',
+  props: {
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  error: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  name: { type: String, default: '' },
+  autocomplete: { type: String, default: 'current-password' },
+  id: { type: String, default: '' },
+  clearable: { type: Boolean, default: false },
+  toggleMask: { type: Boolean, default: true },
+  showStrength: { type: Boolean, default: true },
+  validate: { type: Boolean, default: true },
+  showRequirements: { type: Boolean, default: true },
+  minLength: { type: Number, default: 8 },
+  requireLower: { type: Boolean, default: true },
+  requireUpper: { type: Boolean, default: true },
+  requireNumber: { type: Boolean, default: true },
+  requireSpecial: { type: Boolean, default: true },
+},
+  emits: ['update:modelValue', 'clear'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const instanceId = `n-pwd-${Math.random().toString(16).slice(2)}`
+    const inputId = computed(() => props.id || instanceId)
+    const masked = signal(true)
+    const type = computed(() => (props.toggleMask && masked.value ? 'password' : 'text'))
+    const hasValue = computed(() => !!props.modelValue)
+    const requirements = computed(() => {
+      const value = props.modelValue || ''
+      const lengthOk = value.length >= props.minLength
+      const lowerOk = !props.requireLower || /[a-z]/.test(value)
+      const upperOk = !props.requireUpper || /[A-Z]/.test(value)
+      const numberOk = !props.requireNumber || /\d/.test(value)
+      const specialOk = !props.requireSpecial || /[^A-Za-z0-9]/.test(value)
+      return [
+        { key: 'length', ok: lengthOk, label: `Mínimo ${props.minLength} caracteres` },
+        { key: 'lower', ok: lowerOk, label: 'Al menos una minúscula' },
+        { key: 'upper', ok: upperOk, label: 'Al menos una mayúscula' },
+        { key: 'number', ok: numberOk, label: 'Al menos un número' },
+        { key: 'special', ok: specialOk, label: 'Al menos un carácter especial' },
+      ].filter(r => {
+        if (r.key === 'lower') return props.requireLower
+        if (r.key === 'upper') return props.requireUpper
+        if (r.key === 'number') return props.requireNumber
+        if (r.key === 'special') return props.requireSpecial
+        return true
+      })
+    })
+    const strength = computed(() => {
+      const value = props.modelValue || ''
+      if (!value) return { score: 0, label: '' }
+      let score = 0
+      if (value.length >= props.minLength) score++
+      if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score++
+      if (/\d/.test(value)) score++
+      if (/[^A-Za-z0-9]/.test(value)) score++
+      const label = score <= 1 ? 'Débil' : score === 2 ? 'Media' : score === 3 ? 'Fuerte' : 'Muy fuerte'
+      return { score, label }
+    })
+    const internalError = computed(() => {
+      if (!props.validate) return ''
+      if (!props.modelValue) return ''
+      const first = requirements.value.find(r => !r.ok)
+      return first ? `Contraseña inválida: ${first.label}` : ''
+    })
+    const errorMessage = computed(() => props.error || internalError.value)
+    const ariaInvalid = computed(() => (errorMessage.value ? 'true' : 'false'))
+    const describedBy = computed(() => {
+      const ids = []
+      if (errorMessage.value) ids.push(`${inputId.value}-error`)
+      if (props.showStrength && hasValue.value) ids.push(`${inputId.value}-strength`)
+      if (props.showRequirements && props.validate && hasValue.value) ids.push(`${inputId.value}-requirements`)
+      return ids.join(' ') || undefined
+    })
+    const onInput = (e) => {
+      emit('update:modelValue', e.target.value)
+    }
+    const clear = (e) => {
+      if (props.disabled || props.readonly) return
+      e?.preventDefault?.()
+      emit('update:modelValue', '')
+      emit('clear')
+    }
+    const toggle = (e) => {
+      if (props.disabled) return
+      e?.preventDefault?.()
+      masked.value = !masked.value
+    }
+    return { instanceId, inputId, masked, type, hasValue, requirements, strength, internalError, errorMessage, ariaInvalid, describedBy, onInput, clear, toggle, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { instanceId, inputId, masked, type, hasValue, requirements, strength, internalError, errorMessage, ariaInvalid, describedBy, onInput, clear, toggle, $slots, emit, modelValue, placeholder, label, error, disabled, readonly, name, autocomplete, id, clearable, toggleMask, showStrength, validate, showRequirements, minLength, requireLower, requireUpper, requireNumber, requireSpecial, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: "n-password", "data-v-7b897096": "" }, [
+        "\n    ",
+        (label) ? h('label', { class: "n-password-label", for: inputId.value, "data-v-7b897096": "" }, [
+        label
+      ]) : null,
+        h('div', { class: ["n-password-wrapper", { 'has-error': !!errorMessage.value, 'is-disabled': disabled }], "data-v-7b897096": "" }, [
+        "\n      ",
+        h('input', { class: "n-password-input", id: inputId.value, name: name || undefined, type: type.value, value: modelValue, placeholder: placeholder, disabled: disabled, readonly: readonly, autocomplete: autocomplete, "aria-invalid": ariaInvalid.value, "aria-describedby": describedBy.value, onInput: onInput, "data-v-7b897096": "" }),
+        "\n      ",
+        h('div', { class: "n-password-actions", "data-v-7b897096": "" }, [
+        "\n        ",
+        (clearable && modelValue) ? h('button', { class: "n-password-action", type: "button", disabled: disabled || readonly, "aria-label": "Limpiar", onClick: clear, "data-v-7b897096": "" }, [
+        "✕"
+      ]) : null,
+        (toggleMask) ? h('button', { class: "n-password-action", type: "button", "aria-pressed": (!masked.value).toString(), disabled: disabled, "aria-label": masked.value ? 'Mostrar contraseña' : 'Ocultar contraseña', onClick: toggle, "data-v-7b897096": "" }, [
+        "\n          ",
+        masked.value ? '👁' : '🙈',
+        "\n        "
+      ]) : null
+      ]),
+        "\n    "
+      ]),
+        "\n\n    ",
+        (errorMessage.value) ? h('div', { class: "n-password-error", id: inputId.value + '-error', role: "alert", "data-v-7b897096": "" }, [
+        "\n      ",
+        errorMessage.value,
+        "\n    "
+      ]) : null,
+        (showStrength && modelValue) ? h('div', { class: "n-password-strength", id: inputId.value + '-strength', "data-v-7b897096": "" }, [
+        "\n      ",
+        h('div', { class: "n-password-meter", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 4, "aria-valuenow": strength.value.score, "aria-label": 'Fuerza de contraseña: ' + strength.value.label, "data-v-7b897096": "" }, [
+        "\n        ",
+        [1, 2, 3, 4].map((n, index) =>
+        h('span', { class: ["n-password-meter-seg", { 'is-on': n <= strength.value.score }], key: n, "data-v-7b897096": "" })
+      ),
+        "\n      "
+      ]),
+        "\n      ",
+        h('span', { class: "n-password-strength-label", "data-v-7b897096": "" }, [
+        strength.value.label
+      ]),
+        "\n    "
+      ]) : null,
+        (showRequirements && validate && modelValue) ? h('ul', { class: "n-password-req", id: inputId.value + '-requirements', "data-v-7b897096": "" }, [
+        "\n      ",
+        requirements.value.map((r, index) =>
+        h('li', { class: ["n-password-req-item", { 'is-ok': r.ok }], key: r.key, "data-v-7b897096": "" }, [
+        "\n        ",
+        h('span', { class: "n-password-req-icon", "data-v-7b897096": "" }, [
+        r.ok ? '✓' : '•'
+      ]),
+        "\n        ",
+        h('span', { "data-v-7b897096": "" }, [
+        r.label
+      ]),
+        "\n      "
+      ])
+      ),
+        "\n    "
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-7b897096'
+_sfc_main.__hmrId = 'NPassword_nexa'
+
+export default _sfc_main
+
+const __style = `.n-password[data-v-7b897096]{ display:flex; flex-direction:column; gap: var(--n-space-2); width:100%; font-family: var(--n-font-sans); }
+.n-password-label[data-v-7b897096]{ font-size: var(--n-text-sm); font-weight: var(--n-weight-semibold); color: var(--n-color-text-secondary); margin-left: var(--n-space-1); }
+.n-password-wrapper[data-v-7b897096]{ position:relative; display:flex; align-items:center; background: var(--n-color-bg); border: 1px solid var(--n-color-border); border-radius: var(--n-radius-md); transition: all var(--n-transition-normal); }
+.n-password-wrapper[data-v-7b897096]:focus-within{ border-color: var(--n-color-primary); box-shadow: 0 0 0 3px var(--n-color-primary-light); background: var(--n-color-surface); }
+.n-password-wrapper.has-error[data-v-7b897096]{ border-color: var(--n-color-danger); }
+.n-password-wrapper.has-error[data-v-7b897096]:focus-within{ box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
+.n-password-input[data-v-7b897096]{ width:100%; background:transparent; border:none; outline:none; color: var(--n-color-text); padding: 0.75rem 2.75rem 0.75rem 1rem; font-size: var(--n-text-base); font-family: inherit; }
+.n-password-input[data-v-7b897096]::placeholder{ color: var(--n-color-text-muted); }
+.n-password-actions[data-v-7b897096]{ position:absolute; right: 0.5rem; display:flex; align-items:center; gap: 0.15rem; }
+.n-password-action[data-v-7b897096]{ background:transparent; border:none; color: var(--n-color-text-muted); cursor:pointer; padding: 0.25rem; border-radius: var(--n-radius-sm); transition: all var(--n-transition-fast); line-height: 1; display:flex; align-items:center; }
+.n-password-action[data-v-7b897096]:hover:not(:disabled){ color: var(--n-color-text); background: var(--n-color-glass); }
+.n-password-action[data-v-7b897096]:disabled{ opacity: 0.5; cursor: not-allowed; }
+.n-password-error[data-v-7b897096]{ font-size: var(--n-text-xs); color: var(--n-color-danger); padding: 0 var(--n-space-1); }
+.n-password-strength[data-v-7b897096]{ display:flex; align-items:center; gap: var(--n-space-2); padding: 0 var(--n-space-1); }
+.n-password-meter[data-v-7b897096]{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 120px; }
+.n-password-meter-seg[data-v-7b897096]{ height: 6px; border-radius: var(--n-radius-full); background: var(--n-color-border); transition: background var(--n-transition-fast); }
+.n-password-meter-seg.is-on[data-v-7b897096]{ background: var(--n-color-primary); }
+.n-password-strength-label[data-v-7b897096]{ font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
+.n-password-req[data-v-7b897096]{ list-style:none; padding: 0 var(--n-space-1); margin: 0; display:flex; flex-direction:column; gap: 0.25rem; }
+.n-password-req-item[data-v-7b897096]{ display:flex; gap: var(--n-space-2); align-items:flex-start; font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
+.n-password-req-item.is-ok[data-v-7b897096]{ color: var(--n-color-success); }
+.n-password-req-icon[data-v-7b897096]{ width: 14px; display:inline-flex; justify-content:center; flex-shrink:0; }
+.n-password-wrapper.is-disabled[data-v-7b897096]{ opacity: 0.5; cursor: not-allowed; background: var(--n-color-surface-alt); }
+.n-password-wrapper.is-disabled .n-password-input[data-v-7b897096]{ cursor: not-allowed; }`
+injectStyle('data-v-7b897096', __style)

package/dist/components/NPassword.nexa

@@ -0,0 +1,178 @@
+<script setup>
+import { signal, computed } from 'nexa-framework'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  error: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  name: { type: String, default: '' },
+  autocomplete: { type: String, default: 'current-password' },
+  id: { type: String, default: '' },
+  clearable: { type: Boolean, default: false },
+  toggleMask: { type: Boolean, default: true },
+  showStrength: { type: Boolean, default: true },
+  validate: { type: Boolean, default: true },
+  showRequirements: { type: Boolean, default: true },
+  minLength: { type: Number, default: 8 },
+  requireLower: { type: Boolean, default: true },
+  requireUpper: { type: Boolean, default: true },
+  requireNumber: { type: Boolean, default: true },
+  requireSpecial: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue', 'clear'])
+
+const instanceId = `n-pwd-${Math.random().toString(16).slice(2)}`
+const inputId = computed(() => props.id || instanceId)
+
+const masked = signal(true)
+
+const type = computed(() => (props.toggleMask && masked.value ? 'password' : 'text'))
+
+const hasValue = computed(() => !!props.modelValue)
+
+const requirements = computed(() => {
+  const value = props.modelValue || ''
+  const lengthOk = value.length >= props.minLength
+  const lowerOk = !props.requireLower || /[a-z]/.test(value)
+  const upperOk = !props.requireUpper || /[A-Z]/.test(value)
+  const numberOk = !props.requireNumber || /\d/.test(value)
+  const specialOk = !props.requireSpecial || /[^A-Za-z0-9]/.test(value)
+  return [
+    { key: 'length', ok: lengthOk, label: `Mínimo ${props.minLength} caracteres` },
+    { key: 'lower', ok: lowerOk, label: 'Al menos una minúscula' },
+    { key: 'upper', ok: upperOk, label: 'Al menos una mayúscula' },
+    { key: 'number', ok: numberOk, label: 'Al menos un número' },
+    { key: 'special', ok: specialOk, label: 'Al menos un carácter especial' },
+  ].filter(r => {
+    if (r.key === 'lower') return props.requireLower
+    if (r.key === 'upper') return props.requireUpper
+    if (r.key === 'number') return props.requireNumber
+    if (r.key === 'special') return props.requireSpecial
+    return true
+  })
+})
+
+const strength = computed(() => {
+  const value = props.modelValue || ''
+  if (!value) return { score: 0, label: '' }
+  let score = 0
+  if (value.length >= props.minLength) score++
+  if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score++
+  if (/\d/.test(value)) score++
+  if (/[^A-Za-z0-9]/.test(value)) score++
+  const label = score <= 1 ? 'Débil' : score === 2 ? 'Media' : score === 3 ? 'Fuerte' : 'Muy fuerte'
+  return { score, label }
+})
+
+const internalError = computed(() => {
+  if (!props.validate) return ''
+  if (!props.modelValue) return ''
+  const first = requirements.value.find(r => !r.ok)
+  return first ? `Contraseña inválida: ${first.label}` : ''
+})
+
+const errorMessage = computed(() => props.error || internalError.value)
+const ariaInvalid = computed(() => (errorMessage.value ? 'true' : 'false'))
+
+const describedBy = computed(() => {
+  const ids = []
+  if (errorMessage.value) ids.push(`${inputId.value}-error`)
+  if (props.showStrength && hasValue.value) ids.push(`${inputId.value}-strength`)
+  if (props.showRequirements && props.validate && hasValue.value) ids.push(`${inputId.value}-requirements`)
+  return ids.join(' ') || undefined
+})
+
+const onInput = (e) => {
+  emit('update:modelValue', e.target.value)
+}
+
+const clear = (e) => {
+  if (props.disabled || props.readonly) return
+  e?.preventDefault?.()
+  emit('update:modelValue', '')
+  emit('clear')
+}
+
+const toggle = (e) => {
+  if (props.disabled) return
+  e?.preventDefault?.()
+  masked.value = !masked.value
+}
+</script>
+
+<template>
+  <div class="n-password">
+    <label v-if="label" class="n-password-label" :for="inputId.value">{{ label }}</label>
+    <div class="n-password-wrapper" :class="{ 'has-error': !!errorMessage.value, 'is-disabled': disabled }">
+      <input
+        class="n-password-input"
+        :id="inputId.value"
+        :name="name || undefined"
+        :type="type.value"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :autocomplete="autocomplete"
+        :aria-invalid="ariaInvalid.value"
+        :aria-describedby="describedBy.value"
+        @input="onInput"
+      />
+      <div class="n-password-actions">
+        <button v-if="clearable && modelValue" type="button" class="n-password-action" :disabled="disabled || readonly" aria-label="Limpiar" @click="clear">✕</button>
+        <button v-if="toggleMask" type="button" class="n-password-action" :aria-pressed="(!masked.value).toString()" :disabled="disabled" :aria-label="masked.value ? 'Mostrar contraseña' : 'Ocultar contraseña'" @click="toggle">
+          {{ masked.value ? '👁' : '🙈' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="errorMessage.value" class="n-password-error" :id="inputId.value + '-error'" role="alert">
+      {{ errorMessage.value }}
+    </div>
+
+    <div v-if="showStrength && modelValue" class="n-password-strength" :id="inputId.value + '-strength'">
+      <div class="n-password-meter" role="progressbar" :aria-valuemin="0" :aria-valuemax="4" :aria-valuenow="strength.value.score" :aria-label="'Fuerza de contraseña: ' + strength.value.label">
+        <span v-for="n in [1, 2, 3, 4]" :key="n" class="n-password-meter-seg" :class="{ 'is-on': n <= strength.value.score }"></span>
+      </div>
+      <span class="n-password-strength-label">{{ strength.value.label }}</span>
+    </div>
+
+    <ul v-if="showRequirements && validate && modelValue" class="n-password-req" :id="inputId.value + '-requirements'">
+      <li v-for="r in requirements.value" :key="r.key" class="n-password-req-item" :class="{ 'is-ok': r.ok }">
+        <span class="n-password-req-icon">{{ r.ok ? '✓' : '•' }}</span>
+        <span>{{ r.label }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.n-password { display:flex; flex-direction:column; gap: var(--n-space-2); width:100%; font-family: var(--n-font-sans); }
+.n-password-label { font-size: var(--n-text-sm); font-weight: var(--n-weight-semibold); color: var(--n-color-text-secondary); margin-left: var(--n-space-1); }
+.n-password-wrapper { position:relative; display:flex; align-items:center; background: var(--n-color-bg); border: 1px solid var(--n-color-border); border-radius: var(--n-radius-md); transition: all var(--n-transition-normal); }
+.n-password-wrapper:focus-within { border-color: var(--n-color-primary); box-shadow: 0 0 0 3px var(--n-color-primary-light); background: var(--n-color-surface); }
+.n-password-wrapper.has-error { border-color: var(--n-color-danger); }
+.n-password-wrapper.has-error:focus-within { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
+.n-password-input { width:100%; background:transparent; border:none; outline:none; color: var(--n-color-text); padding: 0.75rem 2.75rem 0.75rem 1rem; font-size: var(--n-text-base); font-family: inherit; }
+.n-password-input::placeholder { color: var(--n-color-text-muted); }
+.n-password-actions { position:absolute; right: 0.5rem; display:flex; align-items:center; gap: 0.15rem; }
+.n-password-action { background:transparent; border:none; color: var(--n-color-text-muted); cursor:pointer; padding: 0.25rem; border-radius: var(--n-radius-sm); transition: all var(--n-transition-fast); line-height: 1; display:flex; align-items:center; }
+.n-password-action:hover:not(:disabled) { color: var(--n-color-text); background: var(--n-color-glass); }
+.n-password-action:disabled { opacity: 0.5; cursor: not-allowed; }
+.n-password-error { font-size: var(--n-text-xs); color: var(--n-color-danger); padding: 0 var(--n-space-1); }
+.n-password-strength { display:flex; align-items:center; gap: var(--n-space-2); padding: 0 var(--n-space-1); }
+.n-password-meter { display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 120px; }
+.n-password-meter-seg { height: 6px; border-radius: var(--n-radius-full); background: var(--n-color-border); transition: background var(--n-transition-fast); }
+.n-password-meter-seg.is-on { background: var(--n-color-primary); }
+.n-password-strength-label { font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
+.n-password-req { list-style:none; padding: 0 var(--n-space-1); margin: 0; display:flex; flex-direction:column; gap: 0.25rem; }
+.n-password-req-item { display:flex; gap: var(--n-space-2); align-items:flex-start; font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
+.n-password-req-item.is-ok { color: var(--n-color-success); }
+.n-password-req-icon { width: 14px; display:inline-flex; justify-content:center; flex-shrink:0; }
+.n-password-wrapper.is-disabled { opacity: 0.5; cursor: not-allowed; background: var(--n-color-surface-alt); }
+.n-password-wrapper.is-disabled .n-password-input { cursor: not-allowed; }
+</style>

package/dist/components/NProgressBar.js

@@ -0,0 +1,127 @@
+import { computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-daaa1d0',
+  __hmrId: 'NProgressBar_nexa',
+  props: {
+  value: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  showLabel: { type: Boolean, default: false },
+  striped: { type: Boolean, default: false },
+  animated: { type: Boolean, default: false }
+},
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props.max) * 100)))
+    return { percentage, $slots }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { percentage, $slots, value, max, variant, size, showLabel, striped, animated, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: ["n-progress", [`is-${size}`, striped ? 'is-striped' : '', animated ? 'is-animated' : '']], "data-v-daaa1d0": "" }, [
+        "\n    ",
+        h('div', { class: "n-progress-track", "data-v-daaa1d0": "" }, [
+        "\n      ",
+        h('div', { class: ["n-progress-bar", `is-${variant}`], style: { width: percentage.value + '%' }, "data-v-daaa1d0": "" }, [
+        "\n        ",
+        (showLabel && percentage.value > 15) ? h('span', { class: "n-progress-label", "data-v-daaa1d0": "" }, [
+        Math.round(percentage.value),
+        "%"
+      ]) : null
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        (showLabel && percentage.value <= 15) ? h('span', { class: "n-progress-label-outside", "data-v-daaa1d0": "" }, [
+        Math.round(percentage.value),
+        "%"
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-daaa1d0'
+_sfc_main.__hmrId = 'NProgressBar_nexa'
+
+export default _sfc_main
+
+const __style = `.n-progress[data-v-daaa1d0]{
+  display: flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  width: 100%;
+}
+
+.n-progress-track[data-v-daaa1d0]{
+  flex: 1;
+  background: var(--n-color-surface-alt);
+  border-radius: var(--n-radius-full);
+  overflow: hidden;
+}
+
+.is-sm .n-progress-track[data-v-daaa1d0]{ height: 6px; }
+.is-md .n-progress-track[data-v-daaa1d0]{ height: 10px; }
+.is-lg .n-progress-track[data-v-daaa1d0]{ height: 14px; }
+
+.n-progress-bar[data-v-daaa1d0]{
+  height: 100%;
+  border-radius: var(--n-radius-full);
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 0.35rem;
+  min-width: 0;
+}
+
+.is-primary[data-v-daaa1d0]{ background: var(--n-color-primary); }
+.is-success[data-v-daaa1d0]{ background: var(--n-color-success); }
+.is-danger[data-v-daaa1d0]{ background: var(--n-color-danger); }
+.is-warning[data-v-daaa1d0]{ background: var(--n-color-warning); }
+.is-info[data-v-daaa1d0]{ background: var(--n-color-info); }
+
+.n-progress-label[data-v-daaa1d0]{
+  color: white;
+  font-size: 0.65rem;
+  font-weight: var(--n-weight-bold);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.is-lg .n-progress-label[data-v-daaa1d0]{
+  font-size: var(--n-text-xs);
+}
+
+.n-progress-label-outside[data-v-daaa1d0]{
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-semibold);
+  color: var(--n-color-text-secondary);
+  flex-shrink: 0;
+  min-width: 3rem;
+  text-align: right;
+}
+
+.is-striped .n-progress-bar[data-v-daaa1d0]{
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.12) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.12) 50%,
+    rgba(255, 255, 255, 0.12) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+.is-animated .n-progress-bar[data-v-daaa1d0]{
+  animation: n-progress-stripe 1s linear infinite;
+}
+
+@keyframes n-progress-stripe {
+from[data-v-daaa1d0]{ background-position: 1rem 0; }
+to[data-v-daaa1d0]{ background-position: 0 0; }
+}`
+injectStyle('data-v-daaa1d0', __style)

package/dist/components/NProgressBar.nexa

@@ -0,0 +1,111 @@
+<script setup>
+import { computed } from 'nexa-framework'
+
+const props = defineProps({
+  value: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  showLabel: { type: Boolean, default: false },
+  striped: { type: Boolean, default: false },
+  animated: { type: Boolean, default: false }
+})
+
+const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props.max) * 100)))
+</script>
+
+<template>
+  <div class="n-progress" :class="[`is-${size}`, striped ? 'is-striped' : '', animated ? 'is-animated' : '']">
+    <div class="n-progress-track">
+      <div
+        class="n-progress-bar"
+        :class="`is-${variant}`"
+        :style="{ width: percentage.value + '%' }"
+      >
+        <span v-if="showLabel && percentage.value > 15" class="n-progress-label">{{ Math.round(percentage.value) }}%</span>
+      </div>
+    </div>
+    <span v-if="showLabel && percentage.value <= 15" class="n-progress-label-outside">{{ Math.round(percentage.value) }}%</span>
+  </div>
+</template>
+
+<style scoped>
+.n-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  width: 100%;
+}
+
+.n-progress-track {
+  flex: 1;
+  background: var(--n-color-surface-alt);
+  border-radius: var(--n-radius-full);
+  overflow: hidden;
+}
+
+.is-sm .n-progress-track { height: 6px; }
+.is-md .n-progress-track { height: 10px; }
+.is-lg .n-progress-track { height: 14px; }
+
+.n-progress-bar {
+  height: 100%;
+  border-radius: var(--n-radius-full);
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 0.35rem;
+  min-width: 0;
+}
+
+.is-primary { background: var(--n-color-primary); }
+.is-success { background: var(--n-color-success); }
+.is-danger { background: var(--n-color-danger); }
+.is-warning { background: var(--n-color-warning); }
+.is-info { background: var(--n-color-info); }
+
+.n-progress-label {
+  color: white;
+  font-size: 0.65rem;
+  font-weight: var(--n-weight-bold);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.is-lg .n-progress-label {
+  font-size: var(--n-text-xs);
+}
+
+.n-progress-label-outside {
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-semibold);
+  color: var(--n-color-text-secondary);
+  flex-shrink: 0;
+  min-width: 3rem;
+  text-align: right;
+}
+
+.is-striped .n-progress-bar {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.12) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.12) 50%,
+    rgba(255, 255, 255, 0.12) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+.is-animated .n-progress-bar {
+  animation: n-progress-stripe 1s linear infinite;
+}
+
+@keyframes n-progress-stripe {
+  from { background-position: 1rem 0; }
+  to { background-position: 0 0; }
+}
+</style>