@vellira-ui/react-native 2.44.4 → 2.44.5

package/dist/index.js

@@ -1789,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",
@@ -1799,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,
@@ -1820,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,
@@ -1830,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,
@@ -1845,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) => {
@@ -1874,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]);
@@ -1941,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 && {
@@ -1952,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,
@@ -1961,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
@@ -1974,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 },
@@ -1988,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
@@ -2002,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.4",
+  "version": "2.44.5",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",