react-native-system-ui 0.0.7 → 1.0.1

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,95 +18,95 @@ 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,
+    rate: rateP,
     size,
     strokeWidth,
     color,
     layerColor,
-    fill: fillProp,
-    clockwise: clockwiseProp,
-    startPosition: startPositionProp,
-    lineCap: lineCapProp,
-    animated: animatedProp,
+    fill: fillP,
+    clockwise: cwP,
+    startPosition: startP,
+    lineCap: capP,
+    animated: animP,
     animationDuration,
     style,
     textStyle,
     children
   } = props;
   const tokens = useCircleTokens(tokensOverride);
-  const fill = fillProp ?? tokens.defaults.fill;
-  const clockwise = clockwiseProp ?? tokens.defaults.clockwise;
-  const startPosition = startPositionProp ?? tokens.defaults.startPosition;
-  const lineCap = lineCapProp ?? tokens.defaults.lineCap;
-  const animated = animatedProp ?? tokens.defaults.animated;
-  const resolvedSize = Math.max(0, parseNumber(size, tokens.defaults.size));
-  const resolvedStrokeWidth = Math.max(0, parseNumber(strokeWidth, tokens.defaults.strokeWidth));
-  const rate = clamp(parsePercentage(rateProp ?? tokens.defaults.rate), 0, 100);
-  const resolvedColor = color ?? tokens.colors.color;
-  const resolvedLayerColor = layerColor ?? tokens.colors.layerColor;
+  const reducedMotion = useReducedMotion();
+  const fill = fillP ?? tokens.defaults.fill;
+  const clockwise = cwP ?? tokens.defaults.clockwise;
+  const startPosition = startP ?? tokens.defaults.startPosition;
+  const lineCap = capP ?? tokens.defaults.lineCap;
+  const animated = animP ?? tokens.defaults.animated;
+  const rSize = Math.max(0, parseNumber(size, tokens.defaults.size));
+  const rStroke = Math.max(0, parseNumber(strokeWidth, tokens.defaults.strokeWidth));
+  const rate = clamp(parsePercentage(rateP ?? tokens.defaults.rate), 0, 100);
+  const rColor = color ?? tokens.colors.color;
+  const rLayerColor = layerColor ?? tokens.colors.layerColor;
   const baseStyle = useMemo(() => [tokens.layout.root, {
-    width: resolvedSize,
-    height: resolvedSize
-  }, style], [resolvedSize, style, tokens.layout.root]);
+    width: rSize,
+    height: rSize
+  }, style], [rSize, style, tokens.layout.root]);
   const contentStyle = useMemo(() => [tokens.layout.content, {
-    width: resolvedSize,
-    height: resolvedSize
-  }], [resolvedSize, tokens.layout.content]);
+    width: rSize,
+    height: rSize
+  }], [rSize, tokens.layout.content]);
   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(''));
-    }
+    const arr = React.Children.toArray(children);
+    if (arr.every(isText)) return /*#__PURE__*/React.createElement(Text, {
+      style: [tokens.layout.text, {
+        color: tokens.colors.text,
+        fontSize: tokens.typography.fontSize,
+        lineHeight: tokens.typography.lineHeight
+      }, textStyle]
+    }, arr.map(String).join(''));
     return children;
   }, [children, textStyle, tokens.colors.text, tokens.layout.text, tokens.typography.fontSize, tokens.typography.lineHeight]);
   if (Platform.OS === 'web') {
-    const safeStroke = Math.min(resolvedStrokeWidth, resolvedSize / 2);
-    const innerSize = Math.max(0, resolvedSize - safeStroke * 2);
+    const safeStroke = Math.min(rStroke, rSize / 2);
+    const innerSize = Math.max(0, rSize - safeStroke * 2);
     const progressAngle = rate / 100 * 360;
     const rotation = WEB_ROTATION[startPosition];
-    const shouldRenderInner = innerSize > 0 && !isTransparentColor(fill);
-    const gradient = clockwise ? `conic-gradient(from ${rotation}deg, ${resolvedColor} 0deg ${progressAngle}deg, ${resolvedLayerColor} ${progressAngle}deg 360deg)` : `conic-gradient(from ${rotation}deg, ${resolvedLayerColor} 0deg ${360 - progressAngle}deg, ${resolvedColor} ${360 - progressAngle}deg 360deg)`;
+    const showInner = innerSize > 0 && !isTransparentColor(fill);
+    const gradient = clockwise ? `conic-gradient(from ${rotation}deg, ${rColor} 0deg ${progressAngle}deg, ${rLayerColor} ${progressAngle}deg 360deg)` : `conic-gradient(from ${rotation}deg, ${rLayerColor} 0deg ${360 - progressAngle}deg, ${rColor} ${360 - progressAngle}deg 360deg)`;
     const webRingStyle = {
-      width: resolvedSize,
-      height: resolvedSize,
-      borderRadius: resolvedSize / 2,
+      width: rSize,
+      height: rSize,
+      borderRadius: rSize / 2,
       backgroundImage: gradient
     };
     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
     }, /*#__PURE__*/React.createElement(View, {
       style: [tokens.layout.webRing, webRingStyle]
-    }), shouldRenderInner ? /*#__PURE__*/React.createElement(View, {
+    }), showInner ? /*#__PURE__*/React.createElement(View, {
       style: [tokens.layout.webInner, {
         width: innerSize,
         height: innerSize,
@@ -117,46 +118,53 @@ export const Circle = props => {
     }) : null, /*#__PURE__*/React.createElement(View, {
       pointerEvents: "box-none",
       style: contentStyle
-    }, content));
+    }, isText(content) ? /*#__PURE__*/React.createElement(Text, {
+      style: [tokens.layout.text, {
+        color: tokens.colors.text,
+        fontSize: tokens.typography.fontSize
+      }, textStyle]
+    }, content) : content));
   }
-  const radius = Math.max(0, (resolvedSize - resolvedStrokeWidth) / 2);
+  const radius = Math.max(0, (rSize - rStroke) / 2);
   const circumference = 2 * Math.PI * radius;
   const rotation = SVG_ROTATION[startPosition];
-  const safeDuration = Math.max(0, animationDuration ?? tokens.defaults.animationDuration);
-  const dashOffsetTarget = (clockwise ? 1 : -1) * circumference * (1 - rate / 100);
-  const dashOffset = useRef(new Animated.Value(dashOffsetTarget)).current;
+  const safeDur = Math.max(0, animationDuration ?? tokens.defaults.animationDuration);
+  const dashTarget = (clockwise ? 1 : -1) * circumference * (1 - rate / 100);
+  const dashOffset = useRef(new Animated.Value(dashTarget)).current;
   useEffect(() => {
-    if (!animated || safeDuration <= 0) {
-      dashOffset.setValue(dashOffsetTarget);
+    if (!animated || safeDur <= 0 || reducedMotion) {
+      dashOffset.setValue(dashTarget);
       return;
     }
-    const animation = Animated.timing(dashOffset, {
-      toValue: dashOffsetTarget,
-      duration: safeDuration,
-      useNativeDriver: false
+    ;
+    const anim = Animated.timing(dashOffset, {
+      toValue: dashTarget,
+      duration: safeDur,
+      useNativeDriver: false,
+      isInteraction: false
     });
-    animation.start();
-    return () => animation.stop();
-  }, [animated, dashOffset, dashOffsetTarget, safeDuration]);
-  const center = resolvedSize / 2;
+    anim.start();
+    return () => anim.stop();
+  }, [animated, dashOffset, dashTarget, reducedMotion, safeDur]);
+  const center = rSize / 2;
   return /*#__PURE__*/React.createElement(View, {
     style: baseStyle
   }, /*#__PURE__*/React.createElement(Svg, {
-    width: resolvedSize,
-    height: resolvedSize
+    width: rSize,
+    height: rSize
   }, /*#__PURE__*/React.createElement(SvgCircle, {
     cx: center,
     cy: center,
     r: radius,
-    stroke: resolvedLayerColor,
-    strokeWidth: resolvedStrokeWidth,
+    stroke: rLayerColor,
+    strokeWidth: rStroke,
     fill: fill
   }), /*#__PURE__*/React.createElement(AnimatedSvgCircle, {
     cx: center,
     cy: center,
     r: radius,
-    stroke: resolvedColor,
-    strokeWidth: resolvedStrokeWidth,
+    stroke: rColor,
+    strokeWidth: rStroke,
     fill: "transparent",
     strokeDasharray: `${circumference} ${circumference}`,
     strokeDashoffset: dashOffset,
@@ -167,7 +175,13 @@ export const Circle = props => {
   })), /*#__PURE__*/React.createElement(View, {
     pointerEvents: "box-none",
     style: contentStyle
-  }, content));
+  }, isText(content) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.text, {
+      color: tokens.colors.text,
+      fontSize: tokens.typography.fontSize
+    }, textStyle]
+  }, content) : 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,67 +13,45 @@ 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,
-    accordion: accordionProp,
+    accordion: accP,
     value,
     defaultValue,
     onChange,
-    border: borderProp,
-    iconPosition: iconPositionProp,
+    border: borderP,
+    iconPosition: iconPosP,
     expandIcon,
     disabled,
     style,
     ...rest
   } = props;
   const tokens = useCollapseTokens(tokensOverride);
-  const accordion = accordionProp ?? tokens.defaults.accordion;
-  const border = borderProp ?? tokens.defaults.border;
-  const iconPosition = iconPositionProp ?? tokens.defaults.iconPosition;
+  const accordion = accP ?? tokens.defaults.accordion;
+  const border = borderP ?? tokens.defaults.border;
+  const iconPosition = iconPosP ?? tokens.defaults.iconPosition;
   const {
     colors
   } = tokens;
   const controlled = value !== undefined;
-  const normalizedValue = normalizeValue(value);
-  const normalizedDefault = normalizeValue(defaultValue) ?? [];
-  const [internalValue, setInternalValue] = useState(() => accordion ? normalizedDefault.slice(0, 1) : normalizedDefault);
-  const activeKeys = controlled ? accordion ? (normalizedValue ?? []).slice(0, 1) : normalizedValue ?? [] : internalValue;
+  const normVal = normalizeValue(value);
+  const normDef = normalizeValue(defaultValue) ?? [];
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const [internalValue, setInternalValue] = useState(() => accordion ? normDef.slice(0, 1) : normDef);
+  const activeKeys = controlled ? accordion ? (normVal ?? []).slice(0, 1) : normVal ?? [] : 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 contextValue = useMemo(() => ({
+    const existing = activeKeys.includes(name);
+    const shouldExpand = expand ?? !existing;
+    const nextKeys = accordion ? shouldExpand ? [name] : existing ? [] : activeKeys : shouldExpand ? existing ? activeKeys : [...activeKeys, name] : existing ? activeKeys.filter(k => k !== name) : activeKeys;
+    if (!controlled) setInternalValue(nextKeys);
+    onChangeRef.current?.(buildOutputValue(nextKeys, accordion));
+  }, [accordion, activeKeys, controlled, disabled]);
+  const ctxVal = useMemo(() => ({
     activeKeys,
     toggle,
     accordion,
@@ -84,20 +63,18 @@ export const Collapse = props => {
   }), [accordion, activeKeys, border, disabled, expandIcon, iconPosition, tokens, toggle]);
   const renderedChildren = useMemo(() => {
     const items = React.Children.toArray(children);
-    return items.map((child, index) => {
+    return items.map((child, i) => {
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
-      if (!isFunction(child.type) && !isObject(child.type)) {
-        return child;
-      }
-      const name = child.props.name ?? String(index);
+      if (!isFunction(child.type) && !isObject(child.type)) return child;
+      const name = child.props.name ?? String(i);
       return /*#__PURE__*/React.cloneElement(child, {
         name,
-        index
+        index: i
       });
     });
   }, [children]);
   return /*#__PURE__*/React.createElement(CollapseContext.Provider, {
-    value: contextValue
+    value: ctxVal
   }, /*#__PURE__*/React.createElement(View, _extends({
     style: [tokens.layout.container, border && {
       backgroundColor: colors.background
@@ -112,7 +89,7 @@ export const Collapse = props => {
     color: colors.border
   }), renderedChildren));
 };
-const Hairline = ({
+const Hairline = /*#__PURE__*/React.memo(({
   tokens,
   position,
   color,
@@ -128,18 +105,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 +128,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 +140,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 +148,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 +186,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 +196,54 @@ 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,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.descriptionSize,
+    lineHeight: Math.round(typography.descriptionSize * 1.5)
+  }), [children, colors.description, colors.disabled, mergedDisabled, typography.descriptionSize, typography.fontFamily]);
+  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 ctxDir = useContext(DirectionContext);
+  const rLocale = locale ?? ctxLocale;
+  const rDir = direction ?? ctxDir ?? (I18nManager.isRTL ? 'rtl' : 'ltr');
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     value: theme
+  }, /*#__PURE__*/React.createElement(DirectionContext.Provider, {
+    value: rDir
   }, /*#__PURE__*/React.createElement(LocaleContext.Provider, {
-    value: resolvedLocale
-  }, /*#__PURE__*/React.createElement(PortalHost, null, children)));
+    value: rLocale
+  }, /*#__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';