react-native-system-ui 0.0.3 → 0.0.5

package/dist/cjs/components/uploader/tokens.js

@@ -9,13 +9,39 @@ const createTokens = foundations => {
   const {
     palette,
     spacing,
-    radii
+    radii,
+    fontSize
   } = foundations;
   const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
     size: 80,
     gap: spacing.sm,
     radius: radii.md,
+    spacing: {
+      placeholderPaddingHorizontal: spacing.ssm,
+      placeholderNameMarginTop: spacing.ssm,
+      statusGap: spacing.xs,
+      uploadContentGap: spacing.xs,
+      deleteOffset: spacing.xs,
+      deletePaddingHorizontal: spacing.xs
+    },
+    sizing: {
+      deleteMinSize: spacing.xl
+    },
+    opacity: {
+      pressed: 0.85,
+      disabled: 0.65
+    },
+    radii: {
+      deleteButton: radii.lg
+    },
+    typography: {
+      placeholderIconSize: fontSize.xl,
+      placeholderNameSize: 11,
+      statusTextSize: fontSize.xs,
+      uploadIconSize: 24,
+      uploadTextSize: fontSize.xs
+    },
     colors: {
       background: palette.default[100],
       border: palette.default[200],

package/dist/cjs/components/water-mark/WaterMark.js

@@ -106,41 +106,41 @@ const WaterMark = props => {
       height: window.height
     });
   }, [fullPage, onLayoutCalculated, window.width, window.height]);
-  const zIndexStyle = (0, _react().useMemo)(() => ({
+  const zIndexStyle = {
     zIndex
-  }), [zIndex]);
-  const cellStyle = (0, _react().useMemo)(() => ({
+  };
+  const cellStyle = {
     width: cellWidth,
     height: cellHeight
-  }), [cellWidth, cellHeight]);
-  const oddRowStyle = (0, _react().useMemo)(() => ({
+  };
+  const oddRowStyle = {
     paddingLeft: cellWidth / 2
-  }), [cellWidth]);
-  const markStyle = (0, _react().useMemo)(() => ({
+  };
+  const markStyle = {
     width: markWidth,
     height: markHeight,
     transform: [{
       rotate: `${resolvedRotate}deg`
     }]
-  }), [markHeight, markWidth, resolvedRotate]);
-  const imageStyle = (0, _react().useMemo)(() => ({
+  };
+  const imageStyle = {
     width: markWidth,
     height: markHeight,
     opacity: resolvedOpacity
-  }), [markHeight, markWidth, resolvedOpacity]);
-  const textBaseStyle = (0, _react().useMemo)(() => ({
+  };
+  const textBaseStyle = {
     fontSize: normalizedFontSize,
     color: resolvedColor,
     opacity: resolvedOpacity,
     fontFamily: font?.family,
     fontWeight: font?.weight
-  }), [font?.family, font?.weight, normalizedFontSize, resolvedColor, resolvedOpacity]);
-  const rowIndexes = (0, _react().useMemo)(() => Array.from({
+  };
+  const rowIndexes = Array.from({
     length: rows
-  }, (_, i) => i), [rows]);
-  const colIndexes = (0, _react().useMemo)(() => Array.from({
+  }, (_, i) => i);
+  const colIndexes = Array.from({
     length: cols
-  }, (_, i) => i), [cols]);
+  }, (_, i) => i);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     pointerEvents: "none",
     style: [fullPage ? tokens.layout.absoluteFill : null, zIndexStyle, style],

package/dist/cjs/hooks/usePresenceAnimation.js

@@ -22,7 +22,8 @@ var _platform = require("../platform");
 const usePresenceAnimation = (visible, {
   duration = 180,
   easing = _reactNative().Easing.out(_reactNative().Easing.cubic),
-  appear = false
+  appear = false,
+  canAnimate = true
 } = {}) => {
   const [mounted, setMounted] = (0, _react().useState)(visible);
   const animated = (0, _react().useRef)(new (_reactNative().Animated.Value)(visible && !appear ? 1 : 0)).current;
@@ -34,6 +35,10 @@ const usePresenceAnimation = (visible, {
     animated.stopAnimation();
     if (visible) {
       setMounted(true);
+      if (!canAnimate) {
+        animated.setValue(0);
+        return;
+      }
       _reactNative().Animated.timing(animated, {
         toValue: 1,
         duration,
@@ -41,6 +46,11 @@ const usePresenceAnimation = (visible, {
         useNativeDriver
       }).start();
     } else {
+      if (!canAnimate) {
+        animated.setValue(0);
+        setMounted(false);
+        return;
+      }
       _reactNative().Animated.timing(animated, {
         toValue: 0,
         duration,
@@ -51,7 +61,7 @@ const usePresenceAnimation = (visible, {
         setMounted(false);
       });
     }
-  }, [animated, duration, easing, useNativeDriver, visible]);
+  }, [animated, canAnimate, duration, easing, useNativeDriver, visible]);
   return {
     mounted,
     animated

package/dist/es/components/area/Area.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 } from 'react';
+import React, { useCallback } from 'react';
 import Picker from '../picker';
 import { buildAreaColumns } from './utils';
 const normalizeCascadeValue = (root, raw, depth) => {
@@ -34,19 +34,13 @@ const Area = props => {
     city_list,
     county_list
   } = areaList;
-  const columns = useMemo(() => buildAreaColumns({
+  const columns = buildAreaColumns({
     province_list,
     city_list,
     county_list
-  }, resolvedColumnsNum), [province_list, city_list, county_list, resolvedColumnsNum]);
-  const normalizedValue = useMemo(() => {
-    if (value === undefined) return undefined;
-    return normalizeCascadeValue(columns, value, resolvedColumnsNum);
-  }, [columns, resolvedColumnsNum, value]);
-  const normalizedDefaultValue = useMemo(() => {
-    if (defaultValue === undefined) return undefined;
-    return normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum);
-  }, [columns, defaultValue, resolvedColumnsNum]);
+  }, resolvedColumnsNum);
+  const normalizedValue = value === undefined ? undefined : normalizeCascadeValue(columns, value, resolvedColumnsNum);
+  const normalizedDefaultValue = defaultValue === undefined ? undefined : normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum);
   const handleChange = useCallback((values, options) => {
     onChange?.(values.map(String), options);
   }, [onChange]);

package/dist/es/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/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/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/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/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/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/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/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/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/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);