silver-ui 0.2.0 → 0.3.1

package/dist/{chunk-2VIJC4NW.cjs → chunk-QRKRVCA3.cjs}

@@ -1,76 +1,156 @@
 'use strict';
 
-var chunkMMST4VXH_cjs = require('./chunk-MMST4VXH.cjs');
+var chunkU5GTHA44_cjs = require('./chunk-U5GTHA44.cjs');
 var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
-var chunkKFEXS6OK_cjs = require('./chunk-KFEXS6OK.cjs');
+var chunkBAPCHFNX_cjs = require('./chunk-BAPCHFNX.cjs');
 var chunk2P6D43V2_cjs = require('./chunk-2P6D43V2.cjs');
-var chunkBDBHHJGN_cjs = require('./chunk-BDBHHJGN.cjs');
-var chunkO3T7Z6RH_cjs = require('./chunk-O3T7Z6RH.cjs');
-var chunkYXYD5HKL_cjs = require('./chunk-YXYD5HKL.cjs');
-var chunkJMNH45Q3_cjs = require('./chunk-JMNH45Q3.cjs');
+var chunkW3KMDQKP_cjs = require('./chunk-W3KMDQKP.cjs');
+var chunkBRB52QFV_cjs = require('./chunk-BRB52QFV.cjs');
+var chunkKFDHP4WP_cjs = require('./chunk-KFDHP4WP.cjs');
+var chunkQEFE4QBL_cjs = require('./chunk-QEFE4QBL.cjs');
 var chunk6SHL7FYO_cjs = require('./chunk-6SHL7FYO.cjs');
+var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
 var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
+var chunk5QPM5LUS_cjs = require('./chunk-5QPM5LUS.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var styles = {
-  root: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    minW: 0
-  }),
-  icon: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    flexShrink: 0,
-    color: "fg.muted"
-  }),
-  text: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    flexDirection: "column",
-    minW: 0
-  }),
-  disabled: chunkRU6JG3FS_cjs.css({ opacity: 0.55 })
-};
-function AutocompleteInputItem({
-  className,
-  "data-testid": dataTestId,
-  description,
-  icon,
-  item,
-  isDisabled = false,
-  ref,
-  style
-}) {
-  if (item.element != null) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: item.element });
+// src/components/AutocompleteInput/AutocompleteInput.recipe.ts
+var autocompleteMenuRecipe = chunk5QPM5LUS_cjs.sva({
+  slots: ["menu", "option", "check", "loading", "empty"],
+  base: {
+    menu: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      maxH: "80",
+      overflowY: "auto",
+      p: "1"
+    },
+    option: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "2",
+      w: "full",
+      borderWidth: 0,
+      borderRadius: "md",
+      bg: "transparent",
+      color: "fg",
+      cursor: "pointer",
+      fontFamily: "body",
+      textAlign: "start",
+      _hover: { bg: "bg.subtle" },
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffsetTight"
+      }
+    },
+    check: {
+      display: "inline-flex",
+      flexShrink: 0,
+      color: "primary"
+    },
+    loading: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "1",
+      p: "2",
+      color: "fg.muted",
+      "& > svg": {
+        animation: "spin 0.8s linear infinite"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        "& > svg": { animation: "none" }
+      }
+    },
+    empty: {
+      p: "3",
+      textAlign: "center"
+    }
+  },
+  variants: {
+    size: {
+      sm: { option: { px: "2", py: "1" } },
+      md: { option: { px: "2", py: "2" } },
+      lg: { option: { px: "3", py: "2.5" } }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var optionHighlightedStyle = chunkRU6JG3FS_cjs.css({ bg: "bg.subtle" });
+var optionSelectedStyle = chunkRU6JG3FS_cjs.css({ fontWeight: "medium" });
+var autocompleteItemRecipe = chunk5QPM5LUS_cjs.sva({
+  slots: ["root", "icon", "text"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      minW: 0
+    },
+    icon: {
+      display: "inline-flex",
+      flexShrink: 0,
+      color: "fg.muted"
+    },
+    text: {
+      display: "flex",
+      flexDirection: "column",
+      minW: 0
+    }
+  },
+  variants: {
+    isDisabled: {
+      true: { root: { opacity: 0.55 } },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    isDisabled: false
+  }
+});
+function AutocompleteInputItem(props) {
+  if (chunkQAO6QMNQ_cjs.isReactNode(props.item.element)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.item.element });
   }
+  const {
+    className,
+    "data-testid": dataTestId,
+    description,
+    icon,
+    isDisabled = false,
+    item,
+    ref,
+    style
+  } = props;
+  const classes = autocompleteItemRecipe({ isDisabled });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: chunkSPDVNY2Z_cjs.cx(
-        styles.root,
-        isDisabled ? styles.disabled : void 0,
-        className
-      ),
+      className: chunkSPDVNY2Z_cjs.cx(classes.root, className),
       "data-testid": dataTestId,
       ref,
       style,
       children: [
-        icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "secondary", icon, size: "sm" }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.text, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkJMNH45Q3_cjs.Text, { as: "span", color: "inherit", type: "label", children: item.label }),
-          description != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkJMNH45Q3_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: description }) : null
+        icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "secondary", icon, size: "sm" }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classes.text, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Text, { as: "span", color: "inherit", type: "label", children: item.label }),
+          chunkQAO6QMNQ_cjs.isReactNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: description }) : null
         ] })
       ]
     }
   );
 }
 AutocompleteInputItem.displayName = "AutocompleteInputItem";
-var styles2 = {
+var styles = {
   input: chunkRU6JG3FS_cjs.css({
     display: "block",
     flex: 1,
@@ -85,64 +165,6 @@ var styles2 = {
     outline: "none",
     _placeholder: { color: "fg.muted" },
     _disabled: { cursor: "not-allowed" }
-  }),
-  menu: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.5",
-    maxH: "80",
-    overflowY: "auto",
-    p: "1"
-  }),
-  option: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "2",
-    w: "full",
-    borderWidth: 0,
-    borderRadius: "md",
-    bg: "transparent",
-    color: "fg",
-    cursor: "pointer",
-    fontFamily: "body",
-    textAlign: "start",
-    _hover: { bg: "bg.subtle" },
-    _focusVisible: {
-      outlineWidth: "focus",
-      outlineStyle: "solid",
-      outlineColor: "primary",
-      outlineOffset: "focusOffsetTight"
-    }
-  }),
-  optionHighlighted: chunkRU6JG3FS_cjs.css({ bg: "bg.subtle" }),
-  optionSelected: chunkRU6JG3FS_cjs.css({ fontWeight: "medium" }),
-  optionSize: {
-    sm: chunkRU6JG3FS_cjs.css({ px: "2", py: "1" }),
-    md: chunkRU6JG3FS_cjs.css({ px: "2", py: "2" }),
-    lg: chunkRU6JG3FS_cjs.css({ px: "3", py: "2.5" })
-  },
-  check: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    flexShrink: 0,
-    color: "primary"
-  }),
-  loading: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "1",
-    p: "2",
-    color: "fg.muted",
-    "& > svg": {
-      animation: "spin 0.8s linear infinite"
-    },
-    "@media (prefers-reduced-motion: reduce)": {
-      "& > svg": { animation: "none" }
-    }
-  }),
-  empty: chunkRU6JG3FS_cjs.css({
-    p: "3",
-    textAlign: "center"
   })
 };
 function BaseAutocompleteInput({
@@ -152,16 +174,20 @@ function BaseAutocompleteInput({
   "data-testid": dataTestId,
   debounceMs = 150,
   emptySearchResultsText = "No results found",
+  errorText = "Something went wrong",
   hasAutoFocus = false,
   hasEntriesOnFocus = false,
+  hasReopenOnSelect = false,
   inputId,
   isDisabled = false,
+  isRequired = false,
   maxMenuItems = 10,
   onChange,
   onKeyDown,
   onOpenChange,
   onQueryChange,
   placeholder = "Search...",
+  query,
   ref,
   renderItem,
   searchSource,
@@ -176,13 +202,12 @@ function BaseAutocompleteInput({
   const fallbackAnchorRef = react.useRef(null);
   const timeoutRef = react.useRef(null);
   const generationRef = react.useRef(0);
-  const [query, setQuery] = react.useState("");
   const [results, setResults] = react.useState([]);
   const [highlightedIndex, setHighlightedIndex] = react.useState(-1);
   const [isLoading, setIsLoading] = react.useState(false);
   const [hasSearched, setHasSearched] = react.useState(false);
+  const [hasError, setHasError] = react.useState(false);
   const [isOpen, setIsOpen] = react.useState(false);
-  const pointerActiveRef = react.useRef(false);
   const selectingRef = react.useRef(false);
   const setOpen = react.useCallback(
     (isNextOpen) => {
@@ -196,15 +221,7 @@ function BaseAutocompleteInput({
     [onOpenChange, searchSource]
   );
   const showMenu = react.useCallback(() => {
-    if (pointerActiveRef.current) {
-      document.addEventListener(
-        "click",
-        () => requestAnimationFrame(() => setOpen(true)),
-        { once: true }
-      );
-    } else {
-      setOpen(true);
-    }
+    setOpen(true);
   }, [setOpen]);
   const runSearch = react.useCallback(
     async (nextQuery, kind) => {
@@ -212,6 +229,7 @@ function BaseAutocompleteInput({
       searchSource.cancel?.();
       setIsLoading(true);
       setHasSearched(true);
+      setHasError(false);
       try {
         const nextResults = kind === "bootstrap" ? await searchSource.bootstrap() : await searchSource.search(nextQuery);
         if (generationRef.current !== generation) {
@@ -229,7 +247,8 @@ function BaseAutocompleteInput({
         if (generationRef.current === generation) {
           setResults([]);
           setHighlightedIndex(-1);
-          setOpen(false);
+          setHasError(true);
+          showMenu();
         }
       } finally {
         if (generationRef.current === generation) {
@@ -241,8 +260,7 @@ function BaseAutocompleteInput({
   );
   const updateQuery = react.useCallback(
     (nextQuery) => {
-      setQuery(nextQuery);
-      onQueryChange?.(nextQuery);
+      onQueryChange(nextQuery);
       if (timeoutRef.current != null) {
         clearTimeout(timeoutRef.current);
       }
@@ -251,6 +269,7 @@ function BaseAutocompleteInput({
         searchSource.cancel?.();
         setResults([]);
         setHasSearched(false);
+        setHasError(false);
         setIsLoading(false);
         setOpen(false);
         return;
@@ -280,21 +299,30 @@ function BaseAutocompleteInput({
         clearTimeout(timeoutRef.current);
       }
       searchSource.cancel?.();
-      setQuery("");
+      onQueryChange("");
       setResults([]);
       setHasSearched(false);
+      setHasError(false);
       setIsLoading(false);
       onChange(item);
       selectingRef.current = true;
       inputRef.current?.focus();
       selectingRef.current = false;
-      if (hasEntriesOnFocus) {
+      if (hasReopenOnSelect && hasEntriesOnFocus) {
         void runSearch("", "bootstrap");
       } else {
         setOpen(false);
       }
     },
-    [hasEntriesOnFocus, onChange, runSearch, searchSource, setOpen]
+    [
+      hasEntriesOnFocus,
+      hasReopenOnSelect,
+      onChange,
+      onQueryChange,
+      runSearch,
+      searchSource,
+      setOpen
+    ]
   );
   react.useEffect(() => {
     return () => {
@@ -304,39 +332,42 @@ function BaseAutocompleteInput({
       searchSource.cancel?.();
     };
   }, [searchSource]);
+  const menuClasses = autocompleteMenuRecipe({ size });
   const menu = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "aria-label": "Search results",
-      className: styles2.menu,
+      className: menuClasses.menu,
       id: listboxId,
       role: "listbox",
-      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.loading, role: "status", children: [
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: menuClasses.loading, role: "status", children: [
         /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { icon: lucideReact.LoaderCircle, size: "sm" }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkJMNH45Q3_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: "Loading" })
-      ] }) : results.length === 0 && hasSearched ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.empty, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJMNH45Q3_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: emptySearchResultsText }) }) : results.map((item, index) => {
+        /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: "Loading" })
+      ] }) : hasError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: menuClasses.empty, role: "alert", children: /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: errorText }) }) : results.length === 0 && hasSearched ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: menuClasses.empty, children: /* @__PURE__ */ jsxRuntime.jsx(chunkQEFE4QBL_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: emptySearchResultsText }) }) : results.map((item, index) => {
         const isSelected = value?.id === item.id;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            "aria-selected": isSelected,
-            className: chunkSPDVNY2Z_cjs.cx(
-              styles2.option,
-              styles2.optionSize[size],
-              index === highlightedIndex ? styles2.optionHighlighted : void 0,
-              isSelected ? styles2.optionSelected : void 0
-            ),
-            id: `${listboxId}-option-${index}`,
-            onClick: () => selectItem(item),
-            onMouseEnter: () => setHighlightedIndex(index),
-            role: "option",
-            type: "button",
-            children: [
-              renderItem == null ? /* @__PURE__ */ jsxRuntime.jsx(AutocompleteInputItem, { item }) : renderItem(item),
-              isSelected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.check, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "accent", icon: lucideReact.Check, size: "sm" }) }) : null
-            ]
-          },
-          item.id
+        return (
+          // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events -- keyboard navigation is handled by the combobox input, not individual options
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "aria-selected": isSelected,
+              className: chunkSPDVNY2Z_cjs.cx(
+                menuClasses.option,
+                index === highlightedIndex ? optionHighlightedStyle : void 0,
+                isSelected ? optionSelectedStyle : void 0
+              ),
+              id: `${listboxId}-option-${index}`,
+              onClick: () => selectItem(item),
+              onMouseEnter: () => setHighlightedIndex(index),
+              role: "option",
+              tabIndex: -1,
+              children: [
+                renderItem == null ? /* @__PURE__ */ jsxRuntime.jsx(AutocompleteInputItem, { item }) : renderItem(item),
+                isSelected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: menuClasses.check, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "accent", icon: lucideReact.Check, size: "sm" }) }) : null
+              ]
+            },
+            item.id
+          )
         );
       })
     }
@@ -350,19 +381,29 @@ function BaseAutocompleteInput({
         "aria-controls": listboxId,
         "aria-describedby": ariaDescribedBy,
         "aria-expanded": isOpen,
+        "aria-required": isRequired || void 0,
         autoComplete: "off",
         autoFocus: hasAutoFocus,
-        className: chunkSPDVNY2Z_cjs.cx(styles2.input, className),
+        className: chunkSPDVNY2Z_cjs.cx(styles.input, className),
         "data-autofocus": hasAutoFocus || void 0,
         "data-testid": dataTestId,
         disabled: isDisabled,
         id: resolvedInputId,
+        onBlur: () => {
+          requestAnimationFrame(() => {
+            if (!inputRef.current?.contains(document.activeElement) && !document.activeElement?.closest('[role="listbox"]')) {
+              setOpen(false);
+            }
+          });
+        },
         onChange: (event) => updateQuery(event.target.value),
         onFocus: () => {
           if (selectingRef.current) {
             return;
           }
-          if (hasEntriesOnFocus && query === "" && results.length === 0) {
+          if (query !== "" && results.length === 0) {
+            void runSearch(query, "search");
+          } else if (hasEntriesOnFocus && query === "" && results.length === 0) {
             void runSearch("", "bootstrap");
           } else if (results.length > 0) {
             showMenu();
@@ -399,16 +440,6 @@ function BaseAutocompleteInput({
             setOpen(false);
           }
         },
-        onPointerDown: () => {
-          pointerActiveRef.current = true;
-          document.addEventListener(
-            "click",
-            () => {
-              pointerActiveRef.current = false;
-            },
-            { once: true }
-          );
-        },
         placeholder,
         ref: chunk6SHL7FYO_cjs.mergeRefs(ref, inputRef, fallbackAnchorRef),
         role: "combobox",
@@ -417,14 +448,15 @@ function BaseAutocompleteInput({
         value: query
       }
     ),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkYXYD5HKL_cjs.Spinner, { size: "sm" }) : null,
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkKFDHP4WP_cjs.Spinner, { size: "sm" }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkBDBHHJGN_cjs.Popover,
+      chunkW3KMDQKP_cjs.Popover,
       {
         anchorRef: anchorRef ?? fallbackAnchorRef,
         content: menu,
         hasAutoFocus: false,
         hasCloseButton: false,
+        hasLightDismiss: false,
         isOpen,
         onOpenChange: setOpen
       }
@@ -432,7 +464,7 @@ function BaseAutocompleteInput({
   ] });
 }
 BaseAutocompleteInput.displayName = "BaseAutocompleteInput";
-var styles3 = {
+var styles2 = {
   wrapper: chunkRU6JG3FS_cjs.css({
     cursor: "text",
     flexWrap: "wrap"
@@ -458,6 +490,7 @@ function AutocompleteInput({
   debounceMs,
   description,
   emptySearchResultsText,
+  errorText,
   hasAutoFocus = false,
   hasClear = true,
   hasEntriesOnFocus = false,
@@ -483,20 +516,38 @@ function AutocompleteInput({
   value
 }) {
   const inputId = react.useId();
-  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const descriptionID = chunkQAO6QMNQ_cjs.isReactNode(description) ? `${inputId}-description` : void 0;
   const statusMessageID = chunk2P6D43V2_cjs.getStatusMessageID(inputId, status);
   const describedBy = chunk2P6D43V2_cjs.getDescribedBy(descriptionID, statusMessageID);
   const wrapperRef = react.useRef(null);
   const inputRef = react.useRef(null);
   const [isEditing, setIsEditing] = react.useState(false);
+  const [queryValue, setQueryValue] = react.useState("");
   const showTag = value != null && !isEditing;
   const fieldStatus = react.useMemo(
     () => status == null ? void 0 : { ...status, messageID: statusMessageID },
     [status, statusMessageID]
   );
-  const necessity = chunkKFEXS6OK_cjs.getNecessity(isOptional, isRequired);
+  const necessity = chunkBAPCHFNX_cjs.getNecessity(isOptional, isRequired);
+  const startEditing = react.useCallback(
+    (seedQuery) => {
+      if (isDisabled) {
+        return;
+      }
+      setIsEditing(true);
+      setQueryValue(seedQuery);
+      requestAnimationFrame(() => {
+        const input = inputRef.current;
+        if (input != null) {
+          input.focus();
+          input.setSelectionRange(seedQuery.length, seedQuery.length);
+        }
+      });
+    },
+    [isDisabled]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkKFEXS6OK_cjs.Field,
+    chunkBAPCHFNX_cjs.Field,
     {
       className,
       description,
@@ -520,22 +571,24 @@ function AutocompleteInput({
               status: status?.type,
               isDisabled
             }),
-            styles3.wrapper
+            styles2.wrapper
           ),
           "data-testid": dataTestId,
+          onClick: () => {
+            if (showTag) {
+              startEditing(value.label);
+            }
+          },
           ref: wrapperRef,
           children: [
             startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
             showTag ? /* @__PURE__ */ jsxRuntime.jsx(
-              chunkMMST4VXH_cjs.Tag,
+              chunkU5GTHA44_cjs.Tag,
               {
-                className: styles3.tag,
+                className: styles2.tag,
                 isDisabled,
                 label: value.label,
-                onClick: () => {
-                  setIsEditing(true);
-                  requestAnimationFrame(() => inputRef.current?.focus());
-                },
+                onClick: () => startEditing(value.label),
                 size
               }
             ) : null,
@@ -544,21 +597,28 @@ function AutocompleteInput({
               {
                 anchorRef: wrapperRef,
                 ariaDescribedBy: describedBy,
-                className: showTag ? styles3.inputHidden : void 0,
+                className: showTag ? styles2.inputHidden : void 0,
                 debounceMs,
                 emptySearchResultsText,
+                errorText,
                 hasAutoFocus,
                 hasEntriesOnFocus,
                 inputId,
                 isDisabled,
+                isRequired,
                 maxMenuItems,
                 onChange: (item) => {
                   setIsEditing(false);
+                  setQueryValue("");
                   onChange(item);
                 },
                 onOpenChange,
-                onQueryChange,
+                onQueryChange: (nextQuery) => {
+                  setQueryValue(nextQuery);
+                  onQueryChange?.(nextQuery);
+                },
                 placeholder: showTag ? void 0 : placeholder,
+                query: queryValue,
                 ref: inputRef,
                 renderItem,
                 searchSource,
@@ -567,9 +627,9 @@ function AutocompleteInput({
               }
             ),
             hasClear && value != null && !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
-              chunkO3T7Z6RH_cjs.Button,
+              chunkBRB52QFV_cjs.Button,
               {
-                className: styles3.clearButton,
+                className: styles2.clearButton,
                 icon: lucideReact.X,
                 isIconOnly: true,
                 label: `Clear ${label}`,
@@ -614,5 +674,5 @@ exports.AutocompleteInput = AutocompleteInput;
 exports.AutocompleteInputItem = AutocompleteInputItem;
 exports.BaseAutocompleteInput = BaseAutocompleteInput;
 exports.createStaticSource = createStaticSource;
-//# sourceMappingURL=chunk-2VIJC4NW.cjs.map
-//# sourceMappingURL=chunk-2VIJC4NW.cjs.map
+//# sourceMappingURL=chunk-QRKRVCA3.cjs.map
+//# sourceMappingURL=chunk-QRKRVCA3.cjs.map