@yamada-ui/autocomplete 0.1.0

package/dist/index.js

@@ -0,0 +1,1661 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Autocomplete: () => Autocomplete,
+  AutocompleteCreate: () => AutocompleteCreate,
+  AutocompleteEmpty: () => AutocompleteEmpty,
+  AutocompleteOption: () => AutocompleteOption,
+  AutocompleteOptionGroup: () => AutocompleteOptionGroup,
+  MultiAutocomplete: () => MultiAutocomplete
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/autocomplete.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_popover2 = require("@yamada-ui/popover");
+var import_utils4 = require("@yamada-ui/utils");
+
+// src/autocomplete-icon.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_use_clickable = require("@yamada-ui/use-clickable");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/use-autocomplete.tsx
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_use_outside_click = require("@yamada-ui/use-outside-click");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var kanaMap = {
+  \uFF76\uFF9E: "\u30AC",
+  \uFF77\uFF9E: "\u30AE",
+  \uFF78\uFF9E: "\u30B0",
+  \uFF79\uFF9E: "\u30B2",
+  \uFF7A\uFF9E: "\u30B4",
+  \uFF7B\uFF9E: "\u30B6",
+  \uFF7C\uFF9E: "\u30B8",
+  \uFF7D\uFF9E: "\u30BA",
+  \uFF7E\uFF9E: "\u30BC",
+  \uFF7F\uFF9E: "\u30BE",
+  \uFF80\uFF9E: "\u30C0",
+  \uFF81\uFF9E: "\u30C2",
+  \uFF82\uFF9E: "\u30C5",
+  \uFF83\uFF9E: "\u30C7",
+  \uFF84\uFF9E: "\u30C9",
+  \uFF8A\uFF9E: "\u30D0",
+  \uFF8B\uFF9E: "\u30D3",
+  \uFF8C\uFF9E: "\u30D6",
+  \uFF8D\uFF9E: "\u30D9",
+  \uFF8E\uFF9E: "\u30DC",
+  \uFF8A\uFF9F: "\u30D1",
+  \uFF8B\uFF9F: "\u30D4",
+  \uFF8C\uFF9F: "\u30D7",
+  \uFF8D\uFF9F: "\u30DA",
+  \uFF8E\uFF9F: "\u30DD",
+  \uFF73\uFF9E: "\u30F4",
+  \uFF9C\uFF9E: "\u30F7",
+  \uFF66\uFF9E: "\u30FA",
+  \uFF71: "\u30A2",
+  \uFF72: "\u30A4",
+  \uFF73: "\u30A6",
+  \uFF74: "\u30A8",
+  \uFF75: "\u30AA",
+  \uFF76: "\u30AB",
+  \uFF77: "\u30AD",
+  \uFF78: "\u30AF",
+  \uFF79: "\u30B1",
+  \uFF7A: "\u30B3",
+  \uFF7B: "\u30B5",
+  \uFF7C: "\u30B7",
+  \uFF7D: "\u30B9",
+  \uFF7E: "\u30BB",
+  \uFF7F: "\u30BD",
+  \uFF80: "\u30BF",
+  \uFF81: "\u30C1",
+  \uFF82: "\u30C4",
+  \uFF83: "\u30C6",
+  \uFF84: "\u30C8",
+  \uFF85: "\u30CA",
+  \uFF86: "\u30CB",
+  \uFF87: "\u30CC",
+  \uFF88: "\u30CD",
+  \uFF89: "\u30CE",
+  \uFF8A: "\u30CF",
+  \uFF8B: "\u30D2",
+  \uFF8C: "\u30D5",
+  \uFF8D: "\u30D8",
+  \uFF8E: "\u30DB",
+  \uFF8F: "\u30DE",
+  \uFF90: "\u30DF",
+  \uFF91: "\u30E0",
+  \uFF92: "\u30E1",
+  \uFF93: "\u30E2",
+  \uFF94: "\u30E4",
+  \uFF95: "\u30E6",
+  \uFF96: "\u30E8",
+  \uFF97: "\u30E9",
+  \uFF98: "\u30EA",
+  \uFF99: "\u30EB",
+  \uFF9A: "\u30EC",
+  \uFF9B: "\u30ED",
+  \uFF9C: "\u30EF",
+  \uFF66: "\u30F2",
+  \uFF9D: "\u30F3",
+  \uFF67: "\u30A1",
+  \uFF68: "\u30A3",
+  \uFF69: "\u30A5",
+  \uFF6A: "\u30A7",
+  \uFF6B: "\u30A9",
+  \uFF6F: "\u30C3",
+  \uFF6C: "\u30E3",
+  \uFF6D: "\u30E5",
+  \uFF6E: "\u30E7",
+  "\uFF61": "\u3002",
+  "\uFF64": "\u3001",
+  \uFF70: "\u30FC",
+  "\uFF62": "\u300C",
+  "\uFF63": "\u300D",
+  "\uFF65": "\u30FB"
+};
+var defaultFormat = (value) => {
+  value = value.replace(/[！-～]/g, (v) => String.fromCharCode(v.charCodeAt(0) - 65248));
+  const reg = new RegExp("(" + Object.keys(kanaMap).join("|") + ")", "g");
+  value = value.replace(reg, (v) => kanaMap[v]).replace(/ﾞ/g, "\u309B").replace(/ﾟ/g, "\u309C");
+  value = value.toUpperCase();
+  return value;
+};
+var flattenData = (data) => {
+  const filterData = (data2) => data2.map((data3) => {
+    const { value, isDisabled, isFocusable } = data3;
+    const trulyDisabled = !!isDisabled && !isFocusable;
+    const isMulti = (0, import_utils.isArray)(value);
+    if (trulyDisabled)
+      return;
+    if (!isMulti) {
+      return data3;
+    } else {
+      return filterData(value);
+    }
+  }).filter(Boolean);
+  return filterData(data).flat(Infinity);
+};
+var isTargetOption = (target) => {
+  var _a;
+  return (0, import_utils.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("autocomplete-item"));
+};
+var {
+  DescendantsContextProvider: AutocompleteDescendantsContextProvider,
+  useDescendantsContext: useAutocompleteDescendantsContext,
+  useDescendants: useAutocompleteDescendants,
+  useDescendant: useAutocompleteDescendant
+} = (0, import_use_descendant.createDescendant)();
+var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
+  name: "AutocompleteContext",
+  errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in "<Autocomplete />" or "<MultiAutocomplete />"`
+});
+var useAutocomplete = ({
+  defaultIsOpen,
+  closeOnSelect = true,
+  omitSelectedValues = false,
+  maxSelectedValues,
+  closeOnBlur = true,
+  closeOnEsc = true,
+  createOption = false,
+  createOrder = "first",
+  createSecondOrder = "first",
+  emptyMessage = "No results found",
+  format = defaultFormat,
+  placement = "bottom-start",
+  duration = 0.2,
+  optionProps,
+  placeholder,
+  children,
+  ...rest
+}) => {
+  rest = (0, import_form_control.useFormControlProps)(rest);
+  const { id } = rest;
+  const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
+  const [containerProps, inputProps] = (0, import_utils.splitObject)(
+    (0, import_utils.omitObject)(rest, ["id", "value", "onChange", "month", "onChangeMonth"]),
+    import_core.layoutStylesProperties
+  );
+  const descendants = useAutocompleteDescendants();
+  const containerRef = (0, import_react.useRef)(null);
+  const listRef = (0, import_react.useRef)(null);
+  const inputRef = (0, import_react.useRef)(null);
+  const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
+  const isComposition = (0, import_react.useRef)(false);
+  const [data, setData] = (0, import_react.useState)(rest.data);
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: rest.value,
+    defaultValue: rest.defaultValue,
+    onChange: rest.onChange
+  });
+  const [displayValue, setDisplayValue] = (0, import_react.useState)(void 0);
+  const [inputValue, setInputValue] = (0, import_react.useState)("");
+  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+  const [isAllSelected, setIsAllSelected] = (0, import_react.useState)(false);
+  const [isHit, setIsHit] = (0, import_react.useState)(true);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(defaultIsOpen != null ? defaultIsOpen : false);
+  const isFocused = focusedIndex > -1;
+  const isCreate = focusedIndex === -2 && createOption;
+  const isMulti = (0, import_utils.isArray)(value);
+  const isEmptyValue = !isMulti ? !value : !value.length;
+  if (createOption && !(0, import_utils.isUndefined)(children)) {
+    console.warn(
+      `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: ${!isMulti ? "Autocomplete" : "MultiAutocomplete"} internally prefers 'children'. If 'createOption' is true, it will not be reflected correctly. If want to reflect, please set 'data' in props.`
+    );
+  }
+  const selectedValues = descendants.enabledValues(
+    ({ node }) => {
+      var _a;
+      return isMulti && value.includes((_a = node.dataset.value) != null ? _a : "");
+    }
+  );
+  const selectedIndexes = selectedValues.map(({ index }) => index);
+  const enabledValues = descendants.enabledValues(
+    ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
+  );
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  const computedChildren = data == null ? void 0 : data.map(({ label, value: value2, ...props }, i) => {
+    if (!(0, import_utils.isArray)(value2)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOption, { value: value2, ...props, children: label }, i);
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOptionGroup, { label, ...props, children: value2.map(
+        ({ label: label2, value: value3, ...props2 }, i2) => !(0, import_utils.isArray)(value3) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutocompleteOption, { value: value3, ...props2, children: label2 }, i2) : null
+      ) }, i);
+    }
+  });
+  const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
+  const onOpen = (0, import_react.useCallback)(() => {
+    var _a;
+    if (formControlProps.disabled || formControlProps.readOnly)
+      return;
+    if (!createOption && (isEmpty || isAllSelected))
+      return;
+    setIsOpen(true);
+    if (inputRef.current)
+      inputRef.current.focus();
+    (_a = rest.onOpen) == null ? void 0 : _a.call(rest);
+  }, [createOption, formControlProps, isAllSelected, isEmpty, rest]);
+  const onClose = (0, import_react.useCallback)(() => {
+    var _a;
+    setIsOpen(false);
+    (_a = rest.onClose) == null ? void 0 : _a.call(rest);
+  }, [rest]);
+  const onFocusFirst = (0, import_react.useCallback)(() => {
+    const id2 = setTimeout(() => {
+      if (isEmpty || isAllSelected)
+        return;
+      const first = descendants.enabledfirstValue(({ node }) => "target" in node.dataset);
+      if (!first)
+        return;
+      if (!isMulti || !omitSelectedValues) {
+        setFocusedIndex(first.index);
+      } else {
+        if (selectedIndexes.includes(first.index)) {
+          const enabledFirst = enabledValues[0];
+          setFocusedIndex(enabledFirst.index);
+        } else {
+          setFocusedIndex(first.index);
+        }
+      }
+    });
+    timeoutIds.current.add(id2);
+  }, [
+    descendants,
+    enabledValues,
+    isAllSelected,
+    isEmpty,
+    isMulti,
+    omitSelectedValues,
+    selectedIndexes
+  ]);
+  const onFocusLast = (0, import_react.useCallback)(() => {
+    const id2 = setTimeout(() => {
+      if (isEmpty || isAllSelected)
+        return;
+      const last = descendants.enabledlastValue(({ node }) => "target" in node.dataset);
+      if (!last)
+        return;
+      if (!isMulti || !omitSelectedValues) {
+        setFocusedIndex(last.index);
+      } else {
+        if (selectedIndexes.includes(last.index)) {
+          const enabledlast = enabledValues.reverse()[0];
+          setFocusedIndex(enabledlast.index);
+        } else {
+          setFocusedIndex(last.index);
+        }
+      }
+    });
+    timeoutIds.current.add(id2);
+  }, [
+    descendants,
+    enabledValues,
+    isAllSelected,
+    isEmpty,
+    isMulti,
+    omitSelectedValues,
+    selectedIndexes
+  ]);
+  const onFocusSelected = (0, import_react.useCallback)(() => {
+    const id2 = setTimeout(() => {
+      const values = descendants.enabledValues();
+      const selected = values.find(
+        ({ node }) => {
+          var _a;
+          return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
+        }
+      );
+      if (selected)
+        setFocusedIndex(selected.index);
+    });
+    timeoutIds.current.add(id2);
+  }, [descendants, isMulti, value]);
+  const onFocusNext = (0, import_react.useCallback)(
+    (index = focusedIndex) => {
+      const id2 = setTimeout(() => {
+        var _a;
+        const next = descendants.enabledNextValue(index, ({ node }) => "target" in node.dataset);
+        if (!next)
+          return;
+        if (!isMulti || !omitSelectedValues) {
+          setFocusedIndex(next.index);
+        } else {
+          if (selectedIndexes.includes(next.index)) {
+            const enabledNext = (_a = enabledValues.find(({ index: index2 }) => next.index < index2)) != null ? _a : enabledValues[0];
+            setFocusedIndex(enabledNext.index);
+          } else {
+            setFocusedIndex(next.index);
+          }
+        }
+      });
+      timeoutIds.current.add(id2);
+    },
+    [descendants, enabledValues, focusedIndex, isMulti, omitSelectedValues, selectedIndexes]
+  );
+  const onFocusPrev = (0, import_react.useCallback)(
+    (index = focusedIndex) => {
+      const id2 = setTimeout(() => {
+        var _a;
+        const prev = descendants.enabledPrevValue(index, ({ node }) => "target" in node.dataset);
+        if (!prev)
+          return;
+        if (!isMulti || !omitSelectedValues) {
+          setFocusedIndex(prev.index);
+        } else {
+          if (selectedIndexes.includes(prev.index)) {
+            const enabledPrev = (_a = enabledValues.reverse().find(({ index: index2 }) => index2 < prev.index)) != null ? _a : enabledValues[0];
+            setFocusedIndex(enabledPrev.index);
+          } else {
+            setFocusedIndex(prev.index);
+          }
+        }
+      });
+      timeoutIds.current.add(id2);
+    },
+    [descendants, enabledValues, focusedIndex, isMulti, omitSelectedValues, selectedIndexes]
+  );
+  const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
+  const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
+  const pickOptions = (0, import_react.useCallback)(
+    (value2) => {
+      const values = descendants.values();
+      let isHit2 = false;
+      let isFocused2 = false;
+      values.forEach(({ node, index }) => {
+        var _a;
+        if (format((_a = node.textContent) != null ? _a : "").includes(value2)) {
+          isHit2 = true;
+          const isDisabled = "disabled" in node.dataset;
+          node.dataset.target = "";
+          if (!isFocused2 && !isDisabled) {
+            isFocused2 = true;
+            setFocusedIndex(index);
+          }
+        } else {
+          delete node.dataset.target;
+        }
+      });
+      setIsHit(isHit2);
+    },
+    [descendants, format]
+  );
+  const rebirthOptions = (0, import_react.useCallback)(
+    (runFocus = true) => {
+      const values = descendants.values();
+      values.forEach(({ node }) => {
+        node.dataset.target = "";
+      });
+      if (runFocus)
+        onFocusFirst();
+      setIsHit(true);
+    },
+    [descendants, onFocusFirst]
+  );
+  const onChangeDisplayValue = (0, import_react.useCallback)(
+    (newValue, runOmit = true) => {
+      const enabledValues2 = descendants.enabledValues();
+      const selectedValues2 = enabledValues2.filter(({ node }) => node.dataset.value === newValue).map(({ node }) => {
+        var _a;
+        return (_a = node.textContent) != null ? _a : "";
+      });
+      setDisplayValue((prev) => {
+        if (!isMulti) {
+          return selectedValues2[0];
+        } else {
+          selectedValues2.forEach((selectedValue) => {
+            const isSelected = (0, import_utils.isArray)(prev) && prev.includes(selectedValue != null ? selectedValue : "");
+            if (!isSelected) {
+              prev = [...(0, import_utils.isArray)(prev) ? prev : [], selectedValue];
+            } else if (runOmit) {
+              prev = (0, import_utils.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
+            }
+          });
+          return prev;
+        }
+      });
+    },
+    [descendants, isMulti]
+  );
+  const onChange = (0, import_react.useCallback)(
+    (newValue) => {
+      setValue((prev) => {
+        if (!(0, import_utils.isArray)(prev)) {
+          return newValue;
+        } else {
+          const isSelected = prev.includes(newValue);
+          if (!isSelected) {
+            return [...prev, newValue];
+          } else {
+            return prev.filter((value2) => value2 !== newValue);
+          }
+        }
+      });
+      onChangeDisplayValue(newValue);
+      setInputValue("");
+      rebirthOptions(false);
+    },
+    [onChangeDisplayValue, rebirthOptions, setValue]
+  );
+  const onSelect = (0, import_react.useCallback)(() => {
+    var _a, _b;
+    let enabledValue = descendants.value(focusedIndex);
+    if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
+      enabledValue = void 0;
+    if (!enabledValue)
+      return;
+    const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
+    onChange(value2);
+    if (closeOnSelect)
+      onClose();
+    if (omitSelectedValues)
+      onFocusNext();
+  }, [closeOnSelect, descendants, focusedIndex, omitSelectedValues, onChange, onClose, onFocusNext]);
+  const onSearch = (0, import_react.useCallback)(
+    (ev) => {
+      var _a;
+      if (!isOpen)
+        onOpen();
+      (_a = rest.onSearch) == null ? void 0 : _a.call(rest, ev);
+      const value2 = ev.target.value;
+      const computedValue = format(value2);
+      if (computedValue) {
+        pickOptions(computedValue);
+      } else {
+        rebirthOptions();
+      }
+      setInputValue(value2);
+    },
+    [isOpen, onOpen, format, rest, pickOptions, rebirthOptions]
+  );
+  const onCompositionStart = (0, import_react.useCallback)(() => {
+    isComposition.current = true;
+  }, []);
+  const onCompositionEnd = (0, import_react.useCallback)(() => {
+    isComposition.current = false;
+  }, []);
+  const onCreate = (0, import_react.useCallback)(() => {
+    var _a;
+    if (!listRef.current)
+      return;
+    const newOption = { label: inputValue, value: inputValue };
+    let newData = [];
+    if (data)
+      newData = data;
+    if (createOrder === "first") {
+      newData = [newOption, ...newData];
+    } else if (createOrder === "last") {
+      newData = [...newData, newOption];
+    } else {
+      const i = newData.findIndex(({ label }) => label === createOrder);
+      if (i !== -1 && (0, import_utils.isArray)(newData[i].value)) {
+        if (createSecondOrder === "first") {
+          newData[i].value = [newOption, ...newData[i].value];
+        } else {
+          newData[i].value = [...newData[i].value, newOption];
+        }
+      } else {
+        console.warn(
+          `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: '${createOrder}' specified in createOrder does not exist in the option group.`
+        );
+      }
+    }
+    setData(newData);
+    onChange(inputValue);
+    rebirthOptions(false);
+    const index = flattenData(newData).findIndex(({ value: value2 }) => value2 === inputValue);
+    setFocusedIndex(index);
+    (_a = rest.onCreate) == null ? void 0 : _a.call(rest, newOption, newData);
+  }, [inputValue, data, createOrder, onChange, rebirthOptions, rest, createSecondOrder, isMulti]);
+  const onDelete = (0, import_react.useCallback)(() => {
+    if (!isMulti) {
+      onChange("");
+    } else {
+      onChange(value[value.length - 1]);
+    }
+  }, [isMulti, onChange, value]);
+  const onClear = (0, import_react.useCallback)(
+    (ev) => {
+      ev.stopPropagation();
+      setValue([]);
+      setDisplayValue(void 0);
+      setInputValue("");
+      rebirthOptions();
+      if (inputRef.current)
+        inputRef.current.focus();
+    },
+    [setDisplayValue, setInputValue, setValue, rebirthOptions, inputRef]
+  );
+  const onClick = (0, import_react.useCallback)(() => {
+    if (isOpen) {
+      if (inputRef.current)
+        inputRef.current.focus();
+    } else {
+      onOpen();
+      onFocusFirstOrSelected();
+    }
+  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  const onFocus = (0, import_react.useCallback)(() => {
+    if (isOpen)
+      return;
+    onOpen();
+    onFocusFirstOrSelected();
+  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  const onBlur = (0, import_react.useCallback)(
+    (ev) => {
+      const relatedTarget = (0, import_utils.getEventRelatedTarget)(ev);
+      if ((0, import_utils.isContains)(containerRef.current, relatedTarget))
+        return;
+      if (!closeOnBlur && isHit)
+        return;
+      setInputValue("");
+      if (isOpen)
+        onClose();
+    },
+    [closeOnBlur, isHit, isOpen, onClose]
+  );
+  const onKeyDown = (0, import_react.useCallback)(
+    (ev) => {
+      if (ev.key === " ")
+        ev.key = ev.code;
+      if (formControlProps.disabled || formControlProps.readOnly)
+        return;
+      if (isComposition.current)
+        return;
+      const enabledDelete = displayValue === inputValue || !inputValue.length;
+      const actions = {
+        ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
+        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        Home: isOpen ? onFocusFirst : void 0,
+        End: isOpen ? onFocusLast : void 0,
+        Escape: closeOnEsc ? onClose : void 0,
+        Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
+      };
+      const action = actions[ev.key];
+      if (!action)
+        return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      action(ev);
+    },
+    [
+      formControlProps,
+      displayValue,
+      inputValue,
+      onOpen,
+      isFocused,
+      onFocusFirstOrSelected,
+      onFocusNext,
+      onFocusLastOrSelected,
+      onFocusPrev,
+      isCreate,
+      onCreate,
+      onSelect,
+      isOpen,
+      onFocusFirst,
+      onFocusLast,
+      closeOnEsc,
+      onClose,
+      isEmptyValue,
+      onDelete
+    ]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!isMulti)
+      return;
+    if (!omitSelectedValues && (0, import_utils.isUndefined)(maxSelectedValues))
+      return;
+    const isAll = value.length > 0 && value.length === descendants.count();
+    const isMax = value.length === maxSelectedValues;
+    if (isAll || isMax) {
+      onClose();
+      setIsAllSelected(true);
+    } else {
+      setIsAllSelected(false);
+    }
+  }, [omitSelectedValues, value, descendants, isMulti, onClose, maxSelectedValues]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (isOpen)
+      return;
+    setFocusedIndex(-1);
+    setInputValue("");
+  }, [isOpen]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!isHit)
+      setFocusedIndex(-2);
+  }, [isHit]);
+  (0, import_utils.useUnmountEffect)(() => {
+    timeoutIds.current.forEach((id2) => clearTimeout(id2));
+    timeoutIds.current.clear();
+  });
+  (0, import_use_outside_click.useOutsideClick)({
+    ref: containerRef,
+    handler: onClose,
+    enabled: closeOnBlur || !isHit
+  });
+  const getPopoverProps = (0, import_react.useCallback)(
+    (props) => ({
+      ...rest,
+      ...props,
+      isOpen,
+      onOpen,
+      onClose,
+      placement,
+      duration,
+      trigger: "never",
+      closeOnButton: false
+    }),
+    [duration, isOpen, onClose, onOpen, placement, rest]
+  );
+  const getContainerProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ref: (0, import_utils.mergeRefs)(containerRef, ref),
+      ...containerProps,
+      ...props,
+      ...formControlProps,
+      onClick: (0, import_utils.handlerAll)(props.onClick, rest.onClick, onClick),
+      onFocus: (0, import_utils.handlerAll)(props.onFocus, rest.onFocus, onFocus),
+      onBlur: (0, import_utils.handlerAll)(props.onBlur, rest.onBlur, onBlur)
+    }),
+    [containerProps, formControlProps, onBlur, onClick, onFocus, rest]
+  );
+  const getFieldProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ref,
+      tabIndex: -1,
+      ...props,
+      ...formControlProps,
+      placeholder,
+      "data-active": (0, import_utils.dataAttr)(isOpen),
+      "aria-expanded": (0, import_utils.dataAttr)(isOpen),
+      onKeyDown: (0, import_utils.handlerAll)(props.onKeyDown, rest.onKeyDown, onKeyDown)
+    }),
+    [formControlProps, placeholder, isOpen, rest, onKeyDown]
+  );
+  return {
+    id,
+    descendants,
+    value,
+    displayValue,
+    inputValue,
+    isHit,
+    isEmpty,
+    computedChildren,
+    focusedIndex,
+    omitSelectedValues,
+    closeOnSelect,
+    createOption,
+    emptyMessage,
+    isOpen,
+    isAllSelected,
+    listRef,
+    inputRef,
+    optionProps,
+    formControlProps,
+    setFocusedIndex,
+    onChangeDisplayValue,
+    onChange,
+    onSearch,
+    onCreate,
+    onClear,
+    onCompositionStart,
+    onCompositionEnd,
+    pickOptions,
+    rebirthOptions,
+    onOpen,
+    onClose,
+    onFocusFirst,
+    onFocusLast,
+    onFocusSelected,
+    onFocusNext,
+    onFocusPrev,
+    getPopoverProps,
+    getContainerProps,
+    getFieldProps,
+    inputProps
+  };
+};
+var useAutocompleteInput = () => {
+  const {
+    id,
+    inputRef,
+    onSearch,
+    onCompositionStart,
+    onCompositionEnd,
+    isAllSelected,
+    formControlProps,
+    inputProps
+  } = useAutocompleteContext();
+  (0, import_utils.useUpdateEffect)(() => {
+    if (isAllSelected && inputRef.current)
+      inputRef.current.blur();
+  }, [isAllSelected]);
+  const getInputProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ref: (0, import_utils.mergeRefs)(inputRef, ref),
+      ...formControlProps,
+      ...inputProps,
+      ...props,
+      id,
+      cursor: formControlProps.readOnly ? "default" : "text",
+      pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
+      tabIndex: isAllSelected ? -1 : 0,
+      onChange: (0, import_utils.handlerAll)(props.onChange, onSearch),
+      onCompositionStart: (0, import_utils.handlerAll)(
+        props.onCompositionStart,
+        inputProps.onCompositionStart,
+        onCompositionStart
+      ),
+      onCompositionEnd: (0, import_utils.handlerAll)(
+        props.onCompositionEnd,
+        inputProps.onCompositionEnd,
+        onCompositionEnd
+      )
+    }),
+    [
+      inputProps,
+      inputRef,
+      formControlProps,
+      id,
+      isAllSelected,
+      onSearch,
+      onCompositionStart,
+      onCompositionEnd
+    ]
+  );
+  return {
+    getInputProps
+  };
+};
+var useAutocompleteList = () => {
+  const { focusedIndex, isOpen, listRef, rebirthOptions } = useAutocompleteContext();
+  const descendants = useAutocompleteDescendantsContext();
+  const beforeFocusedIndex = (0, import_react.useRef)(-1);
+  const selectedValue = descendants.value(focusedIndex);
+  const onAnimationComplete = (0, import_react.useCallback)(() => {
+    if (!isOpen)
+      rebirthOptions(false);
+  }, [isOpen, rebirthOptions]);
+  (0, import_react.useEffect)(() => {
+    if (!listRef.current || !selectedValue)
+      return;
+    const parent = listRef.current;
+    const child = selectedValue.node;
+    const parentHeight = parent.clientHeight;
+    const viewTop = parent.scrollTop;
+    const viewBottom = viewTop + parentHeight;
+    const childHeight = child.clientHeight;
+    const childTop = child.offsetTop;
+    const childBottom = childTop + childHeight;
+    const isInView = viewTop <= childTop && childBottom <= viewBottom;
+    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
+    if (!isInView) {
+      if (childBottom <= parentHeight) {
+        listRef.current.scrollTo({ top: 0 });
+      } else {
+        if (!isScrollBottom) {
+          listRef.current.scrollTo({ top: childTop + 1 });
+        } else {
+          listRef.current.scrollTo({ top: childBottom - parentHeight });
+        }
+      }
+    }
+    beforeFocusedIndex.current = selectedValue.index;
+  }, [listRef, selectedValue]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!isOpen)
+      beforeFocusedIndex.current = -1;
+  }, [isOpen]);
+  const getListProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      as: "ul",
+      ref: (0, import_utils.mergeRefs)(listRef, ref),
+      role: "select",
+      tabIndex: -1,
+      ...props,
+      onAnimationComplete: (0, import_utils.handlerAll)(props.onAnimationComplete, onAnimationComplete)
+    }),
+    [listRef, onAnimationComplete]
+  );
+  return {
+    getListProps
+  };
+};
+var useAutocompleteOptionGroup = ({ label, ...rest }) => {
+  const { value, omitSelectedValues } = useAutocompleteContext();
+  const isMulti = (0, import_utils.isArray)(value);
+  const descendants = useAutocompleteDescendantsContext();
+  const values = descendants.values();
+  const selectedValues = isMulti && omitSelectedValues ? descendants.values(({ node }) => {
+    var _a;
+    return value.includes((_a = node.dataset.value) != null ? _a : "");
+  }) : [];
+  const selectedIndexes = selectedValues.map(({ index }) => index);
+  const childValues = values.filter(
+    ({ node, index }) => {
+      var _a;
+      return ((_a = node.parentElement) == null ? void 0 : _a.dataset.label) === label && !selectedIndexes.includes(index) && "target" in node.dataset;
+    }
+  );
+  const isEmpty = !childValues.length;
+  const computedRest = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
+  const getContainerProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => {
+      const style = {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref,
+        ...props,
+        ...computedRest[0],
+        style: isEmpty ? style : void 0,
+        "data-label": label,
+        role: "autocomplete-group-container"
+      };
+    },
+    [computedRest, isEmpty, label]
+  );
+  const getGroupProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ref,
+      ...props,
+      ...computedRest[1],
+      "data-label": label,
+      role: "autocomplete-group"
+    }),
+    [computedRest, label]
+  );
+  return {
+    label,
+    getContainerProps,
+    getGroupProps
+  };
+};
+var useAutocompleteOption = (props) => {
+  var _a, _b, _c, _d;
+  const {
+    value,
+    omitSelectedValues,
+    onChange,
+    onChangeDisplayValue,
+    focusedIndex,
+    setFocusedIndex,
+    onClose,
+    closeOnSelect: generalCloseOnSelect,
+    optionProps,
+    inputRef,
+    onFocusNext
+  } = useAutocompleteContext();
+  let {
+    icon: customIcon,
+    isDisabled,
+    isFocusable,
+    closeOnSelect: customCloseOnSelect,
+    children,
+    ...computedProps
+  } = { ...optionProps, ...props };
+  const trulyDisabled = !!isDisabled && !isFocusable;
+  const itemRef = (0, import_react.useRef)(null);
+  const { index, register, descendants } = useAutocompleteDescendant({ disabled: trulyDisabled });
+  const values = descendants.values();
+  const frontValues = values.slice(0, index);
+  const isMulti = (0, import_utils.isArray)(value);
+  const isDuplicated = !isMulti ? frontValues.some(({ node }) => {
+    var _a2;
+    return node.dataset.value === ((_a2 = computedProps.value) != null ? _a2 : "");
+  }) : false;
+  const isSelected = !isDuplicated && (!isMulti ? ((_a = computedProps.value) != null ? _a : "") === value : value.includes((_b = computedProps.value) != null ? _b : ""));
+  const isTarget = "target" in ((_d = (_c = itemRef.current) == null ? void 0 : _c.dataset) != null ? _d : {});
+  const isFocused = index === focusedIndex;
+  const onClick = (0, import_react.useCallback)(
+    (ev) => {
+      var _a2;
+      ev.stopPropagation();
+      if (isDisabled) {
+        if (inputRef.current)
+          inputRef.current.focus();
+        return;
+      }
+      if (!isTargetOption(ev.currentTarget)) {
+        if (inputRef.current)
+          inputRef.current.focus();
+        return;
+      }
+      setFocusedIndex(index);
+      onChange((_a2 = computedProps.value) != null ? _a2 : "");
+      if (inputRef.current)
+        inputRef.current.focus();
+      if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect)
+        onClose();
+      if (omitSelectedValues)
+        onFocusNext(index);
+    },
+    [
+      onFocusNext,
+      omitSelectedValues,
+      isDisabled,
+      computedProps,
+      setFocusedIndex,
+      index,
+      onChange,
+      customCloseOnSelect,
+      generalCloseOnSelect,
+      onClose,
+      inputRef
+    ]
+  );
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    if (isSelected)
+      onChangeDisplayValue((_a2 = computedProps.value) != null ? _a2 : "", false);
+  }, [computedProps, isSelected, onChangeDisplayValue]);
+  const getOptionProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => {
+      var _a2;
+      const style = {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref: (0, import_utils.mergeRefs)(itemRef, ref, register),
+        ...(0, import_utils.omitObject)(computedProps, ["value"]),
+        ...props2,
+        role: "autocomplete-item",
+        tabIndex: -1,
+        style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
+        "data-target": (0, import_utils.dataAttr)(true),
+        "data-value": (_a2 = computedProps.value) != null ? _a2 : "",
+        "data-focus": (0, import_utils.dataAttr)(isFocused),
+        "data-disabled": (0, import_utils.dataAttr)(isDisabled),
+        "aria-checked": (0, import_utils.ariaAttr)(isSelected),
+        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
+        onClick: (0, import_utils.handlerAll)(computedProps.onClick, props2.onClick, onClick)
+      };
+    },
+    [
+      computedProps,
+      isDisabled,
+      isFocused,
+      isSelected,
+      isTarget,
+      omitSelectedValues,
+      onClick,
+      register
+    ]
+  );
+  return {
+    isSelected,
+    isFocused,
+    customIcon,
+    children,
+    getOptionProps
+  };
+};
+var useAutocompleteCreate = () => {
+  const { isHit, onCreate } = useAutocompleteContext();
+  const getCreateProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => {
+      const style = {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref,
+        ...props,
+        tabIndex: -1,
+        style: isHit ? style : void 0,
+        "data-focus": (0, import_utils.dataAttr)(!isHit),
+        onClick: (0, import_utils.handlerAll)(props.onClick, onCreate)
+      };
+    },
+    [isHit, onCreate]
+  );
+  return { getCreateProps };
+};
+var useAutocompleteEmpty = () => {
+  const { isHit, isEmpty } = useAutocompleteContext();
+  const getEmptyProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => {
+      const style = {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      };
+      return {
+        ref,
+        ...props,
+        tabIndex: -1,
+        style: isHit && !isEmpty ? style : void 0
+      };
+    },
+    [isHit, isEmpty]
+  );
+  return { getEmptyProps };
+};
+
+// src/autocomplete-icon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AutocompleteIcon = (0, import_core2.forwardRef)(
+  ({ className, children, __css, ...rest }, ref) => {
+    const { styles } = useAutocompleteContext();
+    const css = {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      cursor: "pointer",
+      ...styles.icon,
+      ...__css
+    };
+    const validChildren = (0, import_utils2.getValidChildren)(children);
+    const cloneChildren = validChildren.map(
+      (child) => (0, import_react2.cloneElement)(child, {
+        focusable: false,
+        "aria-hidden": true,
+        style: {
+          maxWidth: "1em",
+          maxHeight: "1em",
+          color: "currentColor"
+        }
+      })
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { ref, className: (0, import_utils2.cx)("ui-autocomplete-icon", className), __css: css, ...rest, children: (0, import_utils2.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.ChevronIcon, {}) });
+  }
+);
+var AutocompleteClearIcon = ({
+  className,
+  children,
+  ...props
+}) => {
+  const ref = (0, import_react2.useRef)(null);
+  const { styles } = useAutocompleteContext();
+  const isDisabled = props.disabled;
+  const rest = (0, import_use_clickable.useClickable)({
+    ref,
+    isDisabled,
+    ...props
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    AutocompleteIcon,
+    {
+      className: (0, import_utils2.cx)("ui-autocomplete-clear-icon", className),
+      __css: styles.clearIcon,
+      ...rest,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
+    }
+  );
+};
+var AutocompleteItemIcon = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useAutocompleteContext();
+    const css = {
+      flexShrink: 0,
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      fontSize: "0.85em",
+      ...styles.itemIcon
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.span,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-autocomplete-item-icon", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+
+// src/autocomplete-list.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_utils3 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AutocompleteList = (0, import_core3.forwardRef)(
+  ({ className, w, width, minW, minWidth, ...rest }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { styles } = useAutocompleteContext();
+    const { getListProps } = useAutocompleteList();
+    w = (_d = w != null ? w : width) != null ? _d : (_c = (_a = styles.list) == null ? void 0 : _a.w) != null ? _c : (_b = styles.list) == null ? void 0 : _b.width;
+    minW = (_h = minW != null ? minW : minWidth) != null ? _h : (_g = (_e = styles.list) == null ? void 0 : _e.minW) != null ? _g : (_f = styles.list) == null ? void 0 : _f.minWidth;
+    const css = { ...styles.list };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_popover.PopoverContent,
+      {
+        className: (0, import_utils3.cx)("ui-autocomplete-list", className),
+        w,
+        minW,
+        __css: css,
+        ...getListProps(rest, ref)
+      }
+    );
+  }
+);
+
+// src/autocomplete.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Autocomplete = (0, import_core4.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core4.useMultiComponentStyle)("Select", props);
+  let {
+    className,
+    defaultValue = "",
+    color,
+    h,
+    height,
+    minH,
+    minHeight,
+    containerProps,
+    listProps,
+    inputProps,
+    iconProps,
+    children,
+    ...computedProps
+  } = (0, import_core4.omitThemeProps)(mergedProps);
+  const {
+    descendants,
+    formControlProps,
+    getPopoverProps,
+    getContainerProps,
+    getFieldProps,
+    createOption,
+    isEmpty,
+    inputValue,
+    computedChildren,
+    ...rest
+  } = useAutocomplete({ ...computedProps, defaultValue, children });
+  h = h != null ? h : height;
+  minH = minH != null ? minH : minHeight;
+  const css = {
+    position: "relative",
+    w: "100%",
+    h: "fit-content",
+    color,
+    ...styles.container
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    AutocompleteProvider,
+    {
+      value: { ...rest, formControlProps, inputValue, createOption, isEmpty, styles },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        import_core4.ui.div,
+        {
+          className: (0, import_utils4.cx)("ui-autocomplete", className),
+          __css: css,
+          ...getContainerProps(containerProps),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              AutocompleteField,
+              {
+                h,
+                minH,
+                inputProps,
+                ...getFieldProps({}, ref)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps }),
+            !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AutocompleteList, { ...listProps, children: [
+              createOption ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteEmpty, {}),
+              children != null ? children : computedChildren
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteList, { ...listProps, children: createOption && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteEmpty, {}) })
+          ]
+        }
+      ) })
+    }
+  ) });
+});
+var AutocompleteField = (0, import_core4.forwardRef)(
+  ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
+    const { displayValue, inputValue, styles } = useAutocompleteContext();
+    const { getInputProps } = useAutocompleteInput();
+    const css = {
+      paddingEnd: "2rem",
+      h,
+      minH,
+      display: "flex",
+      alignItems: "center",
+      ...styles.field,
+      cursor: "text"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.div, { className: (0, import_utils4.cx)("ui-autocomplete-field", className), __css: css, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_core4.ui.input,
+      {
+        className: "ui-autocomplete-input",
+        display: "inline-block",
+        w: "full",
+        placeholder,
+        ...getInputProps(inputProps, ref),
+        value: inputValue || displayValue || ""
+      }
+    ) }) });
+  }
+);
+
+// src/autocomplete-option-group.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var AutocompleteOptionGroup = (0, import_core5.forwardRef)(
+  ({ className, color, h, height, minH, minHeight, children, ...rest }, ref) => {
+    const { styles } = useAutocompleteContext();
+    const { label, getContainerProps, getGroupProps } = useAutocompleteOptionGroup(rest);
+    h = h != null ? h : height;
+    minH = minH != null ? minH : minHeight;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_core5.ui.li,
+      {
+        className: "ui-autocomplete-group-container",
+        __css: { w: "100%", h: "fit-content", color },
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_core5.ui.span,
+            {
+              className: (0, import_utils5.cx)("ui-autocomplete-group-label"),
+              __css: styles.groupLabel,
+              noOfLines: 1,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_core5.ui.ul,
+            {
+              ...getGroupProps({}, ref),
+              className: (0, import_utils5.cx)("ui-autocomplete-group", className),
+              __css: { h, minH, ...styles.group },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/autocomplete-option.tsx
+var import_core6 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AutocompleteOption = (0, import_core6.forwardRef)(
+  ({ className, icon, ...rest }, ref) => {
+    const { styles } = useAutocompleteContext();
+    const { isSelected, customIcon, children, getOptionProps } = useAutocompleteOption(rest);
+    icon = icon != null ? icon : customIcon;
+    const css = {
+      textDecoration: "none",
+      color: "inherit",
+      userSelect: "none",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      textAlign: "start",
+      flex: "0 0 auto",
+      outline: 0,
+      gap: "0.75rem",
+      ...styles.item
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_core6.ui.li,
+      {
+        className: (0, import_utils6.cx)("ui-autocomplete-item", className),
+        __css: css,
+        ...getOptionProps({}, ref),
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}) }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ui.span, { style: { pointerEvents: "none", flex: 1 }, noOfLines: 1, children }) : children
+        ]
+      }
+    );
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "polygon",
+  {
+    fill: "currentColor",
+    points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+  }
+) });
+
+// src/autocomplete-create.tsx
+var import_core7 = require("@yamada-ui/core");
+var import_utils7 = require("@yamada-ui/utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AutocompleteCreate = (0, import_core7.forwardRef)(
+  ({ className, icon, children, ...rest }, ref) => {
+    const { inputValue, styles } = useAutocompleteContext();
+    const { getCreateProps } = useAutocompleteCreate();
+    children != null ? children : children = inputValue;
+    const css = {
+      textDecoration: "none",
+      color: "inherit",
+      userSelect: "none",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      textAlign: "start",
+      flex: "0 0 auto",
+      outline: 0,
+      gap: "0.75rem",
+      ...styles.item
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_core7.ui.li,
+      {
+        className: (0, import_utils7.cx)("ui-autocomplete-create", className),
+        __css: css,
+        ...getCreateProps(rest, ref),
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlusIcon, {}) }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.ui.span, { style: { pointerEvents: "none", flex: 1 }, noOfLines: 1, children: (0, import_utils7.runIfFunc)(children, inputValue) }) : (0, import_utils7.runIfFunc)(children, inputValue)
+        ]
+      }
+    );
+  }
+);
+var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { viewBox: "0 0 45.402 45.402", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141   c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27   c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435   c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z"
+  }
+) });
+
+// src/autocomplete-empty.tsx
+var import_core8 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var AutocompleteEmpty = (0, import_core8.forwardRef)(
+  ({ className, icon, children, ...rest }, ref) => {
+    const { emptyMessage, styles } = useAutocompleteContext();
+    const { getEmptyProps } = useAutocompleteEmpty();
+    children != null ? children : children = emptyMessage;
+    const css = {
+      textDecoration: "none",
+      color: "inherit",
+      userSelect: "none",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      textAlign: "start",
+      flex: "0 0 auto",
+      outline: 0,
+      gap: "0.75rem",
+      pointerEvents: "none",
+      ...styles.item
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      import_core8.ui.li,
+      {
+        className: (0, import_utils8.cx)("ui-autocomplete-empty", className),
+        __css: css,
+        ...getEmptyProps(rest, ref),
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MinusIcon, {}) }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.ui.span, { style: { pointerEvents: "none", flex: 1 }, noOfLines: 1, children }) : children
+        ]
+      }
+    );
+  }
+);
+var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
+  }
+) });
+
+// src/multi-autocomplete.tsx
+var import_core9 = require("@yamada-ui/core");
+var import_popover3 = require("@yamada-ui/popover");
+var import_utils9 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var MultiAutocomplete = (0, import_core9.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core9.useMultiComponentStyle)("Select", props);
+  let {
+    className,
+    defaultValue = [],
+    component,
+    separator,
+    isClearable = true,
+    color,
+    h,
+    height,
+    minH,
+    minHeight,
+    closeOnSelect = false,
+    keepPlaceholder = false,
+    containerProps,
+    listProps,
+    inputProps,
+    iconProps,
+    clearIconProps,
+    children,
+    ...computedProps
+  } = (0, import_core9.omitThemeProps)(mergedProps);
+  const {
+    value,
+    descendants,
+    formControlProps,
+    getPopoverProps,
+    getContainerProps,
+    getFieldProps,
+    createOption,
+    isEmpty,
+    inputValue,
+    computedChildren,
+    onClear,
+    ...rest
+  } = useAutocomplete({
+    ...computedProps,
+    defaultValue,
+    closeOnSelect,
+    children
+  });
+  h = h != null ? h : height;
+  minH = minH != null ? minH : minHeight;
+  const css = {
+    position: "relative",
+    w: "100%",
+    h: "fit-content",
+    color,
+    ...styles.container
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    AutocompleteProvider,
+    {
+      value: {
+        ...rest,
+        value,
+        formControlProps,
+        inputValue,
+        createOption,
+        isEmpty,
+        styles
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover3.Popover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.ui.div, { className: "ui-autocomplete", __css: css, ...getContainerProps(containerProps), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          MultiAutocompleteField,
+          {
+            component,
+            separator,
+            keepPlaceholder,
+            h,
+            minH,
+            inputProps,
+            ...getFieldProps({}, ref)
+          }
+        ),
+        isClearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          AutocompleteClearIcon,
+          {
+            ...clearIconProps,
+            onClick: (0, import_utils9.handlerAll)(clearIconProps == null ? void 0 : clearIconProps.onClick, onClear),
+            ...formControlProps
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteIcon, { ...iconProps, ...formControlProps }),
+        !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(AutocompleteList, { ...listProps, children: [
+          createOption ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteEmpty, {}),
+          children != null ? children : computedChildren
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteList, { ...listProps, children: createOption && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteCreate, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AutocompleteEmpty, {}) })
+      ] }) })
+    }
+  ) });
+});
+var MultiAutocompleteField = (0, import_core9.forwardRef)(
+  ({
+    className,
+    component,
+    separator = ",",
+    keepPlaceholder,
+    h,
+    minH,
+    placeholder,
+    inputProps,
+    ...rest
+  }, ref) => {
+    const { value, displayValue, inputValue, onChange, isOpen, inputRef, styles } = useAutocompleteContext();
+    const { getInputProps } = useAutocompleteInput();
+    const cloneChildren = (0, import_react3.useMemo)(() => {
+      if (!(displayValue == null ? void 0 : displayValue.length))
+        return null;
+      if (component) {
+        return displayValue.map((displayValue2, index) => {
+          const onRemove = (e) => {
+            e.stopPropagation();
+            onChange(value[index]);
+            if (inputRef.current)
+              inputRef.current.focus();
+          };
+          const el = component({
+            value: value[index],
+            displayValue: displayValue2,
+            index,
+            onRemove
+          });
+          const style = {
+            cursor: "default",
+            marginBlockStart: "0.125rem",
+            marginBlockEnd: "0.125rem",
+            marginInlineEnd: "0.25rem"
+          };
+          return el ? (0, import_react3.cloneElement)(el, { style }) : null;
+        });
+      } else {
+        return displayValue.map((value2, index) => {
+          const isLast = displayValue.length === index + 1;
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.ui.span, { display: "inline-block", me: "0.25rem", children: [
+            value2,
+            !isLast || isOpen ? separator : null
+          ] }, index);
+        });
+      }
+    }, [displayValue, component, value, onChange, isOpen, inputRef, separator]);
+    const css = {
+      paddingEnd: "2rem",
+      h,
+      minH,
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      ...styles.field,
+      cursor: "text"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_popover3.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      import_core9.ui.div,
+      {
+        className: (0, import_utils9.cx)("ui-autocomplete-field", className),
+        __css: css,
+        py: (displayValue == null ? void 0 : displayValue.length) && component ? "0.125rem" : void 0,
+        ...rest,
+        children: [
+          cloneChildren,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_core9.ui.input,
+            {
+              className: "ui-autocomplete-input",
+              display: "inline-block",
+              flex: "1",
+              overflow: "hidden",
+              marginBlockStart: "0.125rem",
+              marginBlockEnd: "0.125rem",
+              placeholder: !displayValue || keepPlaceholder && isOpen ? placeholder : void 0,
+              ...getInputProps(inputProps, ref),
+              value: inputValue
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Autocomplete,
+  AutocompleteCreate,
+  AutocompleteEmpty,
+  AutocompleteOption,
+  AutocompleteOptionGroup,
+  MultiAutocomplete
+});