@rainbow-oh/yee-c 0.8.14 → 0.8.15

package/dist/esm/Spin/indicator.js

@@ -141,6 +141,134 @@ var DotSpinner = function DotSpinner(props) {
     });
   })), /*#__PURE__*/React.createElement("style", null, "\n        @keyframes spinner-rotate {\n          0% {\n            transform: rotate(0deg);\n          }\n          100% {\n            transform: rotate(360deg);\n          }\n        }\n\n        @keyframes spinner-pulse {\n          0%, 100% {\n            transform: scale(1);\n            opacity: 1;\n          }\n          50% {\n            transform: scale(0.6);\n            opacity: 0.7;\n          }\n        }\n      "));
 };
+
+/**
+ * Bounce spinner - three dots that bounce up and down sequentially
+ */
+var BounceSpinner = function BounceSpinner(props) {
+  var _props$prefixCls4 = props.prefixCls,
+    prefixCls = _props$prefixCls4 === void 0 ? 'yee-spin' : _props$prefixCls4,
+    _props$size4 = props.size,
+    size = _props$size4 === void 0 ? 'default' : _props$size4,
+    classNames = props.classNames,
+    styles = props.styles,
+    width = props.width,
+    height = props.height,
+    color = props.color;
+  var containerSize = sizeMap[size];
+  var dotSizeMap = {
+    small: 4,
+    default: 6,
+    large: 10
+  };
+  var dotSize = dotSizeMap[size];
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-indicator"), "".concat(prefixCls, "-indicator-bounce"), classNames === null || classNames === void 0 ? void 0 : classNames.indicator),
+    style: _objectSpread({
+      width: width || containerSize,
+      height: height || containerSize
+    }, styles === null || styles === void 0 ? void 0 : styles.indicator)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-bounce")
+  }, [0, 1, 2].map(function (i) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: i,
+      className: "".concat(prefixCls, "-bounce-dot"),
+      style: {
+        width: dotSize,
+        height: dotSize,
+        animationDelay: "".concat(i * 0.15, "s"),
+        backgroundColor: color
+      }
+    });
+  })));
+};
+
+/**
+ * Pulse spinner - a circle that pulses (scales up and fades out) repeatedly
+ */
+var PulseSpinner = function PulseSpinner(props) {
+  var _props$prefixCls5 = props.prefixCls,
+    prefixCls = _props$prefixCls5 === void 0 ? 'yee-spin' : _props$prefixCls5,
+    _props$size5 = props.size,
+    size = _props$size5 === void 0 ? 'default' : _props$size5,
+    classNames = props.classNames,
+    styles = props.styles,
+    width = props.width,
+    height = props.height,
+    color = props.color;
+  var containerSize = sizeMap[size];
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-indicator"), "".concat(prefixCls, "-indicator-pulse"), classNames === null || classNames === void 0 ? void 0 : classNames.indicator),
+    style: _objectSpread({
+      width: width || containerSize,
+      height: height || containerSize
+    }, styles === null || styles === void 0 ? void 0 : styles.indicator)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-pulse-circle"),
+    style: {
+      backgroundColor: color
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-pulse-circle ").concat(prefixCls, "-pulse-circle-delay"),
+    style: {
+      backgroundColor: color
+    }
+  }));
+};
+
+/**
+ * Wheel spinner - similar to spokes but each line is offset from center,
+ * creating a visible hollow circle in the middle
+ */
+var WheelSpinner = function WheelSpinner(props) {
+  var _props$prefixCls6 = props.prefixCls,
+    prefixCls = _props$prefixCls6 === void 0 ? 'yee-spin' : _props$prefixCls6,
+    _props$size6 = props.size,
+    size = _props$size6 === void 0 ? 'default' : _props$size6,
+    classNames = props.classNames,
+    styles = props.styles,
+    width = props.width,
+    height = props.height,
+    color = props.color;
+  var containerSize = sizeMap[size];
+  var count = 10;
+  var innerRadius = 0.38; // start at 38% from center (larger hollow area)
+  var spokeLength = containerSize * 0.22;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-indicator"), "".concat(prefixCls, "-indicator-wheel"), classNames === null || classNames === void 0 ? void 0 : classNames.indicator),
+    style: _objectSpread({
+      width: width || containerSize,
+      height: height || containerSize
+    }, styles === null || styles === void 0 ? void 0 : styles.indicator)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-wheel-spokes")
+  }, Array.from({
+    length: count
+  }, function (_, i) {
+    var angle = i * 360 / count;
+    var rad = angle * Math.PI / 180;
+    // Position each spoke: starts at innerRadius from center
+    var cx = containerSize / 2;
+    var cy = containerSize / 2;
+    var x = cx + innerRadius * containerSize * Math.sin(rad);
+    var y = cy - innerRadius * containerSize * Math.cos(rad);
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: "".concat(prefixCls, "-wheel-spoke"),
+      style: {
+        top: y,
+        left: x,
+        height: spokeLength,
+        marginLeft: -1,
+        transform: "rotate(".concat(angle, "deg)"),
+        transformOrigin: 'top center',
+        animationDelay: "".concat(i * 1.2 / count, "s"),
+        backgroundColor: color
+      }
+    });
+  })));
+};
 var Indicator = function Indicator(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'dot' : _ref$variant,
@@ -151,6 +279,15 @@ var Indicator = function Indicator(_ref) {
   if (variant === 'spokes') {
     return /*#__PURE__*/React.createElement(SpokesSpinner, props);
   }
+  if (variant === 'bounce') {
+    return /*#__PURE__*/React.createElement(BounceSpinner, props);
+  }
+  if (variant === 'pulse') {
+    return /*#__PURE__*/React.createElement(PulseSpinner, props);
+  }
+  if (variant === 'wheel') {
+    return /*#__PURE__*/React.createElement(WheelSpinner, props);
+  }
   return /*#__PURE__*/React.createElement(DotSpinner, props);
 };
 export default Indicator;

package/dist/esm/Spin/interface.d.ts

@@ -66,7 +66,7 @@ export type SpinProps = DataAttributeProps & {
     /**
      * Indicator variant
      * */
-    variant?: 'dot' | 'ring' | 'spokes';
+    variant?: 'dot' | 'ring' | 'spokes' | 'bounce' | 'pulse' | 'wheel';
     /**
      * Loading indicator
      */

package/dist/esm/Spin/style/index.less

@@ -69,6 +69,64 @@
         animation: yee-spin-spokes-fade 1.2s linear infinite;
       }
     }
+
+    &-bounce {
+      @{pls}-bounce {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: 3px;
+      }
+
+      @{pls}-bounce-dot {
+        display: inline-block;
+        background-color: var(--m-indicator-dot-bg-color);
+        border-radius: 50%;
+        animation: yee-spin-bounce 0.6s ease-in-out infinite alternate;
+      }
+    }
+
+    &-pulse {
+      @{pls}-pulse-circle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: var(--m-indicator-dot-bg-color);
+        opacity: 0.6;
+        animation: yee-spin-pulse 1.5s ease-in-out infinite;
+
+        &-delay {
+          animation-delay: 0.5s;
+        }
+      }
+    }
+
+    &-wheel {
+      @{pls}-wheel-hub {
+        display: none;
+      }
+
+      @{pls}-wheel-spokes {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      @{pls}-wheel-spoke {
+        position: absolute;
+        left: 50%;
+        width: 2px;
+        margin-left: -1px;
+        background-color: var(--m-indicator-dot-bg-color);
+        border-radius: 1px;
+        animation: yee-spin-spokes-fade 1.2s linear infinite;
+      }
+    }
   }
 
   &-tip {
@@ -168,3 +226,31 @@
     opacity: 0.15;
   }
 }
+
+@keyframes yee-spin-bounce {
+  0% {
+    transform: translateY(25%);
+    opacity: 0.4;
+  }
+
+  100% {
+    transform: translateY(-25%);
+    opacity: 1;
+  }
+}
+
+@keyframes yee-spin-pulse {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/dist/esm/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-30T09:31:08.775Z
+ * Generated on 2026-07-31T06:58:34.574Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/esm/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-30T09:31:08.775Z
+ * Generated on 2026-07-31T06:58:34.574Z
  */
 
 /* ========== color.css ========== */

package/dist/esm/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.8.14";
+export declare const version = "0.8.15";

package/dist/esm/version.js

@@ -1,4 +1,4 @@
-export var version = "0.8.14";
+export var version = "0.8.15";
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;
 }