@rainbow-oh/yee-c 0.8.14 → 0.8.16

package/dist/cjs/Table/table.js

@@ -75,6 +75,7 @@ var import_tbody = __toESM(require("./tbody"));
 var import_tfooter = __toESM(require("./tfooter"));
 var import_theader = __toESM(require("./theader"));
 var import_Config_Provider = require("../Config-Provider");
+var import_useLatest = __toESM(require("../hooks/useLatest"));
 var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
 var import_omit = __toESM(require("../utils/omit"));
 var import_types = require("../utils/types");
@@ -140,6 +141,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     "onChange"
   ]);
   const dataAttrs = (0, import_types.pickDataAttrs)(rest);
+  const [measuredColumnWidths, setMeasuredColumnWidths] = import_react.default.useState();
   const getRowKey = import_react.default.useCallback(
     (record, key = rowKey) => {
       return typeof key === "function" ? key(record) : record[key];
@@ -153,7 +155,8 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     children,
     columns: propColumns,
     expandable,
-    rowSelection
+    rowSelection,
+    measuredColumnWidths
   });
   const {
     data: filteredData,
@@ -212,28 +215,58 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     onChange: onSelectionChange
   } = (0, import_useSelection.default)({ pageData, dataSource, getRowKey, rowSelection, allKeys });
   const prevFilterRecordsRef = (0, import_react.useRef)(filterRecords);
-  const contentWrapperRef = (0, import_react.useRef)(null);
   const contentRef = (0, import_react.useRef)(null);
+  const tableRef = (0, import_react.useRef)(null);
   const [horizontalScroll, setHorizontalScroll] = import_react.default.useState({
     left: false,
     right: false
   });
   const updateHorizontalScroll = import_react.default.useCallback(() => {
-    const wrapper = contentWrapperRef.current;
     const content = contentRef.current;
-    if (!wrapper || !content)
+    if (!content)
       return;
-    const scrollContainer = content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
-    const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    const maxScrollLeft = content.scrollWidth - content.clientWidth;
     const hasHorizontalScroll = maxScrollLeft > 1;
     const next = {
-      left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
-      right: hasHorizontalScroll && scrollContainer.scrollLeft < maxScrollLeft - 1
+      left: hasHorizontalScroll && content.scrollLeft > 1,
+      right: hasHorizontalScroll && content.scrollLeft < maxScrollLeft - 1
     };
     setHorizontalScroll(
       (current2) => current2.left === next.left && current2.right === next.right ? current2 : next
     );
   }, []);
+  const columnLayoutKey = (0, import_react.useMemo)(
+    () => wrapedColumns.map(
+      (column, index) => {
+        var _a2, _b, _c, _d;
+        return `${(_b = (_a2 = column.key) != null ? _a2 : column.dataIndex) != null ? _b : index}:${(_c = column.fixed) != null ? _c : ""}:${(_d = column.width) != null ? _d : ""}`;
+      }
+    ).join("|"),
+    [wrapedColumns]
+  );
+  const wrapedColumnsRef = (0, import_useLatest.default)(wrapedColumns);
+  const updateMeasuredColumnWidths = import_react.default.useCallback(() => {
+    var _a2;
+    const columns = wrapedColumnsRef.current;
+    if (!columns.some((column) => column.fixed))
+      return;
+    const colElements = (_a2 = tableRef.current) == null ? void 0 : _a2.querySelectorAll(
+      ":scope > colgroup > col"
+    );
+    if (!colElements || colElements.length !== columns.length)
+      return;
+    const nextWidths = Array.from(
+      colElements,
+      (column) => Math.round(column.getBoundingClientRect().width)
+    );
+    if (nextWidths.some((width) => !Number.isFinite(width) || width <= 0)) {
+      return;
+    }
+    setMeasuredColumnWidths((current2) => {
+      const unchanged = (current2 == null ? void 0 : current2.length) === nextWidths.length && current2.every((width, index) => width === nextWidths[index]);
+      return unchanged ? current2 : nextWidths;
+    });
+  }, [wrapedColumnsRef]);
   (0, import_react.useEffect)(() => {
     if (prevFilterRecordsRef.current === filterRecords)
       return;
@@ -258,20 +291,34 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
     onChange
   ]);
   (0, import_react.useEffect)(() => {
-    updateHorizontalScroll();
-    const wrapper = contentWrapperRef.current;
     const content = contentRef.current;
-    if (!wrapper || !content)
+    const tableElement = tableRef.current;
+    if (!content || !tableElement)
       return void 0;
+    const handleResize = () => {
+      updateHorizontalScroll();
+      updateMeasuredColumnWidths();
+    };
     if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", updateHorizontalScroll);
-      return () => window.removeEventListener("resize", updateHorizontalScroll);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
     }
-    const resizeObserver = new ResizeObserver(updateHorizontalScroll);
-    resizeObserver.observe(wrapper);
+    const resizeObserver = new ResizeObserver(handleResize);
     resizeObserver.observe(content);
+    resizeObserver.observe(tableElement);
     return () => resizeObserver.disconnect();
-  }, [updateHorizontalScroll, wrapedColumns, pageData, scroll == null ? void 0 : scroll.x]);
+  }, [updateHorizontalScroll, updateMeasuredColumnWidths]);
+  (0, import_react.useEffect)(() => {
+    updateHorizontalScroll();
+    updateMeasuredColumnWidths();
+  }, [
+    columnLayoutKey,
+    pageData,
+    scroll == null ? void 0 : scroll.x,
+    scroll == null ? void 0 : scroll.y,
+    updateHorizontalScroll,
+    updateMeasuredColumnWidths
+  ]);
   const renderHeader = () => {
     return /* @__PURE__ */ import_react.default.createElement(
       import_header.default,
@@ -326,6 +373,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
   const renderTable = () => {
     const tableProps = {
       style: __spreadProps(__spreadValues({}, styles == null ? void 0 : styles.table), {
+        minWidth: scroll == null ? void 0 : scroll.x,
         tableLayout: (pageData == null ? void 0 : pageData.length) ? tableLayout : void 0
       }),
       className: (0, import_clsx.default)(
@@ -346,17 +394,15 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
           rowKey
         }
       },
-      /* @__PURE__ */ import_react.default.createElement("table", __spreadValues({}, tableProps), /* @__PURE__ */ import_react.default.createElement(import_col_group.default, { columns: wrapedColumns }), renderTHeader(), renderTBody(), renderTFooter())
+      /* @__PURE__ */ import_react.default.createElement("table", __spreadValues({ ref: tableRef }, tableProps), /* @__PURE__ */ import_react.default.createElement(import_col_group.default, { columns: wrapedColumns }), renderTHeader(), renderTBody(), renderTFooter())
     );
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        ref: contentWrapperRef,
         className: (0, import_clsx.default)(`${prefixCls}-content-wrapper`, {
           [`${prefixCls}-content-wrapper-scroll-left`]: horizontalScroll.left,
           [`${prefixCls}-content-wrapper-scroll-right`]: horizontalScroll.right
-        }),
-        onScroll: updateHorizontalScroll
+        })
       },
       /* @__PURE__ */ import_react.default.createElement(
         "div",
@@ -366,7 +412,7 @@ var Table = import_react.default.forwardRef((baseprops, ref) => {
             [`${prefixCls}-${size}-size`]: size,
             [`${prefixCls}-fixed-header`]: scroll == null ? void 0 : scroll.y
           }),
-          style: { height: scroll == null ? void 0 : scroll.y, width: scroll == null ? void 0 : scroll.x },
+          style: { height: scroll == null ? void 0 : scroll.y },
           onScroll: updateHorizontalScroll
         },
         table2

package/dist/cjs/Table/util/index.d.ts

@@ -1,2 +1,2 @@
 import { WrapedColumnProps } from '../interface';
-export declare function handleColumns(columns: Array<WrapedColumnProps>): WrapedColumnProps[];
+export declare function handleColumns(columns: Array<WrapedColumnProps>, measuredColumnWidths?: number[]): WrapedColumnProps[];

package/dist/cjs/Table/util/index.js

@@ -39,7 +39,20 @@ __export(util_exports, {
   handleColumns: () => handleColumns
 });
 module.exports = __toCommonJS(util_exports);
-function handleColumns(columns) {
+var getColumnWidth = (column, index, measuredColumnWidths) => {
+  const measuredWidth = measuredColumnWidths == null ? void 0 : measuredColumnWidths[index];
+  if (Number.isFinite(measuredWidth) && measuredWidth && measuredWidth > 0) {
+    return measuredWidth;
+  }
+  if (typeof column.width === "number") {
+    return column.width;
+  }
+  if (typeof column.width === "string" && /^\s*\d+(?:\.\d+)?px\s*$/.test(column.width)) {
+    return Number.parseFloat(column.width);
+  }
+  return 0;
+};
+function handleColumns(columns, measuredColumnWidths) {
   var _a, _b;
   let leftWidthCount = 0;
   let rightWidthCount = 0;
@@ -53,7 +66,7 @@ function handleColumns(columns) {
       if (!nextIsFixedLeft) {
         col.isFixedLeftLast = true;
       }
-      leftWidthCount = leftWidthCount + (col.width ? parseFloat(col.width) : 0);
+      leftWidthCount += getColumnWidth(col, i, measuredColumnWidths);
     }
   }
   for (let j = columns.length - 1; j >= 0; j--) {
@@ -63,7 +76,7 @@ function handleColumns(columns) {
       if (((_b = columns[j - 1]) == null ? void 0 : _b.fixed) !== "right") {
         col.isFixedRightFirst = true;
       }
-      rightWidthCount = rightWidthCount + (col.width ? parseFloat(col.width) : 0);
+      rightWidthCount += getColumnWidth(col, j, measuredColumnWidths);
     }
   }
   return columns;

package/dist/cjs/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-08-03T08:40:43.552Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/cjs/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-08-03T08:40:43.552Z
  */
 
 /* ========== color.css ========== */

package/dist/cjs/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.16";

package/dist/cjs/version.js

@@ -22,7 +22,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-var version = "0.8.14";
+var version = "0.8.16";
 if (typeof window !== "undefined") {
   window.__yee_c_version__ = version;
 }

package/dist/esm/Progress/circle.js

@@ -103,7 +103,8 @@ var Circle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref
   }, /*#__PURE__*/React.createElement("svg", {
     className: "".concat(prefixCls, "-circle"),
-    viewBox: "0 0 120 120"
+    viewBox: "0 0 120 120",
+    "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("circle", {
     className: "".concat(prefixCls, "-circle-trail"),
     cx: "60",

package/dist/esm/Progress/line.js

@@ -39,7 +39,8 @@ var Line = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: "".concat(prefixCls, "-inner"),
     style: {
       height: strokeWidth
-    }
+    },
+    "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-bg"),
     style: _objectSpread({

package/dist/esm/Progress/progress.js

@@ -90,6 +90,8 @@ var Progress = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     "aria-valuenow": percent,
     "aria-valuemin": 0,
     "aria-valuemax": 100,
+    "aria-valuetext": "".concat(percent, "%"),
+    "aria-label": status === 'error' ? "Progress: ".concat(percent, "%, error") : "Progress: ".concat(percent, "%"),
     ref: ref
   }, dataAttrs), progress);
 });

package/dist/esm/Progress/steps.js

@@ -43,7 +43,12 @@ var Steps = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-steps"),
     ref: ref
-  }, renderSteps(), showInfo && /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    style: {
+      display: 'contents'
+    }
+  }, renderSteps()), showInfo && /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-text")
   }, children));
 });

package/dist/esm/Search/search.js

@@ -14,7 +14,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 clsx from 'clsx';
 import { X } from 'lucide-react';
-import React, { startTransition, useContext, useEffect, useRef, useState } from 'react';
+import React, { startTransition, useContext, useEffect, useId, useRef, useState } from 'react';
 import { GlobalContext } from "../Config-Provider";
 import useMergedState from "../hooks/useMergedState";
 import List from "../List";
@@ -65,6 +65,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (baseProps, ref) {
     open = _useState2[0],
     setOpen = _useState2[1];
   var popupRef = useRef(undefined);
+  var listboxId = useId();
   var _useSelectKeyboard = useSelectKeyboard({
       open: open,
       options: options || suggestions,
@@ -127,9 +128,19 @@ var Search = /*#__PURE__*/React.forwardRef(function (baseProps, ref) {
     }, showClearIcon && /*#__PURE__*/React.createElement("span", {
       className: clsx("".concat(prefixCls, "-clear-icon"), classNames === null || classNames === void 0 ? void 0 : classNames.clear),
       style: styles === null || styles === void 0 ? void 0 : styles.clear,
-      onClick: handleClear
+      onClick: handleClear,
+      role: "button",
+      "aria-label": "Clear search",
+      tabIndex: 0,
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClear(e);
+        }
+      }
     }, /*#__PURE__*/React.createElement(X, {
-      size: 14
+      size: 14,
+      "aria-hidden": "true"
     })), suffix);
   };
   var renderPrefix = function renderPrefix() {
@@ -145,9 +156,12 @@ var Search = /*#__PURE__*/React.forwardRef(function (baseProps, ref) {
   var getRootClassName = function getRootClassName() {
     return clsx(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-borderless"), !bordered), "".concat(prefixCls, "-small"), size === 'small'), "".concat(prefixCls, "-large"), size === 'large'), className);
   };
+  var hasPopup = Array.isArray(options) || Array.isArray(suggestions);
   var popup = /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-popup"),
-    tabIndex: 0
+    tabIndex: 0,
+    id: listboxId,
+    role: "listbox"
   }, Array.isArray(options) ? /*#__PURE__*/React.createElement(List, {
     focusedKey: focusedKey,
     items: options,
@@ -165,7 +179,12 @@ var Search = /*#__PURE__*/React.forwardRef(function (baseProps, ref) {
     onOpenChange: setOpen
   }, /*#__PURE__*/React.createElement("div", {
     className: getRootClassName(),
-    style: style
+    style: style,
+    role: "combobox",
+    "aria-expanded": hasPopup ? open : undefined,
+    "aria-haspopup": hasPopup ? 'listbox' : undefined,
+    "aria-owns": hasPopup && open ? listboxId : undefined,
+    "aria-disabled": disabled || undefined
   }, renderPrefix(), /*#__PURE__*/React.createElement("input", _extends({}, rest, {
     ref: ref,
     value: searchValue,
@@ -174,10 +193,15 @@ var Search = /*#__PURE__*/React.forwardRef(function (baseProps, ref) {
     disabled: disabled,
     placeholder: placeholder,
     onChange: handleChange,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    role: "searchbox",
+    "aria-autocomplete": hasPopup ? 'list' : undefined,
+    "aria-controls": hasPopup && open ? listboxId : undefined,
+    "aria-activedescendant": hasPopup && open && focusedKey !== null ? String(focusedKey) : undefined
   })), loading ? /*#__PURE__*/React.createElement(Spin, {
     variant: "ring",
-    size: "small"
+    size: "small",
+    "aria-label": "Loading"
   }) : renderSuffix()));
 });
 export default Search;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { TriggerProps } from '../Trigger';
 import type { SelectorProps } from '../Selector';
 import type { DataAttributeProps } from '../utils/types';
 export type Option = {
@@ -23,7 +24,7 @@ export type Option = {
      */
     [prop: string]: any;
 };
-export interface SelectProps extends DataAttributeProps, Pick<SelectorProps, 'size'> {
+export interface SelectProps extends DataAttributeProps, Pick<SelectorProps, 'size'>, Omit<TriggerProps, 'popup' | 'children'> {
     /**
      * Custom class name prefix
      * */

package/dist/esm/Spin/demo/types.js

@@ -4,13 +4,16 @@ export default (function () {
   return /*#__PURE__*/React.createElement(Space, {
     direction: "vertical"
   }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Spin, {
-    variant: "dot",
-    color: "error"
+    variant: "dot"
   }), /*#__PURE__*/React.createElement("span", null, "dot")), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Spin, {
-    variant: "ring",
-    color: "error"
+    variant: "ring"
   }), /*#__PURE__*/React.createElement("span", null, "ring")), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Spin, {
-    variant: "spokes",
-    color: "error"
-  }), /*#__PURE__*/React.createElement("span", null, "spokes")));
+    variant: "spokes"
+  }), /*#__PURE__*/React.createElement("span", null, "spokes")), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Spin, {
+    variant: "bounce"
+  }), /*#__PURE__*/React.createElement("span", null, "bounce")), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Spin, {
+    variant: "pulse"
+  }), /*#__PURE__*/React.createElement("span", null, "pulse")), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Spin, {
+    variant: "wheel"
+  }), /*#__PURE__*/React.createElement("span", null, "wheel")));
 });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SpinProps } from './interface';
 interface IndicatorProps extends SpinProps {
-    variant?: 'dot' | 'ring' | 'spokes';
+    variant?: 'dot' | 'ring' | 'spokes' | 'bounce' | 'pulse' | 'wheel';
 }
 declare const Indicator: React.FC<IndicatorProps>;
 export default Indicator;

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
      */