@yamada-ui/autocomplete 0.1.0

package/dist/autocomplete-list.js

@@ -0,0 +1,129 @@
+"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/autocomplete-list.tsx
+var autocomplete_list_exports = {};
+__export(autocomplete_list_exports, {
+  AutocompleteList: () => AutocompleteList
+});
+module.exports = __toCommonJS(autocomplete_list_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_popover = require("@yamada-ui/popover");
+var import_utils2 = require("@yamada-ui/utils");
+
+// 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 {
+  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 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
+  };
+};
+
+// src/autocomplete-list.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AutocompleteList = (0, import_core2.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_runtime2.jsx)(
+      import_popover.PopoverContent,
+      {
+        className: (0, import_utils2.cx)("ui-autocomplete-list", className),
+        w,
+        minW,
+        __css: css,
+        ...getListProps(rest, ref)
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutocompleteList
+});

package/dist/autocomplete-list.mjs

@@ -0,0 +1,6 @@
+import {
+  AutocompleteList
+} from "./chunk-MG2KF34Q.mjs";
+export {
+  AutocompleteList
+};

package/dist/autocomplete-option-group.d.ts

@@ -0,0 +1,15 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { U as UseAutocompleteOptionGroupProps } from './use-autocomplete-f95f21d6.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@yamada-ui/form-control';
+import '@yamada-ui/popover';
+import '@yamada-ui/select';
+import '@yamada-ui/utils';
+
+type AutocompleteOptionGroupOptions = UseAutocompleteOptionGroupProps;
+type AutocompleteOptionGroupProps = HTMLUIProps<'ul'> & AutocompleteOptionGroupOptions;
+declare const AutocompleteOptionGroup: _yamada_ui_core.Component<"ul", AutocompleteOptionGroupProps>;
+
+export { AutocompleteOptionGroup, AutocompleteOptionGroupProps };

package/dist/autocomplete-option-group.js

@@ -0,0 +1,148 @@
+"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/autocomplete-option-group.tsx
+var autocomplete_option_group_exports = {};
+__export(autocomplete_option_group_exports, {
+  AutocompleteOptionGroup: () => AutocompleteOptionGroup
+});
+module.exports = __toCommonJS(autocomplete_option_group_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// 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 {
+  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 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
+  };
+};
+
+// src/autocomplete-option-group.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AutocompleteOptionGroup = (0, import_core2.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_runtime2.jsxs)(
+      import_core2.ui.li,
+      {
+        className: "ui-autocomplete-group-container",
+        __css: { w: "100%", h: "fit-content", color },
+        ...getContainerProps(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_core2.ui.span,
+            {
+              className: (0, import_utils2.cx)("ui-autocomplete-group-label"),
+              __css: styles.groupLabel,
+              noOfLines: 1,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_core2.ui.ul,
+            {
+              ...getGroupProps({}, ref),
+              className: (0, import_utils2.cx)("ui-autocomplete-group", className),
+              __css: { h, minH, ...styles.group },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutocompleteOptionGroup
+});

package/dist/autocomplete-option-group.mjs

@@ -0,0 +1,6 @@
+import {
+  AutocompleteOptionGroup
+} from "./chunk-MG2KF34Q.mjs";
+export {
+  AutocompleteOptionGroup
+};

package/dist/autocomplete-option.d.ts

@@ -0,0 +1,8 @@
+import '@yamada-ui/core';
+import 'react';
+export { a as AutocompleteOption, A as AutocompleteOptionProps } from './use-autocomplete-f95f21d6.js';
+import 'react/jsx-runtime';
+import '@yamada-ui/form-control';
+import '@yamada-ui/popover';
+import '@yamada-ui/select';
+import '@yamada-ui/utils';

package/dist/autocomplete-option.js

@@ -0,0 +1,286 @@
+"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/autocomplete-option.tsx
+var autocomplete_option_exports = {};
+__export(autocomplete_option_exports, {
+  AutocompleteOption: () => AutocompleteOption
+});
+module.exports = __toCommonJS(autocomplete_option_exports);
+var import_core3 = require("@yamada-ui/core");
+var import_utils3 = 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 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 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
+  };
+};
+
+// 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 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-option.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AutocompleteOption = (0, import_core3.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_runtime3.jsxs)(
+      import_core3.ui.li,
+      {
+        className: (0, import_utils3.cx)("ui-autocomplete-item", className),
+        __css: css,
+        ...getOptionProps({}, ref),
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { pointerEvents: "none", flex: 1 }, noOfLines: 1, children }) : children
+        ]
+      }
+    );
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.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"
+  }
+) });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutocompleteOption
+});

package/dist/autocomplete-option.mjs

@@ -0,0 +1,6 @@
+import {
+  AutocompleteOption
+} from "./chunk-MG2KF34Q.mjs";
+export {
+  AutocompleteOption
+};

package/dist/autocomplete.d.ts

@@ -0,0 +1,24 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps, HTMLUIProps } from '@yamada-ui/core';
+import { AutocompleteIconProps } from './autocomplete-icon.js';
+import { AutocompleteListProps } from './autocomplete-list.js';
+import { b as UseAutocompleteProps } from './use-autocomplete-f95f21d6.js';
+import 'react';
+import 'react/jsx-runtime';
+import '@yamada-ui/form-control';
+import '@yamada-ui/popover';
+import '@yamada-ui/select';
+import '@yamada-ui/utils';
+
+type AutocompleteOptions = {
+    focusBorderColor?: string;
+    errorBorderColor?: string;
+    containerProps?: Omit<HTMLUIProps<'div'>, 'children'>;
+    listProps?: Omit<AutocompleteListProps, 'children'>;
+    inputProps?: HTMLUIProps<'input'>;
+    iconProps?: AutocompleteIconProps;
+};
+type AutocompleteProps = ThemeProps<'Select'> & Omit<UseAutocompleteProps<string>, 'maxSelectedValues' | 'omitSelectedValues'> & AutocompleteOptions;
+declare const Autocomplete: _yamada_ui_core.Component<"input", AutocompleteProps>;
+
+export { Autocomplete, AutocompleteProps };