feat(react): add ScrollNumber component and enhance Badge with scroll animation

.changeset/add-scroll-number-enhance-badge.md

@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": minor
+---
+
+Add ScrollNumber component with animated digit transitions and shortest-path scrolling; integrate into Badge for smooth count animations. Add TextLoop component for cycling through children with vertical slide transitions.

apps/docs/src/routers.tsx

@@ -90,6 +90,7 @@ const c = {
   statistic: ll(() => import('../../../packages/react/src/statistic/index.md'), () => import('../../../packages/react/src/statistic/index.zh_CN.md')),
   table: ll(() => import('../../../packages/react/src/table/index.md'), () => import('../../../packages/react/src/table/index.zh_CN.md')),
   tag: ll(() => import('../../../packages/react/src/tag/index.md'), () => import('../../../packages/react/src/tag/index.zh_CN.md')),
+  textLoop: ll(() => import('../../../packages/react/src/text-loop/index.md'), () => import('../../../packages/react/src/text-loop/index.zh_CN.md')),
   timeline: ll(() => import('../../../packages/react/src/timeline/index.md'), () => import('../../../packages/react/src/timeline/index.zh_CN.md')),
   tooltip: ll(() => import('../../../packages/react/src/tooltip/index.md'), () => import('../../../packages/react/src/tooltip/index.zh_CN.md')),
   tree: ll(() => import('../../../packages/react/src/tree/index.md'), () => import('../../../packages/react/src/tree/index.zh_CN.md')),
@@ -123,6 +124,7 @@ const c = {
   popConfirm: ll(() => import('../../../packages/react/src/pop-confirm/index.md'), () => import('../../../packages/react/src/pop-confirm/index.zh_CN.md')),
   result: ll(() => import('../../../packages/react/src/result/index.md'), () => import('../../../packages/react/src/result/index.zh_CN.md')),
   scrollIndicator: ll(() => import('../../../packages/react/src/scroll-indicator/index.md'), () => import('../../../packages/react/src/scroll-indicator/index.zh_CN.md')),
+  scrollNumber: ll(() => import('../../../packages/react/src/scroll-number/index.md'), () => import('../../../packages/react/src/scroll-number/index.zh_CN.md')),
   skeleton: ll(() => import('../../../packages/react/src/skeleton/index.md'), () => import('../../../packages/react/src/skeleton/index.zh_CN.md')),
   strengthIndicator: ll(() => import('../../../packages/react/src/strength-indicator/index.md'), () => import('../../../packages/react/src/strength-indicator/index.zh_CN.md')),
   backTop: ll(() => import('../../../packages/react/src/back-top/index.md'), () => import('../../../packages/react/src/back-top/index.zh_CN.md')),
@@ -214,9 +216,11 @@ export const getComponentMenu = (s: SiteLocale): RouterItem[] => {
         { title: 'Marquee', route: 'marquee', component: pick(c.marquee, z) },
         { title: 'Popover', route: 'popover', component: pick(c.popover, z) },
         { title: 'Progress', route: 'progress', component: pick(c.progress, z) },
+        { title: 'ScrollNumber', route: 'scroll-number', component: pick(c.scrollNumber, z) },
         { title: 'Statistic', route: 'statistic', component: pick(c.statistic, z) },
         { title: 'Table', route: 'table', component: pick(c.table, z) },
         { title: 'Tag', route: 'tag', component: pick(c.tag, z) },
+        { title: 'TextLoop', route: 'text-loop', component: pick(c.textLoop, z) },
         { title: 'Timeline', route: 'timeline', component: pick(c.timeline, z) },
         { title: 'Tooltip', route: 'tooltip', component: pick(c.tooltip, z) },
         { title: 'Tree', route: 'tree', component: pick(c.tree, z) },

packages/react/src/alert/__tests__/__snapshots__/alert.test.tsx.snap

@@ -6,7 +6,9 @@ exports[`<Alert /> should match the snapshot 1`] = `
     class="ty-alert ty-alert_info ty-undefined-enter"
     role="alert"
   >
-    <div>
+    <div
+      class="ty-alert__content"
+    >
       Alert
     </div>
   </div>

packages/react/src/alert/alert.tsx

@@ -76,7 +76,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, forwardedRef)
         else if (forwardedRef) forwardedRef.current = node;
       }}>
         {icon && renderIcon()}
-        <div>
+        <div className={`${prefixCls}__content`}>
           {title && <p className={classNames(`${prefixCls}__title`, { [`${prefixCls}__title_has-content`]: children })}>{title}</p>}
           {children}
         </div>

packages/react/src/alert/demo/LoopBanner.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Alert, Marquee } from '@tiny-design/react';
+
+export default function LoopBannerDemo() {
+  return (
+    <Alert type="warning" icon>
+      <Marquee pauseOnHover fade={false}>
+        This is a scrolling banner alert message — important announcements go here.
+      </Marquee>
+    </Alert>
+  );
+}

packages/react/src/alert/index.md

@@ -10,6 +10,8 @@ import TitleDemo from './demo/Title';
 import TitleSource from './demo/Title.tsx?raw';
 import TypeDemo from './demo/Type';
 import TypeSource from './demo/Type.tsx?raw';
+import LoopBannerDemo from './demo/LoopBanner';
+import LoopBannerSource from './demo/LoopBanner.tsx?raw';
 
 # Alert
 
@@ -85,6 +87,15 @@ Replace the default icon with customized text.
 
 <DemoBlock component={CloseBtnDemo} source={CloseBtnSource} />
 
+    </Demo>
+    <Demo>
+
+### Loop Banner
+
+Combine with `Marquee` component to create a scrolling banner alert. The text pauses on hover.
+
+<DemoBlock component={LoopBannerDemo} source={LoopBannerSource} />
+
     </Demo>
   </Column>
 </Layout>

packages/react/src/alert/style/_index.scss

@@ -20,6 +20,11 @@
     margin-top: 14px;
   }
 
+  &__content {
+    flex: 1;
+    overflow: hidden;
+  }
+
   &__title {
     box-sizing: border-box;
     margin: 0;