@tiny-design/react 1.0.4

package/es/anchor/style/_index.scss

@@ -0,0 +1,83 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-anchor {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  position: relative;
+  background-color: var(--ty-anchor-bg);
+
+  &__ink {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+
+    &:before {
+      content: '';
+      position: relative;
+      display: block;
+      width: 2px;
+      height: 100%;
+      margin: 0 auto;
+      background-color: var(--ty-anchor-ink-bg);
+    }
+  }
+
+  &__ink-ball {
+    position: absolute;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    background-color: var(--ty-anchor-ball-bg);
+    border: 2px solid var(--ty-color-primary);
+    border-radius: 8px;
+    transform: translateX(-50%);
+    transition: top .3s ease-in-out;
+  }
+
+  &__link {
+    padding: 7px 0 7px 16px;
+
+    .#{$prefix}-anchor {
+      border: 0;
+    }
+
+    &_active {
+      & > a {
+        color: var(--ty-color-primary);
+      }
+    }
+  }
+
+  &__link-title {
+    display: block;
+    overflow: hidden;
+    color: var(--ty-color-text-secondary);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    border-left: 2px solid transparent;
+
+    &:hover {
+      color: var(--ty-color-primary);
+      text-decoration: none;
+    }
+
+    &:not(:only-child) {
+      margin-bottom: 5px;
+    }
+  }
+
+  &_line {
+    .#{$prefix}-anchor__ink-ball {
+      width: 2px;
+      border: 0;
+      border-radius: 0;
+      background-color: var(--ty-color-primary);
+      transition: top .3s ease-in-out, height .3s ease-in-out;
+    }
+  }
+}

package/es/anchor/style/index.css

@@ -0,0 +1,67 @@
+.ty-anchor {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  position: relative;
+  background-color: var(--ty-anchor-bg);
+}
+.ty-anchor__ink {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+.ty-anchor__ink:before {
+  content: "";
+  position: relative;
+  display: block;
+  width: 2px;
+  height: 100%;
+  margin: 0 auto;
+  background-color: var(--ty-anchor-ink-bg);
+}
+.ty-anchor__ink-ball {
+  position: absolute;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  background-color: var(--ty-anchor-ball-bg);
+  border: 2px solid var(--ty-color-primary);
+  border-radius: 8px;
+  transform: translateX(-50%);
+  transition: top 0.3s ease-in-out;
+}
+.ty-anchor__link {
+  padding: 7px 0 7px 16px;
+}
+.ty-anchor__link .ty-anchor {
+  border: 0;
+}
+.ty-anchor__link_active > a {
+  color: var(--ty-color-primary);
+}
+.ty-anchor__link-title {
+  display: block;
+  overflow: hidden;
+  color: var(--ty-color-text-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-left: 2px solid transparent;
+}
+.ty-anchor__link-title:hover {
+  color: var(--ty-color-primary);
+  text-decoration: none;
+}
+.ty-anchor__link-title:not(:only-child) {
+  margin-bottom: 5px;
+}
+.ty-anchor_line .ty-anchor__ink-ball {
+  width: 2px;
+  border: 0;
+  border-radius: 0;
+  background-color: var(--ty-color-primary);
+  transition: top 0.3s ease-in-out, height 0.3s ease-in-out;
+}

package/es/anchor/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/anchor/style/index.js

@@ -0,0 +1,2 @@
+import "./index.css";
+import "../../sticky/style/index.css";

package/es/anchor/types.d.ts

@@ -0,0 +1,25 @@
+import { BaseProps } from "../_utils/props.js";
+import React from "react";
+
+//#region src/anchor/types.d.ts
+interface AnchorProps extends BaseProps {
+  affix?: boolean;
+  type?: 'dot' | 'line';
+  offsetBottom?: number;
+  offsetTop?: number;
+  getContainer?: () => HTMLElement;
+  onChange?: (currentActiveLink: string) => void;
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>, link: {
+    title: string;
+    href: string;
+  }) => void;
+  children?: React.ReactNode;
+}
+interface AnchorLinkProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElements['a']> {
+  href: string;
+  title: string;
+  children?: React.ReactElement<AnchorLinkProps>[];
+}
+//#endregion
+export { AnchorLinkProps, AnchorProps };
+//# sourceMappingURL=types.d.ts.map

package/es/aspect-ratio/aspect-ratio.d.ts

@@ -0,0 +1,8 @@
+import { AspectRatioProps } from "./types.js";
+import React from "react";
+
+//#region src/aspect-ratio/aspect-ratio.d.ts
+declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/es/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,32 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/aspect-ratio/aspect-ratio.tsx
+const AspectRatio = React.forwardRef((props, ref) => {
+	const { ratio = 1, width = "100%", prefixCls: customisedCls, className, style, children, ...otherProps } = props;
+	const prefixCls = getPrefixCls("aspect-ratio", useContext(ConfigContext).prefixCls, customisedCls);
+	const cls = classNames(prefixCls, className);
+	return /* @__PURE__ */ jsxs("div", {
+		...otherProps,
+		ref,
+		className: cls,
+		style: {
+			...style,
+			width
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: `${prefixCls}__padding`,
+			style: { paddingTop: `${1 / ratio * 100}%` }
+		}), /* @__PURE__ */ jsx("div", {
+			className: `${prefixCls}__inside`,
+			children
+		})]
+	});
+});
+AspectRatio.displayName = "AspectRatio";
+//#endregion
+export { AspectRatio as default };
+
+//# sourceMappingURL=aspect-ratio.js.map

package/es/aspect-ratio/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","names":[],"sources":["../../src/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { AspectRatioProps } from './types';\n\nconst AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>((props, ref) => {\n  const {\n    ratio = 1,\n    width = '100%',\n    prefixCls: customisedCls,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('aspect-ratio', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className);\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={{ ...style, width }}>\n      <div className={`${prefixCls}__padding`} style={{ paddingTop: `${(1 / ratio) * 100}%` }} />\n      <div className={`${prefixCls}__inside`}>{children}</div>\n    </div>\n  );\n});\n\nAspectRatio.displayName = 'AspectRatio';\n\nexport default AspectRatio;\n"],"mappings":";;;;;;AAMA,MAAM,cAAc,MAAM,YAA8C,OAAO,QAAQ;CACrF,MAAM,EACJ,QAAQ,GACR,QAAQ,QACR,WAAW,eACX,WACA,OACA,UACA,GAAG,eACD;CAEJ,MAAM,YAAY,aAAa,gBADT,WAAW,cAAc,CACc,WAAW,cAAc;CACtF,MAAM,MAAM,WAAW,WAAW,UAAU;AAE5C,QACE,qBAAC,OAAD;EAAK,GAAI;EAAiB;EAAK,WAAW;EAAK,OAAO;GAAE,GAAG;GAAO;GAAO;YAAzE,CACE,oBAAC,OAAD;GAAK,WAAW,GAAG,UAAU;GAAY,OAAO,EAAE,YAAY,GAAI,IAAI,QAAS,IAAI,IAAI;GAAI,CAAA,EAC3F,oBAAC,OAAD;GAAK,WAAW,GAAG,UAAU;GAAY;GAAe,CAAA,CACpD;;EAER;AAEF,YAAY,cAAc"}

package/es/aspect-ratio/index.d.ts

@@ -0,0 +1 @@
+import { AspectRatio } from "./aspect-ratio.js";

package/es/aspect-ratio/index.js

@@ -0,0 +1,9 @@
+import '../style/base.css';
+import './style/index.css';
+import AspectRatio from "./aspect-ratio.js";
+//#region src/aspect-ratio/index.tsx
+var aspect_ratio_default = AspectRatio;
+//#endregion
+export { aspect_ratio_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/aspect-ratio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/aspect-ratio/index.tsx"],"sourcesContent":["import AspectRatio from './aspect-ratio';\n\nexport default AspectRatio;\n"],"mappings":";;AAEA,IAAA,uBAAe"}

package/es/aspect-ratio/style/_index.scss

@@ -0,0 +1,22 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-aspect-ratio {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+
+  &__padding {
+    display: block;
+    height: 0;
+  }
+
+  &__inside {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

package/es/aspect-ratio/style/index.css

@@ -0,0 +1,18 @@
+.ty-aspect-ratio {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+}
+.ty-aspect-ratio__padding {
+  display: block;
+  height: 0;
+}
+.ty-aspect-ratio__inside {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}

package/es/aspect-ratio/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/aspect-ratio/style/index.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/aspect-ratio/types.d.ts

@@ -0,0 +1,13 @@
+import { BaseProps } from "../_utils/props.js";
+import React from "react";
+
+//#region src/aspect-ratio/types.d.ts
+interface AspectRatioProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
+  /** the width of the content */
+  width?: number | string;
+  /** the aspect ratio of the content */
+  ratio?: number;
+}
+//#endregion
+export { AspectRatioProps };
+//# sourceMappingURL=types.d.ts.map

package/es/auto-complete/auto-complete.d.ts

@@ -0,0 +1,8 @@
+import { AutoCompleteProps } from "./types.js";
+import React from "react";
+
+//#region src/auto-complete/auto-complete.d.ts
+declare const AutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AutoComplete };
+//# sourceMappingURL=auto-complete.d.ts.map

package/es/auto-complete/auto-complete.js

@@ -0,0 +1,138 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import { useClickOutside } from "../_utils/hooks.js";
+import { useCombobox } from "../_utils/useCombobox.js";
+import Input from "../input/input.js";
+import popup_default from "../popup/index.js";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/auto-complete/auto-complete.tsx
+const AutoComplete = React.forwardRef((props, ref) => {
+	const { options = [], defaultValue = "", placeholder, disabled = false, allowClear = false, defaultActiveFirstOption = true, defaultOpen = false, notFoundContent, size, filterOption = true, onChange, onSelect, onSearch, onFocus, onBlur, className, style, prefixCls: customisedCls } = props;
+	const configContext = useContext(ConfigContext);
+	const prefixCls = getPrefixCls("auto-complete", configContext.prefixCls, customisedCls);
+	const autoCompleteSize = size || configContext.componentSize || "md";
+	const [inputValue, setInputValue] = useState("value" in props ? props.value : defaultValue);
+	const wrapperRef = useRef(null);
+	const inputRef = useRef(null);
+	const handleOptionSelect = useCallback((opt) => {
+		if (opt.disabled) return;
+		if (!("value" in props)) setInputValue(opt.value);
+		onChange?.(opt.value);
+		onSelect?.(opt.value, opt);
+		combo.closeDropdown();
+	}, [
+		onChange,
+		onSelect,
+		props
+	]);
+	const combo = useCombobox({
+		items: options,
+		searchValue: inputValue,
+		filterOption,
+		isOpen: "open" in props ? props.open : void 0,
+		defaultOpen,
+		disabled,
+		defaultActiveFirstOption,
+		onSelect: handleOptionSelect
+	});
+	const setWrapperRef = useCallback((node) => {
+		wrapperRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const cls = classNames(prefixCls, className, {
+		[`${prefixCls}_disabled`]: disabled,
+		[`${prefixCls}_open`]: combo.isOpen
+	});
+	useClickOutside(wrapperRef, () => {
+		if (!("open" in props)) combo.closeDropdown();
+	});
+	useEffect(() => {
+		if ("value" in props) setInputValue(props.value);
+	}, [props.value]);
+	const handleInputChange = (e) => {
+		const val = e.target.value;
+		if (!("value" in props)) setInputValue(val);
+		onChange?.(val);
+		onSearch?.(val);
+		combo.openDropdown();
+	};
+	const handleFocus = (e) => {
+		combo.openDropdown();
+		onFocus?.(e);
+	};
+	const handleBlur = (e) => {
+		onBlur?.(e);
+	};
+	const handleClear = () => {
+		if (!("value" in props)) setInputValue("");
+		onChange?.("");
+		onSearch?.("");
+	};
+	const renderDropdown = () => {
+		if (combo.filteredItems.length === 0) {
+			if (notFoundContent) return /* @__PURE__ */ jsx("div", {
+				className: `${prefixCls}__empty`,
+				children: notFoundContent
+			});
+			return null;
+		}
+		return combo.filteredItems.map((opt, index) => {
+			return /* @__PURE__ */ jsx("li", {
+				role: "option",
+				className: classNames(`${prefixCls}-option`, {
+					[`${prefixCls}-option_active`]: index === combo.focusedIndex,
+					[`${prefixCls}-option_disabled`]: opt.disabled
+				}),
+				"aria-selected": index === combo.focusedIndex,
+				"aria-disabled": opt.disabled,
+				onClick: () => handleOptionSelect(opt),
+				onMouseEnter: () => combo.setFocusedIndex(index),
+				children: opt.label ?? opt.value
+			}, opt.value);
+		});
+	};
+	const dropdownContent = renderDropdown();
+	const showDropdown = combo.isOpen && dropdownContent !== null;
+	const renderOverlay = () => {
+		const selectorWidth = wrapperRef.current?.offsetWidth;
+		return /* @__PURE__ */ jsx("ul", {
+			className: `${prefixCls}__dropdown`,
+			style: { minWidth: selectorWidth || void 0 },
+			role: "listbox",
+			children: dropdownContent
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: setWrapperRef,
+		className: cls,
+		style,
+		onKeyDown: combo.handleKeyDown,
+		children: /* @__PURE__ */ jsx(popup_default, {
+			trigger: "manual",
+			placement: "bottom",
+			arrow: false,
+			visible: showDropdown,
+			content: renderOverlay(),
+			children: /* @__PURE__ */ jsx(Input, {
+				ref: inputRef,
+				size: autoCompleteSize,
+				placeholder,
+				disabled,
+				value: inputValue,
+				clearable: allowClear,
+				onChange: handleInputChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				onClearClick: handleClear
+			})
+		})
+	});
+});
+AutoComplete.displayName = "AutoComplete";
+//#endregion
+export { AutoComplete as default };
+
+//# sourceMappingURL=auto-complete.js.map

package/es/auto-complete/auto-complete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete.js","names":["Popup"],"sources":["../../src/auto-complete/auto-complete.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useClickOutside } from '../_utils/hooks';\nimport { useCombobox } from '../_utils/useCombobox';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { AutoCompleteOption, AutoCompleteProps } from './types';\nimport Input from '../input/input';\nimport Popup from '../popup';\n\nconst AutoComplete = React.forwardRef<HTMLDivElement, AutoCompleteProps>(\n  (props, ref) => {\n    const {\n      options = [],\n      defaultValue = '',\n      placeholder,\n      disabled = false,\n      allowClear = false,\n      defaultActiveFirstOption = true,\n      defaultOpen = false,\n      notFoundContent,\n      size,\n      filterOption = true,\n      onChange,\n      onSelect,\n      onSearch,\n      onFocus,\n      onBlur,\n      className,\n      style,\n      prefixCls: customisedCls,\n    } = props;\n\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('auto-complete', configContext.prefixCls, customisedCls);\n    const autoCompleteSize = size || configContext.componentSize || 'md';\n\n    const [inputValue, setInputValue] = useState(\n      'value' in props ? (props.value as string) : defaultValue\n    );\n\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const handleOptionSelect = useCallback(\n      (opt: AutoCompleteOption) => {\n        if (opt.disabled) return;\n        if (!('value' in props)) setInputValue(opt.value);\n        onChange?.(opt.value);\n        onSelect?.(opt.value, opt);\n        combo.closeDropdown();\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [onChange, onSelect, props]\n    );\n\n    const combo = useCombobox<AutoCompleteOption>({\n      items: options,\n      searchValue: inputValue,\n      filterOption,\n      isOpen: 'open' in props ? (props.open as boolean) : undefined,\n      defaultOpen,\n      disabled,\n      defaultActiveFirstOption,\n      onSelect: handleOptionSelect,\n    });\n\n    // Merge refs\n    const setWrapperRef = useCallback(\n      (node: HTMLDivElement | null) => {\n        wrapperRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      },\n      [ref]\n    );\n\n    const cls = classNames(prefixCls, className, {\n      [`${prefixCls}_disabled`]: disabled,\n      [`${prefixCls}_open`]: combo.isOpen,\n    });\n\n    // Click outside to close\n    useClickOutside(wrapperRef, () => {\n      if (!('open' in props)) {\n        combo.closeDropdown();\n      }\n    });\n\n    // Controlled value\n    useEffect(() => {\n      if ('value' in props) setInputValue(props.value as string);\n    }, [props.value]);\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const val = e.target.value;\n      if (!('value' in props)) setInputValue(val);\n      onChange?.(val);\n      onSearch?.(val);\n      combo.openDropdown();\n    };\n\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n      combo.openDropdown();\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e);\n    };\n\n    const handleClear = () => {\n      if (!('value' in props)) setInputValue('');\n      onChange?.('');\n      onSearch?.('');\n    };\n\n    const renderDropdown = () => {\n      if (combo.filteredItems.length === 0) {\n        if (notFoundContent) {\n          return <div className={`${prefixCls}__empty`}>{notFoundContent}</div>;\n        }\n        return null;\n      }\n\n      return combo.filteredItems.map((opt, index) => {\n        const optCls = classNames(`${prefixCls}-option`, {\n          [`${prefixCls}-option_active`]: index === combo.focusedIndex,\n          [`${prefixCls}-option_disabled`]: opt.disabled,\n        });\n        return (\n          <li\n            key={opt.value}\n            role=\"option\"\n            className={optCls}\n            aria-selected={index === combo.focusedIndex}\n            aria-disabled={opt.disabled}\n            onClick={() => handleOptionSelect(opt)}\n            onMouseEnter={() => combo.setFocusedIndex(index)}>\n            {opt.label ?? opt.value}\n          </li>\n        );\n      });\n    };\n\n    const dropdownContent = renderDropdown();\n    const showDropdown = combo.isOpen && dropdownContent !== null;\n\n    const renderOverlay = () => {\n      const selectorWidth = wrapperRef.current?.offsetWidth;\n      return (\n        <ul\n          className={`${prefixCls}__dropdown`}\n          style={{ minWidth: selectorWidth || undefined }}\n          role=\"listbox\">\n          {dropdownContent}\n        </ul>\n      );\n    };\n\n    return (\n      <div\n        ref={setWrapperRef}\n        className={cls}\n        style={style}\n        onKeyDown={combo.handleKeyDown}>\n        <Popup\n          trigger=\"manual\"\n          placement=\"bottom\"\n          arrow={false}\n          visible={showDropdown}\n          content={renderOverlay()}>\n          <Input\n            ref={inputRef}\n            size={autoCompleteSize}\n            placeholder={placeholder}\n            disabled={disabled}\n            value={inputValue}\n            clearable={allowClear}\n            onChange={handleInputChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onClearClick={handleClear}\n          />\n        </Popup>\n      </div>\n    );\n  }\n);\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":"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"}

package/es/auto-complete/index.d.ts

@@ -0,0 +1,2 @@
+import { AutoCompleteOption, AutoCompleteProps } from "./types.js";
+import { AutoComplete } from "./auto-complete.js";

package/es/auto-complete/style/_index.scss

@@ -0,0 +1,58 @@
+@use "../../style/variables" as *;
+
+.#{$prefix}-auto-complete {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  &_disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  // Dropdown
+  &__dropdown {
+    width: 100%;
+    margin: 0;
+    padding: 4px 0;
+    list-style-type: none;
+    background-color: var(--ty-select-dropdown-bg);
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 10;
+    box-shadow: var(--ty-shadow-popup);
+    border-radius: $border-radius;
+    font-size: $font-size-base;
+    max-height: $select-dropdown-max-height;
+  }
+
+  // Empty state
+  &__empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--ty-color-text-quaternary);
+    font-size: $font-size-sm;
+  }
+}
+
+// Option
+.#{$prefix}-auto-complete-option {
+  display: flex;
+  align-items: center;
+  padding: 7px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+  color: var(--ty-color-text);
+  transition: background-color 0.2s;
+
+  &_active {
+    background-color: var(--ty-select-option-active-bg);
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/es/auto-complete/style/index.css

@@ -0,0 +1,48 @@
+.ty-auto-complete {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+.ty-auto-complete_disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.ty-auto-complete__dropdown {
+  width: 100%;
+  margin: 0;
+  padding: 4px 0;
+  list-style-type: none;
+  background-color: var(--ty-select-dropdown-bg);
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: var(--ty-shadow-popup);
+  border-radius: 2px;
+  font-size: 1rem;
+  max-height: 300px;
+}
+.ty-auto-complete__empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--ty-color-text-quaternary);
+  font-size: 0.875rem;
+}
+
+.ty-auto-complete-option {
+  display: flex;
+  align-items: center;
+  padding: 7px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+  color: var(--ty-color-text);
+  transition: background-color 0.2s;
+}
+.ty-auto-complete-option_active {
+  background-color: var(--ty-select-option-active-bg);
+}
+.ty-auto-complete-option_disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/es/auto-complete/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/auto-complete/style/index.js

@@ -0,0 +1 @@
+import "./_index.css";

package/es/auto-complete/types.d.ts

@@ -0,0 +1,31 @@
+import { BaseProps, SizeType } from "../_utils/props.js";
+import { FocusEventHandler, ReactNode } from "react";
+
+//#region src/auto-complete/types.d.ts
+interface AutoCompleteOption {
+  value: string;
+  label?: ReactNode;
+  disabled?: boolean;
+}
+interface AutoCompleteProps extends BaseProps {
+  options?: AutoCompleteOption[];
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  allowClear?: boolean;
+  defaultActiveFirstOption?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  notFoundContent?: ReactNode;
+  size?: SizeType;
+  filterOption?: boolean | ((inputValue: string, option: AutoCompleteOption) => boolean);
+  onChange?: (value: string) => void;
+  onSelect?: (value: string, option: AutoCompleteOption) => void;
+  onSearch?: (value: string) => void;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+}
+//#endregion
+export { AutoCompleteOption, AutoCompleteProps };
+//# sourceMappingURL=types.d.ts.map

package/es/avatar/avatar-group.d.ts

@@ -0,0 +1,10 @@
+import { AvatarGroupProps } from "./types.js";
+
+//#region src/avatar/avatar-group.d.ts
+declare const AvatarGroup: {
+  (props: AvatarGroupProps): JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AvatarGroup };
+//# sourceMappingURL=avatar-group.d.ts.map

package/es/avatar/avatar-group.js

@@ -0,0 +1,31 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/avatar/avatar-group.tsx
+const AvatarGroup = (props) => {
+	const { gap = -15, className, style, children, prefixCls: customisedCls, ...otherProps } = props;
+	const cls = classNames(getPrefixCls("avatar-group", useContext(ConfigContext).prefixCls, customisedCls), className);
+	return /* @__PURE__ */ jsx("span", {
+		...otherProps,
+		className: cls,
+		style,
+		children: React.Children.map(children, (child, idx) => {
+			const childElement = child;
+			if (childElement.type.displayName === "Avatar") {
+				const childProps = { style: {
+					...childElement.props.style,
+					marginLeft: idx === 0 ? 0 : gap
+				} };
+				return React.cloneElement(childElement, childProps);
+			}
+			return child;
+		})
+	});
+};
+AvatarGroup.displayName = "AvatarGroup";
+//#endregion
+export { AvatarGroup as default };
+
+//# sourceMappingURL=avatar-group.js.map