styles w/ differents colors

src/components/ui/NumberInput.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="number-input">
+    <input
+      type="number"
+      :value="modelValue"
+      :min="min"
+      :max="max"
+      :step="step"
+      :id="id"
+      :class="inputClass"
+      :disabled="disabled"
+      @input="handleInput"
+    />
+    <div class="spinner-buttons">
+      <button
+        type="button"
+        class="spinner-btn spinner-up"
+        @click="increment"
+        :disabled="disabled || (max !== undefined && modelValue >= max)"
+        tabindex="-1"
+      >
+        <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 0L7.4641 6H0.535898L4 0Z" fill="currentColor"/>
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="spinner-btn spinner-down"
+        @click="decrement"
+        :disabled="disabled || (min !== undefined && modelValue <= min)"
+        tabindex="-1"
+      >
+        <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 6L0.535898 0H7.4641L4 6Z" fill="currentColor"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true
+  },
+  min: {
+    type: Number,
+    default: undefined
+  },
+  max: {
+    type: Number,
+    default: undefined
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  id: {
+    type: String,
+    default: undefined
+  },
+  inputClass: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const handleInput = (event) => {
+  const value = Number(event.target.value);
+  emit('update:modelValue', value);
+};
+
+const increment = () => {
+  const newValue = props.modelValue + props.step;
+  if (props.max === undefined || newValue <= props.max) {
+    emit('update:modelValue', newValue);
+  }
+};
+
+const decrement = () => {
+  const newValue = props.modelValue - props.step;
+  if (props.min === undefined || newValue >= props.min) {
+    emit('update:modelValue', newValue);
+  }
+};
+</script>