@rainbow-oh/yee-c 0.8.13 → 0.8.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Pagination/style/index.less

@@ -30,6 +30,10 @@
     margin-right: 0;
   }
 
+  &-total {
+    white-space: nowrap;
+  }
+
   &-prev,
   &-next {
     // border: var(--yee-pagination-item-border-width) solid var(--yee-pagination-item-border-color);

package/src/Progress/circle.tsx

@@ -111,7 +111,7 @@ const Circle = React.forwardRef<HTMLDivElement, CircleProps>((props, ref) => {
       style={{ width, height: width }}
       ref={ref}
     >
-      <svg className={`${prefixCls}-circle`} viewBox="0 0 120 120">
+      <svg className={`${prefixCls}-circle`} viewBox="0 0 120 120" aria-hidden="true">
         <circle
           className={`${prefixCls}-circle-trail`}
           cx="60"

package/src/Progress/line.tsx

@@ -36,7 +36,7 @@ const Line = React.forwardRef<HTMLDivElement, LineProps>((props, ref) => {
 
   return (
     <div className={`${prefixCls}-outer`} ref={ref}>
-      <div className={`${prefixCls}-inner`} style={{ height: strokeWidth }}>
+      <div className={`${prefixCls}-inner`} style={{ height: strokeWidth }} aria-hidden="true">
         <div
           className={`${prefixCls}-bg`}
           style={{ width: percent + '%', ...progressColor }}

package/src/Progress/progress.tsx

@@ -106,6 +106,8 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
         aria-valuenow={percent}
         aria-valuemin={0}
         aria-valuemax={100}
+        aria-valuetext={`${percent}%`}
+        aria-label={status === 'error' ? `Progress: ${percent}%, error` : `Progress: ${percent}%`}
         ref={ref}
         {...dataAttrs}
       >

package/src/Progress/steps.tsx

@@ -56,7 +56,9 @@ const Steps = React.forwardRef<HTMLDivElement, StepsProps>((props, ref) => {
 
   return (
     <div className={`${prefixCls}-steps`} ref={ref}>
-      {renderSteps()}
+      <div aria-hidden="true" style={{ display: 'contents' }}>
+        {renderSteps()}
+      </div>
       {showInfo && <span className={`${prefixCls}-text`}>{children}</span>}
     </div>
   );

package/src/Search/search.tsx

@@ -4,6 +4,7 @@ import React, {
   startTransition,
   useContext,
   useEffect,
+  useId,
   useRef,
   useState,
 } from 'react';
@@ -55,6 +56,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
     const [open, setOpen] = useState(false);
 
     const popupRef = useRef<HTMLDivElement>(undefined);
+    const listboxId = useId();
 
     const { focusedKey, onKeyDown } = useSelectKeyboard({
       open,
@@ -130,8 +132,17 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
               className={clsx(`${prefixCls}-clear-icon`, classNames?.clear)}
               style={styles?.clear}
               onClick={handleClear}
+              role="button"
+              aria-label="Clear search"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  handleClear(e as unknown as React.MouseEvent<HTMLSpanElement>);
+                }
+              }}
             >
-              <X size={14} />
+              <X size={14} aria-hidden="true" />
             </span>
           )}
           {suffix}
@@ -174,8 +185,10 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       );
     };
 
+    const hasPopup = Array.isArray(options) || Array.isArray(suggestions);
+
     const popup = (
-      <div className={`${prefixCls}-popup`} tabIndex={0}>
+      <div className={`${prefixCls}-popup`} tabIndex={0} id={listboxId} role="listbox">
         {Array.isArray(options) ? (
           <List
             focusedKey={focusedKey}
@@ -196,7 +209,15 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
 
     return (
       <Trigger popup={popup} open={open} onOpenChange={setOpen}>
-        <div className={getRootClassName()} style={style}>
+        <div
+          className={getRootClassName()}
+          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()}
           <input
             {...rest}
@@ -208,8 +229,16 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
             placeholder={placeholder}
             onChange={handleChange}
             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 ? <Spin variant="ring" size="small" /> : renderSuffix()}
+          {loading ? <Spin variant="ring" size="small" aria-label="Loading" /> : renderSuffix()}
         </div>
       </Trigger>
     );

package/src/Select/interface.ts

@@ -1,3 +1,4 @@
+import type { TriggerProps } from '../Trigger';
 import type { SelectorProps } from '../Selector';
 import type { DataAttributeProps } from '../utils/types';
 
@@ -25,7 +26,7 @@ export type Option = {
 };
 
 export interface SelectProps
-  extends DataAttributeProps, Pick<SelectorProps, 'size'> {
+  extends DataAttributeProps, Pick<SelectorProps, 'size'>, Omit<TriggerProps, 'popup' | 'children'> {
   /**
    * Custom class name prefix
    * */

package/src/Spin/demo/types.tsx

@@ -18,6 +18,21 @@ export default () => {
         <Spin variant="spokes" />
         <span>spokes</span>
       </Space>
+
+      <Space>
+        <Spin variant="bounce" />
+        <span>bounce</span>
+      </Space>
+
+      <Space>
+        <Spin variant="pulse" />
+        <span>pulse</span>
+      </Space>
+
+      <Space>
+        <Spin variant="wheel" />
+        <span>wheel</span>
+      </Space>
     </Space>
   );
 };

package/src/Spin/index.en-US.md

@@ -43,7 +43,7 @@ Used for page and block loading status.
 | styles | `Partial<Record<'tip' \| 'indicator', React.CSSProperties>>` | Semantic structure styles | - |
 | tip | `React.ReactNode` | Loading tip text | - |
 | delay | `number` | Delay in milliseconds to show loading effect | - |
-| variant | `'dot' \| 'ring' \| 'spokes'` | Indicator variant, `ring` for rotating circle, `spokes` for radiating lines | `'dot'` |
+| variant | `'dot' \| 'ring' \| 'spokes' \| 'bounce' \| 'pulse' \| 'wheel'` | Indicator variant, `ring` for rotating circle, `spokes` for radiating lines, `bounce` for bouncing dots, `pulse` for pulsing circles, `wheel` for spokes with hollow center | `'dot'` |
 | indicator | `React.ReactNode` | Loading indicator | - |
 | mask | `boolean` | Whether to show mask | - |
 | children | `React.ReactNode` | Children elements | - |
@@ -52,12 +52,9 @@ Used for page and block loading status.
 
 | Type | Description |
 | --- | --- |
-| blank | Blank type |
-| balls | Balls type |
-| bars | Bars type |
-| bubbles | Bubbles type |
-| cubes | Cubes type |
-| cylon | Cylon type |
-| spin | Spin type |
-| spinningBubbles | Spinning bubbles type |
-| spokes | Spokes type |
+| dot | dot circle |
+| ring | rotating circle |
+| spokes | Spokes type |
+| bounce | Bouncing dots |
+| pulse | Pulsing circles |
+| wheel | Spokes with hollow center |

package/src/Spin/index.zh-CN.md

@@ -43,7 +43,7 @@ toc: 'content'
 | styles | `Partial<Record<'tip' \| 'indicator', React.CSSProperties>>` | 语义化结构样式 | - |
 | tip | `React.ReactNode` | 加载状态的提示词 | - |
 | delay | `number` | 延迟显示加载效果的时间（毫秒） | - |
-| variant | `'dot' \| 'ring' \| 'spokes'` | 加载器样式变体，`ring` 为圆环转圈，`spokes` 为辐条旋转 | `'dot'` |
+| variant | `'dot' \| 'ring' \| 'spokes' \| 'bounce' \| 'pulse' \| 'wheel'` | 加载器样式变体，`ring` 为圆环转圈，`spokes` 为辐条旋转，`bounce` 为弹跳圆点，`pulse` 为脉冲圆圈，`wheel` 为带中心空圆的辐条 | `'dot'` |
 | indicator | `React.ReactNode` | 加载器指示符 | - |
 | mask | `boolean` | 是否显示遮罩 | - |
 | children | `React.ReactNode` | 子元素 | - |
@@ -52,12 +52,9 @@ toc: 'content'
 
 | 类型 | 描述 |
 | --- | --- |
-| blank | 空白类型 |
-| balls | 小球类型 |
-| bars | 条形类型 |
-| bubbles | 气泡类型 |
-| cubes | 方块类型 |
-| cylon | 赛隆类型 |
-| spin | 旋转类型 |
-| spinningBubbles | 旋转气泡类型 |
-| spokes | 辐条类型 |
+| dot | 原点旋转 |
+| ring | 圆环转圈 |
+| spokes | 辐条类型 |
+| bounce | 弹跳圆点 |
+| pulse | 脉冲圆圈 |
+| wheel | 中空辐条（辐条离中心有距离，中间形成空圆） |

package/src/Spin/indicator.tsx

@@ -60,6 +60,7 @@ const SpokesSpinner: React.FC<SpinProps> = (props) => {
     styles,
     width,
     height,
+    color
   } = props;
 
   const containerSize = sizeMap[size];
@@ -86,6 +87,7 @@ const SpokesSpinner: React.FC<SpinProps> = (props) => {
             style={{
               transform: `rotate(${i * (360 / count)}deg)`,
               animationDelay: `${(i * 1) / count}s`,
+              backgroundColor: color,
             }}
           />
         ))}
@@ -186,8 +188,163 @@ const DotSpinner: React.FC<SpinProps> = (props) => {
   );
 };
 
+/**
+ * Bounce spinner - three dots that bounce up and down sequentially
+ */
+const BounceSpinner: React.FC<SpinProps> = (props) => {
+  const {
+    prefixCls = 'yee-spin',
+    size = 'default',
+    classNames,
+    styles,
+    width,
+    height,
+    color,
+  } = props;
+
+  const containerSize = sizeMap[size];
+  const dotSizeMap = { small: 4, default: 6, large: 10 };
+  const dotSize = dotSizeMap[size];
+
+  return (
+    <div
+      className={clsx(
+        `${prefixCls}-indicator`,
+        `${prefixCls}-indicator-bounce`,
+        classNames?.indicator,
+      )}
+      style={{
+        width: width || containerSize,
+        height: height || containerSize,
+        ...styles?.indicator,
+      }}
+    >
+      <div className={`${prefixCls}-bounce`}>
+        {[0, 1, 2].map((i) => (
+          <span
+            key={i}
+            className={`${prefixCls}-bounce-dot`}
+            style={{
+              width: dotSize,
+              height: dotSize,
+              animationDelay: `${i * 0.15}s`,
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Pulse spinner - a circle that pulses (scales up and fades out) repeatedly
+ */
+const PulseSpinner: React.FC<SpinProps> = (props) => {
+  const {
+    prefixCls = 'yee-spin',
+    size = 'default',
+    classNames,
+    styles,
+    width,
+    height,
+    color,
+  } = props;
+
+  const containerSize = sizeMap[size];
+
+  return (
+    <div
+      className={clsx(
+        `${prefixCls}-indicator`,
+        `${prefixCls}-indicator-pulse`,
+        classNames?.indicator,
+      )}
+      style={{
+        width: width || containerSize,
+        height: height || containerSize,
+        ...styles?.indicator,
+      }}
+    >
+      <span
+        className={`${prefixCls}-pulse-circle`}
+        style={{ backgroundColor: color }}
+      />
+      <span
+        className={`${prefixCls}-pulse-circle ${prefixCls}-pulse-circle-delay`}
+        style={{ backgroundColor: color }}
+      />
+    </div>
+  );
+};
+
+/**
+ * Wheel spinner - similar to spokes but each line is offset from center,
+ * creating a visible hollow circle in the middle
+ */
+const WheelSpinner: React.FC<SpinProps> = (props) => {
+  const {
+    prefixCls = 'yee-spin',
+    size = 'default',
+    classNames,
+    styles,
+    width,
+    height,
+    color,
+  } = props;
+
+  const containerSize = sizeMap[size];
+  const count = 10;
+  const innerRadius = 0.38; // start at 38% from center (larger hollow area)
+  const spokeLength = containerSize * 0.22;
+
+  return (
+    <div
+      className={clsx(
+        `${prefixCls}-indicator`,
+        `${prefixCls}-indicator-wheel`,
+        classNames?.indicator,
+      )}
+      style={{
+        width: width || containerSize,
+        height: height || containerSize,
+        ...styles?.indicator,
+      }}
+    >
+      <div className={`${prefixCls}-wheel-spokes`}>
+        {Array.from({ length: count }, (_, i) => {
+          const angle = (i * 360) / count;
+          const rad = (angle * Math.PI) / 180;
+          // Position each spoke: starts at innerRadius from center
+          const cx = containerSize / 2;
+          const cy = containerSize / 2;
+          const x = cx + innerRadius * containerSize * Math.sin(rad);
+          const y = cy - innerRadius * containerSize * Math.cos(rad);
+
+          return (
+            <div
+              key={i}
+              className={`${prefixCls}-wheel-spoke`}
+              style={{
+                top: y,
+                left: x,
+                height: spokeLength,
+                marginLeft: -1,
+                transform: `rotate(${angle}deg)`,
+                transformOrigin: 'top center',
+                animationDelay: `${(i * 1.2) / count}s`,
+                backgroundColor: color,
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
 interface IndicatorProps extends SpinProps {
-  variant?: 'dot' | 'ring' | 'spokes';
+  variant?: 'dot' | 'ring' | 'spokes' | 'bounce' | 'pulse' | 'wheel';
 }
 
 const Indicator: React.FC<IndicatorProps> = ({ variant = 'dot', ...props }) => {
@@ -197,6 +354,15 @@ const Indicator: React.FC<IndicatorProps> = ({ variant = 'dot', ...props }) => {
   if (variant === 'spokes') {
     return <SpokesSpinner {...props} />;
   }
+  if (variant === 'bounce') {
+    return <BounceSpinner {...props} />;
+  }
+  if (variant === 'pulse') {
+    return <PulseSpinner {...props} />;
+  }
+  if (variant === 'wheel') {
+    return <WheelSpinner {...props} />;
+  }
   return <DotSpinner {...props} />;
 };
 

package/src/Spin/interface.ts

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

package/src/Spin/style/index.less

@@ -43,10 +43,7 @@
         display: block;
         border-style: solid;
         border-color: var(--yee-color-bg-layout, rgba(0, 0, 0, 8%));
-        border-top-color: var(
-          --yee-spin-default-color,
-          var(--yee-color-primary, #1677ff)
-        );
+        border-top-color: var(--m-indicator-dot-bg-color);
         border-radius: 50%;
         animation: yee-spin-ring-rotate 0.8s linear infinite;
       }
@@ -67,10 +64,65 @@
         height: 40%;
         margin-left: -1px;
         transform-origin: center bottom;
-        background-color: var(
-          --yee-spin-default-color,
-          var(--yee-color-primary, #1677ff)
-        );
+        background-color: var(--m-indicator-dot-bg-color);
+        border-radius: 1px;
+        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;
       }
@@ -174,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/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.13";
+export const version = "0.8.15";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;