@996-design/996-happy-work-theme 1.0.0

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,23 @@
+# Upstream attribution
+
+The runtime and declaration artifacts in `es/` and `lib/` are derived from
+`@ant-design/happy-work-theme` 2.0.0.
+
+- Upstream: https://github.com/ant-design/happy-work-theme/tree/2.0.0
+- License: MIT. See `LICENSE`.
+
+Local changes are limited to the package identity, workspace scripts and
+metadata, and rewriting Ant Design, CSS-in-JS, and FastColor imports to the
+corresponding `@996-design/*` packages. The theme behavior is otherwise kept
+aligned with the published 2.0.0 package.
+
+## Mechanical parity source
+
+- npm tarball: https://registry.npmjs.org/@ant-design/happy-work-theme/-/happy-work-theme-2.0.0.tgz
+- Integrity: `sha512-3pvwSOGl9YKkhusTFVsSAouoQPJNsf95I2ooIiUmG/tOkayFUbFqPqMHkMc5Q0XdpfKW+sCr6bCtLdsDnWxaaA==`
+- Guard inventory: 16 runtime files; sorted-path SHA-256
+  `15a1411dd3d7ade353f1c9ae1f33006a71b078f3a845b2c71c90e333f3d049a1`.
+
+The parity inventory excludes package metadata, local build products,
+`node_modules`, and caches. Every inventoried file is compared after only the
+declared package-namespace rewrite.

package/README.md

@@ -0,0 +1,15 @@
+# 996 Design Happy Work Theme
+
+Expressive interaction theme for focused, energetic product experiences.
+
+## Install
+
+```sh
+pnpm add @996-design/996-happy-work-theme
+```
+
+The package supplies theme runtime files and accompanying style assets. It is designed to be applied through the 996 Design configuration provider.
+
+## License
+
+MIT. See `LICENSE` and `NOTICE.md` for license and source attribution.

package/es/DotEffect/index.d.ts

@@ -0,0 +1,10 @@
+import type { GlobalToken } from '@996-design/996-components';
+import * as React from 'react';
+interface DotEffectProps {
+    target: HTMLElement;
+    token: GlobalToken;
+    hashId: string;
+    onFinish: VoidFunction;
+}
+export default function DotEffect({ hashId, target, token, onFinish, }: DotEffectProps): React.JSX.Element;
+export {};

package/es/DotEffect/index.js

@@ -0,0 +1,184 @@
+import { FastColor } from '@996-design/996-fast-color';
+import { clsx } from 'clsx';
+import { CSSMotionList } from '@rc-component/motion';
+import raf from "@rc-component/util/es/raf";
+import * as React from 'react';
+import useStyle, { TARGET_ATTR } from "./style";
+const DOT_COUNT = 7;
+const DOT_COUNT_LG = 10;
+function inRange(x, y, left, top, right, bottom) {
+  return x >= left && x <= right && y >= top && y <= bottom;
+}
+export default function DotEffect({
+  hashId,
+  target,
+  token,
+  onFinish
+}) {
+  const prefixCls = 'happy-wave';
+  const dotPrefixCls = `${prefixCls}-dot`;
+  const [dots, setDots] = React.useState(null);
+  const [left, setLeft] = React.useState(0);
+  const [top, setTop] = React.useState(0);
+  useStyle(prefixCls, hashId, token);
+  const targetAttrName = `${TARGET_ATTR}-${hashId}`;
+
+  // ========================= Dots =========================
+  React.useEffect(() => {
+    const id = raf(() => {
+      if (['-dangerous', '-error'].some(skipCls => target.className.includes(skipCls))) {
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      const {
+        width,
+        height
+      } = rect;
+      setLeft(rect.left + width / 2);
+      setTop(rect.top + height / 2);
+      setDots([]);
+      const minSize = Math.min(width, height);
+      const maxSize = Math.max(width, height);
+      const halfMinSize = minSize / 2;
+      const halfMaxSize = maxSize / 2;
+      const halfWidth = width / 2;
+      const halfHeight = height / 2;
+      const OFFSET_MIN = 15;
+      const OFFSET_MAX = 30;
+      const halfOffsetMinWidth = halfWidth + OFFSET_MIN;
+      const halfOffsetMinHeight = halfHeight + OFFSET_MIN;
+      const halfOffsetMaxWidth = halfWidth + OFFSET_MAX;
+      const halfOffsetMaxHeight = halfHeight + OFFSET_MAX;
+      const dotCount = minSize >= 20 ? DOT_COUNT_LG : DOT_COUNT;
+
+      // Delay to start dot motion
+      setTimeout(() => {
+        const offsetAngle = Math.random() * 360;
+
+        // Color
+        const {
+          colorPrimary
+        } = token;
+        const colorHsv = new FastColor(colorPrimary).toHsv();
+        colorHsv.h -= 30;
+        const colorPrimaryWeak = new FastColor(colorHsv).toHexString();
+        setDots(new Array(dotCount).fill(null).map((_, index) => {
+          const rotate = 360 / dotCount;
+          const randomAngle = offsetAngle + rotate * index;
+
+          // Get start XY (Which should align the rect edge)
+          let startX = 0;
+          let startY = 0;
+          for (let startDist = halfMinSize - 1; startDist <= halfMaxSize; startDist += 1) {
+            const x = Math.cos(randomAngle * Math.PI / 180) * startDist;
+            const y = Math.sin(randomAngle * Math.PI / 180) * startDist;
+            if (!inRange(x, y, -halfWidth, -halfHeight, halfWidth, halfHeight)) {
+              break;
+            }
+            startX = x;
+            startY = y;
+          }
+
+          // Get end XY
+          let endX = startX;
+          let endY = startY;
+          let endDist = halfMinSize;
+          const endHalfWidth = Math.random() * (halfOffsetMaxWidth - halfOffsetMinWidth) + halfOffsetMinWidth;
+          const endHalfHeight = Math.random() * (halfOffsetMaxHeight - halfOffsetMinHeight) + halfOffsetMinHeight;
+          do {
+            endX = Math.cos(randomAngle * Math.PI / 180) * endDist;
+            endY = Math.sin(randomAngle * Math.PI / 180) * endDist;
+            endDist += 1;
+          } while (inRange(endX, endY, -endHalfWidth, -endHalfHeight, endHalfWidth, endHalfHeight));
+          let size = Math.random() * 3 + 3;
+          if (height >= 20) {
+            size = Math.random() * 4 + 6;
+          }
+          return {
+            key: index + 1,
+            startX: `${startX}px`,
+            startY: `${startY}px`,
+            endX: `${endX}px`,
+            endY: `${endY}px`,
+            startSize: `${size}px`,
+            endSize: `${Math.random() > 0.75 ? size : 0}px`,
+            type: Math.random() > 0.6 ? 'outlined' : 'fill',
+            color: Math.random() > 0.5 ? colorPrimary : colorPrimaryWeak
+          };
+        }));
+      }, 50);
+      target.setAttribute(targetAttrName, 'true');
+    });
+    return () => {
+      raf.cancel(id);
+    };
+  }, []);
+
+  // ======================== Clean =========================
+  React.useEffect(() => {
+    const id = setTimeout(() => {
+      target.removeAttribute(targetAttrName);
+      onFinish();
+    }, 600);
+    return () => {
+      clearTimeout(id);
+    };
+  }, []);
+
+  // ======================== Render ========================
+  if (!dots) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx(prefixCls, hashId),
+    style: {
+      left,
+      top
+    }
+  }, /*#__PURE__*/React.createElement(CSSMotionList, {
+    component: false,
+    keys: dots,
+    motionAppear: true,
+    motionName: "happy-in-out"
+  }, ({
+    className: motionCls,
+    style: motionStyle,
+    key,
+    startX,
+    startY,
+    endX,
+    endY,
+    startSize,
+    endSize,
+    type,
+    color
+  }) => {
+    const name = `${dotPrefixCls}-${key}`;
+    const dotCls = clsx(dotPrefixCls, motionCls, name);
+
+    // if (dotCls.includes('active')) {
+    //   debugger;
+    // }
+
+    const dotStyle = {
+      [`--start-x`]: startX,
+      [`--start-y`]: startY,
+      [`--end-x`]: endX,
+      [`--end-y`]: endY,
+      [`--start-size`]: startSize,
+      [`--end-size`]: endSize
+    };
+    if (type === 'fill') {
+      dotStyle['--background'] = color;
+    } else {
+      dotStyle['--border'] = `1px solid ${color}`;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: dotCls,
+      style: {
+        ...motionStyle,
+        ...dotStyle
+      }
+    });
+  }));
+}

package/es/DotEffect/style.d.ts

@@ -0,0 +1,4 @@
+import type { GlobalToken } from '@996-design/996-components';
+export declare const TARGET_ATTR = "data-happy-wave-target";
+declare const useStyle: (prefixCls: string, hashId: string, token: GlobalToken) => void;
+export default useStyle;

package/es/DotEffect/style.js

@@ -0,0 +1,100 @@
+import { createTheme, Keyframes, useStyleRegister } from '@996-design/996-cssinjs';
+const DEFAULT_THEME = createTheme(token => token);
+export const TARGET_ATTR = 'data-happy-wave-target';
+const antWaveTargetEffect = new Keyframes('antWaveTargetEffect', {
+  '0%': {
+    transform: 'scale(1)'
+  },
+  '10%': {
+    transform: 'scale(1.1)'
+  },
+  '35%': {
+    transform: 'scale(0.94)'
+  },
+  '60%': {
+    transform: 'scale(1.05)'
+  },
+  '85%': {
+    transform: 'scale(0.97)'
+  },
+  '100%': {
+    transform: 'scale(1)'
+  }
+});
+const antWaveDotEffect = new Keyframes('antWaveDotEffect', {
+  '0%': {
+    opacity: 0,
+    left: `var(--start-x)`,
+    top: `var(--start-y)`,
+    width: `var(--start-size)`,
+    height: `var(--start-size)`,
+    background: `var(--background)`,
+    border: `var(--border)`
+  },
+  '25%': {
+    opacity: 1
+  },
+  '50%': {
+    opacity: 0.8
+  },
+  '100%': {
+    opacity: 0,
+    left: `var(--end-x)`,
+    top: `var(--end-y)`,
+    width: `var(--end-size)`,
+    height: `var(--end-size)`,
+    background: `var(--background)`,
+    border: `var(--border)`
+  }
+});
+const useStyle = (prefixCls, hashId, token) => {
+  const sharedConfig = {
+    theme: DEFAULT_THEME,
+    token
+  };
+  useStyleRegister({
+    ...sharedConfig,
+    path: ['HappyWorkTheme', 'target']
+  }, () => ({
+    // ======================== Target ========================
+    [`[${TARGET_ATTR}-${hashId}], & [${TARGET_ATTR}-${hashId}]`]: {
+      animationName: antWaveTargetEffect,
+      animationDuration: `0.45s`,
+      animationTimingFunction: 'ease-in-out',
+      animationFillMode: 'backwards'
+    }
+  }));
+  useStyleRegister({
+    ...sharedConfig,
+    hashId,
+    path: ['HappyWorkTheme', 'effect']
+  }, () => {
+    const dotPrefixCls = `.${prefixCls}`;
+    return [{
+      // ========================= Dots =========================
+      [dotPrefixCls]: {
+        position: 'fixed',
+        pointerEvents: 'none',
+        zIndex: 999999,
+        [`${dotPrefixCls}-dot`]: {
+          boxSizing: 'border-box',
+          position: 'absolute',
+          borderRadius: '100%',
+          opacity: 0,
+          transform: 'translate3d(-50%, -50%, 0)',
+          // Start Position
+          zIndex: 999999,
+          // =================== Basic Motion ===================
+          '&.happy-in-out': {
+            animationName: antWaveDotEffect,
+            animationDuration: token.motionDurationSlow,
+            // animationDuration: '10s',
+            animationTimingFunction: 'linear',
+            animationFillMode: 'backwards'
+          }
+        }
+      }
+    }];
+  });
+};
+export default useStyle;

package/es/HappyProvider.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface HappyProviderProps {
+    disabled?: boolean;
+}
+declare const HappyProvider: React.FC<React.PropsWithChildren<HappyProviderProps>>;
+export default HappyProvider;

package/es/HappyProvider.js

@@ -0,0 +1,46 @@
+import { ConfigProvider } from '@996-design/996-components';
+import useEvent from "@rc-component/util/es/hooks/useEvent";
+import * as React from 'react';
+import DotEffect from "./DotEffect";
+import { render, unmount } from "@rc-component/util/es/React/render";
+const HappyProvider = props => {
+  const {
+    children,
+    disabled
+  } = props;
+  const showEffect = useEvent((target, info) => {
+    const {
+      token,
+      hashId
+    } = info;
+
+    // Create holder
+    const holder = document.createElement('div');
+    holder.style.position = 'absolute';
+    holder.style.left = `0px`;
+    holder.style.top = `0px`;
+    document.body.appendChild(holder);
+    render( /*#__PURE__*/React.createElement(DotEffect, {
+      target: target,
+      token: token,
+      hashId: hashId,
+      onFinish: () => {
+        unmount(holder).then(() => {
+          holder.remove();
+        });
+      }
+    }), holder);
+  });
+  const memoizedWaveConfig = React.useMemo(() => {
+    if (disabled) {
+      return {};
+    }
+    return {
+      showEffect
+    };
+  }, [disabled]);
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    wave: memoizedWaveConfig
+  }, children);
+};
+export default HappyProvider;

package/es/index.d.ts

@@ -0,0 +1,2 @@
+import HappyProvider from './HappyProvider';
+export { HappyProvider };

package/es/index.js

@@ -0,0 +1,2 @@
+import HappyProvider from "./HappyProvider";
+export { HappyProvider };

package/lib/DotEffect/index.d.ts

@@ -0,0 +1,10 @@
+import type { GlobalToken } from '@996-design/996-components';
+import * as React from 'react';
+interface DotEffectProps {
+    target: HTMLElement;
+    token: GlobalToken;
+    hashId: string;
+    onFinish: VoidFunction;
+}
+export default function DotEffect({ hashId, target, token, onFinish, }: DotEffectProps): React.JSX.Element;
+export {};

package/lib/DotEffect/index.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DotEffect;
+var _fastColor = require("@996-design/996-fast-color");
+var _clsx = require("clsx");
+var _motion = require("@rc-component/motion");
+var _raf = _interopRequireDefault(require("@rc-component/util/lib/raf"));
+var React = _interopRequireWildcard(require("react"));
+var _style = _interopRequireWildcard(require("./style"));
+const DOT_COUNT = 7;
+const DOT_COUNT_LG = 10;
+function inRange(x, y, left, top, right, bottom) {
+  return x >= left && x <= right && y >= top && y <= bottom;
+}
+function DotEffect({
+  hashId,
+  target,
+  token,
+  onFinish
+}) {
+  const prefixCls = 'happy-wave';
+  const dotPrefixCls = `${prefixCls}-dot`;
+  const [dots, setDots] = React.useState(null);
+  const [left, setLeft] = React.useState(0);
+  const [top, setTop] = React.useState(0);
+  (0, _style.default)(prefixCls, hashId, token);
+  const targetAttrName = `${_style.TARGET_ATTR}-${hashId}`;
+
+  // ========================= Dots =========================
+  React.useEffect(() => {
+    const id = (0, _raf.default)(() => {
+      if (['-dangerous', '-error'].some(skipCls => target.className.includes(skipCls))) {
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      const {
+        width,
+        height
+      } = rect;
+      setLeft(rect.left + width / 2);
+      setTop(rect.top + height / 2);
+      setDots([]);
+      const minSize = Math.min(width, height);
+      const maxSize = Math.max(width, height);
+      const halfMinSize = minSize / 2;
+      const halfMaxSize = maxSize / 2;
+      const halfWidth = width / 2;
+      const halfHeight = height / 2;
+      const OFFSET_MIN = 15;
+      const OFFSET_MAX = 30;
+      const halfOffsetMinWidth = halfWidth + OFFSET_MIN;
+      const halfOffsetMinHeight = halfHeight + OFFSET_MIN;
+      const halfOffsetMaxWidth = halfWidth + OFFSET_MAX;
+      const halfOffsetMaxHeight = halfHeight + OFFSET_MAX;
+      const dotCount = minSize >= 20 ? DOT_COUNT_LG : DOT_COUNT;
+
+      // Delay to start dot motion
+      setTimeout(() => {
+        const offsetAngle = Math.random() * 360;
+
+        // Color
+        const {
+          colorPrimary
+        } = token;
+        const colorHsv = new _fastColor.FastColor(colorPrimary).toHsv();
+        colorHsv.h -= 30;
+        const colorPrimaryWeak = new _fastColor.FastColor(colorHsv).toHexString();
+        setDots(new Array(dotCount).fill(null).map((_, index) => {
+          const rotate = 360 / dotCount;
+          const randomAngle = offsetAngle + rotate * index;
+
+          // Get start XY (Which should align the rect edge)
+          let startX = 0;
+          let startY = 0;
+          for (let startDist = halfMinSize - 1; startDist <= halfMaxSize; startDist += 1) {
+            const x = Math.cos(randomAngle * Math.PI / 180) * startDist;
+            const y = Math.sin(randomAngle * Math.PI / 180) * startDist;
+            if (!inRange(x, y, -halfWidth, -halfHeight, halfWidth, halfHeight)) {
+              break;
+            }
+            startX = x;
+            startY = y;
+          }
+
+          // Get end XY
+          let endX = startX;
+          let endY = startY;
+          let endDist = halfMinSize;
+          const endHalfWidth = Math.random() * (halfOffsetMaxWidth - halfOffsetMinWidth) + halfOffsetMinWidth;
+          const endHalfHeight = Math.random() * (halfOffsetMaxHeight - halfOffsetMinHeight) + halfOffsetMinHeight;
+          do {
+            endX = Math.cos(randomAngle * Math.PI / 180) * endDist;
+            endY = Math.sin(randomAngle * Math.PI / 180) * endDist;
+            endDist += 1;
+          } while (inRange(endX, endY, -endHalfWidth, -endHalfHeight, endHalfWidth, endHalfHeight));
+          let size = Math.random() * 3 + 3;
+          if (height >= 20) {
+            size = Math.random() * 4 + 6;
+          }
+          return {
+            key: index + 1,
+            startX: `${startX}px`,
+            startY: `${startY}px`,
+            endX: `${endX}px`,
+            endY: `${endY}px`,
+            startSize: `${size}px`,
+            endSize: `${Math.random() > 0.75 ? size : 0}px`,
+            type: Math.random() > 0.6 ? 'outlined' : 'fill',
+            color: Math.random() > 0.5 ? colorPrimary : colorPrimaryWeak
+          };
+        }));
+      }, 50);
+      target.setAttribute(targetAttrName, 'true');
+    });
+    return () => {
+      _raf.default.cancel(id);
+    };
+  }, []);
+
+  // ======================== Clean =========================
+  React.useEffect(() => {
+    const id = setTimeout(() => {
+      target.removeAttribute(targetAttrName);
+      onFinish();
+    }, 600);
+    return () => {
+      clearTimeout(id);
+    };
+  }, []);
+
+  // ======================== Render ========================
+  if (!dots) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _clsx.clsx)(prefixCls, hashId),
+    style: {
+      left,
+      top
+    }
+  }, /*#__PURE__*/React.createElement(_motion.CSSMotionList, {
+    component: false,
+    keys: dots,
+    motionAppear: true,
+    motionName: "happy-in-out"
+  }, ({
+    className: motionCls,
+    style: motionStyle,
+    key,
+    startX,
+    startY,
+    endX,
+    endY,
+    startSize,
+    endSize,
+    type,
+    color
+  }) => {
+    const name = `${dotPrefixCls}-${key}`;
+    const dotCls = (0, _clsx.clsx)(dotPrefixCls, motionCls, name);
+
+    // if (dotCls.includes('active')) {
+    //   debugger;
+    // }
+
+    const dotStyle = {
+      [`--start-x`]: startX,
+      [`--start-y`]: startY,
+      [`--end-x`]: endX,
+      [`--end-y`]: endY,
+      [`--start-size`]: startSize,
+      [`--end-size`]: endSize
+    };
+    if (type === 'fill') {
+      dotStyle['--background'] = color;
+    } else {
+      dotStyle['--border'] = `1px solid ${color}`;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: dotCls,
+      style: {
+        ...motionStyle,
+        ...dotStyle
+      }
+    });
+  }));
+}

package/lib/DotEffect/style.d.ts

@@ -0,0 +1,4 @@
+import type { GlobalToken } from '@996-design/996-components';
+export declare const TARGET_ATTR = "data-happy-wave-target";
+declare const useStyle: (prefixCls: string, hashId: string, token: GlobalToken) => void;
+export default useStyle;

package/lib/DotEffect/style.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TARGET_ATTR = void 0;
+var _cssinjs = require("@996-design/996-cssinjs");
+const DEFAULT_THEME = (0, _cssinjs.createTheme)(token => token);
+const TARGET_ATTR = exports.TARGET_ATTR = 'data-happy-wave-target';
+const antWaveTargetEffect = new _cssinjs.Keyframes('antWaveTargetEffect', {
+  '0%': {
+    transform: 'scale(1)'
+  },
+  '10%': {
+    transform: 'scale(1.1)'
+  },
+  '35%': {
+    transform: 'scale(0.94)'
+  },
+  '60%': {
+    transform: 'scale(1.05)'
+  },
+  '85%': {
+    transform: 'scale(0.97)'
+  },
+  '100%': {
+    transform: 'scale(1)'
+  }
+});
+const antWaveDotEffect = new _cssinjs.Keyframes('antWaveDotEffect', {
+  '0%': {
+    opacity: 0,
+    left: `var(--start-x)`,
+    top: `var(--start-y)`,
+    width: `var(--start-size)`,
+    height: `var(--start-size)`,
+    background: `var(--background)`,
+    border: `var(--border)`
+  },
+  '25%': {
+    opacity: 1
+  },
+  '50%': {
+    opacity: 0.8
+  },
+  '100%': {
+    opacity: 0,
+    left: `var(--end-x)`,
+    top: `var(--end-y)`,
+    width: `var(--end-size)`,
+    height: `var(--end-size)`,
+    background: `var(--background)`,
+    border: `var(--border)`
+  }
+});
+const useStyle = (prefixCls, hashId, token) => {
+  const sharedConfig = {
+    theme: DEFAULT_THEME,
+    token
+  };
+  (0, _cssinjs.useStyleRegister)({
+    ...sharedConfig,
+    path: ['HappyWorkTheme', 'target']
+  }, () => ({
+    // ======================== Target ========================
+    [`[${TARGET_ATTR}-${hashId}], & [${TARGET_ATTR}-${hashId}]`]: {
+      animationName: antWaveTargetEffect,
+      animationDuration: `0.45s`,
+      animationTimingFunction: 'ease-in-out',
+      animationFillMode: 'backwards'
+    }
+  }));
+  (0, _cssinjs.useStyleRegister)({
+    ...sharedConfig,
+    hashId,
+    path: ['HappyWorkTheme', 'effect']
+  }, () => {
+    const dotPrefixCls = `.${prefixCls}`;
+    return [{
+      // ========================= Dots =========================
+      [dotPrefixCls]: {
+        position: 'fixed',
+        pointerEvents: 'none',
+        zIndex: 999999,
+        [`${dotPrefixCls}-dot`]: {
+          boxSizing: 'border-box',
+          position: 'absolute',
+          borderRadius: '100%',
+          opacity: 0,
+          transform: 'translate3d(-50%, -50%, 0)',
+          // Start Position
+          zIndex: 999999,
+          // =================== Basic Motion ===================
+          '&.happy-in-out': {
+            animationName: antWaveDotEffect,
+            animationDuration: token.motionDurationSlow,
+            // animationDuration: '10s',
+            animationTimingFunction: 'linear',
+            animationFillMode: 'backwards'
+          }
+        }
+      }
+    }];
+  });
+};
+var _default = exports.default = useStyle;

package/lib/HappyProvider.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface HappyProviderProps {
+    disabled?: boolean;
+}
+declare const HappyProvider: React.FC<React.PropsWithChildren<HappyProviderProps>>;
+export default HappyProvider;

package/lib/HappyProvider.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("@996-design/996-components");
+var _useEvent = _interopRequireDefault(require("@rc-component/util/lib/hooks/useEvent"));
+var React = _interopRequireWildcard(require("react"));
+var _DotEffect = _interopRequireDefault(require("./DotEffect"));
+var _render = require("@rc-component/util/lib/React/render");
+const HappyProvider = props => {
+  const {
+    children,
+    disabled
+  } = props;
+  const showEffect = (0, _useEvent.default)((target, info) => {
+    const {
+      token,
+      hashId
+    } = info;
+
+    // Create holder
+    const holder = document.createElement('div');
+    holder.style.position = 'absolute';
+    holder.style.left = `0px`;
+    holder.style.top = `0px`;
+    document.body.appendChild(holder);
+    (0, _render.render)( /*#__PURE__*/React.createElement(_DotEffect.default, {
+      target: target,
+      token: token,
+      hashId: hashId,
+      onFinish: () => {
+        (0, _render.unmount)(holder).then(() => {
+          holder.remove();
+        });
+      }
+    }), holder);
+  });
+  const memoizedWaveConfig = React.useMemo(() => {
+    if (disabled) {
+      return {};
+    }
+    return {
+      showEffect
+    };
+  }, [disabled]);
+  return /*#__PURE__*/React.createElement(_antd.ConfigProvider, {
+    wave: memoizedWaveConfig
+  }, children);
+};
+var _default = exports.default = HappyProvider;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import HappyProvider from './HappyProvider';
+export { HappyProvider };

package/lib/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HappyProvider", {
+  enumerable: true,
+  get: function () {
+    return _HappyProvider.default;
+  }
+});
+var _HappyProvider = _interopRequireDefault(require("./HappyProvider"));

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@996-design/996-happy-work-theme",
+  "version": "1.0.0",
+  "private": false,
+  "description": "Expressive interaction theme for 996 Design",
+  "keywords": [
+    "996-design",
+    "react",
+    "theme"
+  ],
+  "license": "MIT",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "files": [
+    "es",
+    "lib",
+    "NOTICE.md",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "check": "bun -e \"await import('./es/index.js')\"",
+    "build": "bun run check",
+    "check:standalone": "bun scripts/check-standalone.ts"
+  },
+  "dependencies": {
+    "@996-design/996-cssinjs": "^1.0.0",
+    "@996-design/996-fast-color": "^1.0.0",
+    "@babel/runtime": "^7.18.3",
+    "@rc-component/motion": "^1.1.6",
+    "@rc-component/util": "^1.5.0",
+    "clsx": "^2.1.1"
+  },
+  "peerDependencies": {
+    "@996-design/996-components": "^1.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "engines": {
+    "node": ">=8.x"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "packageManager": "pnpm@9.15.0",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@gitlab.asdnc.cn/996-design/996-happy-work-theme.git"
+  }
+}