silver-ui 0.2.0 → 0.3.1

package/dist/{chunk-WE2AXMPB.js → chunk-HNROO7CR.js}

@@ -1,74 +1,154 @@
-import { Tag } from './chunk-SSOHJEHS.js';
+import { Tag } from './chunk-M3IKL2VG.js';
 import { inputStyles, inputRecipe } from './chunk-3M23WX6K.js';
-import { getNecessity, Field } from './chunk-K6CQ45C2.js';
+import { getNecessity, Field } from './chunk-ASJ5CBCR.js';
 import { getStatusMessageID, getDescribedBy } from './chunk-WOIWI2UO.js';
-import { Popover } from './chunk-QADMIAYK.js';
-import { Button } from './chunk-RRNT32KY.js';
-import { Spinner } from './chunk-S54CKWKV.js';
-import { Text } from './chunk-J2FCNWYM.js';
+import { Popover } from './chunk-VEUZ5DZR.js';
+import { Button } from './chunk-RVENUWRD.js';
+import { Spinner } from './chunk-DSB4Q3AS.js';
+import { Text } from './chunk-76B2VLID.js';
 import { mergeRefs } from './chunk-SGLIDI6R.js';
+import { isReactNode } from './chunk-2PSZAWLC.js';
 import { Icon } from './chunk-7T3SWOY7.js';
+import { sva } from './chunk-EHCAF6D3.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { css } from './chunk-OD4DHHZH.js';
 import { LoaderCircle, Check, X } from 'lucide-react';
 import { useId, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-var styles = {
-  root: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    minW: 0
-  }),
-  icon: css({
-    display: "inline-flex",
-    flexShrink: 0,
-    color: "fg.muted"
-  }),
-  text: css({
-    display: "flex",
-    flexDirection: "column",
-    minW: 0
-  }),
-  disabled: css({ opacity: 0.55 })
-};
-function AutocompleteInputItem({
-  className,
-  "data-testid": dataTestId,
-  description,
-  icon,
-  item,
-  isDisabled = false,
-  ref,
-  style
-}) {
-  if (item.element != null) {
-    return /* @__PURE__ */ jsx(Fragment, { children: item.element });
+// src/components/AutocompleteInput/AutocompleteInput.recipe.ts
+var autocompleteMenuRecipe = 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 = css({ bg: "bg.subtle" });
+var optionSelectedStyle = css({ fontWeight: "medium" });
+var autocompleteItemRecipe = 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 (isReactNode(props.item.element)) {
+    return /* @__PURE__ */ jsx(Fragment, { children: props.item.element });
   }
+  const {
+    className,
+    "data-testid": dataTestId,
+    description,
+    icon,
+    isDisabled = false,
+    item,
+    ref,
+    style
+  } = props;
+  const classes = autocompleteItemRecipe({ isDisabled });
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(
-        styles.root,
-        isDisabled ? styles.disabled : void 0,
-        className
-      ),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       ref,
       style,
       children: [
-        icon != null ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon, size: "sm" }) }) : null,
-        /* @__PURE__ */ jsxs("span", { className: styles.text, children: [
+        icon != null ? /* @__PURE__ */ jsx("span", { className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon, size: "sm" }) }) : null,
+        /* @__PURE__ */ jsxs("span", { className: classes.text, children: [
           /* @__PURE__ */ jsx(Text, { as: "span", color: "inherit", type: "label", children: item.label }),
-          description != null ? /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", type: "supporting", children: description }) : null
+          isReactNode(description) ? /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", type: "supporting", children: description }) : null
         ] })
       ]
     }
   );
 }
 AutocompleteInputItem.displayName = "AutocompleteInputItem";
-var styles2 = {
+var styles = {
   input: css({
     display: "block",
     flex: 1,
@@ -83,64 +163,6 @@ var styles2 = {
     outline: "none",
     _placeholder: { color: "fg.muted" },
     _disabled: { cursor: "not-allowed" }
-  }),
-  menu: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.5",
-    maxH: "80",
-    overflowY: "auto",
-    p: "1"
-  }),
-  option: 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: css({ bg: "bg.subtle" }),
-  optionSelected: css({ fontWeight: "medium" }),
-  optionSize: {
-    sm: css({ px: "2", py: "1" }),
-    md: css({ px: "2", py: "2" }),
-    lg: css({ px: "3", py: "2.5" })
-  },
-  check: css({
-    display: "inline-flex",
-    flexShrink: 0,
-    color: "primary"
-  }),
-  loading: 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: css({
-    p: "3",
-    textAlign: "center"
   })
 };
 function BaseAutocompleteInput({
@@ -150,16 +172,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,
@@ -174,13 +200,12 @@ function BaseAutocompleteInput({
   const fallbackAnchorRef = useRef(null);
   const timeoutRef = useRef(null);
   const generationRef = useRef(0);
-  const [query, setQuery] = useState("");
   const [results, setResults] = useState([]);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const [isLoading, setIsLoading] = useState(false);
   const [hasSearched, setHasSearched] = useState(false);
+  const [hasError, setHasError] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
-  const pointerActiveRef = useRef(false);
   const selectingRef = useRef(false);
   const setOpen = useCallback(
     (isNextOpen) => {
@@ -194,15 +219,7 @@ function BaseAutocompleteInput({
     [onOpenChange, searchSource]
   );
   const showMenu = useCallback(() => {
-    if (pointerActiveRef.current) {
-      document.addEventListener(
-        "click",
-        () => requestAnimationFrame(() => setOpen(true)),
-        { once: true }
-      );
-    } else {
-      setOpen(true);
-    }
+    setOpen(true);
   }, [setOpen]);
   const runSearch = useCallback(
     async (nextQuery, kind) => {
@@ -210,6 +227,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) {
@@ -227,7 +245,8 @@ function BaseAutocompleteInput({
         if (generationRef.current === generation) {
           setResults([]);
           setHighlightedIndex(-1);
-          setOpen(false);
+          setHasError(true);
+          showMenu();
         }
       } finally {
         if (generationRef.current === generation) {
@@ -239,8 +258,7 @@ function BaseAutocompleteInput({
   );
   const updateQuery = useCallback(
     (nextQuery) => {
-      setQuery(nextQuery);
-      onQueryChange?.(nextQuery);
+      onQueryChange(nextQuery);
       if (timeoutRef.current != null) {
         clearTimeout(timeoutRef.current);
       }
@@ -249,6 +267,7 @@ function BaseAutocompleteInput({
         searchSource.cancel?.();
         setResults([]);
         setHasSearched(false);
+        setHasError(false);
         setIsLoading(false);
         setOpen(false);
         return;
@@ -278,21 +297,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
+    ]
   );
   useEffect(() => {
     return () => {
@@ -302,39 +330,42 @@ function BaseAutocompleteInput({
       searchSource.cancel?.();
     };
   }, [searchSource]);
+  const menuClasses = autocompleteMenuRecipe({ size });
   const menu = /* @__PURE__ */ jsx(
     "div",
     {
       "aria-label": "Search results",
-      className: styles2.menu,
+      className: menuClasses.menu,
       id: listboxId,
       role: "listbox",
-      children: isLoading ? /* @__PURE__ */ jsxs("div", { className: styles2.loading, role: "status", children: [
+      children: isLoading ? /* @__PURE__ */ jsxs("div", { className: menuClasses.loading, role: "status", children: [
         /* @__PURE__ */ jsx(Icon, { icon: LoaderCircle, size: "sm" }),
         /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", type: "supporting", children: "Loading" })
-      ] }) : results.length === 0 && hasSearched ? /* @__PURE__ */ jsx("div", { className: styles2.empty, children: /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", type: "supporting", children: emptySearchResultsText }) }) : results.map((item, index) => {
+      ] }) : hasError ? /* @__PURE__ */ jsx("div", { className: menuClasses.empty, role: "alert", children: /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", type: "supporting", children: errorText }) }) : results.length === 0 && hasSearched ? /* @__PURE__ */ jsx("div", { className: menuClasses.empty, children: /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", type: "supporting", children: emptySearchResultsText }) }) : results.map((item, index) => {
         const isSelected = value?.id === item.id;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            "aria-selected": isSelected,
-            className: 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__ */ jsx(AutocompleteInputItem, { item }) : renderItem(item),
-              isSelected ? /* @__PURE__ */ jsx("span", { className: styles2.check, children: /* @__PURE__ */ jsx(Icon, { color: "accent", icon: 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__ */ jsxs(
+            "div",
+            {
+              "aria-selected": isSelected,
+              className: 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__ */ jsx(AutocompleteInputItem, { item }) : renderItem(item),
+                isSelected ? /* @__PURE__ */ jsx("span", { className: menuClasses.check, children: /* @__PURE__ */ jsx(Icon, { color: "accent", icon: Check, size: "sm" }) }) : null
+              ]
+            },
+            item.id
+          )
         );
       })
     }
@@ -348,19 +379,29 @@ function BaseAutocompleteInput({
         "aria-controls": listboxId,
         "aria-describedby": ariaDescribedBy,
         "aria-expanded": isOpen,
+        "aria-required": isRequired || void 0,
         autoComplete: "off",
         autoFocus: hasAutoFocus,
-        className: cx(styles2.input, className),
+        className: 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();
@@ -397,16 +438,6 @@ function BaseAutocompleteInput({
             setOpen(false);
           }
         },
-        onPointerDown: () => {
-          pointerActiveRef.current = true;
-          document.addEventListener(
-            "click",
-            () => {
-              pointerActiveRef.current = false;
-            },
-            { once: true }
-          );
-        },
         placeholder,
         ref: mergeRefs(ref, inputRef, fallbackAnchorRef),
         role: "combobox",
@@ -423,6 +454,7 @@ function BaseAutocompleteInput({
         content: menu,
         hasAutoFocus: false,
         hasCloseButton: false,
+        hasLightDismiss: false,
         isOpen,
         onOpenChange: setOpen
       }
@@ -430,7 +462,7 @@ function BaseAutocompleteInput({
   ] });
 }
 BaseAutocompleteInput.displayName = "BaseAutocompleteInput";
-var styles3 = {
+var styles2 = {
   wrapper: css({
     cursor: "text",
     flexWrap: "wrap"
@@ -456,6 +488,7 @@ function AutocompleteInput({
   debounceMs,
   description,
   emptySearchResultsText,
+  errorText,
   hasAutoFocus = false,
   hasClear = true,
   hasEntriesOnFocus = false,
@@ -481,18 +514,36 @@ function AutocompleteInput({
   value
 }) {
   const inputId = useId();
-  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const descriptionID = isReactNode(description) ? `${inputId}-description` : void 0;
   const statusMessageID = getStatusMessageID(inputId, status);
   const describedBy = getDescribedBy(descriptionID, statusMessageID);
   const wrapperRef = useRef(null);
   const inputRef = useRef(null);
   const [isEditing, setIsEditing] = useState(false);
+  const [queryValue, setQueryValue] = useState("");
   const showTag = value != null && !isEditing;
   const fieldStatus = useMemo(
     () => status == null ? void 0 : { ...status, messageID: statusMessageID },
     [status, statusMessageID]
   );
   const necessity = getNecessity(isOptional, isRequired);
+  const startEditing = 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__ */ jsx(
     Field,
     {
@@ -518,22 +569,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__ */ jsx("span", { className: inputStyles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
             showTag ? /* @__PURE__ */ jsx(
               Tag,
               {
-                className: styles3.tag,
+                className: styles2.tag,
                 isDisabled,
                 label: value.label,
-                onClick: () => {
-                  setIsEditing(true);
-                  requestAnimationFrame(() => inputRef.current?.focus());
-                },
+                onClick: () => startEditing(value.label),
                 size
               }
             ) : null,
@@ -542,21 +595,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,7 +627,7 @@ function AutocompleteInput({
             hasClear && value != null && !isDisabled ? /* @__PURE__ */ jsx(
               Button,
               {
-                className: styles3.clearButton,
+                className: styles2.clearButton,
                 icon: X,
                 isIconOnly: true,
                 label: `Clear ${label}`,
@@ -609,5 +669,5 @@ function createStaticSource(items, options) {
 }
 
 export { AutocompleteInput, AutocompleteInputItem, BaseAutocompleteInput, createStaticSource };
-//# sourceMappingURL=chunk-WE2AXMPB.js.map
-//# sourceMappingURL=chunk-WE2AXMPB.js.map
+//# sourceMappingURL=chunk-HNROO7CR.js.map
+//# sourceMappingURL=chunk-HNROO7CR.js.map