react-native-system-ui 1.0.0 → 1.0.1

package/dist/es/components/space/Space.js

@@ -34,13 +34,13 @@ export const Space = /*#__PURE__*/React.memo(props => {
   const {
     children,
     gap,
-    size: sizeProp,
-    direction: directionProp,
-    align: alignProp,
-    justify: justifyProp = 'start',
-    wrap: wrapProp,
-    block: blockProp,
-    fill: fillProp,
+    size: sizeP,
+    direction: dirP,
+    align: alignP,
+    justify: justP = 'start',
+    wrap: wrapP,
+    block: blockP,
+    fill: fillP,
     divider,
     tokensOverride,
     style,
@@ -48,64 +48,68 @@ export const Space = /*#__PURE__*/React.memo(props => {
     ...rest
   } = props;
   const tokens = useSpaceTokens(tokensOverride);
-  const isHorizontal = (directionProp ?? tokens.defaults.direction) === 'horizontal';
-  const wrap = wrapProp ?? tokens.defaults.wrap;
-  const gapInput = resolveGapInput(gap, sizeProp, tokens.defaults.gapPreset);
-  const [resolvedHorizontalGap, resolvedVerticalGap] = parseGap(gapInput, tokens.sizing.presets);
-  const horizontalGap = Math.max(0, resolvedHorizontalGap);
-  const verticalGap = Math.max(0, resolvedVerticalGap);
-  const shouldJustify = justifyProp === 'stretch';
-  const justifyForStyle = shouldJustify ? 'start' : justifyProp;
-  const shouldBlock = blockProp ?? !isHorizontal;
-  const resolvedAlign = alignProp ?? (isHorizontal ? 'center' : 'stretch');
-  const shouldFillOrMaxAlign = isHorizontal && ((fillProp ?? false) || shouldJustify);
-  const containerBoxStyle = {
-    flexDirection: isHorizontal ? 'row' : 'column',
-    flexWrap: isHorizontal && wrap ? 'wrap' : 'nowrap',
-    alignItems: alignMap[resolvedAlign],
-    justifyContent: justifyMap[justifyForStyle],
-    width: shouldBlock ? '100%' : undefined,
-    columnGap: isHorizontal ? horizontalGap : undefined,
-    rowGap: verticalGap
+  const hor = (dirP ?? tokens.defaults.direction) === 'horizontal';
+  const wrap = wrapP ?? tokens.defaults.wrap;
+  const gapIn = resolveGapInput(gap, sizeP, tokens.defaults.gapPreset);
+  const [hG, vG] = parseGap(gapIn, tokens.sizing.presets);
+  const hGap = Math.max(0, hG);
+  const vGap = Math.max(0, vG);
+  const justStretch = justP === 'stretch';
+  const justStyle = justStretch ? 'start' : justP;
+  const block = blockP ?? !hor;
+  const align = alignP ?? (hor ? 'center' : 'stretch');
+  const fillOrJust = hor && ((fillP ?? false) || justStretch);
+  const boxStyle = {
+    flexDirection: hor ? 'row' : 'column',
+    flexWrap: hor && wrap ? 'wrap' : 'nowrap',
+    alignItems: alignMap[align],
+    justifyContent: justifyMap[justStyle],
+    width: block ? '100%' : undefined,
+    columnGap: hor ? hGap : undefined,
+    rowGap: vGap
   };
-  const childrenArray = React.Children.toArray(children).filter(isRenderable);
+  const txtStyle = {
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.fontSize
+  };
+  const arr = React.Children.toArray(children).filter(isRenderable);
   const content = [];
-  for (let i = 0; i < childrenArray.length; i++) {
-    const child = childrenArray[i];
+  for (let i = 0; i < arr.length; i++) {
+    const child = arr[i];
     const key = /*#__PURE__*/React.isValidElement(child) && child.key != null ? child.key : i;
-    const flexStyle = shouldFillOrMaxAlign ? {
+    const flexS = fillOrJust ? {
       flexGrow: 1,
       flexBasis: 0,
       minWidth: 0
-    } : !isHorizontal && (fillProp || shouldBlock) ? {
+    } : !hor && (fillP || block) ? {
       width: '100%'
     } : undefined;
     content.push(/*#__PURE__*/React.createElement(View, {
       key: key,
-      style: flexStyle
-    }, renderTextOrNode(child)));
-    if (divider && i < childrenArray.length - 1) content.push(/*#__PURE__*/React.createElement(View, {
+      style: flexS
+    }, renderTextOrNode(child, txtStyle)));
+    if (divider && i < arr.length - 1) content.push(/*#__PURE__*/React.createElement(View, {
       key: `divider-${String(key)}`
-    }, renderTextOrNode(divider)));
+    }, renderTextOrNode(divider, txtStyle)));
   }
-  const isInteractive = isFunction(onClick);
+  const inter = isFunction(onClick);
   const {
     interactionProps,
     states
   } = useAriaPress({
-    disabled: !isInteractive,
+    disabled: !inter,
     onPress: onClick,
-    extraProps: isInteractive ? {
+    extraProps: inter ? {
       accessibilityRole: 'button'
     } : undefined
   });
-  if (isInteractive) return /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [tokens.layout.container, containerBoxStyle, style, states.pressed && {
+  if (inter) return /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: [tokens.layout.container, boxStyle, style, states.pressed && {
       opacity: 0.85
     }]
   }, interactionProps, rest), content);
   return /*#__PURE__*/React.createElement(View, _extends({
-    style: [tokens.layout.container, containerBoxStyle, style]
+    style: [tokens.layout.container, boxStyle, style]
   }, rest), content);
 });
 Space.displayName = 'Space';

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

@@ -1,7 +1,9 @@
 import { createComponentTokensHook } from '../../design-system';
 const createSpaceTokens = foundations => {
   const {
-    spacing
+    spacing,
+    fontSize,
+    typography
   } = foundations;
   return {
     defaults: {
@@ -12,6 +14,10 @@ const createSpaceTokens = foundations => {
     layout: {
       container: {}
     },
+    typography: {
+      fontFamily: typography.fontFamily,
+      fontSize: fontSize.sm
+    },
     sizing: {
       presets: {
         mini: spacing.xxs ?? spacing.xs ?? 4,

package/dist/es/components/stepper/Stepper.js

@@ -70,14 +70,14 @@ const StepperImpl = (props, ref) => {
   const decimalLen = parseDecimalLength(decimalLengthProp);
   const stepRaw = Number(step ?? 1);
   const stepSize = isFiniteNumber(stepRaw) && stepRaw > 0 ? stepRaw : 1;
-  const resolvedBtnSize = Math.max(0, parseNumber(buttonSize, tokens.defaults.buttonSize));
-  const resolvedInputWidth = Math.max(0, parseNumber(inputWidth, tokens.defaults.inputWidth));
+  const rBtnSize = Math.max(0, parseNumber(buttonSize, tokens.defaults.buttonSize));
+  const rInputW = Math.max(0, parseNumber(inputWidth, tokens.defaults.inputWidth));
   const defaultVal = useMemo(() => {
     const raw = props.defaultValue;
     if (raw === null) return null;
     const base = isFiniteNumber(raw) ? raw : 0;
-    const formatted = formatNumber(base, integer, decimalLen);
-    return autoFixed ? clampValue(formatted, min, max) : formatted;
+    const fmt = formatNumber(base, integer, decimalLen);
+    return autoFixed ? clampValue(fmt, min, max) : fmt;
   }, [autoFixed, decimalLen, integer, max, min, props.defaultValue]);
   const [value, triggerChange] = useControllableValue({
     ...props,
@@ -256,20 +256,20 @@ const StepperImpl = (props, ref) => {
   const isPlusDisabled = isDisabledAll || disablePlus || maxNumber != null && currentForCompare >= maxNumber;
   const radius = tokens.radii.default;
   const btnSizeStyle = useMemo(() => ({
-    width: resolvedBtnSize,
-    height: resolvedBtnSize
-  }), [resolvedBtnSize]);
+    width: rBtnSize,
+    height: rBtnSize
+  }), [rBtnSize]);
   const inputSizeStyle = useMemo(() => ({
-    width: resolvedInputWidth,
-    height: resolvedBtnSize,
+    width: rInputW,
+    height: rBtnSize,
     marginHorizontal: tokens.spacing.gap
-  }), [resolvedBtnSize, resolvedInputWidth, tokens.spacing.gap]);
+  }), [rBtnSize, rInputW, tokens.spacing.gap]);
   const getButtonStyle = useCallback((type, state) => {
     const isPlus = type === 'plus';
     const isDisabled = isPlus ? isPlusDisabled : isMinusDisabled;
     if (theme === 'round') {
       const base = [S.btn, btnSizeStyle, {
-        borderRadius: resolvedBtnSize / 2,
+        borderRadius: rBtnSize / 2,
         opacity: isDisabled ? tokens.opacity.roundDisabled : 1
       }];
       if (isPlus) {
@@ -301,7 +301,7 @@ const StepperImpl = (props, ref) => {
     return [S.btn, btnSizeStyle, cornerStyle, {
       backgroundColor: bgColor
     }, buttonStyle];
-  }, [btnSizeStyle, buttonStyle, isMinusDisabled, isPlusDisabled, radius, resolvedBtnSize, theme, layoutDir, tokens.colors.active, tokens.colors.background, tokens.colors.buttonDisabledBackground, tokens.colors.roundTheme, tokens.colors.roundThemeBackground, tokens.opacity.pressed, tokens.opacity.roundDisabled]);
+  }, [btnSizeStyle, buttonStyle, isMinusDisabled, isPlusDisabled, radius, rBtnSize, theme, layoutDir, tokens.colors.active, tokens.colors.background, tokens.colors.buttonDisabledBackground, tokens.colors.roundTheme, tokens.colors.roundThemeBackground, tokens.opacity.pressed, tokens.opacity.roundDisabled]);
   const getButtonTextStyle = useCallback(type => {
     const isPlus = type === 'plus';
     const isDisabled = isPlus ? isPlusDisabled : isMinusDisabled;
@@ -309,6 +309,7 @@ const StepperImpl = (props, ref) => {
       const color = isPlus ? tokens.colors.roundThemeText : tokens.colors.roundTheme;
       return [S.btnTxt, {
         color,
+        fontFamily: tokens.typography.fontFamily,
         fontSize: tokens.typography.fontSize,
         fontWeight: tokens.typography.fontWeight
       }];
@@ -316,10 +317,11 @@ const StepperImpl = (props, ref) => {
     ;
     return [S.btnTxt, {
       color: isDisabled ? tokens.colors.buttonDisabledIcon : tokens.colors.buttonIcon,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize,
       fontWeight: tokens.typography.fontWeight
     }];
-  }, [isMinusDisabled, isPlusDisabled, theme, tokens.colors.buttonDisabledIcon, tokens.colors.buttonIcon, tokens.colors.roundTheme, tokens.colors.roundThemeText, tokens.typography.fontSize, tokens.typography.fontWeight]);
+  }, [isMinusDisabled, isPlusDisabled, theme, tokens.colors.buttonDisabledIcon, tokens.colors.buttonIcon, tokens.colors.roundTheme, tokens.colors.roundThemeText, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight]);
   const handleChangeText = useCallback(text => {
     if (disableInput || disabled || changingRef.current) return;
     updateInputText(text);
@@ -391,10 +393,10 @@ const StepperImpl = (props, ref) => {
       style: createHairlineView({
         position: 'all',
         color: tokens.colors.roundTheme,
-        borderRadius: resolvedBtnSize / 2
+        borderRadius: rBtnSize / 2
       })
     }));
-  }, [getButtonTextStyle, getMinusBtnStyle, handleMinusPress, handleMinusPressIn, handlePressOut, isMinusDisabled, showMinus, theme, tokens.colors.roundTheme, resolvedBtnSize]);
+  }, [getButtonTextStyle, getMinusBtnStyle, handleMinusPress, handleMinusPressIn, handlePressOut, isMinusDisabled, showMinus, theme, tokens.colors.roundTheme, rBtnSize]);
   const renderPlusBtn = useCallback(() => {
     if (!showPlus) return null;
     return /*#__PURE__*/React.createElement(Pressable, {

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

@@ -36,6 +36,7 @@ const createStepperTokens = foundations => {
       default: radii.md
     },
     typography: {
+      fontFamily: typography.fontFamily,
       fontSize: fontSize.md,
       fontWeight: typography.weight.semiBold
     },

package/dist/es/components/swiper/Swiper.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, { useRef, useState, useCallback, useEffect, useImperativeHandle, forwardRef, memo, useMemo, Children, isValidElement } from 'react';
-import { FlatList, View, StyleSheet, useWindowDimensions, Platform } from 'react-native';
+import { FlatList, View, StyleSheet, Platform } from 'react-native';
 import { clamp } from '../../utils/number';
 import SwiperPagIndicator from './SwiperPagIndicator';
 import { useSwiperTokens } from './tokens';
@@ -38,10 +38,6 @@ const SwiperImpl = (props, ref) => {
   const momRef = useRef(false);
   const dragRef = useRef(null);
   const isWeb = Platform.OS === 'web';
-  const {
-    width: wW,
-    height: wH
-  } = useWindowDimensions();
   const [layout, setLayout] = useState({
     width: 0,
     height: 0
@@ -71,8 +67,8 @@ const SwiperImpl = (props, ref) => {
   const curRef = useRef(initReal);
   const [curIdx, setCurIdx] = useState(initReal);
   const ready = layout.width > 0 && layout.height > 0;
-  const mainSz = vertical ? layout.height || wH || 1 : layout.width || wW || 1;
-  const crossSz = vertical ? layout.width || wW || 1 : layout.height || wH || 1;
+  const mainSz = vertical ? layout.height : layout.width;
+  const crossSz = vertical ? layout.width : layout.height;
   const itemSz = useMemo(() => ({
     width: vertical ? crossSz : mainSz,
     height: vertical ? mainSz : crossSz
@@ -268,6 +264,13 @@ const SwiperImpl = (props, ref) => {
       }
     }
   } : undefined;
+  if (!ready) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [S.ctr, style],
+      onLayout: onLayout,
+      testID: testID
+    });
+  }
   return /*#__PURE__*/React.createElement(View, _extends({
     accessibilityRole: "adjustable",
     accessibilityLabel: `swiper, ${curIdx + 1} of ${count}`,
@@ -286,7 +289,7 @@ const SwiperImpl = (props, ref) => {
     keyExtractor: keyEx,
     horizontal: !vertical,
     getItemLayout: getLayout,
-    initialScrollIndex: ready ? initDisp : undefined,
+    initialScrollIndex: initDisp,
     scrollEnabled: touchable && count > 1,
     removeClippedSubviews: !shouldLoop || !loopAll,
     disableVirtualization: shouldLoop && loopAll,

package/dist/es/components/swiper/SwiperPagIndicator.js

@@ -36,8 +36,8 @@ const SwiperPagIndicator = /*#__PURE__*/memo(({
 }) => {
   const tokens = useSwiperPagIndicatorTokens(tokensOverride);
   const dots = [];
-  const ac = activeColor || tokens.colors.active,
-    ic = inactiveColor || tokens.colors.inactive;
+  const ac = activeColor || tokens.colors.active;
+  const ic = inactiveColor || tokens.colors.inactive;
   const posStyle = vertical ? [S.cv, {
     right: tokens.offset.verticalRight
   }] : [S.ch, {
@@ -58,6 +58,7 @@ const SwiperPagIndicator = /*#__PURE__*/memo(({
       }
     }));
   }
+  ;
   return /*#__PURE__*/React.createElement(View, _extends({
     style: [S.c, {
       zIndex: tokens.layer.zIndex,

package/dist/es/components/switch/Switch.js

@@ -5,33 +5,33 @@ import { parseNumber } from '../../utils';
 import { useSwitchTokens } from './tokens';
 const SwitchImpl = props => {
   const {
-    disabled: disabledProp,
-    size: sizeProp,
-    activeColor: activeColorProp,
-    inactiveColor: inactiveColorProp,
-    activeValue: activeValueProp,
-    inactiveValue: inactiveValueProp,
+    disabled: disP,
+    size: szP,
+    activeColor: actClrP,
+    inactiveColor: inactClrP,
+    activeValue: actValP,
+    inactiveValue: inactValP,
     tokensOverride,
     onClick,
     style
   } = props;
   const tokens = useSwitchTokens(tokensOverride);
-  const disabled = disabledProp ?? tokens.defaults.disabled;
-  const activeValue = activeValueProp ?? tokens.defaults.activeValue;
-  const inactiveValue = inactiveValueProp ?? tokens.defaults.inactiveValue;
+  const disabled = disP ?? tokens.defaults.disabled;
+  const activeValue = actValP ?? tokens.defaults.activeValue;
+  const inactiveValue = inactValP ?? tokens.defaults.inactiveValue;
   const scale = useMemo(() => {
     if (!tokens.defaults.size) return 1;
-    if (typeof sizeProp === 'string') {
-      const value = sizeProp.toLowerCase();
-      if (value === 'sm') return 0.75;
-      if (value === 'md') return 1;
-      if (value === 'lg') return 1.25;
-      const num = parseNumber(sizeProp, tokens.defaults.size);
-      return Math.max(0, num / tokens.defaults.size);
+    if (typeof szP === 'string') {
+      const v = szP.toLowerCase();
+      if (v === 'sm') return 0.75;
+      if (v === 'md') return 1;
+      if (v === 'lg') return 1.25;
+      return Math.max(0, parseNumber(szP, tokens.defaults.size) / tokens.defaults.size);
     }
-    if (typeof sizeProp === 'number') return Math.max(0, sizeProp / tokens.defaults.size);
+    ;
+    if (typeof szP === 'number') return Math.max(0, szP / tokens.defaults.size);
     return 1;
-  }, [sizeProp, tokens.defaults.size]);
+  }, [szP, tokens.defaults.size]);
   const [value, triggerChange] = useControllableValue(props, {
     valuePropName: 'checked',
     defaultValuePropName: 'defaultChecked',
@@ -39,8 +39,8 @@ const SwitchImpl = props => {
     trigger: 'onChange'
   });
   const isChecked = Object.is(value, activeValue);
-  const resolvedActiveColor = activeColorProp ?? tokens.colors.activeTrack;
-  const resolvedInactiveColor = inactiveColorProp ?? tokens.colors.inactiveTrack;
+  const actClr = actClrP ?? tokens.colors.activeTrack;
+  const inactClr = inactClrP ?? tokens.colors.inactiveTrack;
   const handleTouchEnd = useCallback(event => {
     if (disabled) return;
     onClick?.(event);
@@ -55,11 +55,11 @@ const SwitchImpl = props => {
     value: isChecked,
     disabled: disabled,
     trackColor: {
-      false: resolvedInactiveColor,
-      true: resolvedActiveColor
+      false: inactClr,
+      true: actClr
     },
     thumbColor: tokens.colors.handle,
-    ios_backgroundColor: resolvedInactiveColor,
+    ios_backgroundColor: inactClr,
     style: [{
       transform: [{
         scaleX: scale

package/dist/es/components/tabbar/Tabbar.js

@@ -12,15 +12,15 @@ const TabbarBaseImpl = props => {
     children,
     value,
     defaultValue,
-    fixed: fixedProp,
-    border: borderProp,
+    fixed: fixedP,
+    border: borderP,
     zIndex = 1,
     activeColor,
     inactiveColor,
-    background: backgroundProp,
-    placeholder: placeholderProp,
+    background: bgP,
+    placeholder: placeP,
     safeAreaInsetBottom,
-    iconSize: iconSizeProp,
+    iconSize: iconSzP,
     tokensOverride,
     style,
     contentStyle,
@@ -28,31 +28,31 @@ const TabbarBaseImpl = props => {
     ...rest
   } = props;
   const tokens = useTabbarTokens(tokensOverride);
-  const fixed = fixedProp ?? tokens.defaults.fixed;
-  const border = borderProp ?? tokens.defaults.border;
-  const background = backgroundProp ?? tokens.colors.background;
-  const placeholder = placeholderProp ?? tokens.defaults.placeholder;
-  const iconSize = iconSizeProp ?? tokens.icon.size;
-  const enableSafeAreaBottom = safeAreaInsetBottom ?? fixed;
+  const fixed = fixedP ?? tokens.defaults.fixed;
+  const border = borderP ?? tokens.defaults.border;
+  const background = bgP ?? tokens.colors.background;
+  const placeholder = placeP ?? tokens.defaults.placeholder;
+  const iconSize = iconSzP ?? tokens.icon.size;
+  const enableSafeBottom = safeAreaInsetBottom ?? fixed;
   const items = useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
-  const firstItemName = items.length ? items[0].props.name ?? 0 : undefined;
+  const firstName = items.length ? items[0].props.name ?? 0 : undefined;
   const [activeValue, setActiveValue] = useControllableValue(props, {
-    defaultValue: firstItemName,
+    defaultValue: firstName,
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
   const itemNames = items.map((item, i) => item.props.name ?? i);
-  const currentName = activeValue === undefined || activeValue === null ? firstItemName : itemNames.some(name => name === activeValue) ? activeValue : firstItemName;
+  const currentName = activeValue === undefined || activeValue === null ? firstName : itemNames.some(n => n === activeValue) ? activeValue : firstName;
   const [barHeight, setBarHeight] = useState(tokens.layout.height);
   const enablePlaceholder = fixed && placeholder;
   const handleLayout = useCallback(event => {
     if (!enablePlaceholder) return;
-    const newHeight = event.nativeEvent.layout.height;
-    setBarHeight(prev => Math.abs(prev - newHeight) < 0.5 ? prev : newHeight);
+    const h = event.nativeEvent.layout.height;
+    setBarHeight(prev => Math.abs(prev - h) < 0.5 ? prev : h);
   }, [enablePlaceholder]);
   const onSelect = useCallback((name, index) => setActiveValue(name, index), [setActiveValue]);
-  const contextValue = useMemo(() => ({
+  const ctxVal = useMemo(() => ({
     activeValue: currentName,
     activeColor: activeColor ?? tokens.colors.active,
     inactiveColor: inactiveColor ?? tokens.colors.inactive,
@@ -60,7 +60,7 @@ const TabbarBaseImpl = props => {
     fontWeight: tokens.typography.fontWeight,
     onSelect
   }), [activeColor, currentName, inactiveColor, onSelect, tokens.colors.active, tokens.colors.inactive, tokens.typography.fontSize, tokens.typography.fontWeight]);
-  const clonedChildren = useMemo(() => items.map((item, i) => {
+  const cloned = useMemo(() => items.map((item, i) => {
     const name = item.props.name ?? i;
     return /*#__PURE__*/React.cloneElement(item, {
       key: item.key ?? name,
@@ -71,11 +71,11 @@ const TabbarBaseImpl = props => {
     });
   }), [iconSize, items, tokensOverride]);
   if (items.length === 0) return null;
-  const ContainerWrapper = enableSafeAreaBottom ? SafeAreaView : View;
-  const placeholderStyle = {
+  const ContainerWrap = enableSafeBottom ? SafeAreaView : View;
+  const placeStyle = {
     height: barHeight
   };
-  const containerStyle = [S.c, fixed && [S.f, {
+  const ctrStyle = [S.c, fixed && [S.f, {
     zIndex
   }], style];
   const barStyle = [S.b, {
@@ -88,18 +88,18 @@ const TabbarBaseImpl = props => {
   }];
   return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder && /*#__PURE__*/React.createElement(View, {
     testID: "rv-tabbar-placeholder",
-    style: placeholderStyle
+    style: placeStyle
   }), /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: containerStyle,
+    style: ctrStyle,
     onLayout: handleLayout
-  }), /*#__PURE__*/React.createElement(ContainerWrapper, {
+  }), /*#__PURE__*/React.createElement(ContainerWrap, {
     style: barStyle
   }, /*#__PURE__*/React.createElement(TabbarContext.Provider, {
-    value: contextValue
+    value: ctxVal
   }, /*#__PURE__*/React.createElement(View, {
     style: rowStyle,
     accessibilityRole: "tablist"
-  }, clonedChildren)), border && /*#__PURE__*/React.createElement(View, {
+  }, cloned)), border && /*#__PURE__*/React.createElement(View, {
     style: createHairlineView({
       position: 'top',
       color: tokens.colors.border,