@miot-rn/car-component 1.0.1

package/dist/components/airConditioningCard/index.js

@@ -0,0 +1,103 @@
+import React, { useContext, memo, useMemo } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import { Stepper, Separator, ColumnSeparator, LargeVariantSwitch, ConfigContext } from 'miot/ui/hyperOSUI';
+import { TitleContainer } from "../titleContainer";
+import { CardContainer } from "../cardContainer";
+function isEffectData(value) {
+  return typeof value === 'number' || typeof value === 'string';
+}
+export const AirConditioningCard = /*#__PURE__*/memo(({
+  hvacStatus,
+  hvacDefrosterStatus,
+  onHvacStatusChange,
+  onHvacDefrosterChange,
+  targetTemperature,
+  onHvacTemperatureChange,
+  hvacTitle,
+  hvacDefrosterTitle,
+  hvacDefrosterSubtitle = '',
+  insideTip = '',
+  outsideTip = '',
+  temperatureStep,
+  maxTemperature,
+  minTemperature,
+  insideTemperature,
+  outsideTemperature,
+  showHvacDefroster = false,
+  disabled = false,
+  showTargetTemperature = false
+}) => {
+  const {
+    colorToken
+  } = useContext(ConfigContext);
+  const {
+    isInsideTemperatureEffect,
+    isOutsideTemperatureEffect
+  } = useMemo(() => ({
+    isInsideTemperatureEffect: isEffectData(insideTemperature),
+    isOutsideTemperatureEffect: isEffectData(outsideTemperature)
+  }), [insideTemperature, outsideTemperature]);
+  const transformTargetTemperature = useMemo(() => {
+    return typeof targetTemperature === 'string' ? parseFloat(targetTemperature) : targetTemperature;
+  }, [targetTemperature]);
+  return /*#__PURE__*/React.createElement(CardContainer, null, /*#__PURE__*/React.createElement(TitleContainer, {
+    title: hvacTitle,
+    subtitle: isInsideTemperatureEffect || isOutsideTemperatureEffect ? /*#__PURE__*/React.createElement(View, {
+      style: [styles.conditioning, showTargetTemperature ? {} : {
+        paddingBottom: 12
+      }]
+    }, isInsideTemperatureEffect && /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_4
+      }
+    }, insideTip), isInsideTemperatureEffect && isOutsideTemperatureEffect && /*#__PURE__*/React.createElement(ColumnSeparator, {
+      style: styles.column
+    }), isOutsideTemperatureEffect && /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_4
+      }
+    }, outsideTip)) : showTargetTemperature ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        paddingBottom: 12
+      }
+    }) : null,
+    value: hvacStatus,
+    onValueChange: onHvacStatusChange,
+    disabled: disabled
+  }), showTargetTemperature && /*#__PURE__*/React.createElement(View, {
+    style: styles.stepper
+  }, /*#__PURE__*/React.createElement(Stepper, {
+    step: temperatureStep,
+    symbolType: "celsius",
+    value: transformTargetTemperature,
+    disabled: !hvacStatus || disabled,
+    onChange: onHvacTemperatureChange,
+    min: minTemperature,
+    max: maxTemperature
+  })), showHvacDefroster && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, {
+    style: styles.separator
+  }), /*#__PURE__*/React.createElement(LargeVariantSwitch, {
+    title: hvacDefrosterTitle,
+    disabled: disabled,
+    subtitle: hvacDefrosterSubtitle,
+    value: hvacDefrosterStatus,
+    onValueChange: onHvacDefrosterChange
+  })));
+});
+const styles = StyleSheet.create({
+  stepper: {
+    alignItems: 'center'
+  },
+  conditioning: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  separator: {
+    marginHorizontal: 20,
+    marginVertical: 4
+  },
+  column: {
+    height: 8,
+    marginHorizontal: 8
+  }
+});

package/dist/components/carInfoHeader/carImage.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyleProp, ViewStyle, ImageSourcePropType } from 'react-native';
+interface CarImageProps {
+    source?: ImageSourcePropType;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const CarImage: ({ source, style }: CarImageProps) => React.JSX.Element;
+export {};

package/dist/components/carInfoHeader/carImage.js

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+import { View, Image, StyleSheet } from 'react-native';
+import { ConfigContext } from 'miot/ui/hyperOSUI';
+import { MijiaLogo } from "../../icons";
+export const CarImage = ({
+  source,
+  style
+}) => {
+  const {
+    colorToken
+  } = useContext(ConfigContext);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style]
+  }, source ? /*#__PURE__*/React.createElement(Image, {
+    source: source,
+    style: styles.image,
+    resizeMode: "contain"
+  }) : /*#__PURE__*/React.createElement(View, {
+    style: styles.placeholder
+  }, /*#__PURE__*/React.createElement(MijiaLogo, {
+    fill: colorToken.mj_color_gray_icon_2
+  })));
+};
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: '100%',
+    height: undefined,
+    aspectRatio: 2
+  },
+  placeholder: {
+    width: '100%',
+    height: undefined,
+    aspectRatio: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

package/dist/components/carInfoHeader/dualRangeIndicator.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface DualRangeIndicatorProps {
+    electricRange?: number;
+    fuelRange?: number;
+    currentElectricRange?: number | string;
+    currentFuelRange?: number | string;
+    unit?: string;
+    electricColor?: string;
+    fuelColor?: string;
+    showProgress?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const DualRangeIndicator: ({ electricRange, fuelRange, currentElectricRange, currentFuelRange, unit, electricColor, fuelColor, showProgress, style, }: DualRangeIndicatorProps) => React.JSX.Element;
+export {};

package/dist/components/carInfoHeader/dualRangeIndicator.js

@@ -0,0 +1,124 @@
+import React, { useContext, useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { ConfigContext, Fonts, defaultColorToken } from 'miot/ui/hyperOSUI';
+import { dynamicStyleSheet } from 'miot/ui/Style/DynamicStyleSheet';
+import { ElectricPower, FuelPower } from "../../icons";
+import { RangeProgressBar } from "./rangeProgressBar";
+export const DualRangeIndicator = ({
+  electricRange = 500,
+  fuelRange = 800,
+  currentElectricRange = 0,
+  currentFuelRange = 0,
+  unit = 'km',
+  electricColor,
+  fuelColor,
+  showProgress = false,
+  style
+}) => {
+  const {
+    colorToken
+  } = useContext(ConfigContext);
+  const numericElectricRange = typeof currentElectricRange === 'number' ? currentElectricRange : 0;
+  const numericFuelRange = typeof currentFuelRange === 'number' ? currentFuelRange : 0;
+  const electricProgress = useMemo(() => electricRange > 0 && typeof currentElectricRange === 'number' ? Math.min(numericElectricRange / electricRange, 1) : 0, [numericElectricRange, electricRange]);
+  const fuelProgress = useMemo(() => fuelRange > 0 && typeof currentFuelRange === 'number' ? Math.min(numericFuelRange / fuelRange, 1) : 0, [numericFuelRange, fuelRange]);
+  const renderRangeIndicator = config => {
+    const {
+      icon,
+      color,
+      currentRange,
+      progress,
+      totalRange
+    } = config;
+    const displayValue = typeof currentRange === 'number' ? Math.round(currentRange) : currentRange;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.rangeItem,
+      key: config.type
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.rangeContent
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.rangeTop
+    }, icon, /*#__PURE__*/React.createElement(View, {
+      style: styles.valueContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.rangeValue,
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, displayValue, /*#__PURE__*/React.createElement(Text, {
+      style: styles.unitSpacer
+    }, ' '), /*#__PURE__*/React.createElement(Text, {
+      style: styles.unit
+    }, unit)))), showProgress ? /*#__PURE__*/React.createElement(RangeProgressBar, {
+      progress: progress,
+      color: color
+    }) : null));
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style]
+  }, renderRangeIndicator({
+    type: 'electric',
+    totalRange: electricRange,
+    currentRange: currentElectricRange,
+    icon: /*#__PURE__*/React.createElement(ElectricPower, {
+      fill: colorToken.mj_color_gray_icon_1
+    }),
+    color: electricColor,
+    progress: electricProgress
+  }), renderRangeIndicator({
+    type: 'fuel',
+    totalRange: fuelRange,
+    currentRange: currentFuelRange,
+    icon: /*#__PURE__*/React.createElement(FuelPower, {
+      fill: colorToken.mj_color_gray_icon_1
+    }),
+    color: fuelColor,
+    progress: fuelProgress
+  }));
+};
+const styles = dynamicStyleSheet({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 60,
+    width: '100%'
+  },
+  rangeItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 15,
+    flex: 1
+  },
+  rangeContent: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  rangeTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8
+  },
+  valueContainer: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    paddingHorizontal: 4
+  },
+  icon: {
+    width: 30,
+    height: 30
+  },
+  rangeValue: {
+    color: defaultColorToken.mj_color_gray_text_1,
+    includeFontPadding: false,
+    ...Fonts.mj_text_custom_20_M
+  },
+  unitSpacer: {
+    fontSize: 6
+  },
+  unit: {
+    color: defaultColorToken.mj_color_gray_text_1,
+    includeFontPadding: false,
+    ...Fonts.mj_text_custom_14_M
+  }
+});

package/dist/components/carInfoHeader/index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { SingleRangeIndicator } from './singleRangeIndicator';
+import { DualRangeIndicator } from './dualRangeIndicator';
+import { CarImage } from './carImage';
+import { ParkingStatus } from './parkingStatus';
+export interface SingleRangeData {
+    currentRange: number | string;
+    totalRange: number;
+    unit: string;
+    color?: string;
+}
+export interface DualRangeData {
+    currentElectricRange: number | string;
+    electricRange: number;
+    unit: string;
+    electricColor?: string;
+    currentFuelRange: number | string;
+    fuelRange: number;
+    fuelColor?: string;
+}
+export interface ParkingStatusData {
+    status?: string;
+    icon?: React.ReactElement;
+    showDivider?: boolean;
+    textStyle?: StyleProp<TextStyle>;
+    isLoading?: boolean;
+}
+export interface CarInfoHeaderProps {
+    singleRangeData?: SingleRangeData;
+    dualRangeData?: DualRangeData;
+    parkingStatus?: ParkingStatusData;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+export declare const CarInfoHeader: (props: CarInfoHeaderProps) => React.JSX.Element;
+export default CarInfoHeader;
+export { SingleRangeIndicator, DualRangeIndicator, CarImage, ParkingStatus };

package/dist/components/carInfoHeader/index.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Device } from 'miot';
+import { SingleRangeIndicator } from "./singleRangeIndicator";
+import { DualRangeIndicator } from "./dualRangeIndicator";
+import { CarImage } from "./carImage";
+import { ParkingStatus } from "./parkingStatus";
+
+/**
+ * 单续航数据配置
+ */
+
+/**
+ * 双续航数据配置
+ */
+
+/**
+ * 驻车状态数据配置
+ */
+
+/**
+ * CarInfoHeader 组件 Props 类型
+ */
+
+/**
+ * 车辆信息头部组件
+ *
+ * 展示车辆续航信息（单续航/双续航）和驻车状态
+ *
+ * @example
+ * // 单续航模式
+ * <CarInfoHeader
+ *   singleRangeData={{ currentRange: 150, totalRange: 500, unit: 'km' }}
+ * />
+ *
+ * @example
+ * // 双续航模式
+ * <CarInfoHeader
+ *   dualRangeData={{
+ *     currentElectricRange: 100, electricRange: 200,
+ *     currentFuelRange: 400, fuelRange: 800, unit: 'km'
+ *   }}
+ * />
+ */
+export const CarInfoHeader = props => {
+  const {
+    singleRangeData,
+    dualRangeData,
+    parkingStatus,
+    containerStyle
+  } = props;
+  const isDualRange = !!dualRangeData;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, containerStyle]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.rangeSection
+  }, isDualRange && dualRangeData ? /*#__PURE__*/React.createElement(DualRangeIndicator, {
+    electricRange: dualRangeData.electricRange,
+    fuelRange: dualRangeData.fuelRange,
+    currentElectricRange: typeof dualRangeData.currentElectricRange === 'number' ? dualRangeData.currentElectricRange : 0,
+    currentFuelRange: typeof dualRangeData.currentFuelRange === 'number' ? dualRangeData.currentFuelRange : 0,
+    unit: dualRangeData.unit,
+    electricColor: dualRangeData.electricColor,
+    fuelColor: dualRangeData.fuelColor
+  }) : singleRangeData ? /*#__PURE__*/React.createElement(SingleRangeIndicator, {
+    currentRange: typeof singleRangeData.currentRange === 'number' ? singleRangeData.currentRange : 0,
+    totalRange: singleRangeData.totalRange,
+    unit: singleRangeData.unit,
+    color: singleRangeData.color
+  }) : null), /*#__PURE__*/React.createElement(View, {
+    style: styles.imageSection
+  }, /*#__PURE__*/React.createElement(CarImage, {
+    source: Device.iconURL ? {
+      uri: Device.iconURL
+    } : undefined
+  })), parkingStatus ? /*#__PURE__*/React.createElement(View, {
+    style: styles.statusSection
+  }, /*#__PURE__*/React.createElement(ParkingStatus, {
+    isLoading: parkingStatus.isLoading,
+    status: parkingStatus.status,
+    icon: parkingStatus.icon,
+    showDivider: parkingStatus.showDivider,
+    textStyle: parkingStatus.textStyle
+  })) : null);
+};
+export default CarInfoHeader;
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    width: '100%',
+    maxWidth: 336,
+    maxHeight: 336,
+    aspectRatio: 1,
+    overflow: 'hidden',
+    marginVertical: 20
+  },
+  rangeSection: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'flex-start'
+  },
+  imageSection: {
+    flex: 2,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  statusSection: {
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+// 导出子组件
+export { SingleRangeIndicator, DualRangeIndicator, CarImage, ParkingStatus };

package/dist/components/carInfoHeader/parkingStatus.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+interface ParkingStatusProps {
+    isLoading?: boolean;
+    status?: string | Record<string, string>;
+    icon?: React.ReactElement;
+    showDivider?: boolean;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}
+export declare const ParkingStatus: ({ isLoading, status, icon, showDivider, style, textStyle, }: ParkingStatusProps) => React.JSX.Element;
+export {};

package/dist/components/carInfoHeader/parkingStatus.js

@@ -0,0 +1,100 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, Animated, Easing } from 'react-native';
+import { dynamicStyleSheet } from 'miot/ui/Style/DynamicStyleSheet';
+import { Fonts, defaultColorToken } from 'miot/ui/hyperOSUI';
+export const ParkingStatus = ({
+  isLoading = false,
+  status = '',
+  icon,
+  showDivider = false,
+  style,
+  textStyle
+}) => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (isLoading) {
+      Animated.loop(Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true
+      })).start();
+    } else {
+      rotateAnim.stopAnimation(() => {
+        rotateAnim.setValue(0);
+      });
+    }
+    return () => {
+      rotateAnim.stopAnimation();
+    };
+  }, [isLoading, rotateAnim]);
+  const rotateStyle = {
+    transform: [{
+      rotate: rotateAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg']
+      })
+    }]
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.iconContainer
+  }, isLoading ? /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.iconWrapper, rotateStyle]
+  }, icon || null) : /*#__PURE__*/React.createElement(View, {
+    style: styles.iconWrapper
+  }, icon || null)), showDivider && status ? /*#__PURE__*/React.createElement(View, {
+    style: styles.divider
+  }) : null, status ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.statusText, textStyle],
+    numberOfLines: 3,
+    ellipsizeMode: "tail"
+  }, status) : null);
+};
+const styles = dynamicStyleSheet({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16
+  },
+  iconContainer: {
+    width: 16,
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 2
+  },
+  iconWrapper: {
+    width: 16,
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  icon: {
+    width: 16,
+    height: 16
+  },
+  defaultIconContainer: {
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  defaultIcon: {
+    width: 16,
+    height: 16
+  },
+  divider: {
+    width: 1,
+    height: 10,
+    backgroundColor: defaultColorToken.mj_color_gray_divider_1,
+    marginHorizontal: 4
+  },
+  statusText: {
+    ...Fonts.FontTextRegular,
+    color: defaultColorToken.mj_color_gray_text_4,
+    includeFontPadding: false,
+    textAlign: 'center'
+  }
+});

package/dist/components/carInfoHeader/rangeProgressBar.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface RangeProgressBarProps {
+    progress?: number;
+    color?: string;
+    width?: number;
+    height?: number;
+    borderRadius?: number;
+    showDivider?: boolean;
+    unfilledColor?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const RangeProgressBar: ({ progress, color, width, height, borderRadius, showDivider, unfilledColor, style, }: RangeProgressBarProps) => React.JSX.Element;
+export {};

package/dist/components/carInfoHeader/rangeProgressBar.js

@@ -0,0 +1,77 @@
+import React, { useContext, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { ConfigContext } from 'miot/ui/hyperOSUI';
+export const RangeProgressBar = ({
+  progress = 0,
+  color,
+  width = 76,
+  height = 3,
+  borderRadius = 3,
+  showDivider = true,
+  unfilledColor,
+  style
+}) => {
+  const {
+    colorToken
+  } = useContext(ConfigContext);
+  const clamped = useMemo(() => {
+    if (Number.isNaN(progress)) return 0;
+    return Math.min(Math.max(progress, 0), 1);
+  }, [progress]);
+  const effectiveUnfilled = unfilledColor || colorToken.mj_color_gray_fill_1;
+  const fillColor = color || colorToken.mj_color_green_1;
+  const rawFilled = clamped * width;
+  const hasGap = clamped > 0 && clamped < 1;
+  const filledWidth = Math.max(0, Math.min(width, hasGap ? rawFilled - 1 / 2 : rawFilled));
+  const unfilledWidth = Math.max(0, width - filledWidth - 1);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      width,
+      height
+    }, style]
+  }, filledWidth > 0 ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.filled, {
+      width: filledWidth,
+      height,
+      backgroundColor: fillColor,
+      borderTopLeftRadius: borderRadius,
+      borderBottomLeftRadius: borderRadius,
+      borderTopRightRadius: hasGap ? 0 : borderRadius,
+      borderBottomRightRadius: hasGap ? 0 : borderRadius
+    }]
+  }) : null, showDivider ? /*#__PURE__*/React.createElement(View, {
+    style: styles.divider
+  }) : null, unfilledWidth > 0 ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.unfilled, {
+      width: unfilledWidth,
+      height,
+      backgroundColor: effectiveUnfilled,
+      borderTopRightRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      borderTopLeftRadius: filledWidth > 0 ? 0 : borderRadius,
+      borderBottomLeftRadius: filledWidth > 0 ? 0 : borderRadius
+    }]
+  }) : null);
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  filled: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  unfilled: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  divider: {
+    width: 1
+  }
+});

package/dist/components/carInfoHeader/singleRangeIndicator.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface SingleRangeIndicatorProps {
+    currentRange?: number | string;
+    totalRange?: number;
+    unit?: string;
+    color?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const SingleRangeIndicator: ({ currentRange, totalRange, unit, color, style, }: SingleRangeIndicatorProps) => React.JSX.Element;
+export {};