fix: Autocomplete component Disabled State

src/components/Autocomplete/Autocomplete.story.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 import Autocomplete from './Autocomplete.vue'
 
 const single = ref()
@@ -36,6 +36,11 @@ const options = [
     image: 'https://randomuser.me/api/portraits/women/51.jpg',
   },
 ]
+
+
+const state = reactive({
+  disabled: false,
+}) 
 </script>
 <template>
   <Story :layout="{ width: 500, type: 'grid' }" autoPropsDisabled>
@@ -44,6 +49,7 @@ const options = [
         <Autocomplete
           :options="options"
           v-model="single"
+          :disabled="state.disabled"
           placeholder="Select person"
         />
       </div>
@@ -53,6 +59,7 @@ const options = [
         <Autocomplete
           :options="options"
           v-model="single"
+          :disabled="state.disabled"
           placeholder="Select person"
         >
           <template #prefix>
@@ -73,6 +80,7 @@ const options = [
         <Autocomplete
           :options="options"
           v-model="single"
+          :disabled="state.disabled"
           placeholder="Select person"
           :hideSearch="true"
         />
@@ -83,6 +91,7 @@ const options = [
         <Autocomplete
           :options="options"
           v-model="people"
+          :disabled="state.disabled"
           placeholder="Select people"
           :multiple="true"
           :compareFn="(a, b) => a.value === b.value"
@@ -94,11 +103,16 @@ const options = [
         <Autocomplete
           :options="options"
           v-model="people"
+          :disabled="state.disabled"
           placeholder="Select people"
           :multiple="true"
           :hideSearch="true"
         />
       </div>
     </Variant>
+
+    <template #controls>
+      <HstCheckbox v-model="state.disabled" title="Disabled" />
+    </template>
   </Story>
 </template>

src/components/Autocomplete/Autocomplete.vue

@@ -32,6 +32,7 @@
               class="flex h-7 w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 border border-transparent focus:border-outline-gray-4 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
               :class="{ 'bg-surface-gray-3': isComboboxOpen }"
               @click="() => togglePopover()"
+              :disabled="props.disabled"
             >
               <div class="flex items-center overflow-hidden">
                 <slot name="prefix" />

src/components/Autocomplete/types.ts

@@ -28,6 +28,7 @@ export type AutocompleteProps = {
   showFooter?: boolean
   compareFn?: (a: Option, b: Option) => boolean
   maxOptions?: number
+  disabled?: boolean
 } & (
   | {
       multiple: true