@xhsreds/reds-rn-next 0.2.7 → 0.2.9

package/lib/types/components/FAB/FAB.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RedsFAB } from "./interface/index";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RedsFAB & React.RefAttributes<unknown>>>;
+declare const _default: React.MemoExoticComponent<(props: RedsFAB) => React.JSX.Element>;
 export default _default;

package/lib/types/components/Image/Image69.d.ts

@@ -1,5 +1,13 @@
 import React from "react";
-import { Image as RNImage, ImageProps } from "react-native";
-import { RedsImage } from "./interface/index";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RedsImage & Omit<ImageProps, keyof RedsImage> & React.RefAttributes<RNImage>>>;
+import { ImageProps } from "react-native";
+import { RedsImage, TErrorStyle, TLoadStyle } from "./interface/index";
+declare const _default: React.MemoExoticComponent<{
+    ({ src, source: _source, width, height, borderRadius, errorStyle, loadStyle, style, ...props }: RedsImage & Omit<ImageProps, keyof RedsImage>): React.JSX.Element;
+    defaultProps: {
+        style: {};
+        loadStyle: TLoadStyle;
+        loadMode: import("./interface/index").TLoadMode;
+        errorStyle: TErrorStyle;
+    };
+}>;
 export default _default;

package/lib/types/components/Image/index.d.ts

@@ -8,6 +8,6 @@ declare const ImageComponent: import("react").MemoExoticComponent<{
         loadMode: ImageType.TLoadMode;
         errorStyle: ImageType.TErrorStyle;
     };
-}> | import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ImageType.RedsImage & Omit<import("react-native").ImageProps, keyof ImageType.RedsImage> & import("react").RefAttributes<import("react-native").Image>>>;
+}>;
 export default ImageComponent;
 export { ImageComponent as Image, ImageType };

package/lib/types/components/List/styles.d.ts

@@ -8,7 +8,6 @@ declare const createStyles: () => {
         marginBottom: number;
         marginLeft: number;
         fontSize: any;
-        fontWeight: any;
         lineHeight: any;
     };
     headerTextPlain: {
@@ -16,7 +15,6 @@ declare const createStyles: () => {
         marginHorizontal: number;
         marginBottom: number;
         fontSize: any;
-        fontWeight: any;
         lineHeight: any;
     };
     footerText: {

package/lib/types/components/NavigationBar/NavigationBar.d.ts

@@ -7,7 +7,9 @@ declare const NavigationBar: {
         actionType: NavigationBarActionType;
         leftActions: never[];
         rightActions: never[];
-        size: NavigationBarSize;
+        size: NavigationBarSize; /**
+         * 设置icon size
+         */
     };
 };
 export default NavigationBar;

package/lib/types/components/NavigationBar/styles.d.ts

@@ -1,3 +1,4 @@
+import { RedsNavigationBar } from "./interface/index";
 declare const getStyles: (themeColor: any) => {
     navigationBarContainer: {
         width: "100%";
@@ -39,26 +40,15 @@ declare const getStyles: (themeColor: any) => {
         paddingLeft: number;
     };
     leftActionStyle: {
-        marginRight: number;
         display: "flex";
         justifyContent: "center";
         alignItems: "center";
     };
     rightActionStyle: {
-        marginLeft: number;
         display: "flex";
         justifyContent: "center";
         alignItems: "center";
     };
-    iconBg: {
-        width: number;
-        height: number;
-        borderRadius: number;
-        display: "flex";
-        justifyContent: "center";
-        alignItems: "center";
-        backgroundColor: any;
-    };
     flexCenter: {
         display: "flex";
         flexDirection: "row";
@@ -87,4 +77,13 @@ declare const getStyles: (themeColor: any) => {
         right: number;
     };
 };
+export declare const getIconStyles: (props: RedsNavigationBar, item: any, themeColor: any, type: string) => {
+    width: number;
+    height: number;
+    display: "flex";
+    justifyContent: "center";
+    alignItems: "center";
+    marginRight: number;
+    marginLeft: number;
+};
 export default getStyles;

package/lib/types/components/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RedsPopover } from "./interface/index";
-declare const _default: ({ mode, opacity, content, children, isControl, placement, closeOnClickAgain, trigger, zIndex, visible, onVisibleChange, onClickMask: _onClickMask, floatingPadding, popContainerStyle, floatingStyles: propsFloatingStyles, arrowStyles: propsArrowStyles, }: RedsPopover) => React.JSX.Element;
+declare const _default: ({ mode, opacity, content, children, isControl, placement, closeOnClickAgain, trigger, zIndex, visible, onVisibleChange, onClickMask: _onClickMask, floatingPadding, popContainerStyle, floatingStyles: propsFloatingStyles, arrowStyles: propsArrowStyles, offset, }: RedsPopover) => React.JSX.Element;
 export default _default;

package/lib/types/components/Popover/component.d.ts

@@ -1,11 +1,11 @@
 import React, { ReactNode } from "react";
-import { Modal, GestureResponderEvent, Animated } from "react-native";
-export declare const ModalWrapper: React.ForwardRefExoticComponent<{
-    needModal?: boolean | undefined;
+import { GestureResponderEvent, Animated } from "react-native";
+export declare const ModalWrapper: ({ needModal, visible, children, onClickMask, opacity, progress, zIndex, }: {
+    needModal?: boolean;
     visible: boolean;
     children: ReactNode;
     onClickMask: (e: GestureResponderEvent) => any;
-    opacity?: number | undefined;
+    opacity?: number;
     progress: Animated.Value | number;
     zIndex: number;
-} & React.RefAttributes<Modal>>;
+}) => React.JSX.Element;

package/lib/types/components/Popover/interface/index.d.ts

@@ -1,5 +1,9 @@
 import { ReactNode } from "react";
-import { GestureResponderEvent, ViewStyle } from "react-native";
+import { GestureResponderEvent, ImageStyle, ViewStyle } from "react-native";
+interface Offset {
+    x: number;
+    y: number;
+}
 export interface RedsPopover {
     visible?: boolean;
     placement?: "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
@@ -15,8 +19,9 @@ export interface RedsPopover {
     onClickMask?: (evnet: GestureResponderEvent) => void;
     onVisibleChange?: (value: boolean) => void;
     floatingStyles?: ViewStyle;
-    arrowStyles?: ViewStyle;
+    arrowStyles?: ImageStyle;
     isControl?: boolean;
+    offset?: Offset;
 }
 export interface RedsPopoverEvent {
 }
@@ -33,4 +38,9 @@ export declare const PopoverDefaultProps: {
     floatingStyles: {};
     arrowStyles: {};
     isControl: boolean;
+    offset: {
+        x: number;
+        y: number;
+    };
 };
+export {};

package/lib/types/components/ProgressIndicator/interface/index.d.ts

@@ -7,6 +7,7 @@ export interface RedsProgressIndicator {
     type?: string;
     strokeColor?: string;
     strokeWidth?: number;
+    lottieSource?: string;
 }
 export interface RedsProgressIndicatorEvent {
 }

package/lib/types/components/Radio/Radio.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { View } from "react-native";
 import { RedsRadio } from "./interface";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RedsRadio & React.RefAttributes<View>>>;
+declare const _default: React.MemoExoticComponent<(props: RedsRadio) => React.JSX.Element>;
 export default _default;

package/lib/types/components/Rate/styles.d.ts

@@ -7,6 +7,9 @@ declare const styles: {
     rate: {
         marginRight: number;
     };
+    disabled: {
+        opacity: number;
+    };
 };
 export declare const getRateDescStyle: (themeColor: any) => {
     fontWeight: any;

package/lib/types/components/Sheets/AnimatedSheets.d.ts

@@ -6,7 +6,9 @@ declare const Sheets: {
         label: string;
         mask: boolean;
         maskMode: SheetsMaskMode;
-        sheetsType: SheetsType;
+        sheetsType: SheetsType; /**
+         * Sheets容器高度动画
+         */
         cancel: boolean;
         close: boolean;
         zIndex: number;
@@ -17,7 +19,9 @@ declare const Sheets: {
         iconType: SheetsIconType;
         size: SheetsSize;
         onCancel: () => void;
-        onConfirm: () => void;
+        onConfirm: () => void; /**
+         * Sheets容器child内容高度
+         */
         visible: boolean;
     };
 };

package/lib/types/index.d.ts

@@ -27,7 +27,6 @@ export * from "./components/BottomBar";
 export * from "./components/List";
 export * from "./components/Skeleton";
 export * from "./components/ProgressIndicator";
-export * from "./components/ImagePreview";
 export * from "./components/Divider";
 export * from "./components/Portal";
 export * from "./components/Tag";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
@@ -10,7 +10,7 @@
     "dayjs": "^1.10.7",
     "runes": "~0.4.3",
     "async-validator": "~4.2.5",
-    "@xhsreds/reds-token-next": "0.2.7"
+    "@xhsreds/reds-token-next": "0.2.9"
   },
   "peerDependencies": {
     "@xhs/lottie-react-native": "*",

package/src/components/Alert/styles.ts

@@ -75,7 +75,7 @@ export const style = (props: RedsAlert) => {
       paddingTop: 0,
     },
     footerText: {
-      borderTopWidth: 1,
+      borderTopWidth: 0.5,
       borderTopColor: themeColor.Separator,
       paddingHorizontal: 20,
       paddingBottom: 6,
@@ -83,7 +83,6 @@ export const style = (props: RedsAlert) => {
     },
     footerHorizontal: {
       flexDirection: "row",
-      height: 56,
     },
     footerVertical: {
       flexDirection: "column-reverse",

package/src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, memo, forwardRef, useEffect } from "react";
+import React, { useMemo, useRef, memo, useEffect } from "react";
 import { View, StyleSheet, Animated, Image, Text } from "react-native";
 import { RedsAvatar, AvatarDefaultProps } from "./interface/index";
 import { getLiveTextStyles, getAvatarStyles } from "./styles";
@@ -15,7 +15,7 @@ export const images = {
   light: "https://picasso-static.xiaohongshu.com/fe-platform/a.png",
 };
 
-const Avatar = (props: RedsAvatar, ref?: any) => {
+const Avatar = (props: RedsAvatar) => {
   const {
     liveText = AvatarDefaultProps.liveText,
     size = AvatarDefaultProps.size,
@@ -146,7 +146,7 @@ const Avatar = (props: RedsAvatar, ref?: any) => {
   }, [size]);
 
   return (
-    <View style={StyleSheet.flatten([styles.outContainer, containerStyle])} ref={ref}>
+    <View style={StyleSheet.flatten([styles.outContainer, containerStyle])}>
       {/* 内层头像描边 */}
       {type === "live" && (
         <Animated.View
@@ -196,4 +196,4 @@ const Avatar = (props: RedsAvatar, ref?: any) => {
   );
 };
 
-export default memo(forwardRef(Avatar));
+export default memo(Avatar);

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, FC, useRef, memo, forwardRef } from "react";
+import React, { useMemo, FC, useRef, memo } from "react";
 import { View, StyleSheet, Animated } from "react-native";
 import { RedsAvatarGroup, AvatarGroupDefaultProps } from "./interface";
 import { Avatar } from "../../index";
@@ -6,7 +6,7 @@ import { lightColor, typography, alwaysColor } from "@xhs/reds-token-next";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { useThemeColor } from "../ConfigProvider";
 
-const AvatarGroup = (props: RedsAvatarGroup, ref?: any) => {
+const AvatarGroup = (props: RedsAvatarGroup) => {
   useMounted("AvatarGroup");
   const { size = AvatarGroupDefaultProps.size, avatars = [], avatarProps, maxCount, groupStyle = {} } = props;
   const themeColor = useThemeColor("AvatarStack");
@@ -41,11 +41,7 @@ const AvatarGroup = (props: RedsAvatarGroup, ref?: any) => {
     return renderAvatars;
   }, [size, avatars, groupStyle, maxCount, avatarProps]);
 
-  return (
-    <View ref={ref} style={StyleSheet.flatten([styles.outContainer, groupStyle])}>
-      {avatarList}
-    </View>
-  );
+  return <View style={StyleSheet.flatten([styles.outContainer, groupStyle])}>{avatarList}</View>;
 };
 
-export default memo(forwardRef(AvatarGroup));
+export default memo(AvatarGroup);

package/src/components/Button/Button.tsx

@@ -1,10 +1,10 @@
-import React, { memo, forwardRef } from "react";
+import React, { memo } from "react";
 import { TouchableWithoutFeedback, View, Text, ViewStyle, TextStyle, PanResponder } from "react-native";
 import { RedsButton, ButtonDefaultProps } from "./interface";
 import { getSizeStyles, getVariantStyles, contentMarginStyle, getStyles } from "./styleMap";
 import useMounted from "../../pvCount/useUnmountedProcess";
 
-const Button = (props: RedsButton, ref?: any) => {
+const Button = (props: RedsButton) => {
   useMounted("Button");
   const finalProps = { ...(ButtonDefaultProps as RedsButton), ...props };
   const { size, block, disabled, children, onClick, avatar, iconLeft, iconRight, shape, style = {} } = finalProps;
@@ -68,4 +68,4 @@ const Button = (props: RedsButton, ref?: any) => {
   );
 };
 
-export default memo(forwardRef(Button));
+export default memo(Button);

package/src/components/Button/styleMap.ts

@@ -100,7 +100,7 @@ export const getSizeStyles = (props: RedsButton) => {
       },
       text: {
         fontSize: typography.C1FontSize,
-        fontWeight: typography.C1FontWeight,
+        fontWeight: typography.T3FontWeight,
         lineHeight: typography.C1LineHeight,
       },
     }),
@@ -112,7 +112,7 @@ export const getSizeStyles = (props: RedsButton) => {
       },
       text: {
         fontSize: typography.C2FontSize,
-        fontWeight: typography.C2FontWeight,
+        fontWeight: typography.T3FontWeight,
         lineHeight: typography.C2LineHeight,
       },
     }),
@@ -124,7 +124,7 @@ export const getSizeStyles = (props: RedsButton) => {
       },
       text: {
         fontSize: typography.C3FontSize,
-        fontWeight: typography.C3FontWeight,
+        fontWeight: typography.T3FontWeight,
         lineHeight: typography.C3LineHeight,
       },
     }),

package/src/components/Carousel/Carousel.tsx

@@ -20,7 +20,7 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
   const scrollViewRef = useRef<ScrollView>(null);
   const [currentIndex, setCurrentIndex] = useState((props.currentIndex || 0) + 1);
   const [isScrolling, setIsScrolling] = useState(false);
-  const [autoPlayTimer, setAutoPlayTimer] = useState<NodeJS.Timeout | null>(null);
+  const [autoPlayTimer, setAutoPlayTimer] = useState<any>(null);
 
   const themeColor = useThemeColor();
 
@@ -66,39 +66,30 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
         return {
           itemWidth: SCREEN_WIDTH,
           spacing: 0,
-          sideSpacing: 0,
           containerPadding: 0,
         };
       case "card":
         return {
           itemWidth: SCREEN_WIDTH * 0.8,
-          spacing: 0,
-          sideSpacing: (SCREEN_WIDTH - SCREEN_WIDTH * 0.8) / 2,
+          spacing: props.distance || 0,
           containerPadding: (SCREEN_WIDTH - SCREEN_WIDTH * 0.8) / 2,
         };
       case "compact":
         return {
           itemWidth: SCREEN_WIDTH * 0.7,
           spacing: -SCREEN_WIDTH * 0.035,
-          sideSpacing: 0,
           containerPadding: SCREEN_WIDTH * 0.15,
         };
       default:
         return {
           itemWidth: SCREEN_WIDTH * 0.8,
           spacing: 0,
-          sideSpacing: (SCREEN_WIDTH - SCREEN_WIDTH * 0.8) / 2,
           containerPadding: (SCREEN_WIDTH - SCREEN_WIDTH * 0.8) / 2,
         };
     }
   };
 
-  const {
-    itemWidth: ITEM_WIDTH,
-    spacing: SPACING,
-    sideSpacing: SIDE_SPACING,
-    containerPadding: CONTAINER_PADDING,
-  } = getItemDimensions();
+  const { itemWidth: ITEM_WIDTH, spacing: SPACING, containerPadding: CONTAINER_PADDING } = getItemDimensions();
   const OFFSET_PER_ITEM = ITEM_WIDTH + SPACING;
 
   // 初始化时滚动到第一个实际元素
@@ -278,21 +269,29 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
         ))}
       </ScrollView>
       {/** dot */}
-      <View style={[props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.dotContainer : styles.dotOutsideContainer]}>
-        {props.dotType === DOTTYPE.INDEFINITE ? (
-          <View style={[props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.smallDot : styles.smallOutsideDot]}></View>
-        ) : (
-          <></>
-        )}
-        {dotList.map((_, index) => (
-          <View style={getDotStyle(index)}></View>
-        ))}
-        {props.dotType === DOTTYPE.INDEFINITE ? (
-          <View style={[props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.smallDot : styles.smallOutsideDot]}></View>
-        ) : (
-          <></>
-        )}
-      </View>
+      {props.displayDots ? (
+        <View style={[props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.dotContainer : styles.dotOutsideContainer]}>
+          {props.dotType === DOTTYPE.INDEFINITE ? (
+            <View
+              style={[props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.smallDot : styles.smallOutsideDot]}
+            ></View>
+          ) : (
+            <></>
+          )}
+          {dotList.map((_, index) => (
+            <View style={getDotStyle(index)}></View>
+          ))}
+          {props.dotType === DOTTYPE.INDEFINITE ? (
+            <View
+              style={[props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.smallDot : styles.smallOutsideDot]}
+            ></View>
+          ) : (
+            <></>
+          )}
+        </View>
+      ) : (
+        <></>
+      )}
       {/** 数字 */}
       {props.displayNumbers ? (
         <View

package/src/components/Carousel/doc/index.mdx

@@ -19,10 +19,12 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | duration        | 轮播时长间隔 单位毫秒                               | number          | 1000                |
 | autoPlay        | 是否自动播放                                        | boolean         | true                |
 | displayNumbers  | 是否展示数字                                        | boolean         | false               |
+| displayDots     | 是否展示dot                                         | boolean         | false               |
 | playingMode     | 播放格式                                            | PLAYINGMODE     | PLAYINGMODE.NORMAL  |
 | dotPlacement    | dot 位置                                            | DOTPLACEMENT    | DOTPLACEMENT.INSIDE |
 | numberPlacement | number 位置                                         | NUMBERPLACEMENT | NUMBERPLACEMENT.TOP |
 | children        | rn子组件                                            | ReactElement[]  | `[]`                |
+| distance        | 间隔                                                | number          | 0                   |
 
 ### Events
 

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

@@ -30,10 +30,12 @@ export interface RedsCarousel {
   duration?: number;
   autoPlay?: boolean;
   displayNumbers?: boolean;
+  displayDots?: boolean;
   playingMode?: PLAYINGMODE;
   dotPlacement?: DOTPLACEMENT;
   numberPlacement?: NUMBERPLACEMENT;
   children?: ReactElement[];
+  distance?: number;
   onChange?: (value: any, index: number) => void;
   onClick?: (value: any, index: number) => void;
 }
@@ -47,8 +49,10 @@ export const CarouselDefaultProps = {
   duration: 1000,
   autoPlay: true,
   displayNumbers: false,
+  displayDots: false,
   playingMode: PLAYINGMODE.NORMAL,
   dotPlacement: DOTPLACEMENT.INSIDE,
   numberPlacement: NUMBERPLACEMENT.TOP,
   children: [],
+  distance: 0,
 };

package/src/components/CheckBoxGroup/CheckBoxGroup.tsx

@@ -25,11 +25,11 @@ const CheckBoxGroup = (props: RedsCheckBoxGroup) => {
 
   const handleChange = (value: string | number, checked: boolean) => {
     if (checked) {
-      getCheckedStatus([...props.value, value] as string[] | number[]);
-      props?.onChange?.([...props.value, value] as string[] | number[]);
+      getCheckedStatus([...(props?.value || []), value] as string[] | number[]);
+      props?.onChange?.([...(props?.value || []), value] as string[] | number[]);
     } else {
-      getCheckedStatus(props.value.filter((i) => i !== value) as string[] | number[]);
-      props?.onChange?.(props.value.filter((i) => i !== value) as string[] | number[]);
+      getCheckedStatus((props?.value || []).filter((i) => i !== value) as string[] | number[]);
+      props?.onChange?.((props?.value || []).filter((i) => i !== value) as string[] | number[]);
     }
   };
 
@@ -57,7 +57,7 @@ const CheckBoxGroup = (props: RedsCheckBoxGroup) => {
   const styles = getStyles(themeColor);
 
   useEffect(() => {
-    getCheckedStatus(props.value);
+    getCheckedStatus(props?.value || []);
   }, [props.value]);
 
   const getCheckedStatus = (values: number[] | string[]) => {
@@ -90,8 +90,8 @@ const CheckBoxGroup = (props: RedsCheckBoxGroup) => {
     // @ts-ignore
     const childProps = React.Children.map(props.children, (child: RedsCheckBox) => child?.props?.value);
     const allchecked =
-      props.value.length !== 0 &&
-      (props.value.length === childProps.length || props.value.length === props?.options?.length);
+      props.value?.length !== 0 &&
+      (props.value?.length === childProps.length || props.value?.length === props?.options?.length);
     if (allchecked) {
       props?.onChange?.([]);
     } else {
@@ -102,7 +102,7 @@ const CheckBoxGroup = (props: RedsCheckBoxGroup) => {
   };
 
   return (
-    <CheckBoxGroupContext.Provider value={{ checkList: props.value }}>
+    <CheckBoxGroupContext.Provider value={{ checkList: props.value || [] }}>
       {props.full ? (
         <View style={styles.fullContainer}>
           <TouchableWithoutFeedback onPress={handleFullClick}>

package/src/components/CheckBoxGroup/demo/index.tsx

@@ -39,8 +39,8 @@ export default function App() {
         <CheckBox label="多选" value={4} />
       </CheckBoxGroup>
 
-      <Text>checkbox用法 large</Text>
-      <CheckBoxGroup onChange={handleChange} value={value} size={CheckBoxGroupType.CheckBoxGroupSize.LARGE}>
+      <Text>checkbox用法 medium</Text>
+      <CheckBoxGroup onChange={handleChange} value={value} size={CheckBoxGroupType.CheckBoxGroupSize.MEDIUM}>
         <CheckBox label="多选" value={1} />
         <CheckBox label="多选" value={2} />
         <CheckBox label="多选" value={3} />

package/src/components/CheckBoxGroup/doc/index.mdx

@@ -18,7 +18,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | full     | 是否有全选按钮     | boolean                  | false                          |
 | fullText | 全选文案           | string                   | 全选                           |
 | layout   | 布局方式 横向/纵向 | CheckBoxGroupLayout      | CheckBoxGroupLayout.HORIZONTAL |
-| size     | size               | CheckBoxGroupSize        | CheckBoxGroupSize.MEDIUM       |
+| size     | size               | CheckBoxGroupSize        | CheckBoxGroupSize.LARGE        |
 | children | tab组件            | ReactNode[]              |                                |
 
 ### Events

package/src/components/CheckBoxGroup/interface/index.ts

@@ -28,7 +28,7 @@ export const enum CheckedStatus {
   NONE = "none",
 }
 export interface RedsCheckBoxGroup {
-  value: string[] | number[];
+  value?: string[] | number[];
   options?: CheckBoxGroupOption[];
   disable?: boolean;
   full?: boolean;
@@ -47,7 +47,7 @@ export const CheckBoxGroupDefaultProps = {
   full: false,
   fullText: "全选",
   layout: CheckBoxGroupLayout.HORIZONTAL,
-  size: CheckBoxGroupSize.MEDIUM,
+  size: CheckBoxGroupSize.LARGE,
 };
 
 export interface RedsCheckBox {

package/src/components/CheckBoxGroup/styles.ts

@@ -10,21 +10,21 @@ import {
 import { typography } from "@xhs/reds-token-next";
 
 const widthSizeMap: Record<"small" | "medium" | "large", number> = {
-  small: typography.B1FontSize,
-  medium: typography.H3FontSize,
-  large: typography.H2FontSize,
+  small: typography.T3FontSize,
+  medium: typography.T2FontSize,
+  large: typography.H3FontSize,
 };
 
 export const iconSizeMap: Record<CheckBoxGroupSize, number> = {
-  small: typography.B1FontSize,
-  medium: typography.H3FontSize,
-  large: typography.H2FontSize,
+  small: typography.T3FontSize,
+  medium: typography.T2FontSize,
+  large: typography.H3FontSize,
 };
 
 export const fontSizeMap: Record<"small" | "medium" | "large", number> = {
-  small: typography.T3FontSize,
-  medium: typography.B2FontSize,
-  large: typography.B1FontSize,
+  small: typography.C2FontSize,
+  medium: typography.T3FontSize,
+  large: typography.T2FontSize,
 };
 
 export const getCheckboxStyle = (props: RedsCheckBox) => {

package/src/components/ConfigProvider/hooks/ConfigCache/interface.ts

@@ -38,7 +38,6 @@ export type Component =
   | "Avatar"
   | "DropdownMenu"
   | "AvatarStack"
-  | "ImagePreview"
   | "Search"
   | "Divider"
   | "Slider"