react-native-system-ui 0.0.6 → 1.0.0

package/dist/es/components/checkbox/CheckboxGroup.js

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 import { useCheckboxGroup } from '@react-native-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
 import { useCheckboxTokens } from './tokens';
@@ -32,7 +32,6 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const disabled = disabledProp ?? tokens.defaults.groupDisabled;
   const direction = directionProp ?? tokens.defaults.groupDirection;
   const gap = Math.max(0, gapProp ?? tokens.spacing.groupGap);
-  const supportsGap = Platform.OS === 'web';
   const registryRef = useRef(new Map());
   const state = useCheckboxGroupState({
     value: value?.map(serialize),
@@ -68,18 +67,6 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
     registryRef.current.delete(key);
   }, []);
   const childrenArray = useMemo(() => React.Children.toArray(children).filter(child => child != null && !isBoolean(child)), [children]);
-  const childrenLength = childrenArray.length;
-  const itemStyleForIndex = useCallback(index => {
-    const isLast = index === childrenLength - 1;
-    if (direction === 'horizontal') {
-      return [tokens.layout.groupItem, !isLast && {
-        marginRight: gap
-      }];
-    }
-    return isLast ? tokens.layout.groupItem : [tokens.layout.groupItem, {
-      marginBottom: gap
-    }];
-  }, [childrenLength, direction, gap, tokens.layout.groupItem]);
   const toggleAll = useCallback((options = {}) => {
     const opts = isBoolean(options) ? {
       checked: options
@@ -96,10 +83,7 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (current.has(key)) nextKeys.push(key);
         return;
       }
-      const shouldSelect = targetChecked === true ? true : targetChecked === false ? false : !current.has(key);
-      if (shouldSelect) {
-        nextKeys.push(key);
-      }
+      if (targetChecked === true ? true : targetChecked === false ? false : !current.has(key)) nextKeys.push(key);
     });
     state.setValue(nextKeys);
   }, [disabled, state]);
@@ -118,30 +102,15 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
     registerValue,
     unregisterValue
   }), [checkedColor, direction, iconRender, iconSize, labelDisabled, max, registerValue, shape, state, unregisterValue]);
-  const containerStyle = useMemo(() => [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, supportsGap ? {
+  const containerStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
     columnGap: direction === 'horizontal' ? gap : undefined,
     rowGap: gap
-  } : null, style], [direction, gap, style, supportsGap, tokens.layout.groupHorizontal, tokens.layout.groupVertical]);
-  const renderedChildren = useMemo(() => supportsGap ? childrenArray : childrenArray.map((child, index) => {
-    const key = /*#__PURE__*/React.isValidElement(child) && child.key !== null ? child.key : index;
-    const itemStyle = itemStyleForIndex(index);
-    if (/*#__PURE__*/React.isValidElement(child) && child.type !== React.Fragment) {
-      const element = child;
-      return /*#__PURE__*/React.cloneElement(element, {
-        style: [element.props.style, itemStyle],
-        key
-      });
-    }
-    return /*#__PURE__*/React.createElement(View, {
-      key: key,
-      style: itemStyle
-    }, child);
-  }), [childrenArray, itemStyleForIndex, supportsGap]);
+  }, style];
   return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({}, resolvedGroupProps, viewProps, {
     accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
     style: containerStyle
-  }), renderedChildren));
+  }), childrenArray));
 });

package/dist/es/components/checkbox/tokens.js

@@ -1,5 +1,9 @@
 import { StyleSheet } from 'react-native';
 import { createComponentTokensHook } from '../../design-system';
+const centered = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
 const createCheckboxTokens = foundations => {
   const {
     palette,
@@ -8,7 +12,6 @@ const createCheckboxTokens = foundations => {
     fontSize,
     typography
   } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
     defaults: {
       shape: 'round',
@@ -24,14 +27,8 @@ const createCheckboxTokens = foundations => {
         flexDirection: 'row',
         alignItems: 'center'
       },
-      iconWrapper: {
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      icon: {
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
+      iconWrapper: centered,
+      icon: centered,
       checkmark: {
         textAlign: 'center',
         includeFontPadding: false
@@ -60,7 +57,7 @@ const createCheckboxTokens = foundations => {
       checkedBackground: palette.primary[500],
       disabledBorder: palette.default[300],
       disabledBackground: palette.default[100],
-      checkmark: onPrimary,
+      checkmark: palette.primary.foreground ?? '#ffffff',
       label: palette.default.foreground ?? '#111827',
       labelDisabled: palette.default[400]
     },

package/dist/es/components/circle/Circle.js

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, Platform, Text, View } from 'react-native';
 import Svg, { Circle as SvgCircle } from 'react-native-svg';
 import { isText, clamp, parseNumber, parsePercentage } from '../../utils';
+import { useReducedMotion } from '../../hooks/animation';
 import { useCircleTokens } from './tokens';
 const SVG_ROTATION = {
   top: -90,
@@ -17,18 +18,16 @@ const WEB_ROTATION = {
 };
 const isTransparentColor = value => {
   const normalized = value.trim().toLowerCase();
-  if (!normalized) return true;
-  if (normalized === 'transparent') return true;
+  if (!normalized || normalized === 'transparent') return true;
   const rgbaMatch = normalized.match(/^rgba\(([^)]*)\)$/);
   if (rgbaMatch) {
-    const parts = rgbaMatch[1].split(',').map(part => part.trim());
-    const alpha = Number(parts[3]);
+    const alpha = Number(rgbaMatch[1].split(',')[3]?.trim());
     return Number.isFinite(alpha) && alpha === 0;
   }
   return false;
 };
 const AnimatedSvgCircle = Animated.createAnimatedComponent(SvgCircle);
-export const Circle = props => {
+const CircleImpl = props => {
   const {
     tokensOverride,
     rate: rateProp,
@@ -47,6 +46,7 @@ export const Circle = props => {
     children
   } = props;
   const tokens = useCircleTokens(tokensOverride);
+  const reducedMotion = useReducedMotion();
   const fill = fillProp ?? tokens.defaults.fill;
   const clockwise = clockwiseProp ?? tokens.defaults.clockwise;
   const startPosition = startPositionProp ?? tokens.defaults.startPosition;
@@ -68,15 +68,13 @@ export const Circle = props => {
   const content = useMemo(() => {
     if (children == null || children === false) return null;
     const childArray = React.Children.toArray(children);
-    if (childArray.every(isText)) {
-      return /*#__PURE__*/React.createElement(Text, {
-        style: [tokens.layout.text, {
-          color: tokens.colors.text,
-          fontSize: tokens.typography.fontSize,
-          lineHeight: tokens.typography.lineHeight
-        }, textStyle]
-      }, childArray.map(String).join(''));
-    }
+    if (childArray.every(isText)) return /*#__PURE__*/React.createElement(Text, {
+      style: [tokens.layout.text, {
+        color: tokens.colors.text,
+        fontSize: tokens.typography.fontSize,
+        lineHeight: tokens.typography.lineHeight
+      }, textStyle]
+    }, childArray.map(String).join(''));
     return children;
   }, [children, textStyle, tokens.colors.text, tokens.layout.text, tokens.typography.fontSize, tokens.typography.lineHeight]);
   if (Platform.OS === 'web') {
@@ -94,12 +92,14 @@ export const Circle = props => {
     };
     if (safeStroke > 0) {
       const mask = `radial-gradient(farthest-side, transparent calc(100% - ${safeStroke}px), #000 calc(100% - ${safeStroke}px))`;
-      webRingStyle.WebkitMaskImage = mask;
-      webRingStyle.maskImage = mask;
-      webRingStyle.WebkitMaskRepeat = 'no-repeat';
-      webRingStyle.maskRepeat = 'no-repeat';
-      webRingStyle.WebkitMaskSize = '100% 100%';
-      webRingStyle.maskSize = '100% 100%';
+      Object.assign(webRingStyle, {
+        WebkitMaskImage: mask,
+        maskImage: mask,
+        WebkitMaskRepeat: 'no-repeat',
+        maskRepeat: 'no-repeat',
+        WebkitMaskSize: '100% 100%',
+        maskSize: '100% 100%'
+      });
     }
     return /*#__PURE__*/React.createElement(View, {
       style: baseStyle
@@ -126,18 +126,19 @@ export const Circle = props => {
   const dashOffsetTarget = (clockwise ? 1 : -1) * circumference * (1 - rate / 100);
   const dashOffset = useRef(new Animated.Value(dashOffsetTarget)).current;
   useEffect(() => {
-    if (!animated || safeDuration <= 0) {
+    if (!animated || safeDuration <= 0 || reducedMotion) {
       dashOffset.setValue(dashOffsetTarget);
       return;
     }
     const animation = Animated.timing(dashOffset, {
       toValue: dashOffsetTarget,
       duration: safeDuration,
-      useNativeDriver: false
+      useNativeDriver: false,
+      isInteraction: false
     });
     animation.start();
     return () => animation.stop();
-  }, [animated, dashOffset, dashOffsetTarget, safeDuration]);
+  }, [animated, dashOffset, dashOffsetTarget, reducedMotion, safeDuration]);
   const center = resolvedSize / 2;
   return /*#__PURE__*/React.createElement(View, {
     style: baseStyle
@@ -169,5 +170,6 @@ export const Circle = props => {
     style: contentStyle
   }, content));
 };
+export const Circle = /*#__PURE__*/React.memo(CircleImpl);
 Circle.displayName = 'Circle';
 export default Circle;

package/dist/es/components/collapse/Collapse.js

@@ -1,9 +1,10 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, Text, View } from 'react-native';
+import { Animated, Easing, View } from 'react-native';
 import { Arrow } from 'react-native-system-icon';
+import { useReducedMotion } from '../../hooks/animation';
 import { Cell } from '../cell';
-import { createHairlineView, isFunction, isNumber, isObject, isRenderable, isText } from '../../utils';
+import { createHairlineView, isFunction, isNumber, isObject, isRenderable, renderTextOrNode } from '../../utils';
 import { useCollapseTokens } from './tokens';
 const CollapseContext = /*#__PURE__*/React.createContext(null);
 const normalizeValue = value => {
@@ -12,13 +13,8 @@ const normalizeValue = value => {
   if (value === null) return [];
   return [String(value)];
 };
-const buildOutputValue = (keys, accordion) => {
-  if (accordion) {
-    return keys[0] ?? '';
-  }
-  return keys;
-};
-export const Collapse = props => {
+const buildOutputValue = (keys, accordion) => accordion ? keys[0] ?? '' : keys;
+const CollapseImpl = props => {
   const {
     tokensOverride,
     children,
@@ -42,36 +38,20 @@ export const Collapse = props => {
   } = tokens;
   const controlled = value !== undefined;
   const normalizedValue = normalizeValue(value);
-  const normalizedDefault = normalizeValue(defaultValue) ?? [];
-  const [internalValue, setInternalValue] = useState(() => accordion ? normalizedDefault.slice(0, 1) : normalizedDefault);
+  const normalizedDefaultValue = normalizeValue(defaultValue) ?? [];
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const [internalValue, setInternalValue] = useState(() => accordion ? normalizedDefaultValue.slice(0, 1) : normalizedDefaultValue);
   const activeKeys = controlled ? accordion ? (normalizedValue ?? []).slice(0, 1) : normalizedValue ?? [] : internalValue;
   const toggle = useCallback((name, expand) => {
     if (disabled) return;
-    const current = activeKeys;
-    const exists = current.includes(name);
-    let next;
-    if (accordion) {
-      if (expand === true) {
-        next = exists ? current : [name];
-      } else if (expand === false) {
-        next = exists ? [] : current;
-      } else {
-        next = exists ? [] : [name];
-      }
-    } else {
-      if (expand === true) {
-        next = exists ? current : [...current, name];
-      } else if (expand === false) {
-        next = exists ? current.filter(item => item !== name) : current;
-      } else {
-        next = exists ? current.filter(item => item !== name) : [...current, name];
-      }
-    }
-    if (!controlled) {
-      setInternalValue(next);
-    }
-    onChange?.(buildOutputValue(next, accordion));
-  }, [accordion, activeKeys, controlled, disabled, onChange]);
+    const existing = activeKeys.includes(name);
+    const shouldExpand = expand ?? !existing;
+    let nextKeys;
+    if (accordion) nextKeys = shouldExpand ? [name] : existing ? [] : activeKeys;else nextKeys = shouldExpand ? existing ? activeKeys : [...activeKeys, name] : existing ? activeKeys.filter(key => key !== name) : activeKeys;
+    if (!controlled) setInternalValue(nextKeys);
+    onChangeRef.current?.(buildOutputValue(nextKeys, accordion));
+  }, [accordion, activeKeys, controlled, disabled]);
   const contextValue = useMemo(() => ({
     activeKeys,
     toggle,
@@ -86,9 +66,7 @@ export const Collapse = props => {
     const items = React.Children.toArray(children);
     return items.map((child, index) => {
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
-      if (!isFunction(child.type) && !isObject(child.type)) {
-        return child;
-      }
+      if (!isFunction(child.type) && !isObject(child.type)) return child;
       const name = child.props.name ?? String(index);
       return /*#__PURE__*/React.cloneElement(child, {
         name,
@@ -112,7 +90,7 @@ export const Collapse = props => {
     color: colors.border
   }), renderedChildren));
 };
-const Hairline = ({
+const Hairline = /*#__PURE__*/React.memo(({
   tokens,
   position,
   color,
@@ -128,18 +106,17 @@ const Hairline = ({
     pointerEvents: "none",
     style: [tokens.layout.hairline, hairlineStyle]
   });
-};
+});
 const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   const context = useContext(CollapseContext);
-  if (!context) {
-    throw new Error('Collapse.Panel must be used within Collapse');
-  }
+  const reducedMotion = useReducedMotion();
+  if (!context) throw new Error('Collapse.Panel must be used within Collapse');
   const {
     activeKeys,
     toggle,
     iconPosition,
     expandIcon,
-    disabled: collapseDisabled,
+    disabled: contextDisabled,
     tokens
   } = context;
   const {
@@ -152,8 +129,8 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     extra,
     value,
     border: panelBorder = tokens.defaults.panelBorder,
-    isLink = tokens.defaults.panelIsLink,
-    size = tokens.defaults.panelSize,
+    isLink: isLinkProp = tokens.defaults.panelIsLink,
+    size: sizeProp = tokens.defaults.panelSize,
     disabled,
     readOnly,
     children,
@@ -164,7 +141,7 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const nameKey = String(name);
   const isActive = activeKeys.includes(nameKey);
-  const mergedDisabled = collapseDisabled || disabled;
+  const mergedDisabled = contextDisabled || disabled;
   const {
     colors,
     spacing,
@@ -172,20 +149,33 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = tokens;
   const [contentHeight, setContentHeight] = useState(0);
   const animation = useRef(new Animated.Value(isActive ? 1 : 0)).current;
-  const rotate = animation.interpolate({
+  const collapseAnimRef = useRef(null);
+  const rotation = animation.interpolate({
     inputRange: [0, 1],
     outputRange: ['90deg', '-90deg']
   });
   useEffect(() => {
-    Animated.timing(animation, {
+    collapseAnimRef.current?.stop();
+    const anim = Animated.timing(animation, {
       toValue: isActive ? 1 : 0,
-      duration: tokens.defaults.animationDuration,
+      duration: reducedMotion ? 0 : tokens.defaults.animationDuration,
       easing: Easing.ease,
-      useNativeDriver: false
-    }).start();
-  }, [animation, isActive, tokens.defaults.animationDuration]);
-  const resolvedLabel = description ?? label;
-  const resolvedValue = extra ?? value;
+      useNativeDriver: false,
+      isInteraction: false
+    });
+    collapseAnimRef.current = anim;
+    anim.start(({
+      finished
+    }) => {
+      if (finished) collapseAnimRef.current = null;
+    });
+    return () => {
+      collapseAnimRef.current?.stop();
+      collapseAnimRef.current = null;
+    };
+  }, [animation, isActive, reducedMotion, tokens.defaults.animationDuration]);
+  const renderedLabel = description ?? label;
+  const renderedValue = extra ?? value;
   const handleToggle = useCallback(() => {
     if (mergedDisabled || readOnly) return;
     toggle(nameKey);
@@ -197,11 +187,9 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }), [mergedDisabled, nameKey, readOnly, toggle]);
   const handleContentLayout = useCallback(event => {
-    const nextHeight = event.nativeEvent.layout.height;
-    if (isNumber(nextHeight) && Number.isFinite(nextHeight) && nextHeight !== contentHeight) {
-      setContentHeight(nextHeight);
-    }
-  }, [contentHeight]);
+    const height = event.nativeEvent.layout.height;
+    if (isNumber(height) && Number.isFinite(height)) setContentHeight(prev => prev === height ? prev : height);
+  }, []);
   const animatedStyle = useMemo(() => ({
     height: animation.interpolate({
       inputRange: [0, 1],
@@ -209,59 +197,53 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     })
   }), [animation, contentHeight]);
   const renderExpandIcon = useCallback(() => {
-    if (isFunction(expandIcon)) {
-      return expandIcon(isActive);
-    }
-    if (expandIcon) {
-      return expandIcon;
-    }
+    if (isFunction(expandIcon)) return expandIcon(isActive);
+    if (expandIcon) return expandIcon;
     return /*#__PURE__*/React.createElement(Animated.View, {
       style: {
         transform: [{
-          rotate
+          rotate: rotation
         }]
       }
     }, /*#__PURE__*/React.createElement(Arrow, {
       size: 16,
       fill: mergedDisabled ? colors.disabled : colors.arrow
     }));
-  }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotate]);
-  const contentNode = useMemo(() => !isText(children) ? children : /*#__PURE__*/React.createElement(Text, {
-    style: {
-      color: mergedDisabled ? colors.disabled : colors.description,
-      fontSize: typography.descriptionSize,
-      lineHeight: Math.round(typography.descriptionSize * 1.5)
-    }
-  }, children), [children, colors.description, colors.disabled, mergedDisabled, typography.descriptionSize]);
-  const showItemBorder = Boolean(panelBorder);
-  const showTopBorder = index > 0 && showItemBorder;
-  const showHeaderBottomBorder = isActive && showItemBorder;
-  const showExpandIcon = isLink && !readOnly;
+  }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotation]);
+  const contentNode = useMemo(() => renderTextOrNode(children, {
+    color: mergedDisabled ? colors.disabled : colors.description,
+    fontSize: typography.descriptionSize,
+    lineHeight: Math.round(typography.descriptionSize * 1.5)
+  }), [children, colors.description, colors.disabled, mergedDisabled, typography.descriptionSize]);
+  const showInnerBorder = Boolean(panelBorder);
+  const showTopBorder = index > 0 && showInnerBorder;
+  const showHeaderBottomBorder = isActive && showInnerBorder;
+  const showExpandIcon = isLinkProp && !readOnly;
   const headerIcon = iconPosition === 'left' ? showExpandIcon || isRenderable(icon) ? /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.headerIconRow
-  }, showExpandIcon ? /*#__PURE__*/React.createElement(View, {
+  }, showExpandIcon && /*#__PURE__*/React.createElement(View, {
     style: {
       marginRight: icon ? tokens.spacing.iconGap : 0
     }
-  }, renderExpandIcon()) : null, icon) : undefined : icon;
+  }, renderExpandIcon()), icon) : undefined : icon;
   const headerRightIcon = iconPosition === 'right' && showExpandIcon ? renderExpandIcon() : undefined;
   return /*#__PURE__*/React.createElement(View, _extends({
     style: [tokens.layout.panel, {
       backgroundColor: colors.background
     }, style]
-  }, rest), showTopBorder ? /*#__PURE__*/React.createElement(Hairline, {
+  }, rest), showTopBorder && /*#__PURE__*/React.createElement(Hairline, {
     tokens: tokens,
     position: "top",
     color: colors.border,
     inset: spacing.paddingHorizontal
-  }) : null, /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.headerWrapper
   }, /*#__PURE__*/React.createElement(Cell, {
     title: title,
-    label: resolvedLabel,
+    label: renderedLabel,
     icon: headerIcon,
-    value: resolvedValue,
-    size: size,
+    value: renderedValue,
+    size: sizeProp,
     border: false,
     disabled: mergedDisabled,
     onPress: readOnly ? undefined : handleToggle,
@@ -279,12 +261,12 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
       color: colors.disabled
     } : undefined,
     rightIcon: headerRightIcon
-  }), showHeaderBottomBorder ? /*#__PURE__*/React.createElement(Hairline, {
+  }), showHeaderBottomBorder && /*#__PURE__*/React.createElement(Hairline, {
     tokens: tokens,
     position: "bottom",
     color: colors.border,
     inset: spacing.paddingHorizontal
-  }) : null), /*#__PURE__*/React.createElement(Animated.View, {
+  })), /*#__PURE__*/React.createElement(Animated.View, {
     style: [tokens.layout.bodyWrapper, animatedStyle]
   }, /*#__PURE__*/React.createElement(View, {
     onLayout: handleContentLayout,
@@ -295,7 +277,10 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     }]
   }, contentNode)));
 });
-Collapse.Panel = CollapsePanel;
-Collapse.Item = CollapsePanel;
-Collapse.displayName = 'Collapse';
+CollapseImpl.Panel = CollapsePanel;
+CollapseImpl.Item = CollapsePanel;
+export const Collapse = Object.assign(/*#__PURE__*/React.memo(CollapseImpl), {
+  Panel: CollapsePanel,
+  Item: CollapsePanel
+});
 export default Collapse;

package/dist/es/components/config-provider/ConfigProvider.js

@@ -1,18 +1,25 @@
 import React, { useContext } from 'react';
+import { I18nManager } from 'react-native';
 import { ThemeProvider } from '../../design-system/ThemeProvider';
 import { PortalHost } from '../portal';
+import { DirectionContext } from './DirectionContext';
 import { LocaleContext } from './LocaleContext';
 const ConfigProviderBase = ({
   theme,
   locale,
+  direction,
   children
 }) => {
-  const parentLocale = useContext(LocaleContext);
-  const resolvedLocale = locale ?? parentLocale;
+  const ctxLocale = useContext(LocaleContext);
+  const ctxDirection = useContext(DirectionContext);
+  const resolvedLocale = locale ?? ctxLocale;
+  const resolvedDirection = direction ?? ctxDirection ?? (I18nManager.isRTL ? 'rtl' : 'ltr');
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     value: theme
+  }, /*#__PURE__*/React.createElement(DirectionContext.Provider, {
+    value: resolvedDirection
   }, /*#__PURE__*/React.createElement(LocaleContext.Provider, {
     value: resolvedLocale
-  }, /*#__PURE__*/React.createElement(PortalHost, null, children)));
+  }, /*#__PURE__*/React.createElement(PortalHost, null, children))));
 };
 export const ConfigProvider = /*#__PURE__*/React.memo(ConfigProviderBase);

package/dist/es/components/config-provider/DirectionContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const DirectionContext = /*#__PURE__*/React.createContext('ltr');

package/dist/es/components/config-provider/index.js

@@ -1,4 +1,5 @@
 export { ConfigProvider } from './ConfigProvider';
 export { useLocale } from './useLocale';
+export { useDirection } from './useDirection';
 export { zhCN } from './locale/zh-CN';
 export { enUS } from './locale/en-US';

package/dist/es/components/config-provider/locale/en-US.js

@@ -70,5 +70,37 @@ export const enUS = {
   },
   vanAddressList: {
     add: 'Add address'
+  },
+  vanForm: {
+    validationFailed: 'Validation failed'
+  },
+  vanPopup: {
+    closeOverlay: 'Close overlay',
+    closeHint: 'Double-tap to close'
+  },
+  vanToast: {
+    closeHint: 'Double-tap to dismiss'
+  },
+  vanShareSheet: {
+    cancel: 'Cancel'
+  },
+  vanNumberKeyboard: {
+    close: 'Done'
+  },
+  vanNoticeBar: {
+    close: 'Close'
+  },
+  vanNavBar: {
+    back: 'Back',
+    action: 'Actions'
+  },
+  vanImage: {
+    loading: 'Loading...',
+    error: 'Failed to load'
+  },
+  vanCascader: {
+    placeholder: 'Select',
+    loading: 'Loading...',
+    close: 'Close'
   }
 };

package/dist/es/components/config-provider/locale/zh-CN.js

@@ -70,5 +70,37 @@ export const zhCN = {
   },
   vanAddressList: {
     add: '新增地址'
+  },
+  vanForm: {
+    validationFailed: '表单验证未通过'
+  },
+  vanPopup: {
+    closeOverlay: '关闭弹层',
+    closeHint: '双击即可关闭弹层'
+  },
+  vanToast: {
+    closeHint: '双击关闭提示'
+  },
+  vanShareSheet: {
+    cancel: '取消'
+  },
+  vanNumberKeyboard: {
+    close: '完成'
+  },
+  vanNoticeBar: {
+    close: '关闭'
+  },
+  vanNavBar: {
+    back: '返回',
+    action: '操作'
+  },
+  vanImage: {
+    loading: '加载中…',
+    error: '加载失败'
+  },
+  vanCascader: {
+    placeholder: '请选择',
+    loading: '加载中...',
+    close: '关闭'
   }
 };

package/dist/es/components/config-provider/useDirection.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { DirectionContext } from './DirectionContext';
+export const useDirection = () => useContext(DirectionContext);