react-native-system-ui 1.0.0 → 1.0.1

package/dist/cjs/components/cell/Cell.js

@@ -40,13 +40,13 @@ const CellImpl = (props, ref) => {
     extra,
     icon,
     rightIcon,
-    border: borderProp,
+    border: borderP,
     clickable,
     isLink,
     required,
     center,
-    size: sizeProp,
-    arrowDirection: arrowDirectionProp,
+    size: sizeP,
+    arrowDirection: arrP,
     tokensOverride,
     children,
     style,
@@ -61,56 +61,56 @@ const CellImpl = (props, ref) => {
   } = props;
   const tokens = (0, _tokens.useCellTokens)(tokensOverride);
   const dir = (0, _useDirection.useDirection)();
-  const group = (0, _react().useContext)(_CellContext.CellGroupContext);
-  const border = borderProp ?? tokens.defaults.border;
-  const size = sizeProp ?? tokens.defaults.size;
-  const arrowDirectionRaw = arrowDirectionProp ?? tokens.defaults.arrowDirection;
-  const arrowDirection = dir === 'rtl' ? arrowDirectionRaw === 'left' ? 'right' : arrowDirectionRaw === 'right' ? 'left' : arrowDirectionRaw : arrowDirectionRaw;
-  const lineHeight = tokens.typography.lineHeight;
-  const hasTitle = (0, _utils.isRenderable)(title),
-    hasValue = (0, _utils.isRenderable)(value),
-    hasLabel = (0, _utils.isRenderable)(label),
-    hasExtra = (0, _utils.isRenderable)(extra),
-    hasChildren = (0, _utils.isRenderable)(children),
-    hasIcon = (0, _utils.isRenderable)(icon),
-    hasRightIcon = (0, _utils.isRenderable)(rightIcon);
-  const onlyValue = !hasTitle && !hasChildren;
-  const showBorder = border && group.border && !group.isLast;
-  const showArrow = !!isLink || !!clickable;
-  const isInteractive = !disabled && (clickable || !!onPress || !!rest.onLongPress || !!rest.onPressIn || !!rest.onPressOut);
-  const isLargeSize = size === 'large';
-  const containerStyles = (0, _react().useMemo)(() => [size === 'large' ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style], [size, center, tokens.layout, style]);
-  const hairline = (0, _hooks.useHairline)({
-    show: showBorder,
-    containerStyle: containerStyles,
+  const grp = (0, _react().useContext)(_CellContext.CellGroupContext);
+  const border = borderP ?? tokens.defaults.border;
+  const size = sizeP ?? tokens.defaults.size;
+  const arrRaw = arrP ?? tokens.defaults.arrowDirection;
+  const arr = dir === 'rtl' ? arrRaw === 'left' ? 'right' : arrRaw === 'right' ? 'left' : arrRaw : arrRaw;
+  const lh = tokens.typography.lineHeight;
+  const hasT = (0, _utils.isRenderable)(title);
+  const hasV = (0, _utils.isRenderable)(value);
+  const hasL = (0, _utils.isRenderable)(label);
+  const hasE = (0, _utils.isRenderable)(extra);
+  const hasCh = (0, _utils.isRenderable)(children);
+  const hasI = (0, _utils.isRenderable)(icon);
+  const hasRI = (0, _utils.isRenderable)(rightIcon);
+  const onlyV = !hasT && !hasCh;
+  const showB = border && grp.border && !grp.isLast;
+  const showArr = !!isLink || !!clickable;
+  const inter = !disabled && (clickable || !!onPress || !!rest.onLongPress || !!rest.onPressIn || !!rest.onPressOut);
+  const large = size === 'large';
+  const ctrStyle = (0, _react().useMemo)(() => [large ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style], [size, center, tokens.layout, style]);
+  const hair = (0, _hooks.useHairline)({
+    show: showB,
+    containerStyle: ctrStyle,
     color: tokens.colors.border,
     width: tokens.borders.width,
     defaultPaddingHorizontal: tokens.sizing.paddingHorizontal
   });
-  const customContentStyle = (0, _react().useMemo)(() => [tokens.layout.customContent, {
+  const cntStyle = (0, _react().useMemo)(() => [tokens.layout.customContent, {
     justifyContent: center ? 'center' : 'flex-start'
   }, contentStyle], [center, tokens.layout.customContent, contentStyle]);
   const {
     interactionProps,
     states
   } = (0, _hooks.useAriaPress)({
-    disabled: !isInteractive,
+    disabled: !inter,
     onPress: onPress ?? undefined
   });
-  const Component = isInteractive ? _reactNative().Pressable : _reactNative().View;
-  const componentProps = isInteractive ? {
+  const Comp = inter ? _reactNative().Pressable : _reactNative().View;
+  const compProps = inter ? {
     android_ripple: android_ripple ?? {
       color: tokens.colors.ripple
     },
     accessibilityRole: 'button',
     ...interactionProps
   } : {};
-  return /*#__PURE__*/_react().default.createElement(Component, _extends({
+  return /*#__PURE__*/_react().default.createElement(Comp, _extends({
     ref: ref,
-    style: [containerStyles, isInteractive && states.pressed && {
+    style: [ctrStyle, inter && states.pressed && {
       opacity: tokens.defaults.activeOpacity
     }]
-  }, componentProps, rest), hasIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, compProps, rest), hasI && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.iconWrapper, {
       marginRight: tokens.spacing.iconGap,
       minHeight: tokens.sizing.iconSize,
@@ -118,60 +118,63 @@ const CellImpl = (props, ref) => {
     }]
   }, icon), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.body
-  }, (hasTitle || required) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, (hasT || required) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.titleRow, {
-      minHeight: lineHeight
+      minHeight: lh
     }]
   }, required && /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: {
       color: tokens.colors.required,
       marginRight: tokens.spacing.iconGap / 2
     }
-  }, "*"), hasTitle && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, "*"), hasT && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: titleStyle
   }, (0, _utils.renderTextOrNode)(title, [{
     color: tokens.colors.title,
-    fontSize: isLargeSize ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
+    fontSize: large ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
     fontWeight: tokens.typography.titleWeight
   }, titleStyle], {
     numberOfLines: 1
-  }))), hasLabel && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }))), hasL && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [{
       marginTop: tokens.spacing.labelMarginTop
     }, labelStyle]
   }, (0, _utils.renderTextOrNode)(label, [{
     color: tokens.colors.label,
-    fontSize: isLargeSize ? tokens.typography.largeLabelSize : tokens.typography.labelSize
+    fontSize: large ? tokens.typography.largeLabelSize : tokens.typography.labelSize
   }, labelStyle], {
     numberOfLines: 2
   }))), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.valueContainer, {
-      minHeight: lineHeight,
+      minHeight: lh,
       marginLeft: tokens.spacing.valueGap
-    }, !center && onlyValue && tokens.layout.valueOnlyContainer, center && tokens.layout.valueCenter]
-  }, hasValue ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: customContentStyle
-  }, (0, _utils.renderTextOrNode)(value, [tokens.layout.value, onlyValue && tokens.layout.valueOnly, {
+    }, !center && onlyV && tokens.layout.valueOnlyContainer, center && tokens.layout.valueCenter]
+  }, hasV ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: cntStyle
+  }, (0, _utils.renderTextOrNode)(value, [tokens.layout.value, onlyV && tokens.layout.valueOnly, {
     color: tokens.colors.value,
-    fontSize: isLargeSize ? tokens.typography.largeValueSize : tokens.typography.valueSize
+    fontSize: large ? tokens.typography.largeValueSize : tokens.typography.valueSize
   }, valueStyle], {
     numberOfLines: 1
-  })) : hasChildren && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: customContentStyle
-  }, children)), hasExtra && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  })) : hasCh && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: cntStyle
+  }, (0, _utils.isText)(children) ? (0, _utils.renderTextOrNode)(children, [tokens.layout.value, {
+    color: tokens.colors.value,
+    fontSize: large ? tokens.typography.largeValueSize : tokens.typography.valueSize
+  }, valueStyle]) : children)), hasE && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: {
       marginLeft: tokens.spacing.extraGap
     }
   }, (0, _utils.renderTextOrNode)(extra, {
     marginLeft: tokens.spacing.extraGap,
     color: tokens.colors.value,
-    fontSize: isLargeSize ? tokens.typography.largeValueSize : tokens.typography.valueSize
-  })), hasRightIcon ? rightIcon : showArrow && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.rightIconWrapper, tokens.layout.arrowTransforms[arrowDirection]]
+    fontSize: large ? tokens.typography.largeValueSize : tokens.typography.valueSize
+  })), hasRI ? rightIcon : showArr && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.rightIconWrapper, tokens.layout.arrowTransforms[arr]]
   }, /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
     size: tokens.sizing.arrowSize,
     fill: tokens.colors.arrow
-  })), hairline);
+  })), hair);
 };
 const CellForwardRef = /*#__PURE__*/_react().default.forwardRef(CellImpl);
 CellForwardRef.displayName = 'Cell';

package/dist/cjs/components/cell/CellGroup.js

@@ -39,30 +39,31 @@ const CellGroup = exports.CellGroup = /*#__PURE__*/_react().default.memo(({
   tokensOverride
 }) => {
   const tokens = (0, _tokens.useCellTokens)(tokensOverride);
-  const resolvedBorder = border ?? tokens.defaults.groupBorder;
+  const rBorder = border ?? tokens.defaults.groupBorder;
   const showInset = (inset ?? tokens.defaults.groupInset) || (card ?? tokens.defaults.groupCard);
-  const resolvedCard = card ?? tokens.defaults.groupCard;
-  const showOuterBorder = resolvedBorder && !showInset;
-  const childArray = (0, _react().useMemo)(() => _react().default.Children.toArray(children), [children]);
-  const lastCellIndex = (0, _react().useMemo)(() => {
-    for (let i = childArray.length - 1; i >= 0; i--) {
-      if (isCellElement(childArray[i])) return i;
+  const rCard = card ?? tokens.defaults.groupCard;
+  const showOuter = rBorder && !showInset;
+  const chArr = (0, _react().useMemo)(() => _react().default.Children.toArray(children), [children]);
+  const lastIdx = (0, _react().useMemo)(() => {
+    for (let i = chArr.length - 1; i >= 0; i--) {
+      if (isCellElement(chArr[i])) return i;
     }
+    ;
     return -1;
-  }, [childArray]);
-  const containerStyle = (0, _react().useMemo)(() => [{
-    marginBottom: resolvedCard ? 0 : tokens.sizing.groupMarginBottom
-  }, style], [resolvedCard, style, tokens.sizing.groupMarginBottom]);
-  const insetStyle = (0, _react().useMemo)(() => ({
+  }, [chArr]);
+  const ctrStyle = (0, _react().useMemo)(() => [{
+    marginBottom: rCard ? 0 : tokens.sizing.groupMarginBottom
+  }, style], [rCard, style, tokens.sizing.groupMarginBottom]);
+  const insStyle = (0, _react().useMemo)(() => ({
     overflow: 'hidden',
     borderRadius: tokens.radii.groupInset,
     marginHorizontal: tokens.sizing.groupInsetMarginHorizontal,
     backgroundColor: tokens.colors.background
   }), [tokens.colors.background, tokens.radii.groupInset, tokens.sizing.groupInsetMarginHorizontal]);
-  const bodyContainerStyle = [{
+  const bodyStyleArr = [{
     backgroundColor: tokens.colors.groupBodyBackground
-  }, showInset ? insetStyle : null, resolvedCard ? tokens.layout.groupCardShadow : null, bodyStyle];
-  const renderedTitle = (0, _react().useMemo)(() => title ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  }, showInset ? insStyle : null, rCard ? tokens.layout.groupCardShadow : null, bodyStyle];
+  const rTitle = (0, _react().useMemo)(() => title ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: {
       color: tokens.colors.groupTitle,
       fontSize: tokens.typography.groupTitleSize,
@@ -70,22 +71,22 @@ const CellGroup = exports.CellGroup = /*#__PURE__*/_react().default.memo(({
       paddingVertical: tokens.sizing.groupTitlePaddingVertical
     }
   }, title) : null, [title, tokens.colors.groupTitle, tokens.sizing.groupTitlePaddingHorizontal, tokens.sizing.groupTitlePaddingVertical, tokens.typography.groupTitleSize]);
-  const renderedChildren = (0, _react().useMemo)(() => childArray.map((child, index) => {
-    const key = /*#__PURE__*/_react().default.isValidElement(child) && child.key != null ? child.key : index;
+  const rCh = (0, _react().useMemo)(() => chArr.map((ch, i) => {
+    const key = /*#__PURE__*/_react().default.isValidElement(ch) && ch.key != null ? ch.key : i;
     return /*#__PURE__*/_react().default.createElement(_CellContext.CellGroupContext.Provider, {
       key: key,
       value: {
-        border: resolvedBorder,
+        border: rBorder,
         inset: showInset,
-        isLast: isCellElement(child) ? index === lastCellIndex : false
+        isLast: isCellElement(ch) ? i === lastIdx : false
       }
-    }, child);
-  }), [childArray, lastCellIndex, resolvedBorder, showInset]);
+    }, ch);
+  }), [chArr, lastIdx, rBorder, showInset]);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: containerStyle
-  }, renderedTitle, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: bodyContainerStyle
-  }, renderedChildren, showOuterBorder ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, ['top', 'bottom'].map(pos => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: ctrStyle
+  }, rTitle, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: bodyStyleArr
+  }, rCh, showOuter ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, ['top', 'bottom'].map(pos => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     key: pos,
     style: (0, _utils.createHairlineView)({
       position: pos,

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

@@ -101,6 +101,7 @@ const CheckboxImpl = (p, ref) => {
       g.registerValue(sv, rv, rd);
       return () => g.unregisterValue(sv);
     }
+    ;
     return undefined;
   }, [bg, g, sv, rv, rd]);
   const ral = accessibilityLabel ?? al ?? ((0, _validate.isText)(children) ? String(children) : undefined) ?? sv ?? 'checkbox';

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

@@ -79,15 +79,15 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
     'aria-label': accessibilityLabel,
     'aria-describedby': accessibilityHint
   }, state);
-  const groupPropsRecord = groupProps ?? {};
+  const gpr = groupProps ?? {};
   const {
     [' aria-disabled']: __ariaDisabledTypo,
-    ...restGroupProps
-  } = groupPropsRecord;
-  const resolvedGroupProps = (0, _react().useMemo)(() => ({
-    ...restGroupProps,
+    ...restGP
+  } = gpr;
+  const rGroupProps = (0, _react().useMemo)(() => ({
+    ...restGP,
     'aria-disabled': disabled
-  }), [disabled, restGroupProps]);
+  }), [disabled, restGP]);
   const registerValue = (0, _react().useCallback)((key, raw, itemDisabled) => {
     registryRef.current.set(key, {
       value: raw,
@@ -97,31 +97,32 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
   const unregisterValue = (0, _react().useCallback)(key => {
     registryRef.current.delete(key);
   }, []);
-  const childrenArray = (0, _react().useMemo)(() => _react().default.Children.toArray(children).filter(child => child != null && !(0, _utils.isBoolean)(child)), [children]);
+  const chArr = (0, _react().useMemo)(() => _react().default.Children.toArray(children).filter(ch => ch != null && !(0, _utils.isBoolean)(ch)), [children]);
   const toggleAll = (0, _react().useCallback)((options = {}) => {
     const opts = (0, _utils.isBoolean)(options) ? {
       checked: options
     } : options;
     const {
-      checked: targetChecked,
+      checked: tgt,
       skipDisabled
     } = opts;
-    const current = new Set(state.value ?? []);
+    const cur = new Set(state.value ?? []);
     const nextKeys = [];
     registryRef.current.forEach((meta, key) => {
-      const isDisabledItem = !!meta.disabled || disabled;
-      if (skipDisabled && isDisabledItem) {
-        if (current.has(key)) nextKeys.push(key);
+      const isDis = !!meta.disabled || disabled;
+      if (skipDisabled && isDis) {
+        if (cur.has(key)) nextKeys.push(key);
         return;
       }
-      if (targetChecked === true ? true : targetChecked === false ? false : !current.has(key)) nextKeys.push(key);
+      ;
+      if (tgt === true ? true : tgt === false ? false : !cur.has(key)) nextKeys.push(key);
     });
     state.setValue(nextKeys);
   }, [disabled, state]);
   (0, _react().useImperativeHandle)(ref, () => ({
     toggleAll
   }), [toggleAll]);
-  const contextValue = (0, _react().useMemo)(() => ({
+  const ctxVal = (0, _react().useMemo)(() => ({
     state,
     direction,
     shape,
@@ -133,15 +134,15 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react().default.forw
     registerValue,
     unregisterValue
   }), [checkedColor, direction, iconRender, iconSize, labelDisabled, max, registerValue, shape, state, unregisterValue]);
-  const containerStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
+  const ctrStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
     columnGap: direction === 'horizontal' ? gap : undefined,
     rowGap: gap
   }, style];
   return /*#__PURE__*/_react().default.createElement(CheckboxGroupContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, resolvedGroupProps, viewProps, {
+    value: ctxVal
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rGroupProps, viewProps, {
     accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
-    style: containerStyle
-  }), childrenArray));
+    style: ctrStyle
+  }), chArr));
 });

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

@@ -55,16 +55,16 @@ const AnimatedSvgCircle = _reactNative().Animated.createAnimatedComponent(_react
 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,
@@ -72,47 +72,47 @@ const CircleImpl = props => {
   } = 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;
-  const lineCap = lineCapProp ?? tokens.defaults.lineCap;
-  const animated = animatedProp ?? tokens.defaults.animated;
-  const resolvedSize = Math.max(0, (0, _utils.parseNumber)(size, tokens.defaults.size));
-  const resolvedStrokeWidth = Math.max(0, (0, _utils.parseNumber)(strokeWidth, tokens.defaults.strokeWidth));
-  const rate = (0, _utils.clamp)((0, _utils.parsePercentage)(rateProp ?? tokens.defaults.rate), 0, 100);
-  const resolvedColor = color ?? tokens.colors.color;
-  const resolvedLayerColor = layerColor ?? tokens.colors.layerColor;
+  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, (0, _utils.parseNumber)(size, tokens.defaults.size));
+  const rStroke = Math.max(0, (0, _utils.parseNumber)(strokeWidth, tokens.defaults.strokeWidth));
+  const rate = (0, _utils.clamp)((0, _utils.parsePercentage)(rateP ?? tokens.defaults.rate), 0, 100);
+  const rColor = color ?? tokens.colors.color;
+  const rLayerColor = layerColor ?? tokens.colors.layerColor;
   const baseStyle = (0, _react().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 = (0, _react().useMemo)(() => [tokens.layout.content, {
-    width: resolvedSize,
-    height: resolvedSize
-  }], [resolvedSize, tokens.layout.content]);
+    width: rSize,
+    height: rSize
+  }], [rSize, tokens.layout.content]);
   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, {
+    const arr = _react().default.Children.toArray(children);
+    if (arr.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(''));
+    }, arr.map(String).join(''));
     return children;
   }, [children, textStyle, tokens.colors.text, tokens.layout.text, tokens.typography.fontSize, tokens.typography.lineHeight]);
   if (_reactNative().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) {
@@ -126,11 +126,12 @@ const CircleImpl = props => {
         maskSize: '100% 100%'
       });
     }
+    ;
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: baseStyle
     }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: [tokens.layout.webRing, webRingStyle]
-    }), shouldRenderInner ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    }), showInner ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: [tokens.layout.webInner, {
         width: innerSize,
         height: innerSize,
@@ -142,47 +143,53 @@ const CircleImpl = props => {
     }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       pointerEvents: "box-none",
       style: contentStyle
-    }, content));
+    }, (0, _utils.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().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 = (0, _react().useRef)(new (_reactNative().Animated.Value)(dashOffsetTarget)).current;
+  const safeDur = Math.max(0, animationDuration ?? tokens.defaults.animationDuration);
+  const dashTarget = (clockwise ? 1 : -1) * circumference * (1 - rate / 100);
+  const dashOffset = (0, _react().useRef)(new (_reactNative().Animated.Value)(dashTarget)).current;
   (0, _react().useEffect)(() => {
-    if (!animated || safeDuration <= 0 || reducedMotion) {
-      dashOffset.setValue(dashOffsetTarget);
+    if (!animated || safeDur <= 0 || reducedMotion) {
+      dashOffset.setValue(dashTarget);
       return;
     }
-    const animation = _reactNative().Animated.timing(dashOffset, {
-      toValue: dashOffsetTarget,
-      duration: safeDuration,
+    ;
+    const anim = _reactNative().Animated.timing(dashOffset, {
+      toValue: dashTarget,
+      duration: safeDur,
       useNativeDriver: false,
       isInteraction: false
     });
-    animation.start();
-    return () => animation.stop();
-  }, [animated, dashOffset, dashOffsetTarget, reducedMotion, safeDuration]);
-  const center = resolvedSize / 2;
+    anim.start();
+    return () => anim.stop();
+  }, [animated, dashOffset, dashTarget, reducedMotion, safeDur]);
+  const center = rSize / 2;
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: baseStyle
   }, /*#__PURE__*/_react().default.createElement(_reactNativeSvg().default, {
-    width: resolvedSize,
-    height: resolvedSize
+    width: rSize,
+    height: rSize
   }, /*#__PURE__*/_react().default.createElement(_reactNativeSvg().Circle, {
     cx: center,
     cy: center,
     r: radius,
-    stroke: resolvedLayerColor,
-    strokeWidth: resolvedStrokeWidth,
+    stroke: rLayerColor,
+    strokeWidth: rStroke,
     fill: fill
   }), /*#__PURE__*/_react().default.createElement(AnimatedSvgCircle, {
     cx: center,
     cy: center,
     r: radius,
-    stroke: resolvedColor,
-    strokeWidth: resolvedStrokeWidth,
+    stroke: rColor,
+    strokeWidth: rStroke,
     fill: "transparent",
     strokeDasharray: `${circumference} ${circumference}`,
     strokeDashoffset: dashOffset,
@@ -193,7 +200,12 @@ const CircleImpl = props => {
   })), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     pointerEvents: "box-none",
     style: contentStyle
-  }, content));
+  }, (0, _utils.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.text, {
+      color: tokens.colors.text,
+      fontSize: tokens.typography.fontSize
+    }, textStyle]
+  }, content) : content));
 };
 const Circle = exports.Circle = /*#__PURE__*/_react().default.memo(CircleImpl);
 Circle.displayName = 'Circle';

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

@@ -43,41 +43,40 @@ 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 = (0, _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 normalizedDefaultValue = normalizeValue(defaultValue) ?? [];
+  const normVal = normalizeValue(value);
+  const normDef = 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 [internalValue, setInternalValue] = (0, _react().useState)(() => accordion ? normDef.slice(0, 1) : normDef);
+  const activeKeys = controlled ? accordion ? (normVal ?? []).slice(0, 1) : normVal ?? [] : internalValue;
   const toggle = (0, _react().useCallback)((name, expand) => {
     if (disabled) return;
     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;
+    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 contextValue = (0, _react().useMemo)(() => ({
+  const ctxVal = (0, _react().useMemo)(() => ({
     activeKeys,
     toggle,
     accordion,
@@ -89,18 +88,18 @@ const CollapseImpl = props => {
   }), [accordion, activeKeys, border, disabled, expandIcon, iconPosition, tokens, toggle]);
   const renderedChildren = (0, _react().useMemo)(() => {
     const items = _react().default.Children.toArray(children);
-    return items.map((child, index) => {
+    return items.map((child, i) => {
       if (! /*#__PURE__*/_react().default.isValidElement(child)) return child;
       if (!(0, _utils.isFunction)(child.type) && !(0, _utils.isObject)(child.type)) return child;
-      const name = child.props.name ?? String(index);
+      const name = child.props.name ?? String(i);
       return /*#__PURE__*/_react().default.cloneElement(child, {
         name,
-        index
+        index: i
       });
     });
   }, [children]);
   return /*#__PURE__*/_react().default.createElement(CollapseContext.Provider, {
-    value: contextValue
+    value: ctxVal
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     style: [tokens.layout.container, border && {
       backgroundColor: colors.background
@@ -237,9 +236,10 @@ const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotation]);
   const contentNode = (0, _react().useMemo)(() => (0, _utils.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]);
+  }), [children, colors.description, colors.disabled, mergedDisabled, typography.descriptionSize, typography.fontFamily]);
   const showInnerBorder = Boolean(panelBorder);
   const showTopBorder = index > 0 && showInnerBorder;
   const showHeaderBottomBorder = isActive && showInnerBorder;