react-native-system-ui 0.0.2 → 0.0.4

package/dist/es/{avatar → components/avatar}/Avatar.js

@@ -4,9 +4,6 @@ import { Pressable, Text, View } from 'react-native';
 import Image from '../image';
 import { isNumber } from '../../utils';
 import { useAvatarTokens } from './tokens';
-const transparentContainerStyle = {
-  backgroundColor: 'transparent'
-};
 export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     src,
@@ -33,6 +30,9 @@ export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const avatarWidth = width ?? baseSize;
   const avatarHeight = height ?? baseSize;
   const borderRadius = resolvedShape === 'circle' ? Math.min(avatarWidth, avatarHeight) / 2 : Math.max(tokens.radii.squareMin, Math.min(avatarWidth, avatarHeight) / tokens.radii.squareDivisor);
+  const transparentContainerStyle = {
+    backgroundColor: tokens.colors.transparent
+  };
   const fallbackText = text ? text.trim().slice(0, 2).toUpperCase() : undefined;
   const fallbackContent = icon ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.iconWrapper, {

package/dist/es/{avatar → components/avatar}/tokens.js

@@ -25,7 +25,8 @@ export const createAvatarTokens = foundations => ({
   },
   colors: {
     background: foundations.palette.default[100],
-    text: foundations.palette.default[800]
+    text: foundations.palette.default[800],
+    transparent: "transparent"
   },
   typography: {
     fontWeight: "600",

package/dist/es/{badge → components/badge}/Badge.js

@@ -1,5 +1,5 @@
 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, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { isNumericLike, isRenderable } from '../../utils';
 import { useBadgeTokens } from './tokens';
@@ -27,7 +27,7 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     visible,
     formattedContent
-  } = useMemo(() => {
+  } = (() => {
     const numericContent = isNumericLike(content) ? Number(content) : null;
     const shouldHide = numericContent === 0 && !resolvedShowZero;
     const isVisible = dot || isRenderable(content) && !shouldHide;
@@ -41,7 +41,7 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
       visible: true,
       formattedContent: finalContent
     };
-  }, [content, dot, max, resolvedShowZero]);
+  })();
   const [size, setSize] = useState({
     width: 0,
     height: 0
@@ -58,7 +58,7 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
       });
     }
   }, [size.width, size.height]);
-  const transformStyle = useMemo(() => {
+  const transformStyle = (() => {
     if (!hasChildren) return undefined;
     if (dot) {
       const half = tokens.sizing.dotSize / 2;
@@ -80,35 +80,30 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
         translateY: -size.height / 2
       }]
     };
-  }, [hasChildren, dot, tokens.sizing.dotSize, size.width, size.height]);
-  const baseBadgeStyle = useMemo(() => {
-    if (dot) {
-      return {
-        width: tokens.sizing.dotSize,
-        height: tokens.sizing.dotSize,
-        borderRadius: tokens.radii.dot,
-        backgroundColor: color ?? tokens.colors.dot
-      };
-    }
-    return {
-      minWidth: tokens.sizing.minWidth,
-      minHeight: tokens.sizing.height,
-      paddingHorizontal: tokens.sizing.paddingHorizontal,
-      paddingVertical: tokens.sizing.paddingVertical,
-      borderRadius: tokens.radii.badge,
-      borderWidth: tokens.borders.width,
-      borderColor: tokens.colors.border,
-      backgroundColor: color ?? tokens.colors.background
-    };
-  }, [dot, color, tokens]);
-  const mergedTextStyle = useMemo(() => [tokens.layout.text, {
+  })();
+  const baseBadgeStyle = dot ? {
+    width: tokens.sizing.dotSize,
+    height: tokens.sizing.dotSize,
+    borderRadius: tokens.radii.dot,
+    backgroundColor: color ?? tokens.colors.dot
+  } : {
+    minWidth: tokens.sizing.minWidth,
+    minHeight: tokens.sizing.height,
+    paddingHorizontal: tokens.sizing.paddingHorizontal,
+    paddingVertical: tokens.sizing.paddingVertical,
+    borderRadius: tokens.radii.badge,
+    borderWidth: tokens.borders.width,
+    borderColor: tokens.colors.border,
+    backgroundColor: color ?? tokens.colors.background
+  };
+  const mergedTextStyle = [tokens.layout.text, {
     color: textColor ?? tokens.colors.text,
     fontSize: tokens.typography.fontSize,
     lineHeight: tokens.typography.lineHeight,
     fontFamily: tokens.typography.fontFamily,
     fontWeight: tokens.typography.fontWeight
-  }, userTextStyle], [textColor, tokens, userTextStyle]);
-  const offsetStyle = useMemo(() => {
+  }, userTextStyle];
+  const offsetStyle = (() => {
     if (!offset) return undefined;
     const [x, y] = offset;
     return hasChildren ? {
@@ -118,17 +113,14 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
       marginLeft: x,
       marginTop: y
     };
-  }, [offset, hasChildren]);
-  const badgeElement = useMemo(() => {
-    if (!visible) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      pointerEvents: hasChildren ? 'none' : 'auto',
-      onLayout: hasChildren && !dot ? handleLayout : undefined,
-      style: [hasChildren ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, !hasChildren ? style : undefined]
-    }, !dot && (/*#__PURE__*/React.isValidElement(formattedContent) ? formattedContent : /*#__PURE__*/React.createElement(Text, {
-      style: mergedTextStyle
-    }, formattedContent)));
-  }, [visible, hasChildren, dot, handleLayout, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, style, formattedContent, mergedTextStyle]);
+  })();
+  const badgeElement = !visible ? null : /*#__PURE__*/React.createElement(View, {
+    pointerEvents: hasChildren ? 'none' : 'auto',
+    onLayout: hasChildren && !dot ? handleLayout : undefined,
+    style: [hasChildren ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, !hasChildren ? style : undefined]
+  }, !dot && (/*#__PURE__*/React.isValidElement(formattedContent) ? formattedContent : /*#__PURE__*/React.createElement(Text, {
+    style: mergedTextStyle
+  }, formattedContent)));
   if (hasChildren) {
     return onPress ? /*#__PURE__*/React.createElement(Pressable, _extends({
       ref: ref,

package/dist/es/{button → components/button}/Button.js

@@ -1,5 +1,5 @@
 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, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import { ActivityIndicator, Platform, Pressable, Text, View } from 'react-native';
 import { withAlpha, extractFirstColorToken } from '../../utils/color';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
@@ -148,14 +148,14 @@ export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
   const gradientWebStyle = gradientFillEnabled && supportsGradientFill && gradientString ? {
     backgroundImage: gradientString
   } : undefined;
-  const iconWrapperStyle = useMemo(() => iconPosition === 'left' ? {
+  const iconWrapperStyle = iconPosition === 'left' ? {
     marginRight: buttonTokens.spacing.iconGap
   } : {
     marginLeft: buttonTokens.spacing.iconGap
-  }, [buttonTokens.spacing.iconGap, iconPosition]);
-  const loadingIconWrapperStyle = useMemo(() => ({
+  };
+  const loadingIconWrapperStyle = {
     marginRight: buttonTokens.spacing.iconGap
-  }), [buttonTokens.spacing.iconGap]);
+  };
   const renderIcon = () => {
     if (!icon) return null;
     try {
@@ -185,14 +185,14 @@ export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     }, loadingIndicator ?? defaultIndicator);
   };
   const label = loading && loadingText !== undefined ? loadingText : text !== undefined ? text : children;
-  const sharedLabelTextStyle = useMemo(() => ({
+  const sharedLabelTextStyle = {
     fontFamily: buttonTokens.typography.fontFamily,
     fontWeight: buttonTokens.typography.fontWeight,
     fontSize: sizeTokens.fontSize,
     lineHeight: sizeTokens.fontSize * buttonTokens.typography.lineHeightMultiplier,
     color: resolvedTextColor,
     textTransform: uppercase ? 'uppercase' : undefined
-  }), [buttonTokens.typography.fontFamily, buttonTokens.typography.fontWeight, buttonTokens.typography.lineHeightMultiplier, resolvedTextColor, sizeTokens.fontSize, uppercase]);
+  };
   const renderText = () => {
     if (label === undefined || label === null) {
       return null;
@@ -234,7 +234,7 @@ export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     onPressEnd: onPressOut || undefined
   });
   const resolvedOpacity = disabled ? buttonTokens.states.disabledOpacity : loading ? buttonTokens.states.loadingOpacity : states.pressed ? buttonTokens.states.pressedOpacity : 1;
-  const containerStyle = useMemo(() => ({
+  const containerStyle = {
     minHeight: sizeTokens.height,
     paddingHorizontal: sizeTokens.paddingHorizontal,
     borderRadius,
@@ -242,21 +242,21 @@ export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     borderColor,
     borderWidth: resolvedBorderWidth,
     opacity: resolvedOpacity
-  }), [backgroundColor, borderColor, borderRadius, resolvedBorderWidth, resolvedOpacity, sizeTokens.height, sizeTokens.paddingHorizontal]);
-  const rippleClipStyle = useMemo(() => Platform.OS === 'android' && borderRadius > 0 && !shouldShowShadow ? {
+  };
+  const rippleClipStyle = Platform.OS === 'android' && borderRadius > 0 && !shouldShowShadow ? {
     overflow: 'hidden'
-  } : null, [borderRadius, shouldShowShadow]);
-  const baseContainerStyle = useMemo(() => [buttonTokens.layout.base, containerStyle, rippleClipStyle, block ? buttonTokens.layout.block : null, shadowStyle, gradientWebStyle, style], [block, buttonTokens.layout.base, buttonTokens.layout.block, containerStyle, gradientWebStyle, rippleClipStyle, shadowStyle, style]);
+  } : null;
+  const baseContainerStyle = [buttonTokens.layout.base, containerStyle, rippleClipStyle, block ? buttonTokens.layout.block : null, shadowStyle, gradientWebStyle, style];
   const mergedAccessibilityState = {
     ...accessibilityState,
     disabled: isDisabled,
     busy: loading
   };
   const defaultRippleColor = rippleColorProp ?? (derivedMode === 'text' || derivedMode === 'outlined' || legacyPlain ? resolvedTextColor : type === 'default' && !normalizedColor ? withAlpha(resolvedTextColor, 0.15) : buttonTokens.colors.ripple);
-  const resolvedAndroidRipple = useMemo(() => Platform.OS === 'android' ? androidRippleProp ?? {
+  const resolvedAndroidRipple = Platform.OS === 'android' ? androidRippleProp ?? {
     color: defaultRippleColor,
     borderless: false
-  } : androidRippleProp, [androidRippleProp, defaultRippleColor]);
+  } : androidRippleProp;
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     ref: forwardedRef,
     disabled: isDisabled,

package/dist/es/{button → components/button}/ButtonGroup.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Platform, View } from 'react-native';
 import { ButtonGroupContext } from './ButtonContext';
 import { useButtonTokens } from './tokens';
@@ -23,7 +23,7 @@ export const ButtonGroup = /*#__PURE__*/React.memo(({
   const gap = spacing ?? tokens.spacing.groupGap;
   const isHorizontal = direction === 'horizontal';
   const supportsGap = Platform.OS === 'web';
-  const groupValue = useMemo(() => ({
+  const groupValue = {
     type,
     size,
     plain,
@@ -35,8 +35,8 @@ export const ButtonGroup = /*#__PURE__*/React.memo(({
     iconPosition,
     hairline,
     mode
-  }), [type, size, plain, block, round, square, shadow, disabled, iconPosition, hairline, mode]);
-  const containerStyle = useMemo(() => {
+  };
+  const containerStyle = (() => {
     const base = {
       flexDirection: isHorizontal ? 'row' : 'column',
       alignItems: 'center'
@@ -52,8 +52,8 @@ export const ButtonGroup = /*#__PURE__*/React.memo(({
       }
     }
     return [base, style];
-  }, [isHorizontal, block, supportsGap, gap, style]);
-  const content = useMemo(() => {
+  })();
+  const content = (() => {
     if (supportsGap) {
       return children;
     }
@@ -72,7 +72,7 @@ export const ButtonGroup = /*#__PURE__*/React.memo(({
         key: element.key ?? index
       });
     });
-  }, [children, supportsGap, isHorizontal, gap]);
+  })();
   return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
     value: groupValue
   }, /*#__PURE__*/React.createElement(View, {

package/dist/es/{calendar → components/calendar}/Calendar.js

@@ -1,5 +1,5 @@
 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, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { isText } from '../../utils/validate';
@@ -115,7 +115,7 @@ const Calendar = props => {
     defaultValuePropName: 'defaultValue',
     trigger: 'onSelect'
   });
-  const value = useMemo(() => normalizeValue(toArrayValue(selectedValue), type), [selectedValue, type]);
+  const value = normalizeValue(toArrayValue(selectedValue), type);
   const [currentMonth, setCurrentMonth] = useState(() => {
     const initial = value.length ? value[0] : new Date();
     return clampMonth(initial, minDate, maxDate);
@@ -130,13 +130,13 @@ const Calendar = props => {
     const first = clampMonth(value[0], minDate, maxDate);
     setCurrentMonth(prev => isSameMonth(first, prev) ? prev : first);
   }, [firstValueTime, minDateTime, maxDateTime]);
-  const monthDays = useMemo(() => buildMonth(currentMonth, weekStartsOn), [currentMonth, weekStartsOn]);
-  const minDay = useMemo(() => startOfDay(minDate).getTime(), [minDate]);
-  const maxDay = useMemo(() => startOfDay(maxDate).getTime(), [maxDate]);
-  const weekLabels = useMemo(() => reorderWeekdays(weekdays ?? tokens.defaults.weekdays, weekStartsOn, tokens.defaults.weekdays), [tokens.defaults.weekdays, weekdays, weekStartsOn]);
-  const monthLabel = useMemo(() => formatMonthTitle ? formatMonthTitle(currentMonth) : formatMonth(currentMonth), [formatMonthTitle, currentMonth]);
-  const minMonthStart = useMemo(() => startOfMonth(minDate), [minDate]);
-  const maxMonthStart = useMemo(() => startOfMonth(maxDate), [maxDate]);
+  const monthDays = buildMonth(currentMonth, weekStartsOn);
+  const minDay = startOfDay(minDate).getTime();
+  const maxDay = startOfDay(maxDate).getTime();
+  const weekLabels = reorderWeekdays(weekdays ?? tokens.defaults.weekdays, weekStartsOn, tokens.defaults.weekdays);
+  const monthLabel = formatMonthTitle ? formatMonthTitle(currentMonth) : formatMonth(currentMonth);
+  const minMonthStart = startOfMonth(minDate);
+  const maxMonthStart = startOfMonth(maxDate);
   const canGoPrev = currentMonth.getTime() > minMonthStart.getTime();
   const canGoNext = currentMonth.getTime() < maxMonthStart.getTime();
   const goToMonth = useCallback(delta => {
@@ -225,8 +225,8 @@ const Calendar = props => {
       maybeAutoConfirm(normalizedNext);
     }
   }, [value, type, minDay, maxDay, allowSameDay, isSelectionAllowed, setSelectedValue, showConfirm, maybeAutoConfirm]);
-  const valueTimes = useMemo(() => value.map(item => startOfDay(item).getTime()), [value]);
-  const selectedSet = useMemo(() => new Set(valueTimes), [valueTimes]);
+  const valueTimes = value.map(item => startOfDay(item).getTime());
+  const selectedSet = new Set(valueTimes);
   const rangeBounds = type === 'range' && valueTimes.length === 2 ? [valueTimes[0], valueTimes[1]] : null;
   const renderDay = useCallback((day, index) => {
     if (!day) {

package/dist/es/{cascader → components/cascader}/Cascader.js

@@ -1,5 +1,5 @@
 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, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { FlatList, Pressable, Text, View, useWindowDimensions } from "react-native";
 import { Checked, Cross } from "react-native-system-icon";
 import { useControllableValue } from "../../hooks";
@@ -71,7 +71,7 @@ const Cascader = props => {
     defaultValue: [],
     trigger: "onChange"
   });
-  const keys = useMemo(() => getFieldKeys(fieldNames), [fieldNames]);
+  const keys = getFieldKeys(fieldNames);
   const cascaderValue = Array.isArray(value) ? value : [];
   const [panelValue, setPanelValue] = useState(cascaderValue);
   const resolvedCloseable = closeable ?? tokens.defaults.closeable;
@@ -96,7 +96,7 @@ const Cascader = props => {
     if (!width) return;
     setMeasuredWidth(prev => prev === width ? prev : width);
   }, []);
-  const confirmedRows = useMemo(() => resolveSelectedRows(options, keys, cascaderValue), [cascaderValue, keys, options]);
+  const confirmedRows = resolveSelectedRows(options, keys, cascaderValue);
   const [activeTab, setActiveTab] = useState(0);
   useEffect(() => {
     const currentLength = Array.isArray(currentValue) ? currentValue.length : 0;
@@ -310,11 +310,11 @@ const Cascader = props => {
   } = popupPropsOverrides ?? {};
   const resolvedOverlay = popupOverlay ?? true;
   const resolvedCloseOnOverlayPress = overrideCloseOnOverlayPress ?? closeOnClickOverlay;
-  const cascaderActions = useMemo(() => ({
+  const cascaderActions = {
     open: openPopup,
     close: () => closePopup(true),
     toggle: togglePopup
-  }), [closePopup, openPopup, togglePopup]);
+  };
   const enhanceTriggerNode = useCallback(node => {
     if (! /*#__PURE__*/React.isValidElement(node)) return node;
     const props = node.props;

package/dist/es/{cascader → components/cascader}/useCascaderExtend.js

@@ -1,6 +1,5 @@
-import { useMemo } from 'react';
 export const useCascaderExtend = (options = [], keys, value) => {
-  const depth = useMemo(() => {
+  const depth = (() => {
     let maxDepth = 1;
     const traverse = (opts, level) => {
       if (!opts || !opts.length) return;
@@ -15,8 +14,8 @@ export const useCascaderExtend = (options = [], keys, value) => {
     };
     traverse(options, 1);
     return maxDepth;
-  }, [keys.childrenKey, options]);
-  const tabs = useMemo(() => {
+  })();
+  const tabs = (() => {
     if (!value || !value.length) return [options];
     return value.reduce((acc, val, index) => {
       if (val == null) return acc;
@@ -27,11 +26,8 @@ export const useCascaderExtend = (options = [], keys, value) => {
       if (children) acc.push(children);
       return acc;
     }, [options]);
-  }, [keys.childrenKey, keys.valueKey, options, value]);
-  const items = useMemo(() => {
-    if (!value || !value.length) return [];
-    return value.map((val, index) => tabs[index]?.find(option => option[keys.valueKey] === val));
-  }, [keys.valueKey, tabs, value]);
+  })();
+  const items = !value || !value.length ? [] : value.map((val, index) => tabs[index]?.find(option => option[keys.valueKey] === val));
   return {
     tabs,
     items,

package/dist/es/{checkbox → components/checkbox}/CheckboxGroup.js

@@ -1,5 +1,5 @@
 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, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useCallback, useImperativeHandle, useRef } from 'react';
 import { Platform, View } from 'react-native';
 import { useCheckboxGroup } from '@react-native-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
@@ -105,7 +105,7 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     toggleAll
   }), [toggleAll]);
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     state,
     direction,
     shape,
@@ -116,7 +116,7 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
     max,
     registerValue,
     unregisterValue
-  }), [state, direction, shape, iconSize, iconRender, checkedColor, labelDisabled, max]);
+  };
   return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({}, resolvedGroupProps, viewProps, {

package/dist/es/{circle → components/circle}/Circle.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, 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';
@@ -65,7 +65,7 @@ export const Circle = props => {
     width: resolvedSize,
     height: resolvedSize
   }];
-  const content = useMemo(() => {
+  const content = (() => {
     if (children == null || children === false) return null;
     const childArray = React.Children.toArray(children);
     if (childArray.every(isText)) {
@@ -78,7 +78,7 @@ export const Circle = props => {
       }, childArray.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);

package/dist/es/{collapse → components/collapse}/Collapse.js

@@ -1,5 +1,5 @@
 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 React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Animated, Easing, Text, View } from 'react-native';
 import { Arrow } from 'react-native-system-icon';
 import { Cell } from '../cell';
@@ -72,7 +72,7 @@ export const Collapse = props => {
     }
     onChange?.(buildOutputValue(next, accordion));
   }, [accordion, activeKeys, controlled, disabled, onChange]);
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     activeKeys,
     toggle,
     accordion,
@@ -81,8 +81,8 @@ export const Collapse = props => {
     border,
     disabled,
     tokens
-  }), [accordion, activeKeys, border, disabled, expandIcon, iconPosition, tokens, toggle]);
-  const renderedChildren = useMemo(() => {
+  };
+  const renderedChildren = (() => {
     const items = React.Children.toArray(children);
     return items.map((child, index) => {
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
@@ -95,7 +95,7 @@ export const Collapse = props => {
         index
       });
     });
-  }, [children]);
+  })();
   return /*#__PURE__*/React.createElement(CollapseContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, _extends({
@@ -172,10 +172,10 @@ 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 = useMemo(() => animation.interpolate({
+  const rotate = animation.interpolate({
     inputRange: [0, 1],
     outputRange: ['90deg', '-90deg']
-  }), [animation]);
+  });
   useEffect(() => {
     Animated.timing(animation, {
       toValue: isActive ? 1 : 0,
@@ -226,16 +226,13 @@ const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
       fill: mergedDisabled ? colors.disabled : colors.arrow
     }));
   }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotate]);
-  const contentNode = useMemo(() => {
-    if (!isText(children)) return children;
-    return /*#__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 contentNode = !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);
   const showItemBorder = Boolean(panelBorder);
   const showTopBorder = index > 0 && showItemBorder;
   const showHeaderBottomBorder = isActive && showItemBorder;

package/dist/es/{config-provider → components/config-provider}/ConfigProvider.js

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import { ThemeProvider } from '../../design-system/ThemeProvider';
 import { PortalHost } from '../portal';
 import { LocaleContext } from './LocaleContext';
@@ -8,7 +8,7 @@ const ConfigProviderBase = ({
   children
 }) => {
   const parentLocale = useContext(LocaleContext);
-  const resolvedLocale = useMemo(() => locale ?? parentLocale, [locale, parentLocale]);
+  const resolvedLocale = locale ?? parentLocale;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     value: theme
   }, /*#__PURE__*/React.createElement(LocaleContext.Provider, {

package/dist/es/{datetime-picker → components/datetime-picker}/DatetimePicker.js

@@ -1,5 +1,5 @@
 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, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Picker from '../picker';
 import { Popup } from '../popup/Popup';
 import { useControllableValue } from '../../hooks';
@@ -111,7 +111,7 @@ const DatePicker = props => {
     originColumns,
     columns,
     pickerValue
-  } = useMemo(() => {
+  } = (() => {
     const getBoundary = (boundaryType, date) => {
       const boundaryDate = boundaryType === 'min' ? minDate : maxDate;
       const boundary = {
@@ -212,7 +212,7 @@ const DatePicker = props => {
       columns,
       pickerValue
     };
-  }, [columnsOrder, currentDate, filter, formatter, maxDate, minDate, type]);
+  })();
   const buildDateFromValues = useCallback(values => {
     const getValue = columnType => {
       const index = originColumns.findIndex(column => column.type === columnType);
@@ -292,7 +292,7 @@ const TimePicker = props => {
       setCurrentTime(next);
     }
   }, [formatTime, value]);
-  const [hourValues, minuteValues] = useMemo(() => {
+  const [hourValues, minuteValues] = (() => {
     let hours = times(maxHour - minHour + 1, index => padZero(minHour + index));
     let minutes = times(maxMinute - minMinute + 1, index => padZero(minMinute + index));
     if (filter) {
@@ -300,14 +300,14 @@ const TimePicker = props => {
       minutes = filter('minute', minutes);
     }
     return [hours, minutes];
-  }, [filter, maxHour, maxMinute, minHour, minMinute]);
-  const columns = useMemo(() => [hourValues.map(value => ({
+  })();
+  const columns = [hourValues.map(value => ({
     label: formatter('hour', value),
     value
   })), minuteValues.map(value => ({
     label: formatter('minute', value),
     value
-  }))], [formatter, hourValues, minuteValues]);
+  }))];
   const handleChange = useCallback(values => {
     const nextHour = values[0] ?? hourValues[0];
     const nextMinute = values[1] ?? minuteValues[0];
@@ -317,7 +317,7 @@ const TimePicker = props => {
     onChange?.(next);
   }, [hourValues, minuteValues, onChange]);
   const handleConfirm = useCallback(() => onConfirm?.(timeRef.current), [onConfirm]);
-  const pickerValue = useMemo(() => currentTime.split(':'), [currentTime]);
+  const pickerValue = currentTime.split(':');
   return /*#__PURE__*/React.createElement(Picker, _extends({}, pickerProps, {
     columns: columns,
     interactionMode: interactionMode,

package/dist/es/{dialog → components/dialog}/Dialog.js

@@ -110,8 +110,7 @@ export const Dialog = props => {
     if (!beforeClose) return true;
     try {
       return beforeClose(action);
-    } catch (error) {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+    } catch {
       return true;
     }
   };
@@ -125,8 +124,7 @@ export const Dialog = props => {
         if (resolved === false) return;
         if (actionSeqRef.current !== seq) return;
         handler?.();
-      }).catch(error => {
-        if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+      }).catch(() => {
         if (actionSeqRef.current !== seq) return;
         handler?.();
       });
@@ -287,7 +285,8 @@ export const Dialog = props => {
   }, rest), closeable ? /*#__PURE__*/React.createElement(Pressable, {
     style: [styles.closeIcon, {
       top: tokens.spacing.paddingTop / 2,
-      right: tokens.spacing.paddingHorizontal / 2
+      right: tokens.spacing.paddingHorizontal / 2,
+      padding: tokens.spacing.closeIconPadding
     }],
     hitSlop: {
       top: 8,
@@ -357,7 +356,6 @@ const styles = StyleSheet.create({
   },
   closeIcon: {
     position: 'absolute',
-    padding: 4,
     zIndex: 1
   }
 });

package/dist/es/{dialog → components/dialog}/tokens.js

@@ -34,7 +34,8 @@ export const createDialogTokens = foundations => {
       titleGap: spacing.sm,
       footerGap: spacing.md,
       roundFooterPadding: spacing.md,
-      roundFooterGap: spacing.sm
+      roundFooterGap: spacing.sm,
+      closeIconPadding: spacing.xs
     },
     sizes: {
       minWidth: 280,