@smurfox/proxy-ui 0.3.1 → 0.4.0

package/README.md

@@ -23,14 +23,14 @@ A component library built for **Nuxt 4**, designed with a clean and consistent A
 ## Installation
 
 ```bash
-npm install proxy-ui
+npm install @smurfox/proxy-ui
 ```
 
 Add the module to your `nuxt.config.ts`:
 
 ```ts
 export default defineNuxtConfig({
-  modules: ["proxy-ui"],
+  modules: ["@smurfox/proxy-ui"],
 });
 ```
 
@@ -164,6 +164,7 @@ A flexible input component with validation and state management.
 | `required`    | `boolean`                                                   | `false`                   | Shows a red asterisk on the label.                   |
 | `error`       | `string`                                                    | —                         | Error message to display. Changes styling to danger. |
 | `disabled`    | `boolean`                                                   | `false`                   | Disables the input.                                  |
+| `focus`       | `boolean`                                                   | `false`                   | Selects the whole text on focus (useful for pre-filled fields the user is likely to replace). |
 
 **Slots**
 
@@ -178,6 +179,9 @@ A flexible input component with validation and state management.
 <!-- Basic -->
 <PUInput label="Email" type="email" placeholder="you@example.com" />
 
+<!-- Select all on focus (great for pre-filled codes the user wants to replace) -->
+<PUInput v-model="orderCode" label="Order code" focus />
+
 <!-- With helper text -->
 <PUInput label="Password" type="password" description="At least 8 characters" />
 
@@ -260,7 +264,7 @@ A multi-line text input. Shares the look and feel of `PUInput`, with extra props
 
 ### PUSelect
 
-A custom select with an animated dropdown panel teleported to `body`. Dark-mode aware, supports `v-model`, and emits both `update:modelValue` and `change`.
+A custom select with an animated dropdown panel teleported to `body`. Dark-mode aware, supports `v-model`, and emits both `update:modelValue` and `change`. Only one `PUSelect` can be open at a time across the page — opening a new one automatically closes any other open select.
 
 ```vue
 <PUSelect
@@ -320,6 +324,85 @@ A custom select with an animated dropdown panel teleported to `body`. Dark-mode
 
 ---
 
+### PUAutocomplete
+
+A searchable variant of `PUSelect` — same look and dropdown behavior, but the trigger is a real `<input>` that filters the options as you type. Includes a clear (`×`) button that resets both the search text and the selected value. Like `PUSelect`, the dropdown is teleported to `body` and only one autocomplete can be open at a time.
+
+```vue
+<PUAutocomplete
+  v-model="framework"
+  label="Framework"
+  placeholder="Search a framework"
+  :options="[
+    { label: 'Nuxt', value: 'nuxt' },
+    { label: 'Vue', value: 'vue' },
+    { label: 'React', value: 'react' },
+  ]"
+/>
+```
+
+Filtering is case-insensitive and matches `label`. When the input text matches the currently-selected option's label exactly, the list is shown unfiltered so the user can browse all options again without clearing first. On close without selection, the input reverts to the selected option's label (or empty if nothing was selected).
+
+**Props**
+
+| Prop          | Type                                                        | Default                   | Description                                          |
+| ------------- | ----------------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
+| `modelValue`  | `string \| number \| null`                                  | `null`                    | Selected value (v-model).                            |
+| `options`     | `{ label: string, value: string \| number }[]`              | `[]`                      | Items shown in the dropdown.                         |
+| `label`       | `string`                                                    | —                         | Label displayed above the input.                     |
+| `labelClass`  | `string`                                                    | `'text-sm font-semibold'` | Custom classes for the label.                        |
+| `placeholder` | `string`                                                    | `'Search...'`             | Placeholder text shown when the input is empty.      |
+| `description` | `string`                                                    | —                         | Helper text displayed below.                         |
+| `rounded`     | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | `'xl'`                    | Border radius.                                       |
+| `variant`     | `'default' \| 'secondary'`                                  | `'default'`               | Visual style.                                        |
+| `required`    | `boolean`                                                   | `false`                   | Shows a red asterisk on the label.                   |
+| `error`       | `string`                                                    | `''`                      | Error message to display. Changes styling to danger. |
+| `disabled`    | `boolean`                                                   | `false`                   | Disables the input.                                  |
+
+**Events**
+
+| Event               | Payload                          | Description                                                              |
+| ------------------- | -------------------------------- | ------------------------------------------------------------------------ |
+| `update:modelValue` | `string \| number \| null`       | Emitted when an option is picked, or `null` when the clear button is used. |
+| `change`            | `string \| number \| null`       | Emitted alongside `update:modelValue`.                                   |
+| `search`            | `string`                         | Emitted on every keystroke with the current input text. Useful for remote search. |
+
+**Examples**
+
+```vue
+<!-- Basic -->
+<PUAutocomplete v-model="country" :options="countries" label="Country" />
+
+<!-- Secondary variant + required -->
+<PUAutocomplete
+  v-model="city"
+  variant="secondary"
+  :options="cities"
+  label="City"
+  required
+/>
+
+<!-- With error -->
+<PUAutocomplete
+  v-model="status"
+  :options="statuses"
+  label="Status"
+  error="Pick a status"
+  required
+/>
+
+<!-- Remote search via the `search` event -->
+<PUAutocomplete
+  v-model="user"
+  :options="remoteResults"
+  label="User"
+  placeholder="Type to search users"
+  @search="onSearch"
+/>
+```
+
+---
+
 ### PUCard
 
 A flexible card component with customizable styling and borders.
@@ -569,7 +652,7 @@ const activeTab = ref("dashboard");
 
 ### PUDropdown
 
-A floating panel anchored to an activator element. Opens on click and closes on outside click. Provides a `closeDropdown` function (via `inject`) so child items can close the panel after acting.
+A floating panel anchored to an activator element. The menu is teleported to `body` and positioned with `position: fixed` relative to the activator, so it escapes any `overflow` ancestor (scroll containers, modals, etc.). The menu re-positions itself on scroll and resize while open. Opens on click and closes on outside click; only one `PUDropdown` can be open at a time across the page. Provides a `closeDropdown` function (via `inject`) so child items can close the panel after acting.
 
 ```vue
 <PUDropdown>
@@ -782,10 +865,12 @@ import type {
   TableItem,
   TableRounded,
   TableItemsSize,
-} from "proxy-ui";
+  AutocompleteOption,
+  AutocompleteProps,
+} from "@smurfox/proxy-ui";
 ```
 
-> `PUTextArea`, `PUSelect`, and `PUDropdown` define their props inline and do not export dedicated `Props` types. They reuse `InputVariant` and `InputRounded` from the same package.
+> `PUTextArea`, `PUSelect`, and `PUDropdown` define their props inline and do not export dedicated `Props` types. They reuse `InputVariant` and `InputRounded` from the same package. `PUAutocomplete` does export `AutocompleteProps` and `AutocompleteOption`.
 
 ---
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "proxy-ui",
   "configKey": "proxyUI",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Autocomplete.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      v-if="label"
+      class="flex items-start gap-1"
+    >
+      <label
+        class="dark:text-white"
+        :class="[labelClass]"
+      >{{ label }} </label>
+      <span
+        v-if="props.required"
+        class="text-danger"
+      >*</span>
+    </div>
+
+    <div
+      ref="selectRef"
+      class="relative w-full text-left"
+    >
+      <input
+        ref="inputRef"
+        type="text"
+        :value="searchQuery"
+        :placeholder="props.placeholder"
+        :disabled="props.disabled"
+        class="w-full p-3 pr-10 text-sm transition-colors"
+        :class="[
+  roundedVariants[props.rounded],
+  props.error ? errorVariants[props.variant] : variants[props.variant],
+  props.disabled ? 'opacity-70 cursor-not-allowed' : 'cursor-text'
+]"
+        @input="onInput"
+        @focus="open"
+        @click.stop="open"
+      >
+
+      <button
+        v-if="searchQuery && !props.disabled"
+        type="button"
+        class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-white cursor-pointer"
+        @click.stop="clear"
+      >
+        <Icon
+          name="mdi:close-circle"
+          size="18"
+        />
+      </button>
+      <Icon
+        v-else
+        name="mdi:chevron-down"
+        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 transition-transform duration-200 pointer-events-none"
+        :class="{ 'rotate-180': isOpen && !props.disabled }"
+      />
+
+      <Teleport
+        v-if="isOpen && !props.disabled"
+        to="body"
+      >
+        <AnimatePresence>
+          <motion.div
+            v-if="isOpen && !props.disabled"
+            :initial="{ scale: 0.96, opacity: 0, y: -6 }"
+            :animate="{ scale: 1, opacity: 1, y: 0 }"
+            :exit="{ scale: 0.96, opacity: 0, y: -6 }"
+            class="fixed p-2 max-h-56 overflow-y-auto origin-top border rounded-xl shadow-xl"
+            :class="
+  isDarkMode ? 'bg-[#212123] border-white/10 text-white' : 'bg-white border-gray-100'
+"
+            :style="dropdownStyle"
+            @click.stop
+          >
+            <div
+              v-if="filteredOptions.length === 0"
+              class="px-4 py-2 text-sm text-center"
+              :class="isDarkMode ? 'text-white/60' : 'text-black/50'"
+            >
+              No available options
+            </div>
+            <template v-else>
+              <button
+                v-for="option in filteredOptions"
+                :key="String(option.value)"
+                type="button"
+                class="w-full flex items-center justify-between gap-3 px-3 py-2 mb-1 text-left cursor-pointer rounded-lg transition-colors"
+                :class="[
+  isDarkMode ? 'hover:bg-white/10' : 'hover:bg-gray-100',
+  option.value === props.modelValue ? selectedOptionClass : ''
+]"
+                @click.stop="selectOption(option)"
+              >
+                <span
+                  class="text-sm truncate"
+                  :class="
+  option.value === props.modelValue ? 'text-primary' : unselectedOptionClass
+"
+                >
+                  {{ option.label }}
+                </span>
+                <Icon
+                  v-if="option.value === props.modelValue"
+                  name="mdi:check"
+                  class="text-primary text-sm shrink-0"
+                />
+              </button>
+            </template>
+          </motion.div>
+        </AnimatePresence>
+      </Teleport>
+    </div>
+
+    <p
+      v-if="description && !props.error"
+      class="text-gray-600 dark:text-white/60 text-xs"
+    >
+      {{ description }}
+    </p>
+    <p
+      v-if="props.error"
+      class="text-danger text-xs mt-1"
+    >
+      {{ props.error }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { AnimatePresence, motion } from "motion-v";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { createPopoverGroup } from "../composables/popoverGroup";
+const popoverGroup = createPopoverGroup();
+</script>
+
+<script setup>
+const roundedVariants = {
+  "none": "rounded-none",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
+  "2xl": "rounded-2xl",
+  "full": "rounded-full"
+};
+const variants = {
+  default: "border border-gray-200 dark:border-white/10 bg-white dark:bg-white/10 enabled:hover:bg-gray-100 dark:enabled:hover:bg-white/20 dark:text-white focus:bg-white dark:focus:bg-white/10 focus:ring-2 focus:ring-primary focus:outline-none",
+  secondary: "border border-gray-200 dark:border-white/10 bg-[#EBEBEC] dark:bg-white/20 dark:text-white enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-white/30 focus:bg-[#EBEBEC] dark:focus:bg-white/20 focus:ring-2 focus:ring-primary focus:outline-none"
+};
+const errorVariants = {
+  default: "border border-danger bg-danger/10 dark:bg-danger/20 text-black dark:text-white enabled:hover:bg-white/20 dark:enabled:hover:bg-white/20 focus:bg-white dark:focus:bg-white/10 focus:ring-2 focus:ring-danger focus:outline-none",
+  secondary: "border border-danger bg-danger/22 dark:bg-danger/10 text-black dark:text-white enabled:hover:bg-[#E0E0E1] dark:enabled:hover:bg-white/30 focus:bg-[#EBEBEC] dark:focus:bg-white/20 focus:ring-2 focus:ring-danger focus:outline-none"
+};
+const props = defineProps({
+  modelValue: { type: [String, Number, null], required: false, default: null },
+  options: { type: Array, required: false, default: () => [] },
+  label: { type: String, required: false },
+  labelClass: { type: String, required: false, default: "text-sm font-semibold" },
+  placeholder: { type: String, required: false, default: "Search..." },
+  description: { type: String, required: false },
+  rounded: { type: String, required: false, default: "xl" },
+  variant: { type: String, required: false, default: "default" },
+  required: { type: Boolean, required: false, default: false },
+  error: { type: String, required: false, default: "" },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue", "change", "search"]);
+const selectRef = ref(null);
+const inputRef = ref(null);
+const isOpen = ref(false);
+const isDarkMode = ref(false);
+const dropdownPosition = ref({ top: 0, left: 0, width: 0 });
+const searchQuery = ref("");
+const selectedOption = computed(() => {
+  return props.options.find((option) => option.value === props.modelValue);
+});
+const filteredOptions = computed(() => {
+  const q = searchQuery.value.trim().toLowerCase();
+  if (!q) return props.options;
+  if (selectedOption.value && searchQuery.value === selectedOption.value.label) {
+    return props.options;
+  }
+  return props.options.filter(
+    (option) => option.label.toLowerCase().includes(q)
+  );
+});
+const dropdownStyle = computed(() => ({
+  top: `${dropdownPosition.value.top}px`,
+  left: `${dropdownPosition.value.left}px`,
+  width: `${dropdownPosition.value.width}px`,
+  zIndex: 9999
+}));
+const selectedOptionClass = computed(() => {
+  return isDarkMode.value ? "bg-white/10" : "bg-primary/10";
+});
+const unselectedOptionClass = computed(() => {
+  return isDarkMode.value ? "text-white" : "text-black";
+});
+watch(
+  () => props.modelValue,
+  () => {
+    searchQuery.value = selectedOption.value?.label ?? "";
+  },
+  { immediate: true }
+);
+function syncDarkMode() {
+  isDarkMode.value = Boolean(selectRef.value?.closest(".dark"));
+}
+function calculateDropdownPosition() {
+  if (!selectRef.value) return;
+  syncDarkMode();
+  const rect = selectRef.value.getBoundingClientRect();
+  dropdownPosition.value = {
+    top: rect.bottom + window.scrollY + 8,
+    left: rect.left + window.scrollX,
+    width: rect.width
+  };
+}
+async function open() {
+  if (props.disabled || isOpen.value) return;
+  popoverGroup.open(close);
+  await nextTick();
+  calculateDropdownPosition();
+  isOpen.value = true;
+}
+function close() {
+  if (!isOpen.value) return;
+  isOpen.value = false;
+  popoverGroup.release(close);
+  searchQuery.value = selectedOption.value?.label ?? "";
+}
+function onInput(event) {
+  const value = event.target.value;
+  searchQuery.value = value;
+  emit("search", value);
+  if (!isOpen.value) open();
+}
+function selectOption(option) {
+  emit("update:modelValue", option.value);
+  emit("change", option.value);
+  searchQuery.value = option.label;
+  isOpen.value = false;
+  popoverGroup.release(close);
+}
+function clear() {
+  searchQuery.value = "";
+  emit("update:modelValue", null);
+  emit("change", null);
+  emit("search", "");
+  inputRef.value?.focus();
+}
+function onClickOutside(event) {
+  if (selectRef.value && !selectRef.value.contains(event.target)) {
+    close();
+  }
+}
+function onScroll() {
+  if (isOpen.value) calculateDropdownPosition();
+}
+onMounted(() => {
+  syncDarkMode();
+  document.addEventListener("click", onClickOutside);
+  window.addEventListener("scroll", onScroll, true);
+  window.addEventListener("resize", onScroll);
+});
+onUnmounted(() => {
+  document.removeEventListener("click", onClickOutside);
+  window.removeEventListener("scroll", onScroll, true);
+  window.removeEventListener("resize", onScroll);
+  popoverGroup.release(close);
+});
+</script>

package/dist/runtime/components/Avatar.d.vue.ts

@@ -7,8 +7,8 @@ type __VLS_Props = {
     rounded?: AvatarRounded;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: AvatarSize;
     rounded: AvatarRounded;
+    size: AvatarSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Avatar.vue.d.ts

@@ -7,8 +7,8 @@ type __VLS_Props = {
     rounded?: AvatarRounded;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: AvatarSize;
     rounded: AvatarRounded;
+    size: AvatarSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Button.d.vue.ts

@@ -24,10 +24,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
-    size: ButtonSize;
     rounded: ButtonRounded;
     variant: ButtonVariant;
     color: ButtonColor;
+    size: ButtonSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Button.vue.d.ts

@@ -24,10 +24,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
-    size: ButtonSize;
     rounded: ButtonRounded;
     variant: ButtonVariant;
     color: ButtonColor;
+    size: ButtonSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Chip.d.vue.ts

@@ -15,10 +15,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: ChipSize;
     rounded: ChipRounded;
     variant: ChipVariant;
     color: ChipColor;
+    size: ChipSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Chip.vue.d.ts

@@ -15,10 +15,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: ChipSize;
     rounded: ChipRounded;
     variant: ChipVariant;
     color: ChipColor;
+    size: ChipSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Dropdown.d.vue.ts

@@ -1,18 +1,16 @@
-type __VLS_Props = {
-    menuMinWidth?: string;
-};
-declare var __VLS_1: {}, __VLS_17: {};
-type __VLS_Slots = {} & {
-    activator?: (props: typeof __VLS_1) => any;
-} & {
-    content?: (props: typeof __VLS_17) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    menuMinWidth: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    menuMinWidth?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    menuMinWidth?: string;
+}> & Readonly<{}>, {
+    menuMinWidth: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    activator?: (props: {}) => any;
+} & {
+    content?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Dropdown.vue

@@ -3,55 +3,101 @@
     ref="dropdownRef"
     class="relative inline-block text-left"
   >
-    <div @click="toggle">
+    <div
+      ref="activatorRef"
+      @click="toggle"
+    >
       <slot name="activator" />
     </div>
 
-    <AnimatePresence>
-      <motion.div
-        v-if="isOpen"
-        :initial="{ scale: 0.9, opacity: 0, y: -10 }"
-        :exit="{ opacity: 0 }"
-        :animate="{ scale: 1, opacity: 1, y: 0 }"
-        :class="[
-  'absolute right-0 z-50 mt-2 origin-top-right bg-white border border-gray-100 rounded-xl shadow-xl dark:bg-[#18181B] dark:border-black/40',
+    <Teleport to="body">
+      <AnimatePresence>
+        <motion.div
+          v-if="isOpen"
+          ref="menuRef"
+          :initial="{ scale: 0.9, opacity: 0, y: -10 }"
+          :exit="{ opacity: 0 }"
+          :animate="{ scale: 1, opacity: 1, y: 0 }"
+          :style="menuStyle"
+          :class="[
+  'fixed z-50 origin-top-right bg-white border border-gray-100 rounded-xl shadow-xl dark:bg-[#18181B] dark:border-black/40',
   props.menuMinWidth
 ]"
-        @click="handleContentClick"
-      >
-        <slot name="content" />
-      </motion.div>
-    </AnimatePresence>
+          @click="handleContentClick"
+        >
+          <slot name="content" />
+        </motion.div>
+      </AnimatePresence>
+    </Teleport>
   </div>
 </template>
 
-<script setup>
+<script>
 import { AnimatePresence, motion } from "motion-v";
-import { ref, onMounted, onUnmounted, provide } from "vue";
+import { ref, reactive, onMounted, onUnmounted, provide, nextTick, watch } from "vue";
+import { createPopoverGroup } from "../composables/popoverGroup";
+const popoverGroup = createPopoverGroup();
+</script>
+
+<script setup>
 const props = defineProps({
   menuMinWidth: { type: String, required: false, default: "min-w-52" }
 });
 const isOpen = ref(false);
 const dropdownRef = ref(null);
-const toggle = () => {
-  isOpen.value = !isOpen.value;
+const activatorRef = ref(null);
+const menuRef = ref(null);
+const menuStyle = reactive({
+  top: "0px",
+  right: "0px"
+});
+const updatePosition = () => {
+  if (!activatorRef.value) return;
+  const rect = activatorRef.value.getBoundingClientRect();
+  menuStyle.top = `${rect.bottom + 8}px`;
+  menuStyle.right = `${window.innerWidth - rect.right}px`;
 };
 const close = () => {
   isOpen.value = false;
+  popoverGroup.release(close);
+};
+const toggle = () => {
+  if (isOpen.value) {
+    close();
+    return;
+  }
+  popoverGroup.open(close);
+  isOpen.value = true;
+  nextTick(updatePosition);
 };
 provide("closeDropdown", close);
 const onClickOutside = (event) => {
-  if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+  const target = event.target;
+  const insideActivator = dropdownRef.value?.contains(target);
+  const insideMenu = menuRef.value?.contains(target);
+  if (!insideActivator && !insideMenu) {
     setTimeout(() => close(), 10);
   }
 };
 const handleContentClick = (event) => {
   event.stopPropagation();
 };
+watch(isOpen, (open) => {
+  if (open) {
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+  } else {
+    window.removeEventListener("scroll", updatePosition, true);
+    window.removeEventListener("resize", updatePosition);
+  }
+});
 onMounted(() => {
   document.addEventListener("click", onClickOutside);
 });
 onUnmounted(() => {
   document.removeEventListener("click", onClickOutside);
+  window.removeEventListener("scroll", updatePosition, true);
+  window.removeEventListener("resize", updatePosition);
+  popoverGroup.release(close);
 });
 </script>

package/dist/runtime/components/Dropdown.vue.d.ts

@@ -1,18 +1,16 @@
-type __VLS_Props = {
-    menuMinWidth?: string;
-};
-declare var __VLS_1: {}, __VLS_17: {};
-type __VLS_Slots = {} & {
-    activator?: (props: typeof __VLS_1) => any;
-} & {
-    content?: (props: typeof __VLS_17) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    menuMinWidth: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    menuMinWidth?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    menuMinWidth?: string;
+}> & Readonly<{}>, {
+    menuMinWidth: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    activator?: (props: {}) => any;
+} & {
+    content?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Input.d.vue.ts

@@ -11,6 +11,7 @@ type __VLS_Props = {
     required?: boolean;
     error?: string;
     disabled?: boolean;
+    focus?: boolean;
 };
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
@@ -23,12 +24,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
+    focus: boolean;
+    labelClass: string;
     rounded: InputRounded;
-    type: string;
     variant: InputVariant;
-    disabled: boolean;
     required: boolean;
-    labelClass: string;
+    disabled: boolean;
+    type: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Input.vue

@@ -38,6 +38,7 @@
         @input="
   emit('update:modelValue', $event.target.value)
 "
+        @focus="handleFocus"
       >
       <!-- endContent -->
       <div
@@ -92,9 +93,16 @@ const props = defineProps({
   variant: { type: String, required: false, default: "default" },
   required: { type: Boolean, required: false, default: false },
   error: { type: String, required: false },
-  disabled: { type: Boolean, required: false, default: false }
+  disabled: { type: Boolean, required: false, default: false },
+  focus: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const handleFocus = (event) => {
+  if (props.focus) {
+    const target = event.target;
+    target.select();
+  }
+};
 </script>
 
 <style scoped>

package/dist/runtime/components/Input.vue.d.ts

@@ -11,6 +11,7 @@ type __VLS_Props = {
     required?: boolean;
     error?: string;
     disabled?: boolean;
+    focus?: boolean;
 };
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
@@ -23,12 +24,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
+    focus: boolean;
+    labelClass: string;
     rounded: InputRounded;
-    type: string;
     variant: InputVariant;
-    disabled: boolean;
     required: boolean;
-    labelClass: string;
+    disabled: boolean;
+    type: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Lottie.d.vue.ts

@@ -5,8 +5,8 @@ type __VLS_Props = {
     width?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    height: number;
     width: number;
+    height: number;
     loop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Lottie.vue.d.ts

@@ -5,8 +5,8 @@ type __VLS_Props = {
     width?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    height: number;
     width: number;
+    height: number;
     loop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Select.d.vue.ts

@@ -1,37 +0,0 @@
-import type { InputRounded, InputVariant } from '../types/index.js';
-interface SelectOption {
-    label: string;
-    value: string | number;
-}
-type __VLS_Props = {
-    modelValue?: string | number | null;
-    options?: SelectOption[];
-    label?: string;
-    labelClass?: string;
-    placeholder?: string;
-    description?: string;
-    rounded?: InputRounded;
-    variant?: InputVariant;
-    required?: boolean;
-    error?: string;
-    disabled?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: string | number) => any;
-    "update:modelValue": (value: string | number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: string | number) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-}>, {
-    rounded: InputRounded;
-    error: string;
-    variant: InputVariant;
-    disabled: boolean;
-    placeholder: string;
-    required: boolean;
-    modelValue: string | number | null;
-    labelClass: string;
-    options: SelectOption[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/Select.vue

@@ -111,9 +111,14 @@
   </div>
 </template>
 
-<script setup>
+<script>
 import { AnimatePresence, motion } from "motion-v";
 import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
+import { createPopoverGroup } from "../composables/popoverGroup";
+const popoverGroup = createPopoverGroup();
+</script>
+
+<script setup>
 const roundedVariants = {
   "none": "rounded-none",
   "sm": "rounded-sm",
@@ -186,14 +191,18 @@ async function toggle() {
   if (props.disabled) {
     return;
   }
-  if (!isOpen.value) {
-    await nextTick();
-    calculateDropdownPosition();
+  if (isOpen.value) {
+    close();
+    return;
   }
-  isOpen.value = !isOpen.value;
+  popoverGroup.open(close);
+  await nextTick();
+  calculateDropdownPosition();
+  isOpen.value = true;
 }
 function close() {
   isOpen.value = false;
+  popoverGroup.release(close);
 }
 function selectOption(option) {
   emit("update:modelValue", option.value);
@@ -220,5 +229,6 @@ onUnmounted(() => {
   document.removeEventListener("click", onClickOutside);
   window.removeEventListener("scroll", onScroll, true);
   window.removeEventListener("resize", onScroll);
+  popoverGroup.release(close);
 });
 </script>

package/dist/runtime/components/Select.vue.d.ts

@@ -1,37 +0,0 @@
-import type { InputRounded, InputVariant } from '../types/index.js';
-interface SelectOption {
-    label: string;
-    value: string | number;
-}
-type __VLS_Props = {
-    modelValue?: string | number | null;
-    options?: SelectOption[];
-    label?: string;
-    labelClass?: string;
-    placeholder?: string;
-    description?: string;
-    rounded?: InputRounded;
-    variant?: InputVariant;
-    required?: boolean;
-    error?: string;
-    disabled?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: string | number) => any;
-    "update:modelValue": (value: string | number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: string | number) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-}>, {
-    rounded: InputRounded;
-    error: string;
-    variant: InputVariant;
-    disabled: boolean;
-    placeholder: string;
-    required: boolean;
-    modelValue: string | number | null;
-    labelClass: string;
-    options: SelectOption[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/Tabs.d.vue.ts

@@ -4,9 +4,9 @@ declare const __VLS_export: import("vue").DefineComponent<TabsProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<TabsProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    modelValue: string;
     rounded: import("../types/index.js").TabsRounded;
     iconSize: number;
-    modelValue: string;
     bgColor: string;
     btnColor: string;
     activeTextColor: string;

package/dist/runtime/components/Tabs.vue.d.ts

@@ -4,9 +4,9 @@ declare const __VLS_export: import("vue").DefineComponent<TabsProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<TabsProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    modelValue: string;
     rounded: import("../types/index.js").TabsRounded;
     iconSize: number;
-    modelValue: string;
     bgColor: string;
     btnColor: string;
     activeTextColor: string;

package/dist/runtime/components/TextArea.d.vue.ts

@@ -25,13 +25,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
-    rounded: InputRounded;
     resize: TextAreaResize;
+    labelClass: string;
+    rounded: InputRounded;
     variant: InputVariant;
-    disabled: boolean;
     required: boolean;
+    disabled: boolean;
     rows: number | string;
-    labelClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/TextArea.vue.d.ts

@@ -25,13 +25,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
-    rounded: InputRounded;
     resize: TextAreaResize;
+    labelClass: string;
+    rounded: InputRounded;
     variant: InputVariant;
-    disabled: boolean;
     required: boolean;
+    disabled: boolean;
     rows: number | string;
-    labelClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/composables/popoverGroup.d.ts

@@ -0,0 +1,5 @@
+export interface PopoverGroup {
+    open: (close: () => void) => void;
+    release: (close: () => void) => void;
+}
+export declare function createPopoverGroup(): PopoverGroup;

package/dist/runtime/composables/popoverGroup.js

@@ -0,0 +1,12 @@
+export function createPopoverGroup() {
+  let activeClose = null;
+  return {
+    open(close) {
+      if (activeClose && activeClose !== close) activeClose();
+      activeClose = close;
+    },
+    release(close) {
+      if (activeClose === close) activeClose = null;
+    }
+  };
+}

package/dist/runtime/types/index.d.ts

@@ -53,6 +53,23 @@ export interface InputProps {
     error?: string;
     disabled?: boolean;
 }
+export interface AutocompleteOption {
+    label: string;
+    value: string | number;
+}
+export interface AutocompleteProps {
+    modelValue?: string | number | null;
+    options?: AutocompleteOption[];
+    label?: string;
+    labelClass?: string;
+    placeholder?: string;
+    description?: string;
+    rounded?: InputRounded;
+    variant?: InputVariant;
+    required?: boolean;
+    error?: string;
+    disabled?: boolean;
+}
 export type TabsRounded = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 export interface TabItem {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smurfox/proxy-ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A UI component library built for Nuxt 4",
   "repository": {
     "type": "git",