@yamada-ui/autocomplete 0.0.0-dev-20230603042803

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/autocomplete
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/autocomplete
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/autocomplete
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/autocomplete
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/autocomplete-create.d.ts

@@ -0,0 +1,12 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { ReactElement } from 'react';
+
+type AutocompleteCreateOptions = {
+    icon?: ReactElement;
+    children?: string | ((inputValue: string) => string);
+};
+type AutocompleteCreateProps = Omit<HTMLUIProps<'li'>, 'children'> & AutocompleteCreateOptions;
+declare const AutocompleteCreate: _yamada_ui_core.Component<"li", AutocompleteCreateProps>;
+
+export { AutocompleteCreate, AutocompleteCreateProps };

package/dist/autocomplete-create.js

@@ -0,0 +1,183 @@
+"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-create.tsx
+var autocomplete_create_exports = {};
+__export(autocomplete_create_exports, {
+  AutocompleteCreate: () => AutocompleteCreate
+});
+module.exports = __toCommonJS(autocomplete_create_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 {
+  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 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 };
+};
+
+// 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-create.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AutocompleteCreate = (0, import_core3.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_runtime3.jsxs)(
+      import_core3.ui.li,
+      {
+        className: (0, import_utils3.cx)("ui-autocomplete-create", className),
+        __css: css,
+        ...getCreateProps(rest, ref),
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlusIcon, {}) }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { pointerEvents: "none", flex: 1 }, noOfLines: 1, children: (0, import_utils3.runIfFunc)(children, inputValue) }) : (0, import_utils3.runIfFunc)(children, inputValue)
+        ]
+      }
+    );
+  }
+);
+var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 45.402 45.402", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.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"
+  }
+) });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutocompleteCreate
+});

package/dist/autocomplete-create.mjs

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

package/dist/autocomplete-empty.d.ts

@@ -0,0 +1,12 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { ReactElement } from 'react';
+
+type AutocompleteEmptyOptions = {
+    icon?: ReactElement;
+    children?: string;
+};
+type AutocompleteEmptyProps = Omit<HTMLUIProps<'li'>, 'children'> & AutocompleteEmptyOptions;
+declare const AutocompleteEmpty: _yamada_ui_core.Component<"li", AutocompleteEmptyProps>;
+
+export { AutocompleteEmpty, AutocompleteEmptyProps };

package/dist/autocomplete-empty.js

@@ -0,0 +1,182 @@
+"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-empty.tsx
+var autocomplete_empty_exports = {};
+__export(autocomplete_empty_exports, {
+  AutocompleteEmpty: () => AutocompleteEmpty
+});
+module.exports = __toCommonJS(autocomplete_empty_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 {
+  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 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 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-empty.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AutocompleteEmpty = (0, import_core3.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_runtime3.jsxs)(
+      import_core3.ui.li,
+      {
+        className: (0, import_utils3.cx)("ui-autocomplete-empty", className),
+        __css: css,
+        ...getEmptyProps(rest, ref),
+        children: [
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MinusIcon, {}) }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { pointerEvents: "none", flex: 1 }, noOfLines: 1, children }) : children
+        ]
+      }
+    );
+  }
+);
+var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.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"
+  }
+) });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutocompleteEmpty
+});

package/dist/autocomplete-empty.mjs

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

package/dist/autocomplete-icon.d.ts

@@ -0,0 +1,14 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { FC } from 'react';
+
+type AutocompleteIconProps = HTMLUIProps<'div'>;
+declare const AutocompleteIcon: _yamada_ui_core.Component<"div", AutocompleteIconProps>;
+type AutocompleteClearIconProps = AutocompleteIconProps & {
+    disabled?: boolean;
+};
+declare const AutocompleteClearIcon: FC<AutocompleteClearIconProps>;
+type AutocompleteItemIconProps = HTMLUIProps<'span'>;
+declare const AutocompleteItemIcon: _yamada_ui_core.Component<"span", AutocompleteItemIconProps>;
+
+export { AutocompleteClearIcon, AutocompleteClearIconProps, AutocompleteIcon, AutocompleteIconProps, AutocompleteItemIcon, AutocompleteItemIconProps };

package/dist/autocomplete-icon.js

@@ -0,0 +1,136 @@
+"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-icon.tsx
+var autocomplete_icon_exports = {};
+__export(autocomplete_icon_exports, {
+  AutocompleteClearIcon: () => AutocompleteClearIcon,
+  AutocompleteIcon: () => AutocompleteIcon,
+  AutocompleteItemIcon: () => AutocompleteItemIcon
+});
+module.exports = __toCommonJS(autocomplete_icon_exports);
+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 {
+  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 />"`
+});
+
+// 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
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutocompleteClearIcon,
+  AutocompleteIcon,
+  AutocompleteItemIcon
+});

package/dist/autocomplete-icon.mjs

@@ -0,0 +1,10 @@
+import {
+  AutocompleteClearIcon,
+  AutocompleteIcon,
+  AutocompleteItemIcon
+} from "./chunk-MG2KF34Q.mjs";
+export {
+  AutocompleteClearIcon,
+  AutocompleteIcon,
+  AutocompleteItemIcon
+};

package/dist/autocomplete-list.d.ts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type AutocompleteListProps = HTMLUIProps<'ul'>;
+declare const AutocompleteList: _yamada_ui_core.Component<"ul", AutocompleteListProps>;
+
+export { AutocompleteList, AutocompleteListProps };