@unif/react-native-design 0.19.0 → 0.21.0

package/src/components/ui/Button/ButtonBase.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import {
   ActivityIndicator,
   type AccessibilityRole,
+  type AccessibilityState,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
@@ -20,7 +21,7 @@ import type {
 } from './types';
 
 export type ButtonBaseProps = {
-  onPress?: () => void;
+  onPress: () => void;
   size?: ButtonSize;
   variant?: ButtonVariant;
   disabled?: boolean;
@@ -32,6 +33,8 @@ export type ButtonBaseProps = {
   accessibilityRole?: AccessibilityRole;
   /** SR 朗读 label 后的行为说明 hint。仅在"行为不显然"时加。 */
   accessibilityHint?: string;
+  /** 调用方附加状态；disabled / busy 由内部状态机控制，不能被覆盖。 */
+  accessibilityState?: Omit<AccessibilityState, 'disabled' | 'busy'>;
   style?: StyleProp<ViewStyle>;
   testID?: string;
   /** 强制函数形态 — 消费者通过 ctx.sizing / ctx.palette 渲染内容,
@@ -53,6 +56,7 @@ export function ButtonBase({
   accessibilityLabel,
   accessibilityRole = 'button',
   accessibilityHint,
+  accessibilityState,
   style,
   testID,
   children,
@@ -64,7 +68,8 @@ export function ButtonBase({
   const palette = useMemo(() => paletteFor(variant, c), [variant, c]);
 
   const isText = variant === 'text';
-  const isInteractive = !disabled && !loading;
+  const unavailable = disabled === true || loading === true;
+  const hasAccessibleName = accessibilityLabel !== undefined;
 
   // [M-7] 触控目标补偿:hitSlop 向外扩展命中区域到 fixed.hitTarget(44pt)。
   // 公式:vertical slop = max(0, (hitTarget - h) / 2);square 时同补 horizontal。
@@ -86,12 +91,21 @@ export function ButtonBase({
 
   return (
     <Pressable
-      accessibilityRole={accessibilityRole}
-      accessibilityState={{ disabled: !isInteractive }}
+      accessible={hasAccessibleName}
+      accessibilityRole={hasAccessibleName ? accessibilityRole : undefined}
+      accessibilityState={
+        hasAccessibleName
+          ? {
+              ...accessibilityState,
+              disabled: unavailable,
+              busy: loading === true,
+            }
+          : undefined
+      }
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
-      disabled={!isInteractive}
-      onPress={onPress}
+      disabled={unavailable}
+      onPress={unavailable ? undefined : onPress}
       hitSlop={hitSlop}
       testID={testID}
       style={({ pressed }) => [
@@ -106,13 +120,8 @@ export function ButtonBase({
           backgroundColor: palette.bg,
           borderColor: palette.border ?? 'transparent',
           borderWidth: palette.border ? 1 : 0,
-          opacity: disabled ? 0.5 : pressed ? pressedOpacity : 1,
+          opacity: unavailable ? 0.5 : pressed ? pressedOpacity : 1,
           alignSelf: block ? 'stretch' : 'flex-start',
-          // 非 block 用 undefined 而非硬编码 0:Yoga 的 resolveFlexGrow 里显式 flexGrow
-          // 优先级高于 flex 简写,写死 0 会让调用方 style={{ flex: 1 }} 失效(按钮撑不开 /
-          // 并排塌成 padding 宽裁掉 label)。undefined → 仍走 Yoga 默认 0(普通态零变化),
-          // 但把 flex / flexGrow 的控制权交还给末尾 merge 的 style。撑满优先仍推荐用 block。
-          flexGrow: block ? 1 : undefined,
           gap: sizing.gap,
         },
         style,

package/src/components/ui/Button/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { AccessibilityState, StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 
 /** Button 尺寸：sm=28 / md=36 / lg=44（对应 control.sm/md/lg） */
@@ -28,12 +28,12 @@ export type ButtonProps = {
   /** 按钮文案；icon-only 场景请用 IconButton */
   label: string;
   /** 点击回调；disabled / loading 时不触发 */
-  onPress?: () => void;
+  onPress: () => void;
   /** 尺寸，默认 'md' */
   size?: ButtonSize;
   /** 视觉变体，默认 'primary' */
   variant?: ButtonVariant;
-  /** 撑满父容器宽度（alignSelf: stretch + flexGrow: 1） */
+  /** 撑满父容器交叉轴宽度（alignSelf: stretch） */
   block?: boolean;
   /** 整体禁用：透明度 0.5 + 不响应 onPress */
   disabled?: boolean;
@@ -49,6 +49,8 @@ export type ButtonProps = {
   testID?: string;
   /** SR 朗读 label 后的行为说明 hint。仅在"行为不显然"时加(如 "切换主题")。 */
   accessibilityHint?: string;
+  /** 额外 a11y 状态；disabled / busy 由组件根据 disabled / loading 统一上报。 */
+  accessibilityState?: Omit<AccessibilityState, 'disabled' | 'busy'>;
 };
 
 /** ButtonBase 内部根据 size 算出的视觉参数集合,通过 render prop 暴露给消费者。 */

package/src/components/ui/Carousel/Carousel.tsx

@@ -1,33 +1,45 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Pressable, useWindowDimensions, View } from 'react-native';
-import ReanimatedCarousel, {
+import {
+  Carousel as ReanimatedCarousel,
   Pagination,
 } from 'react-native-reanimated-carousel';
 import { useSharedValue } from 'react-native-reanimated';
-import { space, useThemedStyles } from '../../../theme';
+import {
+  space,
+  usePrefersReducedMotion,
+  useThemedStyles,
+} from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
+import {
+  effectiveCarouselAutoplay,
+  normalizeCarouselAction,
+  resolveCarouselItemAccessibility,
+  shouldRenderCarouselPagination,
+} from './behavior';
 import { makeCarouselStyles } from './styles';
-import type { CarouselProps, ICarouselInstance } from './types';
+import type { CarouselProps, CarouselRef } from './types';
 
-/** Carousel —— 包装 `react-native-reanimated-carousel@5.0.0-beta.5`。
- *
- *  dot indicator 走 `c.primary` token,使用库内置 `Pagination.Custom`
- *  (`useSharedValue` + `onProgressChange` 驱动,re-render 全在 worklet 里)。
+const log = createLogger('Carousel');
+
+/** Carousel —— 包装 `react-native-reanimated-carousel@5.0.0`。
  *
- *  用 Pagination.Custom 而非 Basic:Basic 的 activeDot 用 translateX 推进
- *  内层 fill,外壳宽度等于 dotStyle.width,activeDotStyle.width 只影响内层,
- *  做不出"active 4 → 12 长条"。Custom 自己 interpolate width/height/bg。
+ *  dot indicator 走 `c.primary` token,使用库内置 `Pagination`
+ *  (`useSharedValue` + `progress` 驱动,视觉插值留在 UI 线程)。
  *
- *  forwardRef 透传 ICarouselInstance —— 解锁 a11y 暂停(ref.current.scrollTo)
- *  以及宿主页面的命令式 scrollTo / prev / next。
+ *  forwardRef 透传 CarouselRef,供宿主命令式 scrollTo / prev / next
+ *  并读取最后一次完成落位的 index。
  */
-// T 约束 object —— `Pagination.Basic<T extends {}>` 需要 object
-function CarouselInner<T extends object>(
+function CarouselInner<T>(
   {
-    items,
+    data,
     renderItem,
+    keyExtractor,
     height,
-    itemWidth,
-    autoPlay,
+    itemSize,
+    autoplay,
+    autoplayInterval,
     loop = true,
     showIndicator = true,
     indicatorPosition = 'bottom',
@@ -36,21 +48,61 @@ function CarouselInner<T extends object>(
     style,
     testID,
   }: CarouselProps<T>,
-  ref: React.Ref<ICarouselInstance>
+  ref: React.Ref<CarouselRef>
 ): React.JSX.Element {
   const { width: screenWidth } = useWindowDimensions();
-  const width = itemWidth ?? screenWidth;
+  const width = itemSize ?? screenWidth;
   const styles = useThemedStyles(makeCarouselStyles);
-  // Carousel `onProgressChange` 把 absoluteProgress 写进 shared value,Pagination 自动跟。
+  const reducedMotion = usePrefersReducedMotion();
+  const effectiveAutoplay = effectiveCarouselAutoplay(autoplay, reducedMotion);
+  const shouldRenderPagination = shouldRenderCarouselPagination(
+    showIndicator,
+    data.length
+  );
+  const action = normalizeCarouselAction<T>(onPressItem, getAccessibilityLabel);
+  const itemAccessibility =
+    action.kind === 'action'
+      ? data.map((item, index) =>
+          resolveCarouselItemAccessibility(
+            action.getAccessibilityLabel,
+            item,
+            index,
+            data.length
+          )
+        )
+      : [];
+  const actionDiagnosticKey = action.diagnostics.join(',');
+  const itemDiagnosticKey = itemAccessibility
+    .map((result, index) =>
+      result.diagnostics.length > 0
+        ? `${index}:${result.diagnostics.join('+')}`
+        : ''
+    )
+    .filter(Boolean)
+    .join(',');
+
+  useEffect(() => {
+    if (actionDiagnosticKey.length > 0) {
+      log.warn(
+        'Carousel action 必须同时提供 onPressItem 与 getAccessibilityLabel 函数，已按 display-only 渲染。'
+      );
+    }
+  }, [actionDiagnosticKey]);
+  useEffect(() => {
+    if (itemDiagnosticKey.length > 0) {
+      log.warn(
+        `Carousel item 名称无效(${itemDiagnosticKey})，对应 slide 已按 display-only 渲染。`
+      );
+    }
+  }, [itemDiagnosticKey]);
+  // Carousel 把逻辑页进度写进 shared value,Pagination 自动跟随。
   const progress = useSharedValue<number>(0);
 
   // 'bottom' 模式给容器额外 +space[7] (=r(16)) 高度容纳独立行指示器;
   // 与 dotsWrapBottom 的 paddingTop=space[3]+dot height space[1] 一起跟 r() 同步缩放。
   // 'overlay-bottom-right' 不占额外高度。
   const indicatorReservedHeight =
-    showIndicator && indicatorPosition === 'bottom' ? space['7'] : 0;
-
-  const data = items as T[];
+    shouldRenderPagination && indicatorPosition === 'bottom' ? space['7'] : 0;
 
   return (
     <View
@@ -60,65 +112,67 @@ function CarouselInner<T extends object>(
       <ReanimatedCarousel
         // v5 把 width / height prop deprecate,迁到 style
         style={{ width, height }}
+        itemSize={width}
         data={data}
+        keyExtractor={keyExtractor}
         loop={loop}
-        autoPlay={!!autoPlay}
-        autoPlayInterval={autoPlay}
-        onProgressChange={progress}
+        autoplay={effectiveAutoplay}
+        autoplayInterval={autoplayInterval}
+        progress={progress}
         ref={ref}
-        renderItem={({ item, index }) => (
-          // RN Pressable 而非 RNGH Pressable:Carousel 的 GestureDetector 已挂在
-          // ReanimatedCarousel 内部,外层再套 RNGH Pressable 会产生手势冲突;
-          // 用 RN 原生 Pressable 让库自己的拖拽手势优先,tap 仍正常触发。
-          <Pressable
-            onPress={() => onPressItem?.(item, index)}
-            style={{ width, height }}
-            // [L-92] 恒产出兜底:testID 缺失时用 'carousel' 前缀而非 undefined。
-            // 与 childTestID「父缺失返 undefined」语义不同,不替换为 childTestID。
-            // 原因:renderItem 须向 ReanimatedCarousel 提供稳定可预期的子项 testID
-            // 用于 E2E 定位,哪怕调用方未传 testID 也能用 carousel-item-0 等定位;
-            // 副作用:同屏两个未传 testID 的 Carousel 会碰撞 carousel-item-N。
-            // 建议:多 Carousel 场景请务必传 testID 以避免碰撞。
-            testID={`${testID ?? 'carousel'}-item-${index}`}
-            // 只在真正可点时声明 button 语义,纯展示型不标 button 避免读屏器误导
-            {...(onPressItem
-              ? {
-                  accessibilityRole: 'button' as const,
-                  accessibilityLabel:
-                    getAccessibilityLabel?.(item, index) ??
-                    `第 ${index + 1} 项`,
-                }
-              : null)}
-          >
-            {renderItem(item, index)}
-          </Pressable>
-        )}
+        renderItem={({ item, index, relativeProgress }) => {
+          const content = renderItem({ item, index, relativeProgress });
+          const itemTestID = `${testID ?? 'carousel'}-item-${index}`;
+          const itemLabel = itemAccessibility[index]?.label;
+
+          if (action.kind === 'action' && itemLabel !== undefined) {
+            // RN Pressable 而非 RNGH Pressable:Carousel 的 GestureDetector 已挂在
+            // ReanimatedCarousel 内部,外层再套 RNGH Pressable 会产生手势冲突;
+            // 用 RN 原生 Pressable 让库自己的拖拽手势优先,tap 仍正常触发。
+            return (
+              <Pressable
+                onPress={() => action.onPressItem(item, index)}
+                style={{ width, height }}
+                testID={itemTestID}
+                accessibilityRole="button"
+                accessibilityLabel={itemLabel}
+              >
+                {content}
+              </Pressable>
+            );
+          }
+
+          return (
+            <View style={{ width, height }} testID={itemTestID}>
+              {content}
+            </View>
+          );
+        }}
       />
-      {showIndicator && items.length > 1 ? (
-        // importantForAccessibility="no" —— dots 仅视觉辅助,SR 不需要读出
-        // 每个 dot 的状态(已由 accessibilityRole=tab / accessibilityState.selected 表达
-        // 的场景另论,这里 Pagination.Custom 无内置 a11y 语义,对 SR 隐藏比误读更优)。
-        <Pagination.Custom<T>
-          progress={progress}
-          data={data}
-          dotStyle={styles.dot}
-          activeDotStyle={styles.dotActive}
-          containerStyle={
+      {shouldRenderPagination ? (
+        // Pagination 是第三方组件，隐藏 props 必须落在本地 View，不能向其透传。
+        <View
+          {...A11Y_HIDDEN_PROPS}
+          style={
             indicatorPosition === 'overlay-bottom-right'
               ? styles.dotsWrapOverlay
               : styles.dotsWrapBottom
           }
-          // @ts-expect-error — importantForAccessibility 是 RN View prop,
-          // Pagination.Custom containerStyle 走 ViewStyle 但 TS 类型未收录该 prop
-          importantForAccessibility="no-hide-descendants"
-          accessibilityElementsHidden={true}
-        />
+        >
+          <Pagination
+            progress={progress}
+            count={data.length}
+            dotStyle={styles.dot}
+            activeDotStyle={styles.dotActive}
+            containerStyle={styles.dots}
+          />
+        </View>
       ) : null}
     </View>
   );
 }
 
 // forwardRef 不支持泛型函数组件直接推断 T,需要手动标注 + 类型断言
-export const Carousel = React.forwardRef(CarouselInner) as <T extends object>(
-  props: CarouselProps<T> & { ref?: React.Ref<ICarouselInstance> }
+export const Carousel = React.forwardRef(CarouselInner) as <T>(
+  props: CarouselProps<T> & { ref?: React.Ref<CarouselRef> }
 ) => React.JSX.Element;

package/src/components/ui/Carousel/behavior.ts

@@ -0,0 +1,78 @@
+import { normalizeNonBlankText } from '../shared/accessibilityName';
+
+/** 系统请求减弱动效时，Carousel 不得启动计时 autoplay。 */
+export const effectiveCarouselAutoplay = (
+  autoplay: boolean | undefined,
+  reducedMotion: boolean
+): boolean => autoplay === true && !reducedMotion;
+
+/** 单页不需要视觉页码，也不应为其保留布局高度。 */
+export const shouldRenderCarouselPagination = (
+  showIndicator: boolean,
+  itemCount: number
+): boolean => showIndicator && itemCount > 1;
+
+type CarouselPressHandler<T> = (item: T, index: number) => void;
+type CarouselLabelGetter<T> = (item: T, index: number) => unknown;
+
+export type NormalizedCarouselAction<T> =
+  | { kind: 'display'; diagnostics: readonly string[] }
+  | {
+      kind: 'action';
+      onPressItem: CarouselPressHandler<T>;
+      getAccessibilityLabel: CarouselLabelGetter<T>;
+      diagnostics: readonly string[];
+    };
+
+/** 只有两个函数同时存在才形成 action；任何半配置/未类型化值都失败关闭为展示。 */
+export function normalizeCarouselAction<T>(
+  onPressItem: unknown,
+  getAccessibilityLabel: unknown
+): NormalizedCarouselAction<T> {
+  if (onPressItem === undefined && getAccessibilityLabel === undefined) {
+    return { kind: 'display', diagnostics: [] };
+  }
+  if (
+    typeof onPressItem !== 'function' ||
+    typeof getAccessibilityLabel !== 'function'
+  ) {
+    return { kind: 'display', diagnostics: ['action'] };
+  }
+  return {
+    kind: 'action',
+    onPressItem: onPressItem as CarouselPressHandler<T>,
+    getAccessibilityLabel: getAccessibilityLabel as CarouselLabelGetter<T>,
+    diagnostics: [],
+  };
+}
+
+export type CarouselItemAccessibility = {
+  label: string | undefined;
+  diagnostics: readonly string[];
+};
+
+/** getter 的异常和非法返回值都只影响当前 item，不能让整个 Carousel render 崩溃。 */
+export function resolveCarouselItemAccessibility<T>(
+  getAccessibilityLabel: CarouselLabelGetter<T>,
+  item: T,
+  index: number,
+  itemCount: number
+): CarouselItemAccessibility {
+  let rawLabel: unknown;
+  try {
+    rawLabel = getAccessibilityLabel(item, index);
+  } catch {
+    return { label: undefined, diagnostics: ['threw'] };
+  }
+  if (typeof rawLabel !== 'string') {
+    return { label: undefined, diagnostics: ['invalid'] };
+  }
+  const label = normalizeNonBlankText(rawLabel);
+  if (label === undefined) {
+    return { label: undefined, diagnostics: ['blank'] };
+  }
+  return {
+    label: `${label}，第 ${index + 1} 项，共 ${itemCount} 项`,
+    diagnostics: [],
+  };
+}

package/src/components/ui/Carousel/index.ts

@@ -1,2 +1,2 @@
 export { Carousel } from './Carousel';
-export type { CarouselProps, ICarouselInstance } from './types';
+export type { CarouselProps, CarouselRef } from './types';

package/src/components/ui/Carousel/styles.ts

@@ -3,25 +3,20 @@ import { r, radius, space, type ColorTokens } from '../../../theme';
 
 export const makeCarouselStyles = (c: ColorTokens) =>
   StyleSheet.create({
-    /** 'bottom' 模式:独立行容器,覆盖 Pagination.Custom 默认的 `justifyContent: 'space-between'`
-     *  (否则 dot 横向撑开),让 dot 居中紧贴。 */
+    /** 'bottom' 模式:独立行容器,让 dot 居中紧贴。 */
     dotsWrapBottom: {
-      flexDirection: 'row',
-      justifyContent: 'center',
       alignItems: 'center',
-      // 3pt 横间距:dot 单元 4pt + space[1]=r(4) 偏大,保留 r(3) 作为局部 dot 间隙
-      gap: r(3),
       paddingTop: space['3'],
     },
-    /** 'overlay-bottom-right' 模式:absolute 浮在 Carousel 右下角,
-     *  override `justifyContent` → 'flex-end' 让 dot 群靠右。 */
+    /** 'overlay-bottom-right' 模式：用 absolute bottom/right 固定在右下角。 */
     dotsWrapOverlay: {
       position: 'absolute',
       bottom: space['3'],
       right: space['5'],
-      flexDirection: 'row',
-      justifyContent: 'flex-end',
-      alignItems: 'center',
+    },
+    /** Pagination 本体保持第三方所需的横向 layout，只承载视觉 dot。 */
+    dots: {
+      // 正式版按 active 最大宽度为每个 dot 预留 12pt,额外保留 3pt 间距。
       gap: r(3),
     },
     dot: {
@@ -32,10 +27,10 @@ export const makeCarouselStyles = (c: ColorTokens) =>
       backgroundColor: c.primary,
       opacity: 0.32,
     },
-    /** activeDot —— 12×4 长条,Pagination.Custom 会把 dotStyle 的 height /
-     *  borderRadius 与 activeDotStyle 的 width 一起 interpolate,这里只 override 变化值。 */
+    /** activeDot —— 12×4 长条,正式版 Pagination 为每项预留 12pt 宽避免布局跳动。 */
     dotActive: {
       width: space['5'],
+      backgroundColor: c.primary,
       opacity: 1,
     },
   });

package/src/components/ui/Carousel/types.ts

@@ -1,40 +1,58 @@
-import type { ICarouselInstance } from 'react-native-reanimated-carousel';
-import type { ReactNode } from 'react';
+import type {
+  CarouselRef,
+  CarouselRenderItem,
+} from 'react-native-reanimated-carousel';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-export type { ICarouselInstance };
+export type { CarouselRef };
 
 /** Indicator 位置策略:
  *  - 'bottom'(默认):指示器独立行,跟 Carousel 下方;容器高度 = height + 16
  *  - 'overlay-bottom-right':指示器 absolute 浮在 Carousel 右下角,不占额外高度 */
 export type CarouselIndicatorPosition = 'bottom' | 'overlay-bottom-right';
 
-export type CarouselProps<T> = {
+type CarouselBaseProps<T> = {
   /** 数组数据 */
-  items: ReadonlyArray<T>;
+  data: T[];
   /** 单项渲染 */
-  renderItem: (item: T, index: number) => ReactNode;
-  /** 每张高度(宽度默认 = 屏宽,被 itemWidth 覆盖) */
+  renderItem: CarouselRenderItem<T>;
+  /** 稳定 key 解析器,数据更新时用于保持 item 身份。 */
+  keyExtractor?: (item: T, index: number) => string;
+  /** 每张高度(宽度默认 = 屏宽,被 itemSize 覆盖) */
   height: number;
-  /** 每张宽度,默认 useWindowDimensions().width。
+  /** 每张宽度与水平翻页步长,默认 useWindowDimensions().width。
    *  若 caller 外层有 marginHorizontal(如 Dashboard banner inset 16),需要传
    *  `屏宽 - 左右 margin*2`,否则 slide 宽度超过可视区,右侧内容被裁切。 */
-  itemWidth?: number;
-  /** autoPlay 间隔 ms,undefined / 0 不自动 */
-  autoPlay?: number;
-  /** 是否循环播放,默认 true。传 false 时首尾不循环,可配合 a11y 暂停控制。 */
+  itemSize?: number;
+  /** 是否自动播放,默认 false。 */
+  autoplay?: boolean;
+  /** 自动播放间隔 ms,默认 3000。 */
+  autoplayInterval?: number;
+  /** 是否循环播放,默认 true。传 false 时到首尾停止。 */
   loop?: boolean;
   /** 是否显示底部 dot indicator,默认 true */
   showIndicator?: boolean;
   /** indicator 位置策略,默认 'bottom' */
   indicatorPosition?: CarouselIndicatorPosition;
-  /** 单项点击 */
-  onPressItem?: (item: T, index: number) => void;
-  /** 单项 a11y label 解析器。仅 `onPressItem` 存在时启用 —— Pressable 拿来作
-   *  `accessibilityLabel`(role 自动设 button)。不传则 fallback `第 N 项`。 */
-  getAccessibilityLabel?: (item: T, index: number) => string;
   /** 外层 View 附加样式 */
   style?: StyleProp<ViewStyle>;
   /** E2E / 测试定位 */
   testID?: string;
 };
+
+type CarouselAction<T> = {
+  /** 单项点击。action slide 必须同时声明业务名称。 */
+  onPressItem: (item: T, index: number) => void;
+  /** 单项业务名称，供读屏器区分每个可操作 slide。 */
+  getAccessibilityLabel: (item: T, index: number) => string;
+};
+
+type CarouselDisplay = {
+  /** 纯展示 slide 不创建可点击节点。 */
+  onPressItem?: never;
+  getAccessibilityLabel?: never;
+};
+
+/** 轮播只有纯展示或可操作两种 slide，不能只提供其中一个 action 字段。 */
+export type CarouselProps<T> = CarouselBaseProps<T> &
+  (CarouselAction<T> | CarouselDisplay);