nexa-ui-kit 0.11.6 → 0.11.9

package/src/components/NDatepicker.nexa

@@ -233,25 +233,20 @@ onBeforeUnmount(() => {
   display: inline-block;
   font-family: var(--n-font-sans);
 }
-
 .n-datepicker-input {
   position: relative;
   cursor: pointer;
 }
-
 .n-datepicker-input .n-input {
   cursor: pointer;
 }
-
 .n-datepicker-icon {
   position: absolute;
   right: 0.75rem;
   top: 50%;
-  transform: translateY(-50%);
   font-size: 1rem;
   pointer-events: none;
 }
-
 .n-datepicker-dropdown {
   position: absolute;
   top: calc(100% + 4px);
@@ -265,34 +260,28 @@ onBeforeUnmount(() => {
   width: 280px;
   animation: fade-in 0.15s ease;
 }
-
 @keyframes fade-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0;  }
+  to { opacity: 1;  }
 }
-
 .n-datepicker-dropdown.is-top {
   animation: fade-in-top 0.15s ease;
 }
-
 @keyframes fade-in-top {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0;  }
+  to { opacity: 1;  }
 }
-
 .n-datepicker-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.75rem;
 }
-
 .n-datepicker-title {
   font-weight: var(--n-weight-semibold);
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
 }
-
 .n-datepicker-nav {
   background: none;
   border: 1px solid var(--n-color-border);
@@ -307,18 +296,15 @@ onBeforeUnmount(() => {
   justify-content: center;
   transition: all var(--n-transition-fast);
 }
-
 .n-datepicker-nav:hover {
   background: var(--n-color-surface-hover);
   color: var(--n-color-text);
 }
-
 .n-datepicker-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
 }
-
 .n-datepicker-day-header {
   text-align: center;
   font-size: var(--n-text-xs);
@@ -326,7 +312,6 @@ onBeforeUnmount(() => {
   font-weight: var(--n-weight-semibold);
   padding: 0.35rem 0;
 }
-
 .n-datepicker-day {
   text-align: center;
   padding: 0.4rem 0;
@@ -336,32 +321,27 @@ onBeforeUnmount(() => {
   cursor: pointer;
   transition: all var(--n-transition-fast);
 }
-
 .n-datepicker-day:hover:not(.is-empty) {
   background: var(--n-color-primary-light);
 }
-
 .n-datepicker-day.is-empty {
   cursor: default;
 }
-
 .n-datepicker-day.is-disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
-
 .n-datepicker-day.is-disabled:hover {
   background: transparent;
 }
-
 .n-datepicker-day.is-today {
   font-weight: var(--n-weight-bold);
   color: var(--n-color-primary);
 }
-
 .n-datepicker-day.is-selected {
   background: var(--n-color-primary);
   color: white;
   font-weight: var(--n-weight-semibold);
 }
+
 </style>

package/src/components/NForm.nexa

@@ -130,4 +130,5 @@ provide('nexa-ui:form', {
   gap: var(--n-space-4);
   width: 100%;
 }
+
 </style>

package/src/components/NFormField.nexa

@@ -141,31 +141,27 @@ onUnmounted(() => {
   gap: var(--n-space-2);
   width: 100%;
 }
-
 .n-form-field-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-form-field-control {
   width: 100%;
 }
-
 .n-form-field-help {
   font-size: var(--n-text-xs);
   color: var(--n-color-text-muted);
   padding: 0 var(--n-space-1);
 }
-
 .n-form-field-error {
   font-size: var(--n-text-xs);
   color: var(--n-color-danger);
   padding: 0 var(--n-space-1);
 }
-
 .is-disabled {
   opacity: 0.6;
 }
+
 </style>

package/src/components/NImage.nexa

@@ -90,28 +90,24 @@ const onError = () => { error.value = true; loaded.value = true }
   background: var(--n-color-surface-hover, #1a1a2e);
   display: inline-block;
 }
-
 .n-image-skeleton {
   position: absolute;
   inset: 0;
-  background: linear-gradient(
-    90deg,
-    var(--n-color-surface, #111827) 25%,
+  background-color: var(--n-color-surface); 25%,
     var(--n-color-surface-hover, #1f2937) 50%,
     var(--n-color-surface, #111827) 75%
   );
   background-size: 200% 100%;
   animation: n-img-shimmer 1.5s infinite;
 }
-
 @keyframes n-img-shimmer {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
-
 .n-image {
   display: block;
   position: relative;
   z-index: 1;
 }
+
 </style>

package/src/components/NInput.nexa

@@ -1,5 +1,5 @@
 <script setup>
-import { signal, computed, inject, effect } from 'nexa-framework'
+import { signal, computed } from 'nexa-framework'
 
 const props = defineProps({
   modelValue: { type: [String, Number], default: '' },
@@ -7,327 +7,157 @@ const props = defineProps({
   placeholder: { type: String, default: '' },
   label: { type: String, default: '' },
   error: { type: String, default: '' },
-  id: { type: String, default: '' },
-  name: { type: String, default: '' },
-  autocomplete: { type: String, default: '' },
-  ariaDescribedby: { type: String, default: '' },
-  ariaInvalid: { type: [Boolean, String], default: false },
-  bindField: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
   readonly: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
   clearable: { type: Boolean, default: false },
-  maxlength: { type: Number, default: 0 },
-  prefixIcon: { type: String, default: '' },
-  suffixIcon: { type: String, default: '' }
+  prefix: { type: String, default: '' },
+  suffix: { type: String, default: '' }
 })
 
-const emit = defineEmits(['update:modelValue', 'clear', 'focus', 'blur'])
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'clear'])
 
-const field = inject('nexa-ui:form-field', undefined)
-
-const showPassword = signal(false)
 const isFocused = signal(false)
 
-const effectiveValue = computed(() => {
-  if (props.bindField && field?.value) return field.value.value
-  return props.modelValue
-})
-
-const draft = signal(String(effectiveValue.value ?? ''))
-
-effect(() => {
-  const next = String(effectiveValue.value ?? '')
-  if (draft.value === next) return
-  draft.value = next
-})
-
-const effectiveId = computed(() => {
-  if (props.id) return props.id
-  if (props.bindField && field?.inputId) return field.inputId.value
-  return ''
-})
-
-const effectiveDescribedBy = computed(() => {
-  if (props.ariaDescribedby) return props.ariaDescribedby
-  if (props.bindField && field?.describedBy) return field.describedBy.value || ''
-  return ''
-})
-
-const effectiveInvalid = computed(() => {
-  if (props.bindField && field?.invalid) return field.invalid.value
-  return props.ariaInvalid
-})
-
-const effectiveError = computed(() => {
-  if (props.error) return props.error
-  if (props.bindField && field?.error) return field.error.value || ''
-  return ''
-})
-
-const effectiveDisabled = computed(() => {
-  if (props.disabled) return true
-  if (props.bindField && field?.disabled) return !!field.disabled.value
-  return false
-})
-
-const inputType = computed(() => {
-  if (props.type === 'password' && showPassword.value) return 'text'
-  return props.type
-})
-
-const currentLength = computed(() => draft.value.length)
-
-const onInput = (e) => {
-  const next = e.target.value
-  if (draft.value !== next) draft.value = next
-  if (props.bindField && field?.setValue) {
-    field.setValue(next)
-    return
-  }
-  emit('update:modelValue', next)
+const handleInput = (e) => {
+  emit('update:modelValue', e.target.value)
 }
 
-const onFocus = () => {
+const handleFocus = (e) => {
   isFocused.value = true
-  emit('focus')
+  emit('focus', e)
 }
 
-const onBlur = () => {
+const handleBlur = (e) => {
   isFocused.value = false
-  if (props.bindField && field?.onBlur) {
-    field.onBlur()
-  }
-  emit('blur')
+  emit('blur', e)
 }
 
-const clear = () => {
-  if (draft.value) draft.value = ''
-  if (props.bindField && field?.setValue) {
-    field.setValue('')
-    emit('clear')
-    return
-  }
+const handleClear = () => {
   emit('update:modelValue', '')
   emit('clear')
 }
-
-const togglePassword = () => {
-  showPassword.value = !showPassword.value
-}
 </script>
 
 <template>
-  <div class="n-input-group">
-    <label v-if="label" class="n-input-label">{{ label }}</label>
-    <div class="n-input-wrapper" :class="{ 'is-focused': isFocused.value, 'has-error': effectiveError.value, 'is-disabled': effectiveDisabled.value }">
-      <span v-if="prefixIcon" class="n-input-icon is-prefix">{{ prefixIcon }}</span>
+  <div class="n-input-wrapper" :class="{ 'is-focused': isFocused, 'is-error': error, 'is-disabled': disabled }">
+    <label v-if="label" class="n-input-label">
+      {{ label }}
+      <span v-if="required" class="n-input-required">*</span>
+    </label>
+    <div class="n-input-container">
+      <span v-if="prefix" class="n-input-prefix">{{ prefix }}</span>
       <input
-        :id="effectiveId.value || undefined"
-        :name="name || undefined"
-        :type="inputType.value"
-        :value="draft.value"
+        :type="type"
+        :value="modelValue"
         :placeholder="placeholder"
-        :disabled="effectiveDisabled.value"
+        :disabled="disabled"
         :readonly="readonly"
-        :autocomplete="autocomplete || undefined"
-        :aria-describedby="effectiveDescribedBy.value || undefined"
-        :aria-invalid="effectiveInvalid.value || undefined"
-        :maxlength="maxlength || undefined"
+        :required="required"
         class="n-input"
-        :class="{ 'has-prefix': !!prefixIcon, 'has-suffix': !!suffixIcon || clearable || type === 'password' }"
-        @input="onInput"
-        @focus="onFocus"
-        @blur="onBlur"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
-      <div class="n-input-focus-ring"></div>
-      <div class="n-input-actions">
-        <button v-if="clearable && draft.value" class="n-input-action" @click="clear" tabindex="-1" type="button" aria-label="Clear"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
-        <button v-if="type === 'password'" class="n-input-action" @click="togglePassword" tabindex="-1" type="button" :aria-label="showPassword.value ? 'Hide password' : 'Show password'">
-          <svg v-if="!showPassword.value" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-          <svg v-else viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/><path d="M23 1L1 23"/></svg>
-        </button>
-        <span v-if="suffixIcon" class="n-input-icon is-suffix">{{ suffixIcon }}</span>
-      </div>
-    </div>
-    <div class="n-input-bottom">
-      <span v-if="effectiveError.value" class="n-input-error-msg">{{ effectiveError.value }}</span>
-      <span v-if="maxlength > 0" class="n-input-counter">{{ currentLength.value }}/{{ maxlength }}</span>
+      <button v-if="clearable && modelValue" class="n-input-clear" @click="handleClear" type="button">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <line x1="18" y1="6" x2="6" y2="18"/>
+          <line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+      <span v-if="suffix" class="n-input-suffix">{{ suffix }}</span>
     </div>
+    <span v-if="error" class="n-input-error">{{ error }}</span>
   </div>
 </template>
 
 <style scoped>
-.n-input-group {
+.n-input-wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--n-space-2);
+  gap: 0.5rem;
   width: 100%;
 }
-
 .n-input-label {
-  font-size: var(--n-text-sm);
-  font-weight: var(--n-weight-medium);
-  color: var(--n-color-text-secondary);
-  margin-left: var(--n-space-1);
-  letter-spacing: 0.01em;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--n-color-text);
+  letter-spacing: normal;
 }
-
-.n-input-wrapper {
+.n-input-required {
+  color: var(--n-color-danger);
+  margin-left: 0.25rem;
+}
+.n-input-container {
   position: relative;
   display: flex;
   align-items: center;
-  transition: all var(--n-transition-fast);
-}
-
-.n-input {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  min-height: 44px;
-  background: var(--n-color-bg);
+  background-color: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
-  color: var(--n-color-text);
-  padding: 0.75rem 1.125rem;
   border-radius: var(--n-radius-md);
-  font-family: inherit;
-  font-size: var(--n-text-base);
-  line-height: 1.2;
-  box-sizing: border-box;
-  transition: all var(--n-transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
-  outline: none;
-  caret-color: var(--n-color-primary);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.n-input.has-prefix {
-  padding-left: 2.5rem;
-}
-
-.n-input.has-suffix {
-  padding-right: 2.5rem;
-}
-
-.n-input::placeholder {
-  color: var(--n-color-text-muted);
+  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
 }
-
-.n-input-focus-ring {
-  position: absolute;
-  inset: 0;
-  border-radius: var(--n-radius-md);
-  background: linear-gradient(135deg, var(--n-color-primary), var(--n-color-info));
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--n-transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
-  z-index: 0;
+.n-input-container:hover {
+  border-color: var(--n-color-border-hover);
 }
-
-.is-focused .n-input-focus-ring {
-  opacity: 0.15;
-}
-
-.is-focused .n-input {
+.is-focused .n-input-container {
   border-color: var(--n-color-primary);
-  background: var(--n-color-surface);
-  box-shadow:
-    0 0 0 3px var(--n-color-primary-light),
-    0 0 0 1px var(--n-color-primary),
-    inset 0 1px 3px rgba(0,0,0,0.04);
+  box-shadow: var(--n-ring-primary);
 }
-
-.has-error .n-input {
+.is-error .n-input-container {
   border-color: var(--n-color-danger);
 }
-
-.has-error .n-input-focus-ring {
-  background: var(--n-color-danger);
-  opacity: 0.35;
+.is-error.is-focused .n-input-container {
+  box-shadow: var(--n-ring-danger);
 }
-
-.n-input-icon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--n-color-text-muted);
-  font-size: var(--n-text-sm);
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  line-height: 1;
+.is-disabled .n-input-container {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--n-color-surface-alt);
 }
-
-.n-input-icon.is-prefix {
-  left: 0.85rem;
+.n-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--n-color-text);
+  font-family: inherit;
+  width: 100%;
 }
-
-.n-input-icon.is-suffix {
-  right: 0.85rem;
+.n-input::placeholder {
+  color: var(--n-color-text-muted);
 }
-
-.n-input-actions {
-  position: absolute;
-  right: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: 0.15rem;
+.n-input:disabled {
+  cursor: not-allowed;
 }
-
-.n-input-action {
+.n-input-prefix,
+.n-input-suffix {
+  padding: 0 0.75rem;
+  color: var(--n-color-text-muted);
+  font-size: 0.875rem;
+  user-select: none;
+}
+.n-input-clear {
   background: transparent;
   border: none;
-  color: var(--n-color-text-muted);
   cursor: pointer;
-  padding: 0.25rem;
-  font-size: var(--n-text-sm);
-  border-radius: var(--n-radius-sm);
-  transition: all var(--n-transition-fast);
+  padding: 0.5rem;
+  color: var(--n-color-text-muted);
+  transition: color var(--n-transition-fast);
   display: flex;
   align-items: center;
-  line-height: 1;
+  justify-content: center;
 }
-
-.n-input-action:hover {
+.n-input-clear:hover {
   color: var(--n-color-text);
-  background: var(--n-color-glass);
 }
-
-.n-input-bottom {
+.n-input-error {
+  font-size: 0.75rem;
+  color: var(--n-color-danger);
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 0 var(--n-space-1);
-}
-
-.n-input-error-msg {
-  font-size: var(--n-text-xs);
-  color: var(--n-color-danger);
-}
-
-.n-input-counter {
-  font-size: var(--n-text-xs);
-  color: var(--n-color-text-muted);
-  margin-left: auto;
-}
-
-.is-disabled {
-  position: relative;
-}
-
-.is-disabled::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--n-color-glass);
-  border-radius: var(--n-radius-md);
-  pointer-events: none;
-  z-index: 2;
-}
-
-.is-disabled .n-input {
-  cursor: not-allowed;
-  background: var(--n-color-surface-alt);
+  gap: 0.25rem;
 }
 </style>

package/src/components/NInputNumber.nexa

@@ -227,6 +227,6 @@ const onFocus = () => {
   </div>
 </template>
 
-<style scoped>
+<style scoped>
 .n-inum{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-inum-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-inum-wrap{display:flex;align-items:stretch;min-height:44px;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);overflow:hidden;transition:all var(--n-transition-fast)}.n-inum-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-inum-input{flex:1;background:transparent;border:none;outline:none;padding:0.75rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit;text-align:center;line-height:1.2;box-sizing:border-box}.n-inum-btn{width:2.5rem;background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--n-text-base);transition:all var(--n-transition-fast)}.n-inum-btn:hover:not(:disabled){background:var(--n-color-glass);color:var(--n-color-text)}.n-inum-btn:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6;cursor:not-allowed;background:var(--n-color-surface-alt)}
 </style>