@tiny-design/react 1.0.4

package/lib/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/lib/auto-complete/auto-complete.js

@@ -0,0 +1,141 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_hooks = require("../_utils/hooks.js");
+const require_useCombobox = require("../_utils/useCombobox.js");
+const require_input = require("../input/input.js");
+const require_index = require("../popup/index.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/auto-complete/auto-complete.tsx
+const AutoComplete = react.default.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 = (0, react.useContext)(require_config_context.ConfigContext);
+	const prefixCls = require_general.getPrefixCls("auto-complete", configContext.prefixCls, customisedCls);
+	const autoCompleteSize = size || configContext.componentSize || "md";
+	const [inputValue, setInputValue] = (0, react.useState)("value" in props ? props.value : defaultValue);
+	const wrapperRef = (0, react.useRef)(null);
+	const inputRef = (0, react.useRef)(null);
+	const handleOptionSelect = (0, react.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 = require_useCombobox.useCombobox({
+		items: options,
+		searchValue: inputValue,
+		filterOption,
+		isOpen: "open" in props ? props.open : void 0,
+		defaultOpen,
+		disabled,
+		defaultActiveFirstOption,
+		onSelect: handleOptionSelect
+	});
+	const setWrapperRef = (0, react.useCallback)((node) => {
+		wrapperRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const cls = (0, classnames.default)(prefixCls, className, {
+		[`${prefixCls}_disabled`]: disabled,
+		[`${prefixCls}_open`]: combo.isOpen
+	});
+	require_hooks.useClickOutside(wrapperRef, () => {
+		if (!("open" in props)) combo.closeDropdown();
+	});
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefixCls}__empty`,
+				children: notFoundContent
+			});
+			return null;
+		}
+		return combo.filteredItems.map((opt, index) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				role: "option",
+				className: (0, classnames.default)(`${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__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: `${prefixCls}__dropdown`,
+			style: { minWidth: selectorWidth || void 0 },
+			role: "listbox",
+			children: dropdownContent
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: setWrapperRef,
+		className: cls,
+		style,
+		onKeyDown: combo.handleKeyDown,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+			trigger: "manual",
+			placement: "bottom",
+			arrow: false,
+			visible: showDropdown,
+			content: renderOverlay(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.default, {
+				ref: inputRef,
+				size: autoCompleteSize,
+				placeholder,
+				disabled,
+				value: inputValue,
+				clearable: allowClear,
+				onChange: handleInputChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				onClearClick: handleClear
+			})
+		})
+	});
+});
+AutoComplete.displayName = "AutoComplete";
+//#endregion
+exports.default = AutoComplete;
+
+//# sourceMappingURL=auto-complete.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete.js","names":["React","ConfigContext","getPrefixCls","useCombobox","Popup","Input"],"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/lib/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/lib/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/lib/auto-complete/style/index.d.ts

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

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

@@ -0,0 +1 @@
+require("./_index.css");

package/lib/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 { AutoCompleteProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/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/lib/avatar/avatar-group.js

@@ -0,0 +1,34 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/avatar/avatar-group.tsx
+const AvatarGroup = (props) => {
+	const { gap = -15, className, style, children, prefixCls: customisedCls, ...otherProps } = props;
+	const cls = (0, classnames.default)(require_general.getPrefixCls("avatar-group", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls), className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...otherProps,
+		className: cls,
+		style,
+		children: react.default.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.default.cloneElement(childElement, childProps);
+			}
+			return child;
+		})
+	});
+};
+AvatarGroup.displayName = "AvatarGroup";
+//#endregion
+exports.default = AvatarGroup;
+
+//# sourceMappingURL=avatar-group.js.map

package/lib/avatar/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","names":["getPrefixCls","ConfigContext","React"],"sources":["../../src/avatar/avatar-group.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { AvatarProps, AvatarGroupProps } from './types';\n\nconst AvatarGroup = (props: AvatarGroupProps): JSX.Element => {\n  const { gap = -15, className, style, children, prefixCls: customisedCls, ...otherProps } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('avatar-group', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className);\n\n  return (\n    <span {...otherProps} className={cls} style={style}>\n      {React.Children.map(children, (child, idx) => {\n        const childElement = child as React.FunctionComponentElement<AvatarProps>;\n        if (childElement.type.displayName === 'Avatar') {\n          const childProps: Partial<AvatarProps> = {\n            style: {\n              ...childElement.props.style,\n              marginLeft: idx === 0 ? 0 : gap,\n            },\n          };\n          return React.cloneElement(childElement, childProps);\n        }\n        return child;\n      })}\n    </span>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;;AAMA,MAAM,eAAe,UAAyC;CAC5D,MAAM,EAAE,MAAM,KAAK,WAAW,OAAO,UAAU,WAAW,eAAe,GAAG,eAAe;CAG3F,MAAM,OAAA,GAAA,WAAA,SADYA,gBAAAA,aAAa,iBAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACc,WAAW,cAAc,EACpD,UAAU;AAE5C,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,GAAI;EAAY,WAAW;EAAY;YAC1CC,MAAAA,QAAM,SAAS,IAAI,WAAW,OAAO,QAAQ;GAC5C,MAAM,eAAe;AACrB,OAAI,aAAa,KAAK,gBAAgB,UAAU;IAC9C,MAAM,aAAmC,EACvC,OAAO;KACL,GAAG,aAAa,MAAM;KACtB,YAAY,QAAQ,IAAI,IAAI;KAC7B,EACF;AACD,WAAOA,MAAAA,QAAM,aAAa,cAAc,WAAW;;AAErD,UAAO;IACP;EACG,CAAA;;AAIX,YAAY,cAAc"}

package/lib/avatar/avatar.d.ts

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

package/lib/avatar/avatar.js

@@ -0,0 +1,79 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/avatar/avatar.tsx
+const Avatar = react.default.forwardRef((props, ref) => {
+	const { size = 38, shape = "circle", presence = void 0, alt = "avatar", icon, src, children, className, style, onClick, prefixCls: customisedCls, ...otherProps } = props;
+	const outerEl = (0, react.useRef)(null);
+	const textEl = (0, react.useRef)(null);
+	const [scale, setScale] = (0, react.useState)(1);
+	const prefixCls = require_general.getPrefixCls("avatar", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, className, `${prefixCls}_${shape}`, { [`${prefixCls}_clickable`]: onClick });
+	const renderChildren = () => {
+		if (typeof children === "string") {
+			let textStyle = {};
+			if (textEl.current) {
+				const transformString = `scale(${scale}) translateX(-50%)`;
+				textStyle = {
+					msTransform: transformString,
+					WebkitTransform: transformString,
+					transform: transformString
+				};
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				ref: textEl,
+				className: `${prefixCls}__text`,
+				style: textStyle,
+				children
+			});
+		} else return children;
+	};
+	const renderItem = () => {
+		if (children) return renderChildren();
+		else if (src) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src,
+			alt,
+			className: `${prefixCls}__img`
+		});
+		else return icon;
+	};
+	const renderPresence = () => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { className: `${prefixCls}__presence ${prefixCls}__presence_${presence}` });
+	};
+	const styles = {
+		width: size,
+		height: size,
+		fontSize: size / 2,
+		lineHeight: `${size - 4}px`,
+		...style
+	};
+	(0, react.useEffect)(() => {
+		if (outerEl.current && textEl.current && textEl.current.className === `${prefixCls}__text`) {
+			const textElWidth = textEl.current.offsetWidth;
+			const outerElWidth = outerEl.current.offsetWidth;
+			if (outerElWidth - 8 < textElWidth) setScale((outerElWidth - 8) / textElWidth);
+			else setScale(1);
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		...otherProps,
+		ref: (node) => {
+			outerEl.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		className: cls,
+		style: styles,
+		children: [renderItem(), presence && renderPresence()]
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+exports.default = Avatar;
+
+//# sourceMappingURL=avatar.js.map

package/lib/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":["React","getPrefixCls","ConfigContext"],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { AvatarProps } from './types';\n\nconst Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {\n  const {\n    size = 38,\n    shape = 'circle',\n    presence = undefined,\n    alt = 'avatar',\n    icon,\n    src,\n    children,\n    className,\n    style,\n    onClick,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n  const outerEl = useRef<HTMLSpanElement | null>(null);\n  const textEl = useRef<HTMLSpanElement | null>(null);\n  const [scale, setScale] = useState(1);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('avatar', configContext.prefixCls, customisedCls);\n\n  const cls = classNames(prefixCls, className, `${prefixCls}_${shape}`, {\n    [`${prefixCls}_clickable`]: onClick,\n  });\n\n  const renderChildren = () => {\n    if (typeof children === 'string') {\n      let textStyle: React.CSSProperties = {};\n      if (textEl.current) {\n        const transformString = `scale(${scale}) translateX(-50%)`;\n        textStyle = {\n          msTransform: transformString,\n          WebkitTransform: transformString,\n          transform: transformString,\n        };\n      }\n      return (\n        <span ref={textEl} className={`${prefixCls}__text`} style={textStyle}>\n          {children}\n        </span>\n      );\n    } else {\n      return children;\n    }\n  };\n\n  const renderItem = (): React.ReactNode => {\n    if (children) {\n      return renderChildren();\n    } else if (src) {\n      return <img src={src} alt={alt} className={`${prefixCls}__img`} />;\n    } else {\n      return icon;\n    }\n  };\n\n  const renderPresence = (): React.ReactElement => {\n    return <i className={`${prefixCls}__presence ${prefixCls}__presence_${presence}`} />;\n  };\n\n  const styles: React.CSSProperties = {\n    width: size,\n    height: size,\n    fontSize: size / 2,\n    lineHeight: `${size - 4}px`,\n    ...style,\n  };\n\n  useEffect(() => {\n    if (outerEl.current && textEl.current && textEl.current!.className === `${prefixCls}__text`) {\n      const textElWidth = textEl.current!.offsetWidth;\n      const outerElWidth = outerEl.current!.offsetWidth;\n      // leave 4px padding for left and right side\n      if (outerElWidth - 8 < textElWidth) {\n        setScale((outerElWidth - 8) / textElWidth);\n      } else {\n        setScale(1);\n      }\n    }\n  });\n\n  return (\n    <span {...otherProps} ref={(node) => {\n      outerEl.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    }} className={cls} style={styles}>\n      {renderItem()}\n      {presence && renderPresence()}\n    </span>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;AAMA,MAAM,SAASA,MAAAA,QAAM,YAA0C,OAAO,QAAQ;CAC5E,MAAM,EACJ,OAAO,IACP,QAAQ,UACR,WAAW,KAAA,GACX,MAAM,UACN,MACA,KACA,UACA,WACA,OACA,SACA,WAAW,eACX,GAAG,eACD;CACJ,MAAM,WAAA,GAAA,MAAA,QAAyC,KAAK;CACpD,MAAM,UAAA,GAAA,MAAA,QAAwC,KAAK;CACnD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,EAAE;CAErC,MAAM,YAAYC,gBAAAA,aAAa,WAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACQ,WAAW,cAAc;CAEhF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,GAAG,UAAU,GAAG,SAAS,GACnE,GAAG,UAAU,cAAc,SAC7B,CAAC;CAEF,MAAM,uBAAuB;AAC3B,MAAI,OAAO,aAAa,UAAU;GAChC,IAAI,YAAiC,EAAE;AACvC,OAAI,OAAO,SAAS;IAClB,MAAM,kBAAkB,SAAS,MAAM;AACvC,gBAAY;KACV,aAAa;KACb,iBAAiB;KACjB,WAAW;KACZ;;AAEH,UACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,KAAK;IAAQ,WAAW,GAAG,UAAU;IAAS,OAAO;IACxD;IACI,CAAA;QAGT,QAAO;;CAIX,MAAM,mBAAoC;AACxC,MAAI,SACF,QAAO,gBAAgB;WACd,IACT,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAU;GAAU;GAAK,WAAW,GAAG,UAAU;GAAU,CAAA;MAElE,QAAO;;CAIX,MAAM,uBAA2C;AAC/C,SAAO,iBAAA,GAAA,kBAAA,KAAC,KAAD,EAAG,WAAW,GAAG,UAAU,aAAa,UAAU,aAAa,YAAc,CAAA;;CAGtF,MAAM,SAA8B;EAClC,OAAO;EACP,QAAQ;EACR,UAAU,OAAO;EACjB,YAAY,GAAG,OAAO,EAAE;EACxB,GAAG;EACJ;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,QAAQ,WAAW,OAAO,WAAW,OAAO,QAAS,cAAc,GAAG,UAAU,SAAS;GAC3F,MAAM,cAAc,OAAO,QAAS;GACpC,MAAM,eAAe,QAAQ,QAAS;AAEtC,OAAI,eAAe,IAAI,YACrB,WAAU,eAAe,KAAK,YAAY;OAE1C,UAAS,EAAE;;GAGf;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EAAM,GAAI;EAAY,MAAM,SAAS;AACnC,WAAQ,UAAU;AAClB,OAAI,OAAO,QAAQ,WAAY,KAAI,KAAK;YAC/B,IAAK,KAAI,UAAU;;EAC3B,WAAW;EAAK,OAAO;YAJ1B,CAKG,YAAY,EACZ,YAAY,gBAAgB,CACxB;;EAET;AAEF,OAAO,cAAc"}

package/lib/avatar/index.d.ts

@@ -0,0 +1,11 @@
+import { Avatar } from "./avatar.js";
+import { AvatarGroup } from "./avatar-group.js";
+
+//#region src/avatar/index.d.ts
+type IAvatar = typeof Avatar & {
+  Group: typeof AvatarGroup;
+};
+declare const DefaultAvatar: IAvatar;
+//#endregion
+export { DefaultAvatar };
+//# sourceMappingURL=index.d.ts.map

package/lib/avatar/index.js

@@ -0,0 +1,11 @@
+require('../style/base.css');
+require('./style/index.css');
+const require_avatar = require("./avatar.js");
+const require_avatar_group = require("./avatar-group.js");
+//#region src/avatar/index.tsx
+const DefaultAvatar = require_avatar.default;
+DefaultAvatar.Group = require_avatar_group.default;
+//#endregion
+exports.default = DefaultAvatar;
+
+//# sourceMappingURL=index.js.map

package/lib/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Avatar","AvatarGroup"],"sources":["../../src/avatar/index.tsx"],"sourcesContent":["import Avatar from './avatar';\nimport AvatarGroup from './avatar-group';\n\ntype IAvatar = typeof Avatar & {\n  Group: typeof AvatarGroup;\n};\n\nconst DefaultAvatar = Avatar as IAvatar;\nDefaultAvatar.Group = AvatarGroup;\n\nexport default DefaultAvatar;\n"],"mappings":";;;AAOA,MAAM,gBAAgBA,eAAAA;AACtB,cAAc,QAAQC,qBAAAA"}

package/lib/avatar/style/_index.scss

@@ -0,0 +1,80 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-avatar {
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: $avatar-bg;
+  color: $avatar-color;
+  white-space: nowrap;
+  position: relative;
+  vertical-align: middle;
+  user-select: none;
+  border: 2px solid var(--ty-avatar-border);
+
+  &__img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__text {
+    position: absolute;
+    left: 50%;
+    transform-origin: 0 center;
+    transform: translateX(-50%);
+  }
+
+  &__presence {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    border-radius: 50%;
+    box-shadow: var(--ty-avatar-presence-shadow);
+    height: 0.4em;
+    width: 0.4em;
+
+    &_online {
+      background-color: var(--ty-color-success);
+    }
+
+    &_busy {
+      background-color: var(--ty-color-danger);
+    }
+
+    &_away {
+      background-color: var(--ty-color-warning);
+    }
+
+    &_offline {
+      background-color: $gray-400;
+    }
+  }
+
+  &_circle {
+    border-radius: 50%;
+
+    .#{$prefix}-avatar__img {
+      border-radius: 50%;
+    }
+  }
+
+  &_square {
+    border-radius: $avatar-border-radius;
+  }
+
+  &_clickable {
+    cursor: pointer;
+  }
+
+  &-group {
+    .#{$prefix}-avatar {
+      z-index: 1;
+
+      &:hover {
+        z-index: 2;
+      }
+    }
+  }
+}

package/lib/avatar/style/index.css

@@ -0,0 +1,65 @@
+.ty-avatar {
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #ccc;
+  color: #fff;
+  white-space: nowrap;
+  position: relative;
+  vertical-align: middle;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border: 2px solid var(--ty-avatar-border);
+}
+.ty-avatar__img {
+  width: 100%;
+  height: 100%;
+}
+.ty-avatar__text {
+  position: absolute;
+  left: 50%;
+  transform-origin: 0 center;
+  transform: translateX(-50%);
+}
+.ty-avatar__presence {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: 50%;
+  box-shadow: var(--ty-avatar-presence-shadow);
+  height: 0.4em;
+  width: 0.4em;
+}
+.ty-avatar__presence_online {
+  background-color: var(--ty-color-success);
+}
+.ty-avatar__presence_busy {
+  background-color: var(--ty-color-danger);
+}
+.ty-avatar__presence_away {
+  background-color: var(--ty-color-warning);
+}
+.ty-avatar__presence_offline {
+  background-color: #ced4da;
+}
+.ty-avatar_circle {
+  border-radius: 50%;
+}
+.ty-avatar_circle .ty-avatar__img {
+  border-radius: 50%;
+}
+.ty-avatar_square {
+  border-radius: 2px;
+}
+.ty-avatar_clickable {
+  cursor: pointer;
+}
+.ty-avatar-group .ty-avatar {
+  z-index: 1;
+}
+.ty-avatar-group .ty-avatar:hover {
+  z-index: 2;
+}

package/lib/avatar/style/index.d.ts

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

package/lib/avatar/style/index.js

@@ -0,0 +1 @@
+require("./index.css");