@tendaui/react 1.1.1 → 1.1.2

package/es/drawer/style/index.css

@@ -0,0 +1,231 @@
+@charset "UTF-8";
+/**
+ * 颜色
+ */
+/**
+ * 尺寸
+ */
+/**
+ * 字体
+ */
+/**
+ * 动画
+ */
+/**
+ * 间距
+ */
+/**
+ * 位置
+ */
+/**
+ * 边框弧度
+ */
+.t-tips {
+  font-size: var(--td-font-size-body-small);
+}
+
+.t-tips.t-is-default {
+  color: #000;
+}
+
+.t-tips.t-is-error {
+  color: #000;
+}
+
+.t-tips.t-is-warning {
+  color: #000;
+}
+
+.t-tips.t-is-success {
+  color: #000;
+}
+
+.t-drawer {
+  position: fixed;
+  z-index: 1500;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  outline: none;
+}
+.t-drawer--lock {
+  overflow: hidden;
+}
+.t-drawer--attach {
+  position: absolute;
+}
+.t-drawer--left, .t-drawer--right {
+  top: 0;
+}
+.t-drawer--left {
+  left: 0;
+}
+.t-drawer--right {
+  right: 0;
+}
+.t-drawer--top, .t-drawer--bottom {
+  left: 0;
+}
+.t-drawer--top {
+  top: 0;
+}
+.t-drawer--bottom {
+  bottom: 0;
+}
+.t-drawer__mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--td-mask-active);
+  -webkit-transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  opacity: 0;
+}
+.t-drawer__content-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  background: var(--td-bg-color-container);
+  width: 16px;
+  height: 16px;
+  font-size: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+  -webkit-box-shadow: var(--td-shadow-2);
+          box-shadow: var(--td-shadow-2);
+  overflow: hidden;
+  pointer-events: auto;
+  -webkit-transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1);
+  position: relative;
+}
+.t-drawer .t-drawer__content-wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+}
+.t-drawer .t-drawer__content-wrapper--left, .t-drawer .t-drawer__content-wrapper--right {
+  top: 0;
+}
+.t-drawer .t-drawer__content-wrapper--left {
+  left: 0;
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+}
+.t-drawer .t-drawer__content-wrapper--right {
+  right: 0;
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+}
+.t-drawer .t-drawer__content-wrapper--top, .t-drawer .t-drawer__content-wrapper--bottom {
+  left: 0;
+}
+.t-drawer .t-drawer__content-wrapper--top {
+  top: 0;
+  -webkit-transform: translateY(-100%);
+          transform: translateY(-100%);
+}
+.t-drawer .t-drawer__content-wrapper--bottom {
+  bottom: 0;
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+}
+.t-drawer__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: var(--td-comp-size-xxxl);
+  padding: 0 var(--td-comp-paddingLR-l);
+  font: var(--td-font-title-medium);
+  color: var(--td-text-color-primary);
+  border-bottom: 1px solid var(--td-border-level-1-color);
+  border-radius: var(--td-radius-small) var(--td-radius-small) 0 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.t-drawer__body {
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
+  overflow: auto;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.t-drawer__footer {
+  width: 100%;
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
+  text-align: left;
+  border-top: 1px solid var(--td-border-level-1-color);
+  background-color: var(--td-bg-color-container);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.t-drawer__footer .t-button {
+  margin-left: var(--td-comp-margin-s);
+}
+.t-drawer__footer .t-button:first-child {
+  margin-left: 0;
+}
+.t-drawer__close-btn {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: var(--td-comp-size-xs);
+  height: var(--td-comp-size-xs);
+  top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-xs)) / 2);
+  right: var(--td-comp-margin-s);
+  color: var(--td-text-color-primary);
+  background-color: var(--td-bg-color-container);
+  border-radius: var(--td-radius-default);
+  cursor: pointer;
+  -webkit-transition: background-color 0.2s;
+  transition: background-color 0.2s;
+}
+.t-drawer__close-btn:hover {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-drawer__close-btn:active {
+  background-color: var(--td-bg-color-container-active);
+}
+.t-drawer__close-btn .t-icon {
+  font-size: calc(var(--td-font-size-body-medium) + 2px);
+  vertical-align: unset;
+}
+.t-drawer--open {
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+}
+.t-drawer--open > .t-drawer__content-wrapper {
+  visibility: visible;
+}
+.t-drawer--open > .t-drawer__mask {
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+}
+.t-drawer--without-mask {
+  pointer-events: none;
+}
+
+[tabindex="-1"]:focus {
+  outline: none !important;
+}

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

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

package/es/drawer/style/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/es/drawer/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/es/drawer/type.d.ts

@@ -0,0 +1,199 @@
+import { ButtonProps } from "../button";
+import { TNode, Styles, AttachNode } from "../common";
+import { MouseEvent, KeyboardEvent } from "react";
+export interface TdDrawerProps {
+    /**
+     * 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+     */
+    attach?: AttachNode;
+    /**
+     * 抽屉内容
+     */
+    body?: TNode;
+    /**
+     * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件
+     */
+    cancelBtn?: FooterButton;
+    /**
+     * 抽屉内容，同 body
+     */
+    children?: TNode;
+    /**
+     * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例
+     */
+    closeBtn?: TNode;
+    /**
+     * 按下 ESC 时是否触发抽屉关闭事件
+     */
+    closeOnEscKeydown?: boolean;
+    /**
+     * 点击蒙层时是否触发抽屉关闭事件
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * 取消按钮，可自定义。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
+     */
+    confirmBtn?: FooterButton;
+    /**
+     * 抽屉关闭时是否销毁节点
+     * @default false
+     */
+    destroyOnClose?: boolean;
+    /**
+     * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 或 null 不显示任何内容，值类型为 TNode 表示自定义底部内容
+     * @default true
+     */
+    footer?: TNode;
+    /**
+     * 是否强制渲染Drawer
+     * @default false
+     */
+    forceRender?: boolean;
+    /**
+     * 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容
+     * @default true
+     */
+    header?: TNode;
+    /**
+     * 是否启用抽屉懒加载，启用时抽屉的内容不渲染
+     * @default false
+     */
+    lazy?: boolean;
+    /**
+     * 展开方式，有两种：直接展示在内容上方 和 推开内容区域
+     * @default overlay
+     */
+    mode?: "overlay" | "push";
+    /**
+     * 抽屉方向
+     * @default right
+     */
+    placement?: "left" | "right" | "top" | "bottom";
+    /**
+     * 防止滚动穿透
+     * @default true
+     */
+    preventScrollThrough?: boolean;
+    /**
+     * 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative
+     * @default false
+     */
+    showInAttachedElement?: boolean;
+    /**
+     * 是否显示遮罩层
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
+     * 尺寸，支持 'small', 'medium', 'large'，'35px', '30%',  '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度
+     */
+    size?: string;
+    /**
+     * 抽屉大小可拖拽调整，横向抽屉调整宽度
+     * @default false
+     */
+    sizeDraggable?: boolean | SizeDragLimit;
+    /**
+     * 组件是否可见
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * 抽屉层级，样式默认为 1500
+     */
+    zIndex?: number;
+    /**
+     * 对话框执行消失动画效果前触发
+     */
+    onBeforeClose?: () => void;
+    /**
+     * 对话框执行弹出动画效果前触发
+     */
+    onBeforeOpen?: () => void;
+    /**
+     * 如果“取消”按钮存在，点击“取消”按钮时触发，同时触发关闭事件
+     */
+    onCancel?: (context: {
+        e: MouseEvent<HTMLDivElement | HTMLButtonElement>;
+    }) => void;
+    /**
+     * 关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发
+     */
+    onClose?: (context: DrawerCloseContext) => void;
+    /**
+     * 如果关闭按钮存在，点击关闭按钮时触发该事件，同时触发关闭事件
+     */
+    onCloseBtnClick?: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 如果“确认”按钮存在，则点击“确认”按钮时触发
+     */
+    onConfirm?: (context: {
+        e: MouseEvent<HTMLDivElement | HTMLButtonElement>;
+    }) => void;
+    /**
+     * 按下 ESC 键时触发
+     */
+    onEscKeydown?: (context: {
+        e: KeyboardEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 如果蒙层存在，点击蒙层时触发
+     */
+    onOverlayClick?: (context: {
+        e: MouseEvent<HTMLDivElement>;
+    }) => void;
+    /**
+     * 抽屉大小调整结束事件
+     */
+    onSizeDragEnd?: (context: {
+        e: globalThis.MouseEvent;
+        size: number;
+    }) => void;
+}
+export interface DrawerOptions extends Omit<TdDrawerProps, "attach"> {
+    /**
+     * 抽屉挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+     * @default 'body'
+     */
+    attach?: AttachNode;
+    /**
+     * 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second'
+     * @default ''
+     */
+    className?: string;
+    /**
+     * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
+     */
+    style?: Styles;
+}
+export interface DrawerInstance {
+    /**
+     * 销毁抽屉
+     */
+    destroy?: () => void;
+    /**
+     * 隐藏抽屉
+     */
+    hide?: () => void;
+    /**
+     * 显示抽屉
+     */
+    show?: () => void;
+    /**
+     * 更新抽屉内容
+     */
+    update?: (props: DrawerOptions) => void;
+}
+export type FooterButton = string | ButtonProps | TNode;
+export interface SizeDragLimit {
+    max: number;
+    min: number;
+}
+export type DrawerEventSource = "esc" | "close-btn" | "cancel" | "overlay";
+export interface DrawerCloseContext {
+    trigger: DrawerEventSource;
+    e: MouseEvent<HTMLDivElement | HTMLButtonElement> | KeyboardEvent<HTMLDivElement>;
+}
+export type DrawerMethod = (options?: DrawerOptions) => DrawerInstance;

package/es/drawer/utils/index.d.ts

@@ -0,0 +1,23 @@
+type Placement = "left" | "right" | "top" | "bottom";
+interface SizeDragLimit {
+    max: number;
+    min: number;
+}
+export declare function getSizeDraggable(sizeDraggable: boolean | SizeDragLimit, limit: {
+    max: number;
+    min: number;
+}): {
+    allowSizeDraggable: boolean;
+    max: number;
+    min: number;
+};
+type IOptions = {
+    x: number;
+    y: number;
+    maxWidth: number;
+    maxHeight: number;
+    min: number;
+    max: number;
+};
+export declare function calcMoveSize(placement: Placement, opts: IOptions): number;
+export {};

package/es/drawer/utils/index.js

@@ -0,0 +1,46 @@
+function getSizeDraggable(sizeDraggable, limit) {
+  if (typeof sizeDraggable === "boolean") {
+    return {
+      allowSizeDraggable: sizeDraggable,
+      max: limit.max,
+      min: limit.min
+    };
+  }
+  return {
+    allowSizeDraggable: true,
+    max: sizeDraggable.max,
+    min: sizeDraggable.min
+  };
+}
+function calcSizeRange(size, min, max) {
+  return Math.min(Math.max(size, min), max);
+}
+function calcMoveSize(placement, opts) {
+  var x = opts.x,
+    y = opts.y,
+    max = opts.max,
+    min = opts.min,
+    maxWidth = opts.maxWidth,
+    maxHeight = opts.maxHeight;
+  var moveSize;
+  switch (placement) {
+    case "right":
+      moveSize = calcSizeRange(maxWidth - x, min, max);
+      break;
+    case "left":
+      moveSize = calcSizeRange(x, min, max);
+      break;
+    case "top":
+      moveSize = calcSizeRange(y, min, max);
+      break;
+    case "bottom":
+      moveSize = calcSizeRange(maxHeight - y, min, max);
+      break;
+    default:
+      return moveSize;
+  }
+  return moveSize;
+}
+
+export { calcMoveSize, getSizeDraggable };
+//# sourceMappingURL=index.js.map

package/es/drawer/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../components/drawer/utils/index.ts"],"sourcesContent":["type Placement = \"left\" | \"right\" | \"top\" | \"bottom\";\n\ninterface SizeDragLimit {\n  max: number;\n  min: number;\n}\n\nexport function getSizeDraggable(sizeDraggable: boolean | SizeDragLimit, limit: { max: number; min: number }) {\n  if (typeof sizeDraggable === \"boolean\") {\n    return {\n      allowSizeDraggable: sizeDraggable,\n      max: limit.max,\n      min: limit.min\n    };\n  }\n\n  return {\n    allowSizeDraggable: true,\n    max: sizeDraggable.max,\n    min: sizeDraggable.min\n  };\n}\n\ntype IOptions = {\n  x: number;\n  y: number;\n  maxWidth: number;\n  maxHeight: number;\n  min: number;\n  max: number;\n};\n\n// > min && < max\nfunction calcSizeRange(size: number, min: number, max: number) {\n  return Math.min(Math.max(size, min), max);\n}\n\nexport function calcMoveSize(placement: Placement, opts: IOptions) {\n  const { x, y, max, min, maxWidth, maxHeight } = opts;\n  let moveSize: number | undefined;\n  switch (placement) {\n    case \"right\":\n      // |<---  x  --->|      |\n      // |     maxWidth       |\n      //               | size |  > min && < max\n      moveSize = calcSizeRange(maxWidth - x, min, max);\n      break;\n    case \"left\":\n      // |<--  x -->|  |\n      // x > min && < max\n      moveSize = calcSizeRange(x, min, max);\n      break;\n    case \"top\":\n      // - - - - - - - -\n      // |     y        |\n      // |              |\n      // - - - - - - - -\n      //  > min && < max\n      // moveSize = Math.min(Math.max(y, min), max);\n      moveSize = calcSizeRange(y, min, max);\n      break;\n    case \"bottom\":\n      // - - - - - - - -\n      // |     y        |\n      // |              |  maxHeight\n      // - - - - - - - -\n      // |    size      |\n      //  > min && < max\n      moveSize = calcSizeRange(maxHeight - y, min, max);\n      break;\n    default:\n      // 参数缺失直接返回\n      return moveSize;\n  }\n  return moveSize;\n}\n"],"names":["getSizeDraggable","sizeDraggable","limit","allowSizeDraggable","max","min","calcSizeRange","size","Math","calcMoveSize","placement","opts","x","y","maxWidth","maxHeight","moveSize"],"mappings":"AAOO,SAASA,gBAAAA,CAAiBC,eAAwCC,KAAA,EAAqC;AAC5G,EAAA,IAAI,OAAOD,kBAAkB,SAAA,EAAW;IACtC,OAAO;AACLE,MAAAA,kBAAA,EAAoBF,aAAA;MACpBG,KAAKF,KAAA,CAAME,GAAA;MACXC,KAAKH,KAAA,CAAMG;KACb;AACF,EAAA;EAEA,OAAO;AACLF,IAAAA,kBAAA,EAAoB,IAAA;IACpBC,KAAKH,aAAA,CAAcG,GAAA;IACnBC,KAAKJ,aAAA,CAAcI;GACrB;AACF;AAYA,SAASC,aAAAA,CAAcC,IAAA,EAAcF,GAAA,EAAaD,GAAA,EAAa;AAC7D,EAAA,OAAOI,KAAKH,GAAA,CAAIG,IAAA,CAAKJ,IAAIG,IAAA,EAAMF,GAAG,GAAGD,GAAG,CAAA;AAC1C;AAEO,SAASK,YAAAA,CAAaC,WAAsBC,IAAA,EAAgB;AACjE,EAAA,IAAQC,CAAA,GAAwCD,IAAA,CAAxCC,CAAA;IAAGC,CAAA,GAAqCF,IAAA,CAArCE,CAAA;IAAGT,MAAkCO,IAAA,CAAlCP;IAAKC,GAAA,GAA6BM,IAAA,CAA7BN,GAAA;IAAKS,QAAA,GAAwBH,IAAA,CAAxBG,QAAA;IAAUC,YAAcJ,IAAA,CAAdI;AAClC,EAAA,IAAIC,QAAA;AACJ,EAAA,QAAQN,SAAA;AACN,IAAA,KAAK,OAAA;MAIHM,QAAA,GAAWV,aAAA,CAAcQ,QAAA,GAAWF,CAAA,EAAGP,GAAA,EAAKD,GAAG,CAAA;AAC/C,MAAA;AACF,IAAA,KAAK,MAAA;MAGHY,QAAA,GAAWV,aAAA,CAAcM,CAAA,EAAGP,GAAA,EAAKD,GAAG,CAAA;AACpC,MAAA;AACF,IAAA,KAAK,KAAA;MAOHY,QAAA,GAAWV,aAAA,CAAcO,CAAA,EAAGR,GAAA,EAAKD,GAAG,CAAA;AACpC,MAAA;AACF,IAAA,KAAK,QAAA;MAOHY,QAAA,GAAWV,aAAA,CAAcS,SAAA,GAAYF,CAAA,EAAGR,GAAA,EAAKD,GAAG,CAAA;AAChD,MAAA;AACF,IAAA;AAEE,MAAA,OAAOY,QAAA;AACX;AACA,EAAA,OAAOA,QAAA;AACT;;;;"}

package/es/fireworks/Fireworks.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { StyledProps } from "../common";
+import type { TdFireworksProps } from "./type";
+export interface FireworksProps extends TdFireworksProps, StyledProps {
+}
+declare const Fireworks: React.ForwardRefExoticComponent<FireworksProps & React.RefAttributes<HTMLDivElement>>;
+export default Fireworks;

package/es/fireworks/Fireworks.js

@@ -0,0 +1,139 @@
+import { _ as _defineProperty } from '../_chunks/dep-Cwish4GD.js';
+import { _ as _slicedToArray } from '../_chunks/dep-CzLhKWCf.js';
+import { _ as _objectWithoutProperties } from '../_chunks/dep-DN7d1SzH.js';
+import React, { forwardRef, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import { u as useConfig } from '../_chunks/dep-gy8uvBaS.js';
+import '../_chunks/dep-D-UKOauR.js';
+import '../_chunks/dep-5U9UjDaf.js';
+import 'dayjs';
+
+var _excluded = ["className", "style", "count", "colors", "duration", "size", "interval", "particleCount", "loop", "onLaunch"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_COLORS = ["#FF5F6D", "#FFC371", "#00C9FF", "#92FE9D", "#C77DFF", "#F2EA02"];
+var randomInRange = function randomInRange(min, max) {
+  return Math.random() * (max - min) + min;
+};
+var pickColor = function pickColor(palette) {
+  if (!palette || palette.length === 0) return DEFAULT_COLORS[0];
+  var index = Math.floor(Math.random() * palette.length);
+  return palette[index];
+};
+var createBurstList = function createBurstList(count, colors) {
+  return Array.from({
+    length: Math.max(1, count)
+  }).map(function (_, index) {
+    return {
+      id: "".concat(Date.now(), "-").concat(index, "-").concat(Math.random().toString(36).slice(2, 7)),
+      color: pickColor(colors),
+      left: randomInRange(8, 92),
+      top: randomInRange(15, 85),
+      delay: randomInRange(0, 500),
+      rotationOffset: randomInRange(0, 360)
+    };
+  });
+};
+var Fireworks = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    style = props.style,
+    _props$count = props.count,
+    count = _props$count === void 0 ? 6 : _props$count,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? DEFAULT_COLORS : _props$colors,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 2400 : _props$duration,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 140 : _props$size,
+    _props$interval = props.interval,
+    interval = _props$interval === void 0 ? 2800 : _props$interval,
+    _props$particleCount = props.particleCount,
+    particleCount = _props$particleCount === void 0 ? 12 : _props$particleCount,
+    _props$loop = props.loop,
+    loop = _props$loop === void 0 ? true : _props$loop,
+    onLaunch = props.onLaunch,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useConfig = useConfig(),
+    classPrefix = _useConfig.classPrefix;
+  var componentCls = "".concat(classPrefix, "-fireworks");
+  var safeParticleCount = Math.max(6, particleCount);
+  var _useState = useState(function () {
+      return createBurstList(count, colors);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    bursts = _useState2[0],
+    setBursts = _useState2[1];
+  var timerRef = useRef();
+  var particleAngles = useMemo(function () {
+    return Array.from({
+      length: safeParticleCount
+    }).map(function (_, index) {
+      return 360 / safeParticleCount * index;
+    });
+  }, [safeParticleCount]);
+  var triggerLaunch = useCallback(function () {
+    var nextBursts = createBurstList(count, colors);
+    setBursts(nextBursts);
+    var context = {
+      bursts: nextBursts
+    };
+    onLaunch === null || onLaunch === void 0 || onLaunch(context);
+  }, [count, colors, onLaunch]);
+  useEffect(function () {
+    triggerLaunch();
+  }, [triggerLaunch]);
+  useEffect(function () {
+    if (!loop) return void 0;
+    timerRef.current && clearInterval(timerRef.current);
+    timerRef.current = setInterval(triggerLaunch, Math.max(interval, duration));
+    return function () {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [duration, interval, loop, triggerLaunch]);
+  useEffect(function () {
+    return function () {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */React.createElement("div", _objectSpread({
+    ref: ref,
+    className: classNames(componentCls, className),
+    style: style,
+    role: "presentation",
+    "aria-hidden": "true"
+  }, rest), bursts.map(function (burst) {
+    var burstStyle = {
+      "--fireworks-left": "".concat(burst.left, "%"),
+      "--fireworks-top": "".concat(burst.top, "%"),
+      "--fireworks-delay": "".concat(burst.delay, "ms"),
+      "--fireworks-color": burst.color,
+      "--fireworks-size": "".concat(size, "px"),
+      "--fireworks-duration": "".concat(duration, "ms")
+    };
+    return /* @__PURE__ */React.createElement("span", {
+      key: burst.id,
+      className: "".concat(componentCls, "__burst"),
+      style: burstStyle
+    }, particleAngles.map(function (angle, index) {
+      var sparkStyle = {
+        "--fireworks-delay": "".concat(burst.delay, "ms"),
+        "--fireworks-duration": "".concat(duration, "ms"),
+        "--fireworks-color": burst.color,
+        "--fireworks-rotate": "".concat(angle + burst.rotationOffset, "deg")
+      };
+      return /* @__PURE__ */React.createElement("i", {
+        key: "".concat(burst.id, "-").concat(index),
+        className: "".concat(componentCls, "__spark"),
+        style: sparkStyle
+      });
+    }));
+  }));
+});
+Fireworks.displayName = "Fireworks";
+
+export { Fireworks as default };
+//# sourceMappingURL=Fireworks.js.map