react-native-system-ui 1.0.0 → 1.0.1

package/dist/es/components/button/Button.js

@@ -14,66 +14,63 @@ const ROUND_CORNER_STYLE = {
   overflow: 'hidden'
 };
 const ButtonImpl = (props, forwardedRef) => {
-  const group = useContext(ButtonGroupContext);
+  const grp = useContext(ButtonGroupContext);
   const {
     text,
     children,
     icon,
-    iconPosition: iconPositionProp,
-    type: typeProp,
-    size: sizeProp,
+    iconPosition: iconPosP,
+    type: typeP,
+    size: sizeP,
     color,
-    textColor: textColorProp,
-    plain: plainProp,
-    block: blockProp,
-    round: roundProp,
-    square: squareProp,
-    hairline: hairlineProp,
-    shadow: shadowProp,
-    loading: loadingProp,
+    textColor: txtClrP,
+    plain: plainP,
+    block: blockP,
+    round: roundP,
+    square: sqP,
+    hairline: hlP,
+    shadow: shP,
+    loading: loadP,
     loadingText,
     loadingIndicator,
-    loadingSize: loadingSizeProp,
-    disabled: disabledProp,
-    allowFontScaling: allowFontScalingProp,
+    loadingSize: loadSzP,
+    disabled: disP,
+    allowFontScaling: fontScaleP,
     maxFontSizeMultiplier,
-    rippleColor: rippleColorProp,
+    rippleColor: rippleP,
     contentStyle,
     textStyle,
     tokensOverride,
     style,
-    ...pressableProps
+    ...pressProps
   } = props;
   const tokens = useButtonTokens(tokensOverride);
-  const type = typeProp ?? group?.type ?? tokens.defaults.type;
-  const size = sizeProp ?? group?.size ?? tokens.defaults.size;
-  const plain = plainProp ?? group?.plain ?? tokens.defaults.plain;
-  const block = blockProp ?? group?.block ?? tokens.defaults.block;
-  const round = roundProp ?? group?.round ?? tokens.defaults.round;
-  const square = squareProp ?? group?.square ?? tokens.defaults.square;
-  const hairline = hairlineProp ?? group?.hairline ?? tokens.defaults.hairline;
-  const iconPosition = iconPositionProp ?? group?.iconPosition ?? tokens.defaults.iconPosition;
-  const disabled = disabledProp ?? group?.disabled ?? tokens.defaults.disabled;
-  const loading = loadingProp ?? tokens.defaults.loading;
-  const loadingSize = loadingSizeProp ?? tokens.defaults.loadingSize;
-  const allowFontScaling = allowFontScalingProp ?? tokens.defaults.allowFontScaling;
-  const shadowValue = shadowProp ?? group?.shadow;
-  const isDisabled = disabled || loading;
+  const type = typeP ?? grp?.type ?? tokens.defaults.type;
+  const size = sizeP ?? grp?.size ?? tokens.defaults.size;
+  const plain = plainP ?? grp?.plain ?? tokens.defaults.plain;
+  const block = blockP ?? grp?.block ?? tokens.defaults.block;
+  const round = roundP ?? grp?.round ?? tokens.defaults.round;
+  const square = sqP ?? grp?.square ?? tokens.defaults.square;
+  const hairline = hlP ?? grp?.hairline ?? tokens.defaults.hairline;
+  const iconPos = iconPosP ?? grp?.iconPosition ?? tokens.defaults.iconPosition;
+  const disabled = disP ?? grp?.disabled ?? tokens.defaults.disabled;
+  const loading = loadP ?? tokens.defaults.loading;
+  const loadSz = loadSzP ?? tokens.defaults.loadingSize;
+  const allowFontScaling = fontScaleP ?? tokens.defaults.allowFontScaling;
+  const shVal = shP ?? grp?.shadow;
+  const isDis = disabled || loading;
   const tone = tokens.colors.tones[type] ?? tokens.colors.tones.default;
-  const sizeTokens = tokens.sizing.sizes[size];
-  const [backgroundColor, borderColor, textColor] = useMemo(() => {
-    if (plain) return [tokens.colors.backgroundPlain, color ?? tone.border, textColorProp ?? (type === 'default' && !color ? tone.text : color ?? tone.border)];
-    return [color ?? tone.background, color ?? tone.border, textColorProp ?? (color ? '#ffffff' : tone.text)];
-  }, [color, textColorProp, plain, type, tone, tokens.colors.backgroundPlain]);
+  const szTok = tokens.sizing.sizes[size];
+  const [bgClr, borderClr, txtClr] = useMemo(() => plain ? [tokens.colors.backgroundPlain, color ?? tone.border, txtClrP ?? (type === 'default' && !color ? tone.text : color ?? tone.border)] : [color ?? tone.background, color ?? tone.border, txtClrP ?? (color ? '#ffffff' : tone.text)], [color, txtClrP, plain, type, tone, tokens.colors.backgroundPlain]);
   const hasBorder = plain || type === 'default';
-  const useHairlineOverlay = hasBorder && hairline;
-  const borderWidth = hasBorder && !hairline ? tokens.borders.width : 0;
-  const borderRadius = square ? 0 : round ? sizeTokens.height / 2 : sizeTokens.radius;
-  const shadowStyle = useMemo(() => {
+  const useHl = hasBorder && hairline;
+  const borderW = hasBorder && !hairline ? tokens.borders.width : 0;
+  const radius = square ? 0 : round ? szTok.height / 2 : szTok.radius;
+  const shStyle = useMemo(() => {
     if (plain) return undefined;
-    const level = isFiniteNumber(shadowValue) ? clampShadowLevel(shadowValue) : shadowValue === true ? 2 : undefined;
-    return level ? createPlatformShadow(tokens.shadows[level]) : undefined;
-  }, [shadowValue, plain, tokens.shadows]);
+    const lvl = isFiniteNumber(shVal) ? clampShadowLevel(shVal) : shVal === true ? 2 : undefined;
+    return lvl ? createPlatformShadow(tokens.shadows[lvl]) : undefined;
+  }, [shVal, plain, tokens.shadows]);
   const {
     onPress,
     onPressIn,
@@ -82,105 +79,103 @@ const ButtonImpl = (props, forwardedRef) => {
     accessibilityHint,
     accessibilityRole,
     accessibilityState,
-    android_ripple: androidRippleProp,
+    android_ripple: andRippleP,
     ...viewProps
-  } = pressableProps;
+  } = pressProps;
   const {
     interactionProps,
     states
   } = useAriaPress({
-    disabled: isDisabled,
+    disabled: isDis,
     onPress: onPress || undefined,
     onPressStart: onPressIn || undefined,
     onPressEnd: onPressOut || undefined
   });
   const opacity = disabled ? tokens.states.disabledOpacity : loading ? tokens.states.loadingOpacity : states.pressed ? tokens.states.pressedOpacity : 1;
-  const computedTextStyle = useMemo(() => ({
+  const txtStyle = useMemo(() => ({
     fontFamily: tokens.typography.fontFamily,
     fontWeight: tokens.typography.fontWeight,
-    fontSize: sizeTokens.fontSize,
-    lineHeight: sizeTokens.fontSize * tokens.typography.lineHeightMultiplier,
-    color: textColor
-  }), [tokens.typography, sizeTokens.fontSize, textColor]);
+    fontSize: szTok.fontSize,
+    lineHeight: szTok.fontSize * tokens.typography.lineHeightMultiplier,
+    color: txtClr
+  }), [tokens.typography, szTok.fontSize, txtClr]);
   const iconGap = tokens.spacing.iconGap;
-  const renderIcon = () => {
+  const rIcon = () => {
     if (!icon) return null;
     try {
-      const element = isFunction(icon) ? icon(textColor, sizeTokens.iconSize) : icon;
-      const margin = iconPosition === 'left' ? {
+      const el = isFunction(icon) ? icon(txtClr, szTok.iconSize) : icon;
+      const margin = iconPos === 'left' ? {
         marginRight: iconGap
       } : {
         marginLeft: iconGap
       };
       return /*#__PURE__*/React.createElement(View, {
         style: [tokens.layout.iconWrapper, margin]
-      }, element);
+      }, el);
     } catch (err) {
       if (__DEV__) console.warn('[Button] Failed to render icon:', err);
       return null;
     }
   };
-  const renderLoading = () => /*#__PURE__*/React.createElement(View, {
+  const rLoad = () => /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.iconWrapper, {
       marginRight: iconGap
     }]
   }, loadingIndicator ?? /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: loadingSize,
-    color: textColor
+    size: loadSz,
+    color: txtClr
   }));
   const label = loading && loadingText !== undefined ? loadingText : text !== undefined ? text : children;
-  const renderLabel = () => {
+  const rLabel = () => {
     if (label == null) return null;
-    if (typeof label === 'string' || typeof label === 'number') {
-      return /*#__PURE__*/React.createElement(Text, {
-        style: [tokens.layout.text, computedTextStyle, textStyle],
-        numberOfLines: 1,
-        allowFontScaling: allowFontScaling,
-        maxFontSizeMultiplier: maxFontSizeMultiplier
-      }, isString(label) ? ensureSpace(label, true) : String(label));
-    }
+    if (typeof label === 'string' || typeof label === 'number') return /*#__PURE__*/React.createElement(Text, {
+      style: [tokens.layout.text, txtStyle, textStyle],
+      numberOfLines: 1,
+      allowFontScaling: allowFontScaling,
+      maxFontSizeMultiplier: maxFontSizeMultiplier
+    }, isString(label) ? ensureSpace(label, true) : String(label));
     return label;
   };
-  const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === 'string' || typeof label === 'number' ? String(label) : undefined);
-  const mergedAccessibilityState = useMemo(() => ({
+  const accLabel = accessibilityLabel ?? (typeof label === 'string' || typeof label === 'number' ? String(label) : undefined);
+  const accState = useMemo(() => ({
     ...accessibilityState,
-    disabled: isDisabled,
+    disabled: isDis,
     busy: loading
-  }), [accessibilityState, isDisabled, loading]);
-  const resolvedAndroidRipple = useMemo(() => {
-    if (Platform.OS !== 'android') return androidRippleProp;
-    if (androidRippleProp) return androidRippleProp;
-    const rippleColor = rippleColorProp ?? (plain ? textColor : type === 'default' && !color ? withAlpha(textColor, 0.15) : tokens.colors.ripple);
+  }), [accessibilityState, isDis, loading]);
+  const andRipple = useMemo(() => {
+    if (Platform.OS !== 'android') return andRippleP;
+    if (andRippleP) return andRippleP;
+    const rc = rippleP ?? (plain ? txtClr : type === 'default' && !color ? withAlpha(txtClr, 0.15) : tokens.colors.ripple);
     return {
-      color: rippleColor,
+      color: rc,
       borderless: false
     };
-  }, [androidRippleProp, rippleColorProp, plain, textColor, type, color, tokens.colors.ripple]);
+  }, [andRippleP, rippleP, plain, txtClr, type, color, tokens.colors.ripple]);
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     ref: forwardedRef,
-    disabled: isDisabled,
+    disabled: isDis,
     style: [tokens.layout.base, {
-      minHeight: sizeTokens.height,
-      paddingHorizontal: sizeTokens.paddingHorizontal,
-      borderRadius: borderRadius,
-      backgroundColor: backgroundColor,
-      borderColor: useHairlineOverlay ? 'transparent' : borderColor,
-      borderWidth: borderWidth,
-      opacity: opacity
-    }, Platform.OS === 'android' && borderRadius > 0 && !shadowStyle ? ROUND_CORNER_STYLE : null, block ? tokens.layout.block : null, shadowStyle, style],
-    android_ripple: resolvedAndroidRipple
+      minHeight: szTok.height,
+      paddingHorizontal: szTok.paddingHorizontal,
+      borderRadius: radius,
+      backgroundColor: bgClr,
+      borderColor: useHl ? 'transparent' : borderClr,
+      borderWidth: borderW,
+      opacity
+    }, Platform.OS === 'android' && radius > 0 && !shStyle ? ROUND_CORNER_STYLE : null, block ? tokens.layout.block : null, shStyle, style],
+    android_ripple: andRipple
   }, interactionProps, {
-    accessibilityState: mergedAccessibilityState,
+    accessibilityState: accState,
     accessibilityRole: accessibilityRole ?? 'button',
-    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityLabel: accLabel,
     accessibilityHint: accessibilityHint
   }, viewProps), /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.content, contentStyle]
-  }, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, renderLoading(), renderLabel()) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPosition === 'left' && renderIcon(), renderLabel(), icon && iconPosition === 'right' && renderIcon())), useHairlineOverlay && /*#__PURE__*/React.createElement(View, {
+  }, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, rLoad(), rLabel()) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPos === 'left' && rIcon(), rLabel(), icon && iconPos === 'right' && rIcon())), useHl && /*#__PURE__*/React.createElement(View, {
     style: createHairlineView({
       position: 'all',
-      color: borderColor,
-      borderRadius
+      color: borderClr,
+      borderRadius: radius
     })
   }));
 };

package/dist/es/components/button/ButtonGroup.js

@@ -20,7 +20,7 @@ export const ButtonGroup = /*#__PURE__*/React.memo(({
 }) => {
   const tokens = useButtonTokens();
   const gap = spacing ?? tokens.spacing.groupGap;
-  const groupValue = useMemo(() => ({
+  const grpVal = useMemo(() => ({
     type,
     size,
     plain,
@@ -32,15 +32,15 @@ export const ButtonGroup = /*#__PURE__*/React.memo(({
     iconPosition,
     hairline
   }), [block, disabled, hairline, iconPosition, plain, round, shadow, size, square, type]);
-  const containerStyle = useMemo(() => [{
+  const ctrStyle = useMemo(() => [{
     flexDirection: direction === 'horizontal' ? 'row' : 'column',
     alignItems: 'center',
     gap,
     width: block ? '100%' : undefined
   }, style], [block, direction, gap, style]);
   return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
-    value: groupValue
+    value: grpVal
   }, /*#__PURE__*/React.createElement(View, {
-    style: containerStyle
+    style: ctrStyle
   }, children));
 });

package/dist/es/components/calendar/Calendar.js

@@ -57,12 +57,12 @@ const CalendarImpl = props => {
     ...rest
   } = props;
   const locale = useLocale();
-  const calendarLocale = locale?.vanCalendar;
+  const calLoc = locale?.vanCalendar;
   const tokens = useCalendarTokens(tokensOverride);
-  const resolvedTitle = title ?? calendarLocale?.title ?? tokens.defaults.title;
+  const resolvedTitle = title ?? calLoc?.title ?? tokens.defaults.title;
   const resolvedShowSubtitle = showSubtitle ?? tokens.defaults.showSubtitle;
   const resolvedShowHeader = showHeader ?? tokens.defaults.showHeader;
-  const resolvedConfirmText = confirmText ?? calendarLocale?.confirm ?? tokens.defaults.confirmText;
+  const resolvedConfirmText = confirmText ?? calLoc?.confirm ?? tokens.defaults.confirmText;
   const resolvedWeekStartsOn = weekStartsOn ?? tokens.defaults.weekStartsOn;
   const resolvedAllowSameDay = allowSameDay ?? tokens.defaults.allowSameDay;
   const resolvedPoppable = poppable ?? tokens.defaults.poppable;
@@ -87,7 +87,7 @@ const CalendarImpl = props => {
     overlay: popupOverlay,
     ...popupRestProps
   } = popupProps ?? {};
-  const callbacksRef = useRef({
+  const cbRef = useRef({
     onConfirm,
     onOverRange,
     popupOnOpen,
@@ -99,36 +99,36 @@ const CalendarImpl = props => {
     popupOnClosed,
     onClosed
   });
-  callbacksRef.current.onConfirm = onConfirm;
-  callbacksRef.current.onOverRange = onOverRange;
-  callbacksRef.current.popupOnOpen = popupOnOpen;
-  callbacksRef.current.onOpen = onOpen;
-  callbacksRef.current.popupOnOpened = popupOnOpened;
-  callbacksRef.current.onOpened = onOpened;
-  callbacksRef.current.popupOnClose = popupOnClose;
-  callbacksRef.current.onClose = onClose;
-  callbacksRef.current.popupOnClosed = popupOnClosed;
-  callbacksRef.current.onClosed = onClosed;
+  cbRef.current.onConfirm = onConfirm;
+  cbRef.current.onOverRange = onOverRange;
+  cbRef.current.popupOnOpen = popupOnOpen;
+  cbRef.current.onOpen = onOpen;
+  cbRef.current.popupOnOpened = popupOnOpened;
+  cbRef.current.onOpened = onOpened;
+  cbRef.current.popupOnClose = popupOnClose;
+  cbRef.current.onClose = onClose;
+  cbRef.current.popupOnClosed = popupOnClosed;
+  cbRef.current.onClosed = onClosed;
   const closePopup = useCallback(() => {
     if (!resolvedPoppable) return;
     setPopupVisible(false);
   }, [resolvedPoppable, setPopupVisible]);
   const handlePopupOpen = useCallback(() => {
-    callbacksRef.current.popupOnOpen?.();
-    callbacksRef.current.onOpen?.();
+    cbRef.current.popupOnOpen?.();
+    cbRef.current.onOpen?.();
   }, []);
   const handlePopupOpened = useCallback(() => {
-    callbacksRef.current.popupOnOpened?.();
-    callbacksRef.current.onOpened?.();
+    cbRef.current.popupOnOpened?.();
+    cbRef.current.onOpened?.();
   }, []);
   const handlePopupClose = useCallback(() => {
     closePopup();
-    callbacksRef.current.popupOnClose?.();
-    callbacksRef.current.onClose?.();
+    cbRef.current.popupOnClose?.();
+    cbRef.current.onClose?.();
   }, [closePopup]);
   const handlePopupClosed = useCallback(() => {
-    callbacksRef.current.popupOnClosed?.();
-    callbacksRef.current.onClosed?.();
+    cbRef.current.popupOnClosed?.();
+    cbRef.current.onClosed?.();
   }, []);
   const overlayCloseOnPressResolved = overlayCloseOnPress ?? resolvedCloseOnClickOverlay;
   const overlayResolved = popupOverlay ?? true;
@@ -157,9 +157,9 @@ const CalendarImpl = props => {
   } : null), [monthDays]);
   const minDayTime = startOfDay(minDate).getTime();
   const maxDayTime = startOfDay(maxDate).getTime();
-  const resolvedWeekdays = weekdays ?? calendarLocale?.weekdays ?? tokens.defaults.weekdays;
+  const resolvedWeekdays = weekdays ?? calLoc?.weekdays ?? tokens.defaults.weekdays;
   const weekLabels = useMemo(() => reorderWeekdays(resolvedWeekdays, resolvedWeekStartsOn, tokens.defaults.weekdays), [resolvedWeekdays, tokens.defaults.weekdays, resolvedWeekStartsOn]);
-  const monthLabel = useMemo(() => formatMonthTitle ? formatMonthTitle(currentMonth) : calendarLocale?.monthTitle ? calendarLocale.monthTitle(currentMonth.getFullYear(), currentMonth.getMonth() + 1) : formatMonth(currentMonth), [currentMonth, formatMonthTitle, calendarLocale]);
+  const monthLabel = useMemo(() => formatMonthTitle ? formatMonthTitle(currentMonth) : calLoc?.monthTitle ? calLoc.monthTitle(currentMonth.getFullYear(), currentMonth.getMonth() + 1) : formatMonth(currentMonth), [currentMonth, formatMonthTitle, calLoc]);
   const minMonthStart = startOfMonth(minDate);
   const maxMonthStart = startOfMonth(maxDate);
   const canGoPrev = currentMonth.getTime() > minMonthStart.getTime();
@@ -174,12 +174,12 @@ const CalendarImpl = props => {
     if (resolvedType === 'range' && next.length < 2) return;
     if (resolvedType === 'multiple' && next.length === 0) return;
     if (!next.length) return;
-    callbacksRef.current.onConfirm?.(mapValue(next, resolvedType));
+    cbRef.current.onConfirm?.(mapValue(next, resolvedType));
     if (resolvedPoppable && resolvedCloseOnConfirm) closePopup();
   }, [resolvedShowConfirm, resolvedType, resolvedPoppable, resolvedCloseOnConfirm, closePopup]);
   const handleConfirm = useCallback(() => {
     if (resolvedShowConfirm && confirmDisabled) return;
-    callbacksRef.current.onConfirm?.(mapValue(value, resolvedType));
+    cbRef.current.onConfirm?.(mapValue(value, resolvedType));
     if (resolvedPoppable && resolvedCloseOnConfirm) closePopup();
   }, [resolvedShowConfirm, confirmDisabled, value, resolvedType, resolvedPoppable, resolvedCloseOnConfirm, closePopup]);
   const isSelectionAllowed = useCallback(next => {
@@ -187,12 +187,12 @@ const CalendarImpl = props => {
       const [start, end] = next;
       if (!resolvedAllowSameDay && isSameDay(start, end)) return false;
       if (maxRange && daysBetween(start, end) + 1 > maxRange) {
-        callbacksRef.current.onOverRange?.(maxRange);
+        cbRef.current.onOverRange?.(maxRange);
         return false;
       }
     }
     if (resolvedType === 'multiple' && maxRange && next.length > maxRange) {
-      callbacksRef.current.onOverRange?.(maxRange);
+      cbRef.current.onOverRange?.(maxRange);
       return false;
     }
     ;