@tiny-design/react 1.0.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","names":[],"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,MAAM,WADM,aAAa,gBADT,WAAW,cAAc,CACc,WAAW,cAAc,EACpD,UAAU;AAE5C,QACE,oBAAC,QAAD;EAAM,GAAI;EAAY,WAAW;EAAY;YAC1C,MAAM,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,WAAO,MAAM,aAAa,cAAc,WAAW;;AAErD,UAAO;IACP;EACG,CAAA;;AAIX,YAAY,cAAc"}

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

@@ -0,0 +1,76 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/avatar/avatar.tsx
+const Avatar = React.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 = useRef(null);
+	const textEl = useRef(null);
+	const [scale, setScale] = useState(1);
+	const prefixCls = getPrefixCls("avatar", useContext(ConfigContext).prefixCls, customisedCls);
+	const cls = classNames(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__ */ jsx("span", {
+				ref: textEl,
+				className: `${prefixCls}__text`,
+				style: textStyle,
+				children
+			});
+		} else return children;
+	};
+	const renderItem = () => {
+		if (children) return renderChildren();
+		else if (src) return /* @__PURE__ */ jsx("img", {
+			src,
+			alt,
+			className: `${prefixCls}__img`
+		});
+		else return icon;
+	};
+	const renderPresence = () => {
+		return /* @__PURE__ */ jsx("i", { className: `${prefixCls}__presence ${prefixCls}__presence_${presence}` });
+	};
+	const styles = {
+		width: size,
+		height: size,
+		fontSize: size / 2,
+		lineHeight: `${size - 4}px`,
+		...style
+	};
+	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__ */ 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
+export { Avatar as default };
+
+//# sourceMappingURL=avatar.js.map

package/es/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":[],"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,SAAS,MAAM,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,UAAU,OAA+B,KAAK;CACpD,MAAM,SAAS,OAA+B,KAAK;CACnD,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,MAAM,YAAY,aAAa,UADT,WAAW,cAAc,CACQ,WAAW,cAAc;CAEhF,MAAM,MAAM,WAAW,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,oBAAC,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,oBAAC,OAAD;GAAU;GAAU;GAAK,WAAW,GAAG,UAAU;GAAU,CAAA;MAElE,QAAO;;CAIX,MAAM,uBAA2C;AAC/C,SAAO,oBAAC,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,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,qBAAC,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/es/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/es/avatar/index.js

@@ -0,0 +1,11 @@
+import '../style/base.css';
+import './style/index.css';
+import Avatar from "./avatar.js";
+import AvatarGroup from "./avatar-group.js";
+//#region src/avatar/index.tsx
+const DefaultAvatar = Avatar;
+DefaultAvatar.Group = AvatarGroup;
+//#endregion
+export { DefaultAvatar as default };
+
+//# sourceMappingURL=index.js.map

package/es/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"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,gBAAgB;AACtB,cAAc,QAAQ"}

package/es/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/es/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/es/avatar/style/index.d.ts

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

package/es/avatar/style/index.js

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

package/es/avatar/types.d.ts

@@ -0,0 +1,27 @@
+import { BaseProps } from "../_utils/props.js";
+import React from "react";
+
+//#region src/avatar/types.d.ts
+type AvatarShape = 'circle' | 'square';
+type AvatarPresence = 'online' | 'busy' | 'away' | 'offline';
+interface AvatarProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['span']> {
+  /** use an icon */
+  icon?: React.ReactNode;
+  /** avatar shape */
+  shape?: AvatarShape;
+  /** avatar size */
+  size?: number;
+  /** use an image */
+  src?: string;
+  /** display presence status  */
+  presence?: AvatarPresence;
+  /** alt prop for src */
+  alt?: string;
+}
+interface AvatarGroupProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['span']> {
+  /** the distance between two avatars */
+  gap: number | string;
+}
+//#endregion
+export { AvatarGroupProps, AvatarProps };
+//# sourceMappingURL=types.d.ts.map

package/es/back-top/back-top.d.ts

@@ -0,0 +1,7 @@
+import { BackTopProps } from "./types.js";
+
+//#region src/back-top/back-top.d.ts
+declare const BackTop: (props: BackTopProps) => JSX.Element | null;
+//#endregion
+export { BackTop };
+//# sourceMappingURL=back-top.d.ts.map

package/es/back-top/back-top.js

@@ -0,0 +1,79 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import { useCallback, useContext, useEffect, useState } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/back-top/back-top.tsx
+const easeInOutCubic = (t, b, c, d) => {
+	const cc = c - b;
+	t /= d / 2;
+	if (t < 1) return cc / 2 * t * t * t + b;
+	else return cc / 2 * ((t -= 2) * t * t + 2) + b;
+};
+const BackTop = (props) => {
+	const { visibilityHeight = 300, target = () => window, prefixCls: customisedCls, onClick, className, style, children } = props;
+	const prefixCls = getPrefixCls("back-top", useContext(ConfigContext).prefixCls, customisedCls);
+	const cls = classNames(prefixCls, className, { [`${prefixCls}_custom`]: !!children });
+	const [visible, setVisible] = useState(true);
+	const getDistanceFromTop = useCallback(() => {
+		const targetNode = target();
+		if (targetNode === window) return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+		return targetNode.scrollTop;
+	}, [target]);
+	const setScrollToTop = (distance) => {
+		const targetNode = target();
+		if (targetNode === window) {
+			document.body.scrollTop = distance;
+			document.documentElement.scrollTop = distance;
+		} else targetNode.scrollTop = distance;
+	};
+	const scrollToTop = (e) => {
+		const scrollTop = getDistanceFromTop();
+		const startTime = Date.now();
+		const step = () => {
+			const time = Date.now() - startTime;
+			setScrollToTop(easeInOutCubic(time, scrollTop, 0, 450));
+			if (time < 450) requestAnimationFrame(step);
+			else setScrollToTop(0);
+		};
+		requestAnimationFrame(step);
+		onClick && onClick(e);
+	};
+	const handleOnScroll = useCallback(() => {
+		if (getDistanceFromTop() > visibilityHeight) !visible && setVisible(true);
+		else if (visible) setVisible(false);
+	}, [
+		getDistanceFromTop,
+		visible,
+		visibilityHeight
+	]);
+	useEffect(() => {
+		const targetNode = target();
+		targetNode.addEventListener("scroll", handleOnScroll);
+		handleOnScroll();
+		return () => {
+			targetNode.removeEventListener("scroll", handleOnScroll);
+		};
+	}, [target, handleOnScroll]);
+	if (visible) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cls,
+		style,
+		onClick: scrollToTop,
+		"aria-label": "Back to top",
+		children: children || /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 1024 1024",
+			width: "18",
+			height: "18",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M563.2 379.757048 563.2 972.755371C563.2 1001.056998 540.219441 1024 512 1024\n                483.723021 1024 460.8 1001.019181 460.8 972.755371L460.8 379.740842 272.093167\n                568.447675C252.13208 588.408762 219.700711 588.340711 199.746554 568.386554 179.75171\n                548.39171 179.766716 515.958656 199.685432 496.039941L473.973319 221.752055C483.353204\n                211.343458 496.929524 204.8 512 204.8 527.198527 204.8 540.850334 211.438998 550.227358\n                221.968936L824.32552 496.0671C844.244236 515.985815 844.259243 548.418868 824.2644\n                568.413712 804.310241 588.367871 771.878874 588.435921 751.917786 568.474834L563.2\n                379.757048ZM0 51.2C0 22.923021 22.82342 0 51.130666 0L972.869334 0C1001.108021 0 1024\n                22.980559 1024 51.2 1024 79.476979 1001.17658 102.4 972.869334 102.4L51.130666\n                102.4C22.891979 102.4 0 79.419441 0 51.2Z",
+				fill: "#ffffff"
+			})
+		})
+	});
+	return null;
+};
+//#endregion
+export { BackTop as default };
+
+//# sourceMappingURL=back-top.js.map

package/es/back-top/back-top.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-top.js","names":[],"sources":["../../src/back-top/back-top.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { Target } from '../_utils/dom';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { BackTopProps } from './types';\n\nconst easeInOutCubic = (t: number, b: number, c: number, d: number): number => {\n  const cc = c - b;\n  t /= d / 2;\n  if (t < 1) {\n    return (cc / 2) * t * t * t + b;\n  } else {\n    return (cc / 2) * ((t -= 2) * t * t + 2) + b;\n  }\n};\n\nconst BackTop = (props: BackTopProps): JSX.Element | null => {\n  const {\n    visibilityHeight = 300,\n    target = (): Target => window,\n    prefixCls: customisedCls,\n    onClick,\n    className,\n    style,\n    children,\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('back-top', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_custom`]: !!children,\n  });\n  const [visible, setVisible] = useState(true);\n\n  const getDistanceFromTop = useCallback((): number => {\n    const targetNode = target();\n    if (targetNode === window) {\n      return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;\n    }\n    return (targetNode as HTMLElement).scrollTop;\n  }, [target]);\n\n  const setScrollToTop = (distance: number): void => {\n    const targetNode = target();\n    if (targetNode === window) {\n      document.body.scrollTop = distance;\n      document.documentElement.scrollTop = distance;\n    } else {\n      (targetNode as HTMLElement).scrollTop = distance;\n    }\n  };\n\n  const scrollToTop = (e: React.MouseEvent<HTMLButtonElement>): void => {\n    const scrollTop = getDistanceFromTop();\n    const startTime = Date.now();\n    const step = (): void => {\n      const timestamp = Date.now();\n      const time = timestamp - startTime;\n      setScrollToTop(easeInOutCubic(time, scrollTop, 0, 450));\n      if (time < 450) {\n        requestAnimationFrame(step);\n      } else {\n        setScrollToTop(0);\n      }\n    };\n    requestAnimationFrame(step);\n    onClick && onClick(e);\n  };\n\n  const handleOnScroll = useCallback(() => {\n    if (getDistanceFromTop() > visibilityHeight) {\n      !visible && setVisible(true);\n    } else if (visible) {\n      setVisible(false);\n    }\n  }, [getDistanceFromTop, visible, visibilityHeight]);\n\n  useEffect(() => {\n    const targetNode = target();\n    targetNode.addEventListener('scroll', handleOnScroll);\n    handleOnScroll();\n\n    return (): void => {\n      targetNode.removeEventListener('scroll', handleOnScroll);\n    };\n  }, [target, handleOnScroll]);\n\n  if (visible) {\n    return (\n      <button type=\"button\" className={cls} style={style} onClick={scrollToTop} aria-label=\"Back to top\">\n        {children || (\n          <svg viewBox=\"0 0 1024 1024\" width=\"18\" height=\"18\">\n            <path\n              d=\"M563.2 379.757048 563.2 972.755371C563.2 1001.056998 540.219441 1024 512 1024\n                483.723021 1024 460.8 1001.019181 460.8 972.755371L460.8 379.740842 272.093167\n                568.447675C252.13208 588.408762 219.700711 588.340711 199.746554 568.386554 179.75171\n                548.39171 179.766716 515.958656 199.685432 496.039941L473.973319 221.752055C483.353204\n                211.343458 496.929524 204.8 512 204.8 527.198527 204.8 540.850334 211.438998 550.227358\n                221.968936L824.32552 496.0671C844.244236 515.985815 844.259243 548.418868 824.2644\n                568.413712 804.310241 588.367871 771.878874 588.435921 751.917786 568.474834L563.2\n                379.757048ZM0 51.2C0 22.923021 22.82342 0 51.130666 0L972.869334 0C1001.108021 0 1024\n                22.980559 1024 51.2 1024 79.476979 1001.17658 102.4 972.869334 102.4L51.130666\n                102.4C22.891979 102.4 0 79.419441 0 51.2Z\"\n              fill=\"#ffffff\"\n            />\n          </svg>\n        )}\n      </button>\n    );\n  }\n\n  return null;\n};\n\nexport default BackTop;\n"],"mappings":";;;;;;AAOA,MAAM,kBAAkB,GAAW,GAAW,GAAW,MAAsB;CAC7E,MAAM,KAAK,IAAI;AACf,MAAK,IAAI;AACT,KAAI,IAAI,EACN,QAAQ,KAAK,IAAK,IAAI,IAAI,IAAI;KAE9B,QAAQ,KAAK,MAAO,KAAK,KAAK,IAAI,IAAI,KAAK;;AAI/C,MAAM,WAAW,UAA4C;CAC3D,MAAM,EACJ,mBAAmB,KACnB,eAAuB,QACvB,WAAW,eACX,SACA,WACA,OACA,aACE;CAEJ,MAAM,YAAY,aAAa,YADT,WAAW,cAAc,CACU,WAAW,cAAc;CAClF,MAAM,MAAM,WAAW,WAAW,WAAW,GAC1C,GAAG,UAAU,WAAW,CAAC,CAAC,UAC5B,CAAC;CACF,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,qBAAqB,kBAA0B;EACnD,MAAM,aAAa,QAAQ;AAC3B,MAAI,eAAe,OACjB,QAAO,OAAO,eAAe,SAAS,KAAK,aAAa,SAAS,gBAAgB;AAEnF,SAAQ,WAA2B;IAClC,CAAC,OAAO,CAAC;CAEZ,MAAM,kBAAkB,aAA2B;EACjD,MAAM,aAAa,QAAQ;AAC3B,MAAI,eAAe,QAAQ;AACzB,YAAS,KAAK,YAAY;AAC1B,YAAS,gBAAgB,YAAY;QAEpC,YAA2B,YAAY;;CAI5C,MAAM,eAAe,MAAiD;EACpE,MAAM,YAAY,oBAAoB;EACtC,MAAM,YAAY,KAAK,KAAK;EAC5B,MAAM,aAAmB;GAEvB,MAAM,OADY,KAAK,KAAK,GACH;AACzB,kBAAe,eAAe,MAAM,WAAW,GAAG,IAAI,CAAC;AACvD,OAAI,OAAO,IACT,uBAAsB,KAAK;OAE3B,gBAAe,EAAE;;AAGrB,wBAAsB,KAAK;AAC3B,aAAW,QAAQ,EAAE;;CAGvB,MAAM,iBAAiB,kBAAkB;AACvC,MAAI,oBAAoB,GAAG,iBACzB,EAAC,WAAW,WAAW,KAAK;WACnB,QACT,YAAW,MAAM;IAElB;EAAC;EAAoB;EAAS;EAAiB,CAAC;AAEnD,iBAAgB;EACd,MAAM,aAAa,QAAQ;AAC3B,aAAW,iBAAiB,UAAU,eAAe;AACrD,kBAAgB;AAEhB,eAAmB;AACjB,cAAW,oBAAoB,UAAU,eAAe;;IAEzD,CAAC,QAAQ,eAAe,CAAC;AAE5B,KAAI,QACF,QACE,oBAAC,UAAD;EAAQ,MAAK;EAAS,WAAW;EAAY;EAAO,SAAS;EAAa,cAAW;YAClF,YACC,oBAAC,OAAD;GAAK,SAAQ;GAAgB,OAAM;GAAK,QAAO;aAC7C,oBAAC,QAAD;IACE,GAAE;IAUF,MAAK;IACL,CAAA;GACE,CAAA;EAED,CAAA;AAIb,QAAO"}

package/es/back-top/index.d.ts

@@ -0,0 +1 @@
+import { BackTop } from "./back-top.js";

package/es/back-top/index.js

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

package/es/back-top/index.js.map

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

package/es/back-top/style/_index.scss

@@ -0,0 +1,25 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-back-top {
+  position: fixed;
+  right: 40px;
+  bottom: 30px;
+  background-color: var(--ty-back-top-bg);
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  transition: opacity 200ms linear 0s, visibility;
+
+  &_custom {
+    background: none;
+    width: auto;
+    height: auto;
+    border-radius: 0;
+  }
+}

package/es/back-top/style/index.css

@@ -0,0 +1,22 @@
+.ty-back-top {
+  position: fixed;
+  right: 40px;
+  bottom: 30px;
+  background-color: var(--ty-back-top-bg);
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  transition: opacity 200ms linear 0s, visibility;
+}
+.ty-back-top_custom {
+  background: none;
+  width: auto;
+  height: auto;
+  border-radius: 0;
+}

package/es/back-top/style/index.d.ts

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

package/es/back-top/style/index.js

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

package/es/back-top/types.d.ts

@@ -0,0 +1,14 @@
+import { BaseProps } from "../_utils/props.js";
+import { Target } from "../_utils/dom.js";
+import React from "react";
+
+//#region src/back-top/types.d.ts
+interface BackTopProps extends BaseProps {
+  target?: () => Target;
+  onClick?: (e: React.MouseEvent) => void;
+  visibilityHeight?: number;
+  children?: React.ReactNode;
+}
+//#endregion
+export { BackTopProps };
+//# sourceMappingURL=types.d.ts.map

package/es/badge/badge.d.ts

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

package/es/badge/badge.js

@@ -0,0 +1,50 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import warning from "../_utils/warning.js";
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/badge/badge.tsx
+const Badge = React.memo(React.forwardRef((props, ref) => {
+	const { count, color = "#f2453d", max = 99, dot = false, processing = false, showZero = false, prefixCls: customisedCls, title, className, badgeStyle, children, ...otherProps } = props;
+	const prefixCls = getPrefixCls("badge", useContext(ConfigContext).prefixCls, customisedCls);
+	const cls = classNames(prefixCls, className, { [`${prefixCls}_no-wrap`]: !children });
+	const dotCls = classNames(`${prefixCls}__dot`, { [`${prefixCls}__dot_wave`]: processing });
+	warning(!dot && processing, "only dot badge has the processing effect");
+	const renderCount = () => {
+		if (typeof count === "number" || typeof count === "string") {
+			if (count === 0 && !showZero) return null;
+			return /* @__PURE__ */ jsx("sup", {
+				title,
+				className: `${prefixCls}__count`,
+				style: {
+					backgroundColor: color,
+					...badgeStyle
+				},
+				children: typeof count === "number" && count > max ? `${max}+` : count
+			});
+		} else return /* @__PURE__ */ jsx("span", {
+			className: `${prefixCls}__custom`,
+			children: count
+		});
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		...otherProps,
+		ref,
+		className: cls,
+		"aria-label": typeof count === "number" ? `${count > max ? `${max}+` : count} notifications` : void 0,
+		children: [children, dot ? /* @__PURE__ */ jsx("sup", {
+			title,
+			className: dotCls,
+			style: {
+				backgroundColor: color,
+				...badgeStyle
+			}
+		}) : renderCount()]
+	});
+}));
+Badge.displayName = "Badge";
+//#endregion
+export { Badge as default };
+
+//# sourceMappingURL=badge.js.map

package/es/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport warning from '../_utils/warning';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { BadgeProps } from './types';\n\nconst Badge = React.memo(React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {\n  const {\n    count,\n    color = '#f2453d',\n    max = 99,\n    dot = false,\n    processing = false,\n    showZero = false,\n    prefixCls: customisedCls,\n    title,\n    className,\n    badgeStyle,\n    children,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('badge', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, { [`${prefixCls}_no-wrap`]: !children });\n  const dotCls = classNames(`${prefixCls}__dot`, { [`${prefixCls}__dot_wave`]: processing });\n\n  warning(!dot && processing, 'only dot badge has the processing effect');\n\n  const renderCount = () => {\n    if (typeof count === 'number' || typeof count === 'string') {\n      if (count === 0 && !showZero) {\n        return null;\n      }\n      return (\n        <sup\n          title={title}\n          className={`${prefixCls}__count`}\n          style={{ backgroundColor: color, ...badgeStyle }}>\n          {typeof count === 'number' && count > max ? `${max}+` : count}\n        </sup>\n      );\n    } else {\n      return <span className={`${prefixCls}__custom`}>{count}</span>;\n    }\n  };\n\n  return (\n    <span\n      {...otherProps}\n      ref={ref}\n      className={cls}\n      aria-label={typeof count === 'number' ? `${count > max ? `${max}+` : count} notifications` : undefined}>\n      {children}\n      {dot ? (\n        <sup title={title} className={dotCls} style={{ backgroundColor: color, ...badgeStyle }} />\n      ) : (\n        renderCount()\n      )}\n    </span>\n  );\n}));\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";;;;;;;AAOA,MAAM,QAAQ,MAAM,KAAK,MAAM,YAAyC,OAAO,QAAQ;CACrF,MAAM,EACJ,OACA,QAAQ,WACR,MAAM,IACN,MAAM,OACN,aAAa,OACb,WAAW,OACX,WAAW,eACX,OACA,WACA,YACA,UACA,GAAG,eACD;CAEJ,MAAM,YAAY,aAAa,SADT,WAAW,cAAc,CACO,WAAW,cAAc;CAC/E,MAAM,MAAM,WAAW,WAAW,WAAW,GAAG,GAAG,UAAU,YAAY,CAAC,UAAU,CAAC;CACrF,MAAM,SAAS,WAAW,GAAG,UAAU,QAAQ,GAAG,GAAG,UAAU,cAAc,YAAY,CAAC;AAE1F,SAAQ,CAAC,OAAO,YAAY,2CAA2C;CAEvE,MAAM,oBAAoB;AACxB,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;AAC1D,OAAI,UAAU,KAAK,CAAC,SAClB,QAAO;AAET,UACE,oBAAC,OAAD;IACS;IACP,WAAW,GAAG,UAAU;IACxB,OAAO;KAAE,iBAAiB;KAAO,GAAG;KAAY;cAC/C,OAAO,UAAU,YAAY,QAAQ,MAAM,GAAG,IAAI,KAAK;IACpD,CAAA;QAGR,QAAO,oBAAC,QAAD;GAAM,WAAW,GAAG,UAAU;aAAY;GAAa,CAAA;;AAIlE,QACE,qBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,cAAY,OAAO,UAAU,WAAW,GAAG,QAAQ,MAAM,GAAG,IAAI,KAAK,MAAM,kBAAkB,KAAA;YAJ/F,CAKG,UACA,MACC,oBAAC,OAAD;GAAY;GAAO,WAAW;GAAQ,OAAO;IAAE,iBAAiB;IAAO,GAAG;IAAY;GAAI,CAAA,GAE1F,aAAa,CAEV;;EAET,CAAC;AAEH,MAAM,cAAc"}

package/es/badge/index.d.ts

@@ -0,0 +1 @@
+import { Badge } from "./badge.js";

package/es/badge/index.js

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

package/es/badge/index.js.map

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

package/es/badge/style/_index.scss

@@ -0,0 +1,60 @@
+@use '../../style/variables' as *;
+@use '../../style/animation' as *;
+@use './mixin' as *;
+
+.#{$prefix}-badge {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+
+  &__count {
+    @include badge-base();
+    min-width: $badge-size;
+    min-height: $badge-size;
+    line-height: $badge-size;
+    padding: 0 5px;
+    color: #fff;
+    font-weight: normal;
+    font-size: $badge-font-size;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  &__custom {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(50%) translateY(-50%);
+  }
+
+  &__dot {
+    @include badge-base();
+    width: $badge-dot-size;
+    height: $badge-dot-size;
+    line-height: $badge-dot-size;
+
+    &_wave {
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: inherit;
+        animation: ty-processing 1.2s infinite ease-in-out;
+      }
+    }
+  }
+
+  &_no-wrap {
+    .#{$prefix}-badge__count,
+    .#{$prefix}-badge__dot {
+      display: block;
+      transform: none;
+      position: relative;
+    }
+  }
+}