@vellira-ui/react-native 2.44.3 → 2.44.5

package/dist/index.js

@@ -1528,8 +1528,26 @@ const createStyles$13 = (theme) => StyleSheet.create({ content: {
 //#endregion
 //#region src/components/Modal/Content/ModalContent.tsx
 const ModalContent = ({ children, style }) => {
-	return /* @__PURE__ */ jsx(View, {
-		style: [useThemeStyles(createStyles$13).content, style],
+	const styles = useThemeStyles(createStyles$13);
+	const { animation, animationProgress, open } = useModalContext();
+	const closedTranslateY = open ? animation === "slide" ? 16 : 8 : 4;
+	const closedScale = open ? .96 : .98;
+	const animatedStyle = animation === "none" ? void 0 : {
+		opacity: animationProgress,
+		transform: animation === "fade" ? [] : [{ translateY: animationProgress.interpolate({
+			inputRange: [0, 1],
+			outputRange: [closedTranslateY, 0]
+		}) }, ...animation === "scale" ? [{ scale: animationProgress.interpolate({
+			inputRange: [0, 1],
+			outputRange: [closedScale, 1]
+		}) }] : []]
+	};
+	return /* @__PURE__ */ jsx(Animated.View, {
+		style: [
+			styles.content,
+			style,
+			animatedStyle
+		],
 		children
 	});
 };
@@ -1582,27 +1600,55 @@ const createStyles$11 = (theme) => StyleSheet.create({
 //#region src/components/Modal/Overlay/ModalOverlay.tsx
 const ModalOverlay = ({ children, overlayStyle }) => {
 	const styles = useThemeStyles(createStyles$11);
-	const { closeOnOutsidePress, onClose, onOutsideClose, open } = useModalContext();
+	const { animation, animationProgress, closeOnOutsidePress, onClose, onOutsideClose, shouldRender } = useModalContext();
+	const backdropStyle = animation === "none" ? void 0 : { opacity: animationProgress };
 	return /* @__PURE__ */ jsx(Modal$1, {
-		visible: open,
+		visible: shouldRender,
 		transparent: true,
-		animationType: "fade",
+		animationType: "none",
 		onRequestClose: onClose,
 		children: /* @__PURE__ */ jsxs(View, {
 			style: [styles.overlay, overlayStyle],
-			children: [/* @__PURE__ */ jsx(Pressable, {
-				testID: "modal-backdrop",
-				accessibilityRole: closeOnOutsidePress ? "button" : void 0,
-				accessibilityLabel: closeOnOutsidePress ? "Close modal" : void 0,
-				style: styles.backdrop,
-				onPress: closeOnOutsidePress ? onOutsideClose : void 0
+			children: [/* @__PURE__ */ jsx(Animated.View, {
+				style: [styles.backdrop, backdropStyle],
+				children: /* @__PURE__ */ jsx(Pressable, {
+					testID: "modal-backdrop",
+					accessibilityRole: closeOnOutsidePress ? "button" : void 0,
+					accessibilityLabel: closeOnOutsidePress ? "Close modal" : void 0,
+					style: StyleSheet.absoluteFill,
+					onPress: closeOnOutsidePress ? onOutsideClose : void 0
+				})
 			}), children]
 		})
 	});
 };
 //#endregion
 //#region src/components/Modal/Root/ModalRoot.tsx
-const ModalRoot = ({ open, defaultOpen = false, onOpenChange, closeOnOutsidePress = true, children }) => {
+const linearEasing = (value) => value;
+const easingMap = {
+	standard: Easing?.bezier?.(.22, 1, .36, 1) ?? linearEasing,
+	linear: Easing?.linear ?? linearEasing,
+	ease: Easing?.ease ?? linearEasing,
+	"ease-in": Easing?.in?.(Easing?.ease ?? linearEasing) ?? linearEasing,
+	"ease-out": Easing?.out?.(Easing?.ease ?? linearEasing) ?? linearEasing,
+	"ease-in-out": Easing?.inOut?.(Easing?.ease ?? linearEasing) ?? linearEasing
+};
+const parseDuration = (duration) => Number.parseFloat(duration);
+const resolveDuration = (duration) => {
+	if (typeof duration === "number") return {
+		close: duration,
+		open: duration
+	};
+	return {
+		close: duration?.close ?? parseDuration(nativeThemes.light.components.modal.motion.closeDuration),
+		open: duration?.open ?? parseDuration(nativeThemes.light.components.modal.motion.openDuration)
+	};
+};
+const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale", duration, easing = "standard", closeOnOutsidePress = true, children }) => {
+	const initialOpen = open ?? defaultOpen;
+	const animationProgress = useRef(new Animated.Value(initialOpen ? 1 : 0));
+	const [shouldRender, setShouldRender] = useState(initialOpen);
+	const [reduceMotion, setReduceMotion] = useState(false);
 	const modal = useModal({
 		open,
 		defaultOpen,
@@ -1615,13 +1661,62 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, closeOnOutsidePres
 		closeOnOutsidePress: modal.closeOnOutsidePress,
 		requestClose: modal.requestClose
 	});
+	const animationDuration = resolveDuration(duration);
+	const shouldAnimate = animation !== "none" && !reduceMotion;
+	useEffect(() => {
+		AccessibilityInfo.isReduceMotionEnabled?.().then(setReduceMotion);
+		const subscription = AccessibilityInfo.addEventListener?.("reduceMotionChanged", setReduceMotion);
+		return () => {
+			subscription?.remove();
+		};
+	}, []);
+	useEffect(() => {
+		const progress = animationProgress.current;
+		if (modal.open) {
+			setShouldRender(true);
+			if (!shouldAnimate) {
+				progress.setValue(1);
+				return;
+			}
+			progress.setValue(0);
+			Animated.timing(progress, {
+				toValue: 1,
+				duration: animationDuration.open,
+				easing: easingMap[easing],
+				useNativeDriver: Platform.OS !== "web"
+			}).start();
+			return;
+		}
+		if (!shouldAnimate) {
+			progress.setValue(0);
+			setShouldRender(false);
+			return;
+		}
+		Animated.timing(progress, {
+			toValue: 0,
+			duration: animationDuration.close,
+			easing: easingMap[easing],
+			useNativeDriver: Platform.OS !== "web"
+		}).start(({ finished }) => {
+			if (finished) setShouldRender(false);
+		});
+	}, [
+		animationDuration.close,
+		animationDuration.open,
+		easing,
+		modal.open,
+		shouldAnimate
+	]);
 	return /* @__PURE__ */ jsx(ModalContext.Provider, {
 		value: {
+			animation,
+			animationProgress: animationProgress.current,
 			closeOnOutsidePress: modal.closeOnOutsidePress,
 			onClose: dismiss.requestClose,
 			onOutsideClose: dismiss.requestOutsideClose,
 			open: modal.open,
-			setOpen: modal.setOpen
+			setOpen: modal.setOpen,
+			shouldRender
 		},
 		children
 	});
@@ -1694,7 +1789,7 @@ const createStyles$10 = (theme) => StyleSheet.create({
 		alignItems: "flex-start",
 		gap: theme.tokens.spacing[2]
 	},
-	pressablePressed: { opacity: .8 },
+	pressablePressed: { opacity: theme.components.radio.motion.pressedOpacity },
 	pressableDisabled: { opacity: 1 },
 	control: {
 		alignItems: "center",
@@ -1704,14 +1799,6 @@ const createStyles$10 = (theme) => StyleSheet.create({
 		borderColor: theme.components.radio.default.border,
 		backgroundColor: theme.components.radio.default.bg
 	},
-	controlChecked: {
-		borderColor: theme.components.radio.primary.default.border,
-		backgroundColor: theme.components.radio.primary.default.bg
-	},
-	controlCheckedPressed: {
-		borderColor: theme.components.radio.primary.pressed.border,
-		backgroundColor: theme.components.radio.primary.pressed.bg
-	},
 	controlInvalid: { borderColor: theme.components.radio.invalid.border },
 	controlDisabled: {
 		borderColor: theme.components.radio.disabled.border,
@@ -1725,7 +1812,6 @@ const createStyles$10 = (theme) => StyleSheet.create({
 		borderRadius: theme.tokens.radius.full,
 		backgroundColor: theme.components.radio.primary.default.fg
 	},
-	indicatorPressed: { backgroundColor: theme.components.radio.primary.pressed.fg },
 	indicatorDisabled: { backgroundColor: theme.components.radio.selectedDisabled.fg },
 	content: {
 		flexShrink: 1,
@@ -1735,8 +1821,6 @@ const createStyles$10 = (theme) => StyleSheet.create({
 		color: theme.components.radio.default.fg,
 		fontFamily: theme.tokens.typography.family.regular
 	},
-	labelChecked: { color: theme.components.radio.primary.default.labelFg },
-	labelCheckedPressed: { color: theme.components.radio.primary.pressed.labelFg },
 	labelInvalid: { color: theme.components.radio.invalid.fg },
 	description: {
 		color: theme.components.formField.description.fg,
@@ -1750,16 +1834,6 @@ const createStyles$10 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/primitives/Radio/Radio.tsx
-const controlSizeBySize = {
-	sm: 14,
-	md: 16,
-	lg: 20
-};
-const indicatorSizeBySize = {
-	sm: 6,
-	md: 8,
-	lg: 10
-};
 const nativePointerEventsNone$4 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
 const webPointerEventsNone$4 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: disabledProp = false, required: requiredProp = false, size: sizeProp, color: colorProp, onCheckedChange, label, description, icon, error, accessibilityLabel, accessibilityHint, containerStyle, labelStyle, descriptionStyle, errorStyle, style, ...rest }, ref) => {
@@ -1779,29 +1853,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 	const resolvedSize = sizeProp ?? group?.size ?? "md";
 	const resolvedColor = colorProp ?? group?.color ?? "primary";
 	const radioColor = theme.components.radio[resolvedColor];
-	const controlSize = controlSizeBySize[resolvedSize];
-	const indicatorSize = indicatorSizeBySize[resolvedSize];
-	const typographySize = {
-		sm: {
-			labelSize: theme.tokens.typography.size.sm,
-			labelLineHeight: theme.tokens.typography.lineHeight.sm,
-			descriptionSize: theme.tokens.typography.size.xs,
-			descriptionLineHeight: theme.tokens.typography.lineHeight.xs
-		},
-		md: {
-			labelSize: theme.tokens.typography.size.md,
-			labelLineHeight: theme.tokens.typography.lineHeight.md,
-			descriptionSize: theme.tokens.typography.size.sm,
-			descriptionLineHeight: theme.tokens.typography.lineHeight.sm
-		},
-		lg: {
-			labelSize: theme.tokens.typography.size.lg,
-			labelLineHeight: theme.tokens.typography.lineHeight.lg,
-			descriptionSize: theme.tokens.typography.size.md,
-			descriptionLineHeight: theme.tokens.typography.lineHeight.md
-		}
-	}[resolvedSize];
-	const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
+	const radioSize = theme.components.radio.size[resolvedSize];
+	const controlMarginTop = (radioSize.labelLineHeight - radioSize.controlSize) / 2;
 	useEffect(() => {
 		if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) console.warn("Radio requires either a visible label or accessibilityLabel.");
 	}, [accessibilityLabel, label]);
@@ -1846,8 +1899,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					styles.control,
 					webPointerEventsNone$4,
 					{
-						width: controlSize,
-						height: controlSize,
+						width: radioSize.controlSize,
+						height: radioSize.controlSize,
 						marginTop: controlMarginTop
 					},
 					resolvedChecked && {
@@ -1857,7 +1910,7 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					resolvedChecked && state.pressed && !resolvedDisabled && {
 						backgroundColor: radioColor.pressed.bg,
 						borderColor: radioColor.pressed.border,
-						transform: [{ scale: .96 }]
+						transform: [{ scale: theme.components.radio.motion.pressedScale }]
 					},
 					resolvedInvalid && styles.controlInvalid,
 					resolvedDisabled && styles.controlDisabled,
@@ -1866,8 +1919,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 				children: resolvedChecked && (icon ?? /* @__PURE__ */ jsx(View, { style: [
 					styles.indicator,
 					{
-						width: indicatorSize,
-						height: indicatorSize,
+						width: radioSize.indicatorSize,
+						height: radioSize.indicatorSize,
 						backgroundColor: state.pressed && !resolvedDisabled ? radioColor.pressed.fg : radioColor.default.fg
 					},
 					resolvedDisabled && styles.indicatorDisabled
@@ -1879,8 +1932,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					style: [
 						styles.label,
 						{
-							fontSize: typographySize.labelSize,
-							lineHeight: typographySize.labelLineHeight
+							fontSize: radioSize.labelFontSize,
+							lineHeight: radioSize.labelLineHeight
 						},
 						resolvedChecked && { color: radioColor.default.labelFg },
 						resolvedChecked && state.pressed && !resolvedDisabled && { color: radioColor.pressed.labelFg },
@@ -1893,8 +1946,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					style: [
 						styles.description,
 						{
-							fontSize: typographySize.descriptionSize,
-							lineHeight: typographySize.descriptionLineHeight
+							fontSize: radioSize.descriptionFontSize,
+							lineHeight: radioSize.descriptionLineHeight
 						},
 						resolvedDisabled && styles.textDisabled,
 						descriptionStyle
@@ -1907,9 +1960,9 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 			style: [
 				styles.error,
 				{
-					marginLeft: controlSize + theme.tokens.spacing[2],
-					fontSize: typographySize.descriptionSize,
-					lineHeight: typographySize.descriptionLineHeight
+					marginLeft: radioSize.controlSize + theme.tokens.spacing[2],
+					fontSize: radioSize.descriptionFontSize,
+					lineHeight: radioSize.descriptionLineHeight
 				},
 				errorStyle
 			],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.44.3",
+  "version": "2.44.5",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",