colibri-ui 0.8.76 → 0.8.78

package/Theme/themes/jaipur.js

@@ -114,14 +114,17 @@ var theme_jaipur = {
   "color-action-secondary-hover": theme_jaipur$1.default.PINK_JP_300,
   "color-action-secondary-pressed": theme_jaipur$1.default.PINK_JP_500,
   "color-action-secondary-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "color-action-clear-text-hover": theme_jaipur$1.default.PINK_JP_800,
   "color-action-disabled": theme_jaipur$1.default.NEUTRAL_JP_100,
   "color-action-disabled-text": theme_jaipur$1.default.NEUTRAL_JP_400,
   "color-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
   "color-status-success": theme_jaipur$1.default.STATUS_JP_SUCCESS,
   "color-status-success-bg": theme_jaipur$1.default.STATUS_JP_SUCCESS_BG,
+  "color-status-success-bg-hover": theme_jaipur$1.default.STATUS_JP_SUCCESS_BG_HOVER,
   "color-status-warning": theme_jaipur$1.default.STATUS_JP_WARNING,
   "color-status-warning-bg": theme_jaipur$1.default.STATUS_JP_WARNING_BG,
   "color-status-error": theme_jaipur$1.default.STATUS_JP_ERROR,
+  "color-status-error-hover": theme_jaipur$1.default.STATUS_JP_ERROR_HOVER,
   "color-status-error-accent": theme_jaipur$1.default.STATUS_JP_ERROR_ACCENT,
   "color-status-error-bg": theme_jaipur$1.default.STATUS_JP_ERROR_BG,
   "color-status-info": theme_jaipur$1.default.STATUS_JP_INFO,
@@ -229,6 +232,36 @@ var theme_jaipur = {
   "component-input-padding-block": "0.3125rem",
   "component-input-padding-inline": "0.625rem",
   "component-input-content-margin-block": "0.4375rem",
+  "component-autocomplete-inline-size": "calc(var(--space-32) * 2 + var(--space-16))",
+  "component-autocomplete-border-success": theme_jaipur$1.default.STATUS_JP_SUCCESS,
+  "component-autocomplete-end-icon-gap": "var(--space-1)",
+  "component-autocomplete-icon-size": "var(--component-input-icon-size)",
+  "component-autocomplete-clear-size": "var(--space-6)",
+  "component-autocomplete-clear-radius": "var(--radius-xs)",
+  "component-autocomplete-clear-icon": theme_jaipur$1.default.NEUTRAL_JP_600,
+  "component-autocomplete-clear-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
+  "component-autocomplete-chevron": theme_jaipur$1.default.NEUTRAL_JP_600,
+  "component-autocomplete-popup-bg": theme_jaipur$1.default.NEUTRAL_JP_0,
+  "component-autocomplete-popup-border": theme_jaipur$1.default.NEUTRAL_JP_200,
+  "component-autocomplete-popup-radius": "var(--radius-md)",
+  "component-autocomplete-popup-shadow": "var(--shadow-raised)",
+  "component-autocomplete-popup-offset": "var(--space-2)",
+  "component-autocomplete-popup-z-index": "1001",
+  "component-autocomplete-list-max-height": "13.75rem",
+  "component-autocomplete-list-padding": "var(--space-1)",
+  "component-autocomplete-option-min-height": "var(--component-input-height-l)",
+  "component-autocomplete-option-padding-block": "var(--component-input-padding-block)",
+  "component-autocomplete-option-padding-inline": "var(--component-input-padding-inline)",
+  "component-autocomplete-option-radius": "var(--radius-xs)",
+  "component-autocomplete-option-gap": "var(--space-2)",
+  "component-autocomplete-option-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
+  "component-autocomplete-option-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-autocomplete-option-text-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-autocomplete-option-text-disabled": theme_jaipur$1.default.NEUTRAL_JP_400,
+  "component-autocomplete-option-description": theme_jaipur$1.default.NEUTRAL_JP_600,
+  "component-autocomplete-description-offset": "var(--space-1)",
+  "component-autocomplete-message-text": theme_jaipur$1.default.NEUTRAL_JP_600,
+  "component-autocomplete-message-padding": "var(--space-4)",
   "component-editable-icon-size": "1rem",
   "component-code-field-height-m": "3rem",
   "component-code-field-height-l": "3.5rem",
@@ -277,82 +310,6 @@ var theme_jaipur = {
   "component-switch-thumb-size": "1rem",
   "component-switch-thumb-offset": "0.125rem",
   "component-switch-thumb-translate": "1.125rem",
-  "component-button-font-size-xs": "0.75rem",
-  "component-button-font-size-s": "0.8125rem",
-  "component-button-font-size-m": "0.9375rem",
-  "component-button-font-size-l": "1.125rem",
-  "component-button-height-xs": "1.8125rem",
-  "component-button-height-s": "2rem",
-  "component-button-height-m": "2.25rem",
-  "component-button-height-l": "2.625rem",
-  "component-button-radius": "1.125rem",
-  "component-button-radius-lg": "1.5rem",
-  "component-button-primary-bg": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-primary-border": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-primary-text": theme_jaipur$1.default.BRAND_JP_PINK,
-  "component-button-primary-bg-hover": theme_jaipur$1.default.BRAND_JP_INK,
-  "component-button-primary-border-hover": theme_jaipur$1.default.BRAND_JP_INK,
-  "component-button-primary-text-hover": theme_jaipur$1.default.BRAND_JP_PINK,
-  "component-button-primary-bg-pressed": theme_jaipur$1.default.BRAND_JP_PINK,
-  "component-button-primary-border-pressed": theme_jaipur$1.default.BRAND_JP_PINK,
-  "component-button-primary-text-pressed": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-secondary-bg": theme_jaipur$1.default.NEUTRAL_JP_200,
-  "component-button-secondary-border": theme_jaipur$1.default.NEUTRAL_JP_300,
-  "component-button-secondary-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-secondary-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_300,
-  "component-button-secondary-border-hover": theme_jaipur$1.default.NEUTRAL_JP_500,
-  "component-button-secondary-text-hover": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-secondary-bg-pressed": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-secondary-border-pressed": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-secondary-text-pressed": theme_jaipur$1.default.BRAND_JP_PINK,
-  "component-button-outline-bg": theme_jaipur$1.default.NEUTRAL_JP_0,
-  "component-button-outline-border": theme_jaipur$1.default.NEUTRAL_JP_300,
-  "component-button-outline-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-outline-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
-  "component-button-outline-border-hover": theme_jaipur$1.default.NEUTRAL_JP_500,
-  "component-button-outline-text-hover": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-outline-bg-pressed": theme_jaipur$1.default.NEUTRAL_JP_200,
-  "component-button-outline-border-pressed": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-outline-text-pressed": theme_jaipur$1.default.BRAND_JP_INK,
-  "component-button-pseudo-bg": theme_jaipur$1.default.NEUTRAL_JP_50,
-  "component-button-pseudo-border": theme_jaipur$1.default.NEUTRAL_JP_50,
-  "component-button-pseudo-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-pseudo-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
-  "component-button-pseudo-border-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
-  "component-button-pseudo-text-hover": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-pseudo-bg-pressed": theme_jaipur$1.default.NEUTRAL_JP_200,
-  "component-button-pseudo-border-pressed": theme_jaipur$1.default.NEUTRAL_JP_200,
-  "component-button-pseudo-text-pressed": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-clear-bg": "transparent",
-  "component-button-clear-border": "transparent",
-  "component-button-clear-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-clear-bg-hover": "transparent",
-  "component-button-clear-border-hover": "transparent",
-  "component-button-clear-text-hover": theme_jaipur$1.default.PINK_JP_800,
-  "component-button-clear-bg-pressed": "transparent",
-  "component-button-clear-border-pressed": "transparent",
-  "component-button-clear-text-pressed": theme_jaipur$1.default.BRAND_JP_INK,
-  "component-button-alert-bg": theme_jaipur$1.default.STATUS_JP_ERROR,
-  "component-button-alert-border": theme_jaipur$1.default.STATUS_JP_ERROR,
-  "component-button-alert-text": theme_jaipur$1.default.BRAND_JP_WHITE,
-  "component-button-alert-bg-hover": theme_jaipur$1.default.PINK_JP_600,
-  "component-button-alert-border-hover": theme_jaipur$1.default.PINK_JP_600,
-  "component-button-alert-text-hover": theme_jaipur$1.default.BRAND_JP_WHITE,
-  "component-button-alert-bg-pressed": theme_jaipur$1.default.STATUS_JP_ERROR_ACCENT,
-  "component-button-alert-border-pressed": theme_jaipur$1.default.STATUS_JP_ERROR_ACCENT,
-  "component-button-alert-text-pressed": theme_jaipur$1.default.BRAND_JP_WHITE,
-  "component-button-success-bg": theme_jaipur$1.default.STATUS_JP_SUCCESS_BG,
-  "component-button-success-border": theme_jaipur$1.default.STATUS_JP_SUCCESS_BG,
-  "component-button-success-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-success-bg-hover": theme_jaipur$1.default.LIME_JP_200,
-  "component-button-success-border-hover": theme_jaipur$1.default.LIME_JP_200,
-  "component-button-success-text-hover": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
-  "component-button-success-bg-pressed": theme_jaipur$1.default.STATUS_JP_SUCCESS,
-  "component-button-success-border-pressed": theme_jaipur$1.default.STATUS_JP_SUCCESS,
-  "component-button-success-text-pressed": theme_jaipur$1.default.BRAND_JP_WHITE,
-  "component-button-bg-disabled": theme_jaipur$1.default.NEUTRAL_JP_100,
-  "component-button-border-disabled": theme_jaipur$1.default.NEUTRAL_JP_100,
-  "component-button-text-disabled": theme_jaipur$1.default.NEUTRAL_JP_400,
   "component-menu-bg": theme_jaipur$1.default.NEUTRAL_JP_0,
   "component-menu-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-menu-border": theme_jaipur$1.default.NEUTRAL_JP_200,
@@ -362,6 +319,46 @@ var theme_jaipur = {
   "component-menu-item-bg-pressed": theme_jaipur$1.default.NEUTRAL_JP_200,
   "component-menu-item-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-menu-item-text-disabled": theme_jaipur$1.default.NEUTRAL_JP_400,
+  "component-list-bg": theme_jaipur$1.default.NEUTRAL_JP_0,
+  "component-list-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-list-text-disabled": theme_jaipur$1.default.NEUTRAL_JP_400,
+  "component-list-description": theme_jaipur$1.default.NEUTRAL_JP_700,
+  "component-list-description-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-list-divider": theme_jaipur$1.default.NEUTRAL_JP_200,
+  "component-list-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
+  "component-list-container-radius": "var(--radius-lg)",
+  "component-list-container-padding": "var(--space-1)",
+  "component-list-items-gap": "var(--space-1)",
+  "component-list-item-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
+  "component-list-item-bg-selected": theme_jaipur$1.default.NEUTRAL_JP_100,
+  "component-list-item-text-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-list-item-text-disabled": theme_jaipur$1.default.NEUTRAL_JP_400,
+  "component-list-item-radius": "var(--radius-md)",
+  "component-list-item-surface-radius": "var(--radius-md)",
+  "component-list-item-gap": "var(--space-3)",
+  "component-list-item-min-height-s": "calc(var(--space-10) + var(--space-1))",
+  "component-list-item-min-height-m": "calc(var(--space-10) + var(--space-4))",
+  "component-list-item-min-height-l": "var(--space-16)",
+  "component-list-item-min-height-compact": "calc(var(--space-10) + var(--space-1))",
+  "component-list-item-padding-block": "var(--component-input-padding-inline)",
+  "component-list-item-padding-block-compact": "var(--space-1)",
+  "component-list-item-padding-inline": "var(--space-3)",
+  "component-list-item-padding-inline-l": "var(--space-4)",
+  "component-list-font-size-s": "var(--font-size-text-sm)",
+  "component-list-line-height-s": "var(--line-height-text-sm)",
+  "component-list-font-size-m": "var(--font-size-text-md)",
+  "component-list-line-height-m": "var(--line-height-text-md)",
+  "component-list-font-size-l": "var(--font-size-text-md)",
+  "component-list-line-height-l": "var(--line-height-text-md)",
+  "component-list-description-font-size": "var(--font-size-text-xs)",
+  "component-list-description-line-height": "var(--line-height-text-xs)",
+  "component-list-description-offset": "var(--space-1)",
+  "component-list-section-gap": "var(--space-3)",
+  "component-list-section-title": theme_jaipur$1.default.NEUTRAL_JP_700,
+  "component-list-section-title-font-size": "var(--font-size-text-xs)",
+  "component-list-section-title-line-height": "var(--line-height-text-xs)",
+  "component-list-section-title-padding-block-start": "var(--space-2)",
+  "component-list-section-title-padding-block-end": "var(--component-input-padding-block)",
   "component-tab-bg": theme_jaipur$1.default.NEUTRAL_JP_0,
   "component-tab-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
   "component-tab-bg-pressed": theme_jaipur$1.default.NEUTRAL_JP_200,

package/esm/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { ForwardedRef } from "react";
+import type { AutocompleteOption, AutocompleteProps } from "./index.props";
+export declare const Autocomplete: <T extends AutocompleteOption = AutocompleteOption>(props: AutocompleteProps<T> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => React.ReactElement;

package/esm/Autocomplete/Autocomplete.js

@@ -0,0 +1,288 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { __rest } from 'tslib';
+import React, { forwardRef, useId, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import clsx from 'clsx';
+import { Input } from '../Input/index.js';
+import { Chevron } from '../Icons/Chevron.js';
+import { Cross } from '../Icons/Cross.js';
+import styles from './Autocomplete.module.css';
+
+var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
+  var options = props.options,
+    value = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
+    onValueChange = props.onValueChange,
+    onOptionSelect = props.onOptionSelect,
+    filterOption = props.filterOption,
+    renderOption = props.renderOption,
+    _props$getOptionKey = props.getOptionKey,
+    getOptionKey = _props$getOptionKey === void 0 ? function (option) {
+      return option.value;
+    } : _props$getOptionKey,
+    _props$minQueryLength = props.minQueryLength,
+    minQueryLength = _props$minQueryLength === void 0 ? 0 : _props$minQueryLength,
+    open = props.open,
+    _props$defaultOpen = props.defaultOpen,
+    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
+    onOpenChange = props.onOpenChange,
+    _props$openOnFocus = props.openOnFocus,
+    openOnFocus = _props$openOnFocus === void 0 ? true : _props$openOnFocus,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    _props$loadingText = props.loadingText,
+    loadingText = _props$loadingText === void 0 ? "Loading..." : _props$loadingText,
+    _props$emptyText = props.emptyText,
+    emptyText = _props$emptyText === void 0 ? "No results found" : _props$emptyText,
+    label = props.label,
+    hint = props.hint,
+    hasError = props.hasError,
+    success = props.success,
+    _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? true : _props$clearable,
+    _props$clearLabel = props.clearLabel,
+    clearLabel = _props$clearLabel === void 0 ? "Clear value" : _props$clearLabel,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "m" : _props$size,
+    _props$listMaxHeight = props.listMaxHeight,
+    listMaxHeight = _props$listMaxHeight === void 0 ? "var(--component-autocomplete-list-max-height)" : _props$listMaxHeight,
+    containerClassName = props.containerClassName,
+    className = props.className,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    required = props.required,
+    id = props.id,
+    _onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onKeyDown = props.onKeyDown,
+    inputProps = __rest(props, ["options", "value", "defaultValue", "onValueChange", "onOptionSelect", "filterOption", "renderOption", "getOptionKey", "minQueryLength", "open", "defaultOpen", "onOpenChange", "openOnFocus", "loading", "loadingText", "emptyText", "label", "hint", "hasError", "success", "clearable", "clearLabel", "size", "listMaxHeight", "containerClassName", "className", "disabled", "readOnly", "required", "id", "onFocus", "onBlur", "onKeyDown"]);
+  var generatedId = useId();
+  var inputId = id !== null && id !== void 0 ? id : generatedId;
+  var listId = "".concat(inputId, "-listbox");
+  var controlled = value !== undefined;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState(defaultOpen),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalOpen = _useState4[0],
+    setInternalOpen = _useState4[1];
+  var _useState5 = useState(-1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeIndex = _useState6[0],
+    setActiveIndex = _useState6[1];
+  var rootRef = useRef(null);
+  var controlRef = useRef(null);
+  var inputRef = useRef(null);
+  var optionRefs = useRef([]);
+  var query = controlled ? value : internalValue;
+  var isOpen = open !== null && open !== void 0 ? open : internalOpen;
+  var setInputRef = function setInputRef(node) {
+    inputRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  };
+  var setOpen = useCallback(function (next) {
+    if (open === undefined) setInternalOpen(next);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    if (!next) setActiveIndex(-1);
+  }, [onOpenChange, open]);
+  var filteredOptions = useMemo(function () {
+    if (query.length < minQueryLength) return [];
+    var normalized = query.trim().toLocaleLowerCase();
+    var predicate = filterOption !== null && filterOption !== void 0 ? filterOption : function (option) {
+      return option.label.toLocaleLowerCase().includes(normalized);
+    };
+    return options.filter(function (option) {
+      return predicate(option, query);
+    });
+  }, [filterOption, minQueryLength, options, query]);
+  var showPopup = isOpen && !disabled && !readOnly && query.length >= minQueryLength;
+  useEffect(function () {
+    if (!showPopup) return undefined;
+    var closeOutside = function closeOutside(event) {
+      var _a;
+      if (!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) setOpen(false);
+    };
+    document.addEventListener("mousedown", closeOutside);
+    return function () {
+      return document.removeEventListener("mousedown", closeOutside);
+    };
+  }, [setOpen, showPopup]);
+  useEffect(function () {
+    setActiveIndex(-1);
+  }, [query]);
+  useEffect(function () {
+    var _a;
+    if (activeIndex >= 0) {
+      (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [activeIndex]);
+  var changeValue = function changeValue(next) {
+    if (!controlled) setInternalValue(next);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+  };
+  var selectOption = function selectOption(option) {
+    var _a;
+    if (option.disabled) return;
+    changeValue(option.label);
+    onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(option);
+    setOpen(false);
+    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  var moveActive = function moveActive(direction) {
+    if (!showPopup) setOpen(true);
+    if (!filteredOptions.length) return;
+    var next = activeIndex;
+    for (var attempts = 0; attempts < filteredOptions.length; attempts += 1) {
+      next = (next + direction + filteredOptions.length) % filteredOptions.length;
+      if (!filteredOptions[next].disabled) break;
+    }
+    setActiveIndex(next);
+  };
+  var handleChange = function handleChange(_event, next) {
+    changeValue(next);
+    setOpen(next.length >= minQueryLength);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      moveActive(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Enter" && showPopup && activeIndex >= 0) {
+      event.preventDefault();
+      selectOption(filteredOptions[activeIndex]);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+    } else if (event.key === "Home" && showPopup) {
+      event.preventDefault();
+      var first = filteredOptions.findIndex(function (option) {
+        return !option.disabled;
+      });
+      setActiveIndex(first);
+    } else if (event.key === "End" && showPopup) {
+      event.preventDefault();
+      var last = filteredOptions.length - 1;
+      while (last >= 0 && filteredOptions[last].disabled) last -= 1;
+      setActiveIndex(last);
+    } else if (event.key === "Tab") {
+      setOpen(false);
+    }
+  };
+  var clearButton = clearable && query && !disabled && !readOnly && (/*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles.clear,
+    "aria-label": clearLabel,
+    onMouseDown: function onMouseDown(event) {
+      return event.preventDefault();
+    },
+    onClick: function onClick() {
+      var _a;
+      changeValue("");
+      setOpen(openOnFocus && minQueryLength === 0);
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, /*#__PURE__*/React.createElement(Cross, null)));
+  var endIcon = /*#__PURE__*/React.createElement("span", {
+    className: styles["end-icons"]
+  }, clearButton, /*#__PURE__*/React.createElement(Chevron, {
+    className: clsx(styles.chevron, _defineProperty({}, styles["chevron_open"], showPopup)),
+    "aria-hidden": "true"
+  }));
+  var popup = showPopup && (/*#__PURE__*/React.createElement("div", {
+    className: styles.popup
+  }, /*#__PURE__*/React.createElement("ul", {
+    id: listId,
+    role: "listbox",
+    "aria-label": typeof label === "string" ? label : undefined,
+    className: styles.list,
+    style: {
+      maxHeight: listMaxHeight
+    }
+  }, loading ? (/*#__PURE__*/React.createElement("li", {
+    className: styles.message
+  }, loadingText)) : filteredOptions.length === 0 ? (/*#__PURE__*/React.createElement("li", {
+    className: styles.message
+  }, emptyText)) : filteredOptions.map(function (option, index) {
+    var active = index === activeIndex;
+    var selected = option.label === query;
+    return /*#__PURE__*/React.createElement("li", {
+      ref: function ref(node) {
+        optionRefs.current[index] = node;
+      },
+      id: "".concat(listId, "-").concat(index),
+      key: getOptionKey(option),
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": option.disabled || undefined,
+      className: clsx(styles.option, _defineProperty(_defineProperty(_defineProperty({}, styles.active, active), styles.selected, selected), styles["option_disabled"], option.disabled)),
+      onMouseDown: function onMouseDown(event) {
+        return event.preventDefault();
+      },
+      onMouseEnter: function onMouseEnter() {
+        if (!option.disabled) setActiveIndex(index);
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          selectOption(option);
+        }
+      },
+      onClick: function onClick() {
+        return selectOption(option);
+      }
+    }, renderOption ? renderOption(option, {
+      active: active,
+      selected: selected
+    }) : (/*#__PURE__*/React.createElement(React.Fragment, null, option.contentLeft && (/*#__PURE__*/React.createElement("span", {
+      className: styles.side
+    }, option.contentLeft)), /*#__PURE__*/React.createElement("span", {
+      className: styles["option-text"]
+    }, /*#__PURE__*/React.createElement("span", null, option.label), option.description && (/*#__PURE__*/React.createElement("small", null, option.description))), option.contentRight && (/*#__PURE__*/React.createElement("span", {
+      className: styles.side
+    }, option.contentRight)))));
+  }))));
+  return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
+    className: clsx(styles.root, styles["size_".concat(size)], _defineProperty({}, styles.success, success), containerClassName)
+  }, /*#__PURE__*/React.createElement(Input, Object.assign({}, inputProps, {
+    id: inputId,
+    type: "text",
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": showPopup,
+    "aria-controls": showPopup ? listId : undefined,
+    "aria-activedescendant": activeIndex >= 0 ? "".concat(listId, "-").concat(activeIndex) : undefined,
+    "aria-invalid": hasError || undefined,
+    autoComplete: "off",
+    className: clsx(styles.field, className),
+    controlAfter: popup,
+    controlClassName: styles.control,
+    controlRef: controlRef,
+    disabled: disabled,
+    endIcon: endIcon,
+    hasError: hasError,
+    hint: hint,
+    inputRef: setInputRef,
+    label: label,
+    readOnly: readOnly,
+    required: required,
+    size: size,
+    value: query,
+    onBlur: onBlur,
+    onChange: handleChange,
+    onFocus: function onFocus(event) {
+      _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
+      if (openOnFocus && query.length >= minQueryLength) setOpen(true);
+    },
+    onKeyDown: handleKeyDown
+  })));
+};
+var Autocomplete = /*#__PURE__*/forwardRef(AutocompleteInner);
+
+export { Autocomplete };

package/esm/Autocomplete/Autocomplete.module.css

@@ -0,0 +1,147 @@
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  width: var(--component-autocomplete-inline-size);
+}
+
+.field {
+  width: 100%;
+}
+
+.control {
+  position: relative;
+  width: 100%;
+}
+.control > div {
+  width: 100%;
+}
+
+.success {
+  --component-input-border: var(--component-autocomplete-border-success);
+  --component-input-border-focus: var(--component-autocomplete-border-success);
+}
+
+.end-icons {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--component-autocomplete-end-icon-gap);
+}
+
+.clear {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--component-autocomplete-clear-radius);
+  color: var(--component-autocomplete-clear-icon);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  height: var(--component-autocomplete-clear-size);
+  justify-content: center;
+  padding: var(--space-0);
+  width: var(--component-autocomplete-clear-size);
+}
+.clear:hover {
+  background: var(--component-autocomplete-clear-bg-hover);
+}
+.clear svg {
+  height: var(--component-autocomplete-icon-size);
+  width: var(--component-autocomplete-icon-size);
+}
+
+.chevron {
+  color: var(--component-autocomplete-chevron);
+  flex: none;
+  height: var(--component-autocomplete-icon-size);
+  transition: transform 0.16s ease-in;
+  width: var(--component-autocomplete-icon-size);
+}
+
+.chevron_open {
+  transform: rotate(180deg);
+}
+
+.popup {
+  background: var(--component-autocomplete-popup-bg);
+  border-color: var(--component-autocomplete-popup-border);
+  border-radius: var(--component-autocomplete-popup-radius);
+  border-style: solid;
+  border-width: var(--border-width-hairline);
+  box-shadow: var(--component-autocomplete-popup-shadow);
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: calc(100% + var(--component-autocomplete-popup-offset));
+  z-index: var(--component-autocomplete-popup-z-index);
+}
+
+.list {
+  box-sizing: border-box;
+  list-style: none;
+  margin: var(--space-0);
+  overflow: auto;
+  padding: var(--component-autocomplete-list-padding);
+}
+
+.option {
+  align-items: center;
+  border-radius: var(--component-autocomplete-option-radius);
+  color: var(--component-autocomplete-option-text);
+  cursor: pointer;
+  display: flex;
+  gap: var(--component-autocomplete-option-gap);
+  min-height: var(--component-autocomplete-option-min-height);
+  padding: var(--component-autocomplete-option-padding-block) var(--component-autocomplete-option-padding-inline);
+}
+.option:hover {
+  background: var(--component-autocomplete-option-bg-hover);
+}
+
+.active {
+  background: var(--component-autocomplete-option-bg-hover);
+}
+
+.selected {
+  color: var(--component-autocomplete-option-text-selected);
+}
+
+.option_disabled {
+  color: var(--component-autocomplete-option-text-disabled);
+  cursor: not-allowed;
+}
+.option_disabled:hover {
+  background: transparent;
+}
+
+.option-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.option-text > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.option-text small {
+  color: var(--component-autocomplete-option-description);
+  font-size: var(--font-size-text-xs);
+  line-height: var(--line-height-text-xs);
+  margin-top: var(--component-autocomplete-description-offset);
+}
+
+.side {
+  align-items: center;
+  display: inline-flex;
+  flex: none;
+}
+
+.message {
+  color: var(--component-autocomplete-message-text);
+  font-size: var(--font-size-text-sm);
+  line-height: var(--line-height-text-sm);
+  padding: var(--component-autocomplete-message-padding);
+  text-align: center;
+}

package/esm/Autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export { Autocomplete } from "./Autocomplete";
+export type { AutocompleteOption, AutocompleteOptionState, AutocompleteProps, AutocompleteSize, } from "./index.props";

package/esm/Autocomplete/index.props.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { InputProps } from "../Input/index.props";
+export interface AutocompleteOption {
+    contentLeft?: ReactNode;
+    contentRight?: ReactNode;
+    description?: string;
+    disabled?: boolean;
+    label: string;
+    value: string;
+}
+export type AutocompleteSize = "s" | "m" | "l";
+export interface AutocompleteOptionState {
+    active: boolean;
+    selected: boolean;
+}
+export interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOption> extends Omit<InputProps, "controlAfter" | "controlClassName" | "controlRef" | "defaultValue" | "endIcon" | "inputRef" | "onChange" | "size" | "value"> {
+    clearLabel?: string;
+    clearable?: boolean;
+    containerClassName?: string;
+    defaultOpen?: boolean;
+    defaultValue?: string;
+    emptyText?: ReactNode;
+    filterOption?: (option: T, query: string) => boolean;
+    getOptionKey?: (option: T) => string;
+    listMaxHeight?: CSSProperties["maxHeight"];
+    loading?: boolean;
+    loadingText?: ReactNode;
+    minQueryLength?: number;
+    onOpenChange?: (open: boolean) => void;
+    onOptionSelect?: (option: T) => void;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    openOnFocus?: boolean;
+    options: T[];
+    renderOption?: (option: T, state: AutocompleteOptionState) => ReactNode;
+    size?: AutocompleteSize;
+    success?: boolean;
+    value?: string;
+}