neko-ui 1.0.40 → 1.0.41

package/README.md

@@ -1,6 +1,6 @@
 # Neko UI
 
-> UI组件库
+!> UI组件库
 
 [![version][version-tag]][npm-url]
 [![install size][size-tag]][size-url]
@@ -17,7 +17,7 @@
 [size-url]: https://packagephobia.com/result?p=neko-ui@latest
 [download-tag]: https://img.shields.io/npm/dm/neko-ui.svg?logo=docusign
 
-> logo轮廓其实是双马尾
+!> logo轮廓其实是双马尾
 
 ## 安装依赖
 
@@ -45,7 +45,7 @@ yarn build
 
 ## 打包项目`使用自定义配置`
 
-> 在打包其它有特殊配置的bundle时, 可以通过命令行参数来加载额外的配置文件;
+!> 在打包其它有特殊配置的bundle时, 可以通过命令行参数来加载额外的配置文件;
 
 例如: 使用 **config/index.ts** 与 **config/prod.ts** 合并后的配置进行编译.
 

package/es/avatar/index.d.ts

@@ -1,11 +1,11 @@
-import { type FC, type HTMLAttributes, type ReactNode } from 'react';
+import React from 'react';
 import { type ComponentSize } from '../';
-export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
-    src?: ReactNode;
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: React.ReactNode;
     alt?: string;
     size?: number | ComponentSize;
     username?: string;
     color?: string;
 }
-declare const Avatar: FC<AvatarProps>;
+declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

package/es/avatar/index.js

@@ -1,71 +1 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import React,{useEffect,useMemo,useRef,useState}from"react";import{injectGlobal}from"@emotion/css";import{classNames}from"@moneko/common";import clipPath from"./clip-path.svg";import favicon from"./favicon.svg";import prefixCls from"../prefix-cls";const svgPrefix="data:image/svg+xml,";const clip=decodeURIComponent(clipPath.replace(svgPrefix,""));const faviconBg=`data:image/svg+xml;base64,${window.btoa(decodeURIComponent(favicon.replace(svgPrefix,"")))}`;const avatarCls=prefixCls("avatar");const avatarCss=`
-  .${avatarCls} {
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 32px;
-    height: 32px;
-    transition: transform 0.3s;
-    cursor: pointer;
-    user-select: none;
-    background-image: linear-gradient(45deg, #cabdeb 0%, #e9887c 100%);
-    animation: avatar-morph-effect 8s ease-in-out infinite;
-
-    &::before,
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      content: '';
-      transition: transform 0.3s;
-    }
-
-    &::before {
-      background-color: var(--avatar-color);
-      clip-path: url('#clipPathAvatar');
-    }
-
-    &::after {
-      background: url(${faviconBg}) no-repeat center/contain;
-    }
-
-    span {
-      transition: transform 0.3s;
-    }
-
-    &:hover {
-      > *,
-      &::after,
-      &::before {
-        transform: scale(1.2);
-      }
-    }
-
-    img {
-      position: absolute;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      clip-path: url('#clipPathAvatar');
-      transition: transform 0.3s;
-    }
-  }
-
-  @keyframes avatar-morph-effect {
-    0% {
-      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
-    }
-
-    50% {
-      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
-    }
-
-    100% {
-      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
-    }
-  }
-`;const avatarSize={small:24,normal:32,large:40};const Avatar=_param=>{var{className,src,alt,username,size,style={},color}=_param,props=_objectWithoutProperties(_param,["className","src","alt","username","size","style","color"]);const box=useRef(null);const label=useRef(null);const[scale,setScale]=useState(1);const cls=useMemo(()=>classNames(avatarCls,className),[className]);useEffect(()=>{injectGlobal([avatarCss]);const hasSvg=document.documentElement.querySelector("clipPath#clipPathAvatar");if(!hasSvg){const svg=document.createElement("a");svg.innerHTML=clip;document.body.insertBefore(svg.firstChild,document.body.firstChild)}},[]);const _style=useMemo(()=>{if(typeof size==="number"){style.width=size;style.height=size}else if(size&&avatarSize[size]){style.width=avatarSize[size];style.height=avatarSize[size]}if(color)Object.assign(style,{"--avatar-color":color});return style},[color,size,style]);const img=useMemo(()=>typeof src==="string"?React.createElement("img",{src:src,alt:alt}):src,[alt,src]);useEffect(()=>{if(label.current&&box.current){if(label.current.clientWidth+6>box.current.clientWidth){setScale((box.current.clientWidth-6)/label.current.clientWidth)}}},[]);return React.createElement("div",_extends({ref:box,className:cls,style:_style},props),img?img:username?React.createElement("span",{ref:label,style:{transform:`scale(${scale})`}},username):null)};export default Avatar;
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import React,{useEffect,useMemo,useRef,useState}from"react";import clipPath from"./clip-path.svg";import{cls,svgPrefix}from"./style";import{cx}from"../emotion";const clip=decodeURIComponent(clipPath.replace(svgPrefix,""));const avatarSize={small:24,normal:32,large:40};const Avatar=_param=>{var{className,src,alt,username,size,style={},color}=_param,props=_objectWithoutProperties(_param,["className","src","alt","username","size","style","color"]);const box=useRef(null);const label=useRef(null);const[scale,setScale]=useState(1);useEffect(()=>{const hasSvg=document.documentElement.querySelector("clipPath#clipPathAvatar");if(!hasSvg){const svg=document.createElement("a");svg.innerHTML=clip;document.body.insertBefore(svg.firstChild,document.body.firstChild)}},[]);const _style=useMemo(()=>{if(typeof size==="number"){style.width=size;style.height=size}else if(size&&avatarSize[size]){style.width=avatarSize[size];style.height=avatarSize[size]}if(color)Object.assign(style,{"--avatar-color":color});return style},[color,size,style]);const img=useMemo(()=>typeof src==="string"?React.createElement("img",{src:src,alt:alt}):src,[alt,src]);useEffect(()=>{if(label.current&&box.current){if(label.current.clientWidth+6>box.current.clientWidth){setScale((box.current.clientWidth-6)/label.current.clientWidth)}}},[]);return React.createElement("div",_extends({ref:box,className:cx(cls.avatar,className),style:_style},props),img?img:username?React.createElement("span",{ref:label,style:{transform:`scale(${scale})`}},username):null)};export default Avatar;

package/es/avatar/style.d.ts

@@ -0,0 +1,4 @@
+export declare const svgPrefix = "data:image/svg+xml,";
+export declare const cls: {
+    avatar: "n-avatar";
+};

package/es/avatar/style.js

@@ -0,0 +1,71 @@
+import favicon from"./favicon.svg";import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export const svgPrefix="data:image/svg+xml,";export const cls={avatar:prefixCls("avatar")};const faviconBg=`data:image/svg+xml;base64,${window.btoa(decodeURIComponent(favicon.replace(svgPrefix,"")))}`;injectGlobal`
+  .${cls.avatar} {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    inline-size: 32px;
+    block-size: 32px;
+    transition: transform 0.3s;
+    cursor: pointer;
+    user-select: none;
+    background-image: linear-gradient(45deg, #cabdeb 0%, #e9887c 100%);
+    animation: avatar-morph-effect 8s ease-in-out infinite;
+
+    &::before,
+    &::after {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+      content: '';
+      transition: transform 0.3s;
+    }
+
+    &::before {
+      background-color: var(--avatar-color);
+      clip-path: url('#clipPathAvatar');
+    }
+
+    &::after {
+      background: url(${faviconBg}) no-repeat center/contain;
+    }
+
+    span {
+      transition: transform 0.3s;
+    }
+
+    &:hover {
+      > *,
+      &::after,
+      &::before {
+        transform: scale(1.2);
+      }
+    }
+
+    img {
+      position: absolute;
+      inset-inline-start: 0;
+      inline-size: 100%;
+      block-size: 100%;
+      clip-path: url('#clipPathAvatar');
+      transition: transform 0.3s;
+    }
+  }
+
+  @keyframes avatar-morph-effect {
+    0% {
+      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    }
+
+    50% {
+      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+    }
+
+    100% {
+      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    }
+  }
+`;

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

@@ -1,4 +1,4 @@
-import { type FC } from 'react';
+import React from 'react';
 import { type AvatarProps } from '../index';
 export interface AvatarGroupProps {
     data: Omit<AvatarProps, 'size'>[];
@@ -6,5 +6,5 @@ export interface AvatarGroupProps {
     className?: string;
     maxCount?: number;
 }
-declare const AvatarGroup: FC<AvatarGroupProps>;
+declare const AvatarGroup: React.FC<AvatarGroupProps>;
 export default AvatarGroup;

package/es/avatar-group/index.js

@@ -1,21 +1 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}import React,{useMemo,useEffect}from"react";import{injectGlobal}from"@emotion/css";import{classNames}from"@moneko/common";import{Avatar,Tooltip}from"../index";import prefixCls from"../prefix-cls";const cls={group:prefixCls("avatar-group"),more:prefixCls("avatar-more")};const avatarGroupCss=`
-  .${cls.group} {
-    display: inline-flex;
-    align-items: center;
-
-    & > *:not(:first-child) {
-      margin-left: -5%;
-    }
-  }
-  .${cls.more} {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow-y: auto;
-    padding: 8px;
-    max-width: 60vw;
-    max-height: 80vh;
-    gap: 16px;
-    flex-wrap: wrap;
-  }
-`;const AvatarGroup=props=>{const showAvatar=useMemo(()=>props.data.slice(0,props.maxCount),[props.data,props.maxCount]);const more=useMemo(()=>props.data.length-(props.maxCount||props.data.length),[props.data.length,props.maxCount]);useEffect(()=>{injectGlobal([avatarGroupCss])},[]);return React.createElement("div",{className:classNames(cls.group,props.className)},showAvatar.map((a,i)=>React.createElement(Avatar,_extends({key:`${i}-${a.src}`,size:props.size},a))),more>0?React.createElement(Tooltip,{title:React.createElement("div",{className:cls.more},props.data.slice(-more).map((a,i)=>React.createElement(Avatar,_extends({key:`${i}-${a.src}`,size:props.size},a))))},React.createElement(Avatar,{size:props.size,username:`+${more}`})):null)};export default AvatarGroup;
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}import React,{useMemo}from"react";import{cls}from"./style";import{cx}from"../emotion";import{Avatar,Tooltip}from"../index";const AvatarGroup=props=>{const showAvatar=useMemo(()=>props.data.slice(0,props.maxCount),[props.data,props.maxCount]);const more=useMemo(()=>props.data.length-(props.maxCount||props.data.length),[props.data.length,props.maxCount]);return React.createElement("div",{className:cx(cls.group,props.className)},showAvatar.map((a,i)=>React.createElement(Avatar,_extends({key:`${i}-${a.src}`,size:props.size},a))),more>0?React.createElement(Tooltip,{title:React.createElement("div",{className:cls.more},props.data.slice(-more).map((a,i)=>React.createElement(Avatar,_extends({key:`${i}-${a.src}`,size:props.size},a))))},React.createElement(Avatar,{size:props.size,username:`+${more}`})):null)};export default AvatarGroup;

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

@@ -0,0 +1,4 @@
+export declare const cls: {
+    group: "n-avatar-group";
+    more: "n-avatar-more";
+};

package/es/avatar-group/style.js

@@ -0,0 +1,21 @@
+import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export const cls={group:prefixCls("avatar-group"),more:prefixCls("avatar-more")};injectGlobal`
+  .${cls.group} {
+    display: inline-flex;
+    align-items: center;
+
+    & > *:not(:first-child) {
+      margin-inline-start: -5%;
+    }
+  }
+  .${cls.more} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-y: auto;
+    padding: 8px;
+    max-inline-size: 60vi;
+    max-block-size: 80vb;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+`;

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

@@ -1,5 +1,5 @@
-import React, { type HTMLAttributes } from 'react';
-export interface BackTopProps extends HTMLAttributes<HTMLDivElement> {
+import React from 'react';
+export interface BackTopProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素 */
     target?: () => HTMLElement;
     /** 挂载到指定的元素，值为一个返回对应 DOM 元素 默认 document.body */

package/es/back-top/index.js

@@ -1,73 +1 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import React,{memo,useCallback,useEffect,useRef,useState}from"react";import{injectGlobal}from"@emotion/css";import{classNames,getMaxZindex,getScrollTop,isEqual,isFunction}from"@moneko/common";import{createPortal}from"react-dom";import prefixCls from"../prefix-cls";const cls={backtop:prefixCls("back-top"),out:prefixCls("back-top-out")};const backTopCss=`
-  :root {
-    --back-top-color: #fff;
-    --back-top-bg: var(--text-secondary, #4e4e4e);
-    --back-top-hover-bg: var(--text-color, rgb(0 0 0 / 65%));
-  }
-
-  [data-theme='dark'] {
-    --back-top-bg: rgb(255 255 255 / 45%);
-  }
-  .${cls.backtop} {
-    position: sticky;
-    bottom: 50px;
-    left: calc(100% - 100px);
-    z-index: 9;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    width: 40px;
-    min-width: 40px;
-    height: 40px;
-    min-height: 40px;
-    color: var(--back-top-color);
-    background-color: var(--back-top-bg);
-    box-shadow: var(--box-shadow-base);
-    transition: background-color var(--transition-duration), color var(--transition-duration);
-    cursor: pointer;
-    animation: back-top-fade-in 1s forwards;
-    backdrop-filter: blur(16px);
-
-    &::before {
-      content: '';
-      display: block;
-      width: 16px;
-      height: 8px;
-      background-color: var(--back-top-color);
-      clip-path: polygon(0 100%, 50% 0, 100% 100%);
-    }
-
-    &:hover {
-      background-color: var(--back-top-hover-bg);
-    }
-  }
-  .${cls.out} {
-    animation: back-top-fade-out 1s forwards;
-  }
-
-  @keyframes back-top-fade-in {
-    from {
-      transform: translate3d(0, 16px, 0) scale(1);
-      opacity: 0;
-    }
-
-    to {
-      transform: translate3d(0, 0, 0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes back-top-fade-out {
-    0%,
-    20% {
-      transform: translate3d(0, 0, 0);
-      opacity: 1;
-    }
-
-    100% {
-      transform: translate3d(0, 16px, 0);
-      opacity: 0;
-    }
-  }
-`;const BackTop=_param=>{var{target=()=>window,getPopupContainer,visibilityHeight=400,className}=_param,props=_objectWithoutProperties(_param,["target","getPopupContainer","visibilityHeight","className"]);const ref=useRef(null);const[show,setShow]=useState(null);const handleScrollY=useCallback(()=>{let scrollTop=0;let offsetHeight=0;if(isFunction(target)){const ele=target();if(ele){scrollTop=getScrollTop(ele);offsetHeight=ele.offsetHeight}}const nextShow=scrollTop>offsetHeight/3||scrollTop>visibilityHeight;if(Boolean(show)!==nextShow){setShow(nextShow)}},[show,target,visibilityHeight]);const handleBackTop=useCallback(()=>{var _target;(_target=target())===null||_target===void 0?void 0:_target.scrollTo({top:0,behavior:"smooth"})},[target]);useEffect(()=>{if(show&&ref.current){ref.current.style.zIndex=getMaxZindex().toString()}},[show]);useEffect(()=>{if(isFunction(target)){var _target;(_target=target())===null||_target===void 0?void 0:_target.addEventListener("scroll",handleScrollY,false)}return()=>{if(isFunction(target)){var _target;(_target=target())===null||_target===void 0?void 0:_target.removeEventListener("scroll",handleScrollY,false)}}},[handleScrollY,target]);const exit=useCallback(()=>{if(show===false){setShow(null)}},[show]);useEffect(()=>{injectGlobal([backTopCss])},[]);if(show===null)return null;return createPortal(React.createElement("div",_extends({},props,{ref:ref,onAnimationEnd:exit,className:classNames(className,cls.backtop,show===false&&cls.out),onClick:handleBackTop})),(getPopupContainer===null||getPopupContainer===void 0?void 0:getPopupContainer(target()))||document.body)};export default memo(BackTop,isEqual);
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import React,{memo,useCallback,useEffect,useRef,useState}from"react";import{getMaxZindex,getScrollTop,isEqual,isFunction}from"@moneko/common";import{createPortal}from"react-dom";import{cls}from"./style";import{cx}from"../emotion";const BackTop=_param=>{var{target=()=>window,getPopupContainer,visibilityHeight=400,className}=_param,props=_objectWithoutProperties(_param,["target","getPopupContainer","visibilityHeight","className"]);const ref=useRef(null);const[show,setShow]=useState(null);const handleScrollY=useCallback(()=>{let scrollTop=0;let offsetHeight=0;if(isFunction(target)){const ele=target();if(ele){scrollTop=getScrollTop(ele);offsetHeight=ele.offsetHeight}}const nextShow=scrollTop>offsetHeight/3||scrollTop>visibilityHeight;if(Boolean(show)!==nextShow){setShow(nextShow)}},[show,target,visibilityHeight]);const handleBackTop=useCallback(()=>{var _target;(_target=target())===null||_target===void 0?void 0:_target.scrollTo({top:0,behavior:"smooth"})},[target]);useEffect(()=>{if(show&&ref.current){ref.current.style.zIndex=getMaxZindex().toString()}},[show]);useEffect(()=>{if(isFunction(target)){var _target;(_target=target())===null||_target===void 0?void 0:_target.addEventListener("scroll",handleScrollY,false)}return()=>{if(isFunction(target)){var _target;(_target=target())===null||_target===void 0?void 0:_target.removeEventListener("scroll",handleScrollY,false)}}},[handleScrollY,target]);const exit=useCallback(()=>{if(show===false){setShow(null)}},[show]);if(show===null)return null;return createPortal(React.createElement("div",_extends({},props,{ref:ref,onAnimationEnd:exit,className:cx(className,cls.backtop,show===false&&cls.out),onClick:handleBackTop})),(getPopupContainer===null||getPopupContainer===void 0?void 0:getPopupContainer(target()))||document.body)};export default memo(BackTop,isEqual);

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

@@ -0,0 +1,4 @@
+export declare const cls: {
+    backtop: "n-back-top";
+    out: "n-back-top-out";
+};

package/es/back-top/style.js

@@ -0,0 +1,73 @@
+import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export const cls={backtop:prefixCls("back-top"),out:prefixCls("back-top-out")};injectGlobal`
+  :root {
+    --back-top-color: #fff;
+    --back-top-bg: var(--text-secondary, #4e4e4e);
+    --back-top-hover-bg: var(--text-color, rgb(0 0 0 / 65%));
+  }
+
+  [data-theme='dark'] {
+    --back-top-bg: rgb(255 255 255 / 45%);
+  }
+  .${cls.backtop} {
+    position: sticky;
+    inset-block-end: 50px;
+    inset-inline-start: calc(100% - 100px);
+    z-index: 9;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    inline-size: 40px;
+    min-inline-size: 40px;
+    block-size: 40px;
+    min-block-size: 40px;
+    color: var(--back-top-color);
+    background-color: var(--back-top-bg);
+    box-shadow: var(--box-shadow-base);
+    transition: background-color var(--transition-duration), color var(--transition-duration);
+    cursor: pointer;
+    animation: back-top-fade-in 1s forwards;
+    backdrop-filter: blur(16px);
+
+    &::before {
+      content: '';
+      display: block;
+      inline-size: 16px;
+      block-size: 8px;
+      background-color: var(--back-top-color);
+      clip-path: polygon(0 100%, 50% 0, 100% 100%);
+    }
+
+    &:hover {
+      background-color: var(--back-top-hover-bg);
+    }
+  }
+  .${cls.out} {
+    animation: back-top-fade-out 1s forwards;
+  }
+
+  @keyframes back-top-fade-in {
+    from {
+      transform: translate3d(0, 16px, 0) scale(1);
+      opacity: 0;
+    }
+
+    to {
+      transform: translate3d(0, 0, 0) scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes back-top-fade-out {
+    0%,
+    20% {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
+
+    100% {
+      transform: translate3d(0, 16px, 0);
+      opacity: 0;
+    }
+  }
+`;

package/es/button/index.d.ts

@@ -1,7 +1,8 @@
-import { type FC, type HTMLAttributes } from 'react';
+import React from 'react';
+import { type ButtonType } from './style';
 import type { ComponentSize } from '../';
-export type ButtonType = 'success' | 'error' | 'primary' | 'warning' | 'default';
-export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+export type { ButtonType } from './style';
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /** 按钮类型 */
     type?: ButtonType;
     /** 无限动画 */
@@ -26,5 +27,5 @@ export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     danger?: boolean;
     size?: ComponentSize;
 }
-declare const Button: FC<ButtonProps>;
+declare const Button: React.FC<ButtonProps>;
 export default Button;