react-native-system-ui 0.0.6 → 1.0.0

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

@@ -63,7 +63,6 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
   const disabled = disabledProp ?? tokens.defaults.groupDisabled;
   const direction = directionProp ?? tokens.defaults.groupDirection;
   const gap = Math.max(0, gapProp ?? tokens.spacing.groupGap);
-  const supportsGap = _reactNative().Platform.OS === 'web';
   const registryRef = (0, _react().useRef)(new Map());
   const state = (0, _checkbox2().useCheckboxGroupState)({
     value: value?.map(serialize),
@@ -99,18 +98,6 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
     registryRef.current.delete(key);
   }, []);
   const childrenArray = (0, _react().useMemo)(() => _react().default.Children.toArray(children).filter(child => child != null && !(0, _utils.isBoolean)(child)), [children]);
-  const childrenLength = childrenArray.length;
-  const itemStyleForIndex = (0, _react().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 = (0, _react().useCallback)((options = {}) => {
     const opts = (0, _utils.isBoolean)(options) ? {
       checked: options
@@ -127,10 +114,7 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
         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]);
@@ -149,30 +133,15 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
     registerValue,
     unregisterValue
   }), [checkedColor, direction, iconRender, iconSize, labelDisabled, max, registerValue, shape, state, unregisterValue]);
-  const containerStyle = (0, _react().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 = (0, _react().useMemo)(() => supportsGap ? childrenArray : childrenArray.map((child, index) => {
-    const key = /*#__PURE__*/_react().default.isValidElement(child) && child.key !== null ? child.key : index;
-    const itemStyle = itemStyleForIndex(index);
-    if (/*#__PURE__*/_react().default.isValidElement(child) && child.type !== _react().default.Fragment) {
-      const element = child;
-      return /*#__PURE__*/_react().default.cloneElement(element, {
-        style: [element.props.style, itemStyle],
-        key
-      });
-    }
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      key: key,
-      style: itemStyle
-    }, child);
-  }), [childrenArray, itemStyleForIndex, supportsGap]);
+  }, style];
   return /*#__PURE__*/_react().default.createElement(CheckboxGroupContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, resolvedGroupProps, viewProps, {
     accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
     style: containerStyle
-  }), renderedChildren));
+  }), childrenArray));
 });

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

@@ -12,6 +12,10 @@ function _reactNative() {
   return data;
 }
 var _designSystem = require("../../design-system");
+const centered = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
 const createCheckboxTokens = foundations => {
   const {
     palette,
@@ -20,7 +24,6 @@ const createCheckboxTokens = foundations => {
     fontSize,
     typography
   } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
     defaults: {
       shape: 'round',
@@ -36,14 +39,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
@@ -72,7 +69,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/cjs/components/circle/Circle.js

@@ -26,6 +26,7 @@ function _reactNativeSvg() {
   return data;
 }
 var _utils = require("../../utils");
+var _animation = require("../../hooks/animation");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const SVG_ROTATION = {
@@ -42,18 +43,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 = _reactNative().Animated.createAnimatedComponent(_reactNativeSvg().Circle);
-const Circle = props => {
+const CircleImpl = props => {
   const {
     tokensOverride,
     rate: rateProp,
@@ -72,6 +71,7 @@ const Circle = props => {
     children
   } = props;
   const tokens = (0, _tokens.useCircleTokens)(tokensOverride);
+  const reducedMotion = (0, _animation.useReducedMotion)();
   const fill = fillProp ?? tokens.defaults.fill;
   const clockwise = clockwiseProp ?? tokens.defaults.clockwise;
   const startPosition = startPositionProp ?? tokens.defaults.startPosition;
@@ -93,15 +93,13 @@ const Circle = props => {
   const content = (0, _react().useMemo)(() => {
     if (children == null || children === false) return null;
     const childArray = _react().default.Children.toArray(children);
-    if (childArray.every(_utils.isText)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().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(_utils.isText)) return /*#__PURE__*/_react().default.createElement(_reactNative().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 (_reactNative().Platform.OS === 'web') {
@@ -119,12 +117,14 @@ 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().default.createElement(_reactNative().View, {
       style: baseStyle
@@ -151,18 +151,19 @@ const Circle = props => {
   const dashOffsetTarget = (clockwise ? 1 : -1) * circumference * (1 - rate / 100);
   const dashOffset = (0, _react().useRef)(new (_reactNative().Animated.Value)(dashOffsetTarget)).current;
   (0, _react().useEffect)(() => {
-    if (!animated || safeDuration <= 0) {
+    if (!animated || safeDuration <= 0 || reducedMotion) {
       dashOffset.setValue(dashOffsetTarget);
       return;
     }
     const animation = _reactNative().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().default.createElement(_reactNative().View, {
     style: baseStyle
@@ -194,6 +195,6 @@ const Circle = props => {
     style: contentStyle
   }, content));
 };
-exports.Circle = Circle;
+const Circle = exports.Circle = /*#__PURE__*/_react().default.memo(CircleImpl);
 Circle.displayName = 'Circle';
 var _default = exports.default = Circle;

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

@@ -25,6 +25,7 @@ function _reactNativeSystemIcon() {
   };
   return data;
 }
+var _animation = require("../../hooks/animation");
 var _cell = require("../cell");
 var _utils = require("../../utils");
 var _tokens = require("./tokens");
@@ -37,13 +38,8 @@ const normalizeValue = value => {
   if (value === null) return [];
   return [String(value)];
 };
-const buildOutputValue = (keys, accordion) => {
-  if (accordion) {
-    return keys[0] ?? '';
-  }
-  return keys;
-};
-const Collapse = props => {
+const buildOutputValue = (keys, accordion) => accordion ? keys[0] ?? '' : keys;
+const CollapseImpl = props => {
   const {
     tokensOverride,
     children,
@@ -67,36 +63,20 @@ const Collapse = props => {
   } = tokens;
   const controlled = value !== undefined;
   const normalizedValue = normalizeValue(value);
-  const normalizedDefault = normalizeValue(defaultValue) ?? [];
-  const [internalValue, setInternalValue] = (0, _react().useState)(() => accordion ? normalizedDefault.slice(0, 1) : normalizedDefault);
+  const normalizedDefaultValue = normalizeValue(defaultValue) ?? [];
+  const onChangeRef = (0, _react().useRef)(onChange);
+  onChangeRef.current = onChange;
+  const [internalValue, setInternalValue] = (0, _react().useState)(() => accordion ? normalizedDefaultValue.slice(0, 1) : normalizedDefaultValue);
   const activeKeys = controlled ? accordion ? (normalizedValue ?? []).slice(0, 1) : normalizedValue ?? [] : internalValue;
   const toggle = (0, _react().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 = (0, _react().useMemo)(() => ({
     activeKeys,
     toggle,
@@ -111,9 +91,7 @@ const Collapse = props => {
     const items = _react().default.Children.toArray(children);
     return items.map((child, index) => {
       if (! /*#__PURE__*/_react().default.isValidElement(child)) return child;
-      if (!(0, _utils.isFunction)(child.type) && !(0, _utils.isObject)(child.type)) {
-        return child;
-      }
+      if (!(0, _utils.isFunction)(child.type) && !(0, _utils.isObject)(child.type)) return child;
       const name = child.props.name ?? String(index);
       return /*#__PURE__*/_react().default.cloneElement(child, {
         name,
@@ -137,8 +115,7 @@ const Collapse = props => {
     color: colors.border
   }), renderedChildren));
 };
-exports.Collapse = Collapse;
-const Hairline = ({
+const Hairline = /*#__PURE__*/_react().default.memo(({
   tokens,
   position,
   color,
@@ -154,18 +131,17 @@ const Hairline = ({
     pointerEvents: "none",
     style: [tokens.layout.hairline, hairlineStyle]
   });
-};
+});
 const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const context = (0, _react().useContext)(CollapseContext);
-  if (!context) {
-    throw new Error('Collapse.Panel must be used within Collapse');
-  }
+  const reducedMotion = (0, _animation.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 {
@@ -178,8 +154,8 @@ const CollapsePanel = /*#__PURE__*/_react().default.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,
@@ -190,7 +166,7 @@ const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   } = props;
   const nameKey = String(name);
   const isActive = activeKeys.includes(nameKey);
-  const mergedDisabled = collapseDisabled || disabled;
+  const mergedDisabled = contextDisabled || disabled;
   const {
     colors,
     spacing,
@@ -198,20 +174,33 @@ const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   } = tokens;
   const [contentHeight, setContentHeight] = (0, _react().useState)(0);
   const animation = (0, _react().useRef)(new (_reactNative().Animated.Value)(isActive ? 1 : 0)).current;
-  const rotate = animation.interpolate({
+  const collapseAnimRef = (0, _react().useRef)(null);
+  const rotation = animation.interpolate({
     inputRange: [0, 1],
     outputRange: ['90deg', '-90deg']
   });
   (0, _react().useEffect)(() => {
-    _reactNative().Animated.timing(animation, {
+    collapseAnimRef.current?.stop();
+    const anim = _reactNative().Animated.timing(animation, {
       toValue: isActive ? 1 : 0,
-      duration: tokens.defaults.animationDuration,
+      duration: reducedMotion ? 0 : tokens.defaults.animationDuration,
       easing: _reactNative().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 = (0, _react().useCallback)(() => {
     if (mergedDisabled || readOnly) return;
     toggle(nameKey);
@@ -223,11 +212,9 @@ const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }
   }), [mergedDisabled, nameKey, readOnly, toggle]);
   const handleContentLayout = (0, _react().useCallback)(event => {
-    const nextHeight = event.nativeEvent.layout.height;
-    if ((0, _utils.isNumber)(nextHeight) && Number.isFinite(nextHeight) && nextHeight !== contentHeight) {
-      setContentHeight(nextHeight);
-    }
-  }, [contentHeight]);
+    const height = event.nativeEvent.layout.height;
+    if ((0, _utils.isNumber)(height) && Number.isFinite(height)) setContentHeight(prev => prev === height ? prev : height);
+  }, []);
   const animatedStyle = (0, _react().useMemo)(() => ({
     height: animation.interpolate({
       inputRange: [0, 1],
@@ -235,59 +222,53 @@ const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     })
   }), [animation, contentHeight]);
   const renderExpandIcon = (0, _react().useCallback)(() => {
-    if ((0, _utils.isFunction)(expandIcon)) {
-      return expandIcon(isActive);
-    }
-    if (expandIcon) {
-      return expandIcon;
-    }
+    if ((0, _utils.isFunction)(expandIcon)) return expandIcon(isActive);
+    if (expandIcon) return expandIcon;
     return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
       style: {
         transform: [{
-          rotate
+          rotate: rotation
         }]
       }
     }, /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
       size: 16,
       fill: mergedDisabled ? colors.disabled : colors.arrow
     }));
-  }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotate]);
-  const contentNode = (0, _react().useMemo)(() => !(0, _utils.isText)(children) ? children : /*#__PURE__*/_react().default.createElement(_reactNative().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 = (0, _react().useMemo)(() => (0, _utils.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 || (0, _utils.isRenderable)(icon) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.headerIconRow
-  }, showExpandIcon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, showExpandIcon && /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().View, _extends({
     style: [tokens.layout.panel, {
       backgroundColor: colors.background
     }, style]
-  }, rest), showTopBorder ? /*#__PURE__*/_react().default.createElement(Hairline, {
+  }, rest), showTopBorder && /*#__PURE__*/_react().default.createElement(Hairline, {
     tokens: tokens,
     position: "top",
     color: colors.border,
     inset: spacing.paddingHorizontal
-  }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.headerWrapper
   }, /*#__PURE__*/_react().default.createElement(_cell.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,
@@ -305,12 +286,12 @@ const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       color: colors.disabled
     } : undefined,
     rightIcon: headerRightIcon
-  }), showHeaderBottomBorder ? /*#__PURE__*/_react().default.createElement(Hairline, {
+  }), showHeaderBottomBorder && /*#__PURE__*/_react().default.createElement(Hairline, {
     tokens: tokens,
     position: "bottom",
     color: colors.border,
     inset: spacing.paddingHorizontal
-  }) : null), /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+  })), /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
     style: [tokens.layout.bodyWrapper, animatedStyle]
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     onLayout: handleContentLayout,
@@ -321,7 +302,10 @@ const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }]
   }, contentNode)));
 });
-Collapse.Panel = CollapsePanel;
-Collapse.Item = CollapsePanel;
-Collapse.displayName = 'Collapse';
+CollapseImpl.Panel = CollapsePanel;
+CollapseImpl.Item = CollapsePanel;
+const Collapse = exports.Collapse = Object.assign(/*#__PURE__*/_react().default.memo(CollapseImpl), {
+  Panel: CollapsePanel,
+  Item: CollapsePanel
+});
 var _default = exports.default = Collapse;

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

@@ -11,21 +11,34 @@ function _react() {
   };
   return data;
 }
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
 var _ThemeProvider = require("../../design-system/ThemeProvider");
 var _portal = require("../portal");
+var _DirectionContext = require("./DirectionContext");
 var _LocaleContext = require("./LocaleContext");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ConfigProviderBase = ({
   theme,
   locale,
+  direction,
   children
 }) => {
-  const parentLocale = (0, _react().useContext)(_LocaleContext.LocaleContext);
-  const resolvedLocale = locale ?? parentLocale;
+  const ctxLocale = (0, _react().useContext)(_LocaleContext.LocaleContext);
+  const ctxDirection = (0, _react().useContext)(_DirectionContext.DirectionContext);
+  const resolvedLocale = locale ?? ctxLocale;
+  const resolvedDirection = direction ?? ctxDirection ?? (_reactNative().I18nManager.isRTL ? 'rtl' : 'ltr');
   return /*#__PURE__*/_react().default.createElement(_ThemeProvider.ThemeProvider, {
     value: theme
+  }, /*#__PURE__*/_react().default.createElement(_DirectionContext.DirectionContext.Provider, {
+    value: resolvedDirection
   }, /*#__PURE__*/_react().default.createElement(_LocaleContext.LocaleContext.Provider, {
     value: resolvedLocale
-  }, /*#__PURE__*/_react().default.createElement(_portal.PortalHost, null, children)));
+  }, /*#__PURE__*/_react().default.createElement(_portal.PortalHost, null, children))));
 };
 const ConfigProvider = exports.ConfigProvider = /*#__PURE__*/_react().default.memo(ConfigProviderBase);

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DirectionContext = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DirectionContext = exports.DirectionContext = /*#__PURE__*/_react().default.createContext('ltr');

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

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "enUS", {
     return _enUS.enUS;
   }
 });
+Object.defineProperty(exports, "useDirection", {
+  enumerable: true,
+  get: function () {
+    return _useDirection.useDirection;
+  }
+});
 Object.defineProperty(exports, "useLocale", {
   enumerable: true,
   get: function () {
@@ -29,5 +35,6 @@ Object.defineProperty(exports, "zhCN", {
 });
 var _ConfigProvider = require("./ConfigProvider");
 var _useLocale = require("./useLocale");
+var _useDirection = require("./useDirection");
 var _zhCN = require("./locale/zh-CN");
 var _enUS = require("./locale/en-US");

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

@@ -76,5 +76,37 @@ const enUS = exports.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'
   }
 };